ahs-cti 0.0.2-beta.9 → 0.0.2

package/dist/managementDashboard-TYON77NW.mjs

@@ -0,0 +1,529 @@
+import {
+  ReportFilterBar,
+  headCellSx
+} from "./chunk-CXULBAK6.mjs";
+import {
+  PageHeader
+} from "./chunk-JOZ4YQMR.mjs";
+import {
+  AppButton
+} from "./chunk-HBR2JS4C.mjs";
+import {
+  SDKProvider
+} from "./chunk-6ICPXSN6.mjs";
+import {
+  END_POINT,
+  axios_default
+} from "./chunk-O2XGWZLT.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-VQCHBU2Q.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 { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+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-TYON77NW.mjs.map