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,14 +1353,11 @@ 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>
|
<CardDescription>Breakdown by purchase behavior</CardDescription>
|
||||||
Breakdown by purchase behavior
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
{growthLoading ? (
|
{growthLoading ? (
|
||||||
@@ -1505,102 +1485,6 @@ export default function AdminAnalytics() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</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
|
|
||||||
dataKey="formattedMonth"
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickFormatter={(value) =>
|
|
||||||
`£${(value / 1000).toFixed(0)}k`
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
|
||||||
No profit data available (add costPerUnit to products)
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Monthly Growth Table */}
|
{/* Monthly Growth Table */}
|
||||||
{growthData?.monthly && growthData.monthly.length > 0 && (
|
{growthData?.monthly && growthData.monthly.length > 0 && (
|
||||||
<Card>
|
<Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user