ahs-cti 1.0.1-beta.2 → 1.0.1-beta.21

package/dist/chunk-U2DJ5WRK.mjs

@@ -0,0 +1,1219 @@
+import {
+  SDKButton
+} from "./chunk-FVNDPJUU.mjs";
+import {
+  SDKPageHeader
+} from "./chunk-RZZQ42MG.mjs";
+import {
+  END_POINT,
+  SDKProvider,
+  __spreadProps,
+  __spreadValues,
+  axios_default,
+  sdkStateManager
+} from "./chunk-YREOEULC.mjs";
+
+// call-control-sdk/lib/pages/agentDetailReport/index.tsx
+import { memo, useCallback as useCallback2, useEffect, useMemo, useState as useState2 } from "react";
+import {
+  Alert,
+  Box,
+  Chip,
+  CircularProgress,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  LabelList,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip as RTooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import dayjs from "dayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+
+// 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.page_size) qs.append("page_size", String(params.page_size));
+  const str = qs.toString();
+  return str ? `?${str}` : "";
+}
+function useAgentDetailReport() {
+  const [detail, setDetail] = useState(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [detailError, setDetailError] = useState("");
+  const fetchDetail = useCallback(
+    async (agentId, params) => {
+      var _a, _b;
+      if (!agentId) return;
+      setDetailLoading(true);
+      setDetailError("");
+      try {
+        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);
+        const qsStr = qs.toString();
+        const url = `${END_POINT.AGENT_DETAIL_REPORT(agentId)}${qsStr ? `?${qsStr}` : ""}`;
+        const res = await axios_default.get(url);
+        setDetail(res.data);
+      } catch (err) {
+        setDetailError(((_b = (_a = err == null ? void 0 : err.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message) || (err == null ? void 0 : err.message) || "Failed to load agent detail");
+        setDetail(null);
+      } finally {
+        setDetailLoading(false);
+      }
+    },
+    []
+  );
+  return { detail, detailLoading, detailError, setDetailError, fetchDetail };
+}
+function useAgentCdrRecords() {
+  const [records, setRecords] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const fetchCdr = useCallback(async (params) => {
+    var _a, _b, _c, _d, _e, _f;
+    setLoading(true);
+    setError("");
+    try {
+      const res = await axios_default.get(
+        `${END_POINT.CDR_REPORT}${buildCdrQs(params)}`
+      );
+      setRecords(((_b = (_a = res.data) == null ? void 0 : _a.records) == null ? void 0 : _b.data) || []);
+      setTotal(((_d = (_c = res.data) == null ? void 0 : _c.records) == null ? void 0 : _d.total) || 0);
+    } catch (err) {
+      setError(((_f = (_e = err == null ? void 0 : err.response) == null ? void 0 : _e.data) == null ? void 0 : _f.message) || (err == null ? void 0 : err.message) || "Failed to load call history");
+      setRecords([]);
+      setTotal(0);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { records, total, loading, error, setError, fetchCdr };
+}
+async function fetchRecordingBlob(callUuid) {
+  const res = await axios_default.get(END_POINT.RECORDING_BY_CALL(callUuid), {
+    responseType: "blob"
+  });
+  return res.data;
+}
+
+// call-control-sdk/lib/pages/agentDetailReport/styles.ts
+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 QUEUE_COLORS = [C.blue, C.green, C.purple, C.amber, C.teal, C.red, C.navy];
+var monoSx = { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600 };
+var containerSx = {
+  background: C.bg,
+  minHeight: "100vh"
+};
+var filterBarSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  flexWrap: "wrap",
+  pb: 1.5,
+  px: 2
+};
+var datePickerSx = {
+  width: 150,
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "7px",
+    fontSize: 12,
+    height: 30
+  },
+  "& .MuiInputBase-input": { py: "4px", fontSize: 12 }
+};
+var contentSx = {
+  py: 2,
+  px: 2,
+  position: "relative"
+};
+var loadingOverlaySx = {
+  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
+};
+var kpiGridSx = {
+  display: "grid",
+  gridTemplateColumns: { xs: "1fr 1fr", sm: "repeat(3, 1fr)", md: "repeat(5, 1fr)" },
+  gap: 1.5,
+  mb: 2
+};
+var kpiCardSx = (color) => ({
+  px: 1.5,
+  py: 1.2,
+  borderRadius: "10px",
+  backgroundColor: "#fafafa",
+  border: "1px solid #e0e0e0",
+  borderLeftWidth: "3px",
+  borderLeftStyle: "solid",
+  borderLeftColor: color
+});
+var kpiLabelSx = {
+  fontFamily: "poppins, Arial, sans-serif",
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color: "#888",
+  mb: 0.3
+};
+var kpiValueSx = {
+  fontFamily: "poppins, Arial, sans-serif",
+  fontSize: "0.95rem",
+  fontWeight: 700,
+  color: "#1a1a1a"
+};
+var tabBarSx = {
+  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
+};
+var tabItemSx = (active) => ({
+  px: 2,
+  py: 1,
+  fontSize: 13,
+  fontWeight: 600,
+  cursor: "pointer",
+  color: active ? C.blue : C.t3,
+  borderBottom: `2px solid ${active ? C.blue : "transparent"}`,
+  mb: "-2px",
+  transition: "all .15s",
+  "&:hover": { color: C.t1 }
+});
+var sectionCardSx = {
+  border: `1px solid ${C.b1}`,
+  borderRadius: "10px",
+  overflow: "hidden",
+  background: "transparent"
+};
+var sectionHeaderSx = {
+  px: 2,
+  py: 1.2,
+  background: C.s2,
+  borderBottom: `1px solid ${C.b1}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+};
+var sectionTitleSx = {
+  fontSize: 12,
+  fontWeight: 700,
+  letterSpacing: 0.8,
+  textTransform: "uppercase",
+  color: C.t2
+};
+var cdrHeadSx = {
+  bgcolor: "#f1f1f1",
+  color: "#333",
+  fontWeight: 600,
+  whiteSpace: "nowrap",
+  fontSize: "14px",
+  py: 0.7,
+  px: 1
+};
+var cdrTableSx = {
+  minWidth: 1400,
+  "& .MuiTableCell-root": {
+    fontSize: "0.75rem",
+    borderBottom: "1px solid #eef1f6",
+    py: 0.6,
+    px: 1
+  }
+};
+var cdrRowSx = {
+  backgroundColor: "#fff",
+  "&:hover": { backgroundColor: "#f0f7f8" }
+};
+var paginationSx = {
+  borderTop: "1px solid #eef1f6",
+  "& .MuiTablePagination-displayedRows": { fontSize: "0.73rem" },
+  "& .MuiTablePagination-selectLabel": { fontSize: "0.73rem" }
+};
+
+// call-control-sdk/lib/pages/agentDetailReport/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatCard({ value, label, color }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: kpiCardSx(color), children: [
+    /* @__PURE__ */ jsx(Typography, { sx: kpiLabelSx, children: label }),
+    /* @__PURE__ */ jsx(Typography, { sx: kpiValueSx, 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 fetchRecordingBlob(callUuid);
+      setAudioUrl(URL.createObjectURL(blob));
+    } catch (e) {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDownload = async () => {
+    try {
+      const blob = audioUrl ? await fetch(audioUrl).then((r) => r.blob()) : await fetchRecordingBlob(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 AgentDetailReportContent = memo(
+  ({ agentRow, onBack, from, initialStartDate, initialEndDate, initialQuickRange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const isFromReportsList = from === "REPORTS_LIST";
+    const agentIdFromRow = isFromReportsList ? (agentRow == null ? void 0 : agentRow.agentId) || "" : sdkStateManager.getState().agentId || (agentRow == null ? void 0 : agentRow.agentId) || "";
+    const [quickRange, setQuickRange] = useState2(initialQuickRange || "today");
+    const [startDate, setStartDate] = useState2(initialStartDate != null ? initialStartDate : dayjs());
+    const [endDate, setEndDate] = useState2(initialEndDate != null ? initialEndDate : dayjs());
+    const [activeTab, setActiveTab] = useState2(0);
+    const [cdrPage, setCdrPage] = useState2(0);
+    const [cdrPageSize, setCdrPageSize] = useState2(10);
+    const { detail, detailLoading, detailError, setDetailError, fetchDetail } = useAgentDetailReport();
+    const {
+      records: cdrRecords,
+      total: cdrTotal,
+      loading: cdrLoading,
+      error: cdrError,
+      setError: setCdrError,
+      fetchCdr
+    } = useAgentCdrRecords();
+    const profile = (detail == null ? void 0 : detail.profile) || null;
+    const agentName = (profile == null ? void 0 : profile.fullName) || (agentRow == null ? void 0 : agentRow.fullName) || "Unknown Agent";
+    const showInitialSpinner = !isFromReportsList && detailLoading && !profile && !(agentRow == null ? void 0 : agentRow.fullName);
+    const fetchDetailFn = useCallback2(
+      (sd, ed) => {
+        if (!agentIdFromRow) return;
+        fetchDetail(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")
+        });
+      },
+      [agentIdFromRow, fetchDetail]
+    );
+    const fetchCdrFn = useCallback2(
+      (sd, ed, page, pageSize) => {
+        if (!agentIdFromRow) return;
+        fetchCdr({
+          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,
+          page_size: pageSize
+        });
+      },
+      [agentIdFromRow, fetchCdr]
+    );
+    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);
+    };
+    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);
+      handleSearch(sd, ed);
+    };
+    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(() => {
+      if (onBack) 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." }),
+        /* @__PURE__ */ jsx(SDKButton, { 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: containerSx, children: [
+      /* @__PURE__ */ jsx(SDKPageHeader, { title: agentName, showBack: isFromReportsList, onBack: handleBack }),
+      /* @__PURE__ */ jsxs(Box, { sx: filterBarSx, children: [
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: startDate,
+            onChange: (val) => {
+              setStartDate(val);
+              setQuickRange("custom");
+            },
+            slotProps: { textField: { size: "small", sx: datePickerSx } }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, color: C.t3 }, children: "to" }),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: endDate,
+            onChange: (val) => {
+              setEndDate(val);
+              setQuickRange("custom");
+            },
+            slotProps: { textField: { size: "small", sx: datePickerSx } }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SDKButton,
+          {
+            variant: quickRange === "today" ? "primary" : "outlined",
+            onClick: () => setQuick("today"),
+            children: "Today"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SDKButton,
+          {
+            variant: quickRange === "week" ? "primary" : "outlined",
+            onClick: () => setQuick("week"),
+            children: "This Week"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SDKButton,
+          {
+            variant: quickRange === "month" ? "primary" : "outlined",
+            onClick: () => setQuick("month"),
+            children: "This Month"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: contentSx, children: [
+        detailLoading && /* @__PURE__ */ jsx(Box, { sx: loadingOverlaySx, children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
+        detailError && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setDetailError(""), children: detailError }),
+        /* @__PURE__ */ jsx(Box, { sx: kpiGridSx, children: [
+          { v: (_a = profile == null ? void 0 : profile.totalCalls) != null ? _a : 0, l: "Total Calls", c: C.navy },
+          { v: (_b = profile == null ? void 0 : profile.answeredCalls) != null ? _b : 0, l: "Answered", c: C.green },
+          { v: (_c = profile == null ? void 0 : profile.missedCalls) != null ? _c : 0, l: "Missed", c: C.red },
+          { v: (profile == null ? void 0 : profile.avgAhtFormatted) || "00:00:00", l: "Avg AHT", c: C.purple },
+          { v: `${((_d = profile == null ? void 0 : profile.answerRate) != null ? _d : 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: `${((_e = profile == null ? void 0 : profile.adherencePct) != null ? _e : 0).toFixed(1)}%`,
+            l: `Adherence${(profile == null ? void 0 : profile.adherenceGrade) ? ` (${profile.adherenceGrade})` : ""}`,
+            c: C.teal
+          }
+        ].map((kpi, i) => /* @__PURE__ */ jsx(StatCard, { value: kpi.v, label: kpi.l, color: kpi.c }, i)) }),
+        /* @__PURE__ */ jsxs(Box, { sx: tabBarSx, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(Box, { onClick: () => setActiveTab(idx), sx: tabItemSx(activeTab === idx), children: tab }, tab)) }),
+          /* @__PURE__ */ jsx(SDKButton, { 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: sectionCardSx, children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: sectionHeaderSx, children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: sectionTitleSx, 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: sectionCardSx, children: [
+                  /* @__PURE__ */ jsx(Box, { sx: __spreadProps(__spreadValues({}, sectionHeaderSx), { justifyContent: "flex-start" }), children: /* @__PURE__ */ jsx(Typography, { sx: sectionTitleSx, 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 } })
+                  ] }) }) : /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        color: C.t3,
+                        fontSize: 13
+                      },
+                      children: "No data"
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { sx: __spreadProps(__spreadValues({}, sectionCardSx), { mb: 2 }), children: [
+            /* @__PURE__ */ jsxs(Box, { sx: sectionHeaderSx, children: [
+              /* @__PURE__ */ jsx(Typography, { sx: sectionTitleSx, 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 } }),
+                  /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 11, fill: C.t3 }, allowDecimals: false }),
+                  /* @__PURE__ */ jsx(
+                    RTooltip,
+                    {
+                      contentStyle: { fontSize: 12, borderRadius: 8, border: `1px solid ${C.b2}` }
+                    }
+                  ),
+                  /* @__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: sectionCardSx, children: [
+                  /* @__PURE__ */ jsx(Box, { sx: __spreadProps(__spreadValues({}, sectionHeaderSx), { justifyContent: "flex-start" }), children: /* @__PURE__ */ jsx(Typography, { sx: sectionTitleSx, 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}` }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 } })
+                  ] }) }) : /* @__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: sectionCardSx, children: [
+                  /* @__PURE__ */ jsx(Box, { sx: __spreadProps(__spreadValues({}, sectionHeaderSx), { justifyContent: "flex-start" }), children: /* @__PURE__ */ jsx(Typography, { sx: sectionTitleSx, 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: sectionHeaderSx, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx(Typography, { sx: sectionTitleSx, 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: cdrTableSx, 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: cdrRowSx, children: [
+                        /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 600, color: C.navy }, children: row.phoneNumber || "" }),
+                        /* @__PURE__ */ jsx(TableCell, { sx: { 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: { color: "#4a5568" }, children: row.extension || "" }),
+                        /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 600, color: C.blue, fontVariantNumeric: "tabular-nums" }, children: row.talkDurationFmt || "" }),
+                        /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 500, color: C.amber, fontVariantNumeric: "tabular-nums" }, children: row.holdDurationFmt || "" }),
+                        /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 500, fontVariantNumeric: "tabular-nums" }, children: row.ringingDurationFmt || "" }),
+                        /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 500, color: C.purple, fontVariantNumeric: "tabular-nums" }, children: row.wrapupDurationFmt || "" }),
+                        /* @__PURE__ */ jsx(TableCell, { sx: { 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: [5, 10, 20, 25, 50],
+                  sx: paginationSx
+                }
+              )
+            ]
+          }
+        ),
+        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: (_f = profile == null ? void 0 : profile.breaksTaken) != null ? _f : 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: `${(_g = profile == null ? void 0 : profile.adherencePct) != null ? _g : 0}%`,
+                    color: C.green
+                  },
+                  {
+                    label: "Adherence Grade",
+                    value: (profile == null ? void 0 : profile.adherenceGrade) || "\u2014",
+                    color: C.purple
+                  },
+                  {
+                    label: "Answer Rate",
+                    value: `${((_h = profile == null ? void 0 : profile.answerRate) != null ? _h : 0).toFixed(1)}%`,
+                    color: C.teal
+                  }
+                ].map((item) => /* @__PURE__ */ jsx(
+                  StatCard,
+                  {
+                    value: item.value,
+                    label: item.label,
+                    color: item.color
+                  },
+                  item.label
+                ))
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
+);
+var AgentDetailReport = (props) => /* @__PURE__ */ jsx(SDKProvider, { children: /* @__PURE__ */ jsx(AgentDetailReportContent, __spreadValues({}, props)) });
+var agentDetailReport_default = AgentDetailReport;
+
+export {
+  agentDetailReport_default
+};
+//# sourceMappingURL=chunk-U2DJ5WRK.mjs.map