# tinh582/projectht architecture

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

- Interactive diagram: https://gitdiagram.com/tinh582/projectht
- Repository: https://github.com/tinh582/projectht

## Overview

HT Parking is a role-based parking management product for customers, staff, and administrators. The main customer journey runs from sign-in and subscription eligibility through vehicle registration, slot selection, payment confirmation, and parking-session management; staff handle check-in and payment verification, while administrators manage users, pricing, zones, and reports. React screens call an Express API that enforces roles and uses Supabase Auth/PostgreSQL. The README documents database-backed operations and Roboflow plate extraction; some feature handlers and integrations were not excerpted, so their links are limited to documented or indexed evidence.

Main entry points: [`frontend/src/App.jsx`](https://github.com/tinh582/projectht/blob/main/frontend/src/App.jsx) (App routing), [`backend/app.js`](https://github.com/tinh582/projectht/blob/main/backend/app.js) (Express routing), [`frontend/src/components/admin/AdminDashboard.jsx`](https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminDashboard.jsx) (Admin dashboard), [`frontend/src/components/user/Dashboard.jsx`](https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/Dashboard.jsx) (Customer dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Customer experience"]
  node_app["App routing<br/>[App.jsx]"]
  node_landing["Landing<br/>[Landing.jsx]"]
  node_login["Sign-in<br/>[Login.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
  node_subscription["Subscription plans"]
  node_customer["Customer dashboard<br/>[Dashboard.jsx]"]
  node_vehicles["Vehicle management<br/>[VehicleDialog.jsx]"]
  node_slotpicker["Slot selection"]
  node_payment["Customer payments<br/>[UserPayment.jsx]"]
end

subgraph group_operations["Staff operations"]
  node_staffui["Staff dashboard<br/>[StaffDashboard.jsx]"]
  node_checkinui["Check-in screen<br/>[StaffCheckin.jsx]"]
end

subgraph group_admin["Administration"]
  node_adminui["Admin dashboard<br/>[AdminDashboard.jsx]"]
  node_adminusersui["User management<br/>[AdminUsers.jsx]"]
  node_adminpricingui["Pricing management<br/>[AdminPricing.jsx]"]
  node_adminreportsui["Reports<br/>[AdminReports.jsx]"]
  node_adminzonesui["Zone management<br/>[AdminZones.jsx]"]
end

subgraph group_api["API and access"]
  node_apiclient["API client<br/>[api.js]"]
  node_express["Express routing<br/>[app.js]"]
  node_auth["Authentication and roles<br/>[auth.js]"]
  node_userapi["Customer API<br/>[Dashboard.js]"]
  node_paymentapi["Payment API<br/>[UserPayment.js]"]
  node_vehicleapi["Vehicle API<br/>[VehicleDialog.js]"]
  node_staffapi["Staff check-in API<br/>[StaffCheckin.js]"]
  node_adminapi["Admin user API<br/>[AdminUsers.js]"]
  node_privacy["Sensitive-data purge<br/>[privacyEngine.js]"]
end

subgraph group_data["Data and integrations"]
  node_dbclient["Supabase client setup<br/>[supabase.js]"]
  node_supabase[("Supabase Auth and PostgreSQL")]
  node_roboflow{{"Roboflow plate workflow"}}
end

node_visitor(("Parking users"))

node_visitor -->|"opens"| node_landing
node_landing -->|"requests navigation"| node_app
node_app -->|"renders"| node_login
node_app -->|"renders"| node_register
node_app -->|"gates access"| node_subscription
node_app -->|"loads dashboard"| node_customer
node_app -->|"loads by role"| node_staffui
node_app -->|"loads by role"| node_adminui
node_customer -->|"manages vehicles"| node_vehicles
node_customer -->|"opens payments"| node_payment
node_customer -->|"selects slots"| node_slotpicker
node_staffui -->|"offers check-in"| node_checkinui
node_adminui -->|"offers user controls"| node_adminusersui
node_adminui -->|"offers pricing controls"| node_adminpricingui
node_adminui -->|"offers reports"| node_adminreportsui
node_adminui -->|"offers zone controls"| node_adminzonesui
node_login -->|"calls API"| node_apiclient
node_register -->|"calls API"| node_apiclient
node_app -->|"verifies session"| node_apiclient
node_apiclient -->|"sends requests"| node_express
node_express -->|"applies authorization"| node_auth
node_express -->|"mounts routes"| node_userapi
node_express -->|"mounts routes"| node_paymentapi
node_express -->|"mounts routes"| node_vehicleapi
node_express -->|"mounts routes"| node_staffapi
node_express -->|"mounts routes"| node_adminapi
node_userapi -->|"purges user data"| node_privacy
node_adminapi -->|"purges user data"| node_privacy
node_dbclient -->|"configures clients"| node_supabase
node_auth -->|"checks identity and role"| node_supabase
node_userapi -->|"reads and updates records"| node_supabase
node_paymentapi -->|"manages payment requests"| node_supabase
node_vehicleapi -->|"manages vehicles"| node_supabase
node_staffapi -->|"records check-in"| node_supabase
node_adminapi -->|"manages accounts"| node_supabase
node_privacy -->|"purges personal data"| node_supabase
node_vehicleapi -->|"extracts plates"| node_roboflow

click node_app "https://github.com/tinh582/projectht/blob/main/frontend/src/App.jsx"
click node_landing "https://github.com/tinh582/projectht/blob/main/frontend/src/components/Landing.jsx"
click node_login "https://github.com/tinh582/projectht/blob/main/frontend/src/components/Login.jsx"
click node_register "https://github.com/tinh582/projectht/blob/main/frontend/src/components/Register.jsx"
click node_subscription "https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/ActivationPricing.jsx"
click node_customer "https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/Dashboard.jsx"
click node_vehicles "https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/VehicleDialog.jsx"
click node_slotpicker "https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/SlotPreviewModal.jsx"
click node_payment "https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/UserPayment.jsx"
click node_staffui "https://github.com/tinh582/projectht/blob/main/frontend/src/components/staff/StaffDashboard.jsx"
click node_checkinui "https://github.com/tinh582/projectht/blob/main/frontend/src/components/staff/StaffCheckin.jsx"
click node_adminui "https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminDashboard.jsx"
click node_adminusersui "https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminUsers.jsx"
click node_adminpricingui "https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminPricing.jsx"
click node_adminreportsui "https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminReports.jsx"
click node_adminzonesui "https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminZones.jsx"
click node_apiclient "https://github.com/tinh582/projectht/blob/main/frontend/src/lib/api.js"
click node_express "https://github.com/tinh582/projectht/blob/main/backend/app.js"
click node_auth "https://github.com/tinh582/projectht/blob/main/backend/src/auth.js"
click node_userapi "https://github.com/tinh582/projectht/blob/main/backend/src/components/user/Dashboard.js"
click node_paymentapi "https://github.com/tinh582/projectht/blob/main/backend/src/components/user/UserPayment.js"
click node_vehicleapi "https://github.com/tinh582/projectht/blob/main/backend/src/components/user/VehicleDialog.js"
click node_staffapi "https://github.com/tinh582/projectht/blob/main/backend/src/components/staff/StaffCheckin.js"
click node_adminapi "https://github.com/tinh582/projectht/blob/main/backend/src/components/admin/AdminUsers.js"
click node_privacy "https://github.com/tinh582/projectht/blob/main/backend/src/privacyEngine.js"
click node_dbclient "https://github.com/tinh582/projectht/blob/main/backend/config/supabase.js"

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_login,node_register,node_subscription,node_customer,node_vehicles,node_slotpicker,node_payment,node_visitor toneBlue
class node_staffui,node_checkinui toneAmber
class node_adminui,node_adminusersui,node_adminpricingui,node_adminreportsui,node_adminzonesui toneMint
class node_apiclient,node_express,node_auth,node_userapi,node_paymentapi,node_vehicleapi,node_staffapi,node_adminapi,node_privacy toneRose
class node_dbclient,node_supabase,node_roboflow toneIndigo
```

## Components

### Customer experience

- [App routing](https://github.com/tinh582/projectht/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Landing](https://github.com/tinh582/projectht/blob/main/frontend/src/components/Landing.jsx): `frontend/src/components/Landing.jsx`
- [Sign-in](https://github.com/tinh582/projectht/blob/main/frontend/src/components/Login.jsx): `frontend/src/components/Login.jsx`
- [Registration](https://github.com/tinh582/projectht/blob/main/frontend/src/components/Register.jsx): `frontend/src/components/Register.jsx`
- [Subscription plans](https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/ActivationPricing.jsx): `frontend/src/components/user/ActivationPricing.jsx`
- [Customer dashboard](https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/Dashboard.jsx): `frontend/src/components/user/Dashboard.jsx`
- [Vehicle management](https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/VehicleDialog.jsx): `frontend/src/components/user/VehicleDialog.jsx`
- [Slot selection](https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/SlotPreviewModal.jsx): `frontend/src/components/user/SlotPreviewModal.jsx`
- [Customer payments](https://github.com/tinh582/projectht/blob/main/frontend/src/components/user/UserPayment.jsx): `frontend/src/components/user/UserPayment.jsx`

### Staff operations

- [Staff dashboard](https://github.com/tinh582/projectht/blob/main/frontend/src/components/staff/StaffDashboard.jsx): `frontend/src/components/staff/StaffDashboard.jsx`
- [Check-in screen](https://github.com/tinh582/projectht/blob/main/frontend/src/components/staff/StaffCheckin.jsx): `frontend/src/components/staff/StaffCheckin.jsx`

### Administration

- [Admin dashboard](https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminDashboard.jsx): `frontend/src/components/admin/AdminDashboard.jsx`
- [User management](https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminUsers.jsx): `frontend/src/components/admin/AdminUsers.jsx`
- [Pricing management](https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminPricing.jsx): `frontend/src/components/admin/AdminPricing.jsx`
- [Reports](https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminReports.jsx): `frontend/src/components/admin/AdminReports.jsx`
- [Zone management](https://github.com/tinh582/projectht/blob/main/frontend/src/components/admin/AdminZones.jsx): `frontend/src/components/admin/AdminZones.jsx`

### API and access

- [API client](https://github.com/tinh582/projectht/blob/main/frontend/src/lib/api.js): `frontend/src/lib/api.js`
- [Express routing](https://github.com/tinh582/projectht/blob/main/backend/app.js): `backend/app.js`
- [Authentication and roles](https://github.com/tinh582/projectht/blob/main/backend/src/auth.js): `backend/src/auth.js`
- [Customer API](https://github.com/tinh582/projectht/blob/main/backend/src/components/user/Dashboard.js): `backend/src/components/user/Dashboard.js`
- [Payment API](https://github.com/tinh582/projectht/blob/main/backend/src/components/user/UserPayment.js): `backend/src/components/user/UserPayment.js`
- [Vehicle API](https://github.com/tinh582/projectht/blob/main/backend/src/components/user/VehicleDialog.js): `backend/src/components/user/VehicleDialog.js`
- [Staff check-in API](https://github.com/tinh582/projectht/blob/main/backend/src/components/staff/StaffCheckin.js): `backend/src/components/staff/StaffCheckin.js`
- [Admin user API](https://github.com/tinh582/projectht/blob/main/backend/src/components/admin/AdminUsers.js): `backend/src/components/admin/AdminUsers.js`
- [Sensitive-data purge](https://github.com/tinh582/projectht/blob/main/backend/src/privacyEngine.js): `backend/src/privacyEngine.js`

### Data and integrations

- [Supabase client setup](https://github.com/tinh582/projectht/blob/main/backend/config/supabase.js): `backend/config/supabase.js`
- **Supabase Auth and PostgreSQL**
- **Roboflow plate workflow**

### Other components

- **Parking users**

## Connections

- Parking users → Landing: opens (evidence: `frontend/src/components/Landing.jsx`)
- Landing → App routing: requests navigation (evidence: `frontend/src/App.jsx`)
- App routing → Sign-in: renders (evidence: `frontend/src/App.jsx`)
- App routing → Registration: renders (evidence: `frontend/src/App.jsx`)
- App routing → Subscription plans: gates access (evidence: `frontend/src/App.jsx`)
- App routing → Customer dashboard: loads dashboard (evidence: `frontend/src/App.jsx`)
- App routing → Staff dashboard: loads by role (evidence: `frontend/src/App.jsx`)
- App routing → Admin dashboard: loads by role (evidence: `frontend/src/App.jsx`)
- Customer dashboard → Vehicle management: manages vehicles (evidence: `frontend/src/components/user/Dashboard.jsx`)
- Customer dashboard → Customer payments: opens payments (evidence: `frontend/src/components/user/Dashboard.jsx`)
- Customer dashboard → Slot selection: selects slots (evidence: `frontend/src/components/user/Dashboard.jsx`)
- Staff dashboard → Check-in screen: offers check-in
- Admin dashboard → User management: offers user controls
- Admin dashboard → Pricing management: offers pricing controls
- Admin dashboard → Reports: offers reports
- Admin dashboard → Zone management: offers zone controls
- Sign-in → API client: calls API (evidence: `frontend/src/components/Login.jsx`)
- Registration → API client: calls API (evidence: `frontend/src/components/Register.jsx`)
- App routing → API client: verifies session (evidence: `frontend/src/App.jsx`)
- API client → Express routing: sends requests
- Express routing → Authentication and roles: applies authorization (evidence: `backend/app.js`)
- Express routing → Customer API: mounts routes (evidence: `backend/app.js`)
- Express routing → Payment API: mounts routes (evidence: `backend/app.js`)
- Express routing → Vehicle API: mounts routes (evidence: `backend/app.js`)
- Express routing → Staff check-in API: mounts routes (evidence: `backend/app.js`)
- Express routing → Admin user API: mounts routes (evidence: `backend/app.js`)
- Customer API → Sensitive-data purge: purges user data (evidence: `backend/src/components/user/Dashboard.js`)
- Admin user API → Sensitive-data purge: purges user data (evidence: `backend/src/components/admin/AdminUsers.js`)
- Supabase client setup → Supabase Auth and PostgreSQL: configures clients
- Authentication and roles → Supabase Auth and PostgreSQL: checks identity and role (evidence: `backend/src/auth.js`)
- Customer API → Supabase Auth and PostgreSQL: reads and updates records (evidence: `backend/src/components/user/Dashboard.js`)
- Payment API → Supabase Auth and PostgreSQL: manages payment requests
- Vehicle API → Supabase Auth and PostgreSQL: manages vehicles
- Staff check-in API → Supabase Auth and PostgreSQL: records check-in
- Admin user API → Supabase Auth and PostgreSQL: manages accounts (evidence: `backend/src/components/admin/AdminUsers.js`)
- Sensitive-data purge → Supabase Auth and PostgreSQL: purges personal data (evidence: `backend/src/privacyEngine.js`)
- Vehicle API → Roboflow plate workflow: extracts plates