enhance company approval workflow and TIN validation; add pending approval handling in booking and onboarding forms

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

@@ -22,7 +22,7 @@ import {
   LayoutGrid,
   Package,
 } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -84,6 +84,9 @@ export default function CustomerDetailPage() {
       enabled: Boolean(id),
     }),
   );
+  const approveMutation = useMutation(
+    api.customers.setCompanyStatus.mutationOptions(),
+  );
   const bookingsQuery = useQuery(
     api.customers.bookings.queryOptions({
       input: { id: id ?? "" },
@@ -398,6 +401,21 @@ export default function CustomerDetailPage() {
           <Group gap="xs" wrap="nowrap">
             <CompanyTypeBadge type={company.type} />
             <CompanyStatusBadge status={company.status} />
+            {company.status === "pending" && (
+              <Button
+                size="xs"
+                color="green"
+                loading={approveMutation.isPending}
+                onClick={() =>
+                  approveMutation.mutate({
+                    companyId: company.id,
+                    status: "active",
+                  })
+                }
+              >
+                Approve
+              </Button>
+            )}
           </Group>
         }
       />