update authentication pages with new layout and functionality

apps/edr-freight-web/backoffice/src/pages/payments/PaymentsPage.tsx

@@ -12,9 +12,11 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
+import { Badge as MantineBadge } from "@mantine/core";
 import {
   CheckCircle2,
   CircleDollarSign,
+  LayoutGrid,
   Loader2,
   RotateCcw,
   Search,
@@ -24,6 +26,7 @@ import {
 } from "lucide-react";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import "@/components/overview/overview.css";
 import { usePaymentList, usePaymentSummary } from "@/hooks/usePayments";
 import type {
   PaymentMethod,
@@ -39,11 +42,16 @@ import {
 } from "@edr/ui-common";
 
 const STATUS_TABS = [
-  { key: "all", label: "All", statuses: undefined as string | undefined },
-  { key: "success", label: "Success", statuses: "success" },
-  { key: "processing", label: "Processing", statuses: "processing,action-required" },
-  { key: "failed", label: "Failed", statuses: "failed,canceled" },
-  { key: "refunded", label: "Refunded", statuses: "refunded" },
+  { key: "all", label: "All", statuses: undefined as string | undefined, icon: LayoutGrid },
+  { key: "success", label: "Success", statuses: "success", icon: CheckCircle2 },
+  {
+    key: "processing",
+    label: "Processing",
+    statuses: "processing,action-required",
+    icon: Loader2,
+  },
+  { key: "failed", label: "Failed", statuses: "failed,canceled", icon: XCircle },
+  { key: "refunded", label: "Refunded", statuses: "refunded", icon: RotateCcw },
 ] as const;
 
 type StatusTabKey = (typeof STATUS_TABS)[number]["key"];
@@ -166,6 +174,20 @@ export default function PaymentsPage() {
 
   const val = (n?: number) => (summaryLoading ? "—" : (n ?? 0));
 
+  const tabCounts: Record<StatusTabKey, number | undefined> = {
+    all:
+      summary === undefined
+        ? undefined
+        : (summary.success ?? 0) +
+          (summary.processing ?? 0) +
+          (summary.failed ?? 0) +
+          (summary.refunded ?? 0),
+    success: summary?.success,
+    processing: summary?.processing,
+    failed: summary?.failed,
+    refunded: summary?.refunded,
+  };
+
   const columns: ColumnDef<PaymentRow>[] = [
     {
       id: "order",
@@ -274,13 +296,48 @@ export default function PaymentsPage() {
               setStatusTab((value as StatusTabKey) ?? "all");
               setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
             }}
+            variant="pills"
+            color="green"
+            keepMounted={false}
+            classNames={{ list: "ov-tablist", tab: "ov-tab" }}
           >
             <Tabs.List>
-              {STATUS_TABS.map((t) => (
-                <Tabs.Tab key={t.key} value={t.key}>
-                  {t.label}
-                </Tabs.Tab>
-              ))}
+              {STATUS_TABS.map((t) => {
+                const isActive = statusTab === t.key;
+                const count = tabCounts[t.key];
+                const Icon = t.icon;
+                return (
+                  <Tabs.Tab
+                    key={t.key}
+                    value={t.key}
+                    leftSection={<Icon size={17} strokeWidth={1.85} />}
+                    rightSection={
+                      count !== undefined ? (
+                        <MantineBadge
+                          size="sm"
+                          radius="sm"
+                          variant={isActive ? "white" : "light"}
+                          color={isActive ? "green" : "gray"}
+                          styles={
+                            isActive
+                              ? {
+                                  root: {
+                                    background: "rgba(255,255,255,0.9)",
+                                    color: "#15805f",
+                                  },
+                                }
+                              : undefined
+                          }
+                        >
+                          {count}
+                        </MantineBadge>
+                      ) : undefined
+                    }
+                  >
+                    {t.label}
+                  </Tabs.Tab>
+                );
+              })}
             </Tabs.List>
           </Tabs>