g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update AdminAnalytics.tsx

Browse Source
This commit is contained in:
g
2026-01-06 17:59:30 +00:00
parent 2cd6de3b4a
commit 8862aecc61
1 changed files with 129 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
components/admin/AdminAnalytics.tsx
View File

@@ -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,14 +1353,11 @@ 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>
<CardDescription>Breakdown by purchase behavior</CardDescription>
</CardHeader>
<CardContent>
{growthLoading ? (
@@ -1505,102 +1485,6 @@ export default function AdminAnalytics() {
</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
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 */}
{growthData?.monthly && growthData.monthly.length > 0 && (
<Card>