diff --git a/dashboard/src/components/dashboard/KlaviyoCampaigns.jsx b/dashboard/src/components/dashboard/KlaviyoCampaigns.jsx
index 7570e04..b19ff29 100644
--- a/dashboard/src/components/dashboard/KlaviyoCampaigns.jsx
+++ b/dashboard/src/components/dashboard/KlaviyoCampaigns.jsx
@@ -14,6 +14,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
import { TIME_RANGES } from "@/lib/constants";
import { Mail, MessageSquare } from "lucide-react";
@@ -48,7 +49,7 @@ const TableSkeleton = () => (
// Error alert component
const ErrorAlert = ({ description }) => (
-
+
{description}
);
@@ -87,18 +88,12 @@ const MetricCell = ({
);
};
-const CHANNEL_OPTIONS = [
- { value: "all", label: "All Campaigns" },
- { value: "email", label: "Email Only" },
- { value: "sms", label: "SMS Only" },
-];
-
const KlaviyoCampaigns = ({ className }) => {
const [campaigns, setCampaigns] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const [searchTerm, setSearchTerm] = useState("");
- const [selectedChannel, setSelectedChannel] = useState("all");
+ const [selectedChannels, setSelectedChannels] = useState({ email: true, sms: true });
const [selectedTimeRange, setSelectedTimeRange] = useState("last7days");
const [sortConfig, setSortConfig] = useState({
key: "send_time",
@@ -109,7 +104,7 @@ const KlaviyoCampaigns = ({ className }) => {
try {
setIsLoading(true);
const response = await fetch(
- `/api/klaviyo/reporting/campaigns/${selectedTimeRange}${selectedChannel !== 'all' ? `?channel=${selectedChannel}` : ''}`
+ `/api/klaviyo/reporting/campaigns/${selectedTimeRange}`
);
if (!response.ok) {
@@ -131,7 +126,7 @@ const KlaviyoCampaigns = ({ className }) => {
fetchCampaigns();
const interval = setInterval(fetchCampaigns, 10 * 60 * 1000); // Refresh every 10 minutes
return () => clearInterval(interval);
- }, [selectedTimeRange, selectedChannel]);
+ }, [selectedTimeRange]); // Only refresh when time range changes
// Sort campaigns
const sortedCampaigns = [...campaigns].sort((a, b) => {
@@ -142,11 +137,11 @@ const KlaviyoCampaigns = ({ className }) => {
return direction * (a[sortConfig.key] - b[sortConfig.key]);
});
- // Filter campaigns by search term and channel
+ // Filter campaigns by search term and channels
const filteredCampaigns = sortedCampaigns.filter(
(campaign) =>
campaign?.name?.toLowerCase().includes((searchTerm || "").toLowerCase()) &&
- (selectedChannel === "all" || campaign?.channel === selectedChannel)
+ selectedChannels[campaign?.channel]
);
if (isLoading) {
@@ -171,18 +166,24 @@ const KlaviyoCampaigns = ({ className }) => {
Campaigns
-
+
+
+
+