"use client"; /** * Inventory → By branch and Inventory log (PRD Phase 1.2, Stage 7, 26 Oct 2026): the design's `BranchStockMatrix` * with its cell drawer and `InventoryLog` (`/design-system/inventory`, branch-stock-demo.tsx), on the Inventory API. * * Not in the design yet, and therefore kept plain: the stock-per-branch switch and allocating from the main branch * (decision Q1). Allocation uses the design's transfer lines (`TransferSendLines`), one line per product, because the * API takes earliest expiry first. Where the demo offers "Request transfer", the live page offers allocation only while * it is allowed; once stock per branch is on, the drawer points to Branch transfers. */ import * as React from "react"; import { ArrowLeftRightIcon, PowerIcon } from "lucide-react"; import { BranchStockMatrix, branchQty, cellStatus, InventoryLog, QtyCell, type Movement, type MovementAction, type StockBranch, type StockRow } from "@/components/medora/branch-stock"; import { ConfirmDialog } from "@/components/medora/confirm-dialog"; import { DescriptionList } from "@/components/medora/description-list"; import { RecordDrawer } from "@/components/medora/drawer"; import { TransferSendLines, type TransferStockOption } from "@/components/medora/stock-ops"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"; import { Spinner } from "@/components/ui/spinner"; import { toast } from "@/components/ui/toast"; import { InventoryApi, type MovementRow, type StockListRow, type StockStatus } from "@/lib/api"; import { addDays, formatDate, formatKES, localToday } from "@/lib/format"; import { Loading } from "@/components/medora/loading"; const apiError = (e: unknown, fallback: string): string => { const m = (e as { response?: { data?: { message?: string | string[] } } })?.response?.data?.message; return Array.isArray(m) ? m.join(" ") : m || fallback; }; /** The design's branches: locations keyed by id, as the API keys each row's quantities. */ const toBranches = (s: StockStatus): StockBranch[] => s.branches.map((b) => ({ id: b.id, name: b.name, locations: b.locations.map((l) => ({ id: String(l.id), name: l.name })) })); const toRow = (r: StockListRow): StockRow => ({ productId: r.productId, name: r.name, sub: [r.code, r.sub].filter(Boolean).join(" · ") || undefined, category: r.category, subCategory: r.subCategory, brand: r.brand, // Only roles that see cost reach Inventory; a missing cost reads as 0 rather than breaking the totals unitCost: r.unitCost ?? 0, unitPrice: r.unitPrice, reorderLevel: r.reorderLevel, qty: r.qty, }); /** Every row: the matrix filters on the client, so the whole list is loaded a page at a time. */ async function loadAllStock() { const first = await InventoryApi.stock({ page: 1, pageSize: 200 }); const rows = [...first.rows]; for (let page = 2; rows.length < first.total; page++) { const next = await InventoryApi.stock({ page, pageSize: 200 }); if (!next.rows.length) break; rows.push(...next.rows); } return { status: first as StockStatus, rows }; } /* ------------------------------------- By branch ------------------------------------- */ export function BranchStockView({ canAllocate, canSwitch, onChanged }: { canAllocate: boolean; canSwitch: boolean; onChanged?: () => void }) { const [data, setData] = React.useState<{ status: StockStatus; rows: StockListRow[] } | null>(null); const [failed, setFailed] = React.useState(false); const [cell, setCell] = React.useState<{ row: StockRow; branch: StockBranch } | null>(null); const [allocating, setAllocating] = React.useState<{ toBranchId: number | null; productId?: number } | null>(null); const [switching, setSwitching] = React.useState(false); const load = React.useCallback(async () => { setFailed(false); try { setData(await loadAllStock()); } catch (e) { setFailed(true); toast.add({ type: "error", title: "Couldn't load stock by branch", description: apiError(e, "Try again.") }); } }, []); React.useEffect(() => void load(), [load]); if (failed && !data) { return (
Stock by branch didn't load.
); } if (!data) { return ( ); } const { status } = data; const branches = toBranches(status); const rows = data.rows.map(toRow); const main = status.branches.find((b) => b.isMain); const mayAllocate = canAllocate && !status.stockByBranch && !!main && status.branches.length > 1; // Branches that sold in the last 30 days with nothing on the shelf: turning the switch on is refused until they have stock const empty = status.branches.filter((b) => b.recentSales > 0 && b.units <= 0); return (
{status.branches.length > 1 || status.stockByBranch ? (

Stock per branch {status.stockByBranch ? "On" : "Off"}

{status.stockByBranch ? "Each till sells only its own branch's stock. Stock arrives in the branch that receives it." : `Tills still sell from the whole pharmacy's stock. Existing stock is in ${main?.name ?? "the main branch"}; allocate each selling branch its share, then turn this on.`}

{!status.stockByBranch && empty.length ? (

Still without stock: {empty.map((b) => b.name).join(", ")}.

) : null}
{mayAllocate ? ( ) : null} {canSwitch ? ( ) : null}
) : null} setCell({ row, branch })} /> {cell ? ( setCell(null)} onAllocate={mayAllocate && cell.branch.id !== main?.id ? () => { setAllocating({ toBranchId: cell.branch.id, productId: cell.row.productId }); setCell(null); } : undefined} /> ) : null} {allocating && main ? ( !b.isMain)} rows={data.rows} initial={allocating} onClose={() => setAllocating(null)} onDone={async () => { setAllocating(null); await load(); onChanged?.(); }} /> ) : null} {switching ? ( !o && setSwitching(false)} level="A" tone={status.stockByBranch ? "danger" : "primary"} title={status.stockByBranch ? "Turn stock per branch off?" : "Turn stock per branch on?"} consequences={ status.stockByBranch ? ["Every till sells from the whole pharmacy's stock again, whichever branch holds it.", "Stock stays where it is, and you can turn this back on."] : ["Each till sells only what its own branch holds; a sale its branch can't cover is refused.", "A user without a branch sells from the main branch.", "Moving stock between branches after this is a branch transfer (Inventory → Branch transfers)."] } actionLabel={status.stockByBranch ? "Turn off" : "Turn on"} busyLabel="Saving…" onConfirm={async () => { try { await InventoryApi.setStockByBranch(!status.stockByBranch); } catch (e) { throw new Error(apiError(e, "Not changed. Try again.")); } setSwitching(false); toast.add({ title: status.stockByBranch ? "Stock per branch is off" : "Stock per branch is on" }); await load(); onChanged?.(); }} /> ) : null}
); } /** The design's cell drawer (branch-stock-demo.tsx) on live figures; allocation stands in for transfers (Q1). */ function CellDrawer({ row, branch, branches, mainBranchId, onClose, onAllocate }: { row: StockRow; branch: StockBranch; branches: StockBranch[]; mainBranchId: number | null; onClose: () => void; onAllocate?: () => void }) { const here = branchQty(row, branch); const others = branches.filter((b) => b.id !== branch.id).map((b) => ({ b, q: branchQty(row, b) })).sort((a, z) => z.q - a.q); const short = cellStatus(here, row.reorderLevel) !== "ok"; const mainQty = others.find((o) => o.b.id === mainBranchId)?.q ?? 0; return ( !o && onClose()} title={`${row.name} at ${branch.name}`} subtitle={`${row.sub ? `${row.sub} · ` : ""}reorder level ${row.reorderLevel} per branch`}>

By location

({ label: l.name, value: })), { label: `${branch.name} total`, value: }]} />
{others.length ? (

Other branches

    {others.map(({ b, q }) => (
  • {b.name} {b.id === mainBranchId ? " (main)" : ""}
    • ))}
{short && onAllocate && mainQty > 0 ? (

The main branch holds {mainQty.toLocaleString("en-US")}.

) : short ? (

Send it from another branch on Branch transfers, or add it to a purchase order.

) : null}
) : null}

