holy fkn airball

components/analytics/CustomerInsightsChart.tsx

@@ -3,29 +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 { Users, Crown, UserPlus, UserCheck, Star } from "lucide-react";
-
-interface CustomerInsights {
-  totalCustomers: number;
-  segments: {
-    new: number;
-    returning: number;
-    loyal: number;
-    vip: number;
-  };
-  topCustomers: Array<{
-    _id: string;
-    orderCount: number;
-    totalSpent: number;
-    averageOrderValue: number;
-    firstOrder: string;
-    lastOrder: string;
-  }>;
-  averageOrdersPerCustomer: string;
-}
+import { getCustomerInsightsWithStore, type CustomerInsights } from "@/lib/services/analytics-service";
+import { formatGBP } from "@/utils/format";
 
 export default function CustomerInsightsChart() {
   const [data, setData] = useState<CustomerInsights | null>(null);
@@ -38,7 +20,7 @@ export default function CustomerInsightsChart() {
       try {
         setIsLoading(true);
         setError(null);
-        const response = await clientFetch<CustomerInsights>('/analytics/customer-insights');
+        const response = await getCustomerInsightsWithStore();
         setData(response);
       } catch (err) {
         console.error('Error fetching customer insights:', err);
@@ -251,10 +233,10 @@ export default function CustomerInsightsChart() {
                   </div>
                   <div className="text-right">
                     <div className="font-bold text-green-600">
-                      ${customer.totalSpent.toFixed(2)}
+                      {formatGBP(customer.totalSpent)}
                     </div>
                     <div className="text-sm text-muted-foreground">
-                      ${customer.averageOrderValue.toFixed(2)} avg
+                      {formatGBP(customer.averageOrderValue)} avg
                     </div>
                   </div>
                 </div>