@mdxui/tremor 6.0.0

package/dist/overview/components/index.js

@@ -0,0 +1,775 @@
+// src/overview/components/sections/AgentsSection.tsx
+import * as React from "react";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ProgressCircle({
+  value,
+  radius = 14,
+  strokeWidth = 3,
+  variant = "default",
+  children
+}) {
+  const normalizedRadius = radius - strokeWidth / 2;
+  const circumference = 2 * Math.PI * normalizedRadius;
+  const strokeDashoffset = circumference - value / 100 * circumference;
+  const variantColors = {
+    default: "stroke-blue-500",
+    warning: "stroke-amber-500",
+    error: "stroke-red-500",
+    success: "stroke-emerald-500"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxs("svg", { height: radius * 2, width: radius * 2, className: "rotate-[-90deg]", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "stroke-gray-200 dark:stroke-gray-800",
+          fill: "transparent",
+          strokeWidth,
+          r: normalizedRadius,
+          cx: radius,
+          cy: radius
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: variantColors[variant],
+          fill: "transparent",
+          strokeWidth,
+          strokeDasharray: circumference,
+          strokeDashoffset,
+          strokeLinecap: "round",
+          r: normalizedRadius,
+          cx: radius,
+          cy: radius
+        }
+      )
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children })
+  ] });
+}
+function Badge({
+  children,
+  variant = "default",
+  className = ""
+}) {
+  const variantClasses = {
+    default: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
+    success: "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+    warning: "bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
+    error: "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+  };
+  return /* @__PURE__ */ jsx("span", { className: twMerge("inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium", variantClasses[variant], className), children });
+}
+function ShieldCheckIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm-1.06 13.54L7.4 12l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41-5.64 5.66z" }) });
+}
+function TicketGenerationButton({ initialState }) {
+  const [enabled, setEnabled] = React.useState(initialState);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": enabled,
+      className: twMerge(
+        "relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+        enabled ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"
+      ),
+      onClick: () => setEnabled(!enabled),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: twMerge(
+            "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+            enabled ? "translate-x-4" : "translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx("div", { className: "my-6 h-px w-full bg-gray-200 dark:bg-gray-800" });
+}
+function FilterBar({
+  globalFilter,
+  setGlobalFilter,
+  registeredOnly,
+  setRegisteredOnly
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search agents...",
+          value: globalFilter,
+          onChange: (e) => setGlobalFilter(e.target.value),
+          className: "w-64 rounded-md border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: registeredOnly,
+          onChange: (e) => setRegisteredOnly(e.target.checked),
+          className: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+        }
+      ),
+      "Registered only"
+    ] })
+  ] }) });
+}
+function Pagination({
+  pageIndex,
+  pageSize,
+  totalRows,
+  onPageChange
+}) {
+  const totalPages = Math.ceil(totalRows / pageSize);
+  const startRow = pageIndex * pageSize + 1;
+  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Showing ",
+      startRow,
+      " to ",
+      endRow,
+      " of ",
+      totalRows,
+      " agents"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(pageIndex - 1),
+          disabled: pageIndex === 0,
+          className: "rounded-md border border-gray-300 px-3 py-1 disabled:opacity-50 dark:border-gray-700",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Page ",
+        pageIndex + 1,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(pageIndex + 1),
+          disabled: pageIndex >= totalPages - 1,
+          className: "rounded-md border border-gray-300 px-3 py-1 disabled:opacity-50 dark:border-gray-700",
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function formatPhoneNumber(number) {
+  return number.replace(/(\+41)(\d{2})(\d{3})(\d{2})(\d{2})/, "$1 $2 $3 $4 $5");
+}
+function formatDate(dateString) {
+  return new Date(dateString).toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  });
+}
+function getCapacityVariant(value) {
+  const fixedValue = parseFloat(value.toFixed(0));
+  if (fixedValue >= 85) return "error";
+  if (fixedValue > 60) return "warning";
+  return "default";
+}
+function MetricCard({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-semibold text-gray-900 dark:text-white", children: value })
+  ] });
+}
+function AgentsSection(props) {
+  const isTremorVariant = "agents" in props || !("totalAgents" in props) && !("activeAgents" in props);
+  if (isTremorVariant) {
+    return /* @__PURE__ */ jsx(AgentsSectionTremor, { ...props });
+  }
+  const mdxuiProps = props;
+  return /* @__PURE__ */ jsx(
+    AgentsSectionMdxui,
+    {
+      totalAgents: mdxuiProps.totalAgents ?? 0,
+      activeAgents: mdxuiProps.activeAgents ?? 0,
+      runsToday: mdxuiProps.runsToday ?? 0,
+      successRate: mdxuiProps.successRate ?? 0,
+      loading: mdxuiProps.loading ?? false,
+      topAgents: mdxuiProps.topAgents,
+      performanceData: mdxuiProps.performanceData,
+      className: mdxuiProps.className
+    }
+  );
+}
+function AgentsSectionTremor({
+  agents = [],
+  title = "Agents",
+  description = "Monitor agent performance and manage ticket generation",
+  className = ""
+}) {
+  const [globalFilter, setGlobalFilter] = React.useState("");
+  const [registeredOnly, setRegisteredOnly] = React.useState(false);
+  const [pageIndex, setPageIndex] = React.useState(0);
+  const pageSize = 16;
+  const filteredAgents = React.useMemo(() => {
+    let result = agents;
+    if (globalFilter) {
+      const lowerFilter = globalFilter.toLowerCase();
+      result = result.filter(
+        (agent) => agent.full_name.toLowerCase().includes(lowerFilter) || agent.agent_id.toLowerCase().includes(lowerFilter) || agent.email.toLowerCase().includes(lowerFilter) || agent.account.toLowerCase().includes(lowerFilter)
+      );
+    }
+    if (registeredOnly) {
+      result = result.filter((agent) => agent.registered);
+    }
+    return result;
+  }, [agents, globalFilter, registeredOnly]);
+  const paginatedAgents = React.useMemo(() => {
+    const start = pageIndex * pageSize;
+    return filteredAgents.slice(start, start + pageSize);
+  }, [filteredAgents, pageIndex]);
+  React.useEffect(() => {
+    setPageIndex(0);
+  }, []);
+  return /* @__PURE__ */ jsxs("main", { className: twMerge("", className), "data-testid": "agents-section", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-gray-900 dark:text-gray-50", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-500 sm:text-sm/6 dark:text-gray-500", children: description })
+    ] }) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx("section", { className: "mt-8", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        FilterBar,
+        {
+          globalFilter,
+          setGlobalFilter,
+          registeredOnly,
+          setRegisteredOnly
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-800", children: [
+          /* @__PURE__ */ jsx("th", { className: "whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs", children: "Agent" }),
+          /* @__PURE__ */ jsx("th", { className: "whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs", children: "Contact Information" }),
+          /* @__PURE__ */ jsx("th", { className: "whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs", children: "Contract Dates" }),
+          /* @__PURE__ */ jsx("th", { className: "whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs", children: "Account" }),
+          /* @__PURE__ */ jsx("th", { className: "whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs", children: "Capacity (mins)" }),
+          /* @__PURE__ */ jsx("th", { className: "whitespace-nowrap py-1 text-sm font-medium text-gray-900 dark:text-gray-50 sm:text-xs", children: "Ticket Generation" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: paginatedAgents.length > 0 ? paginatedAgents.map((agent) => {
+          const capacity = agent.minutes_booked > 0 ? agent.minutes_called / agent.minutes_booked * 100 : 0;
+          return /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: "group select-none border-b border-gray-100 hover:bg-[#FBFBFC] dark:border-gray-800 hover:dark:bg-gray-900",
+              children: [
+                /* @__PURE__ */ jsx("td", { className: "relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-gray-50", children: agent.full_name }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-500", children: "AgID " }),
+                    /* @__PURE__ */ jsx("span", { className: "font-mono font-medium uppercase tabular-nums text-gray-900 dark:text-gray-50", children: agent.agent_id }),
+                    /* @__PURE__ */ jsx(
+                      ShieldCheckIcon,
+                      {
+                        className: twMerge(
+                          "size-3 shrink-0",
+                          agent.registered ? "text-emerald-600 dark:text-emerald-400" : "text-gray-400 dark:text-gray-600"
+                        )
+                      }
+                    )
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-gray-50", children: formatPhoneNumber(agent.number) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-500", children: agent.email })
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "tabular-nums text-gray-900 dark:text-gray-50", children: agent.end_date ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "End: ",
+                    formatDate(agent.end_date)
+                  ] }) : /* @__PURE__ */ jsx(Badge, { className: "px-1.5 py-0.5", variant: "success", children: "Active" }) }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-gray-500 dark:text-gray-500", children: [
+                    "Start: ",
+                    formatDate(agent.start_date)
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-900 dark:text-gray-50", children: agent.account }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-500", children: "Main division" })
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2.5", children: /* @__PURE__ */ jsx(ProgressCircle, { value: capacity, radius: 14, strokeWidth: 3, variant: getCapacityVariant(capacity), children: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-gray-900 dark:text-gray-50", children: capacity.toFixed(0) }) }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-gray-900 dark:text-gray-50", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-500", children: "Called " }),
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: new Intl.NumberFormat().format(agent.minutes_called) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-500", children: [
+                      "Booked ",
+                      new Intl.NumberFormat().format(agent.minutes_booked)
+                    ] })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "relative whitespace-nowrap py-2.5 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsx(TicketGenerationButton, { initialState: agent.ticket_generation }) })
+              ]
+            },
+            agent.agent_id
+          );
+        }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 6, className: "h-24 text-center text-gray-500 dark:text-gray-400", children: "No results." }) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Pagination, { pageIndex, pageSize, totalRows: filteredAgents.length, onPageChange: setPageIndex })
+    ] }) })
+  ] });
+}
+function AgentsSectionMdxui({
+  totalAgents,
+  activeAgents,
+  runsToday,
+  successRate,
+  topAgents,
+  loading = false,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { "data-testid": "agents-section-loading", className: twMerge("animate-pulse space-y-4", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-48 rounded bg-gray-200 dark:bg-gray-700" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-24 rounded-lg bg-gray-200 dark:bg-gray-700" }, i.toString())) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: twMerge("space-y-6", className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Agents Overview" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4", children: [
+      /* @__PURE__ */ jsx(MetricCard, { label: "Total Agents", value: totalAgents }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Active Agents", value: activeAgents }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Runs Today", value: runsToday }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Success Rate", value: `${successRate}%` })
+    ] }),
+    topAgents && topAgents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-4 text-sm font-medium text-gray-700 dark:text-gray-300", children: "Top Performing Agents" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: topAgents.map((agent) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-gray-200 p-3 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300", children: agent.name.charAt(0) }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: agent.name })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            agent.runs,
+            " runs"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
+            agent.successRate,
+            "%"
+          ] })
+        ] })
+      ] }, agent.id)) })
+    ] })
+  ] });
+}
+
+// src/overview/components/sections/RetentionSection.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RetentionSection({
+  cohorts,
+  periods,
+  currentRetention,
+  trend,
+  loading = false,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "data-testid": "retention-section-loading",
+        className: twMerge2("animate-pulse space-y-4", className),
+        children: [
+          /* @__PURE__ */ jsx2("div", { className: "h-8 w-48 rounded bg-gray-200 dark:bg-gray-700" }),
+          /* @__PURE__ */ jsx2("div", { className: "h-32 rounded-lg bg-gray-200 dark:bg-gray-700" }),
+          /* @__PURE__ */ jsx2("div", { className: "h-64 rounded-lg bg-gray-200 dark:bg-gray-700" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2("section", { className: twMerge2("space-y-6", className), children: [
+    /* @__PURE__ */ jsx2("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Retention Analytics" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Current Retention" }),
+        /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-3xl font-semibold text-gray-900 dark:text-white", children: [
+          currentRetention,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2(TrendIndicator, { trend })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs2("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700", children: [
+      /* @__PURE__ */ jsx2("thead", { className: "bg-gray-50 dark:bg-gray-800", children: /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx2("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400", children: "Cohort" }),
+        /* @__PURE__ */ jsx2("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400", children: "Size" }),
+        periods.map((period) => /* @__PURE__ */ jsx2(
+          "th",
+          {
+            className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400",
+            children: period
+          },
+          period
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsx2("tbody", { className: "divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900", children: cohorts.map((cohort) => /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx2("td", { className: "whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-900 dark:text-white", children: cohort.cohort }),
+        /* @__PURE__ */ jsx2("td", { className: "whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400", children: cohort.size }),
+        cohort.retention.map((rate, idx) => /* @__PURE__ */ jsx2(
+          "td",
+          {
+            className: "whitespace-nowrap px-4 py-3 text-sm",
+            style: {
+              backgroundColor: getRetentionColor(rate)
+            },
+            children: /* @__PURE__ */ jsxs2("span", { className: "font-medium text-gray-900 dark:text-white", children: [
+              rate,
+              "%"
+            ] })
+          },
+          idx.toString()
+        ))
+      ] }, cohort.cohort)) })
+    ] }) })
+  ] });
+}
+function TrendIndicator({ trend }) {
+  const colors = {
+    up: "text-green-600 dark:text-green-400",
+    down: "text-red-600 dark:text-red-400",
+    flat: "text-gray-500 dark:text-gray-400"
+  };
+  const arrows = {
+    up: /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        className: "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx2(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M5 10l7-7m0 0l7 7m-7-7v18"
+          }
+        )
+      }
+    ),
+    down: /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        className: "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx2(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M19 14l-7 7m0 0l-7-7m7 7V3"
+          }
+        )
+      }
+    ),
+    flat: /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        className: "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx2(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M5 12h14"
+          }
+        )
+      }
+    )
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-trend": trend,
+      className: twMerge2("flex items-center gap-1", colors[trend]),
+      children: [
+        arrows[trend],
+        /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium capitalize", children: trend })
+      ]
+    }
+  );
+}
+function getRetentionColor(rate) {
+  if (rate >= 80) return "rgba(34, 197, 94, 0.2)";
+  if (rate >= 60) return "rgba(234, 179, 8, 0.2)";
+  if (rate >= 40) return "rgba(249, 115, 22, 0.2)";
+  return "rgba(239, 68, 68, 0.2)";
+}
+
+// src/overview/components/sections/SupportSection.tsx
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SupportSection({
+  openTickets,
+  avgResponseTime,
+  resolutionRate,
+  csat,
+  ticketsByStatus,
+  ticketsByPriority,
+  volumeTrend: _volumeTrend,
+  loading = false,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        "data-testid": "support-section-loading",
+        className: twMerge3("animate-pulse space-y-4", className),
+        children: [
+          /* @__PURE__ */ jsx3("div", { className: "h-8 w-48 rounded bg-gray-200 dark:bg-gray-700" }),
+          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "h-24 rounded-lg bg-gray-200 dark:bg-gray-700"
+            },
+            i.toString()
+          )) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("section", { className: twMerge3("space-y-6", className), children: [
+    /* @__PURE__ */ jsx3("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Support Overview" }),
+    /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4", children: [
+      /* @__PURE__ */ jsx3(MetricCard2, { label: "Open Tickets", value: openTickets }),
+      /* @__PURE__ */ jsx3(MetricCard2, { label: "Avg Response", value: `${avgResponseTime}m` }),
+      /* @__PURE__ */ jsx3(MetricCard2, { label: "Resolution Rate", value: `${resolutionRate}%` }),
+      /* @__PURE__ */ jsx3(MetricCard2, { label: "CSAT", value: csat })
+    ] }),
+    ticketsByStatus && ticketsByStatus.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx3("h3", { className: "mb-4 text-sm font-medium text-gray-700 dark:text-gray-300", children: "Tickets by Status" }),
+      /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-3", children: ticketsByStatus.map((item) => /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: "flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1 dark:border-gray-700",
+          children: [
+            /* @__PURE__ */ jsx3(StatusDot, { status: item.status }),
+            /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: item.status }),
+            /* @__PURE__ */ jsx3("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: item.count })
+          ]
+        },
+        item.status
+      )) })
+    ] }),
+    ticketsByPriority && ticketsByPriority.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx3("h3", { className: "mb-4 text-sm font-medium text-gray-700 dark:text-gray-300", children: "Tickets by Priority" }),
+      /* @__PURE__ */ jsx3("div", { className: "space-y-2", children: ticketsByPriority.map((item) => /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: "flex items-center justify-between rounded-lg border border-gray-200 p-3 dark:border-gray-700",
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: item.priority }),
+            /* @__PURE__ */ jsxs3("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+              item.count,
+              " tickets"
+            ] })
+          ]
+        },
+        item.priority
+      )) })
+    ] })
+  ] });
+}
+function MetricCard2({
+  label,
+  value
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800", children: [
+    /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: label }),
+    /* @__PURE__ */ jsx3("p", { className: "mt-1 text-2xl font-semibold text-gray-900 dark:text-white", children: value })
+  ] });
+}
+function StatusDot({ status }) {
+  const colors = {
+    Open: "bg-blue-500",
+    Pending: "bg-yellow-500",
+    Resolved: "bg-green-500",
+    Closed: "bg-gray-500"
+  };
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: twMerge3(
+        "h-2 w-2 rounded-full",
+        colors[status] || "bg-gray-400"
+      )
+    }
+  );
+}
+
+// src/overview/components/sections/WorkflowSection.tsx
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function WorkflowSection({
+  totalWorkflows,
+  activeWorkflows,
+  runsToday,
+  successRate,
+  timeSaved,
+  runsByWorkflow,
+  runHistory: _runHistory,
+  loading = false,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        "data-testid": "workflow-section-loading",
+        className: twMerge4("animate-pulse space-y-4", className),
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-8 w-48 rounded bg-gray-200 dark:bg-gray-700" }),
+          /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "h-24 rounded-lg bg-gray-200 dark:bg-gray-700"
+            },
+            i.toString()
+          )) })
+        ]
+      }
+    );
+  }
+  const metrics = [
+    { label: "Total Workflows", value: totalWorkflows },
+    { label: "Active Workflows", value: activeWorkflows },
+    { label: "Runs Today", value: runsToday },
+    { label: "Success Rate", value: `${successRate}%` }
+  ];
+  if (timeSaved !== void 0) {
+    metrics.push({ label: "Time Saved", value: `${timeSaved}h` });
+  }
+  return /* @__PURE__ */ jsxs4("section", { className: twMerge4("space-y-6", className), children: [
+    /* @__PURE__ */ jsx4("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Workflow Automation" }),
+    /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-5", children: metrics.map((metric) => /* @__PURE__ */ jsx4(
+      MetricCard3,
+      {
+        label: metric.label,
+        value: metric.value
+      },
+      metric.label
+    )) }),
+    runsByWorkflow && runsByWorkflow.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "mb-4 text-sm font-medium text-gray-700 dark:text-gray-300", children: "Workflows Overview" }),
+      /* @__PURE__ */ jsx4("div", { className: "space-y-3", children: runsByWorkflow.map((workflow) => /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "flex items-center justify-between rounded-lg border border-gray-200 p-3 dark:border-gray-700",
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx4("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-300", children: /* @__PURE__ */ jsx4(WorkflowIcon, {}) }),
+              /* @__PURE__ */ jsx4("span", { className: "font-medium text-gray-900 dark:text-white", children: workflow.name })
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400", children: [
+              /* @__PURE__ */ jsxs4("span", { children: [
+                workflow.runs,
+                " runs"
+              ] }),
+              /* @__PURE__ */ jsxs4(
+                "span",
+                {
+                  className: workflow.successRate >= 90 ? "text-green-600 dark:text-green-400" : workflow.successRate >= 70 ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400",
+                  children: [
+                    workflow.successRate,
+                    "%"
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        workflow.id
+      )) })
+    ] })
+  ] });
+}
+function MetricCard3({
+  label,
+  value
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: label }),
+    /* @__PURE__ */ jsx4("p", { className: "mt-1 text-2xl font-semibold text-gray-900 dark:text-white", children: value })
+  ] });
+}
+function WorkflowIcon() {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      className: "h-4 w-4",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+        }
+      )
+    }
+  );
+}
+export {
+  AgentsSection,
+  RetentionSection,
+  SupportSection,
+  WorkflowSection
+};
+//# sourceMappingURL=index.js.map