ahs-cti 0.0.5 → 0.0.7

package/dist/{chunk-ISQBOS5Q.mjs → chunk-33QNSXP7.mjs}

@@ -1,71 +1,71 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  LabelList,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "./chunk-DF5EFKXC.mjs";
 import {
   FileDownload_default
-} from "./chunk-MFZKONNR.mjs";
+} from "./chunk-AOJRUZTO.mjs";
 import {
   PlayArrow_default
-} from "./chunk-MBXHRFGP.mjs";
+} from "./chunk-7LE2VTAI.mjs";
 import {
   PageHeader
-} from "./chunk-XMRM5VR4.mjs";
+} from "./chunk-VBIDPX5Z.mjs";
 import {
   AppButton
-} from "./chunk-HBR2JS4C.mjs";
+} from "./chunk-NAZO4HKB.mjs";
 import {
   AdapterDayjs,
   DateRangePicker,
-  LocalizationProvider
-} from "./chunk-AJQBR3AZ.mjs";
+  LocalizationProvider,
+  require_dayjs_min
+} from "./chunk-E6KYWWAI.mjs";
 import {
   Refresh_default,
   Search_default
-} from "./chunk-RSL5OBRQ.mjs";
+} from "./chunk-YAQYTUTX.mjs";
 import {
   SDKProvider
-} from "./chunk-6ICPXSN6.mjs";
+} from "./chunk-VVDJLUYT.mjs";
 import {
   END_POINT,
   axios_default,
   deepFindArray,
   sdkStateManager
-} from "./chunk-Q7FIRWF2.mjs";
+} from "./chunk-LHE4QGJJ.mjs";
 import {
+  Alert_default,
+  Box_default,
+  Chip_default,
+  CircularProgress_default,
+  IconButton_default,
+  TableBody_default,
+  TableCell_default,
+  TableContainer_default,
+  TableHead_default,
+  TablePagination_default,
+  TableRow_default,
+  Table_default,
+  Tooltip_default,
+  Typography_default,
   __spreadProps,
-  __spreadValues
-} from "./chunk-UB5HSUGK.mjs";
+  __spreadValues,
+  __toESM
+} from "./chunk-Q6G3MPS7.mjs";
 
 // call-control-sdk/lib/pages/agentDetailReport/index.tsx
 import { useState as useState2, useEffect, useMemo, useCallback as useCallback2 } from "react";
-import {
-  Box,
-  Typography,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TablePagination,
-  IconButton,
-  Chip,
-  CircularProgress,
-  Alert
-} from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip as RTooltip,
-  PieChart,
-  Pie,
-  Cell,
-  Legend,
-  ResponsiveContainer,
-  LabelList
-} from "recharts";
-import dayjs from "dayjs";
+var import_dayjs = __toESM(require_dayjs_min());
 
 // call-control-sdk/lib/pages/agentDetailReport/useAgentDetailReport.ts
 import { useCallback, useState } from "react";
