@embedreach/components 0.1.12 → 0.1.13

package/dist/AdDashboard-BEWUbw3u.js

@@ -1,2535 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { c as calculateDateRange, f as formatDateToString, s as styles$9, S as SettingsSheet } from "./styles.module-B1IY0-9d.js";
-import { B as Button, c as createDataContext, P as Popover, a as PopoverTrigger, b as PopoverContent, S as Select, d as SelectTrigger, e as SelectValue, f as SelectContent, g as SelectItem, C as Calendar, h as baseRequest, G as GOOGLE_ADS_METRICS_PATH, u as useAdAccount, i as CACHE_STANDARD, M as META_ADS_METRICS_PATH, D as DropdownMenu, j as DropdownMenuTrigger, k as DropdownMenuContent, l as GoogleIcon, m as MetaIcon, n as cn, o as Card, p as Skeleton, q as CardHeader, r as CardTitle, s as CardContent, t as PARTNER_USER_METRICS_PATH, T as Table, v as TableHeader, w as TableRow, x as TableHead, y as TableBody, z as TableCell, A as Tabs, E as TabsList, F as TabsTrigger, H as TabsContent, I as AlertTitle, J as AlertDescription, K as Alert, L as useBusiness, N as useAdAccounts, O as SpinLoader, Q as H2, R as PATHS } from "./index-OHOroL_D.js";
-import * as React from "react";
-import React__default, { useContext, useMemo, useState, useRef } from "react";
-import { format } from "date-fns";
-import { CalendarIcon, FilterIcon, TvMinimalPlayIcon, UserPlus, HelpCircle, ChevronLeft, ChevronRight, Loader, Info, CheckCircle, AlertTriangle, AlertCircle } from "lucide-react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useQuery } from "@tanstack/react-query";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as RechartsPrimitive from "recharts";
-import { AreaChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Area } from "recharts";
-import { flushSync } from "react-dom";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-const container$4 = "reach-styles-module__container___GuRla";
-const title = "reach-styles-module__title___3HRHQ";
-const description = "reach-styles-module__description___RAI1V";
-const button = "reach-styles-module__button___5HKgK";
-const styles$8 = {
-  container: container$4,
-  title,
-  description,
-  button
-};
-const EmptyStateLayout = ({
-  title: title2,
-  description: description2,
-  buttonText,
-  onButtonClick,
-  className
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles$8.container} ${className}`, children: [
-    /* @__PURE__ */ jsx("p", { className: styles$8.title, children: title2 }),
-    /* @__PURE__ */ jsx("p", { className: styles$8.description, children: description2 }),
-    buttonText && onButtonClick && /* @__PURE__ */ jsx(Button, { size: "lg", onClick: onButtonClick, className: styles$8.button, children: buttonText })
-  ] });
-};
-const dashboardFilterReducer = (state, action) => {
-  switch (action.type) {
-    case "SET_DATE_RANGE":
-      return { ...state, dateRange: action.payload };
-    case "SET_CHANNEL":
-      return { ...state, channel: action.payload };
-    case "SET_CAMPAIGN_ID":
-      return { ...state, campaignId: action.payload };
-    default:
-      return state;
-  }
-};
-const updateDateRange = (dispatch) => (dateRange) => {
-  dispatch({ type: "SET_DATE_RANGE", payload: dateRange });
-};
-const updateChannel = (dispatch) => (channel) => {
-  dispatch({ type: "SET_CHANNEL", payload: channel });
-};
-const updateCampaignId = (dispatch) => (campaignId) => {
-  dispatch({ type: "SET_CAMPAIGN_ID", payload: campaignId });
-};
-const defaultState = {
-  dateRange: calculateDateRange("last-month"),
-  channel: "all",
-  campaignId: void 0
-};
-const { Context, Provider } = createDataContext(
-  dashboardFilterReducer,
-  {
-    updateDateRange,
-    updateChannel,
-    updateCampaignId
-  },
-  defaultState
-);
-const useDashboardFilterContext = () => {
-  const context = useContext(Context);
-  if (context === void 0) {
-    throw new Error(
-      "useDashboardFilterContext must be used within an DashboardFilterContext"
-    );
-  }
-  return context;
-};
-const container$3 = "reach-styles-module__container___vdVjp";
-const controlsGroup$1 = "reach-styles-module__controlsGroup___xeRAT";
-const dateButton = "reach-styles-module__dateButton___VYYgL";
-const icon = "reach-styles-module__icon___yfRDZ";
-const presetSection = "reach-styles-module__presetSection___C912U";
-const channelItem = "reach-styles-module__channelItem___UGH3Z";
-const channelLabel = "reach-styles-module__channelLabel___bP5D0";
-const channelLabelDisabled = "reach-styles-module__channelLabelDisabled___C6Psj";
-const comingSoonBadge = "reach-styles-module__comingSoonBadge___3wQWV";
-const popoverContent = "reach-styles-module__popoverContent___QIr4Q";
-const dropdownContent = "reach-styles-module__dropdownContent___3Hhp1";
-const styles$7 = {
-  container: container$3,
-  controlsGroup: controlsGroup$1,
-  dateButton,
-  icon,
-  presetSection,
-  channelItem,
-  channelLabel,
-  channelLabelDisabled,
-  comingSoonBadge,
-  popoverContent,
-  dropdownContent
-};
-const DateRangePicker = () => {
-  var _a, _b;
-  const { state, updateDateRange: updateDateRange2 } = useDashboardFilterContext();
-  const [preset, setPreset] = React__default.useState("last-month");
-  const { t } = useTranslation();
-  const handlePresetChange = (value) => {
-    const newRange = calculateDateRange(value);
-    setPreset(value);
-    updateDateRange2(newRange);
-  };
-  return /* @__PURE__ */ jsx("div", { className: styles$7.container, children: /* @__PURE__ */ jsx("div", { className: styles$7.controlsGroup, children: /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
-      /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 mr-2" }),
-      ((_a = state.dateRange) == null ? void 0 : _a.from) ? state.dateRange.to ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        format(state.dateRange.from, "LLL dd, y"),
-        " -",
-        " ",
-        format(state.dateRange.to, "LLL dd, y")
-      ] }) : format(state.dateRange.from, "LLL dd, y") : t("select_dates")
-    ] }) }),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto p-0", align: "start", children: [
-      /* @__PURE__ */ jsx("div", { className: "border-b p-3", children: /* @__PURE__ */ jsxs(Select, { onValueChange: handlePresetChange, value: preset, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsx(SelectItem, { value: "last-week", children: t("dates.last_week") }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "last-month", children: t("dates.last_month") }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "last-quarter", children: t("dates.last_quarter") }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "last-year", children: t("dates.last_year") })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx(
-        Calendar,
-        {
-          initialFocus: true,
-          mode: "range",
-          defaultMonth: (_b = state.dateRange) == null ? void 0 : _b.from,
-          selected: state.dateRange,
-          onSelect: updateDateRange2,
-          numberOfMonths: 2
-        }
-      )
-    ] })
-  ] }) }) });
-};
-const filterButton = "reach-styles-module__filterButton___H-U-Z";
-const filterIcon = "reach-styles-module__filterIcon___PegbQ";
-const content$1 = "reach-styles-module__content___EEhv3";
-const container$2 = "reach-styles-module__container___eaADr";
-const header$2 = "reach-styles-module__header___qIzzs";
-const options = "reach-styles-module__options___o57N9";
-const option = "reach-styles-module__option___BEaPP";
-const checkbox = "reach-styles-module__checkbox___1s-NG";
-const channelIcon = "reach-styles-module__channelIcon___wR2Oe";
-const channelName = "reach-styles-module__channelName___6h5In";
-const comingSoon = "reach-styles-module__comingSoon___yc5ZE";
-const styles$6 = {
-  filterButton,
-  filterIcon,
-  content: content$1,
-  container: container$2,
-  header: header$2,
-  options,
-  option,
-  checkbox,
-  channelIcon,
-  channelName,
-  comingSoon
-};
-const googleAdMetricsKeys = {
-  all: ["googleAdMetrics"],
-  aggregatedByBusiness: (startDate, endDate) => [
-    ...googleAdMetricsKeys.all,
-    "aggregated",
-    "business",
-    startDate,
-    endDate
-  ],
-  aggregatedByCampaign: (campaignId, startDate, endDate) => [
-    ...googleAdMetricsKeys.all,
-    "aggregated",
-    "campaign",
-    campaignId,
-    startDate,
-    endDate
-  ],
-  timeSeriesByBusiness: (startDate, endDate) => [
-    ...googleAdMetricsKeys.all,
-    "timeseries",
-    "business",
-    startDate,
-    endDate
-  ]
-};
-const getAggregatedMetricsByBusiness$1 = async (startDate, endDate) => {
-  const formattedStartDate = formatDateToString(startDate);
-  const formattedEndDate = formatDateToString(endDate);
-  const queryParams = new URLSearchParams({
-    startDate: formattedStartDate,
-    endDate: formattedEndDate
-  }).toString();
-  const response = await baseRequest(
-    `${GOOGLE_ADS_METRICS_PATH}/aggregatedByBusinessId?${queryParams}`
-  );
-  return response.data;
-};
-const getTimeSeriesMetricsByBusiness$1 = async (startDate, endDate) => {
-  const formattedStartDate = formatDateToString(startDate);
-  const formattedEndDate = formatDateToString(endDate);
-  const queryParams = new URLSearchParams({
-    startDate: formattedStartDate,
-    endDate: formattedEndDate
-  }).toString();
-  const response = await baseRequest(
-    `${GOOGLE_ADS_METRICS_PATH}/timeseriesbybusinessid?${queryParams}`
-  );
-  return response.data;
-};
-const useAggregatedMetricsByBusiness$1 = (dateRange) => {
-  const { account } = useAdAccount("google");
-  const isEnabled = Boolean(
-    (account == null ? void 0 : account.status) === "connected" && (dateRange == null ? void 0 : dateRange.from) instanceof Date && (dateRange == null ? void 0 : dateRange.to) instanceof Date
-  );
-  return useQuery({
-    queryKey: isEnabled ? googleAdMetricsKeys.aggregatedByBusiness(
-      formatDateToString(dateRange.from),
-      formatDateToString(dateRange.to)
-    ) : googleAdMetricsKeys.all,
-    queryFn: () => {
-      if (!(dateRange == null ? void 0 : dateRange.from) || !(dateRange == null ? void 0 : dateRange.to)) {
-        throw new Error("Date range is required");
-      }
-      return getAggregatedMetricsByBusiness$1(dateRange.from, dateRange.to);
-    },
-    ...CACHE_STANDARD,
-    enabled: isEnabled,
-    refetchOnMount: true,
-    refetchOnWindowFocus: false,
-    staleTime: 0
-    // Force refetch when dates change
-  });
-};
-const useTimeSeriesMetrics$1 = (dateRange) => {
-  const { account } = useAdAccount("google");
-  const isEnabled = Boolean(
-    (account == null ? void 0 : account.status) === "connected" && (dateRange == null ? void 0 : dateRange.from) instanceof Date && (dateRange == null ? void 0 : dateRange.to) instanceof Date
-  );
-  return useQuery({
-    queryKey: isEnabled ? googleAdMetricsKeys.timeSeriesByBusiness(
-      formatDateToString(dateRange.from),
-      formatDateToString(dateRange.to)
-    ) : googleAdMetricsKeys.all,
-    queryFn: () => {
-      if (!(dateRange == null ? void 0 : dateRange.from) || !(dateRange == null ? void 0 : dateRange.to)) {
-        throw new Error("Date range is required");
-      }
-      return getTimeSeriesMetricsByBusiness$1(dateRange.from, dateRange.to);
-    },
-    ...CACHE_STANDARD,
-    enabled: isEnabled,
-    refetchOnMount: true,
-    refetchOnWindowFocus: false,
-    staleTime: 0
-    // Force refetch when dates change
-  });
-};
-const metaAdMetricsKeys = {
-  all: ["metaAdMetrics"],
-  aggregatedByBusiness: (startDate, endDate) => [
-    ...metaAdMetricsKeys.all,
-    "aggregated",
-    "business",
-    startDate,
-    endDate
-  ],
-  aggregatedByCampaign: (campaignId, startDate, endDate) => [
-    ...metaAdMetricsKeys.all,
-    "aggregated",
-    "campaign",
-    campaignId,
-    startDate,
-    endDate
-  ],
-  timeSeriesByBusiness: (startDate, endDate) => [
-    ...metaAdMetricsKeys.all,
-    "timeseries",
-    "business",
-    startDate,
-    endDate
-  ]
-};
-const getAggregatedMetricsByBusiness = async (startDate, endDate) => {
-  const formattedStartDate = formatDateToString(startDate);
-  const formattedEndDate = formatDateToString(endDate);
-  const queryParams = new URLSearchParams({
-    startDate: formattedStartDate,
-    endDate: formattedEndDate
-  }).toString();
-  const response = await baseRequest(
-    `${META_ADS_METRICS_PATH}/aggregatedbybusinessid?${queryParams}`
-  );
-  return response.data;
-};
-const getTimeSeriesMetricsByBusiness = async (startDate, endDate) => {
-  const formattedStartDate = formatDateToString(startDate);
-  const formattedEndDate = formatDateToString(endDate);
-  const queryParams = new URLSearchParams({
-    startDate: formattedStartDate,
-    endDate: formattedEndDate
-  }).toString();
-  const response = await baseRequest(
-    `${META_ADS_METRICS_PATH}/timeseriesbybusinessid?${queryParams}`
-  );
-  return response.data;
-};
-const useAggregatedMetricsByBusiness = (dateRange) => {
-  const { account } = useAdAccount("meta");
-  const isEnabled = Boolean(
-    (account == null ? void 0 : account.status) === "connected" && (dateRange == null ? void 0 : dateRange.from) instanceof Date && (dateRange == null ? void 0 : dateRange.to) instanceof Date
-  );
-  return useQuery({
-    queryKey: isEnabled ? metaAdMetricsKeys.aggregatedByBusiness(
-      formatDateToString(dateRange.from),
-      formatDateToString(dateRange.to)
-    ) : metaAdMetricsKeys.all,
-    queryFn: () => {
-      if (!(dateRange == null ? void 0 : dateRange.from) || !(dateRange == null ? void 0 : dateRange.to)) {
-        throw new Error("Date range is required");
-      }
-      return getAggregatedMetricsByBusiness(dateRange.from, dateRange.to);
-    },
-    ...CACHE_STANDARD,
-    enabled: isEnabled,
-    refetchOnMount: true,
-    refetchOnWindowFocus: false,
-    staleTime: 0
-    // Force refetch when dates change
-  });
-};
-const useTimeSeriesMetrics = (dateRange) => {
-  const { account } = useAdAccount("meta");
-  const isEnabled = Boolean(
-    (account == null ? void 0 : account.status) === "connected" && (dateRange == null ? void 0 : dateRange.from) instanceof Date && (dateRange == null ? void 0 : dateRange.to) instanceof Date
-  );
-  return useQuery({
-    queryKey: isEnabled ? metaAdMetricsKeys.timeSeriesByBusiness(
-      formatDateToString(dateRange.from),
-      formatDateToString(dateRange.to)
-    ) : metaAdMetricsKeys.all,
-    queryFn: () => {
-      if (!(dateRange == null ? void 0 : dateRange.from) || !(dateRange == null ? void 0 : dateRange.to)) {
-        throw new Error("Date range is required");
-      }
-      return getTimeSeriesMetricsByBusiness(dateRange.from, dateRange.to);
-    },
-    ...CACHE_STANDARD,
-    enabled: isEnabled,
-    refetchOnMount: true,
-    refetchOnWindowFocus: false,
-    staleTime: 0
-    // Force refetch when dates change
-  });
-};
-const safeParseFloat = (value) => {
-  if (!value) return 0;
-  const parsed = parseFloat(value);
-  return isNaN(parsed) ? 0 : parsed;
-};
-const calculateRoas = (revenue, spend) => {
-  const revenueNum = safeParseFloat(revenue);
-  const spendNum = safeParseFloat(spend);
-  if (spendNum === 0) return "0";
-  return (revenueNum / spendNum).toFixed(2);
-};
-const useCombinedMetrics = (dateRange, channel) => {
-  const {
-    data: googleData,
-    isLoading: isGoogleLoading,
-    error: googleError
-  } = useAggregatedMetricsByBusiness$1(dateRange);
-  const {
-    data: metaData,
-    isLoading: isMetaLoading,
-    error: metaError
-  } = useAggregatedMetricsByBusiness(dateRange);
-  const availableChannels = useMemo(() => {
-    const channels = [];
-    if (googleData) channels.push("google");
-    if (metaData) channels.push("meta");
-    if (channels.length > 1) channels.push("all");
-    return channels;
-  }, [googleData, metaData]);
-  const sources = useMemo(() => {
-    const activeSources = [];
-    if (channel === "all") {
-      if (googleData) activeSources.push("google");
-      if (metaData) activeSources.push("meta");
-    } else if (channel === "google" && googleData) {
-      activeSources.push("google");
-    } else if (channel === "meta" && metaData) {
-      activeSources.push("meta");
-    }
-    return activeSources;
-  }, [channel, googleData, metaData]);
-  const data = useMemo(() => {
-    if (channel === "google") return googleData;
-    if (channel === "meta") return metaData;
-    if (channel === "all" && googleData && metaData) {
-      const combinedAdsSpend = safeParseFloat(googleData.ads_spend) + safeParseFloat(metaData.ads_spend);
-      const combinedMeasuredRevenue = safeParseFloat(googleData.measured_revenue) + safeParseFloat(metaData.measured_revenue);
-      return {
-        ...googleData,
-        ads_spend: combinedAdsSpend.toString(),
-        clicks: (googleData.clicks || 0) + (metaData.clicks || 0),
-        impressions: (googleData.impressions || 0) + (metaData.impressions || 0),
-        measured_revenue: combinedMeasuredRevenue.toString(),
-        roas: calculateRoas(
-          combinedMeasuredRevenue.toString(),
-          combinedAdsSpend.toString()
-        ),
-        campaign_ids: [
-          ...googleData.campaign_ids || [],
-          ...metaData.campaign_ids || []
-        ]
-      };
-    }
-    return googleData || metaData || null;
-  }, [channel, googleData, metaData]);
-  return {
-    data,
-    isLoading: isGoogleLoading || isMetaLoading,
-    error: googleError || metaError || null,
-    sources,
-    availableChannels
-  };
-};
-const ChannelFilter = () => {
-  const { state, updateChannel: updateChannel2 } = useDashboardFilterContext();
-  const { availableChannels } = useCombinedMetrics(
-    state.dateRange,
-    state.channel
-  );
-  const getChannelNameAndIcon = (channel) => {
-    if (channel === "google")
-      return {
-        name: "Google Ads",
-        icon: /* @__PURE__ */ jsx(GoogleIcon, { className: styles$6.channelIcon })
-      };
-    if (channel === "meta")
-      return {
-        name: "Meta Ads",
-        icon: /* @__PURE__ */ jsx(MetaIcon, { className: styles$6.channelIcon })
-      };
-    return {
-      name: "All Channels",
-      icon: /* @__PURE__ */ jsx(TvMinimalPlayIcon, { className: styles$6.channelIcon })
-    };
-  };
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: styles$6.filterButton, children: /* @__PURE__ */ jsx(FilterIcon, { className: styles$6.filterIcon }) }) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(DropdownMenuContent, { sideOffset: 8, className: styles$6.content, children: /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        className: styles$6.container,
-        initial: { opacity: 0, y: -8 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: -8 },
-        transition: { duration: 0.15 },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: styles$6.header, children: "Channel Selection" }),
-          /* @__PURE__ */ jsx("div", { className: styles$6.options, children: availableChannels.map((channel) => {
-            const { name: channelName2, icon: channelIcon2 } = getChannelNameAndIcon(channel);
-            return /* @__PURE__ */ jsxs(
-              motion.div,
-              {
-                className: styles$6.option,
-                whileHover: { backgroundColor: "var(--hover-bg)" },
-                whileTap: { scale: 0.98 },
-                onClick: () => updateChannel2(channel),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: state.channel === channel || state.channel === "all",
-                      className: styles$6.checkbox,
-                      onChange: () => {
-                      }
-                    }
-                  ),
-                  channelIcon2,
-                  /* @__PURE__ */ jsx("span", { className: styles$6.channelName, children: channelName2 })
-                ]
-              },
-              channel
-            );
-          }) })
-        ]
-      }
-    ) }) })
-  ] });
-};
-const container$1 = "reach-styles-module__container___7dvcd";
-const controlsGroup = "reach-styles-module__controlsGroup___zKKiD";
-const styles$5 = {
-  container: container$1,
-  controlsGroup
-};
-const ActionBar = () => {
-  return /* @__PURE__ */ jsx("div", { className: styles$5.container, children: /* @__PURE__ */ jsxs("div", { className: styles$5.controlsGroup, children: [
-    /* @__PURE__ */ jsx(DateRangePicker, {}),
-    /* @__PURE__ */ jsx(ChannelFilter, {})
-  ] }) });
-};
-const useMetricsConfig = () => {
-  const { t } = useTranslation();
-  return useMemo(
-    () => [
-      {
-        id: "ads_spend",
-        title: t("dashboard.metrics.ads_spend"),
-        description: t("dashboard.metrics.ads_spend_description"),
-        dataKey: "ads_spend",
-        formatter: (value) => value ? `$${Number(value).toFixed(2)}` : "0"
-      },
-      {
-        id: "measured_revenue",
-        title: t("dashboard.metrics.measured_revenue"),
-        description: t("dashboard.metrics.measured_revenue_description"),
-        dataKey: "measured_revenue",
-        formatter: (value) => value ? `$${Number(value).toFixed(2)}` : "0"
-      },
-      {
-        id: "measured_conversions",
-        title: t("dashboard.metrics.measured_conversions"),
-        description: t("dashboard.metrics.measured_conversions_description"),
-        dataKey: "measured_conversions",
-        formatter: (value) => value ? `${Number(value).toFixed(0)}` : "0"
-      },
-      {
-        id: "roas",
-        title: t("dashboard.metrics.roas"),
-        description: t("dashboard.metrics.roas_description"),
-        dataKey: "roas",
-        formatter: (value) => value ? `${value}x` : "0"
-      },
-      {
-        id: "impressions",
-        title: t("dashboard.metrics.impressions"),
-        description: t("dashboard.metrics.impressions_description"),
-        dataKey: "impressions",
-        formatter: (value) => value ? value.toLocaleString() : "0"
-      },
-      {
-        id: "clicks",
-        title: t("dashboard.metrics.clicks"),
-        description: t("dashboard.metrics.clicks_description"),
-        dataKey: "clicks",
-        formatter: (value) => value ? value.toLocaleString() : "0"
-      },
-      {
-        id: "website_visitors",
-        title: t("dashboard.metrics.website_visitors"),
-        description: t("dashboard.metrics.website_visitors_description"),
-        dataKey: "website_visitors",
-        formatter: (value) => value ? value.toLocaleString() : "0"
-      },
-      {
-        id: "new_leads",
-        title: t("dashboard.metrics.new_leads"),
-        description: t("dashboard.metrics.new_leads_description"),
-        dataKey: "new_leads",
-        formatter: (value) => value ? value.toLocaleString() : "0"
-      },
-      {
-        id: "customer_ltv",
-        title: t("dashboard.metrics.customer_ltv"),
-        description: t("dashboard.metrics.customer_ltv_description"),
-        dataKey: "customer_ltv",
-        formatter: (value) => value ? `$${Number(value).toFixed(2)}` : "0"
-      }
-    ],
-    [t]
-  );
-};
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-const card = "reach-styles-module__card___16dhP";
-const content = "reach-styles-module__content___pYRpR";
-const header$1 = "reach-styles-module__header___Yxq4J";
-const titleRow = "reach-styles-module__titleRow___AdYCN";
-const titleContainer = "reach-styles-module__titleContainer___4Sg-1";
-const rightColumn = "reach-styles-module__rightColumn___Qm7Pr";
-const cardTitle = "reach-styles-module__cardTitle___pgJm7";
-const infoIcon = "reach-styles-module__infoIcon___xQWFv";
-const platformIcon = "reach-styles-module__platformIcon___K2TuN";
-const tooltipText = "reach-styles-module__tooltipText___jQMnv";
-const valueContainer = "reach-styles-module__valueContainer___VBnjC";
-const metricValue = "reach-styles-module__metricValue___6vxdH";
-const footer = "reach-styles-module__footer___HPW6-";
-const footerContent = "reach-styles-module__footerContent___znjhg";
-const positive = "reach-styles-module__positive___-z57U";
-const negative = "reach-styles-module__negative___oWYJQ";
-const trendIcon = "reach-styles-module__trendIcon___Bn2Kv";
-const footerText = "reach-styles-module__footerText___8661C";
-const titleSkeleton = "reach-styles-module__titleSkeleton___EHM42";
-const infoIconSkeleton = "reach-styles-module__infoIconSkeleton___Xqch0";
-const badgeSkeleton = "reach-styles-module__badgeSkeleton___zfXXM";
-const valueSkeleton = "reach-styles-module__valueSkeleton___GuhQN";
-const footerSkeleton = "reach-styles-module__footerSkeleton___aeBcZ";
-const styles$4 = {
-  card,
-  content,
-  header: header$1,
-  titleRow,
-  titleContainer,
-  rightColumn,
-  cardTitle,
-  infoIcon,
-  platformIcon,
-  tooltipText,
-  valueContainer,
-  metricValue,
-  footer,
-  footerContent,
-  positive,
-  negative,
-  trendIcon,
-  footerText,
-  titleSkeleton,
-  infoIconSkeleton,
-  badgeSkeleton,
-  valueSkeleton,
-  footerSkeleton
-};
-const MetricCard = ({
-  title: title2,
-  value,
-  description: description2,
-  isLoading,
-  className,
-  sources
-}) => {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Card, { className: `${styles$4.card} ${className}`, children: /* @__PURE__ */ jsxs("div", { className: styles$4.content, children: [
-      /* @__PURE__ */ jsx("div", { className: styles$4.header, children: /* @__PURE__ */ jsxs("div", { className: styles$4.titleRow, children: [
-        /* @__PURE__ */ jsx(
-          Skeleton,
-          {
-            className: styles$4.titleSkeleton,
-            "data-testid": "title-skeleton"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: styles$4.rightColumn, children: [
-          /* @__PURE__ */ jsx(
-            Skeleton,
-            {
-              className: styles$4.infoIconSkeleton,
-              "data-testid": "info-icon-skeleton"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Skeleton,
-            {
-              className: styles$4.badgeSkeleton,
-              "data-testid": "badge-skeleton"
-            }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          className: styles$4.valueSkeleton,
-          "data-testid": "value-skeleton"
-        }
-      )
-    ] }) });
-  }
-  const getSourceIconAndTooltip = (sources2) => {
-    if ((sources2 == null ? void 0 : sources2.length) === 1) {
-      if (sources2[0].type === "google")
-        return {
-          icon: /* @__PURE__ */ jsx(GoogleIcon, { className: styles$4.platformIcon }),
-          tooltip: `${description2} (Google Ads)`
-        };
-      if (sources2[0].type === "meta")
-        return {
-          icon: /* @__PURE__ */ jsx(MetaIcon, { className: styles$4.platformIcon }),
-          tooltip: `${description2} (Meta Ads)`
-        };
-    }
-    return {
-      icon: /* @__PURE__ */ jsx(
-        TvMinimalPlayIcon,
-        {
-          className: styles$4.platformIcon,
-          "data-testid": "all-channels-icon"
-        }
-      ),
-      tooltip: `${description2} (All Channels)`
-    };
-  };
-  const { icon: icon2, tooltip } = getSourceIconAndTooltip(sources);
-  return /* @__PURE__ */ jsx(Card, { className: cn(styles$4.card, className), children: /* @__PURE__ */ jsxs("div", { className: styles$4.content, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$4.header, children: /* @__PURE__ */ jsxs("div", { className: styles$4.titleRow, children: [
-      /* @__PURE__ */ jsx("div", { className: styles$4.titleContainer, children: /* @__PURE__ */ jsx("span", { className: styles$4.cardTitle, children: title2 }) }),
-      /* @__PURE__ */ jsx("div", { className: styles$4.rightColumn, children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { children: icon2 }),
-        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: styles$4.tooltipText, children: tooltip }) })
-      ] }) }) })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: styles$4.valueContainer, children: /* @__PURE__ */ jsx("div", { className: styles$4.metricValue, children: value != null ? value : "0" }) })
-  ] }) });
-};
-const metricsContainer$1 = "reach-styles-module__metricsContainer___sLSU8";
-const styles$3 = {
-  metricsContainer: metricsContainer$1
-};
-const MetricsRow = () => {
-  const { state } = useDashboardFilterContext();
-  const { data, isLoading, sources } = useCombinedMetrics(
-    state.dateRange,
-    state.channel
-  );
-  const metricsConfig = useMetricsConfig();
-  return /* @__PURE__ */ jsx("div", { className: styles$3.metricsContainer, children: metricsConfig.map((metric) => /* @__PURE__ */ jsx(
-    MetricCard,
-    {
-      title: metric.title,
-      value: metric.formatter(data == null ? void 0 : data[metric.dataKey]),
-      description: metric.description,
-      isLoading,
-      sources: sources.map((source) => ({
-        icon: source === "google" ? /* @__PURE__ */ jsx(GoogleIcon, {}) : /* @__PURE__ */ jsx(MetaIcon, {}),
-        type: source
-      }))
-    },
-    metric.id
-  )) });
-};
-const THEMES = { light: "", dark: ".dark" };
-const ChartContext = React.createContext(null);
-function useChart() {
-  const context = React.useContext(ChartContext);
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-  return context;
-}
-const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-chart": chartId,
-      ref,
-      className: cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
-      ]
-    }
-  ) });
-});
-ChartContainer.displayName = "Chart";
-const ChartStyle = ({ id, config }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme || config2.color
-  );
-  if (!colorConfig.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "style",
-    {
-      dangerouslySetInnerHTML: {
-        __html: Object.entries(THEMES).map(
-          ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig.map(([key, itemConfig]) => {
-            var _a;
-            const color = ((_a = itemConfig.theme) == null ? void 0 : _a[theme]) || itemConfig.color;
-            return color ? `  --color-${key}: ${color};` : null;
-          }).join("\n")}
-}
-`
-        ).join("\n")
-      }
-    }
-  );
-};
-const ChartTooltipContent = React.forwardRef(
-  ({
-    active,
-    payload,
-    className,
-    indicator = "dot",
-    hideLabel = false,
-    hideIndicator = false,
-    label,
-    labelFormatter,
-    labelClassName,
-    formatter,
-    color,
-    nameKey,
-    labelKey
-  }, ref) => {
-    const { config } = useChart();
-    const tooltipLabel2 = React.useMemo(() => {
-      var _a;
-      if (hideLabel || !(payload == null ? void 0 : payload.length)) {
-        return null;
-      }
-      const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value = !labelKey && typeof label === "string" ? ((_a = config[label]) == null ? void 0 : _a.label) || label : itemConfig == null ? void 0 : itemConfig.label;
-      if (labelFormatter) {
-        return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
-      }
-      if (!value) {
-        return null;
-      }
-      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey
-    ]);
-    if (!active || !(payload == null ? void 0 : payload.length)) {
-      return null;
-    }
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
-        ),
-        children: [
-          !nestLabel ? tooltipLabel2 : null,
-          /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                ),
-                children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                        {
-                          "h-2.5 w-2.5": indicator === "dot",
-                          "w-1": indicator === "line",
-                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                          "my-0.5": nestLabel && indicator === "dashed"
-                        }
-                      ),
-                      style: {
-                        "--color-bg": indicatorColor,
-                        "--color-border": indicatorColor
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
-                          nestLabel ? tooltipLabel2 : null,
-                          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
-                        ] }),
-                        item.value && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
-                      ]
-                    }
-                  )
-                ] })
-              },
-              item.dataKey
-            );
-          }) })
-        ]
-      }
-    );
-  }
-);
-ChartTooltipContent.displayName = "ChartTooltip";
-const ChartLegendContent = React.forwardRef(
-  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
-    const { config } = useChart();
-    if (!(payload == null ? void 0 : payload.length)) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        ),
-        children: payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              ),
-              children: [
-                (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "h-2 w-2 shrink-0 rounded-[2px]",
-                    style: {
-                      backgroundColor: item.color
-                    }
-                  }
-                ),
-                itemConfig == null ? void 0 : itemConfig.label
-              ]
-            },
-            item.value
-          );
-        })
-      }
-    );
-  }
-);
-ChartLegendContent.displayName = "ChartLegend";
-function getPayloadConfigFromPayload(config, payload, key) {
-  if (typeof payload !== "object" || payload === null) {
-    return void 0;
-  }
-  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-  let configLabelKey = key;
-  if (key in payload && typeof payload[key] === "string") {
-    configLabelKey = payload[key];
-  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
-    configLabelKey = payloadPayload[key];
-  }
-  return configLabelKey in config ? config[configLabelKey] : config[key];
-}
-const chartCard = "reach-styles-module__chartCard___uu68R";
-const chartHeader = "reach-styles-module__chartHeader___djnhO";
-const chartTitleSection = "reach-styles-module__chartTitleSection___T142a";
-const chartTitle = "reach-styles-module__chartTitle___hEksh";
-const chartDateRange = "reach-styles-module__chartDateRange___LZWCQ";
-const dateContainer = "reach-styles-module__dateContainer___ZZOzN";
-const dateIcon = "reach-styles-module__dateIcon___DqCwb";
-const dateText = "reach-styles-module__dateText___rqjcQ";
-const chartContent = "reach-styles-module__chartContent___1DOVs";
-const chartContainer = "reach-styles-module__chartContainer___wysu3";
-const skeletonContainer$1 = "reach-styles-module__skeletonContainer___Fv6Gl";
-const chartSkeleton = "reach-styles-module__chartSkeleton___VRRcE";
-const tooltipContainer = "reach-styles-module__tooltipContainer___yNPN6";
-const tooltipGrid = "reach-styles-module__tooltipGrid___M69Z-";
-const tooltipLabel = "reach-styles-module__tooltipLabel___k90L-";
-const tooltipValue = "reach-styles-module__tooltipValue___76dDZ";
-const areaGradientSpend = "reach-styles-module__areaGradientSpend___428-Z";
-const areaGradientSpendEnd = "reach-styles-module__areaGradientSpendEnd___EOpKD";
-const areaGradientRevenue = "reach-styles-module__areaGradientRevenue___fB5a0";
-const areaGradientRevenueEnd = "reach-styles-module__areaGradientRevenueEnd___X2rf-";
-const legendSpend = "reach-styles-module__legendSpend___-MU-z";
-const legendRevenue = "reach-styles-module__legendRevenue___kWA1z";
-const styles$2 = {
-  chartCard,
-  chartHeader,
-  chartTitleSection,
-  chartTitle,
-  chartDateRange,
-  dateContainer,
-  dateIcon,
-  dateText,
-  chartContent,
-  chartContainer,
-  skeletonContainer: skeletonContainer$1,
-  chartSkeleton,
-  tooltipContainer,
-  tooltipGrid,
-  tooltipLabel,
-  tooltipValue,
-  areaGradientSpend,
-  areaGradientSpendEnd,
-  areaGradientRevenue,
-  areaGradientRevenueEnd,
-  legendSpend,
-  legendRevenue
-};
-const ROASChartLegend = () => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-center gap-2 mt-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${styles$2.legendSpend}` }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium ml-1", children: t("dashboard.channel_performance.spend") })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${styles$2.legendRevenue}` }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium ml-1", children: t("dashboard.channel_performance.revenue") })
-    ] })
-  ] });
-};
-const useCombinedTimeSeriesMetrics = (dateRange, channel) => {
-  const {
-    data: googleData,
-    isLoading: googleIsLoading,
-    error: googleError
-  } = useTimeSeriesMetrics$1(dateRange);
-  const {
-    data: metaData,
-    isLoading: metaIsLoading,
-    error: metaError
-  } = useTimeSeriesMetrics(dateRange);
-  const data = useMemo(() => {
-    if (!googleData && !metaData) return [];
-    const dateMap = /* @__PURE__ */ new Map();
-    if (channel === "google" || channel === "all") {
-      googleData == null ? void 0 : googleData.forEach((point) => {
-        dateMap.set(point.date, {
-          date: point.date,
-          ads_spend: point.ads_spend || "0",
-          measured_revenue: point.measured_revenue || "0"
-        });
-      });
-    }
-    if (channel === "meta" || channel === "all") {
-      metaData == null ? void 0 : metaData.forEach((point) => {
-        const existing = dateMap.get(point.date);
-        dateMap.set(point.date, {
-          date: point.date,
-          ads_spend: ((Number(existing == null ? void 0 : existing.ads_spend) || 0) + (Number(point.ads_spend) || 0)).toString(),
-          measured_revenue: ((Number(existing == null ? void 0 : existing.measured_revenue) || 0) + (Number(point.measured_revenue) || 0)).toString()
-        });
-      });
-    }
-    const combinedData = Array.from(dateMap.values()).sort(
-      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
-    );
-    let spendTotal = 0;
-    let revenueTotal = 0;
-    return combinedData.map((point) => {
-      spendTotal += Number(point.ads_spend) || 0;
-      revenueTotal += Number(point.measured_revenue) || 0;
-      const roasValue = spendTotal > 0 ? Number((revenueTotal / spendTotal).toFixed(2)) : 0;
-      return {
-        ...point,
-        cumulative_spend: spendTotal,
-        cumulative_revenue: revenueTotal,
-        cumulative_roas: roasValue
-      };
-    });
-  }, [googleData, metaData, channel]);
-  return {
-    data,
-    isLoading: googleIsLoading || metaIsLoading,
-    error: googleError || metaError || null
-  };
-};
-const formatCurrency = (amount) => new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2
-}).format(amount);
-const ROASChart = ({ height }) => {
-  const { state } = useDashboardFilterContext();
-  const { data: cumulativeData, isLoading } = useCombinedTimeSeriesMetrics(
-    state.dateRange,
-    state.channel
-  );
-  const { t } = useTranslation();
-  const chartConfig = {
-    spend: {
-      label: t("total_ads_spend"),
-      color: "var(--reach-destructive)"
-    },
-    revenue: {
-      label: t("revenue"),
-      color: "var(--reach-primary)"
-    }
-  };
-  const maxValue = useMemo(() => {
-    if (!cumulativeData.length) return 0;
-    return Math.max(
-      cumulativeData[cumulativeData.length - 1].cumulative_spend,
-      cumulativeData[cumulativeData.length - 1].cumulative_revenue
-    );
-  }, [cumulativeData]);
-  const yAxisMax = useMemo(() => {
-    if (maxValue <= 0) return 10;
-    const magnitude = Math.pow(10, Math.floor(Math.log10(maxValue)));
-    return Math.ceil(maxValue / magnitude) * magnitude;
-  }, [maxValue]);
-  return /* @__PURE__ */ jsxs(Card, { className: styles$2.chartCard, children: [
-    /* @__PURE__ */ jsx(CardHeader, { className: styles$2.chartHeader, children: /* @__PURE__ */ jsxs("div", { className: styles$2.chartTitleSection, children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: styles$2.chartTitle, children: t("dashboard.roas_chart.title") }),
-      /* @__PURE__ */ jsx(ROASChartLegend, {})
-    ] }) }),
-    /* @__PURE__ */ jsx(CardContent, { className: styles$2.chartContent, children: isLoading ? /* @__PURE__ */ jsx("div", { className: styles$2.chartContainer, children: /* @__PURE__ */ jsx(Skeleton, { className: styles$2.chartSkeleton }) }) : /* @__PURE__ */ jsx(
-      ChartContainer,
-      {
-        config: chartConfig,
-        className: cn(
-          `aspect-auto h-[${height}px] w-full`,
-          styles$2.chartContainer
-        ),
-        children: /* @__PURE__ */ jsxs(AreaChart, { data: cumulativeData, children: [
-          /* @__PURE__ */ jsxs("defs", { children: [
-            /* @__PURE__ */ jsxs("linearGradient", { id: "fillSpend", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ jsx("stop", { offset: "5%", className: styles$2.areaGradientSpend }),
-              /* @__PURE__ */ jsx("stop", { offset: "95%", className: styles$2.areaGradientSpendEnd })
-            ] }),
-            /* @__PURE__ */ jsxs("linearGradient", { id: "fillRevenue", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ jsx("stop", { offset: "5%", className: styles$2.areaGradientRevenue }),
-              /* @__PURE__ */ jsx(
-                "stop",
-                {
-                  offset: "95%",
-                  className: styles$2.areaGradientRevenueEnd
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              dataKey: "date",
-              tickLine: false,
-              axisLine: false,
-              tickMargin: 8,
-              minTickGap: 32,
-              stroke: "#888888",
-              fontSize: 12
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              stroke: "#888888",
-              fontSize: 12,
-              tickLine: false,
-              axisLine: false,
-              tickFormatter: formatCurrency,
-              domain: [0, yAxisMax]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tooltip$1,
-            {
-              content: ({ active, payload }) => {
-                if (active && payload && payload.length) {
-                  const spendValue = payload[0].value;
-                  const revenueValue = payload[1].value;
-                  return /* @__PURE__ */ jsx("div", { className: styles$2.tooltipContainer, children: /* @__PURE__ */ jsxs("div", { className: styles$2.tooltipGrid, children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$2.tooltipLabel, children: t("date") }),
-                      /* @__PURE__ */ jsx("span", { className: styles$2.tooltipValue, children: payload[0].payload.date })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$2.tooltipLabel, children: t("total_ads_spend") }),
-                      /* @__PURE__ */ jsx("span", { className: styles$2.tooltipValue, children: formatCurrency(spendValue) })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$2.tooltipLabel, children: t("revenue") }),
-                      /* @__PURE__ */ jsx("span", { className: styles$2.tooltipValue, children: formatCurrency(revenueValue) })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$2.tooltipLabel, children: t("roas") }),
-                      /* @__PURE__ */ jsxs("span", { className: styles$2.tooltipValue, children: [
-                        Number(revenueValue / spendValue).toFixed(2),
-                        "x"
-                      ] })
-                    ] })
-                  ] }) });
-                }
-                return null;
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Area,
-            {
-              type: "monotone",
-              dataKey: "cumulative_spend",
-              stroke: "#FF6B6B",
-              fill: "url(#fillSpend)",
-              strokeWidth: 2,
-              name: t("total_ads_spend")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Area,
-            {
-              type: "monotone",
-              dataKey: "cumulative_revenue",
-              stroke: "#4ECDC4",
-              fill: "url(#fillRevenue)",
-              strokeWidth: 2,
-              name: t("revenue")
-            }
-          )
-        ] })
-      }
-    ) })
-  ] });
-};
-function memo(getDeps, fn, opts) {
-  var _a;
-  let deps = (_a = opts.initialDeps) != null ? _a : [];
-  let result;
-  return () => {
-    var _a2, _b, _c, _d;
-    let depTime;
-    if (opts.key && ((_a2 = opts.debug) == null ? void 0 : _a2.call(opts))) depTime = Date.now();
-    const newDeps = getDeps();
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
-    if (!depsChanged) {
-      return result;
-    }
-    deps = newDeps;
-    let resultTime;
-    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
-    result = fn(...newDeps);
-    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
-      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
-      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
-      const resultFpsPercentage = resultEndTime / 16;
-      const pad = (str, num) => {
-        str = String(str);
-        while (str.length < num) {
-          str = " " + str;
-        }
-        return str;
-      };
-      console.info(
-        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
-        `
-            font-size: .6rem;
-            font-weight: bold;
-            color: hsl(${Math.max(
-          0,
-          Math.min(120 - 120 * resultFpsPercentage, 120)
-        )}deg 100% 31%);`,
-        opts == null ? void 0 : opts.key
-      );
-    }
-    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
-    return result;
-  };
-}
-function notUndefined(value, msg) {
-  if (value === void 0) {
-    throw new Error(`Unexpected undefined${""}`);
-  } else {
-    return value;
-  }
-}
-const approxEqual = (a, b) => Math.abs(a - b) < 1;
-const debounce = (targetWindow, fn, ms) => {
-  let timeoutId;
-  return function(...args) {
-    targetWindow.clearTimeout(timeoutId);
-    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
-  };
-};
-const defaultKeyExtractor = (index) => index;
-const defaultRangeExtractor = (range) => {
-  const start = Math.max(range.startIndex - range.overscan, 0);
-  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
-  const arr = [];
-  for (let i = start; i <= end; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
-const observeElementRect = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  const handler = (rect) => {
-    const { width, height } = rect;
-    cb({ width: Math.round(width), height: Math.round(height) });
-  };
-  handler(element.getBoundingClientRect());
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
-  }
-  const observer = new targetWindow.ResizeObserver((entries) => {
-    const run = () => {
-      const entry = entries[0];
-      if (entry == null ? void 0 : entry.borderBoxSize) {
-        const box = entry.borderBoxSize[0];
-        if (box) {
-          handler({ width: box.inlineSize, height: box.blockSize });
-          return;
-        }
-      }
-      handler(element.getBoundingClientRect());
-    };
-    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
-  };
-};
-const addEventListenerOptions = {
-  passive: true
-};
-const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
-const observeElementOffset = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  let offset = 0;
-  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
-    targetWindow,
-    () => {
-      cb(offset, false);
-    },
-    instance.options.isScrollingResetDelay
-  );
-  const createHandler = (isScrolling) => () => {
-    const { horizontal, isRtl } = instance.options;
-    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
-    fallback();
-    cb(offset, isScrolling);
-  };
-  const handler = createHandler(true);
-  const endHandler = createHandler(false);
-  endHandler();
-  element.addEventListener("scroll", handler, addEventListenerOptions);
-  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
-  if (registerScrollendEvent) {
-    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
-  }
-  return () => {
-    element.removeEventListener("scroll", handler);
-    if (registerScrollendEvent) {
-      element.removeEventListener("scrollend", endHandler);
-    }
-  };
-};
-const measureElement = (element, entry, instance) => {
-  if (entry == null ? void 0 : entry.borderBoxSize) {
-    const box = entry.borderBoxSize[0];
-    if (box) {
-      const size = Math.round(
-        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
-      );
-      return size;
-    }
-  }
-  return Math.round(
-    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
-  );
-};
-const elementScroll = (offset, {
-  adjustments = 0,
-  behavior
-}, instance) => {
-  var _a, _b;
-  const toOffset = offset + adjustments;
-  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
-    [instance.options.horizontal ? "left" : "top"]: toOffset,
-    behavior
-  });
-};
-class Virtualizer {
-  constructor(opts) {
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.targetWindow = null;
-    this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
-    this.measurementsCache = [];
-    this.itemSizeCache = /* @__PURE__ */ new Map();
-    this.pendingMeasuredCacheIndexes = [];
-    this.scrollRect = null;
-    this.scrollOffset = null;
-    this.scrollDirection = null;
-    this.scrollAdjustments = 0;
-    this.elementsCache = /* @__PURE__ */ new Map();
-    this.observer = /* @__PURE__ */ (() => {
-      let _ro = null;
-      const get = () => {
-        if (_ro) {
-          return _ro;
-        }
-        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
-          return null;
-        }
-        return _ro = new this.targetWindow.ResizeObserver((entries) => {
-          entries.forEach((entry) => {
-            const run = () => {
-              this._measureElement(entry.target, entry);
-            };
-            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-          });
-        });
-      };
-      return {
-        disconnect: () => {
-          var _a;
-          (_a = get()) == null ? void 0 : _a.disconnect();
-          _ro = null;
-        },
-        observe: (target) => {
-          var _a;
-          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
-        },
-        unobserve: (target) => {
-          var _a;
-          return (_a = get()) == null ? void 0 : _a.unobserve(target);
-        }
-      };
-    })();
-    this.range = null;
-    this.setOptions = (opts2) => {
-      Object.entries(opts2).forEach(([key, value]) => {
-        if (typeof value === "undefined") delete opts2[key];
-      });
-      this.options = {
-        debug: false,
-        initialOffset: 0,
-        overscan: 1,
-        paddingStart: 0,
-        paddingEnd: 0,
-        scrollPaddingStart: 0,
-        scrollPaddingEnd: 0,
-        horizontal: false,
-        getItemKey: defaultKeyExtractor,
-        rangeExtractor: defaultRangeExtractor,
-        onChange: () => {
-        },
-        measureElement,
-        initialRect: { width: 0, height: 0 },
-        scrollMargin: 0,
-        gap: 0,
-        indexAttribute: "data-index",
-        initialMeasurementsCache: [],
-        lanes: 1,
-        isScrollingResetDelay: 150,
-        enabled: true,
-        isRtl: false,
-        useScrollendEvent: true,
-        useAnimationFrameWithResizeObserver: false,
-        ...opts2
-      };
-    };
-    this.notify = (sync) => {
-      var _a, _b;
-      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
-    };
-    this.maybeNotify = memo(
-      () => {
-        this.calculateRange();
-        return [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ];
-      },
-      (isScrolling) => {
-        this.notify(isScrolling);
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "maybeNotify",
-        debug: () => this.options.debug,
-        initialDeps: [
-          this.isScrolling,
-          this.range ? this.range.startIndex : null,
-          this.range ? this.range.endIndex : null
-        ]
-      }
-    );
-    this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach((d) => d());
-      this.unsubs = [];
-      this.observer.disconnect();
-      this.scrollElement = null;
-      this.targetWindow = null;
-    };
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
-      };
-    };
-    this._willUpdate = () => {
-      var _a2;
-      var _a;
-      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
-      if (this.scrollElement !== scrollElement) {
-        this.cleanup();
-        if (!scrollElement) {
-          this.maybeNotify();
-          return;
-        }
-        this.scrollElement = scrollElement;
-        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
-          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
-        } else {
-          this.targetWindow = (_a2 = (_a = this.scrollElement) == null ? void 0 : _a.window) != null ? _a2 : null;
-        }
-        this.elementsCache.forEach((cached) => {
-          this.observer.observe(cached);
-        });
-        this._scrollToOffset(this.getScrollOffset(), {
-          adjustments: void 0,
-          behavior: void 0
-        });
-        this.unsubs.push(
-          this.options.observeElementRect(this, (rect) => {
-            this.scrollRect = rect;
-            this.maybeNotify();
-          })
-        );
-        this.unsubs.push(
-          this.options.observeElementOffset(this, (offset, isScrolling) => {
-            this.scrollAdjustments = 0;
-            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
-            this.scrollOffset = offset;
-            this.isScrolling = isScrolling;
-            this.maybeNotify();
-          })
-        );
-      }
-    };
-    this.getSize = () => {
-      var _a;
-      if (!this.options.enabled) {
-        this.scrollRect = null;
-        return 0;
-      }
-      this.scrollRect = (_a = this.scrollRect) != null ? _a : this.options.initialRect;
-      return this.scrollRect[this.options.horizontal ? "width" : "height"];
-    };
-    this.getScrollOffset = () => {
-      var _a;
-      if (!this.options.enabled) {
-        this.scrollOffset = null;
-        return 0;
-      }
-      this.scrollOffset = (_a = this.scrollOffset) != null ? _a : typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset;
-      return this.scrollOffset;
-    };
-    this.getFurthestMeasurement = (measurements, index) => {
-      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
-      const furthestMeasurements = /* @__PURE__ */ new Map();
-      for (let m = index - 1; m >= 0; m--) {
-        const measurement = measurements[m];
-        if (furthestMeasurementsFound.has(measurement.lane)) {
-          continue;
-        }
-        const previousFurthestMeasurement = furthestMeasurements.get(
-          measurement.lane
-        );
-        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
-          furthestMeasurements.set(measurement.lane, measurement);
-        } else if (measurement.end < previousFurthestMeasurement.end) {
-          furthestMeasurementsFound.set(measurement.lane, true);
-        }
-        if (furthestMeasurementsFound.size === this.options.lanes) {
-          break;
-        }
-      }
-      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
-        if (a.end === b.end) {
-          return a.index - b.index;
-        }
-        return a.end - b.end;
-      })[0] : void 0;
-    };
-    this.getMeasurementOptions = memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey,
-        this.options.enabled
-      ],
-      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
-        this.pendingMeasuredCacheIndexes = [];
-        return {
-          count,
-          paddingStart,
-          scrollMargin,
-          getItemKey,
-          enabled
-        };
-      },
-      {
-        key: false
-      }
-    );
-    this.getMeasurements = memo(
-      () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
-        if (!enabled) {
-          this.measurementsCache = [];
-          this.itemSizeCache.clear();
-          return [];
-        }
-        if (this.measurementsCache.length === 0) {
-          this.measurementsCache = this.options.initialMeasurementsCache;
-          this.measurementsCache.forEach((item) => {
-            this.itemSizeCache.set(item.key, item.size);
-          });
-        }
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        const measurements = this.measurementsCache.slice(0, min);
-        for (let i = min; i < count; i++) {
-          const key = getItemKey(i);
-          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
-          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
-          const measuredSize = itemSizeCache.get(key);
-          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
-          const end = start + size;
-          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
-          measurements[i] = {
-            index: i,
-            start,
-            size,
-            end,
-            key,
-            lane
-          };
-        }
-        this.measurementsCache = measurements;
-        return measurements;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getMeasurements",
-        debug: () => this.options.debug
-      }
-    );
-    this.calculateRange = memo(
-      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
-      (measurements, outerSize, scrollOffset) => {
-        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset
-        }) : null;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "calculateRange",
-        debug: () => this.options.debug
-      }
-    );
-    this.getVirtualIndexes = memo(
-      () => {
-        let startIndex = null;
-        let endIndex = null;
-        const range = this.calculateRange();
-        if (range) {
-          startIndex = range.startIndex;
-          endIndex = range.endIndex;
-        }
-        return [
-          this.options.rangeExtractor,
-          this.options.overscan,
-          this.options.count,
-          startIndex,
-          endIndex
-        ];
-      },
-      (rangeExtractor, overscan, count, startIndex, endIndex) => {
-        return startIndex === null || endIndex === null ? [] : rangeExtractor({
-          startIndex,
-          endIndex,
-          overscan,
-          count
-        });
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
-        debug: () => this.options.debug
-      }
-    );
-    this.indexFromElement = (node) => {
-      const attributeName = this.options.indexAttribute;
-      const indexStr = node.getAttribute(attributeName);
-      if (!indexStr) {
-        console.warn(
-          `Missing attribute name '${attributeName}={index}' on measured element.`
-        );
-        return -1;
-      }
-      return parseInt(indexStr, 10);
-    };
-    this._measureElement = (node, entry) => {
-      const index = this.indexFromElement(node);
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return;
-      }
-      const key = item.key;
-      const prevNode = this.elementsCache.get(key);
-      if (prevNode !== node) {
-        if (prevNode) {
-          this.observer.unobserve(prevNode);
-        }
-        this.observer.observe(node);
-        this.elementsCache.set(key, node);
-      }
-      if (node.isConnected) {
-        this.resizeItem(index, this.options.measureElement(node, entry, this));
-      }
-    };
-    this.resizeItem = (index, size) => {
-      var _a;
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return;
-      }
-      const itemSize = (_a = this.itemSizeCache.get(item.key)) != null ? _a : item.size;
-      const delta = size - itemSize;
-      if (delta !== 0) {
-        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
-          if (process.env.NODE_ENV !== "production" && this.options.debug) {
-            console.info("correction", delta);
-          }
-          this._scrollToOffset(this.getScrollOffset(), {
-            adjustments: this.scrollAdjustments += delta,
-            behavior: void 0
-          });
-        }
-        this.pendingMeasuredCacheIndexes.push(item.index);
-        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
-        this.notify(false);
-      }
-    };
-    this.measureElement = (node) => {
-      if (!node) {
-        this.elementsCache.forEach((cached, key) => {
-          if (!cached.isConnected) {
-            this.observer.unobserve(cached);
-            this.elementsCache.delete(key);
-          }
-        });
-        return;
-      }
-      this._measureElement(node, void 0);
-    };
-    this.getVirtualItems = memo(
-      () => [this.getVirtualIndexes(), this.getMeasurements()],
-      (indexes, measurements) => {
-        const virtualItems = [];
-        for (let k = 0, len = indexes.length; k < len; k++) {
-          const i = indexes[k];
-          const measurement = measurements[i];
-          virtualItems.push(measurement);
-        }
-        return virtualItems;
-      },
-      {
-        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
-        debug: () => this.options.debug
-      }
-    );
-    this.getVirtualItemForOffset = (offset) => {
-      const measurements = this.getMeasurements();
-      if (measurements.length === 0) {
-        return void 0;
-      }
-      return notUndefined(
-        measurements[findNearestBinarySearch(
-          0,
-          measurements.length - 1,
-          (index) => notUndefined(measurements[index]).start,
-          offset
-        )]
-      );
-    };
-    this.getOffsetForAlignment = (toOffset, align) => {
-      const size = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        if (toOffset >= scrollOffset + size) {
-          align = "end";
-        }
-      }
-      if (align === "end") {
-        toOffset -= size;
-      }
-      const scrollSizeProp = this.options.horizontal ? "scrollWidth" : "scrollHeight";
-      const scrollSize = this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[scrollSizeProp] : this.scrollElement[scrollSizeProp] : 0;
-      const maxOffset = scrollSize - size;
-      return Math.max(Math.min(maxOffset, toOffset), 0);
-    };
-    this.getOffsetForIndex = (index, align = "auto") => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      const item = this.measurementsCache[index];
-      if (!item) {
-        return void 0;
-      }
-      const size = this.getSize();
-      const scrollOffset = this.getScrollOffset();
-      if (align === "auto") {
-        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
-          align = "end";
-        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
-          align = "start";
-        } else {
-          return [scrollOffset, align];
-        }
-      }
-      const centerOffset = item.start - this.options.scrollPaddingStart + (item.size - size) / 2;
-      switch (align) {
-        case "center":
-          return [this.getOffsetForAlignment(centerOffset, align), align];
-        case "end":
-          return [
-            this.getOffsetForAlignment(
-              item.end + this.options.scrollPaddingEnd,
-              align
-            ),
-            align
-          ];
-        default:
-          return [
-            this.getOffsetForAlignment(
-              item.start - this.options.scrollPaddingStart,
-              align
-            ),
-            align
-          ];
-      }
-    };
-    this.isDynamicMode = () => this.elementsCache.size > 0;
-    this.cancelScrollToIndex = () => {
-      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
-        this.scrollToIndexTimeoutId = null;
-      }
-    };
-    this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      const offsetAndAlign = this.getOffsetForIndex(index, initialAlign);
-      if (!offsetAndAlign) return;
-      const [offset, align] = offsetAndAlign;
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
-        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-          this.scrollToIndexTimeoutId = null;
-          const elementInDOM = this.elementsCache.has(
-            this.options.getItemKey(index)
-          );
-          if (elementInDOM) {
-            const [latestOffset] = notUndefined(
-              this.getOffsetForIndex(index, align)
-            );
-            if (!approxEqual(latestOffset, this.getScrollOffset())) {
-              this.scrollToIndex(index, { align, behavior });
-            }
-          } else {
-            this.scrollToIndex(index, { align, behavior });
-          }
-        });
-      }
-    };
-    this.scrollBy = (delta, { behavior } = {}) => {
-      this.cancelScrollToIndex();
-      if (behavior === "smooth" && this.isDynamicMode()) {
-        console.warn(
-          "The `smooth` scroll behavior is not fully supported with dynamic size."
-        );
-      }
-      this._scrollToOffset(this.getScrollOffset() + delta, {
-        adjustments: void 0,
-        behavior
-      });
-    };
-    this.getTotalSize = () => {
-      var _a2;
-      var _a;
-      const measurements = this.getMeasurements();
-      let end;
-      if (measurements.length === 0) {
-        end = this.options.paddingStart;
-      } else {
-        end = this.options.lanes === 1 ? (_a2 = (_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) != null ? _a2 : 0 : Math.max(
-          ...measurements.slice(-this.options.lanes).map((m) => m.end)
-        );
-      }
-      return Math.max(
-        end - this.options.scrollMargin + this.options.paddingEnd,
-        0
-      );
-    };
-    this._scrollToOffset = (offset, {
-      adjustments,
-      behavior
-    }) => {
-      this.options.scrollToFn(offset, { behavior, adjustments }, this);
-    };
-    this.measure = () => {
-      this.itemSizeCache = /* @__PURE__ */ new Map();
-      this.notify(false);
-    };
-    this.setOptions(opts);
-  }
-}
-const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
-  while (low <= high) {
-    const middle = (low + high) / 2 | 0;
-    const currentValue = getCurrentValue(middle);
-    if (currentValue < value) {
-      low = middle + 1;
-    } else if (currentValue > value) {
-      high = middle - 1;
-    } else {
-      return middle;
-    }
-  }
-  if (low > 0) {
-    return low - 1;
-  } else {
-    return 0;
-  }
-};
-function calculateRange({
-  measurements,
-  outerSize,
-  scrollOffset
-}) {
-  const count = measurements.length - 1;
-  const getOffset = (index) => measurements[index].start;
-  const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
-  let endIndex = startIndex;
-  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
-    endIndex++;
-  }
-  return { startIndex, endIndex };
-}
-const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function useVirtualizerBase(options2) {
-  const rerender = React.useReducer(() => ({}), {})[1];
-  const resolvedOptions = {
-    ...options2,
-    onChange: (instance2, sync) => {
-      var _a;
-      if (sync) {
-        flushSync(rerender);
-      } else {
-        rerender();
-      }
-      (_a = options2.onChange) == null ? void 0 : _a.call(options2, instance2, sync);
-    }
-  };
-  const [instance] = React.useState(
-    () => new Virtualizer(resolvedOptions)
-  );
-  instance.setOptions(resolvedOptions);
-  useIsomorphicLayoutEffect(() => {
-    return instance._didMount();
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    return instance._willUpdate();
-  });
-  return instance;
-}
-function useVirtualizer(options2) {
-  return useVirtualizerBase({
-    observeElementRect,
-    observeElementOffset,
-    scrollToFn: elementScroll,
-    ...options2
-  });
-}
-const partnerResourcesKeys = {
-  all: ["partnerResources"],
-  byClientIds: (ids) => [...partnerResourcesKeys.all, "byClientIds", ...ids]
-};
-const getPartnerResourcesByClientIds = async (userIds, startDate, endDate) => {
-  if (!userIds.length || !startDate || !endDate) return [];
-  const formattedStartDate = formatDateToString(startDate);
-  const formattedEndDate = formatDateToString(endDate);
-  const queryParams = new URLSearchParams({
-    userIds: userIds.join(","),
-    startDate: formattedStartDate,
-    endDate: formattedEndDate
-  });
-  const response = await baseRequest(
-    `${PARTNER_USER_METRICS_PATH}/aggregate-spend-for-user-ids?${queryParams.toString()}`
-  );
-  return response.data;
-};
-const usePartnerResourcesByClientIds = (userIds = [], startDate, endDate) => {
-  return useQuery({
-    queryKey: partnerResourcesKeys.byClientIds(userIds),
-    queryFn: () => getPartnerResourcesByClientIds(userIds, startDate, endDate),
-    ...CACHE_STANDARD,
-    enabled: (userIds == null ? void 0 : userIds.length) > 0 && !!startDate && !!endDate
-  });
-};
-const SourceIcon = ({ source }) => {
-  switch (source.toLowerCase()) {
-    case "google":
-      return /* @__PURE__ */ jsx(GoogleIcon, { className: "h-4 w-4" });
-    case "meta":
-      return /* @__PURE__ */ jsx(MetaIcon, { className: "h-4 w-4" });
-    case "direct":
-      return /* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4" });
-    default:
-      return null;
-  }
-};
-const SourceCell = ({ sources }) => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sources.map((source) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ jsx(SourceIcon, { source }),
-  /* @__PURE__ */ jsx("span", { children: source[0].toUpperCase() + source.slice(1) })
-] }, source)) });
-const SpendCell = ({ amount }) => /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900", children: formatCurrency(Number(amount != null ? amount : 0)) });
-const StatusCell = ({
-  statusMap
-}) => {
-  var _a;
-  const { t } = useTranslation();
-  const paidAmount = (_a = statusMap["Paid"]) != null ? _a : 0;
-  const unpaidAmount = Object.entries(statusMap).reduce(
-    (acc, [status, amount]) => status !== "Paid" ? acc + amount : acc,
-    0
-  );
-  const isPaid = paidAmount > unpaidAmount;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `px-2 py-1 rounded-full text-sm ${isPaid ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`,
-        children: isPaid ? t("dashboard.client_acquisition.paid") : t("dashboard.client_acquisition.unpaid")
-      }
-    ),
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-4 w-4 text-gray-400 cursor-help" }) }),
-      /* @__PURE__ */ jsx(
-        TooltipContent,
-        {
-          side: "top",
-          className: "bg-white border border-gray-200 shadow-lg p-3 rounded-lg",
-          children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: t("dashboard.client_acquisition.paid") }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-emerald-600", children: formatCurrency(paidAmount) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: t("dashboard.client_acquisition.unpaid") }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900", children: formatCurrency(unpaidAmount) })
-            ] })
-          ] })
-        }
-      )
-    ] })
-  ] });
-};
-const tableCard = "reach-styles-module__tableCard___8xy0b";
-const skeletonContainer = "reach-styles-module__skeletonContainer___8EjUC";
-const platformBadge = "reach-styles-module__platformBadge___mth-X";
-const rightAligned = "reach-styles-module__rightAligned___Ou-Ub";
-const statusCell = "reach-styles-module__statusCell___32iSB";
-const statusPaid = "reach-styles-module__statusPaid___z3i6-";
-const statusUnpaid = "reach-styles-module__statusUnpaid___LSUt4";
-const badgeContainer = "reach-styles-module__badgeContainer___lZ3yD";
-const dateBadge = "reach-styles-module__dateBadge___otHgz";
-const noDataContainer = "reach-styles-module__noDataContainer___-1C3o";
-const styles$1 = {
-  tableCard,
-  skeletonContainer,
-  platformBadge,
-  rightAligned,
-  statusCell,
-  statusPaid,
-  statusUnpaid,
-  badgeContainer,
-  dateBadge,
-  noDataContainer
-};
-const ITEMS_PER_PAGE = 10;
-const ROW_HEIGHT = 75;
-const COLUMN_WIDTHS = {
-  client: "30%",
-  source: "25%",
-  totalSpent: "25%",
-  paymentStatus: "20%"
-};
-const ClientAcquisitionTable = ({ height }) => {
-  var _a, _b, _c, _d;
-  const { t } = useTranslation();
-  const [page, setPage] = useState(1);
-  const { state } = useDashboardFilterContext();
-  const parentRef = useRef(null);
-  const { data: metrics, isLoading: isLoadingMetrics } = useCombinedMetrics(
-    state.dateRange,
-    state.channel
-  );
-  const { data: resources, isLoading: isLoadingResources } = usePartnerResourcesByClientIds(
-    metrics == null ? void 0 : metrics.converted_users_ids,
-    (_a = state.dateRange) == null ? void 0 : _a.from,
-    (_b = state.dateRange) == null ? void 0 : _b.to
-  );
-  const isLoading = isLoadingMetrics || isLoadingResources;
-  const startIndex = (page - 1) * ITEMS_PER_PAGE;
-  const paginatedResources = resources == null ? void 0 : resources.slice(
-    startIndex,
-    startIndex + ITEMS_PER_PAGE
-  );
-  const totalPages = Math.ceil(((_c = resources == null ? void 0 : resources.length) != null ? _c : 0) / ITEMS_PER_PAGE);
-  const virtualizer = useVirtualizer({
-    count: (_d = paginatedResources == null ? void 0 : paginatedResources.length) != null ? _d : 0,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => ROW_HEIGHT,
-    overscan: 5
-  });
-  if (isLoading) {
-    return /* @__PURE__ */ jsxs(Card, { className: styles$1.tableCard, children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: t("dashboard.client_acquisition.title") }) }),
-      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: styles$1.skeletonContainer, children: /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-full" }) }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Card, { className: styles$1.tableCard, children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [
-      /* @__PURE__ */ jsx(CardTitle, { children: t("dashboard.client_acquisition.title") }),
-      totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setPage((p) => Math.max(1, p - 1)),
-            disabled: page === 1,
-            className: "p-1 hover:bg-gray-100 rounded disabled:opacity-50 disabled:hover:bg-transparent",
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600", children: [
-          page,
-          " / ",
-          totalPages
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
-            disabled: page === totalPages,
-            className: "p-1 hover:bg-gray-100 rounded disabled:opacity-50 disabled:hover:bg-transparent",
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { style: { width: COLUMN_WIDTHS.client }, children: t("dashboard.client_acquisition.client") }),
-        /* @__PURE__ */ jsx(TableHead, { style: { width: COLUMN_WIDTHS.source }, children: t("dashboard.client_acquisition.source") }),
-        /* @__PURE__ */ jsx(TableHead, { style: { width: COLUMN_WIDTHS.totalSpent }, children: t("dashboard.client_acquisition.total_spent") }),
-        /* @__PURE__ */ jsx(TableHead, { style: { width: COLUMN_WIDTHS.paymentStatus }, children: t("dashboard.client_acquisition.payment_status") })
-      ] }) }) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: parentRef,
-          style: { height: `${height - 120}px`, overflowY: "auto" },
-          children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, { children: virtualizer.getVirtualItems().map((virtualRow) => {
-            const resource = paginatedResources == null ? void 0 : paginatedResources[virtualRow.index];
-            if (!resource) return null;
-            return /* @__PURE__ */ jsxs(
-              TableRow,
-              {
-                className: "hover:bg-gray-50/50 transition-colors",
-                children: [
-                  /* @__PURE__ */ jsx(TableCell, { style: { width: COLUMN_WIDTHS.client }, children: resource.spend.userName }),
-                  /* @__PURE__ */ jsx(TableCell, { style: { width: COLUMN_WIDTHS.source }, children: /* @__PURE__ */ jsx(
-                    SourceCell,
-                    {
-                      sources: Object.keys(
-                        resource.spend.adSourceToAmountMap
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(TableCell, { style: { width: COLUMN_WIDTHS.totalSpent }, children: /* @__PURE__ */ jsx(SpendCell, { amount: resource.spend.totalAmount }) }),
-                  /* @__PURE__ */ jsx(
-                    TableCell,
-                    {
-                      style: { width: COLUMN_WIDTHS.paymentStatus },
-                      children: /* @__PURE__ */ jsx(
-                        StatusCell,
-                        {
-                          statusMap: resource.spend.amountToStatusMap
-                        }
-                      )
-                    }
-                  )
-                ]
-              },
-              resource.userId
-            );
-          }) }) })
-        }
-      )
-    ] }) })
-  ] }) });
-};
-const ChannelPerformance = ({ dateRange }) => {
-  var _a, _b;
-  const { t } = useTranslation();
-  const { state } = useDashboardFilterContext();
-  const { data: googleData, isLoading: isGoogleLoading } = useAggregatedMetricsByBusiness$1(
-    state.dateRange
-  );
-  const { data: metaData, isLoading: isMetaLoading } = useAggregatedMetricsByBusiness(
-    state.dateRange
-  );
-  const isLoading = isGoogleLoading || isMetaLoading;
-  const channelData = [
-    googleData && {
-      channel: "Google Ads",
-      id: "google",
-      icon: /* @__PURE__ */ jsx(GoogleIcon, { className: "h-4 w-4" }),
-      spend: googleData == null ? void 0 : googleData.ads_spend,
-      revenue: googleData == null ? void 0 : googleData.measured_revenue,
-      roas: googleData == null ? void 0 : googleData.roas,
-      newCustomers: googleData == null ? void 0 : googleData.new_customers
-    },
-    metaData && {
-      channel: "Meta Ads",
-      id: "meta",
-      icon: /* @__PURE__ */ jsx(MetaIcon, { className: "h-4 w-4" }),
-      spend: metaData == null ? void 0 : metaData.ads_spend,
-      revenue: metaData == null ? void 0 : metaData.measured_revenue,
-      roas: metaData == null ? void 0 : metaData.roas,
-      newCustomers: metaData == null ? void 0 : metaData.new_customers
-    }
-  ].filter(Boolean);
-  const getFilteredChannelData = () => {
-    if (state.channel === "all") {
-      return channelData;
-    }
-    return channelData.filter((channel) => channel.id === state.channel);
-  };
-  return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(CardTitle, { children: t("dashboard.channel_performance.title") }),
-      dateRange && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-        (_a = dateRange.from) == null ? void 0 : _a.toLocaleDateString(),
-        " -",
-        " ",
-        (_b = dateRange.to) == null ? void 0 : _b.toLocaleDateString()
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-[400px]" }) : /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { children: t("dashboard.channel_performance.channel") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t("dashboard.channel_performance.spend") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t("dashboard.channel_performance.revenue") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t("dashboard.channel_performance.roas") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t("dashboard.channel_performance.new_customers") })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: getFilteredChannelData().map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsxs(TableCell, { className: "font-medium flex gap-2 items-center", children: [
-          row.icon,
-          row.channel
-        ] }),
-        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: formatCurrency(Number(row.spend)) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: formatCurrency(Number(row.revenue)) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: `${Number(row.roas).toFixed(1)}x` }),
-        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: row.newCustomers || 0 })
-      ] }, row.channel)) })
-    ] }) })
-  ] });
-};
-const container = "reach-styles-module__container___MU7iK";
-const header = "reach-styles-module__header___yz14d";
-const actionBarContainer = "reach-styles-module__actionBarContainer___G5hpa";
-const overviewContent = "reach-styles-module__overviewContent___UZVfK";
-const metricsContainer = "reach-styles-module__metricsContainer___23m-t";
-const metricsWrapper = "reach-styles-module__metricsWrapper___DKNuR";
-const chartsGrid = "reach-styles-module__chartsGrid___ovwxR";
-const channelContent = "reach-styles-module__channelContent___Vgz1F";
-const reengagementContent = "reach-styles-module__reengagementContent___rEqt7";
-const styles = {
-  container,
-  header,
-  actionBarContainer,
-  overviewContent,
-  metricsContainer,
-  metricsWrapper,
-  chartsGrid,
-  channelContent,
-  reengagementContent
-};
-const CHART_HEIGHT = 250;
-const DashboardTabs = () => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "overview", className: styles.container, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsxs(TabsList, { children: [
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", children: t("dashboard.tabs.overview") }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "channel-performance", children: t("dashboard.tabs.channel_performance") })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: styles.actionBarContainer, children: /* @__PURE__ */ jsx(ActionBar, {}) })
-    ] }),
-    /* @__PURE__ */ jsx(TabsContent, { value: "overview", className: styles.overviewContent, children: /* @__PURE__ */ jsxs("div", { className: styles.metricsContainer, children: [
-      /* @__PURE__ */ jsx("div", { className: styles.metricsWrapper, children: /* @__PURE__ */ jsx(MetricsRow, {}) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.chartsGrid, children: [
-        /* @__PURE__ */ jsx(ROASChart, { height: CHART_HEIGHT }),
-        /* @__PURE__ */ jsx(ClientAcquisitionTable, { height: CHART_HEIGHT })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      TabsContent,
-      {
-        value: "channel-performance",
-        className: styles.channelContent,
-        children: /* @__PURE__ */ jsx(ChannelPerformance, {})
-      }
-    )
-  ] });
-};
-const bannerVariants = cva("w-full border", {
-  variants: {
-    variant: {
-      default: "bg-slate-50 border-slate-200 text-slate-700",
-      primary: "bg-blue-50 border-blue-200 text-blue-700",
-      success: "bg-green-50 border-green-200 text-green-700",
-      warning: "bg-amber-50 border-amber-200 text-amber-700",
-      error: "bg-red-50 border-red-200 text-red-700"
-    },
-    size: {
-      default: "py-1",
-      sm: "py-0.5 text-xs",
-      lg: "py-2"
-    },
-    position: {
-      default: "my-4 rounded-lg",
-      top: "rounded-none border-t border-b fixed top-0 left-0 right-0 z-50",
-      bottom: "rounded-none border-t border-b fixed bottom-0 left-0 right-0 z-50",
-      inline: "my-2 rounded-lg"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-    position: "default"
-  }
-});
-const iconMap = {
-  default: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
-  primary: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
-  success: /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" }),
-  warning: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
-  error: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" })
-};
-const Banner = React.forwardRef(
-  ({
-    className,
-    variant = "default",
-    size = "default",
-    position = "default",
-    loading = false,
-    title: title2,
-    description: description2,
-    asChild = false,
-    children,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot : Alert;
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(bannerVariants({ variant, size, position, className })),
-        ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto flex items-center py-1", children: [
-          loading ? /* @__PURE__ */ jsx(
-            Loader,
-            {
-              "data-testid": "loading-icon",
-              className: "h-4 w-4 animate-spin mr-3"
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "mr-3", children: iconMap[variant] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            title2 && /* @__PURE__ */ jsx(AlertTitle, { className: "text-sm font-medium", children: title2 }),
-            description2 && /* @__PURE__ */ jsx(AlertDescription, { className: "text-sm", children: description2 }),
-            children
-          ] })
-        ] })
-      }
-    );
-  }
-);
-Banner.displayName = "Banner";
-const AdDashboard = ({ children }) => {
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const { isLoading: isBusinessLoading, error: businessError } = useBusiness();
-  const { data: accounts, isLoading: isAccountsLoading } = useAdAccounts();
-  const { state } = useDashboardFilterContext();
-  const { data: combinedMetrics } = useCombinedMetrics(
-    state.dateRange,
-    state.channel
-  );
-  const isLoading = isBusinessLoading || isAccountsLoading;
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsx(SpinLoader, { text: ["Fetching your data", "Finishing up"] }) });
-  }
-  if (businessError) {
-    return /* @__PURE__ */ jsx("div", { children: "Error loading business data" });
-  }
-  const showNoAccounts = (accounts == null ? void 0 : accounts.length) === 0 || (accounts == null ? void 0 : accounts.every((account) => account.status === "draft"));
-  const showMetricsBanner = combinedMetrics && (!(combinedMetrics == null ? void 0 : combinedMetrics.ads_spend) || (combinedMetrics == null ? void 0 : combinedMetrics.ads_spend) == "0");
-  const showRevokedAccountsBanner = accounts == null ? void 0 : accounts.every(
-    (account) => account.status === "revoked"
-  );
-  if (children) {
-    console.log("rendering in component mode");
-    return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsxs("div", { className: styles$9.container, children: [
-      /* @__PURE__ */ jsx(DashboardTabs, {}),
-      children
-    ] }) });
-  }
-  console.log("rendering in iframe default mode");
-  return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx("div", { className: styles$9.container, children: /* @__PURE__ */ jsxs("div", { className: styles$9.innerContainer, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$9.header, children: [
-      /* @__PURE__ */ jsx(H2, { children: t("dashboard.title") }),
-      !showNoAccounts && /* @__PURE__ */ jsx(SettingsSheet, {})
-    ] }),
-    showMetricsBanner && /* @__PURE__ */ jsx(
-      Banner,
-      {
-        variant: "default",
-        title: t("dashboard.banners.metrics_crunching.title"),
-        description: t("dashboard.banners.metrics_crunching.description")
-      }
-    ),
-    showRevokedAccountsBanner && /* @__PURE__ */ jsx(
-      Banner,
-      {
-        variant: "error",
-        title: t("dashboard.banners.revoked_accounts.title"),
-        description: t("dashboard.banners.revoked_accounts.description")
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(DashboardTabs, {}),
-      showNoAccounts && /* @__PURE__ */ jsx(
-        EmptyStateLayout,
-        {
-          title: t("empty_state.analytics.title"),
-          description: t("empty_state.analytics.description"),
-          buttonText: t("empty_state.analytics.button_text"),
-          onButtonClick: () => navigate(PATHS.MEASURE_SETUP)
-        }
-      )
-    ] })
-  ] }) }) });
-};
-export {
-  AdDashboard as default
-};
-//# sourceMappingURL=AdDashboard-BEWUbw3u.js.map