matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update stat cards/trends and more toggle group tweaks

Browse Source
This commit is contained in:
Matt
2024-12-21 16:43:22 -05:00
parent 9ddd528d61
commit 371dfb08d0
1 changed files with 340 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

566
dashboard/src/components/dashboard/SalesChart.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useMemo, useCallback, memo } from 'react'; import React, { useState, useEffect, useMemo, useCallback, memo } from "react";
import axios from 'axios'; import axios from "axios";
import { import {
Card, Card,
CardContent, CardContent,
@@ -17,7 +17,15 @@ import {
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Loader2, TrendingUp, TrendingDown, Info, AlertCircle } from "lucide-react"; import {
Loader2,
TrendingUp,
TrendingDown,
Info,
AlertCircle,
ArrowUp,
ArrowDown,
} from "lucide-react";
import { import {
LineChart, LineChart,
Line, Line,
@@ -28,8 +36,13 @@ import {
ResponsiveContainer, ResponsiveContainer,
Legend, Legend,
ReferenceLine, ReferenceLine,
} from 'recharts'; } from "recharts";
import { TIME_RANGES, GROUP_BY_OPTIONS, formatDateForInput, parseDateFromInput } from "@/lib/constants"; import {
TIME_RANGES,
GROUP_BY_OPTIONS,
formatDateForInput,
parseDateFromInput,
} from "@/lib/constants";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { import {
Table, Table,
@@ -53,38 +66,38 @@ import { Separator } from "@/components/ui/separator";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
const METRIC_IDS = { const METRIC_IDS = {
PLACED_ORDER: 'Y8cqcF', PLACED_ORDER: "Y8cqcF",
PAYMENT_REFUNDED: 'R7XUYh' PAYMENT_REFUNDED: "R7XUYh",
}; };
// Map current periods to their previous equivalents // Map current periods to their previous equivalents
const PREVIOUS_PERIOD_MAP = { const PREVIOUS_PERIOD_MAP = {
today: 'yesterday', today: "yesterday",
thisWeek: 'lastWeek', thisWeek: "lastWeek",
thisMonth: 'lastMonth', thisMonth: "lastMonth",
last7days: 'previous7days', last7days: "previous7days",
last30days: 'previous30days', last30days: "previous30days",
last90days: 'previous90days', last90days: "previous90days",
yesterday: 'twoDaysAgo' yesterday: "twoDaysAgo",
}; };
// Add helper function to calculate previous period dates // Add helper function to calculate previous period dates
const calculatePreviousPeriodDates = (timeRange, startDate, endDate) => { const calculatePreviousPeriodDates = (timeRange, startDate, endDate) => {
if (timeRange && timeRange !== 'custom') { if (timeRange && timeRange !== "custom") {
return { return {
timeRange: PREVIOUS_PERIOD_MAP[timeRange] timeRange: PREVIOUS_PERIOD_MAP[timeRange],
}; };
} else if (startDate && endDate) { } else if (startDate && endDate) {
const start = new Date(startDate); const start = new Date(startDate);
const end = new Date(endDate); const end = new Date(endDate);
const duration = end.getTime() - start.getTime(); const duration = end.getTime() - start.getTime();
const prevEnd = new Date(start.getTime() - 1); const prevEnd = new Date(start.getTime() - 1);
const prevStart = new Date(prevEnd.getTime() - duration); const prevStart = new Date(prevEnd.getTime() - duration);
return { return {
startDate: prevStart.toISOString(), startDate: prevStart.toISOString(),
endDate: prevEnd.toISOString() endDate: prevEnd.toISOString(),
}; };
} }
return null; return null;
@@ -92,113 +105,134 @@ const calculatePreviousPeriodDates = (timeRange, startDate, endDate) => {
// Enhanced helper function for consistent currency formatting with explicit rounding // Enhanced helper function for consistent currency formatting with explicit rounding
const formatCurrency = (value, useFractionDigits = true) => { const formatCurrency = (value, useFractionDigits = true) => {
if (typeof value !== 'number') return '$0.00'; if (typeof value !== "number") return "$0.00";
const roundedValue = parseFloat(value.toFixed(useFractionDigits ? 2 : 0)); const roundedValue = parseFloat(value.toFixed(useFractionDigits ? 2 : 0));
return new Intl.NumberFormat('en-US', { return new Intl.NumberFormat("en-US", {
style: 'currency', style: "currency",
currency: 'USD', currency: "USD",
minimumFractionDigits: useFractionDigits ? 2 : 0, minimumFractionDigits: useFractionDigits ? 2 : 0,
maximumFractionDigits: useFractionDigits ? 2 : 0 maximumFractionDigits: useFractionDigits ? 2 : 0,
}).format(roundedValue); }).format(roundedValue);
}; };
// Add a helper function for percentage formatting // Add a helper function for percentage formatting
const formatPercentage = (value) => { const formatPercentage = (value) => {
if (typeof value !== 'number') return '0%'; if (typeof value !== "number") return "0%";
return `${value >= 0 ? '+' : ''}${Math.round(value)}%`; return `${Math.abs(Math.round(value))}%`;
}; };
// Add color mapping for metrics // Add color mapping for metrics
const METRIC_COLORS = { const METRIC_COLORS = {
revenue: '#8b5cf6', revenue: "#8b5cf6",
orders: '#10b981', orders: "#10b981",
avgOrderValue: '#9333ea', avgOrderValue: "#9333ea",
movingAverage: '#f59e0b', movingAverage: "#f59e0b",
prevRevenue: '#f97316', prevRevenue: "#f97316",
prevOrders: '#0ea5e9', prevOrders: "#0ea5e9",
prevAvgOrderValue: '#f59e0b' prevAvgOrderValue: "#f59e0b",
}; };
// Memoize the StatCard component // Memoize the StatCard component
const StatCard = memo(({ const StatCard = memo(
title, ({
value, title,
description, value,
trend, description,
trendValue, trend,
valuePrefix = "", trendValue,
valueSuffix = "", valuePrefix = "",
trendPrefix = "", valueSuffix = "",
trendSuffix = "", trendPrefix = "",
className = "", trendSuffix = "",
colorClass = "text-gray-900 dark:text-gray-100", className = "",
info colorClass = "text-gray-900 dark:text-gray-100",
}) => ( }) => (
<Card className={className}> <Card className={className}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">{title}</span> <span className="text-sm text-muted-foreground">{title}</span>
{info && ( {trend && (
<Info <span
className="w-4 h-4 text-muted-foreground cursor-help" className={`text-sm flex items-center gap-1 ${
title={info} trend === "up"
/> ? "text-emerald-600 dark:text-emerald-400"
: "text-rose-600 dark:text-rose-400"
}`}
>
{trend === "up" ? (
<ArrowUp className="w-4 h-4" />
) : (
<ArrowDown className="w-4 h-4" />
)}
{trendPrefix}
{trendValue}
{trendSuffix}
</span>
)} )}
</div> </CardHeader>
</CardHeader> <CardContent className="p-4 pt-0">
<CardContent className="p-4 pt-0"> <div className={`text-2xl font-bold mb-1 ${colorClass}`}>
<div className={`text-2xl font-bold mb-1 ${colorClass}`}> {valuePrefix}
{valuePrefix}{value}{valueSuffix} {value}
</div> {valueSuffix}
{description && (
<div className="text-sm text-muted-foreground">
{description}
</div> </div>
)} {description && (
{trend && ( <div className="text-sm text-muted-foreground">{description}</div>
<div className={`text-sm flex items-center gap-1 mt-2 ${trend === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}> )}
{trend === 'up' ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />} </CardContent>
{trendPrefix}{trendValue}{trendSuffix} </Card>
</div> )
)} );
</CardContent>
</Card>
));
// Add display name for debugging // Add display name for debugging
StatCard.displayName = 'StatCard'; StatCard.displayName = "StatCard";
const CustomTooltip = ({ active, payload, label }) => { const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) { if (active && payload && payload.length) {
const date = new Date(label); const date = new Date(label);
const formattedDate = date.toLocaleDateString('en-US', { const formattedDate = date.toLocaleDateString("en-US", {
weekday: 'short', weekday: "short",
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric' year: "numeric",
}); });
// Group metrics by type (current vs previous) // Group metrics by type (current vs previous)
const currentMetrics = payload.filter(p => !p.dataKey.toLowerCase().includes('prev')); const currentMetrics = payload.filter(
const previousMetrics = payload.filter(p => p.dataKey.toLowerCase().includes('prev')); (p) => !p.dataKey.toLowerCase().includes("prev")
);
const previousMetrics = payload.filter((p) =>
p.dataKey.toLowerCase().includes("prev")
);
return ( return (
<Card className="p-3 shadow-lg bg-white dark:bg-gray-800 border-none"> <Card className="p-3 shadow-lg bg-white dark:bg-gray-800 border-none">
<CardContent className="p-0 space-y-2"> <CardContent className="p-0 space-y-2">
<p className="font-medium text-sm border-b pb-1 mb-2">{formattedDate}</p> <p className="font-medium text-sm border-b pb-1 mb-2">
{formattedDate}
</p>
<div className="space-y-1"> <div className="space-y-1">
{currentMetrics.map((entry, index) => { {currentMetrics.map((entry, index) => {
const value = entry.dataKey.toLowerCase().includes('revenue') || const value =
entry.dataKey === 'avgOrderValue' || entry.dataKey.toLowerCase().includes("revenue") ||
entry.dataKey === 'movingAverage' || entry.dataKey === "avgOrderValue" ||
entry.dataKey === 'aovMovingAverage' entry.dataKey === "movingAverage" ||
? formatCurrency(entry.value) entry.dataKey === "aovMovingAverage"
: entry.value.toLocaleString(); ? formatCurrency(entry.value)
: entry.value.toLocaleString();
return ( return (
<div key={index} className="flex justify-between items-center text-sm"> <div
<span style={{ color: entry.stroke || METRIC_COLORS[entry.dataKey.toLowerCase()] }}> key={index}
className="flex justify-between items-center text-sm"
>
<span
style={{
color:
entry.stroke ||
METRIC_COLORS[entry.dataKey.toLowerCase()],
}}
>
{entry.name}: {entry.name}:
</span> </span>
<span className="font-medium ml-4">{value}</span> <span className="font-medium ml-4">{value}</span>
@@ -211,17 +245,29 @@ const CustomTooltip = ({ active, payload, label }) => {
<> <>
<div className="border-t my-2"></div> <div className="border-t my-2"></div>
<div className="space-y-1"> <div className="space-y-1">
<p className="text-xs text-muted-foreground mb-1">Previous Period</p> <p className="text-xs text-muted-foreground mb-1">
Previous Period
</p>
{previousMetrics.map((entry, index) => { {previousMetrics.map((entry, index) => {
const value = entry.dataKey.toLowerCase().includes('revenue') || const value =
entry.dataKey.includes('avgOrderValue') entry.dataKey.toLowerCase().includes("revenue") ||
? formatCurrency(entry.value) entry.dataKey.includes("avgOrderValue")
: entry.value.toLocaleString(); ? formatCurrency(entry.value)
: entry.value.toLocaleString();
return ( return (
<div key={index} className="flex justify-between items-center text-sm"> <div
<span style={{ color: entry.stroke || METRIC_COLORS[entry.dataKey.toLowerCase()] }}> key={index}
{entry.name.replace('Previous ', '')}: className="flex justify-between items-center text-sm"
>
<span
style={{
color:
entry.stroke ||
METRIC_COLORS[entry.dataKey.toLowerCase()],
}}
>
{entry.name.replace("Previous ", "")}:
</span> </span>
<span className="font-medium ml-4">{value}</span> <span className="font-medium ml-4">{value}</span>
</div> </div>
@@ -244,14 +290,15 @@ const calculate7DayAverage = (data) => {
// Get up to 7 days of data, including current day // Get up to 7 days of data, including current day
const startIndex = Math.max(0, index - 6); const startIndex = Math.max(0, index - 6);
const window = array.slice(startIndex, index + 1); const window = array.slice(startIndex, index + 1);
// Calculate averages for all metrics // Calculate averages for all metrics
const validPoints = window.filter(point => const validPoints = window.filter(
point && (point) =>
typeof point.revenue === 'number' && point &&
typeof point.orders === 'number' && typeof point.revenue === "number" &&
!isNaN(point.revenue) && typeof point.orders === "number" &&
!isNaN(point.orders) !isNaN(point.revenue) &&
!isNaN(point.orders)
); );
if (validPoints.length === 0) { if (validPoints.length === 0) {
@@ -259,22 +306,22 @@ const calculate7DayAverage = (data) => {
...day, ...day,
movingAverage: 0, movingAverage: 0,
orderMovingAverage: 0, orderMovingAverage: 0,
aovMovingAverage: 0 aovMovingAverage: 0,
}; };
} }
const revenueSum = validPoints.reduce((acc, curr) => acc + curr.revenue, 0); const revenueSum = validPoints.reduce((acc, curr) => acc + curr.revenue, 0);
const orderSum = validPoints.reduce((acc, curr) => acc + curr.orders, 0); const orderSum = validPoints.reduce((acc, curr) => acc + curr.orders, 0);
const revenueAvg = revenueSum / validPoints.length; const revenueAvg = revenueSum / validPoints.length;
const orderAvg = orderSum / validPoints.length; const orderAvg = orderSum / validPoints.length;
const aovAvg = orderAvg > 0 ? revenueAvg / orderAvg : 0; const aovAvg = orderAvg > 0 ? revenueAvg / orderAvg : 0;
return { return {
...day, ...day,
movingAverage: Number(revenueAvg.toFixed(2)), movingAverage: Number(revenueAvg.toFixed(2)),
orderMovingAverage: Number(orderAvg.toFixed(2)), orderMovingAverage: Number(orderAvg.toFixed(2)),
aovMovingAverage: Number(aovAvg.toFixed(2)) aovMovingAverage: Number(aovAvg.toFixed(2)),
}; };
}); });
}; };
@@ -283,28 +330,44 @@ const processData = (stats = []) => {
if (!Array.isArray(stats)) return []; if (!Array.isArray(stats)) return [];
// First, convert the stats array into the base format // First, convert the stats array into the base format
const baseData = stats.map(day => ({ const baseData = stats.map((day) => ({
timestamp: day.date || day.timestamp, timestamp: day.date || day.timestamp,
revenue: Number(day.revenue || 0), revenue: Number(day.revenue || 0),
orders: Number(day.orders || 0), orders: Number(day.orders || 0),
avgOrderValue: Number(day.averageOrderValue || (day.orders > 0 ? day.revenue / day.orders : 0)), avgOrderValue: Number(
day.averageOrderValue || (day.orders > 0 ? day.revenue / day.orders : 0)
),
prevRevenue: Number(day.prevRevenue || 0), prevRevenue: Number(day.prevRevenue || 0),
prevOrders: Number(day.prevOrders || 0), prevOrders: Number(day.prevOrders || 0),
prevAvgOrderValue: Number(day.prevAvgOrderValue || (day.prevOrders > 0 ? day.prevRevenue / day.prevOrders : 0)), prevAvgOrderValue: Number(
day.prevAvgOrderValue ||
(day.prevOrders > 0 ? day.prevRevenue / day.prevOrders : 0)
),
growth: { growth: {
revenue: 0, revenue: 0,
orders: 0, orders: 0,
avgOrderValue: 0 avgOrderValue: 0,
} },
})); }));
// Calculate growth rates // Calculate growth rates
baseData.forEach(day => { baseData.forEach((day) => {
// Calculate growth // Calculate growth
day.growth = { day.growth = {
revenue: day.prevRevenue > 0 ? ((day.revenue - day.prevRevenue) / day.prevRevenue) * 100 : 0, revenue:
orders: day.prevOrders > 0 ? ((day.orders - day.prevOrders) / day.prevOrders) * 100 : 0, day.prevRevenue > 0
avgOrderValue: day.prevAvgOrderValue > 0 ? ((day.avgOrderValue - day.prevAvgOrderValue) / day.prevAvgOrderValue) * 100 : 0 ? ((day.revenue - day.prevRevenue) / day.prevRevenue) * 100
: 0,
orders:
day.prevOrders > 0
? ((day.orders - day.prevOrders) / day.prevOrders) * 100
: 0,
avgOrderValue:
day.prevAvgOrderValue > 0
? ((day.avgOrderValue - day.prevAvgOrderValue) /
day.prevAvgOrderValue) *
100
: 0,
}; };
}); });
@@ -332,7 +395,7 @@ const calculateSummaryStats = (data = []) => {
revenue: current.revenue, revenue: current.revenue,
timestamp: current.timestamp, timestamp: current.timestamp,
orders: current.orders, orders: current.orders,
avgOrderValue: current.avgOrderValue avgOrderValue: current.avgOrderValue,
}; };
} }
return best; return best;
@@ -340,9 +403,13 @@ const calculateSummaryStats = (data = []) => {
// Calculate growth percentages // Calculate growth percentages
const growth = { const growth = {
revenue: prevRevenue ? ((totalRevenue - prevRevenue) / prevRevenue) * 100 : 0, revenue: prevRevenue
? ((totalRevenue - prevRevenue) / prevRevenue) * 100
: 0,
orders: prevOrders ? ((totalOrders - prevOrders) / prevOrders) * 100 : 0, orders: prevOrders ? ((totalOrders - prevOrders) / prevOrders) * 100 : 0,
avgOrderValue: prevAvgOrderValue ? ((avgOrderValue - prevAvgOrderValue) / prevAvgOrderValue) * 100 : 0 avgOrderValue: prevAvgOrderValue
? ((avgOrderValue - prevAvgOrderValue) / prevAvgOrderValue) * 100
: 0,
}; };
return { return {
@@ -357,8 +424,8 @@ const calculateSummaryStats = (data = []) => {
movingAverages: { movingAverages: {
revenue: data[data.length - 1]?.movingAverage || 0, revenue: data[data.length - 1]?.movingAverage || 0,
orders: data[data.length - 1]?.orderMovingAverage || 0, orders: data[data.length - 1]?.orderMovingAverage || 0,
avgOrderValue: data[data.length - 1]?.aovMovingAverage || 0 avgOrderValue: data[data.length - 1]?.aovMovingAverage || 0,
} },
}; };
}; };
@@ -372,7 +439,7 @@ const SummaryStats = memo(({ stats = {} }) => {
prevRevenue = 0, prevRevenue = 0,
prevOrders = 0, prevOrders = 0,
prevAvgOrderValue = 0, prevAvgOrderValue = 0,
growth = { revenue: 0, orders: 0, avgOrderValue: 0 } growth = { revenue: 0, orders: 0, avgOrderValue: 0 },
} = stats; } = stats;
return ( return (
@@ -381,27 +448,27 @@ const SummaryStats = memo(({ stats = {} }) => {
title="Total Revenue" title="Total Revenue"
value={formatCurrency(totalRevenue, false)} value={formatCurrency(totalRevenue, false)}
description={`Previous: ${formatCurrency(prevRevenue, false)}`} description={`Previous: ${formatCurrency(prevRevenue, false)}`}
trend={growth.revenue >= 0 ? 'up' : 'down'} trend={growth.revenue >= 0 ? "up" : "down"}
trendValue={formatPercentage(growth.revenue)} trendValue={formatPercentage(growth.revenue)}
info="Total revenue for the selected period" info="Total revenue for the selected period"
colorClass="text-green-600 dark:text-green-400" colorClass="text-green-600 dark:text-green-400"
/> />
<StatCard <StatCard
title="Total Orders" title="Total Orders"
value={totalOrders.toLocaleString()} value={totalOrders.toLocaleString()}
description={`Previous: ${prevOrders.toLocaleString()} orders`} description={`Previous: ${prevOrders.toLocaleString()} orders`}
trend={growth.orders >= 0 ? 'up' : 'down'} trend={growth.orders >= 0 ? "up" : "down"}
trendValue={formatPercentage(growth.orders)} trendValue={formatPercentage(growth.orders)}
info="Total number of orders for the selected period" info="Total number of orders for the selected period"
colorClass="text-blue-600 dark:text-blue-400" colorClass="text-blue-600 dark:text-blue-400"
/> />
<StatCard <StatCard
title="Average Order Value" title="AOV"
value={formatCurrency(avgOrderValue)} value={formatCurrency(avgOrderValue)}
description={`Previous: ${formatCurrency(prevAvgOrderValue)}`} description={`Previous: ${formatCurrency(prevAvgOrderValue)}`}
trend={growth.avgOrderValue >= 0 ? 'up' : 'down'} trend={growth.avgOrderValue >= 0 ? "up" : "down"}
trendValue={formatPercentage(growth.avgOrderValue)} trendValue={formatPercentage(growth.avgOrderValue)}
info="Average value per order for the selected period" info="Average value per order for the selected period"
colorClass="text-purple-600 dark:text-purple-400" colorClass="text-purple-600 dark:text-purple-400"
@@ -410,9 +477,14 @@ const SummaryStats = memo(({ stats = {} }) => {
<StatCard <StatCard
title="Best Day" title="Best Day"
value={formatCurrency(bestDay?.revenue || 0, false)} value={formatCurrency(bestDay?.revenue || 0, false)}
description={bestDay?.timestamp ? description={
`${new Date(bestDay.timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${bestDay.orders} orders` : bestDay?.timestamp
'No data'} ? `${new Date(bestDay.timestamp).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})} - ${bestDay.orders} orders`
: "No data"
}
info="Day with highest revenue in the selected period" info="Day with highest revenue in the selected period"
colorClass="text-orange-600 dark:text-orange-400" colorClass="text-orange-600 dark:text-orange-400"
/> />
@@ -420,7 +492,7 @@ const SummaryStats = memo(({ stats = {} }) => {
); );
}); });
SummaryStats.displayName = 'SummaryStats'; SummaryStats.displayName = "SummaryStats";
// Add these skeleton components near the top of the file // Add these skeleton components near the top of the file
const SkeletonChart = () => ( const SkeletonChart = () => (
@@ -493,11 +565,11 @@ const SkeletonTable = () => (
); );
const SalesChart = ({ const SalesChart = ({
timeRange = 'last30days', timeRange = "last30days",
startDate, startDate,
endDate, endDate,
title = "Sales Overview", title = "Sales Overview",
description = "Track your sales performance over time" description = "Track your sales performance over time",
}) => { }) => {
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -509,12 +581,12 @@ const SalesChart = ({
orders: true, orders: true,
avgOrderValue: false, avgOrderValue: false,
movingAverage: true, movingAverage: true,
showPrevious: false showPrevious: false,
}); });
const [summaryStats, setSummaryStats] = useState({}); const [summaryStats, setSummaryStats] = useState({});
const [customDateRange, setCustomDateRange] = useState({ const [customDateRange, setCustomDateRange] = useState({
startDate: formatDateForInput(startDate) || '', startDate: formatDateForInput(startDate) || "",
endDate: formatDateForInput(endDate) || '' endDate: formatDateForInput(endDate) || "",
}); });
// Fetch data function // Fetch data function
@@ -524,31 +596,32 @@ const SalesChart = ({
setError(null); setError(null);
// Fetch data // Fetch data
const response = await axios.get('/api/klaviyo/events/stats/details', { const response = await axios.get("/api/klaviyo/events/stats/details", {
params: { params: {
...params, ...params,
metric: 'revenue', metric: "revenue",
daily: true daily: true,
} },
}); });
if (!response.data) { if (!response.data) {
throw new Error('Invalid response format'); throw new Error("Invalid response format");
} }
// Process the data // Process the data
const currentStats = Array.isArray(response.data) ? response.data : response.data.stats || []; const currentStats = Array.isArray(response.data)
? response.data
: response.data.stats || [];
// Process the data directly without remapping // Process the data directly without remapping
const processedData = processData(currentStats); const processedData = processData(currentStats);
const stats = calculateSummaryStats(processedData); const stats = calculateSummaryStats(processedData);
setData(processedData); setData(processedData);
setSummaryStats(stats); setSummaryStats(stats);
setError(null); setError(null);
} catch (error) { } catch (error) {
console.error('Error fetching data:', error); console.error("Error fetching data:", error);
setError(error.message); setError(error.message);
} finally { } finally {
setLoading(false); setLoading(false);
@@ -556,42 +629,62 @@ const SalesChart = ({
}, []); }, []);
// Handle time range change // Handle time range change
const handleTimeRangeChange = useCallback((value) => { const handleTimeRangeChange = useCallback(
setSelectedTimeRange(value); (value) => {
setSelectedTimeRange(value);
const params = value === 'custom'
? {
startDate: parseDateFromInput(customDateRange.startDate)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString()
}
: { timeRange: value };
fetchData(params); const params =
}, [customDateRange, fetchData]); value === "custom"
? {
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(
customDateRange.endDate
)?.toISOString(),
}
: { timeRange: value };
fetchData(params);
},
[customDateRange, fetchData]
);
// Handle custom date change // Handle custom date change
const handleCustomDateChange = useCallback((field, value) => { const handleCustomDateChange = useCallback(
setCustomDateRange(prev => ({ (field, value) => {
...prev, setCustomDateRange((prev) => ({
[field]: value ...prev,
})); [field]: value,
}));
if (selectedTimeRange === 'custom' && customDateRange.startDate && customDateRange.endDate) { if (
fetchData({ selectedTimeRange === "custom" &&
startDate: parseDateFromInput(customDateRange.startDate)?.toISOString(), customDateRange.startDate &&
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString() customDateRange.endDate
}); ) {
} fetchData({
}, [selectedTimeRange, customDateRange, fetchData]); startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString(),
});
}
},
[selectedTimeRange, customDateRange, fetchData]
);
// Initial load effect // Initial load effect
useEffect(() => { useEffect(() => {
const params = selectedTimeRange === 'custom' const params =
? { selectedTimeRange === "custom"
startDate: parseDateFromInput(customDateRange.startDate)?.toISOString(), ? {
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString() startDate: parseDateFromInput(
} customDateRange.startDate
: { timeRange: selectedTimeRange }; )?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString(),
}
: { timeRange: selectedTimeRange };
fetchData(params); fetchData(params);
}, [selectedTimeRange, customDateRange, fetchData]); }, [selectedTimeRange, customDateRange, fetchData]);
@@ -600,13 +693,13 @@ const SalesChart = ({
useEffect(() => { useEffect(() => {
let intervalId = null; let intervalId = null;
if (selectedTimeRange === 'today') { if (selectedTimeRange === "today") {
// Initial fetch // Initial fetch
fetchData({ timeRange: 'today' }); fetchData({ timeRange: "today" });
// Set up interval // Set up interval
intervalId = setInterval(() => { intervalId = setInterval(() => {
fetchData({ timeRange: 'today' }); fetchData({ timeRange: "today" });
}, 60000); }, 60000);
} }
@@ -618,14 +711,15 @@ const SalesChart = ({
}, [selectedTimeRange, fetchData]); }, [selectedTimeRange, fetchData]);
const formatXAxis = (value) => { const formatXAxis = (value) => {
if (!value) return ''; if (!value) return "";
const date = new Date(value); const date = new Date(value);
return date.toLocaleDateString([], { month: 'short', day: 'numeric' }); return date.toLocaleDateString([], { month: "short", day: "numeric" });
}; };
const averageRevenue = data.length > 0 const averageRevenue =
? data.reduce((sum, day) => sum + day.revenue, 0) / data.length data.length > 0
: 0; ? data.reduce((sum, day) => sum + day.revenue, 0) / data.length
: 0;
return ( return (
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm"> <Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
@@ -633,10 +727,15 @@ const SalesChart = ({
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle> <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
{title}
</CardTitle>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Select value={selectedTimeRange} onValueChange={handleTimeRangeChange}> <Select
value={selectedTimeRange}
onValueChange={handleTimeRangeChange}
>
<SelectTrigger className="w-[180px] h-9"> <SelectTrigger className="w-[180px] h-9">
<SelectValue placeholder="Select time range" /> <SelectValue placeholder="Select time range" />
</SelectTrigger> </SelectTrigger>
@@ -652,7 +751,7 @@ const SalesChart = ({
</div> </div>
</div> </div>
{selectedTimeRange === 'custom' && ( {selectedTimeRange === "custom" && (
<div className="grid grid-cols-2 gap-4 max-w-md"> <div className="grid grid-cols-2 gap-4 max-w-md">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="startDate">Start Date</Label> <Label htmlFor="startDate">Start Date</Label>
@@ -660,7 +759,9 @@ const SalesChart = ({
id="startDate" id="startDate"
type="datetime-local" type="datetime-local"
value={customDateRange.startDate} value={customDateRange.startDate}
onChange={(e) => handleCustomDateChange('startDate', e.target.value)} onChange={(e) =>
handleCustomDateChange("startDate", e.target.value)
}
className="h-9" className="h-9"
/> />
</div> </div>
@@ -670,76 +771,82 @@ const SalesChart = ({
id="endDate" id="endDate"
type="datetime-local" type="datetime-local"
value={customDateRange.endDate} value={customDateRange.endDate}
onChange={(e) => handleCustomDateChange('endDate', e.target.value)} onChange={(e) =>
handleCustomDateChange("endDate", e.target.value)
}
className="h-9" className="h-9"
/> />
</div> </div>
</div> </div>
)} )}
{/* Show either skeletons or actual stats */} {/* Show either skeletons or actual stats */}
{loading ? ( {loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />}
<SkeletonStats />
) : (
<SummaryStats stats={summaryStats} />
)}
{/* Metric Toggles */} {/* Metric Toggles */}
<div className="flex items-center gap-2 pt-2"> <div className="flex items-center gap-2 pt-2">
<ToggleGroup type="multiple" variant="outline" className="flex-wrap justify-start" <ToggleGroup
type="multiple"
variant="outline"
className="flex-wrap justify-start"
value={Object.entries(metrics) value={Object.entries(metrics)
.filter(([key, value]) => value && key !== 'showPrevious') .filter(([key, value]) => value && key !== "showPrevious")
.map(([key]) => key)} .map(([key]) => key)}
onValueChange={(values) => { onValueChange={(values) => {
setMetrics(prev => ({ setMetrics((prev) => ({
...prev, ...prev,
revenue: values.includes('revenue'), revenue: values.includes("revenue"),
orders: values.includes('orders'), orders: values.includes("orders"),
avgOrderValue: values.includes('avgOrderValue'), movingAverage: values.includes("movingAverage"),
movingAverage: values.includes('movingAverage'), avgOrderValue: values.includes("avgOrderValue"),
})); }));
}} }}
> >
<ToggleGroupItem <ToggleGroupItem
value="revenue" value="revenue"
aria-label="Toggle revenue" aria-label="Toggle revenue"
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground" className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
> >
Revenue Revenue
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
value="orders" value="orders"
aria-label="Toggle orders" aria-label="Toggle orders"
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground" className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
> >
Orders Orders
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
value="avgOrderValue" value="movingAverage"
aria-label="Toggle AOV"
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
AOV
</ToggleGroupItem>
<ToggleGroupItem
value="movingAverage"
aria-label="Toggle 7-day average" aria-label="Toggle 7-day average"
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground" className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
> >
7-Day Avg 7-Day Avg
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem
value="avgOrderValue"
aria-label="Toggle AOV"
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
AOV
</ToggleGroupItem>
</ToggleGroup> </ToggleGroup>
<Separator orientation="vertical" className="h-6" /> <Separator orientation="vertical" className="h-6" />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
variant={metrics.showPrevious ? "outline" : "primary"} variant={metrics.showPrevious ? "outline" : "primary"}
size="sm" size="sm"
className="h-8" className="h-8"
onClick={() => setMetrics(prev => ({ ...prev, showPrevious: !prev.showPrevious }))} onClick={() =>
setMetrics((prev) => ({
...prev,
showPrevious: !prev.showPrevious,
}))
}
> >
Compare with prev Compare Prev Period
</Button> </Button>
</div> </div>
</div> </div>
@@ -768,7 +875,9 @@ const SalesChart = ({
<div className="text-center"> <div className="text-center">
<TrendingUp className="h-12 w-12 mx-auto mb-4" /> <TrendingUp className="h-12 w-12 mx-auto mb-4" />
<div className="font-medium mb-2">No sales data available</div> <div className="font-medium mb-2">No sales data available</div>
<div className="text-sm">Try selecting a different time range</div> <div className="text-sm">
Try selecting a different time range
</div>
</div> </div>
</div> </div>
) : ( ) : (
@@ -779,7 +888,10 @@ const SalesChart = ({
data={data} data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
> >
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" /> <CartesianGrid
strokeDasharray="3 3"
className="stroke-muted"
/>
<XAxis <XAxis
dataKey="timestamp" dataKey="timestamp"
tickFormatter={formatXAxis} tickFormatter={formatXAxis}
@@ -918,7 +1030,9 @@ const SalesChart = ({
<TableHead className="text-right">Avg Order</TableHead> <TableHead className="text-right">Avg Order</TableHead>
<TableHead className="text-right">Prev Orders</TableHead> <TableHead className="text-right">Prev Orders</TableHead>
<TableHead className="text-right">Prev Revenue</TableHead> <TableHead className="text-right">Prev Revenue</TableHead>
<TableHead className="text-right">Prev Avg Order</TableHead> <TableHead className="text-right">
Prev Avg Order
</TableHead>
<TableHead className="text-right">7-Day Avg</TableHead> <TableHead className="text-right">7-Day Avg</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
@@ -960,4 +1074,4 @@ const SalesChart = ({
); );
}; };
export default SalesChart; export default SalesChart;