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

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, PO_STATUS_LABELS } 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", "PARTIALLY_PAID", "PARTIALLY_CLOSED"] } },
    include: { submitter: true, vessel: true, site: { select: { name: 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">
                <div className="flex flex-col gap-1">
                  <span className={`text-xs font-medium rounded-full px-2.5 py-0.5 self-start ${
                    po.status === "SENT_FOR_PAYMENT"
                      ? "bg-primary-50 text-primary-700"
                      : po.status === "PARTIALLY_PAID"
                      ? "bg-warning-50 text-warning-700"
                      : po.status === "PARTIALLY_CLOSED"
                      ? "bg-warning-50 text-warning-700"
                      : "bg-warning-50 text-warning-700"
                  }`}>
                    {po.status === "SENT_FOR_PAYMENT"
                      ? "Processing — awaiting confirmation"
                      : po.status === "PARTIALLY_PAID"
                      ? "Partially paid — additional payment needed"
                      : po.status === "PARTIALLY_CLOSED"
                      ? "Partially received — awaiting more payments"
                      : "Ready for payment"}
                  </span>
                  {(po.status === "PARTIALLY_PAID" || po.status === "PARTIALLY_CLOSED") && po.paidAmount != null && (
                    <span className="text-xs text-neutral-500">
                      Paid {formatCurrency(Number(po.paidAmount), po.currency)} of {formatCurrency(Number(po.totalAmount), po.currency)}
                    </span>
                  )}
                </div>
                <PaymentActions
                  poId={po.id}
                  poStatus={po.status}
                  totalAmount={Number(po.totalAmount)}
                  paidAmount={po.paidAmount != null ? Number(po.paidAmount) : 0}
                />
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}