topaz-app

As a Supplier/any user I want to view and update my profile details on the Profile page. Implement the Profile page based on the existing JSX design (v1). Includes profile hero with avatar, editable personal info form, account settings toggles, notification preferences, activity log timeline, and security section (change password, active sessions, data export). Navigated to from sidebar/nav. Mobile-first responsive layout with collapsible sidebar nav.

As a user I want to sign in to topaz-app from the Login page. Implement the Login page based on the existing JSX design (v2). Includes email/password form, remember-me checkbox, forgot password link, accent-gradient CTA button, and optional OAuth buttons. Entry point for Admin, Factory Manager, Quality Inspector, and Supplier flows. Links to Signup page. Mobile-first responsive layout.

As a user I want to view a system/production overview on the Dashboard page. Implement the Dashboard page based on the existing JSX design (v1). Includes system health metrics (Admin), production overview (Factory Manager), batch view (Quality Inspector), with KPI cards, charts, and quick-action buttons. Links to Inventory, Production, Workers, Users, Settings, and Reports pages. Sidebar navigation, responsive collapse on mobile.

As a user I want to view the garment catalog and navigate to login or signup from the Landing page. Implement the Landing page based on the existing JSX design (v2). Includes hero section with 3D factory floor visualization concept, product catalog view, navigation to Login and Signup, topaz orange accent highlights, and responsive layout. This is the entry point for the Customer user flow.

As a user I want to create a new account from the Signup page. Implement the Signup page based on the existing JSX design (v1). Includes registration form (name, email, password, role selection), validation, accent-gradient CTA button, and link back to Login. Entry point for Customer user flow from Landing. Mobile-first responsive layout.

As a Factory Manager I want to use backend APIs for real-time inventory tracking. Implement FastAPI endpoints: GET /inventory (list with filters), POST /inventory (add item), PUT /inventory/{id} (update), DELETE /inventory/{id}, GET /inventory/low-stock alerts. Include MySQL models with Alembic migrations. Supports real-time stock level queries.

As an Admin I want to use backend APIs for managing user roles and permissions. Implement FastAPI endpoints: GET /users, POST /users/invite, PUT /users/{id}/role, PUT /users/{id}/permissions, DELETE /users/{id}, GET /roles, POST /roles, PUT /roles/{id}/permissions. MySQL models with RBAC support.

As a Quality Inspector I want to select batches and log quality checks on the Quality Control page. Implement the Quality Control page based on the existing JSX design (v1). Includes batch selection list, QC log form (pass/fail/notes per batch), status badges, history view, and link to Reports. Navigated to from Dashboard. Mobile-first responsive layout.

As a Factory Manager I want to schedule and manage production workflows on the Production page. Implement the Production page based on the existing JSX design (v1). Includes production schedule timeline/calendar, workflow cards, deadline indicators, status badges (accent for active), and links to Workers task assignment. Navigated to from Dashboard. Mobile-first responsive layout.

As a Factory Manager I want to track real-time stock levels on the Inventory page. Implement the Inventory page based on the existing JSX design (v1). Includes stock table with search/filter, real-time level indicators, low-stock alerts (accent color), add/edit/delete stock actions, and export options. Navigated to from Dashboard. Mobile-first responsive table/card layout.

As a Customer/Supplier I want to place, track, confirm, and submit feedback on orders from the Orders page. Implement the Orders page based on the existing JSX design (v1). Includes order list (filterable by status), place-order form, order status tracker (step indicator), feedback submission, and supplier purchase order confirmation view. Navigated to from Dashboard and Landing. Mobile-first responsive layout.

As a Customer/Supplier I want to use backend APIs for placing, confirming, and tracking orders. Implement FastAPI endpoints: GET /orders, POST /orders (place order), PUT /orders/{id}/confirm (supplier), GET /orders/{id}/status, POST /orders/{id}/feedback, GET /orders/purchase-orders (supplier view). MySQL models. INR currency, IST timestamps.

