edr-platform/apps/edr-freight-web/backoffice/src/components/warehouses/badges.tsx

import { Badge } from "@mantine/core";

import type {
  InventoryStatus,
  WarehouseStatus,
  WarehouseType,
} from "@/types/warehouse";

const humanize = (value: string) =>
  value
    .toLowerCase()
    .split("_")
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ");

const badgeStyle = {
  fontSize: "0.7rem",
  letterSpacing: "0.04em",
  whiteSpace: "nowrap" as const,
};

export function WarehouseTypeBadge({ type }: { type: WarehouseType }) {
  const color = type === "CLOSED_WAREHOUSE" ? "indigo" : "teal";
  return (
    <Badge
      color={color}
      variant="light"
      size="sm"
      radius="md"
      fw={600}
      style={badgeStyle}
    >
      {humanize(type)}
    </Badge>
  );
}

export function WarehouseStatusBadge({ status }: { status: WarehouseStatus }) {
  const color = status === "ACTIVE" ? "edr-green" : "gray";
  return (
    <Badge
      color={color}
      variant="light"
      size="sm"
      radius="md"
      tt="uppercase"
      fw={600}
      style={badgeStyle}
    >
      {status}
    </Badge>
  );
}

const inventoryStatusColor: Record<InventoryStatus, string> = {
  UNLOADED: "indigo",
  RECEIVED: "yellow",
  STORED: "blue",
  RESERVED: "grape",
  ARRIVED_AT_WAREHOUSE: "orange",
  UNDER_INSPECTION: "yellow",
  READY_FOR_LOADING: "cyan",
  LOADED: "teal",
  READY_FOR_PICKUP: "teal",
  DISPATCHED: "edr-green",
  DELIVERED: "edr-green",
};

export function InventoryStatusBadge({ status }: { status: InventoryStatus }) {
  const color = inventoryStatusColor[status] ?? "gray";
  return (
    <Badge
      color={color}
      variant="light"
      size="sm"
      radius="md"
      fw={600}
      style={badgeStyle}
    >
      {humanize(status)}
    </Badge>
  );
}