# jongperono/nccc-clearance architecture

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

- Interactive diagram: https://gitdiagram.com/jongperono/nccc-clearance
- Repository: https://github.com/jongperono/nccc-clearance

## Overview

This is a React frontend for an employee clearance system. Users can submit clearance requests, assign templates, review and approve clearances, and check progress through public tracking routes; dashboard users also manage employees, organizational settings, templates, status, and logs. The graph follows the documented route and dashboard composition, then shows sampled request/detail actions and the shared API client. The README describes only the Vite starter, so product capabilities are inferred from source names and the SOURCE INDEX; unsampled interactions are not expanded into guessed call chains.

Main entry points: [`src/views/pages/Dashboard.tsx`](https://github.com/jongperono/nccc-clearance/blob/main/src/views/pages/Dashboard.tsx) (Dashboard navigation), [`src/utils/ApiService.tsx`](https://github.com/jongperono/nccc-clearance/blob/main/src/utils/ApiService.tsx) (API client), [`src/views/App.tsx`](https://github.com/jongperono/nccc-clearance/blob/main/src/views/App.tsx) (Application router), [`src/views/components/ClearanceRequest.tsx`](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceRequest.tsx) (Clearance requests)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["Application router<br/>[App.tsx]"]
  node_landing["Landing and login<br/>[Landing.tsx]"]
  node_dashboard["Dashboard navigation<br/>[Dashboard.tsx]"]
end

subgraph group_workflow["Clearance workflow"]
  node_tracking["Clearance tracking"]
  node_tracking_detail["Tracking details"]
  node_request["Clearance requests"]
  node_request_detail["Request details"]
  node_templates["Template management<br/>[Templates.tsx]"]
  node_template_creation["Template creation"]
  node_template_preview["Template preview"]
  node_clearances["Clearance review<br/>[Clearances.tsx]"]
  node_clearance_details["Clearance details"]
  node_clearance_edit["Edit clearance"]
end

subgraph group_admin["Dashboard management"]
  node_overview["Dashboard overview"]
  node_employees["Employee management<br/>[Employee.tsx]"]
  node_branches["Branch management<br/>[Branch.tsx]"]
  node_company["Company management<br/>[Company.tsx]"]
  node_departments["Department management<br/>[Departments.tsx]"]
  node_roles["Role management<br/>[Roles.tsx]"]
  node_status["Status view<br/>[Status.tsx]"]
  node_logs["Activity logs<br/>[Logs.tsx]"]
end

subgraph group_shared["Shared services"]
  node_api["API client<br/>[ApiService.tsx]"]
  node_token["Route verifier<br/>[TokenVerifier.tsx]"]
  node_table["Dynamic table<br/>[DynamicTable.tsx]"]
  node_alerts["Alert utility<br/>[CustomAlert.tsx]"]
  node_types["Domain interfaces<br/>[interfaces.tsx]"]
end

node_user(("User"))
node_backend{{"Clearance API"}}

node_user -.->|"opens"| node_app
node_app -->|"routes to"| node_landing
node_app -->|"protects route"| node_dashboard
node_app -->|"routes to"| node_tracking
node_app -->|"routes to"| node_tracking_detail
node_landing -.->|"offers login"| node_user
node_dashboard -->|"selects page"| node_overview
node_dashboard -->|"selects page"| node_request
node_dashboard -->|"selects page"| node_clearances
node_dashboard -->|"selects page"| node_templates
node_dashboard -->|"selects page"| node_employees
node_dashboard -->|"selects page"| node_branches
node_dashboard -->|"selects page"| node_company
node_dashboard -->|"selects page"| node_departments
node_dashboard -->|"selects page"| node_roles
node_dashboard -->|"selects page"| node_status
node_dashboard -->|"selects page"| node_logs
node_request -->|"submits request"| node_api
node_request -->|"assigns template"| node_api
node_request -->|"renders details"| node_request_detail
node_request -->|"opens preview"| node_template_preview
node_templates -->|"opens editor"| node_template_creation
node_templates -->|"opens preview"| node_template_preview
node_template_preview -->|"manages templates"| node_api
node_clearances -->|"opens details"| node_clearance_details
node_clearances -->|"opens editor"| node_clearance_edit
node_clearances -->|"loads and approves"| node_api
node_overview -->|"loads and updates"| node_api
node_overview -->|"opens details"| node_clearance_details
node_overview -->|"opens editor"| node_clearance_edit
node_clearance_details -->|"loads details"| node_api
node_api -->|"sends requests"| node_backend
node_token -->|"verifies access"| node_api
node_token -->|"shows errors"| node_alerts
node_employees -->|"uses employee type"| node_types

click node_app "https://github.com/jongperono/nccc-clearance/blob/main/src/views/App.tsx"
click node_landing "https://github.com/jongperono/nccc-clearance/blob/main/src/views/pages/Landing.tsx"
click node_dashboard "https://github.com/jongperono/nccc-clearance/blob/main/src/views/pages/Dashboard.tsx"
click node_tracking "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceTracking.tsx"
click node_tracking_detail "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceTrackingDetails.tsx"
click node_request "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceRequest.tsx"
click node_request_detail "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceRequestDetails.tsx"
click node_templates "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Templates.tsx"
click node_template_creation "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/TemplateCreation.tsx"
click node_template_preview "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/TemplatePreviewModal.tsx"
click node_clearances "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Clearances.tsx"
click node_clearance_details "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceDetails.tsx"
click node_clearance_edit "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceEditModal.tsx"
click node_overview "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/DashboardContent.tsx"
click node_employees "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Employee.tsx"
click node_branches "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Branch.tsx"
click node_company "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Company.tsx"
click node_departments "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Departments.tsx"
click node_roles "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Roles.tsx"
click node_status "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Status.tsx"
click node_logs "https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Logs.tsx"
click node_api "https://github.com/jongperono/nccc-clearance/blob/main/src/utils/ApiService.tsx"
click node_token "https://github.com/jongperono/nccc-clearance/blob/main/src/utils/TokenVerifier.tsx"
click node_table "https://github.com/jongperono/nccc-clearance/blob/main/src/utils/DynamicTable.tsx"
click node_alerts "https://github.com/jongperono/nccc-clearance/blob/main/src/utils/CustomAlert.tsx"
click node_types "https://github.com/jongperono/nccc-clearance/blob/main/src/types/interfaces.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_app,node_landing,node_dashboard,node_user toneBlue
class node_tracking,node_tracking_detail,node_request,node_request_detail,node_templates,node_template_creation,node_template_preview,node_clearances,node_clearance_details,node_clearance_edit toneAmber
class node_overview,node_employees,node_branches,node_company,node_departments,node_roles,node_status,node_logs,node_backend toneMint
class node_api,node_token,node_table,node_alerts,node_types toneRose
```

## Components

### Application shell

- [Application router](https://github.com/jongperono/nccc-clearance/blob/main/src/views/App.tsx): `src/views/App.tsx`
- [Landing and login](https://github.com/jongperono/nccc-clearance/blob/main/src/views/pages/Landing.tsx): `src/views/pages/Landing.tsx`
- [Dashboard navigation](https://github.com/jongperono/nccc-clearance/blob/main/src/views/pages/Dashboard.tsx): `src/views/pages/Dashboard.tsx`

### Clearance workflow

- [Clearance tracking](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceTracking.tsx): `src/views/components/ClearanceTracking.tsx`
- [Tracking details](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceTrackingDetails.tsx): `src/views/components/ClearanceTrackingDetails.tsx`
- [Clearance requests](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceRequest.tsx): `src/views/components/ClearanceRequest.tsx`
- [Request details](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceRequestDetails.tsx): `src/views/components/ClearanceRequestDetails.tsx`
- [Template management](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Templates.tsx): `src/views/components/Templates.tsx`
- [Template creation](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/TemplateCreation.tsx): `src/views/components/TemplateCreation.tsx`
- [Template preview](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/TemplatePreviewModal.tsx): `src/views/components/TemplatePreviewModal.tsx`
- [Clearance review](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Clearances.tsx): `src/views/components/Clearances.tsx`
- [Clearance details](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceDetails.tsx): `src/views/components/ClearanceDetails.tsx`
- [Edit clearance](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/ClearanceEditModal.tsx): `src/views/components/ClearanceEditModal.tsx`

### Dashboard management

- [Dashboard overview](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/DashboardContent.tsx): `src/views/components/DashboardContent.tsx`
- [Employee management](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Employee.tsx): `src/views/components/Employee.tsx`
- [Branch management](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Branch.tsx): `src/views/components/Branch.tsx`
- [Company management](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Company.tsx): `src/views/components/Company.tsx`
- [Department management](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Departments.tsx): `src/views/components/Departments.tsx`
- [Role management](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Roles.tsx): `src/views/components/Roles.tsx`
- [Status view](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Status.tsx): `src/views/components/Status.tsx`
- [Activity logs](https://github.com/jongperono/nccc-clearance/blob/main/src/views/components/Logs.tsx): `src/views/components/Logs.tsx`

### Shared services

- [API client](https://github.com/jongperono/nccc-clearance/blob/main/src/utils/ApiService.tsx): `src/utils/ApiService.tsx`
- [Route verifier](https://github.com/jongperono/nccc-clearance/blob/main/src/utils/TokenVerifier.tsx): `src/utils/TokenVerifier.tsx`
- [Dynamic table](https://github.com/jongperono/nccc-clearance/blob/main/src/utils/DynamicTable.tsx): `src/utils/DynamicTable.tsx`
- [Alert utility](https://github.com/jongperono/nccc-clearance/blob/main/src/utils/CustomAlert.tsx): `src/utils/CustomAlert.tsx`
- [Domain interfaces](https://github.com/jongperono/nccc-clearance/blob/main/src/types/interfaces.tsx): `src/types/interfaces.tsx`

### Other components

- **User**
- **Clearance API**

## Connections

- User → Application router: opens
- Application router → Landing and login: routes to (evidence: `src/views/App.tsx`)
- Application router → Dashboard navigation: protects route (evidence: `src/views/App.tsx`)
- Application router → Clearance tracking: routes to (evidence: `src/views/App.tsx`)
- Application router → Tracking details: routes to (evidence: `src/views/App.tsx`)
- Landing and login → User: offers login
- Dashboard navigation → Dashboard overview: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Clearance requests: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Clearance review: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Template management: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Employee management: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Branch management: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Company management: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Department management: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Role management: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Status view: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Dashboard navigation → Activity logs: selects page (evidence: `src/views/pages/Dashboard.tsx`)
- Clearance requests → API client: submits request (evidence: `src/views/components/ClearanceRequest.tsx`)
- Clearance requests → API client: assigns template (evidence: `src/views/components/ClearanceRequest.tsx`)
- Clearance requests → Request details: renders details (evidence: `src/views/components/ClearanceRequest.tsx`)
- Clearance requests → Template preview: opens preview (evidence: `src/views/components/ClearanceRequest.tsx`)
- Template management → Template creation: opens editor (evidence: `src/views/components/Templates.tsx`)
- Template management → Template preview: opens preview (evidence: `src/views/components/Templates.tsx`)
- Template preview → API client: manages templates (evidence: `src/views/components/TemplatePreviewModal.tsx`)
- Clearance review → Clearance details: opens details (evidence: `src/views/components/Clearances.tsx`)
- Clearance review → Edit clearance: opens editor (evidence: `src/views/components/Clearances.tsx`)
- Clearance review → API client: loads and approves (evidence: `src/views/components/Clearances.tsx`)
- Dashboard overview → API client: loads and updates (evidence: `src/views/components/DashboardContent.tsx`)
- Dashboard overview → Clearance details: opens details (evidence: `src/views/components/DashboardContent.tsx`)
- Dashboard overview → Edit clearance: opens editor (evidence: `src/views/components/DashboardContent.tsx`)
- Clearance details → API client: loads details (evidence: `src/views/components/ClearanceDetails.tsx`)
- API client → Clearance API: sends requests (evidence: `src/utils/ApiService.tsx`)
- Route verifier → API client: verifies access (evidence: `src/utils/TokenVerifier.tsx`)
- Route verifier → Alert utility: shows errors (evidence: `src/utils/TokenVerifier.tsx`)
- Employee management → Domain interfaces: uses employee type (evidence: `src/views/components/Employee.tsx`)