Update AdminAnalytics.tsx
This commit is contained in:
g
@@ -44,7 +44,7 @@ import {
|
|||||||
ComposedChart,
|
ComposedChart,
|
||||||
} from "recharts";
|
} from "recharts";
|
||||||
import { formatGBP } from "@/utils/format";
|
import { formatGBP } from "@/utils/format";
|
||||||
import { PieChart, Pie, Cell, Legend, AreaChart, Area } from "recharts";
|
import { PieChart, Pie, Cell, Legend } from "recharts";
|
||||||
|
|
||||||
interface GrowthData {
|
interface GrowthData {
|
||||||
launchDate: string;
|
launchDate: string;
|
||||||
@@ -88,24 +88,7 @@ interface GrowthData {
|
|||||||
vip: number;
|
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: {
|
cumulative: {
|
||||||
orders: number;
|
orders: number;
|
||||||
revenue: number;
|
revenue: number;
|
||||||
@@ -1370,236 +1353,137 @@ export default function AdminAnalytics() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
{/* Customer Segments Pie Chart */}
|
||||||
{/* Customer Segments Pie Chart */}
|
<Card>
|
||||||
<Card>
|
<CardHeader>
|
||||||
<CardHeader>
|
<CardTitle>Customer Segments</CardTitle>
|
||||||
<CardTitle>Customer Segments</CardTitle>
|
<CardDescription>Breakdown by purchase behavior</CardDescription>
|
||||||
<CardDescription>
|
</CardHeader>
|
||||||
Breakdown by purchase behavior
|
<CardContent>
|
||||||
</CardDescription>
|
{growthLoading ? (
|
||||||
</CardHeader>
|
<div className="flex items-center justify-center h-64">
|
||||||
<CardContent>
|
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
|
||||||
{growthLoading ? (
|
</div>
|
||||||
<div className="flex items-center justify-center h-64">
|
) : growthData?.customers ? (
|
||||||
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
|
<div className="h-64">
|
||||||
</div>
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
) : growthData?.customers ? (
|
<PieChart>
|
||||||
<div className="h-64">
|
<Pie
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
data={[
|
||||||
<PieChart>
|
{
|
||||||
<Pie
|
name: "New (1 order)",
|
||||||
data={[
|
value: growthData.customers.segments.new,
|
||||||
{
|
color: SEGMENT_COLORS.new,
|
||||||
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: "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: "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,
|
||||||
name: "VIP (£1k+/10+)",
|
},
|
||||||
value: growthData.customers.segments.vip,
|
]}
|
||||||
color: SEGMENT_COLORS.vip,
|
cx="50%"
|
||||||
},
|
cy="50%"
|
||||||
]}
|
innerRadius={50}
|
||||||
cx="50%"
|
outerRadius={80}
|
||||||
cy="50%"
|
paddingAngle={2}
|
||||||
innerRadius={50}
|
dataKey="value"
|
||||||
outerRadius={80}
|
label={({ name, percent }) =>
|
||||||
paddingAngle={2}
|
`${name}: ${(percent * 100).toFixed(0)}%`
|
||||||
dataKey="value"
|
}
|
||||||
label={({ name, percent }) =>
|
labelLine={false}
|
||||||
`${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 }}
|
|
||||||
>
|
>
|
||||||
<CartesianGrid strokeDasharray="3 3" />
|
{[
|
||||||
<XAxis
|
{ color: SEGMENT_COLORS.new },
|
||||||
dataKey="formattedMonth"
|
{ color: SEGMENT_COLORS.returning },
|
||||||
tick={{ fontSize: 12 }}
|
{ color: SEGMENT_COLORS.loyal },
|
||||||
/>
|
{ color: SEGMENT_COLORS.vip },
|
||||||
<YAxis
|
].map((entry, index) => (
|
||||||
tick={{ fontSize: 12 }}
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||||
tickFormatter={(value) =>
|
))}
|
||||||
`£${(value / 1000).toFixed(0)}k`
|
</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;
|
||||||
<Tooltip
|
}}
|
||||||
content={({ active, payload }) => {
|
/>
|
||||||
if (active && payload?.length) {
|
</PieChart>
|
||||||
const data = payload[0].payload;
|
</ResponsiveContainer>
|
||||||
return (
|
</div>
|
||||||
<div className="bg-background border border-border p-3 rounded-lg shadow-lg">
|
) : (
|
||||||
<p className="font-medium mb-2">
|
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
||||||
{data.month}
|
No customer data available
|
||||||
</p>
|
</div>
|
||||||
<p className="text-sm text-blue-600">
|
)}
|
||||||
Revenue: {formatCurrency(data.revenue)}
|
|
||||||
</p>
|
{/* Segment Stats */}
|
||||||
<p className="text-sm text-red-600">
|
{growthData?.customers && (
|
||||||
Cost: {formatCurrency(data.cost)}
|
<div className="grid grid-cols-2 gap-2 mt-4">
|
||||||
</p>
|
<div className="p-2 rounded bg-blue-500/10 text-center">
|
||||||
<p className="text-sm text-green-600 font-medium">
|
<div className="text-lg font-bold text-blue-600">
|
||||||
Profit: {formatCurrency(data.profit)}
|
{growthData.customers.segments.new}
|
||||||
</p>
|
</div>
|
||||||
<p className="text-sm text-purple-600">
|
<div className="text-xs text-muted-foreground">New</div>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<div className="p-2 rounded bg-green-500/10 text-center">
|
||||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
<div className="text-lg font-bold text-green-600">
|
||||||
No profit data available (add costPerUnit to products)
|
{growthData.customers.segments.returning}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
Returning
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className="p-2 rounded bg-amber-500/10 text-center">
|
||||||
</CardContent>
|
<div className="text-lg font-bold text-amber-600">
|
||||||
</Card>
|
{growthData.customers.segments.loyal}
|
||||||
</div>
|
</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 */}
|
{/* Monthly Growth Table */}
|
||||||
{growthData?.monthly && growthData.monthly.length > 0 && (
|
{growthData?.monthly && growthData.monthly.length > 0 && (
|
||||||
|
|||||||
Reference in New Issue
Block a user