# fauziiifau/qc-frontend architecture

> Architecture diagram of the GitHub repository fauziiifau/qc-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/fauziiifau/qc-frontend
- Repository: https://github.com/fauziiifau/qc-frontend

## Overview

This is a QC monitoring frontend for factory production, defect, and customer-complaint data. Users sign in, then use protected screens to enter records, maintain master data, and review dashboards or reports. The sampled production screen loads parts and machines before saving a batch; the dashboard requests production, defect, complaint, and insight data. Other page-to-service wiring is not shown in the excerpts, so those connections are omitted. The README is only the default Vite template and documents no additional product capabilities.

Main entry points: [`src/App.jsx`](https://github.com/fauziiifau/qc-frontend/blob/main/src/App.jsx) (App Routes), [`src/components/Layout.jsx`](https://github.com/fauziiifau/qc-frontend/blob/main/src/components/Layout.jsx) (App Shell), [`src/pages/InputProduction.jsx`](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/InputProduction.jsx) (Production Entry), [`src/pages/Dashboard.jsx`](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Dashboard.jsx) (Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and Shell"]
  node_app["App Routes<br/>[App.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_register["Register<br/>[Register.jsx]"]
  node_protected["Route Guard<br/>[ProtectedRoute.jsx]"]
  node_layout["App Shell<br/>[Layout.jsx]"]
  node_profile["Profile<br/>[Profile.jsx]"]
  node_theme["Theme State<br/>[ThemeContext.jsx]"]
end

subgraph group_operations["Quality Operations"]
  node_defect["Defect Entry<br/>[InputDefect.jsx]"]
  node_production["Production Entry"]
  node_complaint["Complaint Entry<br/>[InputComplaint.jsx]"]
  node_master["Master Data<br/>[MasterData.jsx]"]
end

subgraph group_insight["Analytics and Reports"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_reports["Reports<br/>[Reports.jsx]"]
end

subgraph group_services["Frontend Services"]
  node_authsvc["Authentication<br/>[authService.js]"]
  node_mastervc["Master Data API"]
  node_productionsvc["Production API"]
  node_defectsvc["Defect API<br/>[ngDataService.js]"]
  node_complaintsvc["Complaint API"]
  node_dashsvc["Dashboard API"]
  node_reportsvc["Report API<br/>[reportService.js]"]
end

node_user(("User"))
node_backend["QC Backend"]

node_user -->|"opens"| node_app
node_app -->|"routes"| node_login
node_app -->|"routes"| node_register
node_app -->|"guards"| node_protected
node_protected -->|"renders"| node_layout
node_layout -->|"navigates"| node_profile
node_layout -->|"uses"| node_theme
node_production -->|"loads parts and machines"| node_mastervc
node_production -->|"saves batch"| node_productionsvc
node_complaintsvc -->|"uploads photo"| node_defectsvc
node_dashboard -->|"loads summaries"| node_dashsvc
node_dashboard -->|"requests insights"| node_backend
node_authsvc -->|"authenticates"| node_backend
node_mastervc -->|"reads and writes"| node_backend
node_productionsvc -->|"saves production"| node_backend
node_defectsvc -->|"uploads and saves defects"| node_backend
node_complaintsvc -->|"saves complaints"| node_backend
node_dashsvc -->|"fetches analytics"| node_backend
node_reportsvc -->|"requests reports"| node_backend

click node_app "https://github.com/fauziiifau/qc-frontend/blob/main/src/App.jsx"
click node_login "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Login.jsx"
click node_register "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Register.jsx"
click node_protected "https://github.com/fauziiifau/qc-frontend/blob/main/src/components/ProtectedRoute.jsx"
click node_layout "https://github.com/fauziiifau/qc-frontend/blob/main/src/components/Layout.jsx"
click node_profile "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Profile.jsx"
click node_theme "https://github.com/fauziiifau/qc-frontend/blob/main/src/context/ThemeContext.jsx"
click node_defect "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/InputDefect.jsx"
click node_production "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/InputProduction.jsx"
click node_complaint "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/InputComplaint.jsx"
click node_master "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/MasterData.jsx"
click node_dashboard "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Dashboard.jsx"
click node_reports "https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Reports.jsx"
click node_authsvc "https://github.com/fauziiifau/qc-frontend/blob/main/src/services/authService.js"
click node_mastervc "https://github.com/fauziiifau/qc-frontend/blob/main/src/services/masterDataService.js"
click node_productionsvc "https://github.com/fauziiifau/qc-frontend/blob/main/src/services/productionService.js"
click node_defectsvc "https://github.com/fauziiifau/qc-frontend/blob/main/src/services/ngDataService.js"
click node_complaintsvc "https://github.com/fauziiifau/qc-frontend/blob/main/src/services/complaintService.js"
click node_dashsvc "https://github.com/fauziiifau/qc-frontend/blob/main/src/services/dashboardService.js"
click node_reportsvc "https://github.com/fauziiifau/qc-frontend/blob/main/src/services/reportService.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_login,node_register,node_protected,node_layout,node_profile,node_theme,node_user toneBlue
class node_defect,node_production,node_complaint,node_master toneAmber
class node_dashboard,node_reports toneMint
class node_authsvc,node_mastervc,node_productionsvc,node_defectsvc,node_complaintsvc,node_dashsvc,node_reportsvc toneRose
class node_backend toneIndigo
```

## Components

### Access and Shell

- [App Routes](https://github.com/fauziiifau/qc-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Login](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Register](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Register.jsx): `src/pages/Register.jsx`
- [Route Guard](https://github.com/fauziiifau/qc-frontend/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`
- [App Shell](https://github.com/fauziiifau/qc-frontend/blob/main/src/components/Layout.jsx): `src/components/Layout.jsx`
- [Profile](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Profile.jsx): `src/pages/Profile.jsx`
- [Theme State](https://github.com/fauziiifau/qc-frontend/blob/main/src/context/ThemeContext.jsx): `src/context/ThemeContext.jsx`

### Quality Operations

- [Defect Entry](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/InputDefect.jsx): `src/pages/InputDefect.jsx`
- [Production Entry](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/InputProduction.jsx): `src/pages/InputProduction.jsx`
- [Complaint Entry](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/InputComplaint.jsx): `src/pages/InputComplaint.jsx`
- [Master Data](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/MasterData.jsx): `src/pages/MasterData.jsx`

### Analytics and Reports

- [Dashboard](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Reports](https://github.com/fauziiifau/qc-frontend/blob/main/src/pages/Reports.jsx): `src/pages/Reports.jsx`

### Frontend Services

- [Authentication](https://github.com/fauziiifau/qc-frontend/blob/main/src/services/authService.js): `src/services/authService.js`
- [Master Data API](https://github.com/fauziiifau/qc-frontend/blob/main/src/services/masterDataService.js): `src/services/masterDataService.js`
- [Production API](https://github.com/fauziiifau/qc-frontend/blob/main/src/services/productionService.js): `src/services/productionService.js`
- [Defect API](https://github.com/fauziiifau/qc-frontend/blob/main/src/services/ngDataService.js): `src/services/ngDataService.js`
- [Complaint API](https://github.com/fauziiifau/qc-frontend/blob/main/src/services/complaintService.js): `src/services/complaintService.js`
- [Dashboard API](https://github.com/fauziiifau/qc-frontend/blob/main/src/services/dashboardService.js): `src/services/dashboardService.js`
- [Report API](https://github.com/fauziiifau/qc-frontend/blob/main/src/services/reportService.js): `src/services/reportService.js`

### Other components

- **User**
- **QC Backend**

## Connections

- User → App Routes: opens
- App Routes → Login: routes
- App Routes → Register: routes
- App Routes → Route Guard: guards
- Route Guard → App Shell: renders
- App Shell → Profile: navigates
- App Shell → Theme State: uses
- Production Entry → Master Data API: loads parts and machines
- Production Entry → Production API: saves batch
- Complaint API → Defect API: uploads photo
- Dashboard → Dashboard API: loads summaries
- Dashboard → QC Backend: requests insights
- Authentication → QC Backend: authenticates
- Master Data API → QC Backend: reads and writes
- Production API → QC Backend: saves production
- Defect API → QC Backend: uploads and saves defects
- Complaint API → QC Backend: saves complaints
- Dashboard API → QC Backend: fetches analytics
- Report API → QC Backend: requests reports