@@ -138,7 +138,7 @@ var C = {
 var monoSx = { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600 };
 var QUEUE_COLORS = [C.blue, C.green, C.purple, C.amber, C.teal, C.red, C.navy];
 function StatCard({ value, label, color }) {
-  return /* @__PURE__ */ jsxs(Box, { sx: {
+  return /* @__PURE__ */ jsxs(Box_default, { sx: {
     px: 1.5,
     py: 1.2,
     borderRadius: "10px",
@@ -148,15 +148,15 @@ function StatCard({ value, label, color }) {
     borderLeftStyle: "solid",
     borderLeftColor: color
   }, children: [
-    /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.72rem", fontWeight: 600, color: "#888", mb: 0.3 }, children: label }),
-    /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.95rem", fontWeight: 700, color: "#1a1a1a" }, children: value })
+    /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.72rem", fontWeight: 600, color: "#888", mb: 0.3 }, children: label }),
+    /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.95rem", fontWeight: 700, color: "#1a1a1a" }, children: value })
   ] });
 }
 function StatusChip({ status }) {
   const s = status == null ? void 0 : status.toLowerCase();
   const isAns = s === "answered";
   const isAband = s === "abandoned";
-  return /* @__PURE__ */ jsx(Chip, { label: status || "\u2014", size: "small", sx: {
+  return /* @__PURE__ */ jsx(Chip_default, { label: status || "\u2014", size: "small", sx: {
     fontSize: 11,
     fontWeight: 700,
     height: 22,
@@ -168,7 +168,7 @@ function StatusChip({ status }) {
 }
 function CallTypeChip({ type }) {
   const isIn = (type == null ? void 0 : type.toLowerCase()) === "inbound";
-  return /* @__PURE__ */ jsx(Chip, { label: type || "\u2014", size: "small", sx: {
+  return /* @__PURE__ */ jsx(Chip_default, { label: type || "\u2014", size: "small", sx: {
     fontSize: 11,
     fontWeight: 700,
     height: 22,
@@ -183,9 +183,9 @@ function RecordingCell({ callUuid, recordingPath }) {
   const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(false);
   if (!recordingPath) {
-    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.3 }, children: [
-      /* @__PURE__ */ jsx(Tooltip, { title: "No recording available", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: true, sx: { p: 0.4 }, children: /* @__PURE__ */ jsx(PlayArrow_default, { sx: { fontSize: 16 } }) }) }) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "No recording available", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: true, sx: { p: 0.4 }, children: /* @__PURE__ */ jsx(FileDownload_default, { sx: { fontSize: 16 } }) }) }) })
+    return /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 0.3 }, children: [
+      /* @__PURE__ */ jsx(Tooltip_default, { title: "No recording available", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton_default, { size: "small", disabled: true, sx: { p: 0.4 }, children: /* @__PURE__ */ jsx(PlayArrow_default, { sx: { fontSize: 16 } }) }) }) }),
+      /* @__PURE__ */ jsx(Tooltip_default, { title: "No recording available", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton_default, { size: "small", disabled: true, sx: { p: 0.4 }, children: /* @__PURE__ */ jsx(FileDownload_default, { sx: { fontSize: 16 } }) }) }) })
     ] });
   }
   const handlePlay = async () => {
@@ -215,7 +215,7 @@ function RecordingCell({ callUuid, recordingPath }) {
     }
   };
   if (audioUrl) {
-    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+    return /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
       /* @__PURE__ */ jsx(
         "audio",
         {
@@ -229,13 +229,13 @@ function RecordingCell({ callUuid, recordingPath }) {
           style: { width: 140, height: 30 }
         }
       ),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Download", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleDownload, sx: { color: C.blue, p: 0.4 }, children: /* @__PURE__ */ jsx(FileDownload_default, { sx: { fontSize: 16 } }) }) })
+      /* @__PURE__ */ jsx(Tooltip_default, { title: "Download", children: /* @__PURE__ */ jsx(IconButton_default, { size: "small", onClick: handleDownload, sx: { color: C.blue, p: 0.4 }, children: /* @__PURE__ */ jsx(FileDownload_default, { sx: { fontSize: 16 } }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.3 }, children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: error ? "Recording unavailable" : "Play", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handlePlay, disabled: loading || error, sx: { color: C.green, p: 0.4 }, children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(PlayArrow_default, { sx: { fontSize: 16 } }) }) }) }),
-    /* @__PURE__ */ jsx(Tooltip, { title: error ? "Recording unavailable" : "Download", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleDownload, disabled: loading || error, sx: { color: C.blue, p: 0.4 }, children: /* @__PURE__ */ jsx(FileDownload_default, { sx: { fontSize: 16 } }) }) }) }),
-    error && /* @__PURE__ */ jsx(Chip, { label: "No File", size: "small", sx: { fontSize: "0.6rem", height: 18 } })
+  return /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 0.3 }, children: [
+    /* @__PURE__ */ jsx(Tooltip_default, { title: error ? "Recording unavailable" : "Play", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton_default, { size: "small", onClick: handlePlay, disabled: loading || error, sx: { color: C.green, p: 0.4 }, children: loading ? /* @__PURE__ */ jsx(CircularProgress_default, { size: 14 }) : /* @__PURE__ */ jsx(PlayArrow_default, { sx: { fontSize: 16 } }) }) }) }),
+    /* @__PURE__ */ jsx(Tooltip_default, { title: error ? "Recording unavailable" : "Download", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton_default, { size: "small", onClick: handleDownload, disabled: loading || error, sx: { color: C.blue, p: 0.4 }, children: /* @__PURE__ */ jsx(FileDownload_default, { sx: { fontSize: 16 } }) }) }) }),
+    error && /* @__PURE__ */ jsx(Chip_default, { label: "No File", size: "small", sx: { fontSize: "0.6rem", height: 18 } })
   ] });
 }
 var cdrHeadSx = {
@@ -253,8 +253,8 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
   const isFromReportsList = from === "REPORTS_LIST";
   const agentIdFromRow = isFromReportsList ? ((_a = agentRow == null ? void 0 : agentRow.agentDetails) == null ? void 0 : _a.agentId) || "" : sdkStateManager.getState().agentId || ((_b = agentRow == null ? void 0 : agentRow.agentDetails) == null ? void 0 : _b.agentId) || "";
   const [quickRange, setQuickRange] = useState2(initialQuickRange || "today");
-  const [startDate, setStartDate] = useState2(initialStartDate != null ? initialStartDate : dayjs());
-  const [endDate, setEndDate] = useState2(initialEndDate != null ? initialEndDate : dayjs());
+  const [startDate, setStartDate] = useState2(initialStartDate != null ? initialStartDate : (0, import_dayjs.default)());
+  const [endDate, setEndDate] = useState2(initialEndDate != null ? initialEndDate : (0, import_dayjs.default)());
   const syncFilterToUrl = (_sd, _ed, _range) => {
   };
   const [activeTab, setActiveTab] = useState2(0);
@@ -272,7 +272,7 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
   const showInitialSpinner = !isFromReportsList && detailLoading && !profile && !((_d = agentRow == null ? void 0 : agentRow.agentDetails) == null ? void 0 : _d.fullName);
   const setQuick = (range) => {
     setQuickRange(range);
-    const today = dayjs();
+    const today = (0, import_dayjs.default)();
     let sd = today;
     const ed = today;
     if (range === "week") sd = today.startOf("week");
@@ -288,7 +288,7 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
       setDetailError("");
       const res = await getAgentDetailReport(agentIdFromRow, {
         start_date: sd.startOf("day").format("YYYY-MM-DDTHH:mm:ss"),
-        end_date: ed.isSame(dayjs(), "day") ? dayjs().format("YYYY-MM-DDTHH:mm:ss") : ed.endOf("day").format("YYYY-MM-DDTHH:mm:ss")
+        end_date: ed.isSame((0, import_dayjs.default)(), "day") ? (0, import_dayjs.default)().format("YYYY-MM-DDTHH:mm:ss") : ed.endOf("day").format("YYYY-MM-DDTHH:mm:ss")
       });
       setDetail(res);
     } catch (err) {
@@ -305,7 +305,7 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
       setCdrError("");
       const params = {
         start_date: sd.startOf("day").format("YYYY-MM-DDTHH:mm:ss"),
-        end_date: ed.isSame(dayjs(), "day") ? dayjs().format("YYYY-MM-DDTHH:mm:ss") : ed.endOf("day").format("YYYY-MM-DDTHH:mm:ss"),
+        end_date: ed.isSame((0, import_dayjs.default)(), "day") ? (0, import_dayjs.default)().format("YYYY-MM-DDTHH:mm:ss") : ed.endOf("day").format("YYYY-MM-DDTHH:mm:ss"),
         search: agentIdFromRow,
         page: page + 1,
         pageSize
@@ -386,7 +386,7 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
   }, [detail]);
   const hourlyChartTitle = useMemo(() => {
     if (quickRange === "today") return "Hourly Call Volume \u2014 Today";
-    if (quickRange === "month") return `Hourly Call Volume \u2014 ${dayjs().format("MMMM YYYY")}`;
+    if (quickRange === "month") return `Hourly Call Volume \u2014 ${(0, import_dayjs.default)().format("MMMM YYYY")}`;
     if (quickRange === "week") return "Hourly Call Volume \u2014 This Week";
     if (startDate && endDate) {
       if (startDate.isSame(endDate, "day")) return `Hourly Call Volume \u2014 ${startDate.format("DD MMM YYYY")}`;
@@ -398,16 +398,16 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
     onBack == null ? void 0 : onBack();
   }, [onBack]);
   if (!agentIdFromRow) {
-    return /* @__PURE__ */ jsxs(Box, { sx: { p: 4, textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { color: C.t3, mb: 2 }, children: "No agent selected." }),
+    return /* @__PURE__ */ jsxs(Box_default, { sx: { p: 4, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx(Typography_default, { sx: { color: C.t3, mb: 2 }, children: "No agent selected." }),
       isFromReportsList && /* @__PURE__ */ jsx(AppButton, { onClick: handleBack, children: "Go Back" })
     ] });
   }
   if (showInitialSpinner) {
-    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 36 }) });
+    return /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }, children: /* @__PURE__ */ jsx(CircularProgress_default, { size: 36 }) });
   }
   const tabs = ["Overview", "Call History", "Break Details"];
