feat(accounts): add payment history page at /payments/history

Accounts users had no way to review POs that had already been processed
through the payment pipeline. The existing /history page requires the
export_reports permission which accounts does not hold.

New page at /payments/history:
- Scoped to PAID_DELIVERED and CLOSED statuses only
- Gated on view_all_pos permission (held by ACCOUNTS, MANAGER, SUPERUSER, etc.)
- Filterable by paid-date range (paidAt) and cost centre
- Columns: PO number, title, cost centre, vendor, submitter, status badge,
  payment ref, amount, paid date
- Summary bar at top showing total paid amount and order count
- 200-row soft limit with prompt to refine filters

Sidebar:
- Added "Payment History" link (Receipt icon) visible to ACCOUNTS and SUPERUSER
- Removed ACCOUNTS from the /history nav item since that page requires
  export_reports which accounts does not have (fixes the dead sidebar link)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

App/pelagia-portal/app/(portal)/payments/history/page.tsx

@@ -0,0 +1,152 @@
+import { auth } from "@/auth";
+import { db } from "@/lib/db";
+import { hasPermission } from "@/lib/permissions";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { formatCurrency, formatDate } from "@/lib/utils";
+import { PoStatusBadge } from "@/components/po/po-status-badge";
+import { PaymentHistoryFilters } from "./payment-history-filters";
+import { Suspense } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "Payment History" };
+
+interface Props {
+  searchParams: Promise<{
+    dateFrom?: string;
+    dateTo?: string;
+    vesselId?: string;
+  }>;
+}
+
+export default async function PaymentHistoryPage({ searchParams }: Props) {
+  const session = await auth();
+  if (!session?.user) redirect("/login");
+
+  if (!hasPermission(session.user.role, "view_all_pos")) redirect("/dashboard");
+
+  const { dateFrom, dateTo, vesselId } = await searchParams;
+
+  const where: Parameters<typeof db.purchaseOrder.findMany>[0]["where"] = {
+    status: { in: ["PAID_DELIVERED", "CLOSED"] },
+  };
+
+  if (dateFrom) where.paidAt = { ...where.paidAt as object, gte: new Date(dateFrom) };
+  if (dateTo) {
+    const end = new Date(dateTo);
+    end.setDate(end.getDate() + 1);
+    where.paidAt = { ...where.paidAt as object, lt: end };
+  }
+  if (vesselId) where.vesselId = vesselId;
+
+  const [orders, vessels, totalResult] = await Promise.all([
+    db.purchaseOrder.findMany({
+      where,
+      include: {
+        submitter: true,
+        vessel: true,
+        account: true,
+        vendor: true,
+      },
+      orderBy: { paidAt: "desc" },
+      take: 200,
+    }),
+    db.vessel.findMany({ orderBy: { name: "asc" }, select: { id: true, name: true } }),
+    db.purchaseOrder.aggregate({
+      _sum: { totalAmount: true },
+      where,
+    }),
+  ]);
+
+  const totalPaid = Number(totalResult._sum.totalAmount ?? 0);
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold text-neutral-900">Payment History</h1>
+        <p className="mt-1 text-sm text-neutral-500">
+          POs marked as paid or fully closed
+        </p>
+      </div>
+
+      {/* Summary stat */}
+      <div className="mb-4 rounded-lg border border-neutral-200 bg-white p-4 flex items-center justify-between">
+        <div>
+          <p className="text-xs font-medium text-neutral-500 uppercase tracking-wide">Total Paid</p>
+          <p className="mt-0.5 text-2xl font-semibold text-neutral-900 font-mono">
+            {formatCurrency(totalPaid)}
+          </p>
+        </div>
+        <div className="text-right">
+          <p className="text-xs font-medium text-neutral-500 uppercase tracking-wide">Orders</p>
+          <p className="mt-0.5 text-2xl font-semibold text-neutral-900">{orders.length}</p>
+        </div>
+      </div>
+
+      <Suspense>
+        <PaymentHistoryFilters vessels={vessels} />
+      </Suspense>
+
+      <div className="rounded-lg border border-neutral-200 bg-white overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-neutral-50 border-b border-neutral-200">
+            <tr>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">PO Number</th>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">Title</th>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">Cost Centre</th>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">Vendor</th>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">Submitter</th>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">Status</th>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">Payment Ref</th>
+              <th className="px-4 py-3 text-right font-medium text-neutral-600">Amount</th>
+              <th className="px-4 py-3 text-left font-medium text-neutral-600">Paid</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-neutral-100">
+            {orders.map((po) => (
+              <tr key={po.id} className="hover:bg-neutral-50">
+                <td className="px-4 py-3">
+                  <Link
+                    href={`/po/${po.id}`}
+                    className="font-mono text-xs text-primary-600 hover:text-primary-700"
+                  >
+                    {po.poNumber}
+                  </Link>
+                </td>
+                <td className="px-4 py-3 font-medium text-neutral-900 max-w-xs truncate">
+                  {po.title}
+                </td>
+                <td className="px-4 py-3 text-neutral-600">{po.vessel.name}</td>
+                <td className="px-4 py-3 text-neutral-600">{po.vendor?.name ?? "—"}</td>
+                <td className="px-4 py-3 text-neutral-600">{po.submitter.name}</td>
+                <td className="px-4 py-3">
+                  <PoStatusBadge status={po.status} />
+                </td>
+                <td className="px-4 py-3 font-mono text-xs text-neutral-500">
+                  {po.paymentRef ?? "—"}
+                </td>
+                <td className="px-4 py-3 text-right font-mono text-xs font-semibold">
+                  {formatCurrency(Number(po.totalAmount), po.currency)}
+                </td>
+                <td className="px-4 py-3 text-neutral-500">
+                  {po.paidAt ? formatDate(po.paidAt) : "—"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {orders.length === 0 && (
+          <div className="p-12 text-center text-neutral-500">
+            No paid orders found.
+          </div>
+        )}
+      </div>
+
+      {orders.length === 200 && (
+        <p className="mt-2 text-xs text-neutral-400 text-right">
+          Showing first 200 results — refine filters to narrow results.
+        </p>
+      )}
+    </div>
+  );
+}

App/pelagia-portal/app/(portal)/payments/history/payment-history-filters.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+
+interface Props {
+  vessels: { id: string; name: string }[];
+}
+
+export function PaymentHistoryFilters({ vessels }: Props) {
+  const router = useRouter();
+  const sp = useSearchParams();
+
+  const [dateFrom, setDateFrom] = useState(sp.get("dateFrom") ?? "");
+  const [dateTo, setDateTo] = useState(sp.get("dateTo") ?? "");
+  const [vesselId, setVesselId] = useState(sp.get("vesselId") ?? "");
+
+  function apply() {
+    const params = new URLSearchParams();
+    if (dateFrom) params.set("dateFrom", dateFrom);
+    if (dateTo) params.set("dateTo", dateTo);
+    if (vesselId) params.set("vesselId", vesselId);
+    router.push(`/payments/history?${params.toString()}`);
+  }
+
+  function clear() {
+    setDateFrom("");
+    setDateTo("");
+    setVesselId("");
+    router.push("/payments/history");
+  }
+
+  const hasFilters = dateFrom || dateTo || vesselId;
+
+  return (
+    <div className="mb-4 rounded-lg border border-neutral-200 bg-white p-4">
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+        <div>
+          <label className="block text-xs font-medium text-neutral-600 mb-1">Paid From</label>
+          <input
+            type="date"
+            value={dateFrom}
+            onChange={(e) => setDateFrom(e.target.value)}
+            className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-neutral-600 mb-1">Paid To</label>
+          <input
+            type="date"
+            value={dateTo}
+            onChange={(e) => setDateTo(e.target.value)}
+            className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-neutral-600 mb-1">Cost Centre</label>
+          <select
+            value={vesselId}
+            onChange={(e) => setVesselId(e.target.value)}
+            className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+          >
+            <option value="">All cost centres</option>
+            {vessels.map((v) => (
+              <option key={v.id} value={v.id}>{v.name}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="mt-3 flex items-center gap-2">
+        <button
+          onClick={apply}
+          className="rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
+        >
+          Apply
+        </button>
+        {hasFilters && (
+          <button
+            onClick={clear}
+            className="rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-sm font-medium text-neutral-600 hover:bg-neutral-50 transition-colors"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

App/pelagia-portal/components/layout/sidebar.tsx

@@ -10,6 +10,7 @@ import {
   CheckSquare,
   CreditCard,
   History,
+  Receipt,
   Users,
   Ship,
   Building2,
@@ -37,7 +38,8 @@ const NAV_ITEMS: NavItem[] = [
   { href: "/po/import", label: "Import PO", icon: Upload, roles: ["MANAGER", "SUPERUSER"] },
   { href: "/approvals", label: "Approvals", icon: CheckSquare, roles: ["MANAGER", "SUPERUSER"] },
   { href: "/payments", label: "Payments", icon: CreditCard, roles: ["ACCOUNTS"] },
-  { href: "/history", label: "History", icon: History, roles: ["MANAGER", "SUPERUSER", "ACCOUNTS", "AUDITOR", "ADMIN"] },
+  { href: "/payments/history", label: "Payment History", icon: Receipt, roles: ["ACCOUNTS", "SUPERUSER"] },
+  { href: "/history", label: "History", icon: History, roles: ["MANAGER", "SUPERUSER", "AUDITOR", "ADMIN"] },
 ];
 
 const INVENTORY_ITEMS: NavItem[] = [