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

import { auth } from "@/auth";
import { db } from "@/lib/db";
import { hasPermission, submitterCanViewAll } 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 { HistoryFilters } from "./history-filters";
import { Suspense } from "react";
import type { Metadata } from "next";
import type { POStatus } from "@prisma/client";

export const metadata: Metadata = { title: "History" };

interface Props {
  searchParams: Promise<{
    dateFrom?: string;
    dateTo?: string;
    approvedFrom?: string;
    approvedTo?: string;
    vesselId?: string;
    status?: string | string[];
  }>;
}

export default async function HistoryPage({ searchParams }: Props) {
  const session = await auth();
  if (!session?.user) redirect("/login");

  // Report-export holders see History; submitters get read+export access when the
  // submitter-view-all feature flag is on.
  if (
    !hasPermission(session.user.role, "export_reports") &&
    !submitterCanViewAll(session.user.role)
  ) {
    redirect("/dashboard");
  }

  const { dateFrom, dateTo, approvedFrom, approvedTo, vesselId, status } = await searchParams;

  const where: NonNullable<Parameters<typeof db.purchaseOrder.findMany>[0]>["where"] = {};
  if (dateFrom || dateTo) {
    const createdAt: { gte?: Date; lt?: Date } = {};
    if (dateFrom) createdAt.gte = new Date(dateFrom);
    if (dateTo) {
      const end = new Date(dateTo);
      end.setDate(end.getDate() + 1);
      createdAt.lt = end;
    }
    where.createdAt = createdAt;
  }
  if (approvedFrom || approvedTo) {
    const approvedAt: { gte?: Date; lt?: Date } = {};
    if (approvedFrom) approvedAt.gte = new Date(approvedFrom);
    if (approvedTo) {
      const end = new Date(approvedTo);
      end.setDate(end.getDate() + 1);
      approvedAt.lt = end;
    }
    where.approvedAt = approvedAt;
  }
  if (vesselId) where.vesselId = vesselId;
  const statuses = (Array.isArray(status) ? status : status ? [status] : []).filter(Boolean);
  if (statuses.length > 0) where.status = { in: statuses as POStatus[] };

  const [orders, vessels] = await Promise.all([
    db.purchaseOrder.findMany({
      where,
      include: { submitter: true, vessel: true, account: true },
      orderBy: { createdAt: "desc" },
      take: 200,
    }),
    db.vessel.findMany({ orderBy: { name: "asc" }, select: { id: true, name: true } }),
  ]);

  const exportParams = new URLSearchParams({ format: "csv" });
  if (dateFrom) exportParams.set("dateFrom", dateFrom);
  if (dateTo) exportParams.set("dateTo", dateTo);
  if (approvedFrom) exportParams.set("approvedFrom", approvedFrom);
  if (approvedTo) exportParams.set("approvedTo", approvedTo);
  if (vesselId) exportParams.set("vesselId", vesselId);
  for (const s of statuses) exportParams.append("status", s);

  return (
    <div>
      <div className="mb-4 flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-neutral-900">PO History</h1>
        <div className="flex items-center gap-2">
          <a
            href={`/api/reports/export?${exportParams.toString()}&format=pdf`}
            target="_blank"
            rel="noopener noreferrer"
            className="rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors"
          >
            Export PDF
          </a>
          <a
            href={`/api/reports/export?${exportParams.toString()}`}
            className="rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors"
          >
            Export CSV
          </a>
        </div>
      </div>

      <Suspense>
        <HistoryFilters 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">Submitter</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Status</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">Created</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-100">
            {orders.map((po) => (
              <tr
                key={po.id}
                className={`hover:bg-neutral-50 ${po.status === "CANCELLED" ? "bg-neutral-50/60 text-neutral-400 [&_td]:text-neutral-400" : ""}`}
              >
                <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.submitter.name}</td>
                <td className="px-4 py-3">
                  <PoStatusBadge status={po.status} />
                </td>
                <td className="px-4 py-3 text-right font-mono text-xs">
                  {formatCurrency(Number(po.totalAmount), po.currency)}
                </td>
                <td className="px-4 py-3 text-neutral-500">{formatDate(po.createdAt)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {orders.length === 0 && (
          <div className="p-12 text-center text-neutral-500">No purchase 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>
  );
}