uwu

components/analytics/CustomerInsightsChart.tsx

@@ -225,7 +225,7 @@ export default function CustomerInsightsChart() {
                       {index + 1}
                     </div>
                     <div>
-                      <div className="font-medium">Customer #{customer._id.slice(-6)}</div>
+                      <div className="font-medium">{customer.displayName || `Customer #${customer._id.slice(-6)}`}</div>
                       <div className="text-sm text-muted-foreground">
                         {customer.orderCount} orders
                       </div>

components/analytics/RevenueChart.tsx

@@ -7,11 +7,19 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { TrendingUp, DollarSign } from "lucide-react";
 import { getRevenueTrendsWithStore, type RevenueData } from "@/lib/services/analytics-service";
 import { formatGBP } from "@/utils/format";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts';
 
 interface RevenueChartProps {
   timeRange: string;
 }
 
+interface ChartDataPoint {
+  date: string;
+  revenue: number;
+  orders: number;
+  formattedDate: string;
+}
+
 export default function RevenueChart({ timeRange }: RevenueChartProps) {
   const [data, setData] = useState<RevenueData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -24,10 +32,12 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
         setIsLoading(true);
         setError(null);
         const response = await getRevenueTrendsWithStore(timeRange);
-        setData(response);
+        console.log('Revenue trends response:', response);
+        setData(Array.isArray(response) ? response : []);
       } catch (err) {
         console.error('Error fetching revenue data:', err);
         setError('Failed to load revenue data');
+        setData([]);
         toast({
           title: "Error",
           description: "Failed to load revenue trends data.",
@@ -41,16 +51,43 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
     fetchRevenueData();
   }, [timeRange, toast]);
 
-  const totalRevenue = data.reduce((sum, item) => sum + item.revenue, 0);
-  const totalOrders = data.reduce((sum, item) => sum + item.orders, 0);
-  const averageRevenue = data.length > 0 ? totalRevenue / data.length : 0;
-
-  const formatDate = (item: RevenueData) => {
+  // Transform data for Recharts
+  const chartData: ChartDataPoint[] = data.map(item => {
     const date = new Date(item._id.year, item._id.month - 1, item._id.day);
-    return date.toLocaleDateString('en-GB', { 
-      month: 'short', 
-      day: 'numeric' 
-    });
+    return {
+      date: date.toISOString().split('T')[0], // YYYY-MM-DD format
+      revenue: item.revenue || 0,
+      orders: item.orders || 0,
+      formattedDate: date.toLocaleDateString('en-GB', { 
+        month: 'short', 
+        day: 'numeric' 
+      })
+    };
+  });
+
+  // Calculate summary stats
+  const safeData = Array.isArray(data) ? data : [];
+  const totalRevenue = safeData.reduce((sum, item) => sum + (item.revenue || 0), 0);
+  const totalOrders = safeData.reduce((sum, item) => sum + (item.orders || 0), 0);
+  const averageRevenue = safeData.length > 0 ? totalRevenue / safeData.length : 0;
+
+  // Custom tooltip for the chart
+  const CustomTooltip = ({ active, payload, label }: any) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload;
+      return (
+        <div className="bg-white p-3 border border-gray-200 rounded-lg shadow-lg">
+          <p className="text-sm font-medium text-gray-900">{data.formattedDate}</p>
+          <p className="text-sm text-blue-600">
+            Revenue: <span className="font-semibold">{formatGBP(data.revenue)}</span>
+          </p>
+          <p className="text-sm text-green-600">
+            Orders: <span className="font-semibold">{data.orders}</span>
+          </p>
+        </div>
+      );
+    }
+    return null;
   };
 
   if (isLoading) {
@@ -98,7 +135,7 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
     );
   }
 
-  if (data.length === 0) {
+  if (chartData.length === 0) {
     return (
       <Card>
         <CardHeader>
@@ -132,26 +169,33 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        {/* Simple bar chart representation */}
-        <div className="space-y-4">
-          <div className="h-64 flex items-end justify-between gap-1">
-            {data.map((item, index) => {
-              const maxRevenue = Math.max(...data.map(d => d.revenue));
-              const height = maxRevenue > 0 ? (item.revenue / maxRevenue) * 100 : 0;
-              
-              return (
-                <div key={index} className="flex-1 flex flex-col items-center">
-                  <div 
-                    className="w-full bg-primary/20 hover:bg-primary/30 transition-colors rounded-t"
-                    style={{ height: `${height}%` }}
-                    title={`${formatDate(item)}: ${formatGBP(item.revenue)}`}
-                  />
-                  <div className="text-xs text-muted-foreground mt-1 rotate-45 origin-left">
-                    {formatDate(item)}
-                  </div>
-                </div>
-              );
-            })}
+        <div className="space-y-6">
+          {/* Chart */}
+          <div className="h-64">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis 
+                  dataKey="formattedDate" 
+                  tick={{ fontSize: 12 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                />
+                <YAxis 
+                  tick={{ fontSize: 12 }}
+                  tickFormatter={(value) => `£${(value / 1000).toFixed(0)}k`}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Bar 
+                  dataKey="revenue" 
+                  fill="#2563eb" 
+                  stroke="#1d4ed8"
+                  strokeWidth={1}
+                  radius={[2, 2, 0, 0]}
+                />
+              </BarChart>
+            </ResponsiveContainer>
           </div>
           
           {/* Summary stats */}

lib/services/analytics-service.ts

@@ -63,6 +63,8 @@ export interface CustomerInsights {
     averageOrderValue: number;
     firstOrder: string;
     lastOrder: string;
+    displayName?: string;
+    username?: string;
   }>;
   averageOrdersPerCustomer: string;
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "my-v0-project",
-  "version": "1.1.7",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "my-v0-project",
-      "version": "1.1.7",
+      "version": "2.0.0",
       "dependencies": {
         "@hookform/resolvers": "^3.9.1",
         "@radix-ui/react-accordion": "^1.2.2",
@@ -61,7 +61,7 @@
         "react-hook-form": "^7.54.1",
         "react-markdown": "^10.0.0",
         "react-resizable-panels": "^2.1.7",
-        "recharts": "2.15.0",
+        "recharts": "^2.15.0",
         "sonner": "^1.7.4",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",

package.json

@@ -69,7 +69,7 @@
     "react-hook-form": "^7.54.1",
     "react-markdown": "^10.0.0",
     "react-resizable-panels": "^2.1.7",
-    "recharts": "2.15.0",
+    "recharts": "^2.15.0",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",