# tinezxc/hotelcheckin architecture

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

- Interactive diagram: https://gitdiagram.com/tinezxc/hotelcheckin
- Repository: https://github.com/tinezxc/hotelcheckin

## Overview

CheckinCmdi is a browser-based hotel check-in and accommodation management application, with guest, staff, and admin-facing pages. The apparent guest journey spans account registration and verification, room selection, and a client dashboard; staff tools cover check-in and hotel operations, while admin screens expose operational controls. The README provides no capability details, so those branches are inferred from the file tree. Sampled code confirms Supabase-backed session, profile, room, and notification access; connections among unsampled feature modules are omitted rather than assumed.

Main entry points: [`js/client-dashboard.js`](https://github.com/tinezxc/hotelcheckin/blob/main/js/client-dashboard.js) (Guest dashboard), [`js/register.js`](https://github.com/tinezxc/hotelcheckin/blob/main/js/register.js) (Account registration), [`js/utils/auth-guard.js`](https://github.com/tinezxc/hotelcheckin/blob/main/js/utils/auth-guard.js) (Authentication guard), [`js/supabase-client.js`](https://github.com/tinezxc/hotelcheckin/blob/main/js/supabase-client.js) (Supabase client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_guest["Guest experience"]
  node_register["Account registration<br/>[register.js]"]
  node_otp["OTP verification<br/>[verify-otp.js]"]
  node_login["Sign in<br/>[login.js]"]
  node_accommodation["Accommodation<br/>[accommodation.js]"]
  node_room_choice["Room selection<br/>[choose-room.js]"]
  node_client_dashboard["Guest dashboard"]
  node_profile["Guest profile<br/>[profile.js]"]
end

subgraph group_staff["Staff operations"]
  node_checkin["Staff check-in<br/>[staff-checkin.js]"]
  node_staff_dashboard["Staff dashboard<br/>[staff-dashboard.js]"]
  node_guest_management["Guest management<br/>[staff-guests.js]"]
  node_requests["Service requests<br/>[staff-requests.js]"]
  node_rooms["Room operations<br/>[staff-rooms.js]"]
  node_reports["Staff reports<br/>[staff-reports.js]"]
  node_settings["Staff settings<br/>[staff-settings.js]"]
end

subgraph group_admin["Administration"]
  node_admin_dashboard["Admin dashboard<br/>[admin-dashboard.js]"]
  node_user_admin["User and role admin<br/>[admin-users.js]"]
  node_security["Security controls<br/>[admin-security.js]"]
  node_audit["Audit log<br/>[admin-audit.js]"]
  node_data_admin["Data management<br/>[admin-data.js]"]
  node_integrations["Integration settings"]
  node_health["System health<br/>[admin-health.js]"]
end

subgraph group_shared["Shared services"]
  node_rbac["Role-based access<br/>[rbac.js]"]
  node_auth_guard["Authentication guard<br/>[auth-guard.js]"]
  node_supabase_client["Supabase client<br/>[supabase-client.js]"]
  node_skeleton["Loading placeholders"]
end

subgraph group_notify["Notifications"]
  node_notification_service["Notification service"]
  node_realtime["Notification realtime"]
  node_notification_ui["Notification interface<br/>[notification.js]"]
end

node_guest_actor(("Guest"))
node_staff_actor(("Staff member"))
node_admin_actor(("Administrator"))
node_supabase[("Supabase backend")]

node_guest_actor -.->|"registers"| node_register
node_guest_actor -.->|"signs in"| node_login
node_register -.->|"verifies account"| node_otp
node_guest_actor -.->|"views stays"| node_accommodation
node_guest_actor -.->|"chooses room"| node_room_choice
node_guest_actor -.->|"views status"| node_client_dashboard
node_guest_actor -.->|"edits profile"| node_profile
node_staff_actor -.->|"checks in guests"| node_checkin
node_staff_actor -.->|"views operations"| node_staff_dashboard
node_staff_actor -.->|"manages guests"| node_guest_management
node_staff_actor -.->|"handles requests"| node_requests
node_staff_actor -.->|"manages rooms"| node_rooms
node_staff_actor -.->|"reviews reports"| node_reports
node_staff_actor -.->|"configures staff"| node_settings
node_admin_actor -.->|"views overview"| node_admin_dashboard
node_admin_actor -.->|"manages users"| node_user_admin
node_admin_actor -.->|"configures security"| node_security
node_admin_actor -.->|"reviews activity"| node_audit
node_admin_actor -.->|"manages data"| node_data_admin
node_admin_actor -.->|"manages integrations"| node_integrations
node_admin_actor -.->|"checks health"| node_health
node_client_dashboard -->|"reads session, profile, room"| node_supabase
node_auth_guard -->|"checks session and role"| node_supabase
node_supabase_client -->|"creates client"| node_supabase
node_notification_service -->|"reads and updates notifications"| node_supabase
node_realtime -->|"subscribes to inserts"| node_supabase
node_client_dashboard -->|"loads helpers"| node_skeleton

click node_register "https://github.com/tinezxc/hotelcheckin/blob/main/js/register.js"
click node_otp "https://github.com/tinezxc/hotelcheckin/blob/main/js/verify-otp.js"
click node_login "https://github.com/tinezxc/hotelcheckin/blob/main/js/login.js"
click node_accommodation "https://github.com/tinezxc/hotelcheckin/blob/main/js/accommodation.js"
click node_room_choice "https://github.com/tinezxc/hotelcheckin/blob/main/js/choose-room.js"
click node_client_dashboard "https://github.com/tinezxc/hotelcheckin/blob/main/js/client-dashboard.js"
click node_profile "https://github.com/tinezxc/hotelcheckin/blob/main/js/profile.js"
click node_checkin "https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-checkin.js"
click node_staff_dashboard "https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-dashboard.js"
click node_guest_management "https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-guests.js"
click node_requests "https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-requests.js"
click node_rooms "https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-rooms.js"
click node_reports "https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-reports.js"
click node_settings "https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-settings.js"
click node_admin_dashboard "https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-dashboard.js"
click node_user_admin "https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-users.js"
click node_security "https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-security.js"
click node_audit "https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-audit.js"
click node_data_admin "https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-data.js"
click node_integrations "https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-integrations.js"
click node_health "https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-health.js"
click node_rbac "https://github.com/tinezxc/hotelcheckin/blob/main/js/rbac.js"
click node_auth_guard "https://github.com/tinezxc/hotelcheckin/blob/main/js/utils/auth-guard.js"
click node_supabase_client "https://github.com/tinezxc/hotelcheckin/blob/main/js/supabase-client.js"
click node_notification_service "https://github.com/tinezxc/hotelcheckin/blob/main/js/notifications/notification-service.js"
click node_realtime "https://github.com/tinezxc/hotelcheckin/blob/main/js/notifications/notification-realtime.js"
click node_notification_ui "https://github.com/tinezxc/hotelcheckin/blob/main/js/notifications/notification.js"
click node_skeleton "https://github.com/tinezxc/hotelcheckin/blob/main/js/utils/skeleton-loading.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_register,node_otp,node_login,node_accommodation,node_room_choice,node_client_dashboard,node_profile toneBlue
class node_checkin,node_staff_dashboard,node_guest_management,node_requests,node_rooms,node_reports,node_settings,node_supabase toneAmber
class node_admin_dashboard,node_user_admin,node_security,node_audit,node_data_admin,node_integrations,node_health toneMint
class node_rbac,node_auth_guard,node_supabase_client,node_skeleton toneRose
class node_notification_service,node_realtime,node_notification_ui,node_guest_actor,node_staff_actor,node_admin_actor toneIndigo
```

## Components

### Guest experience

- [Account registration](https://github.com/tinezxc/hotelcheckin/blob/main/js/register.js): `js/register.js`
- [OTP verification](https://github.com/tinezxc/hotelcheckin/blob/main/js/verify-otp.js): `js/verify-otp.js`
- [Sign in](https://github.com/tinezxc/hotelcheckin/blob/main/js/login.js): `js/login.js`
- [Accommodation](https://github.com/tinezxc/hotelcheckin/blob/main/js/accommodation.js): `js/accommodation.js`
- [Room selection](https://github.com/tinezxc/hotelcheckin/blob/main/js/choose-room.js): `js/choose-room.js`
- [Guest dashboard](https://github.com/tinezxc/hotelcheckin/blob/main/js/client-dashboard.js): `js/client-dashboard.js`
- [Guest profile](https://github.com/tinezxc/hotelcheckin/blob/main/js/profile.js): `js/profile.js`

### Staff operations

- [Staff check-in](https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-checkin.js): `js/staff-checkin.js`
- [Staff dashboard](https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-dashboard.js): `js/staff-dashboard.js`
- [Guest management](https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-guests.js): `js/staff-guests.js`
- [Service requests](https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-requests.js): `js/staff-requests.js`
- [Room operations](https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-rooms.js): `js/staff-rooms.js`
- [Staff reports](https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-reports.js): `js/staff-reports.js`
- [Staff settings](https://github.com/tinezxc/hotelcheckin/blob/main/js/staff-settings.js): `js/staff-settings.js`

### Administration

- [Admin dashboard](https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-dashboard.js): `js/admin-dashboard.js`
- [User and role admin](https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-users.js): `js/admin-users.js`
- [Security controls](https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-security.js): `js/admin-security.js`
- [Audit log](https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-audit.js): `js/admin-audit.js`
- [Data management](https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-data.js): `js/admin-data.js`
- [Integration settings](https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-integrations.js): `js/admin-integrations.js`
- [System health](https://github.com/tinezxc/hotelcheckin/blob/main/js/admin-health.js): `js/admin-health.js`

### Shared services

- [Role-based access](https://github.com/tinezxc/hotelcheckin/blob/main/js/rbac.js): `js/rbac.js`
- [Authentication guard](https://github.com/tinezxc/hotelcheckin/blob/main/js/utils/auth-guard.js): `js/utils/auth-guard.js`
- [Supabase client](https://github.com/tinezxc/hotelcheckin/blob/main/js/supabase-client.js): `js/supabase-client.js`
- [Loading placeholders](https://github.com/tinezxc/hotelcheckin/blob/main/js/utils/skeleton-loading.js): `js/utils/skeleton-loading.js`

### Notifications

- [Notification service](https://github.com/tinezxc/hotelcheckin/blob/main/js/notifications/notification-service.js): `js/notifications/notification-service.js`
- [Notification realtime](https://github.com/tinezxc/hotelcheckin/blob/main/js/notifications/notification-realtime.js): `js/notifications/notification-realtime.js`
- [Notification interface](https://github.com/tinezxc/hotelcheckin/blob/main/js/notifications/notification.js): `js/notifications/notification.js`

### Other components

- **Guest**
- **Staff member**
- **Administrator**
- **Supabase backend**

## Connections

- Guest → Account registration: registers
- Guest → Sign in: signs in
- Account registration → OTP verification: verifies account
- Guest → Accommodation: views stays
- Guest → Room selection: chooses room
- Guest → Guest dashboard: views status
- Guest → Guest profile: edits profile
- Staff member → Staff check-in: checks in guests
- Staff member → Staff dashboard: views operations
- Staff member → Guest management: manages guests
- Staff member → Service requests: handles requests
- Staff member → Room operations: manages rooms
- Staff member → Staff reports: reviews reports
- Staff member → Staff settings: configures staff
- Administrator → Admin dashboard: views overview
- Administrator → User and role admin: manages users
- Administrator → Security controls: configures security
- Administrator → Audit log: reviews activity
- Administrator → Data management: manages data
- Administrator → Integration settings: manages integrations
- Administrator → System health: checks health
- Guest dashboard → Supabase backend: reads session, profile, room (evidence: `js/client-dashboard.js`)
- Authentication guard → Supabase backend: checks session and role (evidence: `js/utils/auth-guard.js`)
- Supabase client → Supabase backend: creates client (evidence: `js/supabase-client.js`)
- Notification service → Supabase backend: reads and updates notifications (evidence: `js/notifications/notification-service.js`)
- Notification realtime → Supabase backend: subscribes to inserts (evidence: `js/notifications/notification-realtime.js`)
- Guest dashboard → Loading placeholders: loads helpers (evidence: `js/client-dashboard.js`)