Overdue initial commit
This commit is contained in:
643
examples DO NOT USE OR EDIT/EXAMPLE ONLY KlaviyoSalesChart.jsx
Normal file
643
examples DO NOT USE OR EDIT/EXAMPLE ONLY KlaviyoSalesChart.jsx
Normal file
@@ -0,0 +1,643 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user