Skip to main content

True Cost of Water

Financial analysis module that calculates and visualizes the comprehensive cost of water by breaking down expenses into Raw Water procurement, Energy consumption, and Chemicals/Consumables, with trend analysis and cost distribution insights.

Overview​

The True Cost of Water feature provides detailed financial visibility into water-related expenses, helping organizations understand the complete cost structure of their water operations. It tracks three primary cost components and presents them through interactive charts, cost distribution pie charts, and detailed breakdown tables.

Location: libs/trueCost/

Route: /true-cost

Permission Required: TRUE_COST

Key Features​

1. Three Cost Components​

Raw Water Costs​

  • Corporation Water: Municipal/city water supply costs
  • Tanker Water: External water delivery costs
  • Total Raw Water Cost: Sum of all water procurement
  • Distribution %: Percentage breakdown by source

Energy Costs​

  • Raw Water Pump: Energy for water extraction from source
  • Freshwater Treatment Pumps: Energy for RO/filtration systems
  • ETP & STP: Energy for Effluent and Sewage Treatment Plants
  • Total Energy Cost: Sum of all energy expenses
  • Distribution %: Percentage breakdown by energy type

Chemicals and Consumables Costs​

  • RO Plant: Chemicals for Reverse Osmosis treatment
  • ETP & STP: Chemicals for wastewater treatment
  • Total Chemicals Cost: Sum of all chemical expenses
  • Distribution %: Percentage breakdown by treatment type

2. Time Period Selection​

Current Period Options​

Last 7 Days:

  • Daily granularity
  • 7-day cost trend
  • Average cost per day
  • Ideal for weekly monitoring

Month (Current):

  • Daily data for current month
  • Month-to-date totals
  • Day-by-day breakdown
  • Tracks monthly performance

Last Month:

  • Previous month's complete data
  • 30-day historical view
  • Month-over-month comparison
  • Post-month analysis

Last 3 Months:

  • Quarterly trend view
  • Monthly aggregation
  • 3-month cost patterns
  • Seasonal analysis

Year (Current):

  • Year-to-date totals
  • Monthly breakdown
  • Annual cost tracking
  • Yearly trends

Last Year:

  • Previous full year data
  • 12-month historical view
  • Year-over-year comparison
  • Annual performance review

Custom Period Options​

Days:

  • Select custom date range (days)
  • Daily cost breakdown
  • Flexible date selection
  • Custom period analysis

Months:

  • Select custom month range
  • Monthly cost aggregation
  • Multi-month comparison
  • Custom quarterly views

Years:

  • Select custom year range
  • Annual cost trends
  • Multi-year analysis
  • Long-term ROI tracking

3. Summary Cards (Header)​

Three key metrics displayed prominently:

Total Water Cost​

  • Display: ₹872,900
  • Description: Complete cost across all three components
  • Calculation: Raw Water + Energy + Chemicals
  • Currency: Indian Rupees (₹)

Average Water Cost​

  • Display: ₹623.5
  • Description: Cost per unit of water
  • Calculation: Total Cost / Total Water Used
  • Unit: ₹ per kL (Kilo Liter)

Total Water Used​

  • Display: 1,400 kL
  • Description: Total water consumption in selected period
  • Unit: Kilo Liters (kL)
  • Source: Sum of all water intake

4. Cost Trend Graph​

Total View​

  • Single stacked bar/line chart showing combined cost
  • Cumulative daily/monthly totals
  • Useful for: Overall cost trends without breakdown
  • Radio Button: "Total"

Split View​

  • Multi-line chart with separate lines for each component
  • Toggle checkboxes:
    • ☑ Raw Water (Blue)
    • ☑ Energy (Orange)
    • ☑ Chemicals and Consumables (Green)
  • Interactive: Check/uncheck to show/hide specific cost lines
  • Useful for: Component-wise cost trend analysis
  • Radio Button: "Split"

View Controls:

