Compare commits
2 Commits
main
...
560c089639
| Author | SHA1 | Date | |
|---|---|---|---|
|
560c089639 | ||
|
|
ebc1d7c5ef |
10
.env.example
10
.env.example
@@ -13,22 +13,12 @@ POSTGRES_DB=graphdb
|
||||
# --- Application Security ---
|
||||
# The API key used by n8n to authenticate with the backend
|
||||
API_KEY=nexstar_secret_key_123
|
||||
N8N_WHATSAPP_TRIGGER_URL=https://n8n.example.com/webhook/whatsapp-stock
|
||||
|
||||
# --- Dashboard Login Credentials ---
|
||||
ADMIN_EMAIL=admin@admin.com
|
||||
ADMIN_PASSWORD=admin123
|
||||
JWT_SECRET=super_secret_jwt_key_123
|
||||
|
||||
# --- CAPTCHA / Bot Protection (Optional) ---
|
||||
# Create keys in Cloudflare Turnstile and set both values in production.
|
||||
# When TURNSTILE_SECRET is empty, backend CAPTCHA enforcement is disabled.
|
||||
TURNSTILE_SITE_KEY=
|
||||
TURNSTILE_SECRET=
|
||||
# Backward-compatible aliases also accepted by the backend:
|
||||
# VITE_TURNSTILE_SITE_KEY=
|
||||
# TURNSTILE_SECRET_KEY=
|
||||
|
||||
# --- Frontend Configuration (Optional) ---
|
||||
# If you need to override the API URL for the frontend
|
||||
# VITE_API_URL=/api
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -11,7 +11,6 @@ node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.env
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
|
||||
220
CONTEXT.md
220
CONTEXT.md
@@ -1,220 +0,0 @@
|
||||
# Context
|
||||
|
||||
## 1. Project Overview
|
||||
This project (often referred to as "Nexstar Graphs" or simply "Graphs") is a real-time sales and inventory dashboard. Its primary purpose is to ingest live webhook payloads from an external ERP (Tiny ERP) via n8n, securely store that data, and provide a visually rich, responsive dashboard for business analytics. It tracks total sales, product performance, customer behavior, and live inventory levels, while also providing tools for WhatsApp marketing campaigns.
|
||||
|
||||
## 2. Tech Stack & Tooling
|
||||
|
||||
**Frontend:**
|
||||
* **Library:** React 19.2.5
|
||||
* **Language:** TypeScript 6.0.2
|
||||
* **Build Tool:** Vite 8.0.10
|
||||
* **Styling:** Tailwind CSS 4.2.4
|
||||
* **Icons:** Lucide React 1.14.0
|
||||
* **Charts:** Recharts 3.8.1
|
||||
* **Routing:** React Router DOM 7.14.2
|
||||
|
||||
**Backend:**
|
||||
* **Environment:** Node.js
|
||||
* **Framework:** Express 5.2.1
|
||||
* **Database:** PostgreSQL (via `pg` 8.20.0)
|
||||
* **Authentication:** JWT (`jsonwebtoken` 9.0.3)
|
||||
* **CORS & Middleware:** `cors`, `body-parser`
|
||||
|
||||
**Infrastructure & CI/CD:**
|
||||
* **Containerization:** Docker & Docker Compose
|
||||
* **Proxy:** Nginx
|
||||
* **CI/CD:** Gitea Actions (deploy.yml)
|
||||
* **Automation:** n8n (External trigger source)
|
||||
|
||||
## 3. Architecture & Design Decisions
|
||||
* **Decoupled Client-Server:** The frontend is a statically built SPA served by Nginx, communicating with an isolated Node.js API.
|
||||
* **Idempotent Database Operations:** Due to potential retry/spam from n8n webhooks, database insertions strictly use `INSERT ... ON CONFLICT DO UPDATE SET` (UPSERTs). The backend dynamically generates fallback IDs using composite keys (`Name_Date_Value`) to prevent historical data squashing when explicit `ID_Pedido` fields are missing.
|
||||
* **Persistent Campaign Queue:** Stock increases are no longer held in memory. Positive stock deltas are inserted into `stock_campaign_queue`, grouped by normalized base product, and processed later by a scheduled n8n workflow. This survives restarts and lets operators inspect/retry campaign work.
|
||||
* **Scheduled Campaign Processing:** n8n calls `POST /api/internal/process-stock-campaigns` on fixed schedules, currently intended for 12:00 and 18:00 BRT. The endpoint claims ready product groups where accumulated delta is at least 100, combines all ready products into one campaign payload, and sends it to `N8N_WHATSAPP_TRIGGER_URL`.
|
||||
* **All-Time Top Buyers:** Campaign targeting uses the top 100 buyers across all order history. There is no date filter in this query. Customers are grouped by `cliente_fone` and ordered by total spend (`SUM(quantidade * valor_unitario)`).
|
||||
* **Smart Polling vs. SSE:** Real-time UI updates are handled via client-side polling (`setInterval`) rather than Server-Sent Events (SSE) to bypass persistent connection drops caused by production reverse proxies.
|
||||
* **Backend Analytics Foundation:** Raw `/api/data` still exists for legacy pages, but dashboard/product/client aggregate endpoints now exist under `/api/analytics/*`. Dashboard already uses the backend dashboard aggregation endpoint so it does not wait on the full raw order download.
|
||||
* **Route Code Splitting:** Frontend routes are lazy-loaded with `React.lazy`/`Suspense` so the first JS payload stays smaller. Recharts-heavy page chunks are loaded on demand.
|
||||
* **Analytics Client Cache:** Frontend analytics requests use a small shared cache/deduping layer in `src/dataService.ts`. Navigating between Dashboard, RFV, Products, and Clients should reuse fresh responses instead of refetching every route mount unless query params change or the cache expires.
|
||||
* **Tiny as Current Source, Graphs as Future Operating Layer:** Tiny ERP is the current source for sales, product/order metadata, and stock. Graphs should increasingly become the place where the business manages production intelligence: cut configuration, SKU families, raw material relationships, consumption references, and operational charts. `NECESSIDADE DE CORTE.xlsx` is reference material only and must not become a runtime dependency.
|
||||
|
||||
## 4. Directory Structure
|
||||
```text
|
||||
/
|
||||
├── .gitea/workflows/ # CI/CD pipeline definitions
|
||||
├── backend/ # Node.js Express API
|
||||
│ ├── Dockerfile # Backend container definition
|
||||
│ ├── index.js # Backend entry point
|
||||
│ ├── db.js # PostgreSQL pool and startup schema/migration SQL
|
||||
│ ├── routes/ # Express route modules
|
||||
│ ├── services/ # Business logic and campaign processing
|
||||
│ ├── mappers/ # Payload normalization helpers
|
||||
│ ├── test/ # Node test runner tests
|
||||
│ └── package.json
|
||||
├── public/ # Static assets (Favicons)
|
||||
├── src/ # React Frontend Application
|
||||
│ ├── components/ # Reusable UI elements (Layout, DateRangePicker)
|
||||
│ ├── pages/ # Route-level views (Dashboard, Products, Clients)
|
||||
│ ├── dataService.ts # Centralized API fetch logic and JWT handling
|
||||
│ ├── types.ts # Shared TypeScript interfaces
|
||||
│ └── main.tsx # React entry point
|
||||
├── docker-compose.yml # Local orchestration and environment variable mapping
|
||||
├── nginx.conf # Production web server routing
|
||||
└── vite.config.ts # Frontend build configuration
|
||||
```
|
||||
|
||||
## 5. Core Business Rules & Domain Entities
|
||||
* **Order Entity (`orders` table):** Tracks `cliente_nome`, `data_pedido`, normalized `data_pedido_date`, `valor_pedido`, `produto_id`, `quantidade`, `valor_unitario`, `pedido_id`, and `cliente_fone`. Tiny ERP metadata is also persisted when present: `cliente_nome_fantasia`, `id_vendedor`, `nome_vendedor`, `marketplace`, `canal_venda`, and `numero_ecommerce`.
|
||||
* **Order Metadata Preservation:** Order upserts preserve existing non-empty phone and Tiny metadata values when incoming backfill rows send `NULL` or empty strings. Core mutable order/item fields still overwrite normally.
|
||||
* **Client Identity Rule:** Analytics groups clients by a stable normalized identity so adding a phone number later does not split an existing buyer into a duplicate client. When a phone is added after historical purchases without phone, the old and new rows should resolve to the same client profile and history.
|
||||
* **Stock Entity (`stock` table):** Tracks `produto_id`, `nome`, `saldo` (absolute current inventory), and `delta_estoque`. The database treats the ERP's `saldo` as the Absolute Truth (overwriting existing values rather than performing math) to prevent desynchronization.
|
||||
* **Campaign Queue Entity (`stock_campaign_queue` table):** Tracks queued product restock deltas by `base_product_name`, product ID/name, delta, status (`pending`, `processing`, `sent`, `failed`, `skipped`), attempts, errors, and timestamps.
|
||||
* **WhatsApp Campaign Payload:** The backend sends one n8n webhook payload per scheduled campaign run. The payload includes `baseProduct`, `productsText`, `total_delta`, `sizes`, `products`, and `customers`.
|
||||
* **Campaign Product Display Names:** Product display text is customer-facing and may differ from internal grouping. Current aliases: `BASE LISA CAMISETA ...` -> `Camiseta Premium ...`, `BASE LISA OVER SIZE ...` -> `Camiseta Premium Over Size ...`, and `BASE LISA MOLETOM CANGURU ...` -> `Moletom Canguru Premium ...`.
|
||||
* **Campaign Product List Format:** Because Meta templates collapsed/ignored newlines inside one parameter, `productsText` is a single-line separator list: `Produto 1 • Produto 2 • Produto 3`. There is no leading bullet before the first product.
|
||||
* **Base Product Normalization:** Apparel size suffixes like `TAMANHO - P`, `- M`, `- G`, `- GG`, and `- M/G/GG` are stripped for campaign grouping. `ETIQUETA...` products are special-cased and preserve their full variant name, e.g. `ETIQUETA BRANCA TAMANHO GG`.
|
||||
* **Campaign Observability:** The frontend has a `Campanhas` page backed by `/api/campaigns`, `/api/campaigns/preview`, `/api/campaigns/process`, and `/api/campaigns/retry`.
|
||||
* **WhatsApp Marketing Integration:** The system extracts phone numbers from incoming n8n payloads (checking `Fone_Cliente`, `fone`, or `celular`). Numbers are exposed in the UI for direct "Click-to-Chat" links and exported to CSV files.
|
||||
* **Filter Persistence:** User preferences for Date Ranges, Sort options, and Auto-Refresh intervals are persisted to `localStorage` to survive page reloads.
|
||||
* **RFV Segmentation:** The Portuguese UI calls customer segmentation **RFV** (`Recência`, `Frequência`, `Valor`). Internal code/API names may still use `rfm` to avoid route/type churn. The visible app labels should use RFV.
|
||||
* **RFV Lifecycle Thresholds:** The active lifecycle is monthly, not yearly. Recency score 3 means last purchase in `0-7` days, score 2 means `8-15` days, score 1 starts at `16+` days, and clients with no purchase for `30+` days are forced into `Perdido`.
|
||||
* **RFV Date Semantics:** Date filters use local calendar-day boundaries and send stable `YYYY-MM-DD` query params. Backend analytics treats `start` and `end` as inclusive `data_pedido_date` bounds.
|
||||
* **RFV Tag Aggregation Rule:** RFV is not recalculated from only the selected period. For a selected period, the backend first calculates each buyer's RFV tag using history **before the period starts**. It then aggregates only the purchases inside the selected period by that prior tag. Example: if a client was `Champions` before today and buys today, `Champions` gets +1 client and that period revenue. If an `Em Risco` client does not buy today, `Em Risco` does not get counted for today's filter.
|
||||
* **RFV Display Rule:** The RFV table's `Última Compra` date is the purchase date inside the selected period. Date-only strings must be parsed as local dates in the frontend to avoid UTC shifting (`2026-06-15` must render as `15/06/2026`, not `14/06/2026`). The small recency text below it displays `Hoje`, `Ontem`, or `X dias` relative to the selected range end.
|
||||
* **Client Page Filters:** The main Clients page has one filter button plus client search. The filter panel contains date shortcuts/custom dates, sorting, marketplace, sales channel, seller, and client type. Marketplace/channel/seller options come from distinct non-empty order metadata across all orders so options remain visible regardless of the current date window.
|
||||
* **Seller Metadata Display:** Seller labels are cleaned for UI display. All-caps seller names are title-cased, trailing Tiny IDs like `#977226210` are stripped from labels, and leading fantasy-name prefixes like `[3]` are removed for display. IDs may still be used internally as stable filter values.
|
||||
* **Seller Dashboard Charts:** The main Dashboard includes seller performance charts above the existing charts, using backend aggregates for revenue and order count by seller. Long date ranges are bucketed into week/month views for readability. Seller labels like `0`/empty values are displayed as `Sem vendedor`. The seller moving-average line is optional behind the `Tendência` toggle because it can be confused with another seller series.
|
||||
* **Product Chart Readability:** Product detail charts use automatic date bucketing, cleaner x-axis labels, clickable point drill-downs, and a moving average on the single-product view. Product detail KPIs include daily average sold and estimated stock coverage based on the selected date range.
|
||||
|
||||
## 6. Supply, Cutting, and Data Flow Requirements
|
||||
Tiny provides sales and stock facts, but it does not fully describe how a finished SKU consumes raw material. For Suprimentos and Corte to work reliably, Graphs needs internal domain data that complements Tiny.
|
||||
|
||||
**Current operating assumption:**
|
||||
* Tiny sends orders, product IDs/names, seller/order metadata, and current stock.
|
||||
* Graphs derives demand, sales velocity, replenishment pressure, and cut/material needs from Tiny data plus local configuration.
|
||||
* Excel files are examples of current manual management only. They should guide UX/data modeling but not be imported as the long-term source of truth.
|
||||
|
||||
**Core missing relationship:**
|
||||
```text
|
||||
Finished SKU -> raw material -> consumption/yield
|
||||
```
|
||||
|
||||
Example:
|
||||
```text
|
||||
BASE LISA CAMISETA PRETA G
|
||||
uses: MALHA 100% ALGODAO PRETA
|
||||
yield: 4.8 units/kg
|
||||
```
|
||||
|
||||
**Data Graphs must own or enrich locally:**
|
||||
* **Finished SKU catalog:** SKU/id, name, color, size, product family, cut family, active/inactive.
|
||||
* **Raw material catalog:** material SKU/id, name, type (`malha`, `ribana`, `fio`, etc.), color, supplier, unit (`kg`, `metro`, `unidade`), and whether it is raw input instead of finished stock.
|
||||
* **Consumption references:** finished SKU, material product, yield per kg, optional yield by size, optional color/family overrides, and secondary materials when needed.
|
||||
* **Cut family mapping:** rules that say which colors/sizes/products can be planned together for cutting.
|
||||
* **Open production/cutting data:** quantities already in production, expected finish date, linked finished SKU, and linked raw material when available.
|
||||
* **Business rules:** target coverage days, minimum stock, safety stock, purchase lead time, production lead time, and discontinued/ignored SKU rules.
|
||||
|
||||
**Current UI/data-flow behavior:**
|
||||
* `Suprimentos > Necessidade de Compra` derives material pressure from demand and stock, but rows without a consumption reference are marked as missing reference instead of pretending to calculate kg.
|
||||
* Missing-reference rows link into `Cadastros > Referência de Consumo` with SKU context. If the SKU does not exist in the local catalog yet, `Cadastros` opens the product form first.
|
||||
* `Plano de Corte` SKU edit actions deep-link into the cutting configuration drawer for that SKU.
|
||||
* Product tables and group detail tables are tuned for high-volume values, including large `Total Vendido` quantities above 100k.
|
||||
|
||||
## 7. CI/CD & Deployment
|
||||
* **Gitea Actions:** A workflow located in `.gitea/workflows/deploy.yml` triggers on pushes to the `main` branch.
|
||||
* **Docker Registry:** The pipeline builds the `frontend` and `backend` Docker images and pushes them directly to `gitea.blyzer.com.br/blyzer/`.
|
||||
* **Production Deployment:** Updates are deployed manually via Portainer by pulling the `latest` image tags from the Gitea registry and redeploying the stack.
|
||||
* **Environment Variables:** Security secrets (`API_KEY`, `JWT_SECRET`, `POSTGRES_PASSWORD`, `N8N_WHATSAPP_TRIGGER_URL`) are injected via the Portainer stack configuration and passed into containers via `docker-compose.yml`.
|
||||
|
||||
## 8. Environment Setup & Scripts
|
||||
|
||||
**Running Locally:**
|
||||
1. Start the database:
|
||||
```bash
|
||||
docker compose up -d db
|
||||
```
|
||||
2. Start the Backend (from `/backend`):
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
3. Start the Frontend (from project root):
|
||||
```bash
|
||||
npm install
|
||||
npm run dev # For HMR development
|
||||
npm run preview # For production build testing
|
||||
```
|
||||
|
||||
**Building the Frontend:**
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
**Backend Tests:**
|
||||
```bash
|
||||
cd backend
|
||||
npm test
|
||||
```
|
||||
|
||||
**Frontend Date/RFV Helper Test:**
|
||||
```bash
|
||||
node --experimental-strip-types --test src/dateRanges.test.ts
|
||||
```
|
||||
|
||||
**Persistent Local Stack:**
|
||||
```bash
|
||||
docker compose up -d --build
|
||||
```
|
||||
The local Docker services use `restart: unless-stopped`, so containers should come back after laptop restart if Docker starts.
|
||||
|
||||
## 9. Coding Standards & AI Directives
|
||||
* **Strict Type Safety:** Use explicit TypeScript interfaces (defined in `types.ts`). Avoid `any` where possible. Do not bypass type checks with `// @ts-ignore`.
|
||||
* **Idiomatic React:** Use functional components and hooks (`useState`, `useEffect`, `useMemo`). Complex data transformations (like merging arrays into chart-ready datasets) MUST be wrapped in `useMemo` to prevent unnecessary re-renders.
|
||||
* **Tailwind Architecture:** All styling must be handled via Tailwind CSS utility classes. Avoid custom CSS files unless defining global font families or root variables in `index.css`.
|
||||
* **Robust Data Handling:** Always implement graceful fallbacks for missing data. Never assume an API payload will contain all keys. (e.g., `item.id || item.ID_Pedido || ''`).
|
||||
* **Database Migrations:** There is no ORM (like Prisma or Sequelize). Table schemas, indexes, and lightweight data repairs are managed via raw SQL statements inside `initDB()` in `backend/db.js` using `IF NOT EXISTS` and safe startup execution patterns.
|
||||
* **API Security:** All backend modifications exposing or altering data MUST use the `verifyToken` middleware for frontend requests or `authenticateAPIKey` for external n8n webhooks.
|
||||
* **Build Discipline:** After frontend/backend behavior changes, run `npm run lint`, `npm run build`, and relevant backend tests. The user prefers builds after changes to catch issues before deployment.
|
||||
|
||||
## 10. Recent Work
|
||||
Recent commits related to RFV/date and client metadata behavior:
|
||||
* `4131bf9 Update RFV lifecycle to monthly windows` - RFV recency/lost thresholds changed to `0-7`, `8-15`, `16-29`, and `30+` lost.
|
||||
* `ef27cff Add seller performance dashboard charts` - dashboard now includes seller revenue/order charts.
|
||||
* `ca9615a Clean seller metadata display names` - seller/fantasy labels are normalized for display.
|
||||
* `b129307 Fix seller filter options query` - seller filter options are selected reliably from order metadata.
|
||||
* `b40f6fa Restore seller dropdown filter` - seller filter uses a dropdown option list again.
|
||||
* `aeb801c Allow searching sellers in client filters` - seller filter UI supports searching.
|
||||
* `b7a2059 Show all client metadata filter options` - client metadata filter options are global, not date-scoped.
|
||||
* `06faada Refresh client filter options reliably` - filter option fetching was made more robust.
|
||||
* `7d60073 Smooth analytics page reloads` - analytics fetches now reuse cached/deduped results between pages.
|
||||
* `335d231 Fix client identity when phone is added` - client grouping prevents phone-added duplicate profiles.
|
||||
* `73033ca Aggregate RFM period buyers by prior tag` - backend RFV aggregation now groups period buyers by their prior tag.
|
||||
* `ae73a54 Fix RFM period date display` - frontend date-only display and period recency fixed.
|
||||
* `9a58b2a Improve RFM recency labels` - period recency labels show `Hoje`/`Ontem`/`X dias`.
|
||||
* `f811d3c Rename visible RFM labels to RFV` - visible UI wording changed from RFM to RFV.
|
||||
|
||||
Files most relevant to RFV:
|
||||
* `backend/services/analyticsService.js` - `getRfmAnalytics`, date filters, RFV score/tag logic.
|
||||
* `backend/test/analyticsService.test.js` - unit coverage for date filters and RFV aggregation.
|
||||
* `src/pages/Rfm.tsx` - RFV page UI, matrix/table/export labels, period recency display.
|
||||
* `src/components/DateRangePicker.tsx` and `src/dateRanges.ts` - local calendar date ranges and ISO query param formatting.
|
||||
* `src/dataService.ts` - analytics fetch/cache helpers and client filter option requests.
|
||||
* `src/displayFormatters.ts` - shared seller/fantasy/client metadata display cleanup.
|
||||
|
||||
Recent commits related to supply/cutting/data-flow and chart readability:
|
||||
* `060b4da Connect supplies to project demand` - Suprimentos purchase needs now derive from project/order demand and stock, while missing consumption references are surfaced explicitly.
|
||||
* `bc05fb4 Add SKU edit actions` - product/cutting/replenishment/group tables gained compact SKU view/edit actions.
|
||||
* `63efb47 Route SKU actions to focused editors` - cut-plan edit opens SKU cutting configuration; missing-reference supply rows open the consumption reference flow.
|
||||
* `9489318 Improve chart readability and drilldowns` - dashboard/product charts gained date bucketing, cleaner unknown labels, click drill-downs, and product stock coverage context.
|
||||
* `ba9cc3a Fix large sold quantity icon layout` - product/group sold quantity cells handle large values without icon compression.
|
||||
* `f923489 Make dashboard trend line optional` - dashboard moving-average trend line is hidden by default and available through `Tendência`.
|
||||
|
||||
Files most relevant to supply/cutting/data-flow:
|
||||
* `src/pages/Supplies.tsx` - supply dashboard, receipts, inventory, movements, and purchase-need UI.
|
||||
* `src/pages/Cutting.tsx` - cut plan, cut settings drawer, SKU correction/deep-link flow.
|
||||
* `src/pages/Registrations.tsx` - local catalog, raw materials, finished products, and consumption references.
|
||||
* `src/catalogLinks.ts` - shared deep-link builders for SKU edit, cutting config, and consumption references.
|
||||
* `src/analytics/cutting.ts` - cut-family parsing, cut needs, stock coverage, and product override logic.
|
||||
* `src/pages/Products.tsx` and `src/pages/ProductGroupDetails.tsx` - product/group velocity, stock coverage, and high-volume display.
|
||||
* `src/chartUtils.ts` - shared date bucketing, moving average, unknown-label cleanup, and chart date helpers.
|
||||
@@ -11,4 +11,4 @@ FROM nginx:alpine
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
193
README.md
193
README.md
@@ -1,140 +1,73 @@
|
||||
# Nexstar Graphs
|
||||
# React + TypeScript + Vite
|
||||
|
||||
Real-time sales and stock dashboard for Nexstar. The app receives Tiny ERP data through n8n webhooks, stores it in PostgreSQL, and renders sales, products, clients, stock, and WhatsApp campaign data in a React dashboard.
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
## Stack
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- Frontend: React, TypeScript, Vite, Tailwind CSS, Recharts
|
||||
- Backend: Node.js, Express, PostgreSQL, JWT, API-key webhook auth
|
||||
- Runtime: Docker Compose, Nginx, n8n
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## Main Flows
|
||||
## React Compiler
|
||||
|
||||
### Sales Ingestion
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
```text
|
||||
n8n -> POST /api/data -> PostgreSQL orders -> dashboard
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
The endpoint accepts a single order item or an array. Requests must include:
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```text
|
||||
x-api-key: <API_KEY>
|
||||
Content-Type: application/json
|
||||
```
|
||||
|
||||
### Stock Ingestion
|
||||
|
||||
```text
|
||||
n8n -> POST /api/stock -> PostgreSQL stock + campaign queue
|
||||
```
|
||||
|
||||
Positive stock deltas are queued for WhatsApp campaigns. The scheduled processor groups pending queue rows by base product name and sends a campaign only when the accumulated pending delta reaches at least `100`.
|
||||
|
||||
### Scheduled WhatsApp Campaigns
|
||||
|
||||
```text
|
||||
n8n schedule at 12:00/18:00 BRT
|
||||
-> POST /api/internal/process-stock-campaigns
|
||||
-> backend calls N8N_WHATSAPP_TRIGGER_URL
|
||||
-> n8n WhatsApp workflow sends templates
|
||||
```
|
||||
|
||||
The scheduled endpoint is API-key protected and returns a summary:
|
||||
|
||||
```json
|
||||
{
|
||||
"claimed": 0,
|
||||
"sentGroups": 0,
|
||||
"skippedGroups": 0,
|
||||
"failedGroups": 0,
|
||||
"pendingBelowThresholdGroups": 0
|
||||
}
|
||||
```
|
||||
|
||||
### Cutting Workbook Import
|
||||
|
||||
Manual cutting/replenishment workbooks can be normalized into JSON before they
|
||||
are persisted or shown in the app:
|
||||
|
||||
```bash
|
||||
python3 backend/scripts/normalize_cut_workbook.py "/path/to/NECESSIDADE DE CORTE.xlsx" --pretty -o /tmp/necessidade_corte_normalized.json
|
||||
```
|
||||
|
||||
The output includes purchase need rows, production orders, finished stock,
|
||||
stock plus OP availability, real purchase need, outside items, and cut-plan
|
||||
sections by family (`BLCS`, `BLMC`, `BLOS`, `BLPM`). The importer reads cached
|
||||
workbook values and reports broken formula references instead of making the app
|
||||
depend on Excel formulas at runtime.
|
||||
|
||||
## Local Development
|
||||
|
||||
Start PostgreSQL:
|
||||
|
||||
```bash
|
||||
docker compose up -d db
|
||||
```
|
||||
|
||||
Start the backend:
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
Start the frontend:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Default local URLs:
|
||||
|
||||
```text
|
||||
Frontend: http://127.0.0.1:3002
|
||||
Backend: http://127.0.0.1:3004
|
||||
```
|
||||
|
||||
Vite may choose a different frontend port if `3002` is already in use.
|
||||
|
||||
## Environment
|
||||
|
||||
Copy `.env.example` and configure production secrets in the runtime environment:
|
||||
|
||||
```text
|
||||
POSTGRES_USER
|
||||
POSTGRES_PASSWORD
|
||||
POSTGRES_DB
|
||||
API_KEY
|
||||
N8N_WHATSAPP_TRIGGER_URL
|
||||
ADMIN_EMAIL
|
||||
ADMIN_PASSWORD
|
||||
JWT_SECRET
|
||||
TURNSTILE_SITE_KEY
|
||||
TURNSTILE_SECRET
|
||||
```
|
||||
|
||||
`TURNSTILE_SECRET` enables backend CAPTCHA enforcement on `/api/login`. Set
|
||||
`TURNSTILE_SITE_KEY` with Cloudflare's public site key so the login page can load
|
||||
the verification widget at runtime.
|
||||
|
||||
The backend also accepts `VITE_TURNSTILE_SITE_KEY` as a site-key alias and
|
||||
`TURNSTILE_SECRET_KEY` as a secret alias for older deployments.
|
||||
|
||||
## Validation
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
npm run build
|
||||
```
|
||||
|
||||
For backend syntax checks:
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
node --check index.js
|
||||
node --check services/campaignService.js
|
||||
node --check services/stockService.js
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
const jwt = require('jsonwebtoken');
|
||||
const { ADMIN_EMAIL, ADMIN_PASSWORD, API_KEY, JWT_SECRET } = require('./config');
|
||||
const { findUserByEmail, normalizeEmail, publicUserFields, verifyPassword } = require('./services/userService');
|
||||
|
||||
const verifyToken = (req, res, next) => {
|
||||
const authHeader = req.headers.authorization;
|
||||
if (!authHeader) return res.status(403).json({ error: 'No token provided' });
|
||||
|
||||
const token = authHeader.split(' ')[1];
|
||||
if (!token) return res.status(403).json({ error: 'Malformed token' });
|
||||
|
||||
jwt.verify(token, JWT_SECRET, (err, decoded) => {
|
||||
if (err) return res.status(401).json({ error: 'Unauthorized' });
|
||||
req.user = decoded;
|
||||
next();
|
||||
});
|
||||
};
|
||||
|
||||
const verifySuperAdmin = (req, res, next) => {
|
||||
verifyToken(req, res, () => {
|
||||
if (req.user?.role !== 'super_admin') {
|
||||
res.status(403).json({ error: 'Super admin access required' });
|
||||
return;
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
};
|
||||
|
||||
const authenticateAPIKey = (req, res, next) => {
|
||||
const apiKey = req.headers['x-api-key'];
|
||||
if (apiKey === API_KEY) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
res.status(401).json({ error: 'Unauthorized: Invalid API Key' });
|
||||
};
|
||||
|
||||
const buildTokenResponse = (user) => {
|
||||
const token = jwt.sign(
|
||||
{
|
||||
email: user.email,
|
||||
role: user.role,
|
||||
userId: user.id || null
|
||||
},
|
||||
JWT_SECRET,
|
||||
{ expiresIn: '24h' }
|
||||
);
|
||||
|
||||
return { token, user };
|
||||
};
|
||||
|
||||
const login = async (email, password) => {
|
||||
const normalizedEmail = normalizeEmail(email);
|
||||
|
||||
if (normalizedEmail === normalizeEmail(ADMIN_EMAIL) && password === ADMIN_PASSWORD) {
|
||||
return buildTokenResponse({
|
||||
id: null,
|
||||
name: 'Super Admin',
|
||||
email: normalizedEmail,
|
||||
role: 'super_admin'
|
||||
});
|
||||
}
|
||||
|
||||
const dbUser = await findUserByEmail(normalizedEmail);
|
||||
if (!dbUser || !dbUser.is_active || !verifyPassword(password, dbUser.password_hash)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return buildTokenResponse({
|
||||
...publicUserFields(dbUser),
|
||||
role: 'user'
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
verifyToken,
|
||||
verifySuperAdmin,
|
||||
authenticateAPIKey,
|
||||
login
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
require('dotenv').config();
|
||||
|
||||
const TURNSTILE_KEY_MATCH = /[0-9]x[0-9A-Za-z_-]{20,}/;
|
||||
|
||||
const normalizeTurnstileValue = (value) => {
|
||||
if (typeof value !== 'string') return '';
|
||||
|
||||
const trimmedValue = value.trim();
|
||||
const keyMatch = trimmedValue.match(TURNSTILE_KEY_MATCH);
|
||||
if (keyMatch) return keyMatch[0];
|
||||
|
||||
return trimmedValue.replace(/^[\s"'`{[]+|[\s"'`}\]]+$/g, '');
|
||||
};
|
||||
|
||||
const firstEnvValue = (...values) => values
|
||||
.map(normalizeTurnstileValue)
|
||||
.find(Boolean) || '';
|
||||
|
||||
const TURNSTILE_SITE_KEY = firstEnvValue(
|
||||
process.env.TURNSTILE_SITE_KEY,
|
||||
process.env.TURNSTILE_SITEKEY,
|
||||
process.env.VITE_TURNSTILE_SITE_KEY,
|
||||
process.env.CLOUDFLARE_TURNSTILE_SITE_KEY
|
||||
);
|
||||
|
||||
const TURNSTILE_SECRET = firstEnvValue(
|
||||
process.env.TURNSTILE_SECRET,
|
||||
process.env.TURNSTILE_SECRET_KEY,
|
||||
process.env.CLOUDFLARE_TURNSTILE_SECRET
|
||||
);
|
||||
|
||||
module.exports = {
|
||||
PORT: process.env.PORT || 3004,
|
||||
API_KEY: process.env.API_KEY || 'nexstar_secret_key_123',
|
||||
ADMIN_EMAIL: process.env.ADMIN_EMAIL || 'admin@admin.com',
|
||||
ADMIN_PASSWORD: process.env.ADMIN_PASSWORD || 'admin123',
|
||||
JWT_SECRET: process.env.JWT_SECRET || 'super_secret_jwt_key_123',
|
||||
DATABASE_URL: process.env.DATABASE_URL || 'postgres://graphuser:graphpassword@localhost:5432/graphdb',
|
||||
N8N_WHATSAPP_TRIGGER_URL: process.env.N8N_WHATSAPP_TRIGGER_URL || 'http://localhost:5678/webhook/whatsapp',
|
||||
TURNSTILE_SITE_KEY,
|
||||
TURNSTILE_SECRET
|
||||
};
|
||||
603
backend/db.js
603
backend/db.js
@@ -1,603 +0,0 @@
|
||||
const { Pool } = require('pg');
|
||||
const { DATABASE_URL } = require('./config');
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: DATABASE_URL
|
||||
});
|
||||
|
||||
const defaultCatalogCategories = [
|
||||
['Camiseta regular', 'Bases lisas e camisetas adultas.'],
|
||||
['Camiseta infantil', 'Produtos infantis por cor e tamanho.'],
|
||||
['Moletom', 'Moletons, cangurus e produtos de frio.'],
|
||||
['Oversized', 'Modelagens oversized e variações relacionadas.'],
|
||||
['Acessórios', 'Bonés, itens complementares e produtos não têxteis.'],
|
||||
['DTF', 'Insumos e serviços relacionados a impressão DTF.'],
|
||||
['Malha', 'Tecidos e malhas usados como matéria-prima.'],
|
||||
['Aviamentos', 'Ribanas, linhas, ilhós e componentes de costura.'],
|
||||
['Embalagens', 'Sacos, etiquetas, tags e materiais de expedição.'],
|
||||
['Insumos gerais', 'Materiais de apoio sem família operacional específica.']
|
||||
];
|
||||
|
||||
const seedDefaultCatalogCategories = async () => {
|
||||
for (const [name, description] of defaultCatalogCategories) {
|
||||
await pool.query(`
|
||||
INSERT INTO catalog_categories (name, description, updated_at)
|
||||
VALUES ($1, $2, CURRENT_TIMESTAMP)
|
||||
ON CONFLICT (name) DO NOTHING;
|
||||
`, [name, description]);
|
||||
}
|
||||
};
|
||||
|
||||
const initDB = async () => {
|
||||
try {
|
||||
await pool.query(`SET TIME ZONE 'America/Sao_Paulo';`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS orders (
|
||||
id SERIAL PRIMARY KEY,
|
||||
cliente_nome VARCHAR(255),
|
||||
data_pedido VARCHAR(50),
|
||||
data_pedido_date DATE,
|
||||
valor_pedido NUMERIC(10, 2),
|
||||
produto_id VARCHAR(100),
|
||||
produto_descricao TEXT,
|
||||
quantidade INTEGER,
|
||||
valor_unitario NUMERIC(10, 5),
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS pedido_id VARCHAR(100);`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS cliente_fone VARCHAR(50);`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS data_pedido_date DATE;`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS cliente_nome_fantasia VARCHAR(255);`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS id_vendedor VARCHAR(100);`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS nome_vendedor VARCHAR(255);`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS marketplace VARCHAR(255);`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS canal_venda VARCHAR(255);`).catch(() => {});
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS numero_ecommerce VARCHAR(100);`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE orders
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
UPDATE orders
|
||||
SET data_pedido_date = CASE
|
||||
WHEN data_pedido ~ '^\\d{4}[-/]\\d{1,2}[-/]\\d{1,2}' THEN to_date(replace(left(data_pedido, 10), '/', '-'), 'YYYY-MM-DD')
|
||||
WHEN data_pedido ~ '^\\d{1,2}[-/]\\d{1,2}[-/]\\d{4}' THEN to_date(replace(left(data_pedido, 10), '/', '-'), 'DD-MM-YYYY')
|
||||
ELSE NULL
|
||||
END
|
||||
WHERE data_pedido_date IS NULL
|
||||
AND data_pedido IS NOT NULL
|
||||
AND data_pedido != '';
|
||||
`).catch(err => {
|
||||
console.error('Notice: Could not backfill normalized order dates:', err.message);
|
||||
});
|
||||
|
||||
await pool.query(`CREATE UNIQUE INDEX IF NOT EXISTS unique_order_product ON orders (pedido_id, produto_id);`).catch(err => {
|
||||
console.error('Notice: Could not create unique index (might already exist or there are duplicates):', err.message);
|
||||
});
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS stock (
|
||||
produto_id VARCHAR(100) PRIMARY KEY,
|
||||
nome TEXT,
|
||||
saldo INTEGER DEFAULT 0,
|
||||
delta_estoque INTEGER DEFAULT 0,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE stock
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS stock_campaign_queue (
|
||||
id SERIAL PRIMARY KEY,
|
||||
base_product_name TEXT NOT NULL,
|
||||
produto_id VARCHAR(100) NOT NULL,
|
||||
nome TEXT NOT NULL,
|
||||
saldo INTEGER DEFAULT 0,
|
||||
delta_estoque INTEGER DEFAULT 0,
|
||||
status VARCHAR(20) DEFAULT 'pending',
|
||||
attempts INTEGER DEFAULT 0,
|
||||
last_error TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
sent_at TIMESTAMPTZ
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS production_orders (
|
||||
id SERIAL PRIMARY KEY,
|
||||
tiny_id VARCHAR(100) UNIQUE,
|
||||
number VARCHAR(100),
|
||||
status VARCHAR(40) DEFAULT 'open',
|
||||
order_reference TEXT,
|
||||
issue_date DATE,
|
||||
expected_date DATE,
|
||||
product_sku VARCHAR(255),
|
||||
product_description TEXT NOT NULL,
|
||||
quantity NUMERIC(14, 4) DEFAULT 0,
|
||||
unit VARCHAR(20) DEFAULT 'UN',
|
||||
integration_status VARCHAR(100),
|
||||
notes TEXT,
|
||||
supplier TEXT,
|
||||
lot_code VARCHAR(120),
|
||||
roll_quantity NUMERIC(14, 4),
|
||||
fabric_kg NUMERIC(14, 4),
|
||||
rib_kg NUMERIC(14, 4),
|
||||
yield_pieces_per_kg NUMERIC(14, 4),
|
||||
tiny_payload JSONB,
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS production_order_markers (
|
||||
id SERIAL PRIMARY KEY,
|
||||
production_order_id INTEGER NOT NULL REFERENCES production_orders(id) ON DELETE CASCADE,
|
||||
label VARCHAR(100) NOT NULL,
|
||||
color VARCHAR(40),
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE (production_order_id, label)
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS production_order_components (
|
||||
id SERIAL PRIMARY KEY,
|
||||
production_order_id INTEGER NOT NULL REFERENCES production_orders(id) ON DELETE CASCADE,
|
||||
component_tiny_id VARCHAR(100),
|
||||
component_sku VARCHAR(255),
|
||||
component_name TEXT NOT NULL,
|
||||
quantity_per_unit NUMERIC(14, 4) DEFAULT 0,
|
||||
total_quantity NUMERIC(14, 4) DEFAULT 0,
|
||||
unit VARCHAR(30),
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS production_order_steps (
|
||||
id SERIAL PRIMARY KEY,
|
||||
production_order_id INTEGER NOT NULL REFERENCES production_orders(id) ON DELETE CASCADE,
|
||||
step_number INTEGER,
|
||||
name VARCHAR(160) NOT NULL,
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
status VARCHAR(80),
|
||||
color VARCHAR(40),
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS product_compositions (
|
||||
id SERIAL PRIMARY KEY,
|
||||
source VARCHAR(60) NOT NULL,
|
||||
external_source_id VARCHAR(120) NOT NULL,
|
||||
finished_product_identity VARCHAR(255) NOT NULL,
|
||||
finished_product_sku VARCHAR(255),
|
||||
finished_product_description TEXT NOT NULL,
|
||||
finished_product_unit VARCHAR(30) NOT NULL DEFAULT 'UN',
|
||||
finished_tiny_product_id VARCHAR(100),
|
||||
source_metadata JSONB NOT NULL DEFAULT '{}'::jsonb,
|
||||
last_synced_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE (source, finished_product_identity)
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS product_composition_components (
|
||||
id SERIAL PRIMARY KEY,
|
||||
product_composition_id INTEGER NOT NULL REFERENCES product_compositions(id) ON DELETE CASCADE,
|
||||
component_identity VARCHAR(255) NOT NULL,
|
||||
component_tiny_id VARCHAR(100),
|
||||
component_sku VARCHAR(255),
|
||||
component_name TEXT NOT NULL,
|
||||
quantity_per_unit NUMERIC(14, 4) NOT NULL DEFAULT 0,
|
||||
unit VARCHAR(30),
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE (product_composition_id, component_identity)
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS cutting_family_rules (
|
||||
family_key VARCHAR(20) PRIMARY KEY,
|
||||
units_per_roll NUMERIC(14, 4),
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS cutting_product_overrides (
|
||||
product_id VARCHAR(100) PRIMARY KEY,
|
||||
family_key VARCHAR(20),
|
||||
color VARCHAR(100),
|
||||
size VARCHAR(40),
|
||||
product_type VARCHAR(40),
|
||||
planning_notes TEXT,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS catalog_categories (
|
||||
id SERIAL PRIMARY KEY,
|
||||
name VARCHAR(255) NOT NULL UNIQUE,
|
||||
description TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS catalog_products (
|
||||
id SERIAL PRIMARY KEY,
|
||||
type VARCHAR(40) NOT NULL DEFAULT 'finished_product',
|
||||
sku VARCHAR(100) NOT NULL UNIQUE,
|
||||
name TEXT NOT NULL,
|
||||
category_id INTEGER REFERENCES catalog_categories(id) ON DELETE SET NULL,
|
||||
composition TEXT,
|
||||
notes TEXT,
|
||||
gramature NUMERIC(14, 4),
|
||||
material_yield NUMERIC(14, 4),
|
||||
width_cm NUMERIC(14, 4),
|
||||
color VARCHAR(100),
|
||||
subcategory VARCHAR(80),
|
||||
sizes TEXT[] DEFAULT '{}',
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS consumption_references (
|
||||
id SERIAL PRIMARY KEY,
|
||||
product_id INTEGER NOT NULL REFERENCES catalog_products(id) ON DELETE CASCADE,
|
||||
material_product_id INTEGER REFERENCES catalog_products(id) ON DELETE SET NULL,
|
||||
color VARCHAR(100),
|
||||
general_yield NUMERIC(14, 4),
|
||||
size_yields JSONB DEFAULT '{}'::jsonb,
|
||||
size_areas JSONB DEFAULT '{}'::jsonb,
|
||||
gramature NUMERIC(14, 4),
|
||||
efficiency_percent NUMERIC(7, 3),
|
||||
rib_g_per_piece NUMERIC(14, 4),
|
||||
material_cost_per_kg NUMERIC(14, 4),
|
||||
consumption_quantity NUMERIC(14, 4),
|
||||
consumption_unit VARCHAR(30),
|
||||
source VARCHAR(60) DEFAULT 'manual',
|
||||
last_production_order_id INTEGER REFERENCES production_orders(id) ON DELETE SET NULL,
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS supply_receipts (
|
||||
id SERIAL PRIMARY KEY,
|
||||
category VARCHAR(120) NOT NULL,
|
||||
product TEXT NOT NULL,
|
||||
quantity NUMERIC(14, 4) NOT NULL,
|
||||
unit VARCHAR(30) NOT NULL DEFAULT 'kg',
|
||||
supplier TEXT,
|
||||
invoice VARCHAR(120),
|
||||
notes TEXT,
|
||||
status VARCHAR(30) NOT NULL DEFAULT 'pending',
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
approved_at TIMESTAMPTZ
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS supply_stock_lots (
|
||||
id SERIAL PRIMARY KEY,
|
||||
receipt_id INTEGER REFERENCES supply_receipts(id) ON DELETE SET NULL,
|
||||
category VARCHAR(120) NOT NULL,
|
||||
product TEXT NOT NULL,
|
||||
quantity NUMERIC(14, 4) NOT NULL,
|
||||
unit VARCHAR(30) NOT NULL DEFAULT 'kg',
|
||||
supplier TEXT,
|
||||
invoice VARCHAR(120),
|
||||
status VARCHAR(30) NOT NULL DEFAULT 'active',
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS supply_movements (
|
||||
id SERIAL PRIMARY KEY,
|
||||
receipt_id INTEGER REFERENCES supply_receipts(id) ON DELETE SET NULL,
|
||||
lot_id INTEGER REFERENCES supply_stock_lots(id) ON DELETE SET NULL,
|
||||
type VARCHAR(40) NOT NULL,
|
||||
category VARCHAR(120) NOT NULL,
|
||||
product TEXT NOT NULL,
|
||||
quantity NUMERIC(14, 4) NOT NULL,
|
||||
unit VARCHAR(30) NOT NULL DEFAULT 'kg',
|
||||
reason TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS supply_fabric_plans (
|
||||
id SERIAL PRIMARY KEY,
|
||||
material TEXT NOT NULL,
|
||||
color VARCHAR(120),
|
||||
quantity_kg NUMERIC(14, 4) NOT NULL,
|
||||
supplier TEXT,
|
||||
priority VARCHAR(40) NOT NULL DEFAULT 'Normal',
|
||||
status VARCHAR(30) NOT NULL DEFAULT 'active',
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE production_orders
|
||||
ADD COLUMN IF NOT EXISTS notes TEXT,
|
||||
ADD COLUMN IF NOT EXISTS supplier TEXT,
|
||||
ADD COLUMN IF NOT EXISTS lot_code VARCHAR(120),
|
||||
ADD COLUMN IF NOT EXISTS roll_quantity NUMERIC(14, 4),
|
||||
ADD COLUMN IF NOT EXISTS fabric_kg NUMERIC(14, 4),
|
||||
ADD COLUMN IF NOT EXISTS rib_kg NUMERIC(14, 4),
|
||||
ADD COLUMN IF NOT EXISTS yield_pieces_per_kg NUMERIC(14, 4);
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE production_orders
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE production_order_components
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE production_order_steps
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE cutting_family_rules
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE cutting_product_overrides
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE cutting_product_overrides
|
||||
ADD COLUMN IF NOT EXISTS product_type VARCHAR(40),
|
||||
ADD COLUMN IF NOT EXISTS planning_notes TEXT;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE catalog_categories
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE catalog_products
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE consumption_references
|
||||
ADD COLUMN IF NOT EXISTS consumption_quantity NUMERIC(14, 4),
|
||||
ADD COLUMN IF NOT EXISTS consumption_unit VARCHAR(30),
|
||||
ADD COLUMN IF NOT EXISTS source VARCHAR(60) DEFAULT 'manual',
|
||||
ADD COLUMN IF NOT EXISTS last_production_order_id INTEGER REFERENCES production_orders(id) ON DELETE SET NULL;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE consumption_references
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await seedDefaultCatalogCategories();
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE supply_receipts
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN approved_at TYPE TIMESTAMPTZ USING approved_at AT TIME ZONE 'America/Sao_Paulo';
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE supply_stock_lots
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE supply_movements
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE supply_fabric_plans
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS app_users (
|
||||
id SERIAL PRIMARY KEY,
|
||||
name VARCHAR(255) NOT NULL,
|
||||
email VARCHAR(255) NOT NULL UNIQUE,
|
||||
password_hash TEXT NOT NULL,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS client_identity_tokens (
|
||||
customer_key TEXT PRIMARY KEY,
|
||||
token TEXT NOT NULL UNIQUE,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE app_users
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP;
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
ALTER TABLE stock_campaign_queue
|
||||
ALTER COLUMN created_at TYPE TIMESTAMPTZ USING created_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN updated_at TYPE TIMESTAMPTZ USING updated_at AT TIME ZONE 'America/Sao_Paulo',
|
||||
ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP,
|
||||
ALTER COLUMN sent_at TYPE TIMESTAMPTZ USING sent_at AT TIME ZONE 'America/Sao_Paulo';
|
||||
`).catch(() => {});
|
||||
|
||||
await pool.query(`
|
||||
UPDATE stock_campaign_queue
|
||||
SET base_product_name = TRIM(regexp_replace(
|
||||
base_product_name,
|
||||
'\\s+-\\s+(?:(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\\d{2})(?:/(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\\d{2}))*)$',
|
||||
'',
|
||||
'i'
|
||||
))
|
||||
WHERE status IN ('pending', 'failed', 'processing')
|
||||
AND base_product_name ~* '\\s+-\\s+(?:(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\\d{2})(?:/(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\\d{2}))*)$';
|
||||
`).catch(err => {
|
||||
console.error('Notice: Could not normalize queued campaign product names:', err.message);
|
||||
});
|
||||
|
||||
await pool.query(`
|
||||
UPDATE stock_campaign_queue
|
||||
SET base_product_name = nome
|
||||
WHERE status IN ('pending', 'failed', 'processing')
|
||||
AND nome ILIKE 'ETIQUETA%'
|
||||
AND base_product_name != nome;
|
||||
`).catch(err => {
|
||||
console.error('Notice: Could not restore queued etiqueta product names:', err.message);
|
||||
});
|
||||
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_stock_campaign_queue_status ON stock_campaign_queue (status);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_production_orders_status ON production_orders (status);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_production_orders_issue_date ON production_orders (issue_date DESC);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_production_orders_expected_date ON production_orders (expected_date DESC);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_production_order_markers_order_id ON production_order_markers (production_order_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_production_order_components_order_id ON production_order_components (production_order_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_production_order_components_sku ON production_order_components (component_sku);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_production_order_steps_order_id ON production_order_steps (production_order_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_product_compositions_finished_tiny_id ON product_compositions (finished_tiny_product_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_product_composition_components_tiny_id ON product_composition_components (component_tiny_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_cutting_product_overrides_family_key ON cutting_product_overrides (family_key);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_catalog_products_type ON catalog_products (type);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_catalog_products_category_id ON catalog_products (category_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_consumption_references_product_id ON consumption_references (product_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_consumption_references_material_product_id ON consumption_references (material_product_id);`);
|
||||
await pool.query(`
|
||||
CREATE UNIQUE INDEX IF NOT EXISTS unique_consumption_reference_source
|
||||
ON consumption_references (
|
||||
product_id,
|
||||
COALESCE(material_product_id, 0),
|
||||
COALESCE(color, ''),
|
||||
COALESCE(source, 'manual')
|
||||
);
|
||||
`).catch(err => {
|
||||
console.error('Notice: Could not create unique consumption reference source index:', err.message);
|
||||
});
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_supply_receipts_status ON supply_receipts (status);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_supply_receipts_created_at ON supply_receipts (created_at DESC);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_supply_stock_lots_status ON supply_stock_lots (status);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_supply_movements_created_at ON supply_movements (created_at DESC);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_supply_fabric_plans_status ON supply_fabric_plans (status);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_orders_cliente_fone ON orders (cliente_fone);`);
|
||||
await pool.query(`
|
||||
CREATE INDEX IF NOT EXISTS idx_orders_normalized_cliente_nome
|
||||
ON orders ((NULLIF(LOWER(TRIM(regexp_replace(COALESCE(cliente_nome, ''), '\\s+', ' ', 'g'))), '')));
|
||||
`).catch(err => {
|
||||
console.error('Notice: Could not create normalized client name index:', err.message);
|
||||
});
|
||||
await pool.query(`
|
||||
CREATE INDEX IF NOT EXISTS idx_orders_normalized_cliente_nome_phone_date
|
||||
ON orders (
|
||||
(NULLIF(LOWER(TRIM(regexp_replace(COALESCE(cliente_nome, ''), '\\s+', ' ', 'g'))), '')),
|
||||
data_pedido_date DESC,
|
||||
id DESC
|
||||
)
|
||||
WHERE NULLIF(cliente_fone, '') IS NOT NULL;
|
||||
`).catch(err => {
|
||||
console.error('Notice: Could not create normalized client phone lookup index:', err.message);
|
||||
});
|
||||
await pool.query(`
|
||||
CREATE INDEX IF NOT EXISTS idx_orders_customer_key_date
|
||||
ON orders (
|
||||
(COALESCE(NULLIF(cliente_fone, ''), 'name:' || COALESCE(NULLIF(cliente_nome, ''), 'Cliente Desconhecido'))),
|
||||
data_pedido_date
|
||||
);
|
||||
`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_orders_produto_id ON orders (produto_id);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_orders_data_pedido_date ON orders (data_pedido_date);`);
|
||||
await pool.query(`CREATE INDEX IF NOT EXISTS idx_app_users_email ON app_users (LOWER(email));`);
|
||||
|
||||
console.log('Database initialized successfully.');
|
||||
} catch (err) {
|
||||
console.error('Failed to initialize database:', err);
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
pool,
|
||||
initDB
|
||||
};
|
||||
194
backend/index.js
194
backend/index.js
@@ -1,19 +1,187 @@
|
||||
const { createApp } = require('./server');
|
||||
const { initDB } = require('./db');
|
||||
const { PORT } = require('./config');
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const bodyParser = require('body-parser');
|
||||
const { Pool } = require('pg');
|
||||
const jwt = require('jsonwebtoken');
|
||||
require('dotenv').config();
|
||||
|
||||
const start = async () => {
|
||||
await initDB();
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3004;
|
||||
const API_KEY = process.env.API_KEY || "nexstar_secret_key_123";
|
||||
|
||||
const app = createApp();
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`Nexstar Backend running at http://localhost:${PORT}`);
|
||||
console.log(`Endpoint for n8n: POST http://localhost:${PORT}/api/data`);
|
||||
console.log(`Scheduled campaign processor: POST http://localhost:${PORT}/api/internal/process-stock-campaigns`);
|
||||
// Admin Credentials
|
||||
const ADMIN_EMAIL = process.env.ADMIN_EMAIL || 'admin@admin.com';
|
||||
const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'admin123';
|
||||
const JWT_SECRET = process.env.JWT_SECRET || 'super_secret_jwt_key_123';
|
||||
|
||||
app.use(cors());
|
||||
app.use(bodyParser.json());
|
||||
|
||||
// PostgreSQL Connection Pool
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL || 'postgres://graphuser:graphpassword@localhost:5432/graphdb',
|
||||
});
|
||||
|
||||
// Initialize Database Table
|
||||
const initDB = async () => {
|
||||
try {
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS orders (
|
||||
id SERIAL PRIMARY KEY,
|
||||
cliente_nome VARCHAR(255),
|
||||
data_pedido VARCHAR(50),
|
||||
valor_pedido NUMERIC(10, 2),
|
||||
produto_id VARCHAR(100),
|
||||
produto_descricao TEXT,
|
||||
quantidade INTEGER,
|
||||
valor_unitario NUMERIC(10, 5),
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`);
|
||||
|
||||
await pool.query(`ALTER TABLE orders ADD COLUMN IF NOT EXISTS pedido_id VARCHAR(100);`).catch(() => {});
|
||||
|
||||
await pool.query(`CREATE UNIQUE INDEX IF NOT EXISTS unique_order_product ON orders (pedido_id, produto_id);`).catch(err => {
|
||||
console.error("Notice: Could not create unique index (might already exist or there are duplicates):", err.message);
|
||||
});
|
||||
|
||||
console.log("Database initialized successfully.");
|
||||
} catch (err) {
|
||||
console.error("Failed to initialize database:", err);
|
||||
}
|
||||
};
|
||||
|
||||
initDB();
|
||||
|
||||
// Middleware for Frontend Authentication
|
||||
const verifyToken = (req, res, next) => {
|
||||
const authHeader = req.headers['authorization'];
|
||||
if (!authHeader) return res.status(403).json({ error: 'No token provided' });
|
||||
|
||||
const token = authHeader.split(' ')[1];
|
||||
if (!token) return res.status(403).json({ error: 'Malformed token' });
|
||||
|
||||
jwt.verify(token, JWT_SECRET, (err, decoded) => {
|
||||
if (err) return res.status(401).json({ error: 'Unauthorized' });
|
||||
req.user = decoded;
|
||||
next();
|
||||
});
|
||||
};
|
||||
|
||||
start().catch((error) => {
|
||||
console.error('Failed to start backend:', error);
|
||||
process.exit(1);
|
||||
// Login Endpoint
|
||||
app.post('/api/login', (req, res) => {
|
||||
const { email, password } = req.body;
|
||||
if (email === ADMIN_EMAIL && password === ADMIN_PASSWORD) {
|
||||
const token = jwt.sign({ email }, JWT_SECRET, { expiresIn: '24h' });
|
||||
res.json({ token });
|
||||
} else {
|
||||
res.status(401).json({ error: 'Invalid credentials' });
|
||||
}
|
||||
});
|
||||
|
||||
// Helper to format rows to match the old JSON structure for the frontend
|
||||
const formatRow = (row) => ({
|
||||
Nome_Cliente: row.cliente_nome,
|
||||
Data_Pedido: row.data_pedido,
|
||||
Valor_Pedido: parseFloat(row.valor_pedido),
|
||||
ID_Produto: row.produto_id,
|
||||
Descricao_Produto: row.produto_descricao,
|
||||
Quantidade: row.quantidade,
|
||||
Valor_Unitario: parseFloat(row.valor_unitario),
|
||||
Recebido_Em: row.created_at,
|
||||
ID_Pedido: row.pedido_id,
|
||||
Fone_Cliente: row.cliente_fone
|
||||
});
|
||||
|
||||
// GET data (for the frontend)
|
||||
app.get('/api/data', verifyToken, async (req, res) => {
|
||||
try {
|
||||
const result = await pool.query('SELECT * FROM orders ORDER BY id DESC');
|
||||
const formattedData = result.rows.map(formatRow);
|
||||
res.json(formattedData);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST data (for n8n) - Protected by API_KEY internally or via middleware if needed
|
||||
// Leaving it as it was, checking API_KEY manually? Wait, the previous version didn't actually use 'authenticate' middleware on the POST!
|
||||
// Let's add the authenticate middleware to the POST endpoint.
|
||||
const authenticateAPIKey = (req, res, next) => {
|
||||
const apiKey = req.headers['x-api-key'];
|
||||
if (apiKey === API_KEY) {
|
||||
next();
|
||||
} else {
|
||||
res.status(401).json({ error: 'Unauthorized: Invalid API Key' });
|
||||
}
|
||||
};
|
||||
|
||||
app.post('/api/data', authenticateAPIKey, async (req, res) => {
|
||||
// Respond IMMEDIATELY to prevent slowing down n8n / WhatsApp flows
|
||||
res.status(201).json({ message: 'Data received, processing in background' });
|
||||
|
||||
const newData = req.body;
|
||||
const payload = Array.isArray(newData) ? newData : [newData];
|
||||
|
||||
// Process asynchronously
|
||||
(async () => {
|
||||
const client = await pool.connect();
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
const insertQuery = `
|
||||
INSERT INTO orders (
|
||||
cliente_nome, data_pedido, valor_pedido,
|
||||
produto_id, produto_descricao, quantidade, valor_unitario, pedido_id, cliente_fone
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
|
||||
ON CONFLICT (pedido_id, produto_id) DO UPDATE SET
|
||||
cliente_nome = EXCLUDED.cliente_nome,
|
||||
data_pedido = EXCLUDED.data_pedido,
|
||||
valor_pedido = EXCLUDED.valor_pedido,
|
||||
produto_descricao = EXCLUDED.produto_descricao,
|
||||
quantidade = EXCLUDED.quantidade,
|
||||
valor_unitario = EXCLUDED.valor_unitario,
|
||||
cliente_fone = EXCLUDED.cliente_fone,
|
||||
created_at = CURRENT_TIMESTAMP
|
||||
`;
|
||||
|
||||
for (const item of payload) {
|
||||
// Handle potential missing fields gracefully
|
||||
const fallbackId = `${item.Nome_Cliente}_${item.Data_Pedido}_${item.Valor_Pedido}`;
|
||||
const orderId = item.id || item.ID_Pedido || (item.json && item.json.body && item.json.body.id) || fallbackId;
|
||||
const fone = item.Fone_Cliente || item.fone || item.celular || '';
|
||||
|
||||
const values = [
|
||||
item.Nome_Cliente || 'Unknown',
|
||||
item.Data_Pedido || '',
|
||||
parseFloat(item.Valor_Pedido) || 0,
|
||||
item.ID_Produto || '',
|
||||
item.Descricao_Produto || '',
|
||||
parseInt(item.Quantidade) || 0,
|
||||
parseFloat(item.Valor_Unitario) || 0,
|
||||
String(orderId),
|
||||
String(fone)
|
||||
];
|
||||
await client.query(insertQuery, values);
|
||||
}
|
||||
|
||||
await client.query('COMMIT');
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
console.error("Database insert error:", error);
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`Nexstar Backend running at http://localhost:${PORT}`);
|
||||
console.log(`Endpoint for n8n: POST http://localhost:${PORT}/api/data`);
|
||||
});;
|
||||
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`Nexstar Backend running at http://localhost:${PORT}`);
|
||||
console.log(`Endpoint for n8n: POST http://localhost:${PORT}/api/data`);
|
||||
});
|
||||
@@ -1,85 +0,0 @@
|
||||
const formatOrderRow = (row) => ({
|
||||
Nome_Cliente: row.cliente_nome,
|
||||
Data_Pedido: row.data_pedido,
|
||||
Valor_Pedido: parseFloat(row.valor_pedido),
|
||||
ID_Produto: row.produto_id,
|
||||
Descricao_Produto: row.produto_descricao,
|
||||
Quantidade: row.quantidade,
|
||||
Valor_Unitario: parseFloat(row.valor_unitario),
|
||||
Recebido_Em: row.created_at,
|
||||
ID_Pedido: row.pedido_id,
|
||||
Fone_Cliente: row.cliente_fone,
|
||||
cliente_nome_fantasia: row.cliente_nome_fantasia || '',
|
||||
id_vendedor: row.id_vendedor || '',
|
||||
nome_vendedor: row.nome_vendedor || '',
|
||||
marketplace: row.marketplace || '',
|
||||
canal_venda: row.canal_venda || '',
|
||||
numero_ecommerce: row.numero_ecommerce || ''
|
||||
});
|
||||
|
||||
const normalizeOrderDate = (dateValue) => {
|
||||
if (!dateValue) return null;
|
||||
|
||||
const value = String(dateValue).trim();
|
||||
const match = value.match(/^(\d{1,4})[-/](\d{1,2})[-/](\d{1,4})/);
|
||||
if (!match) return null;
|
||||
|
||||
const [, first, second, third] = match;
|
||||
const year = first.length === 4 ? Number(first) : Number(third);
|
||||
const month = Number(second);
|
||||
const day = first.length === 4 ? Number(third) : Number(first);
|
||||
const date = new Date(Date.UTC(year, month - 1, day));
|
||||
|
||||
if (
|
||||
date.getUTCFullYear() !== year ||
|
||||
date.getUTCMonth() !== month - 1 ||
|
||||
date.getUTCDate() !== day
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return date.toISOString().slice(0, 10);
|
||||
};
|
||||
|
||||
const pickFirstValue = (item, fieldNames) => {
|
||||
for (const fieldName of fieldNames) {
|
||||
const value = item[fieldName];
|
||||
if (value !== undefined && value !== null && value !== '') {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const normalizeOrderPayload = (item) => {
|
||||
const fallbackId = `${item.Nome_Cliente}_${item.Data_Pedido}_${item.Valor_Pedido}`;
|
||||
const orderId = item.id || item.ID_Pedido || (item.json && item.json.body && item.json.body.id) || fallbackId;
|
||||
const fone = item.Fone_Cliente || item.fone || item.celular || '';
|
||||
const orderDate = item.Data_Pedido || '';
|
||||
|
||||
return [
|
||||
item.Nome_Cliente || 'Unknown',
|
||||
orderDate,
|
||||
normalizeOrderDate(orderDate),
|
||||
parseFloat(item.Valor_Pedido) || 0,
|
||||
item.ID_Produto || '',
|
||||
item.Descricao_Produto || '',
|
||||
parseInt(item.Quantidade, 10) || 0,
|
||||
parseFloat(item.Valor_Unitario) || 0,
|
||||
String(orderId),
|
||||
String(fone),
|
||||
String(pickFirstValue(item, ['nome_fantasia', 'Nome_Fantasia', 'Cliente_Nome_Fantasia', 'cliente_nome_fantasia'])),
|
||||
String(pickFirstValue(item, ['id_vendedor', 'ID_Vendedor'])),
|
||||
String(pickFirstValue(item, ['nome_vendedor', 'Nome_Vendedor'])),
|
||||
String(pickFirstValue(item, ['marketplace', 'Marketplace', 'nome_ecommerce', 'Nome_Ecommerce'])),
|
||||
String(pickFirstValue(item, ['canal_venda', 'Canal_Venda'])),
|
||||
String(pickFirstValue(item, ['numero_ecommerce', 'Numero_Ecommerce']))
|
||||
];
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
formatOrderRow,
|
||||
normalizeOrderDate,
|
||||
normalizeOrderPayload
|
||||
};
|
||||
@@ -1,31 +0,0 @@
|
||||
const SIZE_SUFFIX_PATTERN = /\s+-\s+(?:(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\d{2})(?:\/(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\d{2}))*)$/i;
|
||||
|
||||
const getBaseProductName = (name) => {
|
||||
const productName = String(name || 'Unknown').trim();
|
||||
if (productName.toLocaleUpperCase('pt-BR').startsWith('ETIQUETA')) {
|
||||
return productName;
|
||||
}
|
||||
|
||||
return productName
|
||||
.split(' TAMANHO')[0]
|
||||
.replace(SIZE_SUFFIX_PATTERN, '')
|
||||
.trim();
|
||||
};
|
||||
|
||||
const normalizeStockPayload = (item) => {
|
||||
const produtoId = item.idProduto || item.ID_Produto || '';
|
||||
const nome = item.nome || item.Descricao_Produto || 'Unknown';
|
||||
|
||||
return {
|
||||
produtoId: String(produtoId),
|
||||
nome,
|
||||
baseProductName: getBaseProductName(nome),
|
||||
saldo: parseInt(item.saldo, 10) || 0,
|
||||
deltaEstoque: parseInt(item.delta_estoque, 10) || 0
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getBaseProductName,
|
||||
normalizeStockPayload
|
||||
};
|
||||
@@ -5,7 +5,7 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"test": "node --test"
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
|
||||
@@ -1,132 +0,0 @@
|
||||
const express = require('express');
|
||||
const { verifyToken } = require('../auth');
|
||||
const {
|
||||
getClientAnalytics,
|
||||
getClientDetailsAnalytics,
|
||||
getClientFilterOptions,
|
||||
getClientPurchasePatternAnalytics,
|
||||
getDashboardAnalytics,
|
||||
getProductAnalytics,
|
||||
getProductDetailsAnalytics,
|
||||
getRfmAnalytics
|
||||
} = require('../services/analyticsService');
|
||||
const { getProductComposition, listProductCompositions } = require('../services/productionOrderService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
const getRange = (query) => ({
|
||||
start: query.start,
|
||||
end: query.end
|
||||
});
|
||||
|
||||
const getClientAnalyticsFilters = (query) => ({
|
||||
...getRange(query),
|
||||
marketplace: query.marketplace,
|
||||
canal_venda: query.canal_venda,
|
||||
seller: query.seller
|
||||
});
|
||||
|
||||
router.get('/analytics/dashboard', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getDashboardAnalytics(getRange(req.query)));
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard analytics:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/products', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getProductAnalytics(getRange(req.query)));
|
||||
} catch (error) {
|
||||
console.error('Error fetching product analytics:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/products/:productId/details', verifyToken, async (req, res) => {
|
||||
try {
|
||||
const details = await getProductDetailsAnalytics(req.params.productId, getRange(req.query));
|
||||
if (!details) {
|
||||
res.status(404).json({ error: 'Product not found' });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json(details);
|
||||
} catch (error) {
|
||||
console.error('Error fetching product details analytics:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/products/:productId/composition', verifyToken, async (req, res) => {
|
||||
try {
|
||||
const composition = await getProductComposition(req.params.productId);
|
||||
res.json({ composition });
|
||||
} catch (error) {
|
||||
console.error('Error fetching product composition:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/product-compositions', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json({ compositions: await listProductCompositions() });
|
||||
} catch (error) {
|
||||
console.error('Error exporting product compositions:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/clients', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getClientAnalytics(getClientAnalyticsFilters(req.query)));
|
||||
} catch (error) {
|
||||
console.error('Error fetching client analytics:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/clients/filters', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getClientFilterOptions(getRange(req.query)));
|
||||
} catch (error) {
|
||||
console.error('Error fetching client filter options:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/clients/purchase-pattern', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getClientPurchasePatternAnalytics());
|
||||
} catch (error) {
|
||||
console.error('Error fetching client purchase pattern analytics:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/clients/:clientToken/details', verifyToken, async (req, res) => {
|
||||
try {
|
||||
const details = await getClientDetailsAnalytics(req.params.clientToken, getRange(req.query));
|
||||
if (!details) {
|
||||
res.status(404).json({ error: 'Client not found' });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json(details);
|
||||
} catch (error) {
|
||||
console.error('Error fetching client details analytics:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/analytics/rfm', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getRfmAnalytics(getClientAnalyticsFilters(req.query)));
|
||||
} catch (error) {
|
||||
console.error('Error fetching RFM analytics:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,70 +0,0 @@
|
||||
const express = require('express');
|
||||
const { login } = require('../auth');
|
||||
const { TURNSTILE_SECRET, TURNSTILE_SITE_KEY } = require('../config');
|
||||
|
||||
const router = express.Router();
|
||||
const TURNSTILE_VERIFY_URL = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
|
||||
const TURNSTILE_SITE_KEY_PATTERN = /^[0-9]x[0-9A-Za-z_-]{20,}$/;
|
||||
const hasValidTurnstileSiteKey = TURNSTILE_SITE_KEY_PATTERN.test(TURNSTILE_SITE_KEY);
|
||||
|
||||
const verifyCaptcha = async (captchaToken, remoteIp) => {
|
||||
if (!TURNSTILE_SECRET) return true;
|
||||
if (!captchaToken || typeof captchaToken !== 'string') return false;
|
||||
|
||||
try {
|
||||
const formData = new URLSearchParams({
|
||||
secret: TURNSTILE_SECRET,
|
||||
response: captchaToken
|
||||
});
|
||||
|
||||
if (remoteIp) {
|
||||
formData.set('remoteip', remoteIp);
|
||||
}
|
||||
|
||||
const response = await fetch(TURNSTILE_VERIFY_URL, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) return false;
|
||||
|
||||
const result = await response.json();
|
||||
return result.success === true;
|
||||
} catch (error) {
|
||||
console.error('Captcha verification failed', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
router.get('/login/config', (req, res) => {
|
||||
res.json({
|
||||
captchaRequired: Boolean(TURNSTILE_SECRET),
|
||||
turnstileSiteKey: hasValidTurnstileSiteKey ? TURNSTILE_SITE_KEY : '',
|
||||
captchaConfigured: Boolean(TURNSTILE_SECRET && hasValidTurnstileSiteKey)
|
||||
});
|
||||
});
|
||||
|
||||
router.post('/login', async (req, res, next) => {
|
||||
const { email, password, captchaToken } = req.body;
|
||||
|
||||
try {
|
||||
const captchaValid = await verifyCaptcha(captchaToken, req.ip);
|
||||
if (!captchaValid) {
|
||||
res.status(403).json({ error: 'Captcha verification failed' });
|
||||
return;
|
||||
}
|
||||
|
||||
const authResult = await login(email, password);
|
||||
|
||||
if (!authResult) {
|
||||
res.status(401).json({ error: 'Invalid credentials' });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json(authResult);
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,67 +0,0 @@
|
||||
const express = require('express');
|
||||
const { authenticateAPIKey, verifyToken } = require('../auth');
|
||||
const {
|
||||
getCampaignPreview,
|
||||
getCampaignQueueSummary,
|
||||
getTopClientsForCampaign,
|
||||
processPendingStockCampaigns,
|
||||
retryCampaignItems
|
||||
} = require('../services/campaignService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
const verifyCampaignExportAccess = (req, res, next) => {
|
||||
if (req.headers['x-api-key']) {
|
||||
authenticateAPIKey(req, res, next);
|
||||
return;
|
||||
}
|
||||
|
||||
verifyToken(req, res, next);
|
||||
};
|
||||
|
||||
router.get('/campaigns', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getCampaignQueueSummary());
|
||||
} catch (error) {
|
||||
console.error('Error fetching campaigns:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/campaigns/preview', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await getCampaignPreview());
|
||||
} catch (error) {
|
||||
console.error('Error fetching campaign preview:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/campaigns/top-clients', verifyCampaignExportAccess, async (req, res) => {
|
||||
try {
|
||||
res.json(await getTopClientsForCampaign(req.query || {}));
|
||||
} catch (error) {
|
||||
console.error('Error fetching top campaign clients:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/campaigns/process', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await processPendingStockCampaigns());
|
||||
} catch (error) {
|
||||
console.error('Error processing campaigns:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/campaigns/retry', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await retryCampaignItems(req.body || {}));
|
||||
} catch (error) {
|
||||
console.error('Error retrying campaigns:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,101 +0,0 @@
|
||||
const express = require('express');
|
||||
const { verifyToken } = require('../auth');
|
||||
const {
|
||||
createCategory,
|
||||
createConsumptionReference,
|
||||
createProduct,
|
||||
deleteCategory,
|
||||
deleteConsumptionReference,
|
||||
deleteProduct,
|
||||
getCatalogSummary,
|
||||
listCategories,
|
||||
listConsumptionReferences,
|
||||
listProducts
|
||||
} = require('../services/catalogService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/catalog', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await getCatalogSummary());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/catalog/categories', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listCategories());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/catalog/categories', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.status(201).json(await createCategory(req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.delete('/catalog/categories/:id', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
await deleteCategory(req.params.id);
|
||||
res.status(204).end();
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/catalog/products', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listProducts());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/catalog/products', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.status(201).json(await createProduct(req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.delete('/catalog/products/:id', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
await deleteProduct(req.params.id);
|
||||
res.status(204).end();
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/catalog/consumption-references', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listConsumptionReferences());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/catalog/consumption-references', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.status(201).json(await createConsumptionReference(req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.delete('/catalog/consumption-references/:id', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
await deleteConsumptionReference(req.params.id);
|
||||
res.status(204).end();
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,23 +0,0 @@
|
||||
const express = require('express');
|
||||
const { verifyToken } = require('../auth');
|
||||
const { listCuttingSettings, saveCuttingSettings } = require('../services/cuttingSettingsService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/cutting-settings', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listCuttingSettings());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.put('/cutting-settings', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await saveCuttingSettings(req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,26 +0,0 @@
|
||||
const express = require('express');
|
||||
const { authenticateAPIKey, verifyToken } = require('../auth');
|
||||
const { listOrders, upsertOrders } = require('../services/ordersService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/data', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await listOrders());
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/data', authenticateAPIKey, async (req, res) => {
|
||||
res.status(201).json({ message: 'Data received, processing in background' });
|
||||
|
||||
const payload = Array.isArray(req.body) ? req.body : [req.body];
|
||||
|
||||
upsertOrders(payload).catch((error) => {
|
||||
console.error('Database insert error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,15 +0,0 @@
|
||||
const express = require('express');
|
||||
const { verifySuperAdmin } = require('../auth');
|
||||
const { buildDatabaseDiagnostic } = require('../services/databaseDiagnosticService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/admin/database-diagnostic', verifySuperAdmin, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await buildDatabaseDiagnostic(req.user));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,17 +0,0 @@
|
||||
const express = require('express');
|
||||
const { authenticateAPIKey } = require('../auth');
|
||||
const { processPendingStockCampaigns } = require('../services/campaignService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.post('/process-stock-campaigns', authenticateAPIKey, async (req, res) => {
|
||||
try {
|
||||
const summary = await processPendingStockCampaigns();
|
||||
res.json(summary);
|
||||
} catch (error) {
|
||||
console.error('Error processing stock campaigns:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,44 +0,0 @@
|
||||
const express = require('express');
|
||||
const { authenticateAPIKey, verifyToken } = require('../auth');
|
||||
const { createProductionOrders, listProductionOrders, updateProductionOrderStatus, upsertTinyProductionOrderDetail } = require('../services/productionOrderService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/production-orders', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await listProductionOrders(req.query || {}));
|
||||
} catch (error) {
|
||||
console.error('Error fetching production orders:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/production-orders', verifyToken, async (req, res) => {
|
||||
try {
|
||||
const orders = Array.isArray(req.body?.orders) ? req.body.orders : [];
|
||||
res.status(201).json(await createProductionOrders(orders));
|
||||
} catch (error) {
|
||||
console.error('Error creating production orders:', error);
|
||||
res.status(error.statusCode || 500).json({ error: error.message || 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/production-orders/tiny-sync', authenticateAPIKey, async (req, res) => {
|
||||
try {
|
||||
res.status(201).json(await upsertTinyProductionOrderDetail(req.body || {}));
|
||||
} catch (error) {
|
||||
console.error('Error syncing Tiny production order:', error);
|
||||
res.status(error.statusCode || 500).json({ error: error.message || 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.patch('/production-orders/:id/status', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await updateProductionOrderStatus(req.params.id, req.body?.status));
|
||||
} catch (error) {
|
||||
console.error('Error updating production order status:', error);
|
||||
res.status(error.statusCode || 500).json({ error: error.message || 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,26 +0,0 @@
|
||||
const express = require('express');
|
||||
const { authenticateAPIKey, verifyToken } = require('../auth');
|
||||
const { listStock, upsertStockItems } = require('../services/stockService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/stock', verifyToken, async (req, res) => {
|
||||
try {
|
||||
res.json(await listStock());
|
||||
} catch (error) {
|
||||
console.error('Error fetching stock:', error);
|
||||
res.status(500).json({ error: 'Internal Server Error' });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/stock', authenticateAPIKey, async (req, res) => {
|
||||
res.status(201).json({ message: 'Stock data received, processing in background' });
|
||||
|
||||
const payload = Array.isArray(req.body) ? req.body : [req.body];
|
||||
|
||||
upsertStockItems(payload).catch((error) => {
|
||||
console.error('Database stock insert error:', error);
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,127 +0,0 @@
|
||||
const express = require('express');
|
||||
const { verifyToken } = require('../auth');
|
||||
const {
|
||||
adjustInventoryLot,
|
||||
approveReceipt,
|
||||
consumeLotForProduction,
|
||||
createFabricPlan,
|
||||
createReceipt,
|
||||
deleteFabricPlan,
|
||||
deleteReceipt,
|
||||
getSupplySummary,
|
||||
listFabricPlans,
|
||||
listLots,
|
||||
listMovements,
|
||||
listPurchaseNeeds,
|
||||
listReceipts
|
||||
} = require('../services/supplyService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/supply', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await getSupplySummary());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/supply/receipts', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listReceipts());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/supply/receipts', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.status(201).json(await createReceipt(req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/supply/receipts/:id/approve', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await approveReceipt(req.params.id));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.delete('/supply/receipts/:id', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
await deleteReceipt(req.params.id);
|
||||
res.status(204).end();
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/supply/lots', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listLots());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/supply/lots/:id/inventory-adjustment', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await adjustInventoryLot(req.params.id, req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/supply/lots/:id/production-exit', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await consumeLotForProduction(req.params.id, req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/supply/movements', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listMovements());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/supply/fabric-plans', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listFabricPlans());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/supply/fabric-plans', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.status(201).json(await createFabricPlan(req.body || {}));
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.delete('/supply/fabric-plans/:id', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
await deleteFabricPlan(req.params.id);
|
||||
res.status(204).end();
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/supply/purchase-needs', verifyToken, async (req, res, next) => {
|
||||
try {
|
||||
res.json(await listPurchaseNeeds());
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,53 +0,0 @@
|
||||
const express = require('express');
|
||||
const { verifySuperAdmin } = require('../auth');
|
||||
const { createUser, deleteUser, listUsers, updateUser } = require('../services/userService');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/users', verifySuperAdmin, async (req, res, next) => {
|
||||
try {
|
||||
const users = await listUsers();
|
||||
res.json({ users });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/users', verifySuperAdmin, async (req, res, next) => {
|
||||
try {
|
||||
const { name, email, password } = req.body || {};
|
||||
const { user, password: userPassword, generatedPassword } = await createUser({ name, email, password });
|
||||
|
||||
const responsePayload = {
|
||||
user
|
||||
};
|
||||
|
||||
if (generatedPassword) {
|
||||
responsePayload.temporaryPassword = userPassword;
|
||||
}
|
||||
|
||||
res.status(201).json(responsePayload);
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.patch('/users/:id', verifySuperAdmin, async (req, res, next) => {
|
||||
try {
|
||||
const user = await updateUser(req.params.id, req.body || {});
|
||||
res.json({ user });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
router.delete('/users/:id', verifySuperAdmin, async (req, res, next) => {
|
||||
try {
|
||||
await deleteUser(req.params.id);
|
||||
res.status(204).send();
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,519 +0,0 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Normalize Nexstar cutting/replenishment workbooks into JSON.
|
||||
|
||||
The workbook is used as an operational planning model. This importer treats it
|
||||
as an input source and emits auditable tables that the app can later persist or
|
||||
render, without depending on the workbook formulas at runtime.
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import posixpath
|
||||
import re
|
||||
import sys
|
||||
import zipfile
|
||||
from dataclasses import dataclass
|
||||
from datetime import UTC, datetime, timedelta
|
||||
from typing import Any, Dict, Iterable, List, Optional, Tuple
|
||||
from xml.etree import ElementTree as ET
|
||||
|
||||
|
||||
NS = {
|
||||
"main": "http://schemas.openxmlformats.org/spreadsheetml/2006/main",
|
||||
"rel": "http://schemas.openxmlformats.org/officeDocument/2006/relationships",
|
||||
"pkgrel": "http://schemas.openxmlformats.org/package/2006/relationships",
|
||||
}
|
||||
|
||||
DATE_NUM_FMT_IDS = {
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17,
|
||||
22,
|
||||
27,
|
||||
30,
|
||||
36,
|
||||
45,
|
||||
46,
|
||||
47,
|
||||
50,
|
||||
57,
|
||||
}
|
||||
|
||||
CUT_SHEETS = {"BLCS", "BLMC", "BLOS", "BLPM"}
|
||||
COLOR_WORDS = {
|
||||
"amarelo",
|
||||
"azul",
|
||||
"azul pr.",
|
||||
"azul prussia",
|
||||
"bege",
|
||||
"bordo",
|
||||
"bordô",
|
||||
"branco",
|
||||
"cafe",
|
||||
"café",
|
||||
"cinza",
|
||||
"cor??",
|
||||
"grafite",
|
||||
"marinho",
|
||||
"marrom",
|
||||
"perola",
|
||||
"pérola",
|
||||
"preto",
|
||||
"rosa",
|
||||
"rox0",
|
||||
"roxo",
|
||||
"royal",
|
||||
"verde b.",
|
||||
"verde bandeira",
|
||||
"verde militar",
|
||||
"vermelho",
|
||||
}
|
||||
|
||||
|
||||
@dataclass(frozen=True)
|
||||
class Cell:
|
||||
value: Any
|
||||
formula: Optional[str] = None
|
||||
has_broken_reference: bool = False
|
||||
|
||||
|
||||
def local_path(base: str, target: str) -> str:
|
||||
if target.startswith("/"):
|
||||
return target.lstrip("/")
|
||||
return posixpath.normpath(posixpath.join(posixpath.dirname(base), target))
|
||||
|
||||
|
||||
def xml_root(archive: zipfile.ZipFile, path: str) -> ET.Element:
|
||||
with archive.open(path) as handle:
|
||||
return ET.parse(handle).getroot()
|
||||
|
||||
|
||||
def parse_relationships(archive: zipfile.ZipFile, path: str) -> Dict[str, str]:
|
||||
if path not in archive.namelist():
|
||||
return {}
|
||||
|
||||
root = xml_root(archive, path)
|
||||
relationships: Dict[str, str] = {}
|
||||
for rel in root:
|
||||
rel_id = rel.attrib.get("Id")
|
||||
target = rel.attrib.get("Target")
|
||||
if rel_id and target:
|
||||
relationships[rel_id] = target
|
||||
return relationships
|
||||
|
||||
|
||||
def load_shared_strings(archive: zipfile.ZipFile) -> List[str]:
|
||||
if "xl/sharedStrings.xml" not in archive.namelist():
|
||||
return []
|
||||
|
||||
root = xml_root(archive, "xl/sharedStrings.xml")
|
||||
strings: List[str] = []
|
||||
for item in root.findall("main:si", NS):
|
||||
parts = [node.text or "" for node in item.findall(".//main:t", NS)]
|
||||
strings.append("".join(parts))
|
||||
return strings
|
||||
|
||||
|
||||
def load_date_style_ids(archive: zipfile.ZipFile) -> set[int]:
|
||||
if "xl/styles.xml" not in archive.namelist():
|
||||
return set()
|
||||
|
||||
root = xml_root(archive, "xl/styles.xml")
|
||||
date_num_fmt_ids = set(DATE_NUM_FMT_IDS)
|
||||
for fmt in root.findall("main:numFmts/main:numFmt", NS):
|
||||
num_fmt_id = fmt.attrib.get("numFmtId")
|
||||
format_code = fmt.attrib.get("formatCode", "").lower()
|
||||
if not num_fmt_id:
|
||||
continue
|
||||
if re.search(r"(^|[^\\[])[dmy]([^\\]]|$)", format_code):
|
||||
date_num_fmt_ids.add(int(num_fmt_id))
|
||||
|
||||
style_ids: set[int] = set()
|
||||
for index, cell_format in enumerate(root.findall("main:cellXfs/main:xf", NS)):
|
||||
num_fmt_id = int(cell_format.attrib.get("numFmtId", "0"))
|
||||
if num_fmt_id in date_num_fmt_ids:
|
||||
style_ids.add(index)
|
||||
return style_ids
|
||||
|
||||
|
||||
def excel_date(value: float) -> str:
|
||||
# Excel's 1900 date system includes the leap-year bug; this origin mirrors it
|
||||
# for normal post-1900 workbook dates.
|
||||
date = datetime(1899, 12, 30) + timedelta(days=value)
|
||||
return date.date().isoformat()
|
||||
|
||||
|
||||
def parse_scalar(value: Optional[str], style_id: Optional[int], cell_type: Optional[str], shared_strings: List[str], date_style_ids: set[int]) -> Any:
|
||||
if value is None:
|
||||
return None
|
||||
|
||||
if cell_type == "s":
|
||||
try:
|
||||
return shared_strings[int(value)]
|
||||
except (ValueError, IndexError):
|
||||
return value
|
||||
|
||||
if cell_type == "b":
|
||||
return value == "1"
|
||||
|
||||
if cell_type in {"str", "inlineStr"}:
|
||||
return value
|
||||
|
||||
try:
|
||||
number = float(value)
|
||||
except ValueError:
|
||||
return value
|
||||
|
||||
if style_id in date_style_ids:
|
||||
return excel_date(number)
|
||||
|
||||
if number.is_integer():
|
||||
return int(number)
|
||||
return number
|
||||
|
||||
|
||||
def cell_column(cell_ref: str) -> int:
|
||||
letters = re.sub(r"[^A-Z]", "", cell_ref.upper())
|
||||
column = 0
|
||||
for letter in letters:
|
||||
column = column * 26 + (ord(letter) - ord("A") + 1)
|
||||
return max(1, column)
|
||||
|
||||
|
||||
def parse_inline_string(cell_node: ET.Element) -> Optional[str]:
|
||||
inline = cell_node.find("main:is", NS)
|
||||
if inline is None:
|
||||
return None
|
||||
return "".join(node.text or "" for node in inline.findall(".//main:t", NS))
|
||||
|
||||
|
||||
def parse_sheet_rows(
|
||||
archive: zipfile.ZipFile,
|
||||
sheet_path: str,
|
||||
shared_strings: List[str],
|
||||
date_style_ids: set[int],
|
||||
) -> List[List[Cell]]:
|
||||
root = xml_root(archive, sheet_path)
|
||||
rows: List[List[Cell]] = []
|
||||
|
||||
for row in root.findall(".//main:sheetData/main:row", NS):
|
||||
parsed: List[Cell] = []
|
||||
last_column = 0
|
||||
for cell_node in row.findall("main:c", NS):
|
||||
ref = cell_node.attrib.get("r", "")
|
||||
column = cell_column(ref) if ref else last_column + 1
|
||||
while len(parsed) < column - 1:
|
||||
parsed.append(Cell(None))
|
||||
|
||||
cell_type = cell_node.attrib.get("t")
|
||||
style_id = int(cell_node.attrib.get("s", "-1"))
|
||||
formula_node = cell_node.find("main:f", NS)
|
||||
value_node = cell_node.find("main:v", NS)
|
||||
formula = formula_node.text if formula_node is not None else None
|
||||
|
||||
if cell_type == "inlineStr":
|
||||
value = parse_inline_string(cell_node)
|
||||
else:
|
||||
value = parse_scalar(
|
||||
value_node.text if value_node is not None else None,
|
||||
style_id,
|
||||
cell_type,
|
||||
shared_strings,
|
||||
date_style_ids,
|
||||
)
|
||||
|
||||
parsed.append(Cell(value=value, formula=formula, has_broken_reference="#REF!" in (formula or "")))
|
||||
last_column = column
|
||||
|
||||
while parsed and parsed[-1].value is None and not parsed[-1].formula:
|
||||
parsed.pop()
|
||||
if parsed:
|
||||
rows.append(parsed)
|
||||
|
||||
return rows
|
||||
|
||||
|
||||
def workbook_rows(path: str) -> Dict[str, List[List[Cell]]]:
|
||||
with zipfile.ZipFile(path) as archive:
|
||||
workbook_path = "xl/workbook.xml"
|
||||
workbook = xml_root(archive, workbook_path)
|
||||
rels = parse_relationships(archive, "xl/_rels/workbook.xml.rels")
|
||||
shared_strings = load_shared_strings(archive)
|
||||
date_style_ids = load_date_style_ids(archive)
|
||||
|
||||
rows_by_sheet: Dict[str, List[List[Cell]]] = {}
|
||||
for sheet in workbook.findall("main:sheets/main:sheet", NS):
|
||||
name = sheet.attrib["name"]
|
||||
rel_id = sheet.attrib.get(f"{{{NS['rel']}}}id")
|
||||
target = rels.get(rel_id or "")
|
||||
if not target:
|
||||
continue
|
||||
sheet_path = local_path(workbook_path, target)
|
||||
rows_by_sheet[name] = parse_sheet_rows(archive, sheet_path, shared_strings, date_style_ids)
|
||||
|
||||
return rows_by_sheet
|
||||
|
||||
|
||||
def clean_text(value: Any) -> str:
|
||||
return re.sub(r"\s+", " ", str(value or "")).strip()
|
||||
|
||||
|
||||
def number_or_zero(value: Any) -> float:
|
||||
if value in (None, ""):
|
||||
return 0
|
||||
if isinstance(value, (int, float)):
|
||||
return float(value)
|
||||
normalized = str(value).strip().replace(".", "").replace(",", ".")
|
||||
try:
|
||||
return float(normalized)
|
||||
except ValueError:
|
||||
return 0
|
||||
|
||||
|
||||
def int_if_whole(value: float) -> int | float:
|
||||
return int(value) if float(value).is_integer() else value
|
||||
|
||||
|
||||
def row_values(row: List[Cell]) -> List[Any]:
|
||||
return [cell.value for cell in row]
|
||||
|
||||
|
||||
def get(row: List[Any], index: int) -> Any:
|
||||
return row[index] if index < len(row) else None
|
||||
|
||||
|
||||
def non_empty_rows(rows: Iterable[List[Cell]]) -> Iterable[List[Any]]:
|
||||
for row in rows:
|
||||
values = row_values(row)
|
||||
if any(value not in (None, "") for value in values):
|
||||
yield values
|
||||
|
||||
|
||||
def normalize_purchase_need(rows: List[List[Cell]]) -> List[Dict[str, Any]]:
|
||||
output: List[Dict[str, Any]] = []
|
||||
for values in list(non_empty_rows(rows))[1:]:
|
||||
product = clean_text(get(values, 0))
|
||||
sku = clean_text(get(values, 1))
|
||||
if not product:
|
||||
continue
|
||||
output.append(
|
||||
{
|
||||
"product": product,
|
||||
"sku": sku,
|
||||
"supplier": clean_text(get(values, 2)),
|
||||
"unit": clean_text(get(values, 3)),
|
||||
"averageCost": number_or_zero(get(values, 4)),
|
||||
"expectedIn": number_or_zero(get(values, 5)),
|
||||
"expectedOut": number_or_zero(get(values, 6)),
|
||||
"physicalStock": number_or_zero(get(values, 7)),
|
||||
"virtualStock": number_or_zero(get(values, 8)),
|
||||
"periodOut": number_or_zero(get(values, 9)),
|
||||
"monthlyAverage": number_or_zero(get(values, 10)),
|
||||
"coverageMonths": number_or_zero(get(values, 11)),
|
||||
"suggestedPurchase": number_or_zero(get(values, 12)),
|
||||
}
|
||||
)
|
||||
return output
|
||||
|
||||
|
||||
def normalize_production_orders(rows: List[List[Cell]]) -> List[Dict[str, Any]]:
|
||||
output: List[Dict[str, Any]] = []
|
||||
for values in list(non_empty_rows(rows))[1:]:
|
||||
product = clean_text(get(values, 4))
|
||||
quantity = number_or_zero(get(values, 6))
|
||||
if not product and not quantity:
|
||||
continue
|
||||
output.append(
|
||||
{
|
||||
"number": clean_text(get(values, 0)),
|
||||
"orderReference": clean_text(get(values, 1)),
|
||||
"startDate": get(values, 2),
|
||||
"expectedDate": get(values, 3),
|
||||
"product": product,
|
||||
"status": clean_text(get(values, 5)),
|
||||
"quantity": int_if_whole(quantity),
|
||||
}
|
||||
)
|
||||
return output
|
||||
|
||||
|
||||
def normalize_product_mapping(rows: List[List[Cell]]) -> List[Dict[str, Any]]:
|
||||
output: List[Dict[str, Any]] = []
|
||||
for values in list(non_empty_rows(rows))[1:]:
|
||||
product = clean_text(get(values, 4))
|
||||
if not product:
|
||||
continue
|
||||
output.append(
|
||||
{
|
||||
"product": product,
|
||||
"purchaseNeedProduct": clean_text(get(values, 0)),
|
||||
"physicalStock": number_or_zero(get(values, 1)),
|
||||
"productionOrderProduct": clean_text(get(values, 2)),
|
||||
"productionOrderQuantity": number_or_zero(get(values, 3)),
|
||||
"totalProductionOrder": number_or_zero(get(values, 5)),
|
||||
"stockPlusProductionOrder": number_or_zero(get(values, 6)),
|
||||
"finishedStock": number_or_zero(get(values, 7)),
|
||||
}
|
||||
)
|
||||
return output
|
||||
|
||||
|
||||
def normalize_two_column_quantity(rows: List[List[Cell]], quantity_name: str) -> List[Dict[str, Any]]:
|
||||
output: List[Dict[str, Any]] = []
|
||||
for values in non_empty_rows(rows):
|
||||
product = clean_text(get(values, 0))
|
||||
if not product:
|
||||
continue
|
||||
output.append({"product": product, quantity_name: number_or_zero(get(values, 1))})
|
||||
return output
|
||||
|
||||
|
||||
def normalize_matrix_sheet(rows: List[List[Cell]]) -> Dict[str, Any]:
|
||||
values = list(non_empty_rows(rows))
|
||||
title = clean_text(get(values[0], 0)) if values else ""
|
||||
total = number_or_zero(get(values[0], 2) if len(values[0]) > 2 else get(values[0], 1)) if values else 0
|
||||
return {
|
||||
"title": title,
|
||||
"total": int_if_whole(total),
|
||||
"rows": [row[:40] for row in values[:120]],
|
||||
}
|
||||
|
||||
|
||||
def is_color_label(value: str) -> bool:
|
||||
normalized = value.strip().lower()
|
||||
if not normalized:
|
||||
return False
|
||||
return normalized in COLOR_WORDS
|
||||
|
||||
|
||||
def extract_color_labels(rows: List[List[Any]], section_index: int) -> List[str]:
|
||||
candidates: List[Tuple[int, List[str]]] = []
|
||||
for nearby in rows[section_index + 1 : section_index + 8]:
|
||||
labels = [clean_text(value) for value in nearby]
|
||||
colors = [label for label in labels if is_color_label(label)]
|
||||
if len(colors) >= 2:
|
||||
candidates.append((len(colors), colors))
|
||||
|
||||
if not candidates:
|
||||
return []
|
||||
|
||||
return max(candidates, key=lambda item: item[0])[1][:24]
|
||||
|
||||
|
||||
def first_number(values: List[Any]) -> float:
|
||||
for value in values:
|
||||
number = number_or_zero(value)
|
||||
if number:
|
||||
return number
|
||||
return 0.0
|
||||
|
||||
|
||||
def normalize_cut_sheet(name: str, rows: List[List[Cell]]) -> Dict[str, Any]:
|
||||
values = list(non_empty_rows(rows))
|
||||
sections: List[Dict[str, Any]] = []
|
||||
broken_references = sum(1 for row in rows for cell in row if cell.has_broken_reference)
|
||||
|
||||
for index, row in enumerate(values):
|
||||
labels = [clean_text(value) for value in row]
|
||||
if not any(label.lower() == "total de rolos" for label in labels):
|
||||
continue
|
||||
|
||||
title = next((label for label in labels if "corte" in label.lower()), "")
|
||||
total_rolls = first_number(row)
|
||||
if not total_rolls and index + 1 < len(values):
|
||||
next_row = values[index + 1]
|
||||
next_labels = [clean_text(value) for value in next_row]
|
||||
if any(label.lower() == "total de rolos" for label in next_labels):
|
||||
total_rolls = first_number(next_row)
|
||||
|
||||
total_need = 0.0
|
||||
for position, label in enumerate(labels):
|
||||
if label.lower().startswith("total necc"):
|
||||
total_need = number_or_zero(get(row, position + 1))
|
||||
break
|
||||
|
||||
color_row = extract_color_labels(values, index)
|
||||
|
||||
if title:
|
||||
sections.append(
|
||||
{
|
||||
"family": name,
|
||||
"title": title,
|
||||
"totalRolls": int_if_whole(total_rolls),
|
||||
"totalNeed": int_if_whole(total_need),
|
||||
"colors": color_row[:24],
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
"sheet": name,
|
||||
"brokenFormulaReferences": broken_references,
|
||||
"sections": sections,
|
||||
}
|
||||
|
||||
|
||||
def normalize_workbook(path: str) -> Dict[str, Any]:
|
||||
sheets = workbook_rows(path)
|
||||
normalized = {
|
||||
"source": path,
|
||||
"generatedAt": datetime.now(UTC).isoformat(timespec="seconds").replace("+00:00", "Z"),
|
||||
"summary": {
|
||||
"sheetCount": len(sheets),
|
||||
"sheets": list(sheets.keys()),
|
||||
},
|
||||
"purchaseNeed": normalize_purchase_need(sheets.get("NECESSIDADE DE COMPRA (colar)", [])),
|
||||
"productMappings": normalize_product_mapping(sheets.get("INSERIR NOVOS PRODUTOS", [])),
|
||||
"productionOrders": normalize_production_orders(sheets.get("ORDEM DE PRODUÇÃO (colar)", [])),
|
||||
"realPurchaseNeed": normalize_two_column_quantity(sheets.get("NECESSIDADE REAL DE COMPRA", []), "realNeed"),
|
||||
"outsideItems": normalize_two_column_quantity(sheets.get("ITENS POR FORA", []), "quantity"),
|
||||
"finishedStockMatrix": normalize_matrix_sheet(sheets.get("ESTOQUE PA", [])),
|
||||
"stockPlusProductionOrderMatrix": normalize_matrix_sheet(sheets.get("ESTOQUE PA+ ORDEM DE PRODUÇÃO", [])),
|
||||
"cutPlans": [
|
||||
normalize_cut_sheet(sheet_name, rows)
|
||||
for sheet_name, rows in sheets.items()
|
||||
if sheet_name in CUT_SHEETS
|
||||
],
|
||||
}
|
||||
|
||||
normalized["summary"].update(
|
||||
{
|
||||
"purchaseNeedRows": len(normalized["purchaseNeed"]),
|
||||
"productMappingRows": len(normalized["productMappings"]),
|
||||
"productionOrderRows": len(normalized["productionOrders"]),
|
||||
"realPurchaseNeedRows": len(normalized["realPurchaseNeed"]),
|
||||
"outsideItemRows": len(normalized["outsideItems"]),
|
||||
"cutPlanSections": sum(len(plan["sections"]) for plan in normalized["cutPlans"]),
|
||||
"brokenFormulaReferences": sum(plan["brokenFormulaReferences"] for plan in normalized["cutPlans"]),
|
||||
}
|
||||
)
|
||||
return normalized
|
||||
|
||||
|
||||
def main() -> int:
|
||||
parser = argparse.ArgumentParser(description="Normalize NECESSIDADE DE CORTE workbooks into JSON.")
|
||||
parser.add_argument("workbook", help="Path to the .xlsx workbook")
|
||||
parser.add_argument("-o", "--output", help="Optional output JSON file. Defaults to stdout.")
|
||||
parser.add_argument("--pretty", action="store_true", help="Pretty-print JSON")
|
||||
args = parser.parse_args()
|
||||
|
||||
try:
|
||||
payload = normalize_workbook(args.workbook)
|
||||
except Exception as error: # noqa: BLE001 - CLI should report any parse failure cleanly.
|
||||
print(f"Failed to normalize workbook: {error}", file=sys.stderr)
|
||||
return 1
|
||||
|
||||
text = json.dumps(payload, ensure_ascii=False, indent=2 if args.pretty else None)
|
||||
if args.output:
|
||||
with open(args.output, "w", encoding="utf-8") as handle:
|
||||
handle.write(text)
|
||||
handle.write("\n")
|
||||
else:
|
||||
print(text)
|
||||
return 0
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
raise SystemExit(main())
|
||||
@@ -1,57 +0,0 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const bodyParser = require('body-parser');
|
||||
const authRoutes = require('./routes/authRoutes');
|
||||
const dataRoutes = require('./routes/dataRoutes');
|
||||
const stockRoutes = require('./routes/stockRoutes');
|
||||
const campaignRoutes = require('./routes/campaignRoutes');
|
||||
const internalRoutes = require('./routes/internalRoutes');
|
||||
const analyticsRoutes = require('./routes/analyticsRoutes');
|
||||
const userRoutes = require('./routes/userRoutes');
|
||||
const productionOrderRoutes = require('./routes/productionOrderRoutes');
|
||||
const cuttingSettingsRoutes = require('./routes/cuttingSettingsRoutes');
|
||||
const catalogRoutes = require('./routes/catalogRoutes');
|
||||
const supplyRoutes = require('./routes/supplyRoutes');
|
||||
const databaseDiagnosticRoutes = require('./routes/databaseDiagnosticRoutes');
|
||||
|
||||
const createApp = () => {
|
||||
const app = express();
|
||||
|
||||
app.use(cors());
|
||||
app.use(bodyParser.json());
|
||||
|
||||
app.use('/api', authRoutes);
|
||||
app.use('/api', dataRoutes);
|
||||
app.use('/api', stockRoutes);
|
||||
app.use('/api', campaignRoutes);
|
||||
app.use('/api', productionOrderRoutes);
|
||||
app.use('/api', cuttingSettingsRoutes);
|
||||
app.use('/api', catalogRoutes);
|
||||
app.use('/api', supplyRoutes);
|
||||
app.use('/api', databaseDiagnosticRoutes);
|
||||
app.use('/api', analyticsRoutes);
|
||||
app.use('/api', userRoutes);
|
||||
app.use('/api/internal', internalRoutes);
|
||||
|
||||
app.use((err, req, res, next) => {
|
||||
if (res.headersSent) {
|
||||
next(err);
|
||||
return;
|
||||
}
|
||||
|
||||
const statusCode = err.statusCode || 500;
|
||||
if (statusCode >= 500) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
res.status(statusCode).json({
|
||||
error: err.message || 'Internal server error'
|
||||
});
|
||||
});
|
||||
|
||||
return app;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
createApp
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,128 +0,0 @@
|
||||
const applyProductDisplayAlias = (name) => {
|
||||
const productName = String(name || '').trim();
|
||||
return productName
|
||||
.replace(/^BASE LISA CAMISETA\b/i, 'CAMISETA PREMIUM')
|
||||
.replace(/^BASE LISA OVER SIZE\b/i, 'CAMISETA PREMIUM OVER SIZE')
|
||||
.replace(/^BASE LISA MOLETOM CANGURU\b/i, 'MOLETOM CANGURU PREMIUM');
|
||||
};
|
||||
|
||||
const normalizeCampaignProductName = (name) => String(name || '')
|
||||
.normalize('NFD')
|
||||
.replace(/\p{Diacritic}/gu, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
.toUpperCase();
|
||||
|
||||
const isCampaignEligibleProductName = (name) => {
|
||||
const normalizedName = normalizeCampaignProductName(name);
|
||||
if (!normalizedName) return false;
|
||||
|
||||
if (/^(?:\d+(?:\.\d+)?\s+)?(?:MALHA|RIBANA)\b/.test(normalizedName)) return false;
|
||||
if (/\b(?:TINTA|FILME|POLIAMIDA|PO PARA DTF|ROLO DTF|FLUIDO|PRIMER|CABECA|SENSOR|FILTRO|BOMBA)\b.*\bDTF\b/.test(normalizedName)) return false;
|
||||
if (/\b(?:MALHA|RIBANA|ATACADOR|ILHOS|ETIQUETA|TAG|FITA|LINHA PARA COSTURA|FIO|TECIDO|RETALHO|RESIDUO)\b/.test(normalizedName)) return false;
|
||||
if (/\b(?:SALDO ESTOQUE|FRETE|SERVICO|TRANSPORTE|TECELAGEM|TINTURARIA)\b/.test(normalizedName)) return false;
|
||||
if (/\b(?:PRENSA|MAQUINA|OVERLOCK|OVERLOK|GALONEIRA|PRATELEIRA|CABO FLAT|WIPPER|PRIMER|FLUIDO|SENSOR|FILTRO)\b/.test(normalizedName)) return false;
|
||||
|
||||
return /\b(?:DTF|CAMISETA|CAMISA|MOLETOM|CANGURU|REGATA|OVERSIZE|OVER SIZE)\b/.test(normalizedName);
|
||||
};
|
||||
|
||||
const formatProductNameForDisplay = (name) => {
|
||||
return applyProductDisplayAlias(name)
|
||||
.toLocaleLowerCase('pt-BR')
|
||||
.replace(/(^|[\s/-])(\p{L})/gu, (_, separator, letter) => {
|
||||
return `${separator}${letter.toLocaleUpperCase('pt-BR')}`;
|
||||
});
|
||||
};
|
||||
|
||||
const formatProductList = (productNames) => {
|
||||
const displayNames = productNames.map(formatProductNameForDisplay);
|
||||
|
||||
return displayNames.join(' • ');
|
||||
};
|
||||
|
||||
const groupCampaignRowsByBaseProduct = (rows) => {
|
||||
return rows.reduce((acc, row) => {
|
||||
if (!acc[row.base_product_name]) acc[row.base_product_name] = [];
|
||||
acc[row.base_product_name].push(row);
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const mapCampaignProducts = (groups) => {
|
||||
return Object.entries(groups)
|
||||
.sort(([, aItems], [, bItems]) => {
|
||||
return new Date(aItems[0].created_at).getTime() - new Date(bItems[0].created_at).getTime();
|
||||
})
|
||||
.map(([baseProductName, items]) => {
|
||||
const sortedItems = [...items].sort((a, b) => String(a.nome).localeCompare(String(b.nome), 'pt-BR'));
|
||||
|
||||
return {
|
||||
baseProduct: formatProductNameForDisplay(baseProductName),
|
||||
total_delta: sortedItems.reduce((sum, item) => sum + Number(item.delta_estoque || 0), 0),
|
||||
sizes: sortedItems.map(item => ({
|
||||
id: item.produto_id,
|
||||
nome: item.nome,
|
||||
delta: item.delta_estoque,
|
||||
saldo: item.saldo
|
||||
})),
|
||||
itemIds: sortedItems.map(item => item.id)
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const buildWhatsappCampaignPayload = (products, customers) => {
|
||||
const productNames = products.map(product => product.baseProduct);
|
||||
const productsText = formatProductList(productNames);
|
||||
const allSizes = products.flatMap(product => product.sizes);
|
||||
const totalDelta = products.reduce((sum, product) => sum + product.total_delta, 0);
|
||||
|
||||
return {
|
||||
baseProduct: productsText,
|
||||
productsText,
|
||||
total_delta: totalDelta,
|
||||
sizes: allSizes,
|
||||
products: products.map(({ itemIds, ...product }) => product),
|
||||
customers
|
||||
};
|
||||
};
|
||||
|
||||
const groupCampaignRows = (rows) => {
|
||||
return Object.values(rows.reduce((acc, row) => {
|
||||
const key = `${row.base_product_name}:${row.status}`;
|
||||
if (!acc[key]) {
|
||||
acc[key] = {
|
||||
key,
|
||||
baseProductName: row.base_product_name,
|
||||
status: row.status,
|
||||
totalDelta: 0,
|
||||
rowCount: 0,
|
||||
attempts: 0,
|
||||
lastError: null,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at,
|
||||
sentAt: row.sent_at,
|
||||
items: []
|
||||
};
|
||||
}
|
||||
|
||||
acc[key].totalDelta += Number(row.delta_estoque || 0);
|
||||
acc[key].rowCount += 1;
|
||||
acc[key].attempts = Math.max(acc[key].attempts, Number(row.attempts || 0));
|
||||
acc[key].lastError = row.last_error || acc[key].lastError;
|
||||
acc[key].createdAt = new Date(row.created_at) < new Date(acc[key].createdAt) ? row.created_at : acc[key].createdAt;
|
||||
acc[key].updatedAt = new Date(row.updated_at) > new Date(acc[key].updatedAt) ? row.updated_at : acc[key].updatedAt;
|
||||
acc[key].sentAt = row.sent_at || acc[key].sentAt;
|
||||
acc[key].items.push(row);
|
||||
return acc;
|
||||
}, {})).sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
buildWhatsappCampaignPayload,
|
||||
formatProductNameForDisplay,
|
||||
formatProductList,
|
||||
groupCampaignRows,
|
||||
groupCampaignRowsByBaseProduct,
|
||||
isCampaignEligibleProductName,
|
||||
mapCampaignProducts
|
||||
};
|
||||
@@ -1,447 +0,0 @@
|
||||
const { pool } = require('../db');
|
||||
const { N8N_WHATSAPP_TRIGGER_URL } = require('../config');
|
||||
const {
|
||||
buildWhatsappCampaignPayload,
|
||||
formatProductList,
|
||||
groupCampaignRows,
|
||||
groupCampaignRowsByBaseProduct,
|
||||
isCampaignEligibleProductName,
|
||||
mapCampaignProducts
|
||||
} = require('./campaignFormatter');
|
||||
|
||||
const TOP_BUYERS_LIMIT = 100;
|
||||
const TOP_CLIENTS_DEFAULT_DAYS = 30;
|
||||
const TOP_CLIENTS_DEFAULT_LIMIT = 1000;
|
||||
const TOP_CLIENTS_MAX_LIMIT = 5000;
|
||||
const MAX_CAMPAIGN_ATTEMPTS = 3;
|
||||
const CAMPAIGN_DELTA_THRESHOLD = 100;
|
||||
const SAO_PAULO_TIME_ZONE = 'America/Sao_Paulo';
|
||||
const NORMALIZED_CUSTOMER_NAME_SQL = "NULLIF(LOWER(TRIM(regexp_replace(COALESCE(cliente_nome, ''), '\\s+', ' ', 'g'))), '')";
|
||||
const NORMALIZED_CUSTOMER_PHONE_SQL = "NULLIF(regexp_replace(COALESCE(cliente_fone, ''), '\\D', '', 'g'), '')";
|
||||
const WHATSAPP_CUSTOMER_PHONE_SQL = `
|
||||
CASE
|
||||
WHEN ${NORMALIZED_CUSTOMER_PHONE_SQL} LIKE '55%' THEN ${NORMALIZED_CUSTOMER_PHONE_SQL}
|
||||
WHEN length(${NORMALIZED_CUSTOMER_PHONE_SQL}) IN (10, 11) THEN '55' || ${NORMALIZED_CUSTOMER_PHONE_SQL}
|
||||
ELSE ${NORMALIZED_CUSTOMER_PHONE_SQL}
|
||||
END
|
||||
`;
|
||||
const CUSTOMER_IDENTITY_CTE = `
|
||||
WITH customer_phone_by_name AS (
|
||||
SELECT
|
||||
${NORMALIZED_CUSTOMER_NAME_SQL} as normalized_customer_name,
|
||||
(ARRAY_AGG(NULLIF(cliente_fone, '') ORDER BY data_pedido_date DESC NULLS LAST, id DESC)
|
||||
)[1] as canonical_phone
|
||||
FROM orders
|
||||
WHERE NULLIF(cliente_fone, '') IS NOT NULL
|
||||
AND ${NORMALIZED_CUSTOMER_NAME_SQL} IS NOT NULL
|
||||
GROUP BY normalized_customer_name
|
||||
),
|
||||
identity_orders AS (
|
||||
SELECT
|
||||
orders.*,
|
||||
${NORMALIZED_CUSTOMER_NAME_SQL} as normalized_customer_name,
|
||||
COALESCE(
|
||||
NULLIF(orders.cliente_fone, ''),
|
||||
customer_phone_by_name.canonical_phone,
|
||||
'name:' || COALESCE(NULLIF(orders.cliente_nome, ''), 'Cliente Desconhecido')
|
||||
) as customer_key
|
||||
FROM orders
|
||||
LEFT JOIN customer_phone_by_name
|
||||
ON customer_phone_by_name.normalized_customer_name = ${NORMALIZED_CUSTOMER_NAME_SQL}
|
||||
)
|
||||
`;
|
||||
|
||||
const normalizeDateParam = (value) => {
|
||||
if (!value) return null;
|
||||
|
||||
const match = String(value).trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
||||
if (!match) return null;
|
||||
|
||||
const [, yearValue, monthValue, dayValue] = match;
|
||||
const year = Number(yearValue);
|
||||
const month = Number(monthValue);
|
||||
const day = Number(dayValue);
|
||||
const date = new Date(Date.UTC(year, month - 1, day));
|
||||
|
||||
if (
|
||||
date.getUTCFullYear() !== year ||
|
||||
date.getUTCMonth() !== month - 1 ||
|
||||
date.getUTCDate() !== day
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return `${yearValue}-${monthValue}-${dayValue}`;
|
||||
};
|
||||
|
||||
const parsePositiveInteger = (value, defaultValue, maxValue) => {
|
||||
const parsed = Number.parseInt(value, 10);
|
||||
if (!Number.isFinite(parsed) || parsed < 1) return defaultValue;
|
||||
return Math.min(parsed, maxValue);
|
||||
};
|
||||
|
||||
const getDateStringInTimeZone = (date = new Date(), timeZone = SAO_PAULO_TIME_ZONE) => {
|
||||
const parts = new Intl.DateTimeFormat('en-US', {
|
||||
timeZone,
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}).formatToParts(date);
|
||||
const partMap = Object.fromEntries(parts.map(part => [part.type, part.value]));
|
||||
|
||||
return `${partMap.year}-${partMap.month}-${partMap.day}`;
|
||||
};
|
||||
|
||||
const subtractDaysFromDateString = (dateString, daysToSubtract) => {
|
||||
const [year, month, day] = dateString.split('-').map(Number);
|
||||
const date = new Date(Date.UTC(year, month - 1, day));
|
||||
date.setUTCDate(date.getUTCDate() - daysToSubtract);
|
||||
|
||||
return date.toISOString().slice(0, 10);
|
||||
};
|
||||
|
||||
const getTopClientsDateRange = ({ days = TOP_CLIENTS_DEFAULT_DAYS, start, end } = {}) => {
|
||||
const normalizedDays = parsePositiveInteger(days, TOP_CLIENTS_DEFAULT_DAYS, 3650);
|
||||
const normalizedEnd = normalizeDateParam(end) || getDateStringInTimeZone();
|
||||
const normalizedStart = normalizeDateParam(start) || subtractDaysFromDateString(normalizedEnd, normalizedDays - 1);
|
||||
|
||||
return {
|
||||
days: normalizedDays,
|
||||
start: normalizedStart,
|
||||
end: normalizedEnd
|
||||
};
|
||||
};
|
||||
|
||||
const enqueueStockCampaignItem = async (client, item) => {
|
||||
if (!isCampaignEligibleProductName(item.baseProductName || item.nome)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const query = `
|
||||
INSERT INTO stock_campaign_queue (
|
||||
base_product_name, produto_id, nome, saldo, delta_estoque
|
||||
) VALUES ($1, $2, $3, $4, $5)
|
||||
`;
|
||||
|
||||
await client.query(query, [
|
||||
item.baseProductName,
|
||||
item.produtoId,
|
||||
item.nome,
|
||||
item.saldo,
|
||||
item.deltaEstoque
|
||||
]);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const getTopBuyersAllTime = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT
|
||||
MAX(cliente_nome) as nome,
|
||||
cliente_fone as fone,
|
||||
SUM(quantidade * valor_unitario) as total_gasto,
|
||||
SUM(quantidade) as total_comprado
|
||||
FROM orders
|
||||
WHERE cliente_fone IS NOT NULL
|
||||
AND cliente_fone != ''
|
||||
GROUP BY cliente_fone
|
||||
ORDER BY total_gasto DESC
|
||||
LIMIT $1;
|
||||
`, [TOP_BUYERS_LIMIT]);
|
||||
|
||||
return result.rows;
|
||||
};
|
||||
|
||||
const getTopClientsForCampaign = async ({ days, limit, start, end } = {}) => {
|
||||
const range = getTopClientsDateRange({ days, start, end });
|
||||
const normalizedLimit = parsePositiveInteger(limit, TOP_CLIENTS_DEFAULT_LIMIT, TOP_CLIENTS_MAX_LIMIT);
|
||||
const result = await pool.query(`
|
||||
WITH campaign_orders AS (
|
||||
SELECT
|
||||
orders.*,
|
||||
${WHATSAPP_CUSTOMER_PHONE_SQL} as whatsapp_phone
|
||||
FROM orders
|
||||
)
|
||||
SELECT
|
||||
(
|
||||
ARRAY_AGG(COALESCE(NULLIF(cliente_nome, ''), 'Cliente Desconhecido')
|
||||
ORDER BY data_pedido_date DESC NULLS LAST, id DESC)
|
||||
)[1] as nome,
|
||||
(
|
||||
ARRAY_AGG(whatsapp_phone ORDER BY data_pedido_date DESC NULLS LAST, id DESC)
|
||||
FILTER (WHERE whatsapp_phone IS NOT NULL)
|
||||
)[1] as fone,
|
||||
COALESCE(SUM(quantidade * valor_unitario), 0) as total_gasto,
|
||||
COALESCE(SUM(quantidade), 0) as total_comprado,
|
||||
COUNT(DISTINCT COALESCE(NULLIF(pedido_id, ''), data_pedido || '_' || valor_pedido::text))::int as total_pedidos,
|
||||
MAX(data_pedido_date) as ultima_compra,
|
||||
ARRAY_REMOVE(ARRAY_AGG(DISTINCT whatsapp_phone), NULL) as telefones
|
||||
FROM campaign_orders
|
||||
WHERE data_pedido_date >= $1::date
|
||||
AND data_pedido_date <= $2::date
|
||||
AND whatsapp_phone IS NOT NULL
|
||||
-- A campaign recipient is a WhatsApp destination, so each normalized
|
||||
-- phone number must produce exactly one exported customer.
|
||||
GROUP BY whatsapp_phone
|
||||
ORDER BY total_gasto DESC
|
||||
LIMIT $3;
|
||||
`, [range.start, range.end, normalizedLimit]);
|
||||
|
||||
const customers = result.rows.map(row => ({
|
||||
nome: row.nome,
|
||||
fone: row.fone,
|
||||
total_gasto: Number(row.total_gasto || 0),
|
||||
total_comprado: Number(row.total_comprado || 0),
|
||||
total_pedidos: Number(row.total_pedidos || 0),
|
||||
ultima_compra: row.ultima_compra,
|
||||
telefones: Array.isArray(row.telefones) ? row.telefones : []
|
||||
}));
|
||||
|
||||
return {
|
||||
campaign: 'top_clients',
|
||||
days: range.days,
|
||||
start: range.start,
|
||||
end: range.end,
|
||||
limit: normalizedLimit,
|
||||
count: customers.length,
|
||||
generated_at: new Date().toISOString(),
|
||||
customers
|
||||
};
|
||||
};
|
||||
|
||||
const claimReadyCampaignItems = async () => {
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
const result = await client.query(`
|
||||
WITH ready_groups AS (
|
||||
SELECT base_product_name
|
||||
FROM stock_campaign_queue
|
||||
WHERE status IN ('pending', 'failed')
|
||||
AND attempts < $1
|
||||
GROUP BY base_product_name
|
||||
HAVING SUM(delta_estoque) >= $2
|
||||
),
|
||||
ready_items AS (
|
||||
SELECT queue.id
|
||||
FROM stock_campaign_queue queue
|
||||
JOIN ready_groups ON ready_groups.base_product_name = queue.base_product_name
|
||||
WHERE queue.status IN ('pending', 'failed')
|
||||
AND queue.attempts < $1
|
||||
ORDER BY queue.created_at ASC
|
||||
FOR UPDATE OF queue SKIP LOCKED
|
||||
)
|
||||
UPDATE stock_campaign_queue
|
||||
SET status = 'processing',
|
||||
attempts = attempts + 1,
|
||||
updated_at = CURRENT_TIMESTAMP,
|
||||
last_error = NULL
|
||||
WHERE id IN (SELECT id FROM ready_items)
|
||||
RETURNING *;
|
||||
`, [MAX_CAMPAIGN_ATTEMPTS, CAMPAIGN_DELTA_THRESHOLD]);
|
||||
|
||||
await client.query('COMMIT');
|
||||
return result.rows;
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
const countPendingBelowThresholdGroups = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT COUNT(*)::int as count
|
||||
FROM (
|
||||
SELECT base_product_name
|
||||
FROM stock_campaign_queue
|
||||
WHERE status IN ('pending', 'failed')
|
||||
AND attempts < $1
|
||||
GROUP BY base_product_name
|
||||
HAVING SUM(delta_estoque) < $2
|
||||
) below_threshold_groups;
|
||||
`, [MAX_CAMPAIGN_ATTEMPTS, CAMPAIGN_DELTA_THRESHOLD]);
|
||||
|
||||
return result.rows[0]?.count || 0;
|
||||
};
|
||||
|
||||
const getCampaignQueueRows = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT *
|
||||
FROM stock_campaign_queue
|
||||
ORDER BY created_at DESC, id DESC
|
||||
LIMIT 500;
|
||||
`);
|
||||
|
||||
return result.rows;
|
||||
};
|
||||
|
||||
const getCampaignQueueSummary = async () => {
|
||||
const rows = (await getCampaignQueueRows())
|
||||
.filter(row => isCampaignEligibleProductName(row.base_product_name || row.nome));
|
||||
return {
|
||||
threshold: CAMPAIGN_DELTA_THRESHOLD,
|
||||
maxAttempts: MAX_CAMPAIGN_ATTEMPTS,
|
||||
groups: groupCampaignRows(rows),
|
||||
rows
|
||||
};
|
||||
};
|
||||
|
||||
const getCampaignPreview = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT *
|
||||
FROM stock_campaign_queue
|
||||
WHERE status IN ('pending', 'failed')
|
||||
AND attempts < $1
|
||||
ORDER BY created_at ASC, id ASC;
|
||||
`, [MAX_CAMPAIGN_ATTEMPTS]);
|
||||
const eligibleRows = result.rows.filter(row => isCampaignEligibleProductName(row.base_product_name || row.nome));
|
||||
const groups = groupCampaignRowsByBaseProduct(eligibleRows);
|
||||
const readyGroups = {};
|
||||
const belowThresholdGroups = {};
|
||||
|
||||
Object.entries(groups).forEach(([baseProductName, items]) => {
|
||||
const totalDelta = items.reduce((sum, item) => sum + Number(item.delta_estoque || 0), 0);
|
||||
if (totalDelta >= CAMPAIGN_DELTA_THRESHOLD) {
|
||||
readyGroups[baseProductName] = items;
|
||||
} else {
|
||||
belowThresholdGroups[baseProductName] = items;
|
||||
}
|
||||
});
|
||||
|
||||
const readyProducts = mapCampaignProducts(readyGroups).map(({ itemIds, ...product }) => product);
|
||||
const belowThresholdProducts = mapCampaignProducts(belowThresholdGroups).map(({ itemIds, ...product }) => product);
|
||||
const customers = await getTopBuyersAllTime();
|
||||
|
||||
return {
|
||||
threshold: CAMPAIGN_DELTA_THRESHOLD,
|
||||
readyProducts,
|
||||
belowThresholdProducts,
|
||||
productsText: readyProducts.length ? formatProductList(readyProducts.map(product => product.baseProduct)) : '',
|
||||
customerCount: customers.length,
|
||||
customersPreview: customers.slice(0, 10)
|
||||
};
|
||||
};
|
||||
|
||||
const retryCampaignItems = async ({ ids, baseProductName } = {}) => {
|
||||
const params = [];
|
||||
const filters = [`status IN ('failed', 'skipped')`];
|
||||
|
||||
if (Array.isArray(ids) && ids.length) {
|
||||
params.push(ids.map(Number));
|
||||
filters.push(`id = ANY($${params.length}::int[])`);
|
||||
}
|
||||
|
||||
if (baseProductName) {
|
||||
params.push(baseProductName);
|
||||
filters.push(`base_product_name = $${params.length}`);
|
||||
}
|
||||
|
||||
const result = await pool.query(`
|
||||
UPDATE stock_campaign_queue
|
||||
SET status = 'pending',
|
||||
attempts = 0,
|
||||
last_error = NULL,
|
||||
sent_at = NULL,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE ${filters.join(' AND ')}
|
||||
RETURNING *;
|
||||
`, params);
|
||||
|
||||
return {
|
||||
retried: result.rowCount,
|
||||
rows: result.rows
|
||||
};
|
||||
};
|
||||
|
||||
const updateCampaignItemsStatus = async (ids, status, errorMessage = null) => {
|
||||
if (!ids.length) return;
|
||||
|
||||
await pool.query(`
|
||||
UPDATE stock_campaign_queue
|
||||
SET status = $1::varchar,
|
||||
last_error = $2,
|
||||
updated_at = CURRENT_TIMESTAMP,
|
||||
sent_at = CASE WHEN $1 = 'sent' THEN CURRENT_TIMESTAMP ELSE sent_at END
|
||||
WHERE id = ANY($3::int[]);
|
||||
`, [status, errorMessage, ids]);
|
||||
};
|
||||
|
||||
const skipIneligibleCampaignItems = async (rows) => {
|
||||
const ineligibleRows = rows.filter(row => !isCampaignEligibleProductName(row.base_product_name || row.nome));
|
||||
const ids = ineligibleRows.map(row => row.id);
|
||||
|
||||
await updateCampaignItemsStatus(ids, 'skipped', 'Produto não elegível para campanha de cliente.');
|
||||
|
||||
return new Set(ineligibleRows.map(row => row.base_product_name)).size;
|
||||
};
|
||||
|
||||
const sendWhatsappCampaign = async (products, customers) => {
|
||||
const response = await fetch(N8N_WHATSAPP_TRIGGER_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(buildWhatsappCampaignPayload(products, customers))
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`WhatsApp webhook returned status ${response.status}`);
|
||||
}
|
||||
};
|
||||
|
||||
const processPendingStockCampaigns = async () => {
|
||||
const rows = await claimReadyCampaignItems();
|
||||
const summary = {
|
||||
claimed: rows.length,
|
||||
sentGroups: 0,
|
||||
skippedGroups: 0,
|
||||
failedGroups: 0,
|
||||
pendingBelowThresholdGroups: await countPendingBelowThresholdGroups()
|
||||
};
|
||||
|
||||
if (!rows.length) {
|
||||
return summary;
|
||||
}
|
||||
|
||||
summary.skippedGroups += await skipIneligibleCampaignItems(rows);
|
||||
|
||||
const eligibleRows = rows.filter(row => isCampaignEligibleProductName(row.base_product_name || row.nome));
|
||||
const groups = groupCampaignRowsByBaseProduct(eligibleRows);
|
||||
const products = mapCampaignProducts(groups);
|
||||
const ids = products.flatMap(product => product.itemIds);
|
||||
const customers = await getTopBuyersAllTime();
|
||||
|
||||
if (!products.length) {
|
||||
return summary;
|
||||
}
|
||||
|
||||
if (!customers.length) {
|
||||
await updateCampaignItemsStatus(ids, 'skipped', 'No customers with valid phone numbers found.');
|
||||
summary.skippedGroups += products.length;
|
||||
return summary;
|
||||
}
|
||||
|
||||
try {
|
||||
await sendWhatsappCampaign(products, customers);
|
||||
await updateCampaignItemsStatus(ids, 'sent');
|
||||
summary.sentGroups = products.length;
|
||||
console.log(`[Campaign Queue] Sent one campaign with ${products.length} products to ${customers.length} all-time top buyers.`);
|
||||
} catch (error) {
|
||||
await updateCampaignItemsStatus(ids, 'failed', error.message);
|
||||
summary.failedGroups = products.length;
|
||||
console.error('[Campaign Queue] Failed to send product list campaign:', error);
|
||||
}
|
||||
|
||||
return summary;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
enqueueStockCampaignItem,
|
||||
getCampaignPreview,
|
||||
getCampaignQueueSummary,
|
||||
getTopClientsForCampaign,
|
||||
retryCampaignItems,
|
||||
processPendingStockCampaigns
|
||||
};
|
||||
@@ -1,276 +0,0 @@
|
||||
const { pool } = require('../db');
|
||||
|
||||
const PRODUCT_TYPES = new Set(['finished_product', 'raw_material']);
|
||||
|
||||
const normalizeText = (value) => String(value || '').replace(/\s+/g, ' ').trim();
|
||||
|
||||
const normalizeNumber = (value) => {
|
||||
if (value === '' || value === null || value === undefined) return null;
|
||||
const number = Number(String(value).replace(',', '.'));
|
||||
return Number.isFinite(number) && number > 0 ? number : null;
|
||||
};
|
||||
|
||||
const normalizeProductType = (value) => {
|
||||
const normalized = normalizeText(value);
|
||||
return PRODUCT_TYPES.has(normalized) ? normalized : 'finished_product';
|
||||
};
|
||||
|
||||
const normalizeStringArray = (value) => {
|
||||
if (!Array.isArray(value)) return [];
|
||||
return value.map(item => normalizeText(item)).filter(Boolean);
|
||||
};
|
||||
|
||||
const normalizeNumericMap = (value) => {
|
||||
if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
|
||||
return Object.entries(value).reduce((normalized, [key, rawValue]) => {
|
||||
const normalizedKey = normalizeText(key).toUpperCase();
|
||||
const number = normalizeNumber(rawValue);
|
||||
if (normalizedKey && number) normalized[normalizedKey] = number;
|
||||
return normalized;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const mapCategory = (row) => ({
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
description: row.description || '',
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at
|
||||
});
|
||||
|
||||
const mapProduct = (row) => ({
|
||||
id: row.id,
|
||||
type: row.type,
|
||||
sku: row.sku,
|
||||
name: row.name,
|
||||
categoryId: row.category_id,
|
||||
categoryName: row.category_name || '',
|
||||
composition: row.composition || '',
|
||||
notes: row.notes || '',
|
||||
gramature: row.gramature === null ? null : Number(row.gramature),
|
||||
materialYield: row.material_yield === null ? null : Number(row.material_yield),
|
||||
widthCm: row.width_cm === null ? null : Number(row.width_cm),
|
||||
color: row.color || '',
|
||||
subcategory: row.subcategory || '',
|
||||
sizes: row.sizes || [],
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at
|
||||
});
|
||||
|
||||
const mapConsumptionReference = (row) => ({
|
||||
id: row.id,
|
||||
productId: row.product_id,
|
||||
productSku: row.product_sku,
|
||||
productName: row.product_name,
|
||||
materialProductId: row.material_product_id,
|
||||
materialSku: row.material_sku || '',
|
||||
materialName: row.material_name || '',
|
||||
color: row.color || '',
|
||||
generalYield: row.general_yield === null ? null : Number(row.general_yield),
|
||||
sizeYields: row.size_yields || {},
|
||||
sizeAreas: row.size_areas || {},
|
||||
gramature: row.gramature === null ? null : Number(row.gramature),
|
||||
efficiencyPercent: row.efficiency_percent === null ? null : Number(row.efficiency_percent),
|
||||
ribGPerPiece: row.rib_g_per_piece === null ? null : Number(row.rib_g_per_piece),
|
||||
materialCostPerKg: row.material_cost_per_kg === null ? null : Number(row.material_cost_per_kg),
|
||||
consumptionQuantity: row.consumption_quantity === null ? null : Number(row.consumption_quantity),
|
||||
consumptionUnit: row.consumption_unit || '',
|
||||
source: row.source || 'manual',
|
||||
lastProductionOrderId: row.last_production_order_id === null ? null : Number(row.last_production_order_id),
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at
|
||||
});
|
||||
|
||||
const listCategories = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT id, name, description, created_at, updated_at
|
||||
FROM catalog_categories
|
||||
ORDER BY name
|
||||
`);
|
||||
return result.rows.map(mapCategory);
|
||||
};
|
||||
|
||||
const createCategory = async ({ name, description }) => {
|
||||
const normalizedName = normalizeText(name);
|
||||
if (!normalizedName) {
|
||||
const error = new Error('Nome da categoria é obrigatório.');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
const result = await pool.query(`
|
||||
INSERT INTO catalog_categories (name, description, updated_at)
|
||||
VALUES ($1, $2, CURRENT_TIMESTAMP)
|
||||
ON CONFLICT (name) DO UPDATE
|
||||
SET description = EXCLUDED.description,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
RETURNING id, name, description, created_at, updated_at
|
||||
`, [normalizedName, normalizeText(description) || null]);
|
||||
|
||||
return mapCategory(result.rows[0]);
|
||||
};
|
||||
|
||||
const deleteCategory = async (id) => {
|
||||
await pool.query('DELETE FROM catalog_categories WHERE id = $1', [id]);
|
||||
};
|
||||
|
||||
const listProducts = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT
|
||||
p.id, p.type, p.sku, p.name, p.category_id, c.name AS category_name,
|
||||
p.composition, p.notes, p.gramature, p.material_yield, p.width_cm,
|
||||
p.color, p.subcategory, p.sizes, p.created_at, p.updated_at
|
||||
FROM catalog_products p
|
||||
LEFT JOIN catalog_categories c ON c.id = p.category_id
|
||||
ORDER BY p.type, p.name, p.sku
|
||||
`);
|
||||
return result.rows.map(mapProduct);
|
||||
};
|
||||
|
||||
const createProduct = async (payload) => {
|
||||
const type = normalizeProductType(payload.type);
|
||||
const sku = normalizeText(payload.sku).toUpperCase();
|
||||
const name = normalizeText(payload.name);
|
||||
|
||||
if (!sku || !name) {
|
||||
const error = new Error('SKU e nome do produto são obrigatórios.');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
const categoryId = Number(payload.categoryId) || null;
|
||||
const result = await pool.query(`
|
||||
INSERT INTO catalog_products (
|
||||
type, sku, name, category_id, composition, notes, gramature,
|
||||
material_yield, width_cm, color, subcategory, sizes, updated_at
|
||||
)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, CURRENT_TIMESTAMP)
|
||||
ON CONFLICT (sku) DO UPDATE
|
||||
SET type = EXCLUDED.type,
|
||||
name = EXCLUDED.name,
|
||||
category_id = EXCLUDED.category_id,
|
||||
composition = EXCLUDED.composition,
|
||||
notes = EXCLUDED.notes,
|
||||
gramature = EXCLUDED.gramature,
|
||||
material_yield = EXCLUDED.material_yield,
|
||||
width_cm = EXCLUDED.width_cm,
|
||||
color = EXCLUDED.color,
|
||||
subcategory = EXCLUDED.subcategory,
|
||||
sizes = EXCLUDED.sizes,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
RETURNING id
|
||||
`, [
|
||||
type,
|
||||
sku,
|
||||
name,
|
||||
categoryId,
|
||||
normalizeText(payload.composition) || null,
|
||||
normalizeText(payload.notes) || null,
|
||||
normalizeNumber(payload.gramature),
|
||||
normalizeNumber(payload.materialYield),
|
||||
normalizeNumber(payload.widthCm),
|
||||
normalizeText(payload.color) || null,
|
||||
normalizeText(payload.subcategory) || null,
|
||||
normalizeStringArray(payload.sizes)
|
||||
]);
|
||||
|
||||
const products = await listProducts();
|
||||
return products.find(product => product.id === result.rows[0].id);
|
||||
};
|
||||
|
||||
const deleteProduct = async (id) => {
|
||||
await pool.query('DELETE FROM catalog_products WHERE id = $1', [id]);
|
||||
};
|
||||
|
||||
const listConsumptionReferences = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT
|
||||
r.id, r.product_id, p.sku AS product_sku, p.name AS product_name,
|
||||
r.material_product_id, m.sku AS material_sku, m.name AS material_name,
|
||||
r.color, r.general_yield, r.size_yields, r.size_areas,
|
||||
r.gramature, r.efficiency_percent, r.rib_g_per_piece,
|
||||
r.material_cost_per_kg, r.consumption_quantity, r.consumption_unit,
|
||||
r.source, r.last_production_order_id, r.created_at, r.updated_at
|
||||
FROM consumption_references r
|
||||
JOIN catalog_products p ON p.id = r.product_id
|
||||
LEFT JOIN catalog_products m ON m.id = r.material_product_id
|
||||
ORDER BY p.name, m.name NULLS FIRST, r.color NULLS FIRST
|
||||
`);
|
||||
return result.rows.map(mapConsumptionReference);
|
||||
};
|
||||
|
||||
const createConsumptionReference = async (payload) => {
|
||||
const productId = Number(payload.productId);
|
||||
if (!productId) {
|
||||
const error = new Error('Produto é obrigatório.');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
const sizeYields = normalizeNumericMap(payload.sizeYields);
|
||||
const sizeAreas = normalizeNumericMap(payload.sizeAreas);
|
||||
const generalYield = normalizeNumber(payload.generalYield);
|
||||
const calculatedYield = Object.values(sizeYields).length
|
||||
? Object.values(sizeYields).reduce((total, value) => total + value, 0) / Object.values(sizeYields).length
|
||||
: null;
|
||||
const consumptionQuantity = normalizeNumber(payload.consumptionQuantity);
|
||||
|
||||
if (!generalYield && !calculatedYield && !consumptionQuantity) {
|
||||
const error = new Error('Informe o rendimento ou consumo por peça.');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
const result = await pool.query(`
|
||||
INSERT INTO consumption_references (
|
||||
product_id, material_product_id, color, general_yield, size_yields,
|
||||
size_areas, gramature, efficiency_percent, rib_g_per_piece,
|
||||
material_cost_per_kg, consumption_quantity, consumption_unit, source, updated_at
|
||||
)
|
||||
VALUES ($1, $2, $3, $4, $5::jsonb, $6::jsonb, $7, $8, $9, $10, $11, $12, 'manual', CURRENT_TIMESTAMP)
|
||||
RETURNING id
|
||||
`, [
|
||||
productId,
|
||||
Number(payload.materialProductId) || null,
|
||||
normalizeText(payload.color) || null,
|
||||
generalYield || calculatedYield,
|
||||
JSON.stringify(sizeYields),
|
||||
JSON.stringify(sizeAreas),
|
||||
normalizeNumber(payload.gramature),
|
||||
normalizeNumber(payload.efficiencyPercent),
|
||||
normalizeNumber(payload.ribGPerPiece),
|
||||
normalizeNumber(payload.materialCostPerKg),
|
||||
consumptionQuantity,
|
||||
normalizeText(payload.consumptionUnit) || null
|
||||
]);
|
||||
|
||||
const references = await listConsumptionReferences();
|
||||
return references.find(reference => reference.id === result.rows[0].id);
|
||||
};
|
||||
|
||||
const deleteConsumptionReference = async (id) => {
|
||||
await pool.query('DELETE FROM consumption_references WHERE id = $1', [id]);
|
||||
};
|
||||
|
||||
const getCatalogSummary = async () => {
|
||||
const [categories, products, consumptionReferences] = await Promise.all([
|
||||
listCategories(),
|
||||
listProducts(),
|
||||
listConsumptionReferences()
|
||||
]);
|
||||
|
||||
return { categories, products, consumptionReferences };
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
createCategory,
|
||||
createConsumptionReference,
|
||||
createProduct,
|
||||
deleteCategory,
|
||||
deleteConsumptionReference,
|
||||
deleteProduct,
|
||||
getCatalogSummary,
|
||||
listCategories,
|
||||
listConsumptionReferences,
|
||||
listProducts
|
||||
};
|
||||
@@ -1,157 +0,0 @@
|
||||
const { pool } = require('../db');
|
||||
|
||||
const FAMILY_KEYS = ['BLCS', 'BLOS', 'BLMC', 'BLPM'];
|
||||
const FAMILY_KEY_SET = new Set(FAMILY_KEYS);
|
||||
const PRODUCT_TYPE_KEYS = [
|
||||
'finished_apparel',
|
||||
'finished_accessory',
|
||||
'raw_material',
|
||||
'packaging',
|
||||
'dtf_input',
|
||||
'dtf_service',
|
||||
'kit_bundle',
|
||||
'service',
|
||||
'machine_part',
|
||||
'equipment',
|
||||
'ignore_from_planning',
|
||||
'unknown'
|
||||
];
|
||||
const PRODUCT_TYPE_KEY_SET = new Set(PRODUCT_TYPE_KEYS);
|
||||
|
||||
const normalizeFamilyKey = (value) => {
|
||||
const familyKey = String(value || '').trim().toUpperCase();
|
||||
return FAMILY_KEY_SET.has(familyKey) ? familyKey : '';
|
||||
};
|
||||
|
||||
const normalizeNumber = (value) => {
|
||||
const number = Number(value);
|
||||
return Number.isFinite(number) && number > 0 ? number : null;
|
||||
};
|
||||
|
||||
const normalizeText = (value) => String(value || '').replace(/\s+/g, ' ').trim();
|
||||
|
||||
const normalizeProductType = (value) => {
|
||||
const productType = normalizeText(value);
|
||||
return PRODUCT_TYPE_KEY_SET.has(productType) ? productType : '';
|
||||
};
|
||||
|
||||
const normalizeFamilyYields = (familyYields = {}) => {
|
||||
return FAMILY_KEYS.reduce((normalized, familyKey) => {
|
||||
const unitsPerRoll = normalizeNumber(familyYields[familyKey]);
|
||||
if (unitsPerRoll) normalized[familyKey] = unitsPerRoll;
|
||||
return normalized;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const normalizeProductOverrides = (productOverrides = {}) => {
|
||||
return Object.entries(productOverrides).reduce((normalized, [productId, override]) => {
|
||||
const normalizedProductId = normalizeText(productId);
|
||||
if (!normalizedProductId || !override || typeof override !== 'object') return normalized;
|
||||
|
||||
const familyKey = normalizeFamilyKey(override.familyKey);
|
||||
const color = normalizeText(override.color);
|
||||
const size = normalizeText(override.size).toUpperCase();
|
||||
const productType = normalizeProductType(override.productType);
|
||||
const planningNotes = normalizeText(override.planningNotes);
|
||||
|
||||
if (!familyKey && !color && !size && !productType && !planningNotes) return normalized;
|
||||
|
||||
normalized[normalizedProductId] = {
|
||||
familyKey,
|
||||
color,
|
||||
size,
|
||||
productType,
|
||||
planningNotes
|
||||
};
|
||||
|
||||
return normalized;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const listCuttingSettings = async () => {
|
||||
const [familyResult, overrideResult] = await Promise.all([
|
||||
pool.query(`
|
||||
SELECT family_key, units_per_roll
|
||||
FROM cutting_family_rules
|
||||
WHERE units_per_roll IS NOT NULL AND units_per_roll > 0
|
||||
ORDER BY family_key
|
||||
`),
|
||||
pool.query(`
|
||||
SELECT product_id, family_key, color, size, product_type, planning_notes
|
||||
FROM cutting_product_overrides
|
||||
ORDER BY product_id
|
||||
`)
|
||||
]);
|
||||
|
||||
return {
|
||||
familyYields: familyResult.rows.reduce((settings, row) => {
|
||||
settings[row.family_key] = Number(row.units_per_roll);
|
||||
return settings;
|
||||
}, {}),
|
||||
productOverrides: overrideResult.rows.reduce((settings, row) => {
|
||||
settings[row.product_id] = {
|
||||
familyKey: row.family_key || '',
|
||||
color: row.color || '',
|
||||
size: row.size || '',
|
||||
productType: row.product_type || '',
|
||||
planningNotes: row.planning_notes || ''
|
||||
};
|
||||
return settings;
|
||||
}, {})
|
||||
};
|
||||
};
|
||||
|
||||
const saveCuttingSettings = async ({ familyYields = {}, productOverrides = {} }) => {
|
||||
const normalizedFamilyYields = normalizeFamilyYields(familyYields);
|
||||
const normalizedProductOverrides = normalizeProductOverrides(productOverrides);
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
await client.query('DELETE FROM cutting_family_rules');
|
||||
for (const [familyKey, unitsPerRoll] of Object.entries(normalizedFamilyYields)) {
|
||||
await client.query(`
|
||||
INSERT INTO cutting_family_rules (family_key, units_per_roll, updated_at)
|
||||
VALUES ($1, $2, CURRENT_TIMESTAMP)
|
||||
`, [familyKey, unitsPerRoll]);
|
||||
}
|
||||
|
||||
await client.query('DELETE FROM cutting_product_overrides');
|
||||
for (const [productId, override] of Object.entries(normalizedProductOverrides)) {
|
||||
await client.query(`
|
||||
INSERT INTO cutting_product_overrides (product_id, family_key, color, size, product_type, planning_notes, updated_at)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, CURRENT_TIMESTAMP)
|
||||
`, [
|
||||
productId,
|
||||
override.familyKey || null,
|
||||
override.color || null,
|
||||
override.size || null,
|
||||
override.productType || null,
|
||||
override.planningNotes || null
|
||||
]);
|
||||
}
|
||||
|
||||
await client.query('COMMIT');
|
||||
|
||||
return {
|
||||
familyYields: normalizedFamilyYields,
|
||||
productOverrides: normalizedProductOverrides
|
||||
};
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
FAMILY_KEYS,
|
||||
listCuttingSettings,
|
||||
normalizeFamilyKey,
|
||||
normalizeFamilyYields,
|
||||
normalizeProductType,
|
||||
normalizeProductOverrides,
|
||||
saveCuttingSettings
|
||||
};
|
||||
@@ -1,177 +0,0 @@
|
||||
const { pool } = require('../db');
|
||||
|
||||
const SAMPLE_LIMIT = 50;
|
||||
|
||||
const sampleSpecs = {
|
||||
catalog_categories: {
|
||||
columns: ['id', 'name', 'description', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
catalog_products: {
|
||||
columns: ['id', 'type', 'sku', 'name', 'category_id', 'composition', 'gramature', 'material_yield', 'width_cm', 'color', 'subcategory', 'sizes', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
consumption_references: {
|
||||
columns: ['id', 'product_id', 'material_product_id', 'color', 'general_yield', 'size_yields', 'size_areas', 'gramature', 'efficiency_percent', 'rib_g_per_piece', 'material_cost_per_kg', 'consumption_quantity', 'consumption_unit', 'source', 'last_production_order_id', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
cutting_family_rules: {
|
||||
columns: ['family_key', 'units_per_roll', 'updated_at'],
|
||||
orderBy: ['family_key']
|
||||
},
|
||||
cutting_product_overrides: {
|
||||
columns: ['product_id', 'family_key', 'color', 'size', 'product_type', 'planning_notes', 'updated_at'],
|
||||
orderBy: ['updated_at', 'product_id']
|
||||
},
|
||||
orders: {
|
||||
columns: ['id', 'pedido_id', 'data_pedido', 'data_pedido_date', 'valor_pedido', 'produto_id', 'produto_descricao', 'quantidade', 'valor_unitario', 'id_vendedor', 'nome_vendedor', 'marketplace', 'canal_venda', 'numero_ecommerce', 'created_at'],
|
||||
orderBy: ['data_pedido_date', 'created_at', 'id']
|
||||
},
|
||||
production_order_markers: {
|
||||
columns: ['id', 'production_order_id', 'label', 'color', 'created_at'],
|
||||
orderBy: ['created_at', 'id']
|
||||
},
|
||||
production_order_components: {
|
||||
columns: ['id', 'production_order_id', 'component_tiny_id', 'component_sku', 'component_name', 'quantity_per_unit', 'total_quantity', 'unit', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
production_order_steps: {
|
||||
columns: ['id', 'production_order_id', 'step_number', 'name', 'start_date', 'end_date', 'status', 'color', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
production_orders: {
|
||||
columns: ['id', 'tiny_id', 'number', 'status', 'order_reference', 'issue_date', 'expected_date', 'product_sku', 'product_description', 'quantity', 'unit', 'integration_status', 'notes', 'supplier', 'lot_code', 'roll_quantity', 'fabric_kg', 'rib_kg', 'yield_pieces_per_kg', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
stock: {
|
||||
columns: ['produto_id', 'nome', 'saldo', 'delta_estoque', 'updated_at'],
|
||||
orderBy: ['updated_at', 'produto_id']
|
||||
},
|
||||
stock_campaign_queue: {
|
||||
columns: ['id', 'base_product_name', 'produto_id', 'nome', 'saldo', 'delta_estoque', 'status', 'attempts', 'last_error', 'created_at', 'updated_at', 'sent_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
supply_fabric_plans: {
|
||||
columns: ['id', 'material', 'color', 'quantity_kg', 'supplier', 'priority', 'status', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
supply_movements: {
|
||||
columns: ['id', 'receipt_id', 'lot_id', 'type', 'category', 'product', 'quantity', 'unit', 'reason', 'created_at'],
|
||||
orderBy: ['created_at', 'id']
|
||||
},
|
||||
supply_receipts: {
|
||||
columns: ['id', 'category', 'product', 'quantity', 'unit', 'supplier', 'invoice', 'notes', 'status', 'created_at', 'updated_at', 'approved_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
},
|
||||
supply_stock_lots: {
|
||||
columns: ['id', 'receipt_id', 'category', 'product', 'quantity', 'unit', 'supplier', 'invoice', 'status', 'created_at', 'updated_at'],
|
||||
orderBy: ['updated_at', 'created_at', 'id']
|
||||
}
|
||||
};
|
||||
|
||||
const quoteIdentifier = (identifier) => {
|
||||
if (!/^[a-z_][a-z0-9_]*$/.test(identifier)) {
|
||||
throw new Error(`Unsafe database identifier: ${identifier}`);
|
||||
}
|
||||
|
||||
return `"${identifier}"`;
|
||||
};
|
||||
|
||||
const listPublicTables = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT table_name
|
||||
FROM information_schema.tables
|
||||
WHERE table_schema = 'public'
|
||||
AND table_type = 'BASE TABLE'
|
||||
ORDER BY table_name
|
||||
`);
|
||||
|
||||
return result.rows.map(row => row.table_name);
|
||||
};
|
||||
|
||||
const listPublicColumns = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT table_name, column_name
|
||||
FROM information_schema.columns
|
||||
WHERE table_schema = 'public'
|
||||
ORDER BY table_name, ordinal_position
|
||||
`);
|
||||
|
||||
return result.rows.reduce((columnsByTable, row) => {
|
||||
if (!columnsByTable[row.table_name]) columnsByTable[row.table_name] = [];
|
||||
columnsByTable[row.table_name].push(row.column_name);
|
||||
return columnsByTable;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const countTableRows = async (tableName) => {
|
||||
const result = await pool.query(`SELECT COUNT(*)::int AS count FROM ${quoteIdentifier(tableName)}`);
|
||||
return result.rows[0]?.count || 0;
|
||||
};
|
||||
|
||||
const buildOrderClause = (spec, availableColumns) => {
|
||||
const orderColumns = spec.orderBy.filter(column => availableColumns.includes(column));
|
||||
if (!orderColumns.length) return '';
|
||||
|
||||
const clauses = orderColumns.map(column => {
|
||||
const direction = column === 'family_key' || column === 'product_id' || column === 'produto_id' ? 'ASC' : 'DESC';
|
||||
return `${quoteIdentifier(column)} ${direction}`;
|
||||
});
|
||||
|
||||
return ` ORDER BY ${clauses.join(', ')}`;
|
||||
};
|
||||
|
||||
const sampleTableRows = async (tableName, availableColumns) => {
|
||||
const spec = sampleSpecs[tableName];
|
||||
if (!spec) return null;
|
||||
|
||||
const selectedColumns = spec.columns.filter(column => availableColumns.includes(column));
|
||||
if (!selectedColumns.length) return null;
|
||||
|
||||
const selectClause = selectedColumns.map(quoteIdentifier).join(', ');
|
||||
const orderClause = buildOrderClause(spec, availableColumns);
|
||||
const result = await pool.query(
|
||||
`SELECT ${selectClause} FROM ${quoteIdentifier(tableName)}${orderClause} LIMIT $1`,
|
||||
[SAMPLE_LIMIT]
|
||||
);
|
||||
|
||||
return result.rows;
|
||||
};
|
||||
|
||||
const buildDatabaseDiagnostic = async (user) => {
|
||||
const [tables, columnsByTable] = await Promise.all([
|
||||
listPublicTables(),
|
||||
listPublicColumns()
|
||||
]);
|
||||
|
||||
const counts = {};
|
||||
const samples = {};
|
||||
|
||||
for (const tableName of tables) {
|
||||
counts[tableName] = await countTableRows(tableName);
|
||||
|
||||
const sampleRows = await sampleTableRows(tableName, columnsByTable[tableName] || []);
|
||||
if (sampleRows) samples[tableName] = sampleRows;
|
||||
}
|
||||
|
||||
return {
|
||||
generatedAt: new Date().toISOString(),
|
||||
generatedBy: {
|
||||
role: user?.role || null,
|
||||
userId: user?.userId || null
|
||||
},
|
||||
sampleLimit: SAMPLE_LIMIT,
|
||||
privacy: {
|
||||
countsIncludeAllPublicTables: true,
|
||||
samplesExcludeTables: ['app_users', 'client_identity_tokens'],
|
||||
ordersSampleExcludesCustomerNameAndPhone: true,
|
||||
productionOrdersSampleExcludesTinyPayload: true
|
||||
},
|
||||
counts,
|
||||
samples
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
buildDatabaseDiagnostic
|
||||
};
|
||||
@@ -1,55 +0,0 @@
|
||||
const { pool } = require('../db');
|
||||
const { formatOrderRow, normalizeOrderPayload } = require('../mappers/orderMapper');
|
||||
|
||||
const listOrders = async () => {
|
||||
const result = await pool.query('SELECT * FROM orders ORDER BY id DESC');
|
||||
return result.rows.map(formatOrderRow);
|
||||
};
|
||||
|
||||
const upsertOrders = async (payload) => {
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
const insertQuery = `
|
||||
INSERT INTO orders (
|
||||
cliente_nome, data_pedido, data_pedido_date, valor_pedido,
|
||||
produto_id, produto_descricao, quantidade, valor_unitario, pedido_id, cliente_fone,
|
||||
cliente_nome_fantasia, id_vendedor, nome_vendedor, marketplace, canal_venda, numero_ecommerce
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16)
|
||||
ON CONFLICT (pedido_id, produto_id) DO UPDATE SET
|
||||
cliente_nome = EXCLUDED.cliente_nome,
|
||||
data_pedido = EXCLUDED.data_pedido,
|
||||
data_pedido_date = EXCLUDED.data_pedido_date,
|
||||
valor_pedido = EXCLUDED.valor_pedido,
|
||||
produto_descricao = EXCLUDED.produto_descricao,
|
||||
quantidade = EXCLUDED.quantidade,
|
||||
valor_unitario = EXCLUDED.valor_unitario,
|
||||
cliente_fone = COALESCE(NULLIF(EXCLUDED.cliente_fone, ''), orders.cliente_fone),
|
||||
cliente_nome_fantasia = COALESCE(NULLIF(EXCLUDED.cliente_nome_fantasia, ''), orders.cliente_nome_fantasia),
|
||||
id_vendedor = COALESCE(NULLIF(EXCLUDED.id_vendedor, ''), orders.id_vendedor),
|
||||
nome_vendedor = COALESCE(NULLIF(EXCLUDED.nome_vendedor, ''), orders.nome_vendedor),
|
||||
marketplace = COALESCE(NULLIF(EXCLUDED.marketplace, ''), orders.marketplace),
|
||||
canal_venda = COALESCE(NULLIF(EXCLUDED.canal_venda, ''), orders.canal_venda),
|
||||
numero_ecommerce = COALESCE(NULLIF(EXCLUDED.numero_ecommerce, ''), orders.numero_ecommerce),
|
||||
created_at = CURRENT_TIMESTAMP
|
||||
`;
|
||||
|
||||
for (const item of payload) {
|
||||
await client.query(insertQuery, normalizeOrderPayload(item));
|
||||
}
|
||||
|
||||
await client.query('COMMIT');
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
listOrders,
|
||||
upsertOrders
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,56 +0,0 @@
|
||||
const { pool } = require('../db');
|
||||
const { normalizeStockPayload } = require('../mappers/stockMapper');
|
||||
const { enqueueStockCampaignItem } = require('./campaignService');
|
||||
|
||||
const POSITIVE_STOCK_DELTA_THRESHOLD = 1;
|
||||
|
||||
const listStock = async () => {
|
||||
const result = await pool.query('SELECT * FROM stock');
|
||||
return result.rows;
|
||||
};
|
||||
|
||||
const upsertStockItems = async (payload) => {
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
const insertQuery = `
|
||||
INSERT INTO stock (produto_id, nome, saldo, delta_estoque)
|
||||
VALUES ($1, $2, $3, $4)
|
||||
ON CONFLICT (produto_id) DO UPDATE SET
|
||||
nome = EXCLUDED.nome,
|
||||
saldo = EXCLUDED.saldo,
|
||||
delta_estoque = EXCLUDED.delta_estoque,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
`;
|
||||
|
||||
for (const rawItem of payload) {
|
||||
const item = normalizeStockPayload(rawItem);
|
||||
if (!item.produtoId) continue;
|
||||
|
||||
await client.query(insertQuery, [
|
||||
item.produtoId,
|
||||
item.nome,
|
||||
item.saldo,
|
||||
item.deltaEstoque
|
||||
]);
|
||||
|
||||
if (item.deltaEstoque >= POSITIVE_STOCK_DELTA_THRESHOLD) {
|
||||
await enqueueStockCampaignItem(client, item);
|
||||
}
|
||||
}
|
||||
|
||||
await client.query('COMMIT');
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
listStock,
|
||||
upsertStockItems
|
||||
};
|
||||
@@ -1,835 +0,0 @@
|
||||
const { pool } = require('../db');
|
||||
|
||||
const DEFAULT_SUPPLY_LOOKBACK_DAYS = 30;
|
||||
const DEFAULT_SUPPLY_COVERAGE_DAYS = 30;
|
||||
|
||||
const normalizeText = (value) => String(value || '').replace(/\s+/g, ' ').trim();
|
||||
|
||||
const normalizeNumber = (value) => {
|
||||
if (value === '' || value === null || value === undefined) return null;
|
||||
const number = Number(String(value).replace(',', '.'));
|
||||
return Number.isFinite(number) && number > 0 ? number : null;
|
||||
};
|
||||
|
||||
const normalizeNonNegativeNumber = (value) => {
|
||||
if (value === '' || value === null || value === undefined) return null;
|
||||
const number = Number(String(value).replace(',', '.'));
|
||||
return Number.isFinite(number) && number >= 0 ? number : null;
|
||||
};
|
||||
|
||||
const normalizeKey = (value) => normalizeText(value)
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.toLowerCase();
|
||||
|
||||
const normalizeSku = (value) => normalizeText(value).toUpperCase();
|
||||
|
||||
const normalizeUnit = (value) => {
|
||||
const unit = normalizeText(value).toLowerCase();
|
||||
if (['kg', 'quilo', 'quilos'].includes(unit)) return 'kg';
|
||||
if (['un', 'und', 'un.', 'unidade', 'unidades'].includes(unit)) return 'un.';
|
||||
return unit || 'un.';
|
||||
};
|
||||
|
||||
const mapReceipt = (row) => ({
|
||||
id: row.id,
|
||||
category: row.category,
|
||||
product: row.product,
|
||||
quantity: Number(row.quantity),
|
||||
unit: row.unit,
|
||||
supplier: row.supplier || '',
|
||||
invoice: row.invoice || '',
|
||||
notes: row.notes || '',
|
||||
status: row.status,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at,
|
||||
approvedAt: row.approved_at
|
||||
});
|
||||
|
||||
const mapLot = (row) => ({
|
||||
id: row.id,
|
||||
receiptId: row.receipt_id,
|
||||
category: row.category,
|
||||
product: row.product,
|
||||
quantity: Number(row.quantity),
|
||||
unit: row.unit,
|
||||
supplier: row.supplier || '',
|
||||
invoice: row.invoice || '',
|
||||
status: row.status,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at
|
||||
});
|
||||
|
||||
const mapMovement = (row) => ({
|
||||
id: row.id,
|
||||
receiptId: row.receipt_id,
|
||||
lotId: row.lot_id,
|
||||
type: row.type,
|
||||
category: row.category,
|
||||
product: row.product,
|
||||
quantity: Number(row.quantity),
|
||||
unit: row.unit,
|
||||
reason: row.reason || '',
|
||||
createdAt: row.created_at
|
||||
});
|
||||
|
||||
const mapFabricPlan = (row) => ({
|
||||
id: row.id,
|
||||
material: row.material,
|
||||
color: row.color || '',
|
||||
quantityKg: Number(row.quantity_kg),
|
||||
supplier: row.supplier || '',
|
||||
priority: row.priority,
|
||||
status: row.status,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at
|
||||
});
|
||||
|
||||
const createValidationError = (message) => {
|
||||
const error = new Error(message);
|
||||
error.statusCode = 400;
|
||||
return error;
|
||||
};
|
||||
|
||||
const listReceipts = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT id, category, product, quantity, unit, supplier, invoice, notes, status, created_at, updated_at, approved_at
|
||||
FROM supply_receipts
|
||||
ORDER BY created_at DESC, id DESC
|
||||
`);
|
||||
return result.rows.map(mapReceipt);
|
||||
};
|
||||
|
||||
const listLots = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT id, receipt_id, category, product, quantity, unit, supplier, invoice, status, created_at, updated_at
|
||||
FROM supply_stock_lots
|
||||
WHERE status = 'active'
|
||||
ORDER BY created_at DESC, id DESC
|
||||
`);
|
||||
return result.rows.map(mapLot);
|
||||
};
|
||||
|
||||
const listMovements = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT id, receipt_id, lot_id, type, category, product, quantity, unit, reason, created_at
|
||||
FROM supply_movements
|
||||
ORDER BY created_at DESC, id DESC
|
||||
`);
|
||||
return result.rows.map(mapMovement);
|
||||
};
|
||||
|
||||
const listFabricPlans = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT id, material, color, quantity_kg, supplier, priority, status, created_at, updated_at
|
||||
FROM supply_fabric_plans
|
||||
WHERE status = 'active'
|
||||
ORDER BY
|
||||
CASE priority
|
||||
WHEN 'Crítico' THEN 1
|
||||
WHEN 'Atenção' THEN 2
|
||||
ELSE 3
|
||||
END,
|
||||
created_at DESC,
|
||||
id DESC
|
||||
`);
|
||||
return result.rows.map(mapFabricPlan);
|
||||
};
|
||||
|
||||
const buildPurchaseNeeds = (plans, lots, receipts) => {
|
||||
const needsByMaterial = new Map();
|
||||
|
||||
plans.forEach(plan => {
|
||||
const key = normalizeKey(plan.material);
|
||||
if (!key) return;
|
||||
|
||||
const current = needsByMaterial.get(key) || {
|
||||
material: plan.material,
|
||||
plannedKg: 0,
|
||||
stockKg: 0,
|
||||
pendingKg: 0,
|
||||
purchaseKg: 0,
|
||||
priority: 'Normal',
|
||||
suppliers: new Set(),
|
||||
colors: new Set()
|
||||
};
|
||||
|
||||
current.plannedKg += plan.quantityKg;
|
||||
if (plan.supplier) current.suppliers.add(plan.supplier);
|
||||
if (plan.color) current.colors.add(plan.color);
|
||||
if (plan.priority === 'Crítico') current.priority = 'Crítico';
|
||||
if (plan.priority === 'Atenção' && current.priority !== 'Crítico') current.priority = 'Atenção';
|
||||
needsByMaterial.set(key, current);
|
||||
});
|
||||
|
||||
lots.forEach(lot => {
|
||||
if (lot.unit !== 'kg') return;
|
||||
const need = needsByMaterial.get(normalizeKey(lot.product));
|
||||
if (need) need.stockKg += lot.quantity;
|
||||
});
|
||||
|
||||
receipts.forEach(receipt => {
|
||||
if (receipt.status !== 'pending' || receipt.unit !== 'kg') return;
|
||||
const need = needsByMaterial.get(normalizeKey(receipt.product));
|
||||
if (need) need.pendingKg += receipt.quantity;
|
||||
});
|
||||
|
||||
return Array.from(needsByMaterial.values())
|
||||
.map(need => {
|
||||
const purchaseKg = Math.max(need.plannedKg - need.stockKg - need.pendingKg, 0);
|
||||
let status = 'ok';
|
||||
if (purchaseKg > 0 && (need.priority === 'Crítico' || need.stockKg === 0)) status = 'critical';
|
||||
else if (purchaseKg > 0) status = 'attention';
|
||||
|
||||
return {
|
||||
material: need.material,
|
||||
plannedKg: need.plannedKg,
|
||||
stockKg: need.stockKg,
|
||||
pendingKg: need.pendingKg,
|
||||
purchaseKg,
|
||||
priority: need.priority,
|
||||
status,
|
||||
suppliers: Array.from(need.suppliers),
|
||||
colors: Array.from(need.colors)
|
||||
};
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const statusOrder = { critical: 1, attention: 2, ok: 3 };
|
||||
return statusOrder[a.status] - statusOrder[b.status] || b.purchaseKg - a.purchaseKg || a.material.localeCompare(b.material);
|
||||
});
|
||||
};
|
||||
|
||||
const getReferenceYield = (reference) => {
|
||||
if (reference.general_yield !== null && Number(reference.general_yield) > 0) {
|
||||
return Number(reference.general_yield);
|
||||
}
|
||||
|
||||
const sizeYields = reference.size_yields && typeof reference.size_yields === 'object'
|
||||
? Object.values(reference.size_yields).map(Number).filter(value => Number.isFinite(value) && value > 0)
|
||||
: [];
|
||||
|
||||
if (!sizeYields.length) return null;
|
||||
return sizeYields.reduce((total, value) => total + value, 0) / sizeYields.length;
|
||||
};
|
||||
|
||||
const listProjectDemandRows = async () => {
|
||||
const result = await pool.query(`
|
||||
WITH bounds AS (
|
||||
SELECT MAX(data_pedido_date) AS end_date
|
||||
FROM orders
|
||||
WHERE data_pedido_date IS NOT NULL
|
||||
),
|
||||
period_orders AS (
|
||||
SELECT
|
||||
produto_id,
|
||||
MAX(produto_descricao) AS product_name,
|
||||
SUM(quantidade)::numeric AS quantity_sold
|
||||
FROM orders, bounds
|
||||
WHERE data_pedido_date IS NOT NULL
|
||||
AND bounds.end_date IS NOT NULL
|
||||
AND data_pedido_date >= (bounds.end_date - ($1::int - 1) * INTERVAL '1 day')::date
|
||||
AND data_pedido_date <= bounds.end_date
|
||||
GROUP BY produto_id
|
||||
)
|
||||
SELECT
|
||||
COALESCE(period_orders.produto_id, stock.produto_id) AS product_id,
|
||||
COALESCE(NULLIF(period_orders.product_name, ''), NULLIF(stock.nome, ''), 'Produto sem nome') AS product_name,
|
||||
COALESCE(period_orders.quantity_sold, 0)::numeric AS quantity_sold,
|
||||
COALESCE(stock.saldo, 0)::numeric AS stock_quantity
|
||||
FROM period_orders
|
||||
FULL OUTER JOIN stock ON stock.produto_id = period_orders.produto_id
|
||||
WHERE COALESCE(period_orders.produto_id, stock.produto_id, '') <> ''
|
||||
ORDER BY quantity_sold DESC, product_name;
|
||||
`, [DEFAULT_SUPPLY_LOOKBACK_DAYS]);
|
||||
|
||||
return result.rows;
|
||||
};
|
||||
|
||||
const listConsumptionReferenceRows = async () => {
|
||||
const result = await pool.query(`
|
||||
SELECT
|
||||
r.product_id,
|
||||
p.sku AS product_sku,
|
||||
p.name AS product_name,
|
||||
r.material_product_id,
|
||||
m.sku AS material_sku,
|
||||
m.name AS material_name,
|
||||
r.color,
|
||||
r.general_yield,
|
||||
r.size_yields,
|
||||
r.consumption_quantity,
|
||||
r.consumption_unit,
|
||||
r.source
|
||||
FROM consumption_references r
|
||||
JOIN catalog_products p ON p.id = r.product_id
|
||||
LEFT JOIN catalog_products m ON m.id = r.material_product_id
|
||||
ORDER BY p.sku, r.color NULLS FIRST;
|
||||
`);
|
||||
|
||||
return result.rows;
|
||||
};
|
||||
|
||||
const mergeNeedLine = (needsByMaterial, key, patch) => {
|
||||
const current = needsByMaterial.get(key) || {
|
||||
material: patch.material,
|
||||
plannedKg: 0,
|
||||
stockKg: 0,
|
||||
pendingKg: 0,
|
||||
purchaseKg: 0,
|
||||
priority: patch.priority || 'Normal',
|
||||
suppliers: new Set(),
|
||||
colors: new Set(),
|
||||
unit: patch.unit || 'kg',
|
||||
source: patch.source || 'manual_plan',
|
||||
missingReference: Boolean(patch.missingReference),
|
||||
products: []
|
||||
};
|
||||
|
||||
current.plannedKg += patch.plannedKg || 0;
|
||||
current.priority = patch.priority === 'Crítico' || current.priority === 'Crítico'
|
||||
? 'Crítico'
|
||||
: patch.priority === 'Atenção' || current.priority === 'Atenção'
|
||||
? 'Atenção'
|
||||
: current.priority;
|
||||
current.missingReference = current.missingReference || Boolean(patch.missingReference);
|
||||
current.source = current.source === patch.source ? current.source : 'mixed';
|
||||
if (patch.supplier) current.suppliers.add(patch.supplier);
|
||||
if (patch.color) current.colors.add(patch.color);
|
||||
if (patch.product) current.products.push(patch.product);
|
||||
|
||||
needsByMaterial.set(key, current);
|
||||
return current;
|
||||
};
|
||||
|
||||
const buildProjectPurchaseNeeds = async (lots, receipts) => {
|
||||
const [demandRows, referenceRows] = await Promise.all([
|
||||
listProjectDemandRows(),
|
||||
listConsumptionReferenceRows()
|
||||
]);
|
||||
const referencesBySku = referenceRows.reduce((references, reference) => {
|
||||
const sku = normalizeSku(reference.product_sku);
|
||||
if (!sku) return references;
|
||||
references.set(sku, [...(references.get(sku) || []), reference]);
|
||||
return references;
|
||||
}, new Map());
|
||||
const needsByMaterial = new Map();
|
||||
|
||||
demandRows.forEach(row => {
|
||||
const productId = normalizeSku(row.product_id);
|
||||
if (!productId) return;
|
||||
|
||||
const quantitySold = Number(row.quantity_sold || 0);
|
||||
const stockQuantity = Number(row.stock_quantity || 0);
|
||||
const projectedDemand = quantitySold * (DEFAULT_SUPPLY_COVERAGE_DAYS / DEFAULT_SUPPLY_LOOKBACK_DAYS);
|
||||
const suggestedQuantity = Math.max(Math.ceil(projectedDemand - stockQuantity), 0);
|
||||
if (suggestedQuantity <= 0) return;
|
||||
|
||||
const references = referencesBySku.get(productId) || [];
|
||||
if (!references.length) {
|
||||
mergeNeedLine(needsByMaterial, `missing:${productId}`, {
|
||||
material: `Cadastrar consumo: ${normalizeText(row.product_name) || productId}`,
|
||||
plannedKg: suggestedQuantity,
|
||||
priority: 'Crítico',
|
||||
unit: 'un.',
|
||||
source: 'project_demand',
|
||||
missingReference: true,
|
||||
product: {
|
||||
productId,
|
||||
name: normalizeText(row.product_name),
|
||||
suggestedQuantity,
|
||||
quantitySold,
|
||||
stockQuantity
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
references.forEach(reference => {
|
||||
const consumptionQuantity = Number(reference.consumption_quantity || 0);
|
||||
const consumptionUnit = normalizeUnit(reference.consumption_unit);
|
||||
const materialName = normalizeText(reference.material_name) || normalizeText(reference.material_sku) || 'Material sem cadastro';
|
||||
|
||||
if (consumptionQuantity > 0) {
|
||||
mergeNeedLine(needsByMaterial, `${consumptionUnit}:${normalizeKey(materialName)}`, {
|
||||
material: materialName,
|
||||
plannedKg: suggestedQuantity * consumptionQuantity,
|
||||
priority: 'Atenção',
|
||||
unit: consumptionUnit,
|
||||
source: reference.source || 'project_demand',
|
||||
color: reference.color,
|
||||
product: {
|
||||
productId,
|
||||
name: normalizeText(row.product_name),
|
||||
suggestedQuantity,
|
||||
quantitySold,
|
||||
stockQuantity,
|
||||
consumptionQuantity,
|
||||
consumptionUnit
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const yieldPerKg = getReferenceYield(reference);
|
||||
if (!yieldPerKg) {
|
||||
mergeNeedLine(needsByMaterial, `missing-yield:${productId}:${reference.material_product_id || 'material'}`, {
|
||||
material: `Cadastrar rendimento: ${normalizeText(row.product_name) || productId}`,
|
||||
plannedKg: suggestedQuantity,
|
||||
priority: 'Crítico',
|
||||
unit: 'un.',
|
||||
source: 'project_demand',
|
||||
missingReference: true,
|
||||
color: reference.color,
|
||||
product: {
|
||||
productId,
|
||||
name: normalizeText(row.product_name),
|
||||
suggestedQuantity,
|
||||
quantitySold,
|
||||
stockQuantity
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
mergeNeedLine(needsByMaterial, `kg:${normalizeKey(materialName)}`, {
|
||||
material: materialName,
|
||||
plannedKg: suggestedQuantity / yieldPerKg,
|
||||
priority: 'Atenção',
|
||||
unit: 'kg',
|
||||
source: reference.source || 'project_demand',
|
||||
color: reference.color,
|
||||
product: {
|
||||
productId,
|
||||
name: normalizeText(row.product_name),
|
||||
suggestedQuantity,
|
||||
quantitySold,
|
||||
stockQuantity,
|
||||
yieldPerKg
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
lots.forEach(lot => {
|
||||
const need = needsByMaterial.get(`${normalizeUnit(lot.unit)}:${normalizeKey(lot.product)}`);
|
||||
if (need) need.stockKg += lot.quantity;
|
||||
});
|
||||
|
||||
receipts.forEach(receipt => {
|
||||
if (receipt.status !== 'pending') return;
|
||||
const need = needsByMaterial.get(`${normalizeUnit(receipt.unit)}:${normalizeKey(receipt.product)}`);
|
||||
if (need) need.pendingKg += receipt.quantity;
|
||||
});
|
||||
|
||||
return Array.from(needsByMaterial.values()).map(need => {
|
||||
const purchaseKg = Math.max(need.plannedKg - need.stockKg - need.pendingKg, 0);
|
||||
let status = 'ok';
|
||||
if (purchaseKg > 0 && (need.priority === 'Crítico' || need.stockKg === 0)) status = 'critical';
|
||||
else if (purchaseKg > 0) status = 'attention';
|
||||
|
||||
return {
|
||||
material: need.material,
|
||||
plannedKg: need.plannedKg,
|
||||
stockKg: need.stockKg,
|
||||
pendingKg: need.pendingKg,
|
||||
purchaseKg,
|
||||
priority: need.priority,
|
||||
status,
|
||||
suppliers: Array.from(need.suppliers),
|
||||
colors: Array.from(need.colors),
|
||||
unit: need.unit,
|
||||
source: need.source,
|
||||
missingReference: need.missingReference,
|
||||
products: need.products
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const mergePurchaseNeeds = (manualNeeds, projectNeeds) => {
|
||||
const mergedByKey = new Map();
|
||||
|
||||
[...manualNeeds, ...projectNeeds].forEach(need => {
|
||||
const key = `${need.unit || 'kg'}:${normalizeKey(need.material)}:${need.missingReference ? 'missing' : 'mapped'}`;
|
||||
const current = mergedByKey.get(key);
|
||||
if (!current) {
|
||||
mergedByKey.set(key, {
|
||||
...need,
|
||||
suppliers: new Set(need.suppliers || []),
|
||||
colors: new Set(need.colors || []),
|
||||
products: [...(need.products || [])]
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
current.plannedKg += need.plannedKg;
|
||||
current.stockKg += need.stockKg;
|
||||
current.pendingKg += need.pendingKg;
|
||||
current.purchaseKg += need.purchaseKg;
|
||||
current.priority = need.priority === 'Crítico' || current.priority === 'Crítico'
|
||||
? 'Crítico'
|
||||
: need.priority === 'Atenção' || current.priority === 'Atenção'
|
||||
? 'Atenção'
|
||||
: current.priority;
|
||||
current.status = current.status === 'critical' || need.status === 'critical'
|
||||
? 'critical'
|
||||
: current.status === 'attention' || need.status === 'attention'
|
||||
? 'attention'
|
||||
: 'ok';
|
||||
current.source = current.source === need.source ? current.source : 'mixed';
|
||||
current.missingReference = current.missingReference || Boolean(need.missingReference);
|
||||
(need.suppliers || []).forEach(supplier => current.suppliers.add(supplier));
|
||||
(need.colors || []).forEach(color => current.colors.add(color));
|
||||
current.products.push(...(need.products || []));
|
||||
});
|
||||
|
||||
return Array.from(mergedByKey.values())
|
||||
.map(need => ({
|
||||
...need,
|
||||
suppliers: Array.from(need.suppliers),
|
||||
colors: Array.from(need.colors)
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
const statusOrder = { critical: 1, attention: 2, ok: 3 };
|
||||
return statusOrder[a.status] - statusOrder[b.status] || b.purchaseKg - a.purchaseKg || a.material.localeCompare(b.material);
|
||||
});
|
||||
};
|
||||
|
||||
const buildStats = (receipts, lots, purchaseNeeds) => {
|
||||
const totalQuantityKg = lots.reduce((total, lot) => (
|
||||
lot.unit === 'kg' ? total + lot.quantity : total
|
||||
), 0);
|
||||
|
||||
return {
|
||||
totalQuantityKg,
|
||||
activeLots: lots.length,
|
||||
rolls: lots.filter(lot => lot.unit === 'rolos').reduce((total, lot) => total + lot.quantity, 0),
|
||||
alerts: purchaseNeeds.filter(need => need.status !== 'ok').length,
|
||||
pendingReceipts: receipts.filter(receipt => receipt.status === 'pending').length,
|
||||
approvedReceipts: receipts.filter(receipt => receipt.status === 'approved').length
|
||||
};
|
||||
};
|
||||
|
||||
const getSupplySummary = async () => {
|
||||
const [receipts, lots, movements, fabricPlans] = await Promise.all([
|
||||
listReceipts(),
|
||||
listLots(),
|
||||
listMovements(),
|
||||
listFabricPlans()
|
||||
]);
|
||||
const manualPurchaseNeeds = buildPurchaseNeeds(fabricPlans, lots, receipts);
|
||||
const projectPurchaseNeeds = await buildProjectPurchaseNeeds(lots, receipts);
|
||||
const purchaseNeeds = mergePurchaseNeeds(manualPurchaseNeeds, projectPurchaseNeeds);
|
||||
|
||||
return {
|
||||
receipts,
|
||||
lots,
|
||||
movements,
|
||||
fabricPlans,
|
||||
purchaseNeeds,
|
||||
stats: buildStats(receipts, lots, purchaseNeeds)
|
||||
};
|
||||
};
|
||||
|
||||
const listPurchaseNeeds = async () => {
|
||||
const [plans, lots, receipts] = await Promise.all([
|
||||
listFabricPlans(),
|
||||
listLots(),
|
||||
listReceipts()
|
||||
]);
|
||||
|
||||
return mergePurchaseNeeds(
|
||||
buildPurchaseNeeds(plans, lots, receipts),
|
||||
await buildProjectPurchaseNeeds(lots, receipts)
|
||||
);
|
||||
};
|
||||
|
||||
const createReceipt = async (payload) => {
|
||||
const category = normalizeText(payload.category);
|
||||
const product = normalizeText(payload.product);
|
||||
const quantity = normalizeNumber(payload.quantity);
|
||||
const unit = normalizeText(payload.unit) || 'kg';
|
||||
|
||||
if (!category) throw createValidationError('Categoria é obrigatória.');
|
||||
if (!product) throw createValidationError('Produto ou material é obrigatório.');
|
||||
if (!quantity) throw createValidationError('Quantidade deve ser maior que zero.');
|
||||
|
||||
const result = await pool.query(`
|
||||
INSERT INTO supply_receipts (
|
||||
category, product, quantity, unit, supplier, invoice, notes, status, updated_at
|
||||
)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, 'pending', CURRENT_TIMESTAMP)
|
||||
RETURNING id, category, product, quantity, unit, supplier, invoice, notes, status, created_at, updated_at, approved_at
|
||||
`, [
|
||||
category,
|
||||
product,
|
||||
quantity,
|
||||
unit,
|
||||
normalizeText(payload.supplier) || null,
|
||||
normalizeText(payload.invoice) || null,
|
||||
normalizeText(payload.notes) || null
|
||||
]);
|
||||
|
||||
return mapReceipt(result.rows[0]);
|
||||
};
|
||||
|
||||
const approveReceipt = async (id) => {
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
const receiptResult = await client.query(`
|
||||
SELECT id, category, product, quantity, unit, supplier, invoice, notes, status, created_at, updated_at, approved_at
|
||||
FROM supply_receipts
|
||||
WHERE id = $1
|
||||
FOR UPDATE
|
||||
`, [id]);
|
||||
|
||||
if (!receiptResult.rowCount) {
|
||||
throw createValidationError('Recebimento não encontrado.');
|
||||
}
|
||||
|
||||
const receipt = receiptResult.rows[0];
|
||||
if (receipt.status === 'approved') {
|
||||
await client.query('COMMIT');
|
||||
return mapReceipt(receipt);
|
||||
}
|
||||
|
||||
const updatedReceiptResult = await client.query(`
|
||||
UPDATE supply_receipts
|
||||
SET status = 'approved',
|
||||
approved_at = CURRENT_TIMESTAMP,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = $1
|
||||
RETURNING id, category, product, quantity, unit, supplier, invoice, notes, status, created_at, updated_at, approved_at
|
||||
`, [id]);
|
||||
|
||||
const lotResult = await client.query(`
|
||||
INSERT INTO supply_stock_lots (
|
||||
receipt_id, category, product, quantity, unit, supplier, invoice, status, updated_at
|
||||
)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, 'active', CURRENT_TIMESTAMP)
|
||||
RETURNING id
|
||||
`, [
|
||||
receipt.id,
|
||||
receipt.category,
|
||||
receipt.product,
|
||||
receipt.quantity,
|
||||
receipt.unit,
|
||||
receipt.supplier,
|
||||
receipt.invoice
|
||||
]);
|
||||
|
||||
await client.query(`
|
||||
INSERT INTO supply_movements (
|
||||
receipt_id, lot_id, type, category, product, quantity, unit, reason
|
||||
)
|
||||
VALUES ($1, $2, 'receipt', $3, $4, $5, $6, $7)
|
||||
`, [
|
||||
receipt.id,
|
||||
lotResult.rows[0].id,
|
||||
receipt.category,
|
||||
receipt.product,
|
||||
receipt.quantity,
|
||||
receipt.unit,
|
||||
`Recebimento aprovado${receipt.invoice ? ` · NF ${receipt.invoice}` : ''}`
|
||||
]);
|
||||
|
||||
await client.query('COMMIT');
|
||||
return mapReceipt(updatedReceiptResult.rows[0]);
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
const deleteReceipt = async (id) => {
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
await client.query('DELETE FROM supply_movements WHERE receipt_id = $1', [id]);
|
||||
await client.query('DELETE FROM supply_stock_lots WHERE receipt_id = $1', [id]);
|
||||
await client.query('DELETE FROM supply_receipts WHERE id = $1', [id]);
|
||||
await client.query('COMMIT');
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
const createFabricPlan = async (payload) => {
|
||||
const material = normalizeText(payload.material);
|
||||
const quantityKg = normalizeNumber(payload.quantityKg);
|
||||
|
||||
if (!material) throw createValidationError('Malha ou tecido é obrigatório.');
|
||||
if (!quantityKg) throw createValidationError('Quantidade deve ser maior que zero.');
|
||||
|
||||
const result = await pool.query(`
|
||||
INSERT INTO supply_fabric_plans (
|
||||
material, color, quantity_kg, supplier, priority, status, updated_at
|
||||
)
|
||||
VALUES ($1, $2, $3, $4, $5, 'active', CURRENT_TIMESTAMP)
|
||||
RETURNING id, material, color, quantity_kg, supplier, priority, status, created_at, updated_at
|
||||
`, [
|
||||
material,
|
||||
normalizeText(payload.color) || 'Todas as cores',
|
||||
quantityKg,
|
||||
normalizeText(payload.supplier) || null,
|
||||
normalizeText(payload.priority) || 'Normal'
|
||||
]);
|
||||
|
||||
return mapFabricPlan(result.rows[0]);
|
||||
};
|
||||
|
||||
const deleteFabricPlan = async (id) => {
|
||||
await pool.query(`
|
||||
UPDATE supply_fabric_plans
|
||||
SET status = 'removed',
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = $1
|
||||
`, [id]);
|
||||
};
|
||||
|
||||
const updateLotQuantity = async (client, lotId, quantity) => {
|
||||
const status = quantity > 0 ? 'active' : 'depleted';
|
||||
const result = await client.query(`
|
||||
UPDATE supply_stock_lots
|
||||
SET quantity = $2,
|
||||
status = $3,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = $1
|
||||
RETURNING id, receipt_id, category, product, quantity, unit, supplier, invoice, status, created_at, updated_at
|
||||
`, [lotId, quantity, status]);
|
||||
|
||||
return mapLot(result.rows[0]);
|
||||
};
|
||||
|
||||
const adjustInventoryLot = async (id, payload) => {
|
||||
const countedQuantity = normalizeNonNegativeNumber(payload.countedQuantity);
|
||||
const reason = normalizeText(payload.reason);
|
||||
|
||||
if (countedQuantity === null) throw createValidationError('Quantidade contada deve ser zero ou maior.');
|
||||
if (!reason) throw createValidationError('Justificativa do ajuste é obrigatória.');
|
||||
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
const lotResult = await client.query(`
|
||||
SELECT id, receipt_id, category, product, quantity, unit, supplier, invoice, status, created_at, updated_at
|
||||
FROM supply_stock_lots
|
||||
WHERE id = $1
|
||||
FOR UPDATE
|
||||
`, [id]);
|
||||
|
||||
if (!lotResult.rowCount) throw createValidationError('Lote não encontrado.');
|
||||
|
||||
const lot = lotResult.rows[0];
|
||||
const currentQuantity = Number(lot.quantity);
|
||||
const difference = countedQuantity - currentQuantity;
|
||||
const updatedLot = await updateLotQuantity(client, lot.id, countedQuantity);
|
||||
|
||||
await client.query(`
|
||||
INSERT INTO supply_movements (
|
||||
lot_id, type, category, product, quantity, unit, reason
|
||||
)
|
||||
VALUES ($1, 'inventory_adjustment', $2, $3, $4, $5, $6)
|
||||
`, [
|
||||
lot.id,
|
||||
lot.category,
|
||||
lot.product,
|
||||
difference,
|
||||
lot.unit,
|
||||
`${reason} · sistema ${currentQuantity} ${lot.unit} · contado ${countedQuantity} ${lot.unit}`
|
||||
]);
|
||||
|
||||
await client.query('COMMIT');
|
||||
return updatedLot;
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
const consumeLotForProduction = async (id, payload) => {
|
||||
const quantity = normalizeNumber(payload.quantity);
|
||||
const reason = normalizeText(payload.reason);
|
||||
const productionOrderNumber = normalizeText(payload.productionOrderNumber);
|
||||
|
||||
if (!quantity) throw createValidationError('Quantidade de saída deve ser maior que zero.');
|
||||
if (!productionOrderNumber && !reason) throw createValidationError('Informe a OP ou uma justificativa para a saída.');
|
||||
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
const lotResult = await client.query(`
|
||||
SELECT id, receipt_id, category, product, quantity, unit, supplier, invoice, status, created_at, updated_at
|
||||
FROM supply_stock_lots
|
||||
WHERE id = $1
|
||||
FOR UPDATE
|
||||
`, [id]);
|
||||
|
||||
if (!lotResult.rowCount) throw createValidationError('Lote não encontrado.');
|
||||
|
||||
const lot = lotResult.rows[0];
|
||||
const currentQuantity = Number(lot.quantity);
|
||||
if (lot.status !== 'active' || currentQuantity <= 0) throw createValidationError('Lote sem saldo disponível.');
|
||||
if (quantity > currentQuantity) throw createValidationError('Quantidade de saída maior que o saldo do lote.');
|
||||
|
||||
const updatedLot = await updateLotQuantity(client, lot.id, currentQuantity - quantity);
|
||||
const movementReason = [
|
||||
productionOrderNumber ? `OP ${productionOrderNumber}` : '',
|
||||
reason
|
||||
].filter(Boolean).join(' · ');
|
||||
|
||||
await client.query(`
|
||||
INSERT INTO supply_movements (
|
||||
lot_id, type, category, product, quantity, unit, reason
|
||||
)
|
||||
VALUES ($1, 'production_exit', $2, $3, $4, $5, $6)
|
||||
`, [
|
||||
lot.id,
|
||||
lot.category,
|
||||
lot.product,
|
||||
-quantity,
|
||||
lot.unit,
|
||||
movementReason || 'Saída para produção'
|
||||
]);
|
||||
|
||||
await client.query('COMMIT');
|
||||
return updatedLot;
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
adjustInventoryLot,
|
||||
approveReceipt,
|
||||
consumeLotForProduction,
|
||||
createFabricPlan,
|
||||
createReceipt,
|
||||
deleteFabricPlan,
|
||||
deleteReceipt,
|
||||
getSupplySummary,
|
||||
buildProjectPurchaseNeeds,
|
||||
buildPurchaseNeeds,
|
||||
listFabricPlans,
|
||||
listLots,
|
||||
listMovements,
|
||||
listPurchaseNeeds,
|
||||
listReceipts
|
||||
};
|
||||
@@ -1,208 +0,0 @@
|
||||
const crypto = require('crypto');
|
||||
const { pool } = require('../db');
|
||||
|
||||
const HASH_ALGORITHM = 'scrypt';
|
||||
const KEY_LENGTH = 64;
|
||||
|
||||
const normalizeEmail = (email) => String(email || '').trim().toLowerCase();
|
||||
|
||||
const generatePassword = () => {
|
||||
return crypto.randomBytes(9).toString('base64url');
|
||||
};
|
||||
|
||||
const hashPassword = (password) => {
|
||||
const salt = crypto.randomBytes(16).toString('hex');
|
||||
const hash = crypto.scryptSync(password, salt, KEY_LENGTH).toString('hex');
|
||||
return `${HASH_ALGORITHM}:${salt}:${hash}`;
|
||||
};
|
||||
|
||||
const verifyPassword = (password, passwordHash) => {
|
||||
const [algorithm, salt, storedHash] = String(passwordHash || '').split(':');
|
||||
if (algorithm !== HASH_ALGORITHM || !salt || !storedHash) return false;
|
||||
|
||||
const hash = crypto.scryptSync(password, salt, KEY_LENGTH);
|
||||
const storedBuffer = Buffer.from(storedHash, 'hex');
|
||||
if (storedBuffer.length !== hash.length) return false;
|
||||
|
||||
return crypto.timingSafeEqual(hash, storedBuffer);
|
||||
};
|
||||
|
||||
const publicUserFields = (row) => ({
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
email: row.email,
|
||||
isActive: row.is_active,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at
|
||||
});
|
||||
|
||||
const findUserByEmail = async (email) => {
|
||||
const normalizedEmail = normalizeEmail(email);
|
||||
const result = await pool.query(
|
||||
`SELECT id, name, email, password_hash, is_active, created_at, updated_at
|
||||
FROM app_users
|
||||
WHERE LOWER(email) = $1
|
||||
LIMIT 1`,
|
||||
[normalizedEmail]
|
||||
);
|
||||
|
||||
return result.rows[0] || null;
|
||||
};
|
||||
|
||||
const listUsers = async () => {
|
||||
const result = await pool.query(
|
||||
`SELECT id, name, email, is_active, created_at, updated_at
|
||||
FROM app_users
|
||||
ORDER BY created_at DESC, id DESC`
|
||||
);
|
||||
|
||||
return result.rows.map(publicUserFields);
|
||||
};
|
||||
|
||||
const createUser = async ({ name, email, password }) => {
|
||||
const normalizedName = String(name || '').trim();
|
||||
const normalizedEmail = normalizeEmail(email);
|
||||
const generatedPassword = !password;
|
||||
const plainPassword = String(password || generatePassword()).trim();
|
||||
|
||||
if (!normalizedName) {
|
||||
const error = new Error('Name is required');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
|
||||
const error = new Error('Valid email is required');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (plainPassword.length < 6) {
|
||||
const error = new Error('Password must have at least 6 characters');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
const passwordHash = hashPassword(plainPassword);
|
||||
|
||||
try {
|
||||
const result = await pool.query(
|
||||
`INSERT INTO app_users (name, email, password_hash)
|
||||
VALUES ($1, $2, $3)
|
||||
RETURNING id, name, email, is_active, created_at, updated_at`,
|
||||
[normalizedName, normalizedEmail, passwordHash]
|
||||
);
|
||||
|
||||
return {
|
||||
user: publicUserFields(result.rows[0]),
|
||||
password: plainPassword,
|
||||
generatedPassword
|
||||
};
|
||||
} catch (error) {
|
||||
if (error.code === '23505') {
|
||||
const duplicateError = new Error('A user with this email already exists');
|
||||
duplicateError.statusCode = 409;
|
||||
throw duplicateError;
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const findUserById = async (id) => {
|
||||
const result = await pool.query(
|
||||
`SELECT id, name, email, password_hash, is_active, created_at, updated_at
|
||||
FROM app_users
|
||||
WHERE id = $1
|
||||
LIMIT 1`,
|
||||
[id]
|
||||
);
|
||||
|
||||
return result.rows[0] || null;
|
||||
};
|
||||
|
||||
const updateUser = async (id, { name, email, password, isActive }) => {
|
||||
const existingUser = await findUserById(id);
|
||||
if (!existingUser) {
|
||||
const error = new Error('User not found');
|
||||
error.statusCode = 404;
|
||||
throw error;
|
||||
}
|
||||
|
||||
const normalizedName = String(name ?? existingUser.name).trim();
|
||||
const normalizedEmail = normalizeEmail(email ?? existingUser.email);
|
||||
const normalizedIsActive = typeof isActive === 'boolean' ? isActive : existingUser.is_active;
|
||||
const normalizedPassword = typeof password === 'string' ? password.trim() : '';
|
||||
|
||||
if (!normalizedName) {
|
||||
const error = new Error('Name is required');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
|
||||
const error = new Error('Valid email is required');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (normalizedPassword && normalizedPassword.length < 6) {
|
||||
const error = new Error('Password must have at least 6 characters');
|
||||
error.statusCode = 400;
|
||||
throw error;
|
||||
}
|
||||
|
||||
const passwordHash = normalizedPassword ? hashPassword(normalizedPassword) : existingUser.password_hash;
|
||||
|
||||
try {
|
||||
const result = await pool.query(
|
||||
`UPDATE app_users
|
||||
SET name = $1,
|
||||
email = $2,
|
||||
password_hash = $3,
|
||||
is_active = $4,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = $5
|
||||
RETURNING id, name, email, is_active, created_at, updated_at`,
|
||||
[normalizedName, normalizedEmail, passwordHash, normalizedIsActive, id]
|
||||
);
|
||||
|
||||
return publicUserFields(result.rows[0]);
|
||||
} catch (error) {
|
||||
if (error.code === '23505') {
|
||||
const duplicateError = new Error('A user with this email already exists');
|
||||
duplicateError.statusCode = 409;
|
||||
throw duplicateError;
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const deleteUser = async (id) => {
|
||||
const result = await pool.query(
|
||||
`DELETE FROM app_users
|
||||
WHERE id = $1
|
||||
RETURNING id`,
|
||||
[id]
|
||||
);
|
||||
|
||||
if (!result.rowCount) {
|
||||
const error = new Error('User not found');
|
||||
error.statusCode = 404;
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
createUser,
|
||||
deleteUser,
|
||||
findUserById,
|
||||
findUserByEmail,
|
||||
generatePassword,
|
||||
listUsers,
|
||||
normalizeEmail,
|
||||
publicUserFields,
|
||||
updateUser,
|
||||
verifyPassword
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,161 +0,0 @@
|
||||
const test = require('node:test');
|
||||
const assert = require('node:assert/strict');
|
||||
const {
|
||||
buildWhatsappCampaignPayload,
|
||||
formatProductList,
|
||||
formatProductNameForDisplay,
|
||||
groupCampaignRows,
|
||||
groupCampaignRowsByBaseProduct,
|
||||
isCampaignEligibleProductName,
|
||||
mapCampaignProducts
|
||||
} = require('../services/campaignFormatter');
|
||||
|
||||
const row = (overrides) => ({
|
||||
id: 1,
|
||||
base_product_name: 'BASE LISA CAMISETA COR BRANCO',
|
||||
produto_id: 'SKU-1',
|
||||
nome: 'BASE LISA CAMISETA COR BRANCO TAMANHO - P',
|
||||
saldo: 10,
|
||||
delta_estoque: 10,
|
||||
status: 'pending',
|
||||
attempts: 0,
|
||||
last_error: null,
|
||||
created_at: '2026-05-28T10:00:00.000Z',
|
||||
updated_at: '2026-05-28T10:00:00.000Z',
|
||||
sent_at: null,
|
||||
...overrides
|
||||
});
|
||||
|
||||
test('formatProductList uses inline bullet separators', () => {
|
||||
assert.equal(formatProductList([]), '');
|
||||
assert.equal(formatProductList(['BONÉ - PRETO']), 'Boné - Preto');
|
||||
assert.equal(formatProductList(['BONÉ - PRETO', 'BASE BRANCA']), 'Boné - Preto • Base Branca');
|
||||
assert.equal(
|
||||
formatProductList(['BONÉ - PRETO', 'BASE BRANCA', 'BASE PRETA']),
|
||||
'Boné - Preto • Base Branca • Base Preta'
|
||||
);
|
||||
});
|
||||
|
||||
test('formatProductNameForDisplay converts campaign product names to title case', () => {
|
||||
assert.equal(
|
||||
formatProductNameForDisplay('BASE LISA MOLETOM CANGURU COR PRETO'),
|
||||
'Moletom Canguru Premium Cor Preto'
|
||||
);
|
||||
assert.equal(formatProductNameForDisplay('BONÉ - BRANCO'), 'Boné - Branco');
|
||||
});
|
||||
|
||||
test('formatProductNameForDisplay applies customer-facing campaign aliases', () => {
|
||||
assert.equal(
|
||||
formatProductNameForDisplay('BASE LISA CAMISETA COR AZUL'),
|
||||
'Camiseta Premium Cor Azul'
|
||||
);
|
||||
assert.equal(
|
||||
formatProductNameForDisplay('BASE LISA OVER SIZE COR PRETO'),
|
||||
'Camiseta Premium Over Size Cor Preto'
|
||||
);
|
||||
assert.equal(
|
||||
formatProductNameForDisplay('BASE LISA MOLETOM CANGURU COR PRETO'),
|
||||
'Moletom Canguru Premium Cor Preto'
|
||||
);
|
||||
});
|
||||
|
||||
test('isCampaignEligibleProductName allows only customer-facing apparel campaigns', () => {
|
||||
[
|
||||
'Camiseta Premium Cor Bordo',
|
||||
'Camiseta Premium Cor Preto',
|
||||
'Moletom Canguru Premium Cor Preto',
|
||||
'IMPRESSÃO DTF PERSONALIZADO 57X100 (1 METRO)',
|
||||
'BASE LISA CAMISETA COR PRETO TAMANHO - G',
|
||||
'BASE LISA MOLETOM CANGURU COR PRETO'
|
||||
].forEach(name => {
|
||||
assert.equal(isCampaignEligibleProductName(name), true, name);
|
||||
});
|
||||
|
||||
[
|
||||
'Ilhos Com Arruela',
|
||||
'Atacador 001 Chato Preto 1,20 Mt',
|
||||
'2099 Ribana 2x1 Cor Bordo',
|
||||
'2001.09 Ribana 2x1 Cor Cinza',
|
||||
'2001.09 Malha Camiseta 30oe Cor Cinza',
|
||||
'201 Malha Camiseta 30oe Cor Preto',
|
||||
'4006 Malha Camiseta 30oe Cor Marinho',
|
||||
'TINTA DTF 1 LITRO - BRANCO',
|
||||
'FILME DTF ROLO 60CM',
|
||||
'POLIAMIDA EM PÓ PARA DTF - 1 KG',
|
||||
'SALDO ESTOQUE CAMISETA'
|
||||
].forEach(name => {
|
||||
assert.equal(isCampaignEligibleProductName(name), false, name);
|
||||
});
|
||||
});
|
||||
|
||||
test('isCampaignEligibleProductName keeps accessories out of WhatsApp apparel campaigns', () => {
|
||||
assert.equal(isCampaignEligibleProductName('BONÉ - PRETO'), false);
|
||||
});
|
||||
|
||||
test('mapCampaignProducts accumulates split deltas by base product', () => {
|
||||
const groups = groupCampaignRowsByBaseProduct([
|
||||
row({ id: 1, delta_estoque: 10, produto_id: 'SKU-P', nome: 'Produto Split TAMANHO - P' }),
|
||||
row({ id: 2, delta_estoque: 50, produto_id: 'SKU-M', nome: 'Produto Split TAMANHO - M' }),
|
||||
row({ id: 3, delta_estoque: 40, produto_id: 'SKU-G', nome: 'Produto Split TAMANHO - G' })
|
||||
]);
|
||||
|
||||
const products = mapCampaignProducts(groups);
|
||||
|
||||
assert.equal(products.length, 1);
|
||||
assert.equal(products[0].total_delta, 100);
|
||||
assert.deepEqual(products[0].itemIds, [3, 2, 1]);
|
||||
assert.deepEqual(products[0].sizes.map(size => size.id), ['SKU-G', 'SKU-M', 'SKU-P']);
|
||||
});
|
||||
|
||||
test('buildWhatsappCampaignPayload combines multiple ready products into one message payload', () => {
|
||||
const products = mapCampaignProducts(groupCampaignRowsByBaseProduct([
|
||||
row({
|
||||
id: 1,
|
||||
base_product_name: 'BONÉ - PRETO',
|
||||
produto_id: 'BONE-P',
|
||||
nome: 'BONÉ - PRETO TAMANHO - P',
|
||||
delta_estoque: 100,
|
||||
created_at: '2026-05-28T10:00:00.000Z'
|
||||
}),
|
||||
row({
|
||||
id: 2,
|
||||
base_product_name: 'BASE LISA CAMISETA COR BRANCO',
|
||||
produto_id: 'BASE-P',
|
||||
nome: 'BASE LISA CAMISETA COR BRANCO TAMANHO - P',
|
||||
delta_estoque: 100,
|
||||
created_at: '2026-05-28T11:00:00.000Z'
|
||||
})
|
||||
]));
|
||||
const payload = buildWhatsappCampaignPayload(products, [{ nome: 'Cliente', fone: '5511999999999' }]);
|
||||
|
||||
assert.equal(payload.productsText, 'Boné - Preto • Camiseta Premium Cor Branco');
|
||||
assert.equal(payload.baseProduct, payload.productsText);
|
||||
assert.equal(payload.total_delta, 200);
|
||||
assert.equal(payload.products.length, 2);
|
||||
assert.equal(payload.sizes.length, 2);
|
||||
assert.deepEqual(Object.keys(payload.products[0]).includes('itemIds'), false);
|
||||
});
|
||||
|
||||
test('groupCampaignRows summarizes rows by base product and status', () => {
|
||||
const groups = groupCampaignRows([
|
||||
row({ id: 1, delta_estoque: 60, attempts: 1, updated_at: '2026-05-28T10:00:00.000Z' }),
|
||||
row({ id: 2, delta_estoque: 40, attempts: 2, updated_at: '2026-05-28T10:05:00.000Z' }),
|
||||
row({
|
||||
id: 3,
|
||||
base_product_name: 'BONÉ - PRETO',
|
||||
status: 'failed',
|
||||
delta_estoque: 100,
|
||||
attempts: 3,
|
||||
last_error: 'Webhook failed',
|
||||
updated_at: '2026-05-28T11:00:00.000Z'
|
||||
})
|
||||
]);
|
||||
|
||||
assert.equal(groups.length, 2);
|
||||
assert.equal(groups[0].baseProductName, 'BONÉ - PRETO');
|
||||
assert.equal(groups[0].lastError, 'Webhook failed');
|
||||
assert.equal(groups[1].baseProductName, 'BASE LISA CAMISETA COR BRANCO');
|
||||
assert.equal(groups[1].totalDelta, 100);
|
||||
assert.equal(groups[1].rowCount, 2);
|
||||
assert.equal(groups[1].attempts, 2);
|
||||
});
|
||||
@@ -1,111 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const test = require('node:test');
|
||||
|
||||
const withCampaignService = async (queryHandler, callback) => {
|
||||
const dbPath = require.resolve('../db');
|
||||
const servicePath = require.resolve('../services/campaignService');
|
||||
const originalDbCache = require.cache[dbPath];
|
||||
const originalServiceCache = require.cache[servicePath];
|
||||
const queries = [];
|
||||
|
||||
delete require.cache[servicePath];
|
||||
require.cache[dbPath] = {
|
||||
id: dbPath,
|
||||
filename: dbPath,
|
||||
loaded: true,
|
||||
exports: {
|
||||
pool: {
|
||||
query: async (sql, params = []) => {
|
||||
queries.push({ sql, params });
|
||||
return queryHandler(sql, params);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const service = require('../services/campaignService');
|
||||
return await callback(service, queries);
|
||||
} finally {
|
||||
delete require.cache[servicePath];
|
||||
if (originalServiceCache) {
|
||||
require.cache[servicePath] = originalServiceCache;
|
||||
}
|
||||
if (originalDbCache) {
|
||||
require.cache[dbPath] = originalDbCache;
|
||||
} else {
|
||||
delete require.cache[dbPath];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
test('getTopClientsForCampaign returns top clients for an explicit date range', async () => {
|
||||
await withCampaignService(async () => ({
|
||||
rows: [
|
||||
{
|
||||
nome: 'Cliente A',
|
||||
fone: '5516999999901',
|
||||
total_gasto: '1234.50',
|
||||
total_comprado: '18',
|
||||
total_pedidos: 4,
|
||||
ultima_compra: '2026-07-27',
|
||||
telefones: ['5516999999901', '5516999999902']
|
||||
}
|
||||
]
|
||||
}), async ({ getTopClientsForCampaign }, queries) => {
|
||||
const result = await getTopClientsForCampaign({
|
||||
start: '2026-06-28',
|
||||
end: '2026-07-27',
|
||||
limit: '1000'
|
||||
});
|
||||
|
||||
assert.equal(result.start, '2026-06-28');
|
||||
assert.equal(result.end, '2026-07-27');
|
||||
assert.equal(result.limit, 1000);
|
||||
assert.equal(result.count, 1);
|
||||
assert.deepEqual(result.customers[0], {
|
||||
nome: 'Cliente A',
|
||||
fone: '5516999999901',
|
||||
total_gasto: 1234.5,
|
||||
total_comprado: 18,
|
||||
total_pedidos: 4,
|
||||
ultima_compra: '2026-07-27',
|
||||
telefones: ['5516999999901', '5516999999902']
|
||||
});
|
||||
|
||||
assert.equal(queries.length, 1);
|
||||
assert.deepEqual(queries[0].params, ['2026-06-28', '2026-07-27', 1000]);
|
||||
assert.match(queries[0].sql, /GROUP BY whatsapp_phone/);
|
||||
assert.doesNotMatch(queries[0].sql, /GROUP BY COALESCE\(canonical_customer_name, whatsapp_phone\)/);
|
||||
assert.match(queries[0].sql, /ARRAY_AGG\(DISTINCT whatsapp_phone\)/);
|
||||
assert.match(queries[0].sql, /ORDER BY total_gasto DESC/);
|
||||
});
|
||||
});
|
||||
|
||||
test('getTopClientsForCampaign derives an inclusive 30 day range from the end date', async () => {
|
||||
await withCampaignService(async () => ({ rows: [] }), async ({ getTopClientsForCampaign }, queries) => {
|
||||
const result = await getTopClientsForCampaign({
|
||||
days: '30',
|
||||
end: '2026-07-27'
|
||||
});
|
||||
|
||||
assert.equal(result.start, '2026-06-28');
|
||||
assert.equal(result.end, '2026-07-27');
|
||||
assert.equal(result.limit, 1000);
|
||||
assert.deepEqual(queries[0].params, ['2026-06-28', '2026-07-27', 1000]);
|
||||
});
|
||||
});
|
||||
|
||||
test('getTopClientsForCampaign normalizes phones and groups one row per WhatsApp number', async () => {
|
||||
await withCampaignService(async () => ({ rows: [] }), async ({ getTopClientsForCampaign }, queries) => {
|
||||
await getTopClientsForCampaign({
|
||||
days: '30',
|
||||
end: '2026-07-27'
|
||||
});
|
||||
|
||||
assert.match(queries[0].sql, /regexp_replace\(COALESCE\(cliente_fone, ''\), '\\D', '', 'g'\)/);
|
||||
assert.match(queries[0].sql, /WHEN length\(/);
|
||||
assert.match(queries[0].sql, /'55' \|\|/);
|
||||
assert.match(queries[0].sql, /GROUP BY whatsapp_phone/);
|
||||
});
|
||||
});
|
||||
@@ -1,50 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const test = require('node:test');
|
||||
|
||||
const {
|
||||
normalizeFamilyKey,
|
||||
normalizeFamilyYields,
|
||||
normalizeProductType,
|
||||
normalizeProductOverrides
|
||||
} = require('../services/cuttingSettingsService');
|
||||
|
||||
test('normalizeFamilyKey accepts only known cut families', () => {
|
||||
assert.equal(normalizeFamilyKey('blcs'), 'BLCS');
|
||||
assert.equal(normalizeFamilyKey(' BLOS '), 'BLOS');
|
||||
assert.equal(normalizeFamilyKey('OUTROS'), '');
|
||||
assert.equal(normalizeFamilyKey('unknown'), '');
|
||||
});
|
||||
|
||||
test('normalizeFamilyYields keeps positive numeric yield rules', () => {
|
||||
assert.deepEqual(normalizeFamilyYields({
|
||||
BLCS: '50',
|
||||
BLOS: 0,
|
||||
BLMC: -1,
|
||||
BLPM: '12.5',
|
||||
OUTROS: 99
|
||||
}), {
|
||||
BLCS: 50,
|
||||
BLPM: 12.5
|
||||
});
|
||||
});
|
||||
|
||||
test('normalizeProductType accepts only known planning product types', () => {
|
||||
assert.equal(normalizeProductType('finished_apparel'), 'finished_apparel');
|
||||
assert.equal(normalizeProductType('raw_material'), 'raw_material');
|
||||
assert.equal(normalizeProductType('finished_product'), '');
|
||||
assert.equal(normalizeProductType('unknown type'), '');
|
||||
});
|
||||
|
||||
test('normalizeProductOverrides trims and removes empty overrides', () => {
|
||||
assert.deepEqual(normalizeProductOverrides({
|
||||
' SKU-1 ': { familyKey: 'blcs', color: ' Preto ', size: ' m ', productType: 'finished_apparel', planningNotes: ' revisar corte ' },
|
||||
'SKU-2': { familyKey: 'OUTROS', color: '', size: '' },
|
||||
'SKU-3': { familyKey: '', color: ' Branco ', size: '' },
|
||||
'SKU-4': { productType: 'raw_material' },
|
||||
'SKU-5': null
|
||||
}), {
|
||||
'SKU-1': { familyKey: 'BLCS', color: 'Preto', size: 'M', productType: 'finished_apparel', planningNotes: 'revisar corte' },
|
||||
'SKU-3': { familyKey: '', color: 'Branco', size: '', productType: '', planningNotes: '' },
|
||||
'SKU-4': { familyKey: '', color: '', size: '', productType: 'raw_material', planningNotes: '' }
|
||||
});
|
||||
});
|
||||
@@ -1,117 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const test = require('node:test');
|
||||
|
||||
const { formatOrderRow, normalizeOrderDate, normalizeOrderPayload } = require('../mappers/orderMapper');
|
||||
|
||||
test('normalizeOrderDate accepts Brazilian display dates', () => {
|
||||
assert.equal(normalizeOrderDate('28/05/2026'), '2026-05-28');
|
||||
assert.equal(normalizeOrderDate('28-05-2026'), '2026-05-28');
|
||||
});
|
||||
|
||||
test('normalizeOrderDate accepts ISO-like dates', () => {
|
||||
assert.equal(normalizeOrderDate('2026-05-28'), '2026-05-28');
|
||||
assert.equal(normalizeOrderDate('2026/05/28 10:30:00'), '2026-05-28');
|
||||
});
|
||||
|
||||
test('normalizeOrderDate rejects invalid dates', () => {
|
||||
assert.equal(normalizeOrderDate(''), null);
|
||||
assert.equal(normalizeOrderDate('not a date'), null);
|
||||
assert.equal(normalizeOrderDate('31/02/2026'), null);
|
||||
});
|
||||
|
||||
test('normalizeOrderPayload includes normalized date without changing display date', () => {
|
||||
const payload = normalizeOrderPayload({
|
||||
Nome_Cliente: 'Cliente Teste',
|
||||
Data_Pedido: '28/05/2026',
|
||||
Valor_Pedido: '120.50',
|
||||
ID_Produto: 'SKU-1',
|
||||
Descricao_Produto: 'Produto',
|
||||
Quantidade: '2',
|
||||
Valor_Unitario: '60.25',
|
||||
ID_Pedido: 'ORDER-1',
|
||||
Fone_Cliente: '(16) 99999-9999'
|
||||
});
|
||||
|
||||
assert.equal(payload[1], '28/05/2026');
|
||||
assert.equal(payload[2], '2026-05-28');
|
||||
});
|
||||
|
||||
test('normalizeOrderPayload maps Tiny ERP metadata aliases', () => {
|
||||
const payload = normalizeOrderPayload({
|
||||
Nome_Cliente: 'Cliente Teste',
|
||||
Data_Pedido: '28/05/2026',
|
||||
Valor_Pedido: '120.50',
|
||||
ID_Produto: 'SKU-1',
|
||||
Descricao_Produto: 'Produto',
|
||||
Quantidade: '2',
|
||||
Valor_Unitario: '60.25',
|
||||
ID_Pedido: 'ORDER-1',
|
||||
Nome_Fantasia: 'Cliente Fantasia',
|
||||
ID_Vendedor: 123,
|
||||
Nome_Vendedor: 'Maria',
|
||||
Nome_Ecommerce: 'Mercado Livre',
|
||||
Canal_Venda: 'Online',
|
||||
Numero_Ecommerce: 'EC-987'
|
||||
});
|
||||
|
||||
assert.equal(payload[10], 'Cliente Fantasia');
|
||||
assert.equal(payload[11], '123');
|
||||
assert.equal(payload[12], 'Maria');
|
||||
assert.equal(payload[13], 'Mercado Livre');
|
||||
assert.equal(payload[14], 'Online');
|
||||
assert.equal(payload[15], 'EC-987');
|
||||
});
|
||||
|
||||
test('normalizeOrderPayload maps lower-case metadata names', () => {
|
||||
const payload = normalizeOrderPayload({
|
||||
Nome_Cliente: 'Cliente Teste',
|
||||
Data_Pedido: '28/05/2026',
|
||||
Valor_Pedido: '120.50',
|
||||
ID_Produto: 'SKU-1',
|
||||
Descricao_Produto: 'Produto',
|
||||
Quantidade: '2',
|
||||
Valor_Unitario: '60.25',
|
||||
ID_Pedido: 'ORDER-1',
|
||||
cliente_nome_fantasia: 'Fantasia Lower',
|
||||
id_vendedor: 'VEN-7',
|
||||
nome_vendedor: 'Joao',
|
||||
marketplace: 'Shopee',
|
||||
canal_venda: 'Marketplace',
|
||||
numero_ecommerce: '100200'
|
||||
});
|
||||
|
||||
assert.equal(payload[10], 'Fantasia Lower');
|
||||
assert.equal(payload[11], 'VEN-7');
|
||||
assert.equal(payload[12], 'Joao');
|
||||
assert.equal(payload[13], 'Shopee');
|
||||
assert.equal(payload[14], 'Marketplace');
|
||||
assert.equal(payload[15], '100200');
|
||||
});
|
||||
|
||||
test('formatOrderRow returns Tiny ERP metadata fields', () => {
|
||||
const row = formatOrderRow({
|
||||
cliente_nome: 'Cliente Teste',
|
||||
data_pedido: '28/05/2026',
|
||||
valor_pedido: '120.50',
|
||||
produto_id: 'SKU-1',
|
||||
produto_descricao: 'Produto',
|
||||
quantidade: 2,
|
||||
valor_unitario: '60.25',
|
||||
created_at: '2026-05-28T12:00:00.000Z',
|
||||
pedido_id: 'ORDER-1',
|
||||
cliente_fone: '(16) 99999-9999',
|
||||
cliente_nome_fantasia: 'Cliente Fantasia',
|
||||
id_vendedor: '123',
|
||||
nome_vendedor: 'Maria',
|
||||
marketplace: 'Mercado Livre',
|
||||
canal_venda: 'Online',
|
||||
numero_ecommerce: 'EC-987'
|
||||
});
|
||||
|
||||
assert.equal(row.cliente_nome_fantasia, 'Cliente Fantasia');
|
||||
assert.equal(row.id_vendedor, '123');
|
||||
assert.equal(row.nome_vendedor, 'Maria');
|
||||
assert.equal(row.marketplace, 'Mercado Livre');
|
||||
assert.equal(row.canal_venda, 'Online');
|
||||
assert.equal(row.numero_ecommerce, 'EC-987');
|
||||
});
|
||||
@@ -1,140 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const test = require('node:test');
|
||||
|
||||
const runUpsertWithPayload = async (payload) => {
|
||||
const queries = [];
|
||||
const client = {
|
||||
query: async (sql, params) => {
|
||||
queries.push({ sql, params });
|
||||
return { rows: [] };
|
||||
},
|
||||
release: () => {
|
||||
queries.push({ sql: 'RELEASE' });
|
||||
}
|
||||
};
|
||||
const dbPath = require.resolve('../db');
|
||||
const servicePath = require.resolve('../services/ordersService');
|
||||
const originalDbCache = require.cache[dbPath];
|
||||
const originalServiceCache = require.cache[servicePath];
|
||||
|
||||
delete require.cache[servicePath];
|
||||
require.cache[dbPath] = {
|
||||
id: dbPath,
|
||||
filename: dbPath,
|
||||
loaded: true,
|
||||
exports: {
|
||||
pool: {
|
||||
connect: async () => client
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const { upsertOrders } = require('../services/ordersService');
|
||||
await upsertOrders(payload);
|
||||
} finally {
|
||||
delete require.cache[servicePath];
|
||||
if (originalServiceCache) {
|
||||
require.cache[servicePath] = originalServiceCache;
|
||||
}
|
||||
if (originalDbCache) {
|
||||
require.cache[dbPath] = originalDbCache;
|
||||
} else {
|
||||
delete require.cache[dbPath];
|
||||
}
|
||||
}
|
||||
|
||||
return queries.find(query => query.sql.includes('INSERT INTO orders'));
|
||||
};
|
||||
|
||||
const assertPreservesEmptyConflictValue = (sql, fieldName) => {
|
||||
assert.match(
|
||||
sql,
|
||||
new RegExp(`${fieldName} = COALESCE\\(NULLIF\\(EXCLUDED\\.${fieldName}, ''\\), orders\\.${fieldName}\\)`)
|
||||
);
|
||||
};
|
||||
|
||||
test('upsertOrders persists non-empty Tiny ERP metadata columns', async () => {
|
||||
const insert = await runUpsertWithPayload([{
|
||||
Nome_Cliente: 'Cliente Teste',
|
||||
Data_Pedido: '28/05/2026',
|
||||
Valor_Pedido: '120.50',
|
||||
ID_Produto: 'SKU-1',
|
||||
Descricao_Produto: 'Produto',
|
||||
Quantidade: '2',
|
||||
Valor_Unitario: '60.25',
|
||||
ID_Pedido: 'ORDER-1',
|
||||
Fone_Cliente: '(16) 99999-9999',
|
||||
cliente_nome_fantasia: 'Cliente Fantasia',
|
||||
id_vendedor: 'VEN-1',
|
||||
nome_vendedor: 'Maria',
|
||||
marketplace: 'Mercado Livre',
|
||||
canal_venda: 'Online',
|
||||
numero_ecommerce: 'EC-987'
|
||||
}]);
|
||||
|
||||
assert.ok(insert);
|
||||
assert.equal(insert.params.length, 16);
|
||||
assert.deepEqual(insert.params.slice(9), [
|
||||
'(16) 99999-9999',
|
||||
'Cliente Fantasia',
|
||||
'VEN-1',
|
||||
'Maria',
|
||||
'Mercado Livre',
|
||||
'Online',
|
||||
'EC-987'
|
||||
]);
|
||||
});
|
||||
|
||||
test('upsertOrders preserves existing phone and metadata when incoming values are empty', async () => {
|
||||
const insert = await runUpsertWithPayload([{
|
||||
Nome_Cliente: 'Cliente Teste',
|
||||
Data_Pedido: '28/05/2026',
|
||||
Valor_Pedido: '120.50',
|
||||
ID_Produto: 'SKU-1',
|
||||
Descricao_Produto: 'Produto',
|
||||
Quantidade: '2',
|
||||
Valor_Unitario: '60.25',
|
||||
ID_Pedido: 'ORDER-1',
|
||||
Fone_Cliente: '',
|
||||
cliente_nome_fantasia: '',
|
||||
id_vendedor: '',
|
||||
nome_vendedor: '',
|
||||
marketplace: '',
|
||||
canal_venda: '',
|
||||
numero_ecommerce: ''
|
||||
}]);
|
||||
|
||||
assert.ok(insert);
|
||||
[
|
||||
'cliente_fone',
|
||||
'cliente_nome_fantasia',
|
||||
'id_vendedor',
|
||||
'nome_vendedor',
|
||||
'marketplace',
|
||||
'canal_venda',
|
||||
'numero_ecommerce'
|
||||
].forEach(fieldName => assertPreservesEmptyConflictValue(insert.sql, fieldName));
|
||||
assert.deepEqual(insert.params.slice(9), ['', '', '', '', '', '', '']);
|
||||
});
|
||||
|
||||
test('upsertOrders keeps existing payloads without Tiny ERP metadata working', async () => {
|
||||
const insert = await runUpsertWithPayload([{
|
||||
Nome_Cliente: 'Cliente Teste',
|
||||
Data_Pedido: '28/05/2026',
|
||||
Valor_Pedido: '120.50',
|
||||
ID_Produto: 'SKU-1',
|
||||
Descricao_Produto: 'Produto',
|
||||
Quantidade: '2',
|
||||
Valor_Unitario: '60.25',
|
||||
ID_Pedido: 'ORDER-1'
|
||||
}]);
|
||||
|
||||
assert.ok(insert);
|
||||
assert.equal(insert.params.length, 16);
|
||||
assert.deepEqual(insert.params.slice(9), ['', '', '', '', '', '', '']);
|
||||
assert.match(insert.sql, /quantidade = EXCLUDED\.quantidade/);
|
||||
assert.match(insert.sql, /valor_unitario = EXCLUDED\.valor_unitario/);
|
||||
assertPreservesEmptyConflictValue(insert.sql, 'cliente_fone');
|
||||
assertPreservesEmptyConflictValue(insert.sql, 'cliente_nome_fantasia');
|
||||
});
|
||||
@@ -1,275 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const test = require('node:test');
|
||||
|
||||
const { pool } = require('../db');
|
||||
const productionOrderRouter = require('../routes/productionOrderRoutes');
|
||||
const analyticsRouter = require('../routes/analyticsRoutes');
|
||||
|
||||
const getRouteHandler = (router, method, path) => {
|
||||
const route = router.stack.find(layer => layer.route?.path === path && layer.route.methods[method]);
|
||||
if (!route) throw new Error(`Route not found: ${method.toUpperCase()} ${path}`);
|
||||
return route.route.stack.at(-1).handle;
|
||||
};
|
||||
|
||||
const tinySyncHandler = getRouteHandler(productionOrderRouter, 'post', '/production-orders/tiny-sync');
|
||||
const productCompositionHandler = getRouteHandler(analyticsRouter, 'get', '/analytics/products/:productId/composition');
|
||||
const productCompositionsHandler = getRouteHandler(analyticsRouter, 'get', '/analytics/product-compositions');
|
||||
|
||||
const invokeHandler = async (handler, req) => {
|
||||
let statusCode = 200;
|
||||
let body;
|
||||
const res = {
|
||||
status(code) {
|
||||
statusCode = code;
|
||||
return this;
|
||||
},
|
||||
json(payload) {
|
||||
body = payload;
|
||||
return this;
|
||||
}
|
||||
};
|
||||
await handler(req, res);
|
||||
return { statusCode, body };
|
||||
};
|
||||
|
||||
const compositionPayload = (components = [
|
||||
{
|
||||
componentTinyId: '919498232',
|
||||
componentName: 'ETIQUETA DE TAMANHO GG',
|
||||
componentSku: 'ETIQ.T.GG',
|
||||
quantityPerUnit: '1',
|
||||
totalQuantity: '1',
|
||||
unit: 'UN'
|
||||
},
|
||||
{
|
||||
componentTinyId: '976059144',
|
||||
componentName: '6118 MALHA CAMISETA 30OE COR CAFE',
|
||||
componentSku: 'MC.30.CAF',
|
||||
quantityPerUnit: '0.1851',
|
||||
totalQuantity: '0.1851',
|
||||
unit: 'KG'
|
||||
}
|
||||
]) => ({
|
||||
order: {
|
||||
tinyId: 'STRUCTURE-V3-976058813',
|
||||
number: 'STRUCTURE-V3-BLCS.CAF.GG',
|
||||
status: 'completed',
|
||||
productSku: 'BLCS.CAF.GG',
|
||||
productDescription: 'BASE LISA CAMISETA COR CAFE TAMANHO - GG',
|
||||
quantity: '1',
|
||||
unit: 'UN',
|
||||
notes: 'Composição sincronizada da API pública Olist V3.'
|
||||
},
|
||||
components,
|
||||
steps: []
|
||||
});
|
||||
|
||||
const withFakeDatabase = async (run) => {
|
||||
const originalConnect = pool.connect;
|
||||
const originalQuery = pool.query;
|
||||
const state = {
|
||||
nextCompositionId: 1,
|
||||
nextOrderId: 1,
|
||||
compositions: [],
|
||||
compositionComponents: [],
|
||||
productionOrders: []
|
||||
};
|
||||
|
||||
const query = async (sql, params = []) => {
|
||||
const normalizedSql = String(sql).replace(/\s+/g, ' ').trim();
|
||||
|
||||
if (/^(BEGIN|COMMIT|ROLLBACK);?$/.test(normalizedSql)) return { rows: [] };
|
||||
|
||||
if (normalizedSql.startsWith('SELECT id FROM product_compositions WHERE source')) {
|
||||
const composition = state.compositions.find(item => item.source === params[0] && item.finished_product_identity === params[1]);
|
||||
return { rows: composition ? [{ id: composition.id }] : [] };
|
||||
}
|
||||
|
||||
if (normalizedSql.startsWith('INSERT INTO product_compositions')) {
|
||||
const composition = {
|
||||
id: state.nextCompositionId++,
|
||||
source: params[0],
|
||||
external_source_id: params[1],
|
||||
finished_product_identity: params[2],
|
||||
finished_product_sku: params[3],
|
||||
finished_product_description: params[4],
|
||||
finished_product_unit: params[5],
|
||||
finished_tiny_product_id: params[6],
|
||||
source_metadata: JSON.parse(params[7]),
|
||||
last_synced_at: '2026-07-29T12:00:00.000Z'
|
||||
};
|
||||
state.compositions.push(composition);
|
||||
return { rows: [{ id: composition.id }] };
|
||||
}
|
||||
|
||||
if (normalizedSql.startsWith('UPDATE product_compositions')) {
|
||||
const composition = state.compositions.find(item => item.id === params[7]);
|
||||
composition.external_source_id = params[0];
|
||||
composition.finished_product_sku = params[2];
|
||||
composition.finished_product_description = params[3];
|
||||
composition.finished_product_unit = params[4];
|
||||
composition.finished_tiny_product_id = params[5];
|
||||
composition.source_metadata = JSON.parse(params[6]);
|
||||
return { rows: [] };
|
||||
}
|
||||
|
||||
if (normalizedSql.startsWith('DELETE FROM product_composition_components')) {
|
||||
state.compositionComponents = state.compositionComponents.filter(item => item.product_composition_id !== params[0]);
|
||||
return { rows: [] };
|
||||
}
|
||||
|
||||
if (normalizedSql.startsWith('INSERT INTO product_composition_components')) {
|
||||
state.compositionComponents.push({
|
||||
id: state.compositionComponents.length + 1,
|
||||
product_composition_id: params[0],
|
||||
component_identity: params[1],
|
||||
component_tiny_id: params[2],
|
||||
component_sku: params[3],
|
||||
component_name: params[4],
|
||||
quantity_per_unit: params[5],
|
||||
unit: params[6]
|
||||
});
|
||||
return { rows: [] };
|
||||
}
|
||||
|
||||
if (normalizedSql.includes('FROM product_compositions composition')) {
|
||||
const compositions = state.compositions.filter(item => (
|
||||
item.source === params[0]
|
||||
&& (params[1] === '' || item.finished_tiny_product_id === params[1] || item.finished_product_sku === String(params[1]).toUpperCase())
|
||||
));
|
||||
return {
|
||||
rows: compositions.map(composition => ({
|
||||
...composition,
|
||||
components: state.compositionComponents
|
||||
.filter(item => item.product_composition_id === composition.id)
|
||||
.map(item => ({ ...item, component_product_id: null }))
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
if (normalizedSql.startsWith('SELECT id FROM production_orders')) {
|
||||
return { rows: [] };
|
||||
}
|
||||
|
||||
if (normalizedSql.startsWith('INSERT INTO production_orders')) {
|
||||
const order = {
|
||||
id: state.nextOrderId++,
|
||||
tiny_id: params[0], number: params[1], status: params[2], order_reference: params[3],
|
||||
issue_date: params[4], expected_date: params[5], product_sku: params[6],
|
||||
product_description: params[7], quantity: params[8], unit: params[9],
|
||||
integration_status: params[10], notes: params[11], supplier: params[12], lot_code: params[13],
|
||||
roll_quantity: params[14], fabric_kg: params[15], rib_kg: params[16],
|
||||
yield_pieces_per_kg: params[17], created_at: null, updated_at: null
|
||||
};
|
||||
state.productionOrders.push(order);
|
||||
return { rows: [{ id: order.id }] };
|
||||
}
|
||||
|
||||
if (normalizedSql.startsWith('DELETE FROM production_order_components') || normalizedSql.startsWith('DELETE FROM production_order_steps')) {
|
||||
return { rows: [] };
|
||||
}
|
||||
|
||||
if (normalizedSql.includes('FROM production_orders po') && normalizedSql.includes('WHERE po.id = $1')) {
|
||||
const order = state.productionOrders.find(item => item.id === params[0]);
|
||||
return { rows: order ? [{ ...order, markers: [], components: [], steps: [] }] : [] };
|
||||
}
|
||||
|
||||
throw new Error(`Unexpected SQL in test double: ${normalizedSql.slice(0, 100)}`);
|
||||
};
|
||||
|
||||
pool.query = query;
|
||||
pool.connect = async () => ({ query, release() {} });
|
||||
try {
|
||||
await run(state);
|
||||
} finally {
|
||||
pool.connect = originalConnect;
|
||||
pool.query = originalQuery;
|
||||
}
|
||||
};
|
||||
|
||||
test('Tiny/Olist V3 first import creates a composition without creating an OP', async () => {
|
||||
await withFakeDatabase(async (state) => {
|
||||
const response = await invokeHandler(tinySyncHandler, { body: compositionPayload() });
|
||||
const result = response.body;
|
||||
|
||||
assert.equal(response.statusCode, 201);
|
||||
assert.equal(result.componentCount, 2);
|
||||
assert.equal(state.compositions.length, 1);
|
||||
assert.equal(state.compositionComponents.length, 2);
|
||||
assert.equal(state.productionOrders.length, 0);
|
||||
assert.equal(result.composition.finishedTinyProductId, '976058813');
|
||||
});
|
||||
});
|
||||
|
||||
test('Tiny/Olist V3 re-sync replaces composition components without duplicates', async () => {
|
||||
await withFakeDatabase(async (state) => {
|
||||
await invokeHandler(tinySyncHandler, { body: compositionPayload() });
|
||||
await invokeHandler(tinySyncHandler, { body: compositionPayload([
|
||||
{
|
||||
componentTinyId: '976059144', componentName: 'MALHA ATUALIZADA', componentSku: 'MC.30.CAF',
|
||||
quantityPerUnit: '0.2', totalQuantity: '0.2', unit: 'KG'
|
||||
},
|
||||
{
|
||||
componentTinyId: '976059144', componentName: 'MALHA ATUALIZADA', componentSku: 'MC.30.CAF',
|
||||
quantityPerUnit: '0.2', totalQuantity: '0.2', unit: 'KG'
|
||||
}
|
||||
]) });
|
||||
|
||||
assert.equal(state.compositions.length, 1);
|
||||
assert.equal(state.compositionComponents.length, 1);
|
||||
assert.equal(state.compositionComponents[0].quantity_per_unit, 0.2);
|
||||
assert.equal(state.productionOrders.length, 0);
|
||||
});
|
||||
});
|
||||
|
||||
test('product composition detail lookup returns stored components', async () => {
|
||||
await withFakeDatabase(async () => {
|
||||
await invokeHandler(tinySyncHandler, { body: compositionPayload() });
|
||||
const response = await invokeHandler(productCompositionHandler, { params: { productId: '976058813' } });
|
||||
const composition = response.body.composition;
|
||||
|
||||
assert.equal(response.statusCode, 200);
|
||||
assert.equal(composition.finishedProductSku, 'BLCS.CAF.GG');
|
||||
assert.equal(composition.components.length, 2);
|
||||
assert.deepEqual(composition.components[0], {
|
||||
id: 1,
|
||||
componentTinyId: '919498232',
|
||||
componentSku: 'ETIQ.T.GG',
|
||||
componentName: 'ETIQUETA DE TAMANHO GG',
|
||||
quantityPerUnit: 1,
|
||||
unit: 'UN',
|
||||
productId: null
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('product composition export endpoint returns every stored composition', async () => {
|
||||
await withFakeDatabase(async () => {
|
||||
await invokeHandler(tinySyncHandler, { body: compositionPayload() });
|
||||
const response = await invokeHandler(productCompositionsHandler, { params: {} });
|
||||
|
||||
assert.equal(response.statusCode, 200);
|
||||
assert.equal(response.body.compositions.length, 1);
|
||||
assert.equal(response.body.compositions[0].components.length, 2);
|
||||
});
|
||||
});
|
||||
|
||||
test('ordinary Tiny production-order payloads continue to create production orders', async () => {
|
||||
await withFakeDatabase(async (state) => {
|
||||
const response = await invokeHandler(tinySyncHandler, { body: {
|
||||
order: {
|
||||
tinyId: '12345', number: 'OP-12345', status: 'in_progress', productSku: 'BLCS.CAF.GG',
|
||||
productDescription: 'BASE LISA CAMISETA COR CAFE TAMANHO - GG', quantity: '10', unit: 'UN'
|
||||
},
|
||||
components: [],
|
||||
steps: []
|
||||
} });
|
||||
const result = response.body;
|
||||
|
||||
assert.equal(response.statusCode, 201);
|
||||
assert.equal(state.compositions.length, 0);
|
||||
assert.equal(state.productionOrders.length, 1);
|
||||
assert.equal(result.order.tinyId, '12345');
|
||||
assert.equal(result.order.number, 'OP-12345');
|
||||
});
|
||||
});
|
||||
@@ -1,29 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const test = require('node:test');
|
||||
|
||||
const { getBaseProductName } = require('../mappers/stockMapper');
|
||||
|
||||
test('getBaseProductName strips TAMANHO suffixes', () => {
|
||||
assert.equal(
|
||||
getBaseProductName('BASE LISA CAMISETA COR BRANCO TAMANHO - P'),
|
||||
'BASE LISA CAMISETA COR BRANCO'
|
||||
);
|
||||
});
|
||||
|
||||
test('getBaseProductName strips trailing size suffixes without removing colors', () => {
|
||||
assert.equal(
|
||||
getBaseProductName('BASE LISA MOLETOM CANGURU COR PRETO - M'),
|
||||
'BASE LISA MOLETOM CANGURU COR PRETO'
|
||||
);
|
||||
assert.equal(
|
||||
getBaseProductName('BASE LISA MOLETOM CANGURU COR PRETO - M/G/GG'),
|
||||
'BASE LISA MOLETOM CANGURU COR PRETO'
|
||||
);
|
||||
assert.equal(getBaseProductName('BONÉ - BRANCO'), 'BONÉ - BRANCO');
|
||||
});
|
||||
|
||||
test('getBaseProductName preserves etiqueta product variants', () => {
|
||||
assert.equal(getBaseProductName('ETIQUETA 10X5 851UN'), 'ETIQUETA 10X5 851UN');
|
||||
assert.equal(getBaseProductName('ETIQUETA BRANCA TAMANHO 08'), 'ETIQUETA BRANCA TAMANHO 08');
|
||||
assert.equal(getBaseProductName('ETIQUETA BRANCA TAMANHO GG'), 'ETIQUETA BRANCA TAMANHO GG');
|
||||
});
|
||||
@@ -1,3 +1,5 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
db:
|
||||
image: postgres:15-alpine
|
||||
@@ -26,12 +28,6 @@ services:
|
||||
- ADMIN_EMAIL=${ADMIN_EMAIL:-admin@admin.com}
|
||||
- ADMIN_PASSWORD=${ADMIN_PASSWORD:-admin123}
|
||||
- JWT_SECRET=${JWT_SECRET:-super_secret_jwt_key_123}
|
||||
- N8N_WHATSAPP_TRIGGER_URL=${N8N_WHATSAPP_TRIGGER_URL:-http://localhost:5678/webhook/whatsapp}
|
||||
- TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY:-}
|
||||
- TURNSTILE_SITEKEY=${TURNSTILE_SITEKEY:-}
|
||||
- VITE_TURNSTILE_SITE_KEY=${VITE_TURNSTILE_SITE_KEY:-}
|
||||
- TURNSTILE_SECRET=${TURNSTILE_SECRET:-}
|
||||
- TURNSTILE_SECRET_KEY=${TURNSTILE_SECRET_KEY:-}
|
||||
depends_on:
|
||||
- db
|
||||
restart: unless-stopped
|
||||
@@ -42,10 +38,10 @@ services:
|
||||
image: gitea.blyzer.com.br/blyzer/graphs-frontend:latest
|
||||
container_name: graph_frontend
|
||||
ports:
|
||||
- "3002:80"
|
||||
- "3005:80"
|
||||
depends_on:
|
||||
- backend
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
pgdata:
|
||||
pgdata:
|
||||
33
fake-data.cjs
Normal file
33
fake-data.cjs
Normal file
@@ -0,0 +1,33 @@
|
||||
const products = [];
|
||||
|
||||
// Group 1: High Quantity, Low Price (Top 10 in Bar Chart, won't show in Pie Chart)
|
||||
for (let i = 0; i < 10; i++) {
|
||||
products.push({
|
||||
Nome_Cliente: "Fake Client A" + i,
|
||||
Data_Pedido: "06-05-2026",
|
||||
Valor_Pedido: 100,
|
||||
ID_Produto: "QA" + i,
|
||||
Descricao_Produto: "Produto Muito Vendido " + i,
|
||||
Quantidade: 1000 + i, // High sales
|
||||
Valor_Unitario: 0.10 // Low revenue
|
||||
});
|
||||
}
|
||||
|
||||
// Group 2: Low Quantity, High Price (Top 10 in Pie Chart, won't show in Bar Chart)
|
||||
for (let i = 0; i < 10; i++) {
|
||||
products.push({
|
||||
Nome_Cliente: "Fake Client B" + i,
|
||||
Data_Pedido: "06-05-2026",
|
||||
Valor_Pedido: 10000,
|
||||
ID_Produto: "QB" + i,
|
||||
Descricao_Produto: "Produto Muito Caro " + i,
|
||||
Quantidade: 1, // Low sales
|
||||
Valor_Unitario: 10000 + i // High revenue
|
||||
});
|
||||
}
|
||||
|
||||
fetch('http://localhost:3004/api/data', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'x-api-key': 'nexstar_secret_key_123' },
|
||||
body: JSON.stringify(products)
|
||||
}).then(res => console.log("Status:", res.status)).catch(console.error);
|
||||
42
fake-data.js
Normal file
42
fake-data.js
Normal file
@@ -0,0 +1,42 @@
|
||||
// Clear previous data for a clean slate
|
||||
const { Pool } = require('pg');
|
||||
const pool = new Pool({ connectionString: 'postgres://graphuser:graphpassword@localhost:5432/graphdb' });
|
||||
|
||||
async function run() {
|
||||
await pool.query('TRUNCATE TABLE orders RESTART IDENTITY;');
|
||||
|
||||
// Group 1: High Quantity, Low Price (Top 10 in Bar Chart, won't show in Pie Chart)
|
||||
const group1 = Array.from({length: 10}, (_, i) => ({
|
||||
Nome_Cliente: "Fake Client A" + i,
|
||||
Data_Pedido: "06-05-2026",
|
||||
Valor_Pedido: 100,
|
||||
ID_Produto: "QA" + i,
|
||||
Descricao_Produto: "Produto Muito Vendido " + i,
|
||||
Quantidade: 1000 + i, // High sales
|
||||
Valor_Unitario: 0.10 // Low revenue
|
||||
}));
|
||||
|
||||
// Group 2: Low Quantity, High Price (Top 10 in Pie Chart, won't show in Bar Chart)
|
||||
const group2 = Array.from({length: 10}, (_, i) => ({
|
||||
Nome_Cliente: "Fake Client B" + i,
|
||||
Data_Pedido: "06-05-2026",
|
||||
Valor_Pedido: 10000,
|
||||
ID_Produto: "QB" + i,
|
||||
Descricao_Produto: "Produto Muito Caro " + i,
|
||||
Quantidade: 1, // Low sales
|
||||
Valor_Unitario: 10000 + i // High revenue
|
||||
}));
|
||||
|
||||
const products = [...group1, ...group2];
|
||||
|
||||
const res = await fetch('http://localhost:3004/api/data', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'x-api-key': 'nexstar_secret_key_123' },
|
||||
body: JSON.stringify(products)
|
||||
});
|
||||
|
||||
console.log(res.status);
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
run();
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark" data-theme="dark">
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
184
src/App.css
Normal file
184
src/App.css
Normal file
@@ -0,0 +1,184 @@
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
78
src/App.tsx
78
src/App.tsx
@@ -1,25 +1,13 @@
|
||||
import React, { Suspense } from 'react';
|
||||
import React from 'react';
|
||||
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import Layout from './components/Layout';
|
||||
import { isAuthenticated, isSuperAdmin } from './dataService';
|
||||
|
||||
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
|
||||
const Products = React.lazy(() => import('./pages/Products'));
|
||||
const ProductDetails = React.lazy(() => import('./pages/ProductDetails'));
|
||||
const ProductGroupDetails = React.lazy(() => import('./pages/ProductGroupDetails'));
|
||||
const Replenishment = React.lazy(() => import('./pages/Replenishment'));
|
||||
const Cutting = React.lazy(() => import('./pages/Cutting'));
|
||||
const PlanningIssues = React.lazy(() => import('./pages/PlanningIssues'));
|
||||
const ProductionOrders = React.lazy(() => import('./pages/ProductionOrders'));
|
||||
const Supplies = React.lazy(() => import('./pages/Supplies'));
|
||||
const Clients = React.lazy(() => import('./pages/Clients'));
|
||||
const ClientDetails = React.lazy(() => import('./pages/ClientDetails'));
|
||||
const Campaigns = React.lazy(() => import('./pages/Campaigns'));
|
||||
const Rfm = React.lazy(() => import('./pages/Rfm'));
|
||||
const Registrations = React.lazy(() => import('./pages/Registrations'));
|
||||
const Login = React.lazy(() => import('./pages/Login'));
|
||||
const AdminUsers = React.lazy(() => import('./pages/AdminUsers'));
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import Products from './pages/Products';
|
||||
import ProductDetails from './pages/ProductDetails';
|
||||
import Clients from './pages/Clients';
|
||||
import ClientDetails from './pages/ClientDetails';
|
||||
import Login from './pages/Login';
|
||||
import { isAuthenticated } from './dataService';
|
||||
|
||||
function PrivateRoute({ children }: { children: React.ReactNode }) {
|
||||
const location = useLocation();
|
||||
@@ -29,47 +17,19 @@ function PrivateRoute({ children }: { children: React.ReactNode }) {
|
||||
return children;
|
||||
}
|
||||
|
||||
function SuperAdminRoute({ children }: { children: React.ReactNode }) {
|
||||
if (!isSuperAdmin()) {
|
||||
return <Navigate to="/graph" replace />;
|
||||
}
|
||||
return children;
|
||||
}
|
||||
|
||||
const RouteFallback = () => (
|
||||
<div className="flex min-h-screen items-center justify-center bg-dark-bg text-brand-primary">
|
||||
<Loader2 className="h-8 w-8 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Suspense fallback={<RouteFallback />}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/" element={<Navigate to="/graph" replace />} />
|
||||
<Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
|
||||
<Route path="graph" element={<Dashboard />} />
|
||||
<Route path="products" element={<Products />} />
|
||||
<Route path="products/groups/:groupKey" element={<ProductGroupDetails />} />
|
||||
<Route path="products/:id" element={<ProductDetails />} />
|
||||
<Route path="replenishment" element={<Replenishment />} />
|
||||
<Route path="cutting" element={<Cutting />} />
|
||||
<Route path="planning-issues" element={<PlanningIssues />} />
|
||||
<Route path="supplies" element={<Supplies />} />
|
||||
<Route path="supplies/:section" element={<Supplies />} />
|
||||
<Route path="stock" element={<Navigate to="/products" replace />} />
|
||||
<Route path="stock-alerts" element={<Navigate to="/products" replace />} />
|
||||
<Route path="production-orders" element={<ProductionOrders />} />
|
||||
<Route path="clients" element={<Clients />} />
|
||||
<Route path="clients/:clientToken" element={<ClientDetails />} />
|
||||
<Route path="rfm" element={<Rfm />} />
|
||||
<Route path="campaigns" element={<Campaigns />} />
|
||||
<Route path="registrations" element={<Registrations />} />
|
||||
<Route path="admin/users" element={<SuperAdminRoute><AdminUsers /></SuperAdminRoute>} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Suspense>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/" element={<Navigate to="/graph" replace />} />
|
||||
<Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
|
||||
<Route path="graph" element={<Dashboard />} />
|
||||
<Route path="products" element={<Products />} />
|
||||
<Route path="products/:id" element={<ProductDetails />} />
|
||||
<Route path="clients" element={<Clients />} />
|
||||
<Route path="clients/:name" element={<ClientDetails />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import type { DateRange, OrderData } from '../types.ts';
|
||||
import { buildClientDetailsMetrics } from './clients.ts';
|
||||
|
||||
const allPeriod: DateRange = {
|
||||
start: new Date(2000, 0, 1),
|
||||
end: new Date(2026, 5, 18, 23, 59, 59, 999)
|
||||
};
|
||||
|
||||
const order = (overrides: Partial<OrderData>): OrderData => ({
|
||||
Nome_Cliente: 'Cliente',
|
||||
Data_Pedido: '01-06-2026',
|
||||
Valor_Pedido: 0,
|
||||
ID_Produto: '1',
|
||||
Descricao_Produto: 'Produto',
|
||||
Quantidade: 1,
|
||||
Valor_Unitario: 10,
|
||||
ID_Pedido: 'pedido',
|
||||
Fone_Cliente: '',
|
||||
...overrides
|
||||
});
|
||||
|
||||
test('client details do not merge different phone keys that share the same name', () => {
|
||||
const orders = [
|
||||
order({
|
||||
Nome_Cliente: 'Leonardo Barbosa',
|
||||
Fone_Cliente: '111',
|
||||
ID_Pedido: 'pedido-1',
|
||||
Quantidade: 2,
|
||||
Valor_Unitario: 10
|
||||
}),
|
||||
order({
|
||||
Nome_Cliente: 'Leonardo Barbosa',
|
||||
Fone_Cliente: '222',
|
||||
ID_Pedido: 'pedido-2',
|
||||
Quantidade: 5,
|
||||
Valor_Unitario: 10
|
||||
})
|
||||
];
|
||||
|
||||
const metrics = buildClientDetailsMetrics(orders, '111', allPeriod);
|
||||
|
||||
assert.equal(metrics.periodOrderCount, 1);
|
||||
assert.equal(metrics.periodItems, 2);
|
||||
assert.equal(metrics.periodSpent, 20);
|
||||
assert.equal(metrics.clientPhone, '111');
|
||||
});
|
||||
|
||||
test('legacy name detail URLs reject ambiguous names instead of merging customers', () => {
|
||||
const orders = [
|
||||
order({
|
||||
Nome_Cliente: 'Leonardo Barbosa',
|
||||
Fone_Cliente: '111',
|
||||
ID_Pedido: 'pedido-1'
|
||||
}),
|
||||
order({
|
||||
Nome_Cliente: 'Leonardo Barbosa',
|
||||
Fone_Cliente: '222',
|
||||
ID_Pedido: 'pedido-2'
|
||||
})
|
||||
];
|
||||
|
||||
const metrics = buildClientDetailsMetrics(orders, 'Leonardo Barbosa', allPeriod);
|
||||
|
||||
assert.equal(metrics.hasClient, false);
|
||||
assert.equal(metrics.periodOrderCount, 0);
|
||||
assert.equal(metrics.periodItems, 0);
|
||||
});
|
||||
|
||||
test('client details merge name variations that share the same phone key', () => {
|
||||
const orders = [
|
||||
order({
|
||||
Nome_Cliente: 'Jose de Matos Dreher',
|
||||
Fone_Cliente: '333',
|
||||
ID_Pedido: 'pedido-1',
|
||||
Valor_Unitario: 10
|
||||
}),
|
||||
order({
|
||||
Nome_Cliente: 'José Matos',
|
||||
Fone_Cliente: '333',
|
||||
ID_Pedido: 'pedido-2',
|
||||
Valor_Unitario: 20
|
||||
})
|
||||
];
|
||||
|
||||
const metrics = buildClientDetailsMetrics(orders, '333', allPeriod);
|
||||
|
||||
assert.equal(metrics.periodOrderCount, 2);
|
||||
assert.equal(metrics.periodItems, 2);
|
||||
assert.equal(metrics.periodSpent, 30);
|
||||
});
|
||||
|
||||
test('client detail order totals use the same line-item revenue as summary metrics', () => {
|
||||
const orders = [
|
||||
order({
|
||||
Nome_Cliente: 'Cliente Sem Fone',
|
||||
ID_Pedido: 'pedido-1',
|
||||
ID_Produto: 'produto-1',
|
||||
Valor_Pedido: 100,
|
||||
Quantidade: 2,
|
||||
Valor_Unitario: 10
|
||||
}),
|
||||
order({
|
||||
Nome_Cliente: 'Cliente Sem Fone',
|
||||
ID_Pedido: 'pedido-1',
|
||||
ID_Produto: 'produto-2',
|
||||
Valor_Pedido: 100,
|
||||
Quantidade: 1,
|
||||
Valor_Unitario: 5
|
||||
})
|
||||
];
|
||||
|
||||
const metrics = buildClientDetailsMetrics(orders, 'name:Cliente Sem Fone', allPeriod);
|
||||
|
||||
assert.equal(metrics.periodSpent, 25);
|
||||
assert.equal(metrics.groupedOrders[0].orderTotal, 25);
|
||||
});
|
||||
@@ -1,297 +0,0 @@
|
||||
import type { DateRange, OrderData } from '../types.ts';
|
||||
import { filterOrdersByDateRange, getClientDisplayName, getOrderItemRevenue, getOrderCustomerKey, parseOrderDate } from './orders.ts';
|
||||
|
||||
export type ClientSortOption =
|
||||
| 'recent'
|
||||
| 'spent_desc'
|
||||
| 'spent_asc'
|
||||
| 'ticket_desc'
|
||||
| 'ticket_asc'
|
||||
| 'rfm_priority'
|
||||
| 'items_desc'
|
||||
| 'items_asc';
|
||||
|
||||
export interface ClientSummary {
|
||||
customerKey: string;
|
||||
clientToken: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
totalSpent: number;
|
||||
averageTicket: number;
|
||||
totalItems: number;
|
||||
orderCount: number;
|
||||
lastPurchase: number;
|
||||
clientType: string;
|
||||
rfmScore: string;
|
||||
rfmPriority: number;
|
||||
}
|
||||
|
||||
export interface GroupedClientOrder {
|
||||
date: string;
|
||||
orderId: string;
|
||||
orderTotal: number;
|
||||
items: OrderData[];
|
||||
}
|
||||
|
||||
export interface ClientDetailsMetrics {
|
||||
chartData: Array<{
|
||||
date: string;
|
||||
value: number;
|
||||
}>;
|
||||
purchaseWeekdays: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
}>;
|
||||
purchaseHours: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
}>;
|
||||
groupedOrders: GroupedClientOrder[];
|
||||
allTimeOrderCount: number;
|
||||
clientName: string;
|
||||
clientPhone: string;
|
||||
hasClient: boolean;
|
||||
periodAverageTicket: number;
|
||||
periodOrderCount: number;
|
||||
periodSpent: number;
|
||||
periodItems: number;
|
||||
}
|
||||
|
||||
const WEEKDAY_LABELS = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'];
|
||||
|
||||
const getOrderHour = (order: OrderData): number | null => {
|
||||
const timestamp = order.Recebido_Em || (/\d{1,2}:\d{2}/.test(order.Data_Pedido || '') ? order.Data_Pedido : '');
|
||||
if (!timestamp) return null;
|
||||
|
||||
const date = new Date(timestamp);
|
||||
if (!Number.isNaN(date.getTime())) return date.getHours();
|
||||
|
||||
const timeMatch = String(timestamp).match(/\b(\d{1,2}):\d{2}/);
|
||||
if (!timeMatch) return null;
|
||||
|
||||
const hour = Number(timeMatch[1]);
|
||||
return hour >= 0 && hour <= 23 ? hour : null;
|
||||
};
|
||||
|
||||
const scoreTertile = (value: number, values: number[], higherIsBetter = true) => {
|
||||
const numericValues = values.filter(Number.isFinite);
|
||||
if (!numericValues.length) return 1;
|
||||
if (numericValues.length === 1) return 3;
|
||||
|
||||
const min = Math.min(...numericValues);
|
||||
const max = Math.max(...numericValues);
|
||||
if (min === max) return 2;
|
||||
|
||||
const sorted = [...numericValues].sort((a, b) => higherIsBetter ? a - b : b - a);
|
||||
const index = sorted.findIndex(candidate => candidate === value);
|
||||
const percentile = index / (sorted.length - 1);
|
||||
|
||||
return Math.min(3, Math.max(1, Math.floor(percentile * 3) + 1));
|
||||
};
|
||||
|
||||
const getClientType = (recencyScore: number, valueScore: number) => {
|
||||
const segmentMap: Record<string, string> = {
|
||||
'3-3': 'Campeão',
|
||||
'3-2': 'Potencial Leal',
|
||||
'3-1': 'Novo Cliente',
|
||||
'2-3': 'Cliente Leal',
|
||||
'2-2': 'Precisa de Atenção',
|
||||
'2-1': 'Quase Dormindo',
|
||||
'1-3': 'Em Risco',
|
||||
'1-2': 'Hibernando',
|
||||
'1-1': 'Perdido'
|
||||
};
|
||||
|
||||
return segmentMap[`${recencyScore}-${valueScore}`] || 'Perdido';
|
||||
};
|
||||
|
||||
const enrichClientsWithRfmType = (
|
||||
clients: Array<Omit<ClientSummary, 'averageTicket' | 'clientType' | 'rfmScore' | 'rfmPriority'>>,
|
||||
dateRange: DateRange
|
||||
): ClientSummary[] => {
|
||||
const rangeEndTime = dateRange.end.getTime();
|
||||
const recencyValues = clients.map(client => Math.max(0, Math.floor((rangeEndTime - client.lastPurchase) / 86400000)));
|
||||
const frequencyValues = clients.map(client => client.orderCount);
|
||||
const monetaryValues = clients.map(client => client.totalSpent);
|
||||
|
||||
return clients.map((client, index) => {
|
||||
const recencyScore = scoreTertile(recencyValues[index], recencyValues, false);
|
||||
const frequencyScore = scoreTertile(client.orderCount, frequencyValues);
|
||||
const monetaryScore = scoreTertile(client.totalSpent, monetaryValues);
|
||||
const valueScore = Math.min(3, Math.max(1, Math.round((frequencyScore + monetaryScore) / 2)));
|
||||
const rfmPriority = (recencyScore * 100) + (valueScore * 10) + monetaryScore;
|
||||
|
||||
return {
|
||||
...client,
|
||||
clientToken: client.clientToken || client.customerKey,
|
||||
averageTicket: client.orderCount ? client.totalSpent / client.orderCount : 0,
|
||||
clientType: getClientType(recencyScore, valueScore),
|
||||
rfmScore: `${recencyScore}${frequencyScore}${monetaryScore}`,
|
||||
rfmPriority
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const buildClientsSummary = (
|
||||
ordersData: OrderData[],
|
||||
dateRange: DateRange,
|
||||
searchTerm: string,
|
||||
sortBy: ClientSortOption
|
||||
): ClientSummary[] => {
|
||||
const orders = filterOrdersByDateRange(ordersData, dateRange);
|
||||
const clientMap: Record<string, {
|
||||
name: string;
|
||||
totalSpent: number;
|
||||
totalItems: number;
|
||||
uniqueOrders: Set<string>;
|
||||
lastPurchase: number;
|
||||
phone: string;
|
||||
}> = {};
|
||||
|
||||
orders.forEach(order => {
|
||||
const clientName = getClientDisplayName(order);
|
||||
const customerKey = getOrderCustomerKey(order);
|
||||
|
||||
if (!clientMap[customerKey]) {
|
||||
clientMap[customerKey] = { name: clientName, totalSpent: 0, totalItems: 0, uniqueOrders: new Set(), lastPurchase: 0, phone: '' };
|
||||
}
|
||||
|
||||
if (order.Fone_Cliente) {
|
||||
clientMap[customerKey].phone = order.Fone_Cliente;
|
||||
}
|
||||
|
||||
clientMap[customerKey].totalSpent += getOrderItemRevenue(order);
|
||||
clientMap[customerKey].totalItems += order.Quantidade;
|
||||
clientMap[customerKey].uniqueOrders.add(`${order.Data_Pedido}_${order.Valor_Pedido}`);
|
||||
|
||||
const orderTime = parseOrderDate(order.Data_Pedido).getTime();
|
||||
if (orderTime > clientMap[customerKey].lastPurchase) {
|
||||
clientMap[customerKey].lastPurchase = orderTime;
|
||||
}
|
||||
});
|
||||
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
const clients = enrichClientsWithRfmType(Object.keys(clientMap).map(customerKey => ({
|
||||
customerKey,
|
||||
clientToken: customerKey,
|
||||
name: clientMap[customerKey].name,
|
||||
phone: clientMap[customerKey].phone,
|
||||
totalSpent: clientMap[customerKey].totalSpent,
|
||||
totalItems: clientMap[customerKey].totalItems,
|
||||
orderCount: clientMap[customerKey].uniqueOrders.size,
|
||||
lastPurchase: clientMap[customerKey].lastPurchase
|
||||
})), dateRange);
|
||||
|
||||
const filteredClients = normalizedSearch
|
||||
? clients.filter(client => client.name.toLowerCase().includes(normalizedSearch))
|
||||
: clients;
|
||||
|
||||
return filteredClients.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'recent': return b.lastPurchase - a.lastPurchase;
|
||||
case 'spent_desc': return b.totalSpent - a.totalSpent;
|
||||
case 'spent_asc': return a.totalSpent - b.totalSpent;
|
||||
case 'ticket_desc': return b.averageTicket - a.averageTicket;
|
||||
case 'ticket_asc': return a.averageTicket - b.averageTicket;
|
||||
case 'rfm_priority': return b.rfmPriority - a.rfmPriority;
|
||||
case 'items_desc': return b.totalItems - a.totalItems;
|
||||
case 'items_asc': return a.totalItems - b.totalItems;
|
||||
default: return 0;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const buildClientDetailsMetrics = (ordersData: OrderData[], customerKey: string, dateRange: DateRange): ClientDetailsMetrics => {
|
||||
const keyedOrders = ordersData.filter(order => getOrderCustomerKey(order) === customerKey);
|
||||
const legacyNameOrders = keyedOrders.length
|
||||
? []
|
||||
: ordersData.filter(order => getClientDisplayName(order) === customerKey);
|
||||
const legacyCustomerKeys = new Set(legacyNameOrders.map(getOrderCustomerKey));
|
||||
const resolvedLegacyKey = legacyCustomerKeys.size === 1 ? [...legacyCustomerKeys][0] : '';
|
||||
const clientOrders = keyedOrders.length
|
||||
? keyedOrders
|
||||
: resolvedLegacyKey
|
||||
? ordersData.filter(order => getOrderCustomerKey(order) === resolvedLegacyKey)
|
||||
: [];
|
||||
const periodOrders = filterOrdersByDateRange(clientOrders, dateRange);
|
||||
const groupedOrdersMap: Record<string, GroupedClientOrder> = {};
|
||||
const spentByDate: Record<string, number> = {};
|
||||
let clientPhone = '';
|
||||
let clientName = '';
|
||||
let periodSpent = 0;
|
||||
let periodItems = 0;
|
||||
|
||||
clientOrders.forEach(order => {
|
||||
if (order.Fone_Cliente && !clientPhone) clientPhone = order.Fone_Cliente;
|
||||
if (!clientName) clientName = getClientDisplayName(order);
|
||||
});
|
||||
|
||||
periodOrders.forEach(order => {
|
||||
periodSpent += getOrderItemRevenue(order);
|
||||
periodItems += order.Quantidade;
|
||||
spentByDate[order.Data_Pedido] = (spentByDate[order.Data_Pedido] || 0) + getOrderItemRevenue(order);
|
||||
|
||||
const key = order.ID_Pedido || `${order.Data_Pedido}_${order.Valor_Pedido}`;
|
||||
if (!groupedOrdersMap[key]) {
|
||||
groupedOrdersMap[key] = {
|
||||
date: order.Data_Pedido,
|
||||
orderId: order.ID_Pedido || key,
|
||||
orderTotal: 0,
|
||||
items: []
|
||||
};
|
||||
}
|
||||
groupedOrdersMap[key].items.push(order);
|
||||
groupedOrdersMap[key].orderTotal += getOrderItemRevenue(order);
|
||||
});
|
||||
|
||||
const groupedOrders = Object.values(groupedOrdersMap).sort((a, b) => {
|
||||
return parseOrderDate(b.date).getTime() - parseOrderDate(a.date).getTime();
|
||||
});
|
||||
|
||||
const allTimeOrderIds = new Set(clientOrders.map(order => order.ID_Pedido || `${order.Data_Pedido}_${order.Valor_Pedido}`));
|
||||
const periodOrderCount = groupedOrders.length;
|
||||
const chartData = Object.keys(spentByDate).map(date => ({
|
||||
date,
|
||||
value: spentByDate[date]
|
||||
})).sort((a, b) => parseOrderDate(a.date).getTime() - parseOrderDate(b.date).getTime());
|
||||
const weekdayCounts = WEEKDAY_LABELS.map(label => ({ label, value: 0 }));
|
||||
const hourCounts = Array.from({ length: 24 }, (_, hour) => ({
|
||||
label: `${String(hour).padStart(2, '0')}h`,
|
||||
value: 0
|
||||
}));
|
||||
|
||||
const patternOrders = new Map<string, OrderData>();
|
||||
clientOrders.forEach(order => {
|
||||
const key = order.ID_Pedido || `${order.Data_Pedido}_${order.Valor_Pedido}`;
|
||||
if (!patternOrders.has(key)) {
|
||||
patternOrders.set(key, order);
|
||||
}
|
||||
});
|
||||
|
||||
patternOrders.forEach(order => {
|
||||
const orderDate = parseOrderDate(order.Data_Pedido);
|
||||
if (!Number.isNaN(orderDate.getTime())) {
|
||||
weekdayCounts[orderDate.getDay()].value += 1;
|
||||
}
|
||||
|
||||
const orderHour = getOrderHour(order);
|
||||
if (orderHour !== null) {
|
||||
hourCounts[orderHour].value += 1;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
chartData,
|
||||
purchaseWeekdays: weekdayCounts,
|
||||
purchaseHours: hourCounts,
|
||||
groupedOrders,
|
||||
allTimeOrderCount: allTimeOrderIds.size,
|
||||
clientName,
|
||||
clientPhone,
|
||||
hasClient: clientOrders.length > 0,
|
||||
periodAverageTicket: periodOrderCount ? periodSpent / periodOrderCount : 0,
|
||||
periodOrderCount,
|
||||
periodSpent,
|
||||
periodItems
|
||||
};
|
||||
};
|
||||
@@ -1,177 +0,0 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import { buildCutPlan, buildOpenProductionByProductId, classifyCutFamily } from './cutting.ts';
|
||||
import type { DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types.ts';
|
||||
|
||||
const range: DateRange = {
|
||||
start: new Date(2026, 6, 1),
|
||||
end: new Date(2026, 6, 7)
|
||||
};
|
||||
|
||||
const product = (overrides: Partial<ProductAnalyticsItem>): ProductAnalyticsItem => ({
|
||||
id: 'SKU-1',
|
||||
name: 'BASE LISA CAMISETA COR PRETO TAMANHO - M',
|
||||
quantitySold: 70,
|
||||
revenue: 700,
|
||||
orderLineCount: 10,
|
||||
lastPrice: 10,
|
||||
stock: 20,
|
||||
firstSaleDate: '2026-07-01',
|
||||
lastSaleDate: '2026-07-07',
|
||||
...overrides
|
||||
});
|
||||
|
||||
const productionOrder = (overrides: Partial<ProductionOrderItem>): ProductionOrderItem => ({
|
||||
id: 1,
|
||||
tinyId: '',
|
||||
number: 'OP-1',
|
||||
status: 'in_progress',
|
||||
statusLabel: 'Em andamento',
|
||||
orderReference: '',
|
||||
issueDate: '2026-07-01',
|
||||
expectedDate: '2026-07-15',
|
||||
productSku: '',
|
||||
productDescription: 'BASE LISA CAMISETA COR PRETO TAMANHO - M',
|
||||
quantity: 40,
|
||||
unit: 'UN',
|
||||
integrationStatus: '',
|
||||
markers: [],
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
...overrides
|
||||
});
|
||||
|
||||
test('classifyCutFamily maps known product bases to internal cut families', () => {
|
||||
assert.equal(classifyCutFamily('BASE LISA CAMISETA').key, 'BLCS');
|
||||
assert.equal(classifyCutFamily('BASE LISA CAMISETA OVER').key, 'BLOS');
|
||||
assert.equal(classifyCutFamily('BASE LISA MOLETOM CANGURU').key, 'BLPM');
|
||||
assert.equal(classifyCutFamily('BONÉ').key, 'OUTROS');
|
||||
});
|
||||
|
||||
test('buildCutPlan calculates projected cut need from sales pace and stock', () => {
|
||||
const plan = buildCutPlan([product({})], range, 14);
|
||||
const [row] = plan.needRows;
|
||||
|
||||
assert.equal(row.dailySales, 10);
|
||||
assert.equal(row.projectedDemand, 140);
|
||||
assert.equal(row.availableQuantity, 20);
|
||||
assert.equal(row.suggestedCutQuantity, 120);
|
||||
assert.equal(row.estimatedRolls, null);
|
||||
assert.deepEqual(row.issues, ['missing_yield_rule']);
|
||||
assert.equal(plan.summary.suggestedCutQuantity, 120);
|
||||
});
|
||||
|
||||
test('buildCutPlan subtracts open production quantity from suggested cut need', () => {
|
||||
const plan = buildCutPlan([product({ id: 'SKU-1' })], range, 14, { 'SKU-1': 100 });
|
||||
const [row] = plan.needRows;
|
||||
|
||||
assert.equal(row.availableQuantity, 120);
|
||||
assert.equal(row.suggestedCutQuantity, 20);
|
||||
});
|
||||
|
||||
test('buildCutPlan estimates rolls when a family yield is configured', () => {
|
||||
const plan = buildCutPlan([product({})], range, 14, {}, { familyYields: { BLCS: 50 } });
|
||||
const [row] = plan.needRows;
|
||||
|
||||
assert.equal(row.suggestedCutQuantity, 120);
|
||||
assert.equal(row.estimatedRolls, 3);
|
||||
assert.deepEqual(row.issues, []);
|
||||
assert.equal(plan.summary.estimatedRolls, 3);
|
||||
});
|
||||
|
||||
test('buildCutPlan applies per-product planning overrides to finished apparel', () => {
|
||||
const plan = buildCutPlan([
|
||||
product({
|
||||
id: 'SKU-2',
|
||||
name: 'CAMISETA SEM PADRAO',
|
||||
quantitySold: 70,
|
||||
stock: 0
|
||||
})
|
||||
], range, 7, {}, {
|
||||
familyYields: { BLCS: 35 },
|
||||
productOverrides: {
|
||||
'SKU-2': { familyKey: 'BLCS', color: 'Preto', size: 'M' }
|
||||
}
|
||||
});
|
||||
|
||||
assert.equal(plan.needRows[0].family.key, 'BLCS');
|
||||
assert.equal(plan.needRows[0].color, 'Preto');
|
||||
assert.equal(plan.needRows[0].size, 'M');
|
||||
assert.equal(plan.needRows[0].estimatedRolls, 2);
|
||||
assert.deepEqual(plan.needRows[0].issues, []);
|
||||
});
|
||||
|
||||
test('buildCutPlan excludes non-apparel products from cut planning', () => {
|
||||
const plan = buildCutPlan([
|
||||
product({
|
||||
id: 'SKU-2',
|
||||
name: 'BONÉ PRETO',
|
||||
quantitySold: 70,
|
||||
stock: 0
|
||||
}),
|
||||
product({
|
||||
id: 'SKU-3',
|
||||
name: 'TRANSPARENTE PP MILHEIRO - 25x35',
|
||||
quantitySold: 70,
|
||||
stock: 0
|
||||
})
|
||||
], range, 7);
|
||||
|
||||
assert.equal(plan.rows.length, 0);
|
||||
assert.equal(plan.summary.skuCount, 0);
|
||||
});
|
||||
|
||||
test('buildCutPlan includes non-apparel products manually marked as finished apparel', () => {
|
||||
const plan = buildCutPlan([
|
||||
product({
|
||||
id: 'SKU-2',
|
||||
name: 'BONÉ PRETO',
|
||||
quantitySold: 70,
|
||||
stock: 0
|
||||
})
|
||||
], range, 7, {}, {
|
||||
familyYields: { BLCS: 35 },
|
||||
productOverrides: {
|
||||
'SKU-2': {
|
||||
productType: 'finished_apparel',
|
||||
familyKey: 'BLCS',
|
||||
color: 'Preto',
|
||||
size: 'M'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
assert.equal(plan.needRows.length, 1);
|
||||
assert.equal(plan.needRows[0].family.key, 'BLCS');
|
||||
assert.equal(plan.needRows[0].suggestedCutQuantity, 70);
|
||||
});
|
||||
|
||||
test('buildOpenProductionByProductId matches open OPs by SKU and normalized product variant', () => {
|
||||
const products = [
|
||||
product({ id: 'SKU-1' }),
|
||||
product({ id: 'SKU-2', name: 'BASE LISA CAMISETA COR BRANCO TAMANHO - G' })
|
||||
];
|
||||
const totals = buildOpenProductionByProductId(products, [
|
||||
productionOrder({ productSku: 'SKU-1', productDescription: '', quantity: 10 }),
|
||||
productionOrder({ productSku: '', productDescription: 'Base Lisa Camiseta Cor Branco Tamanho - G', quantity: 20 }),
|
||||
productionOrder({ productSku: 'SKU-1', status: 'finished', quantity: 999 })
|
||||
]);
|
||||
|
||||
assert.deepEqual(totals, { 'SKU-1': 10, 'SKU-2': 20 });
|
||||
});
|
||||
|
||||
test('buildCutPlan marks apparel products that cannot be planned cleanly for cutting', () => {
|
||||
const plan = buildCutPlan([
|
||||
product({
|
||||
id: 'SKU-2',
|
||||
name: 'VESTUARIO SEM PADRAO',
|
||||
quantitySold: 70,
|
||||
stock: 0
|
||||
})
|
||||
], range, 7);
|
||||
|
||||
assert.equal(plan.needRows[0].family.key, 'OUTROS');
|
||||
assert.deepEqual(plan.needRows[0].issues, ['missing_family_rule', 'missing_color', 'missing_size']);
|
||||
assert.equal(plan.summary.rowsWithIssues, 1);
|
||||
});
|
||||
@@ -1,303 +0,0 @@
|
||||
import type { CutFamilyKey, CutProductOverride, DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
|
||||
import { normalizeProductText, parseProductName, sortProductSizes } from '../productParsing.ts';
|
||||
import { resolveProductType } from '../productClassification.ts';
|
||||
import { getPlanningStock } from '../planningStock.ts';
|
||||
|
||||
export type { CutFamilyKey, CutProductOverride };
|
||||
|
||||
export type CutIssue = 'missing_family_rule' | 'missing_color' | 'missing_size' | 'missing_yield_rule';
|
||||
|
||||
export interface CutFamilyRule {
|
||||
key: CutFamilyKey;
|
||||
label: string;
|
||||
materialLabel: string;
|
||||
keywords: string[];
|
||||
unitsPerRoll: number | null;
|
||||
}
|
||||
|
||||
export interface CutPlanOptions {
|
||||
familyYields?: Partial<Record<CutFamilyKey, number>>;
|
||||
productOverrides?: Record<string, CutProductOverride>;
|
||||
}
|
||||
|
||||
export interface CutPlanSkuRow extends ProductAnalyticsItem {
|
||||
family: CutFamilyRule;
|
||||
baseName: string;
|
||||
color: string;
|
||||
size: string;
|
||||
dailySales: number;
|
||||
projectedDemand: number;
|
||||
openProductionQuantity: number;
|
||||
availableQuantity: number;
|
||||
suggestedCutQuantity: number;
|
||||
estimatedRolls: number | null;
|
||||
daysOfCover: number | null;
|
||||
issues: CutIssue[];
|
||||
}
|
||||
|
||||
export interface CutPlanFamilySummary {
|
||||
family: CutFamilyRule;
|
||||
skuCount: number;
|
||||
colorCount: number;
|
||||
sizeCount: number;
|
||||
quantitySold: number;
|
||||
stock: number;
|
||||
projectedDemand: number;
|
||||
suggestedCutQuantity: number;
|
||||
estimatedRolls: number | null;
|
||||
}
|
||||
|
||||
export interface CutPlanSummary {
|
||||
skuCount: number;
|
||||
familiesWithNeed: number;
|
||||
colorsWithNeed: number;
|
||||
sizesWithNeed: number;
|
||||
totalSold: number;
|
||||
totalStock: number;
|
||||
projectedDemand: number;
|
||||
suggestedCutQuantity: number;
|
||||
estimatedRolls: number | null;
|
||||
rowsWithIssues: number;
|
||||
openProductionQuantity: number;
|
||||
}
|
||||
|
||||
export interface CutPlan {
|
||||
rows: CutPlanSkuRow[];
|
||||
needRows: CutPlanSkuRow[];
|
||||
familySummaries: CutPlanFamilySummary[];
|
||||
summary: CutPlanSummary;
|
||||
}
|
||||
|
||||
export const CUT_FAMILY_RULES: CutFamilyRule[] = [
|
||||
{
|
||||
key: 'BLPM',
|
||||
label: 'Moletom',
|
||||
materialLabel: 'BLPM',
|
||||
keywords: ['MOLETOM'],
|
||||
unitsPerRoll: null
|
||||
},
|
||||
{
|
||||
key: 'BLOS',
|
||||
label: 'Camiseta over',
|
||||
materialLabel: 'BLOS',
|
||||
keywords: ['OVER'],
|
||||
unitsPerRoll: null
|
||||
},
|
||||
{
|
||||
key: 'BLMC',
|
||||
label: 'Camiseta infantil',
|
||||
materialLabel: 'BLMC',
|
||||
keywords: ['INFANTIL', 'KIDS'],
|
||||
unitsPerRoll: null
|
||||
},
|
||||
{
|
||||
key: 'BLCS',
|
||||
label: 'Camiseta regular',
|
||||
materialLabel: 'BLCS',
|
||||
keywords: ['CAMISETA'],
|
||||
unitsPerRoll: null
|
||||
}
|
||||
];
|
||||
|
||||
export const OUTROS_RULE: CutFamilyRule = {
|
||||
key: 'OUTROS',
|
||||
label: 'Sem regra',
|
||||
materialLabel: 'Pendente',
|
||||
keywords: [],
|
||||
unitsPerRoll: null
|
||||
};
|
||||
|
||||
const FAMILY_RULES_BY_KEY = new Map<CutFamilyKey, CutFamilyRule>([
|
||||
...CUT_FAMILY_RULES.map(rule => [rule.key, rule] as const),
|
||||
[OUTROS_RULE.key, OUTROS_RULE]
|
||||
]);
|
||||
|
||||
export const getRangeDays = (range: DateRange) => {
|
||||
const start = new Date(range.start);
|
||||
const end = new Date(range.end);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
end.setHours(0, 0, 0, 0);
|
||||
return Math.max(1, Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1);
|
||||
};
|
||||
|
||||
const normalizeRuleText = (value: string) => (
|
||||
value
|
||||
.normalize('NFD')
|
||||
.replace(/\p{Diacritic}/gu, '')
|
||||
.toUpperCase()
|
||||
);
|
||||
|
||||
export const classifyCutFamily = (baseName: string): CutFamilyRule => {
|
||||
const normalizedName = normalizeRuleText(baseName);
|
||||
return CUT_FAMILY_RULES.find(rule => (
|
||||
rule.keywords.some(keyword => normalizedName.includes(normalizeRuleText(keyword)))
|
||||
)) || OUTROS_RULE;
|
||||
};
|
||||
|
||||
const ruleWithConfiguredYield = (rule: CutFamilyRule, familyYields?: Partial<Record<CutFamilyKey, number>>): CutFamilyRule => {
|
||||
const configuredYield = familyYields?.[rule.key];
|
||||
return {
|
||||
...rule,
|
||||
unitsPerRoll: configuredYield && configuredYield > 0 ? configuredYield : rule.unitsPerRoll
|
||||
};
|
||||
};
|
||||
|
||||
const normalizeMatchText = (value: string) => normalizeProductText(value)
|
||||
.normalize('NFD')
|
||||
.replace(/\p{Diacritic}/gu, '')
|
||||
.toLowerCase();
|
||||
|
||||
const isOpenProductionOrder = (order: ProductionOrderItem) => (
|
||||
order.status === 'open' ||
|
||||
order.status === 'in_progress' ||
|
||||
['em aberto', 'aberta', 'andamento', 'em andamento'].includes(normalizeMatchText(order.status))
|
||||
);
|
||||
|
||||
export const buildOpenProductionByProductId = (
|
||||
products: ProductAnalyticsItem[],
|
||||
productionOrders: ProductionOrderItem[]
|
||||
): Record<string, number> => {
|
||||
const productById = new Map(products.map(product => [product.id, product]));
|
||||
const productByName = new Map(products.map(product => [normalizeMatchText(product.name), product]));
|
||||
const productsByVariantKey = new Map<string, ProductAnalyticsItem>();
|
||||
|
||||
products.forEach(product => {
|
||||
const metadata = parseProductName(product.name);
|
||||
const key = [
|
||||
normalizeMatchText(metadata.baseName),
|
||||
normalizeMatchText(metadata.color),
|
||||
normalizeMatchText(metadata.size)
|
||||
].join('::');
|
||||
productsByVariantKey.set(key, product);
|
||||
});
|
||||
|
||||
return productionOrders.reduce<Record<string, number>>((totals, order) => {
|
||||
if (!isOpenProductionOrder(order)) return totals;
|
||||
|
||||
const skuMatch = order.productSku ? productById.get(order.productSku) : undefined;
|
||||
const nameMatch = order.productDescription ? productByName.get(normalizeMatchText(order.productDescription)) : undefined;
|
||||
let product = skuMatch || nameMatch;
|
||||
|
||||
if (!product && order.productDescription) {
|
||||
const metadata = parseProductName(order.productDescription);
|
||||
const key = [
|
||||
normalizeMatchText(metadata.baseName),
|
||||
normalizeMatchText(metadata.color),
|
||||
normalizeMatchText(metadata.size)
|
||||
].join('::');
|
||||
product = productsByVariantKey.get(key);
|
||||
}
|
||||
|
||||
if (!product) return totals;
|
||||
|
||||
totals[product.id] = (totals[product.id] || 0) + order.quantity;
|
||||
return totals;
|
||||
}, {});
|
||||
};
|
||||
|
||||
export const buildCutPlan = (
|
||||
products: ProductAnalyticsItem[],
|
||||
dateRange: DateRange,
|
||||
targetCoverageDays: number,
|
||||
openProductionByProductId: Record<string, number> = {},
|
||||
options: CutPlanOptions = {}
|
||||
): CutPlan => {
|
||||
const rangeDays = getRangeDays(dateRange);
|
||||
const cuttableProducts = products.filter(product => (
|
||||
resolveProductType(product.name, options.productOverrides?.[product.id]) === 'finished_apparel'
|
||||
));
|
||||
|
||||
const rows = cuttableProducts.map<CutPlanSkuRow>(product => {
|
||||
const metadata = parseProductName(product.name);
|
||||
const override = options.productOverrides?.[product.id];
|
||||
const overrideRule = override?.familyKey ? FAMILY_RULES_BY_KEY.get(override.familyKey) : undefined;
|
||||
const family = ruleWithConfiguredYield(overrideRule || classifyCutFamily(metadata.baseName), options.familyYields);
|
||||
const color = normalizeProductText(override?.color || metadata.color);
|
||||
const size = normalizeProductText(override?.size || metadata.size).toUpperCase();
|
||||
const dailySales = product.quantitySold / rangeDays;
|
||||
const projectedDemand = dailySales * targetCoverageDays;
|
||||
const openProductionQuantity = openProductionByProductId[product.id] || 0;
|
||||
const availableQuantity = getPlanningStock(product.stock) + openProductionQuantity;
|
||||
const suggestedCutQuantity = Math.max(0, Math.ceil(projectedDemand - availableQuantity));
|
||||
const estimatedRolls = family.unitsPerRoll && suggestedCutQuantity > 0
|
||||
? Math.ceil(suggestedCutQuantity / family.unitsPerRoll)
|
||||
: null;
|
||||
const daysOfCover = dailySales > 0 ? availableQuantity / dailySales : null;
|
||||
const issues: CutIssue[] = [];
|
||||
|
||||
if (family.key === 'OUTROS') issues.push('missing_family_rule');
|
||||
if (!color) issues.push('missing_color');
|
||||
if (!size) issues.push('missing_size');
|
||||
if (suggestedCutQuantity > 0 && family.key !== 'OUTROS' && !family.unitsPerRoll) issues.push('missing_yield_rule');
|
||||
|
||||
return {
|
||||
...product,
|
||||
family,
|
||||
baseName: metadata.baseName,
|
||||
color,
|
||||
size,
|
||||
dailySales,
|
||||
projectedDemand,
|
||||
openProductionQuantity,
|
||||
availableQuantity,
|
||||
suggestedCutQuantity,
|
||||
estimatedRolls,
|
||||
daysOfCover,
|
||||
issues
|
||||
};
|
||||
});
|
||||
|
||||
const needRows = rows.filter(row => row.suggestedCutQuantity > 0);
|
||||
const familyGroups = new Map<CutFamilyKey, CutPlanSkuRow[]>();
|
||||
needRows.forEach(row => {
|
||||
const group = familyGroups.get(row.family.key) || [];
|
||||
group.push(row);
|
||||
familyGroups.set(row.family.key, group);
|
||||
});
|
||||
|
||||
const familySummaries = Array.from(familyGroups.values())
|
||||
.map<CutPlanFamilySummary>(group => {
|
||||
const first = group[0];
|
||||
const colors = new Set(group.map(row => row.color).filter(Boolean));
|
||||
const sizes = sortProductSizes(Array.from(new Set(group.map(row => row.size).filter(Boolean))));
|
||||
|
||||
return {
|
||||
family: first.family,
|
||||
skuCount: group.length,
|
||||
colorCount: colors.size,
|
||||
sizeCount: sizes.length,
|
||||
quantitySold: group.reduce((total, row) => total + row.quantitySold, 0),
|
||||
stock: group.reduce((total, row) => total + row.stock, 0),
|
||||
projectedDemand: group.reduce((total, row) => total + row.projectedDemand, 0),
|
||||
suggestedCutQuantity: group.reduce((total, row) => total + row.suggestedCutQuantity, 0),
|
||||
estimatedRolls: group.some(row => row.estimatedRolls === null)
|
||||
? null
|
||||
: group.reduce((total, row) => total + (row.estimatedRolls || 0), 0)
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.suggestedCutQuantity - a.suggestedCutQuantity);
|
||||
|
||||
const colorsWithNeed = new Set(needRows.map(row => row.color).filter(Boolean));
|
||||
const sizesWithNeed = new Set(needRows.map(row => row.size).filter(Boolean));
|
||||
|
||||
return {
|
||||
rows,
|
||||
needRows,
|
||||
familySummaries,
|
||||
summary: {
|
||||
skuCount: needRows.length,
|
||||
familiesWithNeed: familySummaries.length,
|
||||
colorsWithNeed: colorsWithNeed.size,
|
||||
sizesWithNeed: sizesWithNeed.size,
|
||||
totalSold: needRows.reduce((total, row) => total + row.quantitySold, 0),
|
||||
totalStock: needRows.reduce((total, row) => total + row.stock, 0),
|
||||
projectedDemand: needRows.reduce((total, row) => total + row.projectedDemand, 0),
|
||||
suggestedCutQuantity: needRows.reduce((total, row) => total + row.suggestedCutQuantity, 0),
|
||||
estimatedRolls: needRows.some(row => row.estimatedRolls === null)
|
||||
? null
|
||||
: needRows.reduce((total, row) => total + (row.estimatedRolls || 0), 0),
|
||||
rowsWithIssues: needRows.filter(row => row.issues.length > 0).length,
|
||||
openProductionQuantity: needRows.reduce((total, row) => total + row.openProductionQuantity, 0)
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -1,239 +0,0 @@
|
||||
import type { DashboardAnalytics, DateRange, OrderData } from '../types';
|
||||
import { filterOrdersByDateRange, getBaseProductName, getOrderItemRevenue, parseOrderDate } from './orders';
|
||||
import { formatDisplayName, removeTrailingSellerId } from '../displayFormatters';
|
||||
import { normalizeUnknownLabel } from '../chartUtils';
|
||||
|
||||
const COLORS = [
|
||||
'#25C2FF', '#18D6B5', '#A06BFF', '#FF6B8A', '#FFC247',
|
||||
'#70E083', '#6EA5FF', '#FF6EC7', '#FF8A63', '#22C7E6',
|
||||
'#B8E84D', '#FFA24A', '#B992FF', '#38E0C4', '#FFD166',
|
||||
'#FF7A9B', '#82B8FF', '#52DFA0', '#D28BFF', '#F7B23B'
|
||||
];
|
||||
|
||||
const globalColorMap: Record<string, string> = {};
|
||||
let globalColorIndex = 0;
|
||||
|
||||
const getProductColor = (name: string): string => {
|
||||
if (!globalColorMap[name]) {
|
||||
globalColorMap[name] = COLORS[globalColorIndex % COLORS.length];
|
||||
globalColorIndex += 1;
|
||||
}
|
||||
return globalColorMap[name];
|
||||
};
|
||||
|
||||
const formatSellerDisplayName = (value: string) => (
|
||||
normalizeUnknownLabel(formatDisplayName(removeTrailingSellerId(value)), 'Sem vendedor')
|
||||
);
|
||||
|
||||
export interface ChartProductMetric {
|
||||
name: string;
|
||||
id: string;
|
||||
value: number;
|
||||
fill: string;
|
||||
}
|
||||
|
||||
export interface SellerDateRevenueMetric extends ChartProductMetric {
|
||||
date: string;
|
||||
orders: number;
|
||||
}
|
||||
|
||||
export interface SellerHourRevenueMetric extends ChartProductMetric {
|
||||
hour: number;
|
||||
orders: number;
|
||||
}
|
||||
|
||||
export interface DashboardMetrics {
|
||||
totalRevenue: number;
|
||||
totalOrders: number;
|
||||
averageOrderValue: number;
|
||||
salesByProduct: ChartProductMetric[];
|
||||
revenueByProduct: ChartProductMetric[];
|
||||
revenueBySeller: ChartProductMetric[];
|
||||
ordersBySeller: ChartProductMetric[];
|
||||
sellerRevenueByDate: SellerDateRevenueMetric[];
|
||||
sellerRevenueByHour: SellerHourRevenueMetric[];
|
||||
}
|
||||
|
||||
export const applyDashboardColors = (metrics: DashboardAnalytics): DashboardMetrics => {
|
||||
const displayProducts = Array.from(new Set([
|
||||
...metrics.salesByProduct.map(product => product.name),
|
||||
...metrics.revenueByProduct.map(product => product.name),
|
||||
...(metrics.revenueBySeller || []).map(seller => seller.name),
|
||||
...(metrics.ordersBySeller || []).map(seller => seller.name),
|
||||
...(metrics.sellerRevenueByDate || []).map(seller => seller.name),
|
||||
...(metrics.sellerRevenueByHour || []).map(seller => seller.name)
|
||||
])).sort();
|
||||
const productColors = displayProducts.reduce<Record<string, string>>((colors, name) => {
|
||||
colors[name] = getProductColor(name);
|
||||
return colors;
|
||||
}, {});
|
||||
|
||||
return {
|
||||
totalRevenue: metrics.totalRevenue,
|
||||
totalOrders: metrics.totalOrders,
|
||||
averageOrderValue: metrics.averageOrderValue,
|
||||
salesByProduct: metrics.salesByProduct.map(product => ({
|
||||
...product,
|
||||
fill: productColors[product.name]
|
||||
})),
|
||||
revenueByProduct: metrics.revenueByProduct.map(product => ({
|
||||
...product,
|
||||
fill: productColors[product.name]
|
||||
})),
|
||||
revenueBySeller: (metrics.revenueBySeller || []).map(seller => ({
|
||||
...seller,
|
||||
name: formatSellerDisplayName(seller.name),
|
||||
fill: productColors[seller.name]
|
||||
})),
|
||||
ordersBySeller: (metrics.ordersBySeller || []).map(seller => ({
|
||||
...seller,
|
||||
name: formatSellerDisplayName(seller.name),
|
||||
fill: productColors[seller.name]
|
||||
})),
|
||||
sellerRevenueByDate: (metrics.sellerRevenueByDate || []).map(seller => ({
|
||||
...seller,
|
||||
name: formatSellerDisplayName(seller.name),
|
||||
orders: seller.orders || 0,
|
||||
fill: productColors[seller.name]
|
||||
})),
|
||||
sellerRevenueByHour: (metrics.sellerRevenueByHour || []).map(seller => ({
|
||||
...seller,
|
||||
name: formatSellerDisplayName(seller.name),
|
||||
orders: seller.orders || 0,
|
||||
fill: productColors[seller.name]
|
||||
}))
|
||||
};
|
||||
};
|
||||
|
||||
export const buildDashboardMetrics = (ordersData: OrderData[], dateRange: DateRange): DashboardMetrics => {
|
||||
const filteredData = filterOrdersByDateRange(ordersData, dateRange);
|
||||
let revenue = 0;
|
||||
let totalItems = 0;
|
||||
const productSalesMap: Record<string, number> = {};
|
||||
const productRevenueMap: Record<string, number> = {};
|
||||
const productNameIdMap: Record<string, string> = {};
|
||||
const sellerRevenueMap: Record<string, number> = {};
|
||||
const sellerRevenueByDateMap: Record<string, Record<string, number>> = {};
|
||||
const sellerRevenueByHourMap: Record<string, Record<number, number>> = {};
|
||||
const sellerOrderKeysByDateMap: Record<string, Record<string, Set<string>>> = {};
|
||||
const sellerOrderKeysByHourMap: Record<string, Record<number, Set<string>>> = {};
|
||||
const sellerOrderKeysMap: Record<string, Set<string>> = {};
|
||||
const sellerIdMap: Record<string, string> = {};
|
||||
|
||||
filteredData.forEach(order => {
|
||||
const itemRevenue = getOrderItemRevenue(order);
|
||||
const productName = getBaseProductName(order.Descricao_Produto);
|
||||
const sellerName = formatSellerDisplayName(order.nome_vendedor || '');
|
||||
const sellerId = order.id_vendedor || sellerName;
|
||||
const orderKey = order.ID_Pedido || `${order.Nome_Cliente}_${order.Data_Pedido}_${order.Valor_Pedido}`;
|
||||
|
||||
revenue += itemRevenue;
|
||||
totalItems += order.Quantidade;
|
||||
productNameIdMap[productName] = order.ID_Produto;
|
||||
productSalesMap[productName] = (productSalesMap[productName] || 0) + order.Quantidade;
|
||||
productRevenueMap[productName] = (productRevenueMap[productName] || 0) + itemRevenue;
|
||||
|
||||
if (sellerName) {
|
||||
const parsedOrderDate = parseOrderDate(order.Data_Pedido);
|
||||
const dateKey = Number.isNaN(parsedOrderDate.getTime())
|
||||
? order.Data_Pedido
|
||||
: parsedOrderDate.toISOString().slice(0, 10);
|
||||
const orderTimestamp = order.Recebido_Em ? new Date(order.Recebido_Em) : null;
|
||||
const orderHour = orderTimestamp && !Number.isNaN(orderTimestamp.getTime()) ? orderTimestamp.getHours() : null;
|
||||
|
||||
sellerIdMap[sellerName] = sellerId;
|
||||
sellerRevenueMap[sellerName] = (sellerRevenueMap[sellerName] || 0) + itemRevenue;
|
||||
if (!sellerRevenueByDateMap[sellerName]) sellerRevenueByDateMap[sellerName] = {};
|
||||
sellerRevenueByDateMap[sellerName][dateKey] = (sellerRevenueByDateMap[sellerName][dateKey] || 0) + itemRevenue;
|
||||
if (!sellerOrderKeysByDateMap[sellerName]) sellerOrderKeysByDateMap[sellerName] = {};
|
||||
if (!sellerOrderKeysByDateMap[sellerName][dateKey]) sellerOrderKeysByDateMap[sellerName][dateKey] = new Set();
|
||||
sellerOrderKeysByDateMap[sellerName][dateKey].add(orderKey);
|
||||
if (orderHour !== null) {
|
||||
if (!sellerRevenueByHourMap[sellerName]) sellerRevenueByHourMap[sellerName] = {};
|
||||
sellerRevenueByHourMap[sellerName][orderHour] = (sellerRevenueByHourMap[sellerName][orderHour] || 0) + itemRevenue;
|
||||
if (!sellerOrderKeysByHourMap[sellerName]) sellerOrderKeysByHourMap[sellerName] = {};
|
||||
if (!sellerOrderKeysByHourMap[sellerName][orderHour]) sellerOrderKeysByHourMap[sellerName][orderHour] = new Set();
|
||||
sellerOrderKeysByHourMap[sellerName][orderHour].add(orderKey);
|
||||
}
|
||||
if (!sellerOrderKeysMap[sellerName]) sellerOrderKeysMap[sellerName] = new Set();
|
||||
sellerOrderKeysMap[sellerName].add(orderKey);
|
||||
}
|
||||
});
|
||||
|
||||
const topSalesNames = Object.keys(productSalesMap).sort((a, b) => productSalesMap[b] - productSalesMap[a]).slice(0, 10);
|
||||
const topRevenueNames = Object.keys(productRevenueMap).sort((a, b) => productRevenueMap[b] - productRevenueMap[a]).slice(0, 10);
|
||||
const topSellerRevenueNames = Object.keys(sellerRevenueMap).sort((a, b) => sellerRevenueMap[b] - sellerRevenueMap[a]).slice(0, 10);
|
||||
const topSellerOrderNames = Object.keys(sellerOrderKeysMap).sort((a, b) => sellerOrderKeysMap[b].size - sellerOrderKeysMap[a].size).slice(0, 10);
|
||||
const displayProducts = Array.from(new Set([...topSalesNames, ...topRevenueNames])).sort();
|
||||
const productColors = displayProducts.reduce<Record<string, string>>((colors, name) => {
|
||||
colors[name] = getProductColor(name);
|
||||
return colors;
|
||||
}, {});
|
||||
|
||||
const salesByProduct = topSalesNames.map(name => ({
|
||||
name,
|
||||
id: productNameIdMap[name],
|
||||
value: productSalesMap[name],
|
||||
fill: productColors[name]
|
||||
}));
|
||||
|
||||
const revenueByProduct = topRevenueNames.map(name => ({
|
||||
name,
|
||||
id: productNameIdMap[name],
|
||||
value: productRevenueMap[name],
|
||||
fill: productColors[name]
|
||||
}));
|
||||
|
||||
const revenueBySeller = topSellerRevenueNames.map(name => ({
|
||||
name,
|
||||
id: sellerIdMap[name],
|
||||
value: sellerRevenueMap[name],
|
||||
fill: getProductColor(name)
|
||||
}));
|
||||
|
||||
const ordersBySeller = topSellerOrderNames.map(name => ({
|
||||
name,
|
||||
id: sellerIdMap[name],
|
||||
value: sellerOrderKeysMap[name].size,
|
||||
fill: getProductColor(name)
|
||||
}));
|
||||
|
||||
const sellerRevenueByDate = topSellerRevenueNames.flatMap(name => (
|
||||
Object.keys(sellerRevenueByDateMap[name] || {})
|
||||
.sort()
|
||||
.map(date => ({
|
||||
name,
|
||||
id: sellerIdMap[name],
|
||||
date,
|
||||
value: sellerRevenueByDateMap[name][date],
|
||||
orders: sellerOrderKeysByDateMap[name]?.[date]?.size || 0,
|
||||
fill: getProductColor(name)
|
||||
}))
|
||||
));
|
||||
|
||||
const sellerRevenueByHour = topSellerRevenueNames.flatMap(name => (
|
||||
Object.keys(sellerRevenueByHourMap[name] || {})
|
||||
.map(Number)
|
||||
.sort((a, b) => a - b)
|
||||
.map(hour => ({
|
||||
name,
|
||||
id: sellerIdMap[name],
|
||||
hour,
|
||||
value: sellerRevenueByHourMap[name][hour],
|
||||
orders: sellerOrderKeysByHourMap[name]?.[hour]?.size || 0,
|
||||
fill: getProductColor(name)
|
||||
}))
|
||||
));
|
||||
|
||||
return {
|
||||
totalRevenue: revenue,
|
||||
totalOrders: totalItems,
|
||||
averageOrderValue: revenue / (filteredData.length || 1),
|
||||
salesByProduct,
|
||||
revenueByProduct,
|
||||
revenueBySeller,
|
||||
ordersBySeller,
|
||||
sellerRevenueByDate,
|
||||
sellerRevenueByHour
|
||||
};
|
||||
};
|
||||
@@ -1,47 +0,0 @@
|
||||
import type { DateRange, OrderData } from '../types.ts';
|
||||
|
||||
const SIZE_SUFFIX_PATTERN = /\s+-\s+(?:(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\d{2})(?:\/(?:PP|P|M|G|GG|XG|XGG|EG|EGG|EXG|U|UNICO|ÚNICO|\d{2}))*)$/i;
|
||||
|
||||
export const parseOrderDate = (dateStr: string): Date => {
|
||||
if (!dateStr) return new Date(0);
|
||||
if (dateStr.includes('T')) return new Date(dateStr);
|
||||
const parts = dateStr.split(/[-/]/);
|
||||
if (parts.length === 3) {
|
||||
if (parts[0].length === 4) {
|
||||
return new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
|
||||
}
|
||||
return new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
|
||||
}
|
||||
const fallback = new Date(dateStr);
|
||||
return Number.isNaN(fallback.getTime()) ? new Date(0) : fallback;
|
||||
};
|
||||
|
||||
export const getBaseProductName = (description: string): string => {
|
||||
const productName = description.trim();
|
||||
if (productName.toLocaleUpperCase('pt-BR').startsWith('ETIQUETA')) {
|
||||
return productName;
|
||||
}
|
||||
|
||||
return productName.split(' TAMANHO')[0].replace(SIZE_SUFFIX_PATTERN, '').trim();
|
||||
};
|
||||
|
||||
export const getClientDisplayName = (order: OrderData): string => {
|
||||
return order.Nome_Cliente || 'Cliente Desconhecido';
|
||||
};
|
||||
|
||||
export const getOrderCustomerKey = (order: OrderData): string => {
|
||||
return order.Fone_Cliente || `name:${getClientDisplayName(order)}`;
|
||||
};
|
||||
|
||||
export const isOrderInDateRange = (order: OrderData, dateRange: DateRange): boolean => {
|
||||
const orderDate = parseOrderDate(order.Data_Pedido);
|
||||
return orderDate >= dateRange.start && orderDate <= dateRange.end;
|
||||
};
|
||||
|
||||
export const filterOrdersByDateRange = (orders: OrderData[], dateRange: DateRange): OrderData[] => {
|
||||
return orders.filter(order => isOrderInDateRange(order, dateRange));
|
||||
};
|
||||
|
||||
export const getOrderItemRevenue = (order: OrderData): number => {
|
||||
return order.Quantidade * order.Valor_Unitario;
|
||||
};
|
||||
@@ -1,117 +0,0 @@
|
||||
import type { DateRange, OrderData, StockData } from '../types';
|
||||
import { getBaseProductName, getOrderItemRevenue, isOrderInDateRange } from './orders';
|
||||
|
||||
export interface ProductSummary {
|
||||
id: string;
|
||||
name: string;
|
||||
totalSold: number;
|
||||
revenue: number;
|
||||
lastPrice: number;
|
||||
stock: number;
|
||||
}
|
||||
|
||||
export interface ProductDetailsMetrics {
|
||||
productInfo: {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
} | null;
|
||||
chartData: Array<{
|
||||
date: string;
|
||||
value: number;
|
||||
}>;
|
||||
totalSold: number;
|
||||
totalRevenue: number;
|
||||
}
|
||||
|
||||
export const buildProductsSummary = (
|
||||
ordersData: OrderData[],
|
||||
stockData: StockData[],
|
||||
dateRange: DateRange,
|
||||
searchTerm: string
|
||||
): ProductSummary[] => {
|
||||
const productMap: Record<string, ProductSummary> = {};
|
||||
|
||||
stockData.forEach(item => {
|
||||
productMap[item.produto_id] = {
|
||||
id: item.produto_id,
|
||||
name: item.nome,
|
||||
totalSold: 0,
|
||||
revenue: 0,
|
||||
lastPrice: 0,
|
||||
stock: item.saldo || 0
|
||||
};
|
||||
});
|
||||
|
||||
ordersData.forEach(order => {
|
||||
if (!isOrderInDateRange(order, dateRange)) return;
|
||||
|
||||
if (!productMap[order.ID_Produto]) {
|
||||
productMap[order.ID_Produto] = {
|
||||
id: order.ID_Produto,
|
||||
name: getBaseProductName(order.Descricao_Produto),
|
||||
totalSold: 0,
|
||||
revenue: 0,
|
||||
lastPrice: order.Valor_Unitario,
|
||||
stock: 0
|
||||
};
|
||||
}
|
||||
|
||||
if (productMap[order.ID_Produto].name === 'Unknown' || !productMap[order.ID_Produto].name) {
|
||||
productMap[order.ID_Produto].name = getBaseProductName(order.Descricao_Produto);
|
||||
}
|
||||
|
||||
productMap[order.ID_Produto].totalSold += order.Quantidade;
|
||||
productMap[order.ID_Produto].revenue += getOrderItemRevenue(order);
|
||||
productMap[order.ID_Produto].lastPrice = order.Valor_Unitario;
|
||||
});
|
||||
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
const products = Object.values(productMap);
|
||||
const filteredProducts = normalizedSearch
|
||||
? products.filter(product => product.name.toLowerCase().includes(normalizedSearch) || product.id.includes(searchTerm))
|
||||
: products;
|
||||
|
||||
return filteredProducts.sort((a, b) => b.totalSold - a.totalSold);
|
||||
};
|
||||
|
||||
export const buildProductDetailsMetrics = (
|
||||
ordersData: OrderData[],
|
||||
productId: string | undefined,
|
||||
dateRange: DateRange
|
||||
): ProductDetailsMetrics => {
|
||||
const productOrders = ordersData.filter(order => order.ID_Produto === productId);
|
||||
|
||||
if (productOrders.length === 0) {
|
||||
return { productInfo: null, chartData: [], totalSold: 0, totalRevenue: 0 };
|
||||
}
|
||||
|
||||
const productInfo = {
|
||||
id: productOrders[0].ID_Produto,
|
||||
name: getBaseProductName(productOrders[0].Descricao_Produto),
|
||||
price: productOrders[0].Valor_Unitario
|
||||
};
|
||||
|
||||
const salesByDate: Record<string, number> = {};
|
||||
let totalSold = 0;
|
||||
let totalRevenue = 0;
|
||||
|
||||
productOrders.forEach(order => {
|
||||
if (!isOrderInDateRange(order, dateRange)) return;
|
||||
|
||||
salesByDate[order.Data_Pedido] = (salesByDate[order.Data_Pedido] || 0) + order.Quantidade;
|
||||
totalSold += order.Quantidade;
|
||||
totalRevenue += getOrderItemRevenue(order);
|
||||
});
|
||||
|
||||
const chartData = Object.keys(salesByDate).map(date => ({
|
||||
date,
|
||||
value: salesByDate[date]
|
||||
})).sort((a, b) => {
|
||||
const [da, ma, ya] = a.date.split('-').map(Number);
|
||||
const [db, mb, yb] = b.date.split('-').map(Number);
|
||||
return new Date(ya, ma - 1, da).getTime() - new Date(yb, mb - 1, db).getTime();
|
||||
});
|
||||
|
||||
return { productInfo, chartData, totalSold, totalRevenue };
|
||||
};
|
||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -1,26 +0,0 @@
|
||||
type SkuEditParams = {
|
||||
sku: string;
|
||||
name?: string;
|
||||
color?: string;
|
||||
size?: string;
|
||||
};
|
||||
|
||||
export const buildSkuEditPath = ({ sku, name = '', color = '', size = '' }: SkuEditParams) => {
|
||||
const params = new URLSearchParams({ tab: 'products', sku });
|
||||
if (name) params.set('name', name);
|
||||
if (color) params.set('color', color);
|
||||
if (size) params.set('size', size);
|
||||
return `/registrations?${params.toString()}`;
|
||||
};
|
||||
|
||||
export const buildCuttingSkuConfigPath = ({ sku }: Pick<SkuEditParams, 'sku'>) => {
|
||||
const params = new URLSearchParams({ config: 'corrections', sku });
|
||||
return `/cutting?${params.toString()}`;
|
||||
};
|
||||
|
||||
export const buildConsumptionReferencePath = ({ sku, name = '', color = '' }: Omit<SkuEditParams, 'size'>) => {
|
||||
const params = new URLSearchParams({ tab: 'references', sku });
|
||||
if (name) params.set('name', name);
|
||||
if (color) params.set('color', color);
|
||||
return `/registrations?${params.toString()}`;
|
||||
};
|
||||
@@ -1,125 +0,0 @@
|
||||
import type { DateRange } from './types';
|
||||
|
||||
export type DateBucket = 'day' | 'week' | 'month';
|
||||
|
||||
const MS_PER_DAY = 24 * 60 * 60 * 1000;
|
||||
|
||||
export const getRangeDayCount = (dateRange: DateRange) => (
|
||||
Math.max(1, Math.ceil((dateRange.end.getTime() - dateRange.start.getTime()) / MS_PER_DAY) + 1)
|
||||
);
|
||||
|
||||
export const getAutoDateBucket = (dateRange: DateRange): DateBucket => {
|
||||
const days = getRangeDayCount(dateRange);
|
||||
if (days > 365) return 'month';
|
||||
if (days > 90) return 'week';
|
||||
return 'day';
|
||||
};
|
||||
|
||||
export const parseChartDate = (value: string): Date | null => {
|
||||
if (!value) return null;
|
||||
|
||||
const isoMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
||||
if (isoMatch) {
|
||||
const [, year, month, day] = isoMatch;
|
||||
return new Date(Number(year), Number(month) - 1, Number(day));
|
||||
}
|
||||
|
||||
const localMatch = value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
|
||||
if (localMatch) {
|
||||
const [, day, month, year] = localMatch;
|
||||
return new Date(Number(year), Number(month) - 1, Number(day));
|
||||
}
|
||||
|
||||
const dashedLocalMatch = value.match(/^(\d{2})-(\d{2})-(\d{4})$/);
|
||||
if (dashedLocalMatch) {
|
||||
const [, day, month, year] = dashedLocalMatch;
|
||||
return new Date(Number(year), Number(month) - 1, Number(day));
|
||||
}
|
||||
|
||||
const date = new Date(value);
|
||||
return Number.isNaN(date.getTime()) ? null : date;
|
||||
};
|
||||
|
||||
export const formatChartDateKey = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const startOfWeek = (date: Date) => {
|
||||
const nextDate = new Date(date);
|
||||
const day = nextDate.getDay();
|
||||
const offset = day === 0 ? -6 : 1 - day;
|
||||
nextDate.setDate(nextDate.getDate() + offset);
|
||||
nextDate.setHours(0, 0, 0, 0);
|
||||
return nextDate;
|
||||
};
|
||||
|
||||
export const getDateBucketKey = (value: string, bucket: DateBucket) => {
|
||||
const date = parseChartDate(value);
|
||||
if (!date) return value;
|
||||
if (bucket === 'day') return formatChartDateKey(date);
|
||||
if (bucket === 'week') return formatChartDateKey(startOfWeek(date));
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
export const formatDateBucketLabel = (value: string, bucket: DateBucket) => {
|
||||
if (bucket === 'month') {
|
||||
const match = value.match(/^(\d{4})-(\d{2})$/);
|
||||
if (!match) return value;
|
||||
const [, year, month] = match;
|
||||
return new Intl.DateTimeFormat('pt-BR', { month: 'short', year: '2-digit' }).format(new Date(Number(year), Number(month) - 1, 1));
|
||||
}
|
||||
|
||||
const date = parseChartDate(value);
|
||||
if (!date) return value;
|
||||
if (bucket === 'week') {
|
||||
const endDate = new Date(date);
|
||||
endDate.setDate(endDate.getDate() + 6);
|
||||
const formatter = new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit' });
|
||||
return `${formatter.format(date)}-${formatter.format(endDate)}`;
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit' }).format(date);
|
||||
};
|
||||
|
||||
export const formatDateBucketLongLabel = (value: string, bucket: DateBucket) => {
|
||||
if (bucket === 'month') {
|
||||
const match = value.match(/^(\d{4})-(\d{2})$/);
|
||||
if (!match) return value;
|
||||
const [, year, month] = match;
|
||||
return new Intl.DateTimeFormat('pt-BR', { month: 'long', year: 'numeric' }).format(new Date(Number(year), Number(month) - 1, 1));
|
||||
}
|
||||
|
||||
const date = parseChartDate(value);
|
||||
if (!date) return value;
|
||||
if (bucket === 'week') {
|
||||
const endDate = new Date(date);
|
||||
endDate.setDate(endDate.getDate() + 6);
|
||||
const formatter = new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
return `${formatter.format(date)} - ${formatter.format(endDate)}`;
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
|
||||
};
|
||||
|
||||
export const getMovingAverageWindow = (bucket: DateBucket) => {
|
||||
if (bucket === 'day') return 7;
|
||||
if (bucket === 'week') return 4;
|
||||
return 3;
|
||||
};
|
||||
|
||||
export const averageRecentValues = (values: number[], endIndex: number, windowSize: number) => {
|
||||
const startIndex = Math.max(0, endIndex - windowSize + 1);
|
||||
const windowValues = values.slice(startIndex, endIndex + 1);
|
||||
if (!windowValues.length) return 0;
|
||||
return windowValues.reduce((total, value) => total + value, 0) / windowValues.length;
|
||||
};
|
||||
|
||||
export const normalizeUnknownLabel = (value: string, fallback: string) => {
|
||||
const normalized = String(value || '').replace(/\s+/g, ' ').trim();
|
||||
if (!normalized) return fallback;
|
||||
if (/^(0|null|undefined|unknown|n\/a|-|sem nome)$/i.test(normalized)) return fallback;
|
||||
return normalized;
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
type BackButtonProps = {
|
||||
fallbackTo: string;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
const BackButton = ({ fallbackTo, label = 'Voltar' }: BackButtonProps) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const handleClick = () => {
|
||||
if (location.key !== 'default' && window.history.length > 1) {
|
||||
navigate(-1);
|
||||
return;
|
||||
}
|
||||
|
||||
navigate(fallbackTo, { replace: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
className="inline-flex w-fit cursor-pointer items-center text-sm font-bold text-zinc-400 dark:text-dark-muted transition-colors hover:text-zinc-900 dark:hover:text-dark-text"
|
||||
>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackButton;
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Calendar, RefreshCw, ChevronDown } from 'lucide-react';
|
||||
import type { DateRange } from '../types';
|
||||
import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, rangeForLastDays, rangeForPreviousDay, startOfLocalDay } from '../dateRanges';
|
||||
|
||||
interface DateRangePickerProps {
|
||||
dateRange: DateRange;
|
||||
@@ -12,15 +11,15 @@ interface DateRangePickerProps {
|
||||
}
|
||||
|
||||
const PRESETS = [
|
||||
{ label: 'Hoje', getRange: () => rangeForDay(new Date()) },
|
||||
{ label: 'Ontem', getRange: () => rangeForPreviousDay() },
|
||||
{ label: 'Últimos 7 dias', getRange: () => rangeForLastDays(7) },
|
||||
{ label: 'Últimos 30 dias', getRange: () => rangeForLastDays(30) },
|
||||
{ label: 'Este Mês', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(end.getFullYear(), end.getMonth(), 1)); return { start, end }; } },
|
||||
{ label: 'Hoje', getRange: () => { const d = new Date(); d.setHours(0,0,0,0); return { start: d, end: new Date() }; } },
|
||||
{ label: 'Ontem', getRange: () => { const d = new Date(); d.setDate(d.getDate() - 1); d.setHours(0,0,0,0); const end = new Date(d); end.setHours(23,59,59,999); return { start: d, end }; } },
|
||||
{ label: 'Últimos 7 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); start.setHours(0,0,0,0); return { start, end }; } },
|
||||
{ label: 'Últimos 30 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 30); start.setHours(0,0,0,0); return { start, end }; } },
|
||||
{ label: 'Este Mês', getRange: () => { const end = new Date(); const start = new Date(end.getFullYear(), end.getMonth(), 1); return { start, end }; } },
|
||||
{ label: 'Mês Passado', getRange: () => { const d = new Date(); const start = new Date(d.getFullYear(), d.getMonth() - 1, 1); const end = new Date(d.getFullYear(), d.getMonth(), 0, 23, 59, 59, 999); return { start, end }; } },
|
||||
{ label: 'Últimos 90 dias', getRange: () => rangeForLastDays(90) },
|
||||
{ label: 'Este Ano', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(end.getFullYear(), 0, 1)); return { start, end }; } },
|
||||
{ label: 'Todo o Período', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(2000, 0, 1)); return { start, end }; } },
|
||||
{ label: 'Últimos 90 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 90); start.setHours(0,0,0,0); return { start, end }; } },
|
||||
{ label: 'Este Ano', getRange: () => { const end = new Date(); const start = new Date(end.getFullYear(), 0, 1); return { start, end }; } },
|
||||
{ label: 'Todo o Período', getRange: () => { const end = new Date(); const start = new Date(2000, 0, 1); return { start, end }; } },
|
||||
];
|
||||
|
||||
const REFRESH_OPTIONS = [
|
||||
@@ -32,53 +31,43 @@ const REFRESH_OPTIONS = [
|
||||
{ label: '5m', value: 300000 },
|
||||
];
|
||||
|
||||
const getRangeKey = (range: DateRange) => `${formatDateParam(range.start)}:${formatDateParam(range.end)}`;
|
||||
|
||||
const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange, refreshInterval, setRefreshInterval, onManualRefresh }) => {
|
||||
const [isPresetOpen, setIsPresetOpen] = useState(false);
|
||||
const [customDraft, setCustomDraft] = useState(() => ({
|
||||
appliedKey: getRangeKey(dateRange),
|
||||
range: dateRange
|
||||
}));
|
||||
const startRef = useRef<HTMLInputElement>(null);
|
||||
const endRef = useRef<HTMLInputElement>(null);
|
||||
const appliedRangeKey = getRangeKey(dateRange);
|
||||
const draftRange = customDraft.appliedKey === appliedRangeKey ? customDraft.range : dateRange;
|
||||
|
||||
const formatDisplayDate = (date: Date) => {
|
||||
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
const formatShortDate = (date: Date) => {
|
||||
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
|
||||
};
|
||||
|
||||
const formatDateForInput = (date: Date) => {
|
||||
return formatDateParam(date);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const parseLocalDate = (value: string) => {
|
||||
if (!value) return null;
|
||||
const [year, month, day] = value.split('-');
|
||||
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
|
||||
};
|
||||
|
||||
const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newStart = parseLocalDateInput(e.target.value);
|
||||
const newStart = parseLocalDate(e.target.value);
|
||||
if (newStart && !isNaN(newStart.getTime())) {
|
||||
const start = startOfLocalDay(newStart);
|
||||
const end = draftRange.end < start ? endOfLocalDay(start) : draftRange.end;
|
||||
setCustomDraft({ appliedKey: appliedRangeKey, range: { start, end } });
|
||||
onChange({ ...dateRange, start: newStart });
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newEnd = parseLocalDateInput(e.target.value);
|
||||
const newEnd = parseLocalDate(e.target.value);
|
||||
if (newEnd && !isNaN(newEnd.getTime())) {
|
||||
const end = endOfLocalDay(newEnd);
|
||||
const start = draftRange.start > end ? startOfLocalDay(end) : draftRange.start;
|
||||
setCustomDraft({ appliedKey: appliedRangeKey, range: { start, end } });
|
||||
newEnd.setHours(23, 59, 59, 999);
|
||||
onChange({ ...dateRange, end: newEnd });
|
||||
}
|
||||
};
|
||||
|
||||
const draftRangeKey = getRangeKey(draftRange);
|
||||
const isDraftApplied = draftRangeKey === appliedRangeKey;
|
||||
|
||||
const handleApplyCustomRange = () => {
|
||||
onChange(draftRange);
|
||||
setIsPresetOpen(false);
|
||||
};
|
||||
|
||||
const openPicker = (ref: React.RefObject<HTMLInputElement | null>) => {
|
||||
if (ref.current) {
|
||||
try {
|
||||
@@ -87,7 +76,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
|
||||
} else {
|
||||
ref.current.focus();
|
||||
}
|
||||
} catch {
|
||||
} catch (e) {
|
||||
ref.current.focus();
|
||||
}
|
||||
}
|
||||
@@ -102,7 +91,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
|
||||
className="flex items-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
|
||||
>
|
||||
<Calendar size={16} className="text-dark-muted shrink-0" />
|
||||
<span>{formatDisplayDate(dateRange.start)} - {formatDisplayDate(dateRange.end)}</span>
|
||||
<span>{formatShortDate(dateRange.start)} - {formatShortDate(dateRange.end)}</span>
|
||||
<ChevronDown size={14} className="text-dark-muted ml-1" />
|
||||
</button>
|
||||
|
||||
@@ -119,11 +108,11 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
|
||||
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
|
||||
onClick={() => openPicker(startRef)}
|
||||
>
|
||||
<span className="w-full text-center">{formatDisplayDate(draftRange.start)}</span>
|
||||
<span className="w-full text-center">{formatShortDate(dateRange.start)}</span>
|
||||
<input
|
||||
ref={startRef}
|
||||
type="date"
|
||||
value={formatDateForInput(draftRange.start)}
|
||||
value={formatDateForInput(dateRange.start)}
|
||||
onChange={handleStartChange}
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
@@ -135,24 +124,16 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
|
||||
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
|
||||
onClick={() => openPicker(endRef)}
|
||||
>
|
||||
<span className="w-full text-center">{formatDisplayDate(draftRange.end)}</span>
|
||||
<span className="w-full text-center">{formatShortDate(dateRange.end)}</span>
|
||||
<input
|
||||
ref={endRef}
|
||||
type="date"
|
||||
value={formatDateForInput(draftRange.end)}
|
||||
value={formatDateForInput(dateRange.end)}
|
||||
onChange={handleEndChange}
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleApplyCustomRange}
|
||||
disabled={isDraftApplied}
|
||||
className="mt-1 inline-flex h-8 w-full items-center justify-center rounded-lg bg-brand-primary px-3 text-xs font-bold text-white transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:bg-dark-input disabled:text-dark-muted cursor-pointer"
|
||||
>
|
||||
Aplicar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span className="px-4 text-xs font-bold text-dark-muted uppercase tracking-widest mb-1 block">Atalhos</span>
|
||||
@@ -160,9 +141,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
|
||||
<button
|
||||
key={preset.label}
|
||||
onClick={() => {
|
||||
const nextRange = preset.getRange();
|
||||
setCustomDraft({ appliedKey: getRangeKey(nextRange), range: nextRange });
|
||||
onChange(nextRange);
|
||||
onChange(preset.getRange());
|
||||
setIsPresetOpen(false);
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-sm text-dark-muted hover:text-dark-text hover:bg-dark-input transition-colors cursor-pointer"
|
||||
@@ -204,4 +183,4 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePicker;
|
||||
export default DateRangePicker;
|
||||
@@ -1,21 +1,14 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Outlet, Link, useLocation } from 'react-router-dom';
|
||||
import { LayoutDashboard, Users, BarChart3, ChevronLeft, ChevronRight, Package, LogOut, Megaphone, Grid3X3, Shield, Moon, Sun, Tags, Boxes, ClipboardList } from 'lucide-react';
|
||||
import { LayoutDashboard, Users, BarChart3, ChevronLeft, ChevronRight, Package, Loader2, LogOut } from 'lucide-react';
|
||||
import type { DateRange, OrderData } from '../types';
|
||||
import { isSuperAdmin, logout } from '../dataService';
|
||||
import { rangeForLastDays } from '../dateRanges';
|
||||
|
||||
const emptyOrdersData: OrderData[] = [];
|
||||
type ThemeMode = 'dark' | 'offwhite';
|
||||
import { fetchData, logout } from '../dataService';
|
||||
|
||||
const Layout = () => {
|
||||
const location = useLocation();
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
|
||||
return localStorage.getItem('graph_sidebar_collapsed') === 'true';
|
||||
});
|
||||
const [themeMode, setThemeMode] = useState<ThemeMode>(() => {
|
||||
return localStorage.getItem('nexstar_theme') === 'offwhite' ? 'offwhite' : 'dark';
|
||||
});
|
||||
|
||||
const [dateRange, setDateRange] = useState<DateRange>(() => {
|
||||
const saved = localStorage.getItem('nexstar_date_range');
|
||||
@@ -25,19 +18,39 @@ const Layout = () => {
|
||||
return { start: new Date(parsed.start), end: new Date(parsed.end) };
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
return rangeForLastDays(30);
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setMonth(start.getMonth() - 1);
|
||||
return { start, end };
|
||||
});
|
||||
|
||||
const [ordersData, setOrdersData] = useState<OrderData[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [refreshInterval, setRefreshInterval] = useState<number>(() => {
|
||||
const saved = localStorage.getItem('nexstar_refresh_interval');
|
||||
return saved ? Number(saved) : 0;
|
||||
});
|
||||
|
||||
const loadData = async (showLoading = false) => {
|
||||
if (showLoading) setIsLoading(true);
|
||||
const data = await fetchData();
|
||||
setOrdersData(data);
|
||||
if (showLoading) setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.dataset.theme = themeMode;
|
||||
localStorage.setItem('nexstar_theme', themeMode);
|
||||
}, [themeMode]);
|
||||
loadData(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (refreshInterval === 0) return;
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
loadData(false);
|
||||
}, refreshInterval);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [refreshInterval]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('nexstar_refresh_interval', refreshInterval.toString());
|
||||
@@ -55,47 +68,20 @@ const Layout = () => {
|
||||
setIsSidebarCollapsed(newState);
|
||||
localStorage.setItem('graph_sidebar_collapsed', String(newState));
|
||||
};
|
||||
const toggleTheme = () => {
|
||||
setThemeMode(current => current === 'dark' ? 'offwhite' : 'dark');
|
||||
};
|
||||
|
||||
const adminNavigation = isSuperAdmin()
|
||||
? [{ name: 'Usuários', href: '/admin/users', icon: Shield }]
|
||||
: [];
|
||||
const navigationSections = [
|
||||
{
|
||||
label: 'Painel',
|
||||
items: [
|
||||
{ name: 'Dashboard', href: '/graph', icon: LayoutDashboard },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Operação',
|
||||
items: [
|
||||
{ name: 'Produtos', href: '/products', icon: Package },
|
||||
{ name: 'Dados Pendentes', href: '/planning-issues', icon: ClipboardList },
|
||||
{ name: 'Cadastros', href: '/registrations', icon: Tags },
|
||||
{ name: 'Suprimentos', href: '/supplies', icon: Boxes },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Comercial',
|
||||
items: [
|
||||
{ name: 'Clientes', href: '/clients', icon: Users },
|
||||
{ name: 'RFV', href: '/rfm', icon: Grid3X3 },
|
||||
{ name: 'Campanhas', href: '/campaigns', icon: Megaphone },
|
||||
],
|
||||
},
|
||||
...(adminNavigation.length ? [{ label: 'Super admin', items: adminNavigation }] : []),
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '/graph', icon: LayoutDashboard },
|
||||
{ name: 'Produtos', href: '/products', icon: Package },
|
||||
{ name: 'Clientes', href: '/clients', icon: Users },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="app-shell flex h-screen text-dark-text overflow-hidden">
|
||||
<div className="flex h-screen bg-dark-bg text-dark-text overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<aside className={`bg-dark-sidebar border-r border-dark-border flex flex-col transition-all duration-300 ${isSidebarCollapsed ? 'w-20' : 'w-64'}`}>
|
||||
<div className={`h-20 px-6 border-b border-dark-border flex items-center ${isSidebarCollapsed ? 'justify-center' : 'justify-between'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="rounded-lg border border-brand-primary/25 bg-brand-primary/15 p-1.5 text-brand-primary shadow-sm shadow-brand-primary/10">
|
||||
<div className={`p-1.5 bg-brand-primary/20 rounded-lg text-brand-primary`}>
|
||||
<BarChart3 className="w-6 h-6" />
|
||||
</div>
|
||||
{!isSidebarCollapsed && <span className="text-xl font-bold text-dark-text">Nexstar</span>}
|
||||
@@ -115,41 +101,24 @@ const Layout = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<nav className="flex-1 space-y-5 overflow-y-auto px-3 py-4">
|
||||
{navigationSections.map((section) => (
|
||||
<div
|
||||
key={section.label}
|
||||
className={`space-y-1.5 ${
|
||||
isSidebarCollapsed ? 'border-t border-dark-border pt-5 first:border-t-0 first:pt-0' : ''
|
||||
}`}
|
||||
>
|
||||
{!isSidebarCollapsed && (
|
||||
<div className="px-3 pb-1 text-[11px] font-bold uppercase tracking-widest text-dark-muted">
|
||||
{section.label}
|
||||
</div>
|
||||
)}
|
||||
{section.items.map((item) => {
|
||||
const isActive = location.pathname === item.href || (item.href !== '/graph' && location.pathname.startsWith(item.href));
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={`group flex min-h-11 items-center rounded-lg px-3 py-2.5 text-sm transition-all ${
|
||||
isSidebarCollapsed ? 'justify-center' : 'gap-3'
|
||||
} ${
|
||||
isActive
|
||||
? 'bg-brand-primary/12 text-brand-primary font-semibold shadow-sm shadow-brand-primary/10 ring-1 ring-brand-primary/15'
|
||||
: 'text-dark-muted hover:bg-dark-input/70 hover:text-dark-text'
|
||||
}`}
|
||||
title={isSidebarCollapsed ? item.name : undefined}
|
||||
>
|
||||
<item.icon className="h-4.5 w-4.5 shrink-0" />
|
||||
{!isSidebarCollapsed && <span className="truncate font-medium">{item.name}</span>}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
<nav className="flex-1 p-4 space-y-2 overflow-y-auto">
|
||||
{navigation.map((item) => {
|
||||
const isActive = location.pathname === item.href || (item.href !== '/graph' && location.pathname.startsWith(item.href));
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={`flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${
|
||||
isActive
|
||||
? 'bg-brand-primary/10 text-brand-primary font-semibold shadow-md shadow-brand-primary/5'
|
||||
: 'text-dark-muted hover:bg-dark-card hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
<item.icon className="w-5 h-5 shrink-0" />
|
||||
{!isSidebarCollapsed && <span className="font-medium">{item.name}</span>}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-dark-border">
|
||||
@@ -166,22 +135,19 @@ const Layout = () => {
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex flex-col h-screen overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="h-20 bg-dark-header border-b border-dark-border flex items-center justify-between px-8 shrink-0">
|
||||
<header className="h-20 bg-dark-header border-b border-dark-border flex items-center px-8 shrink-0">
|
||||
<h2 className="text-xl font-bold text-dark-text">Painel de Análise</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTheme}
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-transparent bg-transparent text-dark-text transition-colors hover:border-dark-border hover:bg-dark-input hover:text-brand-primary cursor-pointer"
|
||||
title={themeMode === 'dark' ? 'Usar modo off-white' : 'Usar modo escuro'}
|
||||
aria-label={themeMode === 'dark' ? 'Usar modo off-white' : 'Usar modo escuro'}
|
||||
>
|
||||
{themeMode === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="app-content flex-1 overflow-y-auto p-8 relative">
|
||||
<Outlet context={{ dateRange, setDateRange, ordersData: emptyOrdersData, isDataLoading: false, refreshInterval, setRefreshInterval, themeMode }} />
|
||||
<div className="flex-1 overflow-y-auto p-8 relative">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Loader2 className="w-8 h-8 text-brand-primary animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<Outlet context={{ dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData }} />
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,138 +0,0 @@
|
||||
import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
|
||||
|
||||
type PaginationControlsProps = {
|
||||
totalItems: number;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
pageSize: number;
|
||||
pageSizeOptions: number[];
|
||||
itemLabel: string;
|
||||
pageSizeLabel: string;
|
||||
startIndex: number;
|
||||
endIndex: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onPageSizeChange: (pageSize: number) => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const clampPage = (page: number, totalPages: number) => {
|
||||
if (!Number.isFinite(page)) return 1;
|
||||
return Math.min(Math.max(1, Math.trunc(page)), Math.max(1, totalPages));
|
||||
};
|
||||
|
||||
const PaginationControls = ({
|
||||
totalItems,
|
||||
currentPage,
|
||||
totalPages,
|
||||
pageSize,
|
||||
pageSizeOptions,
|
||||
itemLabel,
|
||||
pageSizeLabel,
|
||||
startIndex,
|
||||
endIndex,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
className = 'px-6 py-4 border-t border-zinc-100 dark:border-dark-border'
|
||||
}: PaginationControlsProps) => {
|
||||
const safeTotalPages = Math.max(1, totalPages);
|
||||
const safeCurrentPage = clampPage(currentPage, safeTotalPages);
|
||||
const isFirstPage = safeCurrentPage <= 1;
|
||||
const isLastPage = safeCurrentPage >= safeTotalPages || totalItems === 0;
|
||||
|
||||
const goToPage = (page: number) => {
|
||||
onPageChange(clampPage(page, safeTotalPages));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${className} flex flex-col items-center justify-between gap-4 lg:flex-row`}>
|
||||
<div className="flex flex-wrap items-center justify-center gap-2 text-sm text-zinc-500 dark:text-dark-muted">
|
||||
<span>Mostrar</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(event) => onPageSizeChange(Number(event.target.value))}
|
||||
className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
|
||||
>
|
||||
{pageSizeOptions.map(option => (
|
||||
<option key={option} value={option}>{option}</option>
|
||||
))}
|
||||
</select>
|
||||
<span>{pageSizeLabel}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 text-sm">
|
||||
<span className="text-center text-zinc-500 dark:text-dark-muted">
|
||||
Mostrando {totalItems > 0 ? startIndex + 1 : 0} a {endIndex} de {totalItems} {itemLabel}
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goToPage(1)}
|
||||
disabled={isFirstPage || totalItems === 0}
|
||||
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
|
||||
aria-label="Primeira página"
|
||||
title="Primeira página"
|
||||
>
|
||||
<ChevronsLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goToPage(safeCurrentPage - 1)}
|
||||
disabled={isFirstPage || totalItems === 0}
|
||||
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
|
||||
aria-label="Página anterior"
|
||||
title="Página anterior"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-1 text-xs font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
<span>Página</span>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
value={safeCurrentPage}
|
||||
onFocus={(event) => event.currentTarget.select()}
|
||||
onChange={(event) => {
|
||||
const nextPage = event.target.value.replace(/\D/g, '');
|
||||
if (!nextPage) return;
|
||||
goToPage(Number(nextPage));
|
||||
}}
|
||||
className="h-8 w-16 rounded-lg border border-dark-border bg-dark-card px-2 text-center text-sm font-bold text-dark-text focus:outline-none focus:border-brand-primary"
|
||||
aria-label="Ir para página"
|
||||
/>
|
||||
<span>de {safeTotalPages}</span>
|
||||
</label>
|
||||
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goToPage(safeCurrentPage + 1)}
|
||||
disabled={isLastPage}
|
||||
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
|
||||
aria-label="Próxima página"
|
||||
title="Próxima página"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goToPage(safeTotalPages)}
|
||||
disabled={isLastPage}
|
||||
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
|
||||
aria-label="Última página"
|
||||
title="Última página"
|
||||
>
|
||||
<ChevronsRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaginationControls;
|
||||
@@ -1,40 +0,0 @@
|
||||
import { formatColorLabel } from '../displayFormatters';
|
||||
import { getProductColor } from '../productColors';
|
||||
|
||||
export const ProductColorSwatch = ({
|
||||
label,
|
||||
className = 'h-2.5 w-2.5'
|
||||
}: {
|
||||
label: string;
|
||||
className?: string;
|
||||
}) => (
|
||||
<span
|
||||
className={`${className} shrink-0 rounded-full`}
|
||||
style={{
|
||||
backgroundColor: getProductColor(label),
|
||||
boxShadow: '0 0 0 1px var(--color-dark-card), 0 0 0 2px var(--color-dark-border)'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const ProductColorBadge = ({
|
||||
label,
|
||||
emptyLabel = 'Sem cor',
|
||||
className = ''
|
||||
}: {
|
||||
label?: string;
|
||||
emptyLabel?: string;
|
||||
className?: string;
|
||||
}) => {
|
||||
const normalizedLabel = label?.trim();
|
||||
const displayLabel = normalizedLabel ? formatColorLabel(normalizedLabel) : emptyLabel;
|
||||
|
||||
return (
|
||||
<span className={`inline-flex max-w-full items-center gap-2 rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-text ${className}`}>
|
||||
<ProductColorSwatch label={displayLabel} className="h-2 w-2" />
|
||||
<span className="truncate">{displayLabel}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductColorBadge;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { getProductTypeConfig, type ProductTypeKey } from '../productClassification';
|
||||
|
||||
type ProductTypeBadgeProps = {
|
||||
type: ProductTypeKey;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const ProductTypeBadge = ({ type, className = '' }: ProductTypeBadgeProps) => {
|
||||
const config = getProductTypeConfig(type);
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[10px] font-bold ${config.badgeClassName} ${className}`}
|
||||
title={config.description}
|
||||
>
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductTypeBadge;
|
||||
@@ -1,18 +0,0 @@
|
||||
type RefreshStatusProps = {
|
||||
isRefreshing: boolean;
|
||||
label?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const RefreshStatus = ({ isRefreshing, label = 'Atualizando dados', className = '' }: RefreshStatusProps) => {
|
||||
if (!isRefreshing) return null;
|
||||
|
||||
return (
|
||||
<div className={`h-1 overflow-hidden rounded-full border border-dark-border bg-dark-input/70 ${className}`} role="status" aria-live="polite">
|
||||
<span className="sr-only">{label}</span>
|
||||
<span className="refresh-progress block h-full w-1/3 rounded-full bg-brand-primary" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RefreshStatus;
|
||||
@@ -1,201 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { RotateCcw, Save, X } from 'lucide-react';
|
||||
import { CUT_FAMILY_RULES, type CutFamilyKey } from '../analytics/cutting';
|
||||
import { editableProductTypeOptions, getProductTypeConfig, resolveProductType, type ProductTypeKey } from '../productClassification';
|
||||
import type { CutProductOverride } from '../types';
|
||||
import ProductTypeBadge from './ProductTypeBadge';
|
||||
|
||||
type SkuPlanningModalProduct = {
|
||||
id: string;
|
||||
name: string;
|
||||
color?: string;
|
||||
size?: string;
|
||||
};
|
||||
|
||||
type SkuPlanningModalProps = {
|
||||
product: SkuPlanningModalProduct;
|
||||
override?: CutProductOverride;
|
||||
isSaving?: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (override: CutProductOverride | null) => void | Promise<void>;
|
||||
};
|
||||
|
||||
const familyOptions: Array<{ value: CutFamilyKey | ''; label: string }> = [
|
||||
{ value: '', label: 'Auto' },
|
||||
...CUT_FAMILY_RULES.map(rule => ({ value: rule.key, label: `${rule.materialLabel} · ${rule.label}` })),
|
||||
{ value: 'OUTROS', label: 'Sem regra' }
|
||||
];
|
||||
|
||||
const buildOverride = ({
|
||||
familyKey,
|
||||
color,
|
||||
size,
|
||||
productType,
|
||||
planningNotes
|
||||
}: Required<Pick<CutProductOverride, 'color' | 'size' | 'planningNotes'>> & {
|
||||
familyKey: CutFamilyKey | '';
|
||||
productType: ProductTypeKey | '';
|
||||
}): CutProductOverride | null => {
|
||||
const next: CutProductOverride = {
|
||||
familyKey,
|
||||
color: color.trim(),
|
||||
size: size.trim().toUpperCase(),
|
||||
productType,
|
||||
planningNotes: planningNotes.trim()
|
||||
};
|
||||
|
||||
if (!next.familyKey && !next.color && !next.size && !next.productType && !next.planningNotes) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return next;
|
||||
};
|
||||
|
||||
const SkuPlanningModal = ({ product, override, isSaving = false, onClose, onSave }: SkuPlanningModalProps) => {
|
||||
const [familyKey, setFamilyKey] = useState<CutFamilyKey | ''>(override?.familyKey || '');
|
||||
const [color, setColor] = useState(override?.color || '');
|
||||
const [size, setSize] = useState(override?.size || '');
|
||||
const [productType, setProductType] = useState<ProductTypeKey | ''>(override?.productType || '');
|
||||
const [planningNotes, setPlanningNotes] = useState(override?.planningNotes || '');
|
||||
|
||||
const resolvedType = resolveProductType(product.name, { productType });
|
||||
const resolvedConfig = getProductTypeConfig(resolvedType);
|
||||
|
||||
const handleSave = () => {
|
||||
void onSave(buildOverride({ familyKey, color, size, productType, planningNotes }));
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
void onSave(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex h-dvh items-center justify-center overflow-y-auto bg-zinc-950/80 p-4 backdrop-blur-md dark:bg-black/75"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={`Editar planejamento do SKU ${product.id}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-2xl rounded-2xl border border-dark-border bg-dark-card shadow-2xl"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4 border-b border-dark-border p-5">
|
||||
<div className="min-w-0">
|
||||
<div className="font-mono text-[10px] font-bold uppercase tracking-widest text-dark-muted">SKU #{product.id}</div>
|
||||
<h2 className="mt-1 truncate text-lg font-bold text-dark-text" title={product.name}>{product.name}</h2>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||||
<ProductTypeBadge type={resolvedType} />
|
||||
<span className="text-xs font-semibold text-dark-muted">{resolvedConfig.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-dark-text cursor-pointer"
|
||||
title="Fechar"
|
||||
aria-label="Fechar"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 p-5 md:grid-cols-2">
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-dark-muted">Tipo de produto</span>
|
||||
<select
|
||||
value={productType}
|
||||
onChange={(event) => setProductType(event.target.value as ProductTypeKey | '')}
|
||||
className="h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none transition-colors focus:border-brand-primary cursor-pointer"
|
||||
>
|
||||
<option value="">Auto ({getProductTypeConfig(resolveProductType(product.name)).label})</option>
|
||||
{editableProductTypeOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-dark-muted">Família de corte</span>
|
||||
<select
|
||||
value={familyKey}
|
||||
onChange={(event) => setFamilyKey(event.target.value as CutFamilyKey | '')}
|
||||
className="h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none transition-colors focus:border-brand-primary cursor-pointer"
|
||||
>
|
||||
{familyOptions.map(option => (
|
||||
<option key={option.value || 'auto'} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-dark-muted">Cor</span>
|
||||
<input
|
||||
type="text"
|
||||
value={color}
|
||||
onChange={(event) => setColor(event.target.value)}
|
||||
placeholder={product.color || 'Auto pelo nome'}
|
||||
className="h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none transition-colors placeholder:text-dark-muted focus:border-brand-primary"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-dark-muted">Tamanho</span>
|
||||
<input
|
||||
type="text"
|
||||
value={size}
|
||||
onChange={(event) => setSize(event.target.value)}
|
||||
placeholder={product.size || 'Auto pelo nome'}
|
||||
className="h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold uppercase text-dark-text outline-none transition-colors placeholder:normal-case placeholder:text-dark-muted focus:border-brand-primary"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2 md:col-span-2">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-dark-muted">Notas de planejamento</span>
|
||||
<textarea
|
||||
value={planningNotes}
|
||||
onChange={(event) => setPlanningNotes(event.target.value)}
|
||||
rows={3}
|
||||
placeholder="Ex.: revisar consumo, material usado, regra temporária..."
|
||||
className="w-full resize-none rounded-lg border border-dark-border bg-dark-input px-3 py-2 text-sm font-semibold text-dark-text outline-none transition-colors placeholder:text-dark-muted focus:border-brand-primary"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 border-t border-dark-border p-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClear}
|
||||
disabled={isSaving}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-input px-4 py-2.5 text-sm font-bold text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
Limpar override
|
||||
</button>
|
||||
<div className="flex gap-2 sm:justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSaving}
|
||||
className="inline-flex flex-1 items-center justify-center rounded-xl border border-dark-border bg-dark-input px-4 py-2.5 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 sm:flex-none cursor-pointer"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="inline-flex flex-1 items-center justify-center gap-2 rounded-xl border border-brand-primary/30 bg-brand-primary/15 px-4 py-2.5 text-sm font-bold text-brand-primary transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 sm:flex-none cursor-pointer"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
{isSaving ? 'Salvando' : 'Salvar'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SkuPlanningModal;
|
||||
146
src/data.json
Normal file
146
src/data.json
Normal file
@@ -0,0 +1,146 @@
|
||||
[
|
||||
{
|
||||
"Nome_Cliente": "Luiz Felipe Oliveira Silva",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 19.9,
|
||||
"ID_Produto": "951438842",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X100 (1 METRO)",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 19.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 69.65,
|
||||
"ID_Produto": "951438842",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X100 (1 METRO)",
|
||||
"Quantidade": 3,
|
||||
"Valor_Unitario": 19.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 69.65,
|
||||
"ID_Produto": "978770094",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X0,50 (50 CENTÍMETROS)",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 9.95
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "Guilherme de Souza",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 65.66,
|
||||
"ID_Produto": "951438842",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X100 (1 METRO)",
|
||||
"Quantidade": 3,
|
||||
"Valor_Unitario": 20.51889
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "Guilherme de Souza",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 65.66,
|
||||
"ID_Produto": "978776637",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X0,20 (20 CENTÍMETROS)",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 4.103778
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "Guilherme de Souza",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 24.54,
|
||||
"ID_Produto": "919483299",
|
||||
"Descricao_Produto": "BASE LISA CAMISETA COR PRETO TAMANHO - P",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 12.27009
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "Guilherme de Souza",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 24.54,
|
||||
"ID_Produto": "919483307",
|
||||
"Descricao_Produto": "BASE LISA CAMISETA COR PRETO TAMANHO - G",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 12.27009
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 95.2,
|
||||
"ID_Produto": "919483303",
|
||||
"Descricao_Produto": "BASE LISA CAMISETA COR PRETO TAMANHO - M",
|
||||
"Quantidade": 2,
|
||||
"Valor_Unitario": 11.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 95.2,
|
||||
"ID_Produto": "919483311",
|
||||
"Descricao_Produto": "BASE LISA CAMISETA COR PRETO TAMANHO - GG",
|
||||
"Quantidade": 2,
|
||||
"Valor_Unitario": 11.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 95.2,
|
||||
"ID_Produto": "976044109",
|
||||
"Descricao_Produto": "BASE LISA CAMISETA COR MARINHO TAMANHO - GG",
|
||||
"Quantidade": 2,
|
||||
"Valor_Unitario": 11.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 95.2,
|
||||
"ID_Produto": "919483255",
|
||||
"Descricao_Produto": "BASE LISA CAMISETA COR PEROLA TAMANHO - G",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 11.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 95.2,
|
||||
"ID_Produto": "919483299",
|
||||
"Descricao_Produto": "BASE LISA CAMISETA COR PRETO TAMANHO - P",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 11.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "Francieli Campos",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 224.95,
|
||||
"ID_Produto": "978761156",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X100 (10 METROS)",
|
||||
"Quantidade": 1,
|
||||
"Valor_Unitario": 199
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "Daniela Gutierrez",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 217.45,
|
||||
"ID_Produto": "951438842",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X100 (1 METRO)",
|
||||
"Quantidade": 10,
|
||||
"Valor_Unitario": 19.9
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "Joyce Pretel",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 22.47,
|
||||
"ID_Produto": "951540701",
|
||||
"Descricao_Produto": "BONÉ - PRETO",
|
||||
"Quantidade": 3,
|
||||
"Valor_Unitario": 7.49
|
||||
},
|
||||
{
|
||||
"Nome_Cliente": "61.855.899 WALTER PONCE JUNIOR",
|
||||
"Data_Pedido": "30-04-2026",
|
||||
"Valor_Pedido": 59.7,
|
||||
"ID_Produto": "951438842",
|
||||
"Descricao_Produto": "IMPRESSÃO DTF PERSONALIZADO 57X100 (1 METRO)",
|
||||
"Quantidade": 3,
|
||||
"Valor_Unitario": 19.9
|
||||
}
|
||||
]
|
||||
@@ -1,102 +1,31 @@
|
||||
import type { AuthUser, CampaignPreview, CampaignProcessSummary, CampaignQueueSummary, CatalogCategory, CatalogCategoryPayload, CatalogProduct, CatalogProductPayload, CatalogSummary, ClientAnalyticsItem, ClientDetailsAnalytics, ClientFilterOptions, ClientMetadataFilters, ClientPurchasePatternAnalytics, ConsumptionReference, ConsumptionReferencePayload, CreateProductionOrdersResult, CreateUserResult, CuttingSettings, DashboardAnalytics, DateRange, ManagedUser, OrderData, ProductAnalyticsItem, ProductComposition, ProductDetailsAnalytics, ProductionOrderItem, ProductionOrderPayload, ProductionOrderStatus, ProductionOrderSummary, RfmAnalytics, StockData, SupplyFabricPlan, SupplyFabricPlanPayload, SupplyInventoryAdjustmentPayload, SupplyLot, SupplyProductionExitPayload, SupplyPurchaseNeed, SupplyReceipt, SupplyReceiptPayload, SupplySummary } from './types';
|
||||
import { formatDateParam } from './dateRanges';
|
||||
import type { OrderData } from './types';
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || '/api';
|
||||
const ANALYTICS_CACHE_TTL_MS = 5 * 60 * 1000;
|
||||
const IN_FLIGHT_CACHE_TTL_MS = 15 * 1000;
|
||||
|
||||
type CacheOptions = {
|
||||
force?: boolean;
|
||||
shouldCache?: (data: unknown) => boolean;
|
||||
};
|
||||
|
||||
type ApiCacheEntry<T> = {
|
||||
expiresAt: number;
|
||||
data?: T;
|
||||
promise?: Promise<T>;
|
||||
};
|
||||
|
||||
const analyticsCache = new Map<string, ApiCacheEntry<unknown>>();
|
||||
|
||||
const getCachedAnalyticsValue = <T>(key: string): T | undefined => {
|
||||
const entry = analyticsCache.get(key) as ApiCacheEntry<T> | undefined;
|
||||
if (!entry || entry.data === undefined || entry.expiresAt <= Date.now()) return undefined;
|
||||
return entry.data;
|
||||
};
|
||||
|
||||
const getCachedAnalytics = async <T>(key: string, loader: () => Promise<T>, options: CacheOptions = {}): Promise<T> => {
|
||||
const now = Date.now();
|
||||
const cached = analyticsCache.get(key) as ApiCacheEntry<T> | undefined;
|
||||
|
||||
if (!options.force) {
|
||||
if (cached?.data !== undefined && cached.expiresAt > now) return cached.data;
|
||||
if (cached?.promise && cached.expiresAt > now) return cached.promise;
|
||||
}
|
||||
|
||||
const promise = loader();
|
||||
analyticsCache.set(key, { expiresAt: now + IN_FLIGHT_CACHE_TTL_MS, promise });
|
||||
|
||||
try {
|
||||
const data = await promise;
|
||||
if (data === null || options.shouldCache?.(data) === false) {
|
||||
analyticsCache.delete(key);
|
||||
} else {
|
||||
analyticsCache.set(key, { data, expiresAt: Date.now() + ANALYTICS_CACHE_TTL_MS });
|
||||
}
|
||||
return data;
|
||||
} catch (error) {
|
||||
analyticsCache.delete(key);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const buildDateRangeParams = (dateRange: DateRange) => new URLSearchParams({
|
||||
start: formatDateParam(dateRange.start),
|
||||
end: formatDateParam(dateRange.end)
|
||||
});
|
||||
|
||||
export type LoginConfig = {
|
||||
captchaRequired: boolean;
|
||||
captchaConfigured: boolean;
|
||||
turnstileSiteKey: string;
|
||||
};
|
||||
|
||||
export type LoginResult = 'success' | 'invalid_credentials' | 'captcha_failed' | 'server_error';
|
||||
|
||||
export const getLoginConfig = async (): Promise<LoginConfig> => {
|
||||
const response = await fetch(`${API_URL}/login/config`, { cache: 'no-store' });
|
||||
if (!response.ok) throw new Error('Failed to load login config');
|
||||
return response.json() as Promise<LoginConfig>;
|
||||
};
|
||||
|
||||
export const login = async (email: string, password: string, captchaToken?: string): Promise<LoginResult> => {
|
||||
export const login = async (email: string, password: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ email, password, captchaToken }),
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json() as { token?: string; user?: AuthUser };
|
||||
if (!data.token || !data.user) return 'server_error';
|
||||
const data = await response.json();
|
||||
localStorage.setItem('auth_token', data.token);
|
||||
localStorage.setItem('auth_user', JSON.stringify(data.user));
|
||||
return 'success';
|
||||
return true;
|
||||
}
|
||||
if (response.status === 403) return 'captcha_failed';
|
||||
return 'invalid_credentials';
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Login failed', error);
|
||||
return 'server_error';
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const logout = () => {
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('auth_user');
|
||||
window.location.href = '/#/login';
|
||||
};
|
||||
|
||||
@@ -104,41 +33,6 @@ export const isAuthenticated = (): boolean => {
|
||||
return !!localStorage.getItem('auth_token');
|
||||
};
|
||||
|
||||
export const getCurrentUser = (): AuthUser | null => {
|
||||
const rawUser = localStorage.getItem('auth_user');
|
||||
if (!rawUser) return null;
|
||||
|
||||
try {
|
||||
return JSON.parse(rawUser) as AuthUser;
|
||||
} catch {
|
||||
localStorage.removeItem('auth_user');
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const isSuperAdmin = (): boolean => {
|
||||
return getCurrentUser()?.role === 'super_admin';
|
||||
};
|
||||
|
||||
export const fetchStock = async (): Promise<StockData[]> => {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
const response = await fetch(`${API_URL}/stock`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
logout();
|
||||
return [];
|
||||
}
|
||||
if (!response.ok) return [];
|
||||
return await response.json();
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchData = async (): Promise<OrderData[]> => {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
@@ -159,654 +53,24 @@ export const fetchData = async (): Promise<OrderData[]> => {
|
||||
}
|
||||
};
|
||||
|
||||
const authFetch = async (path: string, options: RequestInit = {}): Promise<Response> => {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
const response = await fetch(`${API_URL}${path}`, {
|
||||
...options,
|
||||
headers: {
|
||||
...(options.headers || {}),
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
logout();
|
||||
export const parseOrderDate = (dateStr: string): Date => {
|
||||
if (!dateStr) return new Date(0);
|
||||
if (dateStr.includes('T')) return new Date(dateStr);
|
||||
const parts = dateStr.split(/[-/]/);
|
||||
if (parts.length === 3) {
|
||||
if (parts[0].length === 4) {
|
||||
// YYYY-MM-DD
|
||||
return new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
|
||||
} else {
|
||||
// DD-MM-YYYY
|
||||
return new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
const fallback = new Date(dateStr);
|
||||
return isNaN(fallback.getTime()) ? new Date(0) : fallback;
|
||||
};
|
||||
|
||||
export const downloadDatabaseDiagnostic = async (): Promise<void> => {
|
||||
const response = await authFetch('/admin/database-diagnostic', { cache: 'no-store' });
|
||||
const data = await response.json().catch(() => null);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível exportar o diagnóstico do banco.');
|
||||
}
|
||||
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = `graphs-db-diagnostic-${new Date().toISOString().slice(0, 10)}.json`;
|
||||
anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
export const fetchProductionOrders = async (
|
||||
dateRange: DateRange,
|
||||
filters?: { search?: string },
|
||||
options?: CacheOptions
|
||||
): Promise<ProductionOrderSummary> => {
|
||||
const params = buildDateRangeParams(dateRange);
|
||||
const search = filters?.search?.trim();
|
||||
if (search) params.set('search', search);
|
||||
|
||||
const path = `/production-orders?${params.toString()}`;
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path, options?.force ? { cache: 'no-store' } : {});
|
||||
if (!response.ok) return { orders: [], counts: { all: 0, open: 0, in_progress: 0, finished: 0, canceled: 0 } };
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch production orders failed', error);
|
||||
return { orders: [], counts: { all: 0, open: 0, in_progress: 0, finished: 0, canceled: 0 } };
|
||||
}
|
||||
}, options);
|
||||
};
|
||||
|
||||
export const createProductionOrders = async (orders: ProductionOrderPayload[]): Promise<CreateProductionOrdersResult> => {
|
||||
const response = await authFetch('/production-orders', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ orders })
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Não foi possível criar as ordens de produção.');
|
||||
analyticsCache.clear();
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const updateProductionOrderStatus = async (id: number, status: ProductionOrderStatus): Promise<ProductionOrderItem> => {
|
||||
const response = await authFetch(`/production-orders/${id}/status`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status })
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Não foi possível atualizar o status da ordem.');
|
||||
analyticsCache.clear();
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const fetchCuttingSettings = async (): Promise<CuttingSettings> => {
|
||||
try {
|
||||
const response = await authFetch('/cutting-settings');
|
||||
if (!response.ok) return { familyYields: {}, productOverrides: {} };
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch cutting settings failed', error);
|
||||
return { familyYields: {}, productOverrides: {} };
|
||||
}
|
||||
};
|
||||
|
||||
export const saveCuttingSettings = async (settings: CuttingSettings): Promise<CuttingSettings> => {
|
||||
const response = await authFetch('/cutting-settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(settings)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível salvar as regras de corte.');
|
||||
}
|
||||
|
||||
return data as CuttingSettings;
|
||||
};
|
||||
|
||||
export const fetchCatalogSummary = async (): Promise<CatalogSummary> => {
|
||||
try {
|
||||
const response = await authFetch('/catalog');
|
||||
if (!response.ok) return { categories: [], products: [], consumptionReferences: [] };
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch catalog summary failed', error);
|
||||
return { categories: [], products: [], consumptionReferences: [] };
|
||||
}
|
||||
};
|
||||
|
||||
export const saveCatalogCategory = async (payload: CatalogCategoryPayload): Promise<CatalogCategory> => {
|
||||
const response = await authFetch('/catalog/categories', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível salvar a categoria.');
|
||||
}
|
||||
|
||||
return data as CatalogCategory;
|
||||
};
|
||||
|
||||
export const deleteCatalogCategory = async (id: number): Promise<void> => {
|
||||
const response = await authFetch(`/catalog/categories/${id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => null);
|
||||
throw new Error(data?.error || 'Não foi possível excluir a categoria.');
|
||||
}
|
||||
};
|
||||
|
||||
export const saveCatalogProduct = async (payload: CatalogProductPayload): Promise<CatalogProduct> => {
|
||||
const response = await authFetch('/catalog/products', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível salvar o produto.');
|
||||
}
|
||||
|
||||
return data as CatalogProduct;
|
||||
};
|
||||
|
||||
export const deleteCatalogProduct = async (id: number): Promise<void> => {
|
||||
const response = await authFetch(`/catalog/products/${id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => null);
|
||||
throw new Error(data?.error || 'Não foi possível excluir o produto.');
|
||||
}
|
||||
};
|
||||
|
||||
export const saveConsumptionReference = async (payload: ConsumptionReferencePayload): Promise<ConsumptionReference> => {
|
||||
const response = await authFetch('/catalog/consumption-references', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível salvar a referência de consumo.');
|
||||
}
|
||||
|
||||
return data as ConsumptionReference;
|
||||
};
|
||||
|
||||
export const deleteConsumptionReference = async (id: number): Promise<void> => {
|
||||
const response = await authFetch(`/catalog/consumption-references/${id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => null);
|
||||
throw new Error(data?.error || 'Não foi possível excluir a referência.');
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchSupplySummary = async (): Promise<SupplySummary> => {
|
||||
const emptySummary: SupplySummary = {
|
||||
receipts: [],
|
||||
lots: [],
|
||||
movements: [],
|
||||
fabricPlans: [],
|
||||
purchaseNeeds: [],
|
||||
stats: {
|
||||
totalQuantityKg: 0,
|
||||
activeLots: 0,
|
||||
rolls: 0,
|
||||
alerts: 0,
|
||||
pendingReceipts: 0,
|
||||
approvedReceipts: 0
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await authFetch('/supply');
|
||||
if (!response.ok) return emptySummary;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch supply summary failed', error);
|
||||
return emptySummary;
|
||||
}
|
||||
};
|
||||
|
||||
export const createSupplyReceipt = async (payload: SupplyReceiptPayload): Promise<SupplyReceipt> => {
|
||||
const response = await authFetch('/supply/receipts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível registrar o recebimento.');
|
||||
}
|
||||
|
||||
return data as SupplyReceipt;
|
||||
};
|
||||
|
||||
export const approveSupplyReceipt = async (id: number): Promise<SupplyReceipt> => {
|
||||
const response = await authFetch(`/supply/receipts/${id}/approve`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({})
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível aprovar o recebimento.');
|
||||
}
|
||||
|
||||
return data as SupplyReceipt;
|
||||
};
|
||||
|
||||
export const deleteSupplyReceipt = async (id: number): Promise<void> => {
|
||||
const response = await authFetch(`/supply/receipts/${id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => null);
|
||||
throw new Error(data?.error || 'Não foi possível remover o recebimento.');
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchSupplyFabricPlans = async (): Promise<SupplyFabricPlan[]> => {
|
||||
try {
|
||||
const response = await authFetch('/supply/fabric-plans');
|
||||
if (!response.ok) return [];
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch supply fabric plans failed', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const createSupplyFabricPlan = async (payload: SupplyFabricPlanPayload): Promise<SupplyFabricPlan> => {
|
||||
const response = await authFetch('/supply/fabric-plans', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível salvar o plano de malha.');
|
||||
}
|
||||
|
||||
return data as SupplyFabricPlan;
|
||||
};
|
||||
|
||||
export const deleteSupplyFabricPlan = async (id: number): Promise<void> => {
|
||||
const response = await authFetch(`/supply/fabric-plans/${id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => null);
|
||||
throw new Error(data?.error || 'Não foi possível remover o plano de malha.');
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchSupplyPurchaseNeeds = async (): Promise<SupplyPurchaseNeed[]> => {
|
||||
try {
|
||||
const response = await authFetch('/supply/purchase-needs');
|
||||
if (!response.ok) return [];
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch supply purchase needs failed', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const adjustSupplyLotInventory = async (lotId: number, payload: SupplyInventoryAdjustmentPayload): Promise<SupplyLot> => {
|
||||
const response = await authFetch(`/supply/lots/${lotId}/inventory-adjustment`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível ajustar o inventário.');
|
||||
}
|
||||
|
||||
return data as SupplyLot;
|
||||
};
|
||||
|
||||
export const consumeSupplyLotForProduction = async (lotId: number, payload: SupplyProductionExitPayload): Promise<SupplyLot> => {
|
||||
const response = await authFetch(`/supply/lots/${lotId}/production-exit`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível registrar a saída para produção.');
|
||||
}
|
||||
|
||||
return data as SupplyLot;
|
||||
};
|
||||
|
||||
export const fetchDashboardAnalytics = async (dateRange: DateRange, options?: CacheOptions): Promise<DashboardAnalytics | null> => {
|
||||
const path = `/analytics/dashboard?${buildDateRangeParams(dateRange).toString()}`;
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path, options?.force ? { cache: 'no-store' } : {});
|
||||
if (!response.ok) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch dashboard analytics failed', error);
|
||||
return null;
|
||||
}
|
||||
}, {
|
||||
...options,
|
||||
shouldCache: (data) => {
|
||||
const metrics = data as DashboardAnalytics | null;
|
||||
return Boolean(
|
||||
metrics &&
|
||||
Array.isArray(metrics.revenueBySeller) &&
|
||||
Array.isArray(metrics.ordersBySeller) &&
|
||||
Array.isArray(metrics.sellerRevenueByDate) &&
|
||||
Array.isArray(metrics.sellerRevenueByHour)
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const fetchProductAnalytics = async (dateRange: DateRange): Promise<ProductAnalyticsItem[]> => {
|
||||
const path = `/analytics/products?${buildDateRangeParams(dateRange).toString()}`;
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path);
|
||||
if (!response.ok) return [];
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch product analytics failed', error);
|
||||
return [];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const fetchProductDetailsAnalytics = async (productId: string, dateRange: DateRange): Promise<ProductDetailsAnalytics | null> => {
|
||||
const path = `/analytics/products/${encodeURIComponent(productId)}/details?${buildDateRangeParams(dateRange).toString()}`;
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path);
|
||||
if (!response.ok) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch product details analytics failed', error);
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const fetchProductComposition = async (productId: string): Promise<ProductComposition | null> => {
|
||||
try {
|
||||
const response = await authFetch(`/analytics/products/${encodeURIComponent(productId)}/composition`);
|
||||
if (!response.ok) return null;
|
||||
const data = await response.json() as { composition?: ProductComposition | null };
|
||||
return data.composition || null;
|
||||
} catch (error) {
|
||||
console.error('Fetch product composition failed', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const exportProductCompositions = async (): Promise<number> => {
|
||||
const response = await authFetch('/analytics/product-compositions');
|
||||
const data = await response.json().catch(() => null) as { compositions?: ProductComposition[]; error?: string } | null;
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível exportar as composições.');
|
||||
}
|
||||
|
||||
const compositions = data?.compositions || [];
|
||||
const blob = new Blob([JSON.stringify({
|
||||
exportedAt: new Date().toISOString(),
|
||||
compositions
|
||||
}, null, 2)], { type: 'application/json;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `composicoes_produtos_${new Date().toISOString().slice(0, 10)}.json`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
return compositions.length;
|
||||
};
|
||||
|
||||
const appendClientMetadataFilterParams = (params: URLSearchParams, filters?: Partial<ClientMetadataFilters>) => {
|
||||
if (!filters) return;
|
||||
if (filters.marketplace) params.set('marketplace', filters.marketplace);
|
||||
if (filters.canal_venda) params.set('canal_venda', filters.canal_venda);
|
||||
if (filters.seller) params.set('seller', filters.seller);
|
||||
};
|
||||
|
||||
const hasClientFilterOptions = (data: unknown) => {
|
||||
const options = data as ClientFilterOptions | null;
|
||||
return Boolean(
|
||||
options?.marketplaces?.length ||
|
||||
options?.salesChannels?.length ||
|
||||
options?.sellers?.length
|
||||
);
|
||||
};
|
||||
|
||||
export const fetchClientFilterOptions = async (dateRange: DateRange, options?: CacheOptions): Promise<ClientFilterOptions> => {
|
||||
const path = `/analytics/clients/filters?${buildDateRangeParams(dateRange).toString()}`;
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path, options?.force ? { cache: 'no-store' } : {});
|
||||
if (!response.ok) return { marketplaces: [], salesChannels: [], sellers: [] };
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch client filter options failed', error);
|
||||
return { marketplaces: [], salesChannels: [], sellers: [] };
|
||||
}
|
||||
}, {
|
||||
...options,
|
||||
shouldCache: hasClientFilterOptions
|
||||
});
|
||||
};
|
||||
|
||||
const buildRfmAnalyticsPath = (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>) => {
|
||||
const params = buildDateRangeParams(dateRange);
|
||||
appendClientMetadataFilterParams(params, filters);
|
||||
return `/analytics/rfm?${params.toString()}`;
|
||||
};
|
||||
|
||||
export const getCachedRfmAnalytics = (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>): RfmAnalytics | undefined => {
|
||||
return getCachedAnalyticsValue<RfmAnalytics>(buildRfmAnalyticsPath(dateRange, filters));
|
||||
};
|
||||
|
||||
export const fetchRfmAnalytics = async (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>, options?: CacheOptions): Promise<RfmAnalytics | null> => {
|
||||
const path = buildRfmAnalyticsPath(dateRange, filters);
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path);
|
||||
if (!response.ok) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch RFM analytics failed', error);
|
||||
return null;
|
||||
}
|
||||
}, options);
|
||||
};
|
||||
|
||||
const buildClientAnalyticsPath = (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>) => {
|
||||
const params = buildDateRangeParams(dateRange);
|
||||
appendClientMetadataFilterParams(params, filters);
|
||||
return `/analytics/clients?${params.toString()}`;
|
||||
};
|
||||
|
||||
export const getCachedClientAnalytics = (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>): ClientAnalyticsItem[] | undefined => {
|
||||
return getCachedAnalyticsValue<ClientAnalyticsItem[]>(buildClientAnalyticsPath(dateRange, filters));
|
||||
};
|
||||
|
||||
export const getCachedClientFilterOptions = (dateRange: DateRange): ClientFilterOptions | undefined => {
|
||||
return getCachedAnalyticsValue<ClientFilterOptions>(`/analytics/clients/filters?${buildDateRangeParams(dateRange).toString()}`);
|
||||
};
|
||||
|
||||
export const fetchClientAnalytics = async (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>, options?: CacheOptions): Promise<ClientAnalyticsItem[]> => {
|
||||
const path = buildClientAnalyticsPath(dateRange, filters);
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path);
|
||||
if (!response.ok) return [];
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch client analytics failed', error);
|
||||
return [];
|
||||
}
|
||||
}, options);
|
||||
};
|
||||
|
||||
const emptyClientPurchasePattern = (): ClientPurchasePatternAnalytics => ({
|
||||
weekdayRangeLabel: 'Todo período',
|
||||
hourRangeLabel: 'Últimos 60 dias',
|
||||
purchaseWeekdays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'].map(label => ({ label, value: 0 })),
|
||||
purchaseHours: Array.from({ length: 24 }, (_, hour) => ({
|
||||
label: `${String(hour).padStart(2, '0')}h`,
|
||||
value: 0
|
||||
}))
|
||||
});
|
||||
|
||||
export const fetchClientPurchasePatternAnalytics = async (options?: CacheOptions): Promise<ClientPurchasePatternAnalytics> => {
|
||||
const path = '/analytics/clients/purchase-pattern';
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path, options?.force ? { cache: 'no-store' } : {});
|
||||
if (!response.ok) return emptyClientPurchasePattern();
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch client purchase pattern analytics failed', error);
|
||||
return emptyClientPurchasePattern();
|
||||
}
|
||||
}, options);
|
||||
};
|
||||
|
||||
export const fetchClientDetailsAnalytics = async (clientToken: string, dateRange: DateRange): Promise<ClientDetailsAnalytics | null> => {
|
||||
const path = `/analytics/clients/${encodeURIComponent(clientToken)}/details?${buildDateRangeParams(dateRange).toString()}`;
|
||||
return getCachedAnalytics(path, async () => {
|
||||
try {
|
||||
const response = await authFetch(path);
|
||||
if (!response.ok) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch client details analytics failed', error);
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const clearAnalyticsCache = () => {
|
||||
analyticsCache.clear();
|
||||
};
|
||||
|
||||
export const fetchCampaigns = async (): Promise<CampaignQueueSummary | null> => {
|
||||
try {
|
||||
const response = await authFetch('/campaigns');
|
||||
if (!response.ok) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch campaigns failed', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchCampaignPreview = async (): Promise<CampaignPreview | null> => {
|
||||
try {
|
||||
const response = await authFetch('/campaigns/preview');
|
||||
if (!response.ok) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Fetch campaign preview failed', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const processCampaignsNow = async (): Promise<CampaignProcessSummary | null> => {
|
||||
try {
|
||||
const response = await authFetch('/campaigns/process', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({})
|
||||
});
|
||||
if (!response.ok) return null;
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Process campaigns failed', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const retryCampaignGroup = async (baseProductName: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await authFetch('/campaigns/retry', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ baseProductName })
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error('Retry campaign failed', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchUsers = async (): Promise<ManagedUser[]> => {
|
||||
try {
|
||||
const response = await authFetch('/users');
|
||||
if (!response.ok) return [];
|
||||
const data = await response.json() as { users?: ManagedUser[] };
|
||||
return data.users || [];
|
||||
} catch (error) {
|
||||
console.error('Fetch users failed', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const createUser = async (payload: { name: string; email: string; password?: string }): Promise<CreateUserResult> => {
|
||||
const response = await authFetch('/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível criar o usuário.');
|
||||
}
|
||||
|
||||
return data as CreateUserResult;
|
||||
};
|
||||
|
||||
export const updateUser = async (id: number, payload: { name: string; email: string; isActive: boolean; password?: string }): Promise<ManagedUser> => {
|
||||
const response = await authFetch(`/users/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.error || 'Não foi possível editar o usuário.');
|
||||
}
|
||||
|
||||
return data.user as ManagedUser;
|
||||
};
|
||||
|
||||
export const deleteUser = async (id: number): Promise<void> => {
|
||||
const response = await authFetch(`/users/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => null);
|
||||
throw new Error(data?.error || 'Não foi possível excluir o usuário.');
|
||||
}
|
||||
};
|
||||
|
||||
export const exportToCSV = (data: Record<string, unknown>[], filename: string) => {
|
||||
export const exportToCSV = (data: any[], filename: string) => {
|
||||
if (!data || !data.length) return;
|
||||
|
||||
const headers = Object.keys(data[0]);
|
||||
@@ -819,7 +83,7 @@ export const exportToCSV = (data: Record<string, unknown>[], filename: string) =
|
||||
for (const row of data) {
|
||||
const values = headers.map(header => {
|
||||
const val = row[header];
|
||||
const escaped = String(val ?? '').replace(/"/g, '""');
|
||||
const escaped = ('' + val).replace(/"/g, '\\"');
|
||||
return `"${escaped}"`;
|
||||
});
|
||||
csvRows.push(values.join(','));
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, rangeForLastDays, rangeForPreviousDay, startOfLocalDay } from './dateRanges.ts';
|
||||
|
||||
const assertRange = (range: { start: Date; end: Date }, start: string, end: string) => {
|
||||
assert.equal(formatDateParam(range.start), start);
|
||||
assert.equal(formatDateParam(range.end), end);
|
||||
assert.equal(range.start.getHours(), 0);
|
||||
assert.equal(range.start.getMinutes(), 0);
|
||||
assert.equal(range.start.getSeconds(), 0);
|
||||
assert.equal(range.start.getMilliseconds(), 0);
|
||||
assert.equal(range.end.getHours(), 23);
|
||||
assert.equal(range.end.getMinutes(), 59);
|
||||
assert.equal(range.end.getSeconds(), 59);
|
||||
assert.equal(range.end.getMilliseconds(), 999);
|
||||
};
|
||||
|
||||
test('Hoje uses full local calendar-day boundaries', () => {
|
||||
const today = new Date(2026, 5, 15, 14, 30, 10, 50);
|
||||
|
||||
assertRange(rangeForDay(today), '2026-06-15', '2026-06-15');
|
||||
});
|
||||
|
||||
test('Ontem uses the full previous local calendar day', () => {
|
||||
const today = new Date(2026, 5, 15, 0, 5, 0, 0);
|
||||
|
||||
assertRange(rangeForPreviousDay(today), '2026-06-14', '2026-06-14');
|
||||
});
|
||||
|
||||
test('Ultimos 7 dias includes today plus the previous 6 calendar days', () => {
|
||||
const today = new Date(2026, 5, 15, 22, 10, 0, 0);
|
||||
|
||||
assertRange(rangeForLastDays(7, today), '2026-06-09', '2026-06-15');
|
||||
});
|
||||
|
||||
test('Ultimos 30 and 90 dias use inclusive calendar-day ranges', () => {
|
||||
const today = new Date(2026, 5, 15, 22, 10, 0, 0);
|
||||
|
||||
assertRange(rangeForLastDays(30, today), '2026-05-17', '2026-06-15');
|
||||
assertRange(rangeForLastDays(90, today), '2026-03-18', '2026-06-15');
|
||||
});
|
||||
|
||||
test('custom single-day input parses as local date and can build a full-day range', () => {
|
||||
const customDate = parseLocalDateInput('2026-06-14');
|
||||
|
||||
assert.ok(customDate);
|
||||
assertRange({ start: startOfLocalDay(customDate), end: endOfLocalDay(customDate) }, '2026-06-14', '2026-06-14');
|
||||
});
|
||||
|
||||
test('API date params are stable YYYY-MM-DD strings', () => {
|
||||
assert.equal(formatDateParam(new Date(2026, 5, 14, 23, 59, 59, 999)), '2026-06-14');
|
||||
assert.equal(parseLocalDateInput('14/06/2026'), null);
|
||||
});
|
||||
@@ -1,58 +0,0 @@
|
||||
import type { DateRange } from './types';
|
||||
|
||||
export const startOfLocalDay = (date: Date): Date => {
|
||||
const nextDate = new Date(date);
|
||||
nextDate.setHours(0, 0, 0, 0);
|
||||
return nextDate;
|
||||
};
|
||||
|
||||
export const endOfLocalDay = (date: Date): Date => {
|
||||
const nextDate = new Date(date);
|
||||
nextDate.setHours(23, 59, 59, 999);
|
||||
return nextDate;
|
||||
};
|
||||
|
||||
export const rangeForDay = (date: Date): DateRange => ({
|
||||
start: startOfLocalDay(date),
|
||||
end: endOfLocalDay(date),
|
||||
});
|
||||
|
||||
export const rangeForLastDays = (days: number, today = new Date()): DateRange => {
|
||||
const end = endOfLocalDay(today);
|
||||
const start = startOfLocalDay(today);
|
||||
start.setDate(start.getDate() - Math.max(days - 1, 0));
|
||||
return { start, end };
|
||||
};
|
||||
|
||||
export const rangeForPreviousDay = (today = new Date()): DateRange => {
|
||||
const date = startOfLocalDay(today);
|
||||
date.setDate(date.getDate() - 1);
|
||||
return rangeForDay(date);
|
||||
};
|
||||
|
||||
export const parseLocalDateInput = (value: string): Date | null => {
|
||||
if (!value) return null;
|
||||
|
||||
const match = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
||||
if (!match) return null;
|
||||
|
||||
const [, yearValue, monthValue, dayValue] = match;
|
||||
const date = new Date(Number(yearValue), Number(monthValue) - 1, Number(dayValue));
|
||||
|
||||
if (
|
||||
date.getFullYear() !== Number(yearValue) ||
|
||||
date.getMonth() !== Number(monthValue) - 1 ||
|
||||
date.getDate() !== Number(dayValue)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return date;
|
||||
};
|
||||
|
||||
export const formatDateParam = (date: Date): string => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
@@ -1,41 +0,0 @@
|
||||
const SMALL_WORDS = new Set(['da', 'de', 'do', 'das', 'dos', 'e']);
|
||||
|
||||
export const removeTrailingSellerId = (value: string) => {
|
||||
return value.replace(/\s*#\d+\s*$/, '').trim();
|
||||
};
|
||||
|
||||
export const formatDisplayName = (value: string) => {
|
||||
const normalized = String(value || '').replace(/\s+/g, ' ').trim();
|
||||
if (!normalized) return '';
|
||||
|
||||
const withoutSellerId = removeTrailingSellerId(normalized);
|
||||
const withoutNumericPrefix = withoutSellerId.replace(/^\[\d+\]\s*/, '').trim();
|
||||
const isUppercaseName = /[A-ZÁÀÂÃÉÈÊÍÏÓÔÕÖÚÇÑ]/.test(withoutNumericPrefix) &&
|
||||
withoutNumericPrefix === withoutNumericPrefix.toUpperCase();
|
||||
|
||||
if (!isUppercaseName) return withoutNumericPrefix;
|
||||
|
||||
return withoutNumericPrefix
|
||||
.toLocaleLowerCase('pt-BR')
|
||||
.split(' ')
|
||||
.map((word, index) => {
|
||||
if (index > 0 && SMALL_WORDS.has(word)) return word;
|
||||
return word.charAt(0).toLocaleUpperCase('pt-BR') + word.slice(1);
|
||||
})
|
||||
.join(' ');
|
||||
};
|
||||
|
||||
export const formatColorLabel = (value: string) => {
|
||||
const normalized = String(value || '').replace(/\s+/g, ' ').trim();
|
||||
if (!normalized) return '';
|
||||
if (normalized.toLocaleLowerCase('pt-BR') === 'sem cor') return 'Sem cor';
|
||||
|
||||
return normalized
|
||||
.toLocaleLowerCase('pt-BR')
|
||||
.split(' ')
|
||||
.map((word, index) => {
|
||||
if (index > 0 && SMALL_WORDS.has(word)) return word;
|
||||
return word.charAt(0).toLocaleUpperCase('pt-BR') + word.slice(1);
|
||||
})
|
||||
.join(' ');
|
||||
};
|
||||
245
src/index.css
245
src/index.css
@@ -1,66 +1,22 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-brand-primary: #b8c7d1;
|
||||
--color-brand-contrast: #070707;
|
||||
--color-dark-bg: #070707;
|
||||
--color-brand-primary: #9ECAE1;
|
||||
--color-dark-bg: #0a0a0a;
|
||||
--color-dark-card: #141414;
|
||||
--color-dark-header: #101010;
|
||||
--color-dark-sidebar: #111111;
|
||||
--color-dark-border: #282828;
|
||||
--color-dark-input: #1c1c1c;
|
||||
--color-dark-text: #f0f0ee;
|
||||
--color-dark-muted: #929292;
|
||||
--color-dark-header: #141414;
|
||||
--color-dark-sidebar: #141414;
|
||||
--color-dark-border: #222222;
|
||||
--color-dark-input: #1a1a1a;
|
||||
--color-dark-text: #ededed;
|
||||
--color-dark-muted: #888888;
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--chart-grid: #222222;
|
||||
--chart-axis: #888888;
|
||||
--chart-cursor: rgba(255, 255, 255, 0.055);
|
||||
--chart-label: #ededed;
|
||||
--chart-tooltip-bg: #141414;
|
||||
--chart-tooltip-text: #ededed;
|
||||
--chart-tooltip-border: transparent;
|
||||
--chart-detail-bar: #9ECAE1;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] {
|
||||
--color-brand-primary: #3f535a;
|
||||
--color-brand-contrast: #fbf8f1;
|
||||
--color-dark-bg: #f3f0e9;
|
||||
--color-dark-card: #fbf8f1;
|
||||
--color-dark-header: #f0ece4;
|
||||
--color-dark-sidebar: #ebe6dc;
|
||||
--color-dark-border: #d8d0c3;
|
||||
--color-dark-input: #f1ede5;
|
||||
--color-dark-text: #242321;
|
||||
--color-dark-muted: #6f6a61;
|
||||
--chart-grid: rgba(63, 58, 49, 0.14);
|
||||
--chart-axis: #756f66;
|
||||
--chart-cursor: rgba(63, 58, 49, 0.08);
|
||||
--chart-label: #242321;
|
||||
--chart-tooltip-bg: #fbf8f1;
|
||||
--chart-tooltip-text: #242321;
|
||||
--chart-tooltip-border: #d8d0c3;
|
||||
--chart-detail-bar: #3f535a;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at 18% -8%, rgba(255, 255, 255, 0.035), transparent 30rem),
|
||||
radial-gradient(circle at 88% 4%, rgba(184, 199, 209, 0.025), transparent 34rem),
|
||||
#070707;
|
||||
@apply text-dark-text;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] body {
|
||||
background:
|
||||
radial-gradient(circle at 16% -8%, rgba(255, 255, 255, 0.82), transparent 32rem),
|
||||
radial-gradient(circle at 88% 0%, rgba(116, 107, 91, 0.10), transparent 36rem),
|
||||
#f3f0e9;
|
||||
@apply bg-dark-bg text-dark-text;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -73,186 +29,3 @@
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
background: color-mix(in srgb, var(--color-dark-input) 82%, var(--color-dark-text) 18%);
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--color-dark-text) 14%, transparent),
|
||||
transparent
|
||||
);
|
||||
animation: skeleton-shimmer 1.45s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-progress {
|
||||
animation: refresh-progress-slide 1.05s ease-in-out infinite;
|
||||
box-shadow: 0 0 12px color-mix(in srgb, var(--color-brand-primary) 38%, transparent);
|
||||
}
|
||||
|
||||
.refreshing-content {
|
||||
opacity: 0.72;
|
||||
transition: opacity 180ms ease;
|
||||
}
|
||||
|
||||
@keyframes refresh-progress-slide {
|
||||
0% {
|
||||
transform: translateX(-120%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(320%);
|
||||
}
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0) 24rem),
|
||||
radial-gradient(circle at 28% -18%, rgba(255, 255, 255, 0.035), transparent 34rem),
|
||||
radial-gradient(circle at 88% 8%, rgba(184, 199, 209, 0.024), transparent 38rem),
|
||||
#070707;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .app-shell {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 24rem),
|
||||
radial-gradient(circle at 28% -18%, rgba(255, 255, 255, 0.74), transparent 34rem),
|
||||
radial-gradient(circle at 88% 8%, rgba(116, 107, 91, 0.10), transparent 38rem),
|
||||
#f3f0e9;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0) 16rem),
|
||||
transparent;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .app-content {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 16rem),
|
||||
transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
html[data-theme='offwhite'] .text-red-300,
|
||||
html[data-theme='offwhite'] .text-red-400 {
|
||||
color: #b42318 !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .text-amber-100,
|
||||
html[data-theme='offwhite'] .text-amber-200,
|
||||
html[data-theme='offwhite'] .text-amber-300,
|
||||
html[data-theme='offwhite'] .text-amber-400 {
|
||||
color: #9a6700 !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .text-sky-200,
|
||||
html[data-theme='offwhite'] .text-sky-300,
|
||||
html[data-theme='offwhite'] .text-sky-400,
|
||||
html[data-theme='offwhite'] .text-sky-500 {
|
||||
color: #0369a1 !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .text-emerald-300,
|
||||
html[data-theme='offwhite'] .text-emerald-400,
|
||||
html[data-theme='offwhite'] .text-emerald-500 {
|
||||
color: #047857 !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .text-purple-300,
|
||||
html[data-theme='offwhite'] .text-purple-400,
|
||||
html[data-theme='offwhite'] .text-purple-500 {
|
||||
color: #7e22ce !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .text-zinc-300,
|
||||
html[data-theme='offwhite'] .text-zinc-400 {
|
||||
color: #5f5a52 !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .bg-red-400\/10,
|
||||
html[data-theme='offwhite'] .bg-red-500\/10 {
|
||||
background-color: rgba(180, 35, 24, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .bg-amber-400\/10,
|
||||
html[data-theme='offwhite'] .bg-amber-500\/10 {
|
||||
background-color: rgba(154, 103, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .bg-sky-400\/10,
|
||||
html[data-theme='offwhite'] .bg-sky-500\/10 {
|
||||
background-color: rgba(3, 105, 161, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .bg-emerald-400\/10,
|
||||
html[data-theme='offwhite'] .bg-emerald-500\/10 {
|
||||
background-color: rgba(4, 120, 87, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .bg-purple-400\/10,
|
||||
html[data-theme='offwhite'] .bg-purple-500\/10 {
|
||||
background-color: rgba(126, 34, 206, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .bg-zinc-500\/10 {
|
||||
background-color: rgba(95, 90, 82, 0.11) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .border-red-400\/25,
|
||||
html[data-theme='offwhite'] .border-red-400\/30,
|
||||
html[data-theme='offwhite'] .border-red-400\/35,
|
||||
html[data-theme='offwhite'] .border-red-500\/30 {
|
||||
border-color: rgba(180, 35, 24, 0.28) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .border-amber-400\/20,
|
||||
html[data-theme='offwhite'] .border-amber-400\/25,
|
||||
html[data-theme='offwhite'] .border-amber-400\/30,
|
||||
html[data-theme='offwhite'] .border-amber-400\/35,
|
||||
html[data-theme='offwhite'] .border-amber-500\/30 {
|
||||
border-color: rgba(154, 103, 0, 0.30) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .border-sky-400\/20,
|
||||
html[data-theme='offwhite'] .border-sky-400\/25,
|
||||
html[data-theme='offwhite'] .border-sky-400\/30,
|
||||
html[data-theme='offwhite'] .border-sky-400\/35 {
|
||||
border-color: rgba(3, 105, 161, 0.30) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .border-emerald-400\/25,
|
||||
html[data-theme='offwhite'] .border-emerald-400\/30,
|
||||
html[data-theme='offwhite'] .border-emerald-400\/35,
|
||||
html[data-theme='offwhite'] .border-emerald-500\/30 {
|
||||
border-color: rgba(4, 120, 87, 0.30) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .border-purple-400\/25,
|
||||
html[data-theme='offwhite'] .border-purple-400\/30 {
|
||||
border-color: rgba(126, 34, 206, 0.28) !important;
|
||||
}
|
||||
|
||||
html[data-theme='offwhite'] .border-zinc-500\/30,
|
||||
html[data-theme='offwhite'] .border-zinc-500\/35 {
|
||||
border-color: rgba(95, 90, 82, 0.28) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import '@vitejs/plugin-react/preamble'
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { HashRouter } from 'react-router-dom'
|
||||
|
||||
@@ -1,754 +0,0 @@
|
||||
import { useEffect, useMemo, useState, type FormEvent } from 'react';
|
||||
import {
|
||||
AlertTriangle,
|
||||
AtSign,
|
||||
Check,
|
||||
Copy,
|
||||
Edit3,
|
||||
KeyRound,
|
||||
Loader2,
|
||||
Mail,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Trash2,
|
||||
User as UserIcon,
|
||||
UserCheck,
|
||||
UserPlus,
|
||||
UserX,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
import { createUser, deleteUser as deleteManagedUser, fetchUsers, updateUser } from '../dataService';
|
||||
import type { ManagedUser } from '../types';
|
||||
|
||||
type StatusFilter = 'all' | 'active' | 'inactive';
|
||||
type PasswordMode = 'auto' | 'manual';
|
||||
type Notice = {
|
||||
tone: 'success' | 'warning' | 'error';
|
||||
text: string;
|
||||
temporaryPassword?: string;
|
||||
};
|
||||
|
||||
const statusOptions: Array<{ key: StatusFilter; label: string }> = [
|
||||
{ key: 'all', label: 'Todos' },
|
||||
{ key: 'active', label: 'Ativos' },
|
||||
{ key: 'inactive', label: 'Inativos' }
|
||||
];
|
||||
|
||||
const roleLabels: Record<string, string> = {
|
||||
admin: 'Admin',
|
||||
supervisor: 'Supervisor',
|
||||
producao: 'Produção',
|
||||
operacao: 'Operação',
|
||||
vendedor: 'Vendedor',
|
||||
financeiro: 'Financeiro',
|
||||
user: 'Usuário'
|
||||
};
|
||||
|
||||
const inputWrapClassName = 'flex h-11 items-center gap-3 rounded-lg border border-dark-border bg-dark-input px-3 transition-colors focus-within:border-brand-primary focus-within:ring-1 focus-within:ring-brand-primary';
|
||||
const inputClassName = 'min-w-0 flex-1 bg-transparent text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted';
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
const parts = name.trim().split(/\s+/).filter(Boolean);
|
||||
if (!parts.length) return '?';
|
||||
return parts.slice(0, 2).map((part) => part[0]).join('').toUpperCase();
|
||||
};
|
||||
|
||||
const getUserRoleLabel = (user: ManagedUser) => {
|
||||
const role = String((user as ManagedUser & { role?: string }).role || 'user').toLowerCase();
|
||||
return roleLabels[role] || role;
|
||||
};
|
||||
|
||||
const AdminUsers = () => {
|
||||
const [users, setUsers] = useState<ManagedUser[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [editingUser, setEditingUser] = useState<ManagedUser | null>(null);
|
||||
const [userToDelete, setUserToDelete] = useState<ManagedUser | null>(null);
|
||||
const [passwordMode, setPasswordMode] = useState<PasswordMode>('auto');
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [name, setName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [notice, setNotice] = useState<Notice | null>(null);
|
||||
const [copyLabel, setCopyLabel] = useState('Copiar');
|
||||
|
||||
const activeCount = useMemo(() => users.filter((user) => user.isActive).length, [users]);
|
||||
const inactiveCount = users.length - activeCount;
|
||||
|
||||
const filteredUsers = useMemo(() => {
|
||||
const query = searchTerm.trim().toLowerCase();
|
||||
|
||||
return users.filter((user) => {
|
||||
const matchesStatus =
|
||||
statusFilter === 'all' ||
|
||||
(statusFilter === 'active' && user.isActive) ||
|
||||
(statusFilter === 'inactive' && !user.isActive);
|
||||
const matchesQuery =
|
||||
!query ||
|
||||
user.name.toLowerCase().includes(query) ||
|
||||
user.email.toLowerCase().includes(query);
|
||||
|
||||
return matchesStatus && matchesQuery;
|
||||
});
|
||||
}, [searchTerm, statusFilter, users]);
|
||||
|
||||
const hasFilters = searchTerm.trim() !== '' || statusFilter !== 'all';
|
||||
|
||||
const loadUsers = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
setUsers(await fetchUsers());
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// User management needs an initial API load when the admin page opens.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
void loadUsers();
|
||||
}, []);
|
||||
|
||||
const resetForm = () => {
|
||||
setName('');
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
setPasswordMode('auto');
|
||||
setIsActive(true);
|
||||
setEditingUser(null);
|
||||
setNotice(null);
|
||||
setCopyLabel('Copiar');
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
if (isSubmitting) return;
|
||||
setIsModalOpen(false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchTerm('');
|
||||
setStatusFilter('all');
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
resetForm();
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditModal = (user: ManagedUser) => {
|
||||
setEditingUser(user);
|
||||
setName(user.name);
|
||||
setEmail(user.email);
|
||||
setIsActive(user.isActive);
|
||||
setPassword('');
|
||||
setPasswordMode('auto');
|
||||
setNotice(null);
|
||||
setCopyLabel('Copiar');
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCreateUser = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setNotice(null);
|
||||
setCopyLabel('Copiar');
|
||||
|
||||
try {
|
||||
const result = await createUser({
|
||||
name,
|
||||
email,
|
||||
password: passwordMode === 'manual' ? password : undefined
|
||||
});
|
||||
|
||||
setUsers((currentUsers) => [result.user, ...currentUsers]);
|
||||
|
||||
if (result.temporaryPassword) {
|
||||
setNotice({
|
||||
tone: 'success',
|
||||
text: 'Acesso criado. Copie a senha gerada antes de fechar.',
|
||||
temporaryPassword: result.temporaryPassword
|
||||
});
|
||||
setName('');
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
setPasswordMode('auto');
|
||||
} else {
|
||||
setNotice({
|
||||
tone: 'success',
|
||||
text: 'Acesso criado com a senha definida.'
|
||||
});
|
||||
window.setTimeout(() => {
|
||||
setIsModalOpen(false);
|
||||
resetForm();
|
||||
}, 900);
|
||||
}
|
||||
} catch (error) {
|
||||
setNotice({
|
||||
tone: 'error',
|
||||
text: error instanceof Error ? error.message : 'Não foi possível criar o acesso.'
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateUser = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!editingUser) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setNotice(null);
|
||||
|
||||
try {
|
||||
const updatedUser = await updateUser(editingUser.id, {
|
||||
name,
|
||||
email,
|
||||
isActive,
|
||||
password: passwordMode === 'manual' ? password : undefined
|
||||
});
|
||||
|
||||
setUsers((currentUsers) => currentUsers.map((user) => user.id === updatedUser.id ? updatedUser : user));
|
||||
setNotice({
|
||||
tone: 'success',
|
||||
text: 'Usuário atualizado.'
|
||||
});
|
||||
window.setTimeout(() => {
|
||||
setIsModalOpen(false);
|
||||
resetForm();
|
||||
}, 700);
|
||||
} catch (error) {
|
||||
setNotice({
|
||||
tone: 'error',
|
||||
text: error instanceof Error ? error.message : 'Não foi possível editar o usuário.'
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async () => {
|
||||
if (!userToDelete) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await deleteManagedUser(userToDelete.id);
|
||||
setUsers((currentUsers) => currentUsers.filter((user) => user.id !== userToDelete.id));
|
||||
setUserToDelete(null);
|
||||
} catch (error) {
|
||||
setNotice({
|
||||
tone: 'error',
|
||||
text: error instanceof Error ? error.message : 'Não foi possível excluir o usuário.'
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const copyTemporaryPassword = async () => {
|
||||
if (!notice?.temporaryPassword) return;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(notice.temporaryPassword);
|
||||
setCopyLabel('Copiado');
|
||||
window.setTimeout(() => setCopyLabel('Copiar'), 1600);
|
||||
} catch {
|
||||
setCopyLabel('Falhou');
|
||||
}
|
||||
};
|
||||
|
||||
const noticeClass = notice?.tone === 'error'
|
||||
? 'border-red-500/30 bg-red-500/10 text-red-300'
|
||||
: notice?.tone === 'warning'
|
||||
? 'border-amber-500/30 bg-amber-500/10 text-amber-200'
|
||||
: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300';
|
||||
|
||||
const statusCounts: Record<StatusFilter, number> = {
|
||||
all: users.length,
|
||||
active: activeCount,
|
||||
inactive: inactiveCount
|
||||
};
|
||||
|
||||
const stats = [
|
||||
{ label: 'Total', value: users.length, icon: UserIcon, tone: 'text-dark-text', detail: 'acessos cadastrados' },
|
||||
{ label: 'Ativos', value: activeCount, icon: UserCheck, tone: 'text-emerald-300', detail: 'podem entrar agora' },
|
||||
{ label: 'Inativos', value: inactiveCount, icon: UserX, tone: 'text-red-300', detail: 'bloqueados no login' },
|
||||
{ label: 'Exibindo', value: filteredUsers.length, icon: Search, tone: 'text-brand-primary', detail: hasFilters ? 'após filtros' : 'sem filtros' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<header className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-3xl font-bold text-dark-text">Usuários</h1>
|
||||
<p className="mt-2 text-sm leading-6 text-dark-muted">
|
||||
Gerencie acessos individuais, senhas iniciais e bloqueios de entrada no painel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void loadUsers()}
|
||||
disabled={isLoading}
|
||||
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-card px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
Atualizar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCreateModal}
|
||||
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90"
|
||||
>
|
||||
<UserPlus className="h-4 w-4" />
|
||||
Novo acesso
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{stats.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div key={stat.label} className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">{stat.label}</p>
|
||||
<p className={`mt-2 text-2xl font-bold ${stat.tone}`}>{stat.value}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">{stat.detail}</p>
|
||||
</div>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted">
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
|
||||
<section className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
|
||||
<div className="border-b border-dark-border p-4">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-dark-text">Acessos cadastrados</h2>
|
||||
<p className="mt-1 text-sm text-dark-muted">Busque, filtre e edite os usuários do painel.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
|
||||
<div className="flex h-10 min-w-0 items-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 lg:w-80">
|
||||
<Search className="h-4 w-4 shrink-0 text-dark-muted" />
|
||||
<input
|
||||
type="search"
|
||||
value={searchTerm}
|
||||
onChange={(event) => setSearchTerm(event.target.value)}
|
||||
className="min-w-0 flex-1 bg-transparent text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted"
|
||||
placeholder="Buscar nome ou e-mail"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchTerm('')}
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-dark-muted transition-colors hover:bg-dark-card hover:text-dark-text"
|
||||
aria-label="Limpar busca"
|
||||
title="Limpar busca"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 rounded-lg border border-dark-border bg-dark-input p-1">
|
||||
{statusOptions.map((option) => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
onClick={() => setStatusFilter(option.key)}
|
||||
className={`h-8 cursor-pointer rounded-md px-3 text-sm font-semibold transition-colors ${
|
||||
statusFilter === option.key
|
||||
? 'bg-dark-card text-dark-text shadow-sm'
|
||||
: 'text-dark-muted hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
<span className="ml-1 text-xs opacity-70">{statusCounts[option.key]}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="divide-y divide-dark-border" aria-label="Carregando usuários">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<div key={`user-skeleton-${index}`} className="grid grid-cols-[1.4fr_1fr_120px_140px_88px] gap-5 px-5 py-4">
|
||||
{Array.from({ length: 5 }).map((__, column) => (
|
||||
<div key={`user-skeleton-${index}-${column}`} className="skeleton h-4" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : users.length === 0 ? (
|
||||
<div className="flex min-h-[360px] flex-col items-center justify-center px-6 py-12 text-center">
|
||||
<div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-dark-border bg-dark-input text-brand-primary">
|
||||
<UserPlus className="h-7 w-7" />
|
||||
</div>
|
||||
<p className="text-lg font-bold text-dark-text">Nenhum usuário cadastrado</p>
|
||||
<p className="mt-2 max-w-md text-sm leading-6 text-dark-muted">Crie o primeiro acesso individual para tirar o uso compartilhado do login administrativo.</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCreateModal}
|
||||
className="mt-5 inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90"
|
||||
>
|
||||
<UserPlus className="h-4 w-4" />
|
||||
Criar primeiro acesso
|
||||
</button>
|
||||
</div>
|
||||
) : filteredUsers.length === 0 ? (
|
||||
<div className="flex min-h-[320px] flex-col items-center justify-center px-6 py-12 text-center">
|
||||
<div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-dark-border bg-dark-input text-dark-muted">
|
||||
<Search className="h-7 w-7" />
|
||||
</div>
|
||||
<p className="text-lg font-bold text-dark-text">Nenhum resultado</p>
|
||||
<p className="mt-2 max-w-md text-sm leading-6 text-dark-muted">Não encontramos usuários com os filtros atuais.</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearFilters}
|
||||
className="mt-5 inline-flex h-10 cursor-pointer items-center justify-center rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary"
|
||||
>
|
||||
Limpar filtros
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[900px] table-fixed text-left">
|
||||
<thead className="border-b border-dark-border bg-dark-input/35 text-xs uppercase tracking-widest text-dark-muted">
|
||||
<tr>
|
||||
<th className="w-[34%] px-5 py-3 font-bold">Usuário</th>
|
||||
<th className="w-[24%] px-5 py-3 font-bold">E-mail</th>
|
||||
<th className="w-[16%] px-5 py-3 font-bold">Perfil</th>
|
||||
<th className="w-[14%] px-5 py-3 font-bold">Status</th>
|
||||
<th className="w-[12%] px-5 py-3 text-right font-bold">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{filteredUsers.map((user) => (
|
||||
<tr key={user.id} className="text-sm transition-colors hover:bg-dark-input/45">
|
||||
<td className="px-5 py-4">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-primary/10 text-sm font-bold text-brand-primary">
|
||||
{getInitials(user.name)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate font-bold text-dark-text">{user.name}</p>
|
||||
<p className="mt-0.5 text-xs font-semibold text-dark-muted">ID {user.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<div className="flex min-w-0 items-center gap-2 text-dark-muted">
|
||||
<Mail className="h-4 w-4 shrink-0" />
|
||||
<span className="truncate font-semibold">{user.email}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<span className="inline-flex rounded-full border border-brand-primary/20 bg-brand-primary/10 px-2.5 py-1 text-xs font-bold text-brand-primary">
|
||||
{getUserRoleLabel(user)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold ${
|
||||
user.isActive ? 'bg-emerald-500/10 text-emerald-300' : 'bg-red-500/10 text-red-300'
|
||||
}`}>
|
||||
<span className={`h-1.5 w-1.5 rounded-full ${user.isActive ? 'bg-emerald-300' : 'bg-red-300'}`} />
|
||||
{user.isActive ? 'Ativo' : 'Inativo'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4">
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditModal(user)}
|
||||
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-brand-primary/50 hover:text-brand-primary"
|
||||
aria-label={`Editar ${user.name}`}
|
||||
title="Editar"
|
||||
>
|
||||
<Edit3 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setNotice(null);
|
||||
setUserToDelete(user);
|
||||
}}
|
||||
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-red-400/50 hover:text-red-300"
|
||||
aria-label={`Excluir ${user.name}`}
|
||||
title="Excluir"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/70 px-4 py-6">
|
||||
<div className="w-full max-w-2xl overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-2xl">
|
||||
<div className="flex items-start justify-between gap-4 border-b border-dark-border px-5 py-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-brand-primary">
|
||||
{editingUser ? <Edit3 className="h-5 w-5" /> : <UserPlus className="h-5 w-5" />}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-dark-text">{editingUser ? 'Editar usuário' : 'Novo acesso'}</h2>
|
||||
<p className="mt-1 text-sm leading-5 text-dark-muted">
|
||||
{editingUser ? 'Atualize identificação, status e senha.' : 'Crie uma credencial individual para o painel.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg text-dark-muted transition-colors hover:bg-dark-input hover:text-dark-text"
|
||||
aria-label="Fechar"
|
||||
title="Fechar"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={editingUser ? handleUpdateUser : handleCreateUser}>
|
||||
<div className="space-y-5 p-5">
|
||||
<section>
|
||||
<div className="mb-3">
|
||||
<h3 className="text-sm font-bold text-dark-text">Identificação</h3>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Use um nome reconhecível e um e-mail individual.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<label className="block">
|
||||
<span className="mb-2 block text-xs font-bold uppercase tracking-widest text-dark-muted">Nome</span>
|
||||
<div className={inputWrapClassName}>
|
||||
<UserIcon className="h-4 w-4 shrink-0 text-dark-muted" />
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
className={inputClassName}
|
||||
placeholder="Nome completo"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-2 block text-xs font-bold uppercase tracking-widest text-dark-muted">E-mail</span>
|
||||
<div className={inputWrapClassName}>
|
||||
<AtSign className="h-4 w-4 shrink-0 text-dark-muted" />
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
className={inputClassName}
|
||||
placeholder="usuario@empresa.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="mb-3">
|
||||
<h3 className="text-sm font-bold text-dark-text">{editingUser ? 'Senha' : 'Senha inicial'}</h3>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{editingUser ? 'Mantenha a senha atual ou defina uma nova.' : 'Gere uma senha temporária ou defina uma senha manual.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPasswordMode('auto')}
|
||||
className={`cursor-pointer rounded-xl border p-4 text-left transition-colors ${
|
||||
passwordMode === 'auto'
|
||||
? 'border-brand-primary/50 bg-brand-primary/10 text-dark-text'
|
||||
: 'border-dark-border bg-dark-input text-dark-muted hover:border-brand-primary/35 hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm font-bold">
|
||||
<KeyRound className="h-4 w-4" />
|
||||
{editingUser ? 'Manter senha' : 'Gerar senha'}
|
||||
</span>
|
||||
<span className="mt-1 block text-xs font-semibold opacity-80">
|
||||
{editingUser ? 'Não altera a credencial atual.' : 'Mostra uma senha para copiar após criar.'}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPasswordMode('manual')}
|
||||
className={`cursor-pointer rounded-xl border p-4 text-left transition-colors ${
|
||||
passwordMode === 'manual'
|
||||
? 'border-brand-primary/50 bg-brand-primary/10 text-dark-text'
|
||||
: 'border-dark-border bg-dark-input text-dark-muted hover:border-brand-primary/35 hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm font-bold">
|
||||
<Edit3 className="h-4 w-4" />
|
||||
{editingUser ? 'Alterar senha' : 'Definir senha'}
|
||||
</span>
|
||||
<span className="mt-1 block text-xs font-semibold opacity-80">
|
||||
Use quando a senha já será combinada fora do sistema.
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{passwordMode === 'manual' && (
|
||||
<div className="mt-3">
|
||||
<div className={inputWrapClassName}>
|
||||
<KeyRound className="h-4 w-4 shrink-0 text-dark-muted" />
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
className={inputClassName}
|
||||
placeholder="Mínimo de 6 caracteres"
|
||||
minLength={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{editingUser && (
|
||||
<label className="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-dark-border bg-dark-input px-4 py-3">
|
||||
<div>
|
||||
<span className="block text-sm font-bold text-dark-text">Usuário ativo</span>
|
||||
<span className="mt-0.5 block text-xs font-semibold text-dark-muted">Usuários inativos não conseguem entrar.</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isActive}
|
||||
onChange={(event) => setIsActive(event.target.checked)}
|
||||
className="h-5 w-5 cursor-pointer accent-brand-primary"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{notice && (
|
||||
<div className={`rounded-xl border px-3 py-3 text-sm font-semibold ${noticeClass}`}>
|
||||
<div className="flex items-start gap-2">
|
||||
{notice.tone === 'error' ? <X className="mt-0.5 h-4 w-4 shrink-0" /> : <Check className="mt-0.5 h-4 w-4 shrink-0" />}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p>{notice.text}</p>
|
||||
{notice.temporaryPassword && (
|
||||
<div className="mt-3 flex flex-col gap-2 sm:flex-row">
|
||||
<code className="min-w-0 flex-1 truncate rounded-lg bg-black/25 px-3 py-2 text-amber-100">
|
||||
{notice.temporaryPassword}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copyTemporaryPassword}
|
||||
className="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-amber-400/30 px-3 text-xs font-bold text-amber-100 transition-colors hover:bg-amber-400/10"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
{copyLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col-reverse gap-2 border-t border-dark-border bg-dark-input/35 px-5 py-4 sm:flex-row sm:justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
disabled={isSubmitting}
|
||||
className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
|
||||
{editingUser ? 'Salvar alterações' : 'Criar acesso'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{userToDelete && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4 py-6">
|
||||
<div className="w-full max-w-md overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-2xl">
|
||||
<div className="flex items-start gap-3 border-b border-dark-border px-5 py-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-red-500/25 bg-red-500/10 text-red-300">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-dark-text">Excluir usuário</h2>
|
||||
<p className="mt-1 text-sm leading-5 text-dark-muted">Esta ação remove o acesso imediatamente.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4 p-5">
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input p-4">
|
||||
<p className="font-bold text-dark-text">{userToDelete.name}</p>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">{userToDelete.email}</p>
|
||||
</div>
|
||||
|
||||
{notice?.tone === 'error' && (
|
||||
<div className={`rounded-xl border px-3 py-3 text-sm font-semibold ${noticeClass}`}>
|
||||
{notice.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (isSubmitting) return;
|
||||
setUserToDelete(null);
|
||||
setNotice(null);
|
||||
}}
|
||||
disabled={isSubmitting}
|
||||
className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeleteUser}
|
||||
disabled={isSubmitting}
|
||||
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-red-500 px-4 text-sm font-bold text-white transition-colors hover:bg-red-400 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
Excluir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminUsers;
|
||||
@@ -1,450 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { AlertTriangle, CheckCircle2, Clock, Megaphone, RefreshCw, RotateCcw, Send, Users, XCircle } from 'lucide-react';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import type { CampaignGroup, CampaignPreview, CampaignProcessSummary, CampaignQueueSummary, CampaignStatus } from '../types';
|
||||
import { fetchCampaignPreview, fetchCampaigns, processCampaignsNow, retryCampaignGroup } from '../dataService';
|
||||
|
||||
const statusLabels: Record<CampaignStatus, string> = {
|
||||
pending: 'Pendente',
|
||||
processing: 'Processando',
|
||||
sent: 'Enviada',
|
||||
failed: 'Falhou',
|
||||
skipped: 'Ignorada'
|
||||
};
|
||||
|
||||
type StatusVisual = {
|
||||
accent: string;
|
||||
bg: string;
|
||||
border: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
type PreviewFilter = 'all' | 'ready' | 'near' | 'below';
|
||||
|
||||
const statusStyles: Record<CampaignStatus, StatusVisual> = {
|
||||
pending: { accent: '#FFC247', bg: 'rgba(255, 194, 71, 0.10)', border: 'rgba(255, 194, 71, 0.28)', text: '#FFC247' },
|
||||
processing: { accent: '#25C2FF', bg: 'rgba(37, 194, 255, 0.10)', border: 'rgba(37, 194, 255, 0.28)', text: '#25C2FF' },
|
||||
sent: { accent: '#52DFA0', bg: 'rgba(82, 223, 160, 0.10)', border: 'rgba(82, 223, 160, 0.28)', text: '#52DFA0' },
|
||||
failed: { accent: '#FF7A9B', bg: 'rgba(255, 122, 155, 0.11)', border: 'rgba(255, 122, 155, 0.32)', text: '#FF7A9B' },
|
||||
skipped: { accent: '#8c9298', bg: 'rgba(140, 146, 152, 0.08)', border: 'rgba(140, 146, 152, 0.24)', text: '#b3b7bb' }
|
||||
};
|
||||
|
||||
const statusIcons: Record<CampaignStatus, typeof Clock> = {
|
||||
pending: Clock,
|
||||
processing: RefreshCw,
|
||||
sent: CheckCircle2,
|
||||
failed: XCircle,
|
||||
skipped: AlertTriangle
|
||||
};
|
||||
|
||||
const formatDate = (value?: string | null) => {
|
||||
if (!value) return '-';
|
||||
return new Date(value).toLocaleString('pt-BR');
|
||||
};
|
||||
|
||||
const formatDelta = (value: number) => `${value} un.`;
|
||||
|
||||
const NEAR_THRESHOLD_PERCENT = 80;
|
||||
|
||||
const statusPillStyle = (status: CampaignStatus) => {
|
||||
const style = statusStyles[status];
|
||||
return {
|
||||
backgroundColor: style.bg,
|
||||
borderColor: style.border,
|
||||
color: style.text
|
||||
};
|
||||
};
|
||||
|
||||
const CampaignsSkeleton = () => (
|
||||
<div className="space-y-6" aria-label="Carregando campanhas">
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
{[0, 1, 2, 3, 4].map(item => (
|
||||
<div key={`campaign-kpi-skeleton-${item}`} className="bg-dark-card border border-dark-border rounded-2xl p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="skeleton h-3 w-24" />
|
||||
<div className="skeleton h-4 w-4 rounded-full" />
|
||||
</div>
|
||||
<div className="skeleton mt-4 h-7 w-12" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
{[0, 1].map(section => (
|
||||
<div key={`campaign-card-skeleton-${section}`} className="bg-dark-card border border-dark-border rounded-2xl p-6">
|
||||
<div className="skeleton h-5 w-48" />
|
||||
<div className="mt-5 space-y-3">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`campaign-card-row-skeleton-${section}-${item}`} className="rounded-xl border border-dark-border p-3">
|
||||
<div className="skeleton h-4 w-3/5" />
|
||||
<div className="mt-3 skeleton h-2 w-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-card border border-dark-border rounded-2xl overflow-hidden">
|
||||
<div className="border-b border-dark-border p-4">
|
||||
<div className="grid grid-cols-[1.5fr_130px_90px_80px_90px_150px_110px] gap-5">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(item => (
|
||||
<div key={`campaign-table-head-skeleton-${item}`} className="skeleton h-3" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 space-y-5">
|
||||
{[0, 1, 2, 3, 4, 5].map(row => (
|
||||
<div key={`campaign-table-row-skeleton-${row}`} className="grid grid-cols-[1.5fr_130px_90px_80px_90px_150px_110px] gap-5">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(column => (
|
||||
<div key={`campaign-table-cell-skeleton-${row}-${column}`} className="skeleton h-4" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Campaigns = () => {
|
||||
const [summary, setSummary] = useState<CampaignQueueSummary | null>(null);
|
||||
const [preview, setPreview] = useState<CampaignPreview | null>(null);
|
||||
const [processResult, setProcessResult] = useState<CampaignProcessSummary | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [previewFilter, setPreviewFilter] = useState<PreviewFilter>('all');
|
||||
|
||||
const loadCampaigns = async () => {
|
||||
setIsLoading(true);
|
||||
const [campaignsData, previewData] = await Promise.all([
|
||||
fetchCampaigns(),
|
||||
fetchCampaignPreview()
|
||||
]);
|
||||
setSummary(campaignsData);
|
||||
setPreview(previewData);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Campaign state is loaded from the backend after the protected route mounts.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
void loadCampaigns();
|
||||
}, []);
|
||||
|
||||
const groupedCounts = useMemo(() => {
|
||||
const counts: Record<CampaignStatus, number> = {
|
||||
pending: 0,
|
||||
processing: 0,
|
||||
sent: 0,
|
||||
failed: 0,
|
||||
skipped: 0
|
||||
};
|
||||
summary?.groups.forEach(group => {
|
||||
counts[group.status] += 1;
|
||||
});
|
||||
return counts;
|
||||
}, [summary]);
|
||||
|
||||
const threshold = summary?.threshold ?? preview?.threshold ?? 100;
|
||||
const previewProducts = useMemo(() => {
|
||||
const ready = (preview?.readyProducts || []).map(product => ({ ...product, isReady: true }));
|
||||
const below = (preview?.belowThresholdProducts || []).map(product => ({ ...product, isReady: false }));
|
||||
return [...ready, ...below].sort((a, b) => Number(b.isReady) - Number(a.isReady) || b.total_delta - a.total_delta);
|
||||
}, [preview]);
|
||||
|
||||
const previewProductRows = useMemo(() => {
|
||||
return previewProducts.map(product => {
|
||||
const progress = threshold ? Math.min(100, (product.total_delta / threshold) * 100) : 0;
|
||||
return {
|
||||
...product,
|
||||
progress,
|
||||
isNear: !product.isReady && progress >= NEAR_THRESHOLD_PERCENT
|
||||
};
|
||||
});
|
||||
}, [previewProducts, threshold]);
|
||||
|
||||
const filteredPreviewProducts = useMemo(() => {
|
||||
switch (previewFilter) {
|
||||
case 'ready':
|
||||
return previewProductRows.filter(product => product.isReady);
|
||||
case 'near':
|
||||
return previewProductRows.filter(product => product.isNear);
|
||||
case 'below':
|
||||
return previewProductRows.filter(product => !product.isReady);
|
||||
default:
|
||||
return previewProductRows;
|
||||
}
|
||||
}, [previewFilter, previewProductRows]);
|
||||
|
||||
const previewFilterOptions = useMemo(() => [
|
||||
{ key: 'all' as const, label: 'Todos', count: previewProductRows.length },
|
||||
{ key: 'ready' as const, label: 'Prontos', count: previewProductRows.filter(product => product.isReady).length },
|
||||
{ key: 'near' as const, label: 'Quase prontos', count: previewProductRows.filter(product => product.isNear).length },
|
||||
{ key: 'below' as const, label: 'Abaixo', count: previewProductRows.filter(product => !product.isReady).length }
|
||||
], [previewProductRows]);
|
||||
|
||||
const resultStats = processResult ? [
|
||||
{ label: 'Processados', value: processResult.claimed, color: '#25C2FF' },
|
||||
{ label: 'Enviados', value: processResult.sentGroups, color: '#52DFA0' },
|
||||
{ label: 'Falhas', value: processResult.failedGroups, color: '#FF7A9B' },
|
||||
{ label: 'Abaixo do limite', value: processResult.pendingBelowThresholdGroups, color: '#FFC247' }
|
||||
] : [];
|
||||
|
||||
const statusSummary = (Object.keys(statusLabels) as CampaignStatus[]).map(status => ({
|
||||
status,
|
||||
label: statusLabels[status],
|
||||
count: groupedCounts[status],
|
||||
Icon: statusIcons[status],
|
||||
style: statusStyles[status]
|
||||
}));
|
||||
|
||||
const shouldShowSkeleton = isLoading && !summary && !preview;
|
||||
const isRefreshing = isLoading && Boolean(summary || preview);
|
||||
|
||||
const handleProcessNow = async () => {
|
||||
setIsProcessing(true);
|
||||
const result = await processCampaignsNow();
|
||||
setProcessResult(result);
|
||||
await loadCampaigns();
|
||||
setIsProcessing(false);
|
||||
};
|
||||
|
||||
const handleRetry = async (group: CampaignGroup) => {
|
||||
setIsProcessing(true);
|
||||
await retryCampaignGroup(group.baseProductName);
|
||||
await loadCampaigns();
|
||||
setIsProcessing(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-2 text-dark-text">Campanhas</h1>
|
||||
<p className="text-dark-muted font-medium">Fila de reposição, prévia de envio e histórico das campanhas do WhatsApp.</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={() => void loadCampaigns()}
|
||||
disabled={isLoading || isProcessing}
|
||||
className="inline-flex items-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl hover:border-brand-primary transition-colors text-sm font-medium text-dark-text disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
<RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
|
||||
Atualizar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleProcessNow}
|
||||
disabled={isProcessing || !preview?.readyProducts.length}
|
||||
className="inline-flex items-center gap-2 bg-brand-primary text-brand-contrast px-4 py-2.5 rounded-xl hover:opacity-90 transition-opacity text-sm font-bold disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
|
||||
>
|
||||
<Send size={16} />
|
||||
Processar agora
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing || isProcessing} label={isProcessing ? 'Processando campanhas' : 'Atualizando campanhas'} />
|
||||
|
||||
{processResult && (
|
||||
<div className="bg-dark-card border border-dark-border rounded-2xl p-3">
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{resultStats.map(item => (
|
||||
<div key={item.label} className="flex items-center justify-between gap-3 rounded-xl bg-dark-input/55 px-3 py-2">
|
||||
<span className="flex items-center gap-2 text-xs font-bold uppercase tracking-wide text-dark-muted">
|
||||
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="text-sm font-bold text-dark-text">{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{shouldShowSkeleton ? (
|
||||
<CampaignsSkeleton />
|
||||
) : (
|
||||
<div className={isRefreshing || isProcessing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing || isProcessing}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
{statusSummary.map(({ status, label, count, Icon, style }) => {
|
||||
return (
|
||||
<div key={status} className="bg-dark-card border border-dark-border rounded-2xl p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-dark-muted">{label}</span>
|
||||
<Icon className="w-4 h-4" style={{ color: style.accent }} />
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-dark-text">{count}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
<div className="bg-dark-card border border-dark-border rounded-2xl p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Megaphone className="w-5 h-5 text-brand-primary" />
|
||||
<h2 className="text-lg font-bold text-dark-text">Prévia do próximo envio</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Produtos prontos</p>
|
||||
<p className="text-dark-text font-semibold">{preview?.productsText || 'Nenhum produto atingiu o limite ainda.'}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-dark-input rounded-xl p-3 border border-dark-border">
|
||||
<p className="text-xs text-dark-muted mb-1">Clientes alvo</p>
|
||||
<p className="text-xl font-bold text-dark-text">{preview?.customerCount ?? 0}</p>
|
||||
</div>
|
||||
<div className="bg-dark-input rounded-xl p-3 border border-dark-border">
|
||||
<p className="text-xs text-dark-muted mb-1">Limite por produto</p>
|
||||
<p className="text-xl font-bold text-dark-text">{summary?.threshold ?? preview?.threshold ?? 100}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{previewFilterOptions.map(option => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
onClick={() => setPreviewFilter(option.key)}
|
||||
className={`inline-flex h-8 cursor-pointer items-center gap-2 rounded-lg border px-3 text-xs font-bold transition-colors ${
|
||||
previewFilter === option.key
|
||||
? 'border-brand-primary bg-brand-primary/10 text-dark-text'
|
||||
: 'border-dark-border bg-dark-input/45 text-dark-muted hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
<span className="rounded-full bg-dark-card px-1.5 py-0.5 text-[10px] text-dark-muted">{option.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="max-h-[34rem] space-y-2 overflow-y-auto pr-1">
|
||||
{filteredPreviewProducts.map(product => {
|
||||
const accent = product.isReady ? statusStyles.sent.accent : statusStyles.pending.accent;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={product.baseProduct}
|
||||
className="rounded-xl border border-dark-border bg-dark-input/45 p-3"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<p className={`truncate text-sm font-bold ${product.isReady ? 'text-dark-text' : 'text-dark-muted'}`}>
|
||||
{product.baseProduct}
|
||||
</p>
|
||||
<p className="mt-1 text-[11px] font-semibold text-dark-muted">
|
||||
{formatDelta(product.total_delta)} de {formatDelta(threshold)}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className="rounded-full border px-2.5 py-1 text-[11px] font-bold"
|
||||
style={product.isReady ? statusPillStyle('sent') : statusPillStyle('pending')}
|
||||
>
|
||||
{product.isReady ? 'Pronto' : `${Math.round(product.progress)}%`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3 h-1.5 overflow-hidden rounded-full bg-dark-border/70">
|
||||
<div className="h-full rounded-full" style={{ width: `${product.progress}%`, backgroundColor: accent }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!filteredPreviewProducts.length && (
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/45 p-4 text-sm font-semibold text-dark-muted">
|
||||
Nenhum produto nesta visualização.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-card border border-dark-border rounded-2xl p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-brand-primary" />
|
||||
<h2 className="text-lg font-bold text-dark-text">Top clientes da campanha</h2>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-border rounded-xl border border-dark-border overflow-hidden">
|
||||
{(preview?.customersPreview || []).map((customer, index) => (
|
||||
<div key={`${customer.fone}-${customer.nome}`} className="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-dark-input text-xs font-bold text-dark-muted">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-semibold text-dark-text truncate">{customer.nome}</p>
|
||||
<p className="text-xs text-dark-muted">{customer.fone}</p>
|
||||
</div>
|
||||
<span className="ml-auto text-xs font-bold text-brand-primary shrink-0">{customer.total_comprado || 0} un.</span>
|
||||
</div>
|
||||
))}
|
||||
{!preview?.customersPreview.length && (
|
||||
<div className="p-4 text-sm font-semibold text-dark-muted">Nenhum cliente com telefone válido encontrado.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-card border border-dark-border rounded-2xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-dark-header border-b border-dark-border text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Produto</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Status</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Delta</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Itens</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Tentativas</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Atualizado</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px] text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{(summary?.groups || []).map(group => {
|
||||
const Icon = statusIcons[group.status];
|
||||
return (
|
||||
<tr key={group.key} className="hover:bg-dark-input/40 transition-colors">
|
||||
<td className="px-6 py-3">
|
||||
<p className="font-semibold text-dark-text">{group.baseProductName}</p>
|
||||
{group.lastError && <p className="text-xs text-red-400 mt-1 max-w-md truncate">{group.lastError}</p>}
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span
|
||||
className="inline-flex items-center gap-1.5 border px-2.5 py-1 rounded-full text-xs font-bold"
|
||||
style={statusPillStyle(group.status)}
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
{statusLabels[group.status]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3 font-bold text-dark-text">{formatDelta(group.totalDelta)}</td>
|
||||
<td className="px-6 py-3 text-dark-muted">{group.rowCount}</td>
|
||||
<td className="px-6 py-3 text-dark-muted">{group.attempts}</td>
|
||||
<td className="px-6 py-3 text-dark-muted whitespace-nowrap">{formatDate(group.updatedAt)}</td>
|
||||
<td className="px-6 py-3 text-right">
|
||||
{(group.status === 'failed' || group.status === 'skipped') && (
|
||||
<button
|
||||
onClick={() => void handleRetry(group)}
|
||||
disabled={isProcessing}
|
||||
className="inline-flex items-center gap-1.5 text-xs font-bold text-brand-primary hover:opacity-80 disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
Reprocessar
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{!summary?.groups.length && !isLoading && (
|
||||
<div className="p-8 text-center text-dark-muted">Nenhuma campanha registrada ainda.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Campaigns;
|
||||
@@ -1,240 +1,55 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { useParams, Link, useOutletContext } from 'react-router-dom';
|
||||
import { User, Tag, Package, DollarSign, Clock, Phone, ChevronDown, ShoppingBag, ReceiptText } from 'lucide-react';
|
||||
import { AreaChart, Area, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
import BackButton from '../components/BackButton';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import PaginationControls from '../components/PaginationControls';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import type { ClientDetailsAnalytics, DateRange, OrderData } from '../types';
|
||||
import { fetchClientDetailsAnalytics } from '../dataService';
|
||||
import { formatDisplayName, removeTrailingSellerId } from '../displayFormatters';
|
||||
|
||||
const CHART_GRID_COLOR = 'var(--chart-grid)';
|
||||
const CHART_AXIS_COLOR = 'var(--chart-axis)';
|
||||
const CHART_CURSOR_COLOR = 'var(--chart-cursor)';
|
||||
const CHART_DETAIL_BAR_COLOR = 'var(--chart-detail-bar)';
|
||||
const WEEKDAY_BAR_COLOR = '#25C2FF';
|
||||
const HOUR_BAR_COLOR = '#52DFA0';
|
||||
|
||||
const formatDateKey = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
type CustomTooltipProps = {
|
||||
active?: boolean;
|
||||
payload?: Array<{ value: number }>;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
type PatternPoint = {
|
||||
label: string;
|
||||
value: number;
|
||||
};
|
||||
|
||||
const getTopPatternPoint = (points: PatternPoint[]) => (
|
||||
points.reduce<PatternPoint | null>((topPoint, point) => {
|
||||
if (!topPoint || point.value > topPoint.value) return point;
|
||||
return topPoint;
|
||||
}, null)
|
||||
);
|
||||
|
||||
const getPatternShare = (value: number, total: number) => (
|
||||
total > 0 ? Math.round((value / total) * 100) : 0
|
||||
);
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="rounded-xl bg-dark-card p-3 shadow-lg">
|
||||
<p className="mb-1 font-bold text-brand-primary">{label}</p>
|
||||
<p className="m-0 text-dark-text">
|
||||
Gasto: {new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(payload[0].value)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const PatternTooltip = ({ active, payload, label }: CustomTooltipProps) => {
|
||||
if (active && payload && payload.length) {
|
||||
const value = payload[0].value;
|
||||
return (
|
||||
<div className="rounded-xl bg-dark-card p-3 shadow-lg">
|
||||
<p className="mb-1 font-bold text-brand-primary">{label}</p>
|
||||
<p className="m-0 text-dark-text">
|
||||
{value} {value === 1 ? 'pedido' : 'pedidos'}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getOrderMetadata = (order: OrderData) => {
|
||||
const sellerName = formatDisplayName(removeTrailingSellerId(order.nome_vendedor || ''));
|
||||
|
||||
return [
|
||||
order.cliente_nome_fantasia ? `Fantasia: ${formatDisplayName(order.cliente_nome_fantasia)}` : '',
|
||||
sellerName ? `Vendedor: ${sellerName}` : '',
|
||||
order.marketplace ? `Marketplace: ${order.marketplace}` : '',
|
||||
order.canal_venda ? `Canal: ${order.canal_venda}` : '',
|
||||
order.numero_ecommerce ? `E-commerce: ${order.numero_ecommerce}` : ''
|
||||
].filter(Boolean);
|
||||
};
|
||||
|
||||
const ClientDetailsSkeleton = () => (
|
||||
<div className="space-y-6" aria-label="Carregando cliente">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="skeleton h-4 w-20" />
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="skeleton h-16 w-16 rounded-2xl" />
|
||||
<div>
|
||||
<div className="skeleton h-7 w-56" />
|
||||
<div className="skeleton mt-3 h-4 w-72" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="skeleton h-10 w-64" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`client-details-kpi-skeleton-${item}`} className="bg-dark-card p-5 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="flex justify-between gap-5">
|
||||
<div className="w-full">
|
||||
<div className="skeleton h-3 w-32" />
|
||||
<div className="skeleton mt-3 h-7 w-28" />
|
||||
</div>
|
||||
<div className="skeleton h-11 w-11 shrink-0 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="skeleton h-5 w-36" />
|
||||
<div className="mt-8 skeleton h-[320px] w-full" />
|
||||
</div>
|
||||
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="skeleton h-5 w-44" />
|
||||
<div className="skeleton mt-2 h-4 w-64" />
|
||||
</div>
|
||||
<div className="skeleton h-7 w-28 rounded-full" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
{[0, 1].map(item => (
|
||||
<div key={`client-pattern-skeleton-${item}`} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="skeleton h-4 w-40" />
|
||||
<div className="mt-5 flex h-56 items-end gap-3">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(bar => (
|
||||
<div key={`client-pattern-bar-skeleton-${item}-${bar}`} className="skeleton flex-1" style={{ height: `${20 + ((bar * 17) % 65)}%` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`client-order-skeleton-${item}`} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-4 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="skeleton h-8 w-8 rounded-lg" />
|
||||
<div>
|
||||
<div className="skeleton h-4 w-48" />
|
||||
<div className="skeleton mt-2 h-3 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="skeleton h-8 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
import { ArrowLeft, User, Tag, Package, DollarSign, Clock } from 'lucide-react';
|
||||
import type { OrderData } from '../types';
|
||||
import { parseOrderDate } from '../dataService';
|
||||
|
||||
const ClientDetails = () => {
|
||||
const { clientToken } = useParams<{ clientToken: string }>();
|
||||
const decodedClientToken = clientToken ? decodeURIComponent(clientToken) : '';
|
||||
const { dateRange, setDateRange } = useOutletContext<{
|
||||
dateRange: DateRange,
|
||||
setDateRange: (range: DateRange) => void
|
||||
}>();
|
||||
const [details, setDetails] = useState<ClientDetailsAnalytics | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [ordersPerPage, setOrdersPerPage] = useState(5);
|
||||
const [expandedOrderIds, setExpandedOrderIds] = useState<Set<string>>(() => new Set());
|
||||
const { name } = useParams<{ name: string }>();
|
||||
const decodedName = name ? decodeURIComponent(name) : '';
|
||||
const { ordersData } = useOutletContext<{ ordersData: OrderData[] }>();
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
const { groupedOrders, totalSpent, totalItems } = useMemo(() => {
|
||||
const orders = ordersData;
|
||||
const clientOrders = orders.filter(order => {
|
||||
const clientName = order.Nome_Cliente || `Cliente Desconhecido (Pedido ${order.Valor_Pedido})`;
|
||||
return clientName === decodedName;
|
||||
});
|
||||
|
||||
const groupedOrdersMap: Record<string, { date: string, orderId: string, orderTotal: number, items: OrderData[] }> = {};
|
||||
let totalSpent = 0;
|
||||
let totalItems = 0;
|
||||
|
||||
const loadClientDetails = async () => {
|
||||
if (!decodedClientToken) {
|
||||
if (isMounted) {
|
||||
setDetails(null);
|
||||
setIsLoading(false);
|
||||
}
|
||||
return;
|
||||
clientOrders.forEach(order => {
|
||||
totalSpent += (order.Quantidade * order.Valor_Unitario);
|
||||
totalItems += order.Quantidade;
|
||||
|
||||
// Use ID_Pedido if available, otherwise fallback to date and total order value
|
||||
const key = order.ID_Pedido || `${order.Data_Pedido}_${order.Valor_Pedido}`;
|
||||
if (!groupedOrdersMap[key]) {
|
||||
groupedOrdersMap[key] = {
|
||||
date: order.Data_Pedido,
|
||||
orderId: order.ID_Pedido || key,
|
||||
orderTotal: order.Valor_Pedido,
|
||||
items: []
|
||||
};
|
||||
}
|
||||
groupedOrdersMap[key].items.push(order);
|
||||
});
|
||||
|
||||
setIsLoading(true);
|
||||
const nextDetails = await fetchClientDetailsAnalytics(decodedClientToken, dateRange);
|
||||
// Sort grouped orders by date descending
|
||||
const groupedOrders = Object.values(groupedOrdersMap).sort((a, b) => {
|
||||
return parseOrderDate(b.date).getTime() - parseOrderDate(a.date).getTime();
|
||||
});
|
||||
|
||||
if (isMounted) {
|
||||
setDetails(nextDetails);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void loadClientDetails();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [dateRange, decodedClientToken]);
|
||||
return { groupedOrders, totalSpent, totalItems };
|
||||
}, [decodedName, ordersData]);
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR').format(value);
|
||||
};
|
||||
|
||||
const handleDateRangeChange = (range: DateRange) => {
|
||||
setCurrentPage(1);
|
||||
setExpandedOrderIds(new Set());
|
||||
setDateRange(range);
|
||||
};
|
||||
|
||||
const toggleOrder = (orderId: string) => {
|
||||
setExpandedOrderIds(current => {
|
||||
const next = new Set(current);
|
||||
if (next.has(orderId)) {
|
||||
next.delete(orderId);
|
||||
} else {
|
||||
next.add(orderId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading && !details) {
|
||||
return <ClientDetailsSkeleton />;
|
||||
}
|
||||
|
||||
if (!details?.hasClient) {
|
||||
if (!groupedOrders.length) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-zinc-500 dark:text-dark-muted font-medium">Cliente não encontrado.</p>
|
||||
@@ -243,40 +58,14 @@ const ClientDetails = () => {
|
||||
);
|
||||
}
|
||||
|
||||
const {
|
||||
chartData,
|
||||
groupedOrders,
|
||||
purchaseHours = [],
|
||||
purchaseHourRangeLabel = 'Últimos 60 dias',
|
||||
purchaseWeekdayRangeLabel = 'Todo período',
|
||||
purchaseWeekdays = [],
|
||||
allTimeOrderCount,
|
||||
clientName,
|
||||
clientPhone,
|
||||
periodAverageTicket,
|
||||
periodItems,
|
||||
periodOrderCount,
|
||||
periodSpent
|
||||
} = details;
|
||||
const displayName = clientName || 'Cliente';
|
||||
const totalPages = Math.ceil(groupedOrders.length / ordersPerPage);
|
||||
const safeCurrentPage = Math.min(currentPage, totalPages || 1);
|
||||
const startIndex = (safeCurrentPage - 1) * ordersPerPage;
|
||||
const paginatedOrders = groupedOrders.slice(startIndex, startIndex + ordersPerPage);
|
||||
const hasWeekdayPattern = purchaseWeekdays.some(day => day.value > 0);
|
||||
const hasHourPattern = purchaseHours.some(hour => hour.value > 0);
|
||||
const weekdayPatternTotal = purchaseWeekdays.reduce((total, day) => total + day.value, 0);
|
||||
const hourPatternTotal = purchaseHours.reduce((total, hour) => total + hour.value, 0);
|
||||
const topWeekday = getTopPatternPoint(purchaseWeekdays);
|
||||
const topHour = getTopPatternPoint(purchaseHours);
|
||||
const isRefreshing = isLoading && Boolean(details);
|
||||
const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header Area */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<BackButton fallbackTo="/clients" />
|
||||
<Link to="/clients" className="inline-flex items-center text-sm font-bold text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text transition-colors w-fit">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -284,277 +73,39 @@ const ClientDetails = () => {
|
||||
<User className="w-8 h-8 text-brand-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{displayName}</h1>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<p className="text-zinc-500 dark:text-dark-muted font-medium">
|
||||
{formatNumber(allTimeOrderCount)} pedidos no histórico completo
|
||||
</p>
|
||||
{clientPhone && (
|
||||
<>
|
||||
<span className="text-zinc-300 dark:text-dark-border">•</span>
|
||||
<span className="flex items-center gap-1.5 text-brand-primary font-bold text-sm bg-brand-primary/10 px-2 py-1 rounded-md">
|
||||
<Phone className="w-3.5 h-3.5" />
|
||||
{clientPhone}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{decodedName}</h1>
|
||||
<p className="text-zinc-500 dark:text-dark-muted font-medium">Histórico completo de compras</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DateRangePicker
|
||||
dateRange={dateRange}
|
||||
onChange={handleDateRangeChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
<div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
<div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Gasto no Período</p>
|
||||
<p className="text-2xl font-bold text-brand-primary">{formatCurrency(periodSpent)}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-brand-primary/10 rounded-xl text-brand-primary">
|
||||
<DollarSign size={22} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Ticket no Período</p>
|
||||
<p className="text-2xl font-bold text-dark-text">{formatCurrency(periodAverageTicket)}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-400">
|
||||
<ReceiptText size={22} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Total Pedidos</p>
|
||||
<p className="text-2xl font-bold text-dark-text">{formatNumber(periodOrderCount)}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-blue-500/10 rounded-xl text-blue-300">
|
||||
<ShoppingBag size={22} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Itens no Período</p>
|
||||
<p className="text-2xl font-bold text-dark-text">{formatNumber(periodItems)}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-purple-500/10 rounded-xl text-purple-300">
|
||||
<Package size={22} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">
|
||||
Gasto por {isSingleDayRange ? 'Horário' : 'Data'}
|
||||
</h3>
|
||||
{chartData.length === 0 ? (
|
||||
<div className="flex h-[320px] items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
Nenhum gasto no período selecionado.
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[320px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: isSingleDayRange ? 24 : 80 }}>
|
||||
<defs>
|
||||
<linearGradient id="clientSpendGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.38} />
|
||||
<stop offset="95%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.04} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
stroke={CHART_AXIS_COLOR}
|
||||
fontSize={10}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
interval={isSingleDayRange ? 2 : 0}
|
||||
angle={isSingleDayRange ? 0 : -45}
|
||||
textAnchor={isSingleDayRange ? 'middle' : 'end'}
|
||||
height={isSingleDayRange ? 24 : 80}
|
||||
/>
|
||||
<YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => formatCurrency(Number(value))} />
|
||||
<Tooltip content={<CustomTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="value"
|
||||
stroke={CHART_DETAIL_BAR_COLOR}
|
||||
strokeWidth={2.25}
|
||||
fill="url(#clientSpendGradient)"
|
||||
dot={{ r: 3, strokeWidth: 2, fill: 'var(--color-dark-card)', stroke: CHART_DETAIL_BAR_COLOR }}
|
||||
activeDot={{ r: 5, strokeWidth: 2, fill: CHART_DETAIL_BAR_COLOR, stroke: 'var(--color-dark-card)' }}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<section className="space-y-4">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Padrão de Compra</h3>
|
||||
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">Quando este cliente costuma comprar, separando histórico de data e horário confiável.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Dia</h4>
|
||||
{hasWeekdayPattern && topWeekday && (
|
||||
<p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs font-semibold text-zinc-600 dark:text-dark-muted">
|
||||
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: WEEKDAY_BAR_COLOR }} />
|
||||
<span>Dia mais forte: <span className="text-zinc-900 dark:text-dark-text">{topWeekday.label}</span></span>
|
||||
<span className="text-zinc-400 dark:text-dark-border">·</span>
|
||||
<span>{topWeekday.value} {topWeekday.value === 1 ? 'pedido' : 'pedidos'}</span>
|
||||
<span className="text-zinc-400 dark:text-dark-border">·</span>
|
||||
<span>{getPatternShare(topWeekday.value, weekdayPatternTotal)}%</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0 rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-600 dark:border-dark-border dark:bg-white/5 dark:text-dark-muted">
|
||||
{purchaseWeekdayRangeLabel}
|
||||
</span>
|
||||
<div className="flex gap-8">
|
||||
<div className="flex flex-col items-center">
|
||||
<p className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-1">Total Gasto</p>
|
||||
<p className="text-2xl font-bold text-brand-primary">{formatCurrency(totalSpent)}</p>
|
||||
</div>
|
||||
{hasWeekdayPattern ? (
|
||||
<div className="h-52">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={purchaseWeekdays} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
|
||||
<XAxis dataKey="label" stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} />
|
||||
<YAxis allowDecimals={false} stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<PatternTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
|
||||
<Bar dataKey="value" radius={[4, 4, 0, 0]}>
|
||||
{purchaseWeekdays.map(day => (
|
||||
<Cell key={`weekday-${day.label}`} fill={WEEKDAY_BAR_COLOR} fillOpacity={0.62} stroke={WEEKDAY_BAR_COLOR} strokeOpacity={0.9} strokeWidth={1.25} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-56 items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
Sem compras no período.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Horário</h4>
|
||||
{hasHourPattern && topHour && (
|
||||
<p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs font-semibold text-zinc-600 dark:text-dark-muted">
|
||||
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: HOUR_BAR_COLOR }} />
|
||||
<span>Horário mais forte: <span className="text-zinc-900 dark:text-dark-text">{topHour.label}</span></span>
|
||||
<span className="text-zinc-400 dark:text-dark-border">·</span>
|
||||
<span>{topHour.value} {topHour.value === 1 ? 'pedido' : 'pedidos'}</span>
|
||||
<span className="text-zinc-400 dark:text-dark-border">·</span>
|
||||
<span>{getPatternShare(topHour.value, hourPatternTotal)}%</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0 rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-600 dark:border-dark-border dark:bg-white/5 dark:text-dark-muted">
|
||||
{purchaseHourRangeLabel}
|
||||
</span>
|
||||
<div className="flex flex-col items-center">
|
||||
<p className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-1">Itens Comprados</p>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{totalItems}</p>
|
||||
</div>
|
||||
{hasHourPattern ? (
|
||||
<div className="h-52">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={purchaseHours} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
stroke={CHART_AXIS_COLOR}
|
||||
fontSize={10}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
interval={0}
|
||||
tickFormatter={(value) => Number(String(value).replace('h', '')) % 3 === 0 ? String(value) : ''}
|
||||
/>
|
||||
<YAxis allowDecimals={false} stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<PatternTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
|
||||
<Bar dataKey="value" radius={[4, 4, 0, 0]}>
|
||||
{purchaseHours.map(hour => (
|
||||
<Cell key={`hour-${hour.label}`} fill={HOUR_BAR_COLOR} fillOpacity={0.56} stroke={HOUR_BAR_COLOR} strokeOpacity={0.86} strokeWidth={1.1} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-56 items-center justify-center px-6 text-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
Sem horário de compra disponível para os últimos 60 dias.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/* Orders List */}
|
||||
<div className="flex flex-col gap-6">
|
||||
{paginatedOrders.length === 0 ? (
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-8 text-center shadow-sm">
|
||||
<p className="text-sm font-bold text-zinc-900 dark:text-dark-text">Nenhum pedido no período selecionado.</p>
|
||||
<p className="mt-1 text-sm text-zinc-500 dark:text-dark-muted">Altere o filtro de data para ver outros pedidos deste cliente.</p>
|
||||
</div>
|
||||
) : paginatedOrders.map((group) => {
|
||||
const isExpanded = expandedOrderIds.has(group.orderId);
|
||||
|
||||
return (
|
||||
<div key={group.orderId} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleOrder(group.orderId)}
|
||||
aria-expanded={isExpanded}
|
||||
className="flex w-full cursor-pointer items-center justify-between gap-4 bg-zinc-50/50 px-4 py-3 text-left transition-colors hover:bg-zinc-100/80 dark:bg-dark-header dark:hover:bg-dark-input/60"
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-zinc-200 bg-white text-brand-primary dark:border-dark-border dark:bg-dark-card">
|
||||
<Tag className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<h2 className="truncate text-sm font-bold uppercase tracking-wider text-zinc-700 dark:text-dark-text">
|
||||
Pedido ID: {group.orderId}
|
||||
</h2>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-bold text-zinc-400 dark:text-dark-muted">
|
||||
<span>{group.items.length} {group.items.length === 1 ? 'item' : 'itens'}</span>
|
||||
{group.date && (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{group.date}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{groupedOrders.map((group, groupIndex) => (
|
||||
<div key={groupIndex} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-header flex justify-between items-center">
|
||||
<h2 className="text-sm font-bold uppercase tracking-wider text-zinc-500 dark:text-dark-muted flex items-center gap-2">
|
||||
<Tag className="w-4 h-4 text-brand-primary" />
|
||||
Pedido ID: {group.orderId}
|
||||
</h2>
|
||||
<span className="text-sm font-bold text-brand-primary">
|
||||
Total do Pedido: {formatCurrency(group.orderTotal)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-3">
|
||||
<div className="text-right">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 dark:text-dark-muted">Total</p>
|
||||
<p className="text-sm font-bold text-brand-primary">{formatCurrency(group.orderTotal)}</p>
|
||||
</div>
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-500 transition-colors dark:border-dark-border dark:bg-dark-card dark:text-dark-muted">
|
||||
<ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{group.items.map((order, index) => {
|
||||
const metadata = getOrderMetadata(order);
|
||||
|
||||
return (
|
||||
|
||||
<div className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{group.items.map((order, index) => (
|
||||
<div key={`${order.ID_Produto}-${index}`} className="px-4 py-2 flex flex-col md:flex-row md:items-center justify-between gap-3 hover:bg-zinc-50/50 dark:hover:bg-dark-input/30 transition-colors">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
@@ -583,15 +134,6 @@ const ClientDetails = () => {
|
||||
<span className="text-zinc-500 dark:text-dark-muted font-medium">Preço: <span className="text-zinc-900 dark:text-dark-text font-bold">{formatCurrency(order.Valor_Unitario)}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
{metadata.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{metadata.map(value => (
|
||||
<span key={value} className="max-w-full break-all rounded-md border border-zinc-200 dark:border-dark-border px-2 py-0.5 text-[10px] font-bold text-zinc-500 dark:text-dark-muted">
|
||||
{value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-right shrink-0">
|
||||
@@ -599,32 +141,10 @@ const ClientDetails = () => {
|
||||
<p className="text-base font-bold text-zinc-900 dark:text-dark-text">{formatCurrency(order.Quantidade * order.Valor_Unitario)}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<PaginationControls
|
||||
totalItems={groupedOrders.length}
|
||||
currentPage={safeCurrentPage}
|
||||
totalPages={totalPages}
|
||||
pageSize={ordersPerPage}
|
||||
pageSizeOptions={[5, 10, 20, 50]}
|
||||
itemLabel="pedidos"
|
||||
pageSizeLabel="pedidos por página"
|
||||
startIndex={startIndex}
|
||||
endIndex={Math.min(startIndex + ordersPerPage, groupedOrders.length)}
|
||||
onPageChange={setCurrentPage}
|
||||
onPageSizeChange={(pageSize) => {
|
||||
setOrdersPerPage(pageSize);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="px-6 py-4 border border-zinc-200 dark:border-dark-border rounded-2xl bg-white dark:bg-dark-card"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,536 +1,121 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { useOutletContext, useNavigate } from 'react-router-dom';
|
||||
import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Line } from 'recharts';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
|
||||
import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import type { DashboardAnalytics, OrderData, DateRange } from '../types';
|
||||
import { applyDashboardColors, buildDashboardMetrics } from '../analytics/dashboard';
|
||||
import { fetchDashboardAnalytics } from '../dataService';
|
||||
import { averageRecentValues, formatDateBucketLabel, formatDateBucketLongLabel, getAutoDateBucket, getDateBucketKey, getMovingAverageWindow, type DateBucket } from '../chartUtils';
|
||||
import type { OrderData, DateRange } from '../types';
|
||||
import { parseOrderDate } from '../dataService';
|
||||
|
||||
const COLORS = [
|
||||
// 10 Strong Base Colors
|
||||
'#10b981', '#3b82f6', '#8b5cf6', '#f43f5e', '#f97316',
|
||||
'#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6',
|
||||
// 10 Softer Versions
|
||||
'#6ee7b7', '#93c5fd', '#c4b5fd', '#fda4af', '#fdba74',
|
||||
'#67e8f9', '#f9a8d4', '#fde047', '#a5b4fc', '#5eead4'
|
||||
];
|
||||
|
||||
const globalColorMap: Record<string, string> = {};
|
||||
let globalColorIndex = 0;
|
||||
|
||||
const getProductColor = (name: string) => {
|
||||
if (!globalColorMap[name]) {
|
||||
globalColorMap[name] = COLORS[globalColorIndex % COLORS.length];
|
||||
globalColorIndex++;
|
||||
}
|
||||
return globalColorMap[name];
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
|
||||
};
|
||||
|
||||
const formatCompactCurrency = (value: number) => {
|
||||
const absValue = Math.abs(value);
|
||||
const formatNumber = (nextValue: number) => Number.isInteger(nextValue)
|
||||
? String(nextValue)
|
||||
: nextValue.toLocaleString('pt-BR', { maximumFractionDigits: 1 });
|
||||
|
||||
if (absValue >= 1_000_000) return `${formatNumber(value / 1_000_000)}M`;
|
||||
if (absValue >= 1_000) return `${formatNumber(value / 1_000)}k`;
|
||||
return formatNumber(value);
|
||||
};
|
||||
|
||||
const formatHourKey = (hour: number) => `${String(hour).padStart(2, '0')}h`;
|
||||
|
||||
const formatDateKey = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const SELLER_COLORS = [
|
||||
'#25C2FF',
|
||||
'#52DFA0',
|
||||
'#A06BFF',
|
||||
'#FF8A63',
|
||||
'#FFC247',
|
||||
'#FF7A9B',
|
||||
'#18D6B5',
|
||||
'#FFA24A',
|
||||
'#82B8FF',
|
||||
'#B8E84D'
|
||||
];
|
||||
|
||||
const BAR_FILL_OPACITY = 0.5;
|
||||
const BAR_STROKE_OPACITY = 0.85;
|
||||
const PIE_FILL_OPACITY = 0.68;
|
||||
const CHART_GRID_COLOR = 'var(--chart-grid)';
|
||||
const CHART_AXIS_COLOR = 'var(--chart-axis)';
|
||||
const CHART_CURSOR_COLOR = 'var(--chart-cursor)';
|
||||
|
||||
type SellerMetricKey = 'revenue' | 'ticket' | 'orders';
|
||||
|
||||
type SellerTimeSeriesSeller = {
|
||||
id: string;
|
||||
seriesKey: string;
|
||||
name: string;
|
||||
fill: string;
|
||||
total: number;
|
||||
revenue: number;
|
||||
orders: number;
|
||||
};
|
||||
|
||||
type SellerTimeSeriesChartData = {
|
||||
date: string;
|
||||
movingAverage?: number;
|
||||
[key: string]: string | number | undefined;
|
||||
};
|
||||
|
||||
type SellerMetricConfig = {
|
||||
key: SellerMetricKey;
|
||||
label: string;
|
||||
title: string;
|
||||
fallbackDescription: string;
|
||||
trendDescription: string;
|
||||
emptyText: string;
|
||||
formatValue: (value: number) => string;
|
||||
formatTick: (value: number) => string;
|
||||
};
|
||||
|
||||
const sellerMetricOptions: SellerMetricConfig[] = [
|
||||
{
|
||||
key: 'revenue',
|
||||
label: 'Receita',
|
||||
title: 'Receita por Vendedor',
|
||||
fallbackDescription: 'Total por vendedor no período selecionado.',
|
||||
trendDescription: 'Evolução por data no período selecionado.',
|
||||
emptyText: 'Nenhuma receita com vendedor no período.',
|
||||
formatValue: formatCurrency,
|
||||
formatTick: formatCompactCurrency
|
||||
},
|
||||
{
|
||||
key: 'ticket',
|
||||
label: 'Ticket médio',
|
||||
title: 'Ticket Médio por Vendedor',
|
||||
fallbackDescription: 'Ticket médio por vendedor no período selecionado.',
|
||||
trendDescription: 'Ticket médio por data no período selecionado.',
|
||||
emptyText: 'Nenhum ticket médio com vendedor no período.',
|
||||
formatValue: formatCurrency,
|
||||
formatTick: formatCompactCurrency
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
label: 'Pedidos',
|
||||
title: 'Pedidos por Vendedor',
|
||||
fallbackDescription: 'Pedidos por vendedor no período selecionado.',
|
||||
trendDescription: 'Pedidos por data no período selecionado.',
|
||||
emptyText: 'Nenhum pedido com vendedor no período.',
|
||||
formatValue: (value) => new Intl.NumberFormat('pt-BR').format(value),
|
||||
formatTick: (value) => new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 0 }).format(value)
|
||||
}
|
||||
];
|
||||
|
||||
const getSellerMetricValue = (metric: SellerMetricKey, revenue: number, orders: number) => {
|
||||
if (metric === 'orders') return orders;
|
||||
if (metric === 'ticket') return orders ? revenue / orders : 0;
|
||||
return revenue;
|
||||
};
|
||||
|
||||
const normalizeSellerGraphName = (name: string) => (
|
||||
name
|
||||
.normalize('NFD')
|
||||
.replace(/\p{Diacritic}/gu, '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
);
|
||||
|
||||
const shouldHideSellerFromGraph = (name: string) => {
|
||||
const normalizedName = normalizeSellerGraphName(name);
|
||||
return normalizedName === 'pos vendas';
|
||||
};
|
||||
|
||||
const getBarGlowStyle = (color: string) => ({
|
||||
filter: `drop-shadow(0 0 3px ${color}40)`
|
||||
});
|
||||
|
||||
const getPieGlowStyle = (color: string) => ({
|
||||
filter: `drop-shadow(0 0 8px ${color}80)`,
|
||||
cursor: 'pointer'
|
||||
});
|
||||
|
||||
const kpiIconStyle = (color: string) => ({
|
||||
backgroundColor: `${color}14`,
|
||||
borderColor: `${color}26`,
|
||||
color
|
||||
});
|
||||
|
||||
const DashboardSkeleton = () => (
|
||||
<div className="space-y-6" aria-label="Carregando dashboard">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{[0, 1, 2].map(item => (
|
||||
<div key={`dashboard-kpi-skeleton-${item}`} className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="flex justify-between gap-6">
|
||||
<div className="w-full">
|
||||
<div className="skeleton h-4 w-32" />
|
||||
<div className="skeleton mt-3 h-8 w-44" />
|
||||
</div>
|
||||
<div className="skeleton h-12 w-12 shrink-0 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="skeleton h-5 w-48" />
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<div className="skeleton h-80 w-full" />
|
||||
<div className="mt-5 flex flex-wrap gap-2">
|
||||
{[0, 1, 2, 3, 4, 5].map(row => (
|
||||
<div key={`dashboard-seller-legend-skeleton-${row}`} className="skeleton h-9 rounded-full" style={{ width: `${150 - row * 7}px` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{[0, 1].map(item => (
|
||||
<div key={`dashboard-product-chart-skeleton-${item}`} className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="skeleton h-5 w-44" />
|
||||
<div className="mt-8 h-80">
|
||||
<div className="flex h-full items-end justify-center gap-3">
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7].map(bar => (
|
||||
<div key={`dashboard-column-skeleton-${item}-${bar}`} className="skeleton w-10" style={{ height: `${35 + ((bar * 17) % 55)}%` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
type ChartTooltipPayload = {
|
||||
value: number;
|
||||
name?: string;
|
||||
color?: string;
|
||||
stroke?: string;
|
||||
dataKey?: string;
|
||||
payload?: {
|
||||
fill?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type CustomTooltipProps = {
|
||||
active?: boolean;
|
||||
payload?: ChartTooltipPayload[];
|
||||
label?: string;
|
||||
isCurrency?: boolean;
|
||||
valueLabel?: string;
|
||||
};
|
||||
|
||||
const CustomTooltip = ({ active, payload, label, isCurrency, valueLabel }: CustomTooltipProps) => {
|
||||
const CustomTooltip = ({ active, payload, label, isCurrency }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
const color = payload[0].payload?.fill || payload[0].stroke || payload[0].color || 'var(--chart-detail-bar)';
|
||||
const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1';
|
||||
const displayLabel = label || payload[0].name;
|
||||
const value = isCurrency ? formatCurrency(payload[0].value) : payload[0].value;
|
||||
const displayValueLabel = valueLabel || (isCurrency ? 'Receita:' : 'Vendas:');
|
||||
const valueLabel = isCurrency ? 'Receita:' : 'Vendas:';
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl border p-3 shadow-lg"
|
||||
style={{ backgroundColor: 'var(--chart-tooltip-bg)', borderColor: 'var(--chart-tooltip-border)' }}
|
||||
>
|
||||
<div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
|
||||
<p className="font-bold mb-1" style={{ color }}>{displayLabel}</p>
|
||||
<p className="m-0" style={{ color: 'var(--chart-tooltip-text)' }}>{displayValueLabel} {value}</p>
|
||||
<p className="text-[#ededed] m-0">{valueLabel} {value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
type SellerMetricTooltipProps = {
|
||||
active?: boolean;
|
||||
payload?: ChartTooltipPayload[];
|
||||
label?: string;
|
||||
focusedSellerId: string | null;
|
||||
sellers: SellerTimeSeriesSeller[];
|
||||
metricConfig: SellerMetricConfig;
|
||||
isHourly: boolean;
|
||||
dateBucket: DateBucket;
|
||||
};
|
||||
|
||||
const SellerMetricTooltip = ({ active, payload, label, focusedSellerId, sellers, metricConfig, isHourly, dateBucket }: SellerMetricTooltipProps) => {
|
||||
if (!active || !payload?.length) return null;
|
||||
|
||||
const sellersByKey = new Map(sellers.map(seller => [seller.seriesKey, seller]));
|
||||
const rows = payload
|
||||
.map(item => {
|
||||
const seller = sellersByKey.get(String(item.dataKey || ''));
|
||||
return seller ? { seller, value: Number(item.value || 0) } : null;
|
||||
})
|
||||
.filter((item): item is { seller: SellerTimeSeriesSeller; value: number } => Boolean(item && item.value > 0))
|
||||
.sort((a, b) => {
|
||||
if (focusedSellerId) {
|
||||
if (a.seller.id === focusedSellerId) return -1;
|
||||
if (b.seller.id === focusedSellerId) return 1;
|
||||
}
|
||||
return b.value - a.value;
|
||||
})
|
||||
.slice(0, focusedSellerId ? 4 : 6);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-w-56 rounded-xl border p-3 shadow-lg"
|
||||
style={{ backgroundColor: 'var(--chart-tooltip-bg)', borderColor: 'var(--chart-tooltip-border)' }}
|
||||
>
|
||||
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-dark-muted">
|
||||
{isHourly ? String(label || '') : formatDateBucketLongLabel(String(label || ''), dateBucket)}
|
||||
</p>
|
||||
<div className="space-y-2 text-sm" style={{ color: 'var(--chart-tooltip-text)' }}>
|
||||
{rows.length ? rows.map(({ seller, value }) => (
|
||||
<div key={`seller-tooltip-${seller.id}`} className="flex items-center justify-between gap-4">
|
||||
<span className="flex min-w-0 items-center gap-2 font-semibold">
|
||||
<span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
|
||||
<span className="truncate">{seller.name}</span>
|
||||
</span>
|
||||
<span className="shrink-0 font-bold">{metricConfig.formatValue(value)}</span>
|
||||
</div>
|
||||
)) : (
|
||||
<p className="m-0 text-dark-muted">Sem receita nesse dia.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Dashboard = () => {
|
||||
const navigate = useNavigate();
|
||||
const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval } = useOutletContext<{
|
||||
const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData } = useOutletContext<{
|
||||
dateRange: DateRange,
|
||||
setDateRange: (range: DateRange) => void,
|
||||
ordersData: OrderData[],
|
||||
refreshInterval: number,
|
||||
setRefreshInterval: (interval: number) => void,
|
||||
loadData: (showLoading?: boolean) => void
|
||||
}>();
|
||||
const [serverMetrics, setServerMetrics] = useState<DashboardAnalytics | null>(null);
|
||||
const [isMetricsLoading, setIsMetricsLoading] = useState(true);
|
||||
const [focusedSellerId, setFocusedSellerId] = useState<string | null>(null);
|
||||
const [sellerMetric, setSellerMetric] = useState<SellerMetricKey>('revenue');
|
||||
const [selectedSellerBucket, setSelectedSellerBucket] = useState<string | null>(null);
|
||||
const [showSellerTrend, setShowSellerTrend] = useState(false);
|
||||
|
||||
const loadDashboardMetrics = useCallback(async (range: DateRange, options?: { force?: boolean }) => {
|
||||
setIsMetricsLoading(true);
|
||||
const metrics = await fetchDashboardAnalytics(range, options);
|
||||
setServerMetrics(metrics);
|
||||
setIsMetricsLoading(false);
|
||||
}, []);
|
||||
const filteredData = useMemo(() => {
|
||||
const orders = ordersData;
|
||||
return orders.filter(order => {
|
||||
const orderDate = parseOrderDate(order.Data_Pedido);
|
||||
return orderDate >= dateRange.start && orderDate <= dateRange.end;
|
||||
});
|
||||
}, [dateRange, ordersData]);
|
||||
|
||||
useEffect(() => {
|
||||
// Dashboard metrics are synchronized with the selected server-side date range.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
void loadDashboardMetrics(dateRange);
|
||||
}, [dateRange, loadDashboardMetrics]);
|
||||
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct } = useMemo(() => {
|
||||
let revenue = 0;
|
||||
let totalItems = 0;
|
||||
const productSalesMap: Record<string, number> = {};
|
||||
const productRevenueMap: Record<string, number> = {};
|
||||
const productNameIdMap: Record<string, string> = {};
|
||||
|
||||
useEffect(() => {
|
||||
if (refreshInterval === 0) return;
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
void loadDashboardMetrics(dateRange, { force: true });
|
||||
}, refreshInterval);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [dateRange, loadDashboardMetrics, refreshInterval]);
|
||||
|
||||
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct, revenueBySeller, ordersBySeller, sellerRevenueByDate, sellerRevenueByHour } = useMemo(() => {
|
||||
if (serverMetrics) return applyDashboardColors(serverMetrics);
|
||||
return buildDashboardMetrics(ordersData, dateRange);
|
||||
}, [dateRange, ordersData, serverMetrics]);
|
||||
|
||||
const chartRevenueBySeller = useMemo(
|
||||
() => revenueBySeller.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||
[revenueBySeller]
|
||||
);
|
||||
const chartOrdersBySeller = useMemo(
|
||||
() => ordersBySeller.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||
[ordersBySeller]
|
||||
);
|
||||
const chartSellerRevenueByDate = useMemo(
|
||||
() => sellerRevenueByDate.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||
[sellerRevenueByDate]
|
||||
);
|
||||
const chartSellerRevenueByHour = useMemo(
|
||||
() => sellerRevenueByHour.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||
[sellerRevenueByHour]
|
||||
);
|
||||
|
||||
const sellerColorMap = useMemo(() => {
|
||||
const colorMap = new Map<string, string>();
|
||||
|
||||
[...chartRevenueBySeller, ...chartOrdersBySeller].forEach((seller) => {
|
||||
const key = seller.id || seller.name;
|
||||
if (!colorMap.has(key)) {
|
||||
colorMap.set(key, SELLER_COLORS[colorMap.size % SELLER_COLORS.length]);
|
||||
filteredData.forEach(order => {
|
||||
const itemRevenue = order.Quantidade * order.Valor_Unitario;
|
||||
revenue += itemRevenue;
|
||||
totalItems += order.Quantidade;
|
||||
const productName = order.Descricao_Produto.split(' TAMANHO')[0];
|
||||
productNameIdMap[productName] = order.ID_Produto;
|
||||
|
||||
if (productSalesMap[productName]) {
|
||||
productSalesMap[productName] += order.Quantidade;
|
||||
productRevenueMap[productName] += itemRevenue;
|
||||
} else {
|
||||
productSalesMap[productName] = order.Quantidade;
|
||||
productRevenueMap[productName] = itemRevenue;
|
||||
}
|
||||
});
|
||||
|
||||
return colorMap;
|
||||
}, [chartOrdersBySeller, chartRevenueBySeller]);
|
||||
|
||||
const sellerMetricConfig = sellerMetricOptions.find(option => option.key === sellerMetric) || sellerMetricOptions[0];
|
||||
|
||||
const sellerTimeSeries = useMemo(() => {
|
||||
const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
|
||||
const isHourly = isSingleDayRange && chartSellerRevenueByHour.length > 0;
|
||||
const dateBucket = getAutoDateBucket(dateRange);
|
||||
const activeTrendPoints = isHourly
|
||||
? chartSellerRevenueByHour.map(point => ({
|
||||
...point,
|
||||
date: formatHourKey(point.hour)
|
||||
}))
|
||||
: chartSellerRevenueByDate;
|
||||
|
||||
if (!activeTrendPoints.length && chartRevenueBySeller.length) {
|
||||
const startDate = formatDateKey(dateRange.start);
|
||||
const endDate = formatDateKey(dateRange.end);
|
||||
const chartDates = isSingleDayRange && isHourly
|
||||
? Array.from({ length: 24 }, (_, hour) => formatHourKey(hour))
|
||||
: startDate === endDate ? [endDate] : [startDate, endDate];
|
||||
const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
|
||||
|
||||
chartRevenueBySeller.forEach(seller => {
|
||||
const id = seller.id || seller.name;
|
||||
sellersById.set(id, {
|
||||
id,
|
||||
name: seller.name,
|
||||
fill: sellerColorMap.get(id) || seller.fill,
|
||||
revenue: seller.value,
|
||||
orders: 0
|
||||
});
|
||||
});
|
||||
|
||||
chartOrdersBySeller.forEach(seller => {
|
||||
const id = seller.id || seller.name;
|
||||
const existing = sellersById.get(id);
|
||||
sellersById.set(id, {
|
||||
id,
|
||||
name: existing?.name || seller.name,
|
||||
fill: existing?.fill || sellerColorMap.get(id) || seller.fill,
|
||||
revenue: existing?.revenue || 0,
|
||||
orders: seller.value
|
||||
});
|
||||
});
|
||||
|
||||
const sellers: SellerTimeSeriesSeller[] = [...sellersById.values()]
|
||||
.map(seller => ({
|
||||
...seller,
|
||||
total: getSellerMetricValue(sellerMetric, seller.revenue, seller.orders),
|
||||
seriesKey: ''
|
||||
}))
|
||||
.filter(seller => seller.total > 0)
|
||||
.sort((a, b) => b.total - a.total)
|
||||
.slice(0, 8)
|
||||
.map((seller, index) => {
|
||||
const id = seller.id || seller.name;
|
||||
return {
|
||||
...seller,
|
||||
id,
|
||||
seriesKey: `seller_${index}`
|
||||
};
|
||||
});
|
||||
|
||||
const chartData: SellerTimeSeriesChartData[] = chartDates.map(date => {
|
||||
const row: SellerTimeSeriesChartData = { date };
|
||||
sellers.forEach(seller => {
|
||||
row[seller.seriesKey] = seller.total;
|
||||
});
|
||||
return row;
|
||||
});
|
||||
|
||||
return { sellers, chartData, isFallback: true, isHourly, dateBucket, movingAverageWindow: 0 };
|
||||
}
|
||||
|
||||
const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
|
||||
const valuesByDate = new Map<string, Map<string, { revenue: number; orders: number }>>();
|
||||
|
||||
activeTrendPoints.forEach(point => {
|
||||
const id = point.id || point.name;
|
||||
const bucketKey = isHourly ? point.date : getDateBucketKey(point.date, dateBucket);
|
||||
const existing = sellersById.get(id);
|
||||
sellersById.set(id, {
|
||||
id,
|
||||
name: point.name,
|
||||
fill: sellerColorMap.get(id) || point.fill,
|
||||
revenue: (existing?.revenue || 0) + point.value,
|
||||
orders: (existing?.orders || 0) + (point.orders || 0)
|
||||
});
|
||||
|
||||
if (!valuesByDate.has(bucketKey)) {
|
||||
valuesByDate.set(bucketKey, new Map());
|
||||
}
|
||||
const dateValues = valuesByDate.get(bucketKey);
|
||||
if (dateValues) {
|
||||
const existingValue = dateValues.get(id);
|
||||
dateValues.set(id, {
|
||||
revenue: (existingValue?.revenue || 0) + point.value,
|
||||
orders: (existingValue?.orders || 0) + (point.orders || 0)
|
||||
});
|
||||
}
|
||||
// Identify which products will actually be displayed in both charts (Top 10 of each)
|
||||
const topSalesNames = Object.keys(productSalesMap).sort((a, b) => productSalesMap[b] - productSalesMap[a]).slice(0, 10);
|
||||
const topRevenueNames = Object.keys(productRevenueMap).sort((a, b) => productRevenueMap[b] - productRevenueMap[a]).slice(0, 10);
|
||||
|
||||
// Combine them into a unique set to assign colors only to the VISIBLE products
|
||||
const displayProducts = Array.from(new Set([...topSalesNames, ...topRevenueNames])).sort();
|
||||
const productColors: Record<string, string> = {};
|
||||
|
||||
displayProducts.forEach((name) => {
|
||||
productColors[name] = getProductColor(name);
|
||||
});
|
||||
|
||||
const sellers: SellerTimeSeriesSeller[] = [...sellersById.values()]
|
||||
.map(seller => ({
|
||||
...seller,
|
||||
total: getSellerMetricValue(sellerMetric, seller.revenue, seller.orders),
|
||||
seriesKey: ''
|
||||
}))
|
||||
.filter(seller => seller.total > 0)
|
||||
.sort((a, b) => b.total - a.total)
|
||||
.slice(0, 8)
|
||||
.map((seller, index) => ({
|
||||
...seller,
|
||||
seriesKey: `seller_${index}`
|
||||
}));
|
||||
const productsData = topSalesNames.map(name => ({
|
||||
name,
|
||||
id: productNameIdMap[name],
|
||||
value: productSalesMap[name],
|
||||
fill: productColors[name]
|
||||
}));
|
||||
|
||||
const chartKeys = isHourly
|
||||
? Array.from({ length: 24 }, (_, hour) => formatHourKey(hour))
|
||||
: [...valuesByDate.keys()].sort((dateA, dateB) => dateA.localeCompare(dateB));
|
||||
const revenueData = topRevenueNames.map(name => ({
|
||||
name,
|
||||
id: productNameIdMap[name],
|
||||
value: productRevenueMap[name],
|
||||
fill: productColors[name]
|
||||
}));
|
||||
|
||||
const chartData: SellerTimeSeriesChartData[] = chartKeys
|
||||
.map(date => {
|
||||
const values = valuesByDate.get(date);
|
||||
const row: SellerTimeSeriesChartData = { date };
|
||||
sellers.forEach(seller => {
|
||||
const value = values?.get(seller.id);
|
||||
row[seller.seriesKey] = value ? getSellerMetricValue(sellerMetric, value.revenue, value.orders) : 0;
|
||||
});
|
||||
return row;
|
||||
});
|
||||
|
||||
const movingAverageWindow = isHourly ? 0 : getMovingAverageWindow(dateBucket);
|
||||
const totals = chartData.map(row => (
|
||||
sellers.reduce((total, seller) => total + Number(row[seller.seriesKey] || 0), 0)
|
||||
));
|
||||
if (movingAverageWindow > 1) {
|
||||
chartData.forEach((row, index) => {
|
||||
row.movingAverage = averageRecentValues(totals, index, movingAverageWindow);
|
||||
});
|
||||
}
|
||||
|
||||
return { sellers, chartData, isFallback: false, isHourly, dateBucket, movingAverageWindow };
|
||||
}, [chartOrdersBySeller, chartRevenueBySeller, chartSellerRevenueByDate, chartSellerRevenueByHour, dateRange, sellerColorMap, sellerMetric]);
|
||||
|
||||
const focusedSeller = focusedSellerId ? sellerTimeSeries.sellers.find(seller => seller.id === focusedSellerId) : null;
|
||||
const effectiveFocusedSellerId = focusedSeller?.id || null;
|
||||
const selectedSellerRow = selectedSellerBucket
|
||||
? sellerTimeSeries.chartData.find(row => row.date === selectedSellerBucket)
|
||||
: null;
|
||||
const selectedSellerBreakdown = selectedSellerRow
|
||||
? sellerTimeSeries.sellers
|
||||
.map(seller => ({
|
||||
seller,
|
||||
value: Number(selectedSellerRow[seller.seriesKey] || 0)
|
||||
}))
|
||||
.filter(item => item.value > 0)
|
||||
.sort((a, b) => b.value - a.value)
|
||||
: [];
|
||||
const selectedSellerBucketLabel = selectedSellerRow
|
||||
? sellerTimeSeries.isHourly
|
||||
? selectedSellerRow.date
|
||||
: formatDateBucketLongLabel(selectedSellerRow.date, sellerTimeSeries.dateBucket)
|
||||
: '';
|
||||
|
||||
const handleManualRefresh = () => {
|
||||
void loadDashboardMetrics(dateRange, { force: true });
|
||||
};
|
||||
const shouldShowSkeleton = isMetricsLoading && !serverMetrics;
|
||||
const isRefreshing = isMetricsLoading && Boolean(serverMetrics);
|
||||
return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData };
|
||||
}, [filteredData]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -544,16 +129,10 @@ const Dashboard = () => {
|
||||
onChange={setDateRange}
|
||||
refreshInterval={refreshInterval}
|
||||
setRefreshInterval={setRefreshInterval}
|
||||
onManualRefresh={handleManualRefresh}
|
||||
onManualRefresh={() => loadData(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
{shouldShowSkeleton ? (
|
||||
<DashboardSkeleton />
|
||||
) : (
|
||||
<div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="flex justify-between items-start">
|
||||
@@ -561,8 +140,8 @@ const Dashboard = () => {
|
||||
<p className="text-dark-muted text-sm font-medium mb-1">Receita Total</p>
|
||||
<h3 className="text-3xl font-bold text-dark-text">{formatCurrency(totalRevenue)}</h3>
|
||||
</div>
|
||||
<div className="rounded-xl border p-3" style={kpiIconStyle('#52DFA0')}>
|
||||
<DollarSign className="w-6 h-6" />
|
||||
<div className="p-3 bg-emerald-500/10 rounded-xl">
|
||||
<DollarSign className="w-6 h-6 text-emerald-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -573,8 +152,8 @@ const Dashboard = () => {
|
||||
<p className="text-dark-muted text-sm font-medium mb-1">Total de Produtos Vendidos</p>
|
||||
<h3 className="text-3xl font-bold text-dark-text">{totalOrders}</h3>
|
||||
</div>
|
||||
<div className="rounded-xl border p-3" style={kpiIconStyle('#82B8FF')}>
|
||||
<ShoppingCart className="w-6 h-6" />
|
||||
<div className="p-3 bg-blue-500/10 rounded-xl">
|
||||
<ShoppingCart className="w-6 h-6 text-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -585,278 +164,29 @@ const Dashboard = () => {
|
||||
<p className="text-dark-muted text-sm font-medium mb-1">Ticket Médio (Por Item)</p>
|
||||
<h3 className="text-3xl font-bold text-dark-text">{formatCurrency(averageOrderValue)}</h3>
|
||||
</div>
|
||||
<div className="rounded-xl border p-3" style={kpiIconStyle('#B992FF')}>
|
||||
<TrendingUp className="w-6 h-6" />
|
||||
<div className="p-3 bg-purple-500/10 rounded-xl">
|
||||
<TrendingUp className="w-6 h-6 text-purple-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
|
||||
<div className="mb-6 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-dark-text">{sellerMetricConfig.title}</h3>
|
||||
<p className="mt-1 text-sm font-medium text-dark-muted">
|
||||
{focusedSeller
|
||||
? `Foco em ${focusedSeller.name}`
|
||||
: sellerTimeSeries.isHourly
|
||||
? 'Evolução por horário no dia selecionado.'
|
||||
: sellerTimeSeries.isFallback
|
||||
? sellerMetricConfig.fallbackDescription
|
||||
: sellerTimeSeries.dateBucket === 'day'
|
||||
? sellerMetricConfig.trendDescription
|
||||
: sellerTimeSeries.dateBucket === 'week'
|
||||
? 'Evolução agrupada por semana no período selecionado.'
|
||||
: 'Evolução agrupada por mês no período selecionado.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{!sellerTimeSeries.isHourly && !sellerTimeSeries.isFallback && sellerTimeSeries.movingAverageWindow > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSellerTrend(current => !current)}
|
||||
aria-pressed={showSellerTrend}
|
||||
className={`h-9 cursor-pointer rounded-lg border px-3 text-xs font-bold transition-colors ${
|
||||
showSellerTrend
|
||||
? 'border-brand-primary bg-brand-primary/10 text-brand-primary'
|
||||
: 'border-dark-border bg-dark-input text-dark-muted hover:text-dark-text'
|
||||
}`}
|
||||
title="Mostrar ou esconder média móvel"
|
||||
>
|
||||
Tendência
|
||||
</button>
|
||||
)}
|
||||
<div className="inline-flex rounded-xl border border-dark-border bg-dark-input p-1">
|
||||
{sellerMetricOptions.map(option => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
onClick={() => setSellerMetric(option.key)}
|
||||
className={`h-8 cursor-pointer rounded-lg px-3 text-xs font-bold transition-colors ${
|
||||
sellerMetric === option.key
|
||||
? 'bg-dark-card text-dark-text shadow-sm'
|
||||
: 'text-dark-muted hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{focusedSeller && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFocusedSellerId(null)}
|
||||
className="h-9 rounded-lg border border-dark-border bg-dark-input px-3 text-xs font-bold text-dark-muted transition-colors hover:text-dark-text"
|
||||
>
|
||||
Ver todos
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sellerTimeSeries.sellers.length ? (
|
||||
<div>
|
||||
<div className="h-96 min-w-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={sellerTimeSeries.chartData}
|
||||
margin={{ top: 14, right: 24, left: 4, bottom: 12 }}
|
||||
onClick={(event) => {
|
||||
if (event?.activeLabel) setSelectedSellerBucket(String(event.activeLabel));
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
{sellerTimeSeries.sellers.map(seller => (
|
||||
<linearGradient key={`seller-gradient-${seller.seriesKey}`} id={`seller-gradient-${seller.seriesKey}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={seller.fill} stopOpacity={effectiveFocusedSellerId && effectiveFocusedSellerId !== seller.id ? 0.08 : 0.42} />
|
||||
<stop offset="95%" stopColor={seller.fill} stopOpacity={effectiveFocusedSellerId && effectiveFocusedSellerId !== seller.id ? 0.01 : 0.05} />
|
||||
</linearGradient>
|
||||
))}
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
stroke={CHART_AXIS_COLOR}
|
||||
fontSize={11}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
minTickGap={sellerTimeSeries.isHourly ? 10 : 18}
|
||||
interval={sellerTimeSeries.isHourly ? 2 : undefined}
|
||||
tickFormatter={(value) => (
|
||||
sellerTimeSeries.isHourly
|
||||
? String(value)
|
||||
: formatDateBucketLabel(String(value), sellerTimeSeries.dateBucket)
|
||||
)}
|
||||
/>
|
||||
<YAxis
|
||||
stroke={CHART_AXIS_COLOR}
|
||||
fontSize={11}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => sellerMetricConfig.formatTick(Number(value))}
|
||||
width={54}
|
||||
/>
|
||||
<Tooltip
|
||||
content={<SellerMetricTooltip focusedSellerId={effectiveFocusedSellerId} sellers={sellerTimeSeries.sellers} metricConfig={sellerMetricConfig} isHourly={sellerTimeSeries.isHourly} dateBucket={sellerTimeSeries.dateBucket} />}
|
||||
cursor={{ stroke: CHART_AXIS_COLOR, strokeDasharray: '4 4' }}
|
||||
/>
|
||||
{showSellerTrend && !sellerTimeSeries.isHourly && !sellerTimeSeries.isFallback && sellerTimeSeries.movingAverageWindow > 1 && (
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="movingAverage"
|
||||
name="Média móvel"
|
||||
stroke="var(--chart-label)"
|
||||
strokeWidth={2.5}
|
||||
strokeDasharray="6 5"
|
||||
dot={false}
|
||||
activeDot={false}
|
||||
isAnimationActive
|
||||
animationBegin={160}
|
||||
animationDuration={700}
|
||||
/>
|
||||
)}
|
||||
{sellerTimeSeries.sellers.map(seller => {
|
||||
const isFocused = effectiveFocusedSellerId === seller.id;
|
||||
const isDimmed = Boolean(effectiveFocusedSellerId && !isFocused);
|
||||
return (
|
||||
<Area
|
||||
key={seller.id}
|
||||
type="monotone"
|
||||
dataKey={seller.seriesKey}
|
||||
name={seller.name}
|
||||
stroke={seller.fill}
|
||||
strokeWidth={isFocused ? 3 : 2}
|
||||
strokeOpacity={isDimmed ? 0.2 : 0.95}
|
||||
fill={`url(#seller-gradient-${seller.seriesKey})`}
|
||||
fillOpacity={isDimmed ? 0.25 : 1}
|
||||
dot={sellerTimeSeries.isFallback ? {
|
||||
r: 3,
|
||||
strokeWidth: 2,
|
||||
fill: seller.fill,
|
||||
stroke: 'var(--color-dark-card)'
|
||||
} : false}
|
||||
activeDot={{
|
||||
r: isFocused ? 5.5 : 4,
|
||||
strokeWidth: 2,
|
||||
fill: seller.fill,
|
||||
stroke: 'var(--color-dark-card)',
|
||||
onClick: () => setFocusedSellerId(current => current === seller.id ? null : seller.id)
|
||||
}}
|
||||
onClick={() => setFocusedSellerId(current => current === seller.id ? null : seller.id)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
isAnimationActive
|
||||
animationBegin={120}
|
||||
animationDuration={700}
|
||||
animationEasing="ease-out"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{selectedSellerRow && (
|
||||
<div className="mt-4 rounded-xl border border-dark-border bg-dark-input/45 p-4">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-dark-text">{selectedSellerBucketLabel}</h4>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
Quebra por vendedor no ponto selecionado.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedSellerBucket(null)}
|
||||
className="h-8 rounded-lg border border-dark-border bg-dark-card px-3 text-xs font-bold text-dark-muted transition-colors hover:text-dark-text"
|
||||
>
|
||||
Limpar
|
||||
</button>
|
||||
</div>
|
||||
{selectedSellerBreakdown.length ? (
|
||||
<div className="mt-4 grid gap-2 md:grid-cols-2 xl:grid-cols-3">
|
||||
{selectedSellerBreakdown.slice(0, 6).map(({ seller, value }) => (
|
||||
<button
|
||||
key={`seller-drill-${seller.id}`}
|
||||
type="button"
|
||||
onClick={() => setFocusedSellerId(current => current === seller.id ? null : seller.id)}
|
||||
className="flex min-w-0 cursor-pointer items-center justify-between gap-3 rounded-lg border border-dark-border bg-dark-card px-3 py-2 text-left transition-colors hover:border-brand-primary"
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
|
||||
<span className="truncate text-xs font-bold text-dark-text">{seller.name}</span>
|
||||
</span>
|
||||
<span className="shrink-0 text-xs font-bold text-dark-muted">{sellerMetricConfig.formatTick(value)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-4 text-sm font-semibold text-dark-muted">Sem valores nesse ponto.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative mt-5 border-t border-dark-border pt-3">
|
||||
<div className="flex h-8 items-center gap-5 overflow-x-auto overflow-y-hidden whitespace-nowrap pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
{sellerTimeSeries.sellers.map(seller => {
|
||||
const isFocused = effectiveFocusedSellerId === seller.id;
|
||||
const isDimmed = Boolean(effectiveFocusedSellerId && !isFocused);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`seller-legend-${seller.id}`}
|
||||
type="button"
|
||||
onClick={() => setFocusedSellerId(current => current === seller.id ? null : seller.id)}
|
||||
className={`group inline-flex h-7 shrink-0 cursor-pointer items-center gap-2 rounded-md px-1.5 text-left transition-colors ${
|
||||
isFocused
|
||||
? 'bg-dark-input/70 text-dark-text'
|
||||
: 'text-dark-muted hover:text-dark-text'
|
||||
}`}
|
||||
style={{ opacity: isDimmed ? 0.38 : 1 }}
|
||||
title={seller.name}
|
||||
>
|
||||
<span className="h-1.5 w-5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
|
||||
<span className="max-w-[190px] truncate text-xs font-bold">{seller.name}</span>
|
||||
<span className="shrink-0 text-[11px] font-bold text-dark-muted group-hover:text-dark-text">
|
||||
{sellerMetricConfig.formatTick(seller.total)}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute bottom-0 right-0 top-3 w-10 bg-gradient-to-l from-dark-card to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-80 items-center justify-center">
|
||||
<p className="text-sm font-semibold text-dark-muted">{sellerMetricConfig.emptyText}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
|
||||
<h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
|
||||
<div className="h-80 w-full flex items-center justify-center">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="name" stroke={CHART_AXIS_COLOR} fontSize={10} tickLine={false} axisLine={false}
|
||||
dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
|
||||
tick={false}
|
||||
/>
|
||||
<YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
|
||||
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
|
||||
<Bar dataKey="value" radius={[4, 4, 0, 0]} onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
|
||||
{salesByProduct.map((entry) => (
|
||||
<Cell
|
||||
key={`cell-${entry.name}`}
|
||||
fill={entry.fill}
|
||||
fillOpacity={BAR_FILL_OPACITY}
|
||||
stroke={entry.fill}
|
||||
strokeOpacity={BAR_STROKE_OPACITY}
|
||||
strokeWidth={1.25}
|
||||
style={{ ...getBarGlowStyle(entry.fill), cursor: 'pointer' }}
|
||||
/>
|
||||
<Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
@@ -877,20 +207,12 @@ const Dashboard = () => {
|
||||
<div className="h-80 w-full flex items-center justify-center">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
|
||||
<Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
|
||||
{revenueByProduct.map((entry) => (
|
||||
<Cell
|
||||
key={`cell-${entry.name}`}
|
||||
fill={entry.fill}
|
||||
fillOpacity={PIE_FILL_OPACITY}
|
||||
stroke={entry.fill}
|
||||
strokeOpacity={BAR_STROKE_OPACITY}
|
||||
strokeWidth={1.5}
|
||||
style={getPieGlowStyle(entry.fill)}
|
||||
/>
|
||||
<Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: CHART_CURSOR_COLOR }} />
|
||||
<Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
@@ -904,8 +226,6 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,187 +1,29 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Lock } from 'lucide-react';
|
||||
import { getLoginConfig, login } from '../dataService';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
turnstile?: {
|
||||
render: (
|
||||
container: HTMLElement,
|
||||
options: {
|
||||
sitekey: string;
|
||||
callback: (token: string) => void;
|
||||
'expired-callback': () => void;
|
||||
'error-callback': () => void;
|
||||
theme: 'dark' | 'light' | 'auto';
|
||||
}
|
||||
) => string;
|
||||
reset: (widgetId?: string) => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const turnstileScriptId = 'turnstile-api-script';
|
||||
const securityConfigLoadMessage = 'Não foi possível carregar as configurações de segurança. Atualize a página e tente novamente.';
|
||||
const securityUnavailableMessage = 'Não foi possível carregar a verificação de segurança. Atualize a página e tente novamente.';
|
||||
const securityConfigurationMessage = 'Verificação de segurança indisponível. Entre em contato com o administrador.';
|
||||
const securityRequiredMessage = 'Conclua a verificação de segurança para continuar.';
|
||||
const securityFailedMessage = 'Não foi possível validar a verificação de segurança. Atualize a página e tente novamente.';
|
||||
const turnstileSiteKeyPattern = /^[0-9]x[0-9A-Za-z_-]{20,}$/;
|
||||
import { login } from '../dataService';
|
||||
|
||||
const Login = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [captchaToken, setCaptchaToken] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isConfigLoading, setIsConfigLoading] = useState(true);
|
||||
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
|
||||
const [captchaRequired, setCaptchaRequired] = useState(false);
|
||||
const [captchaReady, setCaptchaReady] = useState(true);
|
||||
const captchaContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const captchaWidgetIdRef = useRef<string | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const hasValidSiteKey = turnstileSiteKeyPattern.test(turnstileSiteKey);
|
||||
const captchaEnabled = Boolean(captchaRequired && hasValidSiteKey);
|
||||
const securityMisconfigured = captchaRequired && !hasValidSiteKey;
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadLoginConfig = async () => {
|
||||
try {
|
||||
const config = await getLoginConfig();
|
||||
if (!isMounted) return;
|
||||
|
||||
setCaptchaRequired(config.captchaRequired);
|
||||
setTurnstileSiteKey(config.turnstileSiteKey.trim());
|
||||
setCaptchaReady(!config.captchaRequired);
|
||||
if (config.captchaRequired && !config.captchaConfigured) {
|
||||
setError(securityConfigurationMessage);
|
||||
}
|
||||
} catch {
|
||||
if (!isMounted) return;
|
||||
setCaptchaReady(false);
|
||||
setError(securityConfigLoadMessage);
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsConfigLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
void loadLoginConfig();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasValidSiteKey || !captchaContainerRef.current || captchaWidgetIdRef.current) return;
|
||||
|
||||
const siteKey = turnstileSiteKey;
|
||||
|
||||
const renderCaptcha = () => {
|
||||
if (!window.turnstile || !captchaContainerRef.current || captchaWidgetIdRef.current) return;
|
||||
|
||||
try {
|
||||
captchaWidgetIdRef.current = window.turnstile.render(captchaContainerRef.current, {
|
||||
sitekey: siteKey,
|
||||
theme: 'dark',
|
||||
callback: (token) => {
|
||||
setCaptchaToken(token);
|
||||
setCaptchaReady(true);
|
||||
},
|
||||
'expired-callback': () => {
|
||||
setCaptchaToken('');
|
||||
setCaptchaReady(true);
|
||||
},
|
||||
'error-callback': () => {
|
||||
setCaptchaToken('');
|
||||
setCaptchaReady(false);
|
||||
setError(securityUnavailableMessage);
|
||||
},
|
||||
});
|
||||
setCaptchaReady(true);
|
||||
} catch {
|
||||
setCaptchaToken('');
|
||||
setCaptchaReady(false);
|
||||
setError(securityConfigurationMessage);
|
||||
}
|
||||
};
|
||||
|
||||
if (window.turnstile) {
|
||||
renderCaptcha();
|
||||
return;
|
||||
}
|
||||
|
||||
const existingScript = document.getElementById(turnstileScriptId);
|
||||
if (existingScript) {
|
||||
existingScript.addEventListener('load', renderCaptcha, { once: true });
|
||||
return () => existingScript.removeEventListener('load', renderCaptcha);
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.id = turnstileScriptId;
|
||||
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
script.addEventListener('load', renderCaptcha, { once: true });
|
||||
script.addEventListener('error', () => {
|
||||
setCaptchaReady(false);
|
||||
setError(securityUnavailableMessage);
|
||||
}, { once: true });
|
||||
document.head.appendChild(script);
|
||||
|
||||
return () => script.removeEventListener('load', renderCaptcha);
|
||||
}, [hasValidSiteKey, turnstileSiteKey]);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (securityMisconfigured) {
|
||||
setError(securityConfigurationMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
if (captchaEnabled && !captchaToken) {
|
||||
setError(securityRequiredMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const result = await login(email, password, captchaToken);
|
||||
if (result === 'success') {
|
||||
const success = await login(email, password);
|
||||
if (success) {
|
||||
navigate('/graph');
|
||||
} else if (result === 'captcha_failed') {
|
||||
setError(captchaEnabled ? securityFailedMessage : securityConfigurationMessage);
|
||||
if (captchaEnabled) {
|
||||
setCaptchaToken('');
|
||||
window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
|
||||
}
|
||||
} else if (result === 'invalid_credentials') {
|
||||
setError('E-mail ou senha incorretos.');
|
||||
if (captchaEnabled) {
|
||||
setCaptchaToken('');
|
||||
window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
|
||||
}
|
||||
} else {
|
||||
setError('Erro ao conectar ao servidor.');
|
||||
if (captchaEnabled) {
|
||||
setCaptchaToken('');
|
||||
window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
|
||||
}
|
||||
setError('E-mail ou senha incorretos.');
|
||||
}
|
||||
} catch {
|
||||
} catch (err) {
|
||||
setError('Erro ao conectar ao servidor.');
|
||||
if (captchaEnabled) {
|
||||
setCaptchaToken('');
|
||||
window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -222,23 +64,14 @@ const Login = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(captchaEnabled || securityMisconfigured) && (
|
||||
<div className="min-h-[70px] rounded-xl border border-dark-border bg-dark-input/60 p-3">
|
||||
{captchaEnabled && <div ref={captchaContainerRef} className="flex justify-center" />}
|
||||
{(securityMisconfigured || !captchaReady) && (
|
||||
<p className="mt-2 text-center text-xs font-medium text-red-400">Verificação de segurança indisponível.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="text-red-500 text-sm font-medium" role="alert">{error}</p>}
|
||||
{error && <p className="text-red-500 text-sm font-medium">{error}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || isConfigLoading || securityMisconfigured || !captchaReady || (captchaEnabled && !captchaToken)}
|
||||
disabled={isLoading}
|
||||
className="w-full bg-brand-primary hover:bg-opacity-90 hover:scale-[1.02] active:scale-[0.98] text-zinc-900 font-bold py-3 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 mt-4 cursor-pointer"
|
||||
>
|
||||
{isLoading || isConfigLoading ? 'Entrando...' : 'Entrar'}
|
||||
{isLoading ? 'Entrando...' : 'Entrar'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,439 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useOutletContext } from 'react-router-dom';
|
||||
import { AlertTriangle, CheckCircle2, Eye, PackageSearch, Pencil, Search } from 'lucide-react';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import PaginationControls from '../components/PaginationControls';
|
||||
import ProductTypeBadge from '../components/ProductTypeBadge';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import SkuPlanningModal from '../components/SkuPlanningModal';
|
||||
import { classifyCutFamily, CUT_FAMILY_RULES, type CutFamilyKey } from '../analytics/cutting';
|
||||
import { fetchCuttingSettings, fetchProductAnalytics, saveCuttingSettings } from '../dataService';
|
||||
import { getProductTypeConfig, resolveProductType, type ProductTypeKey } from '../productClassification';
|
||||
import { parseProductName } from '../productParsing';
|
||||
import type { CutProductOverride, CuttingSettings, DateRange, ProductAnalyticsItem } from '../types';
|
||||
|
||||
type IssueKey = 'review_type' | 'missing_cut_family' | 'missing_color' | 'missing_size' | 'missing_yield';
|
||||
type IssueFilter = 'all' | IssueKey;
|
||||
|
||||
type PlanningIssueRow = ProductAnalyticsItem & {
|
||||
productType: ProductTypeKey;
|
||||
color: string;
|
||||
size: string;
|
||||
familyKey: CutFamilyKey | '';
|
||||
familyLabel: string;
|
||||
issues: IssueKey[];
|
||||
priorityScore: number;
|
||||
hasOverride: boolean;
|
||||
};
|
||||
|
||||
const issueLabels: Record<IssueKey, string> = {
|
||||
review_type: 'Tipo',
|
||||
missing_cut_family: 'Família',
|
||||
missing_color: 'Cor',
|
||||
missing_size: 'Tamanho',
|
||||
missing_yield: 'Rendimento'
|
||||
};
|
||||
|
||||
const issueHelp: Record<IssueKey, string> = {
|
||||
review_type: 'O classificador não conseguiu identificar o tipo do SKU.',
|
||||
missing_cut_family: 'SKU de vestuário não caiu em uma família de corte confiável.',
|
||||
missing_color: 'SKU de vestuário não tem cor clara para planejamento.',
|
||||
missing_size: 'SKU de vestuário não tem tamanho claro para planejamento.',
|
||||
missing_yield: 'A família existe, mas ainda falta rendimento em unidades por rolo.'
|
||||
};
|
||||
|
||||
const issueFilters: Array<{ value: IssueFilter; label: string }> = [
|
||||
{ value: 'all', label: 'Todos' },
|
||||
{ value: 'review_type', label: issueLabels.review_type },
|
||||
{ value: 'missing_cut_family', label: issueLabels.missing_cut_family },
|
||||
{ value: 'missing_color', label: issueLabels.missing_color },
|
||||
{ value: 'missing_size', label: issueLabels.missing_size },
|
||||
{ value: 'missing_yield', label: issueLabels.missing_yield }
|
||||
];
|
||||
|
||||
const familyLabels = new Map<CutFamilyKey, string>([
|
||||
...CUT_FAMILY_RULES.map(rule => [rule.key, `${rule.materialLabel} · ${rule.label}`] as const),
|
||||
['OUTROS', 'Sem regra']
|
||||
]);
|
||||
|
||||
const formatNumber = (value: number, maximumFractionDigits = 0) => (
|
||||
new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
|
||||
);
|
||||
|
||||
const formatCurrency = (value: number) => (
|
||||
new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value)
|
||||
);
|
||||
|
||||
const buildIssues = (
|
||||
product: ProductAnalyticsItem,
|
||||
settings: CuttingSettings
|
||||
): PlanningIssueRow => {
|
||||
const override = settings.productOverrides[product.id];
|
||||
const metadata = parseProductName(product.name);
|
||||
const productType = resolveProductType(product.name, override);
|
||||
const familyKey = override?.familyKey || classifyCutFamily(metadata.baseName).key;
|
||||
const color = override?.color || metadata.color;
|
||||
const size = (override?.size || metadata.size).toUpperCase();
|
||||
const issues: IssueKey[] = [];
|
||||
|
||||
if (productType === 'unknown') issues.push('review_type');
|
||||
|
||||
if (productType === 'finished_apparel') {
|
||||
if (familyKey === 'OUTROS') issues.push('missing_cut_family');
|
||||
if (!color) issues.push('missing_color');
|
||||
if (!size) issues.push('missing_size');
|
||||
if (familyKey !== 'OUTROS' && !settings.familyYields[familyKey]) issues.push('missing_yield');
|
||||
}
|
||||
|
||||
return {
|
||||
...product,
|
||||
productType,
|
||||
color,
|
||||
size,
|
||||
familyKey,
|
||||
familyLabel: familyLabels.get(familyKey) || '-',
|
||||
issues,
|
||||
priorityScore: (product.quantitySold * 2) + (product.revenue / 100),
|
||||
hasOverride: Boolean(override)
|
||||
};
|
||||
};
|
||||
|
||||
const PlanningIssuesSkeleton = () => (
|
||||
<div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm" aria-label="Carregando dados pendentes">
|
||||
<div className="border-b border-dark-border p-4">
|
||||
<div className="grid grid-cols-[120px_1.4fr_150px_170px_130px_130px_120px] gap-5">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(item => <div key={item} className="skeleton h-3" />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-border">
|
||||
{[0, 1, 2, 3, 4, 5].map(row => (
|
||||
<div key={row} className="grid grid-cols-[120px_1.4fr_150px_170px_130px_130px_120px] gap-5 px-6 py-4">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(item => <div key={item} className="skeleton h-4" />)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const PlanningIssues = () => {
|
||||
const { dateRange, setDateRange } = useOutletContext<{
|
||||
dateRange: DateRange,
|
||||
setDateRange: (range: DateRange) => void
|
||||
}>();
|
||||
const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
|
||||
const [settings, setSettings] = useState<CuttingSettings>({ familyYields: {}, productOverrides: {} });
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [issueFilter, setIssueFilter] = useState<IssueFilter>('all');
|
||||
const [editingProduct, setEditingProduct] = useState<PlanningIssueRow | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(20);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadData = async () => {
|
||||
setIsLoading(true);
|
||||
const [productData, planningSettings] = await Promise.all([
|
||||
fetchProductAnalytics(dateRange),
|
||||
fetchCuttingSettings()
|
||||
]);
|
||||
|
||||
if (isMounted) {
|
||||
setProducts(productData);
|
||||
setSettings(planningSettings);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void loadData();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [dateRange]);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
|
||||
return products
|
||||
.map(product => buildIssues(product, settings))
|
||||
.filter(row => row.issues.length > 0)
|
||||
.filter(row => issueFilter === 'all' || row.issues.includes(issueFilter))
|
||||
.filter(row => {
|
||||
if (!normalizedSearch) return true;
|
||||
const typeLabel = getProductTypeConfig(row.productType).label.toLowerCase();
|
||||
return (
|
||||
row.id.toLowerCase().includes(normalizedSearch) ||
|
||||
row.name.toLowerCase().includes(normalizedSearch) ||
|
||||
row.color.toLowerCase().includes(normalizedSearch) ||
|
||||
row.size.toLowerCase().includes(normalizedSearch) ||
|
||||
row.familyLabel.toLowerCase().includes(normalizedSearch) ||
|
||||
typeLabel.includes(normalizedSearch)
|
||||
);
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (b.issues.length !== a.issues.length) return b.issues.length - a.issues.length;
|
||||
return b.priorityScore - a.priorityScore;
|
||||
});
|
||||
}, [issueFilter, products, searchTerm, settings]);
|
||||
|
||||
const issueCounts = useMemo(() => {
|
||||
const counts = new Map<IssueKey, number>();
|
||||
products
|
||||
.map(product => buildIssues(product, settings))
|
||||
.forEach(row => row.issues.forEach(issue => counts.set(issue, (counts.get(issue) || 0) + 1)));
|
||||
return counts;
|
||||
}, [products, settings]);
|
||||
|
||||
const saveProductOverride = async (productId: string, override: CutProductOverride | null) => {
|
||||
const productOverrides = { ...settings.productOverrides };
|
||||
if (override) {
|
||||
productOverrides[productId] = override;
|
||||
} else {
|
||||
delete productOverrides[productId];
|
||||
}
|
||||
|
||||
const nextSettings = { ...settings, productOverrides };
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const savedSettings = await saveCuttingSettings(nextSettings);
|
||||
setSettings(savedSettings);
|
||||
setEditingProduct(null);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const totalPages = Math.ceil(rows.length / itemsPerPage);
|
||||
const safeCurrentPage = Math.min(currentPage, totalPages || 1);
|
||||
const startIndex = (safeCurrentPage - 1) * itemsPerPage;
|
||||
const paginatedRows = rows.slice(startIndex, startIndex + itemsPerPage);
|
||||
const isRefreshing = isLoading && products.length > 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4 2xl:grid-cols-[minmax(520px,1fr)_auto] 2xl:items-start">
|
||||
<div>
|
||||
<h1 className="mb-2 text-2xl font-bold text-zinc-900 dark:text-dark-text">Dados Pendentes</h1>
|
||||
<p className="font-medium text-zinc-500 dark:text-dark-muted">
|
||||
Fila principal para revisar tipo, cor, tamanho, família e rendimento dos SKUs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center 2xl:justify-end">
|
||||
<Link
|
||||
to="/registrations"
|
||||
className="inline-flex h-10 items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary"
|
||||
>
|
||||
<PackageSearch className="h-4 w-4 text-brand-primary" />
|
||||
Cadastros
|
||||
</Link>
|
||||
<DateRangePicker
|
||||
dateRange={dateRange}
|
||||
onChange={(range) => {
|
||||
setDateRange(range);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-5">
|
||||
{issueFilters.filter(option => option.value !== 'all').map(option => {
|
||||
const count = issueCounts.get(option.value as IssueKey) || 0;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIssueFilter(option.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className={`rounded-2xl border p-4 text-left transition-colors cursor-pointer ${
|
||||
issueFilter === option.value
|
||||
? 'border-brand-primary/45 bg-brand-primary/10'
|
||||
: 'border-dark-border bg-dark-card hover:border-brand-primary/35'
|
||||
}`}
|
||||
title={issueHelp[option.value as IssueKey]}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-dark-muted">{option.label}</span>
|
||||
<AlertTriangle className={count ? 'h-4 w-4 text-amber-300' : 'h-4 w-4 text-emerald-300'} />
|
||||
</div>
|
||||
<div className="mt-3 text-2xl font-bold text-dark-text">{formatNumber(count)}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[minmax(360px,1fr)_auto] xl:items-center">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center">
|
||||
<div className="relative w-full md:w-96">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-muted" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(event) => {
|
||||
setSearchTerm(event.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
placeholder="Buscar SKU, produto, cor, tipo..."
|
||||
className="h-10 w-full rounded-xl border border-dark-border bg-dark-input pl-10 pr-3 text-sm font-semibold text-dark-text outline-none transition-colors placeholder:text-dark-muted focus:border-brand-primary"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={issueFilter}
|
||||
onChange={(event) => {
|
||||
setIssueFilter(event.target.value as IssueFilter);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="h-10 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none transition-colors focus:border-brand-primary cursor-pointer"
|
||||
>
|
||||
{issueFilters.map(option => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-dark-muted">
|
||||
{formatNumber(rows.length)} SKUs pendentes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading && !products.length ? (
|
||||
<PlanningIssuesSkeleton />
|
||||
) : rows.length ? (
|
||||
<div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[1180px] table-fixed text-left text-sm">
|
||||
<colgroup>
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[380px]" />
|
||||
<col className="w-[150px]" />
|
||||
<col className="w-[180px]" />
|
||||
<col className="w-[140px]" />
|
||||
<col className="w-[140px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[120px]" />
|
||||
</colgroup>
|
||||
<thead className="border-b border-dark-border bg-dark-header text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">SKU</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Produto</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Tipo</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Pendências</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Família</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Vendido</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Receita</th>
|
||||
<th className="px-4 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{paginatedRows.map(row => (
|
||||
<tr key={row.id} className="transition-colors hover:bg-dark-input/50">
|
||||
<td className="px-6 py-2.5 font-mono text-[11px] text-dark-muted">#{row.id}</td>
|
||||
<td className="max-w-0 px-6 py-2.5">
|
||||
<div className="truncate font-semibold text-dark-text" title={row.name}>{row.name}</div>
|
||||
<div className="mt-1 flex min-w-0 items-center gap-2 text-[10px] font-semibold text-dark-muted">
|
||||
<span className="truncate">Cor: {row.color || '-'}</span>
|
||||
<span>·</span>
|
||||
<span className="truncate">Tam.: {row.size || '-'}</span>
|
||||
{row.hasOverride && <span className="rounded-full border border-brand-primary/25 bg-brand-primary/10 px-2 py-0.5 text-brand-primary">manual</span>}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<ProductTypeBadge type={row.productType} />
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{row.issues.map(issue => (
|
||||
<span
|
||||
key={issue}
|
||||
className="inline-flex rounded-full border border-amber-400/25 bg-amber-400/10 px-2 py-0.5 text-[10px] font-bold text-amber-300"
|
||||
title={issueHelp[issue]}
|
||||
>
|
||||
{issueLabels[issue]}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-2.5 text-xs font-bold text-dark-text">{row.familyLabel}</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap font-bold text-dark-text">{formatNumber(row.quantitySold)} un.</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap font-bold text-brand-primary">{formatCurrency(row.revenue)}</td>
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingProduct(row)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-dark-input text-dark-text transition-colors hover:bg-dark-border cursor-pointer"
|
||||
title={`Editar planejamento do SKU ${row.id}`}
|
||||
aria-label={`Editar planejamento do SKU ${row.id}`}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<Link
|
||||
to={`/products/${row.id}`}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary transition-opacity hover:opacity-80 cursor-pointer"
|
||||
title={`Ver SKU ${row.id}`}
|
||||
aria-label={`Ver SKU ${row.id}`}
|
||||
>
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<PaginationControls
|
||||
totalItems={rows.length}
|
||||
currentPage={safeCurrentPage}
|
||||
totalPages={totalPages}
|
||||
pageSize={itemsPerPage}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
itemLabel="SKUs"
|
||||
pageSizeLabel="por página"
|
||||
startIndex={startIndex}
|
||||
endIndex={Math.min(startIndex + itemsPerPage, rows.length)}
|
||||
onPageChange={setCurrentPage}
|
||||
onPageSizeChange={(size) => {
|
||||
setItemsPerPage(size);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center rounded-2xl border border-dark-border bg-dark-card px-6 py-16 text-center shadow-sm">
|
||||
{products.length ? (
|
||||
<>
|
||||
<CheckCircle2 className="h-10 w-10 text-emerald-300" />
|
||||
<p className="mt-4 text-sm font-bold text-dark-text">Nenhum dado pendente neste filtro.</p>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">Ajuste o filtro ou o período para revisar outros SKUs.</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PackageSearch className="h-10 w-10 text-dark-muted" />
|
||||
<p className="mt-4 text-sm font-bold text-dark-text">Sem produtos no período.</p>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">Altere o intervalo de datas para carregar a fila.</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editingProduct && (
|
||||
<SkuPlanningModal
|
||||
product={editingProduct}
|
||||
override={settings.productOverrides[editingProduct.id]}
|
||||
isSaving={isSaving}
|
||||
onClose={() => setEditingProduct(null)}
|
||||
onSave={(override) => saveProductOverride(editingProduct.id, override)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlanningIssues;
|
||||
@@ -1,228 +1,76 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { useParams, Link, useOutletContext } from 'react-router-dom';
|
||||
import { Package, DollarSign, Pencil, ReceiptText, Warehouse } from 'lucide-react';
|
||||
import { AreaChart, Area, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
import BackButton from '../components/BackButton';
|
||||
import { ArrowLeft, Package, DollarSign } from 'lucide-react';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import SkuPlanningModal from '../components/SkuPlanningModal';
|
||||
import ProductTypeBadge from '../components/ProductTypeBadge';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import type { CutProductOverride, CuttingSettings, DateRange, ProductComposition, ProductDetailsAnalytics } from '../types';
|
||||
import { fetchCuttingSettings, fetchProductComposition, fetchProductDetailsAnalytics, saveCuttingSettings } from '../dataService';
|
||||
import { parseProductName } from '../productParsing';
|
||||
import { formatColorLabel } from '../displayFormatters';
|
||||
import { averageRecentValues, formatDateBucketLabel, formatDateBucketLongLabel, getAutoDateBucket, getMovingAverageWindow, getRangeDayCount, getDateBucketKey, type DateBucket } from '../chartUtils';
|
||||
import { getProductTypeConfig, resolveProductType } from '../productClassification';
|
||||
import { getPlanningStock } from '../planningStock';
|
||||
import type { OrderData, DateRange } from '../types';
|
||||
import { parseOrderDate } from '../dataService';
|
||||
|
||||
const CHART_GRID_COLOR = 'var(--chart-grid)';
|
||||
const CHART_AXIS_COLOR = 'var(--chart-axis)';
|
||||
const CHART_CURSOR_COLOR = 'var(--chart-cursor)';
|
||||
const CHART_DETAIL_BAR_COLOR = 'var(--chart-detail-bar)';
|
||||
const VARIANT_BAR_COLOR = '#52DFA0';
|
||||
|
||||
type ProductChartMetric = 'quantity' | 'revenue' | 'ticket';
|
||||
|
||||
type ProductMetricChartPoint = ProductDetailsAnalytics['chartData'][number] & {
|
||||
selectedValue: number;
|
||||
movingAverage?: number;
|
||||
};
|
||||
|
||||
const formatDateKey = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
type CustomTooltipProps = {
|
||||
active?: boolean;
|
||||
payload?: Array<{
|
||||
value: number;
|
||||
dataKey?: string;
|
||||
payload?: ProductMetricChartPoint;
|
||||
}>;
|
||||
label?: string;
|
||||
metric: ProductChartMetric;
|
||||
formatCurrency: (value: number) => string;
|
||||
formatNumber: (value: number) => string;
|
||||
isHourly: boolean;
|
||||
dateBucket: DateBucket;
|
||||
};
|
||||
|
||||
const CustomTooltip = ({ active, payload, label, metric, formatCurrency, formatNumber, isHourly, dateBucket }: CustomTooltipProps) => {
|
||||
const CustomTooltip = ({ active, payload, label }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
const primaryPayload = payload.find(item => item.dataKey === 'selectedValue') || payload[0];
|
||||
const point = primaryPayload.payload;
|
||||
const value = primaryPayload.value;
|
||||
const displayValue = metric === 'quantity' ? `${formatNumber(value)} un.` : formatCurrency(value);
|
||||
const displayLabel = isHourly ? String(label || '') : formatDateBucketLongLabel(String(label || ''), dateBucket);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl border p-3 shadow-lg"
|
||||
style={{ backgroundColor: 'var(--chart-tooltip-bg)', borderColor: 'var(--chart-tooltip-border)' }}
|
||||
>
|
||||
<p className="font-bold mb-1" style={{ color: CHART_DETAIL_BAR_COLOR }}>{displayLabel}</p>
|
||||
<p className="m-0 font-semibold" style={{ color: 'var(--chart-tooltip-text)' }}>{displayValue}</p>
|
||||
{point && (
|
||||
<div className="mt-2 space-y-1 text-xs" style={{ color: 'var(--chart-axis)' }}>
|
||||
<p className="m-0">Unidades: {formatNumber(point.quantitySold ?? point.value ?? 0)}</p>
|
||||
<p className="m-0">Receita: {formatCurrency(point.revenue ?? 0)}</p>
|
||||
<p className="m-0">Pedidos: {formatNumber(point.orderCount ?? 0)}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
|
||||
<p className="font-bold mb-1" style={{ color: '#9ECAE1' }}>{label}</p>
|
||||
<p className="text-[#ededed] m-0">Vendas: {payload[0].value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const ProductDetailsSkeleton = () => (
|
||||
<div className="space-y-6" aria-label="Carregando produto">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="skeleton h-4 w-20" />
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="skeleton h-16 w-16 rounded-2xl" />
|
||||
<div>
|
||||
<div className="skeleton h-3 w-24" />
|
||||
<div className="skeleton mt-3 h-7 w-80 max-w-[70vw]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="skeleton h-10 w-64" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`product-details-kpi-skeleton-${item}`} className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="flex justify-between gap-6">
|
||||
<div className="w-full">
|
||||
<div className="skeleton h-3 w-36" />
|
||||
<div className="skeleton mt-3 h-8 w-32" />
|
||||
</div>
|
||||
<div className="skeleton h-12 w-12 shrink-0 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="skeleton h-5 w-56" />
|
||||
<div className="mt-8 skeleton h-[400px] w-full" />
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="skeleton h-5 w-44" />
|
||||
<div className="mt-5 space-y-3">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`product-variant-skeleton-${item}`} className="skeleton h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ProductDetails = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { dateRange, setDateRange } = useOutletContext<{
|
||||
const { dateRange, setDateRange, ordersData } = useOutletContext<{
|
||||
dateRange: DateRange,
|
||||
setDateRange: (range: DateRange) => void
|
||||
setDateRange: (range: DateRange) => void,
|
||||
ordersData: OrderData[],
|
||||
refreshInterval: number,
|
||||
setRefreshInterval: (interval: number) => void,
|
||||
loadData: (showLoading?: boolean) => void
|
||||
}>();
|
||||
const [details, setDetails] = useState<ProductDetailsAnalytics | null>(null);
|
||||
const [composition, setComposition] = useState<ProductComposition | null>(null);
|
||||
const [isCompositionLoading, setIsCompositionLoading] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [chartMetric, setChartMetric] = useState<ProductChartMetric>('quantity');
|
||||
const [selectedProductBucket, setSelectedProductBucket] = useState<string | null>(null);
|
||||
const [planningSettings, setPlanningSettings] = useState<CuttingSettings>({ familyYields: {}, productOverrides: {} });
|
||||
const [isPlanningModalOpen, setIsPlanningModalOpen] = useState(false);
|
||||
const [isSavingPlanning, setIsSavingPlanning] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
const { productInfo, chartData, totalSold, totalRevenue } = useMemo(() => {
|
||||
const orders = ordersData.filter(order => order.ID_Produto === id);
|
||||
|
||||
if (orders.length === 0) return { productInfo: null, chartData: [], totalSold: 0, totalRevenue: 0 };
|
||||
|
||||
const loadPlanningSettings = async () => {
|
||||
const settings = await fetchCuttingSettings();
|
||||
if (isMounted) setPlanningSettings(settings);
|
||||
const info = {
|
||||
id: orders[0].ID_Produto,
|
||||
name: orders[0].Descricao_Produto.split(' TAMANHO')[0],
|
||||
price: orders[0].Valor_Unitario
|
||||
};
|
||||
|
||||
void loadPlanningSettings();
|
||||
const salesByDate: Record<string, number> = {};
|
||||
let sold = 0;
|
||||
let revenue = 0;
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
orders.forEach(order => {
|
||||
const orderDate = parseOrderDate(order.Data_Pedido);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadProductDetails = async () => {
|
||||
if (!id) {
|
||||
if (isMounted) {
|
||||
setDetails(null);
|
||||
setComposition(null);
|
||||
setIsLoading(false);
|
||||
setIsCompositionLoading(false);
|
||||
}
|
||||
return;
|
||||
if (orderDate >= dateRange.start && orderDate <= dateRange.end) { const dateStr = order.Data_Pedido;
|
||||
salesByDate[dateStr] = (salesByDate[dateStr] || 0) + order.Quantidade;
|
||||
sold += order.Quantidade;
|
||||
revenue += (order.Quantidade * order.Valor_Unitario);
|
||||
}
|
||||
});
|
||||
|
||||
setIsLoading(true);
|
||||
setIsCompositionLoading(true);
|
||||
const [productDetails, productComposition] = await Promise.all([
|
||||
fetchProductDetailsAnalytics(id, dateRange),
|
||||
fetchProductComposition(id)
|
||||
]);
|
||||
const chart = Object.keys(salesByDate).map(date => ({
|
||||
date,
|
||||
value: salesByDate[date]
|
||||
})).sort((a, b) => {
|
||||
const [da, ma, ya] = a.date.split('-').map(Number);
|
||||
const [db, mb, yb] = b.date.split('-').map(Number);
|
||||
return new Date(ya, ma - 1, da).getTime() - new Date(yb, mb - 1, db).getTime();
|
||||
});
|
||||
|
||||
if (isMounted) {
|
||||
setDetails(productDetails);
|
||||
setComposition(productComposition);
|
||||
setIsLoading(false);
|
||||
setIsCompositionLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void loadProductDetails();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [dateRange, id]);
|
||||
return { productInfo: info, chartData: chart, totalSold: sold, totalRevenue: revenue };
|
||||
}, [id, dateRange, ordersData]);
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR').format(value);
|
||||
};
|
||||
|
||||
const saveProductOverride = async (productId: string, override: CutProductOverride | null) => {
|
||||
const productOverrides = { ...planningSettings.productOverrides };
|
||||
if (override) {
|
||||
productOverrides[productId] = override;
|
||||
} else {
|
||||
delete productOverrides[productId];
|
||||
}
|
||||
|
||||
const nextSettings = { ...planningSettings, productOverrides };
|
||||
setIsSavingPlanning(true);
|
||||
try {
|
||||
const savedSettings = await saveCuttingSettings(nextSettings);
|
||||
setPlanningSettings(savedSettings);
|
||||
setIsPlanningModalOpen(false);
|
||||
} finally {
|
||||
setIsSavingPlanning(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading && !details) {
|
||||
return <ProductDetailsSkeleton />;
|
||||
}
|
||||
|
||||
if (!details?.productInfo) {
|
||||
if (!productInfo) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-zinc-500 dark:text-dark-muted font-medium">Produto não encontrado.</p>
|
||||
@@ -231,112 +79,14 @@ const ProductDetails = () => {
|
||||
);
|
||||
}
|
||||
|
||||
const { productInfo, chartData, totalSold, totalRevenue, totalOrders = 0, averageTicket = 0, variantBreakdown = [] } = details;
|
||||
const productType = resolveProductType(productInfo.name, planningSettings.productOverrides[productInfo.id]);
|
||||
const productTypeConfig = getProductTypeConfig(productType);
|
||||
const isRefreshing = isLoading && Boolean(details);
|
||||
const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
|
||||
const isHourlyChart = isSingleDayRange && chartData.some(point => /h$|:/.test(point.date));
|
||||
const dateBucket = isHourlyChart ? 'day' : getAutoDateBucket(dateRange);
|
||||
const periodDays = getRangeDayCount(dateRange);
|
||||
const dailyAverageSold = totalSold / periodDays;
|
||||
const projectedStockDays = dailyAverageSold > 0 ? getPlanningStock(productInfo.stock) / dailyAverageSold : null;
|
||||
const stockActionLabel = projectedStockDays === null
|
||||
? 'Sem venda no período'
|
||||
: projectedStockDays <= 7
|
||||
? 'Reposição crítica'
|
||||
: projectedStockDays <= 21
|
||||
? 'Planejar reposição'
|
||||
: 'Estoque confortável';
|
||||
const metricConfig = {
|
||||
quantity: {
|
||||
label: 'Unidades',
|
||||
title: `Volume por ${isHourlyChart ? 'Horário' : 'Data'}`,
|
||||
subtitle: 'Quantidade vendida no período selecionado.',
|
||||
tickFormatter: (value: number) => formatNumber(value)
|
||||
},
|
||||
revenue: {
|
||||
label: 'Receita',
|
||||
title: `Receita por ${isHourlyChart ? 'Horário' : 'Data'}`,
|
||||
subtitle: 'Faturamento do produto no período selecionado.',
|
||||
tickFormatter: (value: number) => value >= 1000 ? `${formatNumber(value / 1000)}k` : formatCurrency(value)
|
||||
},
|
||||
ticket: {
|
||||
label: 'Ticket médio',
|
||||
title: `Ticket médio por ${isHourlyChart ? 'Horário' : 'Data'}`,
|
||||
subtitle: 'Receita média por pedido neste produto.',
|
||||
tickFormatter: (value: number) => value >= 1000 ? `${formatNumber(value / 1000)}k` : formatCurrency(value)
|
||||
}
|
||||
} satisfies Record<ProductChartMetric, {
|
||||
label: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
tickFormatter: (value: number) => string;
|
||||
}>;
|
||||
const selectedMetric = metricConfig[chartMetric];
|
||||
const metricChartData = (() => {
|
||||
const bucketMap = new Map<string, ProductMetricChartPoint>();
|
||||
|
||||
chartData.forEach(point => {
|
||||
const sourceKey = isHourlyChart ? point.date : getDateBucketKey(point.date, dateBucket);
|
||||
const current = bucketMap.get(sourceKey) || {
|
||||
date: sourceKey,
|
||||
value: 0,
|
||||
quantitySold: 0,
|
||||
revenue: 0,
|
||||
orderCount: 0,
|
||||
averageTicket: 0,
|
||||
selectedValue: 0
|
||||
};
|
||||
const quantity = point.quantitySold ?? point.value ?? 0;
|
||||
const revenue = point.revenue ?? 0;
|
||||
const orderCount = point.orderCount ?? 0;
|
||||
|
||||
current.value = (current.value || 0) + quantity;
|
||||
current.quantitySold = (current.quantitySold || 0) + quantity;
|
||||
current.revenue = (current.revenue || 0) + revenue;
|
||||
current.orderCount = (current.orderCount || 0) + orderCount;
|
||||
current.averageTicket = current.orderCount ? current.revenue / current.orderCount : 0;
|
||||
bucketMap.set(sourceKey, current);
|
||||
});
|
||||
|
||||
const rows = [...bucketMap.values()]
|
||||
.filter(point => (point.quantitySold || point.value || point.revenue || point.orderCount))
|
||||
.sort((a, b) => a.date.localeCompare(b.date))
|
||||
.map(point => ({
|
||||
...point,
|
||||
selectedValue: chartMetric === 'quantity'
|
||||
? (point.quantitySold ?? point.value)
|
||||
: chartMetric === 'revenue'
|
||||
? (point.revenue ?? 0)
|
||||
: (point.averageTicket ?? 0)
|
||||
}));
|
||||
|
||||
const movingAverageWindow = isHourlyChart ? 0 : getMovingAverageWindow(dateBucket);
|
||||
if (movingAverageWindow > 1) {
|
||||
const values = rows.map(point => point.selectedValue);
|
||||
rows.forEach((point, index) => {
|
||||
point.movingAverage = averageRecentValues(values, index, movingAverageWindow);
|
||||
});
|
||||
}
|
||||
|
||||
return rows;
|
||||
})();
|
||||
const selectedProductPoint = selectedProductBucket
|
||||
? metricChartData.find(point => point.date === selectedProductBucket)
|
||||
: null;
|
||||
const selectedProductBucketLabel = selectedProductPoint
|
||||
? isHourlyChart
|
||||
? selectedProductPoint.date
|
||||
: formatDateBucketLongLabel(selectedProductPoint.date, dateBucket)
|
||||
: '';
|
||||
const maxVariantQuantity = Math.max(...variantBreakdown.map(variant => variant.quantitySold), 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<BackButton fallbackTo="/products" />
|
||||
<Link to="/products" className="inline-flex items-center text-sm font-bold text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text transition-colors w-fit">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border flex items-center justify-center shadow-sm text-brand-primary">
|
||||
@@ -345,19 +95,6 @@ const ProductDetails = () => {
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest">ID: #{productInfo.id}</div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{productInfo.name}</h1>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||||
<ProductTypeBadge type={productType} />
|
||||
<span className="text-xs font-semibold text-dark-muted">{productTypeConfig.description}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsPlanningModalOpen(true)}
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary cursor-pointer"
|
||||
title={`Editar planejamento do SKU ${productInfo.id}`}
|
||||
aria-label={`Editar planejamento do SKU ${productInfo.id}`}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -367,15 +104,11 @@ const ProductDetails = () => {
|
||||
onChange={setDateRange}
|
||||
/> </div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
<div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Unidades Vendidas</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{formatNumber(totalSold)}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">{formatNumber(dailyAverageSold)} un./dia</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{totalSold}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-brand-primary/10 rounded-xl text-brand-primary">
|
||||
<Package size={24} />
|
||||
@@ -390,284 +123,28 @@ const ProductDetails = () => {
|
||||
<DollarSign size={24} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Ticket Médio</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{formatCurrency(averageTicket)}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-sky-500/10 rounded-xl text-sky-500">
|
||||
<ReceiptText size={24} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Estoque</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{formatNumber(productInfo.stock)}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{projectedStockDays === null ? stockActionLabel : `${formatNumber(projectedStockDays)} dias · ${stockActionLabel}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-purple-500/10 rounded-xl text-purple-400">
|
||||
<Warehouse size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="mb-5">
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Composição</h3>
|
||||
{composition && (
|
||||
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">
|
||||
Para produzir 1 UN de {composition.finishedProductSku || productInfo.id}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isCompositionLoading ? (
|
||||
<div className="flex h-24 items-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">Carregando composição…</div>
|
||||
) : !composition ? (
|
||||
<div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-dark-border bg-dark-input/30 text-sm font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
Nenhuma composição sincronizada para este produto.
|
||||
</div>
|
||||
) : composition.components.length === 0 ? (
|
||||
<div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-dark-border bg-dark-input/30 text-sm font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
Esta composição não possui insumos.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-xl border border-dark-border">
|
||||
<table className="w-full min-w-[640px] text-left text-sm">
|
||||
<thead className="bg-dark-input/60 text-[10px] font-bold uppercase tracking-widest text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-4 py-3">Produto / insumo</th>
|
||||
<th className="px-4 py-3">SKU</th>
|
||||
<th className="px-4 py-3 text-right">Quantidade por unidade</th>
|
||||
<th className="px-4 py-3">Unidade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{composition.components.map(component => (
|
||||
<tr key={component.id} className="text-dark-text">
|
||||
<td className="px-4 py-3 font-semibold">
|
||||
{component.productId ? (
|
||||
<Link to={`/products/${component.productId}`} className="text-brand-primary hover:underline">
|
||||
{component.componentName}
|
||||
</Link>
|
||||
) : component.componentName}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-dark-muted">{component.componentSku || '—'}</td>
|
||||
<td className="px-4 py-3 text-right font-semibold">{formatNumber(component.quantityPerUnit)}</td>
|
||||
<td className="px-4 py-3 text-dark-muted">{component.unit || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="mb-8 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">{selectedMetric.title}</h3>
|
||||
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">
|
||||
{isHourlyChart
|
||||
? selectedMetric.subtitle
|
||||
: dateBucket === 'day'
|
||||
? `${selectedMetric.subtitle} Média móvel de 7 dias.`
|
||||
: dateBucket === 'week'
|
||||
? 'Valores agrupados por semana com média móvel de 4 semanas.'
|
||||
: 'Valores agrupados por mês com média móvel de 3 meses.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-fit rounded-xl border border-dark-border bg-dark-input p-1">
|
||||
{(Object.keys(metricConfig) as ProductChartMetric[]).map(metric => (
|
||||
<button
|
||||
key={metric}
|
||||
type="button"
|
||||
onClick={() => setChartMetric(metric)}
|
||||
className={`cursor-pointer rounded-lg px-3 py-1.5 text-xs font-bold transition-colors ${
|
||||
chartMetric === metric
|
||||
? 'bg-dark-card text-dark-text shadow-sm'
|
||||
: 'text-dark-muted hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
{metricConfig[metric].label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{metricChartData.length === 0 ? (
|
||||
<div className="flex h-[360px] items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
Nenhuma venda no período selecionado.
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3>
|
||||
<div className="h-[400px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={metricChartData}
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 28 }}
|
||||
onClick={(event) => {
|
||||
if (event?.activeLabel) setSelectedProductBucket(String(event.activeLabel));
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="productVolumeGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.38} />
|
||||
<stop offset="95%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.04} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
|
||||
<BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date" stroke={CHART_AXIS_COLOR} fontSize={10} tickLine={false} axisLine={false}
|
||||
minTickGap={18}
|
||||
tickFormatter={(value) => (
|
||||
isHourlyChart ? String(value) : formatDateBucketLabel(String(value), dateBucket)
|
||||
)}
|
||||
dataKey="date" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
|
||||
interval={0}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={80}
|
||||
/>
|
||||
<YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => selectedMetric.tickFormatter(Number(value))} />
|
||||
<Tooltip content={<CustomTooltip metric={chartMetric} formatCurrency={formatCurrency} formatNumber={formatNumber} isHourly={isHourlyChart} dateBucket={dateBucket} />} cursor={{ fill: CHART_CURSOR_COLOR }} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="selectedValue"
|
||||
stroke={CHART_DETAIL_BAR_COLOR}
|
||||
strokeWidth={2.25}
|
||||
fill="url(#productVolumeGradient)"
|
||||
dot={{ r: 3, strokeWidth: 2, fill: 'var(--color-dark-card)', stroke: CHART_DETAIL_BAR_COLOR }}
|
||||
activeDot={{ r: 5, strokeWidth: 2, fill: CHART_DETAIL_BAR_COLOR, stroke: 'var(--color-dark-card)' }}
|
||||
/>
|
||||
{!isHourlyChart && metricChartData.some(point => point.movingAverage !== undefined) && (
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="movingAverage"
|
||||
name="Média móvel"
|
||||
stroke="var(--chart-label)"
|
||||
strokeWidth={2.5}
|
||||
strokeDasharray="6 5"
|
||||
dot={false}
|
||||
activeDot={false}
|
||||
/>
|
||||
)}
|
||||
</AreaChart>
|
||||
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
|
||||
<Bar dataKey="value" fill="#9ECAE1" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
{selectedProductPoint && (
|
||||
<div className="mt-4 rounded-xl border border-dark-border bg-dark-input/45 p-4">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-dark-text">{selectedProductBucketLabel}</h4>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Detalhe do ponto selecionado.</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedProductBucket(null)}
|
||||
className="h-8 rounded-lg border border-dark-border bg-dark-card px-3 text-xs font-bold text-dark-muted transition-colors hover:text-dark-text"
|
||||
>
|
||||
Limpar
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-4 grid gap-3 md:grid-cols-5">
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Unidades</div>
|
||||
<div className="mt-1 text-sm font-bold text-dark-text">{formatNumber(selectedProductPoint.quantitySold ?? selectedProductPoint.value ?? 0)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Receita</div>
|
||||
<div className="mt-1 text-sm font-bold text-dark-text">{formatCurrency(selectedProductPoint.revenue ?? 0)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Pedidos</div>
|
||||
<div className="mt-1 text-sm font-bold text-dark-text">{formatNumber(selectedProductPoint.orderCount ?? 0)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Ticket</div>
|
||||
<div className="mt-1 text-sm font-bold text-dark-text">{formatCurrency(selectedProductPoint.averageTicket ?? 0)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Cobertura</div>
|
||||
<div className="mt-1 text-sm font-bold text-dark-text">{projectedStockDays === null ? '-' : `${formatNumber(projectedStockDays)} dias`}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
|
||||
<div className="mb-5 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Variações do Produto</h3>
|
||||
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">Tamanhos, cores ou SKUs parecidos no mesmo período.</p>
|
||||
</div>
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-dark-muted">
|
||||
{formatNumber(totalOrders)} {totalOrders === 1 ? 'pedido' : 'pedidos'}
|
||||
</span>
|
||||
</div>
|
||||
{variantBreakdown.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
|
||||
Nenhuma variação encontrada para este produto.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{variantBreakdown.map(variant => {
|
||||
const width = maxVariantQuantity ? Math.max(4, (variant.quantitySold / maxVariantQuantity) * 100) : 0;
|
||||
const metadata = parseProductName(variant.name);
|
||||
|
||||
return (
|
||||
<div key={variant.id} className="rounded-xl border border-dark-border bg-dark-input/45 p-4">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-bold text-dark-text">{variant.name}</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] font-medium text-dark-muted">
|
||||
<span>#{variant.id}</span>
|
||||
{metadata.color && (
|
||||
<span className="rounded-full border border-sky-400/25 bg-sky-400/10 px-2 py-0.5 font-bold text-sky-300">
|
||||
{formatColorLabel(metadata.color)}
|
||||
</span>
|
||||
)}
|
||||
{metadata.size && (
|
||||
<span className="rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2 py-0.5 font-bold text-emerald-300">
|
||||
Tam. {metadata.size}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-5 text-right text-xs">
|
||||
<div>
|
||||
<div className="font-bold text-dark-text">{formatNumber(variant.quantitySold)} un.</div>
|
||||
<div className="text-dark-muted">vendidas</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-brand-primary">{formatCurrency(variant.revenue)}</div>
|
||||
<div className="text-dark-muted">receita</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 h-2 overflow-hidden rounded-full bg-dark-border">
|
||||
<div
|
||||
className="h-full rounded-full"
|
||||
style={{
|
||||
width: `${width}%`,
|
||||
backgroundColor: VARIANT_BAR_COLOR,
|
||||
opacity: 0.72
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isPlanningModalOpen && (
|
||||
<SkuPlanningModal
|
||||
product={productInfo}
|
||||
override={planningSettings.productOverrides[productInfo.id]}
|
||||
isSaving={isSavingPlanning}
|
||||
onClose={() => setIsPlanningModalOpen(false)}
|
||||
onSave={(override) => saveProductOverride(productInfo.id, override)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,623 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useOutletContext, useParams } from 'react-router-dom';
|
||||
import { DollarSign, Eye, Package, Palette, Pencil, Ruler, TrendingDown, Warehouse } from 'lucide-react';
|
||||
import BackButton from '../components/BackButton';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import PaginationControls from '../components/PaginationControls';
|
||||
import ProductColorBadge, { ProductColorSwatch } from '../components/ProductColorBadge';
|
||||
import ProductTypeBadge from '../components/ProductTypeBadge';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import { buildSkuEditPath } from '../catalogLinks';
|
||||
import { buildOpenProductionByProductId } from '../analytics/cutting';
|
||||
import { fetchCuttingSettings, fetchProductAnalytics, fetchProductionOrders } from '../dataService';
|
||||
import { decodeProductGroupKey, normalizeProductText, parseProductName } from '../productParsing';
|
||||
import { formatColorLabel } from '../displayFormatters';
|
||||
import { getProductColor } from '../productColors';
|
||||
import { getDominantProductType, getProductTypeConfig, resolveProductType, type ProductTypeKey } from '../productClassification';
|
||||
import { getPlanningStock } from '../planningStock';
|
||||
import type { CuttingSettings, DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
|
||||
|
||||
type VariantRow = ProductAnalyticsItem & {
|
||||
color: string;
|
||||
size: string;
|
||||
dailySales: number;
|
||||
projectedDemand: number;
|
||||
openProductionQuantity: number;
|
||||
availableQuantity: number;
|
||||
suggestedReplenishment: number;
|
||||
daysOfCover: number | null;
|
||||
productType: ProductTypeKey;
|
||||
};
|
||||
|
||||
type BreakdownRow = {
|
||||
label: string;
|
||||
quantitySold: number;
|
||||
revenue: number;
|
||||
stock: number;
|
||||
skuCount: number;
|
||||
};
|
||||
|
||||
const BREAKDOWN_LIMIT = 12;
|
||||
const REPLENISHMENT_TARGET_DAYS = 30;
|
||||
|
||||
const allProductionOrdersRange = {
|
||||
start: new Date(2000, 0, 1),
|
||||
end: new Date(2100, 11, 31)
|
||||
};
|
||||
|
||||
const getRangeDays = (range: DateRange) => {
|
||||
const start = new Date(range.start);
|
||||
const end = new Date(range.end);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
end.setHours(0, 0, 0, 0);
|
||||
return Math.max(1, Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number, maximumFractionDigits = 0) => (
|
||||
new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
|
||||
);
|
||||
|
||||
const formatCurrency = (value: number) => (
|
||||
new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value)
|
||||
);
|
||||
|
||||
const formatDays = (value: number | null) => {
|
||||
if (value === null) return '-';
|
||||
if (value > 999) return '999+ dias';
|
||||
return `${formatNumber(value, value < 10 ? 1 : 0)} dias`;
|
||||
};
|
||||
|
||||
const getBarColor = (label: string) => {
|
||||
const color = getProductColor(label);
|
||||
return `color-mix(in srgb, ${color} 74%, var(--color-dark-text) 26%)`;
|
||||
};
|
||||
|
||||
const buildBreakdown = (rows: VariantRow[], field: 'color' | 'size') => {
|
||||
const totals = new Map<string, BreakdownRow>();
|
||||
|
||||
rows.forEach(row => {
|
||||
const label = row[field] || (field === 'color' ? 'Sem cor' : 'Sem tamanho');
|
||||
const current = totals.get(label) || { label, quantitySold: 0, revenue: 0, stock: 0, skuCount: 0 };
|
||||
totals.set(label, {
|
||||
label,
|
||||
quantitySold: current.quantitySold + row.quantitySold,
|
||||
revenue: current.revenue + row.revenue,
|
||||
stock: current.stock + row.stock,
|
||||
skuCount: current.skuCount + 1
|
||||
});
|
||||
});
|
||||
|
||||
return [...totals.values()].sort((a, b) => b.quantitySold - a.quantitySold);
|
||||
};
|
||||
|
||||
const BreakdownPanel = ({
|
||||
title,
|
||||
subtitle,
|
||||
rows,
|
||||
type
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
rows: BreakdownRow[];
|
||||
type: 'color' | 'size';
|
||||
}) => {
|
||||
const maxSold = Math.max(...rows.map(row => row.quantitySold), 0);
|
||||
const visibleRows = rows.slice(0, BREAKDOWN_LIMIT);
|
||||
const hiddenCount = Math.max(0, rows.length - visibleRows.length);
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="mb-5 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-dark-text">{title}</h3>
|
||||
<p className="mt-1 text-sm font-medium text-dark-muted">{subtitle}</p>
|
||||
</div>
|
||||
{type === 'color' ? (
|
||||
<Palette className="h-5 w-5 text-brand-primary" />
|
||||
) : (
|
||||
<Ruler className="h-5 w-5 text-brand-primary" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center text-sm font-semibold text-dark-muted">
|
||||
Sem dados para este grupo.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{visibleRows.map(row => {
|
||||
const width = maxSold ? Math.max(4, (row.quantitySold / maxSold) * 100) : 0;
|
||||
const barColor = type === 'color' ? getBarColor(row.label) : '#25c2ff';
|
||||
const displayLabel = type === 'color' ? formatColorLabel(row.label) : row.label;
|
||||
|
||||
return (
|
||||
<div key={row.label} className="grid grid-cols-[minmax(7.5rem,9rem)_1fr_6rem] items-center gap-3">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
{type === 'color' ? <ProductColorSwatch label={row.label} /> : <span className="h-2.5 w-2.5 shrink-0 rounded-sm bg-sky-400" />}
|
||||
<span className="truncate text-xs font-bold text-dark-text" title={displayLabel}>
|
||||
{type === 'size' && row.label !== 'Sem tamanho' ? `Tam. ${row.label}` : displayLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-3 overflow-hidden rounded-full border border-dark-border bg-dark-input">
|
||||
<div
|
||||
className="h-full rounded-full"
|
||||
style={{ width: `${width}%`, backgroundColor: barColor }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-right text-xs">
|
||||
<div className="font-bold text-dark-text">{formatNumber(row.quantitySold)} un.</div>
|
||||
<div className="text-[10px] font-semibold text-dark-muted">{row.skuCount} SKUs</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{hiddenCount > 0 && (
|
||||
<div className="border-t border-dark-border pt-3 text-xs font-semibold text-dark-muted">
|
||||
+{formatNumber(hiddenCount)} itens fora do top {BREAKDOWN_LIMIT}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProductGroupDetailsSkeleton = () => (
|
||||
<div className="space-y-6" aria-label="Carregando grupo de produtos">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="skeleton h-4 w-20" />
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="skeleton h-16 w-16 rounded-2xl" />
|
||||
<div className="w-full max-w-xl">
|
||||
<div className="skeleton h-3 w-24" />
|
||||
<div className="skeleton mt-3 h-7 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`group-kpi-skeleton-${item}`} className="skeleton h-28 rounded-2xl" />
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
<div className="skeleton h-80 rounded-2xl" />
|
||||
<div className="skeleton h-80 rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ProductGroupDetails = () => {
|
||||
const { groupKey } = useParams<{ groupKey: string }>();
|
||||
const { dateRange, setDateRange } = useOutletContext<{
|
||||
dateRange: DateRange,
|
||||
setDateRange: (range: DateRange) => void
|
||||
}>();
|
||||
const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
|
||||
const [productionOrders, setProductionOrders] = useState<ProductionOrderItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [planningSettings, setPlanningSettings] = useState<CuttingSettings>({ familyYields: {}, productOverrides: {} });
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(20);
|
||||
|
||||
const groupName = useMemo(() => {
|
||||
if (!groupKey) return '';
|
||||
|
||||
try {
|
||||
return decodeProductGroupKey(groupKey);
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}, [groupKey]);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadPlanningSettings = async () => {
|
||||
const settings = await fetchCuttingSettings();
|
||||
if (isMounted) setPlanningSettings(settings);
|
||||
};
|
||||
|
||||
void loadPlanningSettings();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadProducts = async () => {
|
||||
setIsLoading(true);
|
||||
const [productData, productionOrderData] = await Promise.all([
|
||||
fetchProductAnalytics(dateRange),
|
||||
fetchProductionOrders(allProductionOrdersRange)
|
||||
]);
|
||||
|
||||
if (isMounted) {
|
||||
setProducts(productData);
|
||||
setProductionOrders(productionOrderData.orders);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void loadProducts();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [dateRange]);
|
||||
|
||||
const openProductionByProductId = useMemo(
|
||||
() => buildOpenProductionByProductId(products, productionOrders),
|
||||
[products, productionOrders]
|
||||
);
|
||||
|
||||
const groupRows = useMemo<VariantRow[]>(() => {
|
||||
const rangeDays = getRangeDays(dateRange);
|
||||
const normalizedGroupName = normalizeProductText(groupName).toLowerCase();
|
||||
|
||||
return products
|
||||
.map(product => {
|
||||
const metadata = parseProductName(product.name);
|
||||
const productType = resolveProductType(product.name, planningSettings.productOverrides[product.id]);
|
||||
const dailySales = product.quantitySold / rangeDays;
|
||||
const projectedDemand = dailySales * REPLENISHMENT_TARGET_DAYS;
|
||||
const openProductionQuantity = openProductionByProductId[product.id] || 0;
|
||||
const availableQuantity = getPlanningStock(product.stock) + openProductionQuantity;
|
||||
const suggestedReplenishment = Math.max(0, Math.ceil(projectedDemand - availableQuantity));
|
||||
|
||||
return {
|
||||
...product,
|
||||
color: metadata.color,
|
||||
size: metadata.size,
|
||||
baseName: metadata.baseName,
|
||||
dailySales,
|
||||
projectedDemand,
|
||||
openProductionQuantity,
|
||||
availableQuantity,
|
||||
suggestedReplenishment,
|
||||
daysOfCover: dailySales > 0 ? availableQuantity / dailySales : null,
|
||||
productType
|
||||
};
|
||||
})
|
||||
.filter(product => normalizeProductText(product.baseName).toLowerCase() === normalizedGroupName)
|
||||
.sort((a, b) => b.quantitySold - a.quantitySold);
|
||||
}, [dateRange, groupName, openProductionByProductId, planningSettings.productOverrides, products]);
|
||||
|
||||
const totals = useMemo(() => {
|
||||
const totalSold = groupRows.reduce((total, row) => total + row.quantitySold, 0);
|
||||
const totalRevenue = groupRows.reduce((total, row) => total + row.revenue, 0);
|
||||
const totalStock = groupRows.reduce((total, row) => total + row.stock, 0);
|
||||
const openProductionQuantity = groupRows.reduce((total, row) => total + row.openProductionQuantity, 0);
|
||||
const availableQuantity = groupRows.reduce((total, row) => total + row.availableQuantity, 0);
|
||||
const dailySales = groupRows.reduce((total, row) => total + row.dailySales, 0);
|
||||
const projectedDemand = groupRows.reduce((total, row) => total + row.projectedDemand, 0);
|
||||
const suggestedReplenishment = Math.max(0, Math.ceil(projectedDemand - availableQuantity));
|
||||
const daysOfCover = dailySales > 0 ? availableQuantity / dailySales : null;
|
||||
const colors = new Set(groupRows.map(row => row.color).filter(Boolean));
|
||||
const sizes = new Set(groupRows.map(row => row.size).filter(Boolean));
|
||||
const productType = getDominantProductType(groupRows);
|
||||
|
||||
return {
|
||||
totalSold,
|
||||
totalRevenue,
|
||||
totalStock,
|
||||
openProductionQuantity,
|
||||
availableQuantity,
|
||||
dailySales,
|
||||
projectedDemand,
|
||||
suggestedReplenishment,
|
||||
daysOfCover,
|
||||
colorCount: colors.size,
|
||||
sizeCount: sizes.size,
|
||||
productType
|
||||
};
|
||||
}, [groupRows]);
|
||||
const productTypeConfig = getProductTypeConfig(totals.productType);
|
||||
|
||||
const colorBreakdown = useMemo(() => buildBreakdown(groupRows, 'color'), [groupRows]);
|
||||
const sizeBreakdown = useMemo(() => buildBreakdown(groupRows, 'size'), [groupRows]);
|
||||
const replenishmentDrivers = useMemo(() => (
|
||||
groupRows
|
||||
.filter(row => row.suggestedReplenishment > 0)
|
||||
.sort((a, b) => b.suggestedReplenishment - a.suggestedReplenishment)
|
||||
.slice(0, 5)
|
||||
), [groupRows]);
|
||||
const isRefreshing = isLoading && products.length > 0;
|
||||
const totalPages = Math.ceil(groupRows.length / itemsPerPage);
|
||||
const safeCurrentPage = Math.min(currentPage, totalPages || 1);
|
||||
const startIndex = (safeCurrentPage - 1) * itemsPerPage;
|
||||
const paginatedRows = groupRows.slice(startIndex, startIndex + itemsPerPage);
|
||||
|
||||
if (isLoading && products.length === 0) {
|
||||
return <ProductGroupDetailsSkeleton />;
|
||||
}
|
||||
|
||||
if (!groupName || groupRows.length === 0) {
|
||||
return (
|
||||
<div className="py-12 text-center">
|
||||
<p className="font-medium text-zinc-500 dark:text-dark-muted">Grupo de produtos não encontrado.</p>
|
||||
<Link to="/products" className="mt-4 inline-block font-bold text-brand-primary hover:underline">
|
||||
Voltar para produtos
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-col gap-4">
|
||||
<BackButton fallbackTo="/products" />
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-brand-primary shadow-sm dark:border-dark-border dark:bg-dark-card">
|
||||
<Package className="h-8 w-8" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-dark-muted">
|
||||
Grupo · {formatNumber(groupRows.length)} SKUs · {formatNumber(totals.colorCount)} cores · {formatNumber(totals.sizeCount)} tamanhos
|
||||
</p>
|
||||
<h1 className="truncate text-2xl font-bold text-zinc-900 dark:text-dark-text" title={groupName}>{groupName}</h1>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||||
<ProductTypeBadge type={totals.productType} />
|
||||
<span className="text-xs font-semibold text-dark-muted">{productTypeConfig.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DateRangePicker
|
||||
dateRange={dateRange}
|
||||
onChange={(range) => {
|
||||
setDateRange(range);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
<div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Unidades vendidas</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{formatNumber(totals.totalSold)}</p>
|
||||
</div>
|
||||
<Package className="h-6 w-6 text-brand-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Receita total</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{formatCurrency(totals.totalRevenue)}</p>
|
||||
</div>
|
||||
<DollarSign className="h-6 w-6 text-emerald-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Estoque</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{formatNumber(totals.totalStock)}</p>
|
||||
</div>
|
||||
<Warehouse className="h-6 w-6 text-purple-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Cobertura estimada</p>
|
||||
<p className="text-3xl font-bold text-dark-text">{formatDays(totals.daysOfCover)}</p>
|
||||
</div>
|
||||
<TrendingDown className="h-6 w-6 text-sky-300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="mb-4 flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-dark-text">Contexto de reposição</h2>
|
||||
<p className="mt-1 text-sm font-medium text-dark-muted">
|
||||
Projeção para {REPLENISHMENT_TARGET_DAYS} dias usando vendas do período, estoque atual e OP aberta quando encontrada.
|
||||
</p>
|
||||
</div>
|
||||
<span className={`w-fit rounded-full border px-3 py-1 text-xs font-bold ${totals.suggestedReplenishment > 0 ? 'border-red-400/30 bg-red-400/10 text-red-300' : 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300'}`}>
|
||||
{totals.suggestedReplenishment > 0 ? 'Com necessidade' : 'Coberto'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/50 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Sugestão</p>
|
||||
<p className={`mt-2 text-2xl font-bold ${totals.suggestedReplenishment > 0 ? 'text-red-300' : 'text-emerald-300'}`}>
|
||||
{formatNumber(totals.suggestedReplenishment)} un.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/50 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Demanda 30 dias</p>
|
||||
<p className="mt-2 text-2xl font-bold text-dark-text">{formatNumber(totals.projectedDemand, 1)} un.</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/50 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Disponível</p>
|
||||
<p className="mt-2 text-2xl font-bold text-dark-text">{formatNumber(totals.availableQuantity)} un.</p>
|
||||
{!!totals.openProductionQuantity && (
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Inclui OP {formatNumber(totals.openProductionQuantity)} un.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/50 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">Cobertura</p>
|
||||
<p className="mt-2 text-2xl font-bold text-dark-text">{formatDays(totals.daysOfCover)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-xl border border-dark-border bg-dark-input/35">
|
||||
<div className="border-b border-dark-border px-4 py-3">
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Principais drivers</h3>
|
||||
</div>
|
||||
{replenishmentDrivers.length ? (
|
||||
<div className="divide-y divide-dark-border">
|
||||
{replenishmentDrivers.map(row => (
|
||||
<div key={row.id} className="grid grid-cols-[1fr_auto] gap-4 px-4 py-3">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-bold text-dark-text" title={row.name}>{row.name}</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
<ProductColorBadge label={row.color} className="max-w-[8rem]" />
|
||||
<span className="rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2.5 py-1 text-xs font-bold text-emerald-300">
|
||||
{row.size || 'Sem tamanho'}
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-dark-muted">
|
||||
Cobertura {formatDays(row.daysOfCover)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-bold text-red-300">{formatNumber(row.suggestedReplenishment)} un.</p>
|
||||
<p className="mt-1 text-[10px] font-semibold text-dark-muted">sugerido</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 py-6 text-sm font-semibold text-dark-muted">
|
||||
Nenhum SKU do grupo está abaixo da cobertura projetada.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
<BreakdownPanel
|
||||
title="Venda por cor"
|
||||
subtitle="Cores mais vendidas dentro deste grupo."
|
||||
rows={colorBreakdown}
|
||||
type="color"
|
||||
/>
|
||||
<BreakdownPanel
|
||||
title="Venda por tamanho"
|
||||
subtitle="Tamanhos mais vendidos dentro deste grupo."
|
||||
rows={sizeBreakdown}
|
||||
type="size"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-dark-border dark:bg-dark-card">
|
||||
<div className="flex flex-col gap-2 border-b border-zinc-100 px-6 py-4 dark:border-dark-border md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-zinc-900 dark:text-dark-text">Variações do grupo</h3>
|
||||
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">SKUs, cores e tamanhos que formam este grupo.</p>
|
||||
</div>
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-dark-muted">
|
||||
{formatNumber(groupRows.length)} SKUs
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[1100px] table-fixed text-left text-sm">
|
||||
<colgroup>
|
||||
<col className="w-[150px]" />
|
||||
<col className="w-[360px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[100px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[140px]" />
|
||||
<col className="w-[130px]" />
|
||||
<col className="w-[130px]" />
|
||||
</colgroup>
|
||||
<thead className="border-b border-zinc-100 bg-zinc-50 text-zinc-500 dark:border-dark-border dark:bg-dark-header dark:text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">ID Produto</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Descrição</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Cor</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Tamanho</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Vendido</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Estoque</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Média diária</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Receita</th>
|
||||
<th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{paginatedRows.map(row => (
|
||||
<tr key={row.id} className="transition-colors hover:bg-zinc-50/80 dark:hover:bg-dark-input/50">
|
||||
<td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{row.id}</td>
|
||||
<td className="max-w-0 px-6 py-2.5">
|
||||
<div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={row.name}>{row.name}</div>
|
||||
<div className="mt-1 flex min-w-0 items-center gap-2">
|
||||
<ProductTypeBadge type={row.productType} />
|
||||
<span className="truncate text-[10px] font-medium text-zinc-400 dark:text-dark-muted">Preço Atual: {formatCurrency(row.lastPrice)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<ProductColorBadge label={row.color} className="max-w-[8rem]" />
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<span className="inline-flex rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2.5 py-1 text-xs font-bold text-emerald-300">
|
||||
{row.size || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Package className="h-3.5 w-3.5 shrink-0 text-zinc-400 dark:text-dark-muted" />
|
||||
<span className="min-w-0 font-bold tabular-nums text-zinc-900 dark:text-dark-text">{formatNumber(row.quantitySold)} un.</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.stock)} un.</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap text-zinc-500 dark:text-dark-muted">{formatNumber(row.dailySales, 2)} un./dia</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap font-bold text-brand-primary">{formatCurrency(row.revenue)}</td>
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Link
|
||||
to={buildSkuEditPath({ sku: row.id, name: row.name, color: row.color, size: row.size })}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-dark-input text-dark-text transition-colors hover:bg-dark-border"
|
||||
title={`Editar SKU ${row.id}`}
|
||||
aria-label={`Editar SKU ${row.id}`}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
<Link
|
||||
to={`/products/${row.id}`}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary transition-opacity hover:opacity-80"
|
||||
title={`Ver SKU ${row.id}`}
|
||||
aria-label={`Ver SKU ${row.id}`}
|
||||
>
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<PaginationControls
|
||||
totalItems={groupRows.length}
|
||||
currentPage={safeCurrentPage}
|
||||
totalPages={totalPages}
|
||||
pageSize={itemsPerPage}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
itemLabel="SKUs"
|
||||
pageSizeLabel="SKUs por página"
|
||||
startIndex={startIndex}
|
||||
endIndex={Math.min(startIndex + itemsPerPage, groupRows.length)}
|
||||
onPageChange={setCurrentPage}
|
||||
onPageSizeChange={(pageSize) => {
|
||||
setItemsPerPage(pageSize);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductGroupDetails;
|
||||
@@ -1,684 +0,0 @@
|
||||
import { Fragment, type FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useOutletContext } from 'react-router-dom';
|
||||
import { ArrowLeft, CalendarDays, CheckCircle2, ClipboardList, Clock3, Download, PackageCheck, Search } from 'lucide-react';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import PaginationControls from '../components/PaginationControls';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import { consumeSupplyLotForProduction, exportToCSV, fetchProductionOrders, fetchSupplySummary, updateProductionOrderStatus } from '../dataService';
|
||||
import type { DateRange, ProductionOrderItem, ProductionOrderStatus, ProductionOrderSummary, SupplyLot } from '../types';
|
||||
|
||||
type ProductionOrderStatusTab = 'all' | 'open' | 'in_progress' | 'finished' | 'canceled';
|
||||
|
||||
const emptySummary: ProductionOrderSummary = {
|
||||
orders: [],
|
||||
counts: { all: 0, open: 0, in_progress: 0, finished: 0, canceled: 0 }
|
||||
};
|
||||
|
||||
const statusTabs: Array<{ key: ProductionOrderStatusTab; label: string; dotClass: string }> = [
|
||||
{ key: 'all', label: 'Todas', dotClass: 'bg-dark-muted' },
|
||||
{ key: 'open', label: 'Em aberto', dotClass: 'bg-amber-400' },
|
||||
{ key: 'in_progress', label: 'Em andamento', dotClass: 'bg-sky-400' },
|
||||
{ key: 'finished', label: 'Finalizada', dotClass: 'bg-emerald-400' },
|
||||
{ key: 'canceled', label: 'Cancelada', dotClass: 'bg-zinc-500' }
|
||||
];
|
||||
|
||||
const editableStatusOptions: Array<{ value: ProductionOrderStatusTab; label: string }> = statusTabs
|
||||
.filter(tab => tab.key !== 'all')
|
||||
.map(tab => ({ value: tab.key, label: tab.label }));
|
||||
|
||||
const statusStyles: Record<string, { label: string; className: string; dotClass: string }> = {
|
||||
open: {
|
||||
label: 'Em aberto',
|
||||
className: 'border-amber-400/35 bg-amber-400/10 text-amber-300',
|
||||
dotClass: 'bg-amber-400'
|
||||
},
|
||||
in_progress: {
|
||||
label: 'Em andamento',
|
||||
className: 'border-sky-400/35 bg-sky-400/10 text-sky-300',
|
||||
dotClass: 'bg-sky-400'
|
||||
},
|
||||
finished: {
|
||||
label: 'Finalizada',
|
||||
className: 'border-emerald-400/35 bg-emerald-400/10 text-emerald-300',
|
||||
dotClass: 'bg-emerald-400'
|
||||
},
|
||||
canceled: {
|
||||
label: 'Cancelada',
|
||||
className: 'border-zinc-500/35 bg-zinc-500/10 text-zinc-400',
|
||||
dotClass: 'bg-zinc-500'
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (date: string | null) => {
|
||||
if (!date) return '-';
|
||||
const parsedDate = new Date(`${date}T00:00:00`);
|
||||
if (Number.isNaN(parsedDate.getTime())) return date;
|
||||
return new Intl.DateTimeFormat('pt-BR').format(parsedDate);
|
||||
};
|
||||
|
||||
const formatQuantity = (value: number) => (
|
||||
new Intl.NumberFormat('pt-BR', {
|
||||
minimumFractionDigits: Number.isInteger(value) ? 0 : 2,
|
||||
maximumFractionDigits: 4
|
||||
}).format(value)
|
||||
);
|
||||
|
||||
const formatOptionalQuantity = (value: number | null) => (
|
||||
value === null ? '-' : formatQuantity(value)
|
||||
);
|
||||
|
||||
const hasProductionOrderDetails = (order: ProductionOrderItem) => (
|
||||
order.components.length > 0 ||
|
||||
order.steps.length > 0 ||
|
||||
Boolean(order.notes || order.supplier || order.lotCode || order.rollQuantity || order.fabricKg || order.ribKg || order.yieldPiecesPerKg)
|
||||
);
|
||||
|
||||
const getStatusStyle = (status: ProductionOrderStatus, fallbackLabel: string) => (
|
||||
statusStyles[String(status)] || {
|
||||
label: fallbackLabel || 'Em aberto',
|
||||
className: 'border-dark-border bg-dark-input text-dark-muted',
|
||||
dotClass: 'bg-dark-muted'
|
||||
}
|
||||
);
|
||||
|
||||
const ProductionOrdersSkeleton = () => (
|
||||
<div className="space-y-6" aria-label="Carregando ordens de produção">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`production-kpi-skeleton-${item}`} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="skeleton h-3 w-28" />
|
||||
<div className="skeleton mt-3 h-8 w-20" />
|
||||
<div className="skeleton mt-3 h-3 w-36" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card shadow-sm">
|
||||
<div className="border-b border-dark-border p-5">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div className="skeleton h-10 w-full max-w-xl" />
|
||||
<div className="flex gap-3">
|
||||
<div className="skeleton h-10 w-32" />
|
||||
<div className="skeleton h-10 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex gap-4">
|
||||
{[0, 1, 2, 3, 4].map(item => (
|
||||
<div key={`production-tab-skeleton-${item}`} className="skeleton h-8 w-28" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-border">
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7].map(row => (
|
||||
<div key={`production-row-skeleton-${row}`} className="grid grid-cols-[90px_120px_120px_1.5fr_110px_180px_110px] gap-5 px-6 py-4">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(column => (
|
||||
<div key={`production-cell-skeleton-${row}-${column}`} className="skeleton h-4" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ProductionOrders = () => {
|
||||
const { dateRange, setDateRange, refreshInterval, setRefreshInterval } = useOutletContext<{
|
||||
dateRange: DateRange;
|
||||
setDateRange: (range: DateRange) => void;
|
||||
refreshInterval: number;
|
||||
setRefreshInterval: (interval: number) => void;
|
||||
}>();
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<ProductionOrderStatusTab>('all');
|
||||
const [summary, setSummary] = useState<ProductionOrderSummary>(emptySummary);
|
||||
const [supplyLots, setSupplyLots] = useState<SupplyLot[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSupplyBusy, setIsSupplyBusy] = useState(false);
|
||||
const [supplyMessage, setSupplyMessage] = useState('');
|
||||
const [busyStatusOrderId, setBusyStatusOrderId] = useState<number | null>(null);
|
||||
const [statusMessage, setStatusMessage] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(20);
|
||||
const [exitForm, setExitForm] = useState({
|
||||
orderId: '',
|
||||
lotId: '',
|
||||
quantity: '',
|
||||
reason: '',
|
||||
});
|
||||
|
||||
const loadProductionOrders = useCallback(async (options?: { force?: boolean }) => {
|
||||
setIsLoading(true);
|
||||
const nextSummary = await fetchProductionOrders(dateRange, { search: searchTerm }, options);
|
||||
setSummary(nextSummary);
|
||||
setIsLoading(false);
|
||||
}, [dateRange, searchTerm]);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const load = async () => {
|
||||
setIsLoading(true);
|
||||
const [nextSummary, nextSupplySummary] = await Promise.all([
|
||||
fetchProductionOrders(dateRange, { search: searchTerm }),
|
||||
fetchSupplySummary()
|
||||
]);
|
||||
if (isMounted) {
|
||||
setSummary(nextSummary);
|
||||
setSupplyLots(nextSupplySummary.lots);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void load();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [dateRange, searchTerm]);
|
||||
|
||||
useEffect(() => {
|
||||
if (refreshInterval === 0) return undefined;
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
void loadProductionOrders({ force: true });
|
||||
}, refreshInterval);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [loadProductionOrders, refreshInterval]);
|
||||
|
||||
const filteredOrders = useMemo(() => {
|
||||
if (statusFilter === 'all') return summary.orders;
|
||||
return summary.orders.filter(order => order.status === statusFilter);
|
||||
}, [statusFilter, summary.orders]);
|
||||
|
||||
const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);
|
||||
const safeCurrentPage = Math.min(currentPage, totalPages || 1);
|
||||
const startIndex = (safeCurrentPage - 1) * itemsPerPage;
|
||||
const paginatedOrders = filteredOrders.slice(startIndex, startIndex + itemsPerPage);
|
||||
const isRefreshing = isLoading && summary.orders.length > 0;
|
||||
|
||||
const openCount = summary.counts.open || 0;
|
||||
const progressCount = summary.counts.in_progress || 0;
|
||||
const finishedCount = summary.counts.finished || 0;
|
||||
const totalQuantity = summary.orders.reduce((total, order) => total + order.quantity, 0);
|
||||
|
||||
const handleManualRefresh = () => {
|
||||
void loadProductionOrders({ force: true });
|
||||
};
|
||||
|
||||
const handleStatusChange = async (order: ProductionOrderItem, status: ProductionOrderStatusTab) => {
|
||||
if (status === 'all' || status === order.status) return;
|
||||
|
||||
setBusyStatusOrderId(order.id);
|
||||
setStatusMessage('');
|
||||
try {
|
||||
await updateProductionOrderStatus(order.id, status);
|
||||
const nextSummary = await fetchProductionOrders(dateRange, { search: searchTerm }, { force: true });
|
||||
setSummary(nextSummary);
|
||||
setStatusMessage(`OP ${order.number || `#${order.id}`} atualizada para ${statusStyles[status]?.label || status}.`);
|
||||
} catch (error) {
|
||||
setStatusMessage(error instanceof Error ? error.message : 'Não foi possível atualizar o status da OP.');
|
||||
} finally {
|
||||
setBusyStatusOrderId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const refreshSupplyLots = async () => {
|
||||
const supplySummary = await fetchSupplySummary();
|
||||
setSupplyLots(supplySummary.lots);
|
||||
};
|
||||
|
||||
const selectedOrder = summary.orders.find(order => `${order.id}` === exitForm.orderId);
|
||||
const selectedLot = supplyLots.find(lot => `${lot.id}` === exitForm.lotId);
|
||||
|
||||
const handleProductionExit = async (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const lotId = Number(exitForm.lotId);
|
||||
const quantity = Number(exitForm.quantity.replace(',', '.'));
|
||||
if (!lotId || !selectedOrder || !Number.isFinite(quantity) || quantity <= 0) return;
|
||||
|
||||
setIsSupplyBusy(true);
|
||||
setSupplyMessage('');
|
||||
try {
|
||||
await consumeSupplyLotForProduction(lotId, {
|
||||
quantity,
|
||||
productionOrderNumber: selectedOrder.number || `${selectedOrder.id}`,
|
||||
reason: exitForm.reason.trim() || selectedOrder.productDescription,
|
||||
});
|
||||
await refreshSupplyLots();
|
||||
setExitForm({ orderId: '', lotId: '', quantity: '', reason: '' });
|
||||
setSupplyMessage('Saída de material registrada no estoque.');
|
||||
} catch (error) {
|
||||
setSupplyMessage(error instanceof Error ? error.message : 'Não foi possível baixar o material.');
|
||||
} finally {
|
||||
setIsSupplyBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
const exportData = filteredOrders.map(order => ({
|
||||
'Numero': order.number,
|
||||
'Pedidos': order.orderReference,
|
||||
'Status': order.statusLabel,
|
||||
'Data': formatDate(order.issueDate),
|
||||
'Data Prevista': formatDate(order.expectedDate),
|
||||
'SKU': order.productSku,
|
||||
'Descricao': order.productDescription,
|
||||
'Quantidade': formatQuantity(order.quantity),
|
||||
'Unidade': order.unit,
|
||||
'Marcadores': order.markers.map(marker => marker.label).join('; '),
|
||||
'Integracao': order.integrationStatus
|
||||
}));
|
||||
exportToCSV(exportData, `ordens_producao_${new Date().toISOString().split('T')[0]}.csv`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div>
|
||||
<Link to="/supplies" className="mb-3 inline-flex items-center gap-2 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Suprimentos
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold text-dark-text">Ordens de Produção</h1>
|
||||
<p className="mt-2 text-dark-muted font-medium">Acompanhe as ordens locais geradas pelo plano de corte.</p>
|
||||
</div>
|
||||
<DateRangePicker
|
||||
dateRange={dateRange}
|
||||
onChange={(range) => {
|
||||
setDateRange(range);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
refreshInterval={refreshInterval}
|
||||
setRefreshInterval={setRefreshInterval}
|
||||
onManualRefresh={handleManualRefresh}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
{isLoading && !summary.orders.length ? (
|
||||
<ProductionOrdersSkeleton />
|
||||
) : (
|
||||
<div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Total no período</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{summary.counts.all}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Ordens cadastradas</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-sky-400/25 bg-sky-400/10 p-3 text-sky-300">
|
||||
<ClipboardList className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Em aberto</p>
|
||||
<p className="mt-2 text-3xl font-bold text-amber-300">{openCount}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Aguardando produção</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-amber-400/25 bg-amber-400/10 p-3 text-amber-300">
|
||||
<Clock3 className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Em andamento</p>
|
||||
<p className="mt-2 text-3xl font-bold text-sky-300">{progressCount}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Em processo</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-sky-400/25 bg-sky-400/10 p-3 text-sky-300">
|
||||
<PackageCheck className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Finalizadas</p>
|
||||
<p className="mt-2 text-3xl font-bold text-emerald-300">{finishedCount}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">{formatQuantity(totalQuantity)} un. no período</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-emerald-400/25 bg-emerald-400/10 p-3 text-emerald-300">
|
||||
<CheckCircle2 className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleProductionExit} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-dark-text">Baixa de material da OP</h2>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">Consome um lote do estoque e registra a saída nas movimentações.</p>
|
||||
</div>
|
||||
{selectedLot && (
|
||||
<span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-muted">
|
||||
Saldo lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-1 gap-3 xl:grid-cols-[1.4fr_1.4fr_120px_1fr_auto]">
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Ordem de produção
|
||||
<select
|
||||
value={exitForm.orderId}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, orderId: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"
|
||||
>
|
||||
<option value="">Selecione...</option>
|
||||
{summary.orders.filter(order => order.status !== 'finished' && order.status !== 'canceled').map(order => (
|
||||
<option key={order.id} value={order.id}>
|
||||
{order.number || `#${order.id}`} · {order.productDescription}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Lote de material
|
||||
<select
|
||||
value={exitForm.lotId}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, lotId: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"
|
||||
>
|
||||
<option value="">Selecione...</option>
|
||||
{supplyLots.map(lot => (
|
||||
<option key={lot.id} value={lot.id}>
|
||||
#{lot.id} · {lot.product} · {formatQuantity(lot.quantity)} {lot.unit}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Quantidade
|
||||
<input
|
||||
inputMode="decimal"
|
||||
value={exitForm.quantity}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, quantity: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary"
|
||||
placeholder="kg"
|
||||
/>
|
||||
</label>
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
Motivo
|
||||
<input
|
||||
value={exitForm.reason}
|
||||
onChange={(event) => setExitForm(current => ({ ...current, reason: event.target.value }))}
|
||||
className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary"
|
||||
placeholder="ex: corte do pedido"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSupplyBusy || !supplyLots.length}
|
||||
className="mt-5 inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<PackageCheck className="h-4 w-4 text-brand-primary" />
|
||||
Baixar
|
||||
</button>
|
||||
</div>
|
||||
{supplyMessage && (
|
||||
<div className="mt-3 rounded-lg border border-dark-border bg-dark-input px-3 py-2 text-sm font-bold text-dark-muted">
|
||||
{supplyMessage}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
|
||||
<div className="border-b border-dark-border p-5">
|
||||
{statusMessage && (
|
||||
<div className="mb-4 rounded-xl border border-dark-border bg-dark-input px-3 py-2 text-sm font-bold text-dark-muted">
|
||||
{statusMessage}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div className="relative w-full xl:max-w-xl">
|
||||
<Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-dark-muted" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
placeholder="Pesquise pelo produto, SKU ou número da ordem"
|
||||
onChange={(event) => {
|
||||
setSearchTerm(event.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-full rounded-xl border border-dark-border bg-dark-input py-2.5 pl-10 pr-4 text-sm font-semibold text-dark-text shadow-sm transition-colors placeholder:text-dark-muted focus:border-brand-primary focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExport}
|
||||
disabled={!filteredOrders.length}
|
||||
className="inline-flex h-10 items-center gap-2 rounded-xl border border-dark-border bg-dark-input px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Download className="h-4 w-4 text-brand-primary" />
|
||||
Exportar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex gap-5 overflow-x-auto border-b border-dark-border/70 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
{statusTabs.map(tab => {
|
||||
const isActive = statusFilter === tab.key;
|
||||
const count = summary.counts[tab.key] || 0;
|
||||
return (
|
||||
<button
|
||||
key={tab.key}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setStatusFilter(tab.key);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className={`relative flex min-w-24 cursor-pointer flex-col items-start pb-3 text-left transition-colors ${
|
||||
isActive ? 'text-dark-text' : 'text-dark-muted hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-xs font-bold">
|
||||
{tab.key !== 'all' && <span className={`h-1.5 w-1.5 rounded-full ${tab.dotClass}`} />}
|
||||
{tab.label}
|
||||
</span>
|
||||
<span className="mt-1 text-sm font-bold">{count}</span>
|
||||
{isActive && <span className="absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-brand-primary" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[1180px] text-left text-sm">
|
||||
<thead className="border-b border-dark-border bg-dark-header text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Número</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Pedidos</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Data</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Data Prevista</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">SKU / Produto</th>
|
||||
<th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Quantidade</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Marcadores</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Integrações</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{paginatedOrders.map((order: ProductionOrderItem) => {
|
||||
const statusStyle = getStatusStyle(order.status, order.statusLabel);
|
||||
const showDetails = hasProductionOrderDetails(order);
|
||||
return (
|
||||
<Fragment key={order.id}>
|
||||
<tr className="transition-colors hover:bg-dark-input/50">
|
||||
<td className="px-6 py-3 font-mono text-xs font-bold text-dark-text">{order.number || '-'}</td>
|
||||
<td className="px-6 py-3 text-xs font-semibold text-dark-muted">{order.orderReference || '-'}</td>
|
||||
<td className="px-6 py-3 text-xs font-semibold text-dark-muted">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
{formatDate(order.issueDate)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-xs font-semibold text-dark-muted">{formatDate(order.expectedDate)}</td>
|
||||
<td className="px-6 py-3">
|
||||
<div className="font-bold text-dark-text">{order.productDescription}</div>
|
||||
<div className="mt-1 font-mono text-[10px] font-semibold text-dark-muted">{order.productSku || 'Sem SKU'}</div>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">
|
||||
<span className="font-bold text-dark-text">{formatQuantity(order.quantity)}</span>
|
||||
<span className="ml-1 text-xs font-semibold text-dark-muted">{order.unit}</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
{order.markers.length ? (
|
||||
<div className="flex max-w-52 flex-wrap gap-1.5">
|
||||
{order.markers.map(marker => (
|
||||
<span
|
||||
key={`${order.id}-${marker.label}`}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted"
|
||||
>
|
||||
<span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: marker.color || 'var(--color-dark-muted)' }} />
|
||||
{marker.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs font-semibold text-dark-muted">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="inline-flex items-center gap-2 text-xs font-semibold text-dark-muted">
|
||||
<span className="h-2 w-2 rounded-full bg-sky-400" />
|
||||
{order.integrationStatus || 'Tiny'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<label className="sr-only" htmlFor={`production-order-status-${order.id}`}>Status da OP</label>
|
||||
<select
|
||||
id={`production-order-status-${order.id}`}
|
||||
value={order.status}
|
||||
disabled={busyStatusOrderId === order.id}
|
||||
onChange={(event) => void handleStatusChange(order, event.target.value as ProductionOrderStatusTab)}
|
||||
className={`h-8 rounded-lg border bg-dark-input px-2 text-[10px] font-bold uppercase tracking-wide outline-none transition-colors focus:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 ${statusStyle.className}`}
|
||||
>
|
||||
{editableStatusOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
{showDetails && (
|
||||
<tr className="bg-dark-input/20">
|
||||
<td colSpan={9} className="px-6 pb-5 pt-1">
|
||||
<div className="grid grid-cols-1 gap-4 rounded-xl border border-dark-border bg-dark-card/80 p-4 xl:grid-cols-[1.4fr_1fr_1fr]">
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Composição</h3>
|
||||
{order.components.length ? (
|
||||
<div className="mt-3 overflow-hidden rounded-lg border border-dark-border">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-dark-header text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-bold">Produto</th>
|
||||
<th className="px-3 py-2 text-left font-bold">SKU</th>
|
||||
<th className="px-3 py-2 text-right font-bold">Qtd.</th>
|
||||
<th className="px-3 py-2 text-right font-bold">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{order.components.map(component => (
|
||||
<tr key={component.id}>
|
||||
<td className="px-3 py-2 font-semibold text-dark-text">{component.componentName}</td>
|
||||
<td className="px-3 py-2 font-mono text-dark-muted">{component.componentSku || '-'}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-dark-muted">{formatQuantity(component.quantityPerUnit)} {component.unit}</td>
|
||||
<td className="px-3 py-2 text-right font-bold text-dark-text">{formatQuantity(component.totalQuantity)} {component.unit}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-3 text-xs font-semibold text-dark-muted">Sem composição sincronizada.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Etapas</h3>
|
||||
{order.steps.length ? (
|
||||
<div className="mt-3 divide-y divide-dark-border rounded-lg border border-dark-border">
|
||||
{order.steps.map(step => (
|
||||
<div key={step.id} className="grid grid-cols-[32px_1fr_auto] items-center gap-3 px-3 py-2 text-xs">
|
||||
<span className="font-mono font-bold text-dark-muted">{step.stepNumber ?? '-'}</span>
|
||||
<div>
|
||||
<p className="font-bold text-dark-text">{step.name}</p>
|
||||
<p className="mt-0.5 font-semibold text-dark-muted">{formatDate(step.startDate)} - {formatDate(step.endDate)}</p>
|
||||
</div>
|
||||
<span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: step.color || 'var(--color-brand-primary)' }} title={step.status || 'Sem status'} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-3 text-xs font-semibold text-dark-muted">Sem etapas sincronizadas.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Observações</h3>
|
||||
<dl className="mt-3 grid grid-cols-2 gap-2 text-xs">
|
||||
<div><dt className="font-bold text-dark-muted">Fornecedor</dt><dd className="mt-0.5 font-semibold text-dark-text">{order.supplier || '-'}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Lote</dt><dd className="mt-0.5 font-semibold text-dark-text">{order.lotCode || '-'}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Rolos</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.rollQuantity)}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Malha kg</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.fabricKg)}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Ribana kg</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.ribKg)}</dd></div>
|
||||
<div><dt className="font-bold text-dark-muted">Rendimento</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.yieldPiecesPerKg)}</dd></div>
|
||||
</dl>
|
||||
{order.notes && <p className="mt-3 whitespace-pre-wrap rounded-lg border border-dark-border bg-dark-input p-3 text-xs font-semibold text-dark-muted">{order.notes}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{!filteredOrders.length && (
|
||||
<div className="flex min-h-64 flex-col items-center justify-center border-t border-dark-border px-6 py-10 text-center">
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-input p-4 text-brand-primary">
|
||||
<ClipboardList className="h-7 w-7" />
|
||||
</div>
|
||||
<p className="mt-4 text-sm font-bold text-dark-text">Nenhuma ordem de produção encontrada.</p>
|
||||
<p className="mt-1 max-w-md text-sm font-medium text-dark-muted">
|
||||
Gere ordens pelo Plano de Corte para acompanhar status, produto, quantidade e baixa de material dentro do Graphs.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PaginationControls
|
||||
totalItems={filteredOrders.length}
|
||||
currentPage={safeCurrentPage}
|
||||
totalPages={totalPages}
|
||||
pageSize={itemsPerPage}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
itemLabel="ordens"
|
||||
pageSizeLabel="ordens por página"
|
||||
startIndex={startIndex}
|
||||
endIndex={Math.min(startIndex + itemsPerPage, filteredOrders.length)}
|
||||
onPageChange={setCurrentPage}
|
||||
onPageSizeChange={(pageSize) => {
|
||||
setItemsPerPage(pageSize);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionOrders;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,819 +0,0 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { ClipboardList, Loader2, Package, RefreshCw, Ruler, Save, Tags, Trash2 } from 'lucide-react';
|
||||
import {
|
||||
deleteCatalogCategory,
|
||||
deleteCatalogProduct,
|
||||
deleteConsumptionReference,
|
||||
fetchCatalogSummary,
|
||||
saveCatalogCategory,
|
||||
saveCatalogProduct,
|
||||
saveConsumptionReference
|
||||
} from '../dataService';
|
||||
import type { CatalogCategory, CatalogProduct, CatalogProductType, CatalogSummary, ConsumptionReference } from '../types';
|
||||
import { formatColorLabel } from '../displayFormatters';
|
||||
|
||||
type RegistrationTab = 'products' | 'categories' | 'references';
|
||||
type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
|
||||
|
||||
const emptyCatalog: CatalogSummary = {
|
||||
categories: [],
|
||||
products: [],
|
||||
consumptionReferences: []
|
||||
};
|
||||
|
||||
const sizeOptions = ['2', '4', '6', '8', '10', '12', '14', '16', 'PP', 'P', 'M', 'G', 'GG', 'XG', 'G1', 'G2', 'G3', 'G4', 'G5'];
|
||||
const defaultSizeAreas: Record<string, string> = {
|
||||
P: '0.78',
|
||||
M: '0.85',
|
||||
G: '0.92',
|
||||
GG: '1.00',
|
||||
XG: '1.08',
|
||||
G1: '1.08',
|
||||
G2: '1.16',
|
||||
G3: '1.24',
|
||||
G4: '1.32',
|
||||
G5: '1.40'
|
||||
};
|
||||
|
||||
const defaultProductForm = {
|
||||
type: 'finished_product' as CatalogProductType,
|
||||
sku: '',
|
||||
name: '',
|
||||
categoryId: '',
|
||||
composition: '',
|
||||
notes: '',
|
||||
gramature: '',
|
||||
materialYield: '',
|
||||
widthCm: '',
|
||||
color: '',
|
||||
subcategory: 'malha',
|
||||
sizes: ['P', 'M', 'G', 'GG'] as string[]
|
||||
};
|
||||
|
||||
const rawMaterialSubcategories = [
|
||||
{ value: 'fio', label: 'Fio' },
|
||||
{ value: 'malha', label: 'Malha' },
|
||||
{ value: 'ribana', label: 'Ribana' },
|
||||
{ value: 'malha_fria', label: 'Malha Fria' },
|
||||
{ value: 'meia_malha', label: 'Meia Malha 100% Algodao' },
|
||||
{ value: 'moletom', label: 'Moletom' },
|
||||
{ value: 'dry_fit', label: 'Dry Fit' },
|
||||
{ value: 'piquet', label: 'Piquet / Polo' },
|
||||
{ value: 'pima', label: 'Pima' },
|
||||
{ value: 'poliamida', label: 'Poliamida' },
|
||||
{ value: 'outra', label: 'Outra' }
|
||||
];
|
||||
|
||||
const listPanelClassName = 'rounded-2xl border border-dark-border bg-dark-card shadow-sm';
|
||||
const listHeaderClassName = 'flex min-h-[73px] flex-col gap-3 border-b border-dark-border p-4 md:flex-row md:items-center md:justify-between';
|
||||
const formPanelClassName = 'rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm';
|
||||
const emptyStateClassName = 'flex min-h-[280px] items-center justify-center px-4 py-10 text-center text-sm font-semibold text-dark-muted';
|
||||
const labelClassName = 'text-xs font-bold text-dark-muted';
|
||||
const inputClassName = 'mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary';
|
||||
|
||||
const formatNumber = (value: number | null | undefined, maximumFractionDigits = 2) => (
|
||||
value === null || value === undefined
|
||||
? '-'
|
||||
: new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
|
||||
);
|
||||
|
||||
const numericMapFromStrings = (values: Record<string, string>) => (
|
||||
Object.entries(values).reduce<Record<string, number>>((normalized, [key, value]) => {
|
||||
const number = Number(value.replace(',', '.'));
|
||||
if (Number.isFinite(number) && number > 0) normalized[key] = number;
|
||||
return normalized;
|
||||
}, {})
|
||||
);
|
||||
|
||||
const getAverageYield = (reference: ConsumptionReference) => {
|
||||
const yields = Object.values(reference.sizeYields || {});
|
||||
if (yields.length) return yields.reduce((total, value) => total + value, 0) / yields.length;
|
||||
return reference.generalYield;
|
||||
};
|
||||
|
||||
const getReferenceSourceLabel = (reference: ConsumptionReference) => (
|
||||
reference.source === 'tiny_op' ? 'Tiny OP' : 'Manual'
|
||||
);
|
||||
|
||||
const formatConsumptionPerPiece = (reference: ConsumptionReference) => {
|
||||
if (!reference.consumptionQuantity) return '';
|
||||
const unit = reference.consumptionUnit || 'un.';
|
||||
return `${formatNumber(reference.consumptionQuantity, 4)} ${unit}/peça`;
|
||||
};
|
||||
|
||||
const Registrations = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const [catalog, setCatalog] = useState<CatalogSummary>(emptyCatalog);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<RegistrationTab>('products');
|
||||
const [productFilter, setProductFilter] = useState<'all' | CatalogProductType>('all');
|
||||
const [status, setStatus] = useState<SaveStatus>('idle');
|
||||
const [feedback, setFeedback] = useState('');
|
||||
const appliedSkuPrefillRef = useRef('');
|
||||
|
||||
const [categoryForm, setCategoryForm] = useState({ name: '', description: '' });
|
||||
const [productForm, setProductForm] = useState(defaultProductForm);
|
||||
const [referenceForm, setReferenceForm] = useState({
|
||||
productId: '',
|
||||
materialProductId: '',
|
||||
color: '',
|
||||
generalYield: '',
|
||||
gramature: '',
|
||||
efficiencyPercent: '85',
|
||||
ribGPerPiece: '',
|
||||
materialCostPerKg: ''
|
||||
});
|
||||
const [sizeAreas, setSizeAreas] = useState<Record<string, string>>(defaultSizeAreas);
|
||||
const [sizeYields, setSizeYields] = useState<Record<string, string>>({});
|
||||
|
||||
const loadCatalog = async () => {
|
||||
setIsLoading(true);
|
||||
const summary = await fetchCatalogSummary();
|
||||
setCatalog(summary);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
fetchCatalogSummary().then(summary => {
|
||||
if (!isMounted) return;
|
||||
setCatalog(summary);
|
||||
setIsLoading(false);
|
||||
}).catch(error => {
|
||||
console.error('Initial catalog load failed', error);
|
||||
if (!isMounted) return;
|
||||
setIsLoading(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const requestedTab = searchParams.get('tab');
|
||||
const sku = (searchParams.get('sku') || '').trim();
|
||||
if (!sku && !(requestedTab === 'products' || requestedTab === 'categories' || requestedTab === 'references')) return;
|
||||
|
||||
const prefillKey = `${requestedTab || ''}|${sku}|${searchParams.get('name') || ''}|${searchParams.get('color') || ''}|${catalog.products.length}`;
|
||||
if (appliedSkuPrefillRef.current === prefillKey) return;
|
||||
appliedSkuPrefillRef.current = prefillKey;
|
||||
|
||||
queueMicrotask(() => {
|
||||
if (requestedTab === 'products' || requestedTab === 'categories' || requestedTab === 'references') {
|
||||
setActiveTab(requestedTab);
|
||||
}
|
||||
|
||||
if (!sku) return;
|
||||
|
||||
const existingProduct = catalog.products.find(product => product.sku.toLowerCase() === sku.toLowerCase());
|
||||
setProductFilter('all');
|
||||
setStatus('idle');
|
||||
|
||||
if (requestedTab === 'references' && existingProduct) {
|
||||
setActiveTab('references');
|
||||
setReferenceForm(current => ({
|
||||
...current,
|
||||
productId: String(existingProduct.id),
|
||||
color: searchParams.get('color') || existingProduct.color || current.color
|
||||
}));
|
||||
setFeedback(`Criando referência de consumo para SKU ${existingProduct.sku}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveTab('products');
|
||||
|
||||
if (existingProduct) {
|
||||
setProductForm({
|
||||
type: existingProduct.type,
|
||||
sku: existingProduct.sku,
|
||||
name: existingProduct.name,
|
||||
categoryId: existingProduct.categoryId ? String(existingProduct.categoryId) : '',
|
||||
composition: existingProduct.composition || '',
|
||||
notes: existingProduct.notes || '',
|
||||
gramature: existingProduct.gramature ? String(existingProduct.gramature) : '',
|
||||
materialYield: existingProduct.materialYield ? String(existingProduct.materialYield) : '',
|
||||
widthCm: existingProduct.widthCm ? String(existingProduct.widthCm) : '',
|
||||
color: existingProduct.color || searchParams.get('color') || '',
|
||||
subcategory: existingProduct.subcategory || 'malha',
|
||||
sizes: existingProduct.sizes?.length ? existingProduct.sizes : defaultProductForm.sizes
|
||||
});
|
||||
setFeedback(`Editando SKU ${existingProduct.sku}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
const requestedSize = (searchParams.get('size') || '').trim().toUpperCase();
|
||||
setProductForm({
|
||||
...defaultProductForm,
|
||||
sku,
|
||||
name: searchParams.get('name') || '',
|
||||
color: searchParams.get('color') || '',
|
||||
sizes: requestedSize ? [requestedSize] : defaultProductForm.sizes
|
||||
});
|
||||
setFeedback(
|
||||
requestedTab === 'references'
|
||||
? `Cadastre o SKU ${sku} antes de criar a referência de consumo.`
|
||||
: `Novo cadastro para SKU ${sku}.`
|
||||
);
|
||||
});
|
||||
}, [catalog.products, searchParams]);
|
||||
|
||||
const finishedProducts = useMemo(
|
||||
() => catalog.products.filter(product => product.type === 'finished_product'),
|
||||
[catalog.products]
|
||||
);
|
||||
|
||||
const rawMaterials = useMemo(
|
||||
() => catalog.products.filter(product => product.type === 'raw_material'),
|
||||
[catalog.products]
|
||||
);
|
||||
|
||||
const selectedReferenceProduct = useMemo(
|
||||
() => catalog.products.find(product => String(product.id) === referenceForm.productId),
|
||||
[catalog.products, referenceForm.productId]
|
||||
);
|
||||
|
||||
const referenceSizes = selectedReferenceProduct?.sizes?.length ? selectedReferenceProduct.sizes : ['P', 'M', 'G', 'GG'];
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
if (productFilter === 'all') return catalog.products;
|
||||
return catalog.products.filter(product => product.type === productFilter);
|
||||
}, [catalog.products, productFilter]);
|
||||
|
||||
const runAction = async (action: () => Promise<void>, successMessage: string) => {
|
||||
setStatus('saving');
|
||||
setFeedback('');
|
||||
try {
|
||||
await action();
|
||||
await loadCatalog();
|
||||
setStatus('saved');
|
||||
setFeedback(successMessage);
|
||||
} catch (error) {
|
||||
setStatus('error');
|
||||
setFeedback(error instanceof Error ? error.message : 'Nao foi possivel salvar.');
|
||||
}
|
||||
};
|
||||
|
||||
const saveCategory = () => runAction(async () => {
|
||||
await saveCatalogCategory(categoryForm);
|
||||
setCategoryForm({ name: '', description: '' });
|
||||
}, 'Categoria salva.');
|
||||
|
||||
const saveProduct = () => runAction(async () => {
|
||||
await saveCatalogProduct({
|
||||
...productForm,
|
||||
categoryId: productForm.categoryId ? Number(productForm.categoryId) : null,
|
||||
sizes: productForm.type === 'finished_product' ? productForm.sizes : []
|
||||
});
|
||||
setProductForm(current => ({
|
||||
...current,
|
||||
sku: '',
|
||||
name: '',
|
||||
composition: '',
|
||||
notes: '',
|
||||
gramature: '',
|
||||
materialYield: '',
|
||||
widthCm: '',
|
||||
color: ''
|
||||
}));
|
||||
}, 'Produto salvo.');
|
||||
|
||||
const calculateSizeYields = () => {
|
||||
const gramature = Number(referenceForm.gramature.replace(',', '.'));
|
||||
const efficiency = Number(referenceForm.efficiencyPercent.replace(',', '.')) || 85;
|
||||
const rib = Number(referenceForm.ribGPerPiece.replace(',', '.')) || 0;
|
||||
|
||||
if (!Number.isFinite(gramature) || gramature <= 0) {
|
||||
setStatus('error');
|
||||
setFeedback('Informe a gramatura para calcular o rendimento.');
|
||||
return;
|
||||
}
|
||||
|
||||
const nextYields = referenceSizes.reduce<Record<string, string>>((values, size) => {
|
||||
const area = Number((sizeAreas[size] || '').replace(',', '.'));
|
||||
if (!Number.isFinite(area) || area <= 0) return values;
|
||||
const fabricGrams = gramature * area / (efficiency / 100);
|
||||
const pieceGrams = fabricGrams + rib;
|
||||
const yieldValue = pieceGrams > 0 ? 1000 / pieceGrams : 0;
|
||||
values[size] = yieldValue.toFixed(2);
|
||||
return values;
|
||||
}, {});
|
||||
|
||||
setSizeYields(nextYields);
|
||||
setStatus('idle');
|
||||
setFeedback(`${Object.keys(nextYields).length} tamanhos calculados.`);
|
||||
};
|
||||
|
||||
const saveReference = () => runAction(async () => {
|
||||
await saveConsumptionReference({
|
||||
...referenceForm,
|
||||
productId: Number(referenceForm.productId),
|
||||
materialProductId: referenceForm.materialProductId ? Number(referenceForm.materialProductId) : null,
|
||||
sizeAreas: numericMapFromStrings(sizeAreas),
|
||||
sizeYields: numericMapFromStrings(sizeYields)
|
||||
});
|
||||
setReferenceForm(current => ({
|
||||
...current,
|
||||
productId: '',
|
||||
materialProductId: '',
|
||||
color: '',
|
||||
generalYield: ''
|
||||
}));
|
||||
setSizeYields({});
|
||||
}, 'Referencia salva.');
|
||||
|
||||
const removeCategory = (category: CatalogCategory) => runAction(
|
||||
() => deleteCatalogCategory(category.id),
|
||||
`Categoria ${category.name} excluida.`
|
||||
);
|
||||
|
||||
const removeProduct = (product: CatalogProduct) => runAction(
|
||||
() => deleteCatalogProduct(product.id),
|
||||
`Produto ${product.sku} excluido.`
|
||||
);
|
||||
|
||||
const removeReference = (reference: ConsumptionReference) => runAction(
|
||||
() => deleteConsumptionReference(reference.id),
|
||||
`Referencia ${reference.productSku} excluida.`
|
||||
);
|
||||
|
||||
const toggleProductSize = (size: string) => {
|
||||
setProductForm(current => ({
|
||||
...current,
|
||||
sizes: current.sizes.includes(size)
|
||||
? current.sizes.filter(item => item !== size)
|
||||
: [...current.sizes, size]
|
||||
}));
|
||||
};
|
||||
|
||||
const tabItems: Array<{ key: RegistrationTab; label: string; icon: typeof Package; count: number }> = [
|
||||
{ key: 'products', label: 'Produtos', icon: Package, count: catalog.products.length },
|
||||
{ key: 'categories', label: 'Categorias', icon: Tags, count: catalog.categories.length },
|
||||
{ key: 'references', label: 'Referência de Consumo', icon: Ruler, count: catalog.consumptionReferences.length }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4 2xl:flex-row 2xl:items-start 2xl:justify-between">
|
||||
<div>
|
||||
<h1 className="mb-2 text-2xl font-bold text-zinc-900 dark:text-dark-text">Cadastros</h1>
|
||||
<p className="font-medium text-zinc-500 dark:text-dark-muted">
|
||||
Fonte de verdade para produtos, matérias-primas e referências de consumo.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Link
|
||||
to="/planning-issues"
|
||||
className="inline-flex h-10 items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary"
|
||||
>
|
||||
<ClipboardList className="h-4 w-4 text-brand-primary" />
|
||||
Dados Pendentes
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void loadCatalog()}
|
||||
className="inline-flex h-10 items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4 text-brand-primary" />
|
||||
Atualizar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
|
||||
{tabItems.map(item => {
|
||||
const Icon = item.icon;
|
||||
const isActive = activeTab === item.key;
|
||||
return (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(item.key)}
|
||||
className={`flex items-center justify-between rounded-2xl border p-4 text-left transition-colors cursor-pointer ${isActive ? 'border-brand-primary/40 bg-brand-primary/10 text-brand-primary' : 'border-dark-border bg-dark-card text-dark-text hover:border-brand-primary/40'}`}
|
||||
>
|
||||
<span className="flex items-center gap-3">
|
||||
<span className="rounded-xl border border-dark-border bg-dark-input p-2">
|
||||
<Icon className="h-5 w-5" />
|
||||
</span>
|
||||
<span className="font-bold">{item.label}</span>
|
||||
</span>
|
||||
<span className="rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-muted">
|
||||
{item.count}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{feedback && (
|
||||
<div className={`rounded-2xl border px-4 py-3 text-sm font-bold ${status === 'error' ? 'border-red-400/30 bg-red-400/10 text-red-300' : 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300'}`}>
|
||||
{feedback}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex h-48 items-center justify-center rounded-2xl border border-dark-border bg-dark-card text-brand-primary">
|
||||
<Loader2 className="h-7 w-7 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeTab === 'products' && (
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px]">
|
||||
<div className={listPanelClassName}>
|
||||
<div className={listHeaderClassName}>
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-dark-text">Produtos cadastrados</h2>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Produtos acabados e materias-primas do corte.</p>
|
||||
</div>
|
||||
<select
|
||||
value={productFilter}
|
||||
onChange={(event) => setProductFilter(event.target.value as 'all' | CatalogProductType)}
|
||||
className="h-10 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary cursor-pointer"
|
||||
>
|
||||
<option value="all">Todos</option>
|
||||
<option value="finished_product">Produtos acabados</option>
|
||||
<option value="raw_material">Materias-primas</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-border">
|
||||
{filteredProducts.map(product => (
|
||||
<div key={product.id} className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="font-mono text-xs font-bold text-brand-primary">{product.sku}</span>
|
||||
<span className="rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted">
|
||||
{product.type === 'finished_product' ? 'Produto acabado' : 'Materia-prima'}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-1 truncate text-sm font-bold text-dark-text">{product.name}</h3>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{[product.categoryName, product.composition, product.color ? formatColorLabel(product.color) : '']
|
||||
.filter(Boolean)
|
||||
.join(' · ') || 'Sem detalhes'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void removeProduct(product)}
|
||||
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer"
|
||||
title="Excluir produto"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{!filteredProducts.length && (
|
||||
<div className={emptyStateClassName}>Nenhum produto cadastrado.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={formPanelClassName}>
|
||||
<h2 className="text-sm font-bold text-dark-text">Cadastrar produto / materia-prima</h2>
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<label className={labelClassName}>
|
||||
Tipo
|
||||
<select
|
||||
value={productForm.type}
|
||||
onChange={(event) => setProductForm(current => ({ ...current, type: event.target.value as CatalogProductType }))}
|
||||
className={inputClassName}
|
||||
>
|
||||
<option value="finished_product">Produto acabado</option>
|
||||
<option value="raw_material">Materia-prima</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className={labelClassName}>
|
||||
SKU
|
||||
<input
|
||||
value={productForm.sku}
|
||||
onChange={(event) => setProductForm(current => ({ ...current, sku: event.target.value }))}
|
||||
placeholder="ex: BLCS"
|
||||
className={`${inputClassName} font-mono`}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className={`block ${labelClassName}`}>
|
||||
Nome
|
||||
<input
|
||||
value={productForm.name}
|
||||
onChange={(event) => setProductForm(current => ({ ...current, name: event.target.value }))}
|
||||
placeholder="Nome do produto"
|
||||
className={inputClassName}
|
||||
/>
|
||||
</label>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<label className={labelClassName}>
|
||||
Categoria
|
||||
<select
|
||||
value={productForm.categoryId}
|
||||
onChange={(event) => setProductForm(current => ({ ...current, categoryId: event.target.value }))}
|
||||
className={inputClassName}
|
||||
>
|
||||
<option value="">Sem categoria</option>
|
||||
{catalog.categories.map(category => <option key={category.id} value={category.id}>{category.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className={labelClassName}>
|
||||
Composicao
|
||||
<input
|
||||
value={productForm.composition}
|
||||
onChange={(event) => setProductForm(current => ({ ...current, composition: event.target.value }))}
|
||||
placeholder="ex: 100% Algodao"
|
||||
className={inputClassName}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{productForm.type === 'raw_material' ? (
|
||||
<>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<label className={labelClassName}>
|
||||
Gramatura
|
||||
<input inputMode="decimal" value={productForm.gramature} onChange={(event) => setProductForm(current => ({ ...current, gramature: event.target.value }))} className={inputClassName} />
|
||||
</label>
|
||||
<label className={labelClassName}>
|
||||
Rendimento m/kg
|
||||
<input inputMode="decimal" value={productForm.materialYield} onChange={(event) => setProductForm(current => ({ ...current, materialYield: event.target.value }))} className={inputClassName} />
|
||||
</label>
|
||||
<label className={labelClassName}>
|
||||
Largura cm
|
||||
<input inputMode="decimal" value={productForm.widthCm} onChange={(event) => setProductForm(current => ({ ...current, widthCm: event.target.value }))} className={inputClassName} />
|
||||
</label>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<label className={labelClassName}>
|
||||
Cor
|
||||
<input value={productForm.color} onChange={(event) => setProductForm(current => ({ ...current, color: event.target.value }))} placeholder="ex: Preto" className={inputClassName} />
|
||||
</label>
|
||||
<label className={labelClassName}>
|
||||
Subcategoria
|
||||
<select value={productForm.subcategory} onChange={(event) => setProductForm(current => ({ ...current, subcategory: event.target.value }))} className={inputClassName}>
|
||||
{rawMaterialSubcategories.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<label className={`block ${labelClassName}`}>
|
||||
Cor
|
||||
<input
|
||||
value={productForm.color}
|
||||
onChange={(event) => setProductForm(current => ({ ...current, color: event.target.value }))}
|
||||
placeholder="ex: Preto"
|
||||
className={inputClassName}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<p className="mb-2 text-xs font-bold text-dark-muted">Tamanhos disponiveis</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{sizeOptions.map(size => (
|
||||
<button
|
||||
key={size}
|
||||
type="button"
|
||||
onClick={() => toggleProductSize(size)}
|
||||
className={`rounded-full border px-3 py-1.5 text-xs font-bold transition-colors cursor-pointer ${productForm.sizes.includes(size) ? 'border-brand-primary bg-brand-primary/15 text-brand-primary' : 'border-dark-border bg-dark-input text-dark-muted hover:text-dark-text'}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<label className={`block ${labelClassName}`}>
|
||||
Observacoes
|
||||
<input
|
||||
value={productForm.notes}
|
||||
onChange={(event) => setProductForm(current => ({ ...current, notes: event.target.value }))}
|
||||
placeholder="Opcional"
|
||||
className={inputClassName}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void saveProduct()}
|
||||
disabled={status === 'saving'}
|
||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
Salvar produto
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'categories' && (
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px]">
|
||||
<div className={listPanelClassName}>
|
||||
<div className={listHeaderClassName}>
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-dark-text">Categorias cadastradas</h2>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Classificacao usada no cadastro de produtos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-border">
|
||||
{catalog.categories.map(category => (
|
||||
<div key={category.id} className="flex items-center justify-between gap-3 p-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-dark-text">{category.name}</h3>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">{category.description || 'Sem descricao'}</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => void removeCategory(category)} className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{!catalog.categories.length && <div className={emptyStateClassName}>Nenhuma categoria cadastrada.</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={formPanelClassName}>
|
||||
<h2 className="text-sm font-bold text-dark-text">Nova categoria</h2>
|
||||
<div className="mt-4 space-y-3">
|
||||
<label className={`block ${labelClassName}`}>
|
||||
Nome
|
||||
<input value={categoryForm.name} onChange={(event) => setCategoryForm(current => ({ ...current, name: event.target.value }))} placeholder="ex: Camiseta Regular" className={inputClassName} />
|
||||
</label>
|
||||
<label className={`block ${labelClassName}`}>
|
||||
Descricao
|
||||
<input value={categoryForm.description} onChange={(event) => setCategoryForm(current => ({ ...current, description: event.target.value }))} placeholder="Opcional" className={inputClassName} />
|
||||
</label>
|
||||
<button type="button" onClick={() => void saveCategory()} disabled={status === 'saving'} className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer">
|
||||
<Save className="h-4 w-4" />
|
||||
Salvar categoria
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'references' && (
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px]">
|
||||
<div className={listPanelClassName}>
|
||||
<div className={listHeaderClassName}>
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-dark-text">Referencias cadastradas</h2>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Rendimento pç/kg por produto, malha, cor e tamanho.</p>
|
||||
</div>
|
||||
<span className="rounded-full border border-dark-border bg-dark-input px-3 py-1 text-xs font-bold text-dark-muted">
|
||||
{catalog.consumptionReferences.length} referencias
|
||||
</span>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-border">
|
||||
{catalog.consumptionReferences.map(reference => (
|
||||
<div key={reference.id} className="flex flex-col gap-3 p-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="font-mono text-xs font-bold text-brand-primary">{reference.productSku}</span>
|
||||
<span className="rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted">
|
||||
{Object.keys(reference.sizeYields || {}).length ? 'Por tamanho' : 'Geral'}
|
||||
</span>
|
||||
<span className={`rounded-full border px-2 py-0.5 text-[10px] font-bold ${
|
||||
reference.source === 'tiny_op'
|
||||
? 'border-sky-400/30 bg-sky-400/10 text-sky-300'
|
||||
: 'border-dark-border bg-dark-input text-dark-muted'
|
||||
}`}>
|
||||
{getReferenceSourceLabel(reference)}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-1 truncate text-sm font-bold text-dark-text">{reference.productName}</h3>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{[reference.materialName, reference.color ? formatColorLabel(reference.color) : 'todas as cores'].filter(Boolean).join(' · ')}
|
||||
</p>
|
||||
{!!Object.keys(reference.sizeYields || {}).length && (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{Object.entries(reference.sizeYields).map(([size, value]) => (
|
||||
<span key={size} className="rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted">
|
||||
{size}: {formatNumber(value)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-start gap-3">
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-emerald-300">
|
||||
{formatConsumptionPerPiece(reference) || `${formatNumber(getAverageYield(reference), 3)} pç/kg`}
|
||||
</div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">
|
||||
{reference.consumptionQuantity
|
||||
? 'consumo'
|
||||
: Object.keys(reference.sizeYields || {}).length ? 'media' : 'geral'}
|
||||
</div>
|
||||
{reference.consumptionQuantity && getAverageYield(reference) ? (
|
||||
<div className="mt-1 text-[11px] font-semibold text-dark-muted">
|
||||
{formatNumber(getAverageYield(reference), 3)} pç/kg
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<button type="button" onClick={() => void removeReference(reference)} className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{!catalog.consumptionReferences.length && (
|
||||
<div className={emptyStateClassName}>
|
||||
Nenhuma referencia cadastrada.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={formPanelClassName}>
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-dark-text">Nova referencia de consumo</h2>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
Defina pç/kg por produto, malha e cor para o calculo do corte.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<label className={labelClassName}>
|
||||
Produto
|
||||
<select value={referenceForm.productId} onChange={(event) => setReferenceForm(current => ({ ...current, productId: event.target.value }))} className={inputClassName}>
|
||||
<option value="">Selecione...</option>
|
||||
{finishedProducts.map(product => <option key={product.id} value={product.id}>{product.name} ({product.sku})</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className={labelClassName}>
|
||||
Malha
|
||||
<select value={referenceForm.materialProductId} onChange={(event) => setReferenceForm(current => ({ ...current, materialProductId: event.target.value }))} className={inputClassName}>
|
||||
<option value="">Qualquer</option>
|
||||
{rawMaterials.map(product => <option key={product.id} value={product.id}>{product.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<label className={labelClassName}>
|
||||
Cor
|
||||
<input value={referenceForm.color} onChange={(event) => setReferenceForm(current => ({ ...current, color: event.target.value }))} placeholder="Todas as cores" className={inputClassName} />
|
||||
</label>
|
||||
<label className={labelClassName}>
|
||||
Rendimento geral
|
||||
<input inputMode="decimal" value={referenceForm.generalYield} onChange={(event) => setReferenceForm(current => ({ ...current, generalYield: event.target.value }))} placeholder="ex: 5,36" className={inputClassName} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-dark-border bg-dark-input/45 p-3">
|
||||
<div className="mb-3 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-text">Calculo por gramatura</h3>
|
||||
<p className="mt-1 text-[11px] font-semibold text-dark-muted">Opcional. Preenche o pç/kg dos tamanhos abaixo.</p>
|
||||
</div>
|
||||
<button type="button" onClick={calculateSizeYields} className="inline-flex h-9 items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-card px-3 text-xs font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer">
|
||||
<Ruler className="h-3.5 w-3.5 text-brand-primary" />
|
||||
Calcular
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<label className={labelClassName}>Gramatura<input inputMode="decimal" value={referenceForm.gramature} onChange={(event) => setReferenceForm(current => ({ ...current, gramature: event.target.value }))} placeholder="ex: 180" className={inputClassName} /></label>
|
||||
<label className={labelClassName}>Aproveitamento %<input inputMode="decimal" value={referenceForm.efficiencyPercent} onChange={(event) => setReferenceForm(current => ({ ...current, efficiencyPercent: event.target.value }))} className={inputClassName} /></label>
|
||||
<label className={labelClassName}>Ribana g/peça<input inputMode="decimal" value={referenceForm.ribGPerPiece} onChange={(event) => setReferenceForm(current => ({ ...current, ribGPerPiece: event.target.value }))} placeholder="ex: 18" className={inputClassName} /></label>
|
||||
<label className={labelClassName}>Custo R$/kg<input inputMode="decimal" value={referenceForm.materialCostPerKg} onChange={(event) => setReferenceForm(current => ({ ...current, materialCostPerKg: event.target.value }))} placeholder="opcional" className={inputClassName} /></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<p className="text-xs font-bold text-dark-muted">Rendimento por tamanho</p>
|
||||
<span className="text-[11px] font-semibold text-dark-muted">area m² / pç/kg</span>
|
||||
</div>
|
||||
<div className="overflow-hidden rounded-xl border border-dark-border">
|
||||
<div className="grid grid-cols-[56px_1fr_1fr] gap-2 border-b border-dark-border bg-dark-input px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-dark-muted">
|
||||
<span>Tam.</span>
|
||||
<span>Area</span>
|
||||
<span>Rendimento</span>
|
||||
</div>
|
||||
{referenceSizes.map(size => (
|
||||
<div key={size} className="grid grid-cols-[56px_1fr_1fr] items-center gap-2 border-b border-dark-border px-3 py-2 last:border-b-0">
|
||||
<div className="text-xs font-bold text-dark-text">{size}</div>
|
||||
<input value={sizeAreas[size] || ''} onChange={(event) => setSizeAreas(current => ({ ...current, [size]: event.target.value }))} placeholder="area" className="h-8 w-full rounded-lg border border-dark-border bg-dark-input px-2 text-xs font-bold text-dark-text outline-none focus:border-brand-primary" />
|
||||
<input value={sizeYields[size] || ''} onChange={(event) => setSizeYields(current => ({ ...current, [size]: event.target.value }))} placeholder="pç/kg" className="h-8 w-full rounded-lg border border-dark-border bg-dark-input px-2 text-xs font-bold text-dark-text outline-none focus:border-brand-primary" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" onClick={() => void saveReference()} disabled={status === 'saving'} className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer">
|
||||
<Save className="h-4 w-4" />
|
||||
Salvar referencia
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Registrations;
|
||||
@@ -1,635 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useOutletContext, useSearchParams } from 'react-router-dom';
|
||||
import { AlertTriangle, ArrowLeft, CheckCircle2, Download, Eye, Package, Pencil, Search, TrendingUp } from 'lucide-react';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import PaginationControls from '../components/PaginationControls';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import { buildSkuEditPath } from '../catalogLinks';
|
||||
import { buildOpenProductionByProductId } from '../analytics/cutting';
|
||||
import type { DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
|
||||
import { exportToCSV, fetchProductAnalytics, fetchProductionOrders } from '../dataService';
|
||||
import { encodeProductGroupKey, parseProductName, sortProductSizes } from '../productParsing';
|
||||
import { formatColorLabel } from '../displayFormatters';
|
||||
import { getPlanningStock } from '../planningStock';
|
||||
|
||||
type ReplenishmentStatus = 'need' | 'covered' | 'no_sales' | 'no_stock';
|
||||
type ReplenishmentFilter = 'all' | ReplenishmentStatus;
|
||||
type ReplenishmentSort = 'need_desc' | 'need_asc' | 'demand_desc' | 'stock_asc' | 'coverage_asc' | 'sold_desc' | 'name_asc';
|
||||
type ReplenishmentView = 'sku' | 'group';
|
||||
|
||||
type ReplenishmentRow = ProductAnalyticsItem & {
|
||||
dailySales: number;
|
||||
projectedDemand: number;
|
||||
suggestedQuantity: number;
|
||||
openProductionQuantity: number;
|
||||
availableQuantity: number;
|
||||
daysOfCover: number | null;
|
||||
status: ReplenishmentStatus;
|
||||
statusLabel: string;
|
||||
baseName: string;
|
||||
color: string;
|
||||
size: string;
|
||||
productIds: string[];
|
||||
productCount: number;
|
||||
sizes: string[];
|
||||
};
|
||||
|
||||
const statusStyles: Record<ReplenishmentStatus, { label: string; className: string; dotClass: string }> = {
|
||||
need: {
|
||||
label: 'Repor',
|
||||
className: 'border-red-400/35 bg-red-400/10 text-red-300',
|
||||
dotClass: 'bg-red-400'
|
||||
},
|
||||
no_stock: {
|
||||
label: 'Sem estoque',
|
||||
className: 'border-zinc-500/30 bg-zinc-500/10 text-zinc-300',
|
||||
dotClass: 'bg-zinc-400'
|
||||
},
|
||||
covered: {
|
||||
label: 'Coberto',
|
||||
className: 'border-emerald-400/35 bg-emerald-400/10 text-emerald-300',
|
||||
dotClass: 'bg-emerald-400'
|
||||
},
|
||||
no_sales: {
|
||||
label: 'Sem venda',
|
||||
className: 'border-dark-border bg-dark-input text-dark-muted',
|
||||
dotClass: 'bg-dark-muted'
|
||||
}
|
||||
};
|
||||
|
||||
const filterOptions: Array<{ value: ReplenishmentFilter; label: string }> = [
|
||||
{ value: 'need', label: 'Com necessidade' },
|
||||
{ value: 'all', label: 'Todos' },
|
||||
{ value: 'no_stock', label: 'Sem estoque' },
|
||||
{ value: 'covered', label: 'Cobertos' },
|
||||
{ value: 'no_sales', label: 'Sem venda' }
|
||||
];
|
||||
|
||||
const coverageTargetOptions = [7, 15, 30, 60];
|
||||
|
||||
const formatNumber = (value: number, maximumFractionDigits = 0) => (
|
||||
new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
|
||||
);
|
||||
|
||||
const formatDays = (value: number | null) => {
|
||||
if (value === null) return '-';
|
||||
if (value > 999) return '999+ dias';
|
||||
return `${formatNumber(value, value < 10 ? 1 : 0)} dias`;
|
||||
};
|
||||
|
||||
const getRangeDays = (range: DateRange) => {
|
||||
const start = new Date(range.start);
|
||||
const end = new Date(range.end);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
end.setHours(0, 0, 0, 0);
|
||||
return Math.max(1, Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1);
|
||||
};
|
||||
|
||||
const allProductionOrdersRange = {
|
||||
start: new Date(2000, 0, 1),
|
||||
end: new Date(2100, 11, 31)
|
||||
};
|
||||
|
||||
const ReplenishmentSkeleton = () => (
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm" aria-label="Carregando necessidade de reposicao">
|
||||
<div className="border-b border-zinc-100 p-4 dark:border-dark-border">
|
||||
<div className="grid grid-cols-[120px_1.5fr_120px_130px_120px_130px_130px_110px] gap-6">
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7].map(item => (
|
||||
<div key={`replenishment-head-skeleton-${item}`} className="skeleton h-3" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7].map(row => (
|
||||
<div key={`replenishment-row-skeleton-${row}`} className="grid grid-cols-[120px_1.5fr_120px_130px_120px_130px_130px_110px] gap-6 px-6 py-4">
|
||||
<div className="skeleton h-4" />
|
||||
<div>
|
||||
<div className="skeleton h-4 w-4/5" />
|
||||
<div className="skeleton mt-2 h-3 w-32" />
|
||||
</div>
|
||||
<div className="skeleton h-6 rounded-full" />
|
||||
<div className="skeleton h-4" />
|
||||
<div className="skeleton h-4" />
|
||||
<div className="skeleton h-4" />
|
||||
<div className="skeleton h-4" />
|
||||
<div className="skeleton h-7 rounded-lg" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Replenishment = () => {
|
||||
const { dateRange, setDateRange } = useOutletContext<{
|
||||
dateRange: DateRange,
|
||||
setDateRange: (range: DateRange) => void
|
||||
}>();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
|
||||
const [productionOrders, setProductionOrders] = useState<ProductionOrderItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<ReplenishmentFilter>(() => {
|
||||
const filter = searchParams.get('status') as ReplenishmentFilter | null;
|
||||
return filter && filterOptions.some(option => option.value === filter) ? filter : 'need';
|
||||
});
|
||||
const [sortBy, setSortBy] = useState<ReplenishmentSort>('need_desc');
|
||||
const [viewMode, setViewMode] = useState<ReplenishmentView>(() => searchParams.get('view') === 'group' ? 'group' : 'sku');
|
||||
const [targetCoverageDays, setTargetCoverageDays] = useState(30);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadProducts = async () => {
|
||||
setIsLoading(true);
|
||||
const [productData, productionOrderData] = await Promise.all([
|
||||
fetchProductAnalytics(dateRange),
|
||||
fetchProductionOrders(allProductionOrdersRange)
|
||||
]);
|
||||
|
||||
if (isMounted) {
|
||||
setProducts(productData);
|
||||
setProductionOrders(productionOrderData.orders);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void loadProducts();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [dateRange]);
|
||||
|
||||
const openProductionByProductId = useMemo(
|
||||
() => buildOpenProductionByProductId(products, productionOrders),
|
||||
[products, productionOrders]
|
||||
);
|
||||
|
||||
const allRows = useMemo<ReplenishmentRow[]>(() => {
|
||||
const rangeDays = getRangeDays(dateRange);
|
||||
|
||||
return products.map(product => {
|
||||
const dailySales = product.quantitySold / rangeDays;
|
||||
const projectedDemand = dailySales * targetCoverageDays;
|
||||
const openProductionQuantity = openProductionByProductId[product.id] || 0;
|
||||
const availableQuantity = getPlanningStock(product.stock) + openProductionQuantity;
|
||||
const rawNeed = projectedDemand - availableQuantity;
|
||||
const suggestedQuantity = Math.max(0, Math.ceil(rawNeed));
|
||||
const daysOfCover = dailySales > 0 ? availableQuantity / dailySales : null;
|
||||
const status: ReplenishmentStatus = availableQuantity <= 0
|
||||
? 'no_stock'
|
||||
: dailySales <= 0
|
||||
? 'no_sales'
|
||||
: suggestedQuantity > 0
|
||||
? 'need'
|
||||
: 'covered';
|
||||
|
||||
const metadata = parseProductName(product.name);
|
||||
|
||||
return {
|
||||
...product,
|
||||
dailySales,
|
||||
projectedDemand,
|
||||
suggestedQuantity,
|
||||
openProductionQuantity,
|
||||
availableQuantity,
|
||||
daysOfCover,
|
||||
status,
|
||||
statusLabel: statusStyles[status].label,
|
||||
baseName: metadata.baseName,
|
||||
color: metadata.color,
|
||||
size: metadata.size,
|
||||
productIds: [product.id],
|
||||
productCount: 1,
|
||||
sizes: metadata.size ? [metadata.size] : []
|
||||
};
|
||||
});
|
||||
}, [dateRange, openProductionByProductId, products, targetCoverageDays]);
|
||||
|
||||
const groupedRows = useMemo<ReplenishmentRow[]>(() => {
|
||||
const groups = new Map<string, ReplenishmentRow[]>();
|
||||
|
||||
allRows.forEach(row => {
|
||||
const key = `${row.baseName.toLowerCase()}::${row.color.toLowerCase()}`;
|
||||
const group = groups.get(key) || [];
|
||||
group.push(row);
|
||||
groups.set(key, group);
|
||||
});
|
||||
|
||||
return Array.from(groups.values()).map(group => {
|
||||
const first = group[0];
|
||||
const quantitySold = group.reduce((total, row) => total + row.quantitySold, 0);
|
||||
const revenue = group.reduce((total, row) => total + row.revenue, 0);
|
||||
const stock = group.reduce((total, row) => total + row.stock, 0);
|
||||
const openProductionQuantity = group.reduce((total, row) => total + row.openProductionQuantity, 0);
|
||||
const availableQuantity = group.reduce((total, row) => total + row.availableQuantity, 0);
|
||||
const dailySales = group.reduce((total, row) => total + row.dailySales, 0);
|
||||
const projectedDemand = group.reduce((total, row) => total + row.projectedDemand, 0);
|
||||
const suggestedQuantity = group.reduce((total, row) => total + row.suggestedQuantity, 0);
|
||||
const orderLineCount = group.reduce((total, row) => total + row.orderLineCount, 0);
|
||||
const daysOfCover = dailySales > 0 ? availableQuantity / dailySales : null;
|
||||
const status: ReplenishmentStatus = availableQuantity <= 0
|
||||
? 'no_stock'
|
||||
: dailySales <= 0
|
||||
? 'no_sales'
|
||||
: suggestedQuantity > 0
|
||||
? 'need'
|
||||
: 'covered';
|
||||
const sizes = sortProductSizes(Array.from(new Set(group.flatMap(row => row.sizes))));
|
||||
const productIds = group.map(row => row.id);
|
||||
const name = first.color ? `${first.baseName} · ${formatColorLabel(first.color)}` : first.baseName;
|
||||
|
||||
return {
|
||||
...first,
|
||||
id: productIds[0],
|
||||
name,
|
||||
quantitySold,
|
||||
revenue,
|
||||
stock,
|
||||
openProductionQuantity,
|
||||
availableQuantity,
|
||||
orderLineCount,
|
||||
dailySales,
|
||||
projectedDemand,
|
||||
suggestedQuantity,
|
||||
daysOfCover,
|
||||
status,
|
||||
statusLabel: statusStyles[status].label,
|
||||
productIds,
|
||||
productCount: group.length,
|
||||
sizes,
|
||||
lastPrice: group.length ? revenue / Math.max(1, quantitySold) : first.lastPrice
|
||||
};
|
||||
});
|
||||
}, [allRows]);
|
||||
|
||||
const activeRows = viewMode === 'group' ? groupedRows : allRows;
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
const searchedRows = normalizedSearch
|
||||
? activeRows.filter(row =>
|
||||
row.name.toLowerCase().includes(normalizedSearch) ||
|
||||
row.id.toLowerCase().includes(normalizedSearch) ||
|
||||
row.productIds.some(id => id.toLowerCase().includes(normalizedSearch))
|
||||
)
|
||||
: activeRows;
|
||||
|
||||
const statusRows = statusFilter === 'all'
|
||||
? searchedRows
|
||||
: searchedRows.filter(row => (
|
||||
statusFilter === 'need'
|
||||
? row.suggestedQuantity > 0
|
||||
: row.status === statusFilter
|
||||
));
|
||||
|
||||
return [...statusRows].sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'need_asc': return a.suggestedQuantity - b.suggestedQuantity;
|
||||
case 'demand_desc': return b.projectedDemand - a.projectedDemand;
|
||||
case 'stock_asc': return a.stock - b.stock;
|
||||
case 'coverage_asc': return (a.daysOfCover ?? Number.POSITIVE_INFINITY) - (b.daysOfCover ?? Number.POSITIVE_INFINITY);
|
||||
case 'sold_desc': return b.quantitySold - a.quantitySold;
|
||||
case 'name_asc': return a.name.localeCompare(b.name, 'pt-BR');
|
||||
case 'need_desc':
|
||||
default:
|
||||
return b.suggestedQuantity - a.suggestedQuantity;
|
||||
}
|
||||
});
|
||||
}, [activeRows, searchTerm, sortBy, statusFilter]);
|
||||
|
||||
const totalPages = Math.ceil(filteredRows.length / itemsPerPage);
|
||||
const safeCurrentPage = Math.min(currentPage, totalPages || 1);
|
||||
const startIndex = (safeCurrentPage - 1) * itemsPerPage;
|
||||
const paginatedRows = filteredRows.slice(startIndex, startIndex + itemsPerPage);
|
||||
const isRefreshing = isLoading && products.length > 0;
|
||||
|
||||
const needRows = activeRows.filter(row => row.suggestedQuantity > 0);
|
||||
const totalSuggestedQuantity = needRows.reduce((total, row) => total + row.suggestedQuantity, 0);
|
||||
const projectedDemand = activeRows.reduce((total, row) => total + row.projectedDemand, 0);
|
||||
const totalStock = activeRows.reduce((total, row) => total + row.stock, 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4 2xl:grid-cols-[minmax(520px,1fr)_auto] 2xl:items-start">
|
||||
<div>
|
||||
<Link to="/supplies" className="mb-3 inline-flex items-center gap-2 text-sm font-bold text-zinc-500 transition-colors hover:text-zinc-900 dark:text-dark-muted dark:hover:text-dark-text">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Suprimentos
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold mb-2 text-zinc-900 dark:text-dark-text">Necessidade de Reposição</h1>
|
||||
<p className="text-zinc-500 dark:text-dark-muted font-medium">
|
||||
O período selecionado define a base de vendas; a cobertura define quantos dias de estoque sugerir.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
|
||||
<DateRangePicker
|
||||
dateRange={dateRange}
|
||||
onChange={(range) => {
|
||||
setDateRange(range);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
const exportData = filteredRows.map(row => ({
|
||||
'Tipo': viewMode === 'group' ? 'Grupo' : 'SKU',
|
||||
'ID Produto': viewMode === 'group' ? row.productIds.join(' | ') : row.id,
|
||||
'Descricao': row.name,
|
||||
'Cor': row.color,
|
||||
'Tamanhos': row.sizes.join(' | '),
|
||||
'SKUs': row.productCount,
|
||||
'Status': row.statusLabel,
|
||||
'Cobertura alvo (dias)': targetCoverageDays,
|
||||
'Vendido no Periodo': row.quantitySold,
|
||||
'Media Diaria': row.dailySales.toFixed(2).replace('.', ','),
|
||||
'Demanda Projetada': row.projectedDemand.toFixed(2).replace('.', ','),
|
||||
'Estoque Atual': row.stock,
|
||||
'OP Aberta': row.openProductionQuantity,
|
||||
'Disponivel': row.availableQuantity,
|
||||
'Cobertura Atual': row.daysOfCover === null ? '' : row.daysOfCover.toFixed(1).replace('.', ','),
|
||||
'Sugestao Reposicao': row.suggestedQuantity
|
||||
}));
|
||||
exportToCSV(exportData, `necessidade_reposicao_${new Date().toISOString().split('T')[0]}.csv`);
|
||||
}}
|
||||
className="flex items-center justify-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
|
||||
title="Exportar para CSV"
|
||||
>
|
||||
<Download size={16} className="text-brand-primary" />
|
||||
<span className="hidden sm:inline">Exportar</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Produtos a repor</p>
|
||||
<p className="mt-2 text-3xl font-bold text-red-300">{formatNumber(needRows.length)}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{viewMode === 'group' ? 'Grupos' : 'SKUs'} abaixo da demanda projetada
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-red-400/25 bg-red-400/10 p-3 text-red-300">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Sugestão total</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{formatNumber(totalSuggestedQuantity)}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Unidades para cobrir {targetCoverageDays} dias</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-brand-primary/25 bg-brand-primary/10 p-3 text-brand-primary">
|
||||
<Package className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Demanda projetada</p>
|
||||
<p className="mt-2 text-3xl font-bold text-sky-300">{formatNumber(projectedDemand)}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Pelo ritmo do período selecionado</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-sky-400/25 bg-sky-400/10 p-3 text-sky-300">
|
||||
<TrendingUp className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">{viewMode === 'group' ? 'Grupos cobertos' : 'Produtos cobertos'}</p>
|
||||
<p className="mt-2 text-3xl font-bold text-emerald-300">{formatNumber(activeRows.filter(row => row.status === 'covered').length)}</p>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">{formatNumber(totalStock)} unidades em estoque</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-emerald-400/25 bg-emerald-400/10 p-3 text-emerald-300">
|
||||
<CheckCircle2 className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[auto_1fr_150px_180px_190px]">
|
||||
<div className="inline-flex rounded-xl border border-dark-border bg-dark-input p-1">
|
||||
{[
|
||||
{ key: 'sku' as const, label: 'SKU' },
|
||||
{ key: 'group' as const, label: 'Grupo' }
|
||||
].map(view => (
|
||||
<button
|
||||
key={view.key}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setViewMode(view.key);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className={`rounded-lg px-4 py-2 text-sm font-bold transition-colors cursor-pointer ${
|
||||
viewMode === view.key
|
||||
? 'bg-brand-primary text-brand-contrast'
|
||||
: 'text-dark-muted hover:bg-dark-card hover:text-dark-text'
|
||||
}`}
|
||||
>
|
||||
{view.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-400 dark:text-dark-muted" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por nome ou ID..."
|
||||
value={searchTerm}
|
||||
onChange={(event) => {
|
||||
setSearchTerm(event.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-full bg-dark-input border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary hover:border-brand-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={targetCoverageDays}
|
||||
onChange={(event) => {
|
||||
setTargetCoverageDays(Number(event.target.value));
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:outline-none focus:border-brand-primary cursor-pointer"
|
||||
aria-label="Dias de cobertura alvo"
|
||||
>
|
||||
{coverageTargetOptions.map(days => (
|
||||
<option key={days} value={days}>Cobrir {days} dias</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(event) => {
|
||||
setStatusFilter(event.target.value as ReplenishmentFilter);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:outline-none focus:border-brand-primary cursor-pointer"
|
||||
>
|
||||
{filterOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(event) => {
|
||||
setSortBy(event.target.value as ReplenishmentSort);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:outline-none focus:border-brand-primary cursor-pointer"
|
||||
>
|
||||
<option value="need_desc">Maior necessidade</option>
|
||||
<option value="need_asc">Menor necessidade</option>
|
||||
<option value="demand_desc">Maior demanda projetada</option>
|
||||
<option value="stock_asc">Menor estoque</option>
|
||||
<option value="coverage_asc">Menor cobertura</option>
|
||||
<option value="sold_desc">Mais vendidos</option>
|
||||
<option value="name_asc">Nome A-Z</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{isLoading && products.length === 0 ? (
|
||||
<ReplenishmentSkeleton />
|
||||
) : (
|
||||
<div className={`bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm ${isRefreshing ? 'refreshing-content' : ''}`} aria-busy={isRefreshing}>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[1320px] table-fixed text-left text-sm">
|
||||
<colgroup>
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[390px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[130px]" />
|
||||
<col className="w-[140px]" />
|
||||
<col className="w-[120px]" />
|
||||
<col className="w-[150px]" />
|
||||
<col className="w-[130px]" />
|
||||
<col className="w-[140px]" />
|
||||
</colgroup>
|
||||
<thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">{viewMode === 'group' ? 'SKUs' : 'ID Produto'}</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">{viewMode === 'group' ? 'Grupo / cor' : 'Descrição'}</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Status</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Demanda proj.</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Estoque</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Disponível</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Sugestão reposição</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Cobertura</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px] text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{paginatedRows.map(row => {
|
||||
const style = statusStyles[row.status];
|
||||
|
||||
return (
|
||||
<tr key={row.id} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors">
|
||||
<td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">
|
||||
{viewMode === 'group' ? `${row.productCount} SKUs` : `#${row.id}`}
|
||||
</td>
|
||||
<td className="max-w-0 px-6 py-2.5">
|
||||
<div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={row.name}>{row.name}</div>
|
||||
<div className="text-[10px] text-zinc-400 dark:text-dark-muted font-medium">
|
||||
{viewMode === 'group' && row.sizes.length ? `Tamanhos: ${row.sizes.join(', ')} · ` : ''}
|
||||
Média: {formatNumber(row.dailySales, 2)} un./dia · Vendido: {formatNumber(row.quantitySold)} un.
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-2.5">
|
||||
<span className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-bold ${style.className}`}>
|
||||
<span className={`h-2 w-2 rounded-full ${style.dotClass}`} />
|
||||
{style.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatNumber(row.projectedDemand, 1)} un.</td>
|
||||
<td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatNumber(row.stock)} un.</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap">
|
||||
<span className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.availableQuantity)} un.</span>
|
||||
{!!row.openProductionQuantity && (
|
||||
<span className="ml-1 text-xs font-semibold text-dark-muted">OP {formatNumber(row.openProductionQuantity)}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-2.5 whitespace-nowrap">
|
||||
<span className={row.suggestedQuantity > 0 ? 'font-bold text-red-300' : 'font-bold text-emerald-300'}>
|
||||
{formatNumber(row.suggestedQuantity)} un.
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatDays(row.daysOfCover)}</td>
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
{viewMode === 'sku' && (
|
||||
<Link
|
||||
to={buildSkuEditPath({ sku: row.id, name: row.name, color: row.color, size: row.size })}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-dark-input text-dark-text transition-colors hover:bg-dark-border cursor-pointer"
|
||||
title={`Editar SKU ${row.id}`}
|
||||
aria-label={`Editar SKU ${row.id}`}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
to={viewMode === 'group' ? `/products/groups/${encodeProductGroupKey(row.baseName)}` : `/products/${row.id}`}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary transition-opacity hover:opacity-80 cursor-pointer"
|
||||
title={viewMode === 'group' ? `Ver grupo ${row.baseName}` : `Ver SKU ${row.id}`}
|
||||
aria-label={viewMode === 'group' ? `Ver grupo ${row.baseName}` : `Ver SKU ${row.id}`}
|
||||
>
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{!filteredRows.length && (
|
||||
<div className="px-6 py-12 text-center">
|
||||
<Package className="mx-auto h-10 w-10 text-dark-muted" />
|
||||
<p className="mt-4 text-sm font-bold text-dark-text">Nenhum produto encontrado.</p>
|
||||
<p className="mt-1 text-sm text-dark-muted">Ajuste os filtros, a busca ou o período selecionado.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PaginationControls
|
||||
totalItems={filteredRows.length}
|
||||
currentPage={safeCurrentPage}
|
||||
totalPages={totalPages}
|
||||
pageSize={itemsPerPage}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
itemLabel="produtos"
|
||||
pageSizeLabel="itens por página"
|
||||
startIndex={startIndex}
|
||||
endIndex={Math.min(startIndex + itemsPerPage, filteredRows.length)}
|
||||
onPageChange={setCurrentPage}
|
||||
onPageSizeChange={(pageSize) => {
|
||||
setItemsPerPage(pageSize);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Replenishment;
|
||||
@@ -1,795 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useOutletContext } from 'react-router-dom';
|
||||
import { Download, Filter, Search, Users } from 'lucide-react';
|
||||
import DateRangePicker from '../components/DateRangePicker';
|
||||
import PaginationControls from '../components/PaginationControls';
|
||||
import RefreshStatus from '../components/RefreshStatus';
|
||||
import { exportToCSV, fetchRfmAnalytics, getCachedRfmAnalytics } from '../dataService';
|
||||
import type { DateRange, RfmAnalytics, RfmClient, RfmSegment } from '../types';
|
||||
|
||||
const emptyClients: RfmClient[] = [];
|
||||
const emptySegments: RfmSegment[] = [];
|
||||
|
||||
type SegmentStyle = {
|
||||
accent: string;
|
||||
bg: string;
|
||||
border: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
type ThemeMode = 'dark' | 'offwhite';
|
||||
|
||||
const darkSegmentStyles: Record<string, SegmentStyle> = {
|
||||
champions: { accent: '#18D6B5', bg: 'rgba(24, 214, 181, 0.10)', border: 'rgba(24, 214, 181, 0.34)', text: '#18D6B5' },
|
||||
potential_loyalists: { accent: '#A3E635', bg: 'rgba(163, 230, 53, 0.10)', border: 'rgba(163, 230, 53, 0.34)', text: '#A3E635' },
|
||||
new_customers: { accent: '#25C2FF', bg: 'rgba(37, 194, 255, 0.10)', border: 'rgba(37, 194, 255, 0.34)', text: '#25C2FF' },
|
||||
loyal_customers: { accent: '#6EA5FF', bg: 'rgba(110, 165, 255, 0.10)', border: 'rgba(110, 165, 255, 0.34)', text: '#6EA5FF' },
|
||||
need_attention: { accent: '#FFC247', bg: 'rgba(255, 194, 71, 0.11)', border: 'rgba(255, 194, 71, 0.34)', text: '#FFC247' },
|
||||
about_to_sleep: { accent: '#FF8A3D', bg: 'rgba(255, 138, 61, 0.11)', border: 'rgba(255, 138, 61, 0.34)', text: '#FF8A3D' },
|
||||
at_risk: { accent: '#FF5D7D', bg: 'rgba(255, 93, 125, 0.11)', border: 'rgba(255, 93, 125, 0.34)', text: '#FF5D7D' },
|
||||
hibernating: { accent: '#C77DFF', bg: 'rgba(199, 125, 255, 0.11)', border: 'rgba(199, 125, 255, 0.34)', text: '#C77DFF' },
|
||||
lost: { accent: '#8c9298', bg: 'rgba(140, 146, 152, 0.08)', border: 'rgba(140, 146, 152, 0.24)', text: '#b3b7bb' }
|
||||
};
|
||||
|
||||
const offwhiteSegmentStyles: Record<string, SegmentStyle> = {
|
||||
champions: { accent: '#138B75', bg: 'rgba(19, 139, 117, 0.10)', border: 'rgba(19, 139, 117, 0.34)', text: '#138B75' },
|
||||
potential_loyalists: { accent: '#5F8F12', bg: 'rgba(95, 143, 18, 0.11)', border: 'rgba(95, 143, 18, 0.34)', text: '#5F8F12' },
|
||||
new_customers: { accent: '#0B7EA8', bg: 'rgba(11, 126, 168, 0.10)', border: 'rgba(11, 126, 168, 0.34)', text: '#0B7EA8' },
|
||||
loyal_customers: { accent: '#356DCC', bg: 'rgba(53, 109, 204, 0.10)', border: 'rgba(53, 109, 204, 0.34)', text: '#356DCC' },
|
||||
need_attention: { accent: '#A36C00', bg: 'rgba(163, 108, 0, 0.11)', border: 'rgba(163, 108, 0, 0.34)', text: '#A36C00' },
|
||||
about_to_sleep: { accent: '#B75B12', bg: 'rgba(183, 91, 18, 0.11)', border: 'rgba(183, 91, 18, 0.34)', text: '#B75B12' },
|
||||
at_risk: { accent: '#C73656', bg: 'rgba(199, 54, 86, 0.10)', border: 'rgba(199, 54, 86, 0.34)', text: '#C73656' },
|
||||
hibernating: { accent: '#8C52D6', bg: 'rgba(140, 82, 214, 0.10)', border: 'rgba(140, 82, 214, 0.34)', text: '#8C52D6' },
|
||||
lost: { accent: '#757C82', bg: 'rgba(117, 124, 130, 0.08)', border: 'rgba(117, 124, 130, 0.26)', text: '#757C82' }
|
||||
};
|
||||
|
||||
const rfmSegmentDefinitions: Array<Pick<RfmSegment, 'key' | 'label'>> = [
|
||||
{ key: 'champions', label: 'Champions' },
|
||||
{ key: 'potential_loyalists', label: 'Potenciais Leais' },
|
||||
{ key: 'new_customers', label: 'Novos Clientes' },
|
||||
{ key: 'loyal_customers', label: 'Clientes Leais' },
|
||||
{ key: 'need_attention', label: 'Precisam de Atenção' },
|
||||
{ key: 'about_to_sleep', label: 'Quase Dormindo' },
|
||||
{ key: 'at_risk', label: 'Em Risco' },
|
||||
{ key: 'hibernating', label: 'Hibernando' },
|
||||
{ key: 'lost', label: 'Perdidos' }
|
||||
];
|
||||
|
||||
const segmentDescriptions: Record<string, string> = {
|
||||
champions: 'Recentes, recorrentes e valiosos',
|
||||
potential_loyalists: 'Recentes e em evolução',
|
||||
new_customers: 'Primeira compra recente',
|
||||
loyal_customers: 'Bom histórico, compra entre 8 e 15 dias',
|
||||
need_attention: 'Perfil médio, compra entre 8 e 15 dias',
|
||||
about_to_sleep: 'Perfil baixo, compra entre 8 e 15 dias',
|
||||
at_risk: 'Histórico forte, sem compra entre 16 e 29 dias',
|
||||
hibernating: 'Sem compra entre 16 e 29 dias',
|
||||
lost: 'Sem compra há 30 dias ou mais'
|
||||
};
|
||||
|
||||
const segmentActions: Record<string, string> = {
|
||||
champions: 'Oferecer acesso antecipado, benefícios VIP e lançamentos.',
|
||||
potential_loyalists: 'Estimular a próxima compra com recomendações personalizadas.',
|
||||
new_customers: 'Enviar boas-vindas e incentivo para a segunda compra.',
|
||||
loyal_customers: 'Manter relacionamento com ofertas relevantes e recorrentes.',
|
||||
need_attention: 'Reativar interesse com campanha leve e produtos recentes.',
|
||||
about_to_sleep: 'Enviar lembrete antes que o cliente esfrie completamente.',
|
||||
at_risk: 'Priorizar recuperação com oferta forte ou contato direto.',
|
||||
hibernating: 'Testar reativação de baixo custo com mensagem objetiva.',
|
||||
lost: 'Evitar alto investimento; usar apenas campanhas ocasionais.'
|
||||
};
|
||||
|
||||
const segmentByScore: Record<string, string> = {
|
||||
'3-3': 'champions',
|
||||
'3-2': 'potential_loyalists',
|
||||
'3-1': 'new_customers',
|
||||
'2-3': 'loyal_customers',
|
||||
'2-2': 'need_attention',
|
||||
'2-1': 'about_to_sleep',
|
||||
'1-3': 'at_risk',
|
||||
'1-2': 'hibernating',
|
||||
'1-1': 'lost'
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
|
||||
};
|
||||
|
||||
const segmentPanelStyle = (style: SegmentStyle, isActive = false) => ({
|
||||
backgroundColor: style.bg,
|
||||
borderColor: isActive ? style.text : style.border,
|
||||
boxShadow: isActive ? `0 0 0 1px ${style.border}, 0 0 14px ${style.accent}22` : undefined
|
||||
});
|
||||
|
||||
const segmentPillStyle = (style: SegmentStyle) => ({
|
||||
backgroundColor: style.bg,
|
||||
color: style.text,
|
||||
borderColor: style.border
|
||||
});
|
||||
|
||||
const segmentDotStyle = (style: SegmentStyle) => ({
|
||||
backgroundColor: style.accent,
|
||||
boxShadow: `0 0 6px ${style.accent}55`
|
||||
});
|
||||
|
||||
const DAY_MS = 24 * 60 * 60 * 1000;
|
||||
|
||||
const parseLocalDate = (value: string) => {
|
||||
if (!value) return null;
|
||||
const match = value.match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
if (match) {
|
||||
const [, year, month, day] = match;
|
||||
return new Date(Number(year), Number(month) - 1, Number(day));
|
||||
}
|
||||
|
||||
const parsedDate = new Date(value);
|
||||
return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
|
||||
};
|
||||
|
||||
const startOfDay = (date: Date) => {
|
||||
const nextDate = new Date(date);
|
||||
nextDate.setHours(0, 0, 0, 0);
|
||||
return nextDate;
|
||||
};
|
||||
|
||||
const formatDate = (value: string) => {
|
||||
if (!value) return 'N/A';
|
||||
const date = parseLocalDate(value);
|
||||
return date ? date.toLocaleDateString('pt-BR') : 'N/A';
|
||||
};
|
||||
|
||||
const scoreLabel = (score: number) => {
|
||||
if (score === 3) return 'Alto';
|
||||
if (score === 2) return 'Médio';
|
||||
return 'Baixo';
|
||||
};
|
||||
|
||||
const getSegment = (segments: RfmSegment[], key: string) => {
|
||||
return segments.find(segment => segment.key === key);
|
||||
};
|
||||
|
||||
const segmentForCell = (segments: RfmSegment[], recencyScore: number, valueScore: number) => {
|
||||
const matrixKey = `${recencyScore}-${valueScore}`;
|
||||
return getSegment(segments, segmentByScore[matrixKey]);
|
||||
};
|
||||
|
||||
const ScoreBadge = ({ value }: { value: number }) => (
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-xs font-bold text-dark-text">
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
|
||||
const RfmSkeleton = () => (
|
||||
<div className="space-y-6" aria-label="Carregando RFV">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{[0, 1, 2].map(item => (
|
||||
<div key={`rfv-kpi-skeleton-${item}`} className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="skeleton h-4 w-36" />
|
||||
<div className="skeleton mt-3 h-8 w-24" />
|
||||
<div className="skeleton mt-3 h-3 w-44" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_340px] gap-6">
|
||||
<section className="bg-dark-card p-5 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="skeleton h-5 w-28" />
|
||||
<div className="skeleton mt-2 h-3 w-72 max-w-full" />
|
||||
</div>
|
||||
<div className="skeleton h-3 w-44" />
|
||||
</div>
|
||||
<div className="mt-5 overflow-x-auto">
|
||||
<div className="grid min-w-[720px] grid-cols-[104px_repeat(3,minmax(0,1fr))] gap-2">
|
||||
{[0, 1, 2, 3].map(item => (
|
||||
<div key={`rfv-matrix-head-skeleton-${item}`} className="rounded-xl border border-dark-border bg-dark-input/60 p-3">
|
||||
<div className="skeleton mx-auto h-3 w-16" />
|
||||
<div className="skeleton mx-auto mt-2 h-3 w-20" />
|
||||
</div>
|
||||
))}
|
||||
{[0, 1, 2].map(row => (
|
||||
<div key={`rfv-matrix-row-skeleton-${row}`} className="contents">
|
||||
{[0, 1, 2, 3].map(column => (
|
||||
<div
|
||||
key={`rfv-matrix-cell-skeleton-${row}-${column}`}
|
||||
className={`min-h-28 rounded-xl border border-dark-border bg-dark-input/50 p-3 ${
|
||||
column === 0 ? 'flex flex-col items-center justify-center text-center' : ''
|
||||
}`}
|
||||
>
|
||||
{column === 0 ? (
|
||||
<>
|
||||
<div className="skeleton h-3 w-12" />
|
||||
<div className="skeleton mt-2 h-4 w-12" />
|
||||
<div className="skeleton mt-3 h-3 w-14" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="skeleton h-2 w-8" />
|
||||
<div className="skeleton mt-5 h-4 w-28" />
|
||||
<div className="skeleton mt-2 h-3 w-36" />
|
||||
<div className="mt-5 grid grid-cols-2 gap-3">
|
||||
<div className="skeleton h-5" />
|
||||
<div className="skeleton h-5" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="skeleton h-5 w-28" />
|
||||
<div className="mt-5 space-y-2">
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map(item => (
|
||||
<div key={`rfv-segment-skeleton-${item}`} className="rounded-xl border border-dark-border p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex flex-1 items-center gap-3">
|
||||
<div className="skeleton h-2.5 w-2.5 rounded-full" />
|
||||
<div className="skeleton h-4 w-32" />
|
||||
</div>
|
||||
<div className="skeleton h-4 w-8" />
|
||||
</div>
|
||||
<div className="skeleton mt-3 h-3 w-48" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="bg-dark-card border border-dark-border rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="flex flex-col gap-3 border-b border-dark-border p-4 sm:flex-row">
|
||||
<div className="skeleton h-10 w-48" />
|
||||
<div className="skeleton h-10 w-72" />
|
||||
<div className="skeleton h-10 w-28 sm:ml-auto" />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-[1.5fr_1fr_120px_1fr_1fr_1fr_1fr] gap-5">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(item => (
|
||||
<div key={`rfv-table-head-skeleton-${item}`} className="skeleton h-3" />
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 space-y-5">
|
||||
{[0, 1, 2, 3, 4, 5].map(row => (
|
||||
<div key={`rfv-table-row-skeleton-${row}`} className="grid grid-cols-[1.5fr_1fr_120px_1fr_1fr_1fr_1fr] gap-5">
|
||||
{[0, 1, 2, 3, 4, 5, 6].map(column => (
|
||||
<div key={`rfv-table-cell-skeleton-${row}-${column}`} className="skeleton h-4" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Rfm = () => {
|
||||
const { dateRange, setDateRange, refreshInterval, setRefreshInterval, themeMode } = useOutletContext<{
|
||||
dateRange: DateRange;
|
||||
setDateRange: (range: DateRange) => void;
|
||||
refreshInterval: number;
|
||||
setRefreshInterval: (interval: number) => void;
|
||||
themeMode?: ThemeMode;
|
||||
}>();
|
||||
const segmentStyles = themeMode === 'offwhite' ? offwhiteSegmentStyles : darkSegmentStyles;
|
||||
|
||||
const initialCachedAnalytics = getCachedRfmAnalytics(dateRange);
|
||||
const [analytics, setAnalytics] = useState<RfmAnalytics | null>(initialCachedAnalytics || null);
|
||||
const [isLoading, setIsLoading] = useState(!initialCachedAnalytics);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [segmentFilter, setSegmentFilter] = useState('all');
|
||||
const [selectedSegmentKey, setSelectedSegmentKey] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(20);
|
||||
|
||||
const loadRfm = useCallback(async (range: DateRange, options?: { force?: boolean }) => {
|
||||
const cachedAnalytics = options?.force ? undefined : getCachedRfmAnalytics(range);
|
||||
if (cachedAnalytics) {
|
||||
setAnalytics(cachedAnalytics);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
const data = await fetchRfmAnalytics(range, undefined, options);
|
||||
setAnalytics(data);
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// RFV is calculated server-side from the selected date range.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
void loadRfm(dateRange);
|
||||
}, [dateRange, loadRfm]);
|
||||
|
||||
useEffect(() => {
|
||||
if (refreshInterval === 0) return;
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
void loadRfm(dateRange, { force: true });
|
||||
}, refreshInterval);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [dateRange, loadRfm, refreshInterval]);
|
||||
|
||||
const clearSegmentFocus = useCallback(() => {
|
||||
setSegmentFilter('all');
|
||||
setSelectedSegmentKey('');
|
||||
setCurrentPage(1);
|
||||
}, []);
|
||||
|
||||
const selectSegment = useCallback((segmentKey: string) => {
|
||||
if (segmentFilter === segmentKey) {
|
||||
clearSegmentFocus();
|
||||
return;
|
||||
}
|
||||
|
||||
setSegmentFilter(segmentKey);
|
||||
setSelectedSegmentKey(segmentKey);
|
||||
setCurrentPage(1);
|
||||
}, [clearSegmentFocus, segmentFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
if (segmentFilter === 'all' && !selectedSegmentKey) return;
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
clearSegmentFocus();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [clearSegmentFocus, segmentFilter, selectedSegmentKey]);
|
||||
|
||||
const visibleAnalytics = analytics;
|
||||
const clients = visibleAnalytics?.clients || emptyClients;
|
||||
const segments = useMemo(() => {
|
||||
const sourceSegments = visibleAnalytics?.segments || emptySegments;
|
||||
return rfmSegmentDefinitions.map(definition => {
|
||||
const segment = sourceSegments.find(item => item.key === definition.key);
|
||||
return segment || {
|
||||
...definition,
|
||||
count: 0,
|
||||
totalRevenue: 0,
|
||||
averageRevenue: 0
|
||||
};
|
||||
});
|
||||
}, [visibleAnalytics]);
|
||||
|
||||
const getPeriodRecencyDays = useCallback((lastPurchaseDate: string) => {
|
||||
const purchaseDate = parseLocalDate(lastPurchaseDate);
|
||||
if (!purchaseDate) return 0;
|
||||
|
||||
const purchaseDay = startOfDay(purchaseDate).getTime();
|
||||
const rangeEndDay = startOfDay(dateRange.end).getTime();
|
||||
return Math.max(0, Math.floor((rangeEndDay - purchaseDay) / DAY_MS));
|
||||
}, [dateRange.end]);
|
||||
|
||||
const formatPeriodRecency = useCallback((lastPurchaseDate: string) => {
|
||||
const days = getPeriodRecencyDays(lastPurchaseDate);
|
||||
if (days === 0) return 'Hoje';
|
||||
if (days === 1) return 'Ontem';
|
||||
return `${days} dias`;
|
||||
}, [getPeriodRecencyDays]);
|
||||
|
||||
const filteredClients = useMemo(() => {
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
|
||||
return clients.filter(client => {
|
||||
const matchesSegment = segmentFilter === 'all' || client.segmentKey === segmentFilter;
|
||||
const matchesSearch = !normalizedSearch ||
|
||||
client.name.toLowerCase().includes(normalizedSearch) ||
|
||||
client.phone.toLowerCase().includes(normalizedSearch);
|
||||
|
||||
return matchesSegment && matchesSearch;
|
||||
});
|
||||
}, [clients, searchTerm, segmentFilter]);
|
||||
|
||||
const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
|
||||
const safeCurrentPage = Math.min(currentPage, totalPages || 1);
|
||||
const startIndex = (safeCurrentPage - 1) * itemsPerPage;
|
||||
const paginatedClients = filteredClients.slice(startIndex, startIndex + itemsPerPage);
|
||||
|
||||
const totals = useMemo(() => {
|
||||
const totalRevenue = clients.reduce((sum, client) => sum + client.monetary, 0);
|
||||
const periodClientCount = clients.filter(client => client.frequency > 0 || client.monetary > 0).length;
|
||||
const activeSegments = segments.filter(segment => segment.count > 0).length;
|
||||
const topSegment = [...segments].sort((a, b) => b.totalRevenue - a.totalRevenue)[0];
|
||||
|
||||
return { totalRevenue, periodClientCount, activeSegments, topSegment };
|
||||
}, [clients, segments]);
|
||||
|
||||
const segmentInsights = useMemo(() => {
|
||||
return segments.reduce<Record<string, {
|
||||
averageRecencyDays: number;
|
||||
averageTicket: number;
|
||||
customerPercent: number;
|
||||
revenuePercent: number;
|
||||
topClients: RfmClient[];
|
||||
}>>((insights, segment) => {
|
||||
const segmentClients = clients.filter(client => client.segmentKey === segment.key);
|
||||
const totalOrders = segmentClients.reduce((sum, client) => sum + client.frequency, 0);
|
||||
const totalRecency = segmentClients.reduce((sum, client) => sum + getPeriodRecencyDays(client.lastPurchaseDate), 0);
|
||||
|
||||
insights[segment.key] = {
|
||||
averageRecencyDays: segmentClients.length ? totalRecency / segmentClients.length : 0,
|
||||
averageTicket: totalOrders ? segment.totalRevenue / totalOrders : 0,
|
||||
customerPercent: clients.length ? (segment.count / clients.length) * 100 : 0,
|
||||
revenuePercent: totals.totalRevenue ? (segment.totalRevenue / totals.totalRevenue) * 100 : 0,
|
||||
topClients: [...segmentClients].sort((a, b) => b.monetary - a.monetary).slice(0, 3)
|
||||
};
|
||||
|
||||
return insights;
|
||||
}, {});
|
||||
}, [clients, segments, getPeriodRecencyDays, totals.totalRevenue]);
|
||||
|
||||
const selectedSegment = selectedSegmentKey ? getSegment(segments, selectedSegmentKey) : undefined;
|
||||
const selectedSegmentStyle = segmentStyles[selectedSegment?.key || 'lost'] || segmentStyles.lost;
|
||||
const selectedSegmentInsights = selectedSegment ? segmentInsights[selectedSegment.key] : null;
|
||||
|
||||
const handleExport = () => {
|
||||
const exportData = filteredClients.map(client => ({
|
||||
Cliente: client.name,
|
||||
Telefone: client.phone,
|
||||
Segmento: client.segmentLabel,
|
||||
RFV: client.rfmScore,
|
||||
Recencia: client.recencyScore,
|
||||
Frequencia: client.frequencyScore,
|
||||
Valor: client.monetaryScore,
|
||||
'Compra no periodo': formatPeriodRecency(client.lastPurchaseDate),
|
||||
'Pedidos no periodo': client.frequency,
|
||||
'Ticket medio no periodo (R$)': (client.frequency ? client.monetary / client.frequency : 0).toFixed(2).replace('.', ','),
|
||||
'Receita no periodo (R$)': client.monetary.toFixed(2).replace('.', ','),
|
||||
'Ultima compra': formatDate(client.lastPurchaseDate)
|
||||
}));
|
||||
|
||||
exportToCSV(exportData, `rfv_${new Date().toISOString().split('T')[0]}.csv`);
|
||||
};
|
||||
const shouldShowSkeleton = isLoading && !analytics;
|
||||
const isRefreshing = isLoading && Boolean(analytics);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col xl:flex-row xl:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-2 text-dark-text">RFV</h1>
|
||||
<p className="text-dark-muted font-medium">Segmentação de clientes por recência, frequência e valor.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row flex-wrap gap-3 items-start sm:items-center">
|
||||
<DateRangePicker
|
||||
dateRange={dateRange}
|
||||
onChange={setDateRange}
|
||||
refreshInterval={refreshInterval}
|
||||
setRefreshInterval={setRefreshInterval}
|
||||
onManualRefresh={() => void loadRfm(dateRange, { force: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RefreshStatus isRefreshing={isRefreshing} />
|
||||
|
||||
{shouldShowSkeleton ? (
|
||||
<RfmSkeleton />
|
||||
) : (
|
||||
<div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<p className="text-dark-muted text-sm font-medium mb-1">Clientes no Período</p>
|
||||
<h3 className="text-3xl font-bold text-dark-text">{clients.length}</h3>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">Segmento RFV calculado até o fim do período</p>
|
||||
</div>
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<p className="text-dark-muted text-sm font-medium mb-1">Receita no Período</p>
|
||||
<h3 className="text-3xl font-bold text-dark-text">{formatCurrency(totals.totalRevenue)}</h3>
|
||||
</div>
|
||||
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<p className="text-dark-muted text-sm font-medium mb-1">Segmentos com Compra</p>
|
||||
<h3 className="text-3xl font-bold text-dark-text">{totals.activeSegments}</h3>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
Maior receita no período: {totals.topSegment?.label || 'N/A'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_340px] gap-6">
|
||||
<section className="bg-dark-card p-5 rounded-2xl border border-dark-border shadow-sm">
|
||||
<div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-dark-text">Matriz RFV</h2>
|
||||
<p className="text-sm font-medium text-dark-muted">Recência fixa, frequência por número de pedidos e valor relativo ao histórico.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs font-semibold text-dark-muted">
|
||||
<span>Menor prioridade</span>
|
||||
<span
|
||||
className="h-2 w-12 rounded-full"
|
||||
style={{ background: 'linear-gradient(90deg, #FF6B8A, #FFC247, #18D6B5)' }}
|
||||
/>
|
||||
<span>Maior prioridade</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="grid min-w-[720px] grid-cols-[104px_repeat(3,minmax(0,1fr))] gap-2">
|
||||
<div className="flex items-center justify-center rounded-xl border border-dark-border bg-dark-input/60 px-3 py-2.5 text-center">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Eixos</p>
|
||||
<p className="text-xs font-semibold text-dark-text">Recência / Perfil</p>
|
||||
</div>
|
||||
</div>
|
||||
{[1, 2, 3].map(valueScore => (
|
||||
<div key={valueScore} className="rounded-xl border border-dark-border bg-dark-input/70 px-3 py-2.5 text-center">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Perfil {valueScore}</p>
|
||||
<p className="text-xs font-bold text-dark-text">{scoreLabel(valueScore)}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{[3, 2, 1].map(recencyScore => (
|
||||
<div key={recencyScore} className="contents">
|
||||
<div className="flex min-h-28 items-center justify-center rounded-xl border border-dark-border bg-dark-input/70 px-2.5 text-center">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Rec. {recencyScore}</p>
|
||||
<p className="text-xs font-bold text-dark-text">{scoreLabel(recencyScore)}</p>
|
||||
<p className="mt-1 text-[10px] font-semibold text-dark-muted">
|
||||
{recencyScore === 3 ? '0 a 7 dias' : recencyScore === 2 ? '8 a 15 dias' : '16+ dias'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{[1, 2, 3].map(valueScore => {
|
||||
const segment = segmentForCell(segments, recencyScore, valueScore);
|
||||
const segmentKey = segment?.key || 'lost';
|
||||
const style = segmentStyles[segmentKey];
|
||||
const isActive = segmentFilter === segmentKey;
|
||||
const intensity = segment?.count ? 'opacity-100' : 'opacity-75';
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`${recencyScore}-${valueScore}`}
|
||||
onClick={() => selectSegment(segmentKey)}
|
||||
className={`group min-h-28 rounded-xl border p-3 text-left transition-all hover:-translate-y-0.5 cursor-pointer ${intensity}`}
|
||||
style={segmentPanelStyle(style, isActive)}
|
||||
>
|
||||
<div className="flex h-full flex-col justify-between gap-3">
|
||||
<div>
|
||||
<div className="mb-2 flex items-start justify-between gap-2">
|
||||
<span className="h-2 w-8 rounded-full" style={segmentDotStyle(style)} />
|
||||
<span className="rounded-md border border-dark-border bg-black/10 px-1.5 py-0.5 text-[10px] font-bold text-dark-muted">
|
||||
R{recencyScore} P{valueScore}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-dark-text">{segment?.label}</p>
|
||||
<p className="mt-1 truncate text-xs font-medium text-dark-muted">
|
||||
{segmentDescriptions[segmentKey]}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Clientes</p>
|
||||
<p className="text-xl font-bold leading-none" style={{ color: style.text }}>{segment?.count || 0}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Receita período</p>
|
||||
<p className="truncate text-xs font-bold text-dark-text">{formatCurrency(segment?.totalRevenue || 0)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
||||
<h2 className="mb-5 text-lg font-bold text-dark-text">Segmentos</h2>
|
||||
<div className="space-y-2">
|
||||
{segments.map(segment => {
|
||||
const style = segmentStyles[segment.key] || segmentStyles.lost;
|
||||
return (
|
||||
<button
|
||||
key={segment.key}
|
||||
onClick={() => selectSegment(segment.key)}
|
||||
className={`w-full rounded-xl border px-4 py-3 text-left transition-colors cursor-pointer ${
|
||||
segmentFilter === segment.key ? '' : 'hover:border-brand-primary'
|
||||
}`}
|
||||
style={segmentFilter === segment.key ? segmentPanelStyle(style, true) : { borderColor: '#282828' }}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<span className="h-2.5 w-2.5 shrink-0 rounded-full" style={segmentDotStyle(style)} />
|
||||
<span className="truncate text-sm font-bold text-dark-text">{segment.label}</span>
|
||||
</div>
|
||||
<span className="text-sm font-bold" style={{ color: style.text }}>{segment.count}</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
||||
{(segmentInsights[segment.key]?.customerPercent || 0).toFixed(1)}% clientes · {formatCurrency(segment.totalRevenue)} no período
|
||||
</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{selectedSegment && selectedSegmentInsights && (
|
||||
<section className="rounded-2xl border p-4 shadow-sm" style={segmentPanelStyle(selectedSegmentStyle, true)}>
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full" style={segmentDotStyle(selectedSegmentStyle)} />
|
||||
<p className="text-xs font-bold uppercase tracking-widest" style={{ color: selectedSegmentStyle.text }}>Segmento selecionado</p>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-dark-text">{selectedSegment.label}</h3>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">{segmentActions[selectedSegment.key]}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:w-[560px]">
|
||||
<div className="rounded-xl border border-dark-border bg-black/10 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Clientes</p>
|
||||
<p className="mt-1 text-base font-bold text-dark-text">{selectedSegmentInsights.customerPercent.toFixed(1)}%</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-dark-border bg-black/10 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Receita período</p>
|
||||
<p className="mt-1 text-base font-bold text-dark-text">{selectedSegmentInsights.revenuePercent.toFixed(1)}%</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-dark-border bg-black/10 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Ticket período</p>
|
||||
<p className="mt-1 text-base font-bold text-dark-text">{formatCurrency(selectedSegmentInsights.averageTicket)}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-dark-border bg-black/10 p-3">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Compra período</p>
|
||||
<p className="mt-1 text-base font-bold text-dark-text">{selectedSegmentInsights.averageRecencyDays.toFixed(0)} dias</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<section className="bg-dark-card border border-dark-border rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 border-b border-dark-border p-4">
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="relative">
|
||||
<Filter className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-muted" />
|
||||
<select
|
||||
value={segmentFilter}
|
||||
onChange={(event) => {
|
||||
setSegmentFilter(event.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="appearance-none bg-dark-input border border-dark-border text-dark-text text-sm rounded-xl pl-9 pr-8 py-2.5 focus:outline-none focus:border-brand-primary transition-colors shadow-sm cursor-pointer"
|
||||
>
|
||||
<option value="all">Todos os segmentos</option>
|
||||
{segments.map(segment => (
|
||||
<option key={segment.key} value={segment.key}>{segment.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-dark-muted" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar cliente..."
|
||||
value={searchTerm}
|
||||
onChange={(event) => {
|
||||
setSearchTerm(event.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-full sm:w-72 bg-dark-input border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary hover:border-brand-primary transition-colors shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={!filteredClients.length}
|
||||
className="flex items-center justify-center gap-2 bg-dark-input border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
|
||||
title="Exportar para CSV"
|
||||
>
|
||||
<Download size={16} className="text-brand-primary" />
|
||||
Exportar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-dark-header border-b border-dark-border text-dark-muted">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Cliente</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Segmento</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">RFV</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Última Compra</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Pedidos no Período</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Ticket no Período</th>
|
||||
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Receita no Período</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-border">
|
||||
{paginatedClients.map((client: RfmClient) => {
|
||||
const style = segmentStyles[client.segmentKey] || segmentStyles.lost;
|
||||
return (
|
||||
<tr key={client.customerKey} className="hover:bg-dark-input/50 transition-colors">
|
||||
<td className="px-6 py-3">
|
||||
<Link to={`/clients/${encodeURIComponent(client.clientToken)}`} className="flex items-center gap-3 hover:text-brand-primary transition-colors">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-dark-input text-dark-muted">
|
||||
<Users className="h-4 w-4" />
|
||||
</span>
|
||||
<span>
|
||||
<span className="block font-bold text-dark-text">{client.name}</span>
|
||||
<span className="block text-xs font-medium text-dark-muted">{client.phone || 'N/A'}</span>
|
||||
</span>
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-bold" style={segmentPillStyle(style)}>
|
||||
<span className="h-2 w-2 rounded-full" style={segmentDotStyle(style)} />
|
||||
{client.segmentLabel}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<ScoreBadge value={client.recencyScore} />
|
||||
<ScoreBadge value={client.frequencyScore} />
|
||||
<ScoreBadge value={client.monetaryScore} />
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-dark-muted font-medium">
|
||||
{formatDate(client.lastPurchaseDate)}
|
||||
<span className="block text-xs">{formatPeriodRecency(client.lastPurchaseDate)}</span>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-dark-text font-bold">{client.frequency}</td>
|
||||
<td className="px-6 py-3 text-dark-text font-bold">{formatCurrency(client.frequency ? client.monetary / client.frequency : 0)}</td>
|
||||
<td className="px-6 py-3 text-brand-primary font-bold">{formatCurrency(client.monetary)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{!filteredClients.length && (
|
||||
<div className="p-8 text-center text-sm font-semibold text-dark-muted">
|
||||
Nenhum cliente encontrado.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PaginationControls
|
||||
totalItems={filteredClients.length}
|
||||
currentPage={safeCurrentPage}
|
||||
totalPages={totalPages}
|
||||
pageSize={itemsPerPage}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
itemLabel="clientes"
|
||||
pageSizeLabel="clientes por página"
|
||||
startIndex={startIndex}
|
||||
endIndex={Math.min(startIndex + itemsPerPage, filteredClients.length)}
|
||||
onPageChange={setCurrentPage}
|
||||
onPageSizeChange={(pageSize) => {
|
||||
setItemsPerPage(pageSize);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="px-6 py-4 border-t border-dark-border"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Rfm;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
export const getPlanningStock = (stock: number) => Math.max(0, stock);
|
||||
@@ -1,177 +0,0 @@
|
||||
import { normalizeProductText } from './productParsing.ts';
|
||||
|
||||
export type ProductTypeKey =
|
||||
| 'finished_apparel'
|
||||
| 'finished_accessory'
|
||||
| 'raw_material'
|
||||
| 'packaging'
|
||||
| 'dtf_input'
|
||||
| 'dtf_service'
|
||||
| 'kit_bundle'
|
||||
| 'service'
|
||||
| 'machine_part'
|
||||
| 'equipment'
|
||||
| 'ignore_from_planning'
|
||||
| 'unknown';
|
||||
|
||||
export type ProductPlanningMode = 'cutting' | 'unit_replenishment' | 'material' | 'service' | 'ignore' | 'review';
|
||||
|
||||
export type ProductTypeConfig = {
|
||||
key: ProductTypeKey;
|
||||
label: string;
|
||||
description: string;
|
||||
planningMode: ProductPlanningMode;
|
||||
badgeClassName: string;
|
||||
};
|
||||
|
||||
export const productTypeConfigs: Record<ProductTypeKey, ProductTypeConfig> = {
|
||||
finished_apparel: {
|
||||
key: 'finished_apparel',
|
||||
label: 'Vestuário',
|
||||
description: 'Produto acabado que pode entrar em corte/reposição por SKU.',
|
||||
planningMode: 'cutting',
|
||||
badgeClassName: 'border-sky-400/30 bg-sky-400/10 text-sky-300'
|
||||
},
|
||||
finished_accessory: {
|
||||
key: 'finished_accessory',
|
||||
label: 'Acessório',
|
||||
description: 'Produto acabado sem regra de malha principal.',
|
||||
planningMode: 'unit_replenishment',
|
||||
badgeClassName: 'border-cyan-400/30 bg-cyan-400/10 text-cyan-300'
|
||||
},
|
||||
raw_material: {
|
||||
key: 'raw_material',
|
||||
label: 'Matéria-prima',
|
||||
description: 'Entrada de produção, como malha, ribana, tecido, fio ou resíduo.',
|
||||
planningMode: 'material',
|
||||
badgeClassName: 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300'
|
||||
},
|
||||
packaging: {
|
||||
key: 'packaging',
|
||||
label: 'Embalagem',
|
||||
description: 'Insumo de embalagem controlado por unidade/milheiro.',
|
||||
planningMode: 'unit_replenishment',
|
||||
badgeClassName: 'border-amber-400/30 bg-amber-400/10 text-amber-300'
|
||||
},
|
||||
dtf_input: {
|
||||
key: 'dtf_input',
|
||||
label: 'Insumo DTF',
|
||||
description: 'Insumo para DTF, como tinta, filme, poliamida ou fluido.',
|
||||
planningMode: 'material',
|
||||
badgeClassName: 'border-fuchsia-400/30 bg-fuchsia-400/10 text-fuchsia-300'
|
||||
},
|
||||
dtf_service: {
|
||||
key: 'dtf_service',
|
||||
label: 'Serviço DTF',
|
||||
description: 'Impressão, estampa ou personalização vendida como serviço/produto customizado.',
|
||||
planningMode: 'service',
|
||||
badgeClassName: 'border-purple-400/30 bg-purple-400/10 text-purple-300'
|
||||
},
|
||||
kit_bundle: {
|
||||
key: 'kit_bundle',
|
||||
label: 'Kit',
|
||||
description: 'Bundle marketplace composto por outros SKUs.',
|
||||
planningMode: 'review',
|
||||
badgeClassName: 'border-indigo-400/30 bg-indigo-400/10 text-indigo-300'
|
||||
},
|
||||
service: {
|
||||
key: 'service',
|
||||
label: 'Serviço',
|
||||
description: 'Frete, transporte, tecelagem, tinturaria ou serviço técnico.',
|
||||
planningMode: 'service',
|
||||
badgeClassName: 'border-zinc-400/30 bg-zinc-400/10 text-zinc-300'
|
||||
},
|
||||
machine_part: {
|
||||
key: 'machine_part',
|
||||
label: 'Peça máquina',
|
||||
description: 'Peça, limpeza ou manutenção de máquina.',
|
||||
planningMode: 'unit_replenishment',
|
||||
badgeClassName: 'border-orange-400/30 bg-orange-400/10 text-orange-300'
|
||||
},
|
||||
equipment: {
|
||||
key: 'equipment',
|
||||
label: 'Equipamento',
|
||||
description: 'Máquina ou equipamento permanente.',
|
||||
planningMode: 'ignore',
|
||||
badgeClassName: 'border-slate-400/30 bg-slate-400/10 text-slate-300'
|
||||
},
|
||||
ignore_from_planning: {
|
||||
key: 'ignore_from_planning',
|
||||
label: 'Ignorar',
|
||||
description: 'Item que não deve dirigir corte, compra ou reposição.',
|
||||
planningMode: 'ignore',
|
||||
badgeClassName: 'border-dark-border bg-dark-input text-dark-muted'
|
||||
},
|
||||
unknown: {
|
||||
key: 'unknown',
|
||||
label: 'Revisar',
|
||||
description: 'Tipo não identificado automaticamente.',
|
||||
planningMode: 'review',
|
||||
badgeClassName: 'border-red-400/30 bg-red-400/10 text-red-300'
|
||||
}
|
||||
};
|
||||
|
||||
const has = (value: string, pattern: RegExp) => pattern.test(value);
|
||||
|
||||
export const classifyProductType = (name: string): ProductTypeKey => {
|
||||
const normalizedName = normalizeProductText(name)
|
||||
.normalize('NFD')
|
||||
.replace(/\p{Diacritic}/gu, '')
|
||||
.toUpperCase();
|
||||
|
||||
if (!normalizedName) return 'unknown';
|
||||
|
||||
if (has(normalizedName, /\bSALDO ESTOQUE\b/)) return 'ignore_from_planning';
|
||||
if (has(normalizedName, /^(?:\d+\s+)?(?:MALHA|RIBANA)\b/)) return 'raw_material';
|
||||
if (has(normalizedName, /\b(?:RETALHO|RESIDUO)\s+(?:DE\s+)?(?:MALHA|MOLETOM)\b/)) return 'raw_material';
|
||||
if (has(normalizedName, /\bFIO\b.*\bMALHARIA\b/)) return 'raw_material';
|
||||
if (has(normalizedName, /\b(?:LINHA|FIO) PARA COSTURA\b/)) return 'raw_material';
|
||||
if (has(normalizedName, /\bATACADOR\b/)) return 'raw_material';
|
||||
if (has(normalizedName, /\bILHOS\b/)) return 'raw_material';
|
||||
if (has(normalizedName, /ETIQUETA|TAG|FITA/)) return 'raw_material';
|
||||
if (has(normalizedName, /\bCREDITO\b/)) return 'ignore_from_planning';
|
||||
if (has(normalizedName, /\bKIT\b/)) return 'kit_bundle';
|
||||
if (has(normalizedName, /TRANSPARENTE PP|SACO DE SEGURANCA|MILHEIRO|SACOLA|EMBALAGEM/)) return 'packaging';
|
||||
if (has(normalizedName, /PRENSA|MAQUINA|OVERLOCK|OVERLOK|GALONEIRA|PRATELEIRA/)) return 'equipment';
|
||||
if (has(normalizedName, /FRETE|SERVICO|TRANSPORTE|MOTOTAXI|TECELAGEM|TINTURARIA|MAO DE OBRA/)) return 'service';
|
||||
if (has(normalizedName, /DUMPER|CABO FLAT|WIPPER|PRIMER|FLUIDO DE LIMPEZA|MISTURADOR|CABECA I3200|CABECA DE IMPRESSAO|SENSOR INFRAVERMELHO|CAPSULA FILTRO|PECA DE MAQUINA/)) return 'machine_part';
|
||||
if (has(normalizedName, /TINTA DTF|FILME DTF|POLIAMIDA.*DTF|DTF ROLO|PO PARA DTF|BOMBA DE TINTA/)) return 'dtf_input';
|
||||
if (has(normalizedName, /IMPRESSAO DTF|IMPRESSAO UV|CORRECAO IMPRESSAO|ESTAMPA|PERSONALIZACAO/)) return 'dtf_service';
|
||||
if (has(normalizedName, /MALHA|RIBANA|FIO|TECIDO|RESIDUO|RETALHO|PIMA|ALGODAO/)) {
|
||||
if (!has(normalizedName, /CAMISETA|MOLETOM|REGATA|BONE|CHINELO|OVERSIZE|OVER SIZE/)) {
|
||||
return 'raw_material';
|
||||
}
|
||||
}
|
||||
if (has(normalizedName, /BONE|TRUCKER|\bCAP\b|CHINELO/)) return 'finished_accessory';
|
||||
if (has(normalizedName, /CAMISETA|MOLETOM|CANGURU|REGATA|INFANTIL|OVER SIZE|OVERSIZE|PROMOCIONAL|VESTUARIO/)) return 'finished_apparel';
|
||||
if (has(normalizedName, /ETIQUETA|TAG|FITA|LINHA PARA COSTURA|COSTURA/)) return 'raw_material';
|
||||
|
||||
return 'unknown';
|
||||
};
|
||||
|
||||
export const getProductTypeConfig = (type: ProductTypeKey) => productTypeConfigs[type] || productTypeConfigs.unknown;
|
||||
|
||||
export const productTypeOptions = Object.values(productTypeConfigs)
|
||||
.filter(config => config.key !== 'ignore_from_planning')
|
||||
.map(config => ({ value: config.key, label: config.label }));
|
||||
|
||||
export const editableProductTypeOptions = Object.values(productTypeConfigs)
|
||||
.map(config => ({ value: config.key, label: config.label, description: config.description }));
|
||||
|
||||
export const resolveProductType = (
|
||||
name: string,
|
||||
override?: { productType?: ProductTypeKey | '' } | null
|
||||
): ProductTypeKey => {
|
||||
return override?.productType || classifyProductType(name);
|
||||
};
|
||||
|
||||
export const getDominantProductType = <T extends { productType: ProductTypeKey; quantitySold: number }>(rows: T[]) => {
|
||||
if (!rows.length) return 'unknown';
|
||||
|
||||
const totals = rows.reduce<Record<string, number>>((acc, row) => {
|
||||
acc[row.productType] = (acc[row.productType] || 0) + Math.max(row.quantitySold, 1);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return (Object.entries(totals).sort((a, b) => b[1] - a[1])[0]?.[0] || 'unknown') as ProductTypeKey;
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
const COLOR_SWATCHES: Array<{ pattern: string; color: string }> = [
|
||||
{ pattern: 'preto', color: '#171717' },
|
||||
{ pattern: 'branco', color: '#f8fafc' },
|
||||
{ pattern: 'bege', color: '#d7bf9a' },
|
||||
{ pattern: 'cafe', color: '#79553d' },
|
||||
{ pattern: 'perola', color: '#e7dfcf' },
|
||||
{ pattern: 'marinho', color: '#172554' },
|
||||
{ pattern: 'bordo', color: '#6b1226' },
|
||||
{ pattern: 'verde', color: '#166534' },
|
||||
{ pattern: 'rosa', color: '#f0a6bf' },
|
||||
{ pattern: 'cinza', color: '#8f8f8f' },
|
||||
{ pattern: 'vermelho', color: '#b91c1c' },
|
||||
{ pattern: 'grafite', color: '#3f3f46' },
|
||||
{ pattern: 'azul', color: '#2563eb' },
|
||||
{ pattern: 'marron', color: '#6b4f3b' },
|
||||
{ pattern: 'marrom', color: '#6b4f3b' }
|
||||
];
|
||||
|
||||
const normalizeColorLabel = (label: string) => (
|
||||
label.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase()
|
||||
);
|
||||
|
||||
export const getProductColor = (label: string) => {
|
||||
const normalizedLabel = normalizeColorLabel(label);
|
||||
return COLOR_SWATCHES.find(item => normalizedLabel.includes(item.pattern))?.color || '#64748b';
|
||||
};
|
||||
@@ -1,135 +0,0 @@
|
||||
const sizeOrder = ['2', '4', '6', '8', '10', '12', '14', '16', 'PP', 'P', 'M', 'G', 'GG', 'XG', 'G1', 'G2', 'G3', 'G4', 'G5'];
|
||||
const sizeSet = new Set(sizeOrder);
|
||||
const knownColors = [
|
||||
'BRANCO + PRETO',
|
||||
'CINZA/PRETO',
|
||||
'VERDE BANDEIRA',
|
||||
'VERDE MILITAR',
|
||||
'AZUL MARINHO',
|
||||
'CINZA GRAFITE',
|
||||
'AMARELO',
|
||||
'BRANCO',
|
||||
'GRAFITE',
|
||||
'MARINHO',
|
||||
'VERMELHO',
|
||||
'BORDO',
|
||||
'CAFE',
|
||||
'CAQUI',
|
||||
'CHUMBO',
|
||||
'CINZA',
|
||||
'MARROM',
|
||||
'PEROLA',
|
||||
'PRETO',
|
||||
'ROYAL',
|
||||
'ROSA',
|
||||
'ROXO',
|
||||
'VERDE',
|
||||
'AZUL',
|
||||
'BEGE'
|
||||
].sort((a, b) => b.length - a.length);
|
||||
|
||||
export const normalizeProductText = (value: string) => value.replace(/\s+/g, ' ').trim();
|
||||
|
||||
const normalizeForMatch = (value: string) => normalizeProductText(value)
|
||||
.normalize('NFD')
|
||||
.replace(/\p{Diacritic}/gu, '')
|
||||
.toUpperCase();
|
||||
|
||||
const escapeRegex = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
|
||||
const toFlexiblePattern = (value: string) => escapeRegex(value).replace(/\s+/g, '\\s+');
|
||||
|
||||
const findLeadingColor = (value: string) => {
|
||||
const normalizedValue = normalizeForMatch(value);
|
||||
return knownColors.find(color => normalizedValue === color || normalizedValue.startsWith(`${color} `)) || '';
|
||||
};
|
||||
|
||||
const findTrailingColor = (value: string) => {
|
||||
const normalizedValue = normalizeForMatch(value);
|
||||
return knownColors.find(color => normalizedValue === color || normalizedValue.endsWith(` ${color}`) || normalizedValue.endsWith(`- ${color}`)) || '';
|
||||
};
|
||||
|
||||
export const encodeProductGroupKey = (value: string) => {
|
||||
const normalizedValue = normalizeProductText(value);
|
||||
const bytes = new TextEncoder().encode(normalizedValue);
|
||||
const binary = Array.from(bytes, byte => String.fromCharCode(byte)).join('');
|
||||
|
||||
return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
|
||||
};
|
||||
|
||||
export const decodeProductGroupKey = (value: string) => {
|
||||
const base64 = value.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const paddedBase64 = base64.padEnd(Math.ceil(base64.length / 4) * 4, '=');
|
||||
const binary = atob(paddedBase64);
|
||||
const bytes = Uint8Array.from(binary, character => character.charCodeAt(0));
|
||||
|
||||
return normalizeProductText(new TextDecoder().decode(bytes));
|
||||
};
|
||||
|
||||
export const sortProductSizes = (sizes: string[]) => [...sizes].sort((a, b) => {
|
||||
const indexA = sizeOrder.indexOf(a);
|
||||
const indexB = sizeOrder.indexOf(b);
|
||||
if (indexA !== -1 || indexB !== -1) {
|
||||
return (indexA === -1 ? Number.MAX_SAFE_INTEGER : indexA) - (indexB === -1 ? Number.MAX_SAFE_INTEGER : indexB);
|
||||
}
|
||||
return a.localeCompare(b, 'pt-BR');
|
||||
});
|
||||
|
||||
export const parseProductName = (name: string) => {
|
||||
const cleanName = normalizeProductText(name);
|
||||
const explicitSizeMatch = cleanName.match(/\bTAMANHO\s*-?\s*([A-Z0-9]+)\b/i);
|
||||
const trailingTokenMatch = cleanName.match(/(?:\s+-\s+|\s)([A-Z0-9]+)$/i);
|
||||
const trailingToken = trailingTokenMatch?.[1]?.toUpperCase() || '';
|
||||
let size = (explicitSizeMatch?.[1] || (sizeSet.has(trailingToken) ? trailingToken : '')).toUpperCase();
|
||||
|
||||
const colorMatch = cleanName.match(/\bCOR\s+(.+?)(?:\s+TAMANHO|\s+-\s+[A-Z0-9]+$|$)/i);
|
||||
let color = normalizeProductText(findLeadingColor(colorMatch?.[1] || '') || colorMatch?.[1] || '');
|
||||
|
||||
if (!color && size) {
|
||||
const nameBeforeSize = cleanName.replace(new RegExp(`(?:\\s+-\\s+|\\s)${escapeRegex(size)}$`, 'i'), '');
|
||||
color = findTrailingColor(nameBeforeSize);
|
||||
}
|
||||
|
||||
if (!color) {
|
||||
const trailingColor = findTrailingColor(cleanName);
|
||||
if (trailingColor) {
|
||||
const normalizedName = normalizeForMatch(cleanName);
|
||||
const normalizedPrefix = normalizeProductText(normalizedName.replace(new RegExp(`${escapeRegex(trailingColor)}$`), ''));
|
||||
const tokenBeforeColor = normalizedPrefix.match(/([A-Z0-9]+)$/)?.[1] || '';
|
||||
if (sizeSet.has(tokenBeforeColor)) {
|
||||
color = trailingColor;
|
||||
size = tokenBeforeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let baseName = cleanName
|
||||
.replace(/\bCOR\s+.+?(?:\s+TAMANHO\s*-?\s*[A-Z0-9]+|\s+-\s+[A-Z0-9]+$|$)/i, '')
|
||||
.replace(/\bTAMANHO\s*-?\s*[A-Z0-9]+\b/i, '')
|
||||
.replace(/\s+-\s*[A-Z0-9]+$/i, '');
|
||||
|
||||
if (color && size) {
|
||||
const colorPattern = toFlexiblePattern(color);
|
||||
const sizePattern = escapeRegex(size);
|
||||
baseName = baseName
|
||||
.replace(new RegExp(`\\s+-\\s*${colorPattern}\\s+${sizePattern}$`, 'i'), '')
|
||||
.replace(new RegExp(`\\s+${colorPattern}\\s+-\\s*${sizePattern}$`, 'i'), '')
|
||||
.replace(new RegExp(`\\s+${sizePattern}\\s+${colorPattern}$`, 'i'), '')
|
||||
.replace(new RegExp(`\\s+${colorPattern}\\s+${sizePattern}$`, 'i'), '');
|
||||
}
|
||||
|
||||
if (color) {
|
||||
const colorPattern = toFlexiblePattern(color);
|
||||
baseName = baseName
|
||||
.replace(new RegExp(`\\s+-\\s*${colorPattern}$`, 'i'), '')
|
||||
.replace(new RegExp(`\\s+${colorPattern}$`, 'i'), '');
|
||||
}
|
||||
|
||||
baseName = normalizeProductText(baseName.replace(/\s+-\s*$/g, ''));
|
||||
|
||||
return {
|
||||
baseName: baseName || cleanName,
|
||||
color,
|
||||
size
|
||||
};
|
||||
};
|
||||
673
src/types.ts
673
src/types.ts
@@ -1,5 +1,3 @@
|
||||
import type { ProductTypeKey } from './productClassification';
|
||||
|
||||
export interface OrderData {
|
||||
Nome_Cliente: string;
|
||||
Data_Pedido: string;
|
||||
@@ -11,680 +9,9 @@ export interface OrderData {
|
||||
Recebido_Em?: string;
|
||||
ID_Pedido?: string;
|
||||
Fone_Cliente?: string;
|
||||
cliente_nome_fantasia?: string;
|
||||
id_vendedor?: string;
|
||||
nome_vendedor?: string;
|
||||
marketplace?: string;
|
||||
canal_venda?: string;
|
||||
numero_ecommerce?: string;
|
||||
}
|
||||
|
||||
export interface StockData {
|
||||
produto_id: string;
|
||||
nome: string;
|
||||
saldo: number;
|
||||
delta_estoque: number;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
export type ProductionOrderStatus = 'open' | 'in_progress' | 'finished' | 'canceled' | string;
|
||||
|
||||
export interface ProductionOrderMarker {
|
||||
label: string;
|
||||
color?: string | null;
|
||||
}
|
||||
|
||||
export interface ProductionOrderComponent {
|
||||
id: number;
|
||||
componentTinyId: string;
|
||||
componentSku: string;
|
||||
componentName: string;
|
||||
quantityPerUnit: number;
|
||||
totalQuantity: number;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
export interface ProductionOrderStep {
|
||||
id: number;
|
||||
stepNumber: number | null;
|
||||
name: string;
|
||||
startDate: string | null;
|
||||
endDate: string | null;
|
||||
status: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface ProductionOrderItem {
|
||||
id: number;
|
||||
tinyId: string;
|
||||
number: string;
|
||||
status: ProductionOrderStatus;
|
||||
statusLabel: string;
|
||||
orderReference: string;
|
||||
issueDate: string | null;
|
||||
expectedDate: string | null;
|
||||
productSku: string;
|
||||
productDescription: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
integrationStatus: string;
|
||||
notes: string;
|
||||
supplier: string;
|
||||
lotCode: string;
|
||||
rollQuantity: number | null;
|
||||
fabricKg: number | null;
|
||||
ribKg: number | null;
|
||||
yieldPiecesPerKg: number | null;
|
||||
markers: ProductionOrderMarker[];
|
||||
components: ProductionOrderComponent[];
|
||||
steps: ProductionOrderStep[];
|
||||
createdAt: string | null;
|
||||
updatedAt: string | null;
|
||||
}
|
||||
|
||||
export interface ProductionOrderCounts {
|
||||
all: number;
|
||||
open: number;
|
||||
in_progress: number;
|
||||
finished: number;
|
||||
canceled: number;
|
||||
[key: string]: number;
|
||||
}
|
||||
|
||||
export interface ProductionOrderSummary {
|
||||
orders: ProductionOrderItem[];
|
||||
counts: ProductionOrderCounts;
|
||||
}
|
||||
|
||||
export type ProductionOrderMarkerPayload = {
|
||||
label: string;
|
||||
color?: string | null;
|
||||
};
|
||||
|
||||
export type ProductionOrderPayload = {
|
||||
number?: string;
|
||||
status?: ProductionOrderStatus;
|
||||
orderReference?: string;
|
||||
issueDate?: string | null;
|
||||
expectedDate?: string | null;
|
||||
productSku?: string;
|
||||
productDescription: string;
|
||||
quantity: number;
|
||||
unit?: string;
|
||||
integrationStatus?: string;
|
||||
markers?: ProductionOrderMarkerPayload[];
|
||||
metadata?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export interface CreateProductionOrdersResult {
|
||||
created: ProductionOrderItem[];
|
||||
skipped: Array<{
|
||||
productSku?: string;
|
||||
productDescription?: string;
|
||||
reason: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export type CutFamilyKey = 'BLCS' | 'BLOS' | 'BLMC' | 'BLPM' | 'OUTROS';
|
||||
|
||||
export interface CutProductOverride {
|
||||
familyKey?: CutFamilyKey | '';
|
||||
color?: string;
|
||||
size?: string;
|
||||
productType?: ProductTypeKey | '';
|
||||
planningNotes?: string;
|
||||
}
|
||||
|
||||
export interface CuttingSettings {
|
||||
familyYields: Partial<Record<CutFamilyKey, number>>;
|
||||
productOverrides: Record<string, CutProductOverride>;
|
||||
}
|
||||
|
||||
export type CatalogProductType = 'finished_product' | 'raw_material';
|
||||
|
||||
export interface CatalogCategory {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface CatalogProduct {
|
||||
id: number;
|
||||
type: CatalogProductType;
|
||||
sku: string;
|
||||
name: string;
|
||||
categoryId: number | null;
|
||||
categoryName: string;
|
||||
composition: string;
|
||||
notes: string;
|
||||
gramature: number | null;
|
||||
materialYield: number | null;
|
||||
widthCm: number | null;
|
||||
color: string;
|
||||
subcategory: string;
|
||||
sizes: string[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ConsumptionReference {
|
||||
id: number;
|
||||
productId: number;
|
||||
productSku: string;
|
||||
productName: string;
|
||||
materialProductId: number | null;
|
||||
materialSku: string;
|
||||
materialName: string;
|
||||
color: string;
|
||||
generalYield: number | null;
|
||||
sizeYields: Record<string, number>;
|
||||
sizeAreas: Record<string, number>;
|
||||
gramature: number | null;
|
||||
efficiencyPercent: number | null;
|
||||
ribGPerPiece: number | null;
|
||||
materialCostPerKg: number | null;
|
||||
consumptionQuantity: number | null;
|
||||
consumptionUnit: string;
|
||||
source: string;
|
||||
lastProductionOrderId: number | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface CatalogSummary {
|
||||
categories: CatalogCategory[];
|
||||
products: CatalogProduct[];
|
||||
consumptionReferences: ConsumptionReference[];
|
||||
}
|
||||
|
||||
export type CatalogCategoryPayload = {
|
||||
name: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export type CatalogProductPayload = {
|
||||
type: CatalogProductType;
|
||||
sku: string;
|
||||
name: string;
|
||||
categoryId?: number | null;
|
||||
composition?: string;
|
||||
notes?: string;
|
||||
gramature?: number | string | null;
|
||||
materialYield?: number | string | null;
|
||||
widthCm?: number | string | null;
|
||||
color?: string;
|
||||
subcategory?: string;
|
||||
sizes?: string[];
|
||||
};
|
||||
|
||||
export type ConsumptionReferencePayload = {
|
||||
productId: number | string;
|
||||
materialProductId?: number | string | null;
|
||||
color?: string;
|
||||
generalYield?: number | string | null;
|
||||
sizeYields?: Record<string, number | string>;
|
||||
sizeAreas?: Record<string, number | string>;
|
||||
gramature?: number | string | null;
|
||||
efficiencyPercent?: number | string | null;
|
||||
ribGPerPiece?: number | string | null;
|
||||
materialCostPerKg?: number | string | null;
|
||||
consumptionQuantity?: number | string | null;
|
||||
consumptionUnit?: string | null;
|
||||
};
|
||||
|
||||
export type SupplyReceiptStatus = 'pending' | 'approved';
|
||||
|
||||
export interface SupplyReceipt {
|
||||
id: number;
|
||||
category: string;
|
||||
product: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
supplier: string;
|
||||
invoice: string;
|
||||
notes: string;
|
||||
status: SupplyReceiptStatus;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
approvedAt: string | null;
|
||||
}
|
||||
|
||||
export interface SupplyLot {
|
||||
id: number;
|
||||
receiptId: number | null;
|
||||
category: string;
|
||||
product: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
supplier: string;
|
||||
invoice: string;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface SupplyMovement {
|
||||
id: number;
|
||||
receiptId: number | null;
|
||||
lotId: number | null;
|
||||
type: string;
|
||||
category: string;
|
||||
product: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
reason: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface SupplyFabricPlan {
|
||||
id: number;
|
||||
material: string;
|
||||
color: string;
|
||||
quantityKg: number;
|
||||
supplier: string;
|
||||
priority: string;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface SupplyPurchaseNeed {
|
||||
material: string;
|
||||
plannedKg: number;
|
||||
stockKg: number;
|
||||
pendingKg: number;
|
||||
purchaseKg: number;
|
||||
priority: string;
|
||||
status: 'critical' | 'attention' | 'ok';
|
||||
suppliers: string[];
|
||||
colors: string[];
|
||||
unit?: string;
|
||||
source?: string;
|
||||
missingReference?: boolean;
|
||||
products?: Array<{
|
||||
productId: string;
|
||||
name: string;
|
||||
suggestedQuantity: number;
|
||||
quantitySold: number;
|
||||
stockQuantity: number;
|
||||
yieldPerKg?: number;
|
||||
consumptionQuantity?: number;
|
||||
consumptionUnit?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface SupplyStats {
|
||||
totalQuantityKg: number;
|
||||
activeLots: number;
|
||||
rolls: number;
|
||||
alerts: number;
|
||||
pendingReceipts: number;
|
||||
approvedReceipts: number;
|
||||
}
|
||||
|
||||
export interface SupplySummary {
|
||||
receipts: SupplyReceipt[];
|
||||
lots: SupplyLot[];
|
||||
movements: SupplyMovement[];
|
||||
fabricPlans: SupplyFabricPlan[];
|
||||
purchaseNeeds: SupplyPurchaseNeed[];
|
||||
stats: SupplyStats;
|
||||
}
|
||||
|
||||
export type SupplyReceiptPayload = {
|
||||
category: string;
|
||||
product: string;
|
||||
quantity: number | string;
|
||||
unit: string;
|
||||
supplier?: string;
|
||||
invoice?: string;
|
||||
notes?: string;
|
||||
};
|
||||
|
||||
export type SupplyFabricPlanPayload = {
|
||||
material: string;
|
||||
color?: string;
|
||||
quantityKg: number | string;
|
||||
supplier?: string;
|
||||
priority?: string;
|
||||
};
|
||||
|
||||
export type SupplyInventoryAdjustmentPayload = {
|
||||
countedQuantity: number | string;
|
||||
reason: string;
|
||||
};
|
||||
|
||||
export type SupplyProductionExitPayload = {
|
||||
quantity: number | string;
|
||||
productionOrderNumber?: string;
|
||||
reason?: string;
|
||||
};
|
||||
|
||||
export interface DateRange {
|
||||
start: Date;
|
||||
end: Date;
|
||||
}
|
||||
|
||||
export type AuthRole = 'super_admin' | 'user';
|
||||
|
||||
export interface AuthUser {
|
||||
id: number | null;
|
||||
name: string;
|
||||
email: string;
|
||||
role: AuthRole;
|
||||
}
|
||||
|
||||
export interface ManagedUser {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface CreateUserResult {
|
||||
user: ManagedUser;
|
||||
temporaryPassword?: string;
|
||||
}
|
||||
|
||||
export interface DashboardAnalytics {
|
||||
totalRevenue: number;
|
||||
totalOrders: number;
|
||||
orderLineCount?: number;
|
||||
averageOrderValue: number;
|
||||
salesByProduct: Array<{
|
||||
name: string;
|
||||
id: string;
|
||||
value: number;
|
||||
}>;
|
||||
revenueByProduct: Array<{
|
||||
name: string;
|
||||
id: string;
|
||||
value: number;
|
||||
}>;
|
||||
revenueBySeller?: Array<{
|
||||
name: string;
|
||||
id: string;
|
||||
value: number;
|
||||
}>;
|
||||
ordersBySeller?: Array<{
|
||||
name: string;
|
||||
id: string;
|
||||
value: number;
|
||||
}>;
|
||||
sellerRevenueByDate?: Array<{
|
||||
name: string;
|
||||
id: string;
|
||||
date: string;
|
||||
value: number;
|
||||
orders?: number;
|
||||
}>;
|
||||
sellerRevenueByHour?: Array<{
|
||||
name: string;
|
||||
id: string;
|
||||
hour: number;
|
||||
value: number;
|
||||
orders?: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface ProductAnalyticsItem {
|
||||
id: string;
|
||||
name: string;
|
||||
quantitySold: number;
|
||||
revenue: number;
|
||||
orderLineCount: number;
|
||||
lastPrice: number;
|
||||
stock: number;
|
||||
firstSaleDate: string | null;
|
||||
lastSaleDate: string | null;
|
||||
}
|
||||
|
||||
export interface ProductDetailsAnalytics {
|
||||
range: {
|
||||
start: string | null;
|
||||
end: string | null;
|
||||
};
|
||||
productInfo: {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
stock: number;
|
||||
};
|
||||
chartData: Array<{
|
||||
date: string;
|
||||
value: number;
|
||||
quantitySold?: number;
|
||||
revenue?: number;
|
||||
orderCount?: number;
|
||||
averageTicket?: number;
|
||||
}>;
|
||||
totalSold: number;
|
||||
totalRevenue: number;
|
||||
totalOrders?: number;
|
||||
averageTicket?: number;
|
||||
variantBreakdown?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
quantitySold: number;
|
||||
revenue: number;
|
||||
orderCount: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface ProductCompositionComponent {
|
||||
id: number;
|
||||
componentTinyId: string;
|
||||
componentSku: string;
|
||||
componentName: string;
|
||||
quantityPerUnit: number;
|
||||
unit: string;
|
||||
productId: string | null;
|
||||
}
|
||||
|
||||
export interface ProductComposition {
|
||||
id: number;
|
||||
source: string;
|
||||
externalSourceId: string;
|
||||
finishedProductSku: string;
|
||||
finishedProductDescription: string;
|
||||
finishedProductUnit: string;
|
||||
finishedTinyProductId: string;
|
||||
sourceMetadata: Record<string, unknown>;
|
||||
lastSyncedAt: string | null;
|
||||
components: ProductCompositionComponent[];
|
||||
}
|
||||
|
||||
export interface ClientAnalyticsItem {
|
||||
customerKey: string;
|
||||
clientToken: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
quantityPurchased: number;
|
||||
totalSpent: number;
|
||||
orderCount: number;
|
||||
lastPurchaseDate: string;
|
||||
}
|
||||
|
||||
export interface ClientMetadataFilters {
|
||||
marketplace: string;
|
||||
canal_venda: string;
|
||||
seller: string;
|
||||
}
|
||||
|
||||
export interface ClientSellerFilterOption {
|
||||
value: string;
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface ClientFilterOptions {
|
||||
marketplaces: string[];
|
||||
salesChannels: string[];
|
||||
sellers: ClientSellerFilterOption[];
|
||||
}
|
||||
|
||||
export interface ClientPurchasePatternAnalytics {
|
||||
weekdayRangeLabel?: string;
|
||||
hourRangeLabel?: string;
|
||||
purchaseWeekdays: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
}>;
|
||||
purchaseHours: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface RfmClient {
|
||||
customerKey: string;
|
||||
clientToken: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
monetary: number;
|
||||
frequency: number;
|
||||
quantityPurchased: number;
|
||||
lastPurchaseDate: string;
|
||||
recencyDays: number;
|
||||
recencyScore: 1 | 2 | 3;
|
||||
frequencyScore: 1 | 2 | 3;
|
||||
monetaryScore: 1 | 2 | 3;
|
||||
valueScore: 1 | 2 | 3;
|
||||
rfmScore: string;
|
||||
segmentKey: string;
|
||||
segmentLabel: string;
|
||||
}
|
||||
|
||||
export interface RfmSegment {
|
||||
key: string;
|
||||
label: string;
|
||||
count: number;
|
||||
totalRevenue: number;
|
||||
averageRevenue: number;
|
||||
}
|
||||
|
||||
export interface RfmAnalytics {
|
||||
range: {
|
||||
start: string | null;
|
||||
end: string | null;
|
||||
};
|
||||
clients: RfmClient[];
|
||||
segments: RfmSegment[];
|
||||
matrix: {
|
||||
recencyScores: number[];
|
||||
valueScores: number[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface GroupedClientOrder {
|
||||
date: string;
|
||||
orderId: string;
|
||||
orderTotal: number;
|
||||
items: OrderData[];
|
||||
}
|
||||
|
||||
export interface ClientDetailsAnalytics {
|
||||
range: {
|
||||
start: string | null;
|
||||
end: string | null;
|
||||
};
|
||||
clientToken: string;
|
||||
chartData: Array<{
|
||||
date: string;
|
||||
value: number;
|
||||
}>;
|
||||
purchaseWeekdays?: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
}>;
|
||||
purchaseHours?: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
}>;
|
||||
purchaseWeekdayRangeLabel?: string;
|
||||
purchaseHourRangeLabel?: string;
|
||||
groupedOrders: GroupedClientOrder[];
|
||||
allTimeOrderCount: number;
|
||||
clientName: string;
|
||||
clientPhone: string;
|
||||
hasClient: boolean;
|
||||
periodAverageTicket: number;
|
||||
periodOrderCount: number;
|
||||
periodSpent: number;
|
||||
periodItems: number;
|
||||
}
|
||||
|
||||
export type CampaignStatus = 'pending' | 'processing' | 'sent' | 'failed' | 'skipped';
|
||||
|
||||
export interface CampaignQueueItem {
|
||||
id: number;
|
||||
base_product_name: string;
|
||||
produto_id: string;
|
||||
nome: string;
|
||||
saldo: number;
|
||||
delta_estoque: number;
|
||||
status: CampaignStatus;
|
||||
attempts: number;
|
||||
last_error?: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
sent_at?: string | null;
|
||||
}
|
||||
|
||||
export interface CampaignGroup {
|
||||
key: string;
|
||||
baseProductName: string;
|
||||
status: CampaignStatus;
|
||||
totalDelta: number;
|
||||
rowCount: number;
|
||||
attempts: number;
|
||||
lastError?: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
sentAt?: string | null;
|
||||
items: CampaignQueueItem[];
|
||||
}
|
||||
|
||||
export interface CampaignQueueSummary {
|
||||
threshold: number;
|
||||
maxAttempts: number;
|
||||
groups: CampaignGroup[];
|
||||
rows: CampaignQueueItem[];
|
||||
}
|
||||
|
||||
export interface CampaignProductPreview {
|
||||
baseProduct: string;
|
||||
total_delta: number;
|
||||
sizes: Array<{
|
||||
id: string;
|
||||
nome: string;
|
||||
delta: number;
|
||||
saldo: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface CampaignPreview {
|
||||
threshold: number;
|
||||
readyProducts: CampaignProductPreview[];
|
||||
belowThresholdProducts: CampaignProductPreview[];
|
||||
productsText: string;
|
||||
customerCount: number;
|
||||
customersPreview: Array<{
|
||||
nome: string;
|
||||
fone: string;
|
||||
total_gasto?: string;
|
||||
total_comprado?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface CampaignProcessSummary {
|
||||
claimed: number;
|
||||
sentGroups: number;
|
||||
skippedGroups: number;
|
||||
failedGroups: number;
|
||||
pendingBelowThresholdGroups: number;
|
||||
}
|
||||
|
||||
9
src/vite-env.d.ts
vendored
9
src/vite-env.d.ts
vendored
@@ -1,9 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL?: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user