# basil23l034ec-ux/smart-trolley-admin-dashboard architecture

> Architecture diagram of the GitHub repository basil23l034ec-ux/smart-trolley-admin-dashboard, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-05-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/basil23l034ec-ux/smart-trolley-admin-dashboard
- Repository: https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard

## Overview

1. This repository is a Next.js App Router frontend for a “smart trolley” / customer UX admin dashboard. The codebase is UI-centric: the visible architecture is organized around routes, shared layouts, reusable components, and local mock data rather than a backend API layer.

2. The route surface is small and explicit. There is a root page, a login page, and a dashboard area with dedicated subpages for carts, inventory, payments, products, reports, settings, and trolleys. Each of those routes is a separate page component under `src/app/dashboard/*`.

3. The main structural boundary is the dashboard shell. `src/app/dashboard/layout.tsx` likely wraps all dashboard pages with persistent navigation and chrome, while `src/components/dashboard/header.tsx`, `sidebar.tsx`, and `chatbot.tsx` provide the shared top-level admin experience across pages.

4. The application uses a composition-heavy component model built on a large reusable UI primitive set in `src/components/ui`. The presence of `components.json` and many atomic controls suggests a shadcn/ui-style system: buttons, dialogs, tables, sheets, tabs, forms, selects, tooltips, etc. Pages assemble these primitives into screen-specific views.

5. Data flow appears mostly local and presentation-driven. `src/lib/mock-data.ts` is the clearest data source in the tree, implying the dashboard screens are populated from in-repo mock datasets rather than live services. `src/lib/utils.ts` provides shared helper logic used across components.

6. Responsive behavior is handled through mobile hooks in `src/hooks/use-mobile.ts` and `src/lib/hooks/use-mobile.tsx`. These hooks likely drive layout decisions such as collapsing the sidebar, switching between sheet/drawer interactions, and adapting dashboard navigation for smaller screens.

7. Error handling is explicit at the app boundary. `src/app/global-error.tsx` provides a Next.js-wide fallback for uncaught route/runtime failures, and `src/components/ErrorReporter.tsx` suggests a separate error capture/reporting concern embedded in the UI.

8. There is a distinct “visual edits” subsystem under `src/visual-edits`. `VisualEditsMessenger.tsx` and `component-tagger-loader.js` indicate integration with an external editing or annotation workflow, probably for tagging components and exchanging messages with an editor/runtime overlay.

9. Styling and runtime setup are standard Next.js front-end infrastructure. `src/app/globals.css`, `postcss.config.mjs`, and `next.config.ts` define the global styling/build behavior, while the project is TypeScript-based (`tsconfig.json`) and linted via ESLint (`eslint.config.mjs`).

10. The repo has no visible API routes, database layer, or server-service modules in the tree, so the architecture is largely client-rendered/presentational. The only clearly stated deployment target in the README is Vercel, which reinforces that this is a deployable Next.js frontend rather than a full-stack system.

Main entry points: [`src/app/dashboard/layout.tsx`](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/layout.tsx) (Dashboard layout), [`src/lib/mock-data.ts`](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/lib/mock-data.ts) (Mock data), [`src/app/layout.tsx`](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/layout.tsx) (App layout), [`src/components/ui`](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/tree/main/src/components/ui) (UI primitives)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Routes"]
  node_app_root["Root page<br/>Next page<br/>[page.tsx]"]
  node_login_page["Login<br/>Next page<br/>[page.tsx]"]
  node_dashboard_home["Dashboard home<br/>Next page<br/>[page.tsx]"]
  node_dashboard_carts["Carts<br/>Dashboard page<br/>[page.tsx]"]
  node_dashboard_inventory["Inventory<br/>Dashboard page<br/>[page.tsx]"]
  node_dashboard_payments["Payments<br/>Dashboard page<br/>[page.tsx]"]
  node_dashboard_products["Products<br/>Dashboard page<br/>[page.tsx]"]
  node_dashboard_reports["Reports<br/>Dashboard page<br/>[page.tsx]"]
  node_dashboard_settings["Settings<br/>Dashboard page<br/>[page.tsx]"]
  node_dashboard_trolleys["Trolleys<br/>Dashboard page<br/>[page.tsx]"]
