Overdue initial commit

examples DO NOT USE OR EDIT/EXAMPLE ONLY KlaviyoCampaigns.jsx

@@ -0,0 +1,316 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { DateTime } from "luxon";
+
+// Helper functions for formatting
+const formatRate = (value) => {
+  if (typeof value !== "number") return "0.0%";
+  return `${(value * 100).toFixed(1)}%`;
+};
+
+const formatCurrency = (value) => {
+  if (typeof value !== "number") return "$0";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+};
+
+// Loading skeleton component
+const TableSkeleton = () => (
+  <div className="space-y-4">
+    {[...Array(5)].map((_, i) => (
+      <div
+        key={i}
+        className="h-16 bg-gray-100 dark:bg-gray-800 animate-pulse rounded"
+      />
+    ))}
+  </div>
+);
+
+// Error alert component
+const ErrorAlert = ({ description }) => (
+  <div className="p-4 mb-4 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/10 rounded-lg">
+    {description}
+  </div>
+);
+
+// MetricCell component for displaying campaign metrics
+const MetricCell = ({
+  value,
+  count,
+  isMonetary = false,
+  showConversionRate = false,
+  totalRecipients = 0,
+}) => (
+  <td className="p-2 text-center">
+    <div className="text-blue-600 dark:text-blue-400 text-lg font-semibold">
+      {isMonetary ? formatCurrency(value) : formatRate(value)}
+    </div>
+    <div className="text-gray-600 dark:text-gray-400 text-sm">
+      {count?.toLocaleString() || 0} {count === 1 ? "recipient" : "recipients"}
+      {showConversionRate &&
+        totalRecipients > 0 &&
+        ` (${((count / totalRecipients) * 100).toFixed(2)}%)`}
+    </div>
+  </td>
+);
+
+const KlaviyoCampaigns = ({ className, timeRange = "last7days" }) => {
+  const [campaigns, setCampaigns] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortConfig, setSortConfig] = useState({
+    key: "send_time",
+    direction: "desc",
+  });
+  const fetchInProgress = useRef(false);
+
+  const fetchCampaigns = async () => {
+    console.log("Component fetching campaigns...", {
+      timeRange,
+      timestamp: new Date().toISOString()
+    });
+    
+    try {
+      setIsLoading(true);
+      const response = await fetch(`/api/klaviyo/campaigns/${timeRange}`);
+      
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error("Campaign fetch error response:", errorText);
+        throw new Error(`Failed to fetch campaigns: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      console.log("Received campaign data:", {
+        type: data?.type,
+        count: data?.data?.length,
+        sample: data?.data?.[0],
+        structure: {
+          topLevel: Object.keys(data || {}),
+          firstCampaign: data?.data?.[0] ? Object.keys(data.data[0]) : null,
+          stats: data?.data?.[0]?.stats ? Object.keys(data.data[0].stats) : null
+        }
+      });
+  
+      // Handle the new data structure
+      const campaignsData = data?.data || [];
+      if (!Array.isArray(campaignsData)) {
+        throw new Error('Invalid campaign data format received');
+      }
+  
+      // Process campaigns to ensure consistent structure
+      const processedCampaigns = campaignsData.map(campaign => ({
+        id: campaign.id,
+        name: campaign.name || "Unnamed Campaign",
+        subject: campaign.subject || "",
+        send_time: campaign.send_time,
+        stats: {
+          delivery_rate: campaign.stats?.delivery_rate || 0,
+          delivered: campaign.stats?.delivered || 0,
+          recipients: campaign.stats?.recipients || 0,
+          open_rate: campaign.stats?.open_rate || 0,
+          opens_unique: campaign.stats?.opens_unique || 0,
+          opens: campaign.stats?.opens || 0,
+          clicks_unique: campaign.stats?.clicks_unique || 0,
+          click_rate: campaign.stats?.click_rate || 0,
+          click_to_open_rate: campaign.stats?.click_to_open_rate || 0,
+          conversion_value: campaign.stats?.conversion_value || 0,
+          conversion_uniques: campaign.stats?.conversion_uniques || 0
+        }
+      }));
+  
+      console.log("Processed campaigns:", {
+        count: processedCampaigns.length,
+        sample: processedCampaigns[0]
+      });
+  
+      setCampaigns(processedCampaigns);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching campaigns:", err);
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCampaigns();
+    const interval = setInterval(fetchCampaigns, 10 * 60 * 1000); // Refresh every 10 minutes
+    return () => clearInterval(interval);
+  }, [timeRange]);
+
+  // Add this to debug render
+  console.log("Rendering campaigns:", {
+    count: campaigns?.length,
+    isLoading,
+    error
+  });
+
+  // Sort campaigns
+  const sortedCampaigns = [...campaigns].sort((a, b) => {
+    const direction = sortConfig.direction === "desc" ? -1 : 1;
+
+    if (sortConfig.key === "send_time") {
+      return (
+        direction *
+        (DateTime.fromISO(a.send_time) - DateTime.fromISO(b.send_time))
+      );
+    }
+
+    // Handle nested stats properties
+    if (sortConfig.key.startsWith("stats.")) {
+      const statKey = sortConfig.key.split(".")[1];
+      return direction * (a.stats[statKey] - b.stats[statKey]);
+    }
+
+    return direction * (a[sortConfig.key] - b[sortConfig.key]);
+  });
+
+  // Filter campaigns by search term
+  const filteredCampaigns = sortedCampaigns.filter(
+    (campaign) =>
+      campaign &&
+      campaign.name && // verify campaign and name exist
+      campaign.name.toLowerCase().includes((searchTerm || "").toLowerCase())
+  );
+
+  if (isLoading) {
+    return (
+      <Card className="h-full bg-white dark:bg-gray-900">
+        <CardHeader>
+          <div className="h-6 w-48 bg-gray-200 dark:bg-gray-700 animate-pulse rounded" />
+        </CardHeader>
+        <CardContent className="overflow-y-auto pl-4 max-h-[350px]">
+          <TableSkeleton />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="h-full bg-white dark:bg-gray-900">
+      {error && <ErrorAlert description={error} />}
+      <CardHeader className="pb-2">
+        <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          Email Campaigns
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="overflow-y-auto pl-4 max-h-[350px] mb-4">
+        <table className="w-full">
+          <thead>
+            <tr>
+              <th className="p-2 text-left font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
+                Campaign
+              </th>
+              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
+                Delivery
+              </th>
+              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
+                Opens
+              </th>
+              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
+                Clicks
+              </th>
+              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
+                CTR
+              </th>
+              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
+                Orders
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
+            {filteredCampaigns.map(
+              (campaign) =>
+                campaign && (
+                  <tr
+                    key={campaign.id}
+                    className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                  >
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <td className="p-2 align-top">
+                            <div className="font-medium text-gray-900 dark:text-gray-100">
+                              {campaign.name || "Unnamed Campaign"}
+                            </div>
+                            <div className="text-sm text-gray-500 dark:text-gray-400 truncate max-w-[300px]">
+                              {campaign.subject || "No subject"}
+                            </div>
+                            <div className="text-xs text-gray-400 dark:text-gray-500">
+                              {campaign.send_time
+                                ? DateTime.fromISO(
+                                    campaign.send_time
+                                  ).toLocaleString(DateTime.DATETIME_MED)
+                                : "No date"}
+                            </div>
+                          </td>
+                        </TooltipTrigger>
+                        <TooltipContent
+                          side="top"
+                          className="break-words bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border dark:border-gray-700"
+                        >
+                          <p className="font-medium">
+                            {campaign.name || "Unnamed Campaign"}
+                          </p>
+                          <p>{campaign.subject || "No subject"}</p>
+                          <p className="text-xs text-gray-500 dark:text-gray-400">
+                            {campaign.send_time
+                              ? DateTime.fromISO(
+                                  campaign.send_time
+                                ).toLocaleString(DateTime.DATETIME_MED)
+                              : "No date"}
+                          </p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                    <MetricCell
+                      value={campaign.stats.delivery_rate}
+                      count={campaign.stats.delivered}
+                      totalRecipients={campaign.stats.recipients}
+                    />
+                    <MetricCell
+                      value={campaign.stats.open_rate}
+                      count={campaign.stats.opens_unique}
+                      totalRecipients={campaign.stats.recipients}
+                    />
+                    <MetricCell
+                      value={campaign.stats.click_rate}
+                      count={campaign.stats.clicks_unique}
+                      totalRecipients={campaign.stats.recipients}
+                    />
+                    <MetricCell
+                      value={campaign.stats.click_to_open_rate}
+                      count={campaign.stats.clicks_unique}
+                      totalRecipients={campaign.stats.opens_unique}
+                    />
+                    <MetricCell
+                      value={campaign.stats.conversion_value}
+                      count={campaign.stats.conversion_uniques}
+                      isMonetary={true}
+                      showConversionRate={true}
+                      totalRecipients={campaign.stats.recipients}
+                    />
+                  </tr>
+                )
+            )}
+          </tbody>
+        </table>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default KlaviyoCampaigns;

examples DO NOT USE OR EDIT/EXAMPLE ONLY KlaviyoSalesChart.jsx

@@ -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;