Water Cost Trend
○ Total  ● Split  ☑ Raw Water  ☑ Energy  ☑ Chemicals and Consumables

Auto-switch: If all checkboxes unchecked in Split view, automatically switches to Total view

5. Cost Distribution Pie Chart​

Visual breakdown of cost percentages:

Pie Chart Sections:

  • Raw Water: Blue segment
  • Energy: Orange segment
  • Chemicals & Consumables: Green segment

Features:

  • Interactive hover with exact values
  • Percentage labels
  • Color-coded legend
  • Responsive sizing

Example:

  • Raw Water: 10% (₹87,500)
  • Energy: 43% (₹3,73,800)
  • Chemicals: 47% (₹4,11,600)

6. Detailed Breakdown Tables​

Three expandable/tab sections:

Raw Water Table​

  • Columns:
    • Type (Corporation water, Tanker Water)
    • Cost (₹31,500, ₹56,000)
    • Distribution (36%, 64%)
  • Total Cost: ₹87,500
  • Last Updated: DD/MM/YYYY

Energy Table​

  • Columns:
    • Type (Raw water pump, Freshwater treatment pumps, ETP & STP)
    • Cost (₹2,800, ₹1,47,000, ₹2,24,000)
    • Distribution (0.75%, 39.34%, 59.91%)
  • Total Cost: ₹3,73,800
  • Last Updated: DD/MM/YYYY

Chemicals and Consumables Table​

  • Columns:
    • Type (RO Plant, ETP & STP)
    • Cost (₹98,000, ₹3,13,600)
    • Distribution (24%, 76%)
  • Total Cost: ₹4,11,600
  • Last Updated: DD/MM/YYYY

Sort Options:

  • Sort by cost (ascending/descending)
  • Sort by type (alphabetical)
  • Sort by distribution (percentage)

Architecture​

Data Flow​

User Selects Time Period
    ↓
TrueCostHelper.TrueCostTimeperiodEnum
    ↓
Fetch Cost Data (Currently using dummy data)
    ↓
Process Data:
  - Calculate totals
  - Calculate distributions
  - Generate chart data
  - Format currency
    ↓
Render Components:
  - TrueCostHeaderCards (summary metrics)
  - TrueCostCard (graph + pie chart)
  - TrueCostTableComponent (tabs)
  - TrueCostTable (detailed breakdown)

Key Components​

1. TrueCostPage

  • Purpose: Main container for True Cost module
  • Location: libs/trueCost/src/TrueCostPage.jsx
  • State Management:
    • Time period selection (current/custom)
    • View type (total/split)
    • Split view toggles (raw water, energy, chemicals)
    • Tab index for table sections
    • Sort order

State Structure:

{
  selection: 'current',  // or 'custom'
  customType: 'days',  // or 'months', 'years'
  currentType: 'last7DaysData',  // or 'month', 'lastMonth', etc.
  selectedMonth: moment(),
  view: 'total',  // or 'split'
  splitView: {
    rawWater: true,
    energy: true,
    chemicals: true
  },
  tabIndex: 0,  // 0=Raw Water, 1=Energy, 2=Chemicals
  sortOrder: 'asc'
}

2. TrueCostFormControl

  • Purpose: Time period selector dropdown
  • Features:
    • Current vs Custom radio buttons
    • Dropdown for period selection
    • Month picker for custom periods
    • Change handlers for all selections

3. TrueCostHeaderCards

  • Purpose: Display three summary metrics
  • Location: libs/trueCost/src/components/TrueCostHeaderCards.jsx
  • Props:
    • totalWaterCost - Total cost across all components
    • averageWaterCost - Cost per kL
    • totalWaterUsed - Total water consumption

4. TrueCostCard

  • Purpose: Graph and pie chart container
  • Location: libs/trueCost/src/components/TrueCostCard.jsx
  • Features:
    • Radio buttons for Total/Split view
    • Checkboxes for component toggles
    • Graph rendering (Total or Split)
    • Pie chart with cost distribution
    • Responsive layout (stacked on mobile)

