feat: Add ShipmentHeader component and ShipmentDetail page

frontend/src/App.tsx

@@ -1,12 +1,31 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Home from './pages/Home/Home';
+import Signup from './pages/auth/Signup/Signup';
+import Login from './pages/auth/Login/Login';
+import ForgotPassword from './pages/auth/ForgotPassword/ForgotPassword';
+import CompanyDashboard from './pages/dashboard/Company/CompanyDashboard';
+import Shipments from './pages/Shipments/Shipments';
+import ShipmentDetail from './pages/Shipment/ShipmentDetail';
+import BlockchainLedger from './pages/BlockchainLedger/BlockchainLedger';
+import Settlements from './pages/Settlements/Settlements';
+import Analytics from './pages/Analytics/Analytics';
+import Settings from './pages/Settings/Settings';
+import UserManagement from './pages/dashboard/Company/UserManagement/UserManagement';
+import CompanySettings from './pages/dashboard/Company/Settings/CompanySettings';
+import HelpCenter from './pages/HelpCenter/HelpCenter';
+import CreateShipment from './pages/dashboard/Company/CreateShipment/CreateShipment';
+import DashboardLayout from './components/layout/DashboardLayout';
+import ProtectedRoute from './components/auth/ProtectedRoute/ProtectedRoute';
+import './App.css';
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./pages/Home/Home";
 import Signup from "./pages/auth/Signup/Signup";
 import Login from "./pages/auth/Login/Login";
 import ForgotPassword from "./pages/auth/ForgotPassword/ForgotPassword";
 import CompanyDashboard from "./pages/dashboard/Company/CompanyDashboard";
 import Shipments from "./pages/Shipments/Shipments";
 import BlockchainLedger from "./pages/BlockchainLedger/BlockchainLedger";
 import Settlements from "./pages/Settlements/Settlements";
 import Analytics from "./pages/Analytics/Analytics";
 import UserManagement from "./pages/dashboard/Company/UserManagement/UserManagement";
 import CompanySettings from "./pages/dashboard/Company/Settings/CompanySettings";
@@ -59,6 +78,11 @@
             element: <Shipments />,
           },
           {
+            path: '/dashboard/shipments/:id',
+            element: <ShipmentDetail />,
+          },
+          {
+            path: '/dashboard/shipments/create',
             path: "/dashboard/shipments/:id",
             element: <ShipmentDetail />,
           },

frontend/src/components/ui/StatusBadge/StatusBadge.css

@@ -0,0 +1,29 @@
+.status-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.status-in-transit {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #60a5fa;
+}
+
+.status-delivered {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #34d399;
+}
+
+.status-pending {
+  background-color: rgba(245, 158, 11, 0.1);
+  color: #fbbf24;
+}
+
+.status-cancelled {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #f87171;
+}

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

@@ -0,0 +1,50 @@
+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;
+  className?: string;
+}
+
+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';
+    }
+  };
+
+  return (
+    <span 
+      className={`status-badge ${getStatusClassName(status)} ${className}`}
+      aria-label={`Shipment status: ${status}`}
+    >
+      {status}
+    </span>
+  );
+};
+
+export default StatusBadge;

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

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

frontend/src/pages/Shipment/ShipmentDetail.tsx

@@ -1,4 +1,62 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
+import ShipmentHeader from './sections/ShipmentHeader/ShipmentHeader';
+import { ShipmentStatus } from '../../components/ui/StatusBadge';
+
+// Mock data for demonstration
+const MOCK_SHIPMENT_DATA = {
+  id: 'SHP-2024-001234',
+  status: 'In Transit' as ShipmentStatus,
+  sender: {
+    name: 'Acme Corporation',
+    address: '123 Business Ave, New York, NY 10001',
+  },
+  receiver: {
+    name: 'Global Logistics Ltd',
+    address: '456 Commerce St, Los Angeles, CA 90210',
+  },
+  createdAt: '2024-04-15T10:30:00Z',
+  expectedDelivery: '2024-04-22T16:00:00Z',
+};
+
+const ShipmentDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+
+  // In a real app, you would fetch shipment data based on the ID
+  const shipmentData = MOCK_SHIPMENT_DATA;
+
+  const handleTrack = () => {
+    console.log('Tracking shipment:', id);
+    // Implement tracking functionality
+  };
+
+  const handleDownloadProof = () => {
+    console.log('Downloading proof for shipment:', id);
+    // Implement download proof functionality
+  };
+
+  const handleShare = () => {
+    console.log('Sharing shipment:', id);
+    // Implement share functionality
+  };
+
+  return (
+    <div className="shipment-detail-page">
+      <ShipmentHeader
+        shipmentId={shipmentData.id}
+        status={shipmentData.status}
+        sender={shipmentData.sender}
+        receiver={shipmentData.receiver}
+        createdAt={shipmentData.createdAt}
+        expectedDelivery={shipmentData.expectedDelivery}
+        onTrack={handleTrack}
+        onDownloadProof={handleDownloadProof}
+        onShare={handleShare}
+      />
+
+      {/* Additional shipment detail sections would go here */}
+      <div style={{ padding: '24px', textAlign: 'center', color: 'var(--text-secondary)' }}>
+        Additional shipment details and tracking information will be displayed here.
 import MilestoneTimeline from './sections/MilestoneTimeline/MilestoneTimeline';
 import { Milestone } from './sections/MilestoneTimeline/types';
 
@@ -78,6 +136,7 @@ const ShipmentDetail: React.FC = () => {
   );
 };
 
+export default ShipmentDetail;
 // Simple Package icon for the background decoration
 const Package = ({ className }: { className?: string }) => (
   <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">