As a user, I want the scaffold project pages (home, login, signup, welcome, dashboard/overview, dashboard/ai-assistant, dashboard/settings) to look exactly identical to the mock-design pages. This task covers: applying the Dawn-Dashboard design tokens (primary blue #007BFF, green #28A745, yellow #FFC107, red #DC3545, grey #6C757D, white/light-grey backgrounds), setting up global CSS variables, Inter font family, reusable status badge components, and removing any pages not required by the user flows. This task must be completed independently before all other frontend tasks.
As a user, I want to view the main Dashboard page (entry point for all user flows) that shows a galaxy map hero section with all active projects as star nodes, high-level KPI stats (total projects, total documents, pending review, approved, returned), a project grid with health indicators, recent activity feed, document status chart, and quick actions. Implement based on the existing Dashboard (v2) JSX design. The page includes: GalaxyHero animated canvas star field, StatsOverview KPI cards, ProjectGrid with create/delete project functionality, ActivityFeed, DocumentStatusChart, QuickActions, TopBar with AST clock and user avatar, Sidebar navigation, and Footer.
As a user, I want backend API endpoints to create, read, update, and delete projects. Implement FastAPI endpoints: POST /projects (create with name), GET /projects (list all with summary stats), GET /projects/{id} (single project detail with document counts by status), DELETE /projects/{id} (with confirmation flag). Include MySQL models using Alembic migrations. Project model fields: id, name, created_at, updated_at, created_by.
As a user, I want to open a project-specific dashboard by clicking a project card or star on the galaxy map, and see dynamic charts tracking document statuses for that project (donut chart with Code A/B/C/Pending/Draft breakdown), plus a persistent tabbed navigation bar with Vendor Tab, GES Tab, Madina Tab, and QE-LNG Tab. Implement based on the existing Project Dashboard (v2) JSX design. The page should show project-level KPIs, document health visualization, and route to each role tab.
As a user, I want backend API endpoints to create, read, update, and delete documents within a project. Implement FastAPI endpoints: POST /projects/{id}/documents (create with title, doc_number, revision_number, category IFA/IFC, originator_role), GET /projects/{id}/documents (list with status filter), GET /documents/{id} (detail with audit trail), PATCH /documents/{id} (update status, routing), DELETE /documents/{id}. Document model: id, project_id, title, doc_number, revision_number, category, status, originator_role, current_tab, created_at, ai_summary.
As a user, I want the Dashboard page to fetch real project data from the backend API, display live KPI stats (total projects, documents, pending, approved), render the galaxy map with actual project nodes, and support create/delete project actions via the API. Connect the Dashboard (v2) frontend to GET /projects, POST /projects, DELETE /projects/{id} endpoints. Handle loading states, error states, and empty states.
As a user, I want to upload documents and commented files (max 50MB) securely. Implement POST /upload endpoint supporting PDF and image formats, with file size validation (50MB limit), temporary storage for AI processing (auto-delete after summary generation), and persistent storage for commented documents uploaded during Code B/C assignment. Integrate with FastAPI's file handling and ensure commented documents are accessible to all relevant parties (Madina, GES, Vendor).
As a GES user, I want to view my documents in the GES Tab, create new documents, upload and summarize them with AI, and send them to Madina. Implement based on the existing GES Tab (v2) JSX design. The tab mirrors the Vendor Tab structure: document list with status badges (Draft, Sent to Madina, Under Review with GES, etc.), 'Create New Document' button, AI upload & summarize feature, and 'Send to Madina' routing. Documents from the Madina Tab routed to GES also appear here.
As a Vendor or GES user, I want to upload a document (PDF or image, max 50MB) and receive an AI-generated summary highlighting completed/correct elements and mistakes/discrepancies. Implement POST /documents/{id}/summarize: accept file upload, route through Litellm to the appropriate AI model (GPT for user-friendly summary, Claude for technical accuracy), generate structured summary with two sections (Completed Elements, Discrepancies), save summary text to the document record, and automatically delete the source file from storage. Return the summary JSON.
As a system, I want role-based access control (RBAC) so that Vendors, GES, Madina, and QE-LNG users only see and perform actions appropriate to their role. Implement role assignment on user model (vendor, ges, madina, qelng), FastAPI dependency guards on all routing/document endpoints, and frontend role-aware UI rendering (show/hide action buttons based on logged-in role). Roles: Vendor sees Vendor Tab only; GES sees GES Tab; Madina sees all tabs with routing actions; QE-LNG sees QE-LNG Tab with code assignment.
As a QE-LNG user, I want to view submitted documents, assign approval codes (Code A = Accepted/IFC, Code B = Accepted with Comments, Code C = Revise & Resubmit), upload commented documents for Code B and C, and return documents to Madina. Implement based on the existing QE-LNG Tab (v2) JSX design. The tab includes: document list with code status badges, grading action buttons (A/B/C), mandatory commented document upload for B and C, 'Return to Madina' button, and status propagation back to Madina/GES/Vendor tabs.
As a Vendor, I want to view my submitted documents in the Vendor Tab, see their statuses (Draft, Sent to Madina - Under Review, Accepted, Revision Required), create new documents, and send documents to Madina. Implement based on the existing Vendor Tab (v2) JSX design. The tab includes: document list with color-coded status badges, 'Create New Document' button opening the Document Form, 'Send to Madina' action button, and document status transitions. Documents must remain visible in the Vendor Tab even after routing.
As a Madina user, I want to view all received documents in the Madina Tab inbox, review each document with a side-by-side PDF viewer and review checklist, and take routing actions: Send to GES, Send to QE-LNG, or Return for Revision (with next revision number input). Implement based on the existing Madina Tab (v2) JSX design. The page includes: MadinaStatsBar KPIs, DocumentInbox table with status filters, DocumentReviewPanel with inline PDF viewer and QA checklist, ActionBar with three routing buttons, AuditTrail timeline, RevisionRequestModal, and RoutingConfirmModal.
As a user, I want backend API endpoints to handle all document routing actions: Vendor/GES to Madina (POST /documents/{id}/send-to-madina), Madina to GES (POST /documents/{id}/route-to-ges), Madina to QE-LNG (POST /documents/{id}/route-to-qelng), Return for Revision (POST /documents/{id}/return-for-revision with next_revision_number body), QE-LNG Code assignment (POST /documents/{id}/assign-code with code A/B/C and optional commented file upload). Each endpoint must update document status, create an audit trail entry, and propagate status changes to all relevant tabs.
As a user, I want every document to have a full audit trail. Implement a document_history table and API: GET /documents/{id}/history returns all audit events with timestamp (AST UTC+3), actor user id and role, action type, from_tab, to_tab, revision_number_at_time, and notes. Audit entries are auto-created by routing API endpoints. Expose this via GET /documents/{id}/history. Ensure all timestamps default to Arabia Standard Time (UTC+3).
As a user, I want all four document tabs (Vendor, GES, Madina, QE-LNG) to fetch live document data and execute routing actions via backend APIs. Connect tab pages to document listing endpoints (GET /projects/{id}/documents?tab=vendor|ges|madina|qelng), routing action endpoints (send-to-madina, route-to-ges, route-to-qelng, return-for-revision, assign-code), and audit trail endpoint. Reflect real-time status changes in all tabs after routing. Handle upload for commented documents on Code B/C assignment.
As a Vendor or GES user, I want to fill in a document creation form with mandatory manual entry fields (Document Title, Document Number, Revision Number), a Category dropdown (IFA or IFC), and an AI-powered Upload & Summarize feature (max 50MB). Implement based on the existing Document Form (v2) JSX design. The form must enforce manual text entry (no auto-generation), call the AI summarize API on upload, display the generated summary highlighting completed elements and discrepancies, and auto-delete the source file after summary is saved.
As a Vendor or GES user, I want the Document Form page to call the AI summarize API when I upload a file, display a loading state during AI processing, render the structured summary (Completed Elements and Discrepancies sections) inline in the form, and confirm source file deletion after summary is saved. Connect Document Form (v2) frontend to POST /upload and POST /documents/{id}/summarize endpoints. Show progress indicator and handle errors gracefully.

No comments yet. Be the first!