chore: initial commit — UdyamLinc UI, phases A-E

Vite/React 19 console and enterprise PWA. Officer console screens, offline
ledger and sync, data feeds and trip-wire rules screens with freshness chip.

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

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.git
+dist
+# never let a local API override leak into the deployed build
+*.local
+.env.local

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}

Dockerfile

@@ -0,0 +1,15 @@
+# ── build stage: compile the Vite bundle inside Docker ──
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+# VITE_UDYAM_API_BASE_URL is unset here, so the compiled-in default
+# (http://udyamlinc-backend.lincpay/api/v1/udyam) is baked into the bundle.
+RUN npm run build
+
+# ── serve stage: nginx serving the static SPA on 5173 ──
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 5173

index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/udyamlinc-tile.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="description" content="UdyamLinc — predictive cash-flow intelligence and early warning for rural microenterprises. LincFusion · LincPay Solutions" />
+    <meta name="theme-color" content="#0b5d3b" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <title>UdyamLinc · Early Warning Console</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,26 @@
+server {
+    listen 5173;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript image/svg+xml;
+    gzip_min_length 1024;
+
+    # Immutable fingerprinted assets
+    location /assets/ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # The service worker must never be cached, or the PWA can never update
+    location = /sw.js {
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+    }
+
+    # SPA fallback — React Router owns the paths
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "udyamlinc-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.101.2",
+    "axios": "^1.18.1",
+    "chart.js": "^4.5.1",
+    "react": "^19.2.7",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.2",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "oxlint": "^1.71.0",
+    "tailwindcss": "^4.3.2",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.1"
+  }
+}

public/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+  "name": "UdyamLinc — उद्यम हिसाब",
+  "short_name": "UdyamLinc",
+  "description": "Cash-flow forecast and early warning for microenterprises. Works offline.",
+  "start_url": "/app",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#06301f",
+  "theme_color": "#0b5d3b",
+  "lang": "hi",
+  "icons": [
+    { "src": "/udyamlinc-tile.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }
+  ]
+}

public/sw.js

@@ -0,0 +1,54 @@
+/*
+ * UdyamLinc service worker — app-shell precache + stale-while-revalidate.
+ *
+ * Scope of the offline promise (deck feature 7): the enterprise PWA must open,
+ * render and accept ledger entries with zero connectivity. Ledger writes are
+ * queued in localStorage by the app itself (see lib/ledgerStore.ts); this worker
+ * only guarantees the shell and its assets are reachable.
+ */
+const CACHE = 'udyamlinc-v1'
+const SHELL = ['/', '/app', '/index.html', '/manifest.webmanifest', '/udyamlinc-tile.svg']
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()))
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim()),
+  )
+})
+
+self.addEventListener('fetch', (event) => {
+  const req = event.request
+  if (req.method !== 'GET') return
+
+  const url = new URL(req.url)
+  // API calls are never served stale — the app falls back to its local store instead.
+  if (url.pathname.includes('/api/')) return
+
+  // Navigations: network first, fall back to the cached shell when offline.
+  if (req.mode === 'navigate') {
+    event.respondWith(fetch(req).catch(() => caches.match('/index.html')))
+    return
+  }
+
+  // Assets: cache first, refresh in the background.
+  event.respondWith(
+    caches.match(req).then((hit) => {
+      const network = fetch(req)
+        .then((res) => {
+          if (res.ok) {
+            const copy = res.clone()
+            caches.open(CACHE).then((c) => c.put(req, copy))
+          }
+          return res
+        })
+        .catch(() => hit)
+      return hit || network
+    }),
+  )
+})

public/udyamlinc-tile.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="ul" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#1e7a46"/>
+      <stop offset="100%" stop-color="#0b5d3b"/>
+    </linearGradient>
+  </defs>
+  <path d="M32 3 58 17.5v29L32 61 6 46.5v-29z" fill="url(#ul)"/>
+  <path d="M34.5 15 20 36h10l-2.5 13L44 27H33.5z" fill="#f2b544"/>
+</svg>

src/App.tsx

@@ -0,0 +1,104 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter, Navigate, Route, Routes, useLocation } from 'react-router-dom'
+import { LoginPage } from './pages/LoginPage'
+import { enterpriseSession, officerSession } from './lib/api'
+
+// Field officer console
+import { OfficerShell } from './features/officer/OfficerShell'
+import { OfficerDashboard } from './features/officer/OfficerDashboard'
+import { EnterprisesPage } from './features/officer/EnterprisesPage'
+import { EnterpriseDetailPage } from './features/officer/EnterpriseDetailPage'
+import { AlertsPage } from './features/officer/AlertsPage'
+import { ForecastsPage } from './features/officer/ForecastsPage'
+import { VisitsPage } from './features/officer/VisitsPage'
+import { RulesPage } from './features/officer/RulesPage'
+import { DataFeedsPage } from './features/officer/DataFeedsPage'
+import { ReportsPage } from './features/officer/ReportsPage'
+import { SettingsPage } from './features/officer/SettingsPage'
+
+// Enterprise PWA
+import { EnterpriseShell } from './features/enterprise/EnterpriseShell'
+import { AppHomePage } from './features/enterprise/AppHomePage'
+import { AppLedgerPage } from './features/enterprise/AppLedgerPage'
+import { AppAlertsPage } from './features/enterprise/AppAlertsPage'
+import { AppProfilePage } from './features/enterprise/AppProfilePage'
+
+/**
+ * Queries fall back to demo data per page, so a failed request should not spin
+ * or spam retries — one attempt, generous staleness, no refetch on focus.
+ */
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: 0, refetchOnWindowFocus: false, staleTime: 60_000 },
+  },
+})
+
+function RequireOfficer({ children }: { children: React.ReactNode }) {
+  const location = useLocation()
+  if (!officerSession()?.token) return <Navigate to="/login" replace state={{ from: location }} />
+  return children
+}
+
+function RequireEnterprise({ children }: { children: React.ReactNode }) {
+  const location = useLocation()
+  if (!enterpriseSession()?.token) return <Navigate to="/login" replace state={{ from: location }} />
+  return children
+}
+
+/** Land on whichever surface already has a session. */
+function RootRedirect() {
+  if (officerSession()?.token) return <Navigate to="/officer" replace />
+  if (enterpriseSession()?.token) return <Navigate to="/app" replace />
+  return <Navigate to="/login" replace />
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<RootRedirect />} />
+          <Route path="/login" element={<LoginPage />} />
+
+          {/* Field officer console — portfolio, risk detail and recommended action */}
+          <Route
+            path="/officer"
+            element={
+              <RequireOfficer>
+                <OfficerShell />
+              </RequireOfficer>
+            }
+          >
+            <Route index element={<OfficerDashboard />} />
+            <Route path="enterprises" element={<EnterprisesPage />} />
+            <Route path="enterprises/:enterpriseId" element={<EnterpriseDetailPage />} />
+            <Route path="alerts" element={<AlertsPage />} />
+            <Route path="forecasts" element={<ForecastsPage />} />
+            <Route path="visits" element={<VisitsPage />} />
+            <Route path="rules" element={<RulesPage />} />
+            <Route path="feeds" element={<DataFeedsPage />} />
+            <Route path="reports" element={<ReportsPage />} />
+            <Route path="settings" element={<SettingsPage />} />
+          </Route>
+
+          {/* Enterprise PWA — offline, Hindi-first */}
+          <Route
+            path="/app"
+            element={
+              <RequireEnterprise>
+                <EnterpriseShell />
+              </RequireEnterprise>
+            }
+          >
+            <Route index element={<AppHomePage />} />
+            <Route path="ledger" element={<AppLedgerPage />} />
+            <Route path="alerts" element={<AppAlertsPage />} />
+            <Route path="profile" element={<AppProfilePage />} />
+          </Route>
+
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}

src/components/charts/BandMigrationBar.tsx

@@ -0,0 +1,41 @@
+import { Bar } from 'react-chartjs-2'
+import type { ChartOptions } from 'chart.js'
+import { CHART_COLOURS } from './chartSetup'
+import './chartSetup'
+
+export interface MigrationRow {
+  month: string
+  red: number
+  watch: number
+  standard: number
+}
+
+/** Stacked band counts month over month — how the book migrated between watchlist categories. */
+export function BandMigrationBar({ rows, height = 240 }: { rows: MigrationRow[]; height?: number }) {
+  const data = {
+    labels: rows.map((r) => r.month),
+    datasets: [
+      { label: 'High risk', data: rows.map((r) => r.red), backgroundColor: CHART_COLOURS.red, borderRadius: 3 },
+      { label: 'Watch', data: rows.map((r) => r.watch), backgroundColor: CHART_COLOURS.amber, borderRadius: 3 },
+      { label: 'Standard', data: rows.map((r) => r.standard), backgroundColor: CHART_COLOURS.green, borderRadius: 3 },
+    ],
+  }
+
+  const options: ChartOptions<'bar'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { position: 'bottom', labels: { boxWidth: 10, boxHeight: 10, padding: 14, usePointStyle: true } },
+    },
+    scales: {
+      x: { stacked: true, grid: { display: false } },
+      y: { stacked: true, grid: { color: CHART_COLOURS.grid } },
+    },
+  }
+
+  return (
+    <div style={{ height }}>
+      <Bar data={data} options={options} />
+    </div>
+  )
+}

src/components/charts/ForecastFan.tsx

