feat(reports): occupancy curve, hour×dow heatmap, stay histogram, fraud KPIs

The dashboard had generic BI views but nothing parking-shaped. Added:

- Occupancy step-area over the range with the configured capacity as a
  red reference line. occupancyStart folds the ENTIRE prior ledger
  (voided entries excluded, clamped ≥0); each series point carries
  occupancyEnd. Answers "when are we near full".
- Entries heatmap hour × day-of-week (7×24, row 0 = Monday, site tz) as
  a pure CSS-grid intensity map — weekday-vs-weekend at a glance, the
  direct evidence for tariff windows. Replaces the flat hour histogram
  (strictly contains it).
- Stay-duration histogram at tariff-shaped edges (30m/1h/2h/4h/8h/24h/
  tail): where ladder/up-to breakpoints should sit.
- Voids + anomalies KPIs (accented when >0) — the look-closer counters
  the signed chain exists for; peak-occupancy KPI (peak / capacity).
- Revenue bars stacked cash vs card (the drawer's money vs the bank's);
  CSV export gains cash, card, occupancy_end columns.

Internals: localParts caches its Intl formatter per tz (was one new
formatter per ledger row); @parking/db re-exports lt/gt. 5 new tests.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V

apps/web/src/Reports.tsx

@@ -1,8 +1,10 @@
-import { useMemo, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { useQuery } from "@tanstack/react-query";
 import {
+  Area,
+  AreaChart,
   Bar,
   BarChart,
   CartesianGrid,
@@ -12,6 +14,7 @@ import {
   LineChart,
   Pie,
   PieChart,
+  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -37,6 +40,7 @@ const C = {
   border: "#2a2f38",
   text: "#f2f2ee",
   panel: "#14171c",
+  panel2: "#1e222a",
 };
 
 type PresetKey = "today" | "7d" | "30d" | "90d";
@@ -140,27 +144,37 @@ function ReportBody({ data, t }: { data: ReportSummary; t: TFunction }) {
     ...p,
     label: data.bucket === "hour" ? p.bucket.slice(11) + "h" : p.bucket,
     revenue: p.revenueMinor / 100,
+    cash: p.cashMinor / 100,
+    card: p.cardMinor / 100,
   }));
-  const hours = data.entriesByHour.map((entries, h) => ({ hour: `${h}`, entries }));
   const mix = [
     { name: t("reports.mix.ticket"), value: tot.ticketMinor, color: C.amber },
     { name: t("reports.mix.subSales"), value: tot.subscriptionSalesMinor, color: C.cyan },
     { name: t("reports.mix.subWindow"), value: tot.subscriptionWindowMinor, color: C.green },
   ].filter((s) => s.value > 0);
+  const peakOcc = Math.max(data.occupancyStart, ...data.series.map((p) => p.occupancyEnd));
+  // Stay-duration bars: "≤30m … ≤24h" + the open-ended tail.
+  const stay = data.stayHistogram.map((b) => ({
+    label: b.uptoMin == null ? `>24${t("reports.stay.h")}` : b.uptoMin < 60 ? `≤${b.uptoMin}${t("reports.stay.m")}` : `≤${b.uptoMin / 60}${t("reports.stay.h")}`,
+    count: b.count,
+  }));
 
   return (
     <div className="space-y-4">
       {/* KPI cards. */}
-      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 xl:grid-cols-8">
         <Kpi label={t("reports.kpi.entries")} value={String(tot.entries)} accent="green" />
         <Kpi label={t("reports.kpi.exits")} value={String(tot.exits)} accent="red" />
         <Kpi label={t("reports.kpi.revenue")} value={money(tot.revenueMinor)} accent="amber" />
         <Kpi label={t("reports.kpi.payments")} value={String(tot.payments)} accent="cyan" />
         <Kpi label={t("reports.kpi.avgStay")} value={formatMinutes(tot.avgParkedMinutes)} />
         <Kpi
-          label={t("reports.kpi.subscribers")}
-          value={String(data.subscriptions.currentlyValid)}
+          label={t("reports.kpi.peakOcc")}
+          value={data.capacity ? `${peakOcc} / ${data.capacity}` : String(peakOcc)}
         />
+        {/* The "look closer" counters — a spike here is what the signed chain is FOR. */}
+        <Kpi label={t("reports.kpi.voids")} value={String(tot.voids)} accent={tot.voids > 0 ? "amber" : undefined} />
+        <Kpi label={t("reports.kpi.anomalies")} value={String(tot.anomalies)} accent={tot.anomalies > 0 ? "red" : undefined} />
       </div>
 
       {/* Entry / exit over time. */}
@@ -192,8 +206,38 @@ function ReportBody({ data, t }: { data: ReportSummary; t: TFunction }) {
         </ResponsiveContainer>
       </Panel>
 
+      {/* Occupancy over time — THE parking curve: cars inside vs capacity. Step-shaped
+          (occupancy only moves at entries/exits); the red line is the configured cap. */}
+      <Panel title={t("reports.chart.occupancy")}>
+        <ResponsiveContainer width="100%" height={220}>
+          <AreaChart data={series} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
+            <CartesianGrid stroke={C.border} strokeDasharray="3 3" />
+            <XAxis dataKey="label" stroke={C.muted} fontSize={11} />
+            <YAxis stroke={C.muted} fontSize={11} allowDecimals={false} />
+            <Tooltip contentStyle={tooltipStyle} />
+            {data.capacity != null && (
+              <ReferenceLine
+                y={data.capacity}
+                stroke={C.red}
+                strokeDasharray="4 4"
+                label={{ value: t("reports.capacityLine"), fill: C.red, fontSize: 11, position: "insideTopRight" }}
+              />
+            )}
+            <Area
+              type="stepAfter"
+              dataKey="occupancyEnd"
+              name={t("reports.chart.occupancySeries")}
+              stroke={C.cyan}
+              fill={C.cyan}
+              fillOpacity={0.15}
+              strokeWidth={2}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </Panel>
+
       <div className="grid gap-4 lg:grid-cols-2">
-        {/* Revenue per bucket. */}
+        {/* Revenue per bucket, stacked by tender — the drawer's cash vs the bank's card. */}
         <Panel title={t("reports.chart.revenue", { currency: cur })}>
           <ResponsiveContainer width="100%" height={240}>
             <BarChart data={series} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
@@ -201,7 +245,9 @@ function ReportBody({ data, t }: { data: ReportSummary; t: TFunction }) {
               <XAxis dataKey="label" stroke={C.muted} fontSize={11} />
               <YAxis stroke={C.muted} fontSize={11} />
               <Tooltip contentStyle={tooltipStyle} formatter={(v) => money(Math.round(Number(v) * 100))} />
-              <Bar dataKey="revenue" name={t("reports.kpi.revenue")} fill={C.amber} />
+              <Legend wrapperStyle={{ fontSize: 12 }} />
+              <Bar dataKey="cash" stackId="tender" name={t("reports.row.cash")} fill={C.amber} />
+              <Bar dataKey="card" stackId="tender" name={t("reports.row.card")} fill={C.cyan} />
             </BarChart>
           </ResponsiveContainer>
         </Panel>
@@ -232,15 +278,15 @@ function ReportBody({ data, t }: { data: ReportSummary; t: TFunction }) {
           )}
         </Panel>
 
-        {/* Peak hours (entries by hour-of-day). */}
-        <Panel title={t("reports.chart.peakHours")}>
+        {/* Stay-duration histogram — where the ladder/up-to breakpoints should sit. */}
+        <Panel title={t("reports.chart.stay")}>
           <ResponsiveContainer width="100%" height={240}>
-            <BarChart data={hours} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
+            <BarChart data={stay} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
               <CartesianGrid stroke={C.border} strokeDasharray="3 3" />
-              <XAxis dataKey="hour" stroke={C.muted} fontSize={11} interval={1} />
+              <XAxis dataKey="label" stroke={C.muted} fontSize={11} />
               <YAxis stroke={C.muted} fontSize={11} allowDecimals={false} />
               <Tooltip contentStyle={tooltipStyle} />
-              <Bar dataKey="entries" name={t("reports.kpi.entries")} fill={C.cyan} />
+              <Bar dataKey="count" name={t("reports.row.closed")} fill={C.green} />
             </BarChart>
           </ResponsiveContainer>
         </Panel>
@@ -262,6 +308,12 @@ function ReportBody({ data, t }: { data: ReportSummary; t: TFunction }) {
         </Panel>
       </div>
 
+      {/* Entries heatmap: hour × day-of-week. Weekday-vs-weekend patterns at a glance —
+          the direct input for tariff windows (night rates, weekend cards, early bird). */}
+      <Panel title={t("reports.chart.heatmap")}>
+        <Heatmap matrix={data.entriesByDowHour} dows={t("reports.dowShort", { returnObjects: true }) as string[]} />
+      </Panel>
+
       <p className="text-[0.6875rem] text-term-muted">
         {t("reports.footnote", { tz: data.tz })}
       </p>
@@ -269,6 +321,37 @@ function ReportBody({ data, t }: { data: ReportSummary; t: TFunction }) {
   );
 }
 
+/** Hour-of-day × day-of-week entries heatmap: pure CSS grid, amber intensity scaled to
+ *  the busiest cell. Row 0 = Monday (server contract). Cell tooltip = exact count. */
+function Heatmap({ matrix, dows }: { matrix: number[][]; dows: string[] }) {
+  const max = Math.max(1, ...matrix.flat());
+  return (
+    <div className="overflow-x-auto">
+      <div className="grid min-w-[560px] grid-cols-[max-content_repeat(24,1fr)] gap-px text-[0.625rem]">
+        <span />
+        {Array.from({ length: 24 }, (_, h) => (
+          <span key={h} className="pb-0.5 text-center text-term-muted">
+            {h % 3 === 0 ? h : ""}
+          </span>
+        ))}
+        {matrix.map((row, d) => (
+          <Fragment key={d}>
+            <span className="pr-1.5 leading-4 text-term-muted">{dows[d]}</span>
+            {row.map((v, h) => (
+              <span
+                key={h}
+                title={`${dows[d]} ${String(h).padStart(2, "0")}:00 — ${v}`}
+                className="h-4 rounded-[1px]"
+                style={{ background: v === 0 ? C.panel2 : C.amber, opacity: v === 0 ? 1 : 0.25 + 0.75 * (v / max) }}
+              />
+            ))}
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 const tooltipStyle = {
   background: C.panel,
   border: `1px solid ${C.border}`,

apps/web/src/api.ts

@@ -483,7 +483,11 @@ export interface ReportSeriesPoint {
   entries: number;
   exits: number;
   revenueMinor: number;
+  cashMinor: number;
+  cardMinor: number;
   payments: number;
+  /** Cars inside at the END of the bucket. */
+  occupancyEnd: number;
 }
 
 export interface ReportTotals {
@@ -500,6 +504,8 @@ export interface ReportTotals {
   totalParkedMinutes: number;
   avgParkedMinutes: number;
   medianParkedMinutes: number;
+  voids: number;
+  anomalies: number;
 }
 
 export interface ReportSubscriptionStats {
@@ -519,6 +525,12 @@ export interface ReportSummary {
   totals: ReportTotals;
   series: ReportSeriesPoint[];
   entriesByHour: number[];
+  /** 7×24, row 0 = Monday — entries heatmap (weekday-vs-weekend patterns). */
+  entriesByDowHour: number[][];
+  /** Stay-duration histogram; last bucket has uptoMin null (>24h tail). */
+  stayHistogram: { uptoMin: number | null; count: number }[];
+  occupancyStart: number;
+  capacity: number | null;
   subscriptions: ReportSubscriptionStats;
 }
 

apps/web/src/lib/i18n/en.ts

@@ -866,14 +866,23 @@ export const en: Catalog = {
       payments: "Payments",
       avgStay: "Avg stay",
       subscribers: "Subscribers",
+      peakOcc: "Peak occupancy",
+      voids: "Voided tickets",
+      anomalies: "Anomalies",
     },
     chart: {
       flow: "Entries & exits over time",
+      occupancy: "Occupancy — cars inside",
+      occupancySeries: "Cars inside",
       revenue: "Revenue ({{currency}})",
       mix: "Revenue mix",
-      peakHours: "Entries by hour of day",
+      stay: "Stay duration (closed sessions)",
+      heatmap: "Entries heatmap — hour × day",
       breakdown: "Breakdown",
     },
+    capacityLine: "capacity",
+    stay: { m: "m", h: "h" },
+    dowShort: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
     mix: { ticket: "Transient", subSales: "Subscriptions", subWindow: "Out-of-window" },
     row: {
       cash: "Cash",

apps/web/src/lib/i18n/sq.ts

@@ -881,14 +881,23 @@ export const sq = {
       payments: "Pagesa",
       avgStay: "Qëndrim mes.",
       subscribers: "Abonentë",
+      peakOcc: "Zënia maksimale",
+      voids: "Bileta të anuluara",
+      anomalies: "Anomali",
     },
     chart: {
       flow: "Hyrjet & daljet me kalimin e kohës",
+      occupancy: "Zënia — makina brenda",
+      occupancySeries: "Makina brenda",
       revenue: "Të ardhurat ({{currency}})",
       mix: "Përbërja e të ardhurave",
-      peakHours: "Hyrjet sipas orës së ditës",
+      stay: "Kohëzgjatja e qëndrimit (sesione të mbyllura)",
+      heatmap: "Harta e hyrjeve — orë × ditë",
       breakdown: "Ndarja",
     },
+    capacityLine: "kapaciteti",
+    stay: { m: "m", h: "o" },
+    dowShort: ["Hën", "Mar", "Mër", "Enj", "Pre", "Sht", "Die"],
     mix: { ticket: "Tranzit", subSales: "Abonime", subWindow: "Jashtë orarit" },
     row: {
       cash: "Para në dorë",