# shantopaul/saas-dashboard-website architecture

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

- Interactive diagram: https://gitdiagram.com/shantopaul/saas-dashboard-website
- Repository: https://github.com/shantopaul/saas-dashboard-website

## Overview

1. **Overall shape**
   - This is a client-side SaaS dashboard frontend, not a full backend app.
   - The app is built as a single-page React 19 + TypeScript project, bundled with Vite and styled with Tailwind CSS.
   - Most “business data” is currently mock/static data in `src/data`, with architecture prepared for future backend/Firebase integration.

2. **App entry and composition**
   - `src/main.tsx` bootstraps the app.
   - `src/App.tsx` is the top-level composition point that wires providers, routing, and global UI behavior.
   - The root runtime is a stack of context/providers plus route-driven page rendering.

3. **Routing and page boundaries**
   - `src/routes/AppRoutes.tsx` defines the main navigation map.
   - `src/routes/ProtectedRoute.tsx` is the auth boundary that separates public/auth pages from dashboard-only pages.
   - Pages are split into three domains:
     - `src/pages/public` for marketing surfaces
     - `src/pages/auth` for login/register flows
     - `src/pages/dashboard` for authenticated product areas

4. **Layout system**
   - Layouts in `src/components/layout` are the primary structural boundary of the UI.
   - `PublicLayout` wraps marketing pages with navigation/footer.
   - `AuthLayout` isolates login/register screens.
   - `DashboardLayout` provides the app shell for authenticated pages, with persistent navigation, header, and content viewport.
   - This means pages are mostly content assemblies; the layout decides the page frame.

5. **Shared UI component layer**
   - `src/components/common` contains reusable presentational primitives: buttons, inputs, cards, modals, dropdowns, toggles, spinners, and motion wrappers.
   - These components are used across forms, dashboards, and tables, keeping styling and behavior consistent.
   - `Modal`, `Dropdown`, `ThemeToggle`, and `PageMotion` are especially important because they influence interaction patterns and accessibility.

6. **Dashboard-specific UI**
   - `src/components/dashboard` holds higher-level widgets for operational views: stat cards, activity feeds, customer tables, and chart wrappers.
   - `src/components/dashboard/charts` contains the analytics visualization layer, likely powered by Recharts-style chart components with theme-aware rendering.
   - This layer is distinct from common primitives: it assembles business-facing dashboard blocks rather than generic UI controls.

7. **Tabular/billing data presentation**
   - `src/components/tables` is a dedicated subsystem for data-heavy views such as activity logs, customers, invoices, and transactions.
   - `DataTable` acts as the generic table engine, while the other table components specialize it for each domain.
   - Utility files like `tableFormat.ts` and `tableUtils.tsx` centralize formatting and column rendering rules, which helps keep billing and ledger screens consistent.

8. **State management**
   - Global client state lives in Zustand stores under `src/store`.
   - The store boundaries are purposeful:
     - `authStore` for session/auth simulation
     - `themeStore` for dark/light mode persistence
     - `layoutStore` for sidebar/window UI state
     - `notificationStore` for unread counts and filters
     - `toastStore` for transient feedback
   - This indicates the app relies on local reactive state rather than server synchronization for most interactions.

9. **Providers and cross-cutting concerns**
   - `ThemeProvider` and `ToastProvider` in `src/providers` wrap the app with cross-cutting UI infrastructure.
   - Theme is a global concern affecting styling tokens and component behavior.
   - Toasts provide non-blocking user feedback across routes, likely connected to store-driven events.

10. **Data flow and content model**
    - The app is largely fed by static datasets in `src/data` rather than API calls.
    - These datasets cover navigation, search, notifications, pricing, testimonials, charts, invoices, customers, and user profiles.
    - `src/types` mirrors those datasets with explicit interfaces, creating a typed contract between mock data, components, and pages.

11. **Auth and form handling**
    - Login/register pages use React Hook Form and Zod, which makes validation schema-driven and keeps rendering efficient.
    - `authStore` plus `ProtectedRoute` simulate session control on the client side.
    - The auth boundary is important architecturally even if the current backend is mocked or minimal.

