# cuk-flout/flout-admin-web architecture

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

- Interactive diagram: https://gitdiagram.com/cuk-flout/flout-admin-web
- Repository: https://github.com/cuk-flout/flout-admin-web

## Overview

FLOUT Admin Web is an operator console for managing flood-prevention work, from applications and field inspections through support review and construction. The routed workflow begins at the admin login, then exposes GIS applications, priority inspections, infrastructure, inspections and results, support, and construction. API-backed sections use shared authenticated transport; maps use Kakao Maps, while sampled infrastructure and inspection-result state includes browser storage. Some page implementations were not sampled, so only documented routes and indexed references are shown as relationships.

Main entry points: [`src/App.tsx`](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/App.tsx) (Route dispatcher), [`src/api/client.ts`](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/client.ts) (Authenticated API client), [`src/pages/InspectionResults/useInspectionResultEditor.ts`](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/InspectionResults/useInspectionResultEditor.ts) (Result editor), [`src/pages/Infrastructure/InfrastructureManagement.tsx`](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Infrastructure/InfrastructureManagement.tsx) (Infrastructure management)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and routing"]
  node_app["Route dispatcher<br/>[App.tsx]"]
  node_login["Admin login<br/>[AdminLogin.tsx]"]
  node_guard["Admin access guard<br/>[RequireAdmin.tsx]"]
end

subgraph group_operations["Applications and inspections"]
  node_gis["GIS applications"]
  node_gisdata["GIS API integration<br/>[useGisApi.ts]"]
  node_priority["Priority inspections"]
  node_inspection["Inspection management"]
  node_results["Inspection results"]
  node_resulteditor["Result editor"]
end

subgraph group_programs["Support and delivery"]
  node_infrastructure["Infrastructure management"]
  node_infrastructuredata["Infrastructure records"]
  node_infrastructuremodel["Infrastructure state model<br/>[model.ts]"]
  node_infrastructuremap["Infrastructure map"]
  node_support["Support management"]
  node_supportreview["Support review<br/>[SupportReview.tsx]"]
  node_supportdata["Support API integration<br/>[useSupportApi.ts]"]
  node_construction["Construction management"]
end

subgraph group_shared["Services and state"]
  node_session["Admin session<br/>[session.ts]"]
  node_authapi["Authentication API<br/>[auth.ts]"]
  node_transport["Authenticated API client<br/>[client.ts]"]
  node_gisapi["GIS application API<br/>[gisApplications.ts]"]
  node_priorityapi["Priority inspection API"]
  node_inspectionapi["Inspection API<br/>[inspections.ts]"]
  node_resultstate[("Result browser storage<br/>[storage.ts]")]
  node_kakao["Kakao Maps loader<br/>[maps.ts]"]
  node_supportapi["Support application API"]
end

node_operator(("Admin operator"))

node_operator -->|"uses console"| node_app
node_app -->|"routes to"| node_login
node_app -->|"protects routes"| node_guard
node_guard -->|"checks session"| node_session
node_login -.->|"authenticates"| node_authapi
node_authapi -->|"sets session"| node_session
node_transport -->|"refreshes session"| node_authapi
node_app -->|"routes to"| node_gis
node_gis -.->|"loads applications"| node_gisdata
node_gisdata -->|"requests data"| node_gisapi
node_gisapi -->|"sends requests"| node_transport
node_app -->|"routes to"| node_priority
node_priority -->|"requests inspections"| node_priorityapi
node_priorityapi -->|"sends requests"| node_transport
node_app -->|"routes to"| node_inspection
node_inspection -->|"manages inspections"| node_inspectionapi
node_inspectionapi -->|"sends requests"| node_transport
node_app -->|"routes to"| node_results
node_results -.->|"edits results"| node_resulteditor
node_resulteditor -->|"publishes results"| node_inspectionapi
node_resulteditor -.->|"reads and writes"| node_resultstate
node_app -->|"routes to"| node_infrastructure
node_infrastructure -.->|"manages records"| node_infrastructuredata
node_infrastructuredata -->|"reads and writes"| node_infrastructuremodel
node_infrastructure -.->|"shows locations"| node_infrastructuremap
node_infrastructuremap -->|"loads maps"| node_kakao
node_app -->|"routes to"| node_support
node_app -->|"routes to"| node_supportreview
node_supportreview -->|"loads review data"| node_supportdata
node_supportdata -->|"requests support data"| node_supportapi
node_supportapi -->|"sends requests"| node_transport
node_app -->|"routes to"| node_construction

