Dashboard

Centralized command center providing real-time overview of water consumption, intake, stock levels, quality status, alerts, and sustainability metrics with interactive visualizations and quick navigation to detailed views.

Overview

The Dashboard is the landing page for AquaGen, offering a comprehensive snapshot of water management across your organization. It displays today's or yesterday's data with trend graphs, pie charts, quality indicators, alerts, and quick-access cards for deeper analysis.

Location: libs/dashboard/

Route: /dashboard

Permission Required: LANDING_PAGE

Key Features

1. Water Sustainability Summary Cards (Demo Mode)

Four Key Metrics:

Water Augmented (Credited)

Rainwater collected and substituted
Rainwater recharged (within and beyond boundary)
Wastewater treated and made available
Icon: Water credit icon
Tooltip: Details all augmentation sources

Water Consumed (Debited)

Total water withdrawn from borewells/ponds/lakes
Water from piped sources
Water from external tankers
Water from CETP/Municipal treated wastewater
Icon: Water debit icon
Tooltip: All consumption sources

Water Neutrality

Percentage of water augmented vs. water consumed
Formula: (Water Augmented / Water Consumed) × 100
Icon: Water neutral icon
Color Coding:
- Green: ≥100% (Positive neutrality)
- Orange/Red: <100% (Negative neutrality)

Water Usage Ratio

Specific water used per unit production
Formula: Total Water Used / Total Production
Icon: Water ratio icon
Unit: L/unit or kL/ton

Configuration:

DashboardEnum.SummaryCardDetails = {
  waterCredited: {
    displayName: 'Water Augmented',
    icon: waterCreditIcon,
    tooltip: '...'
  },
  waterDebited: {
    displayName: 'Water Consumed',
    icon: waterDebitIcon,
    tooltip: '...'
  },
  waterNeutrality: {
    displayName: 'Water Neutrality',
    icon: waterNeutralIcon,
    tooltip: '...'
  },
  ratio: {
    displayName: 'Water Usage Ratio',
    icon: waterRatioIcon,
    tooltip: '...'
  }
};

2. Trend Graph

Multi-Line Chart showing:

Consumption (red line)
Intake (blue line)
Stock (green line)
Quality (yellow line - optional)

Features:

Time series visualization
Interactive tooltips
Legend with color indicators
Click to navigate to detailed pages
Responsive design (mobile/desktop)

Time Range:

Today: Hourly data (24 points)
Yesterday: Hourly data (24 points)

3. Date Selector

Quick Toggle:

DashboardEnum.GraphDateType = {
  TODAY: {
    id: 'today',
    displayName: 'Today',
    date: moment(new Date()).format('DD/MM/YYYY')
  },
  YESTERDAY: {
    id: 'yesterday',
    displayName: 'Yesterday',
    date: moment().subtract(1, 'days').format('DD/MM/YYYY')
  }
};

User Actions:

Click "Today" button → Shows today's data
Click "Yesterday" button → Shows yesterday's data
Visual indicator for selected date

4. Ground Water Level Card

Displays:

Clickable card showing ground water depth
Borewell name and current level
Format: "Borewell 1: 35.2 MWC"
Redirects to Ground Water Level page on click

Example:

Today's Groundwater Level | Borewell 1: 35.2 MWC, Borewell 2: 42.8 MWC

5. Water Quality Card

Status Indicators:

Within Safe Range (Green) - Parameters within thresholds
Crossed Safe Range (Red) - Parameters exceeded thresholds
Offline (Grey) - Sensors/units offline

Quality Index:

DashboardEnum.qualityCardIndex = {
  safe: {
    color: '#008C10',
    text: 'Within Safe Range',
    showItem: true
  },
  unSafe: {
    color: '#FF0000',
    text: 'Crossed Safe Range',
    showItem: true
  },
  offlineCount: {
    color: '#CBCBCB',
    text: 'Offline',
    showItem: true
  }
};

Features:

Color-coded status bars
Count of units in each status
Click to navigate to Quality Monitoring page

6. Energy Consumption Card

Pie Chart showing:

Water energy breakdown
Renewable vs Non-renewable energy
Total energy consumption

Color Scheme:

DashboardEnum.EnergyCard = {
  pieColors: [
    '#4CAF50',  // Energy pie 1
    '#FF9800',  // Energy pie 2
    '#2196F3'   // Energy pie 3
  ]
};

Features:

Clickable to navigate to Energy page
Total energy display
Percentage breakdown

7. Stock Summary Card

Displays:

