holy fkn airball

components/analytics/AnalyticsDashboard.tsx

@@ -17,34 +17,14 @@ import {
   Activity,
   RefreshCw
 } from "lucide-react";
-import { clientFetch } from "@/lib/api";
 import { useToast } from "@/hooks/use-toast";
 import RevenueChart from "./RevenueChart";
 import ProductPerformanceChart from "./ProductPerformanceChart";
 import CustomerInsightsChart from "./CustomerInsightsChart";
 import OrderAnalyticsChart from "./OrderAnalyticsChart";
 import MetricsCard from "./MetricsCard";
-
-interface AnalyticsOverview {
-  orders: {
-    total: number;
-    completed: number;
-    pending: number;
-    completionRate: string;
-  };
-  revenue: {
-    total: number;
-    monthly: number;
-    weekly: number;
-    averageOrderValue: number;
-  };
-  products: {
-    total: number;
-  };
-  customers: {
-    unique: number;
-  };
-}
+import { getAnalyticsOverviewWithStore, type AnalyticsOverview } from "@/lib/services/analytics-service";
+import { formatGBP } from "@/utils/format";
 
 interface AnalyticsDashboardProps {
   initialData: AnalyticsOverview;
@@ -59,7 +39,7 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
   const refreshData = async () => {
     try {
       setIsLoading(true);
-      const newData = await clientFetch<AnalyticsOverview>("/analytics/overview");
+      const newData = await getAnalyticsOverviewWithStore();
       setData(newData);
       toast({
         title: "Data refreshed",
@@ -79,18 +59,18 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
   const metrics = [
     {
       title: "Total Revenue",
-      value: `$${data.revenue.total.toLocaleString()}`,
+      value: formatGBP(data.revenue.total),
       description: "All-time revenue",
       icon: DollarSign,
-      trend: data.revenue.monthly > 0 ? "up" : "neutral",
-      trendValue: `$${data.revenue.monthly.toLocaleString()} this month`
+      trend: data.revenue.monthly > 0 ? "up" as const : "neutral" as const,
+      trendValue: `${formatGBP(data.revenue.monthly)} this month`
     },
     {
       title: "Total Orders",
       value: data.orders.total.toLocaleString(),
       description: "All-time orders",
       icon: ShoppingCart,
-      trend: data.orders.completed > 0 ? "up" : "neutral",
+      trend: data.orders.completed > 0 ? "up" as const : "neutral" as const,
       trendValue: `${data.orders.completed} completed`
     },
     {
@@ -98,7 +78,7 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
       value: data.customers.unique.toLocaleString(),
       description: "Total customers",
       icon: Users,
-      trend: "neutral",
+      trend: "neutral" as const,
       trendValue: "Lifetime customers"
     },
     {
@@ -106,32 +86,13 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
       value: data.products.total.toLocaleString(),
       description: "Active products",
       icon: Package,
-      trend: "neutral",
+      trend: "neutral" as const,
       trendValue: "In your store"
     }
   ];
 
   return (
     <div className="space-y-6">
-      {/* Header with refresh button */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-semibold">Performance Overview</h2>
-          <p className="text-muted-foreground">
-            Key metrics and insights about your store performance
-          </p>
-        </div>
-        <Button 
-          onClick={refreshData} 
-          disabled={isLoading}
-          variant="outline"
-          className="flex items-center gap-2"
-        >
-          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
-          Refresh Data
-        </Button>
-      </div>
-
       {/* Key Metrics Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {metrics.map((metric) => (