# phannam151001-dau/cong_nghe_phan_mem architecture

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

- Interactive diagram: https://gitdiagram.com/phannam151001-dau/cong_nghe_phan_mem
- Repository: https://github.com/phannam151001-dau/cong_nghe_phan_mem

## Overview

SanCoPro is a football-pitch discovery and booking application with customer, pitch-owner, and administrator interfaces. The customer workflow is to browse and filter pitches, choose a pitch and time slots, submit a booking, and view a simulated payment QR; authentication is shared across role-based areas. The owner interface manages pitches and payment confirmations, while administrators manage accounts and review platform activity. Wiring is based on sampled React/PHP source and endpoint names in the tree; unsampled endpoint internals and some App data-loading calls are not asserted.

Main entry points: [`src/App.jsx`](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/App.jsx) (App coordinator), [`src/context/AuthContext.jsx`](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/context/AuthContext.jsx) (Auth state), [`src/components/BookingModal.jsx`](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/BookingModal.jsx) (Booking flow), [`src/components/OwnerSection.jsx`](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/OwnerSection.jsx) (Owner console)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_customer["Customer experience"]
  node_app["App coordinator<br/>[App.jsx]"]
  node_hero["Pitch discovery<br/>[HeroSection.jsx]"]
  node_filters["Pitch filters<br/>[FilterSection.jsx]"]
  node_pitchcard["Pitch listing<br/>[PitchCard.jsx]"]
  node_booking["Booking flow<br/>[BookingModal.jsx]"]
  node_mybookings["My bookings<br/>[MyBookings.jsx]"]
  node_qr["Payment QR<br/>[qr.js]"]
end

subgraph group_identity["Identity and roles"]
  node_authmodal["Sign-in forms<br/>[AuthModal.jsx]"]
  node_authcontext["Auth state<br/>[AuthContext.jsx]"]
end

subgraph group_management["Operations interfaces"]
  node_ownerui["Owner console<br/>[OwnerSection.jsx]"]
  node_adminui["Admin console<br/>[AdminSection.jsx]"]
end

subgraph group_server["PHP backend"]
  node_session[("PHP session<br/>[auth_status.php]")]
  node_api_login["Login API<br/>[login.php]"]
  node_api_register["Registration API<br/>[register.php]"]
  node_api_auth["Auth status API<br/>[auth_status.php]"]
  node_api_logout["Logout API<br/>[logout.php]"]
  node_api_booking["Booking API<br/>[datsan.php]"]
  node_api_owner["Owner pitch API<br/>[addsan.php]"]
  node_api_status["Pitch status API<br/>[dongmosan.php]"]
  node_api_payment["Payment API<br/>[thanhtoan.php]"]
  node_api_admin["Admin API<br/>[admin.php]"]
  node_db[("Application database<br/>[config.php]")]
end

node_customer(("Customer"))

node_customer -->|"uses"| node_app
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_filters
node_app -->|"renders"| node_pitchcard
node_app -->|"opens"| node_booking
node_app -->|"renders"| node_mybookings
node_app -->|"opens"| node_authmodal
node_app -->|"role-gates"| node_ownerui
node_app -->|"role-gates"| node_adminui
node_authmodal -->|"calls"| node_authcontext
node_authcontext -->|"posts credentials"| node_api_login
node_authcontext -->|"posts registration"| node_api_register
node_authcontext -->|"loads session"| node_api_auth
node_authcontext -->|"requests logout"| node_api_logout
node_api_auth -->|"reads"| node_session
node_booking -->|"reads identity"| node_authcontext
node_booking -->|"submits booking"| node_api_booking
node_booking -->|"creates QR"| node_qr
node_ownerui -->|"loads and adds"| node_api_owner
node_ownerui -->|"changes status"| node_api_status
node_ownerui -->|"confirms payment"| node_api_payment
node_adminui -->|"loads accounts"| node_api_admin
node_api_owner -->|"queries and writes"| node_db
node_api_register -->|"creates account"| node_db