end

subgraph group_dashboard["Dashboard shell"]
  node_dashboard_layout["Dashboard layout<br/>Route shell<br/>[layout.tsx]"]
  node_header["Header<br/>Dashboard chrome<br/>[header.tsx]"]
  node_sidebar["Sidebar<br/>Dashboard nav<br/>[sidebar.tsx]"]
  node_chatbot["Chatbot<br/>Assistant widget<br/>[chatbot.tsx]"]
end

subgraph group_ui["Shared UI"]
  node_ui_primitives["UI primitives<br/>Component kit"]
end

subgraph group_runtime["Runtime & data"]
  node_app_layout["App layout<br/>Next shell<br/>[layout.tsx]"]
  node_error_reporter["Error reporter<br/>Error UI<br/>[ErrorReporter.tsx]"]
  node_mock_data[("Mock data<br/>Local data<br/>[mock-data.ts]")]
  node_mobile_hooks["Mobile hooks<br/>Responsive hook<br/>[use-mobile.tsx]"]
  node_globals_css["Global styles<br/>Stylesheet<br/>[globals.css]"]
  node_next_config["Next config<br/>Build config<br/>[next.config.ts]"]
end

subgraph group_editor["Visual edits"]
  node_visual_edits["Visual edits<br/>Overlay tools"]
  node_component_tagger["Tagger loader<br/>Editor bridge"]
end

node_app_layout -->|"wraps"| node_app_root
node_app_layout -->|"wraps"| node_login_page
node_app_layout -->|"hosts"| node_dashboard_layout
node_dashboard_layout -->|"includes"| node_header
node_dashboard_layout -->|"includes"| node_sidebar
node_dashboard_layout -->|"includes"| node_chatbot
node_dashboard_layout -->|"wraps"| node_dashboard_home
node_dashboard_layout -->|"wraps"| node_dashboard_carts
node_dashboard_layout -->|"wraps"| node_dashboard_inventory
node_dashboard_layout -->|"wraps"| node_dashboard_payments
node_dashboard_layout -->|"wraps"| node_dashboard_products
node_dashboard_layout -->|"wraps"| node_dashboard_reports
node_dashboard_layout -->|"wraps"| node_dashboard_settings
node_dashboard_layout -->|"wraps"| node_dashboard_trolleys
node_dashboard_home -->|"reads"| node_mock_data
node_dashboard_carts -->|"reads"| node_mock_data
node_dashboard_inventory -->|"reads"| node_mock_data
node_dashboard_payments -->|"reads"| node_mock_data
node_dashboard_products -->|"reads"| node_mock_data
node_dashboard_reports -->|"reads"| node_mock_data
node_dashboard_settings -->|"reads"| node_mock_data
node_dashboard_trolleys -->|"reads"| node_mock_data
node_header -->|"composes"| node_ui_primitives
node_sidebar -->|"composes"| node_ui_primitives
node_chatbot -->|"composes"| node_ui_primitives
node_dashboard_home -->|"composes"| node_ui_primitives
node_app_root -->|"composes"| node_ui_primitives
node_login_page -->|"composes"| node_ui_primitives
node_mobile_hooks -->|"adapts"| node_sidebar
node_mobile_hooks -->|"adapts"| node_dashboard_layout
node_error_reporter -->|"integrates"| node_app_layout
node_visual_edits -->|"bridges"| node_component_tagger
node_globals_css -->|"styles"| node_app_layout
node_next_config -->|"configures"| node_app_layout

