# kemboijebby/capital-construct-interiors-website architecture

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

- Interactive diagram: https://gitdiagram.com/kemboijebby/capital-construct-interiors-website
- Repository: https://github.com/kemboijebby/capital-construct-interiors-website

## Overview

This is a web app for an interior-design studio: a public marketing and project-inquiry site alongside a staff CRM. Visitors browse services and projects, then can request a quote; staff sign in to review and manage leads, record activity, and initiate WhatsApp follow-ups. The graph reflects routes and calls visible in excerpts or the SOURCE INDEX. Quote persistence and several unsampled page behaviors are not verified, so those links are omitted or marked unverified.

Main entry points: [`src/App.tsx`](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/App.tsx) (Route Shell), [`src/integrations/supabase/client.ts`](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/integrations/supabase/client.ts) (Supabase Client), [`src/hooks/useAuth.tsx`](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/hooks/useAuth.tsx) (Auth State), [`src/pages/crm/LeadDetail.tsx`](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/crm/LeadDetail.tsx) (Lead Detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Studio Site"]
  node_site_layout["Site Layout<br/>[SiteLayout.tsx]"]
  node_public_pages["Studio Pages"]
  node_service_content["Site Content<br/>[site.ts]"]
  node_visual_components["Page Components"]
  node_quote["Quote Inquiry<br/>[Quote.tsx]"]
end

subgraph group_crm["Lead CRM"]
  node_auth_page["Sign-in Page<br/>[Auth.tsx]"]
  node_crm_layout["CRM Layout<br/>[CrmLayout.tsx]"]
  node_crm_dashboard["CRM Dashboard<br/>[Dashboard.tsx]"]
  node_lead_list["Lead List<br/>[Leads.tsx]"]
  node_lead_detail["Lead Detail<br/>[LeadDetail.tsx]"]
  node_crm_board["Lead Board<br/>[CRMBoard.tsx]"]
  node_crm_helpers["CRM Helpers<br/>[crm.ts]"]
  node_lead_scoring["Lead Scoring<br/>[leadScore.ts]"]
  node_messaging["WhatsApp Messaging<br/>[whatsapp.ts]"]
end

subgraph group_platform["App Platform"]
  node_app["Route Shell<br/>[App.tsx]"]
  node_ui["UI Primitives"]
end

subgraph group_backend["Backend Services"]
  node_auth_state["Auth State<br/>[useAuth.tsx]"]
  node_supabase_client["Supabase Client<br/>[client.ts]"]
  node_database[("Supabase Data")]
end

node_visitor(("Site Visitor"))
node_staff(("Studio Staff"))

node_visitor -->|"opens"| node_app
node_staff -->|"opens"| node_app
node_app -->|"routes public pages"| node_site_layout
node_app -->|"routes"| node_public_pages
node_app -->|"routes"| node_auth_page
node_app -->|"routes CRM"| node_crm_layout
node_app -->|"installs providers"| node_ui
node_app -->|"provides auth"| node_auth_state
node_site_layout -->|"renders site chrome"| node_visual_components
node_public_pages -->|"reads content"| node_service_content
node_public_pages -->|"renders components"| node_visual_components
node_public_pages -->|"links to inquiry"| node_quote
node_quote -.->|"may submit inquiry"| node_supabase_client
node_auth_page -->|"reads session"| node_auth_state
node_auth_page -->|"signs in or up"| node_supabase_client
node_auth_state -->|"tracks session"| node_supabase_client
node_crm_layout -->|"checks session"| node_auth_state
node_crm_dashboard -->|"loads CRM data"| node_supabase_client
node_lead_list -->|"loads leads"| node_supabase_client
node_lead_detail -->|"reads and updates"| node_supabase_client
node_lead_detail -->|"reads user"| node_auth_state
node_lead_detail -->|"uses helpers"| node_crm_helpers
node_lead_detail -->|"builds follow-ups"| node_messaging
node_crm_board -->|"uses messaging"| node_messaging
node_crm_board -->|"scores leads"| node_lead_scoring
node_supabase_client -->|"connects to"| node_database

click node_app "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/App.tsx"
click node_site_layout "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/components/site/SiteLayout.tsx"
click node_public_pages "https://github.com/kemboijebby/capital-construct-interiors-website/tree/main/src/pages"
click node_service_content "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/data/site.ts"
click node_visual_components "https://github.com/kemboijebby/capital-construct-interiors-website/tree/main/src/components"
click node_quote "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/Quote.tsx"
click node_auth_page "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/Auth.tsx"
click node_auth_state "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/hooks/useAuth.tsx"
click node_crm_layout "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/components/crm/CrmLayout.tsx"
click node_crm_dashboard "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/crm/Dashboard.tsx"
click node_lead_list "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/crm/Leads.tsx"
click node_lead_detail "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/crm/LeadDetail.tsx"
click node_crm_board "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/components/CRMBoard.tsx"
click node_crm_helpers "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/lib/crm.ts"
click node_lead_scoring "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/lib/leadScore.ts"
click node_messaging "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/lib/whatsapp.ts"
click node_ui "https://github.com/kemboijebby/capital-construct-interiors-website/tree/main/src/components/ui"
click node_supabase_client "https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/integrations/supabase/client.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_layout,node_public_pages,node_service_content,node_visual_components,node_quote toneBlue
class node_auth_page,node_crm_layout,node_crm_dashboard,node_lead_list,node_lead_detail,node_crm_board,node_crm_helpers,node_lead_scoring,node_messaging toneAmber
class node_app,node_ui toneMint
class node_auth_state,node_supabase_client,node_database toneRose
class node_visitor,node_staff toneIndigo
```

## Components

### Public Studio Site

- [Site Layout](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/components/site/SiteLayout.tsx): `src/components/site/SiteLayout.tsx`
- [Studio Pages](https://github.com/kemboijebby/capital-construct-interiors-website/tree/main/src/pages): `src/pages`
- [Site Content](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/data/site.ts): `src/data/site.ts`
- [Page Components](https://github.com/kemboijebby/capital-construct-interiors-website/tree/main/src/components): `src/components`
- [Quote Inquiry](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/Quote.tsx): `src/pages/Quote.tsx`

### Lead CRM

- [Sign-in Page](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/Auth.tsx): `src/pages/Auth.tsx`
- [CRM Layout](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/components/crm/CrmLayout.tsx): `src/components/crm/CrmLayout.tsx`
- [CRM Dashboard](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/crm/Dashboard.tsx): `src/pages/crm/Dashboard.tsx`
- [Lead List](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/crm/Leads.tsx): `src/pages/crm/Leads.tsx`
- [Lead Detail](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/pages/crm/LeadDetail.tsx): `src/pages/crm/LeadDetail.tsx`
- [Lead Board](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/components/CRMBoard.tsx): `src/components/CRMBoard.tsx`
- [CRM Helpers](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/lib/crm.ts): `src/lib/crm.ts`
- [Lead Scoring](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/lib/leadScore.ts): `src/lib/leadScore.ts`
- [WhatsApp Messaging](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/lib/whatsapp.ts): `src/lib/whatsapp.ts`

### App Platform

- [Route Shell](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/App.tsx): `src/App.tsx`
- [UI Primitives](https://github.com/kemboijebby/capital-construct-interiors-website/tree/main/src/components/ui): `src/components/ui`

### Backend Services

- [Auth State](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/hooks/useAuth.tsx): `src/hooks/useAuth.tsx`
- [Supabase Client](https://github.com/kemboijebby/capital-construct-interiors-website/blob/main/src/integrations/supabase/client.ts): `src/integrations/supabase/client.ts`
- **Supabase Data**

### Other components

- **Site Visitor**
- **Studio Staff**

## Connections

- Site Visitor → Route Shell: opens
- Studio Staff → Route Shell: opens
- Route Shell → Site Layout: routes public pages (evidence: `src/App.tsx`)
- Route Shell → Studio Pages: routes (evidence: `src/App.tsx`)
- Route Shell → Sign-in Page: routes (evidence: `src/App.tsx`)
- Route Shell → CRM Layout: routes CRM (evidence: `src/App.tsx`)
- Route Shell → UI Primitives: installs providers (evidence: `src/App.tsx`)
- Route Shell → Auth State: provides auth (evidence: `src/App.tsx`)
- Site Layout → Page Components: renders site chrome (evidence: `src/components/site/SiteLayout.tsx`)
- Studio Pages → Site Content: reads content (evidence: `src/pages/Services.tsx`)
- Studio Pages → Page Components: renders components (evidence: `src/pages/Home.tsx`)
- Studio Pages → Quote Inquiry: links to inquiry (evidence: `src/pages/Services.tsx`)
- Quote Inquiry → Supabase Client: may submit inquiry (evidence: `src/pages/Quote.tsx`)
- Sign-in Page → Auth State: reads session (evidence: `src/pages/Auth.tsx`)
- Sign-in Page → Supabase Client: signs in or up (evidence: `src/pages/Auth.tsx`)
- Auth State → Supabase Client: tracks session (evidence: `src/hooks/useAuth.tsx`)
- CRM Layout → Auth State: checks session (evidence: `src/components/crm/CrmLayout.tsx`)
- CRM Dashboard → Supabase Client: loads CRM data (evidence: `src/pages/crm/Dashboard.tsx`)
- Lead List → Supabase Client: loads leads (evidence: `src/pages/crm/Leads.tsx`)
- Lead Detail → Supabase Client: reads and updates (evidence: `src/pages/crm/LeadDetail.tsx`)
- Lead Detail → Auth State: reads user (evidence: `src/pages/crm/LeadDetail.tsx`)
- Lead Detail → CRM Helpers: uses helpers (evidence: `src/pages/crm/LeadDetail.tsx`)
- Lead Detail → WhatsApp Messaging: builds follow-ups (evidence: `src/pages/crm/LeadDetail.tsx`)
- Lead Board → WhatsApp Messaging: uses messaging (evidence: `src/components/CRMBoard.tsx`)
- Lead Board → Lead Scoring: scores leads (evidence: `src/components/CRMBoard.tsx`)
- Supabase Client → Supabase Data: connects to (evidence: `src/integrations/supabase/client.ts`)