How hangbich045/tn-frontend works
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: api.ts API client · AdminLayout.tsx Admin access shell · AuthContext.tsx Session context · Navbar.tsx User navigation
Components 23
Public experience
- Homepage
src/app/page.tsx
Identity and shared UI
- Authentication screens
src/app/auth - Session context
src/context/AuthContext.tsx - User navigation
src/components/Navbar.tsx - Toast notifications
src/context/ToastContext.tsx - API client
src/lib/api.ts
User operations
- Equipment requests
src/app/equipment/page.tsx - Studio bookings
src/app/studio/page.tsx - Studio calendar
src/components/StudioCalendar.tsx - Activity history
src/app/history/page.tsx - User profile
src/app/profile/page.tsx
Administration
- Admin access shell
src/components/AdminLayout.tsx - Admin dashboard
src/app/admin/dashboard/page.tsx - Request approvals
src/app/admin/requests/page.tsx - Equipment management
src/app/admin/equipment/page.tsx - Category management
src/app/admin/categories/page.tsx - User management
src/app/admin/users/page.tsx - CMS management
src/app/admin/cms/page.tsx - Service content
src/app/admin/cms/services/page.tsx - Gallery content
src/app/admin/cms/gallery/page.tsx - Media upload route
src/app/fe-api/upload/route.ts
Other components
- Visitor or user
- Application API
Connections 41
- Visitor or user → Homepage: browses
src/app/page.tsx - Visitor or user → Equipment requests: requests gear
src/app/equipment/page.tsx - Visitor or user → Studio bookings: books time
src/app/studio/page.tsx - Homepage → User navigation: renders
src/app/page.tsx - Homepage → API client: fetches content
src/app/page.tsx - Equipment requests → User navigation: renders
src/app/equipment/page.tsx - Equipment requests → Session context: checks session
src/app/equipment/page.tsx - Equipment requests → API client: loads and submits
src/app/equipment/page.tsx - Studio bookings → User navigation: renders
src/app/studio/page.tsx - Studio bookings → Session context: checks session
src/app/studio/page.tsx - Studio bookings → API client: loads bookings
src/app/studio/page.tsx - Studio bookings → Studio calendar: renders
src/app/studio/page.tsx - Activity history → User navigation: renders
src/app/history/page.tsx - Activity history → Session context: checks session
src/app/history/page.tsx - Activity history → API client: loads activity
src/app/history/page.tsx - User profile → User navigation: renders
src/app/profile/page.tsx - User profile → Session context: checks session
src/app/profile/page.tsx - User profile → API client: uses API
src/app/profile/page.tsx - Authentication screens → Session context: uses session
src/app/auth/login/page.tsx - Session context → API client: authenticates
src/context/AuthContext.tsx - User navigation → Session context: reads session
src/components/Navbar.tsx - Admin access shell → Session context: checks role
src/components/AdminLayout.tsx - Admin dashboard → Admin access shell: renders within
src/app/admin/dashboard/page.tsx - Request approvals → Admin access shell: renders within
src/app/admin/requests/page.tsx - Equipment management → Admin access shell: renders within
src/app/admin/equipment/page.tsx - Category management → Admin access shell: renders within
src/app/admin/categories/page.tsx - User management → Admin access shell: renders within
src/app/admin/users/page.tsx - CMS management → Admin access shell: renders within
src/app/admin/cms/page.tsx - Service content → Admin access shell: renders within
src/app/admin/cms/services/page.tsx - Gallery content → Admin access shell: renders within
src/app/admin/cms/gallery/page.tsx - Request approvals → API client: loads requests
src/app/admin/requests/page.tsx - Admin dashboard → API client: uses API
src/app/admin/dashboard/page.tsx - Equipment management → API client: uses API
src/app/admin/equipment/page.tsx - Category management → API client: uses API
src/app/admin/categories/page.tsx - User management → API client: uses API
src/app/admin/users/page.tsx - CMS management → API client: uses API
src/app/admin/cms/page.tsx - Service content → API client: uses API
src/app/admin/cms/services/page.tsx - Gallery content → API client: uses API
src/app/admin/cms/gallery/page.tsx - Request approvals → Toast notifications: reports status
src/app/admin/requests/page.tsx - API client → Application API: HTTP requests
src/lib/api.ts - Media upload route → Application API: handles upload