Dashboard
The app's landing/home page — a single-fetch snapshot of the facility's water system for a chosen day, laid out as cards. Every card is also a shortcut that deep-links into the matching monitoring page.
- Route:
/dashboard→DashboardPage(libs/dashboard/src/DashboardPage.jsx) - Permission:
LANDING_PAGE(gates the sidebar entry; the route isn't wrapped — see Permissions) - Library:
libs/dashboard/— standarddataSource → controller → store → components
Users with the UWI_DASHBOARD permission get a slimmer UWI dashboard
(BuildUWIDashboardPage); everyone else gets the standard one
(BuildDashboardPage). UWI_DASHBOARD is excluded from the super-user auto-grant,
so even super users get the standard view unless it's explicitly assigned.
One fetch, many cards
Summary: One
/landingPage/userDatacall feeds every standard card; only the STP section fetches on its own. Data refreshes on load, on the Today/Yesterday switch, and every 5 minutes.
Cards (standard dashboard)
| Card | Shows | Available when | On click → |
|---|---|---|---|
| Water Intake / Used / Recycled | Three pie-summary cards + a "View Breakup" expand toggle | SOURCE_CATEGORY service | Water (source) monitoring; a legend item opens that unit |
| Real-Time Water Graph | Line trend — today vs. yesterday (dashed) + stock level | — | (not a navigating card) |
| Water Stock | Tank + fill %, total/capacity, Sufficient/Insufficient | STOCK_CATEGORY | Stock monitoring |
| Water Quality Index | Health-score gauge (safe ÷ total), Good/Fair/Poor, per-unit rows | QUALITY_CATEGORY | Quality monitoring |
| Energy Consumption | Total kWh, daily avg, donut of top sub-categories | ENERGY_CATEGORY | Energy monitoring (new tab) |
| Groundwater Level | Borewell levels (MWC) | GROUND_WATER_LEVEL | Ground-water monitoring |
| Rainfall | Rain-water total | RWI permission | /rwi |
| STP | Water Treated / Energy Consumed / Energy Saved, each with a trend arrow | fetched from uwms/stats | /uwi/plant-view (switches context to UWMS) |
| Today's / Yesterday's Alerts | General + offline alerts for the day | — | Opens the alert's monitoring page + marks it read; header → /alerts |
| Today's Insights | Sample insights | Demo only | — |
UWI dashboard variant (with UWI_DASHBOARD)
A slimmer set from the same /landingPage/userData response, rendered
conditionally: Real-Time Water Graph, a Groundwater strip, Current Water Quality,
Energy Consumption, Stock, Intake, Consumption, and Alerts. Same deep-link
behaviour as the standard cards.
Day selection
There's no date picker — a Today / Yesterday toggle drives params.date.
Switching fires a refetch (with a mid-refresh grayscale overlay). When viewing
Yesterday, a 60-second countdown auto-reverts back to Today.
APIs
| Action | Method | Path | Trigger |
|---|---|---|---|
| Dashboard data (all standard cards) | GET | /landingPage/userData | Load, Today/Yesterday switch, and every 5 min ({ date, targetIndustryId, alertsEnabled, summaryData, type: MONTH }) |
| STP stats | GET | uwms/stats | The STP section, on load / day change |
| Mark alert read | PATCH | notification/updateRead | Clicking a dashboard alert |
All standard cards read the single /landingPage/userData response client-side
(graphData = response.data.summaryData); only STP fetches separately. The 5-minute
refresh runs unconditionally (unlike Water Balance, which only auto-refreshes on
"today").
Analytics: PAGE_VIEW, DASHBOARD_DATE_CHANGE, DASHBOARD_CARD_CLICK,
DASHBOARD_DETAILS_CLICK, DASHBOARD_ALERT_CLICK, LEAKAGE_LEARN_MORE_CLICK.
Access & per-card availability
Two independent gating mechanisms:
| Mechanism | Effect |
|---|---|
PermissionWrapper | Splits the whole page by UWI_DASHBOARD; the Rainfall card by RWI |
checkServiceExist(category) | A card whose service isn't in your loginData.services renders a "Not Available — Get More Details" (contact-sales) state instead of data |
Edge cases & guards
| Case | Handling |
|---|---|
| Loading | Full-height loader on first load; a grayscale backdrop during mid-refresh |
| No / invalid data | Falls back to PageNotFound (the data source swallows fetch errors) |
| Empty per card | Per-card copy ("No Intake", "No Consumption", borewell "No Data Found", "No alerts found!") |
| Missing service | Card shows the "Not Available" contact-sales state (see above) |
| STP with no data | The STP section hides itself entirely |
| Yesterday view | Auto-reverts to Today after 60 s |
| Leakage banner | Shown only when loginData.leakageEnabled (md+ screens); "Learn more" opens a dialog |
| Responsive | Cards stack on small screens; search renders in the header (desktop) and below (mobile) |
Underlying libraries
| Purpose | Library |
|---|---|
| Energy donut | recharts |
| Pie summaries | PieChartHover (shared, Recharts-based) |
| Line trend | DashboardLineGraph (shared) |
| Stock tank | WaterTank (shared) |
| Quality gauge | hand-rolled inline SVG (no chart lib) |
| Dates / utils | moment, lodash, @iconify/react |
Code reference
| File | Role |
|---|---|
DashboardPage.jsx | Shell, provider, Today/Yesterday switch, variant split |
dataSource/dashboard.js · controller/dashboardController.js | The /landingPage/userData call + post-processing |
store/DashboardStore.js | Context state (dashboardData, graphData, params, isYesterday) |
components/BuildDashboardPage.jsx · BuildUWIDashboardPage.jsx | Standard vs UWI layouts |
components/Dashboard*Card.jsx / *Details.jsx / *Summary.jsx | The individual cards |
Related
- Water Monitoring · Water Quality · Water Stock — where the cards link
- Alerts & Notifications — the dashboard alert list
- Application Routes · Permissions