diff --git a/dashboard/src/components/dashboard/KlaviyoCampaigns.jsx b/dashboard/src/components/dashboard/KlaviyoCampaigns.jsx
new file mode 100644
index 0000000..06fa25a
--- /dev/null
+++ b/dashboard/src/components/dashboard/KlaviyoCampaigns.jsx
@@ -0,0 +1,242 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { DateTime } from "luxon";
+import { Loader2, AlertCircle } from "lucide-react";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TIME_RANGES } from "@/lib/constants";
+
+// 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 = () => (
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+);
+
+// MetricCell component for displaying campaign metrics
+const MetricCell = ({
+ value,
+ count,
+ isMonetary = false,
+ showConversionRate = false,
+ totalRecipients = 0,
+}) => (
+
+
+ {isMonetary ? formatCurrency(value) : formatRate(value)}
+
+
+ {count?.toLocaleString() || 0} {count === 1 ? "recipient" : "recipients"}
+ {showConversionRate &&
+ totalRecipients > 0 &&
+ ` (${((count / totalRecipients) * 100).toFixed(2)}%)`}
+
+ |
+);
+
+const KlaviyoCampaigns = ({
+ className,
+ timeRange = "last7days",
+ onTimeRangeChange,
+ title = "Email Campaigns",
+ description
+}) => {
+ const [campaigns, setCampaigns] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange);
+
+ useEffect(() => {
+ fetchCampaigns();
+ }, [selectedTimeRange]);
+
+ const fetchCampaigns = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const response = await axios.get(`/api/klaviyo/reporting/campaigns/${selectedTimeRange}`);
+ setCampaigns(response.data.data || []);
+ } catch (error) {
+ console.error("Error fetching campaigns:", error);
+ setError(error.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleTimeRangeChange = (value) => {
+ setSelectedTimeRange(value);
+ if (onTimeRangeChange) {
+ onTimeRangeChange(value);
+ }
+ };
+
+ if (loading) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ {error && (
+
+
+ Error
+ Failed to load campaigns: {error}
+
+ )}
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+ Campaign
+ Delivery
+ Opens
+ Clicks
+ Orders
+
+
+
+ {campaigns.map((campaign) => (
+
+
+
+
+
+
+
+ {campaign.name || "Unnamed Campaign"}
+
+
+ {campaign.subject || "No subject"}
+
+
+ {campaign.send_time
+ ? DateTime.fromISO(campaign.send_time).toLocaleString(
+ DateTime.DATETIME_MED
+ )
+ : "No date"}
+
+
+ {campaign.name || "Unnamed Campaign"}
+
+ {campaign.subject || "No subject"}
+
+ {campaign.send_time
+ ? DateTime.fromISO(campaign.send_time).toLocaleString(
+ DateTime.DATETIME_MED
+ )
+ : "No date"}
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default KlaviyoCampaigns;
\ No newline at end of file
diff --git a/dashboard/src/lib/constants.js b/dashboard/src/lib/constants.js
index 853084a..37d2e8b 100644
--- a/dashboard/src/lib/constants.js
+++ b/dashboard/src/lib/constants.js
@@ -2,12 +2,12 @@ export const TIME_RANGES = [
{ value: 'today', label: 'Today' },
{ value: 'yesterday', label: 'Yesterday' },
{ value: 'last7days', label: 'Last 7 Days' },
+ { value: 'last14days', label: 'Last 14 Days' },
{ value: 'last30days', label: 'Last 30 Days' },
{ value: 'last90days', label: 'Last 90 Days' },
- { value: 'thisWeek', label: 'This Week' },
- { value: 'lastWeek', label: 'Last Week' },
- { value: 'thisMonth', label: 'This Month' },
- { value: 'lastMonth', label: 'Last Month' }
+ { value: 'monthToDate', label: 'Month to Date' },
+ { value: 'quarterToDate', label: 'Quarter to Date' },
+ { value: 'yearToDate', label: 'Year to Date' },
];
export const GROUP_BY_OPTIONS = [
diff --git a/dashboard/vite.config.js b/dashboard/vite.config.js
index 2983c10..4df0703 100644
--- a/dashboard/vite.config.js
+++ b/dashboard/vite.config.js
@@ -117,21 +117,6 @@ export default defineConfig(({ mode }) => {
});
});
},
- onProxyReq: (proxyReq, req, res) => {
- // Log the outgoing request
- console.log("Proxy request:", {
- method: req.method,
- path: req.path,
- headers: req.headers,
- });
- },
- onProxyRes: (proxyRes, req, res) => {
- // Log the incoming response
- console.log("Proxy response:", {
- status: proxyRes.statusCode,
- headers: proxyRes.headers,
- });
- },
},
"/api": {
target: "https://dashboard.kent.pw",