# selisedigitalplatforms/blocks-construct-react architecture

> Architecture diagram of the GitHub repository selisedigitalplatforms/blocks-construct-react, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-18). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/selisedigitalplatforms/blocks-construct-react
- Repository: https://github.com/selisedigitalplatforms/blocks-construct-react

## Overview

1. **Overall shape**
   - This repository is a **client-side React SPA** for SELISE `<blocks />` Construct.
   - It is organized as a **feature/module-based frontend blueprint** rather than a single vertical app. Most business behavior lives under `src/modules/*`, while shared infrastructure and primitives live under `src/lib`, `src/state`, `src/components`, and `src/layout`.

2. **Application shell**
   - The runtime entry is `src/index.tsx`, which boots the app and wires global providers.
   - `src/App.tsx` and `src/routes/*` define the top-level route composition.
   - Two major layout shells exist:
     - `src/layout/auth-layout` for login/activation/reset flows
     - `src/layout/main-layout` for authenticated application pages
   - This creates a clear boundary between **public/authentication journeys** and the **protected product UI**.

3. **Routing and access control**
   - Route definitions are centralized in `src/routes/app-routes.tsx`, `auth.route.tsx`, and `route.tsx`.
   - Auth protection is handled in `src/state/store/auth/*` with guard/protected-route logic.
   - `src/constant/auth-public-routes.ts` and related constants define which paths are accessible before sign-in.
   - The architecture is therefore route-driven, with authorization enforced at the router boundary rather than inside every feature.

4. **State and server-data orchestration**
   - Global state is split between:
     - `src/state/store/auth` for authentication/session state
     - `src/state/query-client` for server-state/query orchestration
     - `src/state/client-middleware.tsx` for cross-cutting client concerns
   - Custom hooks in `src/hooks/*` expose reusable UI and state behaviors such as language switching, toast handling, media queries, filters, popover sizing, and OTP resend.
   - The app follows a pattern where **pages compose hooks + services + presentational components**, with server data cached and managed centrally.

5. **Data access layer**
   - `src/lib/graphql-client.ts` and `src/lib/https.ts` are the primary integration points for backend communication.
   - Many modules have their own `services/*`, `graphql/*`, `types/*`, and sometimes `hooks/*`, indicating a modular service boundary per domain.
   - The README positions this repo as pre-integrated with **SELISE Blocks Cloud** services; in practice, the app talks to external microservices rather than hosting its own backend.
   - Data flow is typically: **page/component → feature hook → feature service / GraphQL query / HTTP call → external blocks service**.

6. **Authentication and identity**
   - The `src/modules/auth` area handles sign-in, signup, password reset, account activation, OTP verification, SSO, and OIDC callback flows.
   - It includes dedicated services (`auth.service.ts`, `sso.service.ts`) and multiple page-level entry points for different auth states.
   - Supporting shared pieces like CAPTCHA (`src/components/core/captcha`), password inputs, OTP inputs, and confirmation modals are reused across these flows.
   - This module is the key boundary for identity establishment before the main app shell is entered.

7. **Shared UI foundation**
   - `src/components/ui-kit` contains low-level design system primitives: buttons, dialogs, inputs, tables, tabs, toasts, sidebars, tooltips, etc.
   - `src/components/core` builds higher-level reusable application components on top of the UI kit, such as:
     - navigation and chrome elements
     - data-table abstractions
     - language/theme selectors
     - notifications
     - password and OTP forms
     - dynamic breadcrumbs, avatars, and banners
   - This creates a layered UI model: **UI kit → core composites → feature-specific components**.

8. **Feature modules**
   - The largest architectural unit is the feature module under `src/modules/*`.
   - Each module is mostly self-contained with its own pages, components, hooks, services, types, and utilities.
   - Major domains include:
     - dashboard
     - finance
     - invoices
     - inventory
     - task manager
     - calendar
     - chat
     - email
     - file manager
     - profile / IAM / users
     - activity log
     - error views
   - These modules are good candidates for diagram boxes because each one encapsulates a business capability and its own internal UI/data flow.

9. **Domain-specific patterns**
   - Several domains use **GraphQL-first CRUD workflows** explicitly, especially inventory, invoices, and task manager.
   - Others are more UI-driven but still service-backed, such as chat, email, file management, and calendar.
   - Many domains expose a page-level container plus nested components for lists, details, toolbars, filters, drawers/sheets, and modals.
   - This means the UI is generally organized by **screen + interaction surface**, not by purely atomic components.

