holy fkn airball

components/analytics/OrderAnalyticsChart.tsx

@@ -3,27 +3,11 @@
 import { useState, useEffect } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { clientFetch } from "@/lib/api";
 import { useToast } from "@/hooks/use-toast";
 import { Skeleton } from "@/components/ui/skeleton";
 import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle } from "lucide-react";
-
-interface OrderAnalytics {
-  statusDistribution: Array<{
-    _id: string;
-    count: number;
-  }>;
-  dailyOrders: Array<{
-    _id: {
-      year: number;
-      month: number;
-      day: number;
-    };
-    orders: number;
-    revenue: number;
-  }>;
-  averageProcessingDays: number;
-}
+import { getOrderAnalyticsWithStore, type OrderAnalytics } from "@/lib/services/analytics-service";
+import { formatGBP } from "@/utils/format";
 
 interface OrderAnalyticsChartProps {
   timeRange: string;
@@ -40,7 +24,7 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
       try {
         setIsLoading(true);
         setError(null);
-        const response = await clientFetch<OrderAnalytics>(`/analytics/order-analytics?period=${timeRange}`);
+        const response = await getOrderAnalyticsWithStore(timeRange);
         setData(response);
       } catch (err) {
         console.error('Error fetching order analytics:', err);
@@ -235,7 +219,7 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
                 </div>
                 <div className="text-center">
                   <div className="text-2xl font-bold text-purple-600">
-                    ${totalRevenue.toFixed(2)}
+                    {formatGBP(totalRevenue)}
                   </div>
                   <div className="text-sm text-muted-foreground">Total Revenue</div>
                 </div>
@@ -247,7 +231,7 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
                   const maxOrders = Math.max(...data.dailyOrders.map(d => d.orders));
                   const height = maxOrders > 0 ? (item.orders / maxOrders) * 100 : 0;
                   const date = new Date(item._id.year, item._id.month - 1, item._id.day);
-                  const dateLabel = date.toLocaleDateString('en-US', { 
+                  const dateLabel = date.toLocaleDateString('en-GB', { 
                     month: 'short', 
                     day: 'numeric' 
                   });
@@ -257,7 +241,7 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
                       <div 
                         className="w-full bg-primary/20 hover:bg-primary/30 transition-colors rounded-t"
                         style={{ height: `${height}%` }}
-                        title={`${dateLabel}: ${item.orders} orders, $${item.revenue.toFixed(2)} revenue`}
+                        title={`${dateLabel}: ${item.orders} orders, ${formatGBP(item.revenue)} revenue`}
                       />
                       <div className="text-xs text-muted-foreground mt-1 rotate-45 origin-left">
                         {dateLabel}