# ombakale-coforge/cloud-dashboard architecture

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

- Interactive diagram: https://gitdiagram.com/ombakale-coforge/cloud-dashboard
- Repository: https://github.com/ombakale-coforge/cloud-dashboard

## Overview

#### Purpose and Entry Points
This repository combines an AWS cost-data pipeline with a static cost-dashboard frontend. The pipeline is rooted at `cost-piplines/src/aws_cost_pipeline.js`; the dashboard bootstraps from `cost-piplines/cost-dashboard/src/main.tsx` into `cost-piplines/cost-dashboard/src/App.tsx`.

#### Cost Data Pipeline
`cost-piplines/src/aws_cost_pipeline.js` is the backend/data-collection boundary, likely responsible for obtaining and preparing AWS cost information. Environment-based credentials or settings are intended through `cost-piplines/.env.example`. The pipeline is a separate Node.js package, defined by `cost-piplines/package.json`.

#### Dashboard Build and Runtime
The dashboard is a TypeScript React single-page application built with Vite. Its application/runtime boundary is `cost-piplines/cost-dashboard/src/main.tsx`, with bundler configuration in `cost-piplines/cost-dashboard/vite.config.ts` and package/runtime dependencies in `cost-piplines/cost-dashboard/package.json`.

#### Data Synchronization and Ingestion
`cost-piplines/cost-dashboard/scripts/sync-data.js` is the explicit bridge between generated cost data and dashboard-consumable assets. At browser runtime, `cost-piplines/cost-dashboard/src/lib/useCsv.ts` loads/parses CSV-oriented data, while `cost-piplines/cost-dashboard/src/lib/types.ts` defines the shared data model expected by UI consumers.

#### Dashboard Composition
`cost-piplines/cost-dashboard/src/App.tsx` orchestrates the dashboard screen and composes its main presentation stages:
- Navigation: `cost-piplines/cost-dashboard/src/components/Navbar.tsx`
- Headline and KPI reporting: `cost-piplines/cost-dashboard/src/components/SummaryCards.tsx`, `cost-piplines/cost-dashboard/src/components/KpiCards.tsx`
- Trend or categorical visualizations: `cost-piplines/cost-dashboard/src/components/ChartsSection.tsx`
- Detailed cost records: `cost-piplines/cost-dashboard/src/components/DataTables.tsx`

#### UI Boundary and Styling
Feature components depend on a local reusable UI primitive layer under `cost-piplines/cost-dashboard/src/components/ui`, notably cards, tables, tabs, and tooltips. Global styling enters through `cost-piplines/cost-dashboard/src/index.css` and `cost-piplines/cost-dashboard/src/App.css`; Tailwind is configured by `cost-piplines/cost-dashboard/tailwind.config.js`.

#### Primary Flow and External Boundary
The intended flow is AWS cost source → Node pipeline → synchronized dashboard data → client-side CSV hook/types → React dashboard sections. AWS is the material external service boundary; credentials/configuration should remain outside frontend source and be supplied to the pipeline via environment configuration. The frontend is static-client runtime code and should not directly own AWS access.

