Merge branch 'dev' of github.com:Tria-plc/edr-platform into freight/feature/vehicle_2

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

@@ -1,11 +1,14 @@
 import {
   ActionIcon,
+  Badge,
   Box,
   Card,
   Group,
+  SegmentedControl,
   Stack,
   Text,
   TextInput,
+  Tooltip,
 } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useQuery } from "@tanstack/react-query";
@@ -32,7 +35,7 @@ import {
 } from "@/components/customers";
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import { api } from "@/services/api";
-import type { Company } from "@/types/customer";
+import type { Company, CompanyStatus } from "@/types/customer";
 import {
   DataTable,
   DataTableFooter,
@@ -45,14 +48,17 @@ export default function CustomersPage() {
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [query, setQuery] = useState("");
   const [debouncedQuery] = useDebouncedValue(query, 300);
+  // "" = all; otherwise a CompanyStatus to narrow the list (e.g. pending review).
+  const [statusFilter, setStatusFilter] = useState<"" | CompanyStatus>("");
 
   const filter = useMemo(
     () => ({
       page: pagination.pageIndex + 1,
       pageSize: pagination.pageSize,
       search: debouncedQuery,
+      status: statusFilter || undefined,
     }),
-    [pagination.pageIndex, pagination.pageSize, debouncedQuery],
+    [pagination.pageIndex, pagination.pageSize, debouncedQuery, statusFilter],
   );
 
   const { data: stats } = useQuery(api.customers.stats.queryOptions({ input: {} }));
@@ -107,7 +113,25 @@ export default function CustomersPage() {
       {
         id: "status",
         header: "Status",
-        cell: ({ row }) => <CompanyStatusBadge status={row.original.status} />,
+        cell: ({ row }) => {
+          const pending = (row.original.companyProfiles ?? []).filter(
+            (p) => p.status === "pending",
+          ).length;
+          return (
+            <Group gap={6} wrap="nowrap">
+              <CompanyStatusBadge status={row.original.status} />
+              {pending > 0 ? (
+                <Tooltip
+                  label={`${pending} profile${pending > 1 ? "s" : ""} awaiting approval`}
+                >
+                  <Badge color="yellow" variant="light" size="sm" radius="sm">
+                    {pending} pending
+                  </Badge>
+                </Tooltip>
+              ) : null}
+            </Group>
+          );
+        },
       },
       {
         id: "contact",
@@ -216,6 +240,20 @@ export default function CustomersPage() {
                 style={{ flex: 1, minWidth: "240px" }}
                 radius="lg"
               />
+              <SegmentedControl
+                size="sm"
+                radius="md"
+                value={statusFilter || "all"}
+                onChange={(v) => {
+                  setStatusFilter(v === "all" ? "" : (v as CompanyStatus));
+                  setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+                }}
+                data={[
+                  { label: "All", value: "all" },
+                  { label: "Pending approval", value: "pending" },
+                  { label: "Active", value: "active" },
+                ]}
+              />
               <Text size="sm" c="dimmed">
                 {total} record{total !== 1 ? "s" : ""}
               </Text>