As an Admin/Quality Inspector I want to view analytics and QC history reports on the Reports page. Implement the Reports page based on the existing JSX design (v1). Includes production efficiency charts, inventory usage graphs, QC history log, exportable report tables, and date-range filters. Navigated to from Dashboard. Mobile-first responsive layout.

As an Admin I want to use backend APIs for system configuration management. Implement FastAPI endpoints: GET /settings, PUT /settings (bulk update), GET /settings/integrations, PUT /settings/integrations/{id}/toggle. Stores IST timezone, INR currency defaults, notification preferences, third-party logistics API configs in MySQL.

As an Admin I want to manage user roles and edit permissions on the Users page. Implement the Users page based on the existing JSX design (v1). Includes user list table with role badges, inline role editor, permission toggle panel, invite user form, and deactivate/delete actions. Navigated to from Dashboard. Mobile-first responsive layout.

As a user I want to use backend APIs to view and update my profile details. Implement FastAPI endpoints: GET /profile, PUT /profile (update personal info), PUT /profile/password, GET /profile/sessions, DELETE /profile/sessions/{id}, GET /profile/activity-log, POST /profile/export-data. MySQL models.

As a Factory Manager I want to use backend APIs for production workflow scheduling. Implement FastAPI endpoints: GET /production (workflows list), POST /production (create workflow), PUT /production/{id} (update/schedule), DELETE /production/{id}, GET /production/{id}/status. MySQL models with Alembic migrations. Supports deadline tracking and status updates.

As an Admin I want to configure system settings on the Settings page. Implement the Settings page based on the existing JSX design (v1). Includes system configuration forms (timezone IST, currency INR, notification preferences, integrations toggle), save/reset controls, and section navigation sidebar. Navigated to from Dashboard. Mobile-first responsive layout.

As a Factory Manager I want to use backend APIs for worker task assignments and progress monitoring. Implement FastAPI endpoints: GET /workers (list), POST /workers (add), PUT /workers/{id}/assign-task, GET /workers/{id}/progress, GET /workers/performance-metrics. MySQL models. Supports task assignment and real-time progress queries.

As a Supplier I want to use backend APIs for tracking payment statuses. Implement FastAPI endpoints: GET /payments (list with filters), GET /payments/{id}, PUT /payments/{id}/status, GET /payments/invoices/{id}/download. MySQL models. INR currency support, payment status states (paid/pending/overdue).

As a System I want to integrate with third-party logistics APIs for order tracking. Implement Langchain/LiteLLM-based integration layer in FastAPI: connect to logistics provider API, sync order tracking status, expose GET /logistics/{order_id}/tracking endpoint. Handle API failures gracefully with fallback status.

As a Factory Manager I want to assign tasks and monitor worker progress on the Workers page. Implement the Workers page based on the existing JSX design (v1). Includes worker list with role/status indicators, task assignment modal, progress tracking bars, performance metrics, and filter/search. Navigated to from Production page. Mobile-first responsive layout.

As a Supplier I want to track payment statuses on the Payments page. Implement the Payments page based on the existing JSX design (v1). Includes payment history table (INR currency), status badges (paid/pending/overdue with accent colors), invoice download, and filter by date/order. Navigated to from Orders page. Mobile-first responsive layout.

As a Quality Inspector I want to use backend APIs for logging and retrieving QC checks. Implement FastAPI endpoints: GET /quality-control/batches, POST /quality-control/log (log check with pass/fail/notes), GET /quality-control/history (with filters), GET /quality-control/{batch_id}. MySQL models with Alembic migrations.

As an Admin/Quality Inspector I want to use backend APIs for analytics and QC history reports. Implement FastAPI endpoints: GET /reports/production-efficiency, GET /reports/inventory-usage, GET /reports/qc-history, GET /reports/export (CSV/PDF). Aggregation queries on MySQL. Supports date-range filtering and IST timezone.

As a user I want all frontend pages to fetch and submit real data via backend APIs. Wire up all React pages (Inventory, Production, Workers, QC, Orders, Payments, Reports, Users, Settings, Profile) to their respective FastAPI endpoints using axios/fetch. Implement loading states, error handling, and toast notifications. Add JWT auth headers to all API calls.