# yasen-ab/wasla architecture

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

- Interactive diagram: https://gitdiagram.com/yasen-ab/wasla
- Repository: https://github.com/yasen-ab/wasla

## Overview

#### Purpose and entry points
This is a Vite/React TypeScript application for publishing client quote/proposal pages and managing them through an authenticated admin interface. Browser startup flows from `index.html` to `src/main.tsx`, which renders `src/App.tsx`.

#### Application composition and routing
`src/App.tsx` is the top-level route selector. It separates the public quote experience from the admin area, while `src/components/admin/router.ts` defines admin-side navigation/state. The main UI boundaries are:
- Public quote rendering: `src/components/public/PublicQuotePage.tsx`
- Admin shell/navigation: `src/components/admin/AdminShell.tsx`
- Admin authentication gate: `src/components/admin/LoginScreen.tsx`

#### Public quote delivery flow
A public route resolves a quote identifier, loads its quote data, and renders a client-facing proposal page in `src/components/public/PublicQuotePage.tsx`. Formatting and domain type contracts are centralized in `src/lib/format.ts` and `src/lib/types.ts`; data access is mediated through `src/lib/data.ts`, rather than embedded directly in page components.

#### Admin quote management flow
Authenticated users operate inside `src/components/admin/AdminShell.tsx`. Quote lifecycle management is split between:
- Quote list, selection, and status-oriented operations: `src/components/admin/QuotesList.tsx`
- Quote creation/editing: `src/components/admin/QuoteEditor.tsx`
- Reusable asset/library management: `src/components/admin/LibraryPage.tsx`

This keeps editing, list management, and reusable content/library concerns as distinct admin stages.

#### Data, authentication, and persistence boundary
`src/lib/supabase.ts` is the external backend client boundary. `src/lib/auth.tsx` owns authentication/session state used by the admin experience. `src/lib/data.ts` provides application-facing data operations and can isolate UI code from Supabase-specific queries. `src/lib/mockData.ts` indicates local/sample data support, likely for development or fallback UI states.

Database structure is provisioned through Supabase migration `supabase/migrations/20260804081621_create_quotes_schema.sql`, making Supabase/Postgres the material persistence infrastructure for quotes and related records.

#### Shared domain and interface layer
`src/lib/types.ts` defines shared models across admin editing, persistence, and public rendering. Shared UI primitives in `src/components/ui/Button.tsx`, `src/components/ui/Modal.tsx`, and `src/components/ui/ImageUploader.tsx` support consistent actions, dialogs, and media input without coupling domain pages to presentation mechanics.

#### Runtime and build infrastructure
The client is a React application bundled and served by Vite (`vite.config.ts`), with TypeScript project configuration in `tsconfig.json`. Styling is based on Tailwind/PostCSS (`tailwind.config.js`, `postcss.config.js`) plus application styles in `src/index.css`. Supabase is the primary external service for authentication and database-backed quote data.

