From 84e4515a26729b8aad83971a2e897584f52e4d6f Mon Sep 17 00:00:00 2001 From: NotII <46204250+NotII@users.noreply.github.com> Date: Mon, 30 Jun 2025 16:56:57 +0100 Subject: [PATCH] anal --- components/analytics/AnalyticsDashboard.tsx | 129 +++++++------- components/analytics/OrderAnalyticsChart.tsx | 164 +++++------------- .../analytics/ProductPerformanceChart.tsx | 40 ----- components/analytics/RevenueChart.tsx | 7 +- 4 files changed, 122 insertions(+), 218 deletions(-) diff --git a/components/analytics/AnalyticsDashboard.tsx b/components/analytics/AnalyticsDashboard.tsx index 823761d..98f1c86 100644 --- a/components/analytics/AnalyticsDashboard.tsx +++ b/components/analytics/AnalyticsDashboard.tsx @@ -132,34 +132,17 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr {/* Analytics Tabs */} - - - - - Revenue - - - - Products - - - - Customers - - - - Orders - - - - -
-
-

Revenue Trends

-

- Track your revenue performance over time -

-
+
+ {/* Global Date Selector */} +
+
+

Analytics Dashboard

+

+ Detailed insights into your business performance +

+
+
+ Time period:
- - +
- -
-

Product Performance

-

- Analyze which products are performing best -

-
- - + + + + + Revenue + + + + Products + + + + Customers + + + + Orders + + - -
-

Customer Insights

-

- Understand your customer base and behavior -

-
- - + +
+

Revenue Trends

+

+ Track your revenue performance over the selected time period +

+
+ + - -
-

Order Analytics

-

- Detailed analysis of order patterns and status distribution -

-
- - - + +
+

Product Performance

+

+ Analyze which products are performing best (all-time data) +

+
+ + + + +
+

Customer Insights

+

+ Understand your customer base and behavior (all-time data) +

+
+ + + + +
+

Order Analytics

+

+ Order status distribution for the selected time period +

+
+ + + +
); } \ No newline at end of file diff --git a/components/analytics/OrderAnalyticsChart.tsx b/components/analytics/OrderAnalyticsChart.tsx index 6d50313..a852399 100644 --- a/components/analytics/OrderAnalyticsChart.tsx +++ b/components/analytics/OrderAnalyticsChart.tsx @@ -145,136 +145,64 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr } const totalOrders = data.statusDistribution.reduce((sum, item) => sum + item.count, 0); - const totalRevenue = data.dailyOrders.reduce((sum, item) => sum + item.revenue, 0); return ( -
- {/* Order Status Distribution */} - - - Order Status Distribution - - Breakdown of orders by current status - - - -
- {data.statusDistribution.map((status) => { - const percentage = totalOrders > 0 ? (status.count / totalOrders * 100).toFixed(1) : '0'; - const Icon = getStatusIcon(status._id); - - return ( -
-
-
- {Icon} -
-
-
{getStatusLabel(status._id)}
-
- {status.count} orders -
-
-
-
-
{percentage}%
-
of total
-
-
- ); - })} -
- - - - {/* Daily Order Trends */} - - - Daily Order Trends - - Orders and revenue over the selected time period - - - - {data.dailyOrders.length === 0 ? ( + + + + + Order Analytics + + + Order status distribution for the selected time period + + + +
+ {data.statusDistribution.length === 0 ? (

No order data available for this period

) : ( -
- {/* Summary Stats */} -
-
-
- {data.dailyOrders.length} -
-
Days with Orders
-
-
-
- {totalOrders} -
-
Total Orders
-
-
-
- {formatGBP(totalRevenue)} -
-
Total Revenue
+ <> + {/* Summary */} +
+
+ {totalOrders}
+
Total Orders
- {/* Chart */} -
- {data.dailyOrders.map((item, index) => { - const maxOrders = Math.max(...data.dailyOrders.map(d => d.orders)); - const height = maxOrders > 0 ? (item.orders / maxOrders) * 100 : 0; - const date = new Date(item._id.year, item._id.month - 1, item._id.day); - const dateLabel = date.toLocaleDateString('en-GB', { - month: 'short', - day: 'numeric' - }); - - return ( -
-
-
- {dateLabel} + {/* Status Distribution */} + {data.statusDistribution.map((status) => { + const percentage = totalOrders > 0 ? (status.count / totalOrders * 100).toFixed(1) : '0'; + const Icon = getStatusIcon(status._id); + + return ( +
+
+
+ {Icon} +
+
+
{getStatusLabel(status._id)}
+
+ {status.count} orders +
- ); - })} -
-
+
+
{percentage}%
+
of total
+
+
+ ); + })} + )} - - - - {/* Processing Time */} - - - - - Order Processing Time - - - Average time to complete orders - - - -
-
- {data.averageProcessingDays.toFixed(1)} -
-
Average Days to Complete
-
- - -
+
+ + ); } \ No newline at end of file diff --git a/components/analytics/ProductPerformanceChart.tsx b/components/analytics/ProductPerformanceChart.tsx index 5ee0077..e8e3dac 100644 --- a/components/analytics/ProductPerformanceChart.tsx +++ b/components/analytics/ProductPerformanceChart.tsx @@ -39,32 +39,6 @@ export default function ProductPerformanceChart() { fetchProductData(); }, [toast]); - const getStockStatusColor = (status: string) => { - switch (status) { - case 'in_stock': - return 'bg-green-100 text-green-800'; - case 'low_stock': - return 'bg-yellow-100 text-yellow-800'; - case 'out_of_stock': - return 'bg-red-100 text-red-800'; - default: - return 'bg-gray-100 text-gray-800'; - } - }; - - const getStockStatusText = (status: string) => { - switch (status) { - case 'in_stock': - return 'In Stock'; - case 'low_stock': - return 'Low Stock'; - case 'out_of_stock': - return 'Out of Stock'; - default: - return 'Unknown'; - } - }; - if (isLoading) { return ( @@ -157,7 +131,6 @@ export default function ProductPerformanceChart() { Product - Stock Sold Revenue Orders @@ -185,19 +158,6 @@ export default function ProductPerformanceChart() {
- -
- - {getStockStatusText(product.stockStatus)} - - - {product.currentStock} available - -
- {product.totalSold.toFixed(2)} diff --git a/components/analytics/RevenueChart.tsx b/components/analytics/RevenueChart.tsx index ef8c9be..7e47fa0 100644 --- a/components/analytics/RevenueChart.tsx +++ b/components/analytics/RevenueChart.tsx @@ -53,14 +53,17 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) { // Transform data for Recharts const chartData: ChartDataPoint[] = data.map(item => { - const date = new Date(item._id.year, item._id.month - 1, item._id.day); + // Use UTC to avoid timezone issues + const date = new Date(Date.UTC(item._id.year, item._id.month - 1, item._id.day)); return { date: date.toISOString().split('T')[0], // YYYY-MM-DD format revenue: item.revenue || 0, orders: item.orders || 0, formattedDate: date.toLocaleDateString('en-GB', { + weekday: 'short', month: 'short', - day: 'numeric' + day: 'numeric', + timeZone: 'UTC' }) }; });