# sh-mustak/analyticsdashboard architecture

> Architecture diagram of the GitHub repository sh-mustak/analyticsdashboard, 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/sh-mustak/analyticsdashboard
- Repository: https://github.com/sh-mustak/analyticsdashboard

## Overview

1. **Project shape**
   - This is a **Next.js App Router** application built as a **dashboard UI** rather than a generic website.
   - The repo is organized around one main screen with supporting API, state, and visualization layers.

2. **Top-level app entry**
   - `app/page.tsx` is the primary page entry for the dashboard experience.
   - `app/layout.tsx` provides the shared app shell and global providers/styles, while `app/globals.css` defines application-wide styling.

3. **UI shell / navigation boundary**
   - `components/layout/Header.tsx` and `components/layout/Sidebar.tsx` form the persistent shell around the dashboard content.
   - This creates a clear boundary between global navigation/chrome and the actual dashboard data views.

4. **Dashboard composition**
   - The `components/Dashboard` folder contains the main business UI: KPI summary, filter bar, active customer view, chart section, and bottom section.
   - `KpiOverview.tsx`, `kpiCard.tsx`, `Filterbar.tsx`, `ActiveCustomer.tsx`, `DashboardChartsSection.tsx`, and `DashboardBottomSection.tsx` suggest the page is assembled from multiple focused dashboard panels rather than one monolith.

5. **Visualization subsystem**
   - `components/Charts/*` contains the chart-specific presentation layer:
     - `OrdersBarChart.tsx`
     - `RevenueLineChart.tsx`
     - `UserPieChart.tsx`
   - These components isolate chart rendering from the dashboard layout so the page can swap or reuse visualizations independently.

6. **Chart configuration / adaptation layer**
   - `lib/Chart.ts` likely holds shared chart configuration, data shaping, or utility logic used by multiple chart components.
   - This is the main boundary between raw dashboard data and chart-ready data structures.

7. **Data fetching boundary**
   - `app/api/dashboard/route.ts` defines a server-side API endpoint for dashboard data.
   - The frontend appears to consume dashboard data through this route rather than talking directly to an external service from UI components.

8. **Client-side state orchestration**
   - `store/dashboardStore.ts` centralizes dashboard state such as filters, selected view, and fetched data.
   - This store is the coordination point between the filter UI, KPI panels, and chart components, so the dashboard can react to user-driven changes consistently.

9. **HTTP/client integration**
   - `lib/axios.ts` suggests a shared Axios client or HTTP wrapper used for API calls.
   - This provides a reusable network layer between the dashboard store and the API endpoint, keeping request logic out of the components.

10. **Typed data contract**
   - `types/dashboard.ts` defines the shape of the dashboard domain data.
   - This is an important architecture boundary because it keeps the API response, store state, and chart props aligned.

11. **Loading/placeholder UX**
   - `components/skeletons/KpiCardSkeleton.tsx` indicates the UI supports loading states, at least for KPI cards.
   - That implies asynchronous data flow from the dashboard API into the store and then into the rendered components.

12. **Overall data flow**
   - User opens the dashboard page → layout shell renders → dashboard store loads/updates data via the dashboard API → filter interactions update store state → KPI, active customer, and chart components re-render from shared typed state.
   - In architecture terms, the key boundaries are: **UI shell**, **dashboard state**, **API route**, **data typing**, and **chart rendering**.

13. **Technology/runtime context**
   - The stack is **React + TypeScript + Next.js**, with App Router and server route handlers.
   - The README indicates standard Next.js development/deployment flow, likely with Vercel as the intended hosting platform.

