ombakale-coforge/cloud-dashboard

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.