style: ui fixes

apps/edr-freight-web/backoffice/src/components/contracts/ContractMilestonesTimeline.tsx

@@ -10,6 +10,7 @@ import {
 import { Group, Stack, Text, Timeline, Tooltip } from "@mantine/core";
 import type { Freight } from "@edr/types";
 
+import { formatDate } from "@/lib/format";
 import {
   CONTRACT_APPROVAL_ROLE_LABELS,
   HAZARDOUS_APPROVAL_ROLE_PERMISSION,
@@ -54,10 +55,6 @@ function formatAgo(iso: string): string {
   return "just now";
 }
 
-function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString(undefined, { dateStyle: "medium" });
-}
-
 type MilestoneIcon = typeof Send;
 
 interface Milestone {

apps/edr-freight-web/backoffice/src/components/contracts/ContractStatusTabs.tsx

@@ -1,92 +0,0 @@
-import { Badge, ScrollArea, Tabs } from "@mantine/core";
-import {
-  ClipboardCheck,
-  FileSignature,
-  Inbox,
-  LayoutGrid,
-  ShieldCheck,
-  Truck,
-  XCircle,
-} from "lucide-react";
-
-import "@/components/overview/overview.css";
-import {
-  CONTRACT_LIST_TABS,
-  type ContractStatusTabKey,
-} from "@/features/contracts/contract-status.config";
-
-const TAB_ICONS: Record<ContractStatusTabKey, React.ReactNode> = {
-  all: <LayoutGrid size={17} strokeWidth={1.85} />,
-  intake: <Inbox size={17} strokeWidth={1.85} />,
-  in_approval: <ClipboardCheck size={17} strokeWidth={1.85} />,
-  approved_contract: <FileSignature size={17} strokeWidth={1.85} />,
-  clearance: <ShieldCheck size={17} strokeWidth={1.85} />,
-  active: <Truck size={17} strokeWidth={1.85} />,
-  closed: <XCircle size={17} strokeWidth={1.85} />,
-};
-
-interface ContractStatusTabsProps {
-  active: ContractStatusTabKey;
-  onChange: (tab: ContractStatusTabKey) => void;
-  counts?: Partial<Record<ContractStatusTabKey, number>>;
-}
-
-export function ContractStatusTabs({
-  active,
-  onChange,
-  counts,
-}: ContractStatusTabsProps) {
-  return (
-    <Tabs
-      value={active}
-      onChange={(value) => onChange((value as ContractStatusTabKey) ?? "all")}
-      variant="pills"
-      color="edr-green"
-      keepMounted={false}
-      classNames={{ list: "ov-tablist", tab: "ov-tab" }}
-    >
-      <ScrollArea type="auto" scrollbarSize={6} offsetScrollbars="x">
-        <Tabs.List style={{ flexWrap: "nowrap", width: "max-content" }}>
-          {CONTRACT_LIST_TABS.map((tab) => {
-            const isActive = active === tab.key;
-            const count = counts?.[tab.key];
-            return (
-              <Tabs.Tab
-                key={tab.key}
-                value={tab.key}
-                leftSection={TAB_ICONS[tab.key]}
-                size={"sm"}
-                rightSection={
-                  count !== undefined ? (
-                    <Badge
-                      size="sm"
-                      radius="sm"
-                      variant={isActive ? "white" : "light"}
-                      color={isActive ? "edr-green" : "gray"}
-                      styles={
-                        isActive
-                          ? {
-                              root: {
-                                background: "rgba(255,255,255,0.9)",
-                                color: "#15805f",
-                              },
-                            }
-                          : undefined
-                      }
-                    >
-                      {count}
-                    </Badge>
-                  ) : undefined
-                }
-              >
-                {tab.label}
-              </Tabs.Tab>
-            );
-          })}
-        </Tabs.List>
-      </ScrollArea>
-    </Tabs>
-  );
-}
-
-export type { ContractStatusTabKey };