# macromaster101/vero_salon_website architecture

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

- Interactive diagram: https://gitdiagram.com/macromaster101/vero_salon_website
- Repository: https://github.com/macromaster101/vero_salon_website

## Overview

Vero Salon is a salon marketing site and booking platform. Customers discover services, complete a five-step booking, and manage visits through account popups; staff, owners, and admins use role-specific operational dashboards. The graph preserves documented booking, account, review, content, scheduling, team, and notification capabilities. Some subsystem links rely on README descriptions because their implementation files were not sampled; those links are cited to the README rather than implying source inspection.

Main entry points: [`src/app/(site)/page.tsx`](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/(site)/page.tsx) (Marketing site), [`src/app/book/actions.ts`](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/book/actions.ts) (Booking actions), [`src/components/account/account-modals.tsx`](https://github.com/macromaster101/vero_salon_website/blob/main/src/components/account/account-modals.tsx) (Account popups), [`src/app/admin/(protected)/page.tsx`](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/admin/(protected)/page.tsx) (Admin console)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public salon site"]
  node_site["Marketing site<br/>[page.tsx]"]
  node_services["Service catalog<br/>[services-tabs.tsx]"]
  node_home_nav["Home navigation<br/>[bottom-nav.tsx]"]
  node_translations["Translations<br/>[translations.ts]"]
end

subgraph group_booking["Booking and visits"]
  node_booking_ui["Booking wizard<br/>[booking-wizard.tsx]"]
  node_booking_actions["Booking actions<br/>[actions.ts]"]
  node_availability["Availability rules<br/>[availability.ts]"]
  node_visit_management["Visit management<br/>[booking-actions.ts]"]
end

subgraph group_accounts["Accounts and identity"]
  node_accounts_ui["Account popups<br/>[account-modals.tsx]"]
  node_account_actions["Account actions<br/>[actions.ts]"]
  node_avatar["Avatar resolution<br/>[avatar.ts]"]
  node_auth["Auth and role guards<br/>[auth.ts]"]
  node_auth_callback["Auth callback<br/>[route.ts]"]
end

subgraph group_operations["Salon operations"]
  node_admin["Admin console<br/>[page.tsx]"]
  node_staff["Staff desk<br/>[page.tsx]"]
  node_owner["Owner dashboard<br/>[page.tsx]"]
  node_reviews["Reviews<br/>[reviews.ts]"]
  node_content["Site content<br/>[get.ts]"]
end

subgraph group_data["Data and integrations"]
  node_queries["Salon data queries<br/>[queries.ts]"]
  node_supabase_server["Server data client<br/>[server.ts]"]
  node_supabase_admin["Privileged data client<br/>[admin.ts]"]
  node_notifications["Visit notifications<br/>[index.ts]"]
  node_database[("Supabase database")]
end

node_visitor(("Customer"))
node_email["Resend email"]
node_whatsapp["WhatsApp API"]

node_visitor -->|"browses"| node_site
node_site -->|"shows services"| node_services
node_site -->|"opens booking"| node_booking_ui
node_booking_ui -->|"submits booking"| node_booking_actions
node_booking_actions -->|"checks slots"| node_availability
node_booking_actions -->|"stores booking"| node_database
node_visitor -->|"manages visits"| node_accounts_ui
node_accounts_ui -->|"reschedules or cancels"| node_visit_management
node_accounts_ui -->|"updates account"| node_account_actions
node_accounts_ui -->|"resolves avatar"| node_avatar
node_auth_callback -->|"exchanges session"| node_supabase_server
node_auth_callback -->|"loads profile"| node_auth
node_auth -->|"reads session"| node_supabase_server
node_auth -->|"reads profile"| node_database
node_visitor -->|"administers salon"| node_admin
node_visitor -->|"manages own schedule"| node_staff
node_visitor -->|"manages salon"| node_owner
node_admin -->|"manages salon records"| node_database
node_staff -->|"updates assigned visits"| node_database
node_owner -->|"manages salon records"| node_database
node_admin -->|"moderates reviews"| node_reviews
node_visitor -->|"rates completed visits"| node_reviews
node_admin -->|"edits site content"| node_content
node_site -->|"loads content"| node_content
node_site -->|"loads salon data"| node_queries
node_queries -->|"queries data"| node_supabase_server
node_supabase_server -->|"reads and writes"| node_database
node_booking_actions -->|"notifies visit changes"| node_notifications
node_visit_management -->|"notifies changes"| node_notifications
node_notifications -->|"sends email"| node_email
node_notifications -->|"sends staff alerts"| node_whatsapp

click node_site "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/(site)/page.tsx"
click node_services "https://github.com/macromaster101/vero_salon_website/blob/main/src/components/home/services-tabs.tsx"
click node_home_nav "https://github.com/macromaster101/vero_salon_website/blob/main/src/components/home/bottom-nav.tsx"
click node_translations "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/i18n/translations.ts"
click node_booking_ui "https://github.com/macromaster101/vero_salon_website/blob/main/src/components/booking/booking-wizard.tsx"
click node_booking_actions "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/book/actions.ts"
click node_availability "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/availability.ts"
click node_visit_management "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/account/booking-actions.ts"
click node_accounts_ui "https://github.com/macromaster101/vero_salon_website/blob/main/src/components/account/account-modals.tsx"
click node_account_actions "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/account/actions.ts"
click node_avatar "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/avatar.ts"
click node_auth "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/supabase/auth.ts"
click node_auth_callback "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/auth/callback/route.ts"
click node_admin "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/admin/(protected)/page.tsx"
click node_staff "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/staff/page.tsx"
click node_owner "https://github.com/macromaster101/vero_salon_website/blob/main/src/app/owner/(protected)/page.tsx"
click node_reviews "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/reviews.ts"
click node_content "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/content/get.ts"
click node_queries "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/queries.ts"
click node_supabase_server "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/supabase/server.ts"
click node_supabase_admin "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/supabase/admin.ts"
click node_notifications "https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/notify/index.ts"

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_site,node_services,node_home_nav,node_translations toneBlue
class node_booking_ui,node_booking_actions,node_availability,node_visit_management toneAmber
class node_accounts_ui,node_account_actions,node_avatar,node_auth,node_auth_callback,node_whatsapp toneMint
class node_admin,node_staff,node_owner,node_reviews,node_content toneRose
class node_queries,node_supabase_server,node_supabase_admin,node_notifications,node_database,node_visitor,node_email toneIndigo
```

## Components

### Public salon site

- [Marketing site](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/(site)/page.tsx): `src/app/(site)/page.tsx`
- [Service catalog](https://github.com/macromaster101/vero_salon_website/blob/main/src/components/home/services-tabs.tsx): `src/components/home/services-tabs.tsx`
- [Home navigation](https://github.com/macromaster101/vero_salon_website/blob/main/src/components/home/bottom-nav.tsx): `src/components/home/bottom-nav.tsx`
- [Translations](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/i18n/translations.ts): `src/lib/i18n/translations.ts`

### Booking and visits

- [Booking wizard](https://github.com/macromaster101/vero_salon_website/blob/main/src/components/booking/booking-wizard.tsx): `src/components/booking/booking-wizard.tsx`
- [Booking actions](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/book/actions.ts): `src/app/book/actions.ts`
- [Availability rules](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/availability.ts): `src/lib/availability.ts`
- [Visit management](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/account/booking-actions.ts): `src/app/account/booking-actions.ts`

### Accounts and identity

- [Account popups](https://github.com/macromaster101/vero_salon_website/blob/main/src/components/account/account-modals.tsx): `src/components/account/account-modals.tsx`
- [Account actions](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/account/actions.ts): `src/app/account/actions.ts`
- [Avatar resolution](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/avatar.ts): `src/lib/avatar.ts`
- [Auth and role guards](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/supabase/auth.ts): `src/lib/supabase/auth.ts`
- [Auth callback](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/auth/callback/route.ts): `src/app/auth/callback/route.ts`

### Salon operations

- [Admin console](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/admin/(protected)/page.tsx): `src/app/admin/(protected)/page.tsx`
- [Staff desk](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/staff/page.tsx): `src/app/staff/page.tsx`
- [Owner dashboard](https://github.com/macromaster101/vero_salon_website/blob/main/src/app/owner/(protected)/page.tsx): `src/app/owner/(protected)/page.tsx`
- [Reviews](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/reviews.ts): `src/lib/reviews.ts`
- [Site content](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/content/get.ts): `src/lib/content/get.ts`

### Data and integrations

- [Salon data queries](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/queries.ts): `src/lib/queries.ts`
- [Server data client](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/supabase/server.ts): `src/lib/supabase/server.ts`
- [Privileged data client](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/supabase/admin.ts): `src/lib/supabase/admin.ts`
- [Visit notifications](https://github.com/macromaster101/vero_salon_website/blob/main/src/lib/notify/index.ts): `src/lib/notify/index.ts`
- **Supabase database**

### Other components

- **Customer**
- **Resend email**
- **WhatsApp API**

## Connections

- Customer → Marketing site: browses
- Marketing site → Service catalog: shows services (evidence: `src/app/(site)/page.tsx`)
- Marketing site → Booking wizard: opens booking (evidence: `src/app/(site)/page.tsx`)
- Booking wizard → Booking actions: submits booking
- Booking actions → Availability rules: checks slots
- Booking actions → Supabase database: stores booking
- Customer → Account popups: manages visits
- Account popups → Visit management: reschedules or cancels
- Account popups → Account actions: updates account
- Account popups → Avatar resolution: resolves avatar (evidence: `src/components/account/account-modals.tsx`)
- Auth callback → Server data client: exchanges session (evidence: `src/app/auth/callback/route.ts`)
- Auth callback → Auth and role guards: loads profile (evidence: `src/app/auth/callback/route.ts`)
- Auth and role guards → Server data client: reads session (evidence: `src/lib/supabase/auth.ts`)
- Auth and role guards → Supabase database: reads profile (evidence: `src/lib/supabase/auth.ts`)
- Customer → Admin console: administers salon
- Customer → Staff desk: manages own schedule
- Customer → Owner dashboard: manages salon
- Admin console → Supabase database: manages salon records
- Staff desk → Supabase database: updates assigned visits
- Owner dashboard → Supabase database: manages salon records
- Admin console → Reviews: moderates reviews
- Customer → Reviews: rates completed visits
- Admin console → Site content: edits site content
- Marketing site → Site content: loads content (evidence: `src/app/(site)/page.tsx`)
- Marketing site → Salon data queries: loads salon data (evidence: `src/app/(site)/page.tsx`)
- Salon data queries → Server data client: queries data (evidence: `src/lib/queries.ts`)
- Server data client → Supabase database: reads and writes
- Booking actions → Visit notifications: notifies visit changes
- Visit management → Visit notifications: notifies changes
- Visit notifications → Resend email: sends email
- Visit notifications → WhatsApp API: sends staff alerts