-  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Box, { sx: { background: C.bg, minHeight: "100vh" }, children: [
+  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Box_default, { sx: { background: C.bg, minHeight: "100vh" }, children: [
     /* @__PURE__ */ jsx(
       PageHeader,
       {
@@ -416,7 +416,7 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
         onBack: handleBack
       }
     ),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", pb: 1.5, px: 2 }, children: [
+    /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", pb: 1.5, px: 2 }, children: [
       /* @__PURE__ */ jsx(
         DateRangePicker,
         {
@@ -439,10 +439,10 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
       /* @__PURE__ */ jsx(AppButton, { variant: quickRange === "week" ? "primary" : "outlined", onClick: () => setQuick("week"), sx: { whiteSpace: "nowrap" }, children: "This Week" }),
       /* @__PURE__ */ jsx(AppButton, { variant: quickRange === "month" ? "primary" : "outlined", onClick: () => setQuick("month"), sx: { whiteSpace: "nowrap" }, children: "This Month" })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { sx: { py: 2, px: 2, position: "relative" }, children: [
-      detailLoading && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(240,244,248,0.7)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 10 }, children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
-      detailError && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setDetailError(""), children: detailError }),
-      /* @__PURE__ */ jsx(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr 1fr", sm: "repeat(3, 1fr)", md: "repeat(5, 1fr)" }, gap: 1.5, mb: 2 }, children: [
+    /* @__PURE__ */ jsxs(Box_default, { sx: { py: 2, px: 2, position: "relative" }, children: [
+      detailLoading && /* @__PURE__ */ jsx(Box_default, { sx: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(240,244,248,0.7)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 10 }, children: /* @__PURE__ */ jsx(CircularProgress_default, {}) }),
+      detailError && /* @__PURE__ */ jsx(Alert_default, { severity: "error", sx: { mb: 2 }, onClose: () => setDetailError(""), children: detailError }),
+      /* @__PURE__ */ jsx(Box_default, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr 1fr", sm: "repeat(3, 1fr)", md: "repeat(5, 1fr)" }, gap: 1.5, mb: 2 }, children: [
         { v: (_e = profile == null ? void 0 : profile.totalCalls) != null ? _e : 0, l: "Total Calls", c: C.navy },
         { v: (_f = profile == null ? void 0 : profile.answeredCalls) != null ? _f : 0, l: "Answered", c: C.green },
         { v: (_g = profile == null ? void 0 : profile.missedCalls) != null ? _g : 0, l: "Missed", c: C.red },
@@ -453,7 +453,7 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
         { v: (profile == null ? void 0 : profile.handleTimeFormatted) || "00:00:00", l: "Handle Time", c: C.purple },
         { v: (profile == null ? void 0 : profile.breakTimeFormatted) || "00:00:00", l: "Break Time", c: C.amber },
         { v: `${((_i = profile == null ? void 0 : profile.adherencePct) != null ? _i : 0).toFixed(1)}%`, l: `Adherence${(profile == null ? void 0 : profile.adherenceGrade) ? ` (${profile.adherenceGrade})` : ""}`, c: C.teal }
-      ].map((kpi, i) => /* @__PURE__ */ jsxs(Box, { sx: {
+      ].map((kpi, i) => /* @__PURE__ */ jsxs(Box_default, { sx: {
         px: 1.5,
         py: 1.2,
         borderRadius: "10px",
@@ -464,23 +464,23 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
         borderLeftStyle: "solid",
         borderLeftColor: kpi.c
       }, children: [
-        /* @__PURE__ */ jsx(Typography, { sx: {
+        /* @__PURE__ */ jsx(Typography_default, { sx: {
           fontFamily: "poppins, Arial, sans-serif",
           fontSize: "0.72rem",
           fontWeight: 600,
           color: "#888",
           mb: 0.3
         }, children: kpi.l }),
-        /* @__PURE__ */ jsx(Typography, { sx: {
+        /* @__PURE__ */ jsx(Typography_default, { sx: {
           fontFamily: "poppins, Arial, sans-serif",
           fontSize: "0.95rem",
           fontWeight: 700,
           color: "#1a1a1a"
         }, children: kpi.v })
       ] }, i)) }),
-      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, justifyContent: "space-between", flexDirection: { xs: "column", sm: "row" }, gap: 1, borderBottom: `2px solid ${C.b1}`, mb: 2 }, children: [
-        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(
-          Box,
+      /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, justifyContent: "space-between", flexDirection: { xs: "column", sm: "row" }, gap: 1, borderBottom: `2px solid ${C.b1}`, mb: 2 }, children: [
+        /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(
+          Box_default,
           {
             onClick: () => setActiveTab(idx),
             sx: {
@@ -499,7 +499,7 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
           },
           tab
         )) }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, mb: "-2px" }, children: [
+        /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 0.5, mb: "-2px" }, children: [
           /* @__PURE__ */ jsx(
             AppButton,
             {
@@ -513,43 +513,43 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
           /* @__PURE__ */ jsx(AppButton, { size: "small", startIcon: /* @__PURE__ */ jsx(Search_default, {}), onClick: () => handleSearch(), children: "Search" })
         ] })
       ] }),
-      activeTab === 0 && /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mb: 2 }, children: [
-          /* @__PURE__ */ jsxs(Box, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: hourlyChartTitle }),
-              /* @__PURE__ */ jsx(Chip, { label: agentName, size: "small", sx: { fontSize: 11, fontWeight: 700, background: C.blt, color: C.blue, border: `1px solid rgba(21,101,200,.2)` } })
+      activeTab === 0 && /* @__PURE__ */ jsxs(Box_default, { children: [
+        /* @__PURE__ */ jsxs(Box_default, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mb: 2 }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
+            /* @__PURE__ */ jsxs(Box_default, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: hourlyChartTitle }),
+              /* @__PURE__ */ jsx(Chip_default, { label: agentName, size: "small", sx: { fontSize: 11, fontWeight: 700, background: C.blt, color: C.blue, border: `1px solid rgba(21,101,200,.2)` } })
             ] }),
-            /* @__PURE__ */ jsx(Box, { sx: { p: 2, height: 260 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: hourlyCallData, barGap: 1, children: [
+            /* @__PURE__ */ jsx(Box_default, { sx: { p: 2, height: 260 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: hourlyCallData, barGap: 1, children: [
               /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: C.b1 }),
               /* @__PURE__ */ jsx(XAxis, { dataKey: "hour", tick: { fontSize: 11, fill: C.t3 } }),
               /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 11, fill: C.t3 }, allowDecimals: false }),
-              /* @__PURE__ */ jsx(RTooltip, { labelFormatter: (label) => `${String(label).padStart(2, "0")}:00`, contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` } }),
+              /* @__PURE__ */ jsx(Tooltip, { labelFormatter: (label) => `${String(label).padStart(2, "0")}:00`, contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` } }),
               /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 11 } }),
               /* @__PURE__ */ jsx(Bar, { dataKey: "answered", name: "Answered", fill: C.blue, radius: [3, 3, 0, 0] }),
               /* @__PURE__ */ jsx(Bar, { dataKey: "abandoned", name: "Abandoned", fill: C.red, radius: [3, 3, 0, 0] })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ jsxs(Box, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
-            /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}` }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Time Utilisation Breakdown" }) }),
-            /* @__PURE__ */ jsx(Box, { sx: { p: 2, height: 260 }, children: timeUtilData.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
+            /* @__PURE__ */ jsx(Box_default, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}` }, children: /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Time Utilisation Breakdown" }) }),
+            /* @__PURE__ */ jsx(Box_default, { sx: { p: 2, height: 260 }, children: timeUtilData.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
               /* @__PURE__ */ jsx(Pie, { data: timeUtilData, cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 95, dataKey: "value", nameKey: "name", minAngle: 8, children: timeUtilData.map((entry, idx) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, idx)) }),
-              /* @__PURE__ */ jsx(RTooltip, { formatter: (_val, name, entry) => [`${entry.payload.formatted} (${entry.payload.pct.toFixed(1)}%)`, name], contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` } }),
+              /* @__PURE__ */ jsx(Tooltip, { formatter: (_val, name, entry) => [`${entry.payload.formatted} (${entry.payload.pct.toFixed(1)}%)`, name], contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` } }),
               /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 }, formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: C.t1, fontWeight: 500 }, children: value }) })
-            ] }) }) : /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: C.t3, fontSize: 13 }, children: "No data" }) })
+            ] }) }) : /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: C.t3, fontSize: 13 }, children: "No data" }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent", mb: 2 }, children: [
-          /* @__PURE__ */ jsxs(Box, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Talk Duration Distribution" }),
-            /* @__PURE__ */ jsx(Chip, { label: `${talkDurationTotal} call${talkDurationTotal === 1 ? "" : "s"}`, size: "small", sx: { fontSize: 11, fontWeight: 700, background: C.glt, color: C.green, border: `1px solid rgba(10,154,98,.2)` } })
+        /* @__PURE__ */ jsxs(Box_default, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent", mb: 2 }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Talk Duration Distribution" }),
+            /* @__PURE__ */ jsx(Chip_default, { label: `${talkDurationTotal} call${talkDurationTotal === 1 ? "" : "s"}`, size: "small", sx: { fontSize: 11, fontWeight: 700, background: C.glt, color: C.green, border: `1px solid rgba(10,154,98,.2)` } })
           ] }),
