mammoth-diagram

As a user, I want to use Arabic and English language switching on the frontend so that the application is accessible to all users in Qatar. Implement i18n using react-i18next with translation files for EN and AR. All UI strings, form labels, error messages, and navigation items must be translatable. RTL layout support for Arabic. Language toggle in Header persists preference to localStorage.

As a user, I want to use the frontend Login page so that I can sign in with my credentials and be redirected to the Dashboard. Implement based on the existing Login (v2) JSX design. The page should include email/password fields, form validation, error handling, and redirect logic post-login. Links to Dashboard on success.

As a user, I want to use the frontend Dashboard page so that I can view an overview of incidents, investigation progress, and compliance status based on my role (Admin/Manager/Auditor/Safety Officer). Implement based on the existing Dashboard (v1) JSX design. The page shows overview stats, recent activity, and role-specific widgets. Navigates to Flowchart, Incidents, Tasks, and Investigation pages.

As a Safety Officer, I want to use the frontend Root Cause page so that I can document root cause analysis findings using a fishbone diagram and categorized cause checklist. Implement based on existing Root Cause (v1) JSX design. Includes zoomable fishbone SVG diagram, timeline of events, editable root cause categories (equipment failure, human error, process gap, environmental), and findings textarea. Navigates from Incident Report and links to Corrective Actions.

As a user, I want to use the frontend Investigation page so that I can monitor investigation status, attach evidence, and track progress for each incident. Implement based on existing Investigation (v1) JSX design. Includes investigation timeline, evidence upload section, assigned investigator details, and status updates. Used by Safety Officer and Assembly Line Manager. Links from Tasks and to Corrective Actions.

As a user, I want to use the frontend Incidents page so that I can review, audit, and manage incident reports submitted by Safety Officers. Implement based on existing Incidents (v1) JSX design. Includes incidents list/table with severity badges, status filters, search, and links to individual Incident Report and Investigation pages. Used by Assembly Line Manager and Auditor roles.

As a user, I want to use the frontend Export page so that I can download and publish the incident investigation flowchart in PDF, SVG, and PNG formats. Implement based on existing Export (v1) JSX design. Page shows export format options, preview thumbnail, download buttons, and publish/share controls. Accessible by Admin and Auditor roles. Navigates from Users and Incidents.

As a user, I want to use the frontend Flowchart page so that I can view, edit nodes, and interact with the blueprint-style incident investigation flowchart. Implement based on existing Flowchart (v1) JSX design. Must support zoomable sections, editable nodes with modal, pencil-sketch hover animations, and color transitions from muted blue to vivid red. Admins edit nodes; Auditors review. Links to Standards and Export pages.

As an Admin, I want to use the frontend Users page so that I can manage user roles, permissions, and access levels for Safety Officers, Assembly Line Managers, Auditors, and Admins. Implement based on existing Users (v1) JSX design. Includes user table with role badges, status, last login, and actions (edit/suspend/delete), filter/search bar, stats overview, bulk actions, and pagination. Navigates from Standards, links to Export.

As a user, I want to use the frontend Corrective Actions page so that I can recommend, approve, and track corrective measures to prevent incident recurrence. Implement based on existing Corrective Actions (v1) JSX design. Includes action list with status badges, priority levels, assignee dropdowns, due dates, and approval workflow. Used by Safety Officer and Assembly Line Manager. Navigates from Investigation.

As a Safety Officer, I want to use the frontend Incident Report page so that I can submit a structured incident report with all required details, evidence, and initial findings. Implement based on existing Incident Report (v1) JSX design. Includes multi-step form with incident metadata, severity selector, investigation steps workflow, root cause checkboxes, evidence upload, corrective action entries, and submit/save-draft controls. Navigates from Dashboard Incidents view and links to Investigation.

As an Admin, I want to use the frontend Standards page so that I can update regulations and ensure the flowchart aligns with Qatar Standards (Act 108, Act 48, Act 115). Implement based on existing Standards (v1) JSX design. Page lists legal regulations with editable entries, compliance status badges, and links back to Flowchart and forward to Users.

