ahs-cti 0.0.4 → 0.0.6

package/dist/managementDashboard-PARD3QHL.mjs

@@ -1,531 +0,0 @@
-import {
-  ReportFilterBar,
-  headCellSx
-} from "./chunk-HAJ6SECI.mjs";
-import {
-  PageHeader
-} from "./chunk-JOZ4YQMR.mjs";
-import {
-  AppButton
-} from "./chunk-HBR2JS4C.mjs";
-import {
-  AdapterDayjs,
-  LocalizationProvider
-} from "./chunk-AJQBR3AZ.mjs";
-import {
-  SDKProvider
-} from "./chunk-6ICPXSN6.mjs";
-import {
-  END_POINT,
-  axios_default
-} from "./chunk-OVC42HVH.mjs";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-UB5HSUGK.mjs";
-
-// call-control-sdk/lib/pages/managementDashboard/index.tsx
-import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import {
-  Box,
-  Paper,
-  Stack,
-  Typography,
-  CircularProgress,
-  Alert,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  InputAdornment,
-  Chip,
-  Radio,
-  RadioGroup,
-  FormControlLabel
-} from "@mui/material";
-import dayjs from "dayjs";
-import {
-  ComposedChart,
-  Bar,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip as RTooltip,
-  ResponsiveContainer
-} from "recharts";
-import SearchIcon from "@mui/icons-material/Search";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import RefreshIcon from "@mui/icons-material/Refresh";
-
-// call-control-sdk/lib/pages/managementDashboard/useManagementDashboard.ts
-function buildQs(params) {
-  const qs = new URLSearchParams();
-  if (params.start_date) qs.append("start_date", params.start_date);
-  if (params.end_date) qs.append("end_date", params.end_date);
-  if (params.agent_id != null) qs.append("agent_id", String(params.agent_id));
-  const str = qs.toString();
-  return str ? `?${str}` : "";
-}
-async function getManagementDashboard(params) {
-  const res = await axios_default.get(
-    `${END_POINT.MANAGEMENT_DASHBOARD}${buildQs(params)}`
-  );
-  return res.data;
-}
-
-// call-control-sdk/lib/pages/managementDashboard/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var C = {
-  navy: "#1a3a6b",
-  blue: "#2b6cb0",
-  green: "#276749",
-  amber: "#c47c00",
-  red: "#c53030",
-  teal: "#0b7a8f",
-  surface: "#fff",
-  s2: "#f7f9fc",
-  s3: "#eef2f7",
-  b1: "rgba(20,50,100,.07)",
-  b2: "rgba(20,50,100,.13)",
-  t1: "#2d3748",
-  t2: "#4a5568",
-  t3: "#718096",
-  blt: "#e8f0fc",
-  glt: "#e4f6ef",
-  alt: "#fdf3e0",
-  rlt: "#fde8e8",
-  tlt: "#e3f4f7"
-};
-var headSx = __spreadProps(__spreadValues({}, headCellSx), { py: 1, px: 1.5 });
-var cellSx = { fontSize: 12, py: 0.8, px: 1.5, borderBottom: `1px solid ${C.b1}` };
-var monoSx = { fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700 };
-var labelSx = { fontSize: 11, fontWeight: 700, letterSpacing: 0.7, textTransform: "uppercase", color: C.t2 };
-var cardPaper = { background: C.surface, border: `1px solid #dce3ef`, borderRadius: "6px", overflow: "hidden", boxShadow: "0 1px 4px rgba(0,0,0,.09)" };
-var cardHeader = { px: 1.5, py: 1, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" };
-var EMPTY = {
-  inbound: { total: 0, answered: 0, unanswered: 0, answered_pct: 0, unanswered_pct: 0 },
-  outbound: { total: 0, answered: 0, unanswered: 0, answered_pct: 0, unanswered_pct: 0 },
-  totals: { total_calls: 0, total_answered: 0, highest_duration: "00:00:00", lowest_duration: "00:00:00", calls_lt_30sec: 0, avg_inbound_duration: "00:00:00", avg_outbound_duration: "00:00:00" },
-  abandoned: { total: 0, called_back: 0, to_call: 0, called_back_pct: 0, to_call_pct: 0, avg_callback_duration: "00:00:00" },
-  ivr: { total: 0, called_back: 0, to_call: 0, called_back_pct: 0, to_call_pct: 0 },
-  waiting: { avg_wait_time: "00:00:00", avg_lang_selection: "00:00:00", avg_queue_wait: "00:00:00" },
-  cht: [],
-  queue_calls: [],
-  hourly_chart: [],
-  repeated_calls: []
-};
-function DirectionCard({ title, data }) {
-  return /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-    /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: title }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 32, fontWeight: 800, color: C.navy, lineHeight: 1, mb: 1.2 }, children: data.total.toLocaleString() }),
-      /* @__PURE__ */ jsx(Box, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, borderTop: `2px solid ${C.s3}`, pt: 1 }, children: [
-        { label: "ANSWERED", value: data.answered, pct: data.answered_pct, color: C.blue },
-        { label: "UNANSWERED", value: data.unanswered, pct: data.unanswered_pct, color: C.t3 }
-      ].map(({ label, value, pct, color }) => /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 10, fontWeight: 700, letterSpacing: 0.5, color: C.t3, mb: 0.3 }, children: label }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "baseline", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 18, fontWeight: 700, color }, children: value.toLocaleString() }),
-          /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3 }, children: [
-            pct.toFixed(1),
-            "%"
-          ] })
-        ] })
-      ] }, label)) })
-    ] })
-  ] });
-}
-function QueueCallsCard({ data }) {
-  return /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-    /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Queue Wise Calls" }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5 }, children: [
-      data.length === 0 && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, color: C.t3, textAlign: "center", py: 2 }, children: "No data" }),
-      data.map((q, i) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", py: 0.6, borderBottom: `1px solid #f0f0f0`, "&:last-child": { borderBottom: "none" } }, children: [
-        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 600, color: C.t2 }, children: q.queue_name }),
-        /* @__PURE__ */ jsx(Box, { sx: { background: i === 0 ? "#3182ce" : "#90cdf4", color: i === 0 ? "#fff" : "#1a365d", borderRadius: "4px", px: 1.2, py: 0.3, minWidth: 44, textAlign: "center", fontSize: 14, fontWeight: 700 }, children: q.call_count })
-      ] }, q.queue_name))
-    ] })
-  ] });
-}
-function AbandonedCard({ data }) {
-  return /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-    /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Abandoned Patients" }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C.navy, lineHeight: 1, mb: 1 }, children: data.total.toLocaleString() }),
-      [
-        { label: "Called Back Patients", value: data.called_back, pct: data.called_back_pct },
-        { label: "To be Called Patients", value: data.to_call, pct: data.to_call_pct }
-      ].map(({ label, value, pct }) => /* @__PURE__ */ jsxs(Box, { sx: { mb: 0.4 }, children: [
-        /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3, display: "inline" }, children: [
-          label,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 13, fontWeight: 700, color: C.blue, display: "inline" }, children: [
-          value,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, fontWeight: 700, color: "#48bb78", display: "inline" }, children: [
-          pct.toFixed(1),
-          "%"
-        ] })
-      ] }, label))
-    ] })
-  ] });
-}
-function AvgCallbackCard({ duration }) {
-  return /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-    /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Avg Callback Duration" }) }),
-    /* @__PURE__ */ jsx(Box, { sx: { p: 1.5 }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 26, fontWeight: 700, color: C.navy, mt: 1, letterSpacing: 1 }, children: duration }) })
-  ] });
-}
-function IvrCard({ data }) {
-  return /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-    /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "IVR Patients" }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C.navy, lineHeight: 1, mb: 1 }, children: data.total.toLocaleString() }),
-      [
-        { label: "Called Back", value: data.called_back, pct: data.called_back_pct },
-        { label: "To Be Called", value: data.to_call, pct: data.to_call_pct }
-      ].map(({ label, value, pct }) => /* @__PURE__ */ jsxs(Box, { sx: { mb: 0.4 }, children: [
-        /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3, display: "inline" }, children: [
-          label,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 13, fontWeight: 700, color: C.blue, display: "inline" }, children: [
-          value,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, fontWeight: 700, color: "#48bb78", display: "inline" }, children: [
-          pct.toFixed(1),
-          "%"
-        ] })
-      ] }, label))
-    ] })
-  ] });
-}
-function statusColor(status) {
-  const s = status == null ? void 0 : status.toUpperCase();
-  if (s === "ANSWERED") return C.green;
-  if (s === "CANCEL") return C.red;
-  if (s === "ABANDONED") return "#c05621";
-  return C.t2;
-}
-function ManagementDashboardContent() {
-  const [startDate, setStartDate] = useState(dayjs().startOf("day"));
-  const [endDate, setEndDate] = useState(dayjs());
-  const [quickRange, setQuickRange] = useState("today");
-  const [data, setData] = useState(EMPTY);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [repeatedSearch, setRepeatedSearch] = useState("");
-  const [chartDir, setChartDir] = useState("inbound");
-  const chartRef = useRef(null);
-  const fetchDashboard = useCallback(async () => {
-    var _a, _b;
-    if (!startDate || !endDate) return;
-    setLoading(true);
-    setError("");
-    try {
-      const result = await getManagementDashboard({
-        start_date: startDate.format("YYYY-MM-DD"),
-        end_date: endDate.format("YYYY-MM-DD")
-      });
-      setData(result);
-    } catch (err) {
-      setError(((_b = (_a = err == null ? void 0 : err.response) == null ? void 0 : _a.data) == null ? void 0 : _b.detail) || (err == null ? void 0 : err.message) || "Failed to load dashboard");
-    } finally {
-      setLoading(false);
-    }
-  }, [startDate, endDate]);
-  useEffect(() => {
-    fetchDashboard();
-  }, [fetchDashboard]);
-  const handleQuickRangeChange = (range) => setQuickRange(range);
-  const filteredRepeated = useMemo(() => {
-    if (!repeatedSearch) return data.repeated_calls;
-    const q = repeatedSearch.toLowerCase();
-    return data.repeated_calls.filter(
-      (r) => r.phone_number.toLowerCase().includes(q) || r.latest_status.toLowerCase().includes(q) || r.latest_call_type.toLowerCase().includes(q)
-    );
-  }, [data.repeated_calls, repeatedSearch]);
-  const hourlyData = useMemo(() => {
-    const map = new Map(data.hourly_chart.map((h) => [h.hour, h]));
-    return Array.from({ length: 24 }, (_, h) => {
-      var _a, _b, _c, _d, _e, _f;
-      return {
-        hour: `${String(h).padStart(2, "0")}`,
-        answered: (_b = (_a = map.get(h)) == null ? void 0 : _a.answered) != null ? _b : 0,
-        abandoned: (_d = (_c = map.get(h)) == null ? void 0 : _c.abandoned) != null ? _d : 0,
-        agents: (_f = (_e = map.get(h)) == null ? void 0 : _e.agents) != null ? _f : 0
-      };
-    });
-  }, [data.hourly_chart]);
-  const downloadChart = () => {
-    var _a;
-    const svgEl = (_a = chartRef.current) == null ? void 0 : _a.querySelector("svg");
-    if (!svgEl) return;
-    const svgData = new XMLSerializer().serializeToString(svgEl);
-    const canvas = document.createElement("canvas");
-    const img = new Image();
-    img.onload = () => {
-      canvas.width = img.width;
-      canvas.height = img.height;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      ctx.fillStyle = "#fff";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-      const a = document.createElement("a");
-      a.download = `hourly_chart_${chartDir}.png`;
-      a.href = canvas.toDataURL("image/png");
-      a.click();
-    };
-    img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)));
-  };
-  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Box, { sx: { background: "transparent", minHeight: "100vh" }, children: [
-    /* @__PURE__ */ jsx(
-      PageHeader,
-      {
-        title: "Management Dashboard",
-        actions: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx(
-            AppButton,
-            {
-              variant: "outlined",
-              startIcon: /* @__PURE__ */ jsx(RefreshIcon, { sx: { fontSize: "0.95rem !important" } }),
-              onClick: fetchDashboard,
-              disabled: loading,
-              children: "Refresh"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AppButton,
-            {
-              startIcon: /* @__PURE__ */ jsx(FileDownloadIcon, { sx: { fontSize: "0.95rem !important" } }),
-              disabled: loading || data.totals.total_calls === 0,
-              onClick: () => {
-                const rows = data.repeated_calls.map((r) => Object.values(r).join(","));
-                const csv = ["Phone,Date,Count,Status,Type,Comments", ...rows].join("\n");
-                const a = document.createElement("a");
-                a.href = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
-                a.download = `mgmt_dashboard_${startDate == null ? void 0 : startDate.format("YYYY-MM-DD")}.csv`;
-                a.click();
-              },
-              children: "Export CSV"
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ReportFilterBar,
-      {
-        startDate,
-        endDate,
-        onStartChange: setStartDate,
-        onEndChange: setEndDate,
-        showTime: false,
-        quickRange,
-        onQuickRangeChange: handleQuickRangeChange
-      }
-    ),
-    error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mx: 2.5, mt: 1.5 }, onClose: () => setError(""), children: error }),
-    loading && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 5 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 36 }) }),
-    !loading && /* @__PURE__ */ jsxs(Box, { sx: { px: { xs: 1, md: 2 }, py: 1.5 }, children: [
-      /* @__PURE__ */ jsxs(Box, { sx: {
-        display: "grid",
-        gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", md: "repeat(3, 1fr)", lg: "1.3fr 1.2fr 1.1fr 0.75fr 1.3fr 1.1fr" },
-        gap: 1.2,
-        mb: 1.2
-      }, children: [
-        /* @__PURE__ */ jsx(DirectionCard, { title: "Inbound Calls", data: data.inbound }),
-        /* @__PURE__ */ jsx(QueueCallsCard, { data: data.queue_calls }),
-        /* @__PURE__ */ jsx(AbandonedCard, { data: data.abandoned }),
-        /* @__PURE__ */ jsx(AvgCallbackCard, { duration: data.abandoned.avg_callback_duration }),
-        /* @__PURE__ */ jsx(DirectionCard, { title: "Outbound Calls", data: data.outbound }),
-        /* @__PURE__ */ jsx(IvrCard, { data: data.ivr })
-      ] }),
-      /* @__PURE__ */ jsxs(Box, { sx: {
-        display: "grid",
-        gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", lg: "1fr 1fr 1.6fr 1.6fr" },
-        gap: 1.2,
-        mb: 1.2
-      }, children: [
-        /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Summary" }) }),
-          /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5 }, children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "baseline", gap: 0.5, mb: 0.5 }, children: [
-              /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 22, fontWeight: 800, color: C.navy }, children: data.totals.total_answered.toLocaleString() }),
-              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14, color: C.t3 }, children: "/" }),
-              /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 22, fontWeight: 800, color: C.t3 }, children: data.totals.total_calls.toLocaleString() })
-            ] }),
-            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: C.t3, mb: 1 }, children: "Total Calls" }),
-            /* @__PURE__ */ jsxs(Box, { sx: { mt: 1 }, children: [
-              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: C.t3, mb: 0.3 }, children: "Call Duration" }),
-              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 2 }, children: [
-                /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 10, color: C.t3 }, children: "Highest" }),
-                  /* @__PURE__ */ jsx(Typography, { sx: __spreadProps(__spreadValues({}, monoSx), { color: C.blue, fontSize: 13 }), children: data.totals.highest_duration })
-                ] }),
-                /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 10, color: C.t3 }, children: "Lowest" }),
-                  /* @__PURE__ */ jsx(Typography, { sx: __spreadProps(__spreadValues({}, monoSx), { color: C.blue, fontSize: 13 }), children: data.totals.lowest_duration })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Box, { sx: { mt: 1 }, children: [
-              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: C.t3, display: "inline" }, children: "Calls < 30 sec: " }),
-              /* @__PURE__ */ jsx(Typography, { sx: __spreadProps(__spreadValues({}, monoSx), { color: C.blue, display: "inline", fontSize: 13 }), children: data.totals.calls_lt_30sec.toLocaleString() })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Avg Total Calls Duration" }) }),
-          /* @__PURE__ */ jsx(Box, { sx: { p: 1.5 }, children: [
-            { label: "Inbound", value: data.totals.avg_inbound_duration },
-            { label: "Outbound", value: data.totals.avg_outbound_duration }
-          ].map(({ label, value }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", py: 1, borderBottom: `1px solid ${C.b1}`, "&:last-child": { borderBottom: "none" } }, children: [
-            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 600, color: C.t2 }, children: label }),
-            /* @__PURE__ */ jsx(Typography, { sx: __spreadProps(__spreadValues({}, monoSx), { fontSize: 16, color: C.blue }), children: value })
-          ] }, label)) })
-        ] }),
-        /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Inbound Average Waiting" }) }),
-          /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 1, mt: 0.5 }, children: [
-            { label: "Waiting Time", value: data.waiting.avg_wait_time },
-            { label: "Language Selection", value: data.waiting.avg_lang_selection },
-            { label: "Queue Waiting", value: data.waiting.avg_queue_wait }
-          ].map(({ label, value }) => /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center" }, children: [
-            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 10, fontWeight: 600, color: C.t3, mb: 0.5 }, children: label }),
-            /* @__PURE__ */ jsx(Typography, { sx: __spreadProps(__spreadValues({}, monoSx), { fontSize: 18, color: C.blue }), children: value })
-          ] }, label)) })
-        ] }),
-        /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsx(Box, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Average CHT" }) }),
-          /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
-            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Call Type" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Call Handling Time" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Talk Duration" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Hold Duration" })
-            ] }) }),
-            /* @__PURE__ */ jsxs(TableBody, { children: [
-              data.cht.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, sx: { textAlign: "center", py: 2, color: C.t3, fontSize: 12 }, children: "No data" }) }),
-              data.cht.map((row) => /* @__PURE__ */ jsxs(TableRow, { hover: true, children: [
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, cellSx), { fontWeight: 600, color: C.t2 }), children: row.call_type }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues(__spreadValues({}, cellSx), monoSx), { color: C.blue }), children: row.call_handling_time }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues(__spreadValues({}, cellSx), monoSx), { color: C.blue }), children: row.talk_duration }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues(__spreadValues({}, cellSx), monoSx), { color: C.blue }), children: row.hold_duration })
-              ] }, row.call_type))
-            ] })
-          ] }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gap: 1.2 }, children: [
-        /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsxs(Box, { sx: __spreadProps(__spreadValues({}, cardHeader), { flexWrap: "wrap", gap: 1 }), children: [
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Avg Hour Wise Inbound Calls vs Agents" }),
-              /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1.5, sx: { mt: 0.5 }, children: [
-                { color: "#f6a623", label: "Answered" },
-                { color: "#90a4c0", label: "Abandoned" },
-                { color: "#4a5568", label: "Agents" }
-              ].map(({ color, label }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                /* @__PURE__ */ jsx(Box, { sx: { width: 12, height: 12, borderRadius: "2px", background: color } }),
-                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: C.t3 }, children: label })
-              ] }, label)) })
-            ] }),
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.5 }, children: [
-              /* @__PURE__ */ jsxs(
-                RadioGroup,
-                {
-                  row: true,
-                  value: chartDir,
-                  onChange: (e) => setChartDir(e.target.value),
-                  sx: { "& .MuiFormControlLabel-root": { mr: 0.5 }, "& .MuiFormControlLabel-label": { fontSize: 12 } },
-                  children: [
-                    /* @__PURE__ */ jsx(FormControlLabel, { value: "inbound", control: /* @__PURE__ */ jsx(Radio, { size: "small" }), label: "Inbound" }),
-                    /* @__PURE__ */ jsx(FormControlLabel, { value: "outbound", control: /* @__PURE__ */ jsx(Radio, { size: "small" }), label: "Outbound" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  onClick: downloadChart,
-                  sx: { fontSize: 11, color: "#3182ce", cursor: "pointer", border: "1px solid #bee3f8", borderRadius: "4px", px: 1, py: 0.3 },
-                  children: "\u2B07 DOWNLOAD"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { ref: chartRef, sx: { p: 1.5, height: 260 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: hourlyData, margin: { top: 4, right: 30, left: -20, bottom: 0 }, barGap: 1, children: [
-            /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: C.b2, vertical: false }),
-            /* @__PURE__ */ jsx(XAxis, { dataKey: "hour", tick: { fontSize: 9, fill: C.t3 }, interval: 1 }),
-            /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", tick: { fontSize: 9, fill: C.t3 } }),
-            /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", tick: { fontSize: 9, fill: C.t3 } }),
-            /* @__PURE__ */ jsx(
-              RTooltip,
-              {
-                contentStyle: { fontSize: 11, borderRadius: 6, border: `1px solid ${C.b2}` },
-                formatter: (v, n) => [v, n.charAt(0).toUpperCase() + n.slice(1)]
-              }
-            ),
-            /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: "answered", fill: "#f6a623", radius: [2, 2, 0, 0], maxBarSize: 14 }),
-            /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: "abandoned", fill: "#90a4c0", radius: [2, 2, 0, 0], maxBarSize: 14 }),
-            /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: "agents", stroke: "#4a5568", strokeWidth: 1.5, dot: { r: 2, fill: "#4a5568" } })
-          ] }) }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsxs(Box, { sx: cardHeader, children: [
-            /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: "Repeated Calls" }),
-            /* @__PURE__ */ jsx(Chip, { label: data.repeated_calls.length, size: "small", sx: { background: C.rlt, color: C.red, fontWeight: 700, fontSize: 11 } })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, py: 1 }, children: /* @__PURE__ */ jsx(
-            TextField,
-            {
-              size: "small",
-              placeholder: "Search\u2026",
-              value: repeatedSearch,
-              onChange: (e) => setRepeatedSearch(e.target.value),
-              fullWidth: true,
-              slotProps: { input: { startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: 16, color: C.t3 } }) }) } },
-              sx: { "& .MuiInputBase-root": { fontSize: 12 } }
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TableContainer, { sx: { maxHeight: 260, overflow: "auto" }, children: /* @__PURE__ */ jsxs(Table, { size: "small", stickyHeader: true, children: [
-            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Phone Number" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Date" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "No of Calls" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Latest Status" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Latest Call Type" }),
-              /* @__PURE__ */ jsx(TableCell, { sx: headSx, children: "Comments" })
-            ] }) }),
-            /* @__PURE__ */ jsxs(TableBody, { children: [
-              filteredRepeated.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 6, sx: { textAlign: "center", py: 2, color: C.t3, fontSize: 12 }, children: "No repeated calls" }) }),
-              filteredRepeated.map((r) => /* @__PURE__ */ jsxs(TableRow, { hover: true, children: [
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues(__spreadValues({}, cellSx), monoSx), { fontSize: 11 }), children: r.phone_number }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, cellSx), { fontSize: 11 }), children: r.date }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, cellSx), { fontWeight: 700, color: C.navy, fontSize: 13 }), children: r.call_count }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, cellSx), { fontSize: 11, fontWeight: 600, color: statusColor(r.latest_status) }), children: r.latest_status }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, cellSx), { fontSize: 11 }), children: r.latest_call_type }),
-                /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, cellSx), { fontSize: 11, color: C.t3 }), children: r.comments })
-              ] }, `${r.phone_number}-${r.date}`))
-            ] })
-          ] }) })
-        ] })
-      ] })
-    ] })
-  ] }) });
-}
-var ManagementDashboard = () => /* @__PURE__ */ jsx(SDKProvider, { children: /* @__PURE__ */ jsx(ManagementDashboardContent, {}) });
-var managementDashboard_default = ManagementDashboard;
-export {
-  managementDashboard_default as default
-};
-//# sourceMappingURL=managementDashboard-PARD3QHL.mjs.map