-          /* @__PURE__ */ jsx(Box, { sx: { p: 2, height: 260 }, children: talkDurationBuckets.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: talkDurationBuckets, margin: { top: 16, right: 16, left: 0, bottom: 20 }, children: [
+          /* @__PURE__ */ jsx(Box_default, { sx: { p: 2, height: 260 }, children: talkDurationBuckets.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: talkDurationBuckets, margin: { top: 16, right: 16, left: 0, bottom: 20 }, children: [
             /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: C.b1 }),
             /* @__PURE__ */ jsx(XAxis, { dataKey: "bucket", tick: { fontSize: 11, fill: C.t3 }, label: { value: "Talking Duration", position: "insideBottom", offset: -5, style: { fontSize: 11, fontWeight: 600, fill: C.t2 } } }),
             /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 11, fill: C.t3 }, allowDecimals: false, label: { value: "Call Count", angle: -90, position: "insideLeft", offset: 10, style: { fontSize: 11, fontWeight: 600, fill: C.t2 } } }),
             /* @__PURE__ */ jsx(
-              RTooltip,
+              Tooltip,
               {
                 contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` },
                 labelFormatter: (label, payload) => {
@@ -566,15 +566,15 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
               }
             ),
             /* @__PURE__ */ jsx(Bar, { dataKey: "count", name: "Calls", fill: C.teal, radius: [4, 4, 0, 0], children: /* @__PURE__ */ jsx(LabelList, { dataKey: "count", position: "top", style: { fontSize: 11, fontWeight: 700, fill: C.t1 } }) })
-          ] }) }) : /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: C.t3, fontSize: 13 }, children: "No data" }) })
+          ] }) }) : /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: C.t3, fontSize: 13 }, children: "No data" }) })
         ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }, children: [
-          /* @__PURE__ */ jsxs(Box, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
-            /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}` }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Calls by Queue" }) }),
-            /* @__PURE__ */ jsx(Box, { sx: { p: 2, height: 260 }, children: queuePieData.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+        /* @__PURE__ */ jsxs(Box_default, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
+            /* @__PURE__ */ jsx(Box_default, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}` }, children: /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Calls by Queue" }) }),
+            /* @__PURE__ */ jsx(Box_default, { sx: { p: 2, height: 260 }, children: queuePieData.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
               /* @__PURE__ */ jsx(Pie, { data: queuePieData, cx: "50%", cy: "50%", outerRadius: 90, dataKey: "value", nameKey: "name", children: queuePieData.map((entry, idx) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, idx)) }),
               /* @__PURE__ */ jsx(
-                RTooltip,
+                Tooltip,
                 {
                   contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` },
                   formatter: (val, name, entry) => {
@@ -585,22 +585,22 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
                 }
               ),
               /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 }, formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: C.t1, fontWeight: 500 }, children: value }) })
