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

Revamp analytics dashboard UI and charts
All checks were successful
Build Frontend / build (push) Successful in 1m11s
Details

Browse Source 
Enhanced the AnalyticsDashboard layout with a premium glassmorphism UI, improved toolbar, and reorganized tabs for better clarity. MetricsCard now features dynamic color coding and trend badges. PredictionsChart received scenario simulation UI upgrades, disabled future ranges based on available history, and improved chart tooltips and visuals. ProfitAnalyticsChart added error handling for product images and minor UI refinements. Updated globals.css with new premium utility classes and improved dark mode color variables.
This commit is contained in:
g
2026-01-12 05:44:54 +00:00
parent a0605e47de
commit a05787a091
9 changed files with 613 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/admin/AdminAnalytics.tsx
View File

@@ -263,7 +263,7 @@ export default function AdminAnalytics() {
// Helper to transform data for recharts
const transformChartData = (
data: Array<{ date: string; [key: string]: any }>,
data: Array<{ date: string;[key: string]: any }>,
valueKey: string = "count",
) => {
if (!data || data.length === 0) return [];
@@ -275,10 +275,10 @@ export default function AdminAnalytics() {
const date =
parts.length === 3
? new Date(
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
)
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
)
: new Date(dateStr);
// Format with day of week: "Mon, Nov 21"
@@ -329,10 +329,10 @@ export default function AdminAnalytics() {
const date =
parts.length === 3
? new Date(
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
)
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
)
: new Date(dateStr);
// Format with day of week: "Mon, Nov 21"
@@ -1365,8 +1365,8 @@ export default function AdminAnalytics() {
<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%">
<div className="h-64 min-w-0">
<ResponsiveContainer key={growthData?.customers ? 'ready' : 'loading'} width="100%" height="100%">
<PieChart>
<Pie
data={[
@@ -1417,7 +1417,7 @@ export default function AdminAnalytics() {
const data = payload[0].payload;
const details =
growthData.customers.segmentDetails[
data.name.split(" ")[0].toLowerCase()
data.name.split(" ")[0].toLowerCase()
];
return (
<div className="bg-background border border-border p-3 rounded-lg shadow-lg">