style: inter module integration

apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx

@@ -24,6 +24,7 @@ import {
   Contact,
   Download,
   Eye,
+  FileSignature,
   FileText,
   History,
   Hourglass,
@@ -55,7 +56,6 @@ import {
   ProfileStatusBadge,
   ProfileTypeBadge,
   RequestDocumentChangeModal,
-  ResetPasswordAction,
   TableCard,
   formatBytes,
   formatDate,
@@ -63,6 +63,8 @@ import {
   humanize,
 } from "@/components/customers";
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
+import { ContractStatusBadge } from "@/components/contracts/ContractStatusBadge";
+import { useContractList } from "@/hooks/contracts/useContracts";
 import { useAuth } from "@/auth/useAuth";
 import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import {
@@ -85,6 +87,7 @@ import {
   usePagination,
   type ColumnDef,
 } from "@edr/ui-common";
+import type { Freight } from "@edr/types";
 
 /** Plain-text summary of the company's eTrade-sourced record, downloaded client-side (eTrade returns data, not a document). */
 function downloadTinRecord(company: Company) {
@@ -170,6 +173,7 @@ export default function CustomerDetailPage() {
       enabled: Boolean(id),
     }),
   );
+  const contractsQuery = useContractList({ companyId: id, pageSize: 100 }, Boolean(id));
 
   const { pagination: invoicePagination, setPagination: setInvoicePagination } =
     usePagination({
@@ -191,6 +195,7 @@ export default function CustomerDetailPage() {
   );
 
   const bookings = Array.isArray(bookingsQuery.data) ? bookingsQuery.data : [];
+  const contracts = contractsQuery.data?.items ?? [];
   const documents = Array.isArray(documentsQuery.data)
     ? documentsQuery.data
     : [];
@@ -402,6 +407,59 @@ export default function CustomerDetailPage() {
     [],
   );
 
+  const contractColumns: ColumnDef<Freight.IContract>[] = useMemo(
+    () => [
+      {
+        id: "reference",
+        header: "Contract",
+        cell: ({ row }) => (
+          <Text size="sm" fw={600} c="edr-text">
+            {row.original.reference}
+          </Text>
+        ),
+      },
+      {
+        id: "kind",
+        header: "Kind",
+        cell: ({ row }) => (
+          <Text size="sm" c="dimmed">
+            {row.original.contractKind === "GENERAL" ? "General" : "One-time"}
+          </Text>
+        ),
+      },
+      {
+        id: "status",
+        header: "Status",
+        cell: ({ row }) => (
+          <ContractStatusBadge
+            status={row.original.status}
+            isRenewal={Boolean(row.original.renewalOfId)}
+          />
+        ),
+      },
+      {
+        id: "validUntil",
+        header: "Valid until",
+        cell: ({ row }) => (
+          <Text size="sm" c="dimmed">
+            {formatDate(row.original.contractValidUntil)}
+          </Text>
+        ),
+      },
+      {
+        id: "createdAt",
+        header: "Created",
+        meta: { headerClassName: "text-right", cellClassName: "text-right" },
+        cell: ({ row }) => (
+          <Text size="sm" c="dimmed">
+            {formatDate(row.original.createdAt)}
+          </Text>
+        ),
+      },
+    ],
+    [],
+  );
+
   const documentColumns: ColumnDef<CustomerDocument>[] = useMemo(
     () => [
       {
@@ -709,7 +767,6 @@ export default function CustomerDetailPage() {
             <ChangeRequestPendingBadge companyId={company.id} />
           </Group>
         }
-        action={<ResetPasswordAction company={company} />}
       />
 
       <Tabs defaultValue="overview">
@@ -720,6 +777,9 @@ export default function CustomerDetailPage() {
           <Tabs.Tab value="bookings" leftSection={<Package size={16} />}>
             Bookings
           </Tabs.Tab>
+          <Tabs.Tab value="contracts" leftSection={<FileSignature size={16} />}>
+            Contracts
+          </Tabs.Tab>
           <Tabs.Tab value="documents" leftSection={<FileText size={16} />}>
             Documents
           </Tabs.Tab>
@@ -1187,6 +1247,7 @@ export default function CustomerDetailPage() {
               status={tableStatus(bookingsQuery)}
               emptyMessage="No bookings for this customer."
               containerClassName="border-0 shadow-none bg-transparent"
+              onRowClick={(row) => navigate(`/dashboard/booking-requests/${row.id}`)}
               error={
                 bookingsQuery.isError
                   ? {
@@ -1199,6 +1260,28 @@ export default function CustomerDetailPage() {
           </TableCard>
         </Tabs.Panel>
 
+        {/* CONTRACTS */}
+        <Tabs.Panel value="contracts" pt="lg">
+          <TableCard minWidth={860}>
+            <DataTable
+              columns={contractColumns}
+              data={contracts}
+              status={tableStatus(contractsQuery)}
+              emptyMessage="No contracts for this customer."
+              containerClassName="border-0 shadow-none bg-transparent"
+              onRowClick={(row) => navigate(`/dashboard/contract-requests/${row.id}`)}
+              error={
+                contractsQuery.isError
+                  ? {
+                      message: "Failed to load contracts.",
+                      onRetry: () => void contractsQuery.refetch(),
+                    }
+                  : undefined
+              }
+            />
+          </TableCard>
+        </Tabs.Panel>
+
         {/* DOCUMENTS */}
         <Tabs.Panel value="documents" pt="lg">
           <Stack gap="lg">