10. **Cross-cutting UX concerns**
   - Internationalization is handled in `src/i18n/*`, including route-module mappings and translation loading.
   - Theming is centralized in `src/styles/theme/theme-provider.tsx`, with global styles in `src/styles/globals.css`.
   - Responsive behavior is supported by shared hooks/utilities and many module-specific mobile variants.
   - Notifications, confirmation dialogs, loading overlays, and error views are shared UX boundaries used across features.

11. **Specialized product capabilities**
   - Some modules indicate deeper product workflows:
     - `profile` includes MFA, sessions, devices, and account/security management
     - `file-manager` supports my files, shared files, trash, grid/list views, file details, and mock-query hooks
     - `big-calendar` includes event creation/editing, recurrence handling, filters, and settings context
     - `task-manager` supports card/list views, drag-and-drop-like interactions, details panels, comments, tags, and columns
   - These features are not simple CRUD screens; they are richer interaction subsystems with dedicated state and UI coordination.

12. **External services and integrations**
   - The project is built around **SELISE Blocks Cloud** and its microservices ecosystem.
   - CAPTCHA support is configurable for reCAPTCHA or hCaptcha via environment variables.
   - SSO/OIDC integration is explicit in the auth module, and multi-organization/storage APIs exist under `src/lib/api`.
   - The app therefore sits as a frontend orchestration layer above multiple external identity, storage, and domain services.

13. **Build, deployment, and delivery**
   - The repo uses **Vite + TypeScript + React** with Tailwind/PostCSS styling.
   - It is designed for static deployment, with `nginx.conf`, `Dockerfile`, `staticwebapp.config.json`, and `swa-cli.config.json` indicating container/static-host deployment paths.
   - CI/CD is handled through GitHub Actions workflows for testing, Sonar analysis, dev/staging/web builds, and Storybook.
   - This matters architecturally because the runtime is a **static frontend bundle**, not a server-rendered app.

14. **What to draw in an architecture diagram**
   - Put the app at the center as a **React SPA shell**.
   - Show a top layer for **routing/layout/auth protection**.
   - Under that, show shared platform services: **theme, i18n, state/query client, GraphQL/HTTP client**.
   - Surround those with **feature modules** as separate bounded contexts.
   - Draw outbound connections from modules to **Blocks Cloud microservices**, **auth/SSO/CAPTCHA providers**, and **storage/organization APIs**.
   - Add a deployment lane for **static hosting/containerization** and CI/CD tooling.

