Update AdminAnalytics.tsx
This commit is contained in:
g
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user