click node_app "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/App.tsx"
click node_login "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Auth/AdminLogin.tsx"
click node_guard "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/auth/RequireAdmin.tsx"
click node_session "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/auth/session.ts"
click node_authapi "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/auth.ts"
click node_transport "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/client.ts"
click node_gis "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/GIS/GisApplications.tsx"
click node_gisdata "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/GIS/useGisApi.ts"
click node_gisapi "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/gisApplications.ts"
click node_priority "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Priority/PriorityManagement.tsx"
click node_priorityapi "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/priorityInspections.ts"
click node_inspection "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Inspection/InspectionManagement.tsx"
click node_inspectionapi "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/inspections.ts"
click node_results "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/InspectionResults/InspectionResults.tsx"
click node_resulteditor "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/InspectionResults/useInspectionResultEditor.ts"
click node_resultstate "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/InspectionResults/storage.ts"
click node_infrastructure "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Infrastructure/InfrastructureManagement.tsx"
click node_infrastructuredata "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Infrastructure/useInfrastructureData.ts"
click node_infrastructuremodel "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Infrastructure/model.ts"
click node_infrastructuremap "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/components/infrastructure/useInfrastructureMap.ts"
click node_kakao "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/lib/kakao/maps.ts"
click node_support "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Support/SupportManagement.tsx"
click node_supportreview "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Support/SupportReview.tsx"
click node_supportdata "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Support/useSupportApi.ts"
click node_supportapi "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/supportApplications.ts"
click node_construction "https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Construction/ConstructionManagement.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_login,node_guard toneBlue
class node_gis,node_gisdata,node_priority,node_inspection,node_results,node_resulteditor toneAmber
class node_infrastructure,node_infrastructuredata,node_infrastructuremodel,node_infrastructuremap,node_support,node_supportreview,node_supportdata,node_construction toneMint
class node_session,node_authapi,node_transport,node_gisapi,node_priorityapi,node_inspectionapi,node_resultstate,node_kakao,node_supportapi toneRose
class node_operator toneIndigo
```

## Components

### Access and routing

- [Route dispatcher](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/App.tsx): `src/App.tsx`
- [Admin login](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Auth/AdminLogin.tsx): `src/pages/Auth/AdminLogin.tsx`
- [Admin access guard](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/auth/RequireAdmin.tsx): `src/auth/RequireAdmin.tsx`

### Applications and inspections

- [GIS applications](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/GIS/GisApplications.tsx): `src/pages/GIS/GisApplications.tsx`
- [GIS API integration](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/GIS/useGisApi.ts): `src/pages/GIS/useGisApi.ts`
- [Priority inspections](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Priority/PriorityManagement.tsx): `src/pages/Priority/PriorityManagement.tsx`
- [Inspection management](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Inspection/InspectionManagement.tsx): `src/pages/Inspection/InspectionManagement.tsx`
- [Inspection results](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/InspectionResults/InspectionResults.tsx): `src/pages/InspectionResults/InspectionResults.tsx`
- [Result editor](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/InspectionResults/useInspectionResultEditor.ts): `src/pages/InspectionResults/useInspectionResultEditor.ts`

### Support and delivery

- [Infrastructure management](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Infrastructure/InfrastructureManagement.tsx): `src/pages/Infrastructure/InfrastructureManagement.tsx`
- [Infrastructure records](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Infrastructure/useInfrastructureData.ts): `src/pages/Infrastructure/useInfrastructureData.ts`
- [Infrastructure state model](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Infrastructure/model.ts): `src/pages/Infrastructure/model.ts`
- [Infrastructure map](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/components/infrastructure/useInfrastructureMap.ts): `src/components/infrastructure/useInfrastructureMap.ts`
- [Support management](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Support/SupportManagement.tsx): `src/pages/Support/SupportManagement.tsx`
- [Support review](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Support/SupportReview.tsx): `src/pages/Support/SupportReview.tsx`
- [Support API integration](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Support/useSupportApi.ts): `src/pages/Support/useSupportApi.ts`
- [Construction management](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/Construction/ConstructionManagement.tsx): `src/pages/Construction/ConstructionManagement.tsx`

### Services and state

- [Admin session](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/auth/session.ts): `src/auth/session.ts`
- [Authentication API](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/auth.ts): `src/api/auth.ts`
- [Authenticated API client](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/client.ts): `src/api/client.ts`
- [GIS application API](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/gisApplications.ts): `src/api/gisApplications.ts`
- [Priority inspection API](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/priorityInspections.ts): `src/api/priorityInspections.ts`
- [Inspection API](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/inspections.ts): `src/api/inspections.ts`
- [Result browser storage](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/pages/InspectionResults/storage.ts): `src/pages/InspectionResults/storage.ts`
- [Kakao Maps loader](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/lib/kakao/maps.ts): `src/lib/kakao/maps.ts`
- [Support application API](https://github.com/cuk-flout/flout-admin-web/blob/develop/src/api/supportApplications.ts): `src/api/supportApplications.ts`

### Other components

- **Admin operator**

## Connections

- Admin operator → Route dispatcher: uses console (evidence: `src/App.tsx`)
- Route dispatcher → Admin login: routes to (evidence: `src/App.tsx`)
- Route dispatcher → Admin access guard: protects routes (evidence: `src/App.tsx`)
- Admin access guard → Admin session: checks session (evidence: `src/auth/RequireAdmin.tsx`)
- Admin login → Authentication API: authenticates
- Authentication API → Admin session: sets session (evidence: `src/api/auth.ts`)
- Authenticated API client → Authentication API: refreshes session (evidence: `src/api/client.ts`)
- Route dispatcher → GIS applications: routes to (evidence: `src/App.tsx`)
- GIS applications → GIS API integration: loads applications
- GIS API integration → GIS application API: requests data (evidence: `src/pages/GIS/useGisApi.ts`)
- GIS application API → Authenticated API client: sends requests (evidence: `src/api/gisApplications.ts`)
- Route dispatcher → Priority inspections: routes to (evidence: `src/App.tsx`)
- Priority inspections → Priority inspection API: requests inspections (evidence: `src/pages/Priority/PriorityManagement.tsx`)
- Priority inspection API → Authenticated API client: sends requests
- Route dispatcher → Inspection management: routes to (evidence: `src/App.tsx`)
- Inspection management → Inspection API: manages inspections (evidence: `src/pages/Inspection/InspectionManagement.tsx`)
- Inspection API → Authenticated API client: sends requests (evidence: `src/api/inspections.ts`)
- Route dispatcher → Inspection results: routes to (evidence: `src/App.tsx`)
- Inspection results → Result editor: edits results
- Result editor → Inspection API: publishes results (evidence: `src/pages/InspectionResults/useInspectionResultEditor.ts`)
- Result editor → Result browser storage: reads and writes
- Route dispatcher → Infrastructure management: routes to (evidence: `src/App.tsx`)
- Infrastructure management → Infrastructure records: manages records
- Infrastructure records → Infrastructure state model: reads and writes (evidence: `src/pages/Infrastructure/useInfrastructureData.ts`)
- Infrastructure management → Infrastructure map: shows locations
- Infrastructure map → Kakao Maps loader: loads maps (evidence: `src/components/infrastructure/useInfrastructureMap.ts`)
- Route dispatcher → Support management: routes to (evidence: `src/App.tsx`)
- Route dispatcher → Support review: routes to (evidence: `src/App.tsx`)
- Support review → Support API integration: loads review data (evidence: `src/pages/Support/SupportReview.tsx`)
- Support API integration → Support application API: requests support data (evidence: `src/pages/Support/useSupportApi.ts`)
- Support application API → Authenticated API client: sends requests (evidence: `src/api/supportApplications.ts`)
- Route dispatcher → Construction management: routes to (evidence: `src/App.tsx`)