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>
This commit is contained in:
parent
0252e8eab4
commit
4c1a41fe61
3 changed files with 243 additions and 1 deletions
152
App/pelagia-portal/app/(portal)/payments/history/page.tsx
Normal file
152
App/pelagia-portal/app/(portal)/payments/history/page.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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[] = [
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue