644 lines
21 KiB
JavaScript
644 lines
21 KiB
JavaScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableHead,
|
|
TableRow,
|
|
TableBody,
|
|
TableCell,
|
|
} from "@/components/ui/table";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
ReferenceLine,
|
|
} from "recharts";
|
|
import { DateTime } from "luxon";
|
|
import { TimeRangeSelect } from "@/components/dashboard/TimeRangeSelect";
|
|
import { Info, TrendingUp, TrendingDown } from "lucide-react";
|
|
|
|
const formatCurrency = (value) => {
|
|
return new Intl.NumberFormat("en-US", {
|
|
style: "currency",
|
|
currency: "USD",
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
}).format(value);
|
|
};
|
|
|
|
const formatPercent = (value) => {
|
|
return new Intl.NumberFormat("en-US", {
|
|
style: "percent",
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
}).format(value / 100);
|
|
};
|
|
|
|
const StatCard = ({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
previousValue,
|
|
formatter = (v) => v.toLocaleString(),
|
|
info,
|
|
}) => {
|
|
const percentChange = previousValue
|
|
? ((value - previousValue) / previousValue) * 100
|
|
: 0;
|
|
|
|
return (
|
|
<div className="p-4 border rounded-lg">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<span className="text-sm text-muted-foreground">{title}</span>
|
|
{info && (
|
|
<Info
|
|
className="w-4 h-4 text-muted-foreground cursor-help"
|
|
title={info}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="text-2xl font-bold mb-1">{formatter(value)}</div>
|
|
{subtitle && (
|
|
<div className="text-sm text-muted-foreground">{subtitle}</div>
|
|
)}
|
|
{previousValue && (
|
|
<div
|
|
className={`text-sm flex items-center gap-1
|
|
${percentChange > 0 ? "text-green-600" : "text-red-600"}`}
|
|
>
|
|
{percentChange > 0 ? (
|
|
<TrendingUp className="w-4 h-4" />
|
|
) : (
|
|
<TrendingDown className="w-4 h-4" />
|
|
)}
|
|
{Math.abs(percentChange).toFixed(1)}% vs prev
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const formatChartDate = (value) => {
|
|
if (!value) return '';
|
|
try {
|
|
return DateTime.fromISO(value).setZone('America/New_York').toFormat('LLL d');
|
|
} catch (error) {
|
|
console.error("[KLAVIYO SALES] Date formatting error:", error);
|
|
return value;
|
|
}
|
|
};
|
|
|
|
const CustomTooltip = ({ active, payload, label }) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<Card className="p-2 shadow-lg bg-white dark:bg-gray-800">
|
|
<CardContent className="p-0">
|
|
<p className="font-medium">{formatChartDate(label)}</p>
|
|
{payload.map((entry, index) => (
|
|
<p key={index} className="text-sm text-muted-foreground">
|
|
{entry.name}:{" "}
|
|
{entry.dataKey.toLowerCase().includes("revenue") ||
|
|
entry.dataKey === "movingAverage"
|
|
? formatCurrency(entry.value)
|
|
: entry.value.toLocaleString()}
|
|
</p>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const KlaviyoSalesChart = ({ className }) => {
|
|
const [timeRange, setTimeRange] = useState("last7days");
|
|
const [data, setData] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [showDailyTable, setShowDailyTable] = useState(false);
|
|
const [visibleLines, setVisibleLines] = useState({
|
|
revenue: true,
|
|
orders: true,
|
|
movingAverage: true,
|
|
previousRevenue: false,
|
|
previousOrders: false,
|
|
});
|
|
|
|
const calculate7DayAverage = useCallback((data) => {
|
|
return data.map((day, index, array) => {
|
|
const startIndex = Math.max(0, index - 6);
|
|
const window = array.slice(startIndex, index + 1);
|
|
const sum = window.reduce((acc, curr) => acc + (curr.revenue || 0), 0);
|
|
const average = window.length > 0 ? sum / window.length : 0;
|
|
|
|
return {
|
|
...day,
|
|
movingAverage: Number(average.toFixed(2))
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
const validateMetricsData = (data) => {
|
|
if (!data) {
|
|
console.warn("[KLAVIYO SALES] No data received");
|
|
return false;
|
|
}
|
|
|
|
// Log the actual structure we're receiving
|
|
console.log("[KLAVIYO SALES] Validating data structure:", {
|
|
keys: Object.keys(data),
|
|
revenueKeys: Object.keys(data.revenue || {}),
|
|
ordersKeys: Object.keys(data.orders || {}),
|
|
sampleDaily: data.revenue?.daily?.[0]
|
|
});
|
|
|
|
// Check if we have the minimum required data
|
|
const hasMinimumData = data.revenue?.daily &&
|
|
Array.isArray(data.revenue.daily) &&
|
|
data.revenue.daily.length > 0;
|
|
|
|
if (!hasMinimumData) {
|
|
console.warn("[KLAVIYO SALES] Missing minimum required data");
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
|
|
const getPreviousPeriod = (timeRange) => {
|
|
switch (timeRange) {
|
|
case "today":
|
|
return "yesterday";
|
|
case "yesterday":
|
|
return "last2days";
|
|
case "last7days":
|
|
return "previous7days";
|
|
case "last30days":
|
|
return "previous30days";
|
|
case "last90days":
|
|
return "previous90days";
|
|
default:
|
|
return timeRange;
|
|
}
|
|
};
|
|
|
|
const fetchData = useCallback(async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const previousTimeRange = getPreviousPeriod(timeRange);
|
|
|
|
console.log("[KLAVIYO SALES] Fetching data for:", {
|
|
current: timeRange,
|
|
previous: previousTimeRange
|
|
});
|
|
|
|
// Fetch both current and previous period data
|
|
const [currentResponse, previousResponse] = await Promise.all([
|
|
fetch(`/api/klaviyo/sales/${timeRange}`),
|
|
fetch(`/api/klaviyo/sales/${previousTimeRange}`)
|
|
]);
|
|
|
|
if (!currentResponse.ok || !previousResponse.ok) {
|
|
throw new Error(`Failed to fetch data: ${currentResponse.status}, ${previousResponse.status}`);
|
|
}
|
|
|
|
const [currentData, previousData] = await Promise.all([
|
|
currentResponse.json(),
|
|
previousResponse.json()
|
|
]);
|
|
|
|
// Log the raw data received from the API
|
|
console.log("[KLAVIYO SALES] Raw data received:", {
|
|
current: currentData,
|
|
previous: previousData
|
|
});
|
|
|
|
if (!validateMetricsData(currentData)) {
|
|
throw new Error('Invalid metrics data structure received');
|
|
}
|
|
|
|
// Process the daily data
|
|
const processedDaily = currentData.revenue.daily.map((day, index) => {
|
|
const previousDay = previousData?.revenue?.daily?.[index] || {};
|
|
|
|
const hourlyTotal = (day.hourly_orders || []).reduce((sum, count) => sum + count, 0);
|
|
const revenue = day.value || 0;
|
|
const orders = day.orders || 0;
|
|
|
|
return {
|
|
date: day.date,
|
|
revenue,
|
|
orders,
|
|
items: day.items || 0,
|
|
avgOrderValue: orders > 0 ? revenue / orders : 0,
|
|
preOrders: day.pre_orders || 0,
|
|
refunds: day.refunds?.total || 0,
|
|
cancellations: day.cancellations?.total || 0,
|
|
previousRevenue: previousDay.value || 0,
|
|
previousOrders: previousDay.orders || 0,
|
|
hourly_orders: day.hourly_orders || Array(24).fill(0),
|
|
hourly_total: hourlyTotal
|
|
};
|
|
});
|
|
|
|
// Calculate 7-day moving average
|
|
const withMovingAverage = calculate7DayAverage(processedDaily);
|
|
|
|
// Prepare the complete data structure
|
|
const processedData = {
|
|
daily: withMovingAverage,
|
|
totals: {
|
|
revenue: currentData.revenue.total || 0,
|
|
orders: currentData.orders.total || 0,
|
|
items: currentData.orders.items_total || 0,
|
|
avgOrderValue: currentData.orders.total > 0
|
|
? currentData.revenue.total / currentData.orders.total
|
|
: 0,
|
|
previousRevenue: previousData?.revenue?.total || 0,
|
|
previousOrders: previousData?.orders?.total || 0,
|
|
refunds: currentData.refunds || { count: 0, total: 0 },
|
|
cancellations: currentData.cancellations || { count: 0, total: 0 },
|
|
preOrders: currentData.orders?.pre_orders || 0,
|
|
localPickup: currentData.orders?.local_pickup || 0,
|
|
revenue_best_day: currentData.revenue.best_day || {
|
|
date: null,
|
|
value: 0,
|
|
orders: 0
|
|
}
|
|
},
|
|
hourly_distribution: currentData.hourly_distribution || Array(24).fill(0),
|
|
metadata: {
|
|
brands: Object.keys(currentData.orders?.brands || {}).length,
|
|
categories: Object.keys(currentData.orders?.categories || {}).length,
|
|
shipping_states: Object.keys(currentData.orders?.shipping_states || {}).length
|
|
}
|
|
};
|
|
|
|
// Log the processed data before setting the state
|
|
console.log("[KLAVIYO SALES] Processed data:", {
|
|
dailyCount: processedData.daily.length,
|
|
totalRevenue: processedData.totals.revenue,
|
|
totalOrders: processedData.totals.orders
|
|
});
|
|
|
|
setData(processedData);
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error('[KLAVIYO SALES] Error:', err);
|
|
setError(err.message);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [timeRange, calculate7DayAverage]);
|
|
|
|
|
|
useEffect(() => {
|
|
let isSubscribed = true;
|
|
|
|
const loadData = async () => {
|
|
await fetchData();
|
|
if (!isSubscribed) return;
|
|
};
|
|
|
|
loadData();
|
|
|
|
// Set up refresh interval only for active time ranges
|
|
const shouldAutoRefresh = ['today', 'last7days'].includes(timeRange);
|
|
let interval;
|
|
|
|
if (shouldAutoRefresh) {
|
|
interval = setInterval(() => {
|
|
if (isSubscribed) loadData();
|
|
}, 5 * 60 * 1000); // 5 minutes
|
|
}
|
|
|
|
return () => {
|
|
isSubscribed = false;
|
|
if (interval) clearInterval(interval);
|
|
};
|
|
}, [timeRange, fetchData]);
|
|
|
|
if (error) {
|
|
return (
|
|
<Card className={className}>
|
|
<CardContent className="pt-6">
|
|
<div className="text-red-600 dark:text-red-400">
|
|
Error loading sales data: {error}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const LoadingState = () => (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
{[...Array(4)].map((_, i) => (
|
|
<Skeleton key={i} className="h-24 rounded-lg" />
|
|
))}
|
|
</div>
|
|
<Skeleton className="h-[400px] rounded-lg" />
|
|
</div>
|
|
);
|
|
|
|
if (isLoading || !data) {
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader>
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<CardTitle>Sales & Orders</CardTitle>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{timeRange === "today" ? (
|
|
`Today (${DateTime.now().setZone('America/New_York').toFormat('M/d h:mm a')} ET)`
|
|
) : timeRange === "yesterday" ? (
|
|
`Yesterday (${DateTime.now().setZone('America/New_York').minus({ days: 1 }).toFormat('M/d')} 1:00 AM - 12:59 AM ET)`
|
|
) : (
|
|
`${DateTime.now().setZone('America/New_York').minus({
|
|
days: timeRange === "last7days" ? 6 :
|
|
timeRange === "last30days" ? 29 : 89
|
|
}).toFormat('M/d')} - ${DateTime.now().setZone('America/New_York').toFormat('M/d h:mm a')} ET`
|
|
)}
|
|
</p>
|
|
</div>
|
|
<TimeRangeSelect
|
|
value={timeRange}
|
|
onChange={setTimeRange}
|
|
className="w-40"
|
|
allowedRanges={["last7days", "last30days", "last90days"]}
|
|
/>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<LoadingState />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const averageRevenue =
|
|
data.daily.reduce((sum, day) => sum + day.revenue, 0) / data.daily.length;
|
|
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader>
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<CardTitle>Sales & Orders</CardTitle>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{timeRange === "today" ? (
|
|
`Today (${DateTime.now().setZone('America/New_York').toFormat('M/d h:mm a')} ET)`
|
|
) : timeRange === "yesterday" ? (
|
|
`Yesterday (${DateTime.now().setZone('America/New_York').minus({ days: 1 }).toFormat('M/d')} 1:00 AM - 12:59 AM ET)`
|
|
) : (
|
|
`${DateTime.now().setZone('America/New_York').minus({
|
|
days: timeRange === "last7days" ? 6 :
|
|
timeRange === "last30days" ? 29 : 89
|
|
}).toFormat('M/d')} - ${DateTime.now().setZone('America/New_York').toFormat('M/d h:mm a')} ET`
|
|
)}
|
|
</p>
|
|
</div>
|
|
<TimeRangeSelect
|
|
value={timeRange}
|
|
onChange={setTimeRange}
|
|
className="w-40"
|
|
allowedRanges={["last7days", "last30days", "last90days"]}
|
|
/>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<StatCard
|
|
title="Total Revenue"
|
|
value={data?.totals?.revenue ?? 0}
|
|
previousValue={data?.totals?.previousRevenue}
|
|
formatter={formatCurrency}
|
|
/>
|
|
|
|
<StatCard
|
|
title="Total Orders"
|
|
value={data?.totals?.orders ?? 0}
|
|
previousValue={data?.totals?.previousOrders}
|
|
/>
|
|
|
|
<StatCard
|
|
title="Average Order Value"
|
|
value={data?.totals?.avgOrderValue ?? 0}
|
|
formatter={formatCurrency}
|
|
/>
|
|
|
|
<StatCard
|
|
title="Best Day"
|
|
value={data?.totals?.revenue_best_day?.value ?? 0}
|
|
formatter={formatCurrency}
|
|
subtitle={
|
|
data?.totals?.revenue_best_day?.date
|
|
? DateTime.fromISO(data.totals.revenue_best_day.date).toFormat(
|
|
"LLL d"
|
|
)
|
|
: "No data"
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="h-[400px]">
|
|
<div className="mb-4 flex flex-wrap gap-4">
|
|
{Object.entries({
|
|
revenue: "Revenue",
|
|
orders: "Orders",
|
|
movingAverage: "7-Day Average",
|
|
previousRevenue: "Previous Revenue",
|
|
previousOrders: "Previous Orders",
|
|
}).map(([key, label]) => (
|
|
<label key={key} className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={visibleLines[key]}
|
|
onChange={(e) =>
|
|
setVisibleLines((prev) => ({
|
|
...prev,
|
|
[key]: e.target.checked,
|
|
}))
|
|
}
|
|
className="rounded border-gray-300 text-primary"
|
|
/>
|
|
<span>{label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart
|
|
data={data.daily}
|
|
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
|
>
|
|
<CartesianGrid
|
|
strokeDasharray="3 3"
|
|
className="stroke-gray-200"
|
|
/>
|
|
<XAxis
|
|
dataKey="date"
|
|
className="text-xs"
|
|
tick={{ fill: "currentColor" }}
|
|
/>
|
|
<YAxis
|
|
yAxisId="left"
|
|
className="text-xs"
|
|
tickFormatter={(value) => formatCurrency(value)}
|
|
tick={{ fill: "currentColor" }}
|
|
/>
|
|
<YAxis
|
|
yAxisId="right"
|
|
orientation="right"
|
|
className="text-xs"
|
|
tickFormatter={(value) => value.toLocaleString()}
|
|
tick={{ fill: "currentColor" }}
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Legend />
|
|
<ReferenceLine
|
|
y={averageRevenue}
|
|
yAxisId="left"
|
|
stroke="#666"
|
|
strokeDasharray="3 3"
|
|
label={{
|
|
value: `Avg Revenue: ${formatCurrency(averageRevenue)}`,
|
|
fill: "currentColor",
|
|
fontSize: 12,
|
|
}}
|
|
/>
|
|
{visibleLines.revenue && (
|
|
<Line
|
|
yAxisId="left"
|
|
type="monotone"
|
|
dataKey="revenue"
|
|
name="Revenue"
|
|
stroke="#8b5cf6" // Purple for current revenue
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
)}
|
|
{visibleLines.previousRevenue && (
|
|
<Line
|
|
yAxisId="left"
|
|
type="monotone"
|
|
dataKey="previousRevenue"
|
|
name="Previous Revenue"
|
|
stroke="#f97316" // Orange for previous revenue
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
)}
|
|
{visibleLines.orders && (
|
|
<Line
|
|
yAxisId="right"
|
|
type="monotone"
|
|
dataKey="orders"
|
|
name="Orders"
|
|
stroke="#10b981" // Green for current orders
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
)}
|
|
{visibleLines.previousOrders && (
|
|
<Line
|
|
yAxisId="right"
|
|
type="monotone"
|
|
dataKey="previousOrders"
|
|
name="Previous Orders"
|
|
stroke="#0ea5e9" // Blue for previous orders
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
)}
|
|
{visibleLines.movingAverage && (
|
|
<Line
|
|
yAxisId="left"
|
|
type="monotone"
|
|
dataKey="movingAverage"
|
|
name="7-Day Average"
|
|
stroke="#f59e0b"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
strokeDasharray="5 5"
|
|
/>
|
|
)}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="mt-4 flex justify-end">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowDailyTable(!showDailyTable)}
|
|
>
|
|
{showDailyTable ? "Hide" : "Show"} Daily Details
|
|
</Button>
|
|
</div>
|
|
|
|
{showDailyTable && (
|
|
<div className="mt-4 overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead className="text-right">Orders</TableHead>
|
|
<TableHead className="text-right">Items</TableHead>
|
|
<TableHead className="text-right">Revenue</TableHead>
|
|
<TableHead className="text-right">Avg Order</TableHead>
|
|
<TableHead className="text-right">Pre-Orders</TableHead>
|
|
<TableHead className="text-right">Refunds</TableHead>
|
|
<TableHead className="text-right">Cancellations</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data.daily.map((day) => (
|
|
<TableRow key={day.date}>
|
|
<TableCell>{day.date}</TableCell>
|
|
<TableCell className="text-right">
|
|
{day.orders.toLocaleString()}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
{day.items.toLocaleString()}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
{formatCurrency(day.revenue)}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
{formatCurrency(day.avgOrderValue)}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
{day.preOrders.toLocaleString()}
|
|
</TableCell>
|
|
<TableCell className="text-right text-red-600">
|
|
{day.refunds > 0
|
|
? `-${formatCurrency(day.refunds)}`
|
|
: "-"}
|
|
</TableCell>
|
|
<TableCell className="text-right text-red-600">
|
|
{day.cancelations > 0
|
|
? `-${formatCurrency(day.cancelations)}`
|
|
: "-"}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default KlaviyoSalesChart;
|