# gustiagung1100-glitch/e-sppg-tmg2 architecture

> Architecture diagram of the GitHub repository gustiagung1100-glitch/e-sppg-tmg2, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gustiagung1100-glitch/e-sppg-tmg2
- Repository: https://github.com/gustiagung1100-glitch/e-sppg-tmg2

## Overview

E-SPPG TMG2 is a management system for an Indonesian nutrition-service unit supporting meal planning, procurement, kitchen operations, distribution, and administration. Users enter through authentication and role-based module access; the app then presents operational modules for managing data and producing reports. The source index documents many module-to-store and module-to-helper imports, but the excerpts do not expose all runtime calls, so several subsystems are shown without speculative connections.

Main entry points: [`src/App.tsx`](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/App.tsx) (Application Shell), [`src/lib/store.tsx`](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/store.tsx) (Application State), [`src/components/modules/NutritionMenuModule.tsx`](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/NutritionMenuModule.tsx) (Nutrition Menu), [`src/components/modules/ProcurementModule.tsx`](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/ProcurementModule.tsx) (Procurement & QC)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access & Navigation"]
  node_auth["Authentication<br/>[LoginPage.tsx]"]
  node_guard["Role Access Guard<br/>[AuthGuard.tsx]"]
  node_routes["Module Access Rules<br/>[routeGuard.ts]"]
  node_app["Application Shell<br/>[App.tsx]"]
end

subgraph group_planning["Planning &amp; Master Data"]
  node_master["Master Data"]
  node_nutrition["Nutrition Menu"]
  node_beneficiary["Beneficiary Nutrition"]
  node_institutions["Institutions"]
end

subgraph group_supply["Supply &amp; Operations"]
  node_procurement["Procurement &amp; QC"]
  node_supplier["Supplier Portal"]
  node_inventory["Inventory"]
  node_production["Production"]
end

subgraph group_delivery["Delivery &amp; Reporting"]
  node_distribution["Distribution"]
  node_volunteers["Volunteers"]
  node_letters["Letters<br/>[LettersModule.tsx]"]
  node_reports["Reports<br/>[ReportsModule.tsx]"]
  node_dashboard["Dashboard"]
end

subgraph group_platform["Shared Platform"]
  node_store["Application State<br/>[store.tsx]"]
  node_dbservice["Firestore Operations<br/>[databaseService.ts]"]
  node_firebase["Firebase Client<br/>[firebase.ts]"]
  node_forms["Dynamic Forms"]
  node_schemas["Form Schemas"]
  node_exports["Export Utilities<br/>[exportUtils.ts]"]
  node_bast["BAST Documents"]
end

node_user(("Staff / Supplier"))

node_user -->|"signs in"| node_auth
node_auth -->|"updates session"| node_store
node_guard -->|"reads user state"| node_store
node_guard -->|"checks access"| node_routes
node_guard -->|"renders authorized content"| node_app
node_app -->|"dispatches module"| node_dashboard
node_app -->|"dispatches module"| node_master
node_app -->|"dispatches module"| node_nutrition
node_app -->|"dispatches module"| node_institutions
node_app -->|"dispatches module"| node_volunteers
node_app -->|"dispatches module"| node_letters
node_app -->|"dispatches module"| node_reports
node_app -->|"reads app state"| node_store
node_master -->|"uses shared state"| node_store
node_nutrition -->|"uses shared state"| node_store
node_nutrition -->|"renders tab"| node_beneficiary
node_nutrition -->|"uses form builder"| node_forms
node_nutrition -->|"reads schemas"| node_schemas
node_nutrition -->|"uses exports"| node_exports
node_institutions -->|"uses shared state"| node_store
node_procurement -->|"uses shared state"| node_store
node_procurement -->|"uses form builder"| node_forms
node_procurement -->|"reads schemas"| node_schemas
node_procurement -->|"uses exports"| node_exports
node_production -->|"uses shared state"| node_store
node_production -->|"resolves BAST fields"| node_bast
node_production -->|"uses form builder"| node_forms
node_reports -->|"exports BAST"| node_bast
node_reports -->|"uses exports"| node_exports
node_forms -->|"reads app state"| node_store
node_dbservice -->|"uses Firestore client"| node_firebase
node_store -->|"uses Firebase services"| node_firebase

