[Frontend] Build StatusBadge Component

[mftee]

Description:
Create a StatusBadge component that renders a color-coded pill showing the shipment's current status. Each status has a distinct color that works in both light and dark mode.

Create frontend/components/shipment/status-badge.tsx.

Acceptance Criteria:

• 'use client' directive
• Accepts status: ShipmentStatus and optional className props
• Color mapping (must work in dark mode too):
  • pending → yellow
  • accepted → blue
  • in_transit → indigo
  • delivered → teal
  • completed → green
  • cancelled → gray
  • disputed → red
• Human-readable labels: in_transit → "In Transit", etc.
• Pill shape: rounded-full px-2.5 py-0.5 text-xs font-medium
• Uses cn() for class merging
• Gracefully handles unknown status values