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

package/dist/cdrReport-6OBRKAYS.mjs

@@ -0,0 +1,965 @@
+import {
+  SDKPermissionGuard
+} from "./chunk-I4CJTHZR.mjs";
+import {
+  SDKButton
+} from "./chunk-FVNDPJUU.mjs";
+import {
+  SDKPageHeader
+} from "./chunk-RZZQ42MG.mjs";
+import {
+  END_POINT,
+  SDKProvider,
+  SDK_PERMISSIONS,
+  __spreadProps,
+  __spreadValues,
+  axios_default
+} from "./chunk-YREOEULC.mjs";
+
+// call-control-sdk/lib/pages/cdrReport/index.tsx
+import { memo, useCallback as useCallback2, useEffect, useMemo, useRef, useState as useState2 } from "react";
+import {
+  Alert,
+  Box,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TableSortLabel,
+  TextField,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import DownloadIcon from "@mui/icons-material/Download";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import SearchIcon from "@mui/icons-material/Search";
+import dayjs from "dayjs";
+import isoWeek from "dayjs/plugin/isoWeek";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+
+// call-control-sdk/lib/pages/cdrReport/useCdrReport.ts
+import { useCallback, useState } from "react";
+function buildCdrQuery(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 useCdrReport() {
+  const [records, setRecords] = useState([]);
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const fetchRecords = useCallback(async (params) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    setLoading(true);
+    setError("");
+    try {
+      const qs = buildCdrQuery(params);
+      const res = await axios_default.get(`${END_POINT.CDR_REPORT_RECORDS}${qs}`);
+      setRecords((_b = (_a = res.data) == null ? void 0 : _a.data) != null ? _b : []);
+      setTotalRecords((_d = (_c = res.data) == null ? void 0 : _c.total) != null ? _d : 0);
+    } catch (err) {
+      setError(
+        (_k = (_j = (_i = (_f = (_e = err == null ? void 0 : err.response) == null ? void 0 : _e.data) == null ? void 0 : _f.message) != null ? _i : (_h = (_g = err == null ? void 0 : err.response) == null ? void 0 : _g.data) == null ? void 0 : _h.detail) != null ? _j : err == null ? void 0 : err.message) != null ? _k : "Failed to fetch CDR report"
+      );
+      setRecords([]);
+      setTotalRecords(0);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const exportExcel = useCallback(async (params) => {
+    var _a;
+    const qs = buildCdrQuery(params);
+    const res = await axios_default.get(`${END_POINT.CDR_REPORT_EXPORT_EXCEL}${qs}`, {
+      responseType: "blob"
+    });
+    const blob = res.data;
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `cdr-report-${(_a = params.start_date) != null ? _a : "export"}.xlsx`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    window.URL.revokeObjectURL(url);
+  }, []);
+  const fetchRecording = useCallback(async (callUuid) => {
+    const res = await axios_default.get(END_POINT.RECORDING_BY_CALL(callUuid), {
+      responseType: "blob"
+    });
+    return res.data;
+  }, []);
+  return {
+    records,
+    totalRecords,
+    loading,
+    error,
+    setError,
+    fetchRecords,
+    exportExcel,
+    fetchRecording
+  };
+}
+function useCdrFilters() {
+  const [agents, setAgents] = useState([]);
+  const [queues, setQueues] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const fetchAgents = useCallback(async () => {
+    var _a;
+    try {
+      const res = await axios_default.get(
+        END_POINT.USERS_LIST,
+        { params: { role: "AGENT" } }
+      );
+      const raw = Array.isArray(res.data) ? res.data : Array.isArray((_a = res.data) == null ? void 0 : _a.data) ? res.data.data : [];
+      const mapped = raw.filter((u) => {
+        const roleName = typeof u.role === "object" && u.role !== null ? u.role.name : u.role;
+        return roleName === "AGENT";
+      }).map((u) => ({
+        id: u.id,
+        userId: u.userId,
+        fullName: [u.firstName, u.lastName].filter(Boolean).join(" ") || u.userId
+      }));
+      setAgents(mapped);
+    } catch (e) {
+      setAgents([]);
+    }
+  }, []);
+  const fetchQueues = useCallback(async () => {
+    var _a;
+    try {
+      const res = await axios_default.get(
+        END_POINT.MASTER_QUEUES
+      );
+      const raw = Array.isArray(res.data) ? res.data : Array.isArray((_a = res.data) == null ? void 0 : _a.data) ? res.data.data : [];
+      setQueues(raw.map((q) => ({ id: q.id, name: q.name })));
+    } catch (e) {
+      setQueues([]);
+    }
+  }, []);
+  const fetchAll = useCallback(async () => {
+    setLoading(true);
+    try {
+      await Promise.all([fetchAgents(), fetchQueues()]);
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchAgents, fetchQueues]);
+  return { agents, queues, loading, fetchAgents, fetchQueues, fetchAll };
+}
+
+// call-control-sdk/lib/pages/cdrReport/types.ts
+var DEFAULT_PAGE_SIZE = 15;
+var ROWS_PER_PAGE_OPTIONS = [5, 10, 20, 25, 50];
+
+// call-control-sdk/lib/pages/cdrReport/styles.ts
+var FONT = "'Inter', 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif";
+var COLORS = {
+  navy: "#0d2a56",
+  blue: "#1565c8",
+  green: "#0a9a62",
+  amber: "#c47c00",
+  red: "#cc2a2a",
+  purple: "#6b3fbf",
+  bg: "transparent",
+  surface: "transparent"
+};
+var pageContainerSx = {
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  fontFamily: FONT
+};
+var contentSx = {
+  flex: 1,
+  overflow: "auto",
+  py: 0.8,
+  px: 0
+};
+var FILTER_HEIGHT = 32;
+var filterBarSx = {
+  py: 0.6,
+  px: 1,
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  flexWrap: "wrap",
+  rowGap: 1
+};
+var filterBarBoxSx = {
+  mb: 0.8
+};
+var datePickerSx = {
+  width: 170,
+  "& .MuiOutlinedInput-root": { borderRadius: "6px", height: FILTER_HEIGHT, px: 0.5 },
+  "& .MuiInputBase-input": { py: 0, px: "4px", fontSize: "0.72rem" },
+  "& .MuiInputAdornment-root": { ml: 0 },
+  "& .MuiInputAdornment-root .MuiSvgIcon-root": { fontSize: "0.8rem" },
+  "& .MuiOutlinedInput-notchedOutline": { borderColor: "#c0c8d4" },
+  "& .MuiPickersSectionList-root": { py: "4px", px: 0, fontSize: 12 }
+};
+var dateSeparatorSx = {
+  fontSize: "0.72rem",
+  color: "#7a8599"
+};
+var quickBtnSx = {
+  height: FILTER_HEIGHT,
+  whiteSpace: "nowrap"
+};
+var multiSelectFormSx = {
+  minWidth: 130
+};
+var multiSelectSx = {
+  fontSize: "0.76rem",
+  height: FILTER_HEIGHT,
+  borderRadius: "6px"
+};
+var multiSelectMenuPropsSx = {
+  maxHeight: 280,
+  "& .MuiMenuItem-root": { fontSize: "0.76rem", minHeight: 32, py: 0.3 }
+};
+var multiSelectLabelSx = {
+  fontSize: "0.76rem"
+};
+var searchBarSx = {
+  width: 250,
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "50px",
+    height: 36,
+    backgroundColor: "#f5f7f8",
+    "& fieldset": { borderColor: "#dde3e8" },
+    "&:hover fieldset": { borderColor: "#1A5F6C" },
+    "&.Mui-focused fieldset": { borderColor: "#1A5F6C", borderWidth: "1.5px" }
+  },
+  "& .MuiInputBase-input": {
+    fontSize: "0.85rem",
+    "&::placeholder": { color: "#94a3b8", opacity: 1 }
+  }
+};
+var tablePaperSx = {
+  borderRadius: "8px",
+  border: "1px solid #e0e7ef",
+  overflow: "hidden",
+  mb: 2
+};
+var tableSx = {
+  minWidth: 1400,
+  fontFamily: FONT,
+  "& .MuiTableCell-root": {
+    fontFamily: FONT,
+    fontSize: "0.75rem",
+    borderBottom: "1px solid #eef1f6",
+    py: 0.6,
+    px: 1,
+    whiteSpace: "nowrap"
+  }
+};
+var headCellSx = {
+  fontFamily: "poppins, Arial, sans-serif",
+  bgcolor: "#f1f1f1",
+  color: "#333",
+  fontWeight: 600,
+  whiteSpace: "nowrap",
+  fontSize: "14px"
+};
+var sortLabelSx = {
+  "&.MuiTableSortLabel-root": { color: "#333" },
+  "&.MuiTableSortLabel-root:hover": { color: "#555" },
+  "&.Mui-active": { color: "#333" },
+  "& .MuiTableSortLabel-icon": { color: "#333 !important" }
+};
+var tableRowSx = {
+  backgroundColor: "#fff",
+  "&:hover": { backgroundColor: "#f0f7f8" }
+};
+var cellNumberSx = {
+  fontWeight: 600,
+  color: COLORS.navy,
+  fontSize: "0.75rem"
+};
+var cellDateSx = {
+  fontSize: "0.73rem",
+  color: "#4a5568"
+};
+var cellTalkSx = {
+  fontWeight: 600,
+  color: COLORS.blue,
+  fontSize: "0.75rem",
+  fontVariantNumeric: "tabular-nums"
+};
+var cellHoldSx = {
+  fontWeight: 500,
+  color: COLORS.amber,
+  fontSize: "0.75rem",
+  fontVariantNumeric: "tabular-nums"
+};
+var cellDurationSx = {
+  fontWeight: 500,
+  fontSize: "0.75rem",
+  fontVariantNumeric: "tabular-nums"
+};
+var callTypePillSx = (value) => {
+  const v = (value || "").toLowerCase();
+  let color = "#6b7b8d";
+  let bg = "transparent";
+  if (v.includes("inbound")) {
+    color = COLORS.green;
+    bg = "#e6f7ef";
+  } else if (v.includes("outbound")) {
+    color = COLORS.blue;
+    bg = "#e3eefa";
+  } else if (v.includes("internal")) {
+    color = COLORS.purple;
+    bg = "#f0e8ff";
+  }
+  return {
+    fontFamily: FONT,
+    bgcolor: bg,
+    color,
+    fontWeight: 600,
+    fontSize: "0.65rem",
+    height: 20,
+    borderRadius: "6px"
+  };
+};
+var statusPillSx = (value) => {
+  const v = (value || "").toLowerCase();
+  let color = "#6b7b8d";
+  let bg = "transparent";
+  if (v.includes("answered")) {
+    color = COLORS.green;
+    bg = "#e6f7ef";
+  } else if (v.includes("abandoned") || v.includes("missed")) {
+    color = COLORS.red;
+    bg = "#fce8e8";
+  }
+  return {
+    fontFamily: FONT,
+    bgcolor: bg,
+    color,
+    fontWeight: 600,
+    fontSize: "0.65rem",
+    height: 20,
+    borderRadius: "6px"
+  };
+};
+var queueChipSx = {
+  fontFamily: FONT,
+  backgroundColor: "#f0ebfa",
+  color: COLORS.purple,
+  fontWeight: 500,
+  fontSize: "0.67rem",
+  height: 22
+};
+var transferYesSx = {
+  fontFamily: FONT,
+  backgroundColor: "#e6f7ef",
+  color: COLORS.green,
+  fontWeight: 600,
+  fontSize: "0.65rem",
+  height: 20,
+  borderRadius: "6px"
+};
+var transferNoSx = {
+  fontFamily: FONT,
+  backgroundColor: "transparent",
+  color: "#6b7b8d",
+  fontWeight: 600,
+  fontSize: "0.65rem",
+  height: 20,
+  borderRadius: "6px"
+};
+var paginationSx = {
+  borderTop: "1px solid #eef1f6",
+  fontFamily: FONT,
+  "& .MuiTablePagination-displayedRows": { fontFamily: FONT, fontSize: "0.73rem" },
+  "& .MuiTablePagination-selectLabel": { fontFamily: FONT, fontSize: "0.73rem" }
+};
+var alertSx = {
+  mt: 1,
+  fontFamily: FONT,
+  fontSize: "0.78rem"
+};
+var loadingBoxSx = {
+  textAlign: "center",
+  py: 2.5
+};
+
+// call-control-sdk/lib/pages/cdrReport/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+dayjs.extend(isoWeek);
+var AGENT_SELECT_ALL_ID = -999;
+var comparator = (a, b, key) => {
+  const av = a[key];
+  const bv = b[key];
+  if (typeof av === "number" && typeof bv === "number") return av - bv;
+  if (typeof av === "boolean" && typeof bv === "boolean") return (av ? 1 : 0) - (bv ? 1 : 0);
+  return String(av != null ? av : "").localeCompare(String(bv != null ? bv : ""));
+};
+var RecordingCell = memo(function RecordingCell2({
+  callUuid,
+  recordingPath,
+  fetchRecording
+}) {
+  const [audioUrl, setAudioUrl] = useState2(null);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(false);
+  const unavailable = recordingPath === null;
+  const handlePlay = async () => {
+    if (audioUrl) return;
+    try {
+      setLoading(true);
+      setError(false);
+      const blob = await fetchRecording(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 fetchRecording(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: 180, height: 30 }
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { title: "Download", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleDownload, sx: { color: COLORS.blue, p: 0.4 }, children: /* @__PURE__ */ jsx(FileDownloadIcon, { sx: { fontSize: 16 } }) }) })
+    ] });
+  }
+  const disabled = loading || error || unavailable;
+  const playTitle = unavailable || error ? "Recording Unavailable" : "Play";
+  const dlTitle = unavailable || error ? "Recording Unavailable" : "Download";
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.3 }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: playTitle, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: handlePlay,
+        disabled,
+        sx: { color: unavailable ? "#b0b8c8" : COLORS.green, p: 0.4 },
+        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(PlayArrowIcon, { sx: { fontSize: 16 } })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: dlTitle, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: handleDownload,
+        disabled,
+        sx: { color: unavailable ? "#b0b8c8" : COLORS.blue, p: 0.4 },
+        children: /* @__PURE__ */ jsx(FileDownloadIcon, { sx: { fontSize: 16 } })
+      }
+    ) }) })
+  ] });
+});
+var FilterBar = memo(function FilterBar2({
+  startDate,
+  endDate,
+  onStartChange,
+  onEndChange,
+  quickRange,
+  onQuickRangeChange,
+  agents,
+  selectedAgentIds,
+  onAgentsChange,
+  queues,
+  selectedQueueIds,
+  onQueuesChange
+}) {
+  const setQuick = (range) => {
+    onQuickRangeChange(range);
+    const today = dayjs();
+    let sd = today.startOf("day");
+    const ed = today;
+    if (range === "week") sd = today.startOf("week").startOf("day");
+    else if (range === "month") sd = today.startOf("month").startOf("day");
+    onStartChange(sd);
+    onEndChange(ed);
+  };
+  const now = dayjs();
+  const clampFuture = (v) => {
+    if (!v) return v;
+    const current = dayjs();
+    return v.isAfter(current) ? current : v;
+  };
+  const handleStartChange = (v) => {
+    const clamped = clampFuture(v);
+    onStartChange(clamped);
+    onQuickRangeChange("");
+    if (clamped && endDate && endDate.isBefore(clamped)) {
+      onEndChange(clamped);
+    }
+  };
+  const handleEndChange = (v) => {
+    let clamped = clampFuture(v);
+    if (clamped && startDate && clamped.isBefore(startDate)) {
+      clamped = startDate;
+    }
+    onEndChange(clamped);
+    onQuickRangeChange("");
+  };
+  const startMax = endDate && endDate.isBefore(now) ? endDate : now;
+  const allAgentsSelected = agents.length > 0 && selectedAgentIds.length === agents.length;
+  const allQueuesSelected = queues.length > 0 && selectedQueueIds.length === queues.length;
+  return /* @__PURE__ */ jsxs(Box, { sx: filterBarSx, children: [
+    /* @__PURE__ */ jsx(
+      DateTimePicker,
+      {
+        value: startDate,
+        onChange: (v) => handleStartChange(v),
+        disableFuture: true,
+        maxDateTime: startMax,
+        format: "DD-MM-YYYY hh:mm A",
+        slotProps: { textField: { size: "small", sx: datePickerSx } }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { sx: dateSeparatorSx, children: "to" }),
+    /* @__PURE__ */ jsx(
+      DateTimePicker,
+      __spreadProps(__spreadValues({
+        value: endDate,
+        onChange: (v) => handleEndChange(v),
+        disableFuture: true,
+        maxDateTime: now
+      }, startDate ? { minDateTime: startDate } : {}), {
+        format: "DD-MM-YYYY hh:mm A",
+        slotProps: { textField: { size: "small", sx: datePickerSx } }
+      })
+    ),
+    /* @__PURE__ */ jsx(
+      SDKButton,
+      {
+        variant: quickRange === "today" ? "primary" : "outlined",
+        onClick: () => setQuick("today"),
+        sx: quickBtnSx,
+        children: "Today"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SDKButton,
+      {
+        variant: quickRange === "week" ? "primary" : "outlined",
+        onClick: () => setQuick("week"),
+        sx: quickBtnSx,
+        children: "This Week"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SDKButton,
+      {
+        variant: quickRange === "month" ? "primary" : "outlined",
+        onClick: () => setQuick("month"),
+        sx: quickBtnSx,
+        children: "This Month"
+      }
+    ),
+    /* @__PURE__ */ jsxs(FormControl, { size: "small", sx: multiSelectFormSx, children: [
+      /* @__PURE__ */ jsx(InputLabel, { sx: multiSelectLabelSx, children: "Agents" }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          multiple: true,
+          value: selectedAgentIds,
+          label: "Agents",
+          onChange: (e) => {
+            const ids = e.target.value;
+            if (ids.includes(AGENT_SELECT_ALL_ID)) {
+              onAgentsChange(allAgentsSelected ? [] : agents.map((a) => a.id));
+            } else {
+              onAgentsChange(ids);
+            }
+          },
+          renderValue: (selected) => {
+            const sel = selected;
+            if (sel.length === 0 || sel.length === agents.length) return "All Agents";
+            return `${sel.length} Agent(s)`;
+          },
+          sx: multiSelectSx,
+          MenuProps: { PaperProps: { sx: multiSelectMenuPropsSx } },
+          children: [
+            /* @__PURE__ */ jsxs(MenuItem, { value: AGENT_SELECT_ALL_ID, children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: allAgentsSelected,
+                  indeterminate: selectedAgentIds.length > 0 && !allAgentsSelected,
+                  size: "small"
+                }
+              ),
+              "Select All"
+            ] }),
+            agents.map((a) => /* @__PURE__ */ jsxs(MenuItem, { value: a.id, children: [
+              /* @__PURE__ */ jsx(Checkbox, { checked: selectedAgentIds.includes(a.id), size: "small" }),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  noWrap: true,
+                  sx: { fontSize: "0.76rem", maxWidth: 180 },
+                  title: a.fullName || a.userId,
+                  children: a.fullName || a.userId
+                }
+              )
+            ] }, a.id))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormControl, { size: "small", sx: multiSelectFormSx, children: [
+      /* @__PURE__ */ jsx(InputLabel, { sx: multiSelectLabelSx, children: "All Queues" }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          multiple: true,
+          value: selectedQueueIds,
+          label: "All Queues",
+          sx: multiSelectSx,
+          MenuProps: { PaperProps: { sx: multiSelectMenuPropsSx } },
+          onChange: (e) => {
+            const ids = e.target.value;
+            if (ids.includes(-1)) {
+              onQueuesChange(allQueuesSelected ? [] : queues.map((q) => q.id));
+            } else {
+              onQueuesChange(ids);
+            }
+          },
+          renderValue: (selected) => {
+            const sel = selected;
+            if (sel.length === 0) return "All Queues";
+            if (sel.length === queues.length) return "All Queues";
+            return `${sel.length} Queue(s)`;
+          },
+          children: [
+            /* @__PURE__ */ jsxs(MenuItem, { value: -1, children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selectedQueueIds.length === queues.length && queues.length > 0,
+                  size: "small"
+                }
+              ),
+              "Select All"
+            ] }),
+            queues.map((q) => /* @__PURE__ */ jsxs(MenuItem, { value: q.id, children: [
+              /* @__PURE__ */ jsx(Checkbox, { checked: selectedQueueIds.includes(q.id), size: "small" }),
+              q.name
+            ] }, q.id))
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+var SearchBarLocal = memo(function SearchBarLocal2({ value, onChange }) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      placeholder: "Search phone, agent...",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      slotProps: {
+        input: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { color: "#1A5F6C", fontSize: 18 } }) }),
+          endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onChange(""), edge: "end", children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 16, color: "#94a3b8" } }) }) }) : void 0
+        }
+      },
+      sx: searchBarSx
+    }
+  );
+});
+var CdrReportContent = memo(function CdrReportContent2() {
+  const [startDate, setStartDate] = useState2(dayjs().startOf("day"));
+  const [endDate, setEndDate] = useState2(dayjs());
+  const [quickRange, setQuickRange] = useState2("today");
+  const [searchText, setSearchText] = useState2("");
+  const [selectedAgentIds, setSelectedAgentIds] = useState2([]);
+  const [selectedQueueIds, setSelectedQueueIds] = useState2([]);
+  const [page, setPage] = useState2(0);
+  const [rowsPerPage, setRowsPerPage] = useState2(DEFAULT_PAGE_SIZE);
+  const [sortKey, setSortKey] = useState2("callStartTime");
+  const [sortDir, setSortDir] = useState2("desc");
+  const [debouncedSearch, setDebouncedSearch] = useState2("");
+  const debounceRef = useRef(void 0);
+  useEffect(() => {
+    debounceRef.current = setTimeout(() => setDebouncedSearch(searchText.trim()), 400);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [searchText]);
+  const {
+    records,
+    totalRecords,
+    loading,
+    error,
+    setError,
+    fetchRecords,
+    exportExcel,
+    fetchRecording
+  } = useCdrReport();
+  const { agents, queues, fetchAll: fetchFilters } = useCdrFilters();
+  useEffect(() => {
+    fetchFilters();
+  }, [fetchFilters]);
+  const buildParams = useCallback2((pageNum) => {
+    const sd = startDate != null ? startDate : dayjs();
+    const ed = endDate != null ? endDate : dayjs();
+    return {
+      start_date: sd.format("YYYY-MM-DDTHH:mm:ss"),
+      end_date: ed.format("YYYY-MM-DDTHH:mm:ss"),
+      agent_id: selectedAgentIds.length > 0 ? selectedAgentIds : void 0,
+      queue_id: selectedQueueIds.length > 0 ? selectedQueueIds : void 0,
+      search: debouncedSearch || void 0,
+      page: pageNum + 1,
+      page_size: rowsPerPage
+    };
+  }, [startDate, endDate, selectedAgentIds, selectedQueueIds, debouncedSearch, rowsPerPage]);
+  useEffect(() => {
+    setPage(0);
+    fetchRecords(buildParams(0));
+  }, [buildParams, fetchRecords]);
+  const handlePageChange = useCallback2(
+    (_e, newPage) => {
+      setPage(newPage);
+      fetchRecords(buildParams(newPage));
+    },
+    [buildParams, fetchRecords]
+  );
+  const handleRowsPerPageChange = useCallback2((e) => {
+    setRowsPerPage(parseInt(e.target.value, 10));
+    setPage(0);
+  }, []);
+  const handleSort = useCallback2((key) => {
+    setSortKey((prevKey) => {
+      if (prevKey === key) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+        return prevKey;
+      }
+      setSortDir("asc");
+      return key;
+    });
+  }, []);
+  const sortedRecords = useMemo(() => {
+    const rows = [...records];
+    rows.sort((a, b) => {
+      const cmp = comparator(a, b, sortKey);
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+    return rows;
+  }, [records, sortKey, sortDir]);
+  const handleExportExcel = useCallback2(async () => {
+    const sd = startDate != null ? startDate : dayjs();
+    const ed = endDate != null ? endDate : dayjs();
+    try {
+      await exportExcel({
+        start_date: sd.format("YYYY-MM-DDTHH:mm:ss"),
+        end_date: ed.format("YYYY-MM-DDTHH:mm:ss"),
+        agent_id: selectedAgentIds.length > 0 ? selectedAgentIds : void 0,
+        queue_id: selectedQueueIds.length > 0 ? selectedQueueIds : void 0,
+        search: debouncedSearch || void 0
+      });
+    } catch (err) {
+      setError((err == null ? void 0 : err.message) || "Failed to export Excel");
+    }
+  }, [startDate, endDate, selectedAgentIds, selectedQueueIds, debouncedSearch, exportExcel, setError]);
+  const columns = [
+    { id: "phoneNumber", label: "Phone Number" },
+    { id: "callStartTime", label: "Call Start" },
+    { id: "callType", label: "Call Type" },
+    { id: "callStatus", label: "Status" },
+    { id: "agentName", label: "User Name" },
+    { id: "queueName", label: "Queues" },
+    { id: "extension", label: "Extension" },
+    { id: "talkDurationFmt", label: "Talk Duration" },
+    { id: "holdDurationFmt", label: "Hold Duration" },
+    { id: "ringingDurationFmt", label: "Ringing Duration" },
+    { id: "queueDurationFmt", label: "Queue Duration" },
+    { id: "wrapupDurationFmt", label: "Wrapup Duration" },
+    { id: "disposition", label: "Disposition" },
+    { id: "remarks", label: "Remarks" },
+    { id: "wasTransferred", label: "Transferred" }
+  ];
+  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Box, { sx: pageContainerSx, children: [
+    /* @__PURE__ */ jsx(
+      SDKPageHeader,
+      {
+        title: "CDR Report",
+        actions: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx(SearchBarLocal, { value: searchText, onChange: setSearchText }),
+          /* @__PURE__ */ jsx(
+            SDKPermissionGuard,
+            {
+              permissions: [
+                SDK_PERMISSIONS.REPORTS_CDR_EXPORT,
+                SDK_PERMISSIONS.REPORTS_CDR_MANAGE
+              ],
+              showFallback: false,
+              children: /* @__PURE__ */ jsx(
+                SDKButton,
+                {
+                  startIcon: /* @__PURE__ */ jsx(DownloadIcon, { sx: { fontSize: "0.95rem !important" } }),
+                  disabled: !records.length,
+                  onClick: handleExportExcel,
+                  sx: { height: 36 },
+                  children: "Export Excel"
+                }
+              )
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: contentSx, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: filterBarBoxSx, children: [
+        /* @__PURE__ */ jsx(
+          FilterBar,
+          {
+            startDate,
+            endDate,
+            onStartChange: setStartDate,
+            onEndChange: setEndDate,
+            quickRange,
+            onQuickRangeChange: setQuickRange,
+            agents,
+            selectedAgentIds,
+            onAgentsChange: setSelectedAgentIds,
+            queues,
+            selectedQueueIds,
+            onQueuesChange: setSelectedQueueIds
+          }
+        ),
+        error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: alertSx, children: error })
+      ] }),
+      loading && /* @__PURE__ */ jsx(Box, { sx: loadingBoxSx, children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: COLORS.blue }, size: 28 }) }),
+      /* @__PURE__ */ jsxs(Paper, { elevation: 0, sx: tablePaperSx, children: [
+        /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs(Table, { size: "small", sx: tableSx, children: [
+          /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            columns.map((col) => /* @__PURE__ */ jsx(TableCell, { sx: headCellSx, children: /* @__PURE__ */ jsx(
+              TableSortLabel,
+              {
+                active: sortKey === col.id,
+                direction: sortKey === col.id ? sortDir : "asc",
+                onClick: () => handleSort(col.id),
+                sx: sortLabelSx,
+                children: col.label
+              }
+            ) }, col.id)),
+            /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, headCellSx), { minWidth: 220 }), children: "Recording" })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: !loading && sortedRecords.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              colSpan: columns.length + 1,
+              align: "center",
+              sx: { py: 4, color: "#999", fontFamily: FONT, fontSize: "0.85rem" },
+              children: "No CDR records for the selected filters."
+            }
+          ) }) : sortedRecords.map((row, idx) => /* @__PURE__ */ jsxs(TableRow, { hover: true, sx: tableRowSx, children: [
+            /* @__PURE__ */ jsx(TableCell, { sx: cellNumberSx, children: row.phoneNumber || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDateSx, children: row.callStartTime ? dayjs(row.callStartTime).format("DD MMM YYYY hh:mm A") : "" }),
+            /* @__PURE__ */ jsx(TableCell, { children: row.callType ? /* @__PURE__ */ jsx(Chip, { label: row.callType, size: "small", sx: callTypePillSx(row.callType) }) : null }),
+            /* @__PURE__ */ jsx(TableCell, { children: row.callStatus ? /* @__PURE__ */ jsx(Chip, { label: row.callStatus, size: "small", sx: statusPillSx(row.callStatus) }) : null }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDateSx, children: row.agentName || "" }),
+            /* @__PURE__ */ jsx(TableCell, { children: row.queueName ? /* @__PURE__ */ jsx(Chip, { label: row.queueName, size: "small", sx: queueChipSx }) : null }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDateSx, children: row.extension || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellTalkSx, children: row.talkDurationFmt || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellHoldSx, children: row.holdDurationFmt || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDurationSx, children: row.ringingDurationFmt || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDurationSx, children: row.queueDurationFmt || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDurationSx, children: row.wrapupDurationFmt || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDateSx, children: row.disposition || "" }),
+            /* @__PURE__ */ jsx(TableCell, { sx: cellDateSx, children: row.remarks ? /* @__PURE__ */ jsx(Tooltip, { title: row.remarks, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", verticalAlign: "bottom" }, children: row.remarks }) }) : "" }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: row.wasTransferred ? "Yes" : "No",
+                size: "small",
+                sx: row.wasTransferred ? transferYesSx : transferNoSx
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TableCell, { children: row.callUuid ? /* @__PURE__ */ jsx(
+              RecordingCell,
+              {
+                callUuid: row.callUuid,
+                recordingPath: row.recordingPath,
+                fetchRecording
+              }
+            ) : null })
+          ] }, row.callUuid || idx)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          TablePagination,
+          {
+            component: "div",
+            count: totalRecords,
+            page,
+            onPageChange: handlePageChange,
+            rowsPerPage,
+            rowsPerPageOptions: [...ROWS_PER_PAGE_OPTIONS],
+            onRowsPerPageChange: handleRowsPerPageChange,
+            sx: paginationSx
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+});
+var CdrReport = () => /* @__PURE__ */ jsx(SDKProvider, { children: /* @__PURE__ */ jsx(CdrReportContent, {}) });
+var cdrReport_default = CdrReport;
+export {
+  cdrReport_default as default
+};
+//# sourceMappingURL=cdrReport-6OBRKAYS.mjs.map