Total current stock
Tank capacity visualization
Percentage fill level
Unit: kL or L

Features:

Visual tank indicator
Stock trends (up/down arrows)
Click to navigate to Stock page

8. Intake Pie Chart

Breakdown by Source:

Borewell water
Municipal/Piped water
Tanker water
Recycled water
Rainwater

Color Scheme:

DashboardEnum.PieChartDataType.INTAKE.pieChartColors = [
  '#0088FE',  // Blue
  '#00C49F',  // Teal
  '#FFBB28',  // Yellow
  '#FF8042'   // Orange
];

Features:

Interactive pie slices
Percentage labels
Total intake display
Click slice to navigate to source category

9. Consumption Pie Chart

Breakdown by Category:

Domestic consumption
Industrial consumption
Agricultural consumption
Other consumption

Color Scheme:

DashboardEnum.PieChartDataType.CONSUMPTION.pieChartColors = [
  '#8884D8',  // Purple
  '#82CA9D',  // Green
  '#FFC658',  // Yellow
  '#FF7C7C'   // Red
];

10. Alerts List

Today's/Yesterday's Alerts:

Alert type (Leakage, Threshold, Offline)
Unit/Location name
Timestamp
Severity indicator
Click to navigate to alert details

Features:

Grouped by alert type
Color-coded severity
Real-time updates
Quick acknowledge/resolve actions

Conditional Display:

Shows if appStore.loginData.leakageEnabled === true
Green banner with enabled icon
"Learn More" link opens dialog with leakage info

Banner Message:

🔍 Your facility has Leakage Detection enabled
    Learn more →

Architecture

Data Flow

Key Components

1. DashboardDataProvider

Purpose: Global state for dashboard data
Location: libs/dashboard/src/store/DashboardStore.js
State Variables:
- dashboardData - Complete dashboard response
- graphData - Trend and chart data
- params - Query parameters (date)
- isLoading - Initial loading state
- isLoadingGraphData - Secondary data loading
- siUnit - SI unit for measurements (kL, L)

2. DashboardPage

Purpose: Main dashboard container
Location: libs/dashboard/src/DashboardPage.jsx
Features:
- Header with title and leakage banner
- Subscription expiry warning
- Permission-based rendering (UWI vs Standard dashboard)

3. BuildDashboardPage

Purpose: Standard dashboard layout
Location: libs/dashboard/src/components/BuildDashboardPage.jsx
Features:
- Trend graph
- Ground water card
- Quality card
- Energy card
- Stock/Intake/Consumption pie charts
- Alerts list

4. BuildUWIDashboardPage

Purpose: Urban Water Index (UWI) dashboard variant
Location: libs/dashboard/src/components/BuildUWIDashboardPage.jsx
Features:
- UWI-specific metrics
- Alternative layout for UWI users

5. DashboardSummaryCardList

Purpose: Render sustainability summary cards
Location: libs/dashboard/src/components/DashboardSummaryCards.jsx
Displays: Water Augmented, Water Consumed, Water Neutrality, Usage Ratio

6. DashboardTrendGraph

Purpose: Multi-line trend chart
Location: libs/dashboard/src/components/DashboardTrendGraph.jsx
Library: Recharts LineChart

7. DashboardQualityDetails

Purpose: Quality status card
Location: libs/dashboard/src/components/DashboardQualityDetails.jsx
Features: Color-coded status bars, counts

8. DashboardEnergyCard

Purpose: Energy consumption pie chart
Location: libs/dashboard/src/components/DashboardEnergyCard.jsx

9. DashboardAlertList

Purpose: Recent alerts display
Location: libs/dashboard/src/components/DashboardAlertList.jsx

API Integration

Get Dashboard Data

GET /landingPage/userData
Params: {
  date: '25/02/2026'
}

