93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
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 { PaymentActions } from "./payment-actions";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = { title: "Payments" };
|
|
|
|
export default async function PaymentsPage() {
|
|
const session = await auth();
|
|
if (!session?.user) redirect("/login");
|
|
|
|
if (!hasPermission(session.user.role, "process_payment")) redirect("/dashboard");
|
|
|
|
const queue = await db.purchaseOrder.findMany({
|
|
where: { status: { in: ["MGR_APPROVED", "SENT_FOR_PAYMENT"] } },
|
|
include: { submitter: true, vessel: true, account: true, vendor: true },
|
|
orderBy: { approvedAt: "asc" },
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-semibold text-neutral-900">Payment Queue</h1>
|
|
<p className="mt-1 text-sm text-neutral-500">
|
|
{queue.length} order{queue.length !== 1 ? "s" : ""} in the payment pipeline
|
|
</p>
|
|
</div>
|
|
|
|
{queue.length === 0 ? (
|
|
<div className="rounded-lg border border-neutral-200 bg-white p-12 text-center">
|
|
<p className="text-neutral-500">No orders in the payment queue.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{queue.map((po) => (
|
|
<div key={po.id} className="rounded-lg border border-neutral-200 bg-white p-5">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="font-mono text-xs text-neutral-500">{po.poNumber}</span>
|
|
</div>
|
|
<h3 className="font-medium text-neutral-900 truncate">{po.title}</h3>
|
|
<div className="mt-1 flex flex-wrap gap-3 text-sm text-neutral-500">
|
|
<span>{po.vessel.name}</span>
|
|
<span>·</span>
|
|
<span>{po.submitter.name}</span>
|
|
{po.vendor && (
|
|
<>
|
|
<span>·</span>
|
|
<span>{po.vendor.name}</span>
|
|
</>
|
|
)}
|
|
{po.approvedAt && (
|
|
<>
|
|
<span>·</span>
|
|
<span>Approved {formatDate(po.approvedAt)}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-right shrink-0">
|
|
<div className="text-lg font-semibold text-neutral-900 font-mono">
|
|
{formatCurrency(Number(po.totalAmount), po.currency)}
|
|
</div>
|
|
<Link
|
|
href={`/po/${po.id}`}
|
|
className="text-xs text-neutral-400 hover:text-primary-600"
|
|
>
|
|
View PO →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 border-t border-neutral-100 pt-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
|
<span className={`text-xs font-medium rounded-full px-2.5 py-0.5 ${
|
|
po.status === "SENT_FOR_PAYMENT"
|
|
? "bg-primary-50 text-primary-700"
|
|
: "bg-warning-50 text-warning-700"
|
|
}`}>
|
|
{po.status === "SENT_FOR_PAYMENT" ? "Processing — awaiting confirmation" : "Ready for payment"}
|
|
</span>
|
|
<PaymentActions poId={po.id} poStatus={po.status} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|