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',
  READY_FOR_LOADING: 'cyan',
  LOADED: '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>
  );
}