12. **Search and command surface**
    - The repo includes a dedicated searchable command layer via `DashboardSearch` and `src/data/searchData.ts`.
    - This powers omni-search/keyboard-driven navigation across dashboard sections and records.
    - Search is therefore a first-class navigation system, not just a UI filter.

13. **Styling, motion, and accessibility**
    - Tailwind CSS and `src/styles/globals.css` define the visual system.
    - Framer Motion is used for page and component transitions.
    - The README and component set indicate accessibility is a design constraint: semantic layout regions, focus trapping in modals, keyboard support, and reduced-motion awareness.

14. **Configuration and deployment boundary**
    - `src/config/firebase.ts` suggests a prepared integration point for Firebase credentials from `.env` files, though the current app reads as frontend-first and simulated.
    - `vercel.json` and the Vite build setup indicate deployment as a static frontend on Vercel.
    - The external-runtime boundary is therefore mostly build-time and hosting-oriented, not server-centric.

15. **How to draw the architecture**
    - Model this as: browser entrypoint → app providers/router → layout shell → page module → shared widgets → static data/store.
    - Keep public, auth, and protected dashboard areas as separate route zones.
    - Put Zustand stores and providers as cross-cutting layers spanning all zones.
    - Treat `src/data` and `src/types` as the current content/data backbone until backend services are introduced.