Response: {
  siUnit: 'kL',
  waterNeutrality: {
    waterCredited: 1500.5,
    waterDebited: 1234.2,
    waterNeutrality: 121.6,  // Percentage
    ratio: 0.85
  },
  consumption: {
    total: 1234.5,
    data: [
      { name: 'Domestic', value: 500, percentage: 40.5 },
      { name: 'Industrial', value: 734.5, percentage: 59.5 }
    ],
    trendData: [
      { time: '00:00', value: 50.2 },
      { time: '01:00', value: 45.8 },
      // ... hourly data
    ]
  },
  intake: {
    total: 1300.0,
    data: [
      { name: 'Borewell', value: 800, percentage: 61.5 },
      { name: 'Municipal', value: 500, percentage: 38.5 }
    ]
  },
  stock: {
    totalStock: 2450.5,
    totalCapacity: 5000,
    fillPercentage: 49.0
  },
  quality: {
    safe: 5,
    unSafe: 2,
    offlineCount: 1
  },
  energy: {
    total: 1500,
    data: [
      { name: 'Water Pumping', value: 800, percentage: 53.3 },
      { name: 'Treatment', value: 700, percentage: 46.7 }
    ]
  },
  borewell: [
    { displayName: 'Borewell 1', value: 35.2 },
    { displayName: 'Borewell 2', value: 42.8 }
  ],
  formattedAlertsArray: [
    {
      id: 'alert1',
      type: 'Leakage',
      unitName: 'Borewell 1',
      timestamp: '25/02/2026 10:30 AM',
      severity: 'high'
    }
  ],
  needsMapping: false
}

Usage Examples

1. Access Dashboard Data

import { useContext } from 'react';
import { DashboardDataContext } from '@aquagen-mf-webapp/dashboard';

function DashboardWidget() {
  const dashboardStore = useContext(DashboardDataContext);
  const { dashboardData, graphData, isLoading, siUnit } = dashboardStore;

  if (isLoading) return <Loader />;

  return (
    <div>
      <h3>Today's Consumption: {graphData.consumption?.total} {siUnit}</h3>
      <h3>Water Neutrality: {dashboardData.waterNeutrality?.waterNeutrality}%</h3>
    </div>
  );
}

2. Change Dashboard Date

const handleDateChange = (dateType) => {
  const newDate = DashboardEnum.GraphDateType[dateType].date;

  dashboardStore.setParams({
    ...dashboardStore.params,
    date: newDate
  });
};

// Usage
<button onClick={() => handleDateChange('TODAY')}>Today</button>
<button onClick={() => handleDateChange('YESTERDAY')}>Yesterday</button>

3. Navigate to Detailed Page

import { NavigationHelper } from '@aquagen-mf-webapp/shared/helper';
import useNavigateSearchParams from '@aquagen-mf-webapp/shared/hooks/useNavigateSearchParams';

const { handleNavigation } = useNavigateSearchParams();

const handleStockClick = () => {
  handleNavigation({
    pathname: NavigationHelper.i.routes.STOCK_PAGE,
    date1: dashboardStore.params.date
  });
};

4. Check Service Availability

const checkServiceExist = (standardCategoryId) => {
  return appStore.loginData.services.some(
    (service) =>
      StandardCategoryTypeUppercase[standardCategoryId] === service.standardCategoryId
  );
};

// Usage
{checkServiceExist(StandardCategoryTypeUppercase.QUALITY_CATEGORY) && (
  <DashboardQualityDetails qualityData={graphData.quality} />
)}

Responsive Layout

Desktop (lg+):

Two-column layout
- Left (45%): Trend graph + Ground water card
- Right (55%): Quality card + Energy card
Three-column pie charts (Stock, Intake, Consumption)

Tablet (md):

Single column for trend graph
Two-column for quality/energy cards
Three-column pie charts

Mobile (xs-sm):

Stacked vertical layout
Single column for all cards
Full-width pie charts

Flex Configuration:

<Box sx={{
  display: 'flex',
  flexDirection: {
    xs: 'column',
    md: 'column',
    lg: 'row'
  },
  gap: 2
}}>
  {/* Content */}
</Box>

Loading States

1. Initial Page Load

if (dashboardStore.isLoading) {
  return <CustomLoader />;
}

2. Graph Data Refresh

<BackdropLoader isLoading={dashboardStore.isLoadingGraphData} />

<Box sx={{
  filter: dashboardStore.isLoadingGraphData ? 'grayscale(70%)' : 'unset',
  pointerEvents: dashboardStore.isLoadingGraphData ? 'none' : 'unset'
}}>
  {/* Dashboard content */}
</Box>

Effect:

Greyscale filter on content
Disabled pointer events
Backdrop loader overlay

Subscription Status Warning

Displayed when subscription is expiring soon:

<If condition={subscriptionData?.errorState === SubscriptionEnum.Status.PRE}>
  <Typography>
    Subscription expires in <strong>{subscriptionData.numberOfDays}</strong> days
  </Typography>
</If>

States:

PRE: Pre-expiry warning (e.g., 7 days before)
EXPIRED: Subscription expired (dashboard may be disabled)
ACTIVE: Normal operation (no warning)

Analytics Tracking