5. SplitGraphContainer

  • Purpose: Multi-line chart for component breakdown
  • Location: libs/trueCost/src/components/SplitGraphView.jsx
  • Features:
    • Separate lines for Raw Water, Energy, Chemicals
    • Toggle visibility per line
    • Color-coded lines
    • Date labels on X-axis
    • Cost values on Y-axis

6. TotalGraphContainer

  • Purpose: Single chart for total cost trend
  • Location: libs/trueCost/src/components/TotalViewGraph.jsx
  • Features:
    • Stacked bar or area chart
    • Combined cost display
    • Simplified view for overall trends

7. TrueCostPiechart

  • Purpose: Cost distribution pie chart
  • Location: libs/trueCost/src/components/TrueCostPiechart.jsx
  • Data Format: 
    [
      { name: 'Raw Water', value: 87500 },
      { name: 'Chemical & Consumables', value: 411600 },
      { name: 'Energy', value: 373800 }
    ]

8. TrueCostTableComponent

  • Purpose: Tab selector for cost breakdown tables
  • Location: libs/trueCost/src/components/TrueCostTableComponent.jsx
  • Features:
    • Three tabs (Raw Water, Energy, Chemicals)
    • Active tab highlighting
    • Sort controls

9. TrueCostTable

  • Purpose: Detailed cost breakdown table
  • Location: libs/trueCost/src/components/TrueCostTable.jsx
  • Features:
    • Type, Cost, Distribution columns
    • Total row
    • Last updated timestamp
    • Sortable columns

Time Period Enums​

TrueCostHelper.TrueCostTimeperiodEnum = {
  // Selection type
  CURRENT: 'current',
  CUSTOM: 'custom',

  // Current period options
  LAST_7_DAYS: 'last7DaysData',
  MONTH: 'month',
  LAST_MONTH: 'lastMonth',
  LAST_3_MONTHS: 'last3Months',
  YEAR: 'year',
  LAST_YEAR: 'lastYear',

  // Custom period options
  DAYS: 'days',
  MONTHS: 'months',
  YEARS: 'years'
};

Data Structure​

API Response Format (Expected)​

{
  headercard: {
    totalWaterCost: '872,900',  // Formatted currency
    averageWaterCost: '623.5',  // Cost per kL
    totalWaterUsed: '1,400'  // Total kL
  },
  tableCard: {
    rawWater: {
      displayName: 'Raw Water (Last 7 Days)',
      type: ['Corporation water', 'Tanker Water'],
      cost: ['₹31,500', '₹56,000'],
      totalCost: '₹87,500',
      distribution: ['36%', '64%'],
      lastUpdated: '25/02/2026'
    },
    energy: {
      displayName: 'Energy (Last 7 Days)',
      type: ['Raw water pump', 'Freshwater treatment pumps', 'ETP & STP'],
      cost: ['₹2,800', '₹1,47,000', '₹2,24,000'],
      totalCost: '₹3,73,800',
      distribution: ['0.75%', '39.34%', '59.91%'],
      lastUpdated: '25/02/2026'
    },
    chemicals: {
      displayName: 'Chemicals and Consumables (Last 7 Days)',
      type: ['RO Plant', 'ETP & STP'],
      cost: ['₹98,000', '₹3,13,600'],
      totalCost: '₹4,11,600',
      distribution: ['24%', '76%'],
      lastUpdated: '25/02/2026'
    }
  },
  pieChartData: [
    { name: 'Raw Water', value: 87500 },
    { name: 'Chemical & Consumables', value: 411600 },
    { name: 'Energy', value: 373800 }
  ],
  splitGraph: [
    {
      day: '19/02/2026',
      rawWater: 100000,
      chemicals: 400000,
      energy: 300000
    },
    {
      day: '20/02/2026',
      rawWater: 100000,
      chemicals: 389000,
      energy: 340000
    }
    // ... more daily data
  ],
  totalGraph: [
    {
      day: '19/02/2026',
      rawWater: 200000,
      chemicals: 200000,
      energy: 200000
    }
    // ... more daily data
  ]
}