As an Auditor, I want to use the frontend Compliance page so that I can generate compliance reports and verify alignment with Qatar Standards (Act 108, Act 48, Act 115). Implement based on existing Compliance (v1) JSX design. Includes compliance checklist, audit trail, report generation controls, and export to PDF. Navigates from Export page.

As an Assembly Line Manager, I want to use the frontend Tasks page so that I can assign and monitor corrective action tasks to team members. Implement based on existing Tasks (v1) JSX design. Includes task list with assignee, due date, priority, and status columns, plus filters and bulk assignment controls. Navigates from Incidents and links to Investigation.

As a user, I want to use the backend API for incident reports so that I can submit, retrieve, update, and list incident records. FastAPI endpoints: GET /incidents, POST /incidents, GET /incidents/{id}, PUT /incidents/{id}. Includes severity, status, reporter, date/time, location, and description fields. Supports filtering by role, severity, and status.

As an Admin, I want to use the backend API for standards management so that I can add, update, and retrieve Qatar Standards and legal regulation entries (Act 108, Act 48, Act 115). FastAPI endpoints: GET /standards, POST /standards, PUT /standards/{id}, DELETE /standards/{id}. Includes act number, title, description, and compliance status.

As a user, I want to use an AI assistant powered by GPT so that I can get intelligent suggestions for incident descriptions, root cause categories, and corrective action recommendations. Implement Langchain-based FastAPI endpoint POST /ai/suggest with context-aware prompts. Frontend shows AI suggestion panel on Incident Report, Root Cause, and Corrective Actions pages.

As a user, I want to use the backend API for flowchart operations so that I can create, read, update, and delete flowchart nodes and edges stored in MySQL. FastAPI endpoints: GET /flowchart, POST /flowchart/node, PUT /flowchart/node/{id}, DELETE /flowchart/node/{id}. Supports role-based access (Admin edit, Auditor read-only). Returns structured JSON for frontend rendering.

As an Admin, I want to use the backend API for user management so that I can list, create, update roles, and suspend user accounts. FastAPI endpoints: GET /users, POST /users, PUT /users/{id}, PUT /users/{id}/role, DELETE /users/{id}. Supports role assignment (Safety Officer, Manager, Auditor, Admin), status toggling, and last login tracking.

As a user, I want to use the backend API for investigations so that I can create and update investigation records linked to incidents, including evidence attachments and status tracking. FastAPI endpoints: GET /investigations, POST /investigations, PUT /investigations/{id}, POST /investigations/{id}/evidence. Supports file upload to storage and metadata logging.

As a user, I want to use the backend API for flowchart export so that I can generate and download the incident investigation flowchart as PDF, SVG, or PNG. FastAPI endpoints: POST /export/pdf, POST /export/svg, POST /export/png. Uses server-side rendering to produce files from current flowchart state. Supports language selection (EN/AR) in output.

As a user, I want to use the backend API for root cause analysis so that I can save and retrieve root cause findings, categories, and fishbone diagram data linked to an investigation. FastAPI endpoints: GET /root-cause/{investigation_id}, POST /root-cause, PUT /root-cause/{id}. Supports cause categories, timeline events, and findings text.

As a user, I want to use the backend API for task management so that I can assign, update, and track investigation tasks for team members. FastAPI endpoints: GET /tasks, POST /tasks, PUT /tasks/{id}, DELETE /tasks/{id}. Supports assignee lookup, due dates, priority, status, and links to incident/investigation records.

As a user, I want to use the backend API for corrective actions so that I can create, assign, update, and approve corrective action records linked to investigations. FastAPI endpoints: GET /corrective-actions, POST /corrective-actions, PUT /corrective-actions/{id}, POST /corrective-actions/{id}/approve. Supports assignee, due date, priority, and status fields.

As a user, I want to use the backend API for dashboard metrics so that I can retrieve role-specific summary data including active incidents count, investigation status distribution, pending corrective actions, and compliance score. FastAPI endpoint: GET /dashboard/summary?role={role}. Aggregates across incidents, investigations, tasks, and standards tables.

As an Auditor, I want to use the backend API for compliance reporting so that I can generate compliance audit reports cross-referencing incidents, investigations, and Qatar Standards. FastAPI endpoints: GET /compliance/report, POST /compliance/report/generate. Aggregates data from incidents, corrective actions, and standards tables to produce structured compliance output.