-            ] }) }) : /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: C.t3, fontSize: 13 }, children: "No queue data" }) })
+            ] }) }) : /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: C.t3, fontSize: 13 }, children: "No queue data" }) })
           ] }),
-          /* @__PURE__ */ jsxs(Box, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
-            /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}` }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Queue Performance Metrics" }) }),
-            /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: queueMetrics.length > 0 ? queueMetrics.map((q) => {
+          /* @__PURE__ */ jsxs(Box_default, { sx: { border: `1px solid ${C.b1}`, borderRadius: "10px", overflow: "hidden", background: "transparent" }, children: [
+            /* @__PURE__ */ jsx(Box_default, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}` }, children: /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Queue Performance Metrics" }) }),
+            /* @__PURE__ */ jsx(Box_default, { sx: { p: 2 }, children: queueMetrics.length > 0 ? queueMetrics.map((q) => {
               var _a2, _b2, _c2;
-              return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2, "&:last-child": { mb: 0 } }, children: [
-                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 0.3 }, children: [
-                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                    /* @__PURE__ */ jsx(Box, { sx: { width: 10, height: 10, borderRadius: "50%", background: q.color, flexShrink: 0 } }),
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, fontWeight: 700, color: C.t1 }, children: q.queueName })
+              return /* @__PURE__ */ jsxs(Box_default, { sx: { mb: 2, "&:last-child": { mb: 0 } }, children: [
+                /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 0.3 }, children: [
+                  /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ jsx(Box_default, { sx: { width: 10, height: 10, borderRadius: "50%", background: q.color, flexShrink: 0 } }),
+                    /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 13, fontWeight: 700, color: C.t1 }, children: q.queueName })
                   ] }),