click node_app_root "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/page.tsx"
click node_login_page "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/login/page.tsx"
click node_dashboard_home "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/page.tsx"
click node_dashboard_carts "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/carts/page.tsx"
click node_dashboard_inventory "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/inventory/page.tsx"
click node_dashboard_payments "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/payments/page.tsx"
click node_dashboard_products "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/products/page.tsx"
click node_dashboard_reports "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/reports/page.tsx"
click node_dashboard_settings "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/settings/page.tsx"
click node_dashboard_trolleys "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/trolleys/page.tsx"
click node_app_layout "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/layout.tsx"
click node_dashboard_layout "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/layout.tsx"
click node_header "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/dashboard/header.tsx"
click node_sidebar "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/dashboard/sidebar.tsx"
click node_chatbot "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/dashboard/chatbot.tsx"
click node_ui_primitives "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/tree/main/src/components/ui"
click node_error_reporter "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/ErrorReporter.tsx"
click node_mock_data "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/lib/mock-data.ts"
click node_mobile_hooks "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/lib/hooks/use-mobile.tsx"
click node_visual_edits "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/visual-edits/VisualEditsMessenger.tsx"
click node_component_tagger "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/visual-edits/component-tagger-loader.js"
click node_globals_css "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/globals.css"
click node_next_config "https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/next.config.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_app_root,node_login_page,node_dashboard_home,node_dashboard_carts,node_dashboard_inventory,node_dashboard_payments,node_dashboard_products,node_dashboard_reports,node_dashboard_settings,node_dashboard_trolleys toneBlue
class node_dashboard_layout,node_header,node_sidebar,node_chatbot toneAmber
class node_ui_primitives toneMint
class node_app_layout,node_error_reporter,node_mock_data,node_mobile_hooks,node_globals_css,node_next_config toneRose
class node_visual_edits,node_component_tagger toneIndigo
```

## Components

### Routes

Next.js App Router entrypoints and page surfaces.

- [Root page](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/page.tsx): Next page · Landing entrypoint for the app. · `src/app/page.tsx`
- [Login](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/login/page.tsx): Next page · Authentication entry screen. · `src/app/login/page.tsx`
- [Dashboard home](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/page.tsx): Next page · Top-level dashboard landing page. · `src/app/dashboard/page.tsx`
- [Carts](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/carts/page.tsx): Dashboard page · Cart management screen. · `src/app/dashboard/carts/page.tsx`
- [Inventory](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/inventory/page.tsx): Dashboard page · Inventory management screen. · `src/app/dashboard/inventory/page.tsx`
- [Payments](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/payments/page.tsx): Dashboard page · Payment operations screen. · `src/app/dashboard/payments/page.tsx`
- [Products](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/products/page.tsx): Dashboard page · Product catalog screen. · `src/app/dashboard/products/page.tsx`
- [Reports](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/reports/page.tsx): Dashboard page · Analytics and reporting screen. · `src/app/dashboard/reports/page.tsx`
- [Settings](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/settings/page.tsx): Dashboard page · Configuration and preferences screen. · `src/app/dashboard/settings/page.tsx`
- [Trolleys](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/trolleys/page.tsx): Dashboard page · Trolley management screen. · `src/app/dashboard/trolleys/page.tsx`

### Dashboard shell

Persistent chrome and dashboard-specific UI composition.

- [Dashboard layout](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/dashboard/layout.tsx): Route shell · Persistent dashboard chrome around all dashboard routes. · `src/app/dashboard/layout.tsx`
- [Header](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/dashboard/header.tsx): Dashboard chrome · Top navigation and status area. · `src/components/dashboard/header.tsx`
- [Sidebar](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/dashboard/sidebar.tsx): Dashboard nav · Primary dashboard navigation. · `src/components/dashboard/sidebar.tsx`
- [Chatbot](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/dashboard/chatbot.tsx): Assistant widget · Embedded dashboard assistant panel. · `src/components/dashboard/chatbot.tsx`

### Shared UI

Reusable primitives and app-wide component building blocks.

- [UI primitives](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/tree/main/src/components/ui): Component kit · Reusable shadcn-style controls and composite widgets. · `src/components/ui`

### Runtime & data

Local data, hooks, styling, and app infrastructure.

- [App layout](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/layout.tsx): Next shell · Global HTML/app shell for the entire site. · `src/app/layout.tsx`
- [Error reporter](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/components/ErrorReporter.tsx): Error UI · Client-side error capture/reporting component. · `src/components/ErrorReporter.tsx`
- [Mock data](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/lib/mock-data.ts): Local data · In-repo datasets feeding the dashboard screens. · `src/lib/mock-data.ts`
- [Mobile hooks](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/lib/hooks/use-mobile.tsx): Responsive hook · Viewport-aware behavior for responsive navigation and layouts. · `src/lib/hooks/use-mobile.tsx`
- [Global styles](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/app/globals.css): Stylesheet · Application-wide CSS baseline and theming. · `src/app/globals.css`
- [Next config](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/next.config.ts): Build config · Next.js build/runtime configuration. · `next.config.ts`

### Visual edits

Overlay and messaging integration for component editing.

- [Visual edits](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/visual-edits/VisualEditsMessenger.tsx): Overlay tools · Component tagging and editor messaging integration. · `src/visual-edits/VisualEditsMessenger.tsx`
- [Tagger loader](https://github.com/basil23l034ec-ux/smart-trolley-admin-dashboard/blob/main/src/visual-edits/component-tagger-loader.js): Editor bridge · Loader for component tagging integration. · `src/visual-edits/component-tagger-loader.js`

## Connections

- App layout → Root page: wraps · Global app shell contains the root page.
- App layout → Login: wraps · Global app shell contains login.
- App layout → Dashboard layout: hosts · Dashboard route tree is nested under the app shell.
- Dashboard layout → Header: includes · Persistent header in dashboard pages.
- Dashboard layout → Sidebar: includes · Persistent sidebar navigation in dashboard pages.
- Dashboard layout → Chatbot: includes · Shared assistant widget in the dashboard shell.
- Dashboard layout → Dashboard home: wraps · Dashboard layout surrounds the main dashboard landing page.
- Dashboard layout → Carts: wraps · Dashboard layout surrounds the carts page.
- Dashboard layout → Inventory: wraps · Dashboard layout surrounds the inventory page.
- Dashboard layout → Payments: wraps · Dashboard layout surrounds the payments page.
- Dashboard layout → Products: wraps · Dashboard layout surrounds the products page.
- Dashboard layout → Reports: wraps · Dashboard layout surrounds the reports page.
- Dashboard layout → Settings: wraps · Dashboard layout surrounds the settings page.
- Dashboard layout → Trolleys: wraps · Dashboard layout surrounds the trolleys page.
- Dashboard home → Mock data: reads · Dashboard content is driven by local mock datasets.
- Carts → Mock data: reads · Carts screen uses local data.
- Inventory → Mock data: reads · Inventory screen uses local data.
- Payments → Mock data: reads · Payments screen uses local data.
- Products → Mock data: reads · Products screen uses local data.
- Reports → Mock data: reads · Reports screen uses local data.
- Settings → Mock data: reads · Settings screen may use shared mock-backed state.
- Trolleys → Mock data: reads · Trolleys screen uses local data.
- Header → UI primitives: composes · Header is assembled from shared UI controls.
- Sidebar → UI primitives: composes · Sidebar uses shared primitives for navigation and layout.
- Chatbot → UI primitives: composes · Assistant UI is built from reusable controls.
- Dashboard home → UI primitives: composes · Dashboard pages are built from the shared component kit.
- Root page → UI primitives: composes · Root-facing UI uses shared controls.
- Login → UI primitives: composes · Login screen uses shared controls.
- Mobile hooks → Sidebar: adapts · Responsive hooks likely drive sidebar collapse and sheet behavior.
- Mobile hooks → Dashboard layout: adapts · Layout behavior changes on small screens.
- Error reporter → App layout: integrates · Error reporting is embedded at the app boundary.
- Visual edits → Tagger loader: bridges · Editor overlay and tagging loader work together.
- Global styles → App layout: styles · Global stylesheet is loaded by the app shell.
- Next config → App layout: configures · Next.js config governs the app runtime/build.