Main entry points: [`src/App.tsx`](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/App.tsx) (App), [`src/lib/https.ts`](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/lib/https.ts) (HTTP Client), [`src/routes/app-routes.tsx`](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/routes/app-routes.tsx) (Routes), [`src/lib/graphql-client.ts`](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/lib/graphql-client.ts) (GraphQL Client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_shell["App Shell"]
  node_n_index(("Entry<br/>react bootstrap<br/>[index.tsx]"))
  node_n_app["App<br/>route host<br/>[App.tsx]"]
  node_n_routes["Routes<br/>route config<br/>[app-routes.tsx]"]
  node_n_auth_layout["Auth Shell<br/>public layout<br/>[auth-layout.tsx]"]
  node_n_main_layout["Main Shell<br/>protected layout<br/>[main-layout.tsx]"]
  node_n_auth_guard(("Auth Guard<br/>route protection"))
end

subgraph group_grp_platform["Shared Platform"]
  node_n_query_client(("Query Client<br/>server-state<br/>[index.tsx]"))
  node_n_auth_store(("Auth State<br/>session store<br/>[index.tsx]"))
  node_n_client_mw(("Client Middleware<br/>client concerns"))
  node_n_i18n["i18n<br/>translation layer<br/>[i18n.ts]"]
  node_n_theme(("Theme<br/>styling system<br/>[theme-provider.tsx]"))
  node_n_ui_kit["UI Kit<br/>design system<br/>[button.tsx]"]
  node_n_core_ui["Core UI<br/>shared composites<br/>[index.ts]"]
  node_n_graphql(("GraphQL Client<br/>backend client<br/>[graphql-client.ts]"))
  node_n_http(("HTTP Client<br/>backend client<br/>[https.ts]"))
end

subgraph group_grp_features["Feature Modules"]
  node_n_auth["Identity<br/>auth module<br/>[auth.service.ts]"]
  node_n_dashboard["Dashboard<br/>overview module<br/>[index.ts]"]
  node_n_finance["Finance<br/>analytics module<br/>[index.ts]"]
  node_n_invoices["Invoices<br/>crud module<br/>[index.ts]"]
  node_n_inventory["Inventory<br/>graphql crud<br/>[index.ts]"]
  node_n_tasks["Tasks<br/>workflow module<br/>[index.ts]"]
  node_n_calendar["Calendar<br/>scheduling module<br/>[index.ts]"]
  node_n_chat["Chat<br/>messaging module<br/>[index.ts]"]
  node_n_email["Email<br/>mail module<br/>[index.ts]"]
  node_n_files["Files<br/>storage module<br/>[index.ts]"]
  node_n_profile["Profile<br/>account module<br/>[index.ts]"]
  node_n_iam["IAM<br/>user admin<br/>[index.ts]"]
  node_n_activity["Activity<br/>audit module<br/>[index.ts]"]
  node_n_errors["Errors<br/>error views<br/>[index.ts]"]
end

subgraph group_grp_delivery["Delivery & Integrations"]
  node_n_blocks_cloud[("Blocks Cloud<br/>external services")]
  node_n_identity_providers[("Auth Providers<br/>external identity")]
  node_n_storage_api[("Storage API<br/>external api")]
  node_n_deploy["Static Deploy<br/>delivery"]
end

node_n_index -->|"boots"| node_n_app
node_n_app -->|"composes"| node_n_routes
node_n_routes -->|"public shell"| node_n_auth_layout
node_n_routes -->|"app shell"| node_n_main_layout
node_n_routes -->|"protects"| node_n_auth_guard
node_n_auth_guard -->|"reads"| node_n_auth_store
node_n_app -->|"provides"| node_n_query_client
node_n_app -->|"wraps"| node_n_client_mw
node_n_app -->|"localizes"| node_n_i18n
node_n_app -->|"themes"| node_n_theme
node_n_main_layout -->|"uses"| node_n_core_ui
node_n_core_ui -->|"builds on"| node_n_ui_kit
node_n_auth -->|"updates"| node_n_auth_store
node_n_auth -->|"authenticates"| node_n_identity_providers
node_n_auth -->|"calls"| node_n_http
node_n_dashboard -->|"reads"| node_n_graphql
node_n_finance -->|"reads"| node_n_graphql
node_n_invoices -->|"CRUD"| node_n_graphql
node_n_inventory -->|"CRUD"| node_n_graphql
node_n_tasks -->|"CRUD"| node_n_graphql
node_n_calendar -->|"syncs"| node_n_http
node_n_chat -->|"syncs"| node_n_http
node_n_email -->|"syncs"| node_n_http
node_n_files -->|"manages"| node_n_storage_api
node_n_profile -->|"manages"| node_n_http
node_n_iam -->|"manages"| node_n_http
node_n_activity -->|"reads"| node_n_http
node_n_errors -->|"fallbacks"| node_n_routes
node_n_deploy -->|"packages"| node_n_index
node_n_deploy -->|"serves"| node_n_blocks_cloud

click node_n_index "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/index.tsx"
click node_n_app "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/App.tsx"
click node_n_routes "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/routes/app-routes.tsx"
click node_n_auth_layout "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/layout/auth-layout/auth-layout.tsx"
click node_n_main_layout "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/layout/main-layout/main-layout.tsx"
click node_n_auth_guard "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/store/auth/protected-route.tsx"
click node_n_query_client "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/query-client/index.tsx"
click node_n_auth_store "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/store/auth/index.tsx"
click node_n_client_mw "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/client-middleware.tsx"
click node_n_i18n "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/i18n/i18n.ts"
click node_n_theme "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/styles/theme/theme-provider.tsx"
click node_n_ui_kit "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/components/ui-kit/button.tsx"
click node_n_core_ui "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/components/core/index.ts"
click node_n_graphql "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/lib/graphql-client.ts"
click node_n_http "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/lib/https.ts"
click node_n_auth "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/auth/services/auth.service.ts"
click node_n_dashboard "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/dashboard/index.ts"
click node_n_finance "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/finance/index.ts"
click node_n_invoices "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/invoices/index.ts"
click node_n_inventory "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/inventory/index.ts"
click node_n_tasks "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/task-manager/index.ts"
click node_n_calendar "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/big-calendar/index.ts"
click node_n_chat "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/chat/index.ts"
click node_n_email "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/email/index.ts"
click node_n_files "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/file-manager/index.ts"
click node_n_profile "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/profile/index.ts"
click node_n_iam "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/iam/index.ts"
click node_n_activity "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/activity-log/index.ts"
click node_n_errors "https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/error-view/index.ts"
click node_n_storage_api "https://github.com/selisedigitalplatforms/blocks-construct-react/tree/main/src/lib/api"
click node_n_deploy "https://github.com/selisedigitalplatforms/blocks-construct-react/tree/main/Dockerfile"

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_n_index,node_n_app,node_n_routes,node_n_auth_layout,node_n_main_layout,node_n_auth_guard toneBlue
class node_n_query_client,node_n_auth_store,node_n_client_mw,node_n_i18n,node_n_theme,node_n_ui_kit,node_n_core_ui,node_n_graphql,node_n_http toneAmber
class node_n_auth,node_n_dashboard,node_n_finance,node_n_invoices,node_n_inventory,node_n_tasks,node_n_calendar,node_n_chat,node_n_email,node_n_files,node_n_profile,node_n_iam,node_n_activity,node_n_errors toneMint
class node_n_blocks_cloud,node_n_identity_providers,node_n_storage_api,node_n_deploy toneRose
```

## Components

### App Shell

Runtime entry, route composition, layouts, and access control.

- [Entry](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/index.tsx): react bootstrap · Bootstraps the SPA and mounts global providers. · `src/index.tsx`
- [App](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/App.tsx): route host · Top-level application composition. · `src/App.tsx`
- [Routes](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/routes/app-routes.tsx): route config · Central route definitions for auth and product pages. · `src/routes/app-routes.tsx`
- [Auth Shell](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/layout/auth-layout/auth-layout.tsx): public layout · Layout for sign-in, activation, reset, and SSO journeys. · `src/layout/auth-layout/auth-layout.tsx`
- [Main Shell](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/layout/main-layout/main-layout.tsx): protected layout · Authenticated application chrome and navigation shell. · `src/layout/main-layout/main-layout.tsx`
- [Auth Guard](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/store/auth/protected-route.tsx): route protection · Protected-route and guard logic around authenticated access. · `src/state/store/auth/protected-route.tsx`

### Shared Platform

Cross-cutting state, clients, styling, and reusable UI foundations.

- [Query Client](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/query-client/index.tsx): server-state · Central server-state and caching orchestration. · `src/state/query-client/index.tsx`
- [Auth State](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/store/auth/index.tsx): session store · Authentication/session state used by guards and protected UI. · `src/state/store/auth/index.tsx`
- [Client Middleware](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/state/client-middleware.tsx): client concerns · Cross-cutting client-side middleware and orchestration. · `src/state/client-middleware.tsx`
- [i18n](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/i18n/i18n.ts): translation layer · Language loading and route-module translation mapping. · `src/i18n/i18n.ts`
- [Theme](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/styles/theme/theme-provider.tsx): styling system · Theme provider and global styling foundation. · `src/styles/theme/theme-provider.tsx`
- [UI Kit](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/components/ui-kit/button.tsx): design system · Low-level reusable primitives such as inputs, dialogs, tables, and toasts. · `src/components/ui-kit/button.tsx`
- [Core UI](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/components/core/index.ts): shared composites · Higher-level application components built on the UI kit. · `src/components/core/index.ts`
- [GraphQL Client](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/lib/graphql-client.ts): backend client · Primary GraphQL integration point for feature modules. · `src/lib/graphql-client.ts`
- [HTTP Client](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/lib/https.ts): backend client · Primary HTTP integration point for feature modules. · `src/lib/https.ts`

### Feature Modules

Major self-contained product domains and workflows.

- [Identity](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/auth/services/auth.service.ts): auth module · Sign-in, signup, activation, password reset, SSO, and OIDC flows. · `src/modules/auth/services/auth.service.ts`
- [Dashboard](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/dashboard/index.ts): overview module · Home dashboard with metrics, charts, and summary cards. · `src/modules/dashboard/index.ts`
- [Finance](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/finance/index.ts): analytics module · Financial overview, revenue/expense graphs, and invoice summaries. · `src/modules/finance/index.ts`
- [Invoices](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/invoices/index.ts): crud module · Invoice list, details, creation, editing, and GraphQL-driven workflows. · `src/modules/invoices/index.ts`
- [Inventory](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/inventory/index.ts): graphql crud · Inventory listing, forms, details, filters, and GraphQL queries/mutations. · `src/modules/inventory/index.ts`
- [Tasks](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/task-manager/index.ts): workflow module · Card/list task management with details, tags, columns, and drag-like interactions. · `src/modules/task-manager/index.ts`
- [Calendar](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/big-calendar/index.ts): scheduling module · Big calendar with events, recurrence, filters, and settings. · `src/modules/big-calendar/index.ts`
- [Chat](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/chat/index.ts): messaging module · Conversation UI, contacts, message actions, and group tooling. · `src/modules/chat/index.ts`
- [Email](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/email/index.ts): mail module · Mailbox, compose, reading, actions, and responsive email views. · `src/modules/email/index.ts`
- [Files](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/file-manager/index.ts): storage module · My files, shared files, trash, previews, filters, and details panes. · `src/modules/file-manager/index.ts`
- [Profile](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/profile/index.ts): account module · Profile, security, MFA, sessions, devices, and account settings. · `src/modules/profile/index.ts`
- [IAM](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/iam/index.ts): user admin · User management, profile administration, and table-driven user workflows. · `src/modules/iam/index.ts`
- [Activity](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/activity-log/index.ts): audit module · Activity log timelines and grouped activity views. · `src/modules/activity-log/index.ts`
- [Errors](https://github.com/selisedigitalplatforms/blocks-construct-react/blob/main/src/modules/error-view/index.ts): error views · Not found, unauthorized, and service-unavailable experiences. · `src/modules/error-view/index.ts`

### Delivery & Integrations

Static deployment and external service boundaries.

- **Blocks Cloud**: external services · External SELISE Blocks Cloud microservices consumed by the frontend.
- **Auth Providers**: external identity · SSO, OIDC, and CAPTCHA providers used during authentication.
- [Storage API](https://github.com/selisedigitalplatforms/blocks-construct-react/tree/main/src/lib/api): external api · Multi-org and storage APIs used by the file manager and related flows. · `src/lib/api`
- [Static Deploy](https://github.com/selisedigitalplatforms/blocks-construct-react/tree/main/Dockerfile): delivery · Vite-built SPA packaged for nginx, Docker, and static hosting. · `Dockerfile`

## Connections

- Entry → App: boots · Entry mounts the root application.
- App → Routes: composes · App delegates page composition to routes.
- Routes → Auth Shell: public shell · Auth routes render through the public layout.
- Routes → Main Shell: app shell · Protected routes render through the main layout.
- Routes → Auth Guard: protects · Route boundary enforces authentication.
- Auth Guard → Auth State: reads · Guard checks session state.
- App → Query Client: provides · Global server-state client is wired at the app level.
- App → Client Middleware: wraps · Client middleware handles cross-cutting concerns.
- App → i18n: localizes · Application loads translations and language context.
- App → Theme: themes · Theme provider sets global look and feel.
- Main Shell → Core UI: uses · Main shell composes shared chrome and navigation.
- Core UI → UI Kit: builds on · Core components are assembled from primitives.
- Identity → Auth State: updates · Authentication flows persist session state.
- Identity → Auth Providers: authenticates · SSO/OIDC and CAPTCHA flows reach external identity providers.
- Identity → HTTP Client: calls · Auth services communicate via HTTP.
- Dashboard → GraphQL Client: reads · Dashboard data is fetched from backend services.
- Finance → GraphQL Client: reads · Finance metrics and graphs consume backend data.
- Invoices → GraphQL Client: CRUD · Invoices module uses GraphQL queries and mutations.
- Inventory → GraphQL Client: CRUD · Inventory module is GraphQL-first.
- Tasks → GraphQL Client: CRUD · Task manager persists and queries task data.
- Calendar → HTTP Client: syncs · Calendar workflows use service-backed calls.
- Chat → HTTP Client: syncs · Chat features integrate through backend services.
- Email → HTTP Client: syncs · Email state and actions are service-backed.
- Files → Storage API: manages · File manager uses multi-org and storage APIs.
- Profile → HTTP Client: manages · Profile and security features call account and MFA services.
- IAM → HTTP Client: manages · IAM user administration uses backend services.
- Activity → HTTP Client: reads · Activity timelines are fetched from services.
- Errors → Routes: fallbacks · Error pages are used as route-level fallbacks.
- Static Deploy → Entry: packages · Static delivery packages the SPA bundle.
- Static Deploy → Blocks Cloud: serves · Frontend is deployed against external Blocks Cloud services.