# kumbalpuri/sfc architecture

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

- Interactive diagram: https://gitdiagram.com/kumbalpuri/sfc
- Repository: https://github.com/kumbalpuri/sfc

## Overview

#### Purpose and Entry Points
This is a TypeScript React operations/continuous-improvement application, centered on dashboards, Kaizen workflows, PPSR inspection, safety, 5S audits, and red-flag reporting. The browser entry point is `index.html`, which loads `src/main.tsx`; `src/App.tsx` composes the application-level UI. A separate `server.ts` indicates a server-side runtime or API host boundary, though its responsibilities are not visible from the tree.

#### Application Shell and Navigation
The shared application frame is formed by `src/App.tsx`, `src/components/Header.tsx`, and `src/components/Sidebar.tsx`. These components likely own top-level screen selection and persistent navigation, separating global layout from individual operational modules.

#### Dashboard and Cross-Module Visibility
Dashboard views provide aggregate and management-facing visibility:
- `src/components/Dashboard.tsx`
- `src/components/GlobalDashboard.tsx`
- `src/components/KaizenReviewBoard.tsx`

These are the primary read/monitoring surfaces, likely consuming status and progress data produced by the workflow modules below.

#### Kaizen Improvement Workflow
The Kaizen subsystem is a core authoring, review, tabular-management, and presentation flow:
- `src/components/KaizenSheetForm.tsx`
- `src/components/KaizenSpreadsheet.tsx`
- `src/components/KaizenPresentationMode.tsx`

The expected control flow is create/edit improvement records in the form, manage or compare them in the spreadsheet view, then expose them in review or presentation contexts. `src/components/KaizenReviewBoard.tsx` is the review-stage boundary.

#### PPSR Inspection and Presentation
PPSR functionality is isolated as its own operational workflow:
- `src/components/PpsrSystem.tsx`
- `src/components/PpsrSheetInspect.tsx`
- `src/components/PpsrPresentationMode.tsx`

This suggests a progression from a system-level workspace to sheet inspection, with a dedicated mode for presenting results. It is architecturally parallel to the Kaizen workflow but remains component-separated.

#### Quality, Safety, and Problem Analysis Modules
Independent domain modules cover structured audits, incident handling, escalation, and root-cause analysis:
- `src/components/FiveSAudits.tsx`
- `src/components/SafetyIncidents.tsx`
- `src/components/RedFlagSystem.tsx`

`src/components/IshikawaFishbone.tsx` provides a distinct cause-analysis surface, likely linked conceptually to incidents, audit findings, or red flags without being embedded in their component paths.

#### Shared Data and Runtime Boundaries
`src/types.ts` is the central contract boundary for domain entities shared across screens, while `src/utils.ts` holds shared transformations or presentation logic. Styling is application-wide through `src/index.css`. The frontend is built with Vite configuration in `vite.config.ts`; dependencies and runnable scripts are defined by `package.json`. Runtime configuration is expected through `.env.example`, and server integration—if used—crosses the frontend/backend boundary at `server.ts`.