click node_auth "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/auth/LoginPage.tsx"
click node_guard "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/auth/AuthGuard.tsx"
click node_routes "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/routeGuard.ts"
click node_app "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/App.tsx"
click node_master "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/MasterDataModule.tsx"
click node_nutrition "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/NutritionMenuModule.tsx"
click node_beneficiary "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/BeneficiaryNutritionTab.tsx"
click node_institutions "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/InstitutionsModule.tsx"
click node_procurement "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/ProcurementModule.tsx"
click node_supplier "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/SupplierPortalModule.tsx"
click node_inventory "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/InventoryModule.tsx"
click node_production "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/ProductionModule.tsx"
click node_distribution "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/DistributionModule.tsx"
click node_volunteers "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/VolunteersModule.tsx"
click node_letters "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/LettersModule.tsx"
click node_reports "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/ReportsModule.tsx"
click node_dashboard "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/DashboardModule.tsx"
click node_store "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/store.tsx"
click node_dbservice "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/databaseService.ts"
click node_firebase "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/firebase.ts"
click node_forms "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/common/DynamicFormBuilder.tsx"
click node_schemas "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/dynamicFormSchemas.ts"
click node_exports "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/exportUtils.ts"
click node_bast "https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/common/BASTDocumentSheet.tsx"

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_auth,node_guard,node_routes,node_app toneBlue
class node_master,node_nutrition,node_beneficiary,node_institutions toneAmber
class node_procurement,node_supplier,node_inventory,node_production toneMint
class node_distribution,node_volunteers,node_letters,node_reports,node_dashboard toneRose
class node_store,node_dbservice,node_firebase,node_forms,node_schemas,node_exports,node_bast,node_user toneIndigo
```

## Components

### Access & Navigation

- [Authentication](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/auth/LoginPage.tsx): `src/components/auth/LoginPage.tsx`
- [Role Access Guard](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/auth/AuthGuard.tsx): `src/components/auth/AuthGuard.tsx`
- [Module Access Rules](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/routeGuard.ts): `src/lib/routeGuard.ts`
- [Application Shell](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/App.tsx): `src/App.tsx`

### Planning & Master Data

- [Master Data](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/MasterDataModule.tsx): `src/components/modules/MasterDataModule.tsx`
- [Nutrition Menu](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/NutritionMenuModule.tsx): `src/components/modules/NutritionMenuModule.tsx`
- [Beneficiary Nutrition](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/BeneficiaryNutritionTab.tsx): `src/components/modules/BeneficiaryNutritionTab.tsx`
- [Institutions](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/InstitutionsModule.tsx): `src/components/modules/InstitutionsModule.tsx`

### Supply & Operations

- [Procurement & QC](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/ProcurementModule.tsx): `src/components/modules/ProcurementModule.tsx`
- [Supplier Portal](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/SupplierPortalModule.tsx): `src/components/modules/SupplierPortalModule.tsx`
- [Inventory](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/InventoryModule.tsx): `src/components/modules/InventoryModule.tsx`
- [Production](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/ProductionModule.tsx): `src/components/modules/ProductionModule.tsx`

### Delivery & Reporting

- [Distribution](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/DistributionModule.tsx): `src/components/modules/DistributionModule.tsx`
- [Volunteers](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/VolunteersModule.tsx): `src/components/modules/VolunteersModule.tsx`
- [Letters](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/LettersModule.tsx): `src/components/modules/LettersModule.tsx`
- [Reports](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/ReportsModule.tsx): `src/components/modules/ReportsModule.tsx`
- [Dashboard](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/modules/DashboardModule.tsx): `src/components/modules/DashboardModule.tsx`

### Shared Platform

- [Application State](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/store.tsx): `src/lib/store.tsx`
- [Firestore Operations](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/databaseService.ts): `src/lib/databaseService.ts`
- [Firebase Client](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/firebase.ts): `src/lib/firebase.ts`
- [Dynamic Forms](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/common/DynamicFormBuilder.tsx): `src/components/common/DynamicFormBuilder.tsx`
- [Form Schemas](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/dynamicFormSchemas.ts): `src/lib/dynamicFormSchemas.ts`
- [Export Utilities](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/lib/exportUtils.ts): `src/lib/exportUtils.ts`
- [BAST Documents](https://github.com/gustiagung1100-glitch/e-sppg-tmg2/blob/main/src/components/common/BASTDocumentSheet.tsx): `src/components/common/BASTDocumentSheet.tsx`

### Other components

- **Staff / Supplier**

## Connections

- Staff / Supplier → Authentication: signs in (evidence: `src/components/auth/LoginPage.tsx`)
- Authentication → Application State: updates session (evidence: `src/components/auth/LoginPage.tsx`)
- Role Access Guard → Application State: reads user state (evidence: `src/components/auth/AuthGuard.tsx`)
- Role Access Guard → Module Access Rules: checks access (evidence: `src/components/auth/AuthGuard.tsx`)
- Role Access Guard → Application Shell: renders authorized content (evidence: `src/App.tsx`)
- Application Shell → Dashboard: dispatches module (evidence: `src/App.tsx`)
- Application Shell → Master Data: dispatches module (evidence: `src/App.tsx`)
- Application Shell → Nutrition Menu: dispatches module (evidence: `src/App.tsx`)
- Application Shell → Institutions: dispatches module (evidence: `src/App.tsx`)
- Application Shell → Volunteers: dispatches module (evidence: `src/App.tsx`)
- Application Shell → Letters: dispatches module (evidence: `src/App.tsx`)
- Application Shell → Reports: dispatches module (evidence: `src/App.tsx`)
- Application Shell → Application State: reads app state (evidence: `src/App.tsx`)
- Master Data → Application State: uses shared state
- Nutrition Menu → Application State: uses shared state (evidence: `src/components/modules/NutritionMenuModule.tsx`)
- Nutrition Menu → Beneficiary Nutrition: renders tab (evidence: `src/components/modules/NutritionMenuModule.tsx`)
- Nutrition Menu → Dynamic Forms: uses form builder (evidence: `src/components/modules/NutritionMenuModule.tsx`)
- Nutrition Menu → Form Schemas: reads schemas (evidence: `src/components/modules/NutritionMenuModule.tsx`)
- Nutrition Menu → Export Utilities: uses exports (evidence: `src/components/modules/NutritionMenuModule.tsx`)
- Institutions → Application State: uses shared state (evidence: `src/App.tsx`)
- Procurement & QC → Application State: uses shared state (evidence: `src/components/modules/ProcurementModule.tsx`)
- Procurement & QC → Dynamic Forms: uses form builder (evidence: `src/components/modules/ProcurementModule.tsx`)
- Procurement & QC → Form Schemas: reads schemas (evidence: `src/components/modules/ProcurementModule.tsx`)
- Procurement & QC → Export Utilities: uses exports (evidence: `src/components/modules/ProcurementModule.tsx`)
- Production → Application State: uses shared state (evidence: `src/components/modules/ProductionModule.tsx`)
- Production → BAST Documents: resolves BAST fields (evidence: `src/components/modules/ProductionModule.tsx`)
- Production → Dynamic Forms: uses form builder (evidence: `src/components/modules/ProductionModule.tsx`)
- Reports → BAST Documents: exports BAST (evidence: `src/components/modules/ReportsModule.tsx`)
- Reports → Export Utilities: uses exports (evidence: `src/components/modules/ReportsModule.tsx`)
- Dynamic Forms → Application State: reads app state (evidence: `src/components/common/DynamicFormBuilder.tsx`)
- Firestore Operations → Firebase Client: uses Firestore client (evidence: `src/lib/databaseService.ts`)
- Application State → Firebase Client: uses Firebase services (evidence: `src/lib/store.tsx`)