From 8862aecc61887f632796468be8a32e289ff322bb Mon Sep 17 00:00:00 2001
From: g <g@paki.email>
Date: Tue, 6 Jan 2026 17:59:30 +0000
Subject: [PATCH] Update AdminAnalytics.tsx

---
 components/admin/AdminAnalytics.tsx | 374 ++++++++++------------------
 1 file changed, 129 insertions(+), 245 deletions(-)

diff --git a/components/admin/AdminAnalytics.tsx b/components/admin/AdminAnalytics.tsx
index cf0bc1d..2e2e0a0 100644
--- a/components/admin/AdminAnalytics.tsx
+++ b/components/admin/AdminAnalytics.tsx
@@ -44,7 +44,7 @@ import {
   ComposedChart,
 } from "recharts";
 import { formatGBP } from "@/utils/format";
-import { PieChart, Pie, Cell, Legend, AreaChart, Area } from "recharts";
+import { PieChart, Pie, Cell, Legend } from "recharts";
 
 interface GrowthData {
   launchDate: string;
@@ -88,24 +88,7 @@ interface GrowthData {
       vip: number;
     };
   };
-  profit: {
-    monthly: Array<{
-      month: string;
-      revenue: number;
-      trackedRevenue: number;
-      cost: number;
-      profit: number;
-      profitMargin: number;
-      costDataCoverage: number;
-    }>;
-    totals: {
-      revenue: number;
-      trackedRevenue: number;
-      cost: number;
-      profit: number;
-      profitMargin: number;
-    };
-  };
+
   cumulative: {
     orders: number;
     revenue: number;
@@ -1370,236 +1353,137 @@ export default function AdminAnalytics() {
             </CardContent>
           </Card>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            {/* Customer Segments Pie Chart */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Customer Segments</CardTitle>
-                <CardDescription>
-                  Breakdown by purchase behavior
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                {growthLoading ? (
-                  <div className="flex items-center justify-center h-64">
-                    <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
-                  </div>
-                ) : growthData?.customers ? (
-                  <div className="h-64">
-                    <ResponsiveContainer width="100%" height="100%">
-                      <PieChart>
-                        <Pie
-                          data={[
-                            {
-                              name: "New (1 order)",
-                              value: growthData.customers.segments.new,
-                              color: SEGMENT_COLORS.new,
-                            },
-                            {
-                              name: "Returning (2+)",
-                              value: growthData.customers.segments.returning,
-                              color: SEGMENT_COLORS.returning,
-                            },
-                            {
-                              name: "Loyal (£300+/4+)",
-                              value: growthData.customers.segments.loyal,
-                              color: SEGMENT_COLORS.loyal,
-                            },
-                            {
-                              name: "VIP (£1k+/10+)",
-                              value: growthData.customers.segments.vip,
-                              color: SEGMENT_COLORS.vip,
-                            },
-                          ]}
-                          cx="50%"
-                          cy="50%"
-                          innerRadius={50}
-                          outerRadius={80}
-                          paddingAngle={2}
-                          dataKey="value"
-                          label={({ name, percent }) =>
-                            `${name}: ${(percent * 100).toFixed(0)}%`
-                          }
-                          labelLine={false}
-                        >
-                          {[
-                            { color: SEGMENT_COLORS.new },
-                            { color: SEGMENT_COLORS.returning },
-                            { color: SEGMENT_COLORS.loyal },
-                            { color: SEGMENT_COLORS.vip },
-                          ].map((entry, index) => (
-                            <Cell key={`cell-${index}`} fill={entry.color} />
-                          ))}
-                        </Pie>
-                        <Tooltip
-                          content={({ active, payload }) => {
-                            if (active && payload?.length) {
-                              const data = payload[0].payload;
-                              const details =
-                                growthData.customers.segmentDetails[
-                                  data.name.split(" ")[0].toLowerCase()
-                                ];
-                              return (
-                                <div className="bg-background border border-border p-3 rounded-lg shadow-lg">
-                                  <p className="font-medium">{data.name}</p>
-                                  <p className="text-sm">
-                                    Count: {data.value.toLocaleString()}
-                                  </p>
-                                  {details && (
-                                    <>
-                                      <p className="text-sm text-green-600">
-                                        Revenue:{" "}
-                                        {formatCurrency(details.totalRevenue)}
-                                      </p>
-                                      <p className="text-sm">
-                                        Avg Orders: {details.avgOrderCount}
-                                      </p>
-                                    </>
-                                  )}
-                                </div>
-                              );
-                            }
-                            return null;
-                          }}
-                        />
-                      </PieChart>
-                    </ResponsiveContainer>
-                  </div>
-                ) : (
-                  <div className="flex items-center justify-center h-64 text-muted-foreground">
-                    No customer data available
-                  </div>
-                )}
-
-                {/* Segment Stats */}
-                {growthData?.customers && (
-                  <div className="grid grid-cols-2 gap-2 mt-4">
-                    <div className="p-2 rounded bg-blue-500/10 text-center">
-                      <div className="text-lg font-bold text-blue-600">
-                        {growthData.customers.segments.new}
-                      </div>
-                      <div className="text-xs text-muted-foreground">New</div>
-                    </div>
-                    <div className="p-2 rounded bg-green-500/10 text-center">
-                      <div className="text-lg font-bold text-green-600">
-                        {growthData.customers.segments.returning}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        Returning
-                      </div>
-                    </div>
-                    <div className="p-2 rounded bg-amber-500/10 text-center">
-                      <div className="text-lg font-bold text-amber-600">
-                        {growthData.customers.segments.loyal}
-                      </div>
-                      <div className="text-xs text-muted-foreground">Loyal</div>
-                    </div>
-                    <div className="p-2 rounded bg-purple-500/10 text-center">
-                      <div className="text-lg font-bold text-purple-600">
-                        {growthData.customers.segments.vip}
-                      </div>
-                      <div className="text-xs text-muted-foreground">VIP</div>
-                    </div>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-
-            {/* Monthly Profit Chart */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Monthly Profit Trends</CardTitle>
-                <CardDescription>
-                  Profit margins over time
-                  {growthData?.profit?.totals && (
-                    <span className="ml-2 text-green-600 font-medium">
-                      (Total: {formatCurrency(growthData.profit.totals.profit)}{" "}
-                      at {growthData.profit.totals.profitMargin}% margin)
-                    </span>
-                  )}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                {growthLoading ? (
-                  <div className="flex items-center justify-center h-64">
-                    <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
-                  </div>
-                ) : growthData?.profit?.monthly &&
-                  growthData.profit.monthly.length > 0 ? (
-                  <div className="h-64">
-                    <ResponsiveContainer width="100%" height="100%">
-                      <AreaChart
-                        data={growthData.profit.monthly.map((m) => ({
-                          ...m,
-                          formattedMonth: new Date(
-                            m.month + "-01",
-                          ).toLocaleDateString("en-GB", {
-                            month: "short",
-                            year: "2-digit",
-                          }),
-                        }))}
-                        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+          {/* Customer Segments Pie Chart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Customer Segments</CardTitle>
+              <CardDescription>Breakdown by purchase behavior</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {growthLoading ? (
+                <div className="flex items-center justify-center h-64">
+                  <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
+                </div>
+              ) : growthData?.customers ? (
+                <div className="h-64">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={[
+                          {
+                            name: "New (1 order)",
+                            value: growthData.customers.segments.new,
+                            color: SEGMENT_COLORS.new,
+                          },
+                          {
+                            name: "Returning (2+)",
+                            value: growthData.customers.segments.returning,
+                            color: SEGMENT_COLORS.returning,
+                          },
+                          {
+                            name: "Loyal (£300+/4+)",
+                            value: growthData.customers.segments.loyal,
+                            color: SEGMENT_COLORS.loyal,
+                          },
+                          {
+                            name: "VIP (£1k+/10+)",
+                            value: growthData.customers.segments.vip,
+                            color: SEGMENT_COLORS.vip,
+                          },
+                        ]}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={50}
+                        outerRadius={80}
+                        paddingAngle={2}
+                        dataKey="value"
+                        label={({ name, percent }) =>
+                          `${name}: ${(percent * 100).toFixed(0)}%`
+                        }
+                        labelLine={false}
                       >
-                        <CartesianGrid strokeDasharray="3 3" />
-                        <XAxis
-                          dataKey="formattedMonth"
-                          tick={{ fontSize: 12 }}
-                        />
-                        <YAxis
-                          tick={{ fontSize: 12 }}
-                          tickFormatter={(value) =>
-                            `£${(value / 1000).toFixed(0)}k`
+                        {[
+                          { color: SEGMENT_COLORS.new },
+                          { color: SEGMENT_COLORS.returning },
+                          { color: SEGMENT_COLORS.loyal },
+                          { color: SEGMENT_COLORS.vip },
+                        ].map((entry, index) => (
+                          <Cell key={`cell-${index}`} fill={entry.color} />
+                        ))}
+                      </Pie>
+                      <Tooltip
+                        content={({ active, payload }) => {
+                          if (active && payload?.length) {
+                            const data = payload[0].payload;
+                            const details =
+                              growthData.customers.segmentDetails[
+                                data.name.split(" ")[0].toLowerCase()
+                              ];
+                            return (
+                              <div className="bg-background border border-border p-3 rounded-lg shadow-lg">
+                                <p className="font-medium">{data.name}</p>
+                                <p className="text-sm">
+                                  Count: {data.value.toLocaleString()}
+                                </p>
+                                {details && (
+                                  <>
+                                    <p className="text-sm text-green-600">
+                                      Revenue:{" "}
+                                      {formatCurrency(details.totalRevenue)}
+                                    </p>
+                                    <p className="text-sm">
+                                      Avg Orders: {details.avgOrderCount}
+                                    </p>
+                                  </>
+                                )}
+                              </div>
+                            );
                           }
-                        />
-                        <Tooltip
-                          content={({ active, payload }) => {
-                            if (active && payload?.length) {
-                              const data = payload[0].payload;
-                              return (
-                                <div className="bg-background border border-border p-3 rounded-lg shadow-lg">
-                                  <p className="font-medium mb-2">
-                                    {data.month}
-                                  </p>
-                                  <p className="text-sm text-blue-600">
-                                    Revenue: {formatCurrency(data.revenue)}
-                                  </p>
-                                  <p className="text-sm text-red-600">
-                                    Cost: {formatCurrency(data.cost)}
-                                  </p>
-                                  <p className="text-sm text-green-600 font-medium">
-                                    Profit: {formatCurrency(data.profit)}
-                                  </p>
-                                  <p className="text-sm text-purple-600">
-                                    Margin: {data.profitMargin}%
-                                  </p>
-                                  <p className="text-xs text-muted-foreground mt-1">
-                                    Cost data coverage: {data.costDataCoverage}%
-                                  </p>
-                                </div>
-                              );
-                            }
-                            return null;
-                          }}
-                        />
-                        <Area
-                          type="monotone"
-                          dataKey="profit"
-                          stroke="#10b981"
-                          fill="#10b981"
-                          fillOpacity={0.3}
-                          strokeWidth={2}
-                        />
-                      </AreaChart>
-                    </ResponsiveContainer>
+                          return null;
+                        }}
+                      />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              ) : (
+                <div className="flex items-center justify-center h-64 text-muted-foreground">
+                  No customer data available
+                </div>
+              )}
+
+              {/* Segment Stats */}
+              {growthData?.customers && (
+                <div className="grid grid-cols-2 gap-2 mt-4">
+                  <div className="p-2 rounded bg-blue-500/10 text-center">
+                    <div className="text-lg font-bold text-blue-600">
+                      {growthData.customers.segments.new}
+                    </div>
+                    <div className="text-xs text-muted-foreground">New</div>
                   </div>
-                ) : (
-                  <div className="flex items-center justify-center h-64 text-muted-foreground">
-                    No profit data available (add costPerUnit to products)
+                  <div className="p-2 rounded bg-green-500/10 text-center">
+                    <div className="text-lg font-bold text-green-600">
+                      {growthData.customers.segments.returning}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      Returning
+                    </div>
                   </div>
-                )}
-              </CardContent>
-            </Card>
-          </div>
+                  <div className="p-2 rounded bg-amber-500/10 text-center">
+                    <div className="text-lg font-bold text-amber-600">
+                      {growthData.customers.segments.loyal}
+                    </div>
+                    <div className="text-xs text-muted-foreground">Loyal</div>
+                  </div>
+                  <div className="p-2 rounded bg-purple-500/10 text-center">
+                    <div className="text-lg font-bold text-purple-600">
+                      {growthData.customers.segments.vip}
+                    </div>
+                    <div className="text-xs text-muted-foreground">VIP</div>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
 
           {/* Monthly Growth Table */}
           {growthData?.monthly && growthData.monthly.length > 0 && (