@@ -0,0 +1,87 @@
+import { Line } from 'react-chartjs-2'
+import type { ChartOptions } from 'chart.js'
+import type { ForecastPoint } from '../../lib/api'
+import { CHART_COLOURS } from './chartSetup'
+import './chartSetup'
+import { inr } from '../../lib/demo/seed'
+
+/**
+ * The P10 / P50 / P90 quantile fan against the scheduled-obligation line.
+ * Where the P10 band dips under the dashed obligation line, the enterprise
+ * escalates — that crossing is the whole product in one picture.
+ */
+export function ForecastFan({ points, height = 240 }: { points: ForecastPoint[]; height?: number }) {
+  const labels = points.map((p) => p.label)
+
+  const data = {
+    labels,
+    datasets: [
+      // P90 drawn first, then P10 filled back to it — that pair renders the band.
+      {
+        label: 'P90 (upside)',
+        data: points.map((p) => p.p90),
+        borderColor: 'rgba(63,184,113,0.45)',
+        backgroundColor: 'rgba(63,184,113,0.12)',
+        borderWidth: 1,
+        pointRadius: 0,
+        fill: false,
+        tension: 0.35,
+      },
+      {
+        label: 'P10 (downside)',
+        data: points.map((p) => p.p10),
+        borderColor: 'rgba(192,57,43,0.55)',
+        backgroundColor: 'rgba(63,184,113,0.14)',
+        borderWidth: 1,
+        pointRadius: 0,
+        fill: '-1',
+        tension: 0.35,
+      },
+      {
+        label: 'P50 (expected)',
+        data: points.map((p) => p.p50),
+        borderColor: CHART_COLOURS.forest,
+        backgroundColor: CHART_COLOURS.forest,
+        borderWidth: 2.4,
+        pointRadius: 3,
+        pointHoverRadius: 5,
+        fill: false,
+        tension: 0.35,
+      },
+      {
+        label: 'Obligation due',
+        data: points.map((p) => p.obligation),
+        borderColor: CHART_COLOURS.amber,
+        borderWidth: 1.8,
+        borderDash: [5, 4],
+        pointRadius: 0,
+        fill: false,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: { mode: 'index', intersect: false },
+    plugins: {
+      legend: { position: 'bottom', labels: { boxWidth: 10, boxHeight: 10, padding: 14, usePointStyle: true } },
+      tooltip: {
+        callbacks: { label: (c) => `${c.dataset.label}: ${inr(c.parsed.y ?? 0)}` },
+      },
+    },
+    scales: {
+      x: { grid: { display: false } },
+      y: {
+        grid: { color: CHART_COLOURS.grid },
+        ticks: { callback: (v) => `₹${Math.round(Number(v) / 1000)}k` },
+      },
+    },
+  }
+
+  return (
+    <div style={{ height }}>
+      <Line data={data} options={options} />
+    </div>
+  )
+}

src/components/charts/ModelComparisonBar.tsx

@@ -0,0 +1,38 @@
+import { Bar } from 'react-chartjs-2'
+import type { ChartOptions } from 'chart.js'
+import { BENCHMARKS } from '../../lib/demo/ops'
+import { CHART_COLOURS } from './chartSetup'
+import './chartSetup'
+
+/** Slide-10 benchmark: 90-day stress detection AUC-ROC against two baselines. */
+export function ModelComparisonBar({ height = 190 }: { height?: number }) {
+  const data = {
+    labels: ['UdyamLinc — full signal set', 'Repayment history only', 'Bureau-score baseline'],
+    datasets: [
+      {
+        label: 'AUC-ROC',
+        data: [BENCHMARKS.aucRoc, BENCHMARKS.aucRepaymentOnly, BENCHMARKS.aucBureau],
+        backgroundColor: [CHART_COLOURS.forest, CHART_COLOURS.greenHi, '#94a3b8'],
+        borderRadius: 4,
+        barThickness: 22,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'bar'> = {
+    indexAxis: 'y',
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { display: false } },
+    scales: {
+      x: { min: 0, max: 1, grid: { color: CHART_COLOURS.grid }, ticks: { stepSize: 0.1 } },
+      y: { grid: { display: false }, ticks: { font: { size: 10.5 } } },
+    },
+  }
+
+  return (
+    <div style={{ height }}>
+      <Bar data={data} options={options} />
+    </div>
+  )
+}

src/components/charts/SubScoreRadar.tsx

@@ -0,0 +1,47 @@
+import { Radar } from 'react-chartjs-2'
+import type { ChartOptions } from 'chart.js'
+import type { Band, SubScores } from '../../lib/api'
+import { DRIVER_META } from '../../lib/demo/enterprises'
+import './chartSetup'
+
+/** The five risk families as a radar — shows the *shape* of the stress, not just its size. */
+export function SubScoreRadar({ sub, band, height = 230 }: { sub: SubScores; band: Band; height?: number }) {
+  const colour = band === 'RED' ? '#c0392b' : band === 'WATCH' ? '#e8a020' : '#1e7a46'
+
+  const data = {
+    labels: DRIVER_META.map((d) => d.label),
+    datasets: [
+      {
+        label: 'Sub-score',
+        data: DRIVER_META.map((d) => sub[d.key]),
+        borderColor: colour,
+        backgroundColor: `${colour}22`,
+        borderWidth: 2,
+        pointBackgroundColor: colour,
+        pointRadius: 3,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'radar'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { display: false } },
+    scales: {
+      r: {
+        beginAtZero: true,
+        suggestedMax: 30,
+        angleLines: { color: '#e8eeea' },
+        grid: { color: '#e8eeea' },
+        pointLabels: { font: { size: 10 } },
+        ticks: { display: false },
+      },
+    },
+  }
+
+  return (
+    <div style={{ height }}>
+      <Radar data={data} options={options} />
+    </div>
+  )
+}

src/components/charts/chartSetup.ts

@@ -0,0 +1,41 @@
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  RadialLinearScale,
+  Tooltip,
+} from 'chart.js'
+
+/*
+ * chart.js elements are registered exactly once, here. Every chart component
+ * imports this module for its side effect, so no page re-registers.
+ */
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  RadialLinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Filler,
+  Tooltip,
+  Legend,
+)
+
+ChartJS.defaults.font.family = '"Segoe UI", Roboto, -apple-system, Arial, sans-serif'
+ChartJS.defaults.font.size = 11
+ChartJS.defaults.color = '#64748b'
+
+export const CHART_COLOURS = {
+  forest: '#0b5d3b',
+  green: '#1e7a46',
+  greenHi: '#3fb871',
+  amber: '#e8a020',
+  red: '#c0392b',
+  grid: '#e8eeea',
+}

src/components/ui/bits.tsx

@@ -0,0 +1,310 @@
+import { NavLink } from 'react-router-dom'
+import type { Band } from '../../lib/api'
+import { BANDS } from '../../lib/demo/enterprises'
+
+/* ------------------------------------------------------------------ */
+/* Shared widgets. Structure follows BharatLinc's components/ui/bits;   */
+/* the palette is UdyamLinc forest/amber, and the risk primitives at    */
+/* the bottom (RiskBadge / ScoreDial / Sparkline / DriverBar) are new.  */
+/* ------------------------------------------------------------------ */
+
+export function StatusPill({ status }: { status: string }) {
+  const s = status.toUpperCase()
+  const cls =
+    s.includes('DONE') || s.includes('CLOSED') || s.includes('SYNCED') || s.includes('ACTIVE')
+      ? 'pill-ok'
+      : s.includes('OVERDUE') || s.includes('ESCALATED') || s.includes('OPEN') || s.includes('BREACH')
+        ? 'pill-bad'
+        : s.includes('PLANNED') || s.includes('PENDING') || s.includes('SNOOZED')
+          ? 'pill-pend'
+          : s.includes('ACK')
+            ? 'pill-info'
+            : 'pill-mut'
+  return <span className={`pill ${cls}`}>{status.replace(/_/g, ' ')}</span>
+}
+
+export function Card({
+  title,
+  badge,
+  actions,
+  children,
+  className = '',
+}: {
+  title?: string
+  badge?: string
+  actions?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={`bg-white border border-slate-200 rounded-[11px] shadow-[0_1px_3px_rgba(0,0,0,0.05)] overflow-hidden ${className}`}>
+      {title && (
+        <div className="px-3.5 py-2.5 border-b border-slate-200 flex items-center gap-2">
+          <h3 className="text-[12.5px] font-bold text-forest">{title}</h3>
+          {badge && <span className="font-mono text-[9.5px] bg-green-soft text-forest px-1.5 py-0.5 rounded-lg">{badge}</span>}
+          {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function Modal({
+  title,
+  onClose,
+  children,
+  wide,
+  xwide,
+}: {
+  title: string
+  onClose: () => void
+  children: React.ReactNode
+  wide?: boolean
+  xwide?: boolean
+}) {
+  return (
+    <div className="fixed inset-0 z-[100] grid place-items-center bg-[rgba(6,48,31,0.55)] backdrop-blur-[2px] p-4" onClick={onClose}>
+      <div
+        className={`bg-white rounded-[14px] shadow-2xl w-full ${xwide ? 'max-w-[1040px]' : wide ? 'max-w-[720px]' : 'max-w-[460px]'} max-h-[92vh] overflow-y-auto`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="px-5 py-3.5 bg-gradient-to-br from-forest to-forest-mid text-white flex items-center justify-between rounded-t-[14px]">
+          <h3 className="text-[13.5px] font-bold">{title}</h3>
+          <button onClick={onClose} aria-label="Close" className="w-6 h-6 rounded-full bg-white/15 hover:bg-white/25 grid place-items-center text-[11px]">
+            ✕
+          </button>
+        </div>
+        <div className="p-5">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export function SubNav({ items }: { items: { label: string; to: string; end?: boolean }[] }) {
+  return (
+    <div className="flex gap-1 border-b border-slate-200 mb-4 overflow-x-auto">
+      {items.map((i) => (
+        <NavLink
+          key={i.to}
+          to={i.to}
+          end={i.end}
+          className={({ isActive }) =>
+            [
+              'px-3.5 py-2 text-[11.5px] font-semibold whitespace-nowrap border-b-2 -mb-px',
+              isActive ? 'text-forest border-amber' : 'text-slate-500 border-transparent hover:text-forest',
+            ].join(' ')
+          }
+        >
+          {i.label}
+        </NavLink>
+      ))}
+    </div>
+  )
+}
+
+export function Field({
+  label,
+  hint,
+  children,
+  className = '',
+}: {
+  label: string
+  hint?: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <label className={`block ${className}`}>
+      <span className="block font-mono text-[9.5px] tracking-[0.1em] uppercase text-slate-500 mb-1">{label}</span>
+      {children}
+      {hint && <span className="block text-[10.5px] text-slate-400 mt-1">{hint}</span>}
+    </label>
+  )
+}
+
+export const inputCls =
+  'w-full border border-slate-300 rounded-md px-2.5 py-1.5 text-[12.5px] outline-none focus:border-green focus:ring-2 focus:ring-green/15 bg-white'
+
+export function PrimaryBtn({
+  children,
+  className = '',
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...rest}
+      className={`bg-forest hover:bg-forest-mid disabled:opacity-50 disabled:cursor-not-allowed text-white text-[12px] font-semibold px-3.5 py-1.5 rounded-md transition-colors ${className}`}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function GhostBtn({
+  children,
+  className = '',
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...rest}
+      className={`border border-slate-300 hover:bg-slate-50 disabled:opacity-50 text-slate-700 text-[12px] font-semibold px-3.5 py-1.5 rounded-md transition-colors ${className}`}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function ActionChip({
+  children,
+  active,
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
+  return (
+    <button
+      {...rest}
+      className={[
+        'text-[11px] font-semibold px-2.5 py-1 rounded-full border transition-colors',
+        active ? 'bg-forest text-white border-forest' : 'bg-white text-slate-600 border-slate-300 hover:border-green',
+      ].join(' ')}
+    >
+      {children}
+    </button>
+  )
+}
+
+/** Empty/loading state used wherever a list can come back with nothing. */
+export function Empty({ text }: { text: string }) {
+  return <div className="py-10 text-center text-[12px] text-slate-400">{text}</div>
+}
+
+// ── UdyamLinc risk primitives ───────────────────────────────────
+
+export function RiskBadge({ band, hi = false }: { band: Band; hi?: boolean }) {
+  const b = BANDS[band]
+  return <span className={`pill ${b.cls}`}>{hi ? b.labelHi : b.label}</span>
+}
+
+/**
+ * The 0–100 Composite Stress Score as an arc — the dial on the deck's risk
+ * detail panel. Red sweeps clockwise in proportion to the score.
+ */
+export function ScoreDial({ score, band, size = 96 }: { score: number; band: Band; size?: number }) {
+  const stroke = size * 0.11
+  const r = (size - stroke) / 2
+  const circ = 2 * Math.PI * r
+  const colour = band === 'RED' ? '#c0392b' : band === 'WATCH' ? '#e8a020' : '#1e7a46'
+  return (
+    <div className="relative grid place-items-center" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="-rotate-90" role="img" aria-label={`Stress score ${score} of 100`}>
+        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#eef2f0" strokeWidth={stroke} />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          fill="none"
+          stroke={colour}
+          strokeWidth={stroke}
+          strokeLinecap="round"
+          strokeDasharray={`${(circ * score) / 100} ${circ}`}
+        />
+      </svg>
+      <div className="absolute text-center leading-none">
+        <div className="font-bold" style={{ color: colour, fontSize: size * 0.3 }}>
+          {score}
+        </div>
+        <div className="font-mono uppercase tracking-[0.1em] text-slate-400" style={{ fontSize: size * 0.085 }}>
+          {BANDS[band].label}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** Six-month score trend as an inline SVG — one per table row, so no chart.js. */
+export function Sparkline({
+  values,
+  band,
+  width = 84,
+  height = 26,
+}: {
+  values: number[]
+  band: Band
+  width?: number
+  height?: number
+}) {
+  if (!values.length) return null
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  const span = Math.max(1, max - min)
+  const colour = band === 'RED' ? '#c0392b' : band === 'WATCH' ? '#e8a020' : '#1e7a46'
+  const pts = values
+    .map((v, i) => {
+      const x = (i / (values.length - 1)) * (width - 4) + 2
+      const y = height - 3 - ((v - min) / span) * (height - 6)
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+  const last = values[values.length - 1]
+  const lastX = width - 2
+  const lastY = height - 3 - ((last - min) / span) * (height - 6)
+  return (
+    <svg width={width} height={height} role="img" aria-label="6-month score trend">
+      <polyline points={pts} fill="none" stroke={colour} strokeWidth="1.6" strokeLinejoin="round" />
+      <circle cx={lastX} cy={lastY} r="2.2" fill={colour} />
+    </svg>
+  )
+}
+
+/** One SHAP driver as a labelled bar — the "Top drivers" list on the deck. */
+export function DriverBar({ label, weight, max = 30 }: { label: string; weight: number; max?: number }) {
+  const pct = Math.min(100, (weight / max) * 100)
+  const colour = weight >= 20 ? 'bg-risk-red' : weight >= 12 ? 'bg-amber' : 'bg-green'
+  return (
+    <div className="flex items-center gap-2.5">
+      <span className="text-[11px] text-slate-600 w-[120px] shrink-0">{label}</span>
+      <span className="flex-1 h-[7px] rounded-full bg-slate-100 overflow-hidden">
+        <span className={`block h-full rounded-full ${colour}`} style={{ width: `${pct}%` }} />
+      </span>
+      <span className="font-mono text-[10.5px] text-slate-500 w-6 text-right">{weight}</span>
+    </div>
+  )
+}
+
+/** KPI tile used across the console — value, caption and a coloured corner dot. */
+export function KpiTile({
+  label,
+  value,
+  delta,
+  tone = 'neutral',
+}: {
+  label: string
+  value: string | number
+  delta?: string
+  tone?: 'neutral' | 'red' | 'watch' | 'good'
+}) {
+  const dot =
+    tone === 'red' ? 'bg-risk-red' : tone === 'watch' ? 'bg-amber' : tone === 'good' ? 'bg-green' : 'bg-forest'
+  const deltaCls = tone === 'red' ? 'text-risk-red' : tone === 'watch' ? 'text-amber' : 'text-slate-400'
+  return (
+    <div className="ul-card px-3.5 py-3 flex-1 min-w-[150px]">
+      <div className="flex items-start justify-between">
+        <span className="text-[10.5px] text-slate-500">{label}</span>
+        <span className={`w-2.5 h-2.5 rounded-[3px] ${dot}`} />
+      </div>
+      <div className="text-[26px] font-bold text-forest leading-tight mt-1">{value}</div>
+      {delta && <div className={`text-[10.5px] ${deltaCls}`}>{delta}</div>}
+    </div>
+  )
+}
+
+/** UdyamLinc mark — hexagon + bolt, matching the deck's logo. */
+export function UdyamMark({ size = 26, onDark = false }: { size?: number; onDark?: boolean }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 64 64" aria-label="UdyamLinc" role="img">
+      <path d="M32 3 58 17.5v29L32 61 6 46.5v-29z" fill={onDark ? '#3fb871' : '#0b5d3b'} />
+      <path d="M34.5 15 20 36h10l-2.5 13L44 27H33.5z" fill={onDark ? '#f2b544' : '#e8a020'} />
+    </svg>
+  )
+}

src/features/enterprise/AppAlertsPage.tsx

@@ -0,0 +1,97 @@
+import { enterpriseSession } from '../../lib/api'
+import { Empty } from '../../components/ui/bits'
+import { findEnterprise, reasonCodesFor, tripWiresFor } from '../../lib/demo/enterprises'
+import { alertForEnterprise } from '../../lib/demo/ops'
+import { inr, monthRef } from '../../lib/demo/seed'
+import { useLang } from '../../lib/i18n'
+
+/**
+ * Alert history for the owner. Same reason codes the officer sees, but only
+ * ever as plain sentences — no scores, no model vocabulary, nothing that reads
+ * like a credit rating handed to the borrower.
+ */
+export function AppAlertsPage() {
+  const session = enterpriseSession()
+  const { lang, t } = useLang('hi')
+  const hi = lang === 'hi'
+
+  const e = session ? findEnterprise(session.enterpriseId) : undefined
+  if (!session || !e) return <Empty text="—" />
+
+  const alert = alertForEnterprise(e.enterpriseId)
+  const reasons = reasonCodesFor(e)
+  const fired = tripWiresFor(e).filter((w) => w.fired)
+
+  if (!alert) {
+    return (
+      <div className="bg-green-soft border border-green/20 rounded-xl px-4 py-6 text-center">
+        <div className="w-12 h-12 rounded-full bg-white text-green grid place-items-center text-[22px] mx-auto mb-2.5">
+          ✓
+        </div>
+        <div className="text-[14px] font-bold text-forest">{t('alerts.none')}</div>
+        <p className="text-[12px] text-slate-600 mt-1">{t('home.allGoodDetail')}</p>
+      </div>
+    )
+  }
+
+  const breachRef = alert.breachMonth ? monthRef(new Date(`${alert.breachMonth}-01T00:00:00`)) : null
+
+  return (
+    <div className="space-y-3">
+      <section className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+        <div className="bg-risk-red text-white px-4 py-3">
+          <div className="text-[13.5px] font-bold">{hi ? alert.titleHi : alert.title}</div>
+          <div className="text-[12px] text-white/85 mt-0.5">
+            {t('home.estimate')}: <b>{inr(alert.shortfall)}</b> {t('home.shortfall')}
+            {breachRef && ` · ${hi ? breachRef.fullHi : breachRef.fullEn}`}
+          </div>
+        </div>
+
+        <div className="px-4 py-3">
+          <div className="text-[11px] font-semibold text-slate-500 mb-2">
+            {hi ? 'ऐसा क्यों लग रहा है' : 'Why this is expected'}
+          </div>
+          <ul className="space-y-2.5">
+            {reasons.map((r) => (
+              <li key={r.driver} className="flex gap-2.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-amber mt-[7px] shrink-0" />
+                <span className="text-[12.5px] text-slate-700 leading-snug">{hi ? r.sentenceHi : r.sentenceEn}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="px-4 py-3 border-t border-slate-100 bg-amber-soft">
+          <div className="text-[11px] font-semibold text-slate-600 mb-1">{t('alerts.whatToDo')}</div>
+          <p className="text-[12.5px] text-slate-700 leading-snug">
+            {hi
+              ? 'अपने फ़ील्ड अधिकारी से बात करें — किस्त की तारीख़ कमाई के मौसम से मिलाई जा सकती है।'
+              : 'Speak to your field officer — the instalment date can be aligned to your earning season.'}
+          </p>
+        </div>
+
+        <div className="px-4 py-2 border-t border-slate-100 text-[10.5px] text-slate-400">
+          {t('alerts.raisedOn')}: {alert.raisedAt} · {alert.alertId}
+        </div>
+      </section>
+
+      {fired.length > 0 && (
+        <section className="bg-white rounded-xl border border-slate-200 px-4 py-3">
+          <div className="text-[11px] font-semibold text-slate-500 mb-2">
+            {hi ? 'किन बातों पर नज़र है' : 'What is being watched'}
+          </div>
+          <ul className="space-y-2">
+            {fired.map((w) => (
+              <li key={w.code} className="flex gap-2.5 items-start">
+                <span className="w-4 h-4 rounded-full bg-risk-soft text-risk-red grid place-items-center text-[9px] font-bold mt-0.5 shrink-0">
+                  !
+                </span>
+                <span className="text-[12px] text-slate-700 leading-snug">{hi ? w.labelHi : w.label}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  )
+}

src/features/enterprise/AppHomePage.tsx

@@ -0,0 +1,208 @@
+import { useNavigate } from 'react-router-dom'
+import { enterpriseSession } from '../../lib/api'
+import type { ForecastPoint } from '../../lib/api'
+import { Empty } from '../../components/ui/bits'
+import { breachPoint, findEnterprise, forecastFor } from '../../lib/demo/enterprises'
+import { alertForEnterprise } from '../../lib/demo/ops'
+import { inr, monthRef } from '../../lib/demo/seed'
+import { dayTotals, useLedger } from '../../lib/ledgerStore'
+import { useLang } from '../../lib/i18n'
+import { EntrySheet } from './EntrySheet'
+import { useState } from 'react'
+import type { LedgerKind } from '../../lib/api'
+
+/**
+ * The enterprise home screen, reproducing the deck's phone wireframe:
+ * an alert card, the six-month forecast strip against the instalment line,
+ * the three-tap ledger tiles, today's totals and a suggestion.
+ */
+export function AppHomePage() {
+  const navigate = useNavigate()
+  const session = enterpriseSession()
+  const { lang, t } = useLang('hi')
+  const [sheet, setSheet] = useState<LedgerKind | null>(null)
+
+  const e = session ? findEnterprise(session.enterpriseId) : undefined
+  const { entries } = useLedger(session?.enterpriseId ?? '')
+
+  if (!session || !e) return <Empty text="—" />
+
+  const points = forecastFor(e)
+  const alert = alertForEnterprise(e.enterpriseId)
+  const breach = breachPoint(points)
+  const breachRef = breach ? monthRef(new Date(`${breach.month}-01T00:00:00`)) : null
+  const totals = dayTotals(entries)
+  const hi = lang === 'hi'
+
+  return (
+    <div className="space-y-3">
+      {/* ── alert card ─────────────────────────────────────── */}
+      {alert && breachRef ? (
+        <button
+          onClick={() => navigate('/app/alerts')}
+          className="w-full text-left bg-risk-red text-white rounded-xl px-4 py-3 flex items-start gap-3"
+        >
+          <span className="w-6 h-6 rounded-full bg-white/25 grid place-items-center text-[13px] font-bold shrink-0">
+            !
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block text-[14px] font-bold">{t('home.attention')}</span>
+            <span className="block text-[12px] text-white/90 leading-snug">
+              {hi ? alert.titleHi : alert.title}
+            </span>
+            <span className="block text-[12.5px] font-bold mt-1">
+              {t('home.estimate')}: {inr(alert.shortfall)} {t('home.shortfall')}
+            </span>
+          </span>
+          <span className="text-[16px] opacity-70">›</span>
+        </button>
+      ) : (
+        <div className="bg-green-soft border border-green/20 rounded-xl px-4 py-3">
+          <div className="text-[13.5px] font-bold text-forest">{t('home.allGood')}</div>
+          <div className="text-[11.5px] text-slate-600 leading-snug mt-0.5">{t('home.allGoodDetail')}</div>
+        </div>
+      )}
+
+      {/* ── forecast strip ─────────────────────────────────── */}
+      <section className="bg-white rounded-xl border border-slate-200 px-4 py-3">
+        <div className="flex items-baseline justify-between mb-3">
+          <h2 className="text-[13px] font-bold text-slate-800">{t('home.comingMonths')}</h2>
+          <span className="text-[10.5px] text-slate-400">{t('home.sixMonths')}</span>
+        </div>
+        <ForecastStrip points={points} hi={hi} instalmentLabel={t('home.instalment')} />
+        <p className="text-[10.5px] text-slate-400 mt-2.5 leading-snug">{t('home.legend')}</p>
+      </section>
+
+      {/* ── three-tap ledger ───────────────────────────────── */}
+      <section className="bg-white rounded-xl border border-slate-200 px-4 py-3">
+        <h2 className="text-[13px] font-bold text-slate-800 mb-3">{t('home.todayAccount')}</h2>
+        <div className="grid grid-cols-3 gap-2.5">
+          {(
+            [
+              { kind: 'IN' as LedgerKind, key: 'home.moneyIn', sign: '+', cls: 'bg-green-soft text-green border-green/25' },
+              { kind: 'OUT' as LedgerKind, key: 'home.moneyOut', sign: '−', cls: 'bg-risk-soft text-risk-red border-risk-red/20' },
+              { kind: 'STOCK' as LedgerKind, key: 'home.stock', sign: '▢', cls: 'bg-amber-soft text-amber border-amber/30' },
+            ]
+          ).map((tile) => (
+            <button
+              key={tile.kind}
+              onClick={() => setSheet(tile.kind)}
+              className={`rounded-xl border ${tile.cls} py-3 flex flex-col items-center gap-1.5 active:scale-95 transition-transform`}
+            >
+              <span className="w-9 h-9 rounded-full bg-white grid place-items-center text-[17px] font-bold">
+                {tile.sign}
+              </span>
+              <span className="text-[11.5px] font-semibold text-slate-700">{t(tile.key)}</span>
+            </button>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-2 gap-2.5 mt-3">
+          <div className="bg-slate-50 rounded-lg px-3 py-2">
+            <div className="text-[10.5px] text-slate-400">{t('home.todayIn')}</div>
+            <div className="text-[15px] font-bold text-green">{inr(totals.in)}</div>
+          </div>
+          <div className="bg-slate-50 rounded-lg px-3 py-2">
+            <div className="text-[10.5px] text-slate-400">{t('home.todayOut')}</div>
+            <div className="text-[15px] font-bold text-risk-red">{inr(totals.out)}</div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── suggestion ─────────────────────────────────────── */}
+      <section className="bg-amber-soft border border-amber/30 rounded-xl px-4 py-3 flex gap-3">
+        <span className="w-6 h-6 rounded-full bg-amber text-white grid place-items-center text-[12px] font-bold shrink-0">
+          ✓
+        </span>
+        <div className="min-w-0">
+          <div className="text-[12.5px] font-bold text-slate-800">{t('home.todaySuggestion')}</div>
+          <p className="text-[12px] text-slate-700 leading-snug mt-0.5">
+            {hi ? adviceHi(e.sector, breachRef?.fullHi) : adviceEn(e.sector, breachRef?.fullEn)}
+          </p>
+        </div>
+      </section>
+
+      {sheet && <EntrySheet kind={sheet} enterpriseId={e.enterpriseId} onClose={() => setSheet(null)} />}
+    </div>
+  )
+}
+
+/**
+ * Six months as bars against the instalment line. A bar is green when even the
+ * downside clears what is due, amber when only the expected case does, and red
+ * when the expected case falls short.
+ */
+function ForecastStrip({
+  points,
+  hi,
+  instalmentLabel,
+}: {
+  points: ForecastPoint[]
+  hi: boolean
+  instalmentLabel: string
+}) {
+  const ceiling = Math.max(...points.map((p) => Math.max(p.p50, p.obligation))) * 1.15
+  const obligation = points[0].obligation
+  const linePct = (obligation / ceiling) * 100
+
+  return (
+    <div className="relative">
+      <div className="flex items-end gap-2 h-[112px]">
+        {points.map((p) => {
+          const tone = p.p10 >= p.obligation ? 'bg-green' : p.p50 >= p.obligation ? 'bg-amber' : 'bg-risk-red'
+          return (
+            <div key={p.month} className="flex-1 flex flex-col items-center justify-end h-full">
+              <div
+                className={`w-full rounded-t-md ${tone}`}
+                style={{ height: `${Math.max(6, (p.p50 / ceiling) * 100)}%` }}
+                title={`${hi ? p.labelHi : p.label}: ${inr(p.p50)}`}
+              />
+            </div>
+          )
+        })}
+      </div>
+
+      {/* instalment threshold */}
+      <div
+        className="absolute left-0 right-0 border-t-2 border-dashed border-risk-red/70 pointer-events-none"
+        style={{ bottom: `${Math.min(95, linePct)}%` }}
+      >
+        <span className="absolute -top-2.5 right-0 bg-risk-red text-white text-[9.5px] font-bold px-1.5 rounded-full">
+          {instalmentLabel}
+        </span>
+      </div>
+
+      <div className="flex gap-2 mt-1.5">
+        {points.map((p) => (
+          <span key={p.month} className="flex-1 text-center text-[10px] text-slate-500">
+            {hi ? p.labelHi : p.label}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function adviceHi(sector: string, breachMonth?: string): string {
+  const base: Record<string, string> = {
+    POULTRY: 'अभी दाना ख़रीद लें — रेट 18% बढ़ा है और आगे और बढ़ सकता है।',
+    DAIRY: 'चारा अभी भर लें और समिति से भुगतान जल्दी माँगें।',
+    FOOD_PROC: 'कच्चा माल थोक में लें और खरीदार से 15 दिन में भुगतान तय करें।',
+    HANDICRAFTS: 'तैयार माल की बिक्री के लिए दूसरा खरीदार भी जोड़ें।',
+    RURAL_RETAIL: 'उधार बिक्री कम करें और रोज़ UPI से वसूली करें।',
+  }
+  const tail = breachMonth ? ` ${breachMonth} तक पैसा कम पड़ सकता है।` : ''
+  return (base[sector] ?? base.RURAL_RETAIL) + tail
+}
+
+function adviceEn(sector: string, breachMonth?: string): string {
+  const base: Record<string, string> = {
+    POULTRY: 'Buy feed now — the rate is up 18% and may rise further.',
+    DAIRY: 'Stock fodder now and press the society for faster payment.',
+    FOOD_PROC: 'Buy raw material in bulk and hold buyers to 15-day settlement.',
+    HANDICRAFTS: 'Add a second buyer so sales do not depend on one account.',
+    RURAL_RETAIL: 'Reduce credit sales and collect daily over UPI.',
+  }
+  const tail = breachMonth ? ` Cash may fall short by ${breachMonth}.` : ''
+  return (base[sector] ?? base.RURAL_RETAIL) + tail
+}

src/features/enterprise/AppLedgerPage.tsx

@@ -0,0 +1,140 @@
+import { useMemo, useState } from 'react'
+import { enterpriseSession } from '../../lib/api'
+import type { LedgerKind } from '../../lib/api'
+import { Empty } from '../../components/ui/bits'
+import { CATEGORIES, useLedger } from '../../lib/ledgerStore'
+import { inr, todayIso } from '../../lib/demo/seed'
+import { useLang } from '../../lib/i18n'
+import { EntrySheet } from './EntrySheet'
+
+type Range = 'DAY' | 'WEEK' | 'MONTH'
+
+/** The owner's own book: running balance, day/week/month view, and the entry sheet. */
+export function AppLedgerPage() {
+  const session = enterpriseSession()
+  const { lang, t } = useLang('hi')
+  const [range, setRange] = useState<Range>('WEEK')
+  const [sheet, setSheet] = useState<LedgerKind | null>(null)
+  const { entries } = useLedger(session?.enterpriseId ?? '')
+  const hi = lang === 'hi'
+
+  const cutoff = useMemo(() => {
+    const d = new Date()
+    if (range === 'DAY') return todayIso()
+    d.setDate(d.getDate() - (range === 'WEEK' ? 7 : 30))
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+  }, [range])
+
+  const rows = entries.filter((e) => (range === 'DAY' ? e.entryDate === cutoff : e.entryDate >= cutoff))
+  const inTotal = rows.filter((r) => r.kind === 'IN').reduce((a, r) => a + r.amount, 0)
+  const outTotal = rows.filter((r) => r.kind === 'OUT').reduce((a, r) => a + r.amount, 0)
+  const balance = inTotal - outTotal
+
+  const byDate = rows.reduce<Record<string, typeof rows>>((acc, r) => {
+    ;(acc[r.entryDate] ||= []).push(r)
+    return acc
+  }, {})
+
+  const label = (kind: LedgerKind, code: string) => {
+    const c = CATEGORIES[kind].find((x) => x.code === code)
+    return c ? (hi ? c.hi : c.en) : code
+  }
+
+  if (!session) return <Empty text="—" />
+
+  return (
+    <div className="space-y-3">
+      {/* balance */}
+      <section className="bg-forest text-white rounded-xl px-4 py-3.5">
+        <div className="text-[11px] text-[#a8c9b6]">{t('ledger.balance')}</div>
+        <div className="text-[30px] font-bold leading-tight">{inr(balance)}</div>
+        <div className="flex gap-4 mt-1.5 text-[11.5px]">
+          <span className="text-green-hi">↑ {inr(inTotal)}</span>
+          <span className="text-amber-hi">↓ {inr(outTotal)}</span>
+        </div>
+      </section>
+
+      {/* range */}
+      <div className="flex gap-2">
+        {(
+          [
+            { key: 'DAY' as Range, hi: 'आज', en: 'Today' },
+            { key: 'WEEK' as Range, hi: 'हफ़्ता', en: 'Week' },
+            { key: 'MONTH' as Range, hi: 'महीना', en: 'Month' },
+          ]
+        ).map((r) => (
+          <button
+            key={r.key}
+            onClick={() => setRange(r.key)}
+            className={[
+              'flex-1 py-2 rounded-lg text-[12.5px] font-semibold border transition-colors',
+              range === r.key ? 'bg-forest text-white border-forest' : 'bg-white text-slate-600 border-slate-200',
+            ].join(' ')}
+          >
+            {hi ? r.hi : r.en}
+          </button>
+        ))}
+      </div>
+
+      {/* add */}
+      <div className="grid grid-cols-3 gap-2">
+        {(
+          [
+            { kind: 'IN' as LedgerKind, key: 'home.moneyIn', cls: 'bg-green-soft text-green border-green/25' },
+            { kind: 'OUT' as LedgerKind, key: 'home.moneyOut', cls: 'bg-risk-soft text-risk-red border-risk-red/20' },
+            { kind: 'STOCK' as LedgerKind, key: 'home.stock', cls: 'bg-amber-soft text-amber border-amber/30' },
+          ]
+        ).map((b) => (
+          <button
+            key={b.kind}
+            onClick={() => setSheet(b.kind)}
+            className={`rounded-lg border ${b.cls} py-2.5 text-[12px] font-semibold text-slate-700 active:scale-95 transition-transform`}
+          >
+            + {t(b.key)}
+          </button>
+        ))}
+      </div>
+
+      {/* entries */}
+      {Object.entries(byDate).map(([date, list]) => (
+        <section key={date} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+          <div className="px-3.5 py-2 bg-slate-50 border-b border-slate-100 flex items-center">
+            <span className="text-[11px] font-semibold text-slate-600">
+              {date === todayIso() ? t('ledger.today') : date}
+            </span>
+            <span className="ml-auto text-[11px] text-slate-400">{list.length}</span>
+          </div>
+          {list.map((r) => (
+            <div key={r.id} className="px-3.5 py-2.5 flex items-center gap-3 border-b border-slate-50 last:border-0">
+              <span
+                className={`w-8 h-8 rounded-full grid place-items-center text-[14px] font-bold ${
+                  r.kind === 'IN' ? 'band-standard' : r.kind === 'OUT' ? 'band-red' : 'band-watch'
+                }`}
+              >
+                {r.kind === 'IN' ? '+' : r.kind === 'OUT' ? '−' : '▢'}
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block text-[12.5px] font-semibold text-slate-700">{label(r.kind, r.category)}</span>
+                <span className="block text-[10.5px] text-slate-400">
+                  {r.syncState === 'PENDING' ? t('ledger.pending') : t('ledger.synced')}
+                </span>
+              </span>
+              <span
+                className={`text-[14px] font-bold ${
+                  r.kind === 'IN' ? 'text-green' : r.kind === 'OUT' ? 'text-risk-red' : 'text-amber'
+                }`}
+              >
+                {r.kind === 'OUT' ? '−' : ''}
+                {inr(r.amount)}
+              </span>
+            </div>
+          ))}
+        </section>
+      ))}
+
+      {!rows.length && <Empty text={t('ledger.empty')} />}
+
+      {sheet && <EntrySheet kind={sheet} enterpriseId={session.enterpriseId} onClose={() => setSheet(null)} />}
+    </div>
+  )
+}

src/features/enterprise/AppProfilePage.tsx

@@ -0,0 +1,146 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { clearSessions, enterpriseSession } from '../../lib/api'
+import type { Lang } from '../../lib/api'
+import { Empty } from '../../components/ui/bits'
+import { SECTORS, findEnterprise } from '../../lib/demo/enterprises'
+import { lastSyncedAt, pendingCount, syncPending } from '../../lib/ledgerStore'
+import { useLang } from '../../lib/i18n'
+import { useOffline } from '../../lib/useOffline'
+
+/**
+ * Enterprise profile: what the system knows, the consent that permits it, the
+ * sync state, and the language switch. The "no personal data" promise is stated
+ * here because this is the only screen where the owner sees their own record.
+ */
+export function AppProfilePage() {
+  const navigate = useNavigate()
+  const session = enterpriseSession()
+  const { lang, setLang, t } = useLang('hi')
+  const offline = useOffline()
+  const [consent, setConsent] = useState(true)
+  const [justSynced, setJustSynced] = useState<number | null>(null)
+  const hi = lang === 'hi'
+
+  const e = session ? findEnterprise(session.enterpriseId) : undefined
+  if (!session || !e) return <Empty text="—" />
+
+  const pending = pendingCount(e.enterpriseId)
+  const synced = lastSyncedAt()
+
+  function doSync() {
+    const n = syncPending(e!.enterpriseId)
+    setJustSynced(n)
+    setTimeout(() => setJustSynced(null), 2200)
+  }
+
+  function signOut() {
+    clearSessions()
+    navigate('/login', { replace: true })
+  }
+
+  return (
+    <div className="space-y-3">
+      <section className="bg-white rounded-xl border border-slate-200 px-4 py-4 text-center">
+        <div className="w-14 h-14 rounded-full bg-green-soft text-forest grid place-items-center text-[20px] font-bold mx-auto mb-2">
+          {e.name[0]}
+        </div>
+        <div className="text-[15px] font-bold text-slate-800">{hi ? e.nameHi : e.name}</div>
+        <div className="font-mono text-[11px] text-slate-400">{e.enterpriseId}</div>
+      </section>
+
+      <section className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
+        {[
+          [t('profile.sector'), hi ? SECTORS[e.sector].labelHi : SECTORS[e.sector].label],
+          [t('profile.block'), e.block],
+          [hi ? 'ज़िला' : 'District', e.district],
+        ].map(([k, v]) => (
+          <div key={k} className="px-4 py-2.5 flex justify-between text-[12.5px]">
+            <span className="text-slate-500">{k}</span>
+            <span className="font-semibold text-slate-700">{v}</span>
+          </div>
+        ))}
+      </section>
+
+      {/* consent */}
+      <section className="bg-white rounded-xl border border-slate-200 px-4 py-3">
+        <div className="flex items-center gap-2.5">
+          <span className="text-[12.5px] font-semibold text-slate-700">{t('profile.consent')}</span>
+          <span className={`pill ${consent ? 'pill-ok' : 'pill-mut'}`}>
+            {consent ? t('profile.consentActive') : hi ? 'वापस ली गई' : 'Revoked'}
+          </span>
+        </div>
+        <p className="text-[11.5px] text-slate-500 leading-snug mt-1.5">
+          {hi
+            ? 'सिर्फ़ लेन-देन का जोड़ देखा जाता है — किसी का नाम, नंबर या खाता नहीं।'
+            : 'Only transaction aggregates are read — never a name, number or account.'}
+        </p>
+        <button
+          onClick={() => setConsent((c) => !c)}
+          className="mt-2.5 text-[12px] font-semibold text-risk-red border border-risk-red/30 rounded-lg px-3 py-1.5"
+        >
+          {consent ? t('profile.revoke') : hi ? 'सहमति दोबारा दें' : 'Give consent again'}
+        </button>
+      </section>
+
+      {/* sync */}
+      <section className="bg-white rounded-xl border border-slate-200 px-4 py-3">
+        <div className="flex items-center gap-2.5 mb-1.5">
+          <span className="text-[12.5px] font-semibold text-slate-700">{t('profile.sync')}</span>
+          <span className={`pill ${offline ? 'pill-bad' : 'pill-ok'}`}>
+            {offline ? (hi ? 'इंटरनेट नहीं' : 'Offline') : hi ? 'जुड़ा है' : 'Online'}
+          </span>
+          {pending > 0 && <span className="pill pill-pend">{pending} {t('ledger.pending')}</span>}
+        </div>
+        <div className="text-[11.5px] text-slate-500">
+          {t('profile.lastSynced')}: {synced ? new Date(synced).toLocaleString() : t('profile.never')}
+        </div>
+        <button
+          onClick={doSync}
+          disabled={offline || pending === 0}
+          className="mt-2.5 w-full bg-forest disabled:opacity-40 text-white text-[13px] font-semibold py-2.5 rounded-lg"
+        >
+          {t('profile.syncNow')}
+        </button>
+        {justSynced !== null && (
+          <p className="text-[11.5px] text-green mt-1.5 text-center">
+            {justSynced} {hi ? 'हिसाब भेज दिए' : 'entries synced'}
+          </p>
+        )}
+      </section>
+
+      {/* language */}
+      <section className="bg-white rounded-xl border border-slate-200 px-4 py-3">
+        <div className="text-[12.5px] font-semibold text-slate-700 mb-2">{t('profile.language')}</div>
+        <div className="flex gap-2">
+          {(
+            [
+              { key: 'hi' as Lang, label: 'हिन्दी' },
+              { key: 'en' as Lang, label: 'English' },
+            ]
+          ).map((l) => (
+            <button
+              key={l.key}
+              onClick={() => setLang(l.key)}
+              className={[
+                'flex-1 py-2 rounded-lg text-[12.5px] font-semibold border transition-colors',
+                lang === l.key ? 'bg-forest text-white border-forest' : 'bg-white text-slate-600 border-slate-200',
+              ].join(' ')}
+            >
+              {l.label}
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <p className="text-[11px] text-slate-400 text-center leading-snug px-4">{t('profile.noPii')}</p>
+
+      <button
+        onClick={signOut}
+        className="w-full border border-slate-200 bg-white text-slate-600 text-[13px] font-semibold py-2.5 rounded-xl"
+      >
+        {t('profile.logout')}
+      </button>
+    </div>
+  )
+}

src/features/enterprise/EnterpriseShell.tsx

@@ -0,0 +1,95 @@
+import { NavLink, Outlet } from 'react-router-dom'
+import { enterpriseSession } from '../../lib/api'
+import { UdyamMark } from '../../components/ui/bits'
+import { useLang } from '../../lib/i18n'
+import { useOffline } from '../../lib/useOffline'
+import { pendingCount } from '../../lib/ledgerStore'
+
+/*
+ * Enterprise PWA shell — a phone-width frame with a forest header and a four-tab
+ * bottom bar. Hindi-first: the owner's language is the default and English is
+ * the option, not the other way round.
+ */
+
+const TABS: { to: string; key: string; icon: string; end?: boolean }[] = [
+  { to: '/app', key: 'tab.home', icon: '⌂', end: true },
+  { to: '/app/ledger', key: 'tab.ledger', icon: '₹' },
+  { to: '/app/alerts', key: 'tab.alerts', icon: '!' },
+  { to: '/app/profile', key: 'tab.profile', icon: '☺' },
+]
+
+export function EnterpriseShell() {
+  const session = enterpriseSession()
+  const { lang, t } = useLang('hi')
+  const offline = useOffline()
+  const pending = session ? pendingCount(session.enterpriseId) : 0
+
+  return (
+    <div className="min-h-screen bg-[#eef3f0] flex justify-center">
+      <div className="w-full max-w-[420px] bg-[#f4f7f5] min-h-screen flex flex-col shadow-[0_0_40px_rgba(6,48,31,0.08)]">
+        {/* ── header ────────────────────────────────────────── */}
+        <header className="bg-forest text-white px-4 py-3 flex items-center gap-2.5 sticky top-0 z-30">
+          <UdyamMark size={26} onDark />
+          <div className="min-w-0 leading-tight">
+            <div className="text-[13.5px] font-bold">
+              Udyam<span className="text-amber-hi">Linc</span>
+            </div>
+            <div className="text-[10.5px] text-[#a8c9b6] truncate">
+              {lang === 'hi' ? (session?.nameHi ?? session?.name) : session?.name}
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            {pending > 0 && (
+              <span className="text-[9.5px] bg-amber text-forest-deep font-bold px-1.5 py-0.5 rounded-full">
+                {pending}
+              </span>
+            )}
+            <NavLink to="/app/alerts" className="w-7 h-7 grid place-items-center rounded-full bg-white/10" aria-label={t('tab.alerts')}>
+              🔔
+            </NavLink>
+          </div>
+        </header>
+
+        {offline && (
+          <div className="bg-amber-soft border-b border-amber/30 px-4 py-1.5 text-[11px] text-slate-700 text-center">
+            {t('common.offline')}
+          </div>
+        )}
+
+        <main className="flex-1 px-3.5 py-3.5 pb-24">
+          <Outlet />
+        </main>
+
+        {/* ── bottom tab bar ────────────────────────────────── */}
+        <nav className="fixed bottom-0 w-full max-w-[420px] bg-white border-t border-slate-200 flex ul-safe-bottom z-30">
+          {TABS.map((tab) => (
+            <NavLink
+              key={tab.to}
+              to={tab.to}
+              end={tab.end}
+              className={({ isActive }) =>
+                [
+                  'flex-1 flex flex-col items-center gap-0.5 py-2.5 text-[10.5px] font-semibold transition-colors',
+                  isActive ? 'text-forest' : 'text-slate-400',
+                ].join(' ')
+              }
+            >
+              {({ isActive }) => (
+                <>
+                  <span
+                    className={`w-7 h-7 grid place-items-center rounded-full text-[14px] ${
+                      isActive ? 'bg-green-soft text-forest' : 'text-slate-400'
+                    }`}
+                  >
+                    {tab.icon}
+                  </span>
+                  {t(tab.key)}
+                </>
+              )}
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+    </div>
+  )
+}

src/features/enterprise/EntrySheet.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react'
+import type { LedgerKind } from '../../lib/api'
+import { CATEGORIES, addEntry } from '../../lib/ledgerStore'
+import { useLang } from '../../lib/i18n'
+import { inr } from '../../lib/demo/seed'
+
+/**
+ * The three-tap ledger entry: type the amount, tap a category, tap save.
+ *
+ * Designed for ~15 seconds of daily effort — big touch targets, a numeric pad
+ * of quick amounts, no free text required, and it never blocks on the network.
+ */
+
+const QUICK = [100, 200, 500, 1000, 2000, 5000]
+
+const KIND_META: Record<LedgerKind, { key: string; cls: string; ring: string }> = {
+  IN: { key: 'home.moneyIn', cls: 'bg-green text-white', ring: 'focus:ring-green/30 focus:border-green' },
+  OUT: { key: 'home.moneyOut', cls: 'bg-risk-red text-white', ring: 'focus:ring-risk-red/25 focus:border-risk-red' },
+  STOCK: { key: 'home.stock', cls: 'bg-amber text-white', ring: 'focus:ring-amber/30 focus:border-amber' },
+}
+
+export function EntrySheet({
+  kind,
+  enterpriseId,
+  onClose,
+}: {
+  kind: LedgerKind
+  enterpriseId: string
+  onClose: () => void
+}) {
+  const { lang, t } = useLang('hi')
+  const [amount, setAmount] = useState('')
+  const [category, setCategory] = useState(CATEGORIES[kind][0].code)
+  const [done, setDone] = useState(false)
+  const hi = lang === 'hi'
+  const meta = KIND_META[kind]
+  const value = Number(amount) || 0
+
+  function save() {
+    if (value <= 0) return
+    addEntry({ enterpriseId, kind, amount: value, category })
+    setDone(true)
+    setTimeout(onClose, 900)
+  }
+
+  return (
+    <div className="fixed inset-0 z-[90] flex items-end justify-center bg-black/40" onClick={onClose}>
+      <div
+        className="w-full max-w-[420px] bg-white rounded-t-2xl p-4 ul-safe-bottom"
+        onClick={(ev) => ev.stopPropagation()}
+      >
+        {done ? (
+          <div className="py-10 text-center">
+            <div className="w-14 h-14 rounded-full bg-green-soft text-green grid place-items-center text-[26px] mx-auto mb-3">
+              ✓
+            </div>
+            <div className="text-[16px] font-bold text-forest">{t('ledger.saved')}</div>
+            <div className="text-[12.5px] text-slate-500 mt-1">{inr(value)}</div>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center gap-2.5 mb-4">
+              <span className={`w-8 h-8 rounded-full grid place-items-center text-[16px] font-bold ${meta.cls}`}>
+                {kind === 'IN' ? '+' : kind === 'OUT' ? '−' : '▢'}
+              </span>
+              <h2 className="text-[15px] font-bold text-slate-800">{t(meta.key)}</h2>
+              <button onClick={onClose} className="ml-auto w-8 h-8 rounded-full bg-slate-100 text-slate-500 text-[13px]">
+                ✕
+              </button>
+            </div>
+
+            {/* 1 — amount */}
+            <label className="block mb-3">
+              <span className="block text-[11.5px] text-slate-500 mb-1.5">{t('ledger.amount')}</span>
+              <div className="flex items-center gap-2 border border-slate-300 rounded-xl px-3 py-2 focus-within:ring-2 focus-within:ring-green/20">
+                <span className="text-[20px] text-slate-400">₹</span>
+                <input
+                  autoFocus
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  className={`flex-1 text-[26px] font-bold text-slate-800 outline-none ${meta.ring}`}
+                  placeholder="0"
+                  value={amount}
+                  onChange={(ev) => setAmount(ev.target.value.replace(/\D/g, ''))}
+                />
+              </div>
+            </label>
+
+            <div className="grid grid-cols-3 gap-2 mb-4">
+              {QUICK.map((q) => (
+                <button
+                  key={q}
+                  onClick={() => setAmount(String(q))}
+                  className="py-2 rounded-lg bg-slate-100 text-[13px] font-semibold text-slate-700 active:scale-95 transition-transform"
+                >
+                  ₹{q.toLocaleString('en-IN')}
+                </button>
+              ))}
+            </div>
+
+            {/* 2 — category */}
+            <div className="mb-4">
+              <span className="block text-[11.5px] text-slate-500 mb-1.5">{t('ledger.chooseCategory')}</span>
+              <div className="flex flex-wrap gap-2">
+                {CATEGORIES[kind].map((c) => (
+                  <button
+                    key={c.code}
+                    onClick={() => setCategory(c.code)}
+                    className={[
+                      'px-3 py-2 rounded-full text-[12.5px] font-semibold border transition-colors',
+                      category === c.code
+                        ? 'bg-forest text-white border-forest'
+                        : 'bg-white text-slate-600 border-slate-300',
+                    ].join(' ')}
+                  >
+                    {hi ? c.hi : c.en}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* 3 — save */}
+            <button
+              onClick={save}
+              disabled={value <= 0}
+              className="w-full bg-forest disabled:opacity-40 text-white text-[15px] font-bold py-3.5 rounded-xl active:scale-[0.99] transition-transform"
+            >
+              {t('ledger.save')}
+              {value > 0 && ` · ${inr(value)}`}
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

src/features/officer/AlertsPage.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { officerSession } from '../../lib/api'
+import type { AlertState, RiskAlert } from '../../lib/api'
+import { ActionChip, Card, Empty, GhostBtn, RiskBadge, StatusPill } from '../../components/ui/bits'
+import { SECTORS } from '../../lib/demo/enterprises'
+import { inr, monthRef } from '../../lib/demo/seed'
+import { setAlertState, useAlerts } from '../../lib/alertStore'
+import { useScope } from './officerScope'
+
+const FILTERS: { key: AlertState | 'ALL'; label: string }[] = [
+  { key: 'ALL', label: 'All' },
+  { key: 'OPEN', label: 'Open' },
+  { key: 'ACKNOWLEDGED', label: 'Acknowledged' },
+  { key: 'ESCALATED', label: 'Escalated' },
+  { key: 'SNOOZED', label: 'Snoozed' },
+]
+
+/**
+ * The alert queue. Every row carries its origin (model vs trip-wire), the
+ * plain-language reason, the projected gap, and the three dispositions an
+ * officer can take — each of which is written to the audit strip below.
+ */
+export function AlertsPage() {
+  const navigate = useNavigate()
+  const { block } = useScope()
+  const [filter, setFilter] = useState<AlertState | 'ALL'>('OPEN')
+  const { alerts, audit } = useAlerts(block)
+  const actor = officerSession()?.fullName ?? 'Field Officer'
+
+  const rows = alerts.filter((a) => filter === 'ALL' || a.state === filter)
+
+  function act(alert: RiskAlert, to: AlertState) {
+    setAlertState(alert, to, actor)
+  }
+
+  return (
+    <div className="grid gap-4 xl:grid-cols-[1fr_320px] items-start">
+      <div>
+        <div className="flex flex-wrap items-center gap-1.5 mb-3">
+          {FILTERS.map((f) => (
+            <ActionChip key={f.key} active={filter === f.key} onClick={() => setFilter(f.key)}>
+              {f.label}
+              {f.key !== 'ALL' && (
+                <span className="ml-1 opacity-60">{alerts.filter((a) => a.state === f.key).length}</span>
+              )}
+            </ActionChip>
+          ))}
+          <span className="text-[11px] text-slate-500 ml-1">{rows.length} shown</span>
+        </div>
+
+        <div className="space-y-2.5">
+          {rows.map((a) => {
+            const breachRef = a.breachMonth ? monthRef(new Date(`${a.breachMonth}-01T00:00:00`)) : null
+            return (
+              <div key={a.alertId} className="ul-card px-4 py-3">
+                <div className="flex items-start gap-3">
+                  <span
+                    className={`w-7 h-7 rounded-full grid place-items-center text-[12px] font-bold shrink-0 ${
+                      a.band === 'RED' ? 'band-red' : 'band-watch'
+                    }`}
+                  >
+                    !
+                  </span>
+
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <button
+                        className="text-[13px] font-bold text-forest hover:underline"
+                        onClick={() => navigate(`/officer/enterprises/${a.enterpriseId}`)}
+                      >
+                        {a.enterpriseName}
+                      </button>
+                      <RiskBadge band={a.band} />
+                      <span className={`pill ${a.origin === 'TRIPWIRE' ? 'pill-info' : 'pill-mut'}`}>
+                        {a.origin === 'TRIPWIRE' ? 'Trip-wire' : 'Model'}
+                      </span>
+                      <StatusPill status={a.state} />
+                      <span className="font-mono text-[10px] text-slate-400 ml-auto">{a.alertId}</span>
+                    </div>
+
+                    <div className="text-[11px] text-slate-500 mt-0.5">
+                      {a.enterpriseId} · {SECTORS[a.sector].short} · {a.block} · score{' '}
+                      <b className="text-slate-700">{a.score}</b> · raised {a.raisedAt}
+                    </div>
+
+                    <p className="text-[12.5px] font-semibold text-slate-700 mt-2">{a.title}</p>
+                    <p className="text-[11.5px] text-slate-600 leading-snug">{a.reason.sentenceEn}</p>
+                    <p className="text-[11px] text-slate-400 leading-snug">{a.reason.sentenceHi}</p>
+
+                    {a.shortfall > 0 && (
+                      <p className="text-[11.5px] text-risk-red font-semibold mt-1.5">
+                        Projected gap {inr(a.shortfall)} at P10{breachRef && ` in ${breachRef.fullEn}`}
+                      </p>
+                    )}
+
+                    <div className="flex flex-wrap gap-2 mt-3">
+                      <GhostBtn disabled={a.state === 'ACKNOWLEDGED'} onClick={() => act(a, 'ACKNOWLEDGED')}>
+                        Acknowledge
+                      </GhostBtn>
+                      <GhostBtn disabled={a.state === 'ESCALATED'} onClick={() => act(a, 'ESCALATED')}>
+                        Escalate
+                      </GhostBtn>
+                      <GhostBtn disabled={a.state === 'SNOOZED'} onClick={() => act(a, 'SNOOZED')}>
+                        Snooze
+                      </GhostBtn>
+                      <GhostBtn onClick={() => navigate(`/officer/enterprises/${a.enterpriseId}`)}>
+                        Open enterprise
+                      </GhostBtn>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        {!rows.length && <Empty text="Nothing in this state right now." />}
+      </div>
+
+      {/* ── audit strip ─────────────────────────────────────── */}
+      <Card title="Audit trail" badge="every action logged">
+        <div className="p-3 space-y-2.5 max-h-[560px] overflow-y-auto">
+          {audit.map((a, i) => (
+            <div key={`${a.alertId}-${i}`} className="border-l-2 border-slate-200 pl-2.5">
+              <div className="font-mono text-[10px] text-slate-400">{new Date(a.at).toLocaleString()}</div>
+              <div className="text-[11.5px] text-slate-700">
+                <b>{a.alertId}</b> {a.from} → {a.to}
+              </div>
+              <div className="text-[10.5px] text-slate-400">{a.actor}</div>
+            </div>
+          ))}
+          {!audit.length && <p className="text-[11.5px] text-slate-400 py-4 text-center">No actions taken yet.</p>}
+        </div>
+      </Card>
+    </div>
+  )
+}

src/features/officer/DataFeedsPage.tsx

@@ -0,0 +1,315 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { get } from '../../lib/api'
+import type { ClimateSignal, Freshness, IngestionRun, MarketSignal } from '../../lib/api'
+import { Card, Empty, StatusPill } from '../../components/ui/bits'
+import {
+  demoClimateSignals,
+  demoFreshness,
+  demoIngestionRuns,
+  demoMarketSignals,
+} from '../../lib/demo/feeds'
+
+/**
+ * Where the numbers came from and how old they are.
+ *
+ * <p>This screen exists because the failure mode that matters is silent: a score
+ * computed from a three-week-old mandi price looks exactly like a score computed
+ * this morning. Staleness is shown first and everywhere, before any price.
+ */
+export function DataFeedsPage() {
+  const [district, setDistrict] = useState<string>('ALL')
+
+  const freshnessQ = useQuery({ queryKey: ['freshness'], queryFn: () => get<Freshness[]>('/admin/ingestion/freshness') })
+  const marketQ = useQuery({
+    queryKey: ['market-signals'],
+    queryFn: () => get<MarketSignal[]>('/admin/ingestion/signals/market', { weeks: 8 }),
+  })
+  const climateQ = useQuery({
+    queryKey: ['climate-signals'],
+    queryFn: () => get<ClimateSignal[]>('/admin/ingestion/signals/climate', { weeks: 8 }),
+  })
+  const runsQ = useQuery({
+    queryKey: ['ingestion-runs'],
+    queryFn: () => get<IngestionRun[]>('/admin/ingestion/runs', { limit: 10 }),
+  })
+
+  const demo = freshnessQ.isError || marketQ.isError || climateQ.isError || runsQ.isError
+  const freshness = freshnessQ.data ?? demoFreshness()
+  const market = marketQ.data ?? demoMarketSignals()
+  const climate = climateQ.data ?? demoClimateSignals()
+  const runs = runsQ.data ?? demoIngestionRuns()
+
+  const districts = useMemo(
+    () => Array.from(new Set(freshness.map((f) => f.districtName))).sort(),
+    [freshness],
+  )
+  // Latest week per (district, commodity) — the panel is a current view, not a log.
+  const latestMarket = useMemo(() => {
+    const byKey = new Map<string, MarketSignal>()
+    for (const row of market) {
+      if (district !== 'ALL' && row.districtName !== district) continue
+      const key = `${row.districtName}|${row.commodityName}`
+      const held = byKey.get(key)
+      if (!held || row.weekStart > held.weekStart) byKey.set(key, row)
+    }
+    return Array.from(byKey.values()).sort(
+      (a, b) =>
+        a.districtName.localeCompare(b.districtName) || a.commodityName.localeCompare(b.commodityName),
+    )
+  }, [market, district])
+
+  const latestClimate = useMemo(() => {
+    const byDistrict = new Map<string, ClimateSignal>()
+    for (const row of climate) {
+      if (district !== 'ALL' && row.districtName !== district) continue
+      const held = byDistrict.get(row.districtName)
+      if (!held || row.weekStart > held.weekStart) byDistrict.set(row.districtName, row)
+    }
+    return Array.from(byDistrict.values()).sort((a, b) => a.districtName.localeCompare(b.districtName))
+  }, [climate, district])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <div>
+          <h1 className="text-[15px] font-bold text-forest leading-tight">Data feeds</h1>
+          <p className="text-[11px] text-slate-500">
+            Mandi prices from Agmarknet via data.gov.in; rainfall and temperature from the reanalysis archive.
+            External feeds are pulled nightly and never called while you wait.
+          </p>
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          {demo && <span className="pill pill-pend">Demo data</span>}
+          <select
+            value={district}
+            onChange={(e) => setDistrict(e.target.value)}
+            className="border border-slate-300 rounded-md px-2 py-1 text-[11.5px] bg-white outline-none focus:border-green"
+            aria-label="District"
+          >
+            <option value="ALL">All districts</option>
+            {districts.map((d) => (
+              <option key={d} value={d}>
+                {d}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* ── freshness ─────────────────────────────────────── */}
+      <Card title="Feed freshness" badge="what a trip-wire checks first">
+        <div className="p-4">
+          <p className="text-[11.5px] text-slate-500 leading-snug mb-3">
+            A rule refuses to fire on data older than it tolerates — a trip-wire on a three-week-old price is worse
+            than no trip-wire. These are the ages every rule is measured against.
+          </p>
+          <div className="grid gap-2.5 sm:grid-cols-2 xl:grid-cols-4">
+            {freshness.map((f) => (
+              <div key={f.districtCode} className="rounded-lg border border-slate-200 px-3 py-2.5">
+                <div className="text-[12px] font-semibold text-slate-700">{f.districtName}</div>
+                <FreshnessRow label="Mandi" days={f.marketStalenessDays} validFor={f.marketValidFor} warnAbove={10} />
+                <FreshnessRow label="Climate" days={f.climateStalenessDays} validFor={f.climateValidFor} warnAbove={14} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Card>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        {/* ── market panel ───────────────────────────────── */}
+        <Card title="Mandi prices" badge="latest week held">
+          <div className="p-4 overflow-x-auto">
+            {latestMarket.length === 0 ? (
+              <Empty text="No market signals yet — run ingestion to populate." />
+            ) : (
+              <table className="ul-table w-full">
+                <thead>
+                  <tr>
+                    <th>District</th>
+                    <th>Commodity</th>
+                    <th className="text-right">Modal</th>
+                    <th className="text-right">Range</th>
+                    <th className="text-right">Arrivals</th>
+                    <th>Week</th>
+                    <th className="text-right">Age</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {latestMarket.map((row) => (
+                    <tr key={row.id}>
+                      <td>{row.districtName}</td>
+                      <td className="font-medium text-slate-700">{row.commodityName}</td>
+                      <td className="text-right font-semibold">
+                        {row.modalPrice === null ? '—' : `₹${row.modalPrice.toLocaleString('en-IN')}`}
+                      </td>
+                      <td className="text-right text-slate-500 text-[11px]">
+                        {row.minPrice === null || row.maxPrice === null
+                          ? '—'
+                          : `${row.minPrice.toLocaleString('en-IN')} – ${row.maxPrice.toLocaleString('en-IN')}`}
+                      </td>
+                      <td className="text-right text-slate-500">{row.arrivalCount ?? '—'}</td>
+                      <td className="text-slate-500 text-[11px]">{row.weekStart}</td>
+                      <td className="text-right">
+                        <AgeChip validFor={row.validForDate} warnAbove={10} />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+            <p className="text-[10.5px] text-slate-400 mt-2.5">
+              A price level is not a feature. These rows become <span className="font-mono">feed_cost_change</span>,{' '}
+              <span className="font-mono">margin_squeeze</span> and{' '}
+              <span className="font-mono">price_z_score</span> against their trailing means.
+            </p>
+          </div>
+        </Card>
+
+        {/* ── climate panel ──────────────────────────────── */}
+        <Card title="Rainfall & heat" badge="against the 30-year normal">
+          <div className="p-4 overflow-x-auto">
+            {latestClimate.length === 0 ? (
+              <Empty text="No climate signals yet — run ingestion to populate." />
+            ) : (
+              <table className="ul-table w-full">
+                <thead>
+                  <tr>
+                    <th>District</th>
+                    <th className="text-right">Rain</th>
+                    <th className="text-right">Normal</th>
+                    <th className="text-right">Anomaly</th>
+                    <th className="text-right">Max temp</th>
+                    <th className="text-right">vs normal</th>
+                    <th>Week</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {latestClimate.map((row) => (
+                    <tr key={row.id}>
+                      <td>{row.districtName}</td>
+                      <td className="text-right">{row.rainfallMm === null ? '—' : `${row.rainfallMm} mm`}</td>
+                      <td className="text-right text-slate-500">
+                        {row.rainfallNormalMm === null ? '—' : `${row.rainfallNormalMm} mm`}
+                      </td>
+                      <td className="text-right">
+                        <Delta value={row.rainfallAnomalyPct} suffix="%" goodWhenPositive />
+                      </td>
+                      <td className="text-right">{row.tmaxC === null ? '—' : `${row.tmaxC} °C`}</td>
+                      <td className="text-right">
+                        <Delta value={row.heatAnomalyC} suffix=" °C" />
+                      </td>
+                      <td className="text-slate-500 text-[11px]">{row.weekStart}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+            <p className="text-[10.5px] text-slate-400 mt-2.5">
+              An absolute rainfall figure means nothing on its own — the normal beside it is what makes a deficit
+              readable, and it needs decades of history the live endpoints do not serve.
+            </p>
+          </div>
+        </Card>
+      </div>
+
+      {/* ── runs ──────────────────────────────────────────── */}
+      <Card title="Ingestion runs" badge="nightly at 02:00">
+        <div className="p-4 overflow-x-auto">
+          <table className="ul-table w-full">
+            <thead>
+              <tr>
+                <th>Source</th>
+                <th>Date</th>
+                <th>Trigger</th>
+                <th>Status</th>
+                <th className="text-right">Fetched</th>
+                <th className="text-right">Written</th>
+                <th className="text-right">Failed calls</th>
+                <th>Note</th>
+              </tr>
+            </thead>
+            <tbody>
+              {runs.map((run) => (
+                <tr key={run.id}>
+                  <td className="font-mono text-[11px]">{run.source}</td>
+                  <td>{run.runDate}</td>
+                  <td className="text-slate-500">{run.trigger}</td>
+                  <td>
+                    <StatusPill status={run.status} />
+                  </td>
+                  <td className="text-right">{run.rowsFetched ?? '—'}</td>
+                  <td className="text-right font-semibold">{run.rowsWritten ?? '—'}</td>
+                  <td className={`text-right ${run.callsFailed ? 'text-risk-red font-semibold' : 'text-slate-400'}`}>
+                    {run.callsFailed ?? 0}
+                  </td>
+                  <td className="text-slate-500 text-[11px] max-w-[280px] truncate">{run.message}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <p className="text-[10.5px] text-slate-400 mt-2.5">
+            A skipped run is recorded too. "Nothing ran last night" and "it ran and found nothing" must never look
+            the same here.
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+// ── small parts ──────────────────────────────────────────────────
+
+function FreshnessRow({
+  label,
+  days,
+  validFor,
+  warnAbove,
+}: {
+  label: string
+  days: number | null
+  validFor: string | null
+  warnAbove: number
+}) {
+  const stale = days !== null && days > warnAbove
+  return (
+    <div className="flex items-baseline gap-2 mt-1.5">
+      <span className="text-[10.5px] text-slate-400 w-[52px]">{label}</span>
+      {days === null ? (
+        <span className="pill pill-bad">no data</span>
+      ) : (
+        <>
+          <span className={`text-[13px] font-bold ${stale ? 'text-risk-red' : 'text-green'}`}>{days}d</span>
+          <span className="text-[10px] text-slate-400">{validFor}</span>
+        </>
+      )}
+    </div>
+  )
+}
+
+function AgeChip({ validFor, warnAbove }: { validFor: string; warnAbove: number }) {
+  const days = Math.max(0, Math.round((Date.now() - new Date(validFor).getTime()) / 86_400_000))
+  return (
+    <span className={`pill ${days > warnAbove ? 'pill-bad' : 'pill-ok'}`}>{days}d</span>
+  )
+}
+
+function Delta({
+  value,
+  suffix,
+  goodWhenPositive,
+}: {
+  value: number | null
+  suffix: string
+  goodWhenPositive?: boolean
+}) {
+  if (value === null) return <span className="text-slate-400">—</span>
+  const bad = goodWhenPositive ? value < -20 : value > 1.5
+  return (
+    <span className={bad ? 'text-risk-red font-semibold' : 'text-slate-600'}>
+      {value > 0 ? '+' : ''}
+      {value}
+      {suffix}
+    </span>
+  )
+}

src/features/officer/EnterpriseDetailPage.tsx

@@ -0,0 +1,339 @@
+import { useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { officerSession } from '../../lib/api'
+import type { Enterprise } from '../../lib/api'
+import {
+  ActionChip,
+  Card,
+  DriverBar,
+  Empty,
+  GhostBtn,
+  PrimaryBtn,
+  RiskBadge,
+  ScoreDial,
+  Sparkline,
+  StatusPill,
+} from '../../components/ui/bits'
+import { ForecastFan } from '../../components/charts/ForecastFan'
+import { SubScoreRadar } from '../../components/charts/SubScoreRadar'
+import {
+  DRIVER_META,
+  SECTORS,
+  breachPoint,
+  findEnterprise,
+  forecastFor,
+  reasonCodesFor,
+  stressScoreFor,
+  subScoresFor,
+  tripWiresFor,
+} from '../../lib/demo/enterprises'
+import { inr, inrCompact, monthRef } from '../../lib/demo/seed'
+import { loadLedger } from '../../lib/ledgerStore'
+import { CATEGORIES } from '../../lib/ledgerStore'
+import { useVisits } from '../../lib/visitStore'
+import { ScheduleVisitModal } from './ScheduleVisitModal'
+
+type Tab = 'OVERVIEW' | 'FORECAST' | 'DRIVERS' | 'LEDGER' | 'VISITS'
+
+const TABS: { key: Tab; label: string }[] = [
+  { key: 'OVERVIEW', label: 'Overview' },
+  { key: 'FORECAST', label: 'Forecast' },
+  { key: 'DRIVERS', label: 'Drivers' },
+  { key: 'LEDGER', label: 'Ledger' },
+  { key: 'VISITS', label: 'Visits' },
+]
+
+/** Everything the officer needs about one enterprise, in five tabs. */
+export function EnterpriseDetailPage() {
+  const { enterpriseId = '' } = useParams()
+  const navigate = useNavigate()
+  const [tab, setTab] = useState<Tab>('OVERVIEW')
+  const [scheduling, setScheduling] = useState(false)
+
+  const e = findEnterprise(enterpriseId)
+  if (!e) return <Empty text={`No enterprise found for ${enterpriseId}.`} />
+
+  const points = forecastFor(e)
+  const breach = breachPoint(points)
+  const breachRef = breach ? monthRef(new Date(`${breach.month}-01T00:00:00`)) : null
+
+  return (
+    <div>
+      {/* ── header ─────────────────────────────────────────── */}
+      <div className="flex items-start gap-4 mb-4">
+        <button onClick={() => navigate(-1)} className="text-[11.5px] text-slate-400 hover:text-forest mt-1">
+          ← Back
+        </button>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-[19px] font-bold text-forest">{e.name}</h1>
+            <RiskBadge band={e.band} />
+          </div>
+          <div className="text-[11.5px] text-slate-500">
+            {e.enterpriseId} · {SECTORS[e.sector].label} · {e.block} block, {e.district} district ·{' '}
+            {e.vintageMonths} months on book
+          </div>
+        </div>
+        <div className="ml-auto flex gap-2">
+          <PrimaryBtn onClick={() => setScheduling(true)}>Schedule visit</PrimaryBtn>
+          <GhostBtn onClick={() => setTab('FORECAST')}>Full forecast</GhostBtn>
+        </div>
+      </div>
+
+      {breach && (
+        <div className="bg-risk-soft border border-risk-red/20 rounded-lg px-4 py-2.5 mb-4 flex items-center gap-3">
+          <span className="w-6 h-6 rounded-full bg-risk-red text-white grid place-items-center text-[12px] font-bold shrink-0">
+            !
+          </span>
+          <p className="text-[12px] text-slate-700">
+            Downside case fails to cover obligations from <b>{breachRef?.fullEn}</b> — projected gap{' '}
+            <b className="text-risk-red">{inr(breach.obligation - breach.p10)}</b> at P10.
+          </p>
+        </div>
+      )}
+
+      <div className="flex gap-1.5 mb-4">
+        {TABS.map((t) => (
+          <ActionChip key={t.key} active={tab === t.key} onClick={() => setTab(t.key)}>
+            {t.label}
+          </ActionChip>
+        ))}
+      </div>
+
+      {tab === 'OVERVIEW' && <OverviewTab e={e} />}
+      {tab === 'FORECAST' && <ForecastTab e={e} />}
+      {tab === 'DRIVERS' && <DriversTab e={e} />}
+      {tab === 'LEDGER' && <LedgerTab e={e} />}
+      {tab === 'VISITS' && <VisitsTab e={e} />}
+
+      {scheduling && <ScheduleVisitModal enterprise={e} onClose={() => setScheduling(false)} />}
+    </div>
+  )
+}
+
+function OverviewTab({ e }: { e: Enterprise }) {
+  const score = stressScoreFor(e)
+  const reasons = reasonCodesFor(e)
+  return (
+    <div className="grid gap-4 lg:grid-cols-3">
+      <Card title="Composite Stress Score" badge={score.modelVersion}>
+        <div className="p-4 grid place-items-center">
+          <ScoreDial score={e.score} band={e.band} size={132} />
+          <div className="mt-3 w-full">
+            <Sparkline values={e.trend} band={e.band} width={240} height={44} />
+            <div className="text-[10px] text-slate-400 text-center mt-1">6-month score history</div>
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Institutional record">
+        <dl className="p-4 space-y-2.5 text-[12px]">
+          {[
+            ['Loan outstanding', inr(e.loanOutstanding)],
+            ['Monthly instalment', inr(e.monthlyInstalment)],
+            ['Sector pack', SECTORS[e.sector].label],
+            ['Block / district', `${e.block} / ${e.district}`],
+            ['Owners on record', String(e.ownerCount)],
+            ['Vintage', `${e.vintageMonths} months`],
+          ].map(([k, v]) => (
+            <div key={k} className="flex justify-between gap-3">
+              <dt className="text-slate-500">{k}</dt>
+              <dd className="font-semibold text-slate-700">{v}</dd>
+            </div>
+          ))}
+        </dl>
+      </Card>
+
+      <Card title="Why this score" badge="SHAP">
+        <div className="p-4 space-y-3">
+          {reasons.map((r) => (
+            <div key={r.driver} className="border-l-[3px] border-amber pl-2.5">
+              <div className="text-[11px] font-semibold text-slate-700">
+                {r.driver} <span className="font-mono text-slate-400">· {r.weight}</span>
+              </div>
+              <p className="text-[11.5px] text-slate-600 leading-snug">{r.sentenceEn}</p>
+              <p className="text-[11px] text-slate-400 leading-snug">{r.sentenceHi}</p>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+function ForecastTab({ e }: { e: Enterprise }) {
+  const points = forecastFor(e)
+  return (
+    <div className="grid gap-4 lg:grid-cols-3">
+      <Card title="Net cash position — 6-month quantile forecast" className="lg:col-span-2">
+        <div className="p-4">
+          <ForecastFan points={points} height={280} />
+        </div>
+      </Card>
+
+      <Card title="Month by month">
+        <div className="overflow-x-auto">
+          <table className="ul-table">
+            <thead>
+              <tr>
+                <th>Month</th>
+                <th className="text-right">P10</th>
+                <th className="text-right">P50</th>
+                <th className="text-right">Due</th>
+              </tr>
+            </thead>
+            <tbody>
+              {points.map((p) => {
+                const short = p.p10 < p.obligation
+                return (
+                  <tr key={p.month} className={short ? '!bg-risk-soft' : ''}>
+                    <td className="font-semibold text-slate-700">{p.label}</td>
+                    <td className={`text-right ${short ? 'text-risk-red font-bold' : 'text-slate-600'}`}>
+                      {inrCompact(p.p10)}
+                    </td>
+                    <td className="text-right text-slate-600">{inrCompact(p.p50)}</td>
+                    <td className="text-right text-slate-500">{inrCompact(p.obligation)}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+        <p className="px-3.5 py-2 text-[10.5px] text-slate-400 border-t border-slate-100">
+          Rows in red are months where the downside case does not cover what is due.
+        </p>
+      </Card>
+    </div>
+  )
+}
+
+function DriversTab({ e }: { e: Enterprise }) {
+  const sub = subScoresFor(e)
+  const wires = tripWiresFor(e)
+  return (
+    <div className="grid gap-4 lg:grid-cols-2">
+      <Card title="Five risk families" badge={`${SECTORS[e.sector].label} weights`}>
+        <div className="p-4">
+          <SubScoreRadar sub={sub} band={e.band} />
+          <div className="space-y-2 mt-4">
+            {DRIVER_META.map((d) => (
+              <DriverBar key={d.key} label={d.label} weight={sub[d.key]} />
+            ))}
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Deterministic trip-wires" badge="rule engine">
+        <div className="overflow-x-auto">
+          <table className="ul-table">
+            <thead>
+              <tr>
+                <th>Code</th>
+                <th>Rule</th>
+                <th>Threshold</th>
+                <th>State</th>
+              </tr>
+            </thead>
+            <tbody>
+              {wires.map((w) => (
+                <tr key={w.code}>
+                  <td className="font-mono text-[10.5px] text-slate-500">{w.code}</td>
+                  <td>
+                    <span className="block font-semibold text-slate-700">{w.label}</span>
+                    <span className="block text-[10.5px] text-slate-400">{w.detail}</span>
+                  </td>
+                  <td className="font-mono text-[10.5px] text-slate-500">{w.threshold}</td>
+                  <td>
+                    <span className={`pill ${w.fired ? 'pill-bad' : 'pill-mut'}`}>{w.fired ? 'Fired' : 'Clear'}</span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <p className="px-3.5 py-2 text-[10.5px] text-slate-400 border-t border-slate-100">
+          Trip-wires fire independently of the model, so every alert stays auditable.
+        </p>
+      </Card>
+    </div>
+  )
+}
+
+function LedgerTab({ e }: { e: Enterprise }) {
+  const entries = loadLedger(e.enterpriseId).slice(0, 40)
+  const label = (kind: string, code: string) =>
+    CATEGORIES[kind as keyof typeof CATEGORIES]?.find((c) => c.code === code)?.en ?? code
+
+  return (
+    <Card title="Three-tap ledger — last 40 entries" badge="owner-reported">
+      <div className="overflow-x-auto max-h-[520px] overflow-y-auto">
+        <table className="ul-table">
+          <thead className="sticky top-0">
+            <tr>
+              <th>Date</th>
+              <th>Type</th>
+              <th>Category</th>
+              <th className="text-right">Amount</th>
+              <th>Sync</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((l) => (
+              <tr key={l.id}>
+                <td className="text-slate-600">{l.entryDate}</td>
+                <td>
+                  <span className={`pill ${l.kind === 'IN' ? 'pill-ok' : l.kind === 'OUT' ? 'pill-bad' : 'pill-info'}`}>
+                    {l.kind === 'IN' ? 'Money in' : l.kind === 'OUT' ? 'Money out' : 'Stock'}
+                  </span>
+                </td>
+                <td className="text-slate-600">{label(l.kind, l.category)}</td>
+                <td className="text-right font-semibold text-slate-700">{inr(l.amount)}</td>
+                <td>
+                  <StatusPill status={l.syncState} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {!entries.length && <Empty text="This enterprise has not recorded any entries yet." />}
+    </Card>
+  )
+}
+
+function VisitsTab({ e }: { e: Enterprise }) {
+  const { visits } = useVisits('ALL', officerSession()?.fullName ?? 'Field Officer')
+  const mine = visits.filter((v) => v.enterpriseId === e.enterpriseId)
+
+  return (
+    <Card title="Field visits and interventions">
+      <div className="overflow-x-auto">
+        <table className="ul-table">
+          <thead>
+            <tr>
+              <th>Visit</th>
+              <th>Action</th>
+              <th>Due</th>
+              <th>State</th>
+              <th>Outcome</th>
+            </tr>
+          </thead>
+          <tbody>
+            {mine.map((v) => (
+              <tr key={v.visitId}>
+                <td className="font-mono text-[10.5px] text-slate-500">{v.visitId}</td>
+                <td className="text-slate-700 whitespace-normal">{v.action}</td>
+                <td className="text-slate-600">{v.dueDate}</td>
+                <td>
+                  <StatusPill status={v.state} />
+                </td>
+                <td className="text-slate-500 whitespace-normal max-w-[320px]">{v.outcome ?? '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {!mine.length && <Empty text="No visit scheduled for this enterprise yet." />}
+    </Card>
+  )
+}

src/features/officer/EnterprisesPage.tsx

@@ -0,0 +1,152 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { get } from '../../lib/api'
+import type { Band, Enterprise, Sector } from '../../lib/api'
+import { ActionChip, Empty, GhostBtn, RiskBadge, Sparkline, inputCls } from '../../components/ui/bits'
+import { SECTORS, SECTOR_LIST } from '../../lib/demo/enterprises'
+import { scopedEnterprises } from '../../lib/demo/ops'
+import { inrCompact } from '../../lib/demo/seed'
+import { exportCsv } from '../../lib/csv'
+import { useScope } from './officerScope'
+
+const BAND_FILTERS: { key: Band | 'ALL'; label: string }[] = [
+  { key: 'ALL', label: 'All bands' },
+  { key: 'RED', label: 'High risk' },
+  { key: 'WATCH', label: 'Watch' },
+  { key: 'STANDARD', label: 'Standard' },
+]
+
+/** The full enterprise register — searchable and filterable, feeding the detail page. */
+export function EnterprisesPage() {
+  const navigate = useNavigate()
+  const { block } = useScope()
+  const [q, setQ] = useState('')
+  const [band, setBand] = useState<Band | 'ALL'>('ALL')
+  const [sector, setSector] = useState<Sector | 'ALL'>('ALL')
+
+  const { data } = useQuery({
+    queryKey: ['enterprises', block],
+    queryFn: () => get<Enterprise[]>('/officer/enterprises', { block }),
+  })
+
+  const all = data ?? scopedEnterprises(block)
+
+  const rows = useMemo(() => {
+    const needle = q.trim().toLowerCase()
+    return all.filter(
+      (e) =>
+        (band === 'ALL' || e.band === band) &&
+        (sector === 'ALL' || e.sector === sector) &&
+        (!needle || e.name.toLowerCase().includes(needle) || e.enterpriseId.toLowerCase().includes(needle)),
+    )
+  }, [all, band, sector, q])
+
+  function handleExport() {
+    exportCsv(
+      `udyamlinc-enterprises-${block}.csv`,
+      ['Enterprise ID', 'Name', 'Sector', 'Block', 'District', 'Score', 'Band', 'Vintage (months)', 'Outstanding', 'Instalment'],
+      rows.map((e) => [
+        e.enterpriseId,
+        e.name,
+        SECTORS[e.sector].label,
+        e.block,
+        e.district,
+        e.score,
+        e.band,
+        e.vintageMonths,
+        e.loanOutstanding,
+        e.monthlyInstalment,
+      ]),
+    )
+  }
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center gap-2 mb-3">
+        <input
+          className={`${inputCls} max-w-[260px]`}
+          placeholder="Search enterprise or ID…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+        />
+        <select
+          className={`${inputCls} max-w-[170px]`}
+          value={sector}
+          onChange={(e) => setSector(e.target.value as Sector | 'ALL')}
+        >
+          <option value="ALL">All sectors</option>
+          {SECTOR_LIST.map((s) => (
+            <option key={s} value={s}>
+              {SECTORS[s].label}
+            </option>
+          ))}
+        </select>
+        <div className="flex gap-1.5">
+          {BAND_FILTERS.map((b) => (
+            <ActionChip key={b.key} active={band === b.key} onClick={() => setBand(b.key)}>
+              {b.label}
+            </ActionChip>
+          ))}
+        </div>
+        <span className="text-[11px] text-slate-500 ml-1">{rows.length} enterprises</span>
+        <GhostBtn className="ml-auto" onClick={handleExport}>
+          Export CSV
+        </GhostBtn>
+      </div>
+
+      <div className="bg-white border border-slate-200 rounded-[11px] overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="ul-table">
+            <thead>
+              <tr>
+                <th>Enterprise</th>
+                <th>Sector</th>
+                <th>Block</th>
+                <th className="text-right">Vintage</th>
+                <th className="text-right">Outstanding</th>
+                <th className="text-right">Instalment</th>
+                <th className="text-right">Score</th>
+                <th>Status</th>
+                <th>Trend</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((e) => (
+                <tr
+                  key={e.enterpriseId}
+                  className="cursor-pointer"
+                  onClick={() => navigate(`/officer/enterprises/${e.enterpriseId}`)}
+                >
+                  <td>
+                    <span className="block font-semibold text-slate-700">{e.name}</span>
+                    <span className="block font-mono text-[10px] text-slate-400">{e.enterpriseId}</span>
+                  </td>
+                  <td className="text-slate-600">{SECTORS[e.sector].short}</td>
+                  <td className="text-slate-600">{e.block}</td>
+                  <td className="text-right text-slate-600">{e.vintageMonths} mo</td>
+                  <td className="text-right text-slate-600">{inrCompact(e.loanOutstanding)}</td>
+                  <td className="text-right text-slate-600">{inrCompact(e.monthlyInstalment)}</td>
+                  <td
+                    className={`text-right font-bold ${
+                      e.band === 'RED' ? 'text-risk-red' : e.band === 'WATCH' ? 'text-amber' : 'text-green'
+                    }`}
+                  >
+                    {e.score}
+                  </td>
+                  <td>
+                    <RiskBadge band={e.band} />
+                  </td>
+                  <td>
+                    <Sparkline values={e.trend} band={e.band} />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {!rows.length && <Empty text="No enterprise matches this filter." />}
+      </div>
+    </div>
+  )
+}

src/features/officer/ForecastsPage.tsx

@@ -0,0 +1,83 @@
+import { Card, KpiTile } from '../../components/ui/bits'
+import { ForecastFan } from '../../components/charts/ForecastFan'
+import { BandMigrationBar } from '../../components/charts/BandMigrationBar'
+import { bandMigration, portfolioForecast, sectorRollup } from '../../lib/demo/ops'
+import { inrCompact } from '../../lib/demo/seed'
+import { useScope } from './officerScope'
+
+/**
+ * Portfolio-level view of the same forecast the enterprise pages show one at a
+ * time: the h = 1…6 aggregate, how each sector pack is carrying risk, and how
+ * the book migrated between watchlist bands over the last six months.
+ */
+export function ForecastsPage() {
+  const { block } = useScope()
+  const aggregate = portfolioForecast(block)
+  const sectors = sectorRollup(block)
+  const migration = bandMigration(block)
+
+  const worst = aggregate.reduce((a, p) => (p.p10 - p.obligation < a.p10 - a.obligation ? p : a), aggregate[0])
+  const covered = aggregate.filter((p) => p.p10 >= p.obligation).length
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-3">
+        <KpiTile label="Horizon" value="6 months" delta="P10 / P50 / P90" />
+        <KpiTile label="Months covered at P10" value={`${covered} / 6`} tone={covered >= 5 ? 'good' : 'watch'} />
+        <KpiTile label="Tightest month" value={worst.label} delta={`P10 ${inrCompact(worst.p10)} vs ${inrCompact(worst.obligation)} due`} tone="red" />
+        <KpiTile label="Sector packs live" value={sectors.length} delta="each modelled separately" />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card title="Portfolio net cash position — mean of the book">
+          <div className="p-4">
+            <ForecastFan points={aggregate} height={260} />
+          </div>
+        </Card>
+
+        <Card title="Band migration — last 6 months">
+          <div className="p-4">
+            <BandMigrationBar rows={migration} height={260} />
+          </div>
+        </Card>
+      </div>
+
+      <Card title="Sector risk packs" badge="dairy · poultry · food proc. · handicrafts · rural retail">
+        <div className="overflow-x-auto">
+          <table className="ul-table">
+            <thead>
+              <tr>
+                <th>Sector pack</th>
+                <th className="text-right">Enterprises</th>
+                <th className="text-right">High risk</th>
+                <th className="text-right">Watch</th>
+                <th className="text-right">Standard</th>
+                <th className="text-right">Avg score</th>
+                <th>Mix</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sectors.map((s) => (
+                <tr key={s.sector}>
+                  <td className="font-semibold text-slate-700">{s.label}</td>
+                  <td className="text-right text-slate-600">{s.count}</td>
+                  <td className="text-right text-risk-red font-semibold">{s.red}</td>
+                  <td className="text-right text-amber font-semibold">{s.watch}</td>
+                  <td className="text-right text-green font-semibold">{s.standard}</td>
+                  <td className="text-right font-bold text-slate-700">{s.avgScore}</td>
+                  <td className="w-[180px]">
+                    <span className="flex h-[7px] rounded-full overflow-hidden bg-slate-100">
+                      <span className="bg-risk-red" style={{ width: `${(s.red / Math.max(1, s.count)) * 100}%` }} />
+                      <span className="bg-amber" style={{ width: `${(s.watch / Math.max(1, s.count)) * 100}%` }} />
+                      <span className="bg-green" style={{ width: `${(s.standard / Math.max(1, s.count)) * 100}%` }} />
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  )
+}

src/features/officer/OfficerDashboard.tsx

@@ -0,0 +1,248 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { get } from '../../lib/api'
+import type { Enterprise, PortfolioSummary } from '../../lib/api'
+import {
+  DriverBar,
+  GhostBtn,
+  KpiTile,
+  PrimaryBtn,
+  RiskBadge,
+  ScoreDial,
+  Sparkline,
+} from '../../components/ui/bits'
+import {
+  DRIVER_META,
+  SECTORS,
+  breachPoint,
+  forecastFor,
+  reasonCodesFor,
+  subScoresFor,
+} from '../../lib/demo/enterprises'
+import { portfolioSummary } from '../../lib/demo/ops'
+import { inr, monthRef } from '../../lib/demo/seed'
+import { exportCsv } from '../../lib/csv'
+import { useScope } from './officerScope'
+import { ScheduleVisitModal } from './ScheduleVisitModal'
+
+/**
+ * The console's home screen and the deck's headline wireframe: KPI tiles, the
+ * "Enterprises by risk" register, and a risk detail panel that explains the
+ * selected enterprise in the officer's own language.
+ */
+export function OfficerDashboard() {
+  const navigate = useNavigate()
+  const { block, month } = useScope()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [scheduling, setScheduling] = useState<Enterprise | null>(null)
+
+  const { data } = useQuery({
+    queryKey: ['portfolio', block, month],
+    queryFn: () => get<PortfolioSummary>('/officer/portfolio', { block, month }),
+  })
+
+  // Demo fallback: with the backend down, the screen still shows the full book.
+  const summary = data ?? portfolioSummary(block, month)
+  const rows = summary.rows
+
+  const selected = useMemo(
+    () => rows.find((e) => e.enterpriseId === selectedId) ?? rows[0],
+    [rows, selectedId],
+  )
+
+  function handleExport() {
+    exportCsv(
+      `udyamlinc-portfolio-${block}-${month}.csv`,
+      ['Enterprise ID', 'Name', 'Sector', 'Block', 'Score', 'Band', 'Loan outstanding', 'Instalment'],
+      rows.map((e) => [
+        e.enterpriseId,
+        e.name,
+        SECTORS[e.sector].label,
+        e.block,
+        e.score,
+        e.band,
+        e.loanOutstanding,
+        e.monthlyInstalment,
+      ]),
+    )
+  }
+
+  return (
+    <div>
+      {/* ── KPI tiles ─────────────────────────────────────── */}
+      <div className="flex flex-wrap gap-3 mb-4">
+        <KpiTile
+          label="Total enterprises"
+          value={summary.total}
+          delta={`${summary.totalDelta >= 0 ? '+' : ''}${summary.totalDelta} this month`}
+        />
+        <KpiTile
+          label="High risk"
+          value={summary.red}
+          delta={`${summary.redDelta >= 0 ? '+' : ''}${summary.redDelta} since last week`}
+          tone="red"
+        />
+        <KpiTile
+          label="Watch"
+          value={summary.watch}
+          delta={`${summary.watchDelta >= 0 ? '+' : ''}${summary.watchDelta} since last week`}
+          tone="watch"
+        />
+        <KpiTile
+          label="Standard"
+          value={summary.standard}
+          delta={summary.standardDelta === 0 ? 'stable' : `${summary.standardDelta > 0 ? '+' : ''}${summary.standardDelta} since last week`}
+          tone="good"
+        />
+      </div>
+
+      <div className="flex gap-4 items-start flex-col xl:flex-row">
+        {/* ── enterprises by risk ─────────────────────────── */}
+        <div className="flex-1 min-w-0 bg-white border border-slate-200 rounded-[11px] overflow-hidden">
+          <div className="px-4 py-2.5 border-b border-slate-200 flex items-center">
+            <h3 className="text-[12.5px] font-bold text-forest">Enterprises by risk</h3>
+            <span className="text-[10px] text-slate-400 ml-2">updated {summary.updatedMinutesAgo} minutes ago</span>
+            <GhostBtn className="ml-auto" onClick={handleExport}>
+              Export CSV
+            </GhostBtn>
+          </div>
+
+          <div className="overflow-x-auto max-h-[560px] overflow-y-auto">
+            <table className="ul-table">
+              <thead className="sticky top-0 z-10">
+                <tr>
+                  <th>Enterprise</th>
+                  <th>Sector</th>
+                  <th>Block</th>
+                  <th className="text-right">Score</th>
+                  <th>Status</th>
+                  <th>6-month trend</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {rows.slice(0, 40).map((e) => (
+                  <tr
+                    key={e.enterpriseId}
+                    onClick={() => setSelectedId(e.enterpriseId)}
+                    className={`cursor-pointer ${e.enterpriseId === selected?.enterpriseId ? '!bg-green-soft' : ''}`}
+                  >
+                    <td>
+                      <div className="flex items-center gap-2.5">
+                        <span
+                          className={`w-6 h-6 rounded-full grid place-items-center text-[10px] font-bold ${
+                            e.band === 'RED' ? 'band-red' : e.band === 'WATCH' ? 'band-watch' : 'band-standard'
+                          }`}
+                        >
+                          {e.name[0]}
+                        </span>
+                        <span className="leading-tight">
+                          <span className="block font-semibold text-slate-700">{e.name}</span>
+                          <span className="block font-mono text-[10px] text-slate-400">{e.enterpriseId}</span>
+                        </span>
+                      </div>
+                    </td>
+                    <td className="text-slate-600">{SECTORS[e.sector].short}</td>
+                    <td className="text-slate-600">{e.block}</td>
+                    <td
+                      className={`text-right font-bold ${
+                        e.band === 'RED' ? 'text-risk-red' : e.band === 'WATCH' ? 'text-amber' : 'text-green'
+                      }`}
+                    >
+                      {e.score}
+                    </td>
+                    <td>
+                      <RiskBadge band={e.band} />
+                    </td>
+                    <td>
+                      <Sparkline values={e.trend} band={e.band} />
+                    </td>
+                    <td className="text-right">
+                      <button
+                        onClick={(ev) => {
+                          ev.stopPropagation()
+                          navigate(`/officer/enterprises/${e.enterpriseId}`)
+                        }}
+                        className="text-slate-400 hover:text-forest px-1"
+                        aria-label={`Open ${e.name}`}
+                      >
+                        ⋯
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {rows.length > 40 && (
+            <div className="px-4 py-2 border-t border-slate-100 text-[10.5px] text-slate-400">
+              Showing the 40 highest-risk of {rows.length} — the full register is under Enterprises.
+            </div>
+          )}
+        </div>
+
+        {/* ── risk detail ─────────────────────────────────── */}
+        {selected && <RiskDetail enterprise={selected} onSchedule={() => setScheduling(selected)} />}
+      </div>
+
+      {scheduling && <ScheduleVisitModal enterprise={scheduling} onClose={() => setScheduling(null)} />}
+    </div>
+  )
+}
+
+/** Right-hand panel: score dial, top drivers, the reason sentence and two actions. */
+function RiskDetail({ enterprise, onSchedule }: { enterprise: Enterprise; onSchedule: () => void }) {
+  const navigate = useNavigate()
+  const sub = subScoresFor(enterprise)
+  const reason = reasonCodesFor(enterprise)[0]
+  const points = forecastFor(enterprise)
+  const breach = breachPoint(points)
+  const breachRef = breach ? monthRef(new Date(`${breach.month}-01T00:00:00`)) : null
+
+  return (
+    <div className="w-full xl:w-[320px] shrink-0 bg-white border border-slate-200 rounded-[11px] overflow-hidden">
+      <div className="px-4 py-2.5 border-b border-slate-200">
+        <h3 className="text-[12.5px] font-bold text-forest">Risk detail</h3>
+        <div className="text-[10.5px] text-slate-500">
+          {enterprise.name} · {enterprise.enterpriseId}
+        </div>
+      </div>
+
+      <div className="p-4">
+        <div className="grid place-items-center mb-4">
+          <ScoreDial score={enterprise.score} band={enterprise.band} size={116} />
+        </div>
+
+        <div className="font-mono text-[9.5px] tracking-[0.12em] text-slate-400 mb-2">TOP DRIVERS</div>
+        <div className="space-y-2 mb-4">
+          {DRIVER_META.map((d) => (
+            <DriverBar key={d.key} label={d.label} weight={sub[d.key]} />
+          ))}
+        </div>
+
+        <div className="bg-risk-soft border border-risk-red/15 rounded-lg px-3 py-2.5 mb-4">
+          <p className="text-[11.5px] text-slate-700 leading-relaxed">
+            {reason.sentenceEn}
+            {breachRef && ` Shortfall expected by ${breachRef.fullEn}.`}
+          </p>
+          {breach && (
+            <p className="text-[10.5px] text-risk-red font-semibold mt-1.5">
+              Projected gap {inr(breach.obligation - breach.p10)} at P10
+            </p>
+          )}
+        </div>
+
+        <div className="flex gap-2">
+          <PrimaryBtn className="flex-1" onClick={onSchedule}>
+            Schedule visit
+          </PrimaryBtn>
+          <GhostBtn className="flex-1" onClick={() => navigate(`/officer/enterprises/${enterprise.enterpriseId}`)}>
+            Full forecast
+          </GhostBtn>
+        </div>
+      </div>
+    </div>
+  )
+}

src/features/officer/OfficerShell.tsx

@@ -0,0 +1,220 @@
+import { NavLink, Outlet, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { clearSessions, get, officerSession } from '../../lib/api'
+import type { Freshness } from '../../lib/api'
+import { demoFreshness, worstStaleness } from '../../lib/demo/feeds'
+import { UdyamMark } from '../../components/ui/bits'
+import { BLOCKS } from '../../lib/demo/enterprises'
+import { ALL_BLOCKS, alertsFor, weeklyVisitProgress } from '../../lib/demo/ops'
+import { monthRef, monthWindow } from '../../lib/demo/seed'
+import { OfficerScopeProvider, useScope } from './officerScope'
+
+/*
+ * Field officer console shell — dark forest sidebar on the left, identity bar
+ * across the top, work area on the right. This is the layout on the deck's
+ * wireframe slide; it deliberately differs from BharatLinc's horizontal MegaNav
+ * because the console is navigated by module, not by tab.
+ */
+
+const NAV: { label: string; to: string; end?: boolean }[] = [
+  { label: 'Dashboard', to: '/officer', end: true },
+  { label: 'Enterprises', to: '/officer/enterprises' },
+  { label: 'Risk alerts', to: '/officer/alerts' },
+  { label: 'Forecasts', to: '/officer/forecasts' },
+  { label: 'Field visits', to: '/officer/visits' },
+  { label: 'Trip-wires', to: '/officer/rules' },
+  { label: 'Data feeds', to: '/officer/feeds' },
+  { label: 'Reports', to: '/officer/reports' },
+  { label: 'Settings', to: '/officer/settings' },
+]
+
+/**
+ * Data age, in the chrome rather than on a screen someone has to go and find.
+ *
+ * <p>A score computed from a three-week-old mandi price looks exactly like one
+ * computed this morning, so the age travels with every screen. Amber past ten
+ * days, which is the tolerance the price-derived features carry.
+ */
+function FreshnessChip() {
+  const { data, isError } = useQuery({
+    queryKey: ['freshness'],
+    queryFn: () => get<Freshness[]>('/admin/ingestion/freshness'),
+  })
+  const rows = data ?? demoFreshness()
+  const worst = worstStaleness(rows)
+  const stale = worst > 10
+
+  return (
+    <NavLink
+      to="/officer/feeds"
+      className={`pill ${stale ? 'pill-bad' : 'pill-ok'} !text-[10px]`}
+      title={
+        isError
+          ? 'Showing demo freshness — the backend is not reachable'
+          : rows.map((r) => `${r.districtName}: mandi ${r.marketStalenessDays ?? '—'}d`).join(' · ')
+      }
+    >
+      Data {worst}d old
+    </NavLink>
+  )
+}
+
+export function OfficerShell() {
+  return (
+    <OfficerScopeProvider>
+      <ShellBody />
+    </OfficerScopeProvider>
+  )
+}
+
+function ShellBody() {
+  const navigate = useNavigate()
+  const session = officerSession()
+  const { block, month, setBlock, setMonth } = useScope()
+  const openAlerts = alertsFor(block).filter((a) => a.state === 'OPEN').length
+  const progress = weeklyVisitProgress(block)
+  const months = monthWindow(4, -3).reverse() // current month first, three back
+
+  const initials = (session?.fullName ?? 'Field Officer')
+    .split(' ')
+    .map((w) => w[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+
+  function signOut() {
+    clearSessions()
+    navigate('/login', { replace: true })
+  }
+
+  return (
+    <div className="min-h-screen flex bg-[#f4f7f5]">
+      {/* ── sidebar ─────────────────────────────────────────── */}
+      <aside className="w-[212px] shrink-0 bg-forest-deep text-white flex flex-col sticky top-0 h-screen">
+        <div className="px-4 py-4 flex items-center gap-2.5 border-b border-white/10">
+          <UdyamMark size={24} onDark />
+          <div className="leading-tight">
+            <div className="text-[14px] font-bold">
+              Udyam<span className="text-amber-hi">Linc</span>
+            </div>
+            <div className="text-[9px] text-[#8fae9c] font-mono tracking-[0.1em]">FIELD OFFICER CONSOLE</div>
+          </div>
+        </div>
+
+        <nav className="flex-1 py-3 overflow-y-auto">
+          {NAV.map((n) => (
+            <NavLink
+              key={n.to}
+              to={n.to}
+              end={n.end}
+              className={({ isActive }) =>
+                [
+                  'flex items-center gap-2.5 px-4 py-[9px] text-[12px] font-medium border-l-[3px] transition-colors',
+                  isActive
+                    ? 'bg-white/[0.08] text-white border-amber font-semibold'
+                    : 'text-[#a9c4b5] border-transparent hover:bg-white/[0.05] hover:text-white',
+                ].join(' ')
+              }
+            >
+              <span className="w-2.5 h-2.5 rounded-[3px] bg-current opacity-70" />
+              {n.label}
+              {n.to === '/officer/alerts' && openAlerts > 0 && (
+                <span className="ml-auto bg-risk-red text-white text-[9.5px] font-bold px-1.5 rounded-full">
+                  {openAlerts}
+                </span>
+              )}
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* weekly visit progress — the card pinned to the sidebar on the deck */}
+        <div className="m-3 rounded-lg bg-white/[0.07] border border-white/10 px-3 py-2.5">
+          <div className="text-[9.5px] text-[#8fae9c] font-mono tracking-[0.1em]">THIS WEEK</div>
+          <div className="text-[22px] font-bold leading-tight">
+            {progress.done} <span className="text-[13px] text-[#8fae9c]">/ {progress.target}</span>
+          </div>
+          <div className="text-[9.5px] text-[#8fae9c] mb-1.5">high-risk visits done</div>
+          <div className="h-[5px] rounded-full bg-white/15 overflow-hidden">
+            <div
+              className="h-full rounded-full bg-green-hi"
+              style={{ width: `${Math.min(100, (progress.done / progress.target) * 100)}%` }}
+            />
+          </div>
+        </div>
+      </aside>
+
+      {/* ── work area ───────────────────────────────────────── */}
+      <div className="flex-1 min-w-0 flex flex-col">
+        <header className="bg-white border-b border-slate-200 px-6 py-2.5 flex items-center gap-3 sticky top-0 z-30">
+          <div className="min-w-0">
+            <div className="text-[13.5px] font-bold text-forest leading-tight">Portfolio overview</div>
+            <div className="text-[10.5px] text-slate-500 truncate">
+              {block === ALL_BLOCKS ? (session?.branch ?? 'All blocks') : `${block} block`} · {monthRef(new Date(`${month}-01T00:00:00`)).fullEn}
+            </div>
+          </div>
+
+          <div className="ml-auto flex items-center gap-2">
+            <FreshnessChip />
+
+            <select
+              value={block}
+              onChange={(e) => setBlock(e.target.value)}
+              className="border border-slate-300 rounded-md px-2 py-1 text-[11.5px] bg-white outline-none focus:border-green"
+              aria-label="Block scope"
+            >
+              <option value={ALL_BLOCKS}>All blocks</option>
+              {BLOCKS.map((b) => (
+                <option key={b} value={b}>
+                  {b}
+                </option>
+              ))}
+            </select>
+
+            <select
+              value={month}
+              onChange={(e) => setMonth(e.target.value)}
+              className="border border-slate-300 rounded-md px-2 py-1 text-[11.5px] bg-white outline-none focus:border-green"
+              aria-label="Month scope"
+            >
+              {months.map((m) => (
+                <option key={m.key} value={m.key}>
+                  {m.fullEn}
+                </option>
+              ))}
+            </select>
+
+            <NavLink
+              to="/officer/alerts"
+              className="relative w-8 h-8 grid place-items-center rounded-full hover:bg-slate-100"
+              aria-label={`${openAlerts} open alerts`}
+            >
+              <span className="text-[14px]">🔔</span>
+              {openAlerts > 0 && <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-risk-red" />}
+            </NavLink>
+
+            <div className="flex items-center gap-2 pl-2 border-l border-slate-200">
+              <span className="w-7 h-7 rounded-full bg-forest text-white grid place-items-center text-[10.5px] font-bold">
+                {initials}
+              </span>
+              <div className="leading-tight">
+                <div className="text-[11.5px] font-semibold text-slate-700">{session?.fullName ?? 'Field Officer'}</div>
+                <div className="text-[9.5px] text-slate-400">Field Officer</div>
+              </div>
+              <button onClick={signOut} className="text-[10.5px] text-slate-400 hover:text-risk-red ml-1">
+                Sign out
+              </button>
+            </div>
+          </div>
+        </header>
+
+        <main className="flex-1 px-6 py-4 max-w-[1560px] w-full">
+          <Outlet />
+        </main>
+
+        <footer className="text-center text-[10px] text-slate-400 py-3 font-mono">
+          UdyamLinc · Predicting stress. Protecting enterprises. — Team LincFusion, LincPay Solutions Pvt. Ltd.
+        </footer>
+      </div>
+    </div>
+  )
+}

src/features/officer/ReportsPage.tsx

@@ -0,0 +1,149 @@
+import { Card, GhostBtn, KpiTile } from '../../components/ui/bits'
+import { ModelComparisonBar } from '../../components/charts/ModelComparisonBar'
+import { SECTORS } from '../../lib/demo/enterprises'
+import { BENCHMARKS, alertsFor, scopedEnterprises, sectorRollup, visitsFor } from '../../lib/demo/ops'
+import { exportCsv } from '../../lib/csv'
+import { useScope } from './officerScope'
+
+/**
+ * MIS exports and the supervisory pack. The model figures are the ones the deck
+ * publishes — measured on the simulated 2,400-enterprise dataset, not on live
+ * institutional data, and labelled as such.
+ */
+export function ReportsPage() {
+  const { block, month } = useScope()
+  const enterprises = scopedEnterprises(block)
+  const alerts = alertsFor(block)
+  const visits = visitsFor(block)
+
+  const REPORTS: { name: string; detail: string; run: () => void }[] = [
+    {
+      name: 'Portfolio register',
+      detail: 'Every enterprise with its band, score and obligations.',
+      run: () =>
+        exportCsv(
+          `udyam-portfolio-${block}-${month}.csv`,
+          ['Enterprise ID', 'Name', 'Sector', 'Block', 'Score', 'Band', 'Outstanding', 'Instalment'],
+          enterprises.map((e) => [
+            e.enterpriseId,
+            e.name,
+            SECTORS[e.sector].label,
+            e.block,
+            e.score,
+            e.band,
+            e.loanOutstanding,
+            e.monthlyInstalment,
+          ]),
+        ),
+    },
+    {
+      name: 'Early warning register',
+      detail: 'Open and dispositioned alerts with reason codes and projected gaps.',
+      run: () =>
+        exportCsv(
+          `udyam-alerts-${block}-${month}.csv`,
+          ['Alert ID', 'Enterprise', 'Band', 'Origin', 'Score', 'Shortfall', 'Breach month', 'State', 'Reason'],
+          alerts.map((a) => [
+            a.alertId,
+            a.enterpriseName,
+            a.band,
+            a.origin,
+            a.score,
+            a.shortfall,
+            a.breachMonth,
+            a.state,
+            a.reason.sentenceEn,
+          ]),
+        ),
+    },
+    {
+      name: 'Intervention log',
+      detail: 'Field visits, recommended actions, due dates and recorded outcomes.',
+      run: () =>
+        exportCsv(
+          `udyam-visits-${block}-${month}.csv`,
+          ['Visit ID', 'Enterprise', 'Action', 'Block', 'Due', 'State', 'Outcome', 'Officer'],
+          visits.map((v) => [v.visitId, v.enterpriseName, v.action, v.block, v.dueDate, v.state, v.outcome ?? '', v.officer]),
+        ),
+    },
+    {
+      name: 'Sector pack summary',
+      detail: 'Band mix and average score for each of the five packs.',
+      run: () =>
+        exportCsv(
+          `udyam-sectors-${block}-${month}.csv`,
+          ['Sector', 'Enterprises', 'High risk', 'Watch', 'Standard', 'Average score'],
+          sectorRollup(block).map((s) => [s.label, s.count, s.red, s.watch, s.standard, s.avgScore]),
+        ),
+    },
+  ]
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-3">
+        <KpiTile label="AUC-ROC · 90-day stress" value={BENCHMARKS.aucRoc.toFixed(2)} delta="full signal set" tone="good" />
+        <KpiTile label="Median lead time" value={`${BENCHMARKS.medianLeadTimeMonths} mo`} delta="before first missed instalment" />
+        <KpiTile label="Alert precision · Red band" value={BENCHMARKS.alertPrecisionRed.toFixed(2)} delta="cost of a false positive is one visit" tone="watch" />
+        <KpiTile label="On-device scoring" value={`< ${BENCHMARKS.onDeviceLatencyMs} ms`} delta="zero connectivity" />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card title="Model comparison — 90-day stress detection (AUC-ROC)">
+          <div className="p-4">
+            <ModelComparisonBar />
+            <p className="text-[10.5px] text-slate-400 mt-2 leading-snug">
+              Measured on a simulated {BENCHMARKS.datasetSize.toLocaleString('en-IN')}-enterprise dataset across{' '}
+              {BENCHMARKS.sectorsCovered} sectors and {BENCHMARKS.districtsCovered} districts. Production calibration
+              will use institutional historical portfolios under a data-sharing agreement.
+            </p>
+          </div>
+        </Card>
+
+        <Card title="Validation method">
+          <ul className="p-4 space-y-2.5 text-[12px] text-slate-600">
+            {[
+              'Time-series split — no forward leakage across folds.',
+              'Backtested against simulated stress events.',
+              'Precision measured at the Red band, where the cost of a false positive is one visit.',
+              'Sector packs evaluated independently before pooling.',
+            ].map((t) => (
+              <li key={t} className="flex gap-2.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-green mt-1.5 shrink-0" />
+                {t}
+              </li>
+            ))}
+          </ul>
+        </Card>
+      </div>
+
+      <Card title="MIS exports" badge={`${block === 'ALL' ? 'all blocks' : block} · ${month}`}>
+        <div className="overflow-x-auto">
+          <table className="ul-table">
+            <thead>
+              <tr>
+                <th>Report</th>
+                <th>Contents</th>
+                <th className="text-right">Rows</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {REPORTS.map((r, i) => (
+                <tr key={r.name}>
+                  <td className="font-semibold text-slate-700">{r.name}</td>
+                  <td className="whitespace-normal text-slate-600">{r.detail}</td>
+                  <td className="text-right text-slate-500">
+                    {[enterprises.length, alerts.length, visits.length, sectorRollup(block).length][i]}
+                  </td>
+                  <td className="text-right">
+                    <GhostBtn onClick={r.run}>Download CSV</GhostBtn>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  )
+}

src/features/officer/RulesPage.tsx

@@ -0,0 +1,184 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { get } from '../../lib/api'
+import type { FeatureValueRow, RuleOutcome, RuleStatus, TripWireRule } from '../../lib/api'
+import { Card, Empty } from '../../components/ui/bits'
+import { DEMO_FEATURES, DEMO_RULES, demoFeatureValues, demoRuleOutcomes } from '../../lib/demo/feeds'
+import { scopedEnterprises } from '../../lib/demo/ops'
+import { useScope } from './officerScope'
+
+/**
+ * The trip-wires, and why each one did or did not fire.
+ *
+ * <p>The rules are deliberately independent of the model: they read features and
+ * never the score, so an alert one of them raised still stands after the model
+ * has been retrained. What this screen adds is the part that is otherwise
+ * invisible — a rule that is quiet because the enterprise is fine looks
+ * identical to a rule that is quiet because its feed has been down for a
+ * fortnight, and only one of those is good news.
+ */
+export function RulesPage() {
+  const { block } = useScope()
+  const enterprises = scopedEnterprises(block)
+  const [enterpriseId, setEnterpriseId] = useState(enterprises[0]?.enterpriseId ?? 'MSME-4417')
+
+  const rulesQ = useQuery({ queryKey: ['rules'], queryFn: () => get<TripWireRule[]>('/admin/rules') })
+  const outcomesQ = useQuery({
+    queryKey: ['rule-outcomes', enterpriseId],
+    queryFn: () => get<RuleOutcome[]>(`/admin/scoring/explain/${enterpriseId}`),
+  })
+  const valuesQ = useQuery({
+    queryKey: ['feature-values', enterpriseId],
+    queryFn: () => get<FeatureValueRow[]>(`/admin/features/values/${enterpriseId}`),
+  })
+
+  const demo = rulesQ.isError || outcomesQ.isError || valuesQ.isError
+  const rules = rulesQ.data ?? DEMO_RULES
+  const outcomes = outcomesQ.data ?? demoRuleOutcomes(enterpriseId)
+  const values = valuesQ.data ?? demoFeatureValues(enterpriseId)
+
+  const byCode = new Map(outcomes.map((o) => [o.ruleCode, o]))
+  const catalogue = new Map(DEMO_FEATURES.map((d) => [d.code, d]))
+
+  const blocked = outcomes.filter((o) => o.status.startsWith('SKIPPED')).length
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <div>
+          <h1 className="text-[15px] font-bold text-forest leading-tight">Trip-wires</h1>
+          <p className="text-[11px] text-slate-500">
+            Deterministic rules, evaluated against the feature snapshot and never against the score. Business teams
+            edit the thresholds; nobody deploys.
+          </p>
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          {demo && <span className="pill pill-pend">Demo data</span>}
+          <select
+            value={enterpriseId}
+            onChange={(e) => setEnterpriseId(e.target.value)}
+            className="border border-slate-300 rounded-md px-2 py-1 text-[11.5px] bg-white outline-none focus:border-green max-w-[280px]"
+            aria-label="Enterprise"
+          >
+            {enterprises.map((e) => (
+              <option key={e.enterpriseId} value={e.enterpriseId}>
+                {e.enterpriseId} · {e.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {blocked > 0 && (
+        <div className="rounded-lg border border-amber/40 bg-amber/[0.07] px-3.5 py-2.5 text-[11.5px] text-slate-700">
+          <b>{blocked} of {outcomes.length} rules could not run</b> for this enterprise — a required feature is
+          missing or too old. That is the rules working as intended, not a fault: acting on stale data is worse than
+          not acting. The reason for each is in the table below.
+        </div>
+      )}
+
+      <Card title="Rules" badge={`evaluated for ${enterpriseId}`}>
+        <div className="p-4 overflow-x-auto">
+          {rules.length === 0 ? (
+            <Empty text="No trip-wire rules configured." />
+          ) : (
+            <table className="ul-table w-full">
+              <thead>
+                <tr>
+                  <th>Code</th>
+                  <th>Rule</th>
+                  <th>Expression</th>
+                  <th>Severity</th>
+                  <th className="text-right">Tolerance</th>
+                  <th>Outcome</th>
+                  <th>Why</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rules.map((rule) => {
+                  const outcome = byCode.get(rule.code)
+                  return (
+                    <tr key={rule.code}>
+                      <td className="font-mono text-[11px]">{rule.code}</td>
+                      <td>
+                        <div className="font-medium text-slate-700">{rule.label}</div>
+                        <div className="text-[10.5px] text-slate-400">{rule.labelHi}</div>
+                      </td>
+                      <td className="font-mono text-[10.5px] text-slate-600 max-w-[240px]">{rule.expression}</td>
+                      <td>
+                        <span className={`pill ${rule.severity === 'RED' ? 'pill-bad' : 'pill-pend'}`}>
+                          {rule.severity}
+                        </span>
+                      </td>
+                      <td className="text-right text-slate-500">{rule.maxStalenessDays}d</td>
+                      <td>{outcome ? <OutcomePill status={outcome.status} /> : <span className="text-slate-400">—</span>}</td>
+                      <td className="text-[10.5px] text-slate-500 max-w-[260px]">{outcome?.detail ?? '—'}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </Card>
+
+      <Card title="Feature snapshot" badge="what the rules read">
+        <div className="p-4 overflow-x-auto">
+          <p className="text-[11.5px] text-slate-500 leading-snug mb-3">
+            A null value is a value: it records that we did not know, rather than that we never looked. The reason
+            column is why.
+          </p>
+          <table className="ul-table w-full">
+            <thead>
+              <tr>
+                <th>Feature</th>
+                <th>Family</th>
+                <th className="text-right">Value</th>
+                <th className="text-right">Age</th>
+                <th className="text-right">Tolerance</th>
+                <th>Missing reason</th>
+              </tr>
+            </thead>
+            <tbody>
+              {values.map((v) => {
+                const def = catalogue.get(v.featureCode)
+                const tolerance = def?.stalenessToleranceDays ?? null
+                const stale = tolerance !== null && v.stalenessDays !== null && v.stalenessDays > tolerance
+                return (
+                  <tr key={v.featureCode}>
+                    <td className="font-mono text-[11px]">{v.featureCode}</td>
+                    <td className="text-slate-500 text-[11px]">{def?.family ?? '—'}</td>
+                    <td className={`text-right font-semibold ${v.value === null ? 'text-slate-300' : ''}`}>
+                      {v.value === null ? 'null' : v.value}
+                    </td>
+                    <td className={`text-right ${stale ? 'text-risk-red font-semibold' : 'text-slate-500'}`}>
+                      {v.stalenessDays === null ? '—' : `${v.stalenessDays}d`}
+                    </td>
+                    <td className="text-right text-slate-400">{tolerance === null ? 'never stale' : `${tolerance}d`}</td>
+                    <td className="text-[10.5px] text-slate-500">
+                      {v.missingReason ? <span className="pill pill-pend">{v.missingReason}</span> : ''}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+const OUTCOME_LABEL: Record<RuleStatus, { text: string; cls: string }> = {
+  FIRED: { text: 'Fired', cls: 'pill-bad' },
+  NOT_FIRED: { text: 'Not fired', cls: 'pill-ok' },
+  SKIPPED_STALE: { text: 'Skipped · stale', cls: 'pill-pend' },
+  SKIPPED_MISSING: { text: 'Skipped · missing', cls: 'pill-pend' },
+  SKIPPED_SECTOR: { text: 'Other sector', cls: 'pill' },
+  ERROR: { text: 'Expression error', cls: 'pill-bad' },
+}
+
+function OutcomePill({ status }: { status: RuleStatus }) {
+  const meta = OUTCOME_LABEL[status] ?? { text: status, cls: 'pill' }
+  return <span className={`pill ${meta.cls}`}>{meta.text}</span>
+}

src/features/officer/ScheduleVisitModal.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import type { Enterprise } from '../../lib/api'
+import { officerSession } from '../../lib/api'
+import { Field, GhostBtn, Modal, PrimaryBtn, inputCls } from '../../components/ui/bits'
+import { PLAYBOOK } from '../../lib/demo/ops'
+import { dayOffsetIso } from '../../lib/demo/seed'
+import { scheduleVisit } from '../../lib/visitStore'
+
+/**
+ * Schedule an intervention from the playbook. Actions are pre-filtered to the
+ * enterprise's band, so the officer picks from what the model actually
+ * recommends rather than a free-text field.
+ */
+export function ScheduleVisitModal({ enterprise, onClose }: { enterprise: Enterprise; onClose: () => void }) {
+  const navigate = useNavigate()
+  const options = PLAYBOOK.filter((p) => p.appliesTo === enterprise.band)
+  const [code, setCode] = useState(options[0]?.code ?? PLAYBOOK[0].code)
+  const [dueDate, setDueDate] = useState(dayOffsetIso(3))
+
+  function save() {
+    const action = PLAYBOOK.find((p) => p.code === code) ?? PLAYBOOK[0]
+    scheduleVisit({
+      enterpriseId: enterprise.enterpriseId,
+      enterpriseName: enterprise.name,
+      block: enterprise.block,
+      action: action.label,
+      actionHi: action.labelHi,
+      priority: enterprise.band === 'RED' ? 1 : 2,
+      dueDate,
+      officer: officerSession()?.fullName ?? 'Field Officer',
+    })
+    onClose()
+    navigate('/officer/visits')
+  }
+
+  return (
+    <Modal title={`Schedule visit — ${enterprise.name}`} onClose={onClose}>
+      <div className="text-[11.5px] text-slate-500 mb-4">
+        {enterprise.enterpriseId} · {enterprise.block} block · stress score{' '}
+        <span className="font-bold text-slate-700">{enterprise.score}</span>
+      </div>
+
+      <Field label="Recommended action" className="mb-3.5">
+        <select className={inputCls} value={code} onChange={(e) => setCode(e.target.value)}>
+          {(options.length ? options : PLAYBOOK).map((p) => (
+            <option key={p.code} value={p.code}>
+              {p.code} · {p.label}
+            </option>
+          ))}
+        </select>
+      </Field>
+
+      <p className="text-[11px] text-slate-500 bg-slate-50 border border-slate-200 rounded-md px-3 py-2 mb-3.5">
+        {(PLAYBOOK.find((p) => p.code === code) ?? PLAYBOOK[0]).detail}
+      </p>
+
+      <Field label="Due date" className="mb-5" hint="Logged for supervisory review.">
+        <input type="date" className={inputCls} value={dueDate} onChange={(e) => setDueDate(e.target.value)} />
+      </Field>
+
+      <div className="flex gap-2 justify-end">
+        <GhostBtn onClick={onClose}>Cancel</GhostBtn>
+        <PrimaryBtn onClick={save}>Schedule</PrimaryBtn>
+      </div>
+    </Modal>
+  )
+}

src/features/officer/SettingsPage.tsx

@@ -0,0 +1,148 @@
+import { useState } from 'react'
+import { API_BASE, officerSession } from '../../lib/api'
+import type { Lang, Sector } from '../../lib/api'
+import { Card, Field, GhostBtn, PrimaryBtn, inputCls } from '../../components/ui/bits'
+import { BAND_THRESHOLD, SECTORS, SECTOR_LIST } from '../../lib/demo/enterprises'
+import { useLang } from '../../lib/i18n'
+import { useOffline } from '../../lib/useOffline'
+import { lastSyncedAt } from '../../lib/ledgerStore'
+
+/**
+ * Console settings. Band thresholds are editable because the deck's claim is
+ * that they map to the *institution's own* watchlist categories rather than a
+ * fixed vendor scale — changing them here is a local preview, not a model change.
+ */
+export function SettingsPage() {
+  const session = officerSession()
+  const offline = useOffline()
+  const { lang, setLang } = useLang('en')
+  const [red, setRed] = useState(BAND_THRESHOLD.red)
+  const [watch, setWatch] = useState(BAND_THRESHOLD.watch)
+  const [packs, setPacks] = useState<Record<Sector, boolean>>(
+    () => Object.fromEntries(SECTOR_LIST.map((s) => [s, true])) as Record<Sector, boolean>,
+  )
+  const [saved, setSaved] = useState(false)
+
+  const synced = lastSyncedAt()
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-2">
+      <Card title="Band thresholds" badge="watchlist mapping">
+        <div className="p-4 space-y-3.5">
+          <p className="text-[11.5px] text-slate-500 leading-snug">
+            An enterprise escalates to <b>High risk</b> at or above the red threshold, and to <b>Watch</b> at or above
+            the watch threshold. Set these to match your own watchlist categories.
+          </p>
+          <div className="grid grid-cols-2 gap-3">
+            <Field label="High risk at or above">
+              <input
+                type="number"
+                min={watch + 1}
+                max={100}
+                className={inputCls}
+                value={red}
+                onChange={(e) => setRed(Number(e.target.value))}
+              />
+            </Field>
+            <Field label="Watch at or above">
+              <input
+                type="number"
+                min={1}
+                max={red - 1}
+                className={inputCls}
+                value={watch}
+                onChange={(e) => setWatch(Number(e.target.value))}
+              />
+            </Field>
+          </div>
+          <div className="flex h-2 rounded-full overflow-hidden bg-slate-100">
+            <span className="bg-green" style={{ width: `${watch}%` }} />
+            <span className="bg-amber" style={{ width: `${red - watch}%` }} />
+            <span className="bg-risk-red" style={{ width: `${100 - red}%` }} />
+          </div>
+          <div className="flex gap-2">
+            <PrimaryBtn
+              onClick={() => {
+                setSaved(true)
+                setTimeout(() => setSaved(false), 1800)
+              }}
+            >
+              Save thresholds
+            </PrimaryBtn>
+            <GhostBtn
+              onClick={() => {
+                setRed(BAND_THRESHOLD.red)
+                setWatch(BAND_THRESHOLD.watch)
+              }}
+            >
+              Reset
+            </GhostBtn>
+            {saved && <span className="text-[11.5px] text-green self-center">Saved for this session.</span>}
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Sector risk packs">
+        <div className="p-4 space-y-2">
+          <p className="text-[11.5px] text-slate-500 leading-snug mb-2">
+            Each pack is modelled separately. Disabling one hides its enterprises from scoring runs.
+          </p>
+          {SECTOR_LIST.map((s) => (
+            <label key={s} className="flex items-center gap-2.5 py-1.5 border-b border-slate-100 last:border-0">
+              <input
+                type="checkbox"
+                checked={packs[s]}
+                onChange={(e) => setPacks({ ...packs, [s]: e.target.checked })}
+                className="accent-[#0b5d3b]"
+              />
+              <span className="text-[12px] text-slate-700">{SECTORS[s].label}</span>
+              <span className="text-[11px] text-slate-400 ml-auto">{SECTORS[s].labelHi}</span>
+            </label>
+          ))}
+        </div>
+      </Card>
+
+      <Card title="Session">
+        <dl className="p-4 space-y-2.5 text-[12px]">
+          {[
+            ['Signed in as', session?.fullName ?? '—'],
+            ['Username', session?.username ?? '—'],
+            ['Role', session?.role ?? '—'],
+            ['Scope', session?.branch ?? '—'],
+            ['Blocks', (session?.blocks ?? []).join(', ') || '—'],
+          ].map(([k, v]) => (
+            <div key={k} className="flex justify-between gap-3">
+              <dt className="text-slate-500">{k}</dt>
+              <dd className="font-semibold text-slate-700 text-right">{v}</dd>
+            </div>
+          ))}
+        </dl>
+      </Card>
+
+      <Card title="Connectivity & language">
+        <div className="p-4 space-y-3.5">
+          <div className="flex items-center justify-between text-[12px]">
+            <span className="text-slate-500">API endpoint</span>
+            <span className="font-mono text-[10.5px] text-slate-600 truncate max-w-[220px]">{API_BASE}</span>
+          </div>
+          <div className="flex items-center justify-between text-[12px]">
+            <span className="text-slate-500">Connection</span>
+            <span className={`pill ${offline ? 'pill-bad' : 'pill-ok'}`}>{offline ? 'Offline' : 'Online'}</span>
+          </div>
+          <div className="flex items-center justify-between text-[12px]">
+            <span className="text-slate-500">Last ledger sync</span>
+            <span className="font-semibold text-slate-700">
+              {synced ? new Date(synced).toLocaleString() : 'Never'}
+            </span>
+          </div>
+          <Field label="Reason-code language" hint="Applies to the Hindi sentence shown under each reason code.">
+            <select className={inputCls} value={lang} onChange={(e) => setLang(e.target.value as Lang)}>
+              <option value="en">English</option>
+              <option value="hi">हिन्दी</option>
+            </select>
+          </Field>
+        </div>
+      </Card>
+    </div>
+  )
+}

src/features/officer/VisitsPage.tsx

@@ -0,0 +1,170 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { officerSession } from '../../lib/api'
+import type { FieldVisit, VisitState } from '../../lib/api'
+import {
+  ActionChip,
+  Empty,
+  Field,
+  GhostBtn,
+  KpiTile,
+  Modal,
+  PrimaryBtn,
+  StatusPill,
+  inputCls,
+} from '../../components/ui/bits'
+import { todayIso } from '../../lib/demo/seed'
+import { logOutcome, useVisits } from '../../lib/visitStore'
+import { useScope } from './officerScope'
+
+const FILTERS: { key: VisitState | 'ALL'; label: string }[] = [
+  { key: 'ALL', label: 'All' },
+  { key: 'PLANNED', label: 'Planned' },
+  { key: 'OVERDUE', label: 'Overdue' },
+  { key: 'DONE', label: 'Done' },
+]
+
+/**
+ * The field officer playbook: ranked interventions with due dates. Logging an
+ * outcome closes the loop the deck's process flow describes — the outcome and
+ * any override feed the next retraining cycle.
+ */
+export function VisitsPage() {
+  const navigate = useNavigate()
+  const { block } = useScope()
+  const officer = officerSession()?.fullName ?? 'Field Officer'
+  const { visits } = useVisits(block, officer)
+  const [filter, setFilter] = useState<VisitState | 'ALL'>('ALL')
+  const [logging, setLogging] = useState<FieldVisit | null>(null)
+
+  const rows = visits
+    .filter((v) => filter === 'ALL' || v.state === filter)
+    .sort((a, b) => a.priority - b.priority || a.dueDate.localeCompare(b.dueDate))
+
+  const done = visits.filter((v) => v.state === 'DONE').length
+  const overdue = visits.filter((v) => v.state === 'OVERDUE').length
+  const planned = visits.filter((v) => v.state === 'PLANNED').length
+
+  return (
+    <div>
+      <div className="flex flex-wrap gap-3 mb-4">
+        <KpiTile label="Interventions in queue" value={visits.length} />
+        <KpiTile label="Planned" value={planned} tone="watch" />
+        <KpiTile label="Overdue" value={overdue} tone="red" />
+        <KpiTile label="Completed" value={done} tone="good" />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-1.5 mb-3">
+        {FILTERS.map((f) => (
+          <ActionChip key={f.key} active={filter === f.key} onClick={() => setFilter(f.key)}>
+            {f.label}
+          </ActionChip>
+        ))}
+        <span className="text-[11px] text-slate-500 ml-1">{rows.length} shown</span>
+      </div>
+
+      <div className="bg-white border border-slate-200 rounded-[11px] overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="ul-table">
+            <thead>
+              <tr>
+                <th>Priority</th>
+                <th>Enterprise</th>
+                <th>Recommended action</th>
+                <th>Block</th>
+                <th>Due</th>
+                <th>State</th>
+                <th>Outcome</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((v) => (
+                <tr key={v.visitId}>
+                  <td>
+                    <span className={`pill ${v.priority === 1 ? 'pill-bad' : 'pill-pend'}`}>
+                      {v.priority === 1 ? 'Act first' : 'Routine'}
+                    </span>
+                  </td>
+                  <td>
+                    <button
+                      className="font-semibold text-forest hover:underline text-left"
+                      onClick={() => navigate(`/officer/enterprises/${v.enterpriseId}`)}
+                    >
+                      {v.enterpriseName}
+                    </button>
+                    <span className="block font-mono text-[10px] text-slate-400">{v.enterpriseId}</span>
+                  </td>
+                  <td className="whitespace-normal max-w-[280px] text-slate-700">{v.action}</td>
+                  <td className="text-slate-600">{v.block}</td>
+                  <td className={v.state === 'OVERDUE' ? 'text-risk-red font-semibold' : 'text-slate-600'}>
+                    {v.dueDate}
+                  </td>
+                  <td>
+                    <StatusPill status={v.state} />
+                  </td>
+                  <td className="whitespace-normal max-w-[280px] text-slate-500">{v.outcome ?? '—'}</td>
+                  <td className="text-right">
+                    {v.state !== 'DONE' && <GhostBtn onClick={() => setLogging(v)}>Log outcome</GhostBtn>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {!rows.length && <Empty text="No visits in this state." />}
+      </div>
+
+      {logging && <LogOutcomeModal visit={logging} onClose={() => setLogging(null)} />}
+    </div>
+  )
+}
+
+const PRESET_OUTCOMES = [
+  'Stock and receivables verified against the ledger.',
+  'Instalment date moved to align with the earning season.',
+  'Working-capital top-up recommended to the branch.',
+  'Owner unavailable — revisit required.',
+  'No action needed; figures explained by a one-off event.',
+]
+
+function LogOutcomeModal({ visit, onClose }: { visit: FieldVisit; onClose: () => void }) {
+  const [preset, setPreset] = useState(PRESET_OUTCOMES[0])
+  const [note, setNote] = useState('')
+
+  function save() {
+    logOutcome(visit.visitId, note.trim() ? `${preset} ${note.trim()}` : preset)
+    onClose()
+  }
+
+  return (
+    <Modal title={`Log outcome — ${visit.enterpriseName}`} onClose={onClose}>
+      <div className="text-[11.5px] text-slate-500 mb-4">
+        {visit.visitId} · {visit.action} · due {visit.dueDate}
+      </div>
+
+      <Field label="Outcome" className="mb-3.5">
+        <select className={inputCls} value={preset} onChange={(e) => setPreset(e.target.value)}>
+          {PRESET_OUTCOMES.map((o) => (
+            <option key={o} value={o}>
+              {o}
+            </option>
+          ))}
+        </select>
+      </Field>
+
+      <Field
+        label="Note (optional)"
+        className="mb-5"
+        hint={`Recorded against ${todayIso()} and fed into the next retraining cycle.`}
+      >
+        <textarea className={`${inputCls} min-h-[70px]`} value={note} onChange={(e) => setNote(e.target.value)} />
+      </Field>
+
+      <div className="flex gap-2 justify-end">
+        <GhostBtn onClick={onClose}>Cancel</GhostBtn>
+        <PrimaryBtn onClick={save}>Mark done</PrimaryBtn>
+      </div>
+    </Modal>
+  )
+}

src/features/officer/officerScope.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext, useMemo, useState } from 'react'
+import { ALL_BLOCKS } from '../../lib/demo/ops'
+import { currentMonthKey } from '../../lib/demo/seed'
+
+/**
+ * Console scope — the block and month every officer screen reads from, set once
+ * in the identity bar. Keeping it in context is what makes the dashboard, the
+ * alert queue and the visit playbook agree on what "this month" means.
+ */
+interface Scope {
+  block: string
+  month: string
+  setBlock: (b: string) => void
+  setMonth: (m: string) => void
+}
+
+const ScopeCtx = createContext<Scope>({
+  block: ALL_BLOCKS,
+  month: currentMonthKey(),
+  setBlock: () => {},
+  setMonth: () => {},
+})
+
+export function OfficerScopeProvider({ children }: { children: React.ReactNode }) {
+  const [block, setBlock] = useState(ALL_BLOCKS)
+  const [month, setMonth] = useState(currentMonthKey())
+  const value = useMemo(() => ({ block, month, setBlock, setMonth }), [block, month])
+  return <ScopeCtx.Provider value={value}>{children}</ScopeCtx.Provider>
+}
+
+export function useScope(): Scope {
+  return useContext(ScopeCtx)
+}

src/index.css

@@ -0,0 +1,66 @@
+@import "tailwindcss";
+
+/*
+ * UdyamLinc design tokens
+ * Layout language: BharatLinc / CBSNexora (LincPay console family)
+ * Brand palette: UdyamLinc deck — forest #0B5D3B, green #1E7A46, amber #E8A020
+ */
+@theme {
+  --color-forest-deep: #06301f;
+  --color-forest: #0b5d3b;
+  --color-forest-mid: #0f6f47;
+  --color-green: #1e7a46;
+  --color-green-hi: #3fb871;
+  --color-green-soft: #eaf5ef;
+  --color-amber: #e8a020;
+  --color-amber-hi: #f2b544;
+  --color-amber-soft: #fdf4e3;
+  --color-risk-red: #c0392b;
+  --color-risk-soft: #fdeceb;
+  --color-ink: #17321f;
+  --color-tagline: #6b8477;
+
+  --font-sans: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Cascadia Mono", ui-monospace, "Roboto Mono", Consolas, monospace;
+}
+
+body {
+  @apply bg-[#f4f7f5] text-slate-900 font-sans text-[13px] antialiased;
+}
+
+/* Modern data table — same rhythm as BharatLinc's .bl-table */
+.ul-table { @apply w-full border-collapse text-[12.5px]; }
+.ul-table thead th {
+  @apply bg-slate-50 text-[9.5px] uppercase tracking-[0.06em] text-slate-500 text-left px-3.5 py-2 border-b border-slate-200 whitespace-nowrap font-semibold;
+}
+.ul-table tbody td { @apply px-3.5 py-2 border-b border-slate-100 whitespace-nowrap; }
+.ul-table tbody tr:nth-child(even) { @apply bg-[#fafbfa]; }
+.ul-table tbody tr:hover { @apply bg-[#f0f8f3]; }
+
+/* status pill with leading dot */
+.pill { @apply inline-flex items-center gap-1.5 text-[10.5px] font-semibold px-2.5 py-0.5 rounded-[10px]; }
+.pill::before { content: ""; @apply w-1.5 h-1.5 rounded-full bg-current; }
+.pill-ok   { @apply bg-emerald-50 text-emerald-600; }
+.pill-pend { @apply bg-amber-50 text-amber-600; }
+.pill-info { @apply bg-blue-50 text-blue-600; }
+.pill-bad  { @apply bg-red-50 text-red-600; }
+.pill-mut  { @apply bg-slate-100 text-slate-500; }
+
+/* Risk bands — the three states every screen speaks in */
+.band-red      { @apply bg-risk-soft text-risk-red; }
+.band-watch    { @apply bg-amber-soft text-amber; }
+.band-standard { @apply bg-green-soft text-green; }
+
+/* Card chrome shared by console + PWA */
+.ul-card { @apply bg-white border border-slate-200 rounded-lg; }
+
+/* Enterprise PWA: bottom tab bar sits above the home indicator */
+.ul-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
+
+@keyframes ul-blink { 50% { opacity: 0.25; } }
+.ul-blink { animation: ul-blink 1.2s infinite; }
+@keyframes ul-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+.ul-tape { animation: ul-roll 28s linear infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .ul-tape, .ul-blink { animation: none; }
+}

src/lib/alertStore.ts

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { AlertState, RiskAlert } from './api'
+import { alertsFor } from './demo/ops'
+
+/*
+ * Officer actions on the alert queue.
+ *
+ * The queue itself is derived from the portfolio; only the state changes an
+ * officer makes (acknowledge / escalate / snooze / close) and their audit trail
+ * are persisted, which is exactly the split the deck describes — the model
+ * proposes, the officer disposes, and every disposal is auditable.
+ */
+
+const KEY = 'ul-alert-states'
+const AUDIT_KEY = 'ul-alert-audit'
+
+export interface AuditEntry {
+  alertId: string
+  from: AlertState
+  to: AlertState
+  actor: string
+  note: string | null
+  at: string
+}
+
+function readStates(): Record<string, AlertState> {
+  try {
+    return JSON.parse(localStorage.getItem(KEY) ?? '{}') as Record<string, AlertState>
+  } catch {
+    return {}
+  }
+}
+
+export function readAudit(): AuditEntry[] {
+  try {
+    return JSON.parse(localStorage.getItem(AUDIT_KEY) ?? '[]') as AuditEntry[]
+  } catch {
+    return []
+  }
+}
+
+export function setAlertState(alert: RiskAlert, to: AlertState, actor: string, note?: string) {
+  const states = readStates()
+  const from = states[alert.alertId] ?? alert.state
+  states[alert.alertId] = to
+  localStorage.setItem(KEY, JSON.stringify(states))
+
+  const audit: AuditEntry = { alertId: alert.alertId, from, to, actor, note: note ?? null, at: new Date().toISOString() }
+  localStorage.setItem(AUDIT_KEY, JSON.stringify([audit, ...readAudit()].slice(0, 200)))
+  window.dispatchEvent(new Event('ul-alerts-changed'))
+}
+
+/** The alert queue for a block, with any officer actions applied on top. */
+export function useAlerts(block: string) {
+  const [version, setVersion] = useState(0)
+
+  const bump = useCallback(() => setVersion((v) => v + 1), [])
+
+  useEffect(() => {
+    window.addEventListener('ul-alerts-changed', bump)
+    return () => window.removeEventListener('ul-alerts-changed', bump)
+  }, [bump])
+
+  const states = readStates()
+  // `version` is read so the memo-free derivation re-runs after every action.
+  void version
+  const alerts = alertsFor(block).map((a) => ({ ...a, state: states[a.alertId] ?? a.state }))
+
+  return { alerts, audit: readAudit() }
+}

src/lib/api.ts

@@ -0,0 +1,399 @@
+import axios from 'axios'
+
+/** udyamlinc-backend — Spring Boot skeleton, context path /api/v1/udyam. */
+export const API_BASE =
+  import.meta.env.VITE_UDYAM_API_BASE_URL ?? 'http://udyamlinc-backend.lincpay/api/v1/udyam'
+
+/** Short timeout: field devices are on patchy 2G and every screen has a local fallback. */
+export const api = axios.create({ baseURL: API_BASE, timeout: 6_000 })
+
+// ── Auth sessions ────────────────────────────────────────────────
+
+/** Field officer console session — sessionStorage 'ul-officer-auth'. */
+export interface OfficerSession {
+  token: string
+  username: string
+  fullName: string
+  role: string // FIELD_OFFICER | SUPERVISOR
+  blocks: string[]
+  branch: string
+}
+
+/** Enterprise PWA session — localStorage 'ul-app-auth' (must survive an offline relaunch). */
+export interface EnterpriseSession {
+  token: string
+  enterpriseId: string
+  name: string
+  nameHi: string
+  sector: Sector
+  block: string
+  lang: Lang
+}
+
+export function officerSession(): OfficerSession | null {
+  const raw = sessionStorage.getItem('ul-officer-auth')
+  if (!raw) return null
+  try {
+    const s = JSON.parse(raw)
+    return s?.token ? s : null
+  } catch {
+    return null
+  }
+}
+
+export function enterpriseSession(): EnterpriseSession | null {
+  const raw = localStorage.getItem('ul-app-auth')
+  if (!raw) return null
+  try {
+    const s = JSON.parse(raw)
+    return s?.token ? s : null
+  } catch {
+    return null
+  }
+}
+
+export function clearSessions() {
+  sessionStorage.removeItem('ul-officer-auth')
+  localStorage.removeItem('ul-app-auth')
+}
+
+// Attach the JWT of whichever surface the user is on (officer console vs enterprise app)
+api.interceptors.request.use((config) => {
+  const path = window.location.pathname
+  const token =
+    (path.startsWith('/app') ? enterpriseSession()?.token : officerSession()?.token) ??
+    officerSession()?.token ??
+    enterpriseSession()?.token
+  if (token && !config.url?.includes('/auth/')) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+// Expired/invalid token → drop the session and return to sign-in
+api.interceptors.response.use(
+  (res) => res,
+  (error) => {
+    if (error.response?.status === 401 && !window.location.pathname.startsWith('/login')) {
+      clearSessions()
+      window.location.assign('/login')
+    }
+    return Promise.reject(error)
+  },
+)
+
+/** Standard backend envelope: { success, message, data } */
+export async function get<T>(path: string, params?: Record<string, unknown>): Promise<T> {
+  const res = await api.get(path, { params })
+  return res.data.data as T
+}
+
+export async function post<T>(path: string, body?: unknown): Promise<T> {
+  const res = await api.post(path, body)
+  return res.data.data as T
+}
+
+export async function put<T>(path: string, body?: unknown): Promise<T> {
+  const res = await api.put(path, body)
+  return res.data.data as T
+}
+
+export async function del<T>(path: string): Promise<T> {
+  const res = await api.delete(path)
+  return res.data.data as T
+}
+
+/** Extract the backend's error message from an axios error. */
+export function errMsg(e: unknown): string {
+  const anyE = e as { response?: { data?: { message?: string } }; message?: string }
+  return anyE.response?.data?.message ?? anyE.message ?? 'Request failed'
+}
+
+// ── Domain types (mirror UdyamLinc-Backend/API-SPEC.md) ──────────
+
+export type Lang = 'hi' | 'en'
+
+/** The five sector risk packs from the deck. */
+export type Sector = 'DAIRY' | 'POULTRY' | 'FOOD_PROC' | 'HANDICRAFTS' | 'RURAL_RETAIL'
+
+/** Composite Stress Score bands. Red escalates, Watch is monitored, Standard is healthy. */
+export type Band = 'RED' | 'WATCH' | 'STANDARD'
+
+export interface Enterprise {
+  id: number
+  enterpriseId: string // MSME-4417
+  name: string
+  nameHi: string
+  sector: Sector
+  block: string
+  district: string
+  ownerCount: number
+  vintageMonths: number
+  loanOutstanding: number
+  monthlyInstalment: number
+  score: number // 0–100 Composite Stress Score
+  band: Band
+  trend: number[] // 6-month score history, oldest first
+  lastUpdated: string
+}
+
+/** One month of the quantile forecast. Amounts are net cash position in ₹. */
+export interface ForecastPoint {
+  month: string // '2026-09'
+  label: string // 'Sep'
+  labelHi: string // 'सित'
+  p10: number
+  p50: number
+  p90: number
+  obligation: number // scheduled instalment + fixed costs due that month
+}
+
+/** Five independent risk families, each 0–100, combined with sector weights. */
+export interface SubScores {
+  liquidity: number
+  behavioural: number
+  trendVolatility: number
+  obligationLoad: number
+  externalShock: number
+}
+
+export interface StressScore {
+  enterpriseId: string
+  score: number
+  band: Band
+  subScores: SubScores
+  computedAt: string
+  modelVersion: string
+}
+
+/** A SHAP driver rendered as a sentence a field officer can read aloud. */
+export interface ReasonCode {
+  driver: string
+  driverHi: string
+  weight: number // contribution, 0–100
+  sentenceEn: string
+  sentenceHi: string
+}
+
+/** Deterministic rule that fires independently of the model, for auditability. */
+export interface TripWire {
+  code: string
+  label: string
+  labelHi: string
+  fired: boolean
+  detail: string
+  threshold: string
+}
+
+export type AlertOrigin = 'MODEL' | 'TRIPWIRE'
+export type AlertState = 'OPEN' | 'ACKNOWLEDGED' | 'ESCALATED' | 'SNOOZED' | 'CLOSED'
+
+export interface RiskAlert {
+  id: number
+  alertId: string
+  enterpriseId: string
+  enterpriseName: string
+  sector: Sector
+  block: string
+  band: Band
+  score: number
+  origin: AlertOrigin
+  title: string
+  titleHi: string
+  reason: ReasonCode
+  shortfall: number // projected ₹ gap at P10
+  breachMonth: string
+  state: AlertState
+  raisedAt: string
+}
+
+export type VisitState = 'PLANNED' | 'DONE' | 'OVERDUE'
+
+export interface FieldVisit {
+  id: number
+  visitId: string
+  enterpriseId: string
+  enterpriseName: string
+  block: string
+  action: string
+  actionHi: string
+  priority: number // 1 = act first
+  dueDate: string
+  state: VisitState
+  outcome: string | null
+  officer: string
+  loggedAt: string | null
+}
+
+/** One item of the ranked playbook the officer works down. */
+export interface PlaybookAction {
+  code: string
+  label: string
+  labelHi: string
+  appliesTo: Band
+  detail: string
+}
+
+export type LedgerKind = 'IN' | 'OUT' | 'STOCK'
+
+export interface LedgerEntry {
+  id: string // client-generated so offline entries have identity before sync
+  enterpriseId: string
+  kind: LedgerKind
+  amount: number
+  category: string
+  note: string | null
+  entryDate: string // 'YYYY-MM-DD'
+  syncState: 'PENDING' | 'SYNCED'
+  createdAt: string
+}
+
+export interface PortfolioSummary {
+  block: string
+  month: string
+  total: number
+  totalDelta: number
+  red: number
+  redDelta: number
+  watch: number
+  watchDelta: number
+  standard: number
+  standardDelta: number
+  updatedMinutesAgo: number
+  rows: Enterprise[]
+}
+
+// ── Ingestion, features and rules (the /admin surface) ───────────
+
+/**
+ * A week of mandi prices for one district and commodity. Weekly rather than
+ * daily because a mandi does not report every day, and every feature built on it
+ * is defined against a trailing weekly mean anyway.
+ */
+export interface MarketSignal {
+  id: number
+  districtName: string
+  commodityName: string
+  weekStart: string // Monday of the ISO week
+  modalPrice: number | null
+  minPrice: number | null
+  maxPrice: number | null
+  arrivalCount: number | null
+  unit: string | null
+  source: string
+  validForDate: string // the date the fact describes
+  observedAt: string // when we learned it
+}
+
+export interface ClimateSignal {
+  id: number
+  districtName: string
+  weekStart: string
+  isoWeek: number
+  rainfallMm: number | null
+  tmaxC: number | null
+  rainfallNormalMm: number | null
+  rainfallAnomalyPct: number | null
+  heatAnomalyC: number | null
+  validForDate: string
+  observedAt: string
+}
+
+/** Per-district data age — what a trip-wire consults before it is allowed to fire. */
+export interface Freshness {
+  districtCode: string
+  districtName: string
+  marketValidFor: string | null
+  marketStalenessDays: number | null
+  climateValidFor: string | null
+  climateStalenessDays: number | null
+}
+
+export type IngestionStatus = 'SUCCESS' | 'PARTIAL' | 'FAILED' | 'SKIPPED'
+
+export interface IngestionRun {
+  id: number
+  source: string // AGMARKNET | OPEN_METEO
+  runDate: string
+  trigger: string // SCHEDULED | MANUAL
+  status: IngestionStatus
+  rowsFetched: number | null
+  rowsWritten: number | null
+  callsFailed: number | null
+  durationMs: number | null
+  startedAt: string
+  message: string | null
+}
+
+/** A catalogue entry. `stalenessToleranceDays` is what gates the rules. */
+export interface FeatureDefinition {
+  code: string
+  label: string
+  family: string
+  unit: string | null
+  sourceKind: string | null
+  stalenessToleranceDays: number | null
+  direction: string | null
+  derivation: string | null
+}
+
+/**
+ * One tall-store row. A null `value` always carries a `missingReason` — that is
+ * the difference between a hole we can explain and one we cannot.
+ */
+export interface FeatureValueRow {
+  featureCode: string
+  value: number | null
+  validForDate: string
+  stalenessDays: number | null
+  missingReason: string | null
+}
+
+export interface TripWireRule {
+  id: number
+  code: string
+  label: string
+  labelHi: string
+  expression: string
+  thresholdText: string
+  severity: 'RED' | 'WATCH'
+  sectorCode: string | null
+  requiredFeatures: string
+  maxStalenessDays: number
+  active: boolean
+  version: number
+}
+
+export type RuleStatus =
+  | 'FIRED'
+  | 'NOT_FIRED'
+  | 'SKIPPED_STALE'
+  | 'SKIPPED_MISSING'
+  | 'SKIPPED_SECTOR'
+  | 'ERROR'
+
+/**
+ * What one rule did against one snapshot. A rule that came back false and one
+ * that was never allowed to run are different events, and the console has to
+ * show which — "no alert" because the enterprise is fine reads very differently
+ * from "no alert" because the feed has been down a fortnight.
+ */
+export interface RuleOutcome {
+  ruleCode: string
+  ruleId: number
+  ruleVersion: number
+  severity: 'RED' | 'WATCH'
+  status: RuleStatus
+  detail: string | null
+}
+
+/** Enterprise app home payload — everything the Home tab needs in one call. */
+export interface AppHome {
+  enterprise: Enterprise
+  alert: RiskAlert | null
+  forecast: ForecastPoint[]
+  todayIn: number
+  todayOut: number
+  advice: { textEn: string; textHi: string }
+  lastSyncedAt: string | null
+}

src/lib/csv.ts

@@ -0,0 +1,17 @@
+/** Quote a CSV cell only when it needs it. */
+function cell(v: unknown): string {
+  const s = v == null ? '' : String(v)
+  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
+}
+
+/** Build a CSV and hand it to the browser as a download. */
+export function exportCsv(fileName: string, headers: string[], rows: unknown[][]) {
+  const csv = [headers, ...rows].map((r) => r.map(cell).join(',')).join('\n')
+  const blob = new Blob([`${csv}`], { type: 'text/csv;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = fileName
+  a.click()
+  URL.revokeObjectURL(url)
+}

src/lib/demo/enterprises.ts

@@ -0,0 +1,409 @@
+import type {
+  Band,
+  Enterprise,
+  ForecastPoint,
+  ReasonCode,
+  Sector,
+  StressScore,
+  SubScores,
+  TripWire,
+} from '../api'
+import { monthWindow, pickInt, pickOne, rng, seedOf, shuffled } from './seed'
+
+/* ------------------------------------------------------------------ */
+/* The demo portfolio: 142 enterprises across 5 sector packs and 4      */
+/* blocks. The six named on the deck's wireframe slide are pinned to    */
+/* their exact submitted scores; the rest are generated deterministically*/
+/* so band counts always total 9 / 31 / 102.                            */
+/* ------------------------------------------------------------------ */
+
+export const BANDS: Record<Band, { label: string; labelHi: string; cls: string; dot: string }> = {
+  RED: { label: 'High risk', labelHi: 'ज़्यादा जोखिम', cls: 'band-red', dot: 'bg-risk-red' },
+  WATCH: { label: 'Watch', labelHi: 'निगरानी', cls: 'band-watch', dot: 'bg-amber' },
+  STANDARD: { label: 'Standard', labelHi: 'ठीक', cls: 'band-standard', dot: 'bg-green' },
+}
+
+/** Band thresholds map to the institution's own watchlist categories (deck slide 3). */
+export const BAND_THRESHOLD = { red: 65, watch: 35 }
+
+export function bandOf(score: number): Band {
+  if (score >= BAND_THRESHOLD.red) return 'RED'
+  if (score >= BAND_THRESHOLD.watch) return 'WATCH'
+  return 'STANDARD'
+}
+
+export const SECTORS: Record<Sector, { label: string; labelHi: string; short: string }> = {
+  DAIRY: { label: 'Dairy', labelHi: 'डेयरी', short: 'Dairy' },
+  POULTRY: { label: 'Poultry', labelHi: 'मुर्गी पालन', short: 'Poultry' },
+  FOOD_PROC: { label: 'Food processing', labelHi: 'खाद्य प्रसंस्करण', short: 'Food proc.' },
+  HANDICRAFTS: { label: 'Handicrafts', labelHi: 'हस्तशिल्प', short: 'Handicrafts' },
+  RURAL_RETAIL: { label: 'Rural retail', labelHi: 'ग्रामीण दुकान', short: 'Rural retail' },
+}
+
+export const SECTOR_LIST = Object.keys(SECTORS) as Sector[]
+
+export const BLOCKS = ['Sehore', 'Vidisha', 'Raisen', 'Bhopal'] as const
+export const BLOCK_DISTRICT: Record<string, string> = {
+  Sehore: 'Sehore',
+  Vidisha: 'Vidisha',
+  Raisen: 'Raisen',
+  Bhopal: 'Bhopal',
+}
+
+/** The six enterprises printed on the wireframe slide — reproduced exactly. */
+const PINNED: { enterpriseId: string; name: string; nameHi: string; sector: Sector; block: string; score: number }[] = [
+  { enterpriseId: 'MSME-4417', name: 'Sehore Poultry Farm', nameHi: 'सीहोर पोल्ट्री फ़ार्म', sector: 'POULTRY', block: 'Sehore', score: 79 },
+  { enterpriseId: 'MSME-3902', name: 'Sharda Dairy Collective', nameHi: 'शारदा डेयरी समूह', sector: 'DAIRY', block: 'Vidisha', score: 71 },
+  { enterpriseId: 'MSME-5120', name: 'Anand Food Products', nameHi: 'आनंद फ़ूड प्रोडक्ट्स', sector: 'FOOD_PROC', block: 'Raisen', score: 58 },
+  { enterpriseId: 'MSME-2861', name: 'Gramin Kirana Store', nameHi: 'ग्रामीण किराना स्टोर', sector: 'RURAL_RETAIL', block: 'Sehore', score: 41 },
+  { enterpriseId: 'MSME-6033', name: 'Meera Handicrafts', nameHi: 'मीरा हस्तशिल्प', sector: 'HANDICRAFTS', block: 'Bhopal', score: 22 },
+  { enterpriseId: 'MSME-4488', name: 'Krishna Dairy Unit', nameHi: 'कृष्णा डेयरी यूनिट', sector: 'DAIRY', block: 'Vidisha', score: 18 },
+]
+
+const NAME_PREFIX = [
+  'Shri', 'Maa Narmada', 'Jai Kisan', 'Sarvodaya', 'Annapurna', 'Vindhya', 'Betwa', 'Narmada',
+  'Adarsh', 'Nav Jeevan', 'Gram Shakti', 'Kisan Mitra', 'Sanskar', 'Prerna', 'Sunrise',
+  'Bhagirath', 'Malwa', 'Sahyog', 'Ekta', 'Pragati', 'Suvidha', 'Anmol', 'Nirmal', 'Vaibhav',
+]
+const NAME_PREFIX_HI = [
+  'श्री', 'माँ नर्मदा', 'जय किसान', 'सर्वोदय', 'अन्नपूर्णा', 'विंध्य', 'बेतवा', 'नर्मदा',
+  'आदर्श', 'नव जीवन', 'ग्राम शक्ति', 'किसान मित्र', 'संस्कार', 'प्रेरणा', 'सनराइज़',
+  'भगीरथ', 'मालवा', 'सहयोग', 'एकता', 'प्रगति', 'सुविधा', 'अनमोल', 'निर्मल', 'वैभव',
+]
+const SECTOR_SUFFIX: Record<Sector, { en: string[]; hi: string[] }> = {
+  DAIRY: { en: ['Dairy', 'Milk Centre', 'Dairy Unit', 'Doodh Sangh'], hi: ['डेयरी', 'दूध केंद्र', 'डेयरी यूनिट', 'दूध संघ'] },
+  POULTRY: { en: ['Poultry Farm', 'Layer Farm', 'Poultry Unit'], hi: ['पोल्ट्री फ़ार्म', 'लेयर फ़ार्म', 'पोल्ट्री यूनिट'] },
+  FOOD_PROC: { en: ['Food Products', 'Flour Mill', 'Masala Udyog', 'Agro Foods'], hi: ['फ़ूड प्रोडक्ट्स', 'आटा चक्की', 'मसाला उद्योग', 'एग्रो फ़ूड्स'] },
+  HANDICRAFTS: { en: ['Handicrafts', 'Handloom', 'Craft Works'], hi: ['हस्तशिल्प', 'हथकरघा', 'क्राफ़्ट वर्क्स'] },
+  RURAL_RETAIL: { en: ['Kirana Store', 'General Store', 'Provision Store'], hi: ['किराना स्टोर', 'जनरल स्टोर', 'प्रोविज़न स्टोर'] },
+}
+
+/** Sector weights applied to the five sub-scores (deck feature 2). */
+export const SECTOR_WEIGHTS: Record<Sector, SubScores> = {
+  DAIRY: { liquidity: 0.28, behavioural: 0.2, trendVolatility: 0.18, obligationLoad: 0.19, externalShock: 0.15 },
+  POULTRY: { liquidity: 0.3, behavioural: 0.22, trendVolatility: 0.17, obligationLoad: 0.14, externalShock: 0.17 },
+  FOOD_PROC: { liquidity: 0.26, behavioural: 0.22, trendVolatility: 0.2, obligationLoad: 0.18, externalShock: 0.14 },
+  HANDICRAFTS: { liquidity: 0.24, behavioural: 0.18, trendVolatility: 0.2, obligationLoad: 0.16, externalShock: 0.22 },
+  RURAL_RETAIL: { liquidity: 0.3, behavioural: 0.24, trendVolatility: 0.18, obligationLoad: 0.18, externalShock: 0.1 },
+}
+
+/** Band plan so the totals always match the deck: 9 red, 31 watch, 102 standard. */
+const TOTAL = 142
+const TARGET = { RED: 9, WATCH: 31, STANDARD: 102 }
+
+function buildBandPlan(): Band[] {
+  const remaining: Band[] = []
+  const pinnedCounts = PINNED.reduce<Record<Band, number>>(
+    (acc, p) => {
+      acc[bandOf(p.score)]++
+      return acc
+    },
+    { RED: 0, WATCH: 0, STANDARD: 0 },
+  )
+  ;(Object.keys(TARGET) as Band[]).forEach((b) => {
+    for (let i = 0; i < TARGET[b] - pinnedCounts[b]; i++) remaining.push(b)
+  })
+  return shuffled(rng(seedOf('udyamlinc-band-plan')), remaining)
+}
+
+/**
+ * Generated scores stay below the headline enterprise's 79, so Sehore Poultry
+ * Farm leads the dashboard exactly as it does on the deck's wireframe.
+ */
+function scoreForBand(r: () => number, band: Band): number {
+  if (band === 'RED') return pickInt(r, 66, 78)
+  if (band === 'WATCH') return pickInt(r, 36, 64)
+  return pickInt(r, 8, 34)
+}
+
+/** A 6-month score history that lands on the current score, drifting the way the band implies. */
+function trendFor(r: () => number, score: number, band: Band): number[] {
+  const drift = band === 'RED' ? 1 : band === 'WATCH' ? 0.4 : -0.6
+  const out: number[] = []
+  let v = score - drift * 9
+  for (let i = 0; i < 6; i++) {
+    out.push(Math.max(4, Math.min(97, Math.round(v))))
+    v += drift * 3 + (r() - 0.5) * 7
+  }
+  out[5] = score
+  return out
+}
+
+function build(): Enterprise[] {
+  const plan = buildBandPlan()
+  const list: Enterprise[] = []
+
+  PINNED.forEach((p, i) => {
+    const r = rng(seedOf(p.enterpriseId))
+    const band = bandOf(p.score)
+    list.push({
+      id: i + 1,
+      enterpriseId: p.enterpriseId,
+      name: p.name,
+      nameHi: p.nameHi,
+      sector: p.sector,
+      block: p.block,
+      district: BLOCK_DISTRICT[p.block],
+      ownerCount: pickInt(r, 1, 4),
+      vintageMonths: pickInt(r, 14, 96),
+      loanOutstanding: pickInt(r, 6, 34) * 10_000,
+      monthlyInstalment: pickInt(r, 24, 96) * 250,
+      score: p.score,
+      band,
+      trend: trendFor(r, p.score, band),
+      lastUpdated: new Date().toISOString(),
+    })
+  })
+
+  for (let i = 0; i < TOTAL - PINNED.length; i++) {
+    const enterpriseId = `MSME-${1000 + ((i * 37 + 113) % 8000)}`
+    const r = rng(seedOf(enterpriseId))
+    const sector = pickOne(r, SECTOR_LIST)
+    const block = pickOne(r, BLOCKS)
+    const band = plan[i]
+    const score = scoreForBand(r, band)
+    const nameIdx = pickInt(r, 0, NAME_PREFIX.length - 1)
+    const sufIdx = pickInt(r, 0, SECTOR_SUFFIX[sector].en.length - 1)
+    list.push({
+      id: PINNED.length + i + 1,
+      enterpriseId,
+      name: `${NAME_PREFIX[nameIdx]} ${SECTOR_SUFFIX[sector].en[sufIdx]}`,
+      nameHi: `${NAME_PREFIX_HI[nameIdx]} ${SECTOR_SUFFIX[sector].hi[sufIdx]}`,
+      sector,
+      block,
+      district: BLOCK_DISTRICT[block],
+      ownerCount: pickInt(r, 1, 4),
+      vintageMonths: pickInt(r, 8, 120),
+      loanOutstanding: pickInt(r, 4, 40) * 10_000,
+      monthlyInstalment: pickInt(r, 16, 110) * 250,
+      score,
+      band,
+      trend: trendFor(r, score, band),
+      lastUpdated: new Date().toISOString(),
+    })
+  }
+
+  // Highest risk first — the order the console works the book in.
+  return list.sort((a, b) => b.score - a.score)
+}
+
+/** The whole demo portfolio, built once per page load. */
+export const ENTERPRISES: Enterprise[] = build()
+
+export function findEnterprise(enterpriseId: string): Enterprise | undefined {
+  return ENTERPRISES.find((e) => e.enterpriseId === enterpriseId)
+}
+
+// ── Sub-scores, drivers and trip-wires ──────────────────────────
+
+/** Slide-6 driver weights for the pinned enterprise, so the demo matches the submission. */
+const PINNED_SUBSCORES: Record<string, SubScores> = {
+  'MSME-4417': { liquidity: 26, behavioural: 19, trendVolatility: 14, obligationLoad: 11, externalShock: 9 },
+}
+
+export function subScoresFor(e: Enterprise): SubScores {
+  const pinned = PINNED_SUBSCORES[e.enterpriseId]
+  if (pinned) return pinned
+  const r = rng(seedOf(`${e.enterpriseId}:sub`))
+  const w = SECTOR_WEIGHTS[e.sector]
+  // Distribute the composite across the five families, weighted by sector, with jitter.
+  const raw = {
+    liquidity: e.score * w.liquidity * (0.8 + r() * 0.5),
+    behavioural: e.score * w.behavioural * (0.8 + r() * 0.5),
+    trendVolatility: e.score * w.trendVolatility * (0.8 + r() * 0.5),
+    obligationLoad: e.score * w.obligationLoad * (0.8 + r() * 0.5),
+    externalShock: e.score * w.externalShock * (0.8 + r() * 0.5),
+  }
+  return {
+    liquidity: Math.round(raw.liquidity),
+    behavioural: Math.round(raw.behavioural),
+    trendVolatility: Math.round(raw.trendVolatility),
+    obligationLoad: Math.round(raw.obligationLoad),
+    externalShock: Math.round(raw.externalShock),
+  }
+}
+
+export function stressScoreFor(e: Enterprise): StressScore {
+  return {
+    enterpriseId: e.enterpriseId,
+    score: e.score,
+    band: e.band,
+    subScores: subScoresFor(e),
+    computedAt: new Date().toISOString(),
+    modelVersion: 'lgbm-q-v0.9.3',
+  }
+}
+
+export const DRIVER_META: { key: keyof SubScores; label: string; labelHi: string }[] = [
+  { key: 'liquidity', label: 'Liquidity', labelHi: 'नकदी' },
+  { key: 'behavioural', label: 'Behavioural (UPI)', labelHi: 'लेन-देन व्यवहार' },
+  { key: 'trendVolatility', label: 'Trend & volatility', labelHi: 'उतार-चढ़ाव' },
+  { key: 'obligationLoad', label: 'Obligation load', labelHi: 'किस्त का बोझ' },
+  { key: 'externalShock', label: 'External shock', labelHi: 'बाहरी झटका' },
+]
+
+/** Sector-specific sentence templates — the deck's "models the trade, not one generic model". */
+const REASON_TEXT: Record<Sector, Record<keyof SubScores, { en: string; hi: string }>> = {
+  POULTRY: {
+    liquidity: { en: 'Feed costs up 18% against a 9% fall in egg realisation.', hi: 'दाना 18% महँगा और अंडे का भाव 9% गिरा है।' },
+    behavioural: { en: 'UPI collections down 23% over eight weeks.', hi: 'आठ हफ़्तों में UPI से आया पैसा 23% घटा है।' },
+    trendVolatility: { en: 'Weekly sales swinging twice as wide as last season.', hi: 'हफ़्तेवार बिक्री पिछले सीज़न से दोगुनी ऊपर-नीचे हो रही है।' },
+    obligationLoad: { en: 'Instalment now takes 41% of net monthly cash.', hi: 'किस्त अब महीने की कमाई का 41% ले रही है।' },
+    externalShock: { en: 'Heat anomaly flagged in the block for the next fortnight.', hi: 'अगले पंद्रह दिन ब्लॉक में गर्मी की चेतावनी है।' },
+  },
+  DAIRY: {
+    liquidity: { en: 'Fodder cost up 14% while procurement rate stayed flat.', hi: 'चारा 14% महँगा हुआ, दूध का रेट वही है।' },
+    behavioural: { en: 'Society payment cycle stretched from 10 to 18 days.', hi: 'समिति से भुगतान 10 दिन की जगह 18 दिन में आ रहा है।' },
+    trendVolatility: { en: 'Daily yield varying sharply across the last six weeks.', hi: 'छह हफ़्तों में रोज़ का दूध बहुत घट-बढ़ रहा है।' },
+    obligationLoad: { en: 'Two instalments now fall in the same fortnight.', hi: 'दो किस्तें एक ही पखवाड़े में आ रही हैं।' },
+    externalShock: { en: 'Rainfall deficit in the block is raising fodder prices.', hi: 'ब्लॉक में कम बारिश से चारा महँगा हो रहा है।' },
+  },
+  FOOD_PROC: {
+    liquidity: { en: 'Raw material prepayment is locking up working capital.', hi: 'कच्चे माल का अग्रिम भुगतान पूँजी रोक रहा है।' },
+    behavioural: { en: 'Buyer settlements slipping past the agreed 15 days.', hi: 'खरीदार 15 दिन की जगह देर से पैसा दे रहे हैं।' },
+    trendVolatility: { en: 'Order volume swinging with festival demand.', hi: 'त्योहारों के साथ ऑर्डर बहुत घट-बढ़ रहे हैं।' },
+    obligationLoad: { en: 'Instalment plus rent exceeds 50% of monthly inflow.', hi: 'किस्त और किराया मिलकर आधी से ज़्यादा कमाई ले रहे हैं।' },
+    externalShock: { en: 'Mandi price shock in the primary input crop.', hi: 'मुख्य फ़सल के मंडी भाव में तेज़ बदलाव है।' },
+  },
+  HANDICRAFTS: {
+    liquidity: { en: 'Finished stock is unsold going into the lean quarter.', hi: 'तैयार माल बिका नहीं और सुस्त तिमाही आ रही है।' },
+    behavioural: { en: 'Top buyer accounts for 68% of all receipts.', hi: 'कुल आमदनी का 68% सिर्फ़ एक खरीदार से आता है।' },
+    trendVolatility: { en: 'Receipts concentrated in two months of the year.', hi: 'साल की कमाई सिर्फ़ दो महीनों में सिमटी है।' },
+    obligationLoad: { en: 'Repayment schedule ignores the seasonal lull.', hi: 'किस्त का समय सुस्त सीज़न का ध्यान नहीं रखता।' },
+    externalShock: { en: 'Exhibition calendar thinner than last year.', hi: 'पिछले साल से कम प्रदर्शनियाँ लगी हैं।' },
+  },
+  RURAL_RETAIL: {
+    liquidity: { en: 'Credit sales to customers up 31% this quarter.', hi: 'इस तिमाही उधार बिक्री 31% बढ़ी है।' },
+    behavioural: { en: 'Daily UPI receipt count down for six straight weeks.', hi: 'छह हफ़्तों से रोज़ के UPI लेन-देन घट रहे हैं।' },
+    trendVolatility: { en: 'Footfall dropping since the new road closure.', hi: 'रास्ता बंद होने से ग्राहक कम आ रहे हैं।' },
+    obligationLoad: { en: 'Stock restocking clashes with the instalment date.', hi: 'माल भरने और किस्त की तारीख़ एक साथ पड़ रही है।' },
+    externalShock: { en: 'Local market disruption flagged in the block.', hi: 'ब्लॉक में स्थानीय बाज़ार में गड़बड़ी दर्ज है।' },
+  },
+}
+
+/** Top-3 SHAP drivers as plain-language sentences (deck feature 4). */
+export function reasonCodesFor(e: Enterprise): ReasonCode[] {
+  const sub = subScoresFor(e)
+  return DRIVER_META.map((d) => ({
+    driver: d.label,
+    driverHi: d.labelHi,
+    weight: sub[d.key],
+    sentenceEn: REASON_TEXT[e.sector][d.key].en,
+    sentenceHi: REASON_TEXT[e.sector][d.key].hi,
+  }))
+    .sort((a, b) => b.weight - a.weight)
+    .slice(0, 3)
+}
+
+/** Rule-based alerts that fire independently of the model, for auditability (feature 3). */
+export function tripWiresFor(e: Enterprise): TripWire[] {
+  const r = rng(seedOf(`${e.enterpriseId}:tw`))
+  const sub = subScoresFor(e)
+  const dscr = (1.9 - e.score / 100).toFixed(2)
+  return [
+    {
+      code: 'TW-01',
+      label: 'Projected DSCR below 1.0',
+      labelHi: 'किस्त चुकाने की क्षमता 1.0 से नीचे',
+      fired: e.band === 'RED',
+      detail: `P10 debt-service coverage projected at ${dscr}`,
+      threshold: 'DSCR(P10) < 1.00',
+    },
+    {
+      code: 'TW-02',
+      label: 'UPI inflow drop over 8 weeks',
+      labelHi: 'आठ हफ़्तों में UPI आमदनी में गिरावट',
+      fired: sub.behavioural >= 15,
+      detail: `Rolling 8-week inflow down ${pickInt(r, 12, 34)}%`,
+      threshold: 'Δ inflow < −20%',
+    },
+    {
+      code: 'TW-03',
+      label: 'Ledger silent for 14 days',
+      labelHi: '14 दिन से हिसाब दर्ज नहीं',
+      fired: e.band !== 'STANDARD' && r() > 0.55,
+      detail: `Last entry ${pickInt(r, 2, 26)} days ago`,
+      threshold: 'no entry ≥ 14 days',
+    },
+    {
+      code: 'TW-04',
+      label: 'Instalment share of inflow above 40%',
+      labelHi: 'किस्त आमदनी का 40% से ज़्यादा',
+      fired: sub.obligationLoad >= 11,
+      detail: `Instalment is ${pickInt(r, 22, 58)}% of median monthly inflow`,
+      threshold: 'EMI / inflow > 40%',
+    },
+    {
+      code: 'TW-05',
+      label: 'Climate or mandi shock in block',
+      labelHi: 'ब्लॉक में मौसम या मंडी का झटका',
+      fired: sub.externalShock >= 9,
+      detail: 'IMD heat anomaly + Agmarknet input price spike',
+      threshold: 'anomaly z-score > 1.5',
+    },
+  ]
+}
+
+// ── Forecast ────────────────────────────────────────────────────
+
+/**
+ * Six-month quantile path. P50 drifts down for stressed enterprises; P10/P90
+ * fan out with horizon, because uncertainty compounds. The obligation line is
+ * the instalment plus fixed costs due that month — where P10 dips under it,
+ * the enterprise escalates.
+ */
+export function forecastFor(e: Enterprise, horizon = 6): ForecastPoint[] {
+  const r = rng(seedOf(`${e.enterpriseId}:fc`))
+  const months = monthWindow(horizon)
+  const base = 18_000 + (100 - e.score) * 420 + pickInt(r, -2000, 2500)
+  const drift = e.band === 'RED' ? -0.14 : e.band === 'WATCH' ? -0.05 : 0.035
+  const fixed = e.monthlyInstalment + pickInt(r, 8, 22) * 400
+
+  const points = months.map((m, h) => {
+    const centre = base * (1 + drift * (h + 1)) + (r() - 0.5) * 1800
+    const spread = centre * (0.16 + h * 0.045) + 900
+    return {
+      month: m.key,
+      label: m.label,
+      labelHi: m.labelHi,
+      p10: Math.round(centre - spread),
+      p50: Math.round(centre),
+      p90: Math.round(centre + spread * 0.85),
+      obligation: Math.round(fixed + h * 120),
+    }
+  })
+
+  // The wireframe slide quotes a ₹12,400 shortfall three months out for the
+  // headline enterprise — pin it so the prototype matches the submitted deck.
+  const pin = PINNED_SHORTFALL[e.enterpriseId]
+  if (pin && points.length > pin.horizon) {
+    const p = points[pin.horizon]
+    p.p10 = p.obligation - pin.amount
+    p.p50 = Math.max(p.p50, p.p10 + 4_000)
+    p.p90 = Math.max(p.p90, p.p50 + 5_000)
+    // Everything before the pinned month must still clear its obligation,
+    // or the "first breach" would land earlier than the deck says.
+    for (let i = 0; i < pin.horizon; i++) {
+      points[i].p10 = Math.max(points[i].p10, points[i].obligation + 1_500)
+      points[i].p50 = Math.max(points[i].p50, points[i].p10 + 3_000)
+      points[i].p90 = Math.max(points[i].p90, points[i].p50 + 4_000)
+    }
+  }
+  return points
+}
+
+/** Enterprise → { months ahead of the first breach, ₹ gap }, as printed on the deck. */
+const PINNED_SHORTFALL: Record<string, { horizon: number; amount: number }> = {
+  'MSME-4417': { horizon: 2, amount: 12_400 },
+}
+
+/** First month where the downside case fails to cover obligations, or null. */
+export function breachPoint(points: ForecastPoint[]): ForecastPoint | null {
+  return points.find((p) => p.p10 < p.obligation) ?? null
+}
+
+/** Size of the projected gap at the breach month. */
+export function shortfallOf(points: ForecastPoint[]): number {
+  const b = breachPoint(points)
+  return b ? Math.max(0, b.obligation - b.p10) : 0
+}

src/lib/demo/feeds.ts

@@ -0,0 +1,292 @@
+import type {
+  ClimateSignal,
+  FeatureDefinition,
+  FeatureValueRow,
+  Freshness,
+  IngestionRun,
+  MarketSignal,
+  RuleOutcome,
+  TripWireRule,
+} from '../api'
+import { BLOCKS, BLOCK_DISTRICT, findEnterprise, tripWiresFor } from './enterprises'
+import { dayOffsetIso, pickInt, rng, seedOf } from './seed'
+
+/*
+ * Demo fallback for the ingestion, feature-store and rule-engine screens.
+ *
+ * These screens exist to show *provenance* — where a number came from and how
+ * old it is — so the fallback has to be internally consistent rather than merely
+ * plausible: a rule that skips for stale data here must skip against the same
+ * staleness the freshness panel is showing.
+ */
+
+const DISTRICTS = BLOCKS.map((b) => ({ code: b.toUpperCase(), name: BLOCK_DISTRICT[b] ?? b }))
+
+/** Monday of the ISO week `weeksAgo` weeks back. */
+function weekStart(weeksAgo: number): string {
+  const d = new Date()
+  const day = (d.getDay() + 6) % 7 // 0 = Monday
+  d.setDate(d.getDate() - day - weeksAgo * 7)
+  return d.toISOString().slice(0, 10)
+}
+
+// ── freshness ────────────────────────────────────────────────────
+
+/**
+ * Agmarknet reports most days, so market data is a day or two old; the climate
+ * reanalysis archive trails real time by about five days by design.
+ */
+export function demoFreshness(): Freshness[] {
+  return DISTRICTS.map((d) => {
+    const r = rng(seedOf(`fresh:${d.code}`))
+    const market = pickInt(r, 1, 4)
+    const climate = pickInt(r, 5, 8)
+    return {
+      districtCode: d.code,
+      districtName: d.name,
+      marketValidFor: dayOffsetIso(-market),
+      marketStalenessDays: market,
+      climateValidFor: dayOffsetIso(-climate),
+      climateStalenessDays: climate,
+    }
+  })
+}
+
+/** The worst staleness across districts — what the shell's chip reports. */
+export function worstStaleness(rows: Freshness[]): number {
+  return rows.reduce((worst, r) => Math.max(worst, r.marketStalenessDays ?? 0), 0)
+}
+
+// ── market signals ───────────────────────────────────────────────
+
+const COMMODITIES = [
+  { name: 'Maize', unit: 'QUINTAL', base: 2140 },
+  { name: 'Soyabean', unit: 'QUINTAL', base: 4680 },
+  { name: 'Wheat', unit: 'QUINTAL', base: 2520 },
+  { name: 'Green fodder', unit: 'QUINTAL', base: 680 },
+]
+
+export function demoMarketSignals(weeks = 8): MarketSignal[] {
+  const rows: MarketSignal[] = []
+  let id = 1
+  for (const d of DISTRICTS) {
+    for (const c of COMMODITIES) {
+      for (let w = 0; w < weeks; w++) {
+        const r = rng(seedOf(`mkt:${d.code}:${c.name}:${w}`))
+        // A slow upward drift on the feed side, which is what makes a squeeze.
+        const drift = 1 + (weeks - w) * 0.011
+        const modal = Math.round(c.base * drift * (0.97 + r() * 0.06))
+        rows.push({
+          id: id++,
+          districtName: d.name,
+          commodityName: c.name,
+          weekStart: weekStart(w),
+          modalPrice: modal,
+          minPrice: Math.round(modal * 0.93),
+          maxPrice: Math.round(modal * 1.08),
+          arrivalCount: pickInt(r, 2, 6),
+          unit: c.unit,
+          source: 'AGMARKNET',
+          validForDate: dayOffsetIso(-(w * 7 + 2)),
+          observedAt: new Date().toISOString(),
+        })
+      }
+    }
+  }
+  return rows
+}
+
+export function demoClimateSignals(weeks = 8): ClimateSignal[] {
+  const rows: ClimateSignal[] = []
+  let id = 1
+  for (const d of DISTRICTS) {
+    for (let w = 0; w < weeks; w++) {
+      const r = rng(seedOf(`clm:${d.code}:${w}`))
+      const normal = 42 + pickInt(r, -8, 12)
+      const rain = Math.max(0, Math.round(normal * (0.45 + r() * 0.8)))
+      const tmaxNormal = 33 + pickInt(r, -2, 3)
+      const tmax = tmaxNormal + (r() * 4 - 1)
+      rows.push({
+        id: id++,
+        districtName: d.name,
+        weekStart: weekStart(w),
+        isoWeek: 30 - w,
+        rainfallMm: rain,
+        tmaxC: Number(tmax.toFixed(1)),
+        rainfallNormalMm: normal,
+        rainfallAnomalyPct: Number((((rain - normal) / normal) * 100).toFixed(1)),
+        heatAnomalyC: Number((tmax - tmaxNormal).toFixed(1)),
+        validForDate: dayOffsetIso(-(w * 7 + 5)),
+        observedAt: new Date().toISOString(),
+      })
+    }
+  }
+  return rows
+}
+
+export function demoIngestionRuns(): IngestionRun[] {
+  const runs: IngestionRun[] = []
+  let id = 1
+  for (let day = 0; day < 5; day++) {
+    for (const source of ['AGMARKNET', 'OPEN_METEO']) {
+      const r = rng(seedOf(`run:${source}:${day}`))
+      const failed = day === 2 && source === 'AGMARKNET' ? 3 : 0
+      runs.push({
+        id: id++,
+        source,
+        runDate: dayOffsetIso(-day),
+        trigger: 'SCHEDULED',
+        status: failed > 0 ? 'PARTIAL' : 'SUCCESS',
+        rowsFetched: pickInt(r, 120, 340),
+        rowsWritten: pickInt(r, 24, 64),
+        callsFailed: failed,
+        durationMs: pickInt(r, 1800, 9400),
+        startedAt: `${dayOffsetIso(-day)}T02:00:11`,
+        message:
+          failed > 0
+            ? '3 calls failed — upstream timeout, partial week written'
+            : 'all districts written',
+      })
+    }
+  }
+  return runs
+}
+
+// ── feature catalogue ────────────────────────────────────────────
+
+/** Mirrors the backend catalogue, including the three the trip-wires demanded. */
+export const DEMO_FEATURES: FeatureDefinition[] = [
+  f('feed_cost_change', 'Feed cost change', 'EXTERNAL_SHOCK', 'RATIO', 'AGMARKNET', 10),
+  f('output_price_change', 'Output price change', 'EXTERNAL_SHOCK', 'RATIO', 'AGMARKNET', 10),
+  f('margin_squeeze', 'Margin squeeze', 'EXTERNAL_SHOCK', 'RATIO', 'AGMARKNET', 10),
+  f('price_z_score', 'Seasonal price z-score', 'TREND_VOLATILITY', 'INDEX', 'AGMARKNET', 10),
+  f('rainfall_anomaly', 'Rainfall anomaly', 'EXTERNAL_SHOCK', 'PCT', 'CLIMATE', 14),
+  f('heat_anomaly', 'Heat anomaly', 'EXTERNAL_SHOCK', 'INDEX', 'CLIMATE', 14),
+  f('cash_flow_change', 'Cash flow change', 'LIQUIDITY', 'RATIO', 'LEDGER', 7),
+  f('emi_delay', 'EMI delay', 'BEHAVIOURAL', 'DAYS', 'CBS', 35),
+  f('inventory_days', 'Inventory days', 'LIQUIDITY', 'DAYS', 'LEDGER', 14),
+  f('upi_inflow_change', 'UPI inflow change', 'LIQUIDITY', 'RATIO', 'UPI', 21),
+  f('feed_staleness_days', 'Feed staleness', 'QUALITY', 'DAYS', 'AGMARKNET', null),
+  f('dscr_p10', 'DSCR at P10', 'OBLIGATION_LOAD', 'RATIO', 'FORECAST', 7),
+  f('days_since_last_entry', 'Days since last ledger entry', 'BEHAVIOURAL', 'DAYS', 'LEDGER', 3),
+  f('emi_to_inflow', 'Instalment share of inflow', 'OBLIGATION_LOAD', 'RATIO', 'CBS', 30),
+]
+
+function f(
+  code: string,
+  label: string,
+  family: string,
+  unit: string,
+  sourceKind: string,
+  staleness: number | null,
+): FeatureDefinition {
+  return { code, label, family, unit, sourceKind, stalenessToleranceDays: staleness, direction: null, derivation: null }
+}
+
+/**
+ * The tall rows for one enterprise. `upi_inflow_change` is null on purpose —
+ * there is no Account Aggregator consent yet, and showing that honestly is the
+ * point of the missing-reason column.
+ */
+export function demoFeatureValues(enterpriseId: string): FeatureValueRow[] {
+  const e = findEnterprise(enterpriseId)
+  const r = rng(seedOf(`feat:${enterpriseId}`))
+  const stress = (e?.score ?? 50) / 100
+  const today = dayOffsetIso(0)
+
+  const value = (code: string, v: number | null, staleness: number | null, missing?: string): FeatureValueRow => ({
+    featureCode: code,
+    value: v,
+    validForDate: today,
+    stalenessDays: staleness,
+    missingReason: missing ?? null,
+  })
+
+  return [
+    value('feed_cost_change', Number((0.04 + stress * 0.22).toFixed(3)), 2),
+    value('output_price_change', Number((0.05 - stress * 0.07).toFixed(3)), 2),
+    value('margin_squeeze', Number((stress * 0.28 - 0.01).toFixed(3)), 2),
+    value('price_z_score', Number((stress * 2.6 - 0.4).toFixed(2)), 2),
+    value('rainfall_anomaly', Number((-stress * 46 + 8).toFixed(1)), 6),
+    value('heat_anomaly', Number((stress * 2.4).toFixed(2)), 6),
+    value('cash_flow_change', Number((0.06 - stress * 0.6).toFixed(3)), 1),
+    value('emi_delay', pickInt(r, 0, Math.round(stress * 70)), 4),
+    value('inventory_days', pickInt(r, 8, Math.round(12 + stress * 50)), 1),
+    value('upi_inflow_change', null, null, 'NO_CONSENT'),
+    value('feed_staleness_days', 2, 2),
+    value('dscr_p10', Number((1.65 - stress * 1.05).toFixed(2)), 0),
+    value('days_since_last_entry', pickInt(r, 0, Math.round(stress * 22)), 0),
+    value('emi_to_inflow', Number((0.12 + stress * 0.4).toFixed(3)), 4),
+  ]
+}
+
+// ── rules ────────────────────────────────────────────────────────
+
+export const DEMO_RULES: TripWireRule[] = [
+  rule(1, 'TW-01', 'Projected DSCR below 1.0', 'किस्त चुकाने की क्षमता 1.0 से नीचे', 'dscr_p10 < 1.0', 'DSCR(P10) < 1.00', 'RED', 'dscr_p10', 7),
+  rule(2, 'TW-02', 'UPI inflow drop over 8 weeks', 'आठ हफ़्तों में UPI आमदनी में गिरावट', 'upi_inflow_change < -0.20', 'Δ inflow < −20%', 'RED', 'upi_inflow_change', 10),
+  rule(3, 'TW-03', 'Ledger silent for 14 days', '14 दिन से हिसाब दर्ज नहीं', 'days_since_last_entry >= 14', 'no entry ≥ 14 days', 'WATCH', 'days_since_last_entry', 3),
+  rule(4, 'TW-04', 'Instalment share of inflow above 40%', 'किस्त आमदनी का 40% से ज़्यादा', 'emi_to_inflow > 0.40', 'EMI / inflow > 40%', 'WATCH', 'emi_to_inflow', 30),
+  rule(5, 'TW-05', 'Climate or mandi shock in block', 'ब्लॉक में मौसम या मंडी का झटका', 'price_z_score > 1.5 or heat_anomaly > 1.5', 'anomaly z-score > 1.5', 'WATCH', 'price_z_score,heat_anomaly', 14),
+]
+
+function rule(
+  id: number,
+  code: string,
+  label: string,
+  labelHi: string,
+  expression: string,
+  thresholdText: string,
+  severity: 'RED' | 'WATCH',
+  requiredFeatures: string,
+  maxStalenessDays: number,
+): TripWireRule {
+  return {
+    id,
+    code,
+    label,
+    labelHi,
+    expression,
+    thresholdText,
+    severity,
+    sectorCode: null,
+    requiredFeatures,
+    maxStalenessDays,
+    active: true,
+    version: 1,
+  }
+}
+
+/**
+ * Evaluate the demo rules against the demo feature rows — the same two guards
+ * the backend applies, in the same order: missing first, then stale, then the
+ * expression. TW-02 therefore always skips for want of consent, which is exactly
+ * what the real engine reports today.
+ */
+export function demoRuleOutcomes(enterpriseId: string): RuleOutcome[] {
+  const values = new Map(demoFeatureValues(enterpriseId).map((v) => [v.featureCode, v]))
+  const catalogue = new Map(DEMO_FEATURES.map((d) => [d.code, d]))
+  const fired = new Map(tripWiresFor(findEnterprise(enterpriseId)!).map((t) => [t.code, t.fired]))
+
+  return DEMO_RULES.map((r): RuleOutcome => {
+    const base = { ruleCode: r.code, ruleId: r.id, ruleVersion: r.version, severity: r.severity }
+
+    for (const code of r.requiredFeatures.split(',')) {
+      const v = values.get(code.trim())
+      if (!v || v.value === null) {
+        return { ...base, status: 'SKIPPED_MISSING', detail: `${code} (${v?.missingReason ?? 'not computed'})` }
+      }
+      const ruleLimit = r.maxStalenessDays
+      const featureLimit = catalogue.get(code.trim())?.stalenessToleranceDays ?? null
+      const tolerance = featureLimit === null ? ruleLimit : Math.min(ruleLimit, featureLimit)
+      if (v.stalenessDays !== null && v.stalenessDays > tolerance) {
+        return {
+          ...base,
+          status: 'SKIPPED_STALE',
+          detail: `${code} is ${v.stalenessDays}d old, tolerance ${tolerance}d`,
+        }
+      }
+    }
+    return { ...base, status: fired.get(r.code) ? 'FIRED' : 'NOT_FIRED', detail: r.thresholdText }
+  })
+}

src/lib/demo/ops.ts

@@ -0,0 +1,232 @@
+import type {
+  AlertOrigin,
+  AlertState,
+  Enterprise,
+  FieldVisit,
+  PlaybookAction,
+  PortfolioSummary,
+  Sector,
+  VisitState,
+} from '../api'
+import type { RiskAlert } from '../api'
+import {
+  ENTERPRISES,
+  SECTORS,
+  breachPoint,
+  forecastFor,
+  reasonCodesFor,
+  shortfallOf,
+  tripWiresFor,
+} from './enterprises'
+import { currentMonthKey, dayOffsetIso, monthRef, pickInt, pickOne, rng, seedOf } from './seed'
+
+/* ------------------------------------------------------------------ */
+/* Portfolio, alert queue, visit playbook and benchmark figures.        */
+/* All derived from ENTERPRISES so every screen agrees.                 */
+/* ------------------------------------------------------------------ */
+
+export const ALL_BLOCKS = 'ALL'
+
+export function scopedEnterprises(block: string, sector?: Sector | 'ALL'): Enterprise[] {
+  return ENTERPRISES.filter(
+    (e) => (block === ALL_BLOCKS || e.block === block) && (!sector || sector === 'ALL' || e.sector === sector),
+  )
+}
+
+/**
+ * Dashboard KPI tiles. At the default scope (all blocks, current month) the
+ * counts are 142 / 9 / 31 / 102 with the deck's deltas; any narrower scope
+ * recomputes honestly from the filtered set.
+ */
+export function portfolioSummary(block: string, month: string): PortfolioSummary {
+  const rows = scopedEnterprises(block)
+  const red = rows.filter((e) => e.band === 'RED').length
+  const watch = rows.filter((e) => e.band === 'WATCH').length
+  const standard = rows.filter((e) => e.band === 'STANDARD').length
+  const r = rng(seedOf(`${block}:${month}:summary`))
+  const wide = block === ALL_BLOCKS && month === currentMonthKey()
+  return {
+    block,
+    month,
+    total: rows.length,
+    totalDelta: wide ? 4 : pickInt(r, 0, 3),
+    red,
+    redDelta: wide ? 2 : pickInt(r, -1, 2),
+    watch,
+    watchDelta: wide ? -3 : pickInt(r, -3, 2),
+    standard,
+    standardDelta: wide ? 0 : pickInt(r, -2, 4),
+    updatedMinutesAgo: wide ? 12 : pickInt(r, 3, 55),
+    rows,
+  }
+}
+
+// ── Alerts ──────────────────────────────────────────────────────
+
+const ALERT_STATES: AlertState[] = ['OPEN', 'OPEN', 'OPEN', 'ACKNOWLEDGED', 'ESCALATED', 'SNOOZED']
+
+/** Every Red and Watch enterprise carries a live alert; Standard ones do not. */
+export function alertsFor(block: string): RiskAlert[] {
+  return scopedEnterprises(block)
+    .filter((e) => e.band !== 'STANDARD')
+    .map((e, i) => {
+      const r = rng(seedOf(`${e.enterpriseId}:alert`))
+      const points = forecastFor(e)
+      const breach = breachPoint(points)
+      const reason = reasonCodesFor(e)[0]
+      const wires = tripWiresFor(e).filter((w) => w.fired)
+      const origin: AlertOrigin = wires.length >= 3 ? 'TRIPWIRE' : 'MODEL'
+      const breachMonthRef = breach ? monthRef(new Date(`${breach.month}-01T00:00:00`)) : null
+      return {
+        id: i + 1,
+        alertId: `ALT-${String(4200 + i)}`,
+        enterpriseId: e.enterpriseId,
+        enterpriseName: e.name,
+        sector: e.sector,
+        block: e.block,
+        band: e.band,
+        score: e.score,
+        origin,
+        title: breachMonthRef
+          ? `Cash shortfall projected by ${breachMonthRef.fullEn}`
+          : 'Stress score above watch threshold',
+        titleHi: breachMonthRef
+          ? `${breachMonthRef.fullHi} तक पैसा कम पड़ सकता है`
+          : 'जोखिम स्कोर निगरानी सीमा से ऊपर',
+        reason,
+        shortfall: shortfallOf(points),
+        breachMonth: breach?.month ?? '',
+        state: e.band === 'RED' ? 'OPEN' : pickOne(r, ALERT_STATES),
+        raisedAt: dayOffsetIso(-pickInt(r, 0, 21)),
+      }
+    })
+    .sort((a, b) => b.score - a.score)
+}
+
+/** The single alert the enterprise app shows on its Home tab. */
+export function alertForEnterprise(enterpriseId: string): RiskAlert | null {
+  return alertsFor(ALL_BLOCKS).find((a) => a.enterpriseId === enterpriseId) ?? null
+}
+
+// ── Field visits / playbook ─────────────────────────────────────
+
+/** Ranked interventions the officer works down (deck feature 8). */
+export const PLAYBOOK: PlaybookAction[] = [
+  { code: 'PB-01', label: 'Restructure instalment to the earning season', labelHi: 'किस्त को कमाई के मौसम से मिलाएँ', appliesTo: 'RED', detail: 'Move the due date behind the sector cash peak; no principal change.' },
+  { code: 'PB-02', label: 'Sanction a short working-capital top-up', labelHi: 'थोड़ी कार्यशील पूँजी और दें', appliesTo: 'RED', detail: 'Bridge the projected P10 gap for two months against stock.' },
+  { code: 'PB-03', label: 'Field visit — verify stock and receivables', labelHi: 'मौके पर जाकर स्टॉक और उधारी जाँचें', appliesTo: 'RED', detail: 'Confirm the ledger against physical stock before any action.' },
+  { code: 'PB-04', label: 'Input-cost counselling with the sector pack', labelHi: 'लागत घटाने की सलाह दें', appliesTo: 'WATCH', detail: 'Bulk feed/raw purchase timing against the mandi price curve.' },
+  { code: 'PB-05', label: 'Enrol for daily ledger reminders', labelHi: 'रोज़ हिसाब दर्ज करने की याद दिलाएँ', appliesTo: 'WATCH', detail: 'Ledger silence is the strongest early behavioural signal.' },
+  { code: 'PB-06', label: 'Diversify buyer concentration', labelHi: 'एक ही खरीदार पर निर्भरता घटाएँ', appliesTo: 'WATCH', detail: 'Introduce to the block procurement group.' },
+  { code: 'PB-07', label: 'Routine monitoring — no action', labelHi: 'सिर्फ़ निगरानी, कोई कार्रवाई नहीं', appliesTo: 'STANDARD', detail: 'Re-score next cycle.' },
+]
+
+const VISIT_STATES: VisitState[] = ['PLANNED', 'DONE', 'OVERDUE']
+const OUTCOMES = [
+  'Stock verified, ledger matches. Advised bulk feed purchase.',
+  'Owner unavailable — revisit scheduled.',
+  'Instalment date moved to the 20th, sanctioned by branch.',
+  'Working-capital top-up of ₹25,000 recommended.',
+  'Buyer payment confirmed as delayed, not defaulted.',
+]
+
+export function visitsFor(block: string, officer = 'Aditya Vyas'): FieldVisit[] {
+  return scopedEnterprises(block)
+    .filter((e) => e.band !== 'STANDARD')
+    .slice(0, 24)
+    .map((e, i) => {
+      const r = rng(seedOf(`${e.enterpriseId}:visit`))
+      const action = PLAYBOOK.filter((p) => p.appliesTo === e.band)[i % 3] ?? PLAYBOOK[0]
+      const state: VisitState = e.band === 'RED' && i < 6 ? (i < 4 ? 'DONE' : 'PLANNED') : pickOne(r, VISIT_STATES)
+      return {
+        id: i + 1,
+        visitId: `FV-${String(1800 + i)}`,
+        enterpriseId: e.enterpriseId,
+        enterpriseName: e.name,
+        block: e.block,
+        action: action.label,
+        actionHi: action.labelHi,
+        priority: e.band === 'RED' ? 1 : 2,
+        dueDate: dayOffsetIso(pickInt(r, -6, 14)),
+        state,
+        outcome: state === 'DONE' ? pickOne(r, OUTCOMES) : null,
+        officer,
+        loggedAt: state === 'DONE' ? dayOffsetIso(-pickInt(r, 1, 9)) : null,
+      }
+    })
+}
+
+/** "This week 6 / 9 high-risk visits done" — the sidebar progress card on slide 6. */
+export function weeklyVisitProgress(block: string): { done: number; target: number } {
+  const visits = visitsFor(block).filter((v) => v.priority === 1)
+  const target = block === ALL_BLOCKS ? 9 : Math.max(3, visits.length)
+  const done = block === ALL_BLOCKS ? 6 : visits.filter((v) => v.state === 'DONE').length
+  return { done, target }
+}
+
+// ── Benchmarks (deck slide 10) ──────────────────────────────────
+
+export const BENCHMARKS = {
+  aucRoc: 0.87,
+  aucRepaymentOnly: 0.68,
+  aucBureau: 0.61,
+  alertPrecisionRed: 0.79,
+  medianLeadTimeMonths: '3–6',
+  onDeviceLatencyMs: 250,
+  datasetSize: 2400,
+  sectorsCovered: 5,
+  districtsCovered: 4,
+}
+
+/** Band migration month over month — how the book moved. */
+export function bandMigration(block: string): { month: string; red: number; watch: number; standard: number }[] {
+  const rows = scopedEnterprises(block)
+  const r = rng(seedOf(`${block}:migration`))
+  const base = new Date()
+  return Array.from({ length: 6 }, (_, i) => {
+    const d = new Date(base.getFullYear(), base.getMonth() - (5 - i), 1)
+    const m = monthRef(d)
+    const decay = 5 - i
+    return {
+      month: m.label,
+      red: Math.max(0, rows.filter((e) => e.band === 'RED').length - decay + pickInt(r, -1, 1)),
+      watch: Math.max(0, rows.filter((e) => e.band === 'WATCH').length - decay * 2 + pickInt(r, -2, 3)),
+      standard: rows.filter((e) => e.band === 'STANDARD').length + decay * 2,
+    }
+  })
+}
+
+/** Per-sector-pack rollup for the Forecasts screen. */
+export function sectorRollup(block: string) {
+  return (Object.keys(SECTORS) as Sector[]).map((s) => {
+    const rows = scopedEnterprises(block, s)
+    const red = rows.filter((e) => e.band === 'RED').length
+    const watch = rows.filter((e) => e.band === 'WATCH').length
+    const avg = rows.length ? rows.reduce((a, e) => a + e.score, 0) / rows.length : 0
+    return {
+      sector: s,
+      label: SECTORS[s].label,
+      count: rows.length,
+      red,
+      watch,
+      standard: rows.length - red - watch,
+      avgScore: Math.round(avg),
+    }
+  })
+}
+
+/** Portfolio-level P10/P50/P90 aggregate over the 6-month horizon. */
+export function portfolioForecast(block: string) {
+  const rows = scopedEnterprises(block)
+  const sample = rows.slice(0, 60) // enough for a stable aggregate without 142 × 6 work
+  const paths = sample.map((e) => forecastFor(e))
+  return paths[0].map((_, h) => ({
+    month: paths[0][h].month,
+    label: paths[0][h].label,
+    labelHi: paths[0][h].labelHi,
+    p10: Math.round(paths.reduce((a, p) => a + p[h].p10, 0) / paths.length),
+    p50: Math.round(paths.reduce((a, p) => a + p[h].p50, 0) / paths.length),
+    p90: Math.round(paths.reduce((a, p) => a + p[h].p90, 0) / paths.length),
+    obligation: Math.round(paths.reduce((a, p) => a + p[h].obligation, 0) / paths.length),
+  }))
+}

src/lib/demo/seed.ts

@@ -0,0 +1,123 @@
+/*
+ * Deterministic seeding for the UdyamLinc prototype.
+ *
+ * Same pattern as BharatLinc's rconDemo.tsx: every figure is a pure function of
+ * (enterprise id, month), so the dashboard, the detail page, the alert queue and
+ * the PWA all quote the *same* numbers for the same scope — and a reload never
+ * shuffles the demo out from under a reviewer.
+ */
+
+/** FNV-style string hash. Stable across reloads and machines. */
+export function seedOf(key: string): number {
+  let h = 2166136261
+  for (let i = 0; i < key.length; i++) {
+    h ^= key.charCodeAt(i)
+    h = Math.imul(h, 16777619)
+  }
+  return h >>> 0
+}
+
+/** Mulberry32 — small, fast, fully deterministic PRNG. Returns a 0..1 generator. */
+export function rng(seed: number): () => number {
+  let a = seed >>> 0
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0
+    let t = a
+    t = Math.imul(t ^ (t >>> 15), t | 1)
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+/** Integer in [min, max]. */
+export function pickInt(r: () => number, min: number, max: number): number {
+  return min + Math.floor(r() * (max - min + 1))
+}
+
+export function pickOne<T>(r: () => number, xs: readonly T[]): T {
+  return xs[Math.floor(r() * xs.length) % xs.length]
+}
+
+/** Fisher–Yates driven by the seeded rng, so the shuffle is reproducible. */
+export function shuffled<T>(r: () => number, xs: readonly T[]): T[] {
+  const out = xs.slice()
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(r() * (i + 1))
+    ;[out[i], out[j]] = [out[j], out[i]]
+  }
+  return out
+}
+
+// ── Date helpers ────────────────────────────────────────────────
+
+const MONTHS_EN = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const MONTHS_HI = ['जन', 'फ़र', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुल', 'अग', 'सित', 'अक्तू', 'नव', 'दिस']
+/** Full Hindi month names — used in reason sentences, where the short form reads badly. */
+const MONTHS_HI_FULL = [
+  'जनवरी', 'फ़रवरी', 'मार्च', 'अप्रैल', 'मई', 'जून',
+  'जुलाई', 'अगस्त', 'सितंबर', 'अक्टूबर', 'नवंबर', 'दिसंबर',
+]
+
+export interface MonthRef {
+  key: string // '2026-10'
+  label: string // 'Oct'
+  labelHi: string // 'अक्तू'
+  fullEn: string // 'October'
+  fullHi: string // 'अक्टूबर'
+}
+
+export function monthRef(d: Date): MonthRef {
+  const m = d.getMonth()
+  return {
+    key: `${d.getFullYear()}-${String(m + 1).padStart(2, '0')}`,
+    label: MONTHS_EN[m],
+    labelHi: MONTHS_HI[m],
+    fullEn: [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December',
+    ][m],
+    fullHi: MONTHS_HI_FULL[m],
+  }
+}
+
+/** The `count` months starting at `offset` months from today. */
+export function monthWindow(count: number, offset = 0): MonthRef[] {
+  const base = new Date()
+  return Array.from({ length: count }, (_, i) => monthRef(new Date(base.getFullYear(), base.getMonth() + offset + i, 1)))
+}
+
+/** Current month key, e.g. '2026-08'. The console's default scope. */
+export function currentMonthKey(): string {
+  return monthRef(new Date()).key
+}
+
+export function isoDate(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+export function todayIso(): string {
+  return isoDate(new Date())
+}
+
+/** `n` days from today, negative for the past. */
+export function dayOffsetIso(n: number): string {
+  const d = new Date()
+  d.setDate(d.getDate() + n)
+  return isoDate(d)
+}
+
+// ── Formatting ──────────────────────────────────────────────────
+
+/** ₹ with Indian digit grouping and no decimals — how every amount is shown. */
+export function inr(n: number): string {
+  return `₹${Math.round(n).toLocaleString('en-IN')}`
+}
+
+/** Compact ₹ for KPI tiles: ₹12.4L / ₹8,200. */
+export function inrCompact(n: number): string {
+  const abs = Math.abs(n)
+  if (abs >= 1e7) return `₹${(n / 1e7).toFixed(2)}Cr`
+  if (abs >= 1e5) return `₹${(n / 1e5).toFixed(1)}L`
+  if (abs >= 1e3) return `₹${(n / 1e3).toFixed(1)}k`
+  return `₹${Math.round(n)}`
+}

src/lib/i18n.ts

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { Lang } from './api'
+
+/*
+ * Minimal two-language dictionary. No i18n library on purpose: the enterprise
+ * PWA must work fully offline from a precached shell, and the string count is
+ * small enough that a plain map is cheaper than a runtime loader.
+ *
+ * The officer console is English; the enterprise app is Hindi-first.
+ */
+
+type Dict = Record<string, { hi: string; en: string }>
+
+export const STRINGS: Dict = {
+  // ── app shell / tabs
+  'tab.home': { hi: 'होम', en: 'Home' },
+  'tab.ledger': { hi: 'हिसाब', en: 'Ledger' },
+  'tab.alerts': { hi: 'अलर्ट', en: 'Alerts' },
+  'tab.profile': { hi: 'प्रोफ़ाइल', en: 'Profile' },
+
+  // ── home
+  'home.attention': { hi: 'ध्यान दें', en: 'Attention' },
+  'home.estimate': { hi: 'अनुमान', en: 'Estimate' },
+  'home.shortfall': { hi: 'कमी', en: 'shortfall' },
+  'home.comingMonths': { hi: 'आने वाले महीने', en: 'Coming months' },
+  'home.sixMonths': { hi: '6 महीने', en: '6 months' },
+  'home.instalment': { hi: 'किस्त', en: 'Instalment' },
+  'home.legend': { hi: 'नारंगी और लाल = पैसा कम पड़ सकता है', en: 'Orange and red = cash may fall short' },
+  'home.todayAccount': { hi: 'आज का हिसाब', en: "Today's ledger" },
+  'home.moneyIn': { hi: 'पैसा आया', en: 'Money in' },
+  'home.moneyOut': { hi: 'पैसा गया', en: 'Money out' },
+  'home.stock': { hi: 'स्टॉक', en: 'Stock' },
+  'home.todayIn': { hi: 'आज आया', en: 'In today' },
+  'home.todayOut': { hi: 'आज गया', en: 'Out today' },
+  'home.todaySuggestion': { hi: 'आज का सुझाव', en: "Today's suggestion" },
+  'home.allGood': { hi: 'सब ठीक चल रहा है', en: 'Everything looks steady' },
+  'home.allGoodDetail': { hi: 'अगले छह महीने किस्त निकलती दिख रही है।', en: 'The instalment is covered across the next six months.' },
+
+  // ── ledger
+  'ledger.title': { hi: 'हिसाब', en: 'Ledger' },
+  'ledger.addEntry': { hi: 'नया हिसाब जोड़ें', en: 'Add an entry' },
+  'ledger.amount': { hi: 'रकम', en: 'Amount' },
+  'ledger.chooseType': { hi: 'क्या दर्ज करना है?', en: 'What are you recording?' },
+  'ledger.chooseCategory': { hi: 'किस लिए?', en: 'What for?' },
+  'ledger.save': { hi: 'सेव करें', en: 'Save' },
+  'ledger.saved': { hi: 'सेव हो गया', en: 'Saved' },
+  'ledger.balance': { hi: 'इस महीने का बाक़ी', en: 'Balance this month' },
+  'ledger.empty': { hi: 'अभी कोई हिसाब नहीं', en: 'No entries yet' },
+  'ledger.pending': { hi: 'भेजना बाक़ी', en: 'Pending sync' },
+  'ledger.synced': { hi: 'भेज दिया', en: 'Synced' },
+  'ledger.today': { hi: 'आज', en: 'Today' },
+  'ledger.back': { hi: 'वापस', en: 'Back' },
+
+  // ── alerts
+  'alerts.title': { hi: 'अलर्ट', en: 'Alerts' },
+  'alerts.none': { hi: 'कोई चेतावनी नहीं', en: 'No alerts' },
+  'alerts.whatToDo': { hi: 'क्या करें', en: 'What to do' },
+  'alerts.raisedOn': { hi: 'तारीख़', en: 'Raised' },
+
+  // ── profile
+  'profile.title': { hi: 'प्रोफ़ाइल', en: 'Profile' },
+  'profile.enterprise': { hi: 'उद्यम', en: 'Enterprise' },
+  'profile.sector': { hi: 'काम', en: 'Trade' },
+  'profile.block': { hi: 'ब्लॉक', en: 'Block' },
+  'profile.consent': { hi: 'सहमति', en: 'Consent' },
+  'profile.consentActive': { hi: 'चालू है', en: 'Active' },
+  'profile.revoke': { hi: 'सहमति वापस लें', en: 'Revoke consent' },
+  'profile.language': { hi: 'भाषा', en: 'Language' },
+  'profile.sync': { hi: 'सिंक', en: 'Sync' },
+  'profile.syncNow': { hi: 'अभी भेजें', en: 'Sync now' },
+  'profile.lastSynced': { hi: 'पिछली बार भेजा', en: 'Last synced' },
+  'profile.never': { hi: 'कभी नहीं', en: 'Never' },
+  'profile.noPii': { hi: 'आपकी निजी जानकारी कहीं नहीं रखी जाती।', en: 'No personal details are stored, ever.' },
+  'profile.logout': { hi: 'बाहर निकलें', en: 'Sign out' },
+
+  // ── shared
+  'common.offline': { hi: 'इंटरनेट नहीं — सेव किया हुआ दिख रहा है', en: 'Offline — showing saved data' },
+  'common.enterpriseId': { hi: 'उद्यम आईडी', en: 'Enterprise ID' },
+  'common.pin': { hi: 'पिन', en: 'PIN' },
+  'common.signIn': { hi: 'अंदर आएँ', en: 'Sign in' },
+}
+
+/** Translate a key. Falls back to the key itself so a missing string is obvious. */
+export function tr(key: string, lang: Lang): string {
+  return STRINGS[key]?.[lang] ?? key
+}
+
+const LANG_KEY = 'ul-lang'
+
+/** Language preference, persisted so an offline relaunch keeps it. */
+export function useLang(fallback: Lang = 'hi') {
+  const [lang, setLangState] = useState<Lang>(() => (localStorage.getItem(LANG_KEY) as Lang) || fallback)
+
+  useEffect(() => {
+    const sync = () => setLangState((localStorage.getItem(LANG_KEY) as Lang) || fallback)
+    window.addEventListener('ul-lang-changed', sync)
+    return () => window.removeEventListener('ul-lang-changed', sync)
+  }, [fallback])
+
+  const setLang = useCallback((l: Lang) => {
+    localStorage.setItem(LANG_KEY, l)
+    window.dispatchEvent(new Event('ul-lang-changed'))
+  }, [])
+
+  const t = useCallback((key: string) => tr(key, lang), [lang])
+
+  return { lang, setLang, t }
+}

src/lib/ledgerStore.ts

@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { LedgerEntry, LedgerKind } from './api'
+import { dayOffsetIso, pickInt, pickOne, rng, seedOf, todayIso } from './demo/seed'
+
+/*
+ * Offline-first ledger.
+ *
+ * Every entry is written to localStorage first and marked PENDING; a sync pass
+ * flips it to SYNCED. This is what makes the deck's "works with zero
+ * connectivity" claim true in the prototype — the owner never sees a spinner
+ * and never loses a tap.
+ */
+
+const KEY = 'ul-ledger'
+const SYNC_KEY = 'ul-last-sync'
+
+export const CATEGORIES: Record<LedgerKind, { code: string; en: string; hi: string }[]> = {
+  IN: [
+    { code: 'SALE', en: 'Sale', hi: 'बिक्री' },
+    { code: 'UPI', en: 'UPI received', hi: 'UPI आया' },
+    { code: 'RECOVERY', en: 'Udhaar recovered', hi: 'उधारी वसूली' },
+    { code: 'OTHER_IN', en: 'Other', hi: 'अन्य' },
+  ],
+  OUT: [
+    { code: 'INPUT', en: 'Raw material / feed', hi: 'कच्चा माल / दाना' },
+    { code: 'WAGES', en: 'Wages', hi: 'मज़दूरी' },
+    { code: 'TRANSPORT', en: 'Transport', hi: 'भाड़ा' },
+    { code: 'EMI', en: 'Instalment', hi: 'किस्त' },
+    { code: 'OTHER_OUT', en: 'Other', hi: 'अन्य' },
+  ],
+  STOCK: [
+    { code: 'STOCK_IN', en: 'Stock added', hi: 'स्टॉक आया' },
+    { code: 'STOCK_OUT', en: 'Stock sold', hi: 'स्टॉक गया' },
+  ],
+}
+
+function read(): LedgerEntry[] {
+  try {
+    const raw = localStorage.getItem(KEY)
+    return raw ? (JSON.parse(raw) as LedgerEntry[]) : []
+  } catch {
+    return []
+  }
+}
+
+function write(entries: LedgerEntry[]) {
+  localStorage.setItem(KEY, JSON.stringify(entries))
+  window.dispatchEvent(new Event('ul-ledger-changed'))
+}
+
+/** 30 days of plausible history, generated once per enterprise so the app is never empty. */
+function seedHistory(enterpriseId: string): LedgerEntry[] {
+  const r = rng(seedOf(`${enterpriseId}:ledger`))
+  const out: LedgerEntry[] = []
+  for (let d = 30; d >= 0; d--) {
+    const entries = pickInt(r, 1, 3)
+    for (let i = 0; i < entries; i++) {
+      const kind: LedgerKind = r() > 0.45 ? 'IN' : 'OUT'
+      const cat = pickOne(r, CATEGORIES[kind])
+      out.push({
+        id: `seed-${enterpriseId}-${d}-${i}`,
+        enterpriseId,
+        kind,
+        amount: kind === 'IN' ? pickInt(r, 6, 52) * 100 : pickInt(r, 4, 38) * 100,
+        category: cat.code,
+        note: null,
+        entryDate: dayOffsetIso(-d),
+        syncState: 'SYNCED',
+        createdAt: new Date().toISOString(),
+      })
+    }
+  }
+  return out
+}
+
+export function loadLedger(enterpriseId: string): LedgerEntry[] {
+  const all = read()
+  const mine = all.filter((e) => e.enterpriseId === enterpriseId)
+  if (mine.length) return mine.sort((a, b) => b.entryDate.localeCompare(a.entryDate))
+  const seeded = seedHistory(enterpriseId)
+  write([...all, ...seeded])
+  return seeded.sort((a, b) => b.entryDate.localeCompare(a.entryDate))
+}
+
+/** Three-tap write: amount → category → save. Always succeeds, online or not. */
+export function addEntry(input: {
+  enterpriseId: string
+  kind: LedgerKind
+  amount: number
+  category: string
+  note?: string
+}): LedgerEntry {
+  const entry: LedgerEntry = {
+    id: `local-${Date.now()}-${Math.round(Math.random() * 1e6)}`,
+    enterpriseId: input.enterpriseId,
+    kind: input.kind,
+    amount: input.amount,
+    category: input.category,
+    note: input.note ?? null,
+    entryDate: todayIso(),
+    syncState: 'PENDING',
+    createdAt: new Date().toISOString(),
+  }
+  write([...read(), entry])
+  return entry
+}
+
+export function pendingCount(enterpriseId: string): number {
+  return read().filter((e) => e.enterpriseId === enterpriseId && e.syncState === 'PENDING').length
+}
+
+/**
+ * Drain the queue. The backend endpoint lands in a later pass — until then this
+ * flips PENDING → SYNCED locally so the UI's sync states are exercisable.
+ */
+export function syncPending(enterpriseId: string): number {
+  const all = read()
+  let n = 0
+  const next = all.map((e) => {
+    if (e.enterpriseId === enterpriseId && e.syncState === 'PENDING') {
+      n++
+      return { ...e, syncState: 'SYNCED' as const }
+    }
+    return e
+  })
+  if (n) {
+    write(next)
+    localStorage.setItem(SYNC_KEY, new Date().toISOString())
+  }
+  return n
+}
+
+export function lastSyncedAt(): string | null {
+  return localStorage.getItem(SYNC_KEY)
+}
+
+export function dayTotals(entries: LedgerEntry[], date = todayIso()) {
+  const today = entries.filter((e) => e.entryDate === date)
+  return {
+    in: today.filter((e) => e.kind === 'IN').reduce((a, e) => a + e.amount, 0),
+    out: today.filter((e) => e.kind === 'OUT').reduce((a, e) => a + e.amount, 0),
+    count: today.length,
+  }
+}
+
+/** Live ledger for a given enterprise, re-reading whenever an entry is written. */
+export function useLedger(enterpriseId: string) {
+  const [entries, setEntries] = useState<LedgerEntry[]>(() => loadLedger(enterpriseId))
+
+  const refresh = useCallback(() => setEntries(loadLedger(enterpriseId)), [enterpriseId])
+
+  useEffect(() => {
+    refresh()
+    window.addEventListener('ul-ledger-changed', refresh)
+    return () => window.removeEventListener('ul-ledger-changed', refresh)
+  }, [refresh])
+
+  return { entries, refresh }
+}

src/lib/useOffline.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Connectivity state for the offline-first PWA. Drives the offline banner, the
+ * "showing saved data" note and whether the sync button is live.
+ */
+export function useOffline(): boolean {
+  const [offline, setOffline] = useState(() => !navigator.onLine)
+
+  useEffect(() => {
+    const on = () => setOffline(false)
+    const off = () => setOffline(true)
+    window.addEventListener('online', on)
+    window.addEventListener('offline', off)
+    return () => {
+      window.removeEventListener('online', on)
+      window.removeEventListener('offline', off)
+    }
+  }, [])
+
+  return offline
+}

src/lib/visitStore.ts

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { FieldVisit } from './api'
+import { visitsFor } from './demo/ops'
+
+/*
+ * Visits scheduled from the console during a demo session.
+ *
+ * The seeded playbook comes from demo/ops; anything the officer schedules here
+ * is appended locally so "Schedule visit" on the dashboard produces a row that
+ * actually shows up under Field visits — the loop the deck describes as
+ * "action and feedback".
+ */
+
+const KEY = 'ul-visits'
+
+function read(): FieldVisit[] {
+  try {
+    const raw = localStorage.getItem(KEY)
+    return raw ? (JSON.parse(raw) as FieldVisit[]) : []
+  } catch {
+    return []
+  }
+}
+
+function write(v: FieldVisit[]) {
+  localStorage.setItem(KEY, JSON.stringify(v))
+  window.dispatchEvent(new Event('ul-visits-changed'))
+}
+
+export function scheduleVisit(input: {
+  enterpriseId: string
+  enterpriseName: string
+  block: string
+  action: string
+  actionHi: string
+  priority: number
+  dueDate: string
+  officer: string
+}): FieldVisit {
+  const existing = read()
+  const visit: FieldVisit = {
+    id: 9000 + existing.length,
+    visitId: `FV-${9000 + existing.length}`,
+    state: 'PLANNED',
+    outcome: null,
+    loggedAt: null,
+    ...input,
+  }
+  write([visit, ...existing])
+  return visit
+}
+
+/** Record the outcome of a visit — this is what feeds the next retraining cycle. */
+export function logOutcome(visitId: string, outcome: string) {
+  const local = read()
+  const hit = local.find((v) => v.visitId === visitId)
+  if (hit) {
+    write(local.map((v) => (v.visitId === visitId ? { ...v, state: 'DONE', outcome, loggedAt: new Date().toISOString() } : v)))
+    return
+  }
+  // A seeded visit: shadow it locally rather than mutating the generator.
+  const seeded = visitsFor('ALL').find((v) => v.visitId === visitId)
+  if (seeded) {
+    write([{ ...seeded, state: 'DONE', outcome, loggedAt: new Date().toISOString() }, ...local])
+  }
+}
+
+/** Seeded playbook plus locally scheduled/updated visits, local taking precedence. */
+export function useVisits(block: string, officer: string) {
+  const [local, setLocal] = useState<FieldVisit[]>(read)
+
+  const refresh = useCallback(() => setLocal(read()), [])
+
+  useEffect(() => {
+    window.addEventListener('ul-visits-changed', refresh)
+    return () => window.removeEventListener('ul-visits-changed', refresh)
+  }, [refresh])
+
+  const seeded = visitsFor(block, officer)
+  const overridden = new Set(local.map((v) => v.visitId))
+  const scoped = local.filter((v) => block === 'ALL' || v.block === block)
+  const visits = [...scoped, ...seeded.filter((v) => !overridden.has(v.visitId))]
+
+  return { visits, refresh }
+}

src/main.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+
+// Offline-first: the service worker precaches the shell so the enterprise PWA
+// opens with zero connectivity. Registered after load so it never blocks paint.
+if ('serviceWorker' in navigator && import.meta.env.PROD) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js').catch(() => {
+      /* a failed registration must never break the app */
+    })
+  })
+}

src/pages/LoginPage.tsx

@@ -0,0 +1,311 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { errMsg, post } from '../lib/api'
+import type { EnterpriseSession, OfficerSession } from '../lib/api'
+import { UdyamMark, inputCls } from '../components/ui/bits'
+import { ENTERPRISES, findEnterprise } from '../lib/demo/enterprises'
+
+/*
+ * Two sign-in surfaces behind one screen, the way BharatLinc's LoginPage holds
+ * BOU / Switch / Portal: "Field Officer" issues an officer session, "Enterprise"
+ * issues an enterprise session for the offline PWA.
+ */
+
+type Mode = 'OFFICER' | 'ENTERPRISE'
+
+/** Left-panel slides — the mission / vision / promise from the deck's team slide. */
+const SLIDES = [
+  {
+    kicker: 'PREDICTIVE CASH-FLOW INTELLIGENCE',
+    title: 'Support before the shortfall',
+    body: 'Forecasting financial stress three to six months before the first missed instalment — from a three-tap ledger, UPI activity, mandi prices and climate signals.',
+  },
+  {
+    kicker: 'OUR MISSION',
+    title: 'Make financial health observable',
+    body: 'So that support arrives before stress becomes default. Every rural enterprise monitored with the foresight a large corporate borrower receives.',
+  },
+  {
+    kicker: 'OUR PROMISE',
+    title: 'Consent-first and explainable',
+    body: 'Auditable by design — no personally identifiable data, ever. Every alert carries the reason a field officer can act on.',
+  },
+]
+
+const STATS = [
+  { value: '3–6', label: 'months of early warning' },
+  { value: '5', label: 'rural trades covered' },
+  { value: '15 sec', label: 'daily effort per owner' },
+  { value: '0', label: 'personal details stored' },
+]
+
+/** Demo credentials — mirrored by UdyamDataSeeder on the backend. */
+const DEMO = {
+  officer: { username: 'aditya.vyas', password: 'Udyam@123' },
+  enterprise: { id: 'MSME-4417', pin: '1234' },
+}
+
+export function LoginPage() {
+  const navigate = useNavigate()
+  const [mode, setMode] = useState<Mode>('OFFICER')
+  const [identifier, setIdentifier] = useState('')
+  const [secret, setSecret] = useState('')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [slide, setSlide] = useState(0)
+
+  useEffect(() => {
+    const id = setInterval(() => setSlide((s) => (s + 1) % SLIDES.length), 6500)
+    return () => clearInterval(id)
+  }, [])
+
+  /**
+   * Sign in against the backend; if it is unreachable (the UI-first default),
+   * fall back to the seeded demo credentials so every screen stays walkable.
+   */
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    const id = identifier.trim()
+    if (!id || !secret.trim()) {
+      setError(mode === 'OFFICER' ? 'Enter username and password' : 'उद्यम आईडी और पिन डालें')
+      return
+    }
+    setBusy(true)
+    try {
+      if (mode === 'OFFICER') {
+        const session = await post<OfficerSession>('/auth/officer-login', { username: id, password: secret })
+        sessionStorage.setItem('ul-officer-auth', JSON.stringify(session))
+        navigate('/officer', { replace: true })
+      } else {
+        const session = await post<EnterpriseSession>('/auth/app-login', { enterpriseId: id, pin: secret })
+        localStorage.setItem('ul-app-auth', JSON.stringify(session))
+        navigate('/app', { replace: true })
+      }
+    } catch (err) {
+      const fallback = demoLogin(mode, id, secret)
+      if (fallback) {
+        navigate(fallback, { replace: true })
+        return
+      }
+      setError(errMsg(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  function fillDemo() {
+    if (mode === 'OFFICER') {
+      setIdentifier(DEMO.officer.username)
+      setSecret(DEMO.officer.password)
+    } else {
+      setIdentifier(DEMO.enterprise.id)
+      setSecret(DEMO.enterprise.pin)
+    }
+  }
+
+  const s = SLIDES[slide]
+  const hi = mode === 'ENTERPRISE'
+
+  return (
+    <div className="min-h-screen flex bg-forest-deep text-white">
+      {/* ── left: product branding + rotating slides ─────────── */}
+      <div
+        className="hidden lg:flex flex-col flex-[1.4] px-14 py-12 relative overflow-hidden"
+        style={{
+          background:
+            'radial-gradient(rgba(63,184,113,0.06) 1px, transparent 1px), linear-gradient(150deg, #06301f 0%, #0b5d3b 58%, #0f6f47 100%)',
+          backgroundSize: '26px 26px, cover',
+        }}
+      >
+        <div className="flex items-center gap-2.5">
+          <UdyamMark size={26} onDark />
+          <span className="text-[15px] font-bold">
+            Udyam<span className="text-amber-hi">Linc</span>
+          </span>
+          <span className="font-mono text-[9px] tracking-[0.2em] text-[#9dbdaa] border border-white/15 rounded-full px-2.5 py-0.5 ml-1">
+            NABARD HACKATHON
+          </span>
+        </div>
+
+        <div className="flex-1 flex flex-col justify-center max-w-[560px]">
+          <div className="font-mono text-[10px] tracking-[0.22em] text-amber-hi mb-4">{s.kicker}</div>
+          <h1 className="text-[38px] leading-[1.15] font-bold mb-5">{s.title}</h1>
+          <p className="text-[14px] leading-relaxed text-[#c3d8cc]">{s.body}</p>
+
+          <div className="flex gap-1.5 mt-8">
+            {SLIDES.map((_, i) => (
+              <button
+                key={i}
+                onClick={() => setSlide(i)}
+                aria-label={`Slide ${i + 1}`}
+                className={`h-[3px] rounded-full transition-all ${i === slide ? 'w-8 bg-amber' : 'w-4 bg-white/25'}`}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-4 gap-3">
+          {STATS.map((st) => (
+            <div key={st.label} className="bg-white/[0.06] border border-white/10 rounded-lg px-3 py-2.5">
+              <div className="text-[19px] font-bold text-amber-hi leading-tight">{st.value}</div>
+              <div className="text-[9.5px] text-[#a8c3b4] leading-tight mt-0.5">{st.label}</div>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-[10px] text-[#7d9b8a] mt-8 font-mono">
+          Team LincFusion · LincPay Solutions Pvt. Ltd., Bhopal · NPCI / NBBL certified
+        </div>
+      </div>
+
+      {/* ── right: sign-in ───────────────────────────────────── */}
+      <div className="flex-1 min-w-[380px] bg-white text-slate-900 flex flex-col justify-center px-10 py-12">
+        <div className="w-full max-w-[380px] mx-auto">
+          <div className="flex items-center gap-2 mb-1 lg:hidden">
+            <UdyamMark size={24} />
+            <span className="text-[16px] font-bold text-forest">
+              Udyam<span className="text-amber">Linc</span>
+            </span>
+          </div>
+
+          <h2 className="text-[19px] font-bold text-forest">{hi ? 'अपने उद्यम में जाएँ' : 'Sign in to the console'}</h2>
+          <p className="text-[12px] text-slate-500 mt-1 mb-5">
+            {hi ? 'उद्यम आईडी और पिन से अंदर आएँ' : 'Early warning and portfolio monitoring for field officers'}
+          </p>
+
+          {/* mode tabs */}
+          <div className="flex bg-slate-100 rounded-lg p-1 mb-5">
+            {(['OFFICER', 'ENTERPRISE'] as Mode[]).map((m) => (
+              <button
+                key={m}
+                type="button"
+                onClick={() => {
+                  setMode(m)
+                  setIdentifier('')
+                  setSecret('')
+                  setError('')
+                }}
+                className={[
+                  'flex-1 text-[11.5px] font-semibold py-1.5 rounded-md transition-colors',
+                  mode === m ? 'bg-white text-forest shadow-sm' : 'text-slate-500 hover:text-slate-700',
+                ].join(' ')}
+              >
+                {m === 'OFFICER' ? 'Field Officer' : 'Enterprise · उद्यम'}
+              </button>
+            ))}
+          </div>
+
+          <form onSubmit={handleLogin}>
+            <label className="block mb-3.5">
+              <span className="block font-mono text-[10px] tracking-[0.14em] text-slate-500 mb-1.5">
+                {hi ? 'उद्यम आईडी' : 'USERNAME'}
+              </span>
+              <input
+                className={inputCls}
+                value={identifier}
+                onChange={(e) => setIdentifier(e.target.value)}
+                placeholder={hi ? 'MSME-4417' : 'e.g. aditya.vyas'}
+                autoComplete="username"
+              />
+            </label>
+
+            <label className="block mb-4">
+              <span className="block font-mono text-[10px] tracking-[0.14em] text-slate-500 mb-1.5">
+                {hi ? 'पिन' : 'PASSWORD'}
+              </span>
+              <input
+                className={inputCls}
+                type="password"
+                inputMode={hi ? 'numeric' : 'text'}
+                value={secret}
+                onChange={(e) => setSecret(e.target.value)}
+                placeholder={hi ? '4 अंकों का पिन' : 'Enter your password'}
+                autoComplete="current-password"
+              />
+            </label>
+
+            {error && (
+              <div className="text-[11.5px] text-risk-red bg-risk-soft border border-risk-red/20 rounded-md px-3 py-2 mb-3.5">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={busy}
+              className="w-full bg-forest hover:bg-forest-mid disabled:opacity-60 text-white text-[13px] font-semibold py-2.5 rounded-md transition-colors"
+            >
+              {busy ? '…' : hi ? 'अंदर आएँ' : 'Sign in'}
+            </button>
+          </form>
+
+          <div className="mt-5 border border-dashed border-slate-300 rounded-lg px-3.5 py-3 bg-slate-50">
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="font-mono text-[9.5px] tracking-[0.14em] text-slate-500">DEMO CREDENTIALS</span>
+              <button type="button" onClick={fillDemo} className="text-[10.5px] font-semibold text-forest hover:underline">
+                fill
+              </button>
+            </div>
+            <div className="font-mono text-[11px] text-slate-600 leading-relaxed">
+              {mode === 'OFFICER' ? (
+                <>
+                  {DEMO.officer.username} · {DEMO.officer.password}
+                </>
+              ) : (
+                <>
+                  {DEMO.enterprise.id} · {DEMO.enterprise.pin}
+                </>
+              )}
+            </div>
+            <p className="text-[10px] text-slate-400 mt-1.5 leading-snug">
+              Backend optional — with the API down, sign-in falls through to the seeded prototype data.
+            </p>
+          </div>
+
+          <p className="text-[10px] text-slate-400 text-center mt-6 leading-relaxed">
+            {hi
+              ? 'आपकी निजी जानकारी कहीं नहीं रखी जाती।'
+              : 'Consent-first, explainable and auditable by design — no personally identifiable data.'}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Offline/no-backend sign-in. Officer credentials are fixed; any enterprise in
+ * the demo portfolio opens with the shared PIN, so a reviewer can inspect any
+ * row from the console on the phone surface.
+ */
+function demoLogin(mode: Mode, id: string, secret: string): string | null {
+  if (mode === 'OFFICER') {
+    if (id !== DEMO.officer.username || secret !== DEMO.officer.password) return null
+    const session: OfficerSession = {
+      token: 'demo-officer-token',
+      username: DEMO.officer.username,
+      fullName: 'Aditya Vyas',
+      role: 'FIELD_OFFICER',
+      blocks: ['Sehore', 'Vidisha', 'Raisen', 'Bhopal'],
+      branch: 'Sehore & Vidisha blocks',
+    }
+    sessionStorage.setItem('ul-officer-auth', JSON.stringify(session))
+    return '/officer'
+  }
+
+  if (secret !== DEMO.enterprise.pin) return null
+  const e = findEnterprise(id.toUpperCase()) ?? ENTERPRISES.find((x) => x.enterpriseId === DEMO.enterprise.id)
+  if (!e) return null
+  const session: EnterpriseSession = {
+    token: 'demo-app-token',
+    enterpriseId: e.enterpriseId,
+    name: e.name,
+    nameHi: e.nameHi,
+    sector: e.sector,
+    block: e.block,
+    lang: 'hi',
+  }
+  localStorage.setItem('ul-app-auth', JSON.stringify(session))
+  return '/app'
+}

tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    // 5180 belongs to BharatLinc-UI — UdyamLinc runs alongside it
+    port: 5182,
+  },
+})