Value here

 ); } /** Q1: from the main branch to one other, before stock per branch is on. One line per product; the API takes earliest expiry first. */ function AllocateDrawer({ main, branches, rows, initial, onClose, onDone }: { main: StockStatus["branches"][number]; branches: StockStatus["branches"]; rows: StockListRow[]; initial: { toBranchId: number | null; productId?: number }; onClose: () => void; onDone: () => Promise }) { const mainLocs = main.locations.map((l) => String(l.id)); const options: TransferStockOption[] = rows .map((r) => ({ r, available: mainLocs.reduce((s, id) => s + Math.max(0, r.qty[id] ?? 0), 0) })) .filter((o) => o.available > 0 || o.r.productId === initial.productId) .map(({ r, available }) => ({ id: String(r.productId), name: r.name, batch: r.code ?? "", expiry: "Earliest first", available })); const [to, setTo] = React.useState(initial.toBranchId); const [qty, setQty] = React.useState>({}); const [note, setNote] = React.useState(""); const [saving, setSaving] = React.useState(false); const lines = Object.entries(qty).filter(([, n]) => n > 0).map(([id, n]) => ({ productId: Number(id), quantity: n })); const target = branches.find((b) => b.id === to); const save = async () => { if (!target || !lines.length) return; setSaving(true); try { const res = await InventoryApi.allocate({ toBranchId: target.id, lines, note: note.trim() || undefined }); toast.add({ title: `${res.reference}: stock allocated`, description: `${lines.reduce((s, l) => s + l.quantity, 0)} units to ${target.name}.` }); await onDone(); } catch (e) { toast.add({ type: "error", title: "Not allocated", description: apiError(e, "Try again.") }); } finally { setSaving(false); } }; return ( !o && onClose()} variant="edit" width="lg" saving={saving} dirty={lines.length > 0 || !!note} title="Allocate stock" subtitle={`From ${main.name}, the main branch`} footer={ <> } >
To branch setTo(Number(e.target.value) || null)}> Choose a branch… {branches.map((b) => ( {b.name} {b.units > 0 ? ` (holds ${b.units.toLocaleString("en-US")})` : ""} ))} Note (optional) setNote(e.target.value)} placeholder="Opening stock for the branch" />
{options.length ? ( setQty((q) => ({ ...q, [id]: n }))} /> ) : (

The main branch holds no stock to allocate.

)} Stock moves at once, earliest expiry first, with each batch's number, expiry and cost. It is recorded in the inventory log as Transfer out and Transfer in.
); } /* ----------------------------------- Inventory log ----------------------------------- */ const pad = (n: number) => String(n).padStart(2, "0"); /** Local date and time, as the till's receipts show it. */ const formatAt = (iso: string) => { const d = new Date(iso); return `${formatDate(`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`, { short: true })}, ${pad(d.getHours())}:${pad(d.getMinutes())}`; }; const toMovement = (m: MovementRow): Movement => ({ id: String(m.id), at: m.at, product: m.product, action: m.action as MovementAction, change: m.change, newQty: m.newQty, branch: m.branch || "—", location: m.location, user: m.user || "—", reference: m.reference || (m.note ?? ""), }); const LOG_PAGE = 200; export function InventoryLogView() { const today = localToday(); const [from, setFrom] = React.useState(addDays(today, -6)); const [to, setTo] = React.useState(today); const [data, setData] = React.useState<{ total: number; rows: MovementRow[] } | null>(null); const [loading, setLoading] = React.useState(false); const load = React.useCallback(async (page = 1) => { setLoading(true); try { const res = await InventoryApi.movements({ from, to, page, pageSize: LOG_PAGE }); setData((d) => ({ total: res.total, rows: page === 1 || !d ? res.rows : [...d.rows, ...res.rows] })); } catch (e) { toast.add({ type: "error", title: "Couldn't load the inventory log", description: apiError(e, "Try again.") }); } finally { setLoading(false); } }, [from, to]); React.useEffect(() => void load(1), [load]); return (
From e.target.value && setFrom(e.target.value)} /> To e.target.value && setTo(e.target.value)} /> {/* Refreshing keeps the log on screen (loading spec 8, refreshing existing data) */} {loading && data !== null ? ( Updating… ) : null}
{data === null ? ( ) : data.rows.length ? ( <> {data.rows.length < data.total ? (
Showing {data.rows.length.toLocaleString("en-US")} of {data.total.toLocaleString("en-US")}
) : null} ) : (

No stock moved between {formatDate(from, { short: true })} and {formatDate(to, { short: true })}. The log starts on 26 Oct 2026; earlier movements are in the stock closing report.

)}
); }