-                  /* @__PURE__ */ jsxs(Typography, { sx: __spreadProps(__spreadValues({}, monoSx), { fontSize: 13, fontWeight: 800, color: q.color }), children: [
+                  /* @__PURE__ */ jsxs(Typography_default, { sx: __spreadProps(__spreadValues({}, monoSx), { fontSize: 13, fontWeight: 800, color: q.color }), children: [
                     q.totalCalls,
                     " calls",
-                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: __spreadProps(__spreadValues({}, monoSx), { color: C.t3, ml: 0.5 }), children: [
+                    /* @__PURE__ */ jsxs(Typography_default, { component: "span", sx: __spreadProps(__spreadValues({}, monoSx), { color: C.t3, ml: 0.5 }), children: [
                       "(",
                       q.answeredCalls,
                       " ans / ",
@@ -609,52 +609,52 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx(Box, { sx: { height: 6, background: C.s3, borderRadius: 3, overflow: "hidden", mb: 0.3 }, children: /* @__PURE__ */ jsx(Box, { sx: { height: "100%", width: `${(_a2 = q.pctOfTotal) != null ? _a2 : 0}%`, background: q.color, borderRadius: 3 } }) }),
-                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: 1.5, rowGap: 0.2 }, children: [
-                  /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3 }, children: [
+                /* @__PURE__ */ jsx(Box_default, { sx: { height: 6, background: C.s3, borderRadius: 3, overflow: "hidden", mb: 0.3 }, children: /* @__PURE__ */ jsx(Box_default, { sx: { height: "100%", width: `${(_a2 = q.pctOfTotal) != null ? _a2 : 0}%`, background: q.color, borderRadius: 3 } }) }),
+                /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", flexWrap: "wrap", columnGap: 1.5, rowGap: 0.2 }, children: [
+                  /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: [
                     ((_b2 = q.pctOfTotal) != null ? _b2 : 0).toFixed(0),
                     "% of total"
                   ] }),
-                  /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3 }, children: [
+                  /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: [
                     "Ans: ",
                     ((_c2 = q.answerRate) != null ? _c2 : 0).toFixed(0),
                     "%"
                   ] }),
-                  /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3 }, children: [
+                  /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: [
                     "Talk: ",
                     /* @__PURE__ */ jsx("span", { style: __spreadProps(__spreadValues({}, monoSx), { color: C.t2 }), children: q.avgTalkFormatted })
                   ] }),
-                  /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3 }, children: [
+                  /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: [
                     "Hold: ",
                     /* @__PURE__ */ jsx("span", { style: __spreadProps(__spreadValues({}, monoSx), { color: C.t2 }), children: q.avgHoldFormatted })
                   ] }),
-                  /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3 }, children: [
+                  /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: [
                     "Wrap: ",
                     /* @__PURE__ */ jsx("span", { style: __spreadProps(__spreadValues({}, monoSx), { color: C.t2 }), children: q.avgWrapupFormatted })
                   ] }),
-                  /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: C.t3 }, children: [
+                  /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: [
                     "AHT: ",
                     /* @__PURE__ */ jsx("span", { style: __spreadProps(__spreadValues({}, monoSx), { color: C.t2 }), children: q.avgAhtFormatted })
                   ] })
                 ] })
               ] }, q.queueName);
-            }) : /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", py: 4, color: C.t3, fontSize: 13 }, children: "No queue data" }) })
+            }) : /* @__PURE__ */ jsx(Box_default, { sx: { textAlign: "center", py: 4, color: C.t3, fontSize: 13 }, children: "No queue data" }) })
           ] })
         ] })
       ] }),
