edr-platform/apps/edr-freight-web/backoffice/src/pages/shipping-lines/ShippingLineCreditsPage.tsx

import { Stack, Tabs } from "@mantine/core";
import { HandCoins, Receipt } from "lucide-react";
import { useSearchParams } from "react-router-dom";

import { PageContainer, PageHeader } from "@/components/page";

import ShippingLineCreditInvoicesPanel from "./ShippingLineCreditInvoicesPanel";
import ShippingLineCreditsPanel from "./ShippingLineCreditsPanel";

/**
 * Finance's view of what shipping lines owe. Two URL-linkable tabs (?tab=,
 * FinanceHubPage convention): the credit ledger (select unbilled credits →
 * generate an invoice) and the invoices minted from it (maker–checker
 * mark-paid / cancel actions).
 */
export default function ShippingLineCreditsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const activeTab =
    searchParams.get("tab") === "invoices" ? "invoices" : "credits";

  const handleTabChange = (value: string | null) => {
    if (!value) return;
    setSearchParams(
      (prev) => {
        const next = new URLSearchParams(prev);
        next.set("tab", value);
        return next;
      },
      { replace: true },
    );
  };

  return (
    <PageContainer>
      <Stack gap="lg">
        <PageHeader
          title="Shipping Line Credits"
          subtitle={
            activeTab === "invoices"
              ? "Invoices billed from credit batches. Manual mark-paid / cancel actions need a second approver."
              : "What each line owes — outstanding totals and the full credit ledger."
          }
        />

        <Tabs value={activeTab} onChange={handleTabChange} keepMounted={false}>
          <Tabs.List>
            <Tabs.Tab value="credits" leftSection={<HandCoins size={16} />}>
              Credits
            </Tabs.Tab>
            <Tabs.Tab value="invoices" leftSection={<Receipt size={16} />}>
              Invoices
            </Tabs.Tab>
          </Tabs.List>

          <Tabs.Panel value="credits" pt="lg">
            <ShippingLineCreditsPanel />
          </Tabs.Panel>
          <Tabs.Panel value="invoices" pt="lg">
            <ShippingLineCreditInvoicesPanel />
          </Tabs.Panel>
        </Tabs>
      </Stack>
    </PageContainer>
  );
}