ahs-cti 0.0.1

package/dist/chunk-EJIWPC3H.mjs

@@ -0,0 +1,747 @@
+import {
+  AdapterDayjs,
+  AppButton,
+  DatePicker,
+  LocalizationProvider,
+  PageHeader
+} from "./chunk-GTDWTI5S.mjs";
+import {
+  SDKProvider
+} from "./chunk-6ICPXSN6.mjs";
+import {
+  END_POINT,
+  axios_default,
+  deepFindArray,
+  sdkStateManager
+} from "./chunk-DBSNJ3QH.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-UB5HSUGK.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 SearchIcon from "@mui/icons-material/Search";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+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";
+
+// call-control-sdk/lib/pages/agentDetailReport/useAgentDetailReport.ts
+import { useCallback, useState } from "react";
+function buildCdrQs(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) for (const id of params.agent_id) qs.append("agent_id", String(id));
+  if (params.queue_id) for (const id of params.queue_id) qs.append("queue_id", String(id));
+  if (params.call_type) qs.append("call_type", params.call_type);
+  if (params.status) qs.append("status", params.status);
+  if (params.search) qs.append("search", params.search);
+  if (params.page) qs.append("page", String(params.page));
+  if (params.pageSize) qs.append("pageSize", String(params.pageSize));
+  const str = qs.toString();
+  return str ? `?${str}` : "";
+}
+async function fetchRecordingBlob(callUuid) {
+  const res = await axios_default.get(END_POINT.RECORDING_BY_CALL(callUuid), {
+    responseType: "blob"
+  });
+  return res.data;
+}
+async function getAgentDetailReport(agentId, params) {
+  const qs = new URLSearchParams();
+  if (params == null ? void 0 : params.start_date) qs.append("start_date", params.start_date);
+  if (params == null ? void 0 : params.end_date) qs.append("end_date", params.end_date);
+  const qsStr = qs.toString();
+  const res = await axios_default.get(
+    `${END_POINT.AGENT_DETAIL_REPORT(agentId)}${qsStr ? `?${qsStr}` : ""}`
+  );
+  return res.data;
+}
+async function getCdrReport(params) {
+  const qs = buildCdrQs(params);
+  const res = await axios_default.get(`${END_POINT.CDR_REPORT}${qs}`);
+  return res.data;
+}
+async function getRecordingByCall(callUuid) {
+  return fetchRecordingBlob(callUuid);
+}
+
+// call-control-sdk/lib/pages/agentDetailReport/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var C = {
+  navy: "#0d2a56",
+  blue: "#1565c8",
+  green: "#0a9a62",
+  amber: "#c47c00",
+  red: "#cc2a2a",
+  purple: "#6b3fbf",
+  teal: "#0b7a8f",
+  bg: "#fff",
+  surface: "#fff",
+  s2: "#f7f9fc",
+  s3: "#eef2f7",
+  b1: "rgba(20,50,100,.07)",
+  b2: "rgba(20,50,100,.13)",
+  t1: "#0d1e35",
+  t2: "#364f6e",
+  t3: "#7a93b5",
+  t4: "#bccad9",
+  blt: "#e8f0fc",
+  glt: "#e4f6ef",
+  alt: "#fdf3e0",
+  rlt: "#fde8e8",
+  plt: "#f0eafa",
+  tlt: "#e3f4f7"
+};
+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: {
+    px: 1.5,
+    py: 1.2,
+    borderRadius: "10px",
+    backgroundColor: "#fafafa",
+    border: "1px solid #e0e0e0",
+    borderLeftWidth: "3px",
+    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 })
+  ] });
+}
+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: {
+    fontSize: 11,
+    fontWeight: 700,
+    height: 22,
+    background: isAns ? C.glt : isAband ? C.alt : C.rlt,
+    color: isAns ? C.green : isAband ? C.amber : C.red,
+    border: `1px solid ${isAns ? "rgba(10,154,98,.2)" : isAband ? "rgba(196,124,0,.2)" : "rgba(204,42,42,.2)"}`,
+    fontFamily: "'JetBrains Mono', monospace"
+  } });
+}
+function CallTypeChip({ type }) {
+  const isIn = (type == null ? void 0 : type.toLowerCase()) === "inbound";
+  return /* @__PURE__ */ jsx(Chip, { label: type || "\u2014", size: "small", sx: {
+    fontSize: 11,
+    fontWeight: 700,
+    height: 22,
+    background: isIn ? C.glt : C.blt,
+    color: isIn ? C.green : C.blue,
+    border: `1px solid ${isIn ? "rgba(10,154,98,.2)" : "rgba(21,101,200,.2)"}`,
+    fontFamily: "'JetBrains Mono', monospace"
+  } });
+}
+function RecordingCell({ callUuid, recordingPath }) {
+  const [audioUrl, setAudioUrl] = useState2(null);
+  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(PlayArrowIcon, { 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(FileDownloadIcon, { sx: { fontSize: 16 } }) }) }) })
+    ] });
+  }
+  const handlePlay = async () => {
+    if (audioUrl) return;
+    try {
+      setLoading(true);
+      setError(false);
+      const blob = await getRecordingByCall(callUuid);
+      const url = URL.createObjectURL(blob);
+      setAudioUrl(url);
+    } catch (e) {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDownload = async () => {
+    try {
+      const blob = audioUrl ? await fetch(audioUrl).then((r) => r.blob()) : await getRecordingByCall(callUuid);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `recording_${callUuid}.wav`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (e) {
+    }
+  };
+  if (audioUrl) {
+    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+      /* @__PURE__ */ jsx(
+        "audio",
+        {
+          controls: true,
+          autoPlay: true,
+          src: audioUrl,
+          onEnded: () => {
+            if (audioUrl.startsWith("blob:")) URL.revokeObjectURL(audioUrl);
+            setAudioUrl(null);
+          },
+          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(FileDownloadIcon, { 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(PlayArrowIcon, { 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(FileDownloadIcon, { sx: { fontSize: 16 } }) }) }) }),
+    error && /* @__PURE__ */ jsx(Chip, { label: "No File", size: "small", sx: { fontSize: "0.6rem", height: 18 } })
+  ] });
+}
+var cdrHeadSx = {
+  bgcolor: "#f1f1f1",
+  color: "#333",
+  fontWeight: 600,
+  whiteSpace: "nowrap",
+  fontSize: "14px",
+  py: 0.7,
+  px: 1
+};
+function AgentDetailReportContent({ agentRow: propAgentRow, onBack, from, initialStartDate, initialEndDate, initialQuickRange } = {}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const agentRow = propAgentRow || null;
+  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 syncFilterToUrl = (_sd, _ed, _range) => {
+  };
+  const [activeTab, setActiveTab] = useState2(0);
+  const [detail, setDetail] = useState2(null);
+  const [detailLoading, setDetailLoading] = useState2(!isFromReportsList);
+  const [detailError, setDetailError] = useState2("");
+  const [cdrRecords, setCdrRecords] = useState2([]);
+  const [cdrTotal, setCdrTotal] = useState2(0);
+  const [cdrPage, setCdrPage] = useState2(0);
+  const [cdrPageSize, setCdrPageSize] = useState2(10);
+  const [cdrLoading, setCdrLoading] = useState2(false);
+  const [cdrError, setCdrError] = useState2("");
+  const profile = (detail == null ? void 0 : detail.profile) || null;
+  const agentName = (profile == null ? void 0 : profile.fullName) || ((_c = agentRow == null ? void 0 : agentRow.agentDetails) == null ? void 0 : _c.fullName) || "Unknown Agent";
+  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();
+    let sd = today;
+    const ed = today;
+    if (range === "week") sd = today.startOf("week");
+    else if (range === "month") sd = today.startOf("month");
+    setStartDate(sd);
+    setEndDate(ed);
+    syncFilterToUrl(sd, ed, range);
+  };
+  const fetchDetailFn = async (sd, ed) => {
+    if (!agentIdFromRow) return;
+    try {
+      setDetailLoading(true);
+      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")
+      });
+      setDetail(res);
+    } catch (err) {
+      setDetailError((err == null ? void 0 : err.message) || "Failed to load agent detail");
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+  const fetchCdrFn = async (sd, ed, page, pageSize) => {
+    var _a2, _b2, _c2, _d2, _e2;
+    if (!agentIdFromRow) return;
+    try {
+      setCdrLoading(true);
+      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"),
+        search: agentIdFromRow,
+        page: page + 1,
+        pageSize
+      };
+      const res = await getCdrReport(params);
+      setCdrRecords(deepFindArray(res, ["data", "records"]));
+      setCdrTotal((_e2 = (_d2 = (_b2 = (_a2 = res == null ? void 0 : res.records) == null ? void 0 : _a2.total) != null ? _b2 : res == null ? void 0 : res.total) != null ? _d2 : (_c2 = res == null ? void 0 : res.data) == null ? void 0 : _c2.total) != null ? _e2 : 0);
+    } catch (err) {
+      setCdrError((err == null ? void 0 : err.message) || "Failed to load call history");
+    } finally {
+      setCdrLoading(false);
+    }
+  };
+  const handleSearch = (sd, ed) => {
+    const fromDate = sd != null ? sd : startDate;
+    const toDate = ed != null ? ed : endDate;
+    if (!fromDate || !toDate) return;
+    fetchDetailFn(fromDate, toDate);
+    setCdrPage(0);
+    if (activeTab === 1) fetchCdrFn(fromDate, toDate, 0, cdrPageSize);
+  };
+  useEffect(() => {
+    if (agentIdFromRow) fetchDetailFn(startDate != null ? startDate : dayjs(), endDate != null ? endDate : dayjs());
+  }, [agentIdFromRow]);
+  useEffect(() => {
+    if (activeTab === 1 && startDate && endDate) {
+      fetchCdrFn(startDate, endDate, cdrPage, cdrPageSize);
+    }
+  }, [activeTab, cdrPage, cdrPageSize]);
+  const hourlyCallData = useMemo(() => {
+    return ((detail == null ? void 0 : detail.hourlyCalls) || []).map((h) => ({
+      hour: String(h.hourOfDay).padStart(2, "0"),
+      answered: h.answeredCalls,
+      abandoned: h.missedCalls
+    }));
+  }, [detail]);
+  const timeUtilData = useMemo(() => {
+    const tu = detail == null ? void 0 : detail.timeUtilisation;
+    if (!tu) return [];
+    const total = tu.totalLoginSeconds || 1;
+    return [
+      { name: "On Call / Handle", value: tu.onCallSeconds, pct: tu.onCallSeconds / total * 100, formatted: tu.onCallFormatted, color: C.blue },
+      { name: "Idle", value: tu.idleSeconds, pct: tu.idleSeconds / total * 100, formatted: tu.idleFormatted, color: "#e8a0a0" },
+      { name: "Break", value: tu.breakSeconds, pct: tu.breakSeconds / total * 100, formatted: tu.breakFormatted, color: C.amber }
+    ];
+  }, [detail]);
+  const talkDurationBuckets = useMemo(() => {
+    const items = [...(detail == null ? void 0 : detail.talkDistribution) || []].sort((a, b) => a.bucketOrder - b.bucketOrder);
+    const total = items.reduce((s, b) => s + (b.callCount || 0), 0);
+    return items.map((b) => ({
+      bucket: b.bucketLabel,
+      count: b.callCount,
+      minSeconds: b.minSeconds,
+      maxSeconds: b.maxSeconds,
+      pct: total > 0 ? b.callCount / total * 100 : 0
+    }));
+  }, [detail]);
+  const talkDurationTotal = useMemo(
+    () => talkDurationBuckets.reduce((s, b) => s + (b.count || 0), 0),
+    [talkDurationBuckets]
+  );
+  const queuePieData = useMemo(() => {
+    return ((detail == null ? void 0 : detail.callsByQueue) || []).map((q, i) => ({
+      name: q.queueName,
+      value: q.callCount,
+      pctOfTotal: q.pctOfTotal,
+      color: QUEUE_COLORS[i % QUEUE_COLORS.length]
+    }));
+  }, [detail]);
+  const queueMetrics = useMemo(() => {
+    const items = (detail == null ? void 0 : detail.queueMetrics) || [];
+    const grandTotal = items.reduce((sum, q) => sum + q.totalCalls, 0);
+    return items.map((q, i) => __spreadProps(__spreadValues({}, q), {
+      pctOfTotal: grandTotal > 0 ? q.totalCalls / grandTotal * 100 : 0,
+      answerRate: q.totalCalls > 0 ? q.answeredCalls / q.totalCalls * 100 : 0,
+      color: QUEUE_COLORS[i % QUEUE_COLORS.length]
+    }));
+  }, [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 === "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")}`;
+      return `Hourly Call Volume \u2014 ${startDate.format("DD MMM YYYY")} to ${endDate.format("DD MMM YYYY")}`;
+    }
+    return "Hourly Call Volume";
+  }, [quickRange, startDate, endDate]);
+  const handleBack = useCallback2(() => {
+    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." }),
+      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 }) });
+  }
+  const tabs = ["Overview", "Call History", "Break Details"];
+  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Box, { sx: { background: C.bg, minHeight: "100vh" }, children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: agentName,
+        showBack: isFromReportsList,
+        onBack: handleBack
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", pb: 1.5, px: 2 }, children: [
+      /* @__PURE__ */ jsx(DatePicker, { value: startDate, onChange: (val) => {
+        const d = val;
+        setStartDate(d);
+        setQuickRange("custom");
+        if (d && endDate) syncFilterToUrl(d, endDate, "custom");
+      }, slotProps: { textField: { size: "small", sx: { width: 150, "& .MuiOutlinedInput-root": { borderRadius: "7px", fontSize: 12, height: 30 }, "& .MuiInputBase-input": { py: "4px", fontSize: 12 } } } } }),
+      /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, color: C.t3 }, children: "to" }),
+      /* @__PURE__ */ jsx(DatePicker, { value: endDate, onChange: (val) => {
+        const d = val;
+        setEndDate(d);
+        setQuickRange("custom");
+        if (startDate && d) syncFilterToUrl(startDate, d, "custom");
+      }, slotProps: { textField: { size: "small", sx: { width: 150, "& .MuiOutlinedInput-root": { borderRadius: "7px", fontSize: 12, height: 30 }, "& .MuiInputBase-input": { py: "4px", fontSize: 12 } } } } }),
+      /* @__PURE__ */ jsx(AppButton, { variant: quickRange === "today" ? "primary" : "outlined", onClick: () => {
+        setQuick("today");
+        handleSearch(dayjs(), dayjs());
+      }, sx: { whiteSpace: "nowrap" }, children: "Today" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: quickRange === "week" ? "primary" : "outlined", onClick: () => {
+        setQuick("week");
+        handleSearch(dayjs().startOf("week"), dayjs());
+      }, sx: { whiteSpace: "nowrap" }, children: "This Week" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: quickRange === "month" ? "primary" : "outlined", onClick: () => {
+        setQuick("month");
+        handleSearch(dayjs().startOf("month"), dayjs());
+      }, 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: [
+        { 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 },
+        { v: (profile == null ? void 0 : profile.avgAhtFormatted) || "00:00:00", l: "Avg AHT", c: C.purple },
+        { v: `${((_h = profile == null ? void 0 : profile.answerRate) != null ? _h : 0).toFixed(1)}%`, l: "Answer Rate", c: C.green },
+        { v: (profile == null ? void 0 : profile.loginDurationFormatted) || "00:00:00", l: "Login Duration", c: C.blue },
+        { v: (profile == null ? void 0 : profile.productionFormatted) || "00:00:00", l: "Production", c: C.blue },
+        { 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: {
+        px: 1.5,
+        py: 1.2,
+        borderRadius: "10px",
+        backgroundColor: "#fafafa",
+        borderLeft: `3px solid ${kpi.c}`,
+        border: "1px solid #e0e0e0",
+        borderLeftWidth: "3px",
+        borderLeftStyle: "solid",
+        borderLeftColor: kpi.c
+      }, children: [
+        /* @__PURE__ */ jsx(Typography, { sx: {
+          fontFamily: "poppins, Arial, sans-serif",
+          fontSize: "0.72rem",
+          fontWeight: 600,
+          color: "#888",
+          mb: 0.3
+        }, children: kpi.l }),
+        /* @__PURE__ */ jsx(Typography, { 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,
+          {
+            onClick: () => setActiveTab(idx),
+            sx: {
+              px: 2,
+              py: 1,
+              fontSize: 13,
+              fontWeight: 600,
+              cursor: "pointer",
+              color: activeTab === idx ? C.blue : C.t3,
+              borderBottom: `2px solid ${activeTab === idx ? C.blue : "transparent"}`,
+              mb: "-2px",
+              transition: "all .15s",
+              "&:hover": { color: C.t1 }
+            },
+            children: tab
+          },
+          tab
+        )) }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, mb: "-2px" }, children: [
+          /* @__PURE__ */ jsx(
+            AppButton,
+            {
+              size: "small",
+              startIcon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+              disabled: detailLoading || cdrLoading,
+              onClick: () => handleSearch(),
+              children: "Refresh"
+            }
+          ),
+          /* @__PURE__ */ jsx(AppButton, { size: "small", startIcon: /* @__PURE__ */ jsx(SearchIcon, {}), 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)` } })
+            ] }),
+            /* @__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(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(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__ */ 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(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__ */ 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__ */ 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(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,
+              {
+                contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` },
+                labelFormatter: (label, payload) => {
+                  var _a2;
+                  const p = (_a2 = payload == null ? void 0 : payload[0]) == null ? void 0 : _a2.payload;
+                  if (!p) return String(label);
+                  return `${label} (${p.minSeconds}\u2013${p.maxSeconds}s)`;
+                },
+                formatter: (val, _name, entry) => {
+                  var _a2;
+                  const pct = (_a2 = entry == null ? void 0 : entry.payload) == null ? void 0 : _a2.pct;
+                  return [`${val} call${val === 1 ? "" : "s"}${pct != null ? ` (${pct.toFixed(1)}%)` : ""}`, "Calls"];
+                }
+              }
+            ),
+            /* @__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__ */ 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__ */ 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,
+                {
+                  contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` },
+                  formatter: (val, name, entry) => {
+                    var _a2;
+                    const pct = (_a2 = entry == null ? void 0 : entry.payload) == null ? void 0 : _a2.pctOfTotal;
+                    return [`${val} calls${pct != null ? ` (${pct.toFixed(1)}%)` : ""}`, name];
+                  }
+                }
+              ),
+              /* @__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__ */ 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) => {
+              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 })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Typography, { 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: [
+                      "(",
+                      q.answeredCalls,
+                      " ans / ",
+                      q.missedCalls,
+                      " miss)"
+                    ] })
+                  ] })
+                ] }),
+                /* @__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: [
+                    ((_b2 = q.pctOfTotal) != null ? _b2 : 0).toFixed(0),
+                    "% of total"
+                  ] }),
+                  /* @__PURE__ */ jsxs(Typography, { 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: [
+                    "Talk: ",
+                    /* @__PURE__ */ jsx("span", { style: __spreadProps(__spreadValues({}, monoSx), { color: C.t2 }), children: q.avgTalkFormatted })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Typography, { 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: [
+                    "Wrap: ",
+                    /* @__PURE__ */ jsx("span", { style: __spreadProps(__spreadValues({}, monoSx), { color: C.t2 }), children: q.avgWrapupFormatted })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Typography, { 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" }) })
+          ] })
+        ] })
+      ] }),
+      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}` } })
+        ] }) }),
+        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: {
+            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: [
+              "Phone Number",
+              "Call Start",
+              "Call Type",
+              "Status",
+              "Queue",
+              "Extension",
+              "Talk Duration",
+              "Hold Duration",
+              "Ringing Duration",
+              "Wrapup Duration",
+              "Disposition",
+              "Transferred",
+              "Recording"
+            ].map((label) => /* @__PURE__ */ jsx(TableCell, { sx: cdrHeadSx, children: label }, label)) }) }),
+            /* @__PURE__ */ jsxs(TableBody, { children: [
+              cdrRecords.map((row, idx) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs(TableRow, { 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 }) : "" })
+                ] }, 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" }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          TablePagination,
+          {
+            component: "div",
+            count: cdrTotal,
+            page: cdrPage,
+            onPageChange: (_, p) => setCdrPage(p),
+            rowsPerPage: cdrPageSize,
+            onRowsPerPageChange: (e) => {
+              setCdrPageSize(parseInt(e.target.value, 10));
+              setCdrPage(0);
+            },
+            rowsPerPageOptions: [10, 15, 25, 50, 100],
+            sx: { borderTop: "1px solid #eef1f6", "& .MuiTablePagination-displayedRows": { fontSize: "0.73rem" }, "& .MuiTablePagination-selectLabel": { fontSize: "0.73rem" } }
+          }
+        )
+      ] }),
+      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: [
+          /* @__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 },
+            { 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: {
+            px: 1.5,
+            py: 1.2,
+            borderRadius: "10px",
+            backgroundColor: "#fafafa",
+            border: "1px solid #e0e0e0",
+            borderLeftWidth: "3px",
+            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 })
+          ] }, item.label)) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+var AgentDetailReport = (props) => /* @__PURE__ */ jsx(SDKProvider, { children: /* @__PURE__ */ jsx(AgentDetailReportContent, __spreadValues({}, props)) });
+var agentDetailReport_default = AgentDetailReport;
+
+export {
+  agentDetailReport_default
+};
+//# sourceMappingURL=chunk-EJIWPC3H.mjs.map