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

package/dist/agentDetailReport-XUNWPSQW.mjs

@@ -0,0 +1,10 @@
+import {
+  agentDetailReport_default
+} from "./chunk-U2DJ5WRK.mjs";
+import "./chunk-FVNDPJUU.mjs";
+import "./chunk-RZZQ42MG.mjs";
+import "./chunk-YREOEULC.mjs";
+export {
+  agentDetailReport_default as default
+};
+//# sourceMappingURL=agentDetailReport-XUNWPSQW.mjs.map

package/dist/agentDetailReport-XUNWPSQW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/agentPerformanceReport-4WNLHIFT.mjs

@@ -0,0 +1,597 @@
+import {
+  agentDetailReport_default
+} from "./chunk-U2DJ5WRK.mjs";
+import {
+  SDKButton
+} from "./chunk-FVNDPJUU.mjs";
+import {
+  SDKPageHeader
+} from "./chunk-RZZQ42MG.mjs";
+import {
+  END_POINT,
+  SDKProvider,
+  __spreadProps,
+  __spreadValues,
+  axios_default
+} from "./chunk-YREOEULC.mjs";
+
+// call-control-sdk/lib/pages/agentPerformanceReport/index.tsx
+import { memo, useCallback as useCallback2, useEffect, useMemo, useState as useState2 } from "react";
+import {
+  Alert,
+  Box,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  OutlinedInput,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TableSortLabel,
+  Tooltip
+} from "@mui/material";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import SearchIcon from "@mui/icons-material/Search";
+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/agentPerformanceReport/useAgentPerformanceReport.ts
+import { useCallback, useState } from "react";
+function buildQs(params) {
+  const qs = new URLSearchParams();
+  if (params.start_date) qs.append("start_date", params.start_date);
+  if (params.end_date) qs.append("end_date", params.end_date);
+  if (params.agent_id) for (const id of params.agent_id) qs.append("agent_id", id);
+  if (params.queue_id) for (const id of params.queue_id) qs.append("queue_id", String(id));
+  if (params.process_id) for (const id of params.process_id) qs.append("process_id", String(id));
+  if (params.top_n) qs.append("top_n", String(params.top_n));
+  const str = qs.toString();
+  return str ? `?${str}` : "";
+}
+function useAgentPerformanceReport() {
+  const [agents, setAgents] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const fetchAgents = useCallback(async (params) => {
+    var _a, _b;
+    setLoading(true);
+    setError("");
+    try {
+      const res = await axios_default.get(
+        `${END_POINT.AGENT_PERFORMANCE_REPORT_AGENTS}${buildQs(params)}`
+      );
+      setAgents(Array.isArray(res.data) ? res.data : []);
+    } catch (err) {
+      setError(((_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 fetch performance report");
+      setAgents([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const exportExcel = useCallback(async (params) => {
+    var _a;
+    const res = await axios_default.get(
+      `${END_POINT.AGENT_PERFORMANCE_REPORT_EXPORT_EXCEL}${buildQs(params)}`,
+      { responseType: "blob" }
+    );
+    const url = URL.createObjectURL(new Blob([res.data]));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `agent-performance-${(_a = params.start_date) != null ? _a : "export"}.xlsx`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, []);
+  return { agents, loading, error, setError, fetchAgents, exportExcel };
+}
+
+// call-control-sdk/lib/pages/agentPerformanceReport/types.ts
+var COLUMNS = [
+  { key: "id", label: "User ID", group: "Agent" },
+  { key: "name", label: "Full Name", group: "Agent" },
+  { key: "queue", label: "Queues", group: "Agent" },
+  { key: "total", label: "Total Calls", group: "Calls", align: "right" },
+  { key: "ans", label: "Answered", group: "Calls", align: "right" },
+  { key: "miss", label: "Missed", group: "Calls", align: "right" },
+  { key: "inTotal", label: "Inbound", group: "Calls", align: "right" },
+  { key: "outTotal", label: "Outbound", group: "Calls", align: "right" },
+  { key: "aht", label: "AHT", group: "Time", align: "right" },
+  { key: "loginDur", label: "Login Dur", group: "Time", align: "right" },
+  { key: "talk", label: "Talk Time", group: "Time", align: "right" },
+  { key: "hold", label: "Hold Time", group: "Time", align: "right" },
+  { key: "wrapup", label: "Wrapup Time", group: "Time", align: "right" },
+  { key: "breakTime", label: "Break Time", group: "Breaks", align: "right" },
+  { key: "idle", label: "Idle Time", group: "Time", align: "right" },
+  { key: "firstLogin", label: "First Login", group: "Login" },
+  { key: "adherence", label: "Adherence %", group: "Agent", align: "right" }
+];
+
+// call-control-sdk/lib/pages/agentPerformanceReport/styles.ts
+var C = {
+  navy: "#0d2a56",
+  blue: "#1565c8",
+  green: "#0a9a62",
+  amber: "#c47c00",
+  red: "#cc2a2a",
+  purple: "#6b3fbf",
+  teal: "#0b7a8f",
+  bg: "transparent",
+  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 containerSx = {
+  background: C.bg,
+  minHeight: "100vh"
+};
+var filterBarSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  flexWrap: "wrap",
+  pb: 1.5,
+  px: 2
+};
+var contentSx = {
+  py: 2,
+  px: 1,
+  overflow: "auto",
+  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 tablePaperSx = {
+  borderRadius: "8px",
+  border: "1px solid #e0e7ef",
+  overflow: "hidden",
+  mb: 2
+};
+var tableRootSx = {
+  minWidth: 1400,
+  "& .MuiTableCell-root": {
+    fontSize: "0.75rem",
+    borderBottom: "1px solid #eef1f6",
+    py: 0.4,
+    px: 1,
+    height: 36,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  "& .MuiTableRow-root": {
+    height: 36
+  }
+};
+var ellipsisCellSx = {
+  maxWidth: 220,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  display: "block"
+};
+var headCellSx = {
+  fontFamily: "poppins, Arial, sans-serif",
+  bgcolor: "#f1f1f1",
+  color: "#333",
+  fontWeight: 600,
+  whiteSpace: "nowrap",
+  fontSize: "0.8rem",
+  py: "6px",
+  px: "12px"
+};
+var bodyCellSx = {
+  fontFamily: "poppins, Arial, sans-serif",
+  fontSize: "0.82rem",
+  py: "4px",
+  px: "12px"
+};
+var tableRowSx = {
+  backgroundColor: "#fff",
+  cursor: "pointer",
+  "&:hover": { backgroundColor: "#f0f7f8" }
+};
+var paginationSx = {
+  borderTop: "1px solid #eef1f6",
+  "& .MuiTablePagination-displayedRows": { fontSize: "0.73rem" },
+  "& .MuiTablePagination-selectLabel": { fontSize: "0.73rem" }
+};
+var searchInputSx = {
+  width: 250,
+  fontSize: "0.82rem",
+  height: 36
+};
+var datePickerSx = {
+  width: 150,
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "7px",
+    fontSize: 12,
+    height: 30
+  },
+  "& .MuiInputBase-input": { py: "4px", fontSize: 12 }
+};
+var emptyRowSx = {
+  textAlign: "center",
+  py: 4,
+  color: C.t3,
+  fontSize: 13
+};
+
+// call-control-sdk/lib/pages/agentPerformanceReport/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function fmtDur(s) {
+  if (!s || s <= 0) return "00:00:00";
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sc = Math.floor(s % 60);
+  return [h, m, sc].map((x) => String(x).padStart(2, "0")).join(":");
+}
+function getVal(row, key) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  switch (key) {
+    case "id":
+      return row.agentId || "";
+    case "name":
+      return row.fullName || "";
+    case "process":
+      return row.processName || "";
+    case "queue":
+      return row.queueNames || "";
+    case "total":
+      return (_a = row.totalCalls) != null ? _a : 0;
+    case "ans":
+      return (_b = row.answeredCalls) != null ? _b : 0;
+    case "miss":
+      return (_c = row.missedCalls) != null ? _c : 0;
+    case "inTotal":
+      return (_d = row.inCalls) != null ? _d : 0;
+    case "outTotal":
+      return (_e = row.outCalls) != null ? _e : 0;
+    case "aht":
+      return (_f = row.ahtSeconds) != null ? _f : 0;
+    case "loginDur":
+      return (_g = row.loginDurationSeconds) != null ? _g : 0;
+    case "talk":
+      return (_h = row.talkTimeSeconds) != null ? _h : 0;
+    case "hold":
+      return (_i = row.holdTimeSeconds) != null ? _i : 0;
+    case "wrapup":
+      return (_j = row.wrapupSeconds) != null ? _j : 0;
+    case "breakTime":
+      return (_k = row.breakTimeSeconds) != null ? _k : 0;
+    case "idle":
+      return (_l = row.idleTimeSeconds) != null ? _l : 0;
+    case "adherence":
+      return (_m = row.adherencePct) != null ? _m : null;
+    case "firstLogin":
+      return row.firstLoginTime || "";
+    default:
+      return "";
+  }
+}
+function renderCellValue(row, key) {
+  const v = getVal(row, key);
+  const durKeys = ["aht", "loginDur", "talk", "hold", "wrapup", "breakTime", "idle"];
+  if (durKeys.includes(key)) return fmtDur(Number(v) || 0);
+  if (key === "adherence") return v != null ? `${v}%` : "\u2014";
+  if (key === "firstLogin") return v ? dayjs(v).format("DD MMM YY hh:mm A") : "";
+  return v == null ? "" : String(v);
+}
+function splitQueues(raw) {
+  if (!raw) return [];
+  return String(raw).split(/[,;|]/).map((q) => q.trim()).filter(Boolean);
+}
+var AgentPerformanceReportContent = memo(() => {
+  const [startDate, setStartDate] = useState2(dayjs().startOf("day"));
+  const [endDate, setEndDate] = useState2(dayjs());
+  const [quickRange, setQuickRange] = useState2("today");
+  const [search, setSearch] = useState2("");
+  const [orderBy, setOrderBy] = useState2("total");
+  const [order, setOrder] = useState2("desc");
+  const [page, setPage] = useState2(0);
+  const [rowsPerPage, setRowsPerPage] = useState2(10);
+  const [selectedAgent, setSelectedAgent] = useState2(null);
+  const { agents, loading, error, setError, fetchAgents, exportExcel } = useAgentPerformanceReport();
+  const fetchReport = useCallback2(
+    async (sd, ed) => {
+      const fromDate = sd != null ? sd : startDate;
+      const toDate = ed != null ? ed : endDate;
+      if (!fromDate || !toDate) {
+        setError("Select date range");
+        return;
+      }
+      setPage(0);
+      await fetchAgents({
+        start_date: fromDate.format("YYYY-MM-DDTHH:mm:ss"),
+        end_date: toDate.format("YYYY-MM-DDTHH:mm:ss")
+      });
+    },
+    [startDate, endDate, fetchAgents, setError]
+  );
+  useEffect(() => {
+    if (startDate && endDate) fetchReport();
+  }, []);
+  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);
+    fetchReport(sd, ed);
+  };
+  const filtered = useMemo(() => {
+    if (!search) return agents;
+    const s = search.toLowerCase();
+    return agents.filter(
+      (r) => (r.fullName || "").toLowerCase().includes(s) || (r.agentId || "").toLowerCase().includes(s)
+    );
+  }, [agents, search]);
+  const sorted = useMemo(() => {
+    return [...filtered].sort((a, b) => {
+      const av = getVal(a, orderBy);
+      const bv = getVal(b, orderBy);
+      if (typeof av === "number" && typeof bv === "number") {
+        return order === "asc" ? av - bv : bv - av;
+      }
+      return order === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+    });
+  }, [filtered, orderBy, order]);
+  const paged = sorted.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+  const handleSort = (key) => {
+    setOrder(orderBy === key && order === "asc" ? "desc" : "asc");
+    setOrderBy(key);
+  };
+  const handleExport = async () => {
+    if (!startDate || !endDate) {
+      setError("Select date range");
+      return;
+    }
+    try {
+      await exportExcel({
+        start_date: startDate.format("YYYY-MM-DDTHH:mm:ss"),
+        end_date: endDate.format("YYYY-MM-DDTHH:mm:ss")
+      });
+    } catch (err) {
+      setError((err == null ? void 0 : err.message) || "Failed to export Excel");
+    }
+  };
+  if (selectedAgent) {
+    return /* @__PURE__ */ jsx(
+      agentDetailReport_default,
+      {
+        agentRow: selectedAgent,
+        onBack: () => setSelectedAgent(null),
+        initialStartDate: startDate,
+        initialEndDate: endDate,
+        initialQuickRange: quickRange,
+        from: "REPORTS_LIST"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Box, { sx: containerSx, children: [
+    /* @__PURE__ */ jsx(
+      SDKPageHeader,
+      {
+        title: "Performance Report",
+        actions: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            OutlinedInput,
+            {
+              size: "small",
+              value: search,
+              onChange: (e) => {
+                setSearch(e.target.value);
+                setPage(0);
+              },
+              placeholder: "Search name, ID...",
+              sx: searchInputSx,
+              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: 18, color: "#999" } }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SDKButton,
+            {
+              startIcon: /* @__PURE__ */ jsx(FileDownloadIcon, { sx: { fontSize: "0.95rem" } }),
+              disabled: !agents.length,
+              onClick: handleExport,
+              children: "Export Excel"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__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(Box, { component: "span", 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__ */ jsx(SDKButton, { variant: "outlined", onClick: () => fetchReport(), children: "Search" })
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mx: 2.5, mt: 1.5 }, onClose: () => setError(""), children: error }),
+    /* @__PURE__ */ jsxs(Box, { sx: contentSx, children: [
+      loading && /* @__PURE__ */ jsx(Box, { sx: loadingOverlaySx, children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
+      /* @__PURE__ */ jsxs(Paper, { elevation: 0, sx: tablePaperSx, children: [
+        /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs(Table, { size: "small", sx: tableRootSx, children: [
+          /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            COLUMNS.map((col) => /* @__PURE__ */ jsx(TableCell, { align: col.align || "left", sx: headCellSx, children: /* @__PURE__ */ jsx(
+              TableSortLabel,
+              {
+                active: orderBy === col.key,
+                direction: orderBy === col.key ? order : "asc",
+                onClick: () => handleSort(col.key),
+                children: col.label
+              }
+            ) }, col.key)),
+            /* @__PURE__ */ jsx(TableCell, { sx: __spreadProps(__spreadValues({}, headCellSx), { width: 48 }), children: "Detail" })
+          ] }) }),
+          /* @__PURE__ */ jsxs(TableBody, { children: [
+            paged.map((row, idx) => /* @__PURE__ */ jsxs(
+              TableRow,
+              {
+                hover: true,
+                onClick: () => setSelectedAgent(row),
+                sx: tableRowSx,
+                children: [
+                  COLUMNS.map((col) => {
+                    if (col.key === "queue") {
+                      const queues = splitQueues(row.queueNames);
+                      const shown = queues.slice(0, 3).join(", ");
+                      const overflow = queues.length > 3;
+                      const display = overflow ? `${shown}\u2026` : shown;
+                      const title = queues.join(", ") || "\u2014";
+                      return /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: col.align || "left",
+                          sx: __spreadProps(__spreadValues({}, bodyCellSx), { maxWidth: 240 }),
+                          children: /* @__PURE__ */ jsx(Tooltip, { title, placement: "top", arrow: true, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: ellipsisCellSx, children: display || "\u2014" }) })
+                        },
+                        col.key
+                      );
+                    }
+                    if (col.key === "firstLogin") {
+                      const text = renderCellValue(row, col.key);
+                      return /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: col.align || "left",
+                          sx: __spreadProps(__spreadValues({}, bodyCellSx), { whiteSpace: "nowrap" }),
+                          children: text
+                        },
+                        col.key
+                      );
+                    }
+                    if (col.key === "name") {
+                      const text = renderCellValue(row, col.key);
+                      return /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: col.align || "left",
+                          sx: __spreadProps(__spreadValues({}, bodyCellSx), { maxWidth: 200 }),
+                          children: /* @__PURE__ */ jsx(Tooltip, { title: text || "", placement: "top", arrow: true, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: ellipsisCellSx, children: text }) })
+                        },
+                        col.key
+                      );
+                    }
+                    return /* @__PURE__ */ jsx(TableCell, { align: col.align || "left", sx: bodyCellSx, children: renderCellValue(row, col.key) }, col.key);
+                  }),
+                  /* @__PURE__ */ jsx(TableCell, { sx: bodyCellSx, align: "center", children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setSelectedAgent(row);
+                      },
+                      sx: { color: C.blue },
+                      children: /* @__PURE__ */ jsx(VisibilityIcon, { sx: { fontSize: 16 } })
+                    }
+                  ) })
+                ]
+              },
+              row.agentId || idx
+            )),
+            paged.length === 0 && !loading && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: COLUMNS.length + 1, sx: emptyRowSx, children: "No data found" }) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          TablePagination,
+          {
+            component: "div",
+            count: filtered.length,
+            page,
+            onPageChange: (_, p) => setPage(p),
+            rowsPerPage,
+            onRowsPerPageChange: (e) => {
+              setRowsPerPage(parseInt(e.target.value, 10));
+              setPage(0);
+            },
+            rowsPerPageOptions: [5, 10, 20, 25, 50],
+            sx: paginationSx
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+});
+var AgentPerformanceReport = () => /* @__PURE__ */ jsx(SDKProvider, { children: /* @__PURE__ */ jsx(AgentPerformanceReportContent, {}) });
+var agentPerformanceReport_default = AgentPerformanceReport;
+export {
+  agentPerformanceReport_default as default
+};
+//# sourceMappingURL=agentPerformanceReport-4WNLHIFT.mjs.map