-      activeTab === 1 && /* @__PURE__ */ jsxs(Box, { sx: { borderRadius: "8px", border: "1px solid #e0e7ef", overflow: "hidden", background: "transparent" }, children: [
-        /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Call History" }),
-          /* @__PURE__ */ jsx(Chip, { label: `${cdrTotal} records`, size: "small", sx: { fontSize: 11, fontWeight: 700, background: C.s2, color: C.t3, border: `1px solid ${C.b2}` } })
+      activeTab === 1 && /* @__PURE__ */ jsxs(Box_default, { sx: { borderRadius: "8px", border: "1px solid #e0e7ef", overflow: "hidden", background: "transparent" }, children: [
+        /* @__PURE__ */ jsx(Box_default, { sx: { px: 2, py: 1.2, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: C.t2 }, children: "Call History" }),
+          /* @__PURE__ */ jsx(Chip_default, { label: `${cdrTotal} records`, size: "small", sx: { fontSize: 11, fontWeight: 700, background: C.s2, color: C.t3, border: `1px solid ${C.b2}` } })
         ] }) }),
-        cdrError && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mx: 2, mt: 1 }, onClose: () => setCdrError(""), children: cdrError }),
-        /* @__PURE__ */ jsxs(TableContainer, { sx: { position: "relative" }, children: [
-          cdrLoading && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(255,255,255,0.7)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 5 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 28 }) }),
-          /* @__PURE__ */ jsxs(Table, { size: "small", sx: {
+        cdrError && /* @__PURE__ */ jsx(Alert_default, { severity: "error", sx: { mx: 2, mt: 1 }, onClose: () => setCdrError(""), children: cdrError }),
+        /* @__PURE__ */ jsxs(TableContainer_default, { sx: { position: "relative" }, children: [
+          cdrLoading && /* @__PURE__ */ jsx(Box_default, { sx: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(255,255,255,0.7)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 5 }, children: /* @__PURE__ */ jsx(CircularProgress_default, { size: 28 }) }),
+          /* @__PURE__ */ jsxs(Table_default, { size: "small", sx: {
             minWidth: 1400,
             "& .MuiTableCell-root": { fontSize: "0.75rem", borderBottom: "1px solid #eef1f6", py: 0.6, px: 1 }
           }, children: [
-            /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead_default, { children: /* @__PURE__ */ jsx(TableRow_default, { children: [
               "Phone Number",
               "Call Start",
               "Call Type",
@@ -668,35 +668,35 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
               "Disposition",
               "Transferred",
               "Recording"
-            ].map((label) => /* @__PURE__ */ jsx(TableCell, { sx: cdrHeadSx, children: label }, label)) }) }),
-            /* @__PURE__ */ jsxs(TableBody, { children: [
+            ].map((label) => /* @__PURE__ */ jsx(TableCell_default, { sx: cdrHeadSx, children: label }, label)) }) }),
+            /* @__PURE__ */ jsxs(TableBody_default, { children: [
               cdrRecords.map((row, idx) => {
                 var _a2;
-                return /* @__PURE__ */ jsxs(TableRow, { hover: true, sx: {
+                return /* @__PURE__ */ jsxs(TableRow_default, { hover: true, sx: {
                   backgroundColor: "#fff",
                   "&:hover": { backgroundColor: "#f0f7f8" }
                 }, children: [
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 600, color: C.navy, fontSize: "0.75rem" }, children: row.phoneNumber || "" }),
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.callStartTime ? dayjs(row.callStartTime).format("DD MMM YYYY hh:mm A") : "" }),
-                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(CallTypeChip, { type: row.callType || "" }) }),
-                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusChip, { status: row.callStatus || "" }) }),
-                  /* @__PURE__ */ jsx(TableCell, { children: row.queueName ? /* @__PURE__ */ jsx(Chip, { label: row.queueName, size: "small", sx: { backgroundColor: "#f0ebfa", color: C.purple, fontWeight: 500, fontSize: "0.67rem", height: 22 } }) : "" }),
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.extension || "" }),
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 600, color: C.blue, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.talkDurationFmt || "" }),
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 500, color: C.amber, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.holdDurationFmt || "" }),
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 500, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.ringingDurationFmt || "" }),
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 500, color: C.purple, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.wrapupDurationFmt || "" }),
-                  /* @__PURE__ */ jsx(TableCell, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.disposition || "" }),
-                  /* @__PURE__ */ jsx(TableCell, { children: row.wasTransferred ? /* @__PURE__ */ jsx(Chip, { label: "Yes", size: "small", sx: { backgroundColor: "#e6f7ef", color: C.green, fontWeight: 600, fontSize: "0.65rem", height: 20, borderRadius: "6px" } }) : /* @__PURE__ */ jsx(Chip, { label: "No", size: "small", sx: { backgroundColor: "transparent", color: "#6b7b8d", fontWeight: 600, fontSize: "0.65rem", height: 20, borderRadius: "6px" } }) }),
-                  /* @__PURE__ */ jsx(TableCell, { children: row.callUuid ? /* @__PURE__ */ jsx(RecordingCell, { callUuid: row.callUuid, recordingPath: (_a2 = row.recordingPath) != null ? _a2 : null }) : "" })
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontWeight: 600, color: C.navy, fontSize: "0.75rem" }, children: row.phoneNumber || "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.callStartTime ? (0, import_dayjs.default)(row.callStartTime).format("DD MMM YYYY hh:mm A") : "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { children: /* @__PURE__ */ jsx(CallTypeChip, { type: row.callType || "" }) }),
+                  /* @__PURE__ */ jsx(TableCell_default, { children: /* @__PURE__ */ jsx(StatusChip, { status: row.callStatus || "" }) }),
+                  /* @__PURE__ */ jsx(TableCell_default, { children: row.queueName ? /* @__PURE__ */ jsx(Chip_default, { label: row.queueName, size: "small", sx: { backgroundColor: "#f0ebfa", color: C.purple, fontWeight: 500, fontSize: "0.67rem", height: 22 } }) : "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.extension || "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontWeight: 600, color: C.blue, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.talkDurationFmt || "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontWeight: 500, color: C.amber, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.holdDurationFmt || "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontWeight: 500, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.ringingDurationFmt || "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontWeight: 500, color: C.purple, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.wrapupDurationFmt || "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.disposition || "" }),
+                  /* @__PURE__ */ jsx(TableCell_default, { children: row.wasTransferred ? /* @__PURE__ */ jsx(Chip_default, { label: "Yes", size: "small", sx: { backgroundColor: "#e6f7ef", color: C.green, fontWeight: 600, fontSize: "0.65rem", height: 20, borderRadius: "6px" } }) : /* @__PURE__ */ jsx(Chip_default, { label: "No", size: "small", sx: { backgroundColor: "transparent", color: "#6b7b8d", fontWeight: 600, fontSize: "0.65rem", height: 20, borderRadius: "6px" } }) }),
+                  /* @__PURE__ */ jsx(TableCell_default, { children: row.callUuid ? /* @__PURE__ */ jsx(RecordingCell, { callUuid: row.callUuid, recordingPath: (_a2 = row.recordingPath) != null ? _a2 : null }) : "" })
                 ] }, row.callUuid || idx);
               }),
