Water Usage Ratio
A data-entry and reporting tool for Water Usage Ratio (WUR) — how much water is consumed per unit of production. Operators log daily production quantities; the app derives litres, and the report shows WUR = Total Borewell Receipt ÷ Total Production over a date range.
- Route:
/water_ratio→WaterRatioPage(libs/waterRatio/src/WaterRatioPage.jsx) - Permission:
WATER_RATIO(in the Efficiency nav group; the route element isn't wrapped — see Permissions) - Library:
libs/waterRatio/— standarddataSource → controller → store → componentslayering
How the ratio is built
Summary: Each entered quantity is multiplied by a per-field Multiplication Factor to get litres; those sum into per-line totals (Beverage 1 / Beverage 2) and a Total Production. The report divides total borewell water by total production to give the WUR for each day.
The layout is hardcoded to a two-line beverage plant (Production Line-1 / Line-2, fixed bottle-size fields and factors) — it is effectively single-tenant.
The page
Two modes, chosen in the left panel:
| Mode | What you do |
|---|---|
| New Entry | Log production for a consumed date that has no record yet |
| Edit | Load an existing day's record and correct it |
| Area | Component | What it shows | On click / action |
|---|---|---|---|
| Operations panel | WaterRatioOperations (in BuildWaterRatioPage) | Mode selector, read-only Reading Date (consumed date + 1 day @ 5:00), a Consumed Date picker (max = yesterday), and a Reports button | Fetch Data loads a day's record (disabled in New Entry) |
| Entry form | BuildWaterRatioPage | A numeric field per bottle-size line, live per-line totals, and Total Production | Upload saves (POST for new, PUT for edit); disabled until Total Production > 0 |
| Confirmation | WaterRatioSuccessCard | A dismissible banner after upload | Green on success, red on failure; close to dismiss |
| Report | WaterRatioReportPopup | A dialog with a date-range picker (≤ 30 days) and a WUR table | Fetch Data loads the range; Download exports the table |
There are no charts — the main view is a form and the report is a table.
APIs
All three operations hit the same path waterRatio/, differing only by HTTP
verb (dataSource/waterRatioDataSource.js):
| Action | Method | Path | Trigger |
|---|---|---|---|
| Fetch a day / a report range | GET | waterRatio/ | Fetch Data (single day → { startDate, type: daily }; report → { startDate, endDate, type: monthly }) |
| Save a new entry | POST | waterRatio/ | Upload in New Entry mode |
| Update an entry | PUT | waterRatio/ | Upload in Edit mode |
There is no separate report endpoint — the report is the same GET over a date
range, stored in reportData. The report download is client-side (Download.EXCEL
→ an .xlsx file via xlsx), not an API call. No analytics events are fired.
State (WaterRatioStore)
A React Context (WaterRatioProvider / WaterRatioContext) exposing the entry
params, reportParams, ratioData, reportData, selectedMode,
operationStatus, isLoading, and the getRatioData / uploadNewData /
patchExistingData actions. See
State Management and
API Call Flow.
Edge cases & guards
| Case | Handling |
|---|---|
| Mode gating | Fetch Data is disabled in New Entry; switching to New Entry clears the form |
| Upload guard | The Upload button is disabled until Total Production > 0 |
| Integer-only input | The change handler accepts digits only — decimal quantities are silently rejected (despite a decimal input hint) |
| Date guards | Consumed date max = yesterday; report range capped at 30 days |
| Empty report | Prompts "Click on fetch data to get the report!"; Download stays disabled; closing the dialog clears the range and data |
| Upload result | Success / failure both surface via the success card |
| GET errors swallowed | A failed fetch logs and returns nothing — no error card (the card covers only save/update) |
Underlying libraries
| Purpose | Library |
|---|---|
| Date pickers | react-multi-date-picker (via AppDatePickerSelection) |
| Excel export | xlsx (via shared Download.EXCEL) |
| Dates | moment |
| UI | @mui/material (MUI 7), lodash |
There is no charting library here. Exact versions live in package.json.
Code reference
| File | Role |
|---|---|
WaterRatioPage.jsx | Page shell + provider |
dataSource/waterRatioDataSource.js | GET / POST / PUT to waterRatio/ |
controller/waterRatioController.js | Param shaping (date + fixed 5:00 time) |
store/WaterRatioStore.js | Context state + actions |
components/BuildWaterRatioPage.jsx | Operations panel + entry form |
components/WaterRatioReportPopup.jsx | Report dialog + Excel export |
components/WaterRatioSuccessCard.jsx | Upload confirmation banner |
helper/layoutFields.js · helper/waterRatioHelper.js · enum/productionLineEnum.js | Plant-specific field/factor config |
Related
- Water Balance · Water Neutrality — sibling efficiency features
- Application Routes · Permissions
- API Call Flow · State Management