Skip to content

Admin UI System Overview

The GolfChart Admin Portal is a dedicated frontend application located in the /admin/ directory. It is completely decoupled from the main user-facing application but shares the same Firebase backend infrastructure. It provides powerful tools for golf club management, reservations, and multi-tenant capabilities.

🏗️ Architecture Stack

  • Framework: React 19 + TypeScript
  • Bundler: Vite
  • Routing: React Router v7
  • Authentication & Database: Firebase Auth, Firestore
  • Charts & Data: Recharts for analytics and statistics dashboards

📁 Source Structure

The source code in /admin/src/ is structured by responsibility:

pages/ (Core Views)

The central architecture relies on module-specific pages that are registered to the React Router tree: - DashboardHome.tsx / DashboardPage.tsx: High-level statistical views and daily overview metrics. - BookingCalendarPage.tsx: A visual calendar component showing all cart reservations across dates and times. - BookingsListPage.tsx: A detailed data sheet for rentals with filtering capable of handling high volume data. - ClubsPage.tsx: The Multi-Tenant configuration panel to manage all 168+ imported Norwegian golf clubs. Allows searching and inline editing. - MembersPage.tsx: A CRM-like database for club members, ensuring they match with the rentals database. - CartInventoryPage.tsx / CartsPage.tsx: Inventory management of the physical golf carts. - CartPerformancePage.tsx / RevenueReportPage.tsx: Advanced analytics relying on recharts to render visual graphs showing ROI and utilization rates.

components/ & layouts/

Reusable UI components that standardize the visual language of the admin portal. This folder includes data tables, form layouts, status badges, and sidebars.

hooks/ & services/

  • Firebase/Data Services: Includes firebaseService.ts, clubService.ts, and specialized custom hooks that bind React state to real-time Firestore listeners. Any time a booking is updated live in the app, these hooks ensure the admin dashboard reflects the changes instantaneously without requiring page reloads.

🔒 Multi-Tenant Context

As the platform evolves from a single club (e.g., Ski GK) to a multi-tenant SaaS, the Admin UI uses a context/provider layer to ensure that an admin only sees the data (Rentals, Carts, Rules) associated with their clubId or if they have global supersystem rights.

🚀 Build & Deployment Pipeline

Instead of functioning in a vacuum, the build of the admin panel is integrated into the global package.json scripts: 

"build:all": "npm run build && npm --prefix admin run build"
When a deployment is kicked off, Vite builds the user app into dist/ and the admin app into dist/admin/, guaranteeing they deploy simultaneously via firebase deploy.