Usage Examples​

1. Change Time Period​

const handlePeriodChange = (newPeriod) => {
  setTrueCostState(prev => ({
    ...prev,
    currentType: TrueCostHelper.TrueCostTimeperiodEnum[newPeriod]
  }));
};

// Select Last 7 Days
handlePeriodChange('LAST_7_DAYS');

// Select Current Month
handlePeriodChange('MONTH');

2. Toggle Split View Components​

const handleCheckboxChange = (event) => {
  const { name, checked } = event.target;

  setSplitViewState(prev => ({
    ...prev,
    [name]: checked
  }));

  // Auto-switch to Total if all unchecked
  const newState = { ...splitViewState, [name]: checked };
  if (!newState.rawWater && !newState.energy && !newState.chemicals) {
    setCurrentView('total');
  }
};

// Usage
<Checkbox
  checked={splitViewState.rawWater}
  onChange={handleCheckboxChange}
  name="rawWater"
/>

3. Switch Between Total and Split Views​

const handleViewSwitch = (event) => {
  const newView = event.target.value;
  setCurrentView(newView);

  // If switching to split, enable all components
  if (newView === 'split') {
    setSplitViewState({
      rawWater: true,
      energy: true,
      chemicals: true
    });
  }
};

<RadioGroup value={currentView} onChange={handleViewSwitch}>
  <FormControlLabel value="total" control={<Radio />} label="Total" />
  <FormControlLabel value="split" control={<Radio />} label="Split" />
</RadioGroup>

4. Calculate Cost Distribution​

const calculateDistribution = (costs) => {
  const total = costs.reduce((sum, cost) => sum + cost, 0);

  return costs.map(cost => ({
    percentage: ((cost / total) * 100).toFixed(2) + '%',
    value: cost
  }));
};

// Example
const rawWaterCosts = [31500, 56000];  // Corporation, Tanker
const distribution = calculateDistribution(rawWaterCosts);
// Returns: [{ percentage: '36%', value: 31500 }, { percentage: '64%', value: 56000 }]

5. Format Currency​

const formatCurrency = (value) => {
  return `₹${value.toLocaleString('en-IN')}`;
};

// Examples
formatCurrency(872900);  // "₹8,72,900"
formatCurrency(623.5);   // "₹623.5"

6. Custom Date Range Selection​

const handleCustomPeriodChange = (customType) => {
  setTrueCostState(prev => ({
    ...prev,
    selection: TrueCostHelper.TrueCostTimeperiodEnum.CUSTOM,
    customType: customType
  }));
};

// Select custom days range
handleCustomPeriodChange(TrueCostHelper.TrueCostTimeperiodEnum.DAYS);

// Select custom months range
handleCustomPeriodChange(TrueCostHelper.TrueCostTimeperiodEnum.MONTHS);

Cost Calculation Examples​

Total Water Cost Calculation​

const calculateTotalCost = (rawWaterCost, energyCost, chemicalsCost) => {
  return rawWaterCost + energyCost + chemicalsCost;
};

// Example
const totalCost = calculateTotalCost(87500, 373800, 411600);
// Returns: 872900

Average Cost Per Unit​

const calculateAverageCost = (totalCost, totalWaterUsed) => {
  return (totalCost / totalWaterUsed).toFixed(2);
};

// Example (cost in ₹, water in kL)
const avgCost = calculateAverageCost(872900, 1400);
// Returns: "623.50" (₹ per kL)

Cost Distribution Percentages​

const calculatePercentage = (partialCost, totalCost) => {
  return ((partialCost / totalCost) * 100).toFixed(2);
};

// Example
const rawWaterPercentage = calculatePercentage(87500, 872900);
// Returns: "10.03" (%)

Responsive Design​

