-
-
-
- Loading chart data...
-
+ {loading || refreshing ? (
+
+ ) : (
+
+
+
+ Vendor Growth
+
+ New vendor registrations over time
+
+
+ {analyticsData?.vendors?.dailyGrowth &&
+ analyticsData.vendors.dailyGrowth.length > 0 ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
- ) : analyticsData?.vendors?.dailyGrowth &&
- analyticsData.vendors.dailyGrowth.length > 0 ? (
-
-
-
-
-
-
- } />
-
-
-
-
- ) : (
-
- No vendor data available for the selected time period
-
- )}
-
-
-
-
Total Vendors
-
- {formatNumber(analyticsData?.vendors?.total)}
-
-
-
-
Active Vendors
-
- {formatNumber(analyticsData?.vendors?.active)}
-
-
-
-
Active Stores
-
- {formatNumber(analyticsData?.vendors?.activeStores)}
-
-
-
-
New This Week
-
- {formatNumber(analyticsData?.vendors?.newThisWeek)}
-
-
-
-
- {/* Top Vendors by Revenue */}
- {analyticsData?.vendors?.topVendors &&
- analyticsData.vendors.topVendors.length > 0 && (
-
-
- Top Vendors by Revenue
-
-
- {analyticsData.vendors.topVendors.map((vendor, index) => (
-
-
-
- {index + 1}
-
-
-
- {vendor.vendorName}
-
-
- {vendor.orderCount} orders
-
-
-
-
-
- {formatCurrency(vendor.totalRevenue)}
-
-
-
- ))}
-
+ ) : (
+
+ No vendor data available for the selected time period
)}
-
-
+
+
+
+
Total Vendors
+
+ {formatNumber(analyticsData?.vendors?.total)}
+
+
+
+
Active Vendors
+
+ {formatNumber(analyticsData?.vendors?.active)}
+
+
+
+
Active Stores
+
+ {formatNumber(analyticsData?.vendors?.activeStores)}
+
+
+
+
New This Week
+
+ {formatNumber(analyticsData?.vendors?.newThisWeek)}
+
+
+
+
+ {/* Top Vendors by Revenue */}
+ {analyticsData?.vendors?.topVendors &&
+ analyticsData.vendors.topVendors.length > 0 && (
+
+
+ Top Vendors by Revenue
+
+
+ {analyticsData.vendors.topVendors.map((vendor, index) => (
+
+
+
+ {index + 1}
+
+
+
+ {vendor.vendorName}
+
+
+ {vendor.orderCount} orders
+
+
+
+
+
+ {formatCurrency(vendor.totalRevenue)}
+
+
+
+ ))}
+
+
+ )}
+
+
+ )}
diff --git a/components/admin/AdminStatCard.tsx b/components/admin/AdminStatCard.tsx
new file mode 100644
index 0000000..0e0b555
--- /dev/null
+++ b/components/admin/AdminStatCard.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card";
+import { Skeleton } from "@/components/common/skeleton";
+import { Area, AreaChart, ResponsiveContainer, Tooltip, TooltipProps } from "recharts";
+import { TrendIndicator } from "./TrendIndicator";
+import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import { formatGBP } from "@/lib/utils/format";
+
+interface ChartDataPoint {
+ formattedDate: string;
+ value: number;
+ orders?: number;
+ revenue?: number;
+ [key: string]: any;
+}
+
+interface AdminStatCardProps {
+ title: string;
+ icon: LucideIcon;
+ iconColorClass: string;
+ iconBgClass: string;
+ value: string | number;
+ subtext?: React.ReactNode;
+ trend?: {
+ current: number;
+ previous: number;
+ };
+ loading?: boolean;
+ chartData?: ChartDataPoint[];
+ chartColor: string;
+ chartGradientId: string;
+ tooltipPrefix?: string; // "£" or ""
+ hideChart?: boolean;
+ children?: React.ReactNode;
+}
+
+const CustomTooltip = ({ active, payload, label, prefix = "" }: TooltipProps & { prefix?: string }) => {
+ if (active && payload && payload.length) {
+ const data = payload[0].payload;
+ return (
+
+
+ {data.formattedDate || label}
+
+
+
+ {prefix === "£" ? "Revenue" : "Count"}
+
+
+ {prefix}{prefix === "£" ? (data.value || 0).toFixed(2) : data.value}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!hideChart && }
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ {value}
+
+
+ {subtext}
+ {trend && (
+
+
+
+ )}
+
{children}
}
+
+ {!hideChart && (
+ chartData && chartData.length > 0 ? (
+
+
+
+
+
+
+
+
+
+
+ }
+ cursor={{ stroke: 'rgba(255,255,255,0.1)', strokeWidth: 1 }}
+ />
+
+
+
+ No chart data
+
+ )
+ )}
+
+ {/* Fill space if chart is hidden but we want structure consistency */}
+ {hideChart && }
+
+
+ );
+}
diff --git a/components/admin/TrendIndicator.tsx b/components/admin/TrendIndicator.tsx
new file mode 100644
index 0000000..bf6faa6
--- /dev/null
+++ b/components/admin/TrendIndicator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { TrendingDown, TrendingUp } from "lucide-react";
+
+// Trend indicator component for metric cards
+export const TrendIndicator = ({
+ current,
+ previous,
+}: {
+ current: number;
+ previous: number;
+}) => {
+ if (!current || !previous) return null;
+
+ const percentChange = ((current - previous) / previous) * 100;
+
+ if (Math.abs(percentChange) < 0.1) return null;
+
+ return (
+ = 0 ? "text-green-500" : "text-red-500"}`}
+ >
+ {percentChange >= 0 ? (
+
+ ) : (
+
+ )}
+ {Math.abs(percentChange).toFixed(1)}%
+
+ );
+};
diff --git a/public/git-info.json b/public/git-info.json
index 408c62e..38e1d6a 100644
--- a/public/git-info.json
+++ b/public/git-info.json
@@ -1,4 +1,4 @@
{
- "commitHash": "4c15f43",
- "buildTime": "2026-01-13T05:27:43.269Z"
+ "commitHash": "a07ca55",
+ "buildTime": "2026-01-13T05:50:49.436Z"
}
\ No newline at end of file