click node_app "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/App.jsx"
click node_hero "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/HeroSection.jsx"
click node_filters "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/FilterSection.jsx"
click node_pitchcard "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/PitchCard.jsx"
click node_booking "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/BookingModal.jsx"
click node_mybookings "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/MyBookings.jsx"
click node_qr "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/utils/qr.js"
click node_authmodal "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/AuthModal.jsx"
click node_authcontext "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/context/AuthContext.jsx"
click node_session "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/auth_status.php"
click node_ownerui "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/OwnerSection.jsx"
click node_adminui "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/AdminSection.jsx"
click node_api_login "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/login.php"
click node_api_register "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/register.php"
click node_api_auth "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/auth_status.php"
click node_api_logout "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/logout.php"
click node_api_booking "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/datsan.php"
click node_api_owner "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/addsan.php"
click node_api_status "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/dongmosan.php"
click node_api_payment "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/thanhtoan.php"
click node_api_admin "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/admin.php"
click node_db "https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/config.php"

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_hero,node_filters,node_pitchcard,node_booking,node_mybookings,node_qr toneBlue
class node_authmodal,node_authcontext toneAmber
class node_ownerui,node_adminui toneMint
class node_session,node_api_login,node_api_register,node_api_auth,node_api_logout,node_api_booking,node_api_owner,node_api_status,node_api_payment,node_api_admin,node_db toneRose
class node_customer toneIndigo
```

## Components

### Customer experience

- [App coordinator](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/App.jsx): `src/App.jsx`
- [Pitch discovery](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/HeroSection.jsx): `src/components/HeroSection.jsx`
- [Pitch filters](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/FilterSection.jsx): `src/components/FilterSection.jsx`
- [Pitch listing](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/PitchCard.jsx): `src/components/PitchCard.jsx`
- [Booking flow](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/BookingModal.jsx): `src/components/BookingModal.jsx`
- [My bookings](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/MyBookings.jsx): `src/components/MyBookings.jsx`
- [Payment QR](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/utils/qr.js): `src/utils/qr.js`

### Identity and roles

- [Sign-in forms](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/AuthModal.jsx): `src/components/AuthModal.jsx`
- [Auth state](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`

### Operations interfaces

- [Owner console](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/OwnerSection.jsx): `src/components/OwnerSection.jsx`
- [Admin console](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/src/components/AdminSection.jsx): `src/components/AdminSection.jsx`

### PHP backend

- [PHP session](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/auth_status.php): `backend/auth_status.php`
- [Login API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/login.php): `backend/login.php`
- [Registration API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/register.php): `backend/register.php`
- [Auth status API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/auth_status.php): `backend/auth_status.php`
- [Logout API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/logout.php): `backend/logout.php`
- [Booking API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/datsan.php): `backend/datsan.php`
- [Owner pitch API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/addsan.php): `backend/addsan.php`
- [Pitch status API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/dongmosan.php): `backend/dongmosan.php`
- [Payment API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/thanhtoan.php): `backend/thanhtoan.php`
- [Admin API](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/admin.php): `backend/admin.php`
- [Application database](https://github.com/phannam151001-dau/cong_nghe_phan_mem/blob/main/backend/config.php): `backend/config.php`

### Other components

- **Customer**

## Connections

- Customer → App coordinator: uses
- App coordinator → Pitch discovery: renders
- App coordinator → Pitch filters: renders
- App coordinator → Pitch listing: renders
- App coordinator → Booking flow: opens
- App coordinator → My bookings: renders
- App coordinator → Sign-in forms: opens
- App coordinator → Owner console: role-gates
- App coordinator → Admin console: role-gates
- Sign-in forms → Auth state: calls
- Auth state → Login API: posts credentials
- Auth state → Registration API: posts registration
- Auth state → Auth status API: loads session
- Auth state → Logout API: requests logout
- Auth status API → PHP session: reads
- Booking flow → Auth state: reads identity
- Booking flow → Booking API: submits booking
- Booking flow → Payment QR: creates QR
- Owner console → Owner pitch API: loads and adds
- Owner console → Pitch status API: changes status
- Owner console → Payment API: confirms payment
- Admin console → Admin API: loads accounts
- Owner pitch API → Application database: queries and writes
- Registration API → Application database: creates account