# rehankwatla/solargrid-frontend architecture

> Architecture diagram of the GitHub repository rehankwatla/solargrid-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rehankwatla/solargrid-frontend
- Repository: https://github.com/rehankwatla/solargrid-frontend

## Overview

SolarGrid is an operational dashboard for coordinating energy across solar, batteries, grid supply, and critical hospital loads. Users enter through the routed dashboard, inspect live energy and facility conditions, then use dedicated views for forecasts, alerts, load priorities, energy sharing, and metering. The documented data path uses Supabase queries and Realtime; the repository also contains an Express API backed by in-memory storage. The graph preserves both, but sampled evidence does not establish that the dashboard’s live data path calls that API.

Main entry points: [`client/src/App.tsx`](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/App.tsx) (Routed Dashboard), [`client/src/contexts/DashboardDataContext.tsx`](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/contexts/DashboardDataContext.tsx) (Dashboard Data), [`client/src/pages/DepartmentsRooms.tsx`](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/DepartmentsRooms.tsx) (Departments and Rooms), [`client/src/hooks/useSupabaseData.ts`](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/hooks/useSupabaseData.ts) (Live Data Hooks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app["Routed Dashboard<br/>[App.tsx]"]
  node_settings["Facility Settings<br/>[Settings.tsx]"]
end

subgraph group_ops["Energy Operations"]
  node_energy["Energy Analytics<br/>[Energy.tsx]"]
  node_overview["Energy Overview<br/>[Overview.tsx]"]
  node_solar_tracking["Solar Tracking"]
  node_simulation["Panel Simulation<br/>[solarSimulation.ts]"]
  node_sharing["Energy Sharing<br/>[EnergySharing.tsx]"]
  node_metering["Metering and Settlement<br/>[Feature1.tsx]"]
end

subgraph group_hospital["Hospital Operations"]
  node_critical_loads["Critical Loads<br/>[CriticalLoads.tsx]"]
  node_departments["Departments and Rooms"]
  node_hospital_data["Hospital Facility Data<br/>[hospitalData.ts]"]
end

subgraph group_insight["Intelligence and Events"]
  node_intelligence["Forecast and Dispatch<br/>[Intelligence.tsx]"]
  node_alerts["Alerts<br/>[Alerts.tsx]"]
end

subgraph group_data["Data Services"]
  node_dashboard_data["Dashboard Data"]
  node_live_queries["Live Data Hooks<br/>[useSupabaseData.ts]"]
  node_supabase[("Supabase Data")]
  node_api["API Routes<br/>[routes.ts]"]
  node_storage[("In-Memory Storage<br/>[storage.ts]")]
  node_api_client["Query and Mutation API<br/>[api.ts]"]
end

node_operator(("Operator"))

node_operator -->|"uses"| node_app
node_app -->|"routes to"| node_overview
node_app -->|"routes to"| node_energy
node_app -->|"routes to"| node_critical_loads
node_app -->|"routes to"| node_departments
node_app -->|"routes to"| node_sharing
node_app -->|"routes to"| node_intelligence
node_app -->|"routes to"| node_alerts
node_app -->|"routes to"| node_metering
node_app -->|"routes to"| node_settings
node_app -->|"provides"| node_dashboard_data
node_dashboard_data -->|"queries"| node_live_queries
node_live_queries -->|"fetches and subscribes"| node_supabase
node_dashboard_data -->|"calls mutations"| node_api_client
node_solar_tracking -->|"derives state"| node_simulation
node_departments -->|"uses facility data"| node_hospital_data
node_api -->|"calls storage"| node_storage

click node_app "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/App.tsx"
click node_dashboard_data "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/contexts/DashboardDataContext.tsx"
click node_live_queries "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/hooks/useSupabaseData.ts"
click node_energy "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Energy.tsx"
click node_overview "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Overview.tsx"
click node_solar_tracking "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/contexts/SolarTrackingContext.tsx"
click node_simulation "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/lib/solarSimulation.ts"
click node_critical_loads "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/CriticalLoads.tsx"
click node_departments "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/DepartmentsRooms.tsx"
click node_hospital_data "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/data/hospitalData.ts"
click node_sharing "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/EnergySharing.tsx"
click node_intelligence "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Intelligence.tsx"
click node_alerts "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Alerts.tsx"
click node_metering "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Feature1.tsx"
click node_settings "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Settings.tsx"
click node_api "https://github.com/rehankwatla/solargrid-frontend/blob/main/server/routes.ts"
click node_storage "https://github.com/rehankwatla/solargrid-frontend/blob/main/server/storage.ts"
click node_api_client "https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/services/api.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,node_settings toneBlue
class node_energy,node_overview,node_solar_tracking,node_simulation,node_sharing,node_metering toneAmber
class node_critical_loads,node_departments,node_hospital_data toneMint
class node_intelligence,node_alerts toneRose
class node_dashboard_data,node_live_queries,node_supabase,node_api,node_storage,node_api_client,node_operator toneIndigo
```

## Components

### Application Shell

- [Routed Dashboard](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Facility Settings](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Settings.tsx): `client/src/pages/Settings.tsx`

### Energy Operations

- [Energy Analytics](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Energy.tsx): `client/src/pages/Energy.tsx`
- [Energy Overview](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Overview.tsx): `client/src/pages/Overview.tsx`
- [Solar Tracking](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/contexts/SolarTrackingContext.tsx): `client/src/contexts/SolarTrackingContext.tsx`
- [Panel Simulation](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/lib/solarSimulation.ts): `client/src/lib/solarSimulation.ts`
- [Energy Sharing](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/EnergySharing.tsx): `client/src/pages/EnergySharing.tsx`
- [Metering and Settlement](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Feature1.tsx): `client/src/pages/Feature1.tsx`

### Hospital Operations

- [Critical Loads](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/CriticalLoads.tsx): `client/src/pages/CriticalLoads.tsx`
- [Departments and Rooms](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/DepartmentsRooms.tsx): `client/src/pages/DepartmentsRooms.tsx`
- [Hospital Facility Data](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/data/hospitalData.ts): `client/src/data/hospitalData.ts`

### Intelligence and Events

- [Forecast and Dispatch](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Intelligence.tsx): `client/src/pages/Intelligence.tsx`
- [Alerts](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/pages/Alerts.tsx): `client/src/pages/Alerts.tsx`

### Data Services

- [Dashboard Data](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/contexts/DashboardDataContext.tsx): `client/src/contexts/DashboardDataContext.tsx`
- [Live Data Hooks](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/hooks/useSupabaseData.ts): `client/src/hooks/useSupabaseData.ts`
- **Supabase Data**
- [API Routes](https://github.com/rehankwatla/solargrid-frontend/blob/main/server/routes.ts): `server/routes.ts`
- [In-Memory Storage](https://github.com/rehankwatla/solargrid-frontend/blob/main/server/storage.ts): `server/storage.ts`
- [Query and Mutation API](https://github.com/rehankwatla/solargrid-frontend/blob/main/client/src/services/api.ts): `client/src/services/api.ts`

### Other components

- **Operator**

## Connections

- Operator → Routed Dashboard: uses
- Routed Dashboard → Energy Overview: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Energy Analytics: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Critical Loads: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Departments and Rooms: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Energy Sharing: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Forecast and Dispatch: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Alerts: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Metering and Settlement: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Facility Settings: routes to (evidence: `client/src/App.tsx`)
- Routed Dashboard → Dashboard Data: provides (evidence: `client/src/App.tsx`)
- Dashboard Data → Live Data Hooks: queries (evidence: `client/src/contexts/DashboardDataContext.tsx`)
- Live Data Hooks → Supabase Data: fetches and subscribes
- Dashboard Data → Query and Mutation API: calls mutations (evidence: `client/src/contexts/DashboardDataContext.tsx`)
- Solar Tracking → Panel Simulation: derives state (evidence: `client/src/contexts/SolarTrackingContext.tsx`)
- Departments and Rooms → Hospital Facility Data: uses facility data (evidence: `client/src/data/hospitalData.ts`)
- API Routes → In-Memory Storage: calls storage (evidence: `server/routes.ts`)