pelagia-portal/App/app/(portal)/history/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 { 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;
    costCentreRef?: string;
    status?: string;
  }>;
}

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

  if (!hasPermission(session.user.role, "export_reports")) redirect("/dashboard");

  const { dateFrom, dateTo, costCentreRef, 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 (costCentreRef) {
    if (costCentreRef.startsWith("v:")) where.vesselId = costCentreRef.slice(2);
    else if (costCentreRef.startsWith("s:")) where.siteId = costCentreRef.slice(2);
  }
  if (status) where.status = status as POStatus;

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

  const costCentres = [
    ...vessels.map((v) => ({ ref: `v:${v.id}`, name: v.name })),
    ...sites.map((s) => ({ ref: `s:${s.id}`, name: s.name })),
  ];

  const exportParams = new URLSearchParams({ format: "csv" });
  if (dateFrom) exportParams.set("dateFrom", dateFrom);
  if (dateTo) exportParams.set("dateTo", dateTo);
  if (costCentreRef) exportParams.set("costCentreRef", costCentreRef);
  if (status) exportParams.set("status", status);

  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 costCentres={costCentres} />
      </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">
                <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 ?? po.site?.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>
  );
}