chore: align ShipmentStatus with backend; add shared mapping and tests

frontend/src/components/common/StatusBadge/StatusBadge.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import StatusBadge from './StatusBadge';
+
+describe('StatusBadge component', () => {
+    it('renders display label and applies badge classes for IN_TRANSIT', () => {
+        render(<StatusBadge status={'IN_TRANSIT'} />);
+        expect(screen.getByText('In Transit')).toBeInTheDocument();
+        // class should include the blue token
+        expect(screen.getByText('In Transit').className).toContain('#3b82f6');
+    });
+});

frontend/src/components/common/StatusBadge/StatusBadge.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
-import { getStatusVariant } from './statusBadgeVariants';
+import { getStatusDisplayLabel, getStatusBadgeClass } from '../../../utils/shipmentStatus';
 
 export interface StatusBadgeProps {
   status: string;
   className?: string;
 }
 
 const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className = '' }) => {
-  const { bg, text } = getStatusVariant(status);
+  const label = getStatusDisplayLabel(status);
+  const classes = getStatusBadgeClass(status);
 
   return (
     <span
-      className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide ${bg} ${text} ${className}`}
+      className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide ${classes} ${className}`}
     >
-      {status}
+      {label}
     </span>
   );
 };

frontend/src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { CheckCircle2 } from 'lucide-react';
+import { getStatusDisplayLabel } from '../../../utils/shipmentStatus';
 
 export interface DeliveryConfirmationProps {
   shipmentId: string;
@@ -73,7 +74,7 @@ const DeliveryConfirmation: React.FC<DeliveryConfirmationProps> = ({
 
   const displayRating = hovered || rating;
 
-  if (status !== 'delivered') return null;
+  if (getStatusDisplayLabel(status).toLowerCase() !== 'delivered') return null;
 
   return (
     <div

frontend/src/components/ui/StatusBadge/StatusBadge.tsx

@@ -1,48 +1,25 @@
 import React from 'react';
-import './StatusBadge.css';
-
-export type ShipmentStatus = 
-  | 'In Transit'
-  | 'Delivered'
-  | 'Pending Approval'
-  | 'Cancelled'
-  | 'Picked Up'
-  | 'At Checkpoint'
-  | 'Out for Delivery';
-
 export interface StatusBadgeProps {
-  status: ShipmentStatus;
+  status: string;
   className?: string;
 }
 
-export const StatusBadge: React.FC<StatusBadgeProps> = ({ 
-  status, 
-  className = '' 
+import { getStatusDisplayLabel, getStatusBadgeClass } from '../../../utils/shipmentStatus';
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({
+  status,
+  className = ''
 }) => {
-  const getStatusClassName = (status: ShipmentStatus): string => {
-    switch (status) {
-      case 'In Transit':
-      case 'Picked Up':
-      case 'At Checkpoint':
-      case 'Out for Delivery':
-        return 'status-in-transit';
-      case 'Delivered':
-        return 'status-delivered';
-      case 'Pending Approval':
-        return 'status-pending';
-      case 'Cancelled':
-        return 'status-cancelled';
-      default:
-        return 'status-in-transit';
-    }
-  };
+  // Use shared mapping for display and classes
+  const label = getStatusDisplayLabel(status);
+  const classes = getStatusBadgeClass(status);
 
   return (
-    <span 
-      className={`status-badge ${getStatusClassName(status)} ${className}`}
-      aria-label={`Shipment status: ${status}`}
+    <span
+      className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide ${classes} ${className}`}
+      aria-label={`Shipment status: ${label}`}
     >
-      {status}
+      {label}
     </span>
   );
 };

frontend/src/components/ui/StatusBadge/index.ts

@@ -1,2 +1,2 @@
-export { StatusBadge, type StatusBadgeProps, type ShipmentStatus } from './StatusBadge';
+export { StatusBadge, type StatusBadgeProps } from './StatusBadge';
 export { default } from './StatusBadge';