# hangbich045/tn-frontend architecture

> Architecture diagram of the GitHub repository hangbich045/tn-frontend, 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/hangbich045/tn-frontend
- Repository: https://github.com/hangbich045/tn-frontend

## Overview

This is a LHU Media studio frontend for users to discover services, book studio time or request equipment, then review activity; administrators manage content, resources, users and requests. The main flow runs through page-level features into a shared authenticated API client, with admin approval as a distinct operational stage. The tree and excerpts support these UI/API boundaries, but do not expose the backend implementation or most route internals, so backend persistence and several links between unsampled screens are not inferred.

Main entry points: [`src/lib/api.ts`](https://github.com/hangbich045/tn-frontend/blob/main/src/lib/api.ts) (API client), [`src/components/AdminLayout.tsx`](https://github.com/hangbich045/tn-frontend/blob/main/src/components/AdminLayout.tsx) (Admin access shell), [`src/context/AuthContext.tsx`](https://github.com/hangbich045/tn-frontend/blob/main/src/context/AuthContext.tsx) (Session context), [`src/components/Navbar.tsx`](https://github.com/hangbich045/tn-frontend/blob/main/src/components/Navbar.tsx) (User navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public experience"]
  node_home["Homepage<br/>[page.tsx]"]
end

subgraph group_identity["Identity and shared UI"]
  node_authpages["Authentication screens"]
  node_auth["Session context<br/>[AuthContext.tsx]"]
  node_navbar["User navigation<br/>[Navbar.tsx]"]
  node_toast["Toast notifications<br/>[ToastContext.tsx]"]
  node_api["API client<br/>[api.ts]"]
end

subgraph group_operations["User operations"]
  node_equipment["Equipment requests<br/>[page.tsx]"]
  node_studio["Studio bookings<br/>[page.tsx]"]
  node_calendar["Studio calendar<br/>[StudioCalendar.tsx]"]
  node_history["Activity history<br/>[page.tsx]"]
  node_profile["User profile<br/>[page.tsx]"]
end

subgraph group_admin["Administration"]
  node_adminlayout["Admin access shell<br/>[AdminLayout.tsx]"]
  node_dashboard["Admin dashboard<br/>[page.tsx]"]
  node_adminrequests["Request approvals<br/>[page.tsx]"]
  node_adminequipment["Equipment management<br/>[page.tsx]"]
  node_categories["Category management<br/>[page.tsx]"]
  node_adminusers["User management<br/>[page.tsx]"]
  node_cms["CMS management<br/>[page.tsx]"]
  node_cmsservices["Service content<br/>[page.tsx]"]
  node_gallery["Gallery content<br/>[page.tsx]"]
  node_upload["Media upload route<br/>[route.ts]"]
end

node_visitor(("Visitor or user"))
node_backend{{"Application API"}}

node_visitor -->|"browses"| node_home
node_visitor -->|"requests gear"| node_equipment
node_visitor -->|"books time"| node_studio
node_home -->|"renders"| node_navbar
node_home -->|"fetches content"| node_api
node_equipment -->|"renders"| node_navbar
node_equipment -->|"checks session"| node_auth
node_equipment -->|"loads and submits"| node_api
node_studio -->|"renders"| node_navbar
node_studio -->|"checks session"| node_auth
node_studio -->|"loads bookings"| node_api
node_studio -->|"renders"| node_calendar
node_history -->|"renders"| node_navbar
node_history -->|"checks session"| node_auth
node_history -->|"loads activity"| node_api
node_profile -->|"renders"| node_navbar
node_profile -->|"checks session"| node_auth
node_profile -->|"uses API"| node_api
node_authpages -->|"uses session"| node_auth
node_auth -->|"authenticates"| node_api
node_navbar -->|"reads session"| node_auth
node_adminlayout -->|"checks role"| node_auth
node_dashboard -->|"renders within"| node_adminlayout
node_adminrequests -->|"renders within"| node_adminlayout
node_adminequipment -->|"renders within"| node_adminlayout
node_categories -->|"renders within"| node_adminlayout
node_adminusers -->|"renders within"| node_adminlayout
node_cms -->|"renders within"| node_adminlayout
node_cmsservices -->|"renders within"| node_adminlayout
node_gallery -->|"renders within"| node_adminlayout
node_adminrequests -->|"loads requests"| node_api
node_dashboard -->|"uses API"| node_api
node_adminequipment -->|"uses API"| node_api
node_categories -->|"uses API"| node_api
node_adminusers -->|"uses API"| node_api
node_cms -->|"uses API"| node_api
node_cmsservices -->|"uses API"| node_api
node_gallery -->|"uses API"| node_api
node_adminrequests -->|"reports status"| node_toast
node_api -->|"HTTP requests"| node_backend
node_upload -.->|"handles upload"| node_backend

click node_home "https://github.com/hangbich045/tn-frontend/blob/main/src/app/page.tsx"
click node_equipment "https://github.com/hangbich045/tn-frontend/blob/main/src/app/equipment/page.tsx"
click node_studio "https://github.com/hangbich045/tn-frontend/blob/main/src/app/studio/page.tsx"
click node_calendar "https://github.com/hangbich045/tn-frontend/blob/main/src/components/StudioCalendar.tsx"
click node_history "https://github.com/hangbich045/tn-frontend/blob/main/src/app/history/page.tsx"
click node_profile "https://github.com/hangbich045/tn-frontend/blob/main/src/app/profile/page.tsx"
click node_authpages "https://github.com/hangbich045/tn-frontend/tree/main/src/app/auth"
click node_auth "https://github.com/hangbich045/tn-frontend/blob/main/src/context/AuthContext.tsx"
click node_navbar "https://github.com/hangbich045/tn-frontend/blob/main/src/components/Navbar.tsx"
click node_toast "https://github.com/hangbich045/tn-frontend/blob/main/src/context/ToastContext.tsx"
click node_api "https://github.com/hangbich045/tn-frontend/blob/main/src/lib/api.ts"
click node_adminlayout "https://github.com/hangbich045/tn-frontend/blob/main/src/components/AdminLayout.tsx"
click node_dashboard "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/dashboard/page.tsx"
click node_adminrequests "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/requests/page.tsx"
click node_adminequipment "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/equipment/page.tsx"
click node_categories "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/categories/page.tsx"
click node_adminusers "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/users/page.tsx"
click node_cms "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/cms/page.tsx"
click node_cmsservices "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/cms/services/page.tsx"
click node_gallery "https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/cms/gallery/page.tsx"
click node_upload "https://github.com/hangbich045/tn-frontend/blob/main/src/app/fe-api/upload/route.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_home,node_visitor toneBlue
class node_authpages,node_auth,node_navbar,node_toast,node_api toneAmber
class node_equipment,node_studio,node_calendar,node_history,node_profile,node_backend toneMint
class node_adminlayout,node_dashboard,node_adminrequests,node_adminequipment,node_categories,node_adminusers,node_cms,node_cmsservices,node_gallery,node_upload toneRose
```

## Components

### Public experience

- [Homepage](https://github.com/hangbich045/tn-frontend/blob/main/src/app/page.tsx): `src/app/page.tsx`

### Identity and shared UI

- [Authentication screens](https://github.com/hangbich045/tn-frontend/tree/main/src/app/auth): `src/app/auth`
- [Session context](https://github.com/hangbich045/tn-frontend/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [User navigation](https://github.com/hangbich045/tn-frontend/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Toast notifications](https://github.com/hangbich045/tn-frontend/blob/main/src/context/ToastContext.tsx): `src/context/ToastContext.tsx`
- [API client](https://github.com/hangbich045/tn-frontend/blob/main/src/lib/api.ts): `src/lib/api.ts`

### User operations

- [Equipment requests](https://github.com/hangbich045/tn-frontend/blob/main/src/app/equipment/page.tsx): `src/app/equipment/page.tsx`
- [Studio bookings](https://github.com/hangbich045/tn-frontend/blob/main/src/app/studio/page.tsx): `src/app/studio/page.tsx`
- [Studio calendar](https://github.com/hangbich045/tn-frontend/blob/main/src/components/StudioCalendar.tsx): `src/components/StudioCalendar.tsx`
- [Activity history](https://github.com/hangbich045/tn-frontend/blob/main/src/app/history/page.tsx): `src/app/history/page.tsx`
- [User profile](https://github.com/hangbich045/tn-frontend/blob/main/src/app/profile/page.tsx): `src/app/profile/page.tsx`

### Administration

- [Admin access shell](https://github.com/hangbich045/tn-frontend/blob/main/src/components/AdminLayout.tsx): `src/components/AdminLayout.tsx`
- [Admin dashboard](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/dashboard/page.tsx): `src/app/admin/dashboard/page.tsx`
- [Request approvals](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/requests/page.tsx): `src/app/admin/requests/page.tsx`
- [Equipment management](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/equipment/page.tsx): `src/app/admin/equipment/page.tsx`
- [Category management](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/categories/page.tsx): `src/app/admin/categories/page.tsx`
- [User management](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/users/page.tsx): `src/app/admin/users/page.tsx`
- [CMS management](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/cms/page.tsx): `src/app/admin/cms/page.tsx`
- [Service content](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/cms/services/page.tsx): `src/app/admin/cms/services/page.tsx`
- [Gallery content](https://github.com/hangbich045/tn-frontend/blob/main/src/app/admin/cms/gallery/page.tsx): `src/app/admin/cms/gallery/page.tsx`
- [Media upload route](https://github.com/hangbich045/tn-frontend/blob/main/src/app/fe-api/upload/route.ts): `src/app/fe-api/upload/route.ts`

### Other components

- **Visitor or user**
- **Application API**

## Connections

- Visitor or user → Homepage: browses (evidence: `src/app/page.tsx`)
- Visitor or user → Equipment requests: requests gear (evidence: `src/app/equipment/page.tsx`)
- Visitor or user → Studio bookings: books time (evidence: `src/app/studio/page.tsx`)
- Homepage → User navigation: renders (evidence: `src/app/page.tsx`)
- Homepage → API client: fetches content (evidence: `src/app/page.tsx`)
- Equipment requests → User navigation: renders (evidence: `src/app/equipment/page.tsx`)
- Equipment requests → Session context: checks session (evidence: `src/app/equipment/page.tsx`)
- Equipment requests → API client: loads and submits (evidence: `src/app/equipment/page.tsx`)
- Studio bookings → User navigation: renders (evidence: `src/app/studio/page.tsx`)
- Studio bookings → Session context: checks session (evidence: `src/app/studio/page.tsx`)
- Studio bookings → API client: loads bookings (evidence: `src/app/studio/page.tsx`)
- Studio bookings → Studio calendar: renders (evidence: `src/app/studio/page.tsx`)
- Activity history → User navigation: renders (evidence: `src/app/history/page.tsx`)
- Activity history → Session context: checks session (evidence: `src/app/history/page.tsx`)
- Activity history → API client: loads activity (evidence: `src/app/history/page.tsx`)
- User profile → User navigation: renders (evidence: `src/app/profile/page.tsx`)
- User profile → Session context: checks session (evidence: `src/app/profile/page.tsx`)
- User profile → API client: uses API (evidence: `src/app/profile/page.tsx`)
- Authentication screens → Session context: uses session (evidence: `src/app/auth/login/page.tsx`)
- Session context → API client: authenticates (evidence: `src/context/AuthContext.tsx`)
- User navigation → Session context: reads session (evidence: `src/components/Navbar.tsx`)
- Admin access shell → Session context: checks role (evidence: `src/components/AdminLayout.tsx`)
- Admin dashboard → Admin access shell: renders within (evidence: `src/app/admin/dashboard/page.tsx`)
- Request approvals → Admin access shell: renders within (evidence: `src/app/admin/requests/page.tsx`)
- Equipment management → Admin access shell: renders within (evidence: `src/app/admin/equipment/page.tsx`)
- Category management → Admin access shell: renders within (evidence: `src/app/admin/categories/page.tsx`)
- User management → Admin access shell: renders within (evidence: `src/app/admin/users/page.tsx`)
- CMS management → Admin access shell: renders within (evidence: `src/app/admin/cms/page.tsx`)
- Service content → Admin access shell: renders within (evidence: `src/app/admin/cms/services/page.tsx`)
- Gallery content → Admin access shell: renders within (evidence: `src/app/admin/cms/gallery/page.tsx`)
- Request approvals → API client: loads requests (evidence: `src/app/admin/requests/page.tsx`)
- Admin dashboard → API client: uses API (evidence: `src/app/admin/dashboard/page.tsx`)
- Equipment management → API client: uses API (evidence: `src/app/admin/equipment/page.tsx`)
- Category management → API client: uses API (evidence: `src/app/admin/categories/page.tsx`)
- User management → API client: uses API (evidence: `src/app/admin/users/page.tsx`)
- CMS management → API client: uses API (evidence: `src/app/admin/cms/page.tsx`)
- Service content → API client: uses API (evidence: `src/app/admin/cms/services/page.tsx`)
- Gallery content → API client: uses API (evidence: `src/app/admin/cms/gallery/page.tsx`)
- Request approvals → Toast notifications: reports status (evidence: `src/app/admin/requests/page.tsx`)
- API client → Application API: HTTP requests (evidence: `src/lib/api.ts`)
- Media upload route → Application API: handles upload