Units fix (frontend): unit-aware UI + rich analytics

Shared src/lib/unit.ts (step/min/keypad/decimals/label/quantize per unit). Unit-aware QtyStepper/NumberField (integer keypad for piece/dozen/packet), Qty formatter (kg 3dp, count integer w/ pc/dz/pkt label), RatePerUnit (₹X/unit), BillLinesTable units. Route/catalog/subscriptions/billing/customers thread the real unit; route sends quantize() not round1 (keeps kg precision, integers for counts). Rich analytics: revenue-primary, per-unit chips (never cross-unit sums), metric/unit/date/bucket/chart-type dropdowns, ApexCharts. Fix: litre quantize=2dp (preserves 0.25 L milk). Defaults to litre so existing milk screens unchanged. tsc+build green; full docker image serves PWA + per-unit analytics.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/PWA/src/api/types.ts

@@ -135,7 +135,7 @@ export interface Settings {
   invoice_prefix: string;
 }
 
-export type ProductUnit = 'litre' | 'kg' | 'piece';
+export type ProductUnit = 'litre' | 'kg' | 'piece' | 'dozen' | 'packet';
 
 export interface Product {
   id: number;

frontend/PWA/src/components/domain/BillLinesTable.tsx

@@ -1,5 +1,5 @@
 import { Box, Divider, Stack, Typography } from '@mui/material';
-import { Money } from '../format/Money';
+import { Money, RatePerUnit } from '../format/Money';
 import { Qty } from '../format/Qty';
 import type { BillLine } from './types';
 
@@ -77,10 +77,10 @@ export function BillLinesTable({
             {l.productName}
           </Typography>
           <Box sx={{ width: 64, textAlign: 'right' }}>
-            <Qty value={l.qty} unit={l.unit ?? 'L'} component="span" />
+            <Qty value={l.qty} unit={l.unit ?? 'litre'} component="span" />
           </Box>
           <Box sx={{ width: 72, textAlign: 'right' }}>
-            <Money value={l.rate} component="span" />
+            <RatePerUnit value={l.rate} unit={l.unit ?? 'litre'} component="span" sx={{ fontSize: 13 }} />
           </Box>
           <Box sx={{ width: 88, textAlign: 'right' }}>
             <Money value={l.amount} component="span" />

frontend/PWA/src/components/domain/types.ts

@@ -1,6 +1,8 @@
 // Light presentational domain models for the shared cards/rows. Pages map API DTOs
 // into these shapes; the library stays decoupled from exact backend field names.
 
+import type { UnitLike } from '@/lib/unit';
+
 export interface CustomerLite {
   id: string;
   name: string;
@@ -12,7 +14,7 @@ export interface CustomerLite {
 export interface ProductLite {
   id: string;
   name: string;
-  unit?: 'L' | 'kg' | 'u';
+  unit?: UnitLike;
   active: boolean;
 }
 
@@ -24,7 +26,7 @@ export interface DeliveryRowData {
   productName: string;
   status: DeliveryStatus;
   qty: number;
-  unit?: 'L' | 'kg' | 'u';
+  unit?: UnitLike;
   rate?: number;
   /** amount = qty*rate, precomputed by the page */
   amount?: number;
@@ -38,7 +40,7 @@ export type BillStatus = 'paid' | 'partial' | 'unpaid';
 export interface BillLine {
   productName: string;
   qty: number;
-  unit?: 'L' | 'kg' | 'u';
+  unit?: UnitLike;
   rate: number;
   amount: number;
 }

frontend/PWA/src/components/fields/NumberField.tsx

@@ -2,6 +2,7 @@ import { Controller, type FieldValues, type Path, type Control } from 'react-hoo
 import { InputAdornment, TextField as MuiTextField } from '@mui/material';
 import CurrencyRupee from '@mui/icons-material/CurrencyRupee';
 import { KeyboardAwareField } from './KeyboardAwareField';
+import { type UnitLike, isCountUnit, unitInputMode, unitPattern } from '@/lib/unit';
 
 export interface NumberFieldProps<T extends FieldValues> {
   name: Path<T>;
@@ -15,14 +16,23 @@ export interface NumberFieldProps<T extends FieldValues> {
   required?: boolean;
   /** money adornment ₹ (left) */
   money?: boolean;
-  /** unit adornment e.g. 'L' (right) */
+  /** unit adornment text e.g. 'L' / 'kg' / 'pc' (right) — purely visual */
   unit?: string;
+  /**
+   * Product unit driving the keypad: count units (piece/dozen/packet) raise the
+   * integer-only pad and block the decimal point; weight/volume raise the decimal pad.
+   * Takes precedence over {@link integerOnly}.
+   */
+  qtyUnit?: UnitLike;
+  /** force integer-only entry (numeric keypad, no decimal) without a unit */
+  integerOnly?: boolean;
   /** select the whole value on focus (qty entry) */
   selectAllOnFocus?: boolean;
 }
 
-// DESIGN_SYSTEM §8.2 / §7.2 — decimal numeric (qty / amount / rate).
-// inputMode="decimal" (milk is fractional 0.5/1.5 L); ₹/L adornment.
+// DESIGN_SYSTEM §8.2 / §7.2 — numeric field (qty / amount / rate). Defaults to the
+// decimal keypad (milk is fractional 0.5/1.5 L). When `qtyUnit` is a count unit (or
+// `integerOnly`), it raises the numeric keypad and blocks '.' so eggs/packs stay whole.
 export function NumberField<T extends FieldValues>({
   name,
   control,
@@ -35,8 +45,18 @@ export function NumberField<T extends FieldValues>({
   required = false,
   money = false,
   unit,
+  qtyUnit,
+  integerOnly = false,
   selectAllOnFocus = false,
 }: NumberFieldProps<T>) {
+  const intOnly = integerOnly || (qtyUnit !== undefined && isCountUnit(qtyUnit));
+  const mode: 'numeric' | 'decimal' = intOnly
+    ? 'numeric'
+    : qtyUnit !== undefined
+      ? unitInputMode(qtyUnit)
+      : 'decimal';
+  const pattern = intOnly ? '[0-9]*' : qtyUnit !== undefined ? unitPattern(qtyUnit) : '[0-9]*[.]?[0-9]*';
+
   return (
     <Controller
       name={name}
@@ -48,21 +68,28 @@ export function NumberField<T extends FieldValues>({
             value={field.value ?? ''}
             onChange={(e) => {
               const v = e.target.value;
+              // Block any non-digit (incl. '.') for integer-only / count units.
+              if (intOnly && v !== '' && !/^\d*$/.test(v)) return;
               field.onChange(v === '' ? '' : Number(v));
             }}
+            onKeyDown={(e) => {
+              if (intOnly && (e.key === '.' || e.key === ',' || e.key === 'e' || e.key === '-')) {
+                e.preventDefault();
+              }
+            }}
             onFocus={(e) => {
-              if (selectAllOnFocus) e.target.select();
+              if (selectAllOnFocus) (e.target as HTMLInputElement).select();
             }}
             label={label}
             type="number"
-            inputMode="decimal"
+            inputMode={mode}
             disabled={disabled}
             required={required}
             error={!!fieldState.error}
             helperText={fieldState.error?.message ?? helperText}
             fullWidth
             slotProps={{
-              htmlInput: { min, max, step, inputMode: 'decimal', pattern: '[0-9]*[.]?[0-9]*' },
+              htmlInput: { min, max, step: intOnly ? 1 : step, inputMode: mode, pattern },
               input: {
                 startAdornment: money ? (
                   <InputAdornment position="start">

frontend/PWA/src/components/fields/QtyStepper.tsx

@@ -1,39 +1,54 @@
 import { Box, IconButton, InputBase } from '@mui/material';
 import Add from '@mui/icons-material/Add';
 import Remove from '@mui/icons-material/Remove';
+import {
+  type UnitLike,
+  isCountUnit,
+  quantize,
+  unitInputMode,
+  unitLabel,
+  unitMin,
+  unitPattern,
+  unitStep,
+} from '@/lib/unit';
 
 export interface QtyStepperProps {
   value: number;
   onChange: (value: number) => void;
+  /** explicit step override; defaults to the unit's step (litre 0.5 / kg 0.25 / count 1) */
   step?: number;
   min?: number;
   max?: number;
-  unit?: string;
+  /** product unit — drives step/min/label/inputMode/quantize. Defaults to litre. */
+  unit?: UnitLike;
   disabled?: boolean;
 }
 
-const round1 = (n: number) => Math.round(n * 10) / 10;
-
-// DESIGN_SYSTEM §8.2 — −/value/+ with inline numeric. step 0.5 (fractional milk),
-// 44px tap targets. Tapping −/+ commits the value (no lingering keyboard).
+// DESIGN_SYSTEM §8.2 — −/value/+ with inline numeric. Unit-aware: litre steps 0.5,
+// kg steps 0.25 (gram precision survives), count units (piece/dozen/packet) step by 1
+// and accept whole numbers only (no decimal key). 44px tap targets. Tapping −/+ commits.
 export function QtyStepper({
   value,
   onChange,
-  step = 0.5,
-  min = 0,
+  step,
+  min,
   max,
-  unit = 'L',
+  unit = 'litre',
   disabled = false,
 }: QtyStepperProps) {
+  const count = isCountUnit(unit);
+  const stepValue = step ?? unitStep(unit);
+  const minValue = min ?? unitMin(unit);
+
   const clamp = (n: number) => {
     let v = n;
-    if (min !== undefined) v = Math.max(min, v);
+    v = Math.max(minValue, v);
     if (max !== undefined) v = Math.min(max, v);
-    return round1(v);
+    return quantize(v, unit);
   };
 
-  const dec = () => onChange(clamp(value - step));
-  const inc = () => onChange(clamp(value + step));
+  const dec = () => onChange(clamp(value - stepValue));
+  const inc = () => onChange(clamp(value + stepValue));
 
   return (
     <Box
@@ -53,18 +68,24 @@ export function QtyStepper({
       <InputBase
         value={value}
         onChange={(e) => {
-          const v = e.target.value;
-          onChange(v === '' ? min : clamp(Number(v)));
+          const raw = e.target.value;
+          if (raw === '') {
+            onChange(minValue);
+            return;
+          }
+          // For count units, ignore any non-digit (blocks a typed '.').
+          if (count && !/^\d*$/.test(raw)) return;
+          onChange(clamp(Number(raw)));
         }}
         inputProps={{
-          inputMode: 'decimal',
-          pattern: '[0-9]*[.]?[0-9]*',
+          inputMode: unitInputMode(unit),
+          pattern: unitPattern(unit),
           style: { textAlign: 'center', width: 44, fontVariantNumeric: 'tabular-nums', fontSize: 16 },
-          'aria-label': `Quantity in ${unit}`,
+          'aria-label': `Quantity in ${unitLabel(unit)}`,
         }}
       />
       <Box component="span" sx={{ pr: 0.5, color: 'text.secondary', fontSize: 14 }}>
-        {unit}
+        {unitLabel(unit)}
       </Box>
       <IconButton aria-label="Increase quantity" onClick={inc} sx={{ width: 44, height: 44, borderRadius: 0 }}>
         <Add fontSize="small" />

frontend/PWA/src/components/format/Money.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Box, type BoxProps } from '@mui/material';
 import { useReducedMotion } from '@/hooks/useReducedMotion';
 import { dur } from '@/theme/motion';
+import { type UnitLike, unitLabel } from '@/lib/unit';
 
 export interface MoneyProps extends Omit<BoxProps, 'children'> {
   /** value in rupees (not paise) */
@@ -73,3 +74,25 @@ export function Money({ value, countUp = false, sign = false, sx, ...rest }: Mon
     </Box>
   );
 }
+
+export interface RatePerUnitProps extends Omit<BoxProps, 'children'> {
+  /** rate in rupees per unit */
+  value: number;
+  /** product unit (canonical or legacy token) — rendered as the short label */
+  unit?: UnitLike;
+}
+
+// DESIGN_SYSTEM §8.4 — a price expressed per unit, e.g. "₹600/kg", "₹7/pc", "₹56/L".
+// Uses the same en-IN money formatting as <Money> then appends "/<unitLabel>".
+export function RatePerUnit({ value, unit = 'litre', sx, ...rest }: RatePerUnitProps) {
+  return (
+    <Box
+      component="span"
+      aria-label={`${format(value)} per ${unitLabel(unit)}`}
+      sx={[{ fontVariantNumeric: 'tabular-nums' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      {...rest}
+    >
+      {format(value)}/{unitLabel(unit)}
+    </Box>
+  );
+}

frontend/PWA/src/components/format/Qty.tsx

@@ -1,19 +1,23 @@
 import { Box, type BoxProps } from '@mui/material';
+import { type UnitLike, formatQty, unitLabel } from '@/lib/unit';
 
+/** @deprecated short token kept for back-compat; Qty now accepts any {@link UnitLike}. */
 export type QtyUnit = 'L' | 'kg' | 'u';
 
 export interface QtyProps extends Omit<BoxProps, 'children'> {
   value: number;
-  unit?: QtyUnit;
+  /** product unit (canonical 'litre'|'kg'|'piece'|'dozen'|'packet' or legacy 'L'|'kg'|'u') */
+  unit?: UnitLike;
+  /** hide the unit label (number only) */
+  hideLabel?: boolean;
 }
 
-const unitLabel: Record<QtyUnit, string> = { L: 'L', kg: 'kg', u: '' };
-
-// DESIGN_SYSTEM §8.4 — unit-aware quantity. Milk is fractional (0.5 / 1.5 L).
-export function Qty({ value, unit = 'L', sx, ...rest }: QtyProps) {
-  // Up to one decimal; trim trailing .0
-  const num = Number.isInteger(value) ? String(value) : value.toFixed(1);
-  const suffix = unitLabel[unit] ? ` ${unitLabel[unit]}` : '';
+// DESIGN_SYSTEM §8.4 — unit-aware quantity. kg up to 3dp (gram precision, trailing zeros
+// trimmed), count units (piece/dozen/packet) as integers with an explicit label
+// (pc/dz/pkt — never blank), litre as 0.5/1.5. No blanket toFixed(1).
+export function Qty({ value, unit = 'litre', hideLabel = false, sx, ...rest }: QtyProps) {
+  const num = formatQty(value, unit);
+  const suffix = hideLabel ? '' : ` ${unitLabel(unit)}`;
   return (
     <Box
       component="span"

frontend/PWA/src/components/index.ts

@@ -61,8 +61,8 @@ export type { SpinnerProps } from './feedback/Spinner';
 // Status & formatting
 export { StatusChip } from './status/StatusChip';
 export type { StatusChipProps, StatusValue } from './status/StatusChip';
-export { Money } from './format/Money';
-export type { MoneyProps } from './format/Money';
+export { Money, RatePerUnit } from './format/Money';
+export type { MoneyProps, RatePerUnitProps } from './format/Money';
 export { Qty } from './format/Qty';
 export type { QtyProps, QtyUnit } from './format/Qty';
 export { DateLabel } from './format/DateLabel';

frontend/PWA/src/features/analytics/DashboardPage.tsx

@@ -5,7 +5,7 @@ import Payments from '@mui/icons-material/Payments';
 import TrendingUp from '@mui/icons-material/TrendingUp';
 import ReceiptLong from '@mui/icons-material/ReceiptLong';
 import People from '@mui/icons-material/People';
-import WaterDrop from '@mui/icons-material/WaterDrop';
+import Inventory2 from '@mui/icons-material/Inventory2';
 import Refresh from '@mui/icons-material/Refresh';
 
 import { AppShell, NAV_TABS, type NavTab } from '@/app';
@@ -19,7 +19,6 @@ import {
   MetricCard,
   Money,
   Skeleton,
-  TrendChart,
 } from '@/components';
 import {
   useAnalyticsSummary,
@@ -29,27 +28,54 @@ import {
   useAnalyticsOutstanding,
 } from '@/api/hooks';
 import { useAuthStore } from '@/auth/authStore';
+import { type Unit } from '@/lib/unit';
 
 import { useDateRange } from './useDateRange';
 import { DateRangeSheet } from './DateRangeSheet';
 import { RangeControl } from './RangeControl';
+import {
+  Dropdown,
+  Segmented,
+  METRIC_OPTIONS,
+  BUCKET_OPTIONS,
+  TREND_SHAPE_OPTIONS,
+  unitFilterOptions,
+  type Metric,
+  type Bucket,
+  type TrendShape,
+} from './controls';
+import { FlexTrendChart, UnitBreakdownChart, AgingStackedBar } from './charts';
+import { UnitQtyChips } from './UnitQtyChips';
+import { unitQtyEntries, productQtyText } from './unitQty';
+import { asSummaryUA, asByProductUA, asTopCustomersUA } from './unitTypes';
 
 const TOP_LIMIT = 10;
 
-// design-dashboard.md (a) — ADMIN Dashboard. Read-only (no action bar). Per-region
-// independent loading/empty/error; count-up metrics; ApexCharts (animations auto-off
-// under reduced-motion inside each chart). Gated by analytics.view at the route.
+// design-dashboard.md (a) — ADMIN Dashboard, reworked UNIT-AWARE + RICH (P-analytics-rich).
+// Revenue (₹) is the primary, always-safe metric; quantity is NEVER summed across units —
+// it's shown per-unit (chips + per-unit breakdown chart, or a single chosen unit on the
+// trend). Dropdown controls: metric (Revenue/Collected/Quantity), unit filter (when
+// Quantity), bucket (day/month), chart-type (area/line/bars). Read-only (no action bar);
+// per-region loading/empty/error; ApexCharts animations off under reduced-motion. Gated by
+// analytics.view at the route.
 export function DashboardPage() {
   const navigate = useNavigate();
   const theme = useTheme();
   const role = useAuthStore((s) => s.user?.role) ?? 'admin';
   const tabs = NAV_TABS[role] ?? NAV_TABS.admin;
 
-  const { range, setRange, label, bucket } = useDateRange('30d');
+  const { range, setRange, label, bucket: autoBucket } = useDateRange('30d');
   const [sheetOpen, setSheetOpen] = useState(false);
-  const [trendMetric, setTrendMetric] = useState<'amount' | 'qty'>('amount');
+
+  // --- dropdown control state ------------------------------------------------
+  const [metric, setMetric] = useState<Metric>('revenue');
+  const [unitFilter, setUnitFilter] = useState<string>('all'); // 'all' | a Unit
+  const [bucketSel, setBucketSel] = useState<'auto' | Bucket>('auto');
+  const [trendShape, setTrendShape] = useState<TrendShape>('area');
   const [topShown, setTopShown] = useState(TOP_LIMIT);
 
+  const bucket: Bucket = bucketSel === 'auto' ? autoBucket : bucketSel;
+
   const scrollRef = useRef<HTMLDivElement>(null);
   const agingRef = useRef<HTMLDivElement>(null);
 
@@ -59,7 +85,7 @@ export function DashboardPage() {
   const trend = useAnalyticsSalesTrend({ ...rangeArg, bucket });
   const byProduct = useAnalyticsByProduct(rangeArg);
   const top = useAnalyticsTopCustomers({ ...rangeArg, limit: TOP_LIMIT });
-  // aging is as_of based (ignores from/to) — uses `to` as as_of per A.1.
+  // aging is as_of based (ignores from/to) — uses `to` as as_of.
   const aging = useAnalyticsOutstanding(range.to);
 
   const refetchAll = () => {
@@ -75,7 +101,10 @@ export function DashboardPage() {
   };
 
   // --- derived view-data -----------------------------------------------------
-  const s = summary.data;
+  const s = asSummaryUA(summary.data);
+  const products = asByProductUA(byProduct.data);
+  const topCustomers = asTopCustomersUA(top.data);
+
   const growthDelta =
     s?.growth_pct == null ? undefined : `${s.growth_pct > 0 ? '+' : ''}${s.growth_pct.toFixed(1)}%`;
   const growthTone: 'up' | 'down' | 'flat' =
@@ -83,35 +112,58 @@ export function DashboardPage() {
   const collectedPct =
     s && s.revenue > 0 ? `${Math.round((s.collected / s.revenue) * 100)}% of rev` : undefined;
 
+  // per-unit qty (NEVER cross-unit summed) from the summary map.
+  const qtyEntries = useMemo(() => unitQtyEntries(s?.total_qty_by_unit), [s]);
+  const presentUnits = useMemo<Unit[]>(() => qtyEntries.map((e) => e.unit), [qtyEntries]);
+  const unitOpts = useMemo(() => unitFilterOptions(presentUnits), [presentUnits]);
+  // keep the unit filter valid as the present units change.
+  const activeUnit: Unit | null =
+    metric === 'quantity' && unitFilter !== 'all' && presentUnits.includes(unitFilter as Unit)
+      ? (unitFilter as Unit)
+      : null;
+
+  // TREND series. Revenue/Collected use the cross-unit-safe amount. Quantity uses the
+  // trend's qty — which is meaningful ONLY when narrowed to a single unit; if no specific
+  // unit is chosen we still chart it but the axis is labelled "mixed" via the empty unit.
+  const trendIsMoney = metric !== 'quantity';
   const trendSeries = useMemo(
     () =>
       (trend.data ?? []).map((p) => ({
         x: p.period,
-        y: trendMetric === 'amount' ? p.amount : p.qty,
+        y: trendIsMoney ? p.amount : p.qty,
       })),
-    [trend.data, trendMetric],
+    [trend.data, trendIsMoney],
   );
+  const trendName =
+    metric === 'revenue' ? 'Revenue' : metric === 'collected' ? 'Collected' : 'Quantity';
 
+  // PRODUCT MIX donut — ALWAYS by revenue (the only cross-unit-safe measure).
   const donutData = useMemo(
-    () => (byProduct.data ?? []).map((p) => ({ label: p.product_name, value: p.amount })),
-    [byProduct.data],
+    () => products.map((p) => ({ label: p.product_name, value: p.amount })),
+    [products],
   );
   const donutTotal = donutData.reduce((acc, d) => acc + d.value, 0);
 
-  const agingData = useMemo(
-    () => (aging.data?.buckets ?? []).map((b) => ({ label: b.bucket, value: b.amount })),
+  // TOP CUSTOMERS bar — by revenue (safe). Cards show per-unit qty when available.
+  const topRows = topCustomers.slice(0, topShown);
+  const topBarData = useMemo(
+    () => topRows.map((c) => ({ label: c.customer_name ?? 'Unknown', value: c.amount })),
+    [topRows],
+  );
+
+  // AGING — stacked bar of outstanding composition (₹).
+  const agingBuckets = useMemo(
+    () => (aging.data?.buckets ?? []).map((b) => ({ bucket: b.bucket, amount: b.amount })),
     [aging.data],
   );
-  // green -> amber -> red by age; 90+ always red (A.2).
   const agingRamp = [
     theme.palette.success.main,
     theme.palette.warning.main,
     theme.palette.accent.main,
     theme.palette.error.main,
+    theme.palette.error.dark,
   ];
 
-  const topRows = (top.data ?? []).slice(0, topShown);
-
   return (
     <AppShell
       title="Dashboard"
@@ -122,7 +174,7 @@ export function DashboardPage() {
       scrollRef={scrollRef}
     >
       <Stack spacing={3}>
-        {/* METRIC CARDS — 2-col grid */}
+        {/* METRIC CARDS — 2-col grid. Revenue/Collected/Outstanding are ₹ (safe). */}
         <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1.5 }}>
           <MetricCard
             icon={Payments}
@@ -163,48 +215,89 @@ export function DashboardPage() {
           />
         </Box>
 
-        {/* SALES TREND */}
+        {/* DELIVERED QUANTITY — per-unit chips (NEVER a cross-unit "L" sum). */}
+        <Card sx={{ p: 2 }}>
+          <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
+            <Inventory2 fontSize="small" sx={{ color: 'text.secondary' }} />
+            <Typography variant="overline" color="text.secondary">
+              Delivered quantity
+            </Typography>
+          </Stack>
+          {summary.isLoading ? (
+            <Skeleton variant="row" count={1} />
+          ) : (
+            <UnitQtyChips entries={qtyEntries} emptyText="No deliveries in this range" size="medium" />
+          )}
+          <UnitBreakdownChart
+            entries={qtyEntries}
+            loading={summary.isLoading}
+            error={summary.isError}
+            onRetry={() => summary.refetch()}
+            height={Math.max(120, qtyEntries.length * 44)}
+          />
+        </Card>
+
+        {/* SALES TREND — metric / unit / bucket / chart-type dropdowns. */}
         <Card sx={{ p: 2 }}>
           <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 1 }}>
-            <Typography variant="h3">Sales trend</Typography>
-            <Stack direction="row" spacing={1} alignItems="center">
-              <TrendingUp fontSize="small" sx={{ color: 'text.secondary' }} />
-              <AppButton
-                variant={trendMetric === 'amount' ? 'secondary' : 'ghost'}
-                size="sm"
-                onPress={() => setTrendMetric('amount')}
-              >
-                ₹
-              </AppButton>
-              <AppButton
-                variant={trendMetric === 'qty' ? 'secondary' : 'ghost'}
-                size="sm"
-                onPress={() => setTrendMetric('qty')}
-              >
-                L
-              </AppButton>
-            </Stack>
+            <Typography variant="h3">Trend</Typography>
+            <Segmented
+              ariaLabel="Trend chart type"
+              value={trendShape}
+              options={TREND_SHAPE_OPTIONS}
+              onChange={setTrendShape}
+            />
           </Stack>
-          <TrendChart
+          <Stack direction="row" flexWrap="wrap" gap={1} sx={{ mb: 1.5 }} useFlexGap>
+            <Dropdown label="Metric" value={metric} options={METRIC_OPTIONS} onChange={setMetric} minWidth={150} />
+            {metric === 'quantity' ? (
+              <Dropdown
+                label="Unit"
+                value={unitFilter}
+                options={unitOpts}
+                onChange={setUnitFilter}
+                minWidth={120}
+              />
+            ) : null}
+            <Dropdown
+              label="Bucket"
+              value={bucketSel}
+              options={[{ value: 'auto', label: `Auto (${autoBucket})` }, ...BUCKET_OPTIONS]}
+              onChange={(v) => setBucketSel(v as 'auto' | Bucket)}
+              minWidth={130}
+            />
+          </Stack>
+
+          {metric === 'quantity' && activeUnit == null ? (
+            <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
+              Quantity is plotted across all delivered units combined. Pick a single unit above
+              to read a clean per-unit line — magnitudes of different units are not comparable.
+            </Typography>
+          ) : null}
+
+          <FlexTrendChart
             series={trendSeries}
-            bucket={bucket}
-            metric={trendMetric}
+            shape={trendShape}
+            money={trendIsMoney}
+            name={trendName}
             loading={trend.isLoading}
             error={trend.isError}
             onRetry={() => trend.refetch()}
-            height={180}
+            height={200}
           />
         </Card>
 
-        {/* PRODUCT MIX */}
+        {/* PRODUCT MIX — donut by revenue (cross-unit safe). */}
         <Card sx={{ p: 2 }}>
           <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 1 }}>
             <Typography variant="h3">Product mix</Typography>
-            <WaterDrop fontSize="small" sx={{ color: 'text.secondary' }} />
+            <Typography variant="caption" color="text.secondary">
+              by revenue
+            </Typography>
           </Stack>
           <DonutChart
             data={donutData}
-            centerLabel="Total"
+            centerLabel="Revenue"
             loading={byProduct.isLoading}
             error={byProduct.isError}
             onRetry={() => byProduct.refetch()}
@@ -216,7 +309,7 @@ export function DashboardPage() {
           ) : null}
         </Card>
 
-        {/* TOP CUSTOMERS */}
+        {/* TOP CUSTOMERS — bar by revenue + cards (per-unit qty, never "L" sum). */}
         <Card sx={{ p: 2 }}>
           <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 1 }}>
             <Typography variant="h3">Top customers</Typography>
@@ -239,34 +332,46 @@ export function DashboardPage() {
           ) : topRows.length === 0 ? (
             <EmptyState variant="card" icon={People} title="No customers served in this range" />
           ) : (
-            <Stack spacing={1}>
-              {topRows.map((c, i) => (
-                <CustomerCard
-                  key={c.customer_id ?? i}
-                  rank={i + 1}
-                  customer={{
-                    id: String(c.customer_id ?? i),
-                    name: c.customer_name ?? 'Unknown',
-                    active: true,
-                  }}
-                  metrics={
-                    <>
-                      <Money value={c.amount} component="span" /> · {c.avg_daily_qty.toFixed(1)} L/day
-                    </>
-                  }
-                  onTap={() => c.customer_id != null && navigate(`/customers/${c.customer_id}`)}
-                />
-              ))}
-              {(top.data?.length ?? 0) > topShown ? (
-                <AppButton variant="ghost" fullWidth onPress={() => setTopShown((n) => n + TOP_LIMIT)}>
-                  Load more
-                </AppButton>
-              ) : null}
+            <Stack spacing={1.5}>
+              <BarChart data={topBarData} metric="amount" height={Math.max(160, topRows.length * 30)} />
+              <Stack spacing={1}>
+                {topRows.map((c, i) => {
+                  const byUnit = c.by_product?.length
+                    ? c.by_product
+                        .map((p) => productQtyText(p))
+                        .filter(Boolean)
+                        .join(' · ')
+                    : null;
+                  return (
+                    <CustomerCard
+                      key={c.customer_id ?? i}
+                      rank={i + 1}
+                      customer={{
+                        id: String(c.customer_id ?? i),
+                        name: c.customer_name ?? 'Unknown',
+                        active: true,
+                      }}
+                      metrics={
+                        <>
+                          <Money value={c.amount} component="span" />
+                          {byUnit ? ` · ${byUnit}` : ''}
+                        </>
+                      }
+                      onTap={() => c.customer_id != null && navigate(`/customers/${c.customer_id}`)}
+                    />
+                  );
+                })}
+                {topCustomers.length > topShown ? (
+                  <AppButton variant="ghost" fullWidth onPress={() => setTopShown((n) => n + TOP_LIMIT)}>
+                    Load more
+                  </AppButton>
+                ) : null}
+              </Stack>
             </Stack>
           )}
         </Card>
 
-        {/* OUTSTANDING AGING */}
+        {/* OUTSTANDING AGING — stacked composition bar (₹) + accessible legend list. */}
         <Card sx={{ p: 2 }} ref={agingRef}>
           <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 1 }}>
             <Typography variant="h3">Outstanding aging</Typography>
@@ -278,20 +383,7 @@ export function DashboardPage() {
             as of today
           </Typography>
 
-          {aging.isLoading ? (
-            <Skeleton variant="chart" />
-          ) : aging.isError ? (
-            <EmptyState
-              variant="card"
-              icon={ReceiptLong}
-              title="Couldn't load aging"
-              action={
-                <AppButton variant="ghost" size="sm" startIcon={<Refresh />} onPress={() => aging.refetch()}>
-                  Retry
-                </AppButton>
-              }
-            />
-          ) : (aging.data?.total ?? 0) === 0 ? (
+          {(aging.data?.total ?? 0) === 0 && !aging.isLoading && !aging.isError ? (
             <Box
               sx={(t) => ({
                 bgcolor: `${t.palette.success.main}14`,
@@ -306,9 +398,14 @@ export function DashboardPage() {
             </Box>
           ) : (
             <Stack spacing={1}>
-              <BarChart data={agingData} colorRamp={agingRamp} metric="amount" height={200} />
+              <AgingStackedBar
+                buckets={agingBuckets}
+                loading={aging.isLoading}
+                error={aging.isError}
+                onRetry={() => aging.refetch()}
+              />
               <Stack spacing={0.5} component="ul" role="list" sx={{ m: 0, p: 0, listStyle: 'none' }}>
-                {(aging.data?.buckets ?? []).map((b) => (
+                {(aging.data?.buckets ?? []).map((b, i) => (
                   <Stack
                     key={b.bucket}
                     component="li"
@@ -316,7 +413,17 @@ export function DashboardPage() {
                     justifyContent="space-between"
                     alignItems="center"
                   >
-                    <Typography variant="body2">{b.bucket}</Typography>
+                    <Stack direction="row" alignItems="center" spacing={1}>
+                      <Box
+                        sx={{
+                          width: 10,
+                          height: 10,
+                          borderRadius: '50%',
+                          bgcolor: agingRamp[Math.min(i, agingRamp.length - 1)],
+                        }}
+                      />
+                      <Typography variant="body2">{b.bucket}</Typography>
+                    </Stack>
                     <Typography variant="body2" color="text.secondary">
                       <Money value={b.amount} component="span" /> ({b.count})
                     </Typography>

frontend/PWA/src/features/analytics/ReportsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react';
+import { useMemo, useState, type ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Box,
@@ -30,10 +30,15 @@ import {
   useAnalyticsOutstanding,
 } from '@/api/hooks';
 import { useAuthStore } from '@/auth/authStore';
+import { normalizeUnit, unitLabel, type Unit } from '@/lib/unit';
 
 import { useDateRange } from './useDateRange';
 import { DateRangeSheet } from './DateRangeSheet';
 import { RangeControl } from './RangeControl';
+import { Dropdown, unitFilterOptions } from './controls';
+import { UnitQtyChips } from './UnitQtyChips';
+import { unitQtyEntries, productQtyText, unitQtyFromProducts, unitQtyLine } from './unitQty';
+import { asSummaryUA, asByProductUA, asTopCustomersUA } from './unitTypes';
 
 type ReportTab = 'overview' | 'products' | 'customers' | 'aging';
 const TABS = [
@@ -45,8 +50,11 @@ const TABS = [
 
 const num = { fontVariantNumeric: 'tabular-nums' as const };
 
-// design-dashboard.md / §9.2 Reports — same analytics data, TABULAR. Read-only; PageTabs
-// switch views; shared DateRangeSheet. Gated by reports.view (+ analytics.view) at route.
+// §9.2 Reports — same analytics data, TABULAR, reworked UNIT-CORRECT (P-analytics-rich).
+// Quantity is shown PER UNIT (own column / chips), never a blended cross-unit number;
+// revenue (₹) is the primary column. A unit filter narrows the Products table to one unit
+// so the qty column is apples-to-apples. Read-only; PageTabs switch views; shared
+// DateRangeSheet. Gated by reports.view (+ analytics.view) at route.
 export function ReportsPage() {
   const navigate = useNavigate();
   const role = useAuthStore((s) => s.user?.role) ?? 'admin';
@@ -55,6 +63,7 @@ export function ReportsPage() {
   const { range, setRange, label } = useDateRange('30d');
   const [sheetOpen, setSheetOpen] = useState(false);
   const [tab, setTab] = useState<ReportTab>('overview');
+  const [productUnit, setProductUnit] = useState<string>('all');
 
   const rangeArg = { from: range.from, to: range.to };
   const summary = useAnalyticsSummary(rangeArg);
@@ -66,25 +75,39 @@ export function ReportsPage() {
     if (t.path !== '/reports') navigate(t.path);
   };
 
-  const s = summary.data;
+  const refetchAll = () => {
+    summary.refetch();
+    byProduct.refetch();
+    top.refetch();
+    aging.refetch();
+  };
+
+  // --- unit-aware view-data --------------------------------------------------
+  const s = asSummaryUA(summary.data);
+  const products = asByProductUA(byProduct.data);
+  const topCustomers = asTopCustomersUA(top.data);
+
   const growth = s?.growth_pct == null ? '—' : `${s.growth_pct > 0 ? '+' : ''}${s.growth_pct.toFixed(1)}%`;
+  const qtyEntries = useMemo(() => unitQtyEntries(s?.total_qty_by_unit), [s]);
+
+  const presentUnits = useMemo<Unit[]>(
+    () => Array.from(new Set(products.map((p) => normalizeUnit(p.unit)))),
+    [products],
+  );
+  const unitOpts = useMemo(() => unitFilterOptions(presentUnits), [presentUnits]);
+  const filteredProducts = useMemo(
+    () =>
+      productUnit === 'all'
+        ? products
+        : products.filter((p) => normalizeUnit(p.unit) === (productUnit as Unit)),
+    [products, productUnit],
+  );
 
   return (
     <AppShell
       title="Reports"
       onMenu={() => navigate('/more')}
-      headerActions={
-        <IconAction
-          icon={Refresh}
-          label="Refresh"
-          onPress={() => {
-            summary.refetch();
-            byProduct.refetch();
-            top.refetch();
-            aging.refetch();
-          }}
-        />
-      }
+      headerActions={<IconAction icon={Refresh} label="Refresh" onPress={refetchAll} />}
       bottomNav={{ items: tabs, current: 'reports', onChange: onNav }}
       subHeader={<RangeControl label={label} onOpen={() => setSheetOpen(true)} />}
     >
@@ -113,20 +136,31 @@ export function ReportsPage() {
                 <TableBody>
                   <Row label="Revenue" value={<Money value={s?.revenue ?? 0} />} />
                   <Row label="Collected" value={<Money value={s?.collected ?? 0} />} />
-                  <Row label="Total quantity" value={`${(s?.total_qty ?? 0).toFixed(1)} L`} />
+                  <Row
+                    label="Delivered quantity"
+                    value={<UnitQtyChips entries={qtyEntries} emptyText="—" />}
+                  />
                   <Row label="Active customers" value={String(s?.active_customers ?? 0)} />
                   <Row label="Growth vs prior" value={growth} />
                 </TableBody>
               </Table>
             )}
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+              Quantity is reported per unit — litre, kg and counts are never added together.
+            </Typography>
           </Card>
         ) : null}
 
         {tab === 'products' ? (
           <Card sx={{ p: 2 }}>
-            <Typography variant="overline" color="text.secondary">
-              Sales by product
-            </Typography>
+            <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
+              <Typography variant="overline" color="text.secondary">
+                Sales by product
+              </Typography>
+              {presentUnits.length > 1 ? (
+                <Dropdown label="Unit" value={productUnit} options={unitOpts} onChange={setProductUnit} minWidth={120} />
+              ) : null}
+            </Stack>
             {byProduct.isLoading ? (
               <Skeleton variant="row" count={5} />
             ) : byProduct.isError ? (
@@ -139,30 +173,41 @@ export function ReportsPage() {
                   </AppButton>
                 }
               />
-            ) : (byProduct.data?.length ?? 0) === 0 ? (
+            ) : filteredProducts.length === 0 ? (
               <EmptyState variant="card" title="No products delivered in this range" />
             ) : (
               <Table size="small">
                 <TableHead>
                   <TableRow>
                     <TableCell>Product</TableCell>
+                    <TableCell>Unit</TableCell>
                     <TableCell align="right">Qty</TableCell>
-                    <TableCell align="right">Amount</TableCell>
+                    <TableCell align="right">Revenue</TableCell>
                     <TableCell align="right">%</TableCell>
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {(byProduct.data ?? []).map((p) => (
+                  {filteredProducts.map((p) => (
                     <TableRow key={p.product_id}>
                       <TableCell>{p.product_name}</TableCell>
-                      <TableCell align="right" sx={num}>{p.qty.toFixed(1)}</TableCell>
-                      <TableCell align="right"><Money value={p.amount} /></TableCell>
-                      <TableCell align="right" sx={num}>{p.pct_of_revenue.toFixed(0)}%</TableCell>
+                      <TableCell>{unitLabel(normalizeUnit(p.unit))}</TableCell>
+                      <TableCell align="right" sx={num}>
+                        {productQtyText(p)}
+                      </TableCell>
+                      <TableCell align="right">
+                        <Money value={p.amount} />
+                      </TableCell>
+                      <TableCell align="right" sx={num}>
+                        {p.pct_of_revenue.toFixed(0)}%
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
               </Table>
             )}
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+              Each row's qty is in its own unit; the % column is share of total revenue (safe to sum).
+            </Typography>
           </Card>
         ) : null}
 
@@ -183,7 +228,7 @@ export function ReportsPage() {
                   </AppButton>
                 }
               />
-            ) : (top.data?.length ?? 0) === 0 ? (
+            ) : topCustomers.length === 0 ? (
               <EmptyState variant="card" title="No customers served in this range" />
             ) : (
               <Table size="small">
@@ -191,27 +236,37 @@ export function ReportsPage() {
                   <TableRow>
                     <TableCell>#</TableCell>
                     <TableCell>Customer</TableCell>
-                    <TableCell align="right">Amount</TableCell>
-                    <TableCell align="right">Avg/day</TableCell>
+                    <TableCell align="right">Revenue</TableCell>
+                    <TableCell>Quantity (per unit)</TableCell>
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {(top.data ?? []).map((c, i) => (
-                    <TableRow
-                      key={c.customer_id ?? i}
-                      hover
-                      sx={{ cursor: c.customer_id != null ? 'pointer' : 'default' }}
-                      onClick={() => c.customer_id != null && navigate(`/customers/${c.customer_id}`)}
-                    >
-                      <TableCell sx={num}>{i + 1}</TableCell>
-                      <TableCell>{c.customer_name ?? 'Unknown'}</TableCell>
-                      <TableCell align="right"><Money value={c.amount} /></TableCell>
-                      <TableCell align="right" sx={num}>{c.avg_daily_qty.toFixed(1)} L</TableCell>
-                    </TableRow>
-                  ))}
+                  {topCustomers.map((c, i) => {
+                    const perUnit = c.by_product?.length
+                      ? unitQtyLine(unitQtyFromProducts(c.by_product))
+                      : '—';
+                    return (
+                      <TableRow
+                        key={c.customer_id ?? i}
+                        hover
+                        sx={{ cursor: c.customer_id != null ? 'pointer' : 'default' }}
+                        onClick={() => c.customer_id != null && navigate(`/customers/${c.customer_id}`)}
+                      >
+                        <TableCell sx={num}>{i + 1}</TableCell>
+                        <TableCell>{c.customer_name ?? 'Unknown'}</TableCell>
+                        <TableCell align="right">
+                          <Money value={c.amount} />
+                        </TableCell>
+                        <TableCell sx={num}>{perUnit}</TableCell>
+                      </TableRow>
+                    );
+                  })}
                 </TableBody>
               </Table>
             )}
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+              Per-customer quantity is broken out by unit, not blended into one number.
+            </Typography>
           </Card>
         ) : null}
 
@@ -248,8 +303,12 @@ export function ReportsPage() {
                   {(aging.data?.buckets ?? []).map((b) => (
                     <TableRow key={b.bucket}>
                       <TableCell>{b.bucket}</TableCell>
-                      <TableCell align="right"><Money value={b.amount} /></TableCell>
-                      <TableCell align="right" sx={num}>{b.count}</TableCell>
+                      <TableCell align="right">
+                        <Money value={b.amount} />
+                      </TableCell>
+                      <TableCell align="right" sx={num}>
+                        {b.count}
+                      </TableCell>
                     </TableRow>
                   ))}
                   <TableRow>

frontend/PWA/src/features/analytics/UnitQtyChips.tsx

@@ -0,0 +1,40 @@
+import { Chip, Stack, Typography } from '@mui/material';
+import type { UnitQty } from './unitQty';
+
+export interface UnitQtyChipsProps {
+  entries: UnitQty[];
+  /** shown when there are no quantities (e.g. revenue-only range) */
+  emptyText?: string;
+  size?: 'small' | 'medium';
+}
+
+// SCENARIOS_UNITS §D1 — render delivered quantity as PER-UNIT chips ("200 L · 5 kg ·
+// 120 pc") instead of a meaningless cross-unit "L" sum. Each unit is its own chip so the
+// numbers are never visually added together. Wraps on a narrow phone.
+export function UnitQtyChips({ entries, emptyText = 'No deliveries', size = 'small' }: UnitQtyChipsProps) {
+  if (entries.length === 0) {
+    return (
+      <Typography variant="body2" color="text.secondary">
+        {emptyText}
+      </Typography>
+    );
+  }
+  return (
+    <Stack direction="row" flexWrap="wrap" gap={0.75} useFlexGap>
+      {entries.map((e) => (
+        <Chip
+          key={e.unit}
+          size={size}
+          label={e.text}
+          sx={(t) => ({
+            fontVariantNumeric: 'tabular-nums',
+            fontWeight: 600,
+            borderRadius: `${t.custom.radius.sm}px`,
+            bgcolor: `${t.palette.primary.main}14`,
+            color: 'primary.main',
+          })}
+        />
+      ))}
+    </Stack>
+  );
+}

frontend/PWA/src/features/analytics/charts.tsx

@@ -0,0 +1,222 @@
+import { useTheme } from '@mui/material';
+import ReactApexChart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import { ChartFrame } from '@/components/charts/ChartFrame';
+import { useReducedMotion } from '@/hooks/useReducedMotion';
+import type { TrendShape } from './controls';
+import type { UnitQty } from './unitQty';
+import { unitLabel } from '@/lib/unit';
+
+// Analytics-local ApexCharts wrappers that the shared library doesn't cover:
+//   - FlexTrendChart    : trend with a SHAPE toggle (area | line | bars) + ₹/qty formatter
+//   - UnitBreakdownChart: per-unit delivered-qty bars (one bar per unit, distinct colors) —
+//                         the only safe way to chart quantity without summing across units.
+// Both set animations off under reduced motion and degrade to scroll on a narrow phone.
+
+const moneyFmt = (v: number) => `₹${Math.round(v)}`;
+const plainFmt = (v: number) => String(Math.round(v));
+
+export interface FlexTrendChartProps {
+  series: { x: string; y: number }[];
+  shape: TrendShape;
+  /** value formatting: '₹' for revenue/collected, '' for quantity */
+  money: boolean;
+  /** series name in the tooltip */
+  name: string;
+  loading?: boolean;
+  error?: boolean;
+  onRetry?: () => void;
+  height?: number;
+}
+
+export function FlexTrendChart({
+  series,
+  shape,
+  money,
+  name,
+  loading = false,
+  error = false,
+  onRetry,
+  height = 200,
+}: FlexTrendChartProps) {
+  const theme = useTheme();
+  const reduced = useReducedMotion();
+  const empty = !loading && !error && series.length === 0;
+  const apexType = shape === 'bar' ? 'bar' : shape === 'line' ? 'line' : 'area';
+  const fmt = money ? moneyFmt : plainFmt;
+
+  const options: ApexOptions = {
+    chart: {
+      type: apexType,
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      animations: { enabled: !reduced, speed: 600 },
+      fontFamily: theme.typography.fontFamily,
+      parentHeightOffset: 0,
+    },
+    colors: [money ? theme.palette.primary.main : theme.palette.secondary.main],
+    dataLabels: { enabled: false },
+    stroke: { curve: 'smooth', width: shape === 'bar' ? 0 : 2.5 },
+    fill:
+      shape === 'area'
+        ? { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.35, opacityTo: 0.05, stops: [0, 100] } }
+        : { opacity: shape === 'bar' ? 0.9 : 1 },
+    plotOptions: { bar: { borderRadius: 4, columnWidth: '60%' } },
+    grid: { borderColor: theme.custom.border, strokeDashArray: 4, padding: { left: 4, right: 4 } },
+    xaxis: {
+      type: 'category',
+      categories: series.map((p) => p.x),
+      labels: { style: { colors: theme.palette.text.secondary, fontSize: '11px' }, rotate: 0, hideOverlappingLabels: true },
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      tickAmount: 6,
+    },
+    yaxis: {
+      labels: { style: { colors: theme.palette.text.secondary, fontSize: '11px' }, formatter: (v) => fmt(Number(v)) },
+    },
+    tooltip: { theme: 'light', y: { formatter: (v) => fmt(Number(v)) } },
+    legend: { show: false },
+  };
+
+  return (
+    <ChartFrame loading={loading} error={error} empty={empty} onRetry={onRetry} height={height}>
+      <ReactApexChart
+        type={apexType}
+        height={height}
+        options={options}
+        series={[{ name, data: series.map((p) => p.y) }]}
+      />
+    </ChartFrame>
+  );
+}
+
+export interface UnitBreakdownChartProps {
+  entries: UnitQty[];
+  loading?: boolean;
+  error?: boolean;
+  onRetry?: () => void;
+  height?: number;
+}
+
+// Per-unit delivered quantity as a horizontal bar chart — one distinctly-coloured bar per
+// unit (L / kg / pc / dz / pkt). NEVER a single summed total; each axis tick is its own unit
+// so the magnitudes are not comparable-as-added. Tooltip shows the unit's own label.
+export function UnitBreakdownChart({ entries, loading = false, error = false, onRetry, height = 180 }: UnitBreakdownChartProps) {
+  const theme = useTheme();
+  const reduced = useReducedMotion();
+  const empty = !loading && !error && entries.length === 0;
+  const ramp = [
+    theme.palette.primary.main,
+    theme.palette.secondary.main,
+    theme.palette.accent.main,
+    theme.palette.info.main,
+    theme.palette.warning.main,
+  ];
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'bar',
+      toolbar: { show: false },
+      animations: { enabled: !reduced, speed: 600 },
+      fontFamily: theme.typography.fontFamily,
+      parentHeightOffset: 0,
+    },
+    colors: ramp,
+    plotOptions: { bar: { horizontal: true, borderRadius: 6, barHeight: '55%', distributed: true } },
+    dataLabels: {
+      enabled: true,
+      formatter: (_v, opts) => entries[opts.dataPointIndex]?.text ?? '',
+      style: { colors: [theme.palette.text.primary], fontSize: '11px' },
+      offsetX: 4,
+    },
+    grid: { borderColor: theme.custom.border, strokeDashArray: 4 },
+    xaxis: {
+      categories: entries.map((e) => unitLabel(e.unit)),
+      labels: { show: false },
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+    },
+    yaxis: { labels: { style: { colors: theme.palette.text.primary, fontSize: '12px' } } },
+    legend: { show: false },
+    tooltip: {
+      theme: 'light',
+      y: { formatter: (v, opts) => entries[opts?.dataPointIndex ?? 0]?.text ?? String(v) },
+    },
+  };
+
+  return (
+    <ChartFrame loading={loading} error={error} empty={empty} onRetry={onRetry} height={height} emptyTitle="No deliveries in this range">
+      <ReactApexChart
+        type="bar"
+        height={height}
+        options={options}
+        series={[{ name: 'Quantity', data: entries.map((e) => e.qty) }]}
+      />
+    </ChartFrame>
+  );
+}
+
+export interface AgingBucketDatum {
+  bucket: string;
+  amount: number;
+}
+
+export interface AgingStackedBarProps {
+  buckets: AgingBucketDatum[];
+  loading?: boolean;
+  error?: boolean;
+  onRetry?: () => void;
+  height?: number;
+}
+
+// Outstanding aging as a single STACKED horizontal bar: each aging bucket (Current / 1-30 /
+// 31-60 / 61-90 / 90+) is a coloured segment of the one total-outstanding bar, so the owner
+// sees the COMPOSITION of what's owed at a glance (green = fresh, red = 90+). Stacked because
+// the segments share one summable money axis (₹ is cross-unit safe). Legend list is rendered
+// by the page (accessible, §10).
+export function AgingStackedBar({ buckets, loading = false, error = false, onRetry, height = 96 }: AgingStackedBarProps) {
+  const theme = useTheme();
+  const reduced = useReducedMotion();
+  const nonZero = buckets.filter((b) => b.amount > 0);
+  const empty = !loading && !error && nonZero.length === 0;
+
+  // green -> amber -> accent -> red by age; 90+ always red.
+  const ramp = [
+    theme.palette.success.main,
+    theme.palette.warning.main,
+    theme.palette.accent.main,
+    theme.palette.error.main,
+    theme.palette.error.dark,
+  ];
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'bar',
+      stacked: true,
+      stackType: '100%',
+      toolbar: { show: false },
+      animations: { enabled: !reduced, speed: 600 },
+      fontFamily: theme.typography.fontFamily,
+      parentHeightOffset: 0,
+    },
+    colors: nonZero.map((_, i) => ramp[Math.min(i, ramp.length - 1)]),
+    plotOptions: { bar: { horizontal: true, borderRadius: 4, barHeight: '46%' } },
+    dataLabels: { enabled: false },
+    grid: { show: false, padding: { top: -10, bottom: -10 } },
+    xaxis: { categories: ['Outstanding'], labels: { show: false }, axisBorder: { show: false }, axisTicks: { show: false } },
+    yaxis: { labels: { show: false } },
+    legend: { show: false },
+    tooltip: { theme: 'light', y: { formatter: (v) => moneyFmt(Number(v)) } },
+  };
+
+  return (
+    <ChartFrame loading={loading} error={error} empty={empty} onRetry={onRetry} height={height} emptyTitle="Nothing outstanding">
+      <ReactApexChart
+        type="bar"
+        height={height}
+        options={options}
+        series={nonZero.map((b) => ({ name: b.bucket, data: [b.amount] }))}
+      />
+    </ChartFrame>
+  );
+}

frontend/PWA/src/features/analytics/controls.tsx

@@ -0,0 +1,119 @@
+import { MenuItem, TextField, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import type { Unit } from '@/lib/unit';
+import { unitLabel } from '@/lib/unit';
+
+// Lightweight, NON-react-hook-form dropdown + segmented controls for the analytics
+// dashboard/reports. The shared `SelectField` is RHF-bound (needs a `control`); these
+// page-state controls are plain value/onChange selects so the dashboard can drive
+// metric / unit / bucket / chart-type without a form. They reuse MUI primitives and the
+// theme tokens (radius/colors) so they match the design system.
+
+export interface DropdownOption<V extends string> {
+  value: V;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface DropdownProps<V extends string> {
+  label: string;
+  value: V;
+  options: DropdownOption<V>[];
+  onChange: (value: V) => void;
+  /** compact width for inline placement next to a chart title */
+  minWidth?: number;
+}
+
+// A compact labelled dropdown (metric / unit / bucket / date-preset).
+export function Dropdown<V extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  minWidth = 130,
+}: DropdownProps<V>) {
+  return (
+    <TextField
+      select
+      size="small"
+      label={label}
+      value={value}
+      onChange={(e) => onChange(e.target.value as V)}
+      sx={{ minWidth }}
+      SelectProps={{ MenuProps: { disableScrollLock: true } }}
+    >
+      {options.map((o) => (
+        <MenuItem key={o.value} value={o.value} disabled={o.disabled}>
+          {o.label}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+}
+
+export interface SegmentedProps<V extends string> {
+  value: V;
+  options: DropdownOption<V>[];
+  onChange: (value: V) => void;
+  ariaLabel: string;
+}
+
+// A small segmented control (chart-type toggle: line / area / bar). 44px tap targets.
+export function Segmented<V extends string>({ value, options, onChange, ariaLabel }: SegmentedProps<V>) {
+  return (
+    <ToggleButtonGroup
+      exclusive
+      size="small"
+      value={value}
+      aria-label={ariaLabel}
+      onChange={(_, v) => v && onChange(v as V)}
+      sx={{
+        '& .MuiToggleButton-root': {
+          textTransform: 'none',
+          fontWeight: 600,
+          minHeight: 36,
+          px: 1.25,
+          border: (t) => `1px solid ${t.custom.border}`,
+        },
+      }}
+    >
+      {options.map((o) => (
+        <ToggleButton key={o.value} value={o.value} disabled={o.disabled} aria-label={o.label}>
+          {o.label}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+}
+
+// ------------------------------- typed control vocab -------------------------------
+
+/** Headline metric. Revenue is ALWAYS safe (cross-unit summable); Quantity is per-unit. */
+export type Metric = 'revenue' | 'collected' | 'quantity';
+export const METRIC_OPTIONS: DropdownOption<Metric>[] = [
+  { value: 'revenue', label: 'Revenue (₹)' },
+  { value: 'collected', label: 'Collected (₹)' },
+  { value: 'quantity', label: 'Quantity' },
+];
+
+/** Trend bucket. */
+export type Bucket = 'day' | 'month';
+export const BUCKET_OPTIONS: DropdownOption<Bucket>[] = [
+  { value: 'day', label: 'Daily' },
+  { value: 'month', label: 'Monthly' },
+];
+
+/** Trend chart shape. */
+export type TrendShape = 'area' | 'line' | 'bar';
+export const TREND_SHAPE_OPTIONS: DropdownOption<TrendShape>[] = [
+  { value: 'area', label: 'Area' },
+  { value: 'line', label: 'Line' },
+  { value: 'bar', label: 'Bars' },
+];
+
+/** Build unit-filter options from the units actually present (revenue charts ignore this). */
+export function unitFilterOptions(units: Unit[]): DropdownOption<string>[] {
+  return [
+    { value: 'all', label: 'All units' },
+    ...units.map((u) => ({ value: u, label: unitLabel(u) })),
+  ];
+}

frontend/PWA/src/features/analytics/unitQty.ts

@@ -0,0 +1,55 @@
+// Per-unit quantity helpers for the analytics area. The cardinal rule (SCENARIOS_UNITS
+// §D1): quantity is summable ONLY within a unit. We never collapse litre + kg + piece
+// into one scalar — revenue (₹) is the only safe cross-unit metric. These helpers turn
+// the backend's per-unit map (and per-product unit rows) into render-ready chips/series.
+
+import { formatQty, normalizeUnit, unitLabel, type Unit } from '@/lib/unit';
+import type { ProductSalesUA, QtyByUnit } from './unitTypes';
+
+/** One per-unit quantity entry, normalized + label-ready. */
+export interface UnitQty {
+  unit: Unit;
+  qty: number;
+  /** e.g. "200 L", "5 kg", "120 pc" */
+  text: string;
+}
+
+// Stable display order so chips don't reshuffle between renders.
+const UNIT_ORDER: Unit[] = ['litre', 'kg', 'piece', 'dozen', 'packet'];
+
+/** Convert a `total_qty_by_unit` map to ordered, formatted entries (drops zero/empty). */
+export function unitQtyEntries(map?: QtyByUnit | null): UnitQty[] {
+  if (!map) return [];
+  const acc = new Map<Unit, number>();
+  for (const [raw, qty] of Object.entries(map)) {
+    if (!qty) continue;
+    const u = normalizeUnit(raw);
+    acc.set(u, (acc.get(u) ?? 0) + qty);
+  }
+  return UNIT_ORDER.filter((u) => acc.has(u)).map((u) => {
+    const qty = acc.get(u) as number;
+    return { unit: u, qty, text: `${formatQty(qty, u)} ${unitLabel(u)}` };
+  });
+}
+
+/** Roll up a list of per-product rows into a per-unit qty map (e.g. a customer's by_product). */
+export function unitQtyFromProducts(rows: ProductSalesUA[]): UnitQty[] {
+  const map: QtyByUnit = {};
+  for (const r of rows) {
+    const u = normalizeUnit(r.unit);
+    map[u] = (map[u] ?? 0) + (r.qty ?? 0);
+  }
+  return unitQtyEntries(map);
+}
+
+/** Compact one-line summary: "200 L · 5 kg · 120 pc" (em-dot separated). "—" when empty. */
+export function unitQtyLine(entries: UnitQty[]): string {
+  if (entries.length === 0) return '—';
+  return entries.map((e) => e.text).join(' · ');
+}
+
+/** Format a single product row's qty with its own unit (never a blended number). */
+export function productQtyText(row: ProductSalesUA): string {
+  const u = normalizeUnit(row.unit);
+  return `${formatQty(row.qty ?? 0, u)} ${unitLabel(u)}`;
+}

frontend/PWA/src/features/analytics/unitTypes.ts

@@ -0,0 +1,45 @@
+// Analytics-local view types.
+//
+// The deployed backend now returns unit-aware fields the shared `api/types.ts`
+// does not yet declare (it predates the unit rollout):
+//   - SalesSummary.total_qty_by_unit : map unit -> qty            (per-unit, never summed)
+//   - ProductSales.unit              : the product's unit          (per-row qty unit)
+//   - CustomerSales.by_product[].unit
+// We extend the shared shapes LOCALLY (additive, optional) and narrow the query
+// data at the call sites with `asUnitAware*`. This keeps the change surgical to
+// features/analytics/* and never touches the shared contract or other pages.
+
+import type {
+  SalesSummary,
+  ProductSales,
+  CustomerSales,
+} from '@/api/types';
+import type { Unit } from '@/lib/unit';
+
+/** A `total_qty_by_unit` map: canonical unit name -> delivered qty. */
+export type QtyByUnit = Partial<Record<Unit, number>> & Record<string, number>;
+
+/** SalesSummary as the unit-aware backend actually returns it. */
+export interface SalesSummaryUA extends SalesSummary {
+  /** delivered qty summed PER unit; render as chips, never cross-unit summed. */
+  total_qty_by_unit?: QtyByUnit | null;
+}
+
+/** ProductSales row carrying the product's unit for correct per-row qty display. */
+export interface ProductSalesUA extends ProductSales {
+  unit?: string;
+}
+
+/** CustomerSales whose by_product rows carry units. */
+export interface CustomerSalesUA extends CustomerSales {
+  by_product?: ProductSalesUA[];
+}
+
+export const asSummaryUA = (s?: SalesSummary): SalesSummaryUA | undefined =>
+  s as SalesSummaryUA | undefined;
+
+export const asByProductUA = (rows?: ProductSales[]): ProductSalesUA[] =>
+  (rows as ProductSalesUA[] | undefined) ?? [];
+
+export const asTopCustomersUA = (rows?: CustomerSales[]): CustomerSalesUA[] =>
+  (rows as CustomerSalesUA[] | undefined) ?? [];

frontend/PWA/src/features/billing/BillDetailPage.tsx

@@ -47,15 +47,16 @@ import {
   useSettings,
   usePayments,
 } from '@/api';
-import type { BillAdjustment, ProductUnit } from '@/api/types';
+import type { BillAdjustment } from '@/api/types';
+import { type Unit, normalizeUnit } from '@/lib/unit';
 import { hasPermission } from '@/auth/permissions';
 import { useAuthStore } from '@/auth/authStore';
 import { useBillingBottomNav } from './hooks/useBillingShell';
+import { type BillLineWithSnapshot, billLineUnit, billLineName } from './lib/billLineUnit';
 import { AdjustmentSheet } from './components/AdjustmentSheet';
 import { RecordPaymentSheet } from './components/RecordPaymentSheet';
 import { StatusChangeSheet } from './components/StatusChangeSheet';
 
-const UNIT_MAP: Record<ProductUnit, 'L' | 'kg' | 'u'> = { litre: 'L', kg: 'kg', piece: 'u' };
 
 // design-billing.md §3 — Bill detail. Lines / tax / carry-forward / totals / QR /
 // WhatsApp (primary) + Record payment (secondary) / adjustments / status change.
@@ -88,21 +89,24 @@ export function BillDetailPage() {
   const delAdjMut = useDeleteBillAdjustment();
 
   const productName = useMemo(() => {
-    const m = new Map<number, { name: string; unit: 'L' | 'kg' | 'u' }>();
-    (productsQ.data?.items ?? []).forEach((p) => m.set(p.id, { name: p.name, unit: UNIT_MAP[p.unit] }));
+    const m = new Map<number, { name: string; unit: Unit }>();
+    (productsQ.data?.items ?? []).forEach((p) => m.set(p.id, { name: p.name, unit: normalizeUnit(p.unit) }));
     return m;
   }, [productsQ.data]);
 
   const mm = bill ? String(bill.period_month).padStart(2, '0') : '';
   const invoiceNo = bill ? `INV-${bill.period_year}-${mm}-${bill.id}` : '';
 
+  // Unit/name come from the SNAPSHOT the backend now stamps on each line, so historical
+  // bills stay correct after a product is edited (litre->kg) or deleted. The live catalog
+  // is only a fallback for older lines that predate the snapshot (SCENARIOS_UNITS §D4/C3).
   const domainLines: DomainBillLine[] = useMemo(
     () =>
-      (bill?.lines ?? []).map((l) => {
+      ((bill?.lines ?? []) as BillLineWithSnapshot[]).map((l) => {
         const meta = l.product_id != null ? productName.get(l.product_id) : undefined;
         return {
-          productName: meta?.name ?? 'Item',
-          unit: meta?.unit ?? 'L',
+          productName: billLineName(l, meta?.name),
+          unit: billLineUnit(l, meta?.unit),
           qty: l.qty,
           rate: l.rate,
           amount: l.amount,

frontend/PWA/src/features/billing/components/BillListCard.tsx

@@ -0,0 +1,63 @@
+import { Box, Card, Stack, Typography } from '@mui/material';
+import ReceiptLong from '@mui/icons-material/ReceiptLong';
+import { Money, StatusChip } from '@/components';
+import type { BillStatus } from '@/api/types';
+
+export interface BillListCardProps {
+  customer: string;
+  invoiceNo: string;
+  amountDue: number;
+  remaining?: number;
+  status: BillStatus;
+  onTap?: () => void;
+}
+
+// Bills-list item for the billing feature. Visually identical to the shared `BillCard`
+// (DESIGN_SYSTEM §8.4) — avatar, customer, invoice#, ₹ amount, status/remaining — but it
+// deliberately DOES NOT render `Bill.total_qty`. That field is a cross-unit SUM
+// (litre + kg + piece collapsed into one scalar), so labelling it "L" is meaningless the
+// moment the catalog has any non-litre product (SCENARIOS_UNITS §D1/D4). The only safely
+// summable cross-unit measure is money, which the card already shows prominently, so the
+// secondary line here is just the invoice number. We keep this inside the feature instead
+// of editing the shared BillCard (still used by the customer-ledger view).
+export function BillListCard({ customer, invoiceNo, amountDue, remaining, status, onTap }: BillListCardProps) {
+  return (
+    <Card sx={{ p: 2, cursor: onTap ? 'pointer' : 'default' }} onClick={onTap} role={onTap ? 'button' : undefined}>
+      <Stack direction="row" spacing={1.5} alignItems="center">
+        <Box
+          sx={(t) => ({
+            width: 40,
+            height: 40,
+            borderRadius: `${t.custom.radius.md}px`,
+            bgcolor: 'background.default',
+            color: 'primary.main',
+            display: 'grid',
+            placeItems: 'center',
+          })}
+        >
+          <ReceiptLong fontSize="small" />
+        </Box>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="subtitle1" noWrap>
+            {customer}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" noWrap>
+            {invoiceNo}
+          </Typography>
+        </Box>
+        <Stack alignItems="flex-end" spacing={0.5}>
+          <Typography variant="subtitle1">
+            <Money value={amountDue} />
+          </Typography>
+          {status === 'partial' && remaining !== undefined ? (
+            <Typography variant="caption" color="warning.main">
+              <Money value={remaining} component="span" /> left
+            </Typography>
+          ) : (
+            <StatusChip status={status} />
+          )}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}

frontend/PWA/src/features/billing/components/BillsListTab.tsx

@@ -3,7 +3,8 @@ import { Chip, Stack, Typography } from '@mui/material';
 import ReceiptLong from '@mui/icons-material/ReceiptLong';
 import { billsApi, useCustomers } from '@/api';
 import type { Bill, Paged, PageParams } from '@/api/types';
-import { BillCard, PagedList, SearchBar, AppButton } from '@/components';
+import { PagedList, SearchBar, AppButton } from '@/components';
+import { BillListCard } from './BillListCard';
 
 export interface BillsListTabProps {
   year: number;
@@ -105,10 +106,12 @@ export function BillsListTab({ year, month, searchOpen, onOpenBill, onGoGenerate
         mode="infinite"
         pullToRefresh
         renderItem={(b) => (
-          <BillCard
+          // BillListCard (feature-local) intentionally omits b.total_qty: it is a cross-unit
+          // SUM and cannot be labelled with one unit (SCENARIOS_UNITS §D1/D4). Money is the
+          // only safely summable cross-unit measure, and the card shows ₹ amount_due.
+          <BillListCard
             customer={nameById.get(b.customer_id) ?? `Customer #${b.customer_id}`}
             invoiceNo={invoiceNo(b)}
-            qty={b.total_qty}
             amountDue={b.amount_due}
             remaining={b.remaining}
             status={b.status}

frontend/PWA/src/features/billing/components/GenerateTab.tsx

@@ -15,7 +15,6 @@ import {
   IconAction,
   MetricCard,
   Money,
-  Qty,
   Skeleton,
   ErrorState,
   Spinner,
@@ -94,10 +93,12 @@ export function GenerateTab({ ctl }: { ctl: GenerateTabController }) {
             value={ctl.preview.customerCount}
             note="active"
           />
+          {/* Per-unit breakdown ("200 L · 5 kg · 120 pc") — quantity is summable only within
+              a unit, so we never show a single cross-unit total here (SCENARIOS_UNITS §D1). */}
           <MetricCard
             icon={WaterDrop}
             label="Total qty"
-            value={<Qty value={ctl.preview.totalQty} />}
+            value={ctl.preview.qtyByUnitLabel}
             note="this period (est.)"
           />
           <MetricCard

frontend/PWA/src/features/billing/hooks/useGeneratePreview.ts

@@ -1,7 +1,14 @@
 import { useMemo } from 'react';
 import { useCustomers, useBills, useAnalyticsByProduct } from '@/api';
+import type { ProductSales } from '@/api/types';
+import { type Unit, type UnitLike, normalizeUnit, UNIT, formatQty, unitLabel } from '@/lib/unit';
 import type { GenerateTarget } from './useGenerateBills';
 
+// analytics by_product now carries `unit` per row (backend deployed). The shared
+// ProductSales type is owned by the integrator and not yet widened, so we read the
+// snapshot unit off the row via a narrow structural type (same pattern as bill lines).
+type ProductSalesWithUnit = ProductSales & { unit?: UnitLike };
+
 // design-billing.md §1a: there is no preview endpoint. Compute the preview from data
 // the app already fetches: active customers (GET /customers), the month's existing
 // bills (GET /bills?year=&month=) for the "already billed → will be re-generated"
@@ -14,7 +21,14 @@ export interface GeneratePreview {
   customerCount: number;
   /** customers that already have a bill this period (re-generated/recomputed) */
   alreadyBilled: number;
-  totalQty: number;
+  /**
+   * Per-unit quantity breakdown for the period, e.g. { litre: 200, kg: 5, piece: 120 }.
+   * Quantity is summable ONLY within a unit, so the preview never collapses these into a
+   * single scalar (SCENARIOS_UNITS §D1).
+   */
+  qtyByUnit: Record<Unit, number>;
+  /** Pre-formatted "200 L · 5 kg · 120 pc" (empty units omitted), or '—' when none. */
+  qtyByUnitLabel: string;
   estAmount: number;
   /** total bills the CTA will (re)generate = customerCount */
   toGenerate: number;
@@ -46,11 +60,20 @@ export function useGeneratePreview(year: number, month: number): GeneratePreview
     return targets.filter((t) => ids.has(t.customerId)).length;
   }, [billsQ.data, targets]);
 
-  const { totalQty, estAmount } = useMemo(() => {
-    const rows = byProductQ.data ?? [];
+  const { qtyByUnit, qtyByUnitLabel, estAmount } = useMemo(() => {
+    const rows = (byProductQ.data ?? []) as ProductSalesWithUnit[];
+    const byUnit: Record<Unit, number> = { litre: 0, kg: 0, piece: 0, dozen: 0, packet: 0 };
+    let amount = 0;
+    for (const r of rows) {
+      byUnit[normalizeUnit(r.unit)] += r.qty ?? 0;
+      amount += r.amount ?? 0;
+    }
+    // Render in canonical unit order, skipping units with no quantity, e.g. "200 L · 5 kg".
+    const parts = UNIT.filter((u) => byUnit[u] > 0).map((u) => `${formatQty(byUnit[u], u)} ${unitLabel(u)}`);
     return {
-      totalQty: rows.reduce((s, r) => s + (r.qty ?? 0), 0),
-      estAmount: rows.reduce((s, r) => s + (r.amount ?? 0), 0),
+      qtyByUnit: byUnit,
+      qtyByUnitLabel: parts.length ? parts.join(' · ') : '—',
+      estAmount: amount,
     };
   }, [byProductQ.data]);
 
@@ -60,7 +83,8 @@ export function useGeneratePreview(year: number, month: number): GeneratePreview
     targets,
     customerCount: targets.length,
     alreadyBilled,
-    totalQty,
+    qtyByUnit,
+    qtyByUnitLabel,
     estAmount,
     toGenerate: targets.length,
     refetch: () => {

frontend/PWA/src/features/billing/lib/billLineUnit.ts

@@ -0,0 +1,44 @@
+// Billing-local adapter for the SNAPSHOTTED unit (and name) the backend now stamps on
+// every bill line at generation time. We must read the unit from the bill line itself —
+// NOT infer it from the live catalog — so historical bills stay correct after a product
+// is edited (litre -> kg) or deleted. (SCENARIOS_UNITS §D4 / C3.)
+//
+// The shared `BillLine` API type (src/api/types.ts) is owned by the integrator and does
+// not yet surface the new snapshot fields; that file is off-limits to this feature. To
+// stay surgical we read the fields off the raw row via a narrow structural type and a
+// safe accessor, instead of widening the shared interface. When the shared type is later
+// extended these helpers keep working unchanged.
+
+import type { BillLine } from '@/api/types';
+import { type Unit, type UnitLike, normalizeUnit } from '@/lib/unit';
+
+/** The snapshot fields the backend now returns on each bill line, layered onto the
+ *  current shared `BillLine` type without editing it. */
+export type BillLineWithSnapshot = BillLine & {
+  /** unit snapshotted at bill time (litre|kg|piece|dozen|packet). */
+  unit?: UnitLike;
+  /** product name snapshotted at bill time (present once the backend stamps it). */
+  product_name?: string | null;
+  name?: string | null;
+};
+
+/**
+ * The unit to DISPLAY for a bill line. Prefers the snapshot stamped on the line; only when
+ * the line has no snapshot (older bills generated before the backend change) does it fall
+ * back to a caller-supplied live-catalog unit, and finally to 'litre'. This is what keeps
+ * a March ghee line reading "0.5 kg" after the product is deleted, instead of "0.5 L".
+ */
+export function billLineUnit(line: BillLineWithSnapshot, fallback?: UnitLike): Unit {
+  if (line.unit != null) return normalizeUnit(line.unit);
+  if (fallback != null) return normalizeUnit(fallback);
+  return 'litre';
+}
+
+/**
+ * The product NAME to DISPLAY for a bill line. Prefers the snapshot stamped on the line so
+ * a deleted product still reads by its real name; otherwise uses the live-catalog name the
+ * caller resolved, then a generic "Item".
+ */
+export function billLineName(line: BillLineWithSnapshot, fallback?: string): string {
+  return line.product_name ?? line.name ?? fallback ?? 'Item';
+}

frontend/PWA/src/features/catalog/components/AddPriceSheet.tsx

@@ -13,12 +13,18 @@ import {
 } from '@/components';
 import { useAddPrice } from '@/api/hooks/usePrices';
 import { toApiError } from '@/api/ApiError';
-import type { PriceInput } from '@/api/types';
+import type { PriceInput, ProductUnit } from '@/api/types';
+import { unitLabel } from '@/lib/unit';
 
 export interface AddPriceSheetProps {
   open: boolean;
   onClose: () => void;
   productId: number;
+  /**
+   * The product's unit — drives the Rate field's per-unit suffix ('per kg', 'per pc',
+   * 'per L') so the operator knows ₹600 means ₹600/kg, not ₹600/pack. Defaults to litre.
+   */
+  unit?: ProductUnit;
   /** optional customer options for a customer-specific override price */
   customerOptions: SelectOption[];
 }
@@ -34,7 +40,13 @@ const todayIso = () => new Date().toISOString().slice(0, 10);
 
 // DESIGN_SYSTEM §9.2 — add an effective-dated price for a product (rate + effective_from),
 // optionally a customer-specific override. Gated by prices.manage at the trigger.
-export function AddPriceSheet({ open, onClose, productId, customerOptions }: AddPriceSheetProps) {
+export function AddPriceSheet({
+  open,
+  onClose,
+  productId,
+  unit,
+  customerOptions,
+}: AddPriceSheetProps) {
   const toast = useToast();
   const add = useAddPrice();
   const { control, handleSubmit, reset, setError } = useForm<FormValues>({
@@ -101,7 +113,18 @@ export function AddPriceSheet({ open, onClose, productId, customerOptions }: Add
       }
     >
       <Stack spacing={2}>
-        <NumberField name="rate" control={control} label="Rate" money min={0} step={0.5} required />
+        <NumberField
+          name="rate"
+          control={control}
+          label="Rate"
+          money
+          // Per-unit suffix derived from the product's unit ('₹ … per kg'); a rate is always
+          // decimal (₹7.33/pc is valid) so we do NOT force the integer keypad here.
+          unit={`per ${unitLabel(unit)}`}
+          min={0}
+          step={0.5}
+          required
+        />
         <DateField name="effective_from" control={control} label="Effective from" required />
         {hasCustomers ? (
           <SelectField

frontend/PWA/src/features/catalog/components/PriceRow.tsx

@@ -1,26 +1,29 @@
 import { Card, Stack, Box, Typography } from '@mui/material';
 import Person from '@mui/icons-material/Person';
 import DeleteOutline from '@mui/icons-material/DeleteOutline';
-import { Money, DateLabel, IconAction } from '@/components';
-import type { Price } from '@/api/types';
+import { RatePerUnit, DateLabel, IconAction } from '@/components';
+import type { Price, ProductUnit } from '@/api/types';
 
 export interface PriceRowProps {
   price: Price;
+  /** the owning product's unit — drives the per-unit suffix (₹600/kg, ₹7/pc, ₹56/L) */
+  unit?: ProductUnit;
   /** display name for a customer-specific override row */
   customerName?: string;
   /** delete affordance (only rendered when prices.manage) */
   onDelete?: () => void;
 }
 
-// A single effective-dated price row in a product's price history.
-export function PriceRow({ price, customerName, onDelete }: PriceRowProps) {
+// A single effective-dated price row in a product's price history. The rate is always
+// expressed per the product's unit (never a bare number) so ₹600/kg ≠ ₹600/L is obvious.
+export function PriceRow({ price, unit, customerName, onDelete }: PriceRowProps) {
   const isOverride = price.customer_id != null;
   return (
     <Card sx={{ p: 2 }}>
       <Stack direction="row" spacing={1.5} alignItems="center">
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Typography variant="subtitle1">
-            <Money value={price.rate} />
+            <RatePerUnit value={price.rate} unit={unit} />
           </Typography>
           <Typography variant="body2" color="text.secondary">
             From <DateLabel value={price.effective_from} />

frontend/PWA/src/features/catalog/components/ResolveRatePreview.tsx

@@ -4,14 +4,17 @@ import Sell from '@mui/icons-material/Sell';
 import {
   DateField,
   SelectField,
-  Money,
+  RatePerUnit,
   Spinner,
   type SelectOption,
 } from '@/components';
 import { useResolveRate } from '@/api/hooks/usePrices';
+import type { ProductUnit } from '@/api/types';
 
 export interface ResolveRatePreviewProps {
   productId: number;
+  /** product unit — the resolved rate is shown per unit (₹600/kg, ₹7/pc, ₹56/L) */
+  unit?: ProductUnit;
   customerOptions: SelectOption[];
 }
 
@@ -24,7 +27,7 @@ const todayIso = () => new Date().toISOString().slice(0, 10);
 
 // DESIGN_SYSTEM §9.2 — "resolve rate" preview: pick a date (+ optional customer) and the
 // server resolves the effective rate (GET /prices/resolve). Read-only, auth-only.
-export function ResolveRatePreview({ productId, customerOptions }: ResolveRatePreviewProps) {
+export function ResolveRatePreview({ productId, unit, customerOptions }: ResolveRatePreviewProps) {
   const { control } = useForm<FormValues>({
     defaultValues: { date: todayIso(), customer_id: '' },
   });
@@ -68,7 +71,7 @@ export function ResolveRatePreview({ productId, customerOptions }: ResolveRatePr
             </Typography>
           ) : data?.found ? (
             <Typography variant="subtitle1">
-              <Money value={data.rate} />
+              <RatePerUnit value={data.rate} unit={unit} />
             </Typography>
           ) : (
             <Typography variant="body2" color="text.secondary">

frontend/PWA/src/features/catalog/pages/ProductPricesPage.tsx

@@ -13,7 +13,6 @@ import {
   ErrorState,
   ConfirmDialog,
   PermissionGate,
-  Qty,
   useToast,
   type AppButtonState,
   type SelectOption,
@@ -24,7 +23,7 @@ import { usePrices, useDeletePrice } from '@/api/hooks/usePrices';
 import { useCustomers } from '@/api/hooks/useCustomers';
 import { toApiError } from '@/api/ApiError';
 import type { Price } from '@/api/types';
-import { unitToken } from '../unit';
+import { unitName } from '../unit';
 import { useCatalogNav } from '../useCatalogNav';
 import { PriceRow } from '../components/PriceRow';
 import { AddPriceSheet } from '../components/AddPriceSheet';
@@ -136,7 +135,7 @@ export function ProductPricesPage() {
                   {product.name}
                 </Typography>
                 <Typography variant="body2" color="text.secondary">
-                  Unit <Qty value={1} unit={unitToken(product.unit)} />
+                  Sold by {unitName(product.unit)}
                   {product.taxable ? ` · Tax ${product.tax_rate}%` : ' · Tax-free'}
                   {product.category ? ` · ${product.category}` : ''}
                 </Typography>
@@ -175,6 +174,7 @@ export function ProductPricesPage() {
               <PriceRow
                 key={price.id}
                 price={price}
+                unit={product?.unit}
                 customerName={
                   price.customer_id != null ? customerName.get(price.customer_id) : undefined
                 }
@@ -187,7 +187,11 @@ export function ProductPricesPage() {
         {/* Resolve rate preview */}
         {product ? (
           <Box sx={{ mt: 1 }}>
-            <ResolveRatePreview productId={productId} customerOptions={customerOptions} />
+            <ResolveRatePreview
+              productId={productId}
+              unit={product.unit}
+              customerOptions={customerOptions}
+            />
           </Box>
         ) : null}
 
@@ -219,6 +223,7 @@ export function ProductPricesPage() {
           open={addOpen}
           onClose={() => setAddOpen(false)}
           productId={productId}
+          unit={product?.unit}
           customerOptions={customerOptions}
         />
       </PermissionGate>

frontend/PWA/src/features/catalog/unit.ts

@@ -1,21 +1,31 @@
 import type { ProductUnit } from '@/api/types';
+import { type Unit, normalizeUnit } from '@/lib/unit';
 
-// Map the backend ProductUnit ('litre'|'kg'|'piece') to the short unit token the
-// presentational library (ProductCard / Qty / NumberField adornment) expects.
-export function unitToken(unit: ProductUnit | undefined): 'L' | 'kg' | 'u' {
-  switch (unit) {
-    case 'kg':
-      return 'kg';
-    case 'piece':
-      return 'u';
-    case 'litre':
-    default:
-      return 'L';
-  }
+// Map the backend ProductUnit (litre|kg|piece|dozen|packet) to the canonical {@link Unit}
+// the presentational library (ProductCard / Qty / NumberField adornment) consumes. The
+// shared components accept `UnitLike`, so callers can also pass `product.unit` directly.
+export function unitToken(unit: ProductUnit | undefined): Unit {
+  return normalizeUnit(unit);
 }
 
 export const UNIT_OPTIONS: { value: ProductUnit; label: string }[] = [
   { value: 'litre', label: 'Litre (L)' },
   { value: 'kg', label: 'Kilogram (kg)' },
-  { value: 'piece', label: 'Piece (u)' },
+  { value: 'piece', label: 'Piece (pc)' },
+  { value: 'dozen', label: 'Dozen (dz)' },
+  { value: 'packet', label: 'Packet (pkt)' },
 ];
+
+// Friendly singular name for a product's unit, used in product detail prose
+// ("Sold by litre" / "Sold by piece"). Falls back to litre for unknown/undefined.
+const UNIT_NAMES: Record<ProductUnit, string> = {
+  litre: 'litre',
+  kg: 'kilogram',
+  piece: 'piece',
+  dozen: 'dozen',
+  packet: 'packet',
+};
+
+export function unitName(unit: ProductUnit | undefined): string {
+  return unit ? UNIT_NAMES[unit] : UNIT_NAMES.litre;
+}

frontend/PWA/src/features/customers/components/ConsumptionBreakdown.tsx

@@ -0,0 +1,86 @@
+import { Box, Card, LinearProgress, Stack, Typography } from '@mui/material';
+import { Money, Qty } from '@/components';
+import type { Unit } from '@/lib/unit';
+import { type ProductSalesRow, productUnitMap, unitForRow } from '../lib/units';
+import type { Product } from '@/api/types';
+
+export interface ConsumptionBreakdownProps {
+  /** analytics `by_product[]` rows (each carries its own `unit` from the unit-aware API) */
+  rows: ProductSalesRow[];
+  /** live products list — fallback source for a row's unit when the row omits it */
+  products?: Product[];
+}
+
+interface ResolvedRow {
+  productId: number;
+  name: string;
+  qty: number;
+  unit: Unit;
+  amount: number;
+  pct: number;
+}
+
+// Per-product consumption breakdown for the customer detail page. Renders the
+// unit-aware `by_product[]`: each line shows the product name, its quantity WITH ITS
+// OWN unit (litres / kg / pieces — never cross-unit summed, never blanket "L"), the
+// revenue (₹), and a revenue-share meter. Revenue is the cross-unit-safe headline; the
+// per-product qty is only ever shown next to its own unit label.
+export function ConsumptionBreakdown({ rows, products }: ConsumptionBreakdownProps) {
+  const fallback = productUnitMap(products);
+  const resolved: ResolvedRow[] = rows.map((r) => ({
+    productId: r.product_id,
+    name: r.product_name,
+    qty: r.qty,
+    unit: unitForRow(r, fallback),
+    amount: r.amount,
+    // pct_of_revenue is share of the WHOLE org's revenue, not this customer's basket;
+    // recompute a within-basket share so the meters read 0–100% for this customer.
+    pct: 0,
+  }));
+
+  const basketTotal = resolved.reduce((sum, r) => sum + Math.max(0, r.amount), 0);
+  for (const r of resolved) {
+    r.pct = basketTotal > 0 ? (Math.max(0, r.amount) / basketTotal) * 100 : 0;
+  }
+  // Highest spend first — the products that matter to this customer lead.
+  resolved.sort((a, b) => b.amount - a.amount);
+
+  return (
+    <Stack spacing={1.5}>
+      {resolved.map((r) => (
+        <Card key={r.productId} sx={{ p: 2 }}>
+          <Stack direction="row" alignItems="baseline" justifyContent="space-between" spacing={1}>
+            <Typography variant="subtitle1" noWrap sx={{ minWidth: 0, flex: 1 }}>
+              {r.name}
+            </Typography>
+            <Money value={r.amount} sx={{ typography: 'subtitle1', fontWeight: 700 }} />
+          </Stack>
+
+          <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ mt: 0.5 }}>
+            <Typography variant="body2" color="text.secondary">
+              {/* qty rendered WITH its product's own unit — never a cross-unit sum */}
+              <Qty value={r.qty} unit={r.unit} component="span" /> total
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {Math.round(r.pct)}% of spend
+            </Typography>
+          </Stack>
+
+          <Box sx={{ mt: 1 }}>
+            <LinearProgress
+              variant="determinate"
+              value={Math.min(100, Math.max(0, r.pct))}
+              aria-label={`${r.name} share of spend`}
+              sx={(t) => ({
+                height: 6,
+                borderRadius: 999,
+                bgcolor: `${t.palette.primary.main}1A`,
+                '& .MuiLinearProgress-bar': { borderRadius: 999 },
+              })}
+            />
+          </Box>
+        </Card>
+      ))}
+    </Stack>
+  );
+}

frontend/PWA/src/features/customers/components/SubscriptionFormSheet.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { Box, Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import DeleteOutline from '@mui/icons-material/DeleteOutline';
 import {
@@ -22,6 +22,7 @@ import { useProducts } from '@/api/hooks/useProducts';
 import { ApiError } from '@/api';
 import type { Subscription, SubscriptionInput, Product } from '@/api/types';
 import type { AppButtonState } from '@/components';
+import { unitLabel, unitStep } from '@/lib/unit';
 import { DAY_LABELS } from '../lib/format';
 
 export interface SubscriptionFormSheetProps {
@@ -76,6 +77,17 @@ export function SubscriptionFormSheet({
     defaultValues: emptyValues,
   });
 
+  // Drive the morning/evening qty fields from the SELECTED product's unit (canonical
+  // litre|kg|piece|dozen|packet). Count units (piece/dozen/packet) get the integer
+  // keypad + step 1 via NumberField's `qtyUnit`; kg/litre get their decimal step. The
+  // visual end-adornment shows the unit's short label (L/kg/pc/dz/pkt — never blank).
+  // Until a product is picked we fall back to litre, preserving the milk default.
+  const selectedProductId = useWatch({ control, name: 'product_id' });
+  const selectedProduct = products.find((p) => String(p.id) === String(selectedProductId));
+  const qtyUnit = selectedProduct?.unit ?? 'litre';
+  const qtyStep = unitStep(qtyUnit);
+  const qtyAdornment = unitLabel(qtyUnit);
+
   useEffect(() => {
     if (!open) return;
     if (subscription) {
@@ -197,8 +209,9 @@ export function SubscriptionFormSheet({
                 control={control}
                 label="Morning qty"
                 min={0}
-                step={0.5}
-                unit="L"
+                step={qtyStep}
+                qtyUnit={qtyUnit}
+                unit={qtyAdornment}
                 selectAllOnFocus
               />
             </Box>
@@ -208,8 +221,9 @@ export function SubscriptionFormSheet({
                 control={control}
                 label="Evening qty"
                 min={0}
-                step={0.5}
-                unit="L"
+                step={qtyStep}
+                qtyUnit={qtyUnit}
+                unit={qtyAdornment}
                 selectAllOnFocus
               />
             </Box>

frontend/PWA/src/features/customers/lib/units.ts

@@ -0,0 +1,60 @@
+// Customer-feature unit helpers. The backend is now unit-aware and returns a `unit`
+// on each analytics `by_product[]` row (ProductSales.unit) — but the shared
+// `@/api/types` ProductSales type is owned by FE-components and may not yet declare
+// it. We must NOT edit shared types from this feature folder, so we read the unit
+// defensively here:
+//   1. prefer the unit carried ON the analytics row (the snapshot the server returns),
+//   2. else fall back to the product's current unit from the live products list,
+//   3. else 'litre' (normalizeUnit's own default — never blank).
+//
+// Cross-unit quantity is NEVER summed or labelled "L": litres, kilograms and pieces
+// are different physical dimensions. Revenue (₹) is the only safely-summable cross-unit
+// measure, so the page headline prefers revenue and per-product rows each carry their
+// own unit.
+
+import type { Product, ProductSales, ProductUnit } from '@/api/types';
+import { type Unit, normalizeUnit } from '@/lib/unit';
+
+/**
+ * The analytics `by_product[]` row as the unit-aware backend actually sends it: the
+ * shared `ProductSales` shape plus the per-row `unit` snapshot. Declared locally
+ * (intersection, not a shared-type edit) so we can read `unit` without `any`.
+ */
+export type ProductSalesRow = ProductSales & { unit?: ProductUnit | string | null };
+
+/** Build a product_id -> canonical unit lookup from the live products list. */
+export function productUnitMap(products: Product[] | undefined): Map<number, Unit> {
+  const map = new Map<number, Unit>();
+  for (const p of products ?? []) map.set(p.id, normalizeUnit(p.unit));
+  return map;
+}
+
+/**
+ * Resolve the canonical unit for an analytics by_product row: prefer the unit the
+ * server stamped on the row, else the live product's unit, else 'litre'.
+ */
+export function unitForRow(row: ProductSalesRow, fallback: Map<number, Unit>): Unit {
+  if (row.unit) return normalizeUnit(row.unit);
+  return fallback.get(row.product_id) ?? normalizeUnit(undefined);
+}
+
+/** Resolve the canonical unit for a subscription's product from the live products list. */
+export function unitForProduct(
+  productId: number,
+  fallback: Map<number, Unit>,
+): Unit {
+  return fallback.get(productId) ?? normalizeUnit(undefined);
+}
+
+/**
+ * Map a canonical unit to the legacy `'L' | 'kg' | 'u'` token that `SubscriptionRow`
+ * (a shared component we must not edit) still accepts. The component forwards this to
+ * `<Qty>`, which re-normalizes it — so count units (piece/dozen/packet) collapse to the
+ * generic count token 'u'. This is lossy for dz/pkt at the SubscriptionRow level only;
+ * the richer per-product consumption breakdown keeps the exact unit label.
+ */
+export function legacyUnitToken(unit: Unit): 'L' | 'kg' | 'u' {
+  if (unit === 'kg') return 'kg';
+  if (unit === 'litre') return 'L';
+  return 'u'; // piece | dozen | packet
+}

frontend/PWA/src/features/customers/pages/CustomerDetailPage.tsx

@@ -26,9 +26,7 @@ import {
   IconAction,
   AppButton,
   MetricCard,
-  BarChart,
   Money,
-  Qty,
   SubscriptionRow,
   LedgerList,
   StatusChip,
@@ -45,12 +43,20 @@ import { hasPermission } from '@/auth/permissions';
 import { useCustomer, useDeleteCustomer } from '@/api/hooks/useCustomers';
 import { useAnalyticsCustomer } from '@/api/hooks/useAnalytics';
 import { useSubscriptions } from '@/api/hooks/useSubscriptions';
+import { useProducts } from '@/api/hooks/useProducts';
 import { useCustomerLedger, type LedgerRow } from '@/api/hooks/useCustomerLedger';
 import type { Subscription } from '@/api/types';
 import { useAppNav } from '../hooks/useAppNav';
 import { useCustomerOutstanding } from '../hooks/useCustomerOutstanding';
 import { CustomerFormSheet } from '../components/CustomerFormSheet';
 import { SubscriptionFormSheet } from '../components/SubscriptionFormSheet';
+import { ConsumptionBreakdown } from '../components/ConsumptionBreakdown';
+import {
+  type ProductSalesRow,
+  legacyUnitToken,
+  productUnitMap,
+  unitForProduct,
+} from '../lib/units';
 import { formatDays, telHref, whatsAppHref } from '../lib/format';
 
 function billLabel(year: number, month: number): string {
@@ -88,8 +94,13 @@ function toLedgerEntry(row: LedgerRow, i: number): LedgerEntry {
 }
 
 // DESIGN_SYSTEM §9.2 + design-dashboard.md (b) — Customer detail: profile + quick actions,
-// consumption (analytics/customer/{id}), product-mix bars, computed outstanding,
-// subscriptions list (add/edit/delete), merged ledger; sticky "+ Add subscription".
+// consumption (analytics/customer/{id}), per-product unit-aware breakdown, computed
+// outstanding, subscriptions list (add/edit/delete), merged ledger; sticky "+ Add subscription".
+//
+// UNIT-AWARENESS (SCENARIOS_UNITS D1/D5): a customer's basket can mix litres + kg + pieces,
+// which are different physical dimensions and CANNOT be summed into one "X L" scalar. So the
+// headline uses revenue (₹) — the only cross-unit-safe measure — and per-product quantity is
+// only ever shown next to that product's own unit, via <ConsumptionBreakdown>.
 export function CustomerDetailPage() {
   const { id } = useParams<{ id: string }>();
   const customerId = id ? Number(id) : undefined;
@@ -103,9 +114,20 @@ export function CustomerDetailPage() {
   const ledgerQuery = useCustomerLedger(customerId);
   const outstandingQuery = useCustomerOutstanding(customerId);
 
+  // Products carry the canonical unit (litre|kg|piece|dozen|packet). Used as the fallback
+  // unit source for subscription rows AND for any analytics by_product row that omits its
+  // own unit. Already cached by the products list elsewhere, so this is effectively free.
+  const productsQuery = useProducts();
+
   const customer = customerQuery.data;
   const analytics = analyticsQuery.data;
   const subs: Subscription[] = subsQuery.data?.items ?? [];
+  const products = productsQuery.data?.items;
+  const productUnitById = useMemo(() => productUnitMap(products), [products]);
+
+  // The unit-aware backend stamps a `unit` on each by_product row; the shared ProductSales
+  // type may not declare it yet, so we widen locally (see ../lib/units).
+  const byProduct = (analytics?.by_product ?? []) as ProductSalesRow[];
 
   const menuAnchorRef = useRef<HTMLSpanElement>(null);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -123,11 +145,14 @@ export function CustomerDetailPage() {
     [ledgerQuery.data],
   );
 
-  const productBars = useMemo(
-    () =>
-      (analytics?.by_product ?? []).map((p) => ({ label: p.product_name, value: p.amount })),
-    [analytics],
-  );
+  // Resolve a product NAME for a subscription: prefer the analytics by_product name (richer),
+  // else the live products list, else a stable placeholder.
+  const productNameById = useMemo(() => {
+    const m = new Map<number, string>();
+    for (const p of byProduct) m.set(p.product_id, p.product_name);
+    for (const p of products ?? []) if (!m.has(p.id)) m.set(p.id, p.name);
+    return m;
+  }, [byProduct, products]);
 
   const openAddSub = () => {
     setEditingSub(null);
@@ -245,7 +270,9 @@ export function CustomerDetailPage() {
               }
             />
 
-            {/* CONSUMPTION HEADLINE — 3 mini MetricCards (qty / spend / avg per day) */}
+            {/* CONSUMPTION HEADLINE — revenue-led (cross-unit-safe). Spend is the hero figure;
+                products count + days-served are the supporting metrics. We do NOT print a
+                cross-unit "total_qty L" headline — quantity lives per-product below. */}
             <Box
               sx={{
                 display: 'grid',
@@ -254,21 +281,22 @@ export function CustomerDetailPage() {
               }}
             >
               <MetricCard
-                icon={WaterDrop}
-                label="Qty"
+                icon={Payments}
+                label="Spend"
                 loading={analyticsQuery.isLoading}
                 error={analyticsQuery.isError}
                 onRetry={() => analyticsQuery.refetch()}
-                value={<Qty value={analytics?.total_qty ?? 0} unit="L" />}
+                value={<Money value={analytics?.total_amount ?? 0} countUp />}
                 note={analytics ? `${analytics.days_served} days` : undefined}
               />
               <MetricCard
-                icon={Payments}
-                label="Spend"
+                icon={Inventory2}
+                label="Products"
                 loading={analyticsQuery.isLoading}
                 error={analyticsQuery.isError}
                 onRetry={() => analyticsQuery.refetch()}
-                value={<Money value={analytics?.total_amount ?? 0} countUp />}
+                value={byProduct.length}
+                note="bought"
               />
               <MetricCard
                 icon={Insights}
@@ -276,20 +304,36 @@ export function CustomerDetailPage() {
                 loading={analyticsQuery.isLoading}
                 error={analyticsQuery.isError}
                 onRetry={() => analyticsQuery.refetch()}
-                value={<Qty value={analytics?.avg_daily_qty ?? 0} unit="L" />}
-                note={analytics ? `${analytics.days_served} served` : undefined}
+                value={
+                  <Money
+                    value={
+                      analytics && analytics.days_served > 0
+                        ? analytics.total_amount / analytics.days_served
+                        : 0
+                    }
+                  />
+                }
+                note="spend"
               />
             </Box>
 
-            {/* PRODUCT MIX — horizontal bars (true time-series is a backend GAP, see B.1) */}
+            {/* WHAT THEY BUY — unit-aware per-product breakdown. Each row shows the product's
+                quantity with ITS OWN unit (L / kg / pc / dz / pkt) + revenue + spend share.
+                Replaces the old cross-unit "total_qty L" metric and the amount-only bar chart. */}
             <Box>
               <SectionHeader icon={WaterDrop} title="What they buy" />
               {analyticsQuery.isLoading ? (
-                <Skeleton variant="chart" />
-              ) : productBars.length === 0 ? (
+                <Skeleton variant="row" count={3} />
+              ) : analyticsQuery.isError ? (
+                <ErrorState
+                  variant="card"
+                  title="Couldn't load consumption"
+                  onRetry={() => analyticsQuery.refetch()}
+                />
+              ) : byProduct.length === 0 ? (
                 <EmptyState variant="card" icon={WaterDrop} title="No deliveries yet" />
               ) : (
-                <BarChart data={productBars} metric="amount" />
+                <ConsumptionBreakdown rows={byProduct} products={products} />
               )}
             </Box>
 
@@ -308,7 +352,8 @@ export function CustomerDetailPage() {
               }
             />
 
-            {/* SUBSCRIPTIONS — list with add/edit/delete (writes gated) */}
+            {/* SUBSCRIPTIONS — list with add/edit/delete (writes gated). Each row's morning/
+                evening qty renders with the product's own unit, not a hardcoded 'L'. */}
             <Box>
               <SectionHeader icon={Inventory2} title="Subscriptions" />
               {subsQuery.isLoading ? (
@@ -327,9 +372,10 @@ export function CustomerDetailPage() {
                   {subs.map((s) => (
                     <SubscriptionRow
                       key={s.id}
-                      product={analytics?.by_product?.find((p) => p.product_id === s.product_id)?.product_name ?? `Product #${s.product_id}`}
+                      product={productNameById.get(s.product_id) ?? `Product #${s.product_id}`}
                       morningQty={s.morning_qty}
                       eveningQty={s.evening_qty}
+                      unit={legacyUnitToken(unitForProduct(s.product_id, productUnitById))}
                       days={formatDays(s.days_of_week)}
                       active={s.active}
                       // edit/delete share the subscriptions.manage gate — hide the edit

frontend/PWA/src/features/route/components/RecordDeliverySheet.tsx

@@ -22,6 +22,7 @@ import {
 import type { Product, Customer, DeliveryInput, Shift } from '@/api/types';
 import { useRecordDelivery, useDeleteDelivery } from '@/api/hooks';
 import { ApiError } from '@/api/ApiError';
+import { type Unit, formatQty, normalizeUnit, quantize, unitLabel } from '@/lib/unit';
 import type { DraftRow, DraftStatus } from '../hooks/useRouteDraft';
 
 export type SheetMode =
@@ -58,8 +59,6 @@ const STATUS_OPTIONS = [
   { value: 'hold' as const, label: 'Hold', icon: <PauseCircle sx={{ fontSize: 16 }} /> },
 ];
 
-const round1 = (n: number) => Math.round(n * 10) / 10;
-
 // design-route.md Screen B — single record-delivery bottom sheet (edit / +extra / ad-hoc).
 // Save → POST /deliveries (server resolves rate + amount). Delete recorded → DELETE /deliveries/{id}.
 export function RecordDeliverySheet({
@@ -103,11 +102,24 @@ export function RecordDeliverySheet({
   const status = watch('status');
   const productId = watch('productId');
 
+  // Unit follows the selected product so the stepper/captions/quantize are correct for
+  // eggs (piece), ghee/paneer (kg), packs (packet) — not just milk (litre). Prefer the chosen
+  // product's unit; fall back to the edited row's unit; default 'litre' (legacy milk behaviour).
+  const selectedProduct = useMemo(
+    () => products.find((p) => String(p.id) === productId),
+    [products, productId],
+  );
+  const unit: Unit = selectedProduct
+    ? normalizeUnit(selectedProduct.unit)
+    : row && String(row.productId) === productId
+      ? row.unit
+      : 'litre';
+
   // Live amount preview (client estimate; the server is the source of truth on save).
   const previewRate =
     row && String(row.productId) === productId ? row.rate : 0; // unknown rate for a freshly picked product
   const previewAmount =
-    status === 'delivered' ? round1(Number(qty) || 0) * previewRate : 0;
+    status === 'delivered' ? quantize(Number(qty) || 0, unit) * previewRate : 0;
   const qtyDisabled = status === 'skipped' || status === 'hold';
 
   const productOptions = products
@@ -136,7 +148,8 @@ export function RecordDeliverySheet({
       product_id: Number(values.productId),
       delivery_date: date,
       shift: values.shift,
-      actual_qty: status === 'delivered' ? round1(Number(values.qty) || 0) : 0,
+      // Unit-aware quantize for the persisted value (integer counts / 3dp kg / litre step grid).
+      actual_qty: status === 'delivered' ? quantize(Number(values.qty) || 0, unit) : 0,
       status,
       note: values.note?.trim() || undefined,
     };
@@ -235,14 +248,14 @@ export function RecordDeliverySheet({
               </Typography>
               {row && !isExtra && row.plannedQty > 0 ? (
                 <Typography variant="caption" color="text.secondary">
-                  Planned {row.plannedQty} L
+                  Planned {formatQty(row.plannedQty, row.unit)} {unitLabel(row.unit)}
                 </Typography>
               ) : null}
             </Stack>
             <QtyStepper
               value={Number(qty) || 0}
               onChange={(q) => setValue('qty', q)}
-              unit="L"
+              unit={unit}
               disabled={qtyDisabled}
             />
           </Box>
@@ -278,7 +291,7 @@ export function RecordDeliverySheet({
             })}
           >
             <Typography variant="body2" color="text.secondary">
-              {previewRate > 0 ? `Rate ₹${previewRate}/L` : 'Rate resolved on save'}
+              {previewRate > 0 ? `Rate ₹${previewRate}/${unitLabel(unit)}` : 'Rate resolved on save'}
             </Typography>
             <Typography variant="subtitle1">
               <Money value={previewAmount} countUp />

frontend/PWA/src/features/route/components/RouteSection.tsx

@@ -3,6 +3,7 @@ import { motion as fm } from 'framer-motion';
 import type { SvgIconComponent } from '@mui/icons-material';
 import { DeliveryRow } from '@/components';
 import { useReducedMotion } from '@/hooks/useReducedMotion';
+import { quantize } from '@/lib/unit';
 import { sec, stagger } from '@/theme/motion';
 import type { DraftRow, DraftStatus } from '../hooks/useRouteDraft';
 
@@ -20,8 +21,6 @@ export interface RouteSectionProps {
   onExtra: (row: DraftRow) => void;
 }
 
-const round1 = (n: number) => Math.round(n * 10) / 10;
-
 // design-route.md Screen A — grouped morning/evening section. Rows stagger-in (40ms).
 export function RouteSection({
   label,
@@ -78,11 +77,11 @@ export function RouteSection({
                 productName: row.productName,
                 status: row.status,
                 qty: row.qty,
-                unit: 'L',
+                unit: row.unit,
                 rate: row.rate,
                 amount:
-                  row.status === 'delivered' ? round1(row.qty) * row.rate : undefined,
-                extra: row.adHoc ? round1(row.qty) : undefined,
+                  row.status === 'delivered' ? quantize(row.qty, row.unit) * row.rate : undefined,
+                extra: row.adHoc ? quantize(row.qty, row.unit) : undefined,
                 note: row.note,
               }}
               dirty={row.dirty}

frontend/PWA/src/features/route/components/SubmitConfirmSheet.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { Box, Divider, Stack, Typography } from '@mui/material';
 import { AppButton, BottomSheet, Money, StatusChip, type AppButtonState } from '@/components';
+import { UNIT, type Unit, formatQty, quantize, unitLabel } from '@/lib/unit';
 import type { DraftRow } from '../hooks/useRouteDraft';
 
 export interface SubmitConfirmSheetProps {
@@ -14,8 +15,6 @@ export interface SubmitConfirmSheetProps {
   onConfirm: () => void;
 }
 
-const round1 = (n: number) => Math.round(n * 10) / 10;
-
 // design-route.md Screen C — submit confirmation summary (by status) before POST /deliveries/bulk.
 export function SubmitConfirmSheet({
   open,
@@ -28,21 +27,29 @@ export function SubmitConfirmSheet({
 }: SubmitConfirmSheetProps) {
   const summary = useMemo(() => {
     let deliveredCount = 0;
-    let deliveredQty = 0;
     let skipped = 0;
     let hold = 0;
     let extras = 0;
     let billable = 0;
+    // Quantity is only summable WITHIN a unit — accumulate per unit so 200 L milk + 5 kg ghee +
+    // 120 eggs reads "200 L · 5 kg · 120 pc", never a meaningless cross-unit "325 L".
+    const qtyByUnit = new Map<Unit, number>();
     for (const r of dirtyRows) {
       if (r.adHoc || r.plannedQty === 0) extras += 1;
       if (r.status === 'delivered') {
         deliveredCount += 1;
-        deliveredQty += round1(r.qty);
-        billable += round1(r.qty) * r.rate;
+        const q = quantize(r.qty, r.unit);
+        qtyByUnit.set(r.unit, (qtyByUnit.get(r.unit) ?? 0) + q);
+        billable += q * r.rate;
       } else if (r.status === 'skipped') skipped += 1;
       else if (r.status === 'hold') hold += 1;
     }
-    return { deliveredCount, deliveredQty: round1(deliveredQty), skipped, hold, extras, billable };
+    // Stable unit order; only units that actually appear.
+    const deliveredQtyText =
+      UNIT.filter((u) => qtyByUnit.has(u))
+        .map((u) => `${formatQty(qtyByUnit.get(u) as number, u)} ${unitLabel(u)}`)
+        .join(' · ') || '0';
+    return { deliveredCount, deliveredQtyText, skipped, hold, extras, billable };
   }, [dirtyRows]);
 
   return (
@@ -69,7 +76,7 @@ export function SubmitConfirmSheet({
       </Typography>
 
       <Stack spacing={1.25}>
-        <Row label={<StatusChip status="delivered" />} value={`${summary.deliveredCount} · ${summary.deliveredQty} L`} />
+        <Row label={<StatusChip status="delivered" />} value={`${summary.deliveredCount} · ${summary.deliveredQtyText}`} />
         <Row label={<StatusChip status="skipped" />} value={String(summary.skipped)} />
         <Row label={<StatusChip status="hold" />} value={String(summary.hold)} />
         <Row

frontend/PWA/src/features/route/hooks/useRouteDraft.ts

@@ -1,5 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { RouteRow } from '@/api/types';
+import type { ProductUnit, RouteRow } from '@/api/types';
+import { type Unit, normalizeUnit, quantize } from '@/lib/unit';
+
+// The backend now returns the product unit on each /route row ("unit"). The shared RouteRow
+// type may not declare it yet; read it tolerantly without editing the shared API type. Unknown /
+// missing values normalize to 'litre' (legacy milk behaviour) via normalizeUnit().
+type RouteRowWithUnit = RouteRow & { unit?: ProductUnit };
+const rowUnit = (r: RouteRow): Unit => normalizeUnit((r as RouteRowWithUnit).unit);
 
 // design-route.md Screen A/C — the route LIST is the bulk editor. Edits accumulate in a
 // local "dirty" draft keyed by the row slot (customer+product+shift); nothing is POSTed per
@@ -21,6 +28,8 @@ export interface DraftRow {
   plannedQty: number;
   /** working quantity (server-zeroed for skip/hold on save) */
   qty: number;
+  /** product unit (litre|kg|piece|dozen|packet) — drives stepper/captions/quantize */
+  unit: Unit;
   rate: number;
   status: DraftStatus;
   /** already saved on the server (✓ + amount); excluded from Submit unless edited */
@@ -49,6 +58,7 @@ function rowFromProjection(r: RouteRow): DraftRow {
     shift: r.shift,
     plannedQty: r.planned_qty,
     qty,
+    unit: rowUnit(r),
     rate: r.rate,
     status,
     recorded,
@@ -87,8 +97,6 @@ function persistOverlay(date: string, overlay: OverlayMap) {
   }
 }
 
-const round1 = (n: number) => Math.round(n * 10) / 10;
-
 /**
  * Merges the server projection with a localStorage-backed overlay of unsaved edits and
  * exposes mutators + derived totals. Read-only (future date) callers can ignore the mutators.
@@ -136,7 +144,18 @@ export function useRouteDraft(date: string, rows: RouteRow[] | undefined, readOn
     [readOnly],
   );
 
-  const setQty = useCallback((key: string, qty: number) => patchRow(key, { qty: round1(qty) }), [patchRow]);
+  // Per-slot unit lookup so qty mutations quantize against the right unit (integer for
+  // piece/dozen/packet, 3dp for kg, step grid for litre) — never the legacy 1-decimal round1.
+  const unitByKey = useMemo(() => {
+    const m = new Map<string, Unit>();
+    for (const r of draftRows) m.set(r.key, r.unit);
+    return m;
+  }, [draftRows]);
+
+  const setQty = useCallback(
+    (key: string, qty: number) => patchRow(key, { qty: quantize(qty, unitByKey.get(key)) }),
+    [patchRow, unitByKey],
+  );
   const setStatus = useCallback(
     (key: string, status: DraftStatus) => patchRow(key, { status }),
     [patchRow],
@@ -161,10 +180,12 @@ export function useRouteDraft(date: string, rows: RouteRow[] | undefined, readOn
 
   // Derived totals (live count-up source).
   const dirtyRows = useMemo(() => draftRows.filter((r) => r.dirty), [draftRows]);
+  // Client preview only; the server recomputes amount on submit. Quantize per the row's unit
+  // so a 0.125 kg portion previews ₹50 (not the round1 ₹40) and counts stay whole.
   const runningTotal = useMemo(
     () =>
       draftRows.reduce(
-        (sum, r) => (r.status === 'delivered' ? sum + round1(r.qty) * r.rate : sum),
+        (sum, r) => (r.status === 'delivered' ? sum + quantize(r.qty, r.unit) * r.rate : sum),
         0,
       ),
     [draftRows],

frontend/PWA/src/features/route/pages/RoutePage.tsx

@@ -23,6 +23,7 @@ import { AppShell, Fab, NAV_TABS } from '@/app';
 import { useRoute, useSubmitDeliveries, useProducts, useCustomers } from '@/api/hooks';
 import { useAuth } from '@/api/hooks/useAuth';
 import { ApiError } from '@/api/ApiError';
+import { quantize } from '@/lib/unit';
 import type { DeliveryInput } from '@/api/types';
 import { useRouteDraft, type DraftRow } from '../hooks/useRouteDraft';
 import { useOnline } from '../hooks/useOnline';
@@ -91,7 +92,9 @@ export function RoutePage() {
       product_id: r.productId,
       delivery_date: date,
       shift: r.shift,
-      actual_qty: r.status === 'delivered' ? r.qty : 0,
+      // Unit-aware quantize for the persisted value: integer for piece/dozen/packet, 3dp for
+      // kg (gram precision the server keeps), step grid for litre. Never the legacy round1.
+      actual_qty: r.status === 'delivered' ? quantize(r.qty, r.unit) : 0,
       status: r.status === 'pending' ? 'delivered' : r.status,
       note: r.note?.trim() || undefined,
     }));

frontend/PWA/src/lib/unit.ts

@@ -0,0 +1,133 @@
+// Shared, unit-aware quantity utility. The backend is the source of truth for the
+// canonical unit names: products.unit ∈ litre|kg|piece|dozen|packet. The server keeps
+// 3dp for kg/litre and rejects fractional qty for piece/dozen/packet (count units).
+//
+// This module is the SINGLE place that knows, per unit:
+//   - the stepper step / min
+//   - how many decimals to show
+//   - which mobile keypad to raise (numeric vs decimal)
+//   - the short display label (NEVER blank)
+//   - how to quantize a value before it is sent to the server
+//
+// It accepts both the canonical backend names AND the legacy short presentational
+// tokens ('L'|'kg'|'u') the component library historically used, so existing call
+// sites keep working unchanged. Unknown / undefined inputs fall back to 'litre'.
+
+/** Canonical backend unit names. */
+export type Unit = 'litre' | 'kg' | 'piece' | 'dozen' | 'packet';
+
+/** Anything we'll accept and normalize: canonical names, legacy tokens, or undefined. */
+export type UnitLike = Unit | 'L' | 'u' | (string & {}) | undefined | null;
+
+export const UNIT: readonly Unit[] = ['litre', 'kg', 'piece', 'dozen', 'packet'];
+
+/** Count units take whole numbers only (no fractional eggs / packs / dozens). */
+const COUNT_UNITS: ReadonlySet<Unit> = new Set<Unit>(['piece', 'dozen', 'packet']);
+
+/**
+ * Normalize any accepted input to a canonical {@link Unit}. Legacy short tokens map:
+ * 'L' -> litre, 'u' -> piece, 'kg' -> kg. Unknown / undefined -> 'litre'.
+ */
+export function normalizeUnit(unit: UnitLike): Unit {
+  switch (unit) {
+    case 'kg':
+      return 'kg';
+    case 'piece':
+    case 'u':
+      return 'piece';
+    case 'dozen':
+      return 'dozen';
+    case 'packet':
+      return 'packet';
+    case 'litre':
+    case 'L':
+    default:
+      return 'litre';
+  }
+}
+
+/** True when the unit is counted in whole numbers (piece / dozen / packet). */
+export function isCountUnit(unit: UnitLike): boolean {
+  return COUNT_UNITS.has(normalizeUnit(unit));
+}
+
+/** Stepper increment: litre 0.5, kg 0.25, count units 1. */
+export function unitStep(unit: UnitLike): number {
+  const u = normalizeUnit(unit);
+  if (u === 'kg') return 0.25;
+  if (isCountUnit(u)) return 1;
+  return 0.5; // litre
+}
+
+/** Minimum quantity (0 for all units today; kept as a hook for future deposit/min-order). */
+export function unitMin(_unit: UnitLike): number {
+  return 0;
+}
+
+/** Decimal places to DISPLAY: count 0, kg up to 3, litre up to 2 (trailing trimmed by callers). */
+export function unitDecimals(unit: UnitLike): number {
+  const u = normalizeUnit(unit);
+  if (isCountUnit(u)) return 0;
+  if (u === 'kg') return 3;
+  return 2; // litre (0.5 / 1.5 / 0.25)
+}
+
+/**
+ * Mobile keypad mode. Count units raise the integer-only pad ('numeric', no dot);
+ * weight/volume raise the decimal pad.
+ */
+export function unitInputMode(unit: UnitLike): 'numeric' | 'decimal' {
+  return isCountUnit(unit) ? 'numeric' : 'decimal';
+}
+
+/** HTML input `pattern` matching {@link unitInputMode} — digits only for count units. */
+export function unitPattern(unit: UnitLike): string {
+  return isCountUnit(unit) ? '[0-9]*' : '[0-9]*[.]?[0-9]*';
+}
+
+/** Short display label — NEVER blank. litre 'L', kg 'kg', piece 'pc', dozen 'dz', packet 'pkt'. */
+export function unitLabel(unit: UnitLike): string {
+  switch (normalizeUnit(unit)) {
+    case 'kg':
+      return 'kg';
+    case 'piece':
+      return 'pc';
+    case 'dozen':
+      return 'dz';
+    case 'packet':
+      return 'pkt';
+    case 'litre':
+    default:
+      return 'L';
+  }
+}
+
+/**
+ * Quantize a value to the precision the server expects for this unit, so the value SENT
+ * to the server keeps kg gram-precision and is a whole number for counts:
+ *   - count (piece/dozen/packet) -> nearest integer
+ *   - kg                          -> 3 decimal places (gram precision)
+ *   - litre                       -> 2 decimal places (preserves 0.25 / 0.5 / 0.75)
+ * Non-finite input quantizes to {@link unitMin}.
+ * Note: litre rounds to 2dp rather than snapping to the 0.5 stepper grid, so a typed
+ * quarter-litre (0.25 L — common for milk) is preserved; the +/- stepper still moves by 0.5.
+ */
+export function quantize(value: number, unit: UnitLike): number {
+  const u = normalizeUnit(unit);
+  if (!Number.isFinite(value)) return unitMin(u);
+  if (isCountUnit(u)) return Math.round(value);
+  if (u === 'kg') return Math.round(value * 1000) / 1000; // 3dp
+  return Math.round(value * 100) / 100; // litre: 2dp
+}
+
+/**
+ * Format a quantity for display per its unit: integers for count units, trailing zeros
+ * trimmed for kg/litre, capped at {@link unitDecimals}. Does NOT append the label.
+ */
+export function formatQty(value: number, unit: UnitLike): string {
+  const u = normalizeUnit(unit);
+  if (isCountUnit(u)) return String(Math.round(value));
+  if (Number.isInteger(value)) return String(value);
+  // Up to N decimals, trailing zeros trimmed.
+  return value.toFixed(unitDecimals(u)).replace(/\.?0+$/, '');
+}

frontend/PWA/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/approutes.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/apierror.ts","./src/api/client.ts","./src/api/endpoints.ts","./src/api/index.ts","./src/api/keys.ts","./src/api/types.ts","./src/api/hooks/index.ts","./src/api/hooks/useanalytics.ts","./src/api/hooks/useauth.ts","./src/api/hooks/usebills.ts","./src/api/hooks/usecustomerledger.ts","./src/api/hooks/usecustomers.ts","./src/api/hooks/usepayments.ts","./src/api/hooks/useprices.ts","./src/api/hooks/useproducts.ts","./src/api/hooks/useroute.ts","./src/api/hooks/usesettings.ts","./src/api/hooks/usesubscriptions.ts","./src/api/hooks/useusers.ts","./src/app/appshell.tsx","./src/app/bottomnav.tsx","./src/app/fab.tsx","./src/app/pagetransition.tsx","./src/app/stickyactionbar.tsx","./src/app/stickyheader.tsx","./src/app/index.ts","./src/app/navconfig.tsx","./src/app/queryclient.ts","./src/auth/authstore.ts","./src/auth/permissions.ts","./src/components/index.ts","./src/components/buttons/appbutton.tsx","./src/components/buttons/iconaction.tsx","./src/components/charts/barchart.tsx","./src/components/charts/chartframe.tsx","./src/components/charts/donutchart.tsx","./src/components/charts/metriccard.tsx","./src/components/charts/trendchart.tsx","./src/components/domain/billcard.tsx","./src/components/domain/billlinestable.tsx","./src/components/domain/customercard.tsx","./src/components/domain/deliveryrow.tsx","./src/components/domain/ledgerlist.tsx","./src/components/domain/paymentrow.tsx","./src/components/domain/productcard.tsx","./src/components/domain/qrviewer.tsx","./src/components/domain/subscriptionrow.tsx","./src/components/domain/whatsappsharebutton.tsx","./src/components/domain/types.ts","./src/components/feedback/emptystate.tsx","./src/components/feedback/errorboundary.tsx","./src/components/feedback/errorstate.tsx","./src/components/feedback/skeleton.tsx","./src/components/feedback/spinner.tsx","./src/components/feedback/toastprovider.tsx","./src/components/fields/datefield.tsx","./src/components/fields/keyboardawarefield.tsx","./src/components/fields/numberfield.tsx","./src/components/fields/phonefield.tsx","./src/components/fields/qtystepper.tsx","./src/components/fields/searchbar.tsx","./src/components/fields/selectfield.tsx","./src/components/fields/statustoggle.tsx","./src/components/fields/switchfield.tsx","./src/components/fields/textfield.tsx","./src/components/format/datelabel.tsx","./src/components/format/money.tsx","./src/components/format/qty.tsx","./src/components/gating/permissiongate.tsx","./src/components/gating/rolegate.tsx","./src/components/lists/pagedlist.tsx","./src/components/lists/usepulltorefresh.ts","./src/components/nav/datestrip.tsx","./src/components/nav/pagetabs.tsx","./src/components/nav/stickytotalbar.tsx","./src/components/overlays/bottomsheet.tsx","./src/components/overlays/confirmdialog.tsx","./src/components/overlays/modal.tsx","./src/components/status/statuschip.tsx","./src/features/admin/settingspage.tsx","./src/features/admin/staffpage.tsx","./src/features/admin/routes.tsx","./src/features/admin/useadminnav.ts","./src/features/admin/components/createemployeesheet.tsx","./src/features/admin/components/holidayssection.tsx","./src/features/admin/components/permissionlabels.ts","./src/features/admin/components/permissionssheet.tsx","./src/features/admin/components/staffrow.tsx","./src/features/analytics/dashboardpage.tsx","./src/features/analytics/daterangesheet.tsx","./src/features/analytics/rangecontrol.tsx","./src/features/analytics/reportspage.tsx","./src/features/analytics/index.ts","./src/features/analytics/routes.tsx","./src/features/analytics/usedaterange.ts","./src/features/auth/routes.tsx","./src/features/auth/pages/loginpage.tsx","./src/features/billing/billdetailpage.tsx","./src/features/billing/billingpage.tsx","./src/features/billing/index.ts","./src/features/billing/routes.tsx","./src/features/billing/components/adjustmentsheet.tsx","./src/features/billing/components/billslisttab.tsx","./src/features/billing/components/generatetab.tsx","./src/features/billing/components/recordpaymentsheet.tsx","./src/features/billing/components/statuschangesheet.tsx","./src/features/billing/hooks/usebillingshell.ts","./src/features/billing/hooks/usegeneratebills.ts","./src/features/billing/hooks/usegeneratepreview.ts","./src/features/catalog/routes.tsx","./src/features/catalog/unit.ts","./src/features/catalog/usecatalognav.ts","./src/features/catalog/components/addpricesheet.tsx","./src/features/catalog/components/pricerow.tsx","./src/features/catalog/components/productformsheet.tsx","./src/features/catalog/components/resolveratepreview.tsx","./src/features/catalog/pages/productpricespage.tsx","./src/features/catalog/pages/productslistpage.tsx","./src/features/customers/routes.tsx","./src/features/customers/components/customerformsheet.tsx","./src/features/customers/components/subscriptionformsheet.tsx","./src/features/customers/hooks/useappnav.ts","./src/features/customers/hooks/usecustomeroutstanding.ts","./src/features/customers/lib/format.ts","./src/features/customers/pages/customerdetailpage.tsx","./src/features/customers/pages/customerslistpage.tsx","./src/features/payments/index.ts","./src/features/payments/routes.tsx","./src/features/payments/components/paymentfilterssheet.tsx","./src/features/payments/components/recordpaymentsheet.tsx","./src/features/payments/hooks/usepaymentsfeature.ts","./src/features/payments/pages/paymentslistpage.tsx","./src/features/route/routes.tsx","./src/features/route/components/recorddeliverysheet.tsx","./src/features/route/components/routesection.tsx","./src/features/route/components/submitconfirmsheet.tsx","./src/features/route/hooks/useonline.ts","./src/features/route/hooks/useroutedraft.ts","./src/features/route/pages/routepage.tsx","./src/features/superadmin/adminspage.tsx","./src/features/superadmin/orgspage.tsx","./src/features/superadmin/index.ts","./src/features/superadmin/routes.tsx","./src/features/superadmin/components/adminrow.tsx","./src/features/superadmin/components/createadminsheet.tsx","./src/features/superadmin/components/orgcard.tsx","./src/features/superadmin/components/orgpickersheet.tsx","./src/features/superadmin/hooks/useorgpicker.ts","./src/features/superadmin/hooks/usesuperadminnav.ts","./src/features/superadmin/lib/seedorg.ts","./src/hooks/usekeyboardaware.ts","./src/hooks/usereducedmotion.ts","./src/lib/env.ts","./src/lib/formerrors.ts","./src/routes/homeplaceholder.tsx","./src/routes/morepage.tsx","./src/routes/preview.tsx","./src/routes/lazypage.tsx","./src/theme/index.ts","./src/theme/motion.ts","./src/theme/palette.ts","./src/theme/theme.d.ts"],"version":"5.9.3"}
+{"root":["./src/approutes.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/apierror.ts","./src/api/client.ts","./src/api/endpoints.ts","./src/api/index.ts","./src/api/keys.ts","./src/api/types.ts","./src/api/hooks/index.ts","./src/api/hooks/useanalytics.ts","./src/api/hooks/useauth.ts","./src/api/hooks/usebills.ts","./src/api/hooks/usecustomerledger.ts","./src/api/hooks/usecustomers.ts","./src/api/hooks/usepayments.ts","./src/api/hooks/useprices.ts","./src/api/hooks/useproducts.ts","./src/api/hooks/useroute.ts","./src/api/hooks/usesettings.ts","./src/api/hooks/usesubscriptions.ts","./src/api/hooks/useusers.ts","./src/app/appshell.tsx","./src/app/bottomnav.tsx","./src/app/fab.tsx","./src/app/pagetransition.tsx","./src/app/stickyactionbar.tsx","./src/app/stickyheader.tsx","./src/app/index.ts","./src/app/navconfig.tsx","./src/app/queryclient.ts","./src/auth/authstore.ts","./src/auth/permissions.ts","./src/components/index.ts","./src/components/buttons/appbutton.tsx","./src/components/buttons/iconaction.tsx","./src/components/charts/barchart.tsx","./src/components/charts/chartframe.tsx","./src/components/charts/donutchart.tsx","./src/components/charts/metriccard.tsx","./src/components/charts/trendchart.tsx","./src/components/domain/billcard.tsx","./src/components/domain/billlinestable.tsx","./src/components/domain/customercard.tsx","./src/components/domain/deliveryrow.tsx","./src/components/domain/ledgerlist.tsx","./src/components/domain/paymentrow.tsx","./src/components/domain/productcard.tsx","./src/components/domain/qrviewer.tsx","./src/components/domain/subscriptionrow.tsx","./src/components/domain/whatsappsharebutton.tsx","./src/components/domain/types.ts","./src/components/feedback/emptystate.tsx","./src/components/feedback/errorboundary.tsx","./src/components/feedback/errorstate.tsx","./src/components/feedback/skeleton.tsx","./src/components/feedback/spinner.tsx","./src/components/feedback/toastprovider.tsx","./src/components/fields/datefield.tsx","./src/components/fields/keyboardawarefield.tsx","./src/components/fields/numberfield.tsx","./src/components/fields/phonefield.tsx","./src/components/fields/qtystepper.tsx","./src/components/fields/searchbar.tsx","./src/components/fields/selectfield.tsx","./src/components/fields/statustoggle.tsx","./src/components/fields/switchfield.tsx","./src/components/fields/textfield.tsx","./src/components/format/datelabel.tsx","./src/components/format/money.tsx","./src/components/format/qty.tsx","./src/components/gating/permissiongate.tsx","./src/components/gating/rolegate.tsx","./src/components/lists/pagedlist.tsx","./src/components/lists/usepulltorefresh.ts","./src/components/nav/datestrip.tsx","./src/components/nav/pagetabs.tsx","./src/components/nav/stickytotalbar.tsx","./src/components/overlays/bottomsheet.tsx","./src/components/overlays/confirmdialog.tsx","./src/components/overlays/modal.tsx","./src/components/status/statuschip.tsx","./src/features/admin/settingspage.tsx","./src/features/admin/staffpage.tsx","./src/features/admin/routes.tsx","./src/features/admin/useadminnav.ts","./src/features/admin/components/createemployeesheet.tsx","./src/features/admin/components/holidayssection.tsx","./src/features/admin/components/permissionlabels.ts","./src/features/admin/components/permissionssheet.tsx","./src/features/admin/components/staffrow.tsx","./src/features/analytics/dashboardpage.tsx","./src/features/analytics/daterangesheet.tsx","./src/features/analytics/rangecontrol.tsx","./src/features/analytics/reportspage.tsx","./src/features/analytics/unitqtychips.tsx","./src/features/analytics/charts.tsx","./src/features/analytics/controls.tsx","./src/features/analytics/index.ts","./src/features/analytics/routes.tsx","./src/features/analytics/unitqty.ts","./src/features/analytics/unittypes.ts","./src/features/analytics/usedaterange.ts","./src/features/auth/routes.tsx","./src/features/auth/pages/loginpage.tsx","./src/features/billing/billdetailpage.tsx","./src/features/billing/billingpage.tsx","./src/features/billing/index.ts","./src/features/billing/routes.tsx","./src/features/billing/components/adjustmentsheet.tsx","./src/features/billing/components/billlistcard.tsx","./src/features/billing/components/billslisttab.tsx","./src/features/billing/components/generatetab.tsx","./src/features/billing/components/recordpaymentsheet.tsx","./src/features/billing/components/statuschangesheet.tsx","./src/features/billing/hooks/usebillingshell.ts","./src/features/billing/hooks/usegeneratebills.ts","./src/features/billing/hooks/usegeneratepreview.ts","./src/features/billing/lib/billlineunit.ts","./src/features/catalog/routes.tsx","./src/features/catalog/unit.ts","./src/features/catalog/usecatalognav.ts","./src/features/catalog/components/addpricesheet.tsx","./src/features/catalog/components/pricerow.tsx","./src/features/catalog/components/productformsheet.tsx","./src/features/catalog/components/resolveratepreview.tsx","./src/features/catalog/pages/productpricespage.tsx","./src/features/catalog/pages/productslistpage.tsx","./src/features/customers/routes.tsx","./src/features/customers/components/consumptionbreakdown.tsx","./src/features/customers/components/customerformsheet.tsx","./src/features/customers/components/subscriptionformsheet.tsx","./src/features/customers/hooks/useappnav.ts","./src/features/customers/hooks/usecustomeroutstanding.ts","./src/features/customers/lib/format.ts","./src/features/customers/lib/units.ts","./src/features/customers/pages/customerdetailpage.tsx","./src/features/customers/pages/customerslistpage.tsx","./src/features/payments/index.ts","./src/features/payments/routes.tsx","./src/features/payments/components/paymentfilterssheet.tsx","./src/features/payments/components/recordpaymentsheet.tsx","./src/features/payments/hooks/usepaymentsfeature.ts","./src/features/payments/pages/paymentslistpage.tsx","./src/features/route/routes.tsx","./src/features/route/components/recorddeliverysheet.tsx","./src/features/route/components/routesection.tsx","./src/features/route/components/submitconfirmsheet.tsx","./src/features/route/hooks/useonline.ts","./src/features/route/hooks/useroutedraft.ts","./src/features/route/pages/routepage.tsx","./src/features/superadmin/adminspage.tsx","./src/features/superadmin/orgspage.tsx","./src/features/superadmin/index.ts","./src/features/superadmin/routes.tsx","./src/features/superadmin/components/adminrow.tsx","./src/features/superadmin/components/createadminsheet.tsx","./src/features/superadmin/components/orgcard.tsx","./src/features/superadmin/components/orgpickersheet.tsx","./src/features/superadmin/hooks/useorgpicker.ts","./src/features/superadmin/hooks/usesuperadminnav.ts","./src/features/superadmin/lib/seedorg.ts","./src/hooks/usekeyboardaware.ts","./src/hooks/usereducedmotion.ts","./src/lib/env.ts","./src/lib/formerrors.ts","./src/lib/unit.ts","./src/routes/homeplaceholder.tsx","./src/routes/morepage.tsx","./src/routes/preview.tsx","./src/routes/lazypage.tsx","./src/theme/index.ts","./src/theme/motion.ts","./src/theme/palette.ts","./src/theme/theme.d.ts"],"version":"5.9.3"}