Main entry points: [`src/App.tsx`](https://github.com/kumbalpuri/sfc/blob/main/src/App.tsx) (Application Frame), [`src/components/Sidebar.tsx`](https://github.com/kumbalpuri/sfc/blob/main/src/components/Sidebar.tsx) (Sidebar), [`src/components/KaizenReviewBoard.tsx`](https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenReviewBoard.tsx) (Kaizen Review Board), [`src/components/KaizenSpreadsheet.tsx`](https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenSpreadsheet.tsx) (Kaizen Spreadsheet)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application Shell"]
  node_browser["Browser Entry<br/>HTML entry<br/>[index.html]"]
  node_main["React Bootstrap<br/>frontend entry<br/>[main.tsx]"]
  node_app["Application Frame<br/>React root<br/>[App.tsx]"]
  node_header["Header<br/>shared UI<br/>[Header.tsx]"]
  node_sidebar["Sidebar<br/>navigation UI<br/>[Sidebar.tsx]"]
  node_dashboard["Dashboard<br/>monitoring view<br/>[Dashboard.tsx]"]
  node_global_dashboard["Global Dashboard<br/>management view"]
end

subgraph group_kaizen["Kaizen Workflow"]
  node_kaizen_form["Kaizen Sheet Form<br/>authoring view"]
  node_kaizen_sheet["Kaizen Spreadsheet<br/>management view"]
  node_kaizen_review["Kaizen Review Board<br/>review view"]
  node_kaizen_presentation["Kaizen Presentation<br/>presentation view"]
end

subgraph group_ppsr["PPSR Workflow"]
  node_ppsr_system["PPSR System<br/>workspace<br/>[PpsrSystem.tsx]"]
  node_ppsr_inspection["PPSR Sheet Inspect<br/>inspection view"]
  node_ppsr_presentation["PPSR Presentation<br/>presentation view"]
end

subgraph group_operations["Operations Modules"]
  node_five_s["5S Audits<br/>audit module<br/>[FiveSAudits.tsx]"]
  node_safety["Safety Incidents<br/>incident module"]
  node_red_flags["Red Flag System<br/>escalation module<br/>[RedFlagSystem.tsx]"]
  node_fishbone["Ishikawa Fishbone<br/>cause analysis"]
end

subgraph group_platform["Runtime &amp; Contracts"]
  node_types["Domain Types<br/>shared contracts<br/>[types.ts]"]
  node_utils["Shared Utilities<br/>shared logic<br/>[utils.ts]"]
  node_server{{"Server Host<br/>server runtime<br/>[server.ts]"}}
end

node_browser -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"composes"| node_header
node_app -->|"composes"| node_sidebar
node_app -->|"hosts views"| node_dashboard
node_app -->|"hosts workflow"| node_kaizen_form
node_app -->|"hosts workflow"| node_ppsr_system
node_app -->|"hosts module"| node_five_s
node_app -->|"hosts module"| node_safety
node_app -->|"hosts module"| node_red_flags
node_app -->|"hosts analysis"| node_fishbone
node_sidebar -.->|"navigates"| node_global_dashboard
node_sidebar -.->|"navigates"| node_kaizen_sheet
node_sidebar -.->|"navigates"| node_ppsr_system
node_kaizen_form -->|"manages records"| node_kaizen_sheet
node_kaizen_sheet -->|"submits for review"| node_kaizen_review
node_kaizen_review -->|"presents"| node_kaizen_presentation
node_ppsr_system -->|"inspects sheets"| node_ppsr_inspection
node_ppsr_inspection -->|"presents results"| node_ppsr_presentation
node_safety -.->|"analyzes causes"| node_fishbone
node_red_flags -.->|"analyzes causes"| node_fishbone
node_dashboard -.->|"monitors"| node_kaizen_review
node_global_dashboard -.->|"aggregates status"| node_kaizen_review
node_app -.->|"uses contracts"| node_types
node_app -.->|"uses shared logic"| node_utils
node_app -.->|"server integration"| node_server

click node_browser "https://github.com/kumbalpuri/sfc/blob/main/index.html"
click node_main "https://github.com/kumbalpuri/sfc/blob/main/src/main.tsx"
click node_app "https://github.com/kumbalpuri/sfc/blob/main/src/App.tsx"
click node_header "https://github.com/kumbalpuri/sfc/blob/main/src/components/Header.tsx"
click node_sidebar "https://github.com/kumbalpuri/sfc/blob/main/src/components/Sidebar.tsx"
click node_dashboard "https://github.com/kumbalpuri/sfc/blob/main/src/components/Dashboard.tsx"
click node_global_dashboard "https://github.com/kumbalpuri/sfc/blob/main/src/components/GlobalDashboard.tsx"
click node_kaizen_form "https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenSheetForm.tsx"
click node_kaizen_sheet "https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenSpreadsheet.tsx"
click node_kaizen_review "https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenReviewBoard.tsx"
click node_kaizen_presentation "https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenPresentationMode.tsx"
click node_ppsr_system "https://github.com/kumbalpuri/sfc/blob/main/src/components/PpsrSystem.tsx"
click node_ppsr_inspection "https://github.com/kumbalpuri/sfc/blob/main/src/components/PpsrSheetInspect.tsx"
click node_ppsr_presentation "https://github.com/kumbalpuri/sfc/blob/main/src/components/PpsrPresentationMode.tsx"
click node_five_s "https://github.com/kumbalpuri/sfc/blob/main/src/components/FiveSAudits.tsx"
click node_safety "https://github.com/kumbalpuri/sfc/blob/main/src/components/SafetyIncidents.tsx"
click node_red_flags "https://github.com/kumbalpuri/sfc/blob/main/src/components/RedFlagSystem.tsx"
click node_fishbone "https://github.com/kumbalpuri/sfc/blob/main/src/components/IshikawaFishbone.tsx"
click node_types "https://github.com/kumbalpuri/sfc/blob/main/src/types.ts"
click node_utils "https://github.com/kumbalpuri/sfc/blob/main/src/utils.ts"
click node_server "https://github.com/kumbalpuri/sfc/blob/main/server.ts"

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_browser,node_main,node_app,node_header,node_sidebar,node_dashboard,node_global_dashboard toneBlue
class node_kaizen_form,node_kaizen_sheet,node_kaizen_review,node_kaizen_presentation toneAmber
class node_ppsr_system,node_ppsr_inspection,node_ppsr_presentation toneMint
class node_five_s,node_safety,node_red_flags,node_fishbone toneRose
class node_types,node_utils,node_server toneIndigo
```

## Components

### Application Shell

- [Browser Entry](https://github.com/kumbalpuri/sfc/blob/main/index.html): HTML entry · `index.html`
- [React Bootstrap](https://github.com/kumbalpuri/sfc/blob/main/src/main.tsx): frontend entry · `src/main.tsx`
- [Application Frame](https://github.com/kumbalpuri/sfc/blob/main/src/App.tsx): React root · `src/App.tsx`
- [Header](https://github.com/kumbalpuri/sfc/blob/main/src/components/Header.tsx): shared UI · `src/components/Header.tsx`
- [Sidebar](https://github.com/kumbalpuri/sfc/blob/main/src/components/Sidebar.tsx): navigation UI · `src/components/Sidebar.tsx`
- [Dashboard](https://github.com/kumbalpuri/sfc/blob/main/src/components/Dashboard.tsx): monitoring view · `src/components/Dashboard.tsx`
- [Global Dashboard](https://github.com/kumbalpuri/sfc/blob/main/src/components/GlobalDashboard.tsx): management view · `src/components/GlobalDashboard.tsx`

### Kaizen Workflow

- [Kaizen Sheet Form](https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenSheetForm.tsx): authoring view · `src/components/KaizenSheetForm.tsx`
- [Kaizen Spreadsheet](https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenSpreadsheet.tsx): management view · `src/components/KaizenSpreadsheet.tsx`
- [Kaizen Review Board](https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenReviewBoard.tsx): review view · `src/components/KaizenReviewBoard.tsx`
- [Kaizen Presentation](https://github.com/kumbalpuri/sfc/blob/main/src/components/KaizenPresentationMode.tsx): presentation view · `src/components/KaizenPresentationMode.tsx`

### PPSR Workflow

- [PPSR System](https://github.com/kumbalpuri/sfc/blob/main/src/components/PpsrSystem.tsx): workspace · `src/components/PpsrSystem.tsx`
- [PPSR Sheet Inspect](https://github.com/kumbalpuri/sfc/blob/main/src/components/PpsrSheetInspect.tsx): inspection view · `src/components/PpsrSheetInspect.tsx`
- [PPSR Presentation](https://github.com/kumbalpuri/sfc/blob/main/src/components/PpsrPresentationMode.tsx): presentation view · `src/components/PpsrPresentationMode.tsx`

### Operations Modules

- [5S Audits](https://github.com/kumbalpuri/sfc/blob/main/src/components/FiveSAudits.tsx): audit module · `src/components/FiveSAudits.tsx`
- [Safety Incidents](https://github.com/kumbalpuri/sfc/blob/main/src/components/SafetyIncidents.tsx): incident module · `src/components/SafetyIncidents.tsx`
- [Red Flag System](https://github.com/kumbalpuri/sfc/blob/main/src/components/RedFlagSystem.tsx): escalation module · `src/components/RedFlagSystem.tsx`
- [Ishikawa Fishbone](https://github.com/kumbalpuri/sfc/blob/main/src/components/IshikawaFishbone.tsx): cause analysis · `src/components/IshikawaFishbone.tsx`

### Runtime & Contracts

- [Domain Types](https://github.com/kumbalpuri/sfc/blob/main/src/types.ts): shared contracts · `src/types.ts`
- [Shared Utilities](https://github.com/kumbalpuri/sfc/blob/main/src/utils.ts): shared logic · `src/utils.ts`
- [Server Host](https://github.com/kumbalpuri/sfc/blob/main/server.ts): server runtime · Potential API or server-side integration boundary. · `server.ts`

## Connections

- Browser Entry → React Bootstrap: loads
- React Bootstrap → Application Frame: mounts
- Application Frame → Header: composes
- Application Frame → Sidebar: composes
- Application Frame → Dashboard: hosts views
- Application Frame → Kaizen Sheet Form: hosts workflow
- Application Frame → PPSR System: hosts workflow
- Application Frame → 5S Audits: hosts module
- Application Frame → Safety Incidents: hosts module
- Application Frame → Red Flag System: hosts module
- Application Frame → Ishikawa Fishbone: hosts analysis
- Sidebar → Global Dashboard: navigates
- Sidebar → Kaizen Spreadsheet: navigates
- Sidebar → PPSR System: navigates
- Kaizen Sheet Form → Kaizen Spreadsheet: manages records
- Kaizen Spreadsheet → Kaizen Review Board: submits for review
- Kaizen Review Board → Kaizen Presentation: presents
- PPSR System → PPSR Sheet Inspect: inspects sheets
- PPSR Sheet Inspect → PPSR Presentation: presents results
- Safety Incidents → Ishikawa Fishbone: analyzes causes
- Red Flag System → Ishikawa Fishbone: analyzes causes
- Dashboard → Kaizen Review Board: monitors
- Global Dashboard → Kaizen Review Board: aggregates status
- Application Frame → Domain Types: uses contracts
- Application Frame → Shared Utilities: uses shared logic
- Application Frame → Server Host: server integration