// Page view
AnalyticsService.sendEvent(AnalyticEvents.PAGE_VIEW, {}, true);

// Card click tracking
AnalyticsService.sendEvent(AnalyticEvents.DASHBOARD_CARD_CLICK, {
  page: DashboardEnum.GraphCardType.BOREWELL
});

// Leakage banner click
AnalyticsService.sendEvent(AnalyticEvents.LEAKAGE_LEARN_MORE_CLICK);

Best Practices

1. Check Service Availability

Always check if a category exists before rendering:

{checkServiceExist(StandardCategoryTypeUppercase.QUALITY_CATEGORY) && (
  <QualityCard />
)}

2. Handle Loading States

if (dashboardStore.isLoading) return <Loader />;
if (!dashboardStore.dashboardData || dashboardStore.dashboardData.needsMapping) {
  return <PageNotFound />;
}

3. Use Permission Wrappers

<PermissionWrapper tag={Permissions.allPermission.UWI_DASHBOARD} negate>
  <BuildDashboardPage />
</PermissionWrapper>

<PermissionWrapper tag={Permissions.allPermission.UWI_DASHBOARD}>
  <BuildUWIDashboardPage />
</PermissionWrapper>

const { handleNavigation } = useNavigateSearchParams();

<PieChartSummary handleNavigation={handleNavigation} />

Troubleshooting

Dashboard Not Loading

Cause: Missing needsMapping check or API error Solution: Check API response and handle needsMapping flag

if (dashboardData?.needsMapping) {
  return <PageNotFound message="Please configure your water categories" />;
}

Pie Charts Empty

Cause: Data is null or total is 0 Solution: Conditional rendering with null checks

<If condition={graphData.intake && graphData.intake.total !== null}>
  <PieChartSummary data={graphData.intake} />
</If>

Date Toggle Not Working

Cause: Params not updating correctly Solution: Ensure params are properly set and context is updating

dashboardStore.setParams({
  ...dashboardStore.params,
  date: newDate
});

Water Flow Monitoring - Detailed flow monitoring
Water Quality - Quality parameters
Water Stock - Stock tank monitoring
Ground Water Level - Borewell levels
Permissions - LANDING_PAGE permission
Routes - Dashboard route configuration

Last Updated: February 2026 Module Location: libs/dashboard/

Overview​

Key Features​

1. Water Sustainability Summary Cards (Demo Mode)​

Water Augmented (Credited)​

Water Consumed (Debited)​

Water Neutrality​

Water Usage Ratio​

2. Trend Graph​

3. Date Selector​

4. Ground Water Level Card​

5. Water Quality Card​

6. Energy Consumption Card​

7. Stock Summary Card​

8. Intake Pie Chart​

9. Consumption Pie Chart​

10. Alerts List​

11. Leakage Detection Banner​

Architecture​

Data Flow​

Key Components​

API Integration​

Get Dashboard Data​

Usage Examples​

1. Access Dashboard Data​

2. Change Dashboard Date​

3. Navigate to Detailed Page​

4. Check Service Availability​

Responsive Layout​

Loading States​

1. Initial Page Load​

2. Graph Data Refresh​

Subscription Status Warning​

Analytics Tracking​

Best Practices​

1. Check Service Availability​

2. Handle Loading States​

3. Use Permission Wrappers​

4. Pass Navigation Context​

Troubleshooting​

Dashboard Not Loading​

Pie Charts Empty​

Date Toggle Not Working​

Related Documentation​

Overview

Key Features

1. Water Sustainability Summary Cards (Demo Mode)

Water Augmented (Credited)

Water Consumed (Debited)

Water Neutrality

Water Usage Ratio

2. Trend Graph

3. Date Selector

4. Ground Water Level Card

5. Water Quality Card

6. Energy Consumption Card

7. Stock Summary Card

8. Intake Pie Chart

9. Consumption Pie Chart

10. Alerts List

11. Leakage Detection Banner

Architecture

Data Flow

Key Components

API Integration

Get Dashboard Data

Usage Examples

1. Access Dashboard Data

2. Change Dashboard Date

3. Navigate to Detailed Page

4. Check Service Availability

Responsive Layout

Loading States

1. Initial Page Load

2. Graph Data Refresh

Subscription Status Warning

Analytics Tracking

Best Practices

1. Check Service Availability

2. Handle Loading States

3. Use Permission Wrappers

4. Pass Navigation Context

Troubleshooting

Dashboard Not Loading

Pie Charts Empty

Date Toggle Not Working

Related Documentation