Desktop (md+)​

  • Side-by-side layout for graph and pie chart
  • Vertical divider between graph and pie chart
  • Full-width tables
  • All controls visible

Mobile (xs-sm)​

  • Stacked layout (graph above pie chart)
  • Horizontal divider between sections
  • Scrollable tables
  • Compact controls

Breakpoint Logic:

const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('sm'));

<Divider
  orientation={isSmallScreen ? 'horizontal' : 'vertical'}
  flexItem
/>

Best Practices​

1. Handle Missing Data​

const { totalWaterCost, averageWaterCost, totalWaterUsed } =
  trueCostData?.headercard || {};

if (!totalWaterCost) {
  return <Typography>No cost data available</Typography>;
}

2. Validate Graph Data​

const pieChartData = trueCostData?.pieChartData || [];

if (pieChartData.length === 0) {
  return <Typography>No cost distribution data</Typography>;
}

3. Format Large Numbers​

// Use Indian number formatting
const formattedCost = new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR',
  maximumFractionDigits: 0
}).format(872900);
// Returns: "₹8,72,900"

4. Preserve View State​

// Save view preferences in local storage
useEffect(() => {
  const savedView = localStorage.getItem('trueCostView');
  if (savedView) {
    setCurrentView(savedView);
  }
}, []);

useEffect(() => {
  localStorage.setItem('trueCostView', currentView);
}, [currentView]);

5. Handle Empty Checkboxes in Split View​

const handleCheckboxChange = (event) => {
  const newSplitViewState = {
    ...splitViewState,
    [event.target.name]: event.target.checked
  };

  setSplitViewState(newSplitViewState);

  // Auto-switch to total if all unchecked
  if (
    !newSplitViewState.rawWater &&
    !newSplitViewState.energy &&
    !newSplitViewState.chemicals
  ) {
    setCurrentView('total');
  }
};

Troubleshooting​

Graph Not Rendering​

Cause: Missing or invalid graph data Solution: Check data structure and provide fallback

const splitGraph = trueCostData?.splitGraph || [];

if (splitGraph.length === 0) {
  return <Typography>No trend data available for selected period</Typography>;
}

Pie Chart Shows Incorrect Percentages​

Cause: Data values not matching Solution: Recalculate from raw data

const pieChartData = [
  { name: 'Raw Water', value: tableCard.rawWater.totalCost },
  { name: 'Energy', value: tableCard.energy.totalCost },
  { name: 'Chemicals', value: tableCard.chemicals.totalCost }
];

Time Period Not Changing​

Cause: State not updating correctly Solution: Verify state update logic

const handleCurrentTypeChange = (event) => {
  const newType = event.target.value;
  setTrueCostState(prev => ({
    ...prev,
    currentType: newType
  }));
};

Integration with Other Features​

Energy Monitoring​

  • Energy costs sourced from Energy Monitoring module
  • Real-time energy consumption data
  • Pump and treatment plant energy tracking

Water Flow Monitoring​

  • Water usage data from Water Flow Monitoring
  • Total water consumption calculation
  • Flow rate analysis for cost correlation

Dashboard​

  • Summary metrics displayed on main Dashboard
  • Quick access to cost overview
  • Alerts for cost threshold violations

Future Enhancements (Note for Backend Integration)​

Currently using dummy data. When integrating with real backend:

  1. API Endpoints:

    • GET /trueCost/data?period=last7Days
    • GET /trueCost/breakdown?type=rawWater&period=month

  2. Real-time Cost Updates:

    • WebSocket integration for live cost tracking
    • Auto-refresh on new billing data

  3. Cost Forecasting:

    • Predictive analytics for future costs
    • Budget vs actual comparison
    • Cost-saving recommendations

  4. Export Functionality:

    • PDF report generation
    • Excel export for financial analysis
    • Email scheduled reports

Last Updated: February 2026 Module Location: libs/trueCost/ Status: Currently using dummy data - Backend integration pending