changes

apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx

@@ -1,30 +1,49 @@
 import type { ReactNode } from "react";
+import { Badge, Text } from "@mantine/core";
 
-import { cn } from "@/lib/utils";
 import type { ColumnFormat } from "@/pages/ruleEngine/config/resources";
-import { Badge } from "@edr/ui-common";
 
-const statusBadgeClass = (active: boolean) =>
-  cn(
-    "rounded-sm px-2 py-0.5 text-xs font-medium",
-    active
-      ? "border-emerald-200 bg-emerald-50 text-emerald-800"
-      : "border-border bg-muted text-muted-foreground",
+const extractLabel = (value: unknown): string | null => {
+  if (!value || typeof value !== "object") return null;
+
+  const obj = value as Record<string, unknown>;
+  return (
+    (typeof obj.label === "string" ? obj.label : null) ||
+    (typeof obj.cargoTypeName === "string" ? obj.cargoTypeName : null) ||
+    (typeof obj.code === "string" ? obj.code : null) ||
+    (typeof obj.name === "string" ? obj.name : null) ||
+    (typeof obj.actionLabel === "string" ? obj.actionLabel : null) ||
+    null
   );
+};
 
 export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode => {
   if (value === null || value === undefined || value === "") {
-    return <span className="text-muted-foreground">—</span>;
+    return <Text size="sm" c="dimmed">—</Text>;
+  }
+
+  // Handle stringified objects (e.g., "[object Object]")
+  if (typeof value === "string" && value.trim() === "[object Object]") {
+    return <Text size="sm" c="dimmed">—</Text>;
   }
 
   if (format === "boolean") {
-    return value ? "Yes" : "No";
+    if (typeof value === "string") {
+      const boolVal = value.toLowerCase() === "true" || value === "1";
+      return <Text size="sm">{boolVal ? "✓ Yes" : "✗ No"}</Text>;
+    }
+    return <Text size="sm">{value ? "✓ Yes" : "✗ No"}</Text>;
   }
 
   if (format === "activeBadge") {
     const active = Boolean(value);
     return (
-      <Badge variant="outline" className={statusBadgeClass(active)}>
+      <Badge
+        color={active ? "green" : "gray"}
+        variant={active ? "filled" : "light"}
+        size="sm"
+        radius="md"
+      >
         {active ? "Active" : "Inactive"}
       </Badge>
     );
@@ -32,14 +51,16 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
 
   if (format === "rateStatus") {
     const status = String(value);
-    const tone =
+    const color =
       status === "LIVE"
-        ? "border-emerald-200 bg-emerald-50 text-emerald-800"
+        ? "green"
         : status === "DRAFT"
-          ? "border-amber-200 bg-amber-50 text-amber-800"
-          : "border-sky-200 bg-sky-50 text-sky-800";
+          ? "yellow"
+          : status === "PENDING_APPROVAL"
+            ? "orange"
+            : "blue";
     return (
-      <Badge variant="outline" className={cn("rounded-sm font-medium", tone)}>
+      <Badge color={color} variant="filled" size="sm" radius="md">
         {status}
       </Badge>
     );
@@ -48,38 +69,44 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
   if (format === "code") {
     return (
       <Badge
-        variant="secondary"
-        className="rounded-sm border border-border bg-muted/80 font-mono text-[11px] font-medium text-foreground"
+        variant="light"
+        color="blue"
+        size="sm"
+        radius="md"
+        style={{
+          fontFamily: "monospace",
+          fontSize: "0.75rem",
+          fontWeight: 600,
+          letterSpacing: "0.05em",
+        }}
       >
-        {String(value)}
+        {String(value).toUpperCase()}
       </Badge>
     );
   }
 
   if (format === "date") {
     const d = new Date(String(value));
-    return Number.isNaN(d.getTime()) ? String(value) : d.toLocaleDateString();
+    if (Number.isNaN(d.getTime())) return <Text size="sm">{String(value)}</Text>;
+    return <Text size="sm">{d.toLocaleDateString()}</Text>;
   }
 
   if (format === "entityLabel" && value && typeof value === "object") {
-    const entity = value as { label?: string; code?: string; cargoTypeName?: string };
-    const label =
-      entity.label?.trim() ||
-      entity.cargoTypeName?.trim() ||
-      entity.code?.trim();
-    return label ? (
-      <span>{label}</span>
-    ) : (
-      <span className="text-muted-foreground">—</span>
-    );
+    const label = extractLabel(value);
+    if (label) {
+      return <Text size="sm">{label}</Text>;
+    }
+    return <Text size="sm" c="dimmed">—</Text>;
   }
 
   if (format === "rateLabel") {
     if (!value || typeof value !== "object") {
       return value ? (
-        <span className="font-mono text-xs text-muted-foreground">{String(value)}</span>
+        <Text size="sm" c="dimmed" style={{ fontFamily: "monospace" }}>
+          {String(value)}
+        </Text>
       ) : (
-        <span className="text-muted-foreground">—</span>
+        <Text size="sm" c="dimmed">—</Text>
       );
     }
     const rate = value as {
@@ -95,11 +122,17 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
       rate.rateUnit?.replace(/_/g, " "),
     ].filter(Boolean);
     return parts.length > 0 ? (
-      <span>{parts.join(" · ")}</span>
+      <Text size="sm">{parts.join(" · ")}</Text>
     ) : (
-      <span className="text-muted-foreground">—</span>
+      <Text size="sm" c="dimmed">—</Text>
     );
   }
 
-  return String(value);
+  if (typeof value === "object") {
+    const label = extractLabel(value);
+    if (label) return <Text size="sm">{label}</Text>;
+    return <Text size="sm" c="dimmed">—</Text>;
+  }
+
+  return <Text size="sm">{String(value)}</Text>;
 };