# soulmediaglobal/sma-app architecture

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

- Interactive diagram: https://gitdiagram.com/soulmediaglobal/sma-app
- Repository: https://github.com/soulmediaglobal/sma-app

## Overview

This tree is a Gentelella admin dashboard template extended with SMA-app internal CRM and client-portal workflows. The sampled entry point mounts shared page UI, applies admin authorization, then initializes domain pages; the client-detail page owns project, quotation, workflow, document, and payment views. Supabase provides backing auth and data, while the portal-access function handles invitation/account administration. README capabilities such as charts, tables, inbox, kanban, calendar, file manager, command palette, and PWA are retained; several are documented or named in the tree but their implementation wiring was not sampled, so uncertain links are omitted.

Main entry points: [`src/main-v4.js`](https://github.com/soulmediaglobal/sma-app/blob/main/src/main-v4.js) (Page bootstrap), [`src/v4/client-detail-v3.js`](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-detail-v3.js) (Client detail), [`src/lib/supabaseClient.js`](https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/supabaseClient.js) (Supabase client), [`src/lib/auth-guard.js`](https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/auth-guard.js) (Admin guard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Page entry and auth"]
  node_main["Page bootstrap<br/>[main-v4.js]"]
  node_authguard["Admin guard<br/>[auth-guard.js]"]
  node_authroute["Auth routing<br/>[auth-routing.js]"]
  node_portalui["Client portal auth"]
end

subgraph group_client["Client operations"]
  node_clientlist["Client list<br/>[client-list.js]"]
  node_clientdetail["Client detail"]
  node_caseform["Case intake<br/>[case-form.js]"]
  node_quotations["Quotations and RAB"]
  node_payments["Client payments<br/>[client-payments.js]"]
  node_documents["Client documents"]
  node_workflow["Client workflow<br/>[client-workflow.js]"]
end

subgraph group_shared["Dashboard features"]
  node_shell["Dashboard shell<br/>[shell.js]"]
  node_dashboard["Dashboard views<br/>[dashboard.js]"]
  node_charts["Charts<br/>[charts.js]"]
  node_tables["Tables<br/>[tables.js]"]
  node_palette["Command palette<br/>[command-palette.js]"]
  node_inbox["Inbox<br/>[inbox.js]"]
  node_kanban["Kanban<br/>[kanban.js]"]
  node_calendar["Calendar<br/>[calendar.js]"]
  node_files["File manager<br/>[file-manager.js]"]
end

subgraph group_backend["Backend services"]
  node_portalhelper["Portal auth helpers"]
  node_supabaseclient["Supabase client<br/>[supabaseClient.js]"]
  node_accessfn["Portal access API<br/>[index.ts]"]
  node_serviceworker["Offline service worker<br/>[sw.js]"]
end

node_user(("Dashboard user"))
node_supabase[("Supabase")]
node_browser(("Browser"))

node_user -->|"opens page"| node_main
node_main -->|"checks access"| node_authguard
node_authguard -->|"verifies user"| node_supabaseclient
node_authguard -->|"resolves route"| node_authroute
node_main -->|"mounts shell"| node_shell
node_main -->|"initializes"| node_charts
node_main -->|"initializes"| node_tables
node_main -->|"initializes"| node_palette
node_main -->|"initializes"| node_dashboard
node_main -->|"initializes"| node_clientlist
node_main -->|"loads on demand"| node_clientdetail
node_main -->|"loads on auth page"| node_portalui
node_portalui -->|"authenticates"| node_portalhelper
node_portalui -->|"routes profile"| node_authroute
node_portalhelper -->|"reads and updates"| node_supabaseclient
node_main -.->|"page entry"| node_inbox
node_main -.->|"page entry"| node_kanban
node_main -.->|"page entry"| node_calendar
node_main -.->|"page entry"| node_files
node_clientlist -->|"opens detail"| node_clientdetail
node_clientdetail -->|"opens intake"| node_caseform
node_clientdetail -->|"loads and renders"| node_quotations
node_clientdetail -->|"loads invoice state"| node_payments
node_clientdetail -.->|"document view"| node_documents
node_clientdetail -.->|"workflow view"| node_workflow
node_clientdetail -->|"reads case data"| node_supabaseclient
node_quotations -->|"reads and writes"| node_supabaseclient
node_documents -->|"reads and writes"| node_supabaseclient
node_supabaseclient -->|"queries data"| node_supabase
node_accessfn -->|"manages accounts"| node_supabase
node_browser -->|"registers and fetches"| node_serviceworker

click node_main "https://github.com/soulmediaglobal/sma-app/blob/main/src/main-v4.js"
click node_authguard "https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/auth-guard.js"
click node_authroute "https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/auth-routing.js"
click node_portalui "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-portal-auth.js"
click node_portalhelper "https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/client-portal-auth.js"
click node_shell "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/shell.js"
click node_dashboard "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/dashboard.js"
click node_charts "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/charts.js"
click node_tables "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/tables.js"
click node_palette "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/command-palette.js"
click node_inbox "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/inbox.js"
click node_kanban "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/kanban.js"
click node_calendar "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/calendar.js"
click node_files "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/file-manager.js"
click node_clientlist "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-list.js"
click node_clientdetail "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-detail-v3.js"
click node_caseform "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/case-form.js"
click node_quotations "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-quotations.js"
click node_payments "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-payments.js"
click node_documents "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-documents.js"
click node_workflow "https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-workflow.js"
click node_supabaseclient "https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/supabaseClient.js"
click node_accessfn "https://github.com/soulmediaglobal/sma-app/blob/main/supabase/functions/client-portal-access/index.ts"
click node_serviceworker "https://github.com/soulmediaglobal/sma-app/blob/main/public/sw.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_main,node_authguard,node_authroute,node_portalui,node_user,node_browser toneBlue
class node_clientlist,node_clientdetail,node_caseform,node_quotations,node_payments,node_documents,node_workflow,node_supabase toneAmber
class node_shell,node_dashboard,node_charts,node_tables,node_palette,node_inbox,node_kanban,node_calendar,node_files toneMint
class node_portalhelper,node_supabaseclient,node_accessfn,node_serviceworker toneRose
```

## Components

### Page entry and auth

- [Page bootstrap](https://github.com/soulmediaglobal/sma-app/blob/main/src/main-v4.js): `src/main-v4.js`
- [Admin guard](https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/auth-guard.js): `src/lib/auth-guard.js`
- [Auth routing](https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/auth-routing.js): `src/lib/auth-routing.js`
- [Client portal auth](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-portal-auth.js): `src/v4/client-portal-auth.js`

### Client operations

- [Client list](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-list.js): `src/v4/client-list.js`
- [Client detail](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-detail-v3.js): `src/v4/client-detail-v3.js`
- [Case intake](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/case-form.js): `src/v4/case-form.js`
- [Quotations and RAB](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-quotations.js): `src/v4/client-quotations.js`
- [Client payments](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-payments.js): `src/v4/client-payments.js`
- [Client documents](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-documents.js): `src/v4/client-documents.js`
- [Client workflow](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/client-workflow.js): `src/v4/client-workflow.js`

### Dashboard features

- [Dashboard shell](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/shell.js): `src/v4/shell.js`
- [Dashboard views](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/dashboard.js): `src/v4/dashboard.js`
- [Charts](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/charts.js): `src/v4/charts.js`
- [Tables](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/tables.js): `src/v4/tables.js`
- [Command palette](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/command-palette.js): `src/v4/command-palette.js`
- [Inbox](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/inbox.js): `src/v4/inbox.js`
- [Kanban](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/kanban.js): `src/v4/kanban.js`
- [Calendar](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/calendar.js): `src/v4/calendar.js`
- [File manager](https://github.com/soulmediaglobal/sma-app/blob/main/src/v4/file-manager.js): `src/v4/file-manager.js`

### Backend services

- [Portal auth helpers](https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/client-portal-auth.js): `src/lib/client-portal-auth.js`
- [Supabase client](https://github.com/soulmediaglobal/sma-app/blob/main/src/lib/supabaseClient.js): `src/lib/supabaseClient.js`
- [Portal access API](https://github.com/soulmediaglobal/sma-app/blob/main/supabase/functions/client-portal-access/index.ts): `supabase/functions/client-portal-access/index.ts`
- [Offline service worker](https://github.com/soulmediaglobal/sma-app/blob/main/public/sw.js): `public/sw.js`

### Other components

- **Dashboard user**
- **Supabase**
- **Browser**

## Connections

- Dashboard user → Page bootstrap: opens page
- Page bootstrap → Admin guard: checks access
- Admin guard → Supabase client: verifies user
- Admin guard → Auth routing: resolves route
- Page bootstrap → Dashboard shell: mounts shell
- Page bootstrap → Charts: initializes
- Page bootstrap → Tables: initializes
- Page bootstrap → Command palette: initializes
- Page bootstrap → Dashboard views: initializes
- Page bootstrap → Client list: initializes
- Page bootstrap → Client detail: loads on demand
- Page bootstrap → Client portal auth: loads on auth page
- Client portal auth → Portal auth helpers: authenticates
- Client portal auth → Auth routing: routes profile
- Portal auth helpers → Supabase client: reads and updates
- Page bootstrap → Inbox: page entry
- Page bootstrap → Kanban: page entry
- Page bootstrap → Calendar: page entry
- Page bootstrap → File manager: page entry
- Client list → Client detail: opens detail
- Client detail → Case intake: opens intake
- Client detail → Quotations and RAB: loads and renders
- Client detail → Client payments: loads invoice state
- Client detail → Client documents: document view
- Client detail → Client workflow: workflow view
- Client detail → Supabase client: reads case data
- Quotations and RAB → Supabase client: reads and writes
- Client documents → Supabase client: reads and writes
- Supabase client → Supabase: queries data
- Portal access API → Supabase: manages accounts
- Browser → Offline service worker: registers and fetches