Main entry points: [`src/components/layout/DashboardLayout.tsx`](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/DashboardLayout.tsx) (Dashboard Shell), [`src/App.tsx`](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/App.tsx) (App), [`src/routes/AppRoutes.tsx`](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/routes/AppRoutes.tsx) (Routes), [`src/components/layout/PublicLayout.tsx`](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/PublicLayout.tsx) (Public Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_entry["Entry & Shell"]
  node_node_main["Main<br/>bootstrap<br/>[main.tsx]"]
  node_node_app["App<br/>composition<br/>[App.tsx]"]
  node_node_routes["Routes<br/>navigation<br/>[AppRoutes.tsx]"]
  node_node_protected["Auth Gate<br/>route-guard<br/>[ProtectedRoute.tsx]"]
  node_node_theme["Theme<br/>provider<br/>[ThemeProvider.tsx]"]
  node_node_toast["Toasts<br/>provider<br/>[ToastProvider.tsx]"]
end

subgraph group_grp_public["Public & Auth"]
  node_node_public_layout["Public Layout<br/>[PublicLayout.tsx]"]
  node_node_auth_layout["Auth Layout<br/>[AuthLayout.tsx]"]
  node_node_landing["Landing<br/>page<br/>[LandingPage.tsx]"]
  node_node_features["Features<br/>page<br/>[FeaturesPage.tsx]"]
  node_node_pricing["Pricing<br/>page<br/>[PricingPage.tsx]"]
  node_node_login["Login<br/>page<br/>[LoginPage.tsx]"]
  node_node_register["Register<br/>page<br/>[RegisterPage.tsx]"]
end

subgraph group_grp_dashboard["Dashboard"]
  node_node_dashboard_layout["Dashboard Shell<br/>layout"]
  node_node_dashboard_header["Header<br/>chrome"]
  node_node_sidebar["Sidebar<br/>navigation-chrome<br/>[Sidebar.tsx]"]
  node_node_search["Search<br/>navigation"]
  node_node_notifications["Notifications<br/>ui"]
  node_node_dashboard_page["Dashboard Home<br/>page<br/>[DashboardPage.tsx]"]
  node_node_analytics["Analytics<br/>page<br/>[AnalyticsPage.tsx]"]
  node_node_billing["Billing<br/>page<br/>[BillingPage.tsx]"]
  node_node_profile["Profile<br/>page<br/>[ProfilePage.tsx]"]
  node_node_settings["Settings<br/>page<br/>[SettingsPage.tsx]"]
end

subgraph group_grp_ui["UI System"]
  node_node_common["Common UI<br/>primitives<br/>[index.ts]"]
  node_node_dashboard_ui["Dashboard Widgets<br/>[index.ts]"]
  node_node_tables["Tables<br/>data-grid<br/>[index.ts]"]
end

subgraph group_grp_state["State & Data"]
  node_node_stores[("Stores<br/>state<br/>[index.ts]")]
  node_node_data["Mock Data<br/>datasets<br/>[index.ts]"]
  node_node_types["Types<br/>contracts<br/>[index.ts]"]
  node_node_firebase["Firebase Config<br/>integration<br/>[firebase.ts]"]
end

node_node_main -->|"boots"| node_node_app
node_node_app -->|"wraps"| node_node_theme
node_node_app -->|"wraps"| node_node_toast
node_node_app -->|"renders"| node_node_routes
node_node_routes -->|"public"| node_node_public_layout
node_node_routes -->|"auth"| node_node_auth_layout
node_node_routes -->|"guards"| node_node_protected
node_node_protected -->|"allows"| node_node_dashboard_layout
node_node_public_layout -->|"hosts"| node_node_landing
node_node_public_layout -->|"hosts"| node_node_features
node_node_public_layout -->|"hosts"| node_node_pricing
node_node_auth_layout -->|"hosts"| node_node_login
node_node_auth_layout -->|"hosts"| node_node_register
node_node_dashboard_layout -->|"contains"| node_node_dashboard_header
node_node_dashboard_layout -->|"contains"| node_node_sidebar
node_node_dashboard_header -->|"exposes"| node_node_search
node_node_dashboard_header -->|"exposes"| node_node_notifications
node_node_dashboard_header -->|"uses"| node_node_common
node_node_dashboard_layout -->|"hosts"| node_node_dashboard_page
node_node_dashboard_layout -->|"hosts"| node_node_analytics
node_node_dashboard_layout -->|"hosts"| node_node_billing
node_node_dashboard_layout -->|"hosts"| node_node_profile
node_node_dashboard_layout -->|"hosts"| node_node_settings
node_node_dashboard_page -->|"assembles"| node_node_dashboard_ui
node_node_analytics -->|"assembles"| node_node_dashboard_ui
node_node_billing -->|"uses"| node_node_tables
node_node_profile -->|"uses"| node_node_common
node_node_settings -->|"uses"| node_node_common
node_node_common -->|"reads"| node_node_stores
node_node_dashboard_ui -->|"reads"| node_node_data
node_node_tables -->|"reads"| node_node_data
node_node_data -->|"typed by"| node_node_types
node_node_stores -->|"typed by"| node_node_types
node_node_search -->|"indexes"| node_node_data
node_node_firebase -.->|"prepared for"| node_node_app

click node_node_main "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/main.tsx"
click node_node_app "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/App.tsx"
click node_node_routes "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/routes/AppRoutes.tsx"
click node_node_protected "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/routes/ProtectedRoute.tsx"
click node_node_theme "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/providers/ThemeProvider.tsx"
click node_node_toast "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/providers/ToastProvider.tsx"
click node_node_public_layout "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/PublicLayout.tsx"
click node_node_auth_layout "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/AuthLayout.tsx"
click node_node_landing "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/public/LandingPage.tsx"
click node_node_features "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/public/FeaturesPage.tsx"
click node_node_pricing "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/public/PricingPage.tsx"
click node_node_login "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/auth/LoginPage.tsx"
click node_node_register "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/auth/RegisterPage.tsx"
click node_node_dashboard_layout "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/DashboardLayout.tsx"
click node_node_dashboard_header "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/DashboardHeader.tsx"
click node_node_sidebar "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/Sidebar.tsx"
click node_node_search "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/DashboardSearch.tsx"
click node_node_notifications "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/NotificationDropdown.tsx"
click node_node_dashboard_page "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/DashboardPage.tsx"
click node_node_analytics "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/AnalyticsPage.tsx"
click node_node_billing "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/BillingPage.tsx"
click node_node_profile "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/ProfilePage.tsx"
click node_node_settings "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/SettingsPage.tsx"
click node_node_common "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/common/index.ts"
click node_node_dashboard_ui "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/dashboard/index.ts"
click node_node_tables "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/tables/index.ts"
click node_node_stores "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/store/index.ts"
click node_node_data "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/data/index.ts"
click node_node_types "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/types/index.ts"
click node_node_firebase "https://github.com/shantopaul/saas-dashboard-website/blob/main/src/config/firebase.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_node_main,node_node_app,node_node_routes,node_node_protected,node_node_theme,node_node_toast toneBlue
class node_node_public_layout,node_node_auth_layout,node_node_landing,node_node_features,node_node_pricing,node_node_login,node_node_register toneAmber
class node_node_dashboard_layout,node_node_dashboard_header,node_node_sidebar,node_node_search,node_node_notifications,node_node_dashboard_page,node_node_analytics,node_node_billing,node_node_profile,node_node_settings toneMint
class node_node_common,node_node_dashboard_ui,node_node_tables toneRose
class node_node_stores,node_node_data,node_node_types,node_node_firebase toneIndigo
```

## Components

### Entry & Shell

Browser bootstrap, app composition, providers, and routing.

- [Main](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/main.tsx): bootstrap · Vite entrypoint that mounts the React app. · `src/main.tsx`
- [App](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/App.tsx): composition · Top-level composition for providers and routing. · `src/App.tsx`
- [Routes](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/routes/AppRoutes.tsx): navigation · Main route map for public, auth, and protected areas. · `src/routes/AppRoutes.tsx`
- [Auth Gate](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/routes/ProtectedRoute.tsx): route-guard · Client-side boundary for protected dashboard pages. · `src/routes/ProtectedRoute.tsx`
- [Theme](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/providers/ThemeProvider.tsx): provider · Global theme provider for color mode and styling context. · `src/providers/ThemeProvider.tsx`
- [Toasts](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/providers/ToastProvider.tsx): provider · Global toast provider for transient user feedback. · `src/providers/ToastProvider.tsx`

### Public & Auth

Marketing and authentication surfaces.

- [Public Layout](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/PublicLayout.tsx): layout · Shell for marketing pages with navigation and footer. · `src/components/layout/PublicLayout.tsx`
- [Auth Layout](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/AuthLayout.tsx): layout · Dedicated frame for login and register flows. · `src/components/layout/AuthLayout.tsx`
- [Landing](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/public/LandingPage.tsx): page · Public homepage and marketing entry surface. · `src/pages/public/LandingPage.tsx`
- [Features](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/public/FeaturesPage.tsx): page · Public feature-focused marketing page. · `src/pages/public/FeaturesPage.tsx`
- [Pricing](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/public/PricingPage.tsx): page · Public pricing and plan comparison page. · `src/pages/public/PricingPage.tsx`
- [Login](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/auth/LoginPage.tsx): page · Authentication page for sign-in. · `src/pages/auth/LoginPage.tsx`
- [Register](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/auth/RegisterPage.tsx): page · Authentication page for account creation. · `src/pages/auth/RegisterPage.tsx`

### Dashboard

Authenticated product area and its shell.

- [Dashboard Shell](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/DashboardLayout.tsx): layout · Authenticated app frame with sidebar, header, and viewport. · `src/components/layout/DashboardLayout.tsx`
- [Header](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/DashboardHeader.tsx): chrome · Top bar with search, notifications, and theme controls. · `src/components/layout/DashboardHeader.tsx`
- [Sidebar](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/Sidebar.tsx): navigation-chrome · Persistent dashboard navigation panel. · `src/components/layout/Sidebar.tsx`
- [Search](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/DashboardSearch.tsx): navigation · Dashboard command/search surface. · `src/components/layout/DashboardSearch.tsx`
- [Notifications](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/layout/NotificationDropdown.tsx): ui · Notification dropdown surface used in the dashboard header. · `src/components/layout/NotificationDropdown.tsx`
- [Dashboard Home](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/DashboardPage.tsx): page · Authenticated overview page. · `src/pages/dashboard/DashboardPage.tsx`
- [Analytics](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/AnalyticsPage.tsx): page · Authenticated analytics page. · `src/pages/dashboard/AnalyticsPage.tsx`
- [Billing](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/BillingPage.tsx): page · Authenticated billing and transactions page. · `src/pages/dashboard/BillingPage.tsx`
- [Profile](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/ProfilePage.tsx): page · Authenticated user profile page. · `src/pages/dashboard/ProfilePage.tsx`
- [Settings](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/pages/dashboard/SettingsPage.tsx): page · Authenticated application settings page. · `src/pages/dashboard/SettingsPage.tsx`

### UI System

Reusable components and higher-level dashboard widgets.

- [Common UI](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/common/index.ts): primitives · Reusable controls and presentational building blocks. · `src/components/common/index.ts`
- [Dashboard Widgets](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/dashboard/index.ts): widgets · Dashboard-specific cards, feeds, tables, and chart wrappers. · `src/components/dashboard/index.ts`
- [Tables](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/components/tables/index.ts): data-grid · Reusable data table engine and domain tables. · `src/components/tables/index.ts`

### State & Data

Client stores, static datasets, and typed content models.

- [Stores](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/store/index.ts): state · Client-side Zustand stores for auth, theme, layout, notifications, and toasts. · `src/store/index.ts`
- [Mock Data](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/data/index.ts): datasets · Static datasets for navigation, charts, users, invoices, notifications, and content. · `src/data/index.ts`
- [Types](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/types/index.ts): contracts · Shared TypeScript interfaces for app content and records. · `src/types/index.ts`
- [Firebase Config](https://github.com/shantopaul/saas-dashboard-website/blob/main/src/config/firebase.ts): integration · Prepared external configuration boundary for future Firebase use. · `src/config/firebase.ts`

## Connections

- Main → App: boots · Main mounts the app root.
- App → Theme: wraps · App composes the theme provider.
- App → Toasts: wraps · App composes the toast provider.
- App → Routes: renders · App delegates page selection to routing.
- Routes → Public Layout: public · Public routes use the marketing shell.
- Routes → Auth Layout: auth · Authentication routes use the auth shell.
- Routes → Auth Gate: guards · Protected routes pass through the auth boundary.
- Auth Gate → Dashboard Shell: allows · Successful auth enters the dashboard shell.
- Public Layout → Landing: hosts · Public shell renders landing content.
- Public Layout → Features: hosts · Public shell renders feature content.
- Public Layout → Pricing: hosts · Public shell renders pricing content.
- Auth Layout → Login: hosts · Auth shell renders sign-in.
- Auth Layout → Register: hosts · Auth shell renders sign-up.
- Dashboard Shell → Header: contains · Dashboard shell includes the header.
- Dashboard Shell → Sidebar: contains · Dashboard shell includes persistent navigation.
- Header → Search: exposes · Header contains command/search entry.
- Header → Notifications: exposes · Header contains notification access.
- Header → Common UI: uses · Header relies on shared UI primitives.
- Dashboard Shell → Dashboard Home: hosts · Shell renders the dashboard overview page.
- Dashboard Shell → Analytics: hosts · Shell renders analytics pages.
- Dashboard Shell → Billing: hosts · Shell renders billing pages.
- Dashboard Shell → Profile: hosts · Shell renders profile pages.
- Dashboard Shell → Settings: hosts · Shell renders settings pages.
- Dashboard Home → Dashboard Widgets: assembles · Overview page is built from dashboard widgets.
- Analytics → Dashboard Widgets: assembles · Analytics page uses chart and summary widgets.
- Billing → Tables: uses · Billing page relies on data table components.
- Profile → Common UI: uses · Profile page uses shared UI controls.
- Settings → Common UI: uses · Settings page uses shared UI controls.
- Common UI → Stores: reads · Shared UI reacts to global client state.
- Dashboard Widgets → Mock Data: reads · Dashboard widgets are fed by static datasets.
- Tables → Mock Data: reads · Tables are populated from mock records.
- Mock Data → Types: typed by · Static data follows shared TypeScript contracts.
- Stores → Types: typed by · Store state uses shared interfaces.
- Search → Mock Data: indexes · Search uses predefined searchable content.
- Firebase Config → App: prepared for · Firebase config marks future backend integration.