"use client"; import * as React from "react"; import Image from "next/image"; import { PrinterIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { formatDate } from "@/lib/format"; import { cn } from "@/lib/utils"; /* * Print layouts (spec 03-structure-and-navigation §11.8, C77). Formats are still open under D10, so the sizes * below are working defaults: A4 documents, 80 / 58 mm thermal receipts, an A4 21-up label sheet * (70 × 42.3 mm), 38 × 25 mm barcode labels and 70 × 40 mm dispensing labels. Everything prints black on * white; status is always a word, never a colour. */ /* ------------------------------------ Printing ------------------------------------- */ /** Paper names match the `@page` rules in styles/medora-theme.css. */ export type Paper = "a4" | "receipt-80" | "receipt-58" | "sheet-21" | "label-38x25" | "label-70x40"; /** * Prints one element on its own paper. The element is copied into #medora-print-root (a direct child of * ) and everything else is hidden for the print, so the sidebar, top bar and action bars never print. */ export function printElement(el: HTMLElement, paper: Paper) { document.getElementById("medora-print-root")?.remove(); const root = document.createElement("div"); root.id = "medora-print-root"; root.dataset.paper = paper; root.innerHTML = el.outerHTML; document.body.appendChild(root); document.documentElement.dataset.printing = paper; const done = () => { root.remove(); delete document.documentElement.dataset.printing; window.removeEventListener("afterprint", done); }; window.addEventListener("afterprint", done); window.print(); } export function PrintButton({ target, paper, label, variant = "outline" }: { target: React.RefObject; paper: Paper; label: string; variant?: "outline" | "default" | "secondary" }) { return ( ); } /* ------------------------------------- Formats ------------------------------------- */ const fmt2 = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const amt = (n: number) => fmt2.format(n); /** eTIMS tax types. Most medicines are exempt (A); cosmetics and consumables are usually 16% (B). */ export const VAT_CLASS = { A: { label: "A Exempt", rate: 0 }, B: { label: "B 16%", rate: 0.16 }, C: { label: "C Zero-rated", rate: 0 }, D: { label: "D Non-VAT", rate: 0 }, E: { label: "E 8%", rate: 0.08 }, } as const; export type VatClass = keyof typeof VAT_CLASS; /** Card 015: phone and KRA PIN print only when known (there's no KRA PIN setting yet), never as a placeholder. */ export type Issuer = { name: string; branch: string; address: string[]; kraPin?: string; phone?: string; email?: string }; export type Party = { name: string; kraPin?: string; phone?: string; address?: string[] }; export type DocLine = { code: string; name: string; qty: number; unit?: string; /** Unit price excluding VAT (prices in this app are VAT-exclusive). */ price?: number; /** Per-unit discount, as stored on sale_items. */ discount?: number; vat?: VatClass; /** Delivery notes. */ ordered?: number; batch?: string; expiry?: string; }; export type Etims = | { state: "signed"; scuId: string; cuInvoiceNo: string; internalData: string; signature: string; signedAt: string; qrUrl: string } | { state: "queued" }; /* ------------------------------------- Pieces -------------------------------------- */ /** Logo for print: greyscale with extra contrast so the M stays readable. Swap for the black file when it exists (OQ-51). */ export function PrintLogo({ className }: { className?: string }) { return Medora; } /** * KRA QR code. A placeholder until a QR library is added: it reserves the printed size (20 mm by default, * the smallest that scans reliably on thermal paper) and shows the link it will encode. */ export function KraQr({ value, size = 20 }: { value: string; size?: number }) { return (
{[ [1, 1], [14, 1], [1, 14], ].map(([x, y]) => ( ))} QR
); } const EAN_L = ["0001101", "0011001", "0010011", "0111101", "0100011", "0110001", "0101111", "0111011", "0110111", "0001011"]; const EAN_R = EAN_L.map((p) => [...p].map((b) => (b === "0" ? "1" : "0")).join("")); const EAN_G = EAN_R.map((p) => [...p].reverse().join("")); const EAN_PARITY = ["LLLLLL", "LLGLGG", "LLGGLG", "LLGGGL", "LGLLGG", "LGGLLG", "LGGGLL", "LGLGLG", "LGLGGL", "LGGLGL"]; /** GS1 check digit for the first 12 digits. */ export function ean13Check(d12: string) { let s = 0; for (let i = 0; i < 12; i++) s += Number(d12[i]) * (i % 2 ? 3 : 1); return (10 - (s % 10)) % 10; } /** The 95 bar modules of an EAN-13, or null when the value isn't a valid EAN-13 (12 digits get a check digit added). */ export function ean13(value: string): { digits: string; bits: string } | null { const v = value.replace(/\s/g, ""); if (!/^\d{12,13}$/.test(v)) return null; const check = ean13Check(v.slice(0, 12)); if (v.length === 13 && Number(v[12]) !== check) return null; const digits = v.slice(0, 12) + check; const parity = EAN_PARITY[Number(digits[0])]; let bits = "101"; for (let i = 1; i <= 6; i++) bits += (parity[i - 1] === "L" ? EAN_L : EAN_G)[Number(digits[i])]; bits += "01010"; for (let i = 7; i <= 12; i++) bits += EAN_R[Number(digits[i])]; return { digits, bits: bits + "101" }; } /** * EAN-13 barcode as SVG, with the human-readable digits. `width` is the printed width in mm including the * quiet zones (nominal 37.3 mm; below about 30 mm scanners start to struggle). Codes that are not EAN-13 * (internal codes such as "2130") print as text with no bars rather than as an unscannable barcode. */ export function Ean13({ value, width = 32, className }: { value: string; width?: number; className?: string }) { const code = ean13(value); if (!code) { return (

Code {value} (no barcode)

); } const Q = 11; // left quiet zone in modules (7 on the right) const guard = new Set([0, 1, 2, 45, 46, 47, 48, 49, 92, 93, 94]); const bars: React.ReactNode[] = []; for (let i = 0; i < 95; i++) { if (code.bits[i] !== "1") continue; bars.push(); } const d = code.digits; return ( {bars} {d[0]} {[...d.slice(1, 7)].map((c, i) => ( {c} ))} {[...d.slice(7)].map((c, i) => ( {c} ))} ); } /* ---------------------------------- A4 documents ----------------------------------- */ export type DocumentKind = "invoice" | "quotation" | "delivery-note"; const TITLE: Record = { invoice: "Tax invoice", quotation: "Quotation", "delivery-note": "Delivery note" }; /** Totals per VAT class, prices VAT-exclusive (total = taxable + VAT, as on the till). */ export function documentTotals(lines: DocLine[]) { const byClass = new Map(); let discount = 0; for (const l of lines) { const net = l.qty * ((l.price ?? 0) - (l.discount ?? 0)); discount += l.qty * (l.discount ?? 0); const c = l.vat ?? "A"; const row = byClass.get(c) ?? { taxable: 0, vat: 0 }; row.taxable += net; row.vat += net * VAT_CLASS[c].rate; byClass.set(c, row); } const rows = [...byClass.entries()].sort(([a], [b]) => a.localeCompare(b)); const subtotal = rows.reduce((s, [, r]) => s + r.taxable, 0); const vat = rows.reduce((s, [, r]) => s + r.vat, 0); return { rows, subtotal, vat, discount, total: subtotal + vat }; } /** * A4 document: tax invoice, quotation or delivery note. Header with one-colour logo and the branch details * from Settings (ST-01), title and references, the other party, a line table whose header row repeats on * every page (with the reference and printed-at time), totals by VAT class, and the eTIMS block. * Page x of y is added by the @page footer when printed. */ export const DocumentSheet = React.forwardRef< HTMLDivElement, { kind: DocumentKind; issuer: Issuer; party: Party; reference: string; date: string; lines: DocLine[]; printedBy: string; printedAt: string; /** Invoice: payment status as a word. */ status?: "Paid" | "Unpaid" | "Part paid"; dueDate?: string; paid?: number; /** Quotation. */ validUntil?: string; /** Links: sale, PO, quotation the document came from. */ related?: { label: string; value: string }[]; etims?: Etims; /** A reprint says so on every copy. */ reprint?: boolean; notes?: string[]; paymentDetails?: string[]; } >(function DocumentSheet({ kind, issuer, party, reference, date, lines, printedBy, printedAt, status, dueDate, paid, validUntil, related = [], etims, reprint, notes = [], paymentDetails = [] }, ref) { const t = documentTotals(lines); const priced = kind !== "delivery-note"; const cols = 7; // both layouts have seven columns const balance = paid != null ? t.total - paid : undefined; return (
{reprint ? (

Copy. Reprinted {formatDate(printedAt.slice(0, 10))} {printedAt.slice(11, 16)} by {printedBy}

) : null} {/* Header */}

{issuer.name}

{issuer.branch}

{issuer.address.map((a) => (

{a}

))} {issuer.phone || issuer.email ?

{[issuer.phone ? `Tel ${issuer.phone}` : "", issuer.email ?? ""].filter(Boolean).join(" · ")}

: null} {issuer.kraPin ?

KRA PIN {issuer.kraPin}

: null}

{TITLE[kind]}

{status ?

{status}

: null}
{kind === "invoice" ? "Invoice no" : kind === "quotation" ? "Quotation no" : "Delivery note no"}
{reference}
Date
{formatDate(date)}
{dueDate ? ( <>
Due
{formatDate(dueDate)}
) : null} {validUntil ? ( <>
Valid until
{formatDate(validUntil)}
) : null} {related.map((r) => (
{r.label}
{r.value}
 ))}
{/* Parties */}

{kind === "delivery-note" ? "Deliver to" : kind === "quotation" ? "Prepared for" : "Bill to"}

{party.name}

{party.address?.map((a) => (

{a}

))} {party.phone ?

Tel {party.phone}

: null} {party.kraPin ?

KRA PIN {party.kraPin}

: null}

Prepared by

{printedBy}

Printed {formatDate(printedAt.slice(0, 10))} {printedAt.slice(11, 16)}

{kind === "quotation" ? (

This is a quotation, not a tax invoice. {validUntil ? `Prices are held until ${formatDate(validUntil)}; stock` : "Stock"} is not reserved.

) : null} {/* Lines */} {/* Repeats on every printed page: which document this page belongs to (spec: printed-at on every page). */} {priced ? ( <> ) : ( <> )} {lines.map((l, i) => { const unit = (l.price ?? 0) - (l.discount ?? 0); return ( {priced ? ( <> ) : ( <> )} ); })}
{TITLE[kind]} {reference} · {issuer.name} · printed {formatDate(printedAt.slice(0, 10))} {printedAt.slice(11, 16)}
# Code ItemQty Unit price VAT AmountBatch · expiry Ordered Delivered Received
{i + 1} {l.code} {l.name} {priced && l.discount ? Less {amt(l.discount)} each : null} {l.qty} {l.unit ? ` ${l.unit}` : ""} {amt(unit)} {l.vat ?? "A"} {amt(unit * l.qty)} {l.batch ?? "–"} {l.expiry ? exp {formatDate(l.expiry)} : null} {l.ordered ?? l.qty} {l.qty} ________
{/* Totals and eTIMS */} {priced ? (
{t.rows.map(([c, r]) => ( ))}
VAT class Taxable VAT
{VAT_CLASS[c].label} {amt(r.taxable)} {amt(r.vat)}
{kind === "invoice" && etims ? : null}
{t.discount ? ( <>
Discount given
{amt(t.discount)}
) : null}
Subtotal (excl. VAT)
{amt(t.subtotal)}
VAT
{amt(t.vat)}
Total KES
{amt(t.total)}
{paid != null ? ( <>
Paid
{amt(paid)}
Balance due
{amt(balance ?? 0)}
) : null}
) : (
{["Delivered by", "Received by"].map((who) => (

{who}

{["Name", "Signature", "Date and time"].map((f) => (

{f}

))}
))}

Check quantities, batches and expiry dates on receipt. Note any shortfall or damage on this copy before signing.

)} {notes.length || paymentDetails.length ? (
{paymentDetails.length ? (

How to pay

{paymentDetails.map((p) => (

{p}

))}
) : (
)} {notes.length ? (

Notes

{notes.map((n) => (

{n}

))}
) : null}
) : null} {/* Screen-only stand-in for the @page footer that prints "Page x of y". */}

Page 1 of 1 · Medora

); }); /** eTIMS details as KRA requires them on the invoice, or a "will follow" note while the sale is queued (IG-09). */ export function EtimsBlock({ etims, compact = false }: { etims: Etims; compact?: boolean }) { if (etims.state === "queued") { return (

KRA details to follow

This sale is queued for eTIMS. The KRA invoice number and QR code will be on the signed copy.

); } const rows: [string, string][] = [ ["SCU ID", etims.scuId], ["CU invoice no", etims.cuInvoiceNo], ["Internal data", etims.internalData], ["Signature", etims.signature], ["Signed", `${formatDate(etims.signedAt.slice(0, 10))} ${etims.signedAt.slice(11, 19)}`], ]; return (

eTIMS, KRA

{rows.map(([k, v]) => (
{k}
{compact ? `${k}: ${v}` : v}
 ))}
); } /* -------------------------------------- Labels ------------------------------------- */ export type LabelProduct = { name: string; strength?: string; pack?: string; price: number; unitPrice?: { amount: number; unit: string }; barcode: string; shelf?: string; rx?: boolean }; /** Shelf-edge label, 70 × 42.3 mm (21 per A4 sheet). Price is the largest thing on it; per-unit price for comparison. */ export function ShelfLabel({ product, printedOn }: { product: LabelProduct; printedOn: string }) { return (

{product.name}

{product.rx ? Rx only : null}

{[product.strength, product.pack].filter(Boolean).join(" · ")}

KES {amt(product.price)}

{product.unitPrice ? (

{amt(product.unitPrice.amount)} per {product.unitPrice.unit}

) : null}

{product.shelf ? `${product.shelf} · ` : ""} {formatDate(printedOn, { short: true })}

); } /** Product barcode label, 38 × 25 mm on a roll: for stock that arrives without a barcode. */ export function BarcodeLabel({ product }: { product: LabelProduct }) { return (

{product.name} {product.strength ? ` ${product.strength}` : ""}

KES {amt(product.price)}

); } export type DispenseLabel = { patient: string; medicine: string; quantity: string; directions: string; warnings: string[]; rxNo: string; date: string; pharmacist: string; }; /** * Dispensing label, 70 × 40 mm: what the Pharmacy and Poisons Board expects on a dispensed medicine * (patient, medicine and strength, quantity, directions, date, pharmacy name and address). * Directions are the largest text: they are what the patient reads at home. */ export function DispensingLabel({ label, issuer }: { label: DispenseLabel; issuer: Issuer }) { return (
{label.patient} {formatDate(label.date)}

{label.medicine} × {label.quantity}

{label.directions}

    {label.warnings.map((w) => (
  • {w}
    • ))}
{issuer.name}, {issuer.branch} · {issuer.phone} {label.rxNo} · {label.pharmacist}
); } /** * A4 sheet of 21 labels (3 × 7, 70 × 42.3 mm, no margins). `startAt` skips labels already peeled off a * part-used sheet, so it isn't wasted. Labels that don't fit continue on further sheets. */ export const labelSheetCount = (labels: number, startAt = 1) => Math.max(1, Math.ceil((startAt - 1 + labels) / 21)); export const LabelSheet = React.forwardRef(function LabelSheet({ children, startAt = 1, outlines = true }, ref) { const cells: React.ReactNode[] = [...Array.from({ length: startAt - 1 }, () => null), ...children]; const sheets = labelSheetCount(children.length, startAt); while (cells.length < sheets * 21) cells.push(null); return (
{Array.from({ length: sheets }, (_, s) => (
{cells.slice(s * 21, s * 21 + 21).map((c, j) => { const i = s * 21 + j; return (
{c ?? Label {j + 1}, {i < startAt - 1 ? "already used" : "blank"}}
); })}
))}
); }); /** A run of roll labels: one label per printed page. */ export const LabelRoll = React.forwardRef(function LabelRoll({ children }, ref) { return (
{children.map((c, i) => (
{c}
))}
); });