Add bundle sales front end integration

Frontend/erp-system/app/print/sales/bundles/[id]/page.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useParams } from "next/navigation"
+import { Printer } from "lucide-react"
+
+import { bundleApi } from "@/lib/api/bundles"
+import { errorMessage } from "@/lib/error-map"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { BundleSale } from "@/types/bundles"
+
+export default function BundlePrintPage() {
+  const params = useParams<{ id: string }>()
+  const bundleSaleId = Number(params.id)
+  const [bundle, setBundle] = useState<BundleSale | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!Number.isFinite(bundleSaleId)) {
+      setError(`Invalid bundle id '${params.id}'.`)
+      return
+    }
+    bundleApi.getBundle(bundleSaleId).then((res) => setBundle(res)).catch((err) => setError(errorMessage(err)))
+  }, [bundleSaleId, params.id])
+
+  if (error && !bundle) return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
+  if (!bundle) return <div className="rounded-2xl border border-dashed p-8 text-muted-foreground">Loading bundle print...</div>
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl border bg-white p-6 shadow-sm print:rounded-none print:border-0 print:p-0 print:shadow-none">
+      <div className="flex items-center justify-end print:hidden">
+        <Button variant="outline" onClick={() => window.print()}>
+          <Printer className="size-4" />
+          Print
+        </Button>
+      </div>
+      <div className="border-b pb-4">
+        <div className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">Bundle Sales</div>
+        <h1 className="mt-2 text-3xl font-semibold text-foreground">{bundle.bundleNo}</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{bundle.bundleName}</p>
+      </div>
+      <div className="grid gap-3 text-sm md:grid-cols-3">
+        <div><div className="text-muted-foreground">Customer</div><div className="font-medium">{bundle.customerSnapshotName}</div></div>
+        <div><div className="text-muted-foreground">Warehouse</div><div className="font-medium">{bundle.warehouseId}</div></div>
+        <div><div className="text-muted-foreground">Status</div><div className="font-medium">{bundle.status}</div></div>
+      </div>
+      <div className="overflow-hidden rounded-2xl border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Item</TableHead>
+              <TableHead>Description</TableHead>
+              <TableHead className="text-right">Qty</TableHead>
+              <TableHead className="text-right">Price</TableHead>
+              <TableHead className="text-right">Total</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {bundle.lines.map((line) => (
+              <TableRow key={line.bundleSaleLineId}>
+                <TableCell>{line.itemId}</TableCell>
+                <TableCell>{line.description}</TableCell>
+                <TableCell className="text-right">{line.qty.toFixed(2)}</TableCell>
+                <TableCell className="text-right">{line.unitPrice.toFixed(2)}</TableCell>
+                <TableCell className="text-right font-medium">{line.lineTotal.toFixed(2)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

Frontend/erp-system/app/print/sales/bundles/page.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import { Printer } from "lucide-react"
+
+import { bundleApi } from "@/lib/api/bundles"
+import { errorMessage } from "@/lib/error-map"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { BundleSaleSummary } from "@/types/bundles"
+
+function statusClass(status: BundleSaleSummary["status"]) {
+  switch (status) {
+    case "Draft":
+      return "border-amber-200 bg-amber-50 text-amber-800"
+    case "Posted":
+      return "border-emerald-200 bg-emerald-50 text-emerald-800"
+    case "Cancelled":
+      return "border-rose-200 bg-rose-50 text-rose-800"
+  }
+}
+
+export default function BundleBatchPrintPage() {
+  const searchParams = useSearchParams()
+  const status = searchParams.get("status") ?? "All"
+  const query = searchParams.get("q") ?? ""
+  const [rows, setRows] = useState<BundleSaleSummary[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    bundleApi.listBundles({ page: 1, pageSize: 200 }).then((res) => setRows(res.items)).catch((err) => setError(errorMessage(err)))
+  }, [])
+
+  const visibleRows = rows?.filter((row) => {
+    const matchesStatus = status === "All" || row.status === status
+    const matchesQuery = `${row.bundleNo} ${row.customerSnapshotName} ${row.bundleName}`.toLowerCase().includes(query.toLowerCase())
+    return matchesStatus && matchesQuery
+  })
+
+  if (error && !rows) return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
+  if (!rows) return <div className="rounded-2xl border border-dashed p-8 text-muted-foreground">Loading bundle print data...</div>
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl border bg-white p-6 shadow-sm print:rounded-none print:border-0 print:p-0 print:shadow-none">
+      <div className="flex items-center justify-end print:hidden">
+        <Button variant="outline" onClick={() => window.print()}>
+          <Printer className="size-4" />
+          Print
+        </Button>
+      </div>
+      <div className="border-b pb-4">
+        <div className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">Bundle Sales</div>
+        <h1 className="mt-2 text-3xl font-semibold text-foreground">Bundle Batch Print</h1>
+        <p className="mt-2 text-sm text-muted-foreground">Printed register snapshot of current bundle sales.</p>
+      </div>
+      <div className="overflow-hidden rounded-2xl border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Bundle</TableHead>
+              <TableHead>Customer</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead className="text-right">Price</TableHead>
+              <TableHead className="text-right">Grand</TableHead>
+              <TableHead>Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {visibleRows?.map((row) => (
+              <TableRow key={row.bundleSaleId}>
+                <TableCell className="font-medium">{row.bundleNo}</TableCell>
+                <TableCell>{row.customerSnapshotName}</TableCell>
+                <TableCell>{new Date(row.createdAt).toLocaleDateString()}</TableCell>
+                <TableCell className="text-right">{row.bundlePrice.toFixed(2)}</TableCell>
+                <TableCell className="text-right font-medium">{row.grandTotal.toFixed(2)}</TableCell>
+                <TableCell>
+                  <Badge variant="outline" className={statusClass(row.status)}>
+                    {row.status}
+                  </Badge>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

Frontend/erp-system/app/print/sales/invoices/[id]/page.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { use, useEffect, useMemo, useState } from "react"
+import { Printer } from "lucide-react"
+
+import { salesApi } from "@/lib/api/sales"
+import { customersApi } from "@/lib/api/customers"
+import { itemsApi } from "@/lib/api/items"
+import { uomsApi } from "@/lib/api/uoms"
+import { warehousesApi } from "@/lib/api/warehouses"
+import { errorMessage } from "@/lib/error-map"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Customer } from "@/types/customers"
+import { ItemListItem, Uom, Warehouse } from "@/types/master-data"
+import { SalesInvoice } from "@/types/sales"
+
+export default function SalesInvoicePrintPage({ params }: { params: Promise<{ id: string }> }) {
+  const resolvedParams = use(params)
+  const invoiceId = Number(resolvedParams.id)
+  const [invoice, setInvoice] = useState<SalesInvoice | null>(null)
+  const [customers, setCustomers] = useState<Customer[]>([])
+  const [items, setItems] = useState<ItemListItem[]>([])
+  const [uoms, setUoms] = useState<Uom[]>([])
+  const [warehouses, setWarehouses] = useState<Warehouse[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!Number.isFinite(invoiceId)) {
+      setError(`Invalid invoice id '${resolvedParams.id}'.`)
+      return
+    }
+
+    Promise.all([
+      customersApi.list({ pageSize: 200 }),
+      itemsApi.list({ pageSize: 200 }),
+      uomsApi.list({ pageSize: 200 }),
+      warehousesApi.list({ pageSize: 200 }),
+      salesApi.getInvoice(invoiceId),
+    ])
+      .then(([cust, itemRes, uomRes, whRes, doc]) => {
+        setCustomers(cust.items)
+        setItems(itemRes.items)
+        setUoms(uomRes.items)
+        setWarehouses(whRes.items)
+        setInvoice(doc.data)
+      })
+      .catch((err) => setError(errorMessage(err)))
+  }, [resolvedParams.id, invoiceId])
+
+  const freeQtyTotal = useMemo(() => invoice?.totals.freeQtyTotal ?? 0, [invoice])
+
+  if (error && !invoice) {
+    return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
+  }
+
+  if (!invoice) {
+    return <div className="rounded-2xl border border-dashed p-8 text-muted-foreground">{error ?? "Invoice print data is loading or unavailable."}</div>
+  }
+
+  const customer = customers.find((c) => c.customerId === invoice.customerId)
+  const warehouse = warehouses.find((w) => w.warehouseId === invoice.warehouseId)
+
+  return (
+    <div className="invoice-sheet mx-auto flex w-full max-w-5xl flex-col gap-6 rounded-3xl border bg-white p-6 shadow-sm print:rounded-none print:border-0 print:p-0 print:shadow-none">
+      <div className="flex items-center justify-end print:hidden">
+        <Button variant="outline" onClick={() => window.print()}>
+          <Printer className="size-4" />
+          Print
+        </Button>
+      </div>
+
+      <div className="invoice-header grid gap-4 border-b pb-5 md:grid-cols-[1.4fr_1fr]">
+        <div>
+          <div className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">Sales Invoice</div>
+          <h1 className="mt-2 text-3xl font-semibold text-foreground">{invoice.invoiceNo}</h1>
+          <div className="mt-2 text-sm text-muted-foreground">Status: {invoice.status} · Type: {invoice.invoiceType}</div>
+        </div>
+        <div className="grid gap-2 text-sm md:justify-items-end">
+          <div className="font-semibold text-foreground">ERP Core Trading</div>
+          <div className="text-muted-foreground">Invoice print view</div>
+          <div className="text-muted-foreground">Invoice date: {new Date(invoice.invoiceDate).toLocaleDateString()}</div>
+          <div className="text-muted-foreground">Printed: {new Date().toLocaleString()}</div>
+          <div className="text-muted-foreground">Free qty total: {freeQtyTotal.toFixed(2)}</div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="rounded-2xl border bg-muted/20 p-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Customer</div>
+          <div className="mt-2 text-lg font-semibold text-foreground">{invoice.customerSnapshotName}</div>
+          <div className="mt-1 text-sm text-muted-foreground">Customer ID: {invoice.customerId}</div>
+          {invoice.customerSnapshotTaxNo ? <div className="mt-1 text-sm text-muted-foreground">Tax No: {invoice.customerSnapshotTaxNo}</div> : null}
+          {customer?.displayName ? <div className="mt-1 text-sm text-muted-foreground">Customer: {customer.displayName}</div> : null}
+        </div>
+        <div className="rounded-2xl border bg-muted/20 p-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Warehouse</div>
+          <div className="mt-2 text-lg font-semibold text-foreground">{warehouse?.name ?? `#${invoice.warehouseId}`}</div>
+          <div className="mt-1 text-sm text-muted-foreground">Code: {warehouse?.code ?? invoice.warehouseId}</div>
+        </div>
+        <div className="rounded-2xl border bg-muted/20 p-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Totals</div>
+          <div className="mt-2 grid grid-cols-2 gap-2 text-sm">
+            <div className="text-muted-foreground">Subtotal</div><div className="text-right font-medium">{invoice.totals.subtotal.toFixed(2)}</div>
+            <div className="text-muted-foreground">Discount</div><div className="text-right font-medium">{invoice.totals.discountTotal.toFixed(2)}</div>
+            <div className="text-muted-foreground">Free qty</div><div className="text-right font-medium">{freeQtyTotal.toFixed(2)}</div>
+            <div className="text-muted-foreground">Tax</div><div className="text-right font-medium">{invoice.totals.taxTotal.toFixed(2)}</div>
+            <div className="text-muted-foreground">Net payable</div><div className="text-right font-semibold">{invoice.totals.netPayable.toFixed(2)}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="overflow-hidden rounded-2xl border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[34%]">Item</TableHead>
+              <TableHead>UOM</TableHead>
+              <TableHead className="text-right">Qty</TableHead>
+              <TableHead className="text-right">Free</TableHead>
+              <TableHead className="text-right">Unit price</TableHead>
+              <TableHead className="text-right">Discount</TableHead>
+              <TableHead className="text-right">Tax</TableHead>
+              <TableHead className="text-right">Line total</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invoice.lines.map((line) => (
+              <TableRow key={line.salesInvoiceLineId}>
+                <TableCell>
+                  <div className="font-medium text-foreground">{line.description}</div>
+                  <div className="text-xs text-muted-foreground">SKU {items.find((i) => i.itemId === line.itemId)?.sku ?? `#${line.itemId}`}</div>
+                </TableCell>
+                <TableCell>{uoms.find((u) => u.uomId === line.uomId)?.name ?? `#${line.uomId}`}</TableCell>
+                <TableCell className="text-right">{line.qty.toFixed(2)}</TableCell>
+                <TableCell className="text-right">{line.freeQty > 0 ? line.freeQty.toFixed(2) : "—"}</TableCell>
+                <TableCell className="text-right">{line.unitPrice.toFixed(2)}</TableCell>
+                <TableCell className="text-right">{line.discountAmount.toFixed(2)}</TableCell>
+                <TableCell className="text-right">{line.taxAmount.toFixed(2)}</TableCell>
+                <TableCell className="text-right font-medium">{line.lineTotal.toFixed(2)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

Frontend/erp-system/app/print/sales/invoices/page.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import { Printer } from "lucide-react"
+
+import { salesApi } from "@/lib/api/sales"
+import { errorMessage } from "@/lib/error-map"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { SalesInvoiceSummary } from "@/types/sales"
+
+function statusClass(status: SalesInvoiceSummary["status"]) {
+  switch (status) {
+    case "Draft":
+      return "border-amber-200 bg-amber-50 text-amber-800"
+    case "Posted":
+      return "border-emerald-200 bg-emerald-50 text-emerald-800"
+    case "Cancelled":
+      return "border-rose-200 bg-rose-50 text-rose-800"
+  }
+}
+
+export default function SalesInvoiceBatchPrintPage() {
+  const searchParams = useSearchParams()
+  const status = searchParams.get("status") ?? "All"
+  const query = searchParams.get("q") ?? ""
+  const [rows, setRows] = useState<SalesInvoiceSummary[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+      salesApi
+        .listInvoices({ page: 1, pageSize: 200 })
+        .then((res) => setRows(res.items))
+        .catch((err) => setError(errorMessage(err)))
+  }, [])
+
+  const visibleRows = rows?.filter((row) => {
+    const matchesStatus = status === "All" || row.status === status
+    const matchesQuery =
+      `${row.invoiceNo} ${row.customerSnapshotName}`.toLowerCase().includes(query.toLowerCase())
+    return matchesStatus && matchesQuery
+  })
+
+  if (error && !rows) {
+    return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
+  }
+
+  if (!rows) {
+    return <div className="rounded-2xl border border-dashed p-8 text-muted-foreground">{error ?? "Invoice batch print data is loading or unavailable."}</div>
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl border bg-white p-6 shadow-sm print:rounded-none print:border-0 print:p-0 print:shadow-none">
+      <div className="flex items-center justify-end print:hidden">
+        <Button variant="outline" onClick={() => window.print()}>
+          <Printer className="size-4" />
+          Print
+        </Button>
+      </div>
+
+      <div className="border-b pb-4">
+        <div className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">Sales Invoices</div>
+        <h1 className="mt-2 text-3xl font-semibold text-foreground">Invoice Batch Print</h1>
+        <p className="mt-2 text-sm text-muted-foreground">Printed register snapshot of current invoices.</p>
+      </div>
+
+      <div className="overflow-hidden rounded-2xl border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Invoice</TableHead>
+              <TableHead>Customer</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead>Due</TableHead>
+              <TableHead className="text-right">Lines</TableHead>
+              <TableHead className="text-right">Gross</TableHead>
+              <TableHead className="text-right">Discount</TableHead>
+              <TableHead className="text-right">Net</TableHead>
+              <TableHead>Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {visibleRows?.map((row) => (
+              <TableRow key={row.salesInvoiceId}>
+                <TableCell className="font-medium">{row.invoiceNo}</TableCell>
+                <TableCell>{row.customerSnapshotName}</TableCell>
+                <TableCell>{new Date(row.createdAt).toLocaleDateString()}</TableCell>
+                <TableCell>{new Date(row.invoiceDate).toLocaleDateString()}</TableCell>
+                <TableCell className="text-right">{row.totals.freeQtyTotal.toFixed(2)}</TableCell>
+                <TableCell className="text-right">{row.totals.subtotal.toFixed(2)}</TableCell>
+                <TableCell className="text-right">-{row.totals.discountTotal.toFixed(2)}</TableCell>
+                <TableCell className="text-right font-medium">{row.totals.grandTotal.toFixed(2)}</TableCell>
+                <TableCell>
+                  <Badge variant="outline" className={statusClass(row.status)}>
+                    {row.status}
+                  </Badge>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

Frontend/erp-system/app/print/sales/slips/[id]/page.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import { use, useEffect, useMemo, useState } from "react"
+import { Printer } from "lucide-react"
+
+import { salesApi } from "@/lib/api/sales"
+import { customersApi } from "@/lib/api/customers"
+import { itemsApi } from "@/lib/api/items"
+import { uomsApi } from "@/lib/api/uoms"
+import { warehousesApi } from "@/lib/api/warehouses"
+import { usersApi } from "@/lib/api/users"
+import { errorMessage } from "@/lib/error-map"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Customer } from "@/types/customers"
+import { ItemListItem, Uom, Warehouse } from "@/types/master-data"
+import { ManagedUser } from "@/types/users"
+import { SalesSlip } from "@/types/sales"
+
+export default function SalesSlipPrintPage({ params }: { params: Promise<{ id: string }> }) {
+  const resolvedParams = use(params)
+  const slipId = Number(resolvedParams.id)
+  const [slip, setSlip] = useState<SalesSlip | null>(null)
+  const [customers, setCustomers] = useState<Customer[]>([])
+  const [items, setItems] = useState<ItemListItem[]>([])
+  const [uoms, setUoms] = useState<Uom[]>([])
+  const [warehouses, setWarehouses] = useState<Warehouse[]>([])
+  const [users, setUsers] = useState<ManagedUser[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!Number.isFinite(slipId)) {
+      setError(`Invalid slip id '${resolvedParams.id}'.`)
+      return
+    }
+
+    Promise.all([
+      customersApi.list({ pageSize: 200 }),
+      itemsApi.list({ pageSize: 200 }),
+      uomsApi.list({ pageSize: 200 }),
+      warehousesApi.list({ pageSize: 200 }),
+      usersApi.list({ pageSize: 200 }),
+      salesApi.getSlip(slipId),
+    ])
+      .then(([cust, itemRes, uomRes, whRes, userRes, doc]) => {
+        setCustomers(cust.items)
+        setItems(itemRes.items)
+        setUoms(uomRes.items)
+        setWarehouses(whRes.items)
+        setUsers(userRes.items)
+        setSlip(doc.data)
+      })
+      .catch((err) => setError(errorMessage(err)))
+  }, [resolvedParams.id, slipId])
+
+  const subtotal = useMemo(() => slip?.totals.subtotal ?? 0, [slip])
+
+  if (error && !slip) {
+    return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
+  }
+
+  if (!slip) {
+    return <div className="rounded-2xl border border-dashed p-8 text-muted-foreground">{error ?? "Slip print data is loading or unavailable."}</div>
+  }
+
+  const customer = customers.find((c) => c.customerId === slip.customerId)
+  const warehouse = warehouses.find((w) => w.warehouseId === slip.warehouseId)
+
+  return (
+    <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 rounded-3xl border bg-white p-6 shadow-sm print:rounded-none print:border-0 print:p-0 print:shadow-none">
+      <div className="flex items-center justify-end print:hidden">
+        <Button variant="outline" onClick={() => window.print()}>
+          <Printer className="size-4" />
+          Print
+        </Button>
+      </div>
+
+      <div className="border-b pb-5">
+        <div className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">Sales Slip</div>
+        <h1 className="mt-2 text-3xl font-semibold text-foreground">{slip.slipNo}</h1>
+        <div className="mt-2 text-sm text-muted-foreground">Status: {slip.status} · Date: {new Date(slip.slipDate).toLocaleDateString()}</div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="rounded-2xl border bg-muted/20 p-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Customer</div>
+          <div className="mt-2 text-lg font-semibold text-foreground">{slip.customerSnapshotName}</div>
+          <div className="mt-1 text-sm text-muted-foreground">Customer ID: {slip.customerId}</div>
+          {customer?.displayName ? <div className="mt-1 text-sm text-muted-foreground">Customer: {customer.displayName}</div> : null}
+        </div>
+        <div className="rounded-2xl border bg-muted/20 p-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Warehouse</div>
+          <div className="mt-2 text-lg font-semibold text-foreground">{warehouse?.name ?? `#${slip.warehouseId}`}</div>
+          <div className="mt-1 text-sm text-muted-foreground">Code: {warehouse?.code ?? slip.warehouseId}</div>
+        </div>
+        <div className="rounded-2xl border bg-muted/20 p-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Totals</div>
+          <div className="mt-2 grid grid-cols-2 gap-2 text-sm">
+            <div className="text-muted-foreground">Subtotal</div><div className="text-right font-medium">{slip.totals.subtotal.toFixed(2)}</div>
+            <div className="text-muted-foreground">Discount</div><div className="text-right font-medium">{slip.totals.discountTotal.toFixed(2)}</div>
+            <div className="text-muted-foreground">Free qty</div><div className="text-right font-medium">{slip.totals.freeQtyTotal.toFixed(2)}</div>
+            <div className="text-muted-foreground">Net total</div><div className="text-right font-semibold">{slip.totals.grandTotal.toFixed(2)}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="overflow-hidden rounded-2xl border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Item</TableHead>
+              <TableHead>UOM</TableHead>
+              <TableHead className="text-right">Qty</TableHead>
+              <TableHead className="text-right">Free</TableHead>
+              <TableHead className="text-right">Unit price</TableHead>
+              <TableHead className="text-right">Line total</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {slip.lines.map((line) => (
+              <TableRow key={line.salesSlipLineId}>
+                <TableCell>
+                  <div className="font-medium text-foreground">{line.description}</div>
+                  <div className="text-xs text-muted-foreground">SKU {items.find((i) => i.itemId === line.itemId)?.sku ?? `#${line.itemId}`}</div>
+                </TableCell>
+                <TableCell>{uoms.find((u) => u.uomId === line.uomId)?.name ?? `#${line.uomId}`}</TableCell>
+                <TableCell className="text-right">{line.qty.toFixed(0)}</TableCell>
+                <TableCell className="text-right">{line.freeQty > 0 ? line.freeQty.toFixed(0) : "—"}</TableCell>
+                <TableCell className="text-right">{line.unitPrice.toFixed(2)}</TableCell>
+                <TableCell className="text-right font-medium">{line.lineTotal.toFixed(2)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="rounded-2xl border bg-muted/20 p-4">
+        <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Cashier</div>
+        <div className="mt-2 text-sm text-foreground">{users.find((u) => u.userId === slip.cashierUserId)?.displayName ?? `#${slip.cashierUserId}`}</div>
+        <div className="mt-3 text-sm text-muted-foreground">Subtotal: {subtotal.toFixed(2)}</div>
+      </div>
+    </div>
+  )
+}

Frontend/erp-system/app/print/sales/slips/page.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import { Printer } from "lucide-react"
+
+import { salesApi } from "@/lib/api/sales"
+import { errorMessage } from "@/lib/error-map"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { SalesSlipSummary } from "@/types/sales"
+
+function statusClass(status: SalesSlipSummary["status"]) {
+  switch (status) {
+    case "Draft":
+      return "border-amber-200 bg-amber-50 text-amber-800"
+    case "Posted":
+      return "border-emerald-200 bg-emerald-50 text-emerald-800"
+    case "Cancelled":
+      return "border-rose-200 bg-rose-50 text-rose-800"
+  }
+}
+
+export default function SalesSlipBatchPrintPage() {
+  const searchParams = useSearchParams()
+  const status = searchParams.get("status") ?? "All"
+  const query = searchParams.get("q") ?? ""
+  const [rows, setRows] = useState<SalesSlipSummary[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+      salesApi
+      .listSlips({ page: 1, pageSize: 200 })
+      .then((res) => setRows(res.items))
+      .catch((err) => setError(errorMessage(err)))
+  }, [])
+
+  const visibleRows = rows?.filter((row) => {
+    const matchesStatus = status === "All" || row.status === status
+    const matchesQuery =
+      `${row.slipNo} ${row.customerSnapshotName}`.toLowerCase().includes(query.toLowerCase())
+    return matchesStatus && matchesQuery
+  })
+
+  if (error && !rows) {
+    return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
+  }
+
+  if (!rows) {
+    return <div className="rounded-2xl border border-dashed p-8 text-muted-foreground">{error ?? "Slip batch print data is loading or unavailable."}</div>
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl border bg-white p-6 shadow-sm print:rounded-none print:border-0 print:p-0 print:shadow-none">
+      <div className="flex items-center justify-end print:hidden">
+        <Button variant="outline" onClick={() => window.print()}>
+          <Printer className="size-4" />
+          Print
+        </Button>
+      </div>
+
+      <div className="border-b pb-4">
+        <div className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">Sales Slips</div>
+        <h1 className="mt-2 text-3xl font-semibold text-foreground">Slip Batch Print</h1>
+        <p className="mt-2 text-sm text-muted-foreground">Printed register snapshot of current slips.</p>
+      </div>
+
+      <div className="overflow-hidden rounded-2xl border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Slip</TableHead>
+              <TableHead>Customer</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Lines</TableHead>
+              <TableHead className="text-right">Gross</TableHead>
+              <TableHead className="text-right">Discount</TableHead>
+              <TableHead className="text-right">Net</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {visibleRows?.map((row) => (
+              <TableRow key={row.salesSlipId}>
+                <TableCell className="font-medium">{row.slipNo}</TableCell>
+                <TableCell>{row.customerSnapshotName}</TableCell>
+                <TableCell>{new Date(row.createdAt).toLocaleDateString()}</TableCell>
+                <TableCell>
+                  <Badge variant="outline" className={statusClass(row.status)}>
+                    {row.status}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-right">{row.totals.freeQtyTotal.toFixed(2)}</TableCell>
+                <TableCell className="text-right">{row.totals.subtotal.toFixed(2)}</TableCell>
+                <TableCell className="text-right">-{row.totals.discountTotal.toFixed(2)}</TableCell>
+                <TableCell className="text-right font-medium">{row.totals.grandTotal.toFixed(2)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}