Main entry points: [`cost-piplines/cost-dashboard/src/App.tsx`](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/App.tsx) (Dashboard App), [`cost-piplines/src/aws_cost_pipeline.js`](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/src/aws_cost_pipeline.js) (AWS Cost Pipeline), [`cost-piplines/cost-dashboard/src/components/ui`](https://github.com/ombakale-coforge/cloud-dashboard/tree/main/cost-piplines/cost-dashboard/src/components/ui) (UI Primitives), [`cost-piplines/cost-dashboard/src/main.tsx`](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/main.tsx) (Client Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pipeline["Cost Pipeline"]
  node_pipeline_env["Pipeline Environment<br/>environment config<br/>[.env.example]"]
  node_pipeline_package["Pipeline Package<br/>Node.js package<br/>[package.json]"]
  node_cost_pipeline["AWS Cost Pipeline<br/>Node.js collector"]
end

subgraph group_sync["Data Sync"]
  node_sync_script["Data Sync<br/>sync script<br/>[sync-data.js]"]
end

subgraph group_dashboard["Static Dashboard"]
  node_dashboard_package["Dashboard Package<br/>React package<br/>[package.json]"]
  node_vite["Vite Build<br/>bundler config<br/>[vite.config.ts]"]
  node_main["Client Entry<br/>React bootstrap<br/>[main.tsx]"]
  node_app["Dashboard App<br/>screen orchestrator<br/>[App.tsx]"]
  node_csv_hook["CSV Loader<br/>client data hook<br/>[useCsv.ts]"]
  node_types["Cost Data Model<br/>TypeScript types<br/>[types.ts]"]
  node_navbar["Navigation<br/>React component<br/>[Navbar.tsx]"]
  node_summary["Summary Cards<br/>React component<br/>[SummaryCards.tsx]"]
  node_kpis["KPI Cards<br/>React component<br/>[KpiCards.tsx]"]
  node_charts["Charts<br/>React component<br/>[ChartsSection.tsx]"]
  node_tables["Data Tables<br/>React component<br/>[DataTables.tsx]"]
  node_ui_primitives["UI Primitives<br/>component library"]
  node_styles["Global Styles<br/>CSS entrypoints<br/>[index.css]"]
  node_app_styles["App Styles<br/>CSS stylesheet<br/>[App.css]"]
  node_tailwind["Tailwind Config<br/>styling config<br/>[tailwind.config.js]"]
end

node_aws{{"AWS Cost Source<br/>external service"}}

node_pipeline_env -.->|"configures"| node_cost_pipeline
node_pipeline_package -.->|"defines runtime"| node_cost_pipeline
node_aws -->|"cost data"| node_cost_pipeline
node_cost_pipeline -->|"generated data"| node_sync_script
node_sync_script -->|"dashboard CSV assets"| node_csv_hook
node_dashboard_package -.->|"provides build runtime"| node_vite
node_vite -->|"builds"| node_main
node_main -->|"mounts"| node_app
node_csv_hook -->|"uses model"| node_types
node_csv_hook -->|"cost data"| node_app
node_app -->|"composes"| node_navbar
node_app -->|"composes"| node_summary
node_app -->|"composes"| node_kpis
node_app -->|"composes"| node_charts
node_app -->|"composes"| node_tables
node_summary -->|"uses"| node_ui_primitives
node_kpis -->|"uses"| node_ui_primitives
node_charts -->|"uses"| node_ui_primitives
node_tables -->|"uses"| node_ui_primitives
node_main -->|"loads"| node_styles
node_app -->|"loads"| node_app_styles
node_tailwind -.->|"configures styling"| node_styles

click node_pipeline_env "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/.env.example"
click node_pipeline_package "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/package.json"
click node_cost_pipeline "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/src/aws_cost_pipeline.js"
click node_sync_script "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/scripts/sync-data.js"
click node_dashboard_package "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/package.json"
click node_vite "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/vite.config.ts"
click node_main "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/main.tsx"
click node_app "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/App.tsx"
click node_csv_hook "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/lib/useCsv.ts"
click node_types "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/lib/types.ts"
click node_navbar "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/Navbar.tsx"
click node_summary "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/SummaryCards.tsx"
click node_kpis "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/KpiCards.tsx"
click node_charts "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/ChartsSection.tsx"
click node_tables "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/DataTables.tsx"
click node_ui_primitives "https://github.com/ombakale-coforge/cloud-dashboard/tree/main/cost-piplines/cost-dashboard/src/components/ui"
click node_styles "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/index.css"
click node_app_styles "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/App.css"
click node_tailwind "https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/tailwind.config.js"

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_pipeline_env,node_pipeline_package,node_cost_pipeline toneBlue
class node_sync_script toneAmber
class node_dashboard_package,node_vite,node_main,node_app,node_csv_hook,node_types,node_navbar,node_summary,node_kpis,node_charts,node_tables,node_ui_primitives,node_styles,node_app_styles,node_tailwind toneMint
class node_aws toneNeutral
```

## Components

### Cost Pipeline

- [Pipeline Environment](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/.env.example): environment config · Supplies credentials and settings outside frontend code. · `cost-piplines/.env.example`
- [Pipeline Package](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/package.json): Node.js package · `cost-piplines/package.json`
- [AWS Cost Pipeline](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/src/aws_cost_pipeline.js): Node.js collector · Obtains and prepares AWS cost information. · `cost-piplines/src/aws_cost_pipeline.js`

### Data Sync

- [Data Sync](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/scripts/sync-data.js): sync script · Bridges generated cost data into dashboard assets. · `cost-piplines/cost-dashboard/scripts/sync-data.js`

### Static Dashboard

- [Dashboard Package](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/package.json): React package · `cost-piplines/cost-dashboard/package.json`
- [Vite Build](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/vite.config.ts): bundler config · `cost-piplines/cost-dashboard/vite.config.ts`
- [Client Entry](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/main.tsx): React bootstrap · `cost-piplines/cost-dashboard/src/main.tsx`
- [Dashboard App](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/App.tsx): screen orchestrator · Composes the primary dashboard sections. · `cost-piplines/cost-dashboard/src/App.tsx`
- [CSV Loader](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/lib/useCsv.ts): client data hook · Loads and parses CSV-oriented dashboard data. · `cost-piplines/cost-dashboard/src/lib/useCsv.ts`
- [Cost Data Model](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/lib/types.ts): TypeScript types · Shared model for dashboard data consumers. · `cost-piplines/cost-dashboard/src/lib/types.ts`
- [Navigation](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/Navbar.tsx): React component · `cost-piplines/cost-dashboard/src/components/Navbar.tsx`
- [Summary Cards](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/SummaryCards.tsx): React component · Headline cost reporting. · `cost-piplines/cost-dashboard/src/components/SummaryCards.tsx`
- [KPI Cards](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/KpiCards.tsx): React component · KPI reporting. · `cost-piplines/cost-dashboard/src/components/KpiCards.tsx`
- [Charts](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/ChartsSection.tsx): React component · Trend and categorical visualizations. · `cost-piplines/cost-dashboard/src/components/ChartsSection.tsx`
- [Data Tables](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/components/DataTables.tsx): React component · Detailed cost records. · `cost-piplines/cost-dashboard/src/components/DataTables.tsx`
- [UI Primitives](https://github.com/ombakale-coforge/cloud-dashboard/tree/main/cost-piplines/cost-dashboard/src/components/ui): component library · Reusable cards, tables, tabs, and tooltips. · `cost-piplines/cost-dashboard/src/components/ui`
- [Global Styles](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/index.css): CSS entrypoints · `cost-piplines/cost-dashboard/src/index.css`
- [App Styles](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/src/App.css): CSS stylesheet · `cost-piplines/cost-dashboard/src/App.css`
- [Tailwind Config](https://github.com/ombakale-coforge/cloud-dashboard/blob/main/cost-piplines/cost-dashboard/tailwind.config.js): styling config · `cost-piplines/cost-dashboard/tailwind.config.js`

### Other components

- **AWS Cost Source**: external service · Material cost-data boundary.

## Connections

- Pipeline Environment → AWS Cost Pipeline: configures
- Pipeline Package → AWS Cost Pipeline: defines runtime
- AWS Cost Source → AWS Cost Pipeline: cost data
- AWS Cost Pipeline → Data Sync: generated data
- Data Sync → CSV Loader: dashboard CSV assets
- Dashboard Package → Vite Build: provides build runtime
- Vite Build → Client Entry: builds
- Client Entry → Dashboard App: mounts
- CSV Loader → Cost Data Model: uses model
- CSV Loader → Dashboard App: cost data
- Dashboard App → Navigation: composes
- Dashboard App → Summary Cards: composes
- Dashboard App → KPI Cards: composes
- Dashboard App → Charts: composes
- Dashboard App → Data Tables: composes
- Summary Cards → UI Primitives: uses
- KPI Cards → UI Primitives: uses
- Charts → UI Primitives: uses
- Data Tables → UI Primitives: uses
- Client Entry → Global Styles: loads
- Dashboard App → App Styles: loads
- Tailwind Config → Global Styles: configures styling