пва

client/src/shared/ui/OrderStatusChip.tsx

@@ -0,0 +1,34 @@
+import type { ReactElement } from 'react'
+import Chip from '@mui/material/Chip'
+import Tooltip from '@mui/material/Tooltip'
+import { Banknote, CheckCircle, Package, PackageCheck, PackageSearch, Store, XCircle } from 'lucide-react'
+import { getOrderStatusData, type StatusIconName } from '@/shared/lib/order-status-data'
+
+const iconMap: Record<StatusIconName, ReactElement> = {
+  banknote: <Banknote size={18} />,
+  'check-circle': <CheckCircle size={18} />,
+  'package-search': <PackageSearch size={18} />,
+  package: <Package size={18} />,
+  'package-check': <PackageCheck size={18} />,
+  store: <Store size={18} />,
+  'x-circle': <XCircle size={18} />,
+}
+
+interface OrderStatusChipProps {
+  status: string
+  tooltipOverride?: string
+}
+
+export function OrderStatusChip({ status, tooltipOverride }: OrderStatusChipProps) {
+  const data = getOrderStatusData(status)
+  const label = data?.label ?? status
+  const color = data?.color ?? 'default'
+  const icon = data ? iconMap[data.iconName] : undefined
+  const tooltip = tooltipOverride ?? data?.description ?? ''
+
+  return (
+    <Tooltip title={tooltip} arrow placement="top">
+      <Chip icon={icon} label={label} color={color as 'default'} size="small" variant="outlined" />
+    </Tooltip>
+  )
+}