Main entry points: [`src/lib/data.ts`](https://github.com/yasen-ab/wasla/blob/main/src/lib/data.ts) (Data operations), [`src/components/public/PublicQuotePage.tsx`](https://github.com/yasen-ab/wasla/blob/main/src/components/public/PublicQuotePage.tsx) (Public quote page), [`src/components/admin/AdminShell.tsx`](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/AdminShell.tsx) (Admin shell), [`src/components/admin/QuoteEditor.tsx`](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/QuoteEditor.tsx) (Quote editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React Client"]
  node_html["HTML entry<br/>entrypoint<br/>[index.html]"]
  node_main["React bootstrap<br/>startup<br/>[main.tsx]"]
  node_app["Route selector<br/>app root<br/>[App.tsx]"]
  node_public_quote["Public quote page<br/>public page"]
  node_types["Domain models<br/>shared contracts<br/>[types.ts]"]
  node_format["Quote formatting<br/>presentation logic<br/>[format.ts]"]
  node_ui["UI primitives<br/>shared components"]
end

subgraph group_admin["Admin Experience"]
  node_admin_router["Admin router<br/>navigation state<br/>[router.ts]"]
  node_login["Login screen<br/>auth gate<br/>[LoginScreen.tsx]"]
  node_admin_shell["Admin shell<br/>admin layout<br/>[AdminShell.tsx]"]
  node_quotes_list["Quotes list<br/>quote management<br/>[QuotesList.tsx]"]
  node_quote_editor["Quote editor<br/>quote editing<br/>[QuoteEditor.tsx]"]
  node_library["Library page<br/>asset management<br/>[LibraryPage.tsx]"]
end

subgraph group_data["Data &amp; Backend"]
  node_auth["Session state<br/>authentication<br/>[auth.tsx]"]
  node_data_api["Data operations<br/>data access<br/>[data.ts]"]
  node_supabase{{"Supabase client<br/>backend client<br/>[supabase.ts]"}}
  node_database[("Supabase Postgres<br/>database")]
  node_mock_data["Sample data<br/>development data<br/>[mockData.ts]"]
end

node_html -->|"loads"| node_main
node_main -->|"renders"| node_app
node_app -->|"public route"| node_public_quote
node_app -->|"admin route"| node_admin_router
node_admin_router -->|"unauthenticated"| node_login
node_admin_router -->|"authenticated"| node_admin_shell
node_admin_shell -->|"manages"| node_quotes_list
node_admin_shell -->|"edits"| node_quote_editor
node_admin_shell -->|"manages assets"| node_library
node_login -->|"signs in"| node_auth
node_auth -->|"auth session"| node_supabase
node_public_quote -->|"loads quote"| node_data_api
node_quotes_list -->|"reads and updates"| node_data_api
node_quote_editor -->|"creates and saves"| node_data_api
node_library -->|"accesses library data"| node_data_api
node_data_api -->|"queries"| node_supabase
node_data_api -.->|"local fallback"| node_mock_data
node_supabase -->|"persists"| node_database
node_public_quote -->|"uses models"| node_types
node_quote_editor -->|"uses models"| node_types
node_public_quote -->|"formats proposal"| node_format
node_quote_editor -->|"uses"| node_ui
node_library -->|"uses"| node_ui

click node_html "https://github.com/yasen-ab/wasla/blob/main/index.html"
click node_main "https://github.com/yasen-ab/wasla/blob/main/src/main.tsx"
click node_app "https://github.com/yasen-ab/wasla/blob/main/src/App.tsx"
click node_public_quote "https://github.com/yasen-ab/wasla/blob/main/src/components/public/PublicQuotePage.tsx"
click node_admin_router "https://github.com/yasen-ab/wasla/blob/main/src/components/admin/router.ts"
click node_login "https://github.com/yasen-ab/wasla/blob/main/src/components/admin/LoginScreen.tsx"
click node_admin_shell "https://github.com/yasen-ab/wasla/blob/main/src/components/admin/AdminShell.tsx"
click node_quotes_list "https://github.com/yasen-ab/wasla/blob/main/src/components/admin/QuotesList.tsx"
click node_quote_editor "https://github.com/yasen-ab/wasla/blob/main/src/components/admin/QuoteEditor.tsx"
click node_library "https://github.com/yasen-ab/wasla/blob/main/src/components/admin/LibraryPage.tsx"
click node_auth "https://github.com/yasen-ab/wasla/blob/main/src/lib/auth.tsx"
click node_data_api "https://github.com/yasen-ab/wasla/blob/main/src/lib/data.ts"
click node_supabase "https://github.com/yasen-ab/wasla/blob/main/src/lib/supabase.ts"
click node_database "https://github.com/yasen-ab/wasla/blob/main/supabase/migrations/20260804081621_create_quotes_schema.sql"
click node_mock_data "https://github.com/yasen-ab/wasla/blob/main/src/lib/mockData.ts"
click node_types "https://github.com/yasen-ab/wasla/blob/main/src/lib/types.ts"
click node_format "https://github.com/yasen-ab/wasla/blob/main/src/lib/format.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_html,node_main,node_app,node_public_quote,node_types,node_format,node_ui toneBlue
class node_admin_router,node_login,node_admin_shell,node_quotes_list,node_quote_editor,node_library toneAmber
class node_auth,node_data_api,node_supabase,node_database,node_mock_data toneMint
```

## Components

### React Client

- [HTML entry](https://github.com/yasen-ab/wasla/blob/main/index.html): entrypoint · `index.html`
- [React bootstrap](https://github.com/yasen-ab/wasla/blob/main/src/main.tsx): startup · `src/main.tsx`
- [Route selector](https://github.com/yasen-ab/wasla/blob/main/src/App.tsx): app root · Separates public quote routes from the admin area. · `src/App.tsx`
- [Public quote page](https://github.com/yasen-ab/wasla/blob/main/src/components/public/PublicQuotePage.tsx): public page · `src/components/public/PublicQuotePage.tsx`
- [Domain models](https://github.com/yasen-ab/wasla/blob/main/src/lib/types.ts): shared contracts · `src/lib/types.ts`
- [Quote formatting](https://github.com/yasen-ab/wasla/blob/main/src/lib/format.ts): presentation logic · `src/lib/format.ts`
- **UI primitives**: shared components · Buttons, modals, and media input support domain pages.

### Admin Experience

- [Admin router](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/router.ts): navigation state · `src/components/admin/router.ts`
- [Login screen](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/LoginScreen.tsx): auth gate · `src/components/admin/LoginScreen.tsx`
- [Admin shell](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/AdminShell.tsx): admin layout · `src/components/admin/AdminShell.tsx`
- [Quotes list](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/QuotesList.tsx): quote management · Lists, selects, and changes quote status. · `src/components/admin/QuotesList.tsx`
- [Quote editor](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/QuoteEditor.tsx): quote editing · `src/components/admin/QuoteEditor.tsx`
- [Library page](https://github.com/yasen-ab/wasla/blob/main/src/components/admin/LibraryPage.tsx): asset management · `src/components/admin/LibraryPage.tsx`

### Data & Backend

- [Session state](https://github.com/yasen-ab/wasla/blob/main/src/lib/auth.tsx): authentication · `src/lib/auth.tsx`
- [Data operations](https://github.com/yasen-ab/wasla/blob/main/src/lib/data.ts): data access · Application-facing quote operations isolate UI from backend queries. · `src/lib/data.ts`
- [Supabase client](https://github.com/yasen-ab/wasla/blob/main/src/lib/supabase.ts): backend client · `src/lib/supabase.ts`
- [Supabase Postgres](https://github.com/yasen-ab/wasla/blob/main/supabase/migrations/20260804081621_create_quotes_schema.sql): database · Persists quotes and related records. · `supabase/migrations/20260804081621_create_quotes_schema.sql`
- [Sample data](https://github.com/yasen-ab/wasla/blob/main/src/lib/mockData.ts): development data · Supports local or fallback UI states. · `src/lib/mockData.ts`

## Connections

- HTML entry → React bootstrap: loads
- React bootstrap → Route selector: renders
- Route selector → Public quote page: public route
- Route selector → Admin router: admin route
- Admin router → Login screen: unauthenticated
- Admin router → Admin shell: authenticated
- Admin shell → Quotes list: manages
- Admin shell → Quote editor: edits
- Admin shell → Library page: manages assets
- Login screen → Session state: signs in
- Session state → Supabase client: auth session
- Public quote page → Data operations: loads quote
- Quotes list → Data operations: reads and updates
- Quote editor → Data operations: creates and saves
- Library page → Data operations: accesses library data
- Data operations → Supabase client: queries
- Data operations → Sample data: local fallback
- Supabase client → Supabase Postgres: persists
- Public quote page → Domain models: uses models
- Quote editor → Domain models: uses models
- Public quote page → Quote formatting: formats proposal
- Quote editor → UI primitives: uses
- Library page → UI primitives: uses