i need a shit

components/analytics/OrderAnalyticsChart.tsx

@@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Badge } from "@/components/ui/badge";
 import { useToast } from "@/hooks/use-toast";
 import { Skeleton } from "@/components/ui/skeleton";
-import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle } from "lucide-react";
+import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle, AlertTriangle } from "lucide-react";
 import { getOrderAnalyticsWithStore, type OrderAnalytics } from "@/lib/services/analytics-service";
 import { formatGBP } from "@/utils/format";
 import { ChartSkeleton } from './SkeletonLoaders';
@@ -58,6 +58,8 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
         return 'bg-red-100 text-red-800';
       case 'disputed':
         return 'bg-orange-100 text-orange-800';
+      case 'underpaid':
+        return 'bg-red-200 text-red-900';
       default:
         return 'bg-gray-100 text-gray-800';
     }
@@ -76,6 +78,8 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
         return <AlertCircle className="h-4 w-4" />;
       case 'cancelled':
         return <XCircle className="h-4 w-4" />;
+      case 'underpaid':
+        return <AlertTriangle className="h-4 w-4" />;
       default:
         return <BarChart3 className="h-4 w-4" />;
     }
@@ -99,6 +103,8 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
         return 'Cancelled';
       case 'disputed':
         return 'Disputed';
+      case 'underpaid':
+        return 'Underpaid';
       default:
         return status.charAt(0).toUpperCase() + status.slice(1);
     }