-              !cdrLoading && cdrRecords.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 13, sx: { textAlign: "center", py: 4, color: C.t3, fontSize: 13 }, children: "No call records found" }) })
+              !cdrLoading && cdrRecords.length === 0 && /* @__PURE__ */ jsx(TableRow_default, { children: /* @__PURE__ */ jsx(TableCell_default, { colSpan: 13, sx: { textAlign: "center", py: 4, color: C.t3, fontSize: 13 }, children: "No call records found" }) })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsx(
-          TablePagination,
+          TablePagination_default,
           {
             component: "div",
             count: cdrTotal,
@@ -712,21 +712,21 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
           }
         )
       ] }),
-      activeTab === 2 && /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(3, 1fr)", lg: "repeat(4, 1fr)" }, gap: { xs: 1.5, lg: 2 }, mb: 2 }, children: [
+      activeTab === 2 && /* @__PURE__ */ jsxs(Box_default, { children: [
+        /* @__PURE__ */ jsxs(Box_default, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(3, 1fr)", lg: "repeat(4, 1fr)" }, gap: { xs: 1.5, lg: 2 }, mb: 2 }, children: [
           /* @__PURE__ */ jsx(StatCard, { value: (profile == null ? void 0 : profile.breakTimeFormatted) || "00:00:00", label: "Total Break Time", color: C.amber }),
           /* @__PURE__ */ jsx(StatCard, { value: (_j = profile == null ? void 0 : profile.breaksTaken) != null ? _j : 0, label: "Breaks Taken", color: C.purple }),
           /* @__PURE__ */ jsx(StatCard, { value: (profile == null ? void 0 : profile.productionFormatted) || "00:00:00", label: "Production Time", color: C.green }),
           /* @__PURE__ */ jsx(StatCard, { value: (profile == null ? void 0 : profile.loginDurationFormatted) || "00:00:00", label: "Login Duration", color: C.teal })
         ] }),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.72rem", fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: 0.8, mb: 1, fontFamily: "poppins, Arial, sans-serif" }, children: "Attendance Summary" }),
-          /* @__PURE__ */ jsx(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(4, 1fr)" }, gap: 1.5 }, children: [
-            { label: "First Login", value: (profile == null ? void 0 : profile.firstLoginTime) ? dayjs(profile.firstLoginTime).format("YYYY-MM-DD HH:mm:ss") : "\u2014", color: C.blue },
+        /* @__PURE__ */ jsxs(Box_default, { children: [
+          /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: "0.72rem", fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: 0.8, mb: 1, fontFamily: "poppins, Arial, sans-serif" }, children: "Attendance Summary" }),
+          /* @__PURE__ */ jsx(Box_default, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(4, 1fr)" }, gap: 1.5 }, children: [
+            { label: "First Login", value: (profile == null ? void 0 : profile.firstLoginTime) ? (0, import_dayjs.default)(profile.firstLoginTime).format("YYYY-MM-DD HH:mm:ss") : "\u2014", color: C.blue },
             { label: "Adherence Score", value: `${(_k = profile == null ? void 0 : profile.adherencePct) != null ? _k : 0}%`, color: C.green },
             { label: "Adherence Grade", value: (profile == null ? void 0 : profile.adherenceGrade) || "\u2014", color: C.purple },
             { label: "Answer Rate", value: `${((_l = profile == null ? void 0 : profile.answerRate) != null ? _l : 0).toFixed(1)}%`, color: C.teal }
-          ].map((item) => /* @__PURE__ */ jsxs(Box, { sx: {
+          ].map((item) => /* @__PURE__ */ jsxs(Box_default, { sx: {
             px: 1.5,
             py: 1.2,
             borderRadius: "10px",
@@ -736,8 +736,8 @@ function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initia
             borderLeftStyle: "solid",
             borderLeftColor: item.color
           }, children: [
-            /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.72rem", fontWeight: 600, color: "#888", mb: 0.3 }, children: item.label }),
-            /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.95rem", fontWeight: 700, color: "#1a1a1a" }, children: item.value })
+            /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.72rem", fontWeight: 600, color: "#888", mb: 0.3 }, children: item.label }),
+            /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "poppins, Arial, sans-serif", fontSize: "0.95rem", fontWeight: 700, color: "#1a1a1a" }, children: item.value })
           ] }, item.label)) })
         ] })
       ] })
@@ -750,4 +750,4 @@ var agentDetailReport_default = AgentDetailReport;
 export {
   agentDetailReport_default
 };
-//# sourceMappingURL=chunk-ISQBOS5Q.mjs.map
+//# sourceMappingURL=chunk-33QNSXP7.mjs.map