Main entry points: [`store/dashboardStore.ts`](https://github.com/sh-mustak/analyticsdashboard/blob/main/store/dashboardStore.ts) (Dashboard Store), [`app/page.tsx`](https://github.com/sh-mustak/analyticsdashboard/blob/main/app/page.tsx) (Dashboard Page), [`components/Dashboard/DashboardChartsSection.tsx`](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/DashboardChartsSection.tsx) (Charts Section), [`app/layout.tsx`](https://github.com/sh-mustak/analyticsdashboard/blob/main/app/layout.tsx) (App Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App Shell"]
  node_node_app_page["Dashboard Page<br/>app entry<br/>[page.tsx]"]
  node_node_app_layout["App Layout<br/>layout shell<br/>[layout.tsx]"]
  node_node_app_styles["Global Styles<br/>css base<br/>[globals.css]"]
end

subgraph group_group_dashboard["Dashboard UI"]
  node_node_header["Header<br/>chrome<br/>[Header.tsx]"]
  node_node_sidebar["Sidebar<br/>navigation<br/>[Sidebar.tsx]"]
  node_node_kpi_overview["KPI Overview<br/>dashboard panel<br/>[KpiOverview.tsx]"]
  node_node_kpi_card["KPI Card<br/>metric tile<br/>[kpiCard.tsx]"]
  node_node_filterbar["Filter Bar<br/>controls<br/>[Filterbar.tsx]"]
  node_node_active_customer["Active Customer<br/>detail panel<br/>[ActiveCustomer.tsx]"]
  node_node_charts_section["Charts Section<br/>dashboard section"]
  node_node_bottom_section["Bottom Section<br/>dashboard section"]
  node_node_skeleton["KPI Skeleton<br/>loading state"]
end

subgraph group_group_charts["Charts"]
  node_node_bar_chart(("Orders Chart<br/>bar chart<br/>[OrdersBarChart.tsx]"))
  node_node_line_chart(("Revenue Chart<br/>line chart"))
  node_node_pie_chart(("Users Chart<br/>pie chart<br/>[UserPieChart.tsx]"))
  node_node_chart_lib["Chart Logic<br/>chart utils<br/>[Chart.ts]"]
end

subgraph group_group_data["Data Layer"]
  node_node_dashboard_api["Dashboard API<br/>route handler<br/>[route.ts]"]
  node_node_dashboard_store[("Dashboard Store<br/>state store<br/>[dashboardStore.ts]")]
  node_node_axios["HTTP Client<br/>axios wrapper<br/>[axios.ts]"]
  node_node_dashboard_types["Dashboard Types<br/>domain types<br/>[dashboard.ts]"]
end

node_node_app_layout -->|"renders"| node_node_app_page
node_node_app_layout -->|"includes"| node_node_header
node_node_app_layout -->|"includes"| node_node_sidebar
node_node_app_layout -->|"applies"| node_node_app_styles
node_node_app_page -->|"composes"| node_node_kpi_overview
node_node_app_page -->|"composes"| node_node_filterbar
node_node_app_page -->|"composes"| node_node_active_customer
node_node_app_page -->|"composes"| node_node_charts_section
node_node_app_page -->|"composes"| node_node_bottom_section
node_node_kpi_overview -->|"uses"| node_node_kpi_card
node_node_kpi_overview -.->|"loads"| node_node_skeleton
node_node_charts_section -->|"shows"| node_node_bar_chart
node_node_charts_section -->|"shows"| node_node_line_chart
node_node_charts_section -->|"shows"| node_node_pie_chart
node_node_bar_chart -->|"adapts"| node_node_chart_lib
node_node_line_chart -->|"adapts"| node_node_chart_lib
node_node_pie_chart -->|"adapts"| node_node_chart_lib
node_node_dashboard_store -->|"fetches"| node_node_dashboard_api
node_node_dashboard_store -->|"requests"| node_node_axios
node_node_dashboard_store -->|"types"| node_node_dashboard_types
node_node_dashboard_api -->|"returns"| node_node_dashboard_types
node_node_filterbar -->|"updates"| node_node_dashboard_store
node_node_kpi_overview -->|"reads"| node_node_dashboard_store
node_node_active_customer -->|"reads"| node_node_dashboard_store
node_node_charts_section -->|"reads"| node_node_dashboard_store
node_node_bottom_section -->|"reads"| node_node_dashboard_store

click node_node_app_page "https://github.com/sh-mustak/analyticsdashboard/blob/main/app/page.tsx"
click node_node_app_layout "https://github.com/sh-mustak/analyticsdashboard/blob/main/app/layout.tsx"
click node_node_app_styles "https://github.com/sh-mustak/analyticsdashboard/blob/main/app/globals.css"
click node_node_header "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/layout/Header.tsx"
click node_node_sidebar "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/layout/Sidebar.tsx"
click node_node_kpi_overview "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/KpiOverview.tsx"
click node_node_kpi_card "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/kpiCard.tsx"
click node_node_filterbar "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/Filterbar.tsx"
click node_node_active_customer "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/ActiveCustomer.tsx"
click node_node_charts_section "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/DashboardChartsSection.tsx"
click node_node_bottom_section "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/DashboardBottomSection.tsx"
click node_node_bar_chart "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Charts/OrdersBarChart.tsx"
click node_node_line_chart "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Charts/RevenueLineChart.tsx"
click node_node_pie_chart "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Charts/UserPieChart.tsx"
click node_node_chart_lib "https://github.com/sh-mustak/analyticsdashboard/blob/main/lib/Chart.ts"
click node_node_dashboard_api "https://github.com/sh-mustak/analyticsdashboard/blob/main/app/api/dashboard/route.ts"
click node_node_dashboard_store "https://github.com/sh-mustak/analyticsdashboard/blob/main/store/dashboardStore.ts"
click node_node_axios "https://github.com/sh-mustak/analyticsdashboard/blob/main/lib/axios.ts"
click node_node_dashboard_types "https://github.com/sh-mustak/analyticsdashboard/blob/main/types/dashboard.ts"
click node_node_skeleton "https://github.com/sh-mustak/analyticsdashboard/blob/main/components/skeletons/KpiCardSkeleton.tsx"

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_app_page,node_node_app_layout,node_node_app_styles toneBlue
class node_node_header,node_node_sidebar,node_node_kpi_overview,node_node_kpi_card,node_node_filterbar,node_node_active_customer,node_node_charts_section,node_node_bottom_section,node_node_skeleton toneAmber
class node_node_bar_chart,node_node_line_chart,node_node_pie_chart,node_node_chart_lib toneMint
class node_node_dashboard_api,node_node_dashboard_store,node_node_axios,node_node_dashboard_types toneRose
```

## Components

### App Shell

Next.js app router entry, shared layout, and global styles.

- [Dashboard Page](https://github.com/sh-mustak/analyticsdashboard/blob/main/app/page.tsx): app entry · Main dashboard screen rendered by the App Router. · `app/page.tsx`
- [App Layout](https://github.com/sh-mustak/analyticsdashboard/blob/main/app/layout.tsx): layout shell · Shared app shell and providers around the dashboard. · `app/layout.tsx`
- [Global Styles](https://github.com/sh-mustak/analyticsdashboard/blob/main/app/globals.css): css base · Application-wide styling rules. · `app/globals.css`

### Dashboard UI

Primary dashboard composition and persistent chrome.

- [Header](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/layout/Header.tsx): chrome · Top-level dashboard navigation and page chrome. · `components/layout/Header.tsx`
- [Sidebar](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/layout/Sidebar.tsx): navigation · Persistent side navigation boundary. · `components/layout/Sidebar.tsx`
- [KPI Overview](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/KpiOverview.tsx): dashboard panel · Summary section for key metrics. · `components/Dashboard/KpiOverview.tsx`
- [KPI Card](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/kpiCard.tsx): metric tile · Reusable metric card used by the KPI summary. · `components/Dashboard/kpiCard.tsx`
- [Filter Bar](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/Filterbar.tsx): controls · Dashboard filters and view controls. · `components/Dashboard/Filterbar.tsx`
- [Active Customer](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/ActiveCustomer.tsx): detail panel · Focused customer activity view. · `components/Dashboard/ActiveCustomer.tsx`
- [Charts Section](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/DashboardChartsSection.tsx): dashboard section · Container for the dashboard visualization panels. · `components/Dashboard/DashboardChartsSection.tsx`
- [Bottom Section](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Dashboard/DashboardBottomSection.tsx): dashboard section · Lower dashboard content area. · `components/Dashboard/DashboardBottomSection.tsx`
- [KPI Skeleton](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/skeletons/KpiCardSkeleton.tsx): loading state · Placeholder UI for async KPI loading. · `components/skeletons/KpiCardSkeleton.tsx`

### Charts

Chart presentation components and shared chart adaptation logic.

- [Orders Chart](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Charts/OrdersBarChart.tsx): bar chart · Orders visualization rendered as a bar chart. · `components/Charts/OrdersBarChart.tsx`
- [Revenue Chart](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Charts/RevenueLineChart.tsx): line chart · Revenue trend visualization. · `components/Charts/RevenueLineChart.tsx`
- [Users Chart](https://github.com/sh-mustak/analyticsdashboard/blob/main/components/Charts/UserPieChart.tsx): pie chart · User distribution visualization. · `components/Charts/UserPieChart.tsx`
- [Chart Logic](https://github.com/sh-mustak/analyticsdashboard/blob/main/lib/Chart.ts): chart utils · Shared chart configuration and data shaping. · `lib/Chart.ts`

### Data Layer

API, store, HTTP client, and typed contracts for dashboard data.

- [Dashboard API](https://github.com/sh-mustak/analyticsdashboard/blob/main/app/api/dashboard/route.ts): route handler · Server-side endpoint for dashboard data. · `app/api/dashboard/route.ts`
- [Dashboard Store](https://github.com/sh-mustak/analyticsdashboard/blob/main/store/dashboardStore.ts): state store · Central client-side state for filters and fetched dashboard data. · `store/dashboardStore.ts`
- [HTTP Client](https://github.com/sh-mustak/analyticsdashboard/blob/main/lib/axios.ts): axios wrapper · Shared client for dashboard requests. · `lib/axios.ts`
- [Dashboard Types](https://github.com/sh-mustak/analyticsdashboard/blob/main/types/dashboard.ts): domain types · Typed contract for dashboard data and state. · `types/dashboard.ts`

## Connections

- App Layout → Dashboard Page: renders · The shared app shell contains the dashboard page.
- App Layout → Header: includes · Layout provides the global header.
- App Layout → Sidebar: includes · Layout provides the global sidebar.
- App Layout → Global Styles: applies · Layout is styled by the global CSS base.
- Dashboard Page → KPI Overview: composes · The main page assembles the KPI summary.
- Dashboard Page → Filter Bar: composes · The main page includes dashboard filtering controls.
- Dashboard Page → Active Customer: composes · The main page includes the active customer panel.
- Dashboard Page → Charts Section: composes · The main page includes the charts section.
- Dashboard Page → Bottom Section: composes · The main page includes the lower dashboard section.
- KPI Overview → KPI Card: uses · KPI overview is built from reusable metric cards.
- KPI Overview → KPI Skeleton: loads · KPI summary supports a loading placeholder.
- Charts Section → Orders Chart: shows · Charts section renders the orders chart.
- Charts Section → Revenue Chart: shows · Charts section renders the revenue chart.
- Charts Section → Users Chart: shows · Charts section renders the user chart.
- Orders Chart → Chart Logic: adapts · Bar chart uses shared chart configuration and shaping.
- Revenue Chart → Chart Logic: adapts · Line chart uses shared chart configuration and shaping.
- Users Chart → Chart Logic: adapts · Pie chart uses shared chart configuration and shaping.
- Dashboard Store → Dashboard API: fetches · Store coordinates loading dashboard data from the API route.
- Dashboard Store → HTTP Client: requests · Store uses a shared HTTP client for network calls.
- Dashboard Store → Dashboard Types: types · Store state follows the shared dashboard contract.
- Dashboard API → Dashboard Types: returns · API responses are shaped by the dashboard types.
- Filter Bar → Dashboard Store: updates · Filter interactions update central dashboard state.
- KPI Overview → Dashboard Store: reads · KPI values are driven from store state.
- Active Customer → Dashboard Store: reads · Active customer panel reflects store state.
- Charts Section → Dashboard Store: reads · Charts render from shared dashboard state.
- Bottom Section → Dashboard Store: reads · Lower dashboard content is driven by store state.