ahs-cti 0.0.7 → 0.0.9

package/dist-react/loginReport-F47GUU53.mjs

@@ -0,0 +1,990 @@
+import * as __ext_react from "react";
+import * as __ext_react_dom from "react-dom";
+import * as __ext_react_jsx from "react/jsx-runtime";
+var __cjsExternals = { "react": __ext_react, "react-dom": __ext_react_dom, "react/jsx-runtime": __ext_react_jsx };
+var require = function (id) {
+  var mod = __cjsExternals[id];
+  if (mod) return mod.default || mod;
+  throw new Error('Dynamic require of "' + id + '" is not supported');
+};
+
+import {
+  ReportFilterBar,
+  SearchBar,
+  headCellSx
+} from "./chunk-MCD5FQNY.mjs";
+import {
+  SDKPermissionGuard
+} from "./chunk-ADM2JJCP.mjs";
+import {
+  PageHeader
+} from "./chunk-KRXHK4AU.mjs";
+import {
+  AppButton
+} from "./chunk-LX6I32Y4.mjs";
+import "./chunk-UTSRABCL.mjs";
+import {
+  SDKProvider
+} from "./chunk-4YF4IDV6.mjs";
+import {
+  END_POINT,
+  SDK_PERMISSIONS,
+  axios_default,
+  deepFindArray
+} from "./chunk-F7G2XFRU.mjs";
+import "./chunk-S4J35V4B.mjs";
+
+// call-control-sdk/lib/pages/loginReport/index.tsx
+import { useCallback as useCallback2, useEffect, useMemo, useRef, useState as useState2 } from "react";
+import {
+  Alert,
+  Box,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TablePagination,
+  TableSortLabel,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import CheckIcon from "@mui/icons-material/Check";
+import EditCalendarIcon from "@mui/icons-material/EditCalendar";
+import DownloadIcon from "@mui/icons-material/Download";
+import RefreshIcon from "@mui/icons-material/Refresh";
+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/loginReport/useLoginReport.ts
+import { useCallback, useState } from "react";
+async function fetchQueues() {
+  var _a;
+  const res = await axios_default.get(END_POINT.MASTER_QUEUES);
+  if (Array.isArray(res.data)) return res.data;
+  if (Array.isArray((_a = res.data) == null ? void 0 : _a.data)) return res.data.data;
+  return [];
+}
+async function getQueues() {
+  return fetchQueues();
+}
+async function getLoginReport(params) {
+  const qs = buildLoginReportQueryString(params);
+  const res = await axios_default.get(`${END_POINT.LOGIN_REPORT}${qs}`);
+  return res.data;
+}
+async function getAgentLoginSessions(agentId, params) {
+  const qs = buildSessionQueryString(params);
+  const res = await axios_default.get(
+    `${END_POINT.LOGIN_REPORT_AGENT_SESSIONS(agentId)}${qs}`
+  );
+  return Array.isArray(res.data) ? res.data : [];
+}
+async function regularizeLoginSession(sessionId, logoutTime) {
+  await axios_default.patch(END_POINT.LOGIN_REPORT_REGULARIZE_SESSION(sessionId), { sessionId, logoutTime });
+}
+async function exportLoginReportToExcel(params) {
+  var _a;
+  const qs = buildLoginReportQueryString(params);
+  const res = await axios_default.get(`${END_POINT.LOGIN_REPORT_EXPORT_EXCEL}${qs}`, { responseType: "blob" });
+  triggerBlobDownload(new Blob([res.data]), `login-report-${(_a = params.start_date) != null ? _a : "export"}.xlsx`);
+}
+async function exportAgentLoginSessionsToExcel(agentId, params) {
+  const qs = buildSessionQueryString(params);
+  const res = await axios_default.get(
+    `${END_POINT.LOGIN_REPORT_AGENT_SESSIONS_EXPORT_EXCEL(agentId)}${qs}`,
+    { responseType: "blob" }
+  );
+  triggerBlobDownload(new Blob([res.data]), `login_sessions_${agentId}.xlsx`);
+}
+function buildLoginReportQueryString(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.search) qs.append("search", params.search);
+  if (params.page) qs.append("page", String(params.page));
+  if (params.pageSize) qs.append("pageSize", String(params.pageSize));
+  const str = qs.toString();
+  return str ? `?${str}` : "";
+}
+function buildSessionQueryString(params) {
+  const qs = new URLSearchParams();
+  if (params == null ? void 0 : params.start_date) qs.append("start_date", params.start_date);
+  if (params == null ? void 0 : params.end_date) qs.append("end_date", params.end_date);
+  const str = qs.toString();
+  return str ? `?${str}` : "";
+}
+function triggerBlobDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+// call-control-sdk/lib/pages/loginReport/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+dayjs.extend(isoWeek);
+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 DEFAULT_ROWS_PER_PAGE = 10;
+var comparator = (a, b, key) => {
+  const av = a[key];
+  const bv = b[key];
+  if (typeof av === "number" && typeof bv === "number") return av - bv;
+  return String(av != null ? av : "").localeCompare(String(bv != null ? bv : ""));
+};
+function LoginReportContent() {
+  const [startDate, setStartDate] = useState2(dayjs().startOf("day"));
+  const [endDate, setEndDate] = useState2(dayjs());
+  const [activeQuickDate, setActiveQuickDate] = useState2("today");
+  const [searchText, setSearchText] = useState2("");
+  const [selectedAgents, setSelectedAgents] = useState2([]);
+  const [isAllUsersSelected, setIsAllUsersSelected] = useState2(false);
+  const [queues, setQueues] = useState2([]);
+  const [selectedQueues, setSelectedQueues] = useState2([]);
+  const [reportData, setReportData] = useState2([]);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2("");
+  const [page, setPage] = useState2(0);
+  const [rowsPerPage, setRowsPerPage] = useState2(DEFAULT_ROWS_PER_PAGE);
+  const [totalCount, setTotalCount] = useState2(-1);
+  const [sortKey, setSortKey] = useState2("fullName");
+  const [sortDir, setSortDir] = useState2("asc");
+  const [debouncedSearch, setDebouncedSearch] = useState2("");
+  const debounceRef = useRef(void 0);
+  useEffect(() => {
+    debounceRef.current = setTimeout(() => setDebouncedSearch(searchText.trim()), 400);
+    return () => clearTimeout(debounceRef.current);
+  }, [searchText]);
+  const [dialogOpen, setDialogOpen] = useState2(false);
+  const [selectedRow, setSelectedRow] = useState2(null);
+  const [sessions, setSessions] = useState2([]);
+  const [sessionsLoading, setSessionsLoading] = useState2(false);
+  const [regularizeSessionId, setRegularizeSessionId] = useState2(null);
+  const [regularizeTime, setRegularizeTime] = useState2(null);
+  const [regularizing, setRegularizing] = useState2(false);
+  const [regularizeError, setRegularizeError] = useState2("");
+  useEffect(() => {
+    getQueues().then((data) => setQueues(data || [])).catch(() => setError("Failed to load queues"));
+  }, []);
+  const handleQuickRangeChange = (range) => {
+    setActiveQuickDate(range || null);
+  };
+  const handleRefresh = () => {
+    if (activeQuickDate) {
+      const now = dayjs();
+      let sd = now.startOf("day");
+      const ed = now;
+      if (activeQuickDate === "week") sd = now.startOf("week").startOf("day");
+      else if (activeQuickDate === "month") sd = now.startOf("month").startOf("day");
+      setStartDate(sd);
+      setEndDate(ed);
+    } else {
+      fetchReport(page);
+    }
+  };
+  const fetchReport = useCallback2(
+    async (pageNum) => {
+      var _a, _b, _c, _d;
+      const sd = startDate;
+      const ed = endDate;
+      if (!sd || !ed) {
+        setError("Select a valid date range");
+        return;
+      }
+      const params = {
+        start_date: sd.format("YYYY-MM-DDTHH:mm:ss"),
+        end_date: ed.format("YYYY-MM-DDTHH:mm:ss"),
+        agent_id: !isAllUsersSelected && selectedAgents.length > 0 ? selectedAgents.map((a) => a.userId) : void 0,
+        queue_id: selectedQueues.length > 0 && selectedQueues.length < queues.length ? selectedQueues.map((q) => q.id) : void 0,
+        search: debouncedSearch || void 0,
+        page: pageNum + 1,
+        pageSize: rowsPerPage
+      };
+      try {
+        setError("");
+        setLoading(true);
+        const res = await getLoginReport(params);
+        const agents = deepFindArray(res, ["agents"]);
+        setReportData(agents);
+        const total = (_d = (_b = res == null ? void 0 : res.total) != null ? _b : (_a = res == null ? void 0 : res.pagination) == null ? void 0 : _a.total) != null ? _d : (_c = res == null ? void 0 : res.summary) == null ? void 0 : _c.totalAgentsLoggedIn;
+        setTotalCount(typeof total === "number" ? total : agents.length);
+      } catch (err) {
+        setError((err == null ? void 0 : err.message) || "Failed to fetch login report");
+        setReportData([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [startDate, endDate, selectedAgents, isAllUsersSelected, selectedQueues, debouncedSearch, rowsPerPage]
+  );
+  useEffect(() => {
+    setPage(0);
+    fetchReport(0);
+  }, [fetchReport]);
+  const handlePageChange = useCallback2(
+    (_event, newPage) => {
+      setPage(newPage);
+      fetchReport(newPage);
+    },
+    [fetchReport]
+  );
+  const filteredData = useMemo(() => {
+    const rows = [...reportData];
+    rows.sort((a, b) => {
+      const cmp = comparator(a, b, sortKey);
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+    return rows;
+  }, [reportData, sortKey, sortDir]);
+  const paginatedData = filteredData;
+  const handleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+  const loadSessions = useCallback2(async (agentId) => {
+    setSessionsLoading(true);
+    try {
+      const sd = startDate != null ? startDate : dayjs();
+      const ed = endDate != null ? endDate : dayjs();
+      const data = await getAgentLoginSessions(agentId, {
+        start_date: sd.format("YYYY-MM-DDTHH:mm:ss"),
+        end_date: ed.format("YYYY-MM-DDTHH:mm:ss")
+      });
+      setSessions(data);
+    } catch (e) {
+      setSessions([]);
+    } finally {
+      setSessionsLoading(false);
+    }
+  }, [startDate, endDate]);
+  const openDialog = async (row) => {
+    setSelectedRow(row);
+    setSessions([]);
+    setRegularizeSessionId(null);
+    setRegularizeError("");
+    setDialogOpen(true);
+    await loadSessions(row.agentId);
+  };
+  const closeDialog = () => {
+    setDialogOpen(false);
+    setTimeout(() => {
+      setSelectedRow(null);
+      setSessions([]);
+      setRegularizeSessionId(null);
+      setRegularizeError("");
+    }, 300);
+  };
+  const startRegularize = (session) => {
+    if (session.sessionId == null) return;
+    setRegularizeError("");
+    setRegularizeSessionId(session.sessionId);
+    setRegularizeTime(dayjs());
+  };
+  const cancelRegularize = () => {
+    setRegularizeSessionId(null);
+    setRegularizeTime(null);
+    setRegularizeError("");
+  };
+  const saveRegularize = async () => {
+    if (regularizeSessionId == null || !regularizeTime || !regularizeTime.isValid()) {
+      setRegularizeError("Select a valid logout time");
+      return;
+    }
+    try {
+      setRegularizing(true);
+      setRegularizeError("");
+      await regularizeLoginSession(regularizeSessionId, regularizeTime.toISOString());
+      cancelRegularize();
+      if (selectedRow) await loadSessions(selectedRow.agentId);
+      fetchReport(page);
+    } catch (err) {
+      setRegularizeError((err == null ? void 0 : err.message) || "Failed to regularize login session");
+    } finally {
+      setRegularizing(false);
+    }
+  };
+  const handleExportExcel = async () => {
+    const sd = startDate != null ? startDate : dayjs();
+    const ed = endDate != null ? endDate : dayjs();
+    const params = {
+      start_date: sd.format("YYYY-MM-DDTHH:mm:ss"),
+      end_date: ed.format("YYYY-MM-DDTHH:mm:ss"),
+      agent_id: !isAllUsersSelected && selectedAgents.length > 0 ? selectedAgents.map((a) => a.userId) : void 0,
+      queue_id: selectedQueues.length > 0 && selectedQueues.length < queues.length ? selectedQueues.map((q) => q.id) : void 0,
+      search: debouncedSearch || void 0
+    };
+    try {
+      await exportLoginReportToExcel(params);
+    } catch (err) {
+      setError((err == null ? void 0 : err.message) || "Failed to export Excel");
+    }
+  };
+  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(Box, { sx: { height: "100%", display: "flex", flexDirection: "column", fontFamily: FONT }, children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: "Login Report",
+        actions: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            SearchBar,
+            {
+              value: searchText,
+              onChange: (val) => {
+                setSearchText(val);
+                setPage(0);
+              },
+              placeholder: "Search name, ID...",
+              width: 250
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SDKPermissionGuard,
+            {
+              permissions: [SDK_PERMISSIONS.REPORTS_AGENT_LOGIN_MANAGE, SDK_PERMISSIONS.REPORTS_AGENT_LOGIN_EXPORT],
+              showFallback: false,
+              children: /* @__PURE__ */ jsx(
+                AppButton,
+                {
+                  startIcon: /* @__PURE__ */ jsx(DownloadIcon, { sx: { fontSize: "0.95rem !important" } }),
+                  disabled: !reportData.length,
+                  onClick: handleExportExcel,
+                  sx: { height: 36 },
+                  children: "Export Excel"
+                }
+              )
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "auto", py: 0.8, px: 0 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { mb: 0.8 }, children: [
+        /* @__PURE__ */ jsx(
+          ReportFilterBar,
+          {
+            startDate,
+            endDate,
+            onStartChange: setStartDate,
+            onEndChange: setEndDate,
+            quickRange: activeQuickDate || "",
+            onQuickRangeChange: handleQuickRangeChange,
+            showAgentSelect: true,
+            selectedAgents,
+            onAgentsChange: setSelectedAgents,
+            setIsAllUsersSelected,
+            showQueueSelect: true,
+            queues,
+            selectedQueues,
+            onQueuesChange: setSelectedQueues,
+            extra: /* @__PURE__ */ jsx(
+              AppButton,
+              {
+                startIcon: /* @__PURE__ */ jsx(RefreshIcon, { sx: { fontSize: "0.9rem !important" } }),
+                disabled: loading,
+                onClick: handleRefresh,
+                sx: { height: 32 },
+                children: "Refresh"
+              }
+            )
+          }
+        ),
+        error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mt: 1, fontFamily: FONT, fontSize: "0.78rem" }, children: error })
+      ] }),
+      loading && /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", py: 2.5 }, children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: COLORS.blue }, size: 28 }) }),
+      /* @__PURE__ */ jsxs(
+        Paper,
+        {
+          elevation: 0,
+          sx: {
+            borderRadius: "8px",
+            border: "1px solid #e0e7ef",
+            overflow: "hidden",
+            mb: 2
+          },
+          children: [
+            /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs(
+              Table,
+              {
+                size: "small",
+                sx: {
+                  minWidth: 1100,
+                  fontFamily: FONT,
+                  "& .MuiTableCell-root": {
+                    fontFamily: FONT,
+                    fontSize: "0.75rem",
+                    borderBottom: "1px solid #eef1f6",
+                    py: 0.6,
+                    px: 1
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: [
+                    { id: "fullName", label: "User Name" },
+                    { id: "agentId", label: "User ID" },
+                    { id: "queueNames", label: "Queues" },
+                    { id: "numLogins", label: "Logins" },
+                    { id: "firstLoginTime", label: "First Login" },
+                    { id: "lastLogoutTime", label: "Last Logout" },
+                    { id: "workingDurationFormatted", label: "Working Duration" },
+                    { id: "breakDurationFormatted", label: "Break Duration" },
+                    { id: "loginDurationFormatted", label: "Login Duration" },
+                    { id: "utilisationPct", label: "Utilisation %" }
+                  ].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: {
+                        "&.MuiTableSortLabel-root": { color: "#333" },
+                        "&.MuiTableSortLabel-root:hover": { color: "#555" },
+                        "&.Mui-active": { color: "#333" },
+                        "& .MuiTableSortLabel-icon": { color: "#333 !important" }
+                      },
+                      children: col.label
+                    }
+                  ) }, col.id)) }) }),
+                  /* @__PURE__ */ jsx(TableBody, { children: paginatedData.map((row, idx) => {
+                    const isLoggedIn = !row.lastLogoutTime;
+                    return /* @__PURE__ */ jsxs(
+                      TableRow,
+                      {
+                        hover: true,
+                        sx: {
+                          backgroundColor: "#fff",
+                          "&:hover": { backgroundColor: "#f0f7f8" }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 600, color: COLORS.navy, fontSize: "0.75rem" }, children: row.fullName || "\u2014" }),
+                          /* @__PURE__ */ jsx(TableCell, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.agentId || "\u2014" }),
+                          /* @__PURE__ */ jsx(TableCell, { children: row.queueNames ? /* @__PURE__ */ jsx(
+                            Chip,
+                            {
+                              label: row.queueNames,
+                              size: "small",
+                              sx: {
+                                fontFamily: FONT,
+                                backgroundColor: "#f0ebfa",
+                                color: COLORS.purple,
+                                fontWeight: 500,
+                                fontSize: "0.67rem",
+                                height: 22
+                              }
+                            }
+                          ) : "\u2014" }),
+                          /* @__PURE__ */ jsx(TableCell, { sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
+                            Chip,
+                            {
+                              label: row.numLogins,
+                              size: "small",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                openDialog(row);
+                              },
+                              sx: {
+                                fontFamily: FONT,
+                                backgroundColor: COLORS.navy,
+                                color: "#fff",
+                                fontWeight: 600,
+                                minWidth: 28,
+                                height: 20,
+                                fontSize: "0.67rem",
+                                cursor: "pointer",
+                                "&:hover": { backgroundColor: COLORS.blue }
+                              }
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(TableCell, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: row.firstLoginTime ? dayjs(row.firstLoginTime).format("DD MMM YYYY hh:mm A") : "\u2014" }),
+                          /* @__PURE__ */ jsx(TableCell, { sx: { fontSize: "0.73rem", color: "#4a5568" }, children: isLoggedIn ? /* @__PURE__ */ jsx(
+                            Chip,
+                            {
+                              label: "LOGGED-IN",
+                              size: "small",
+                              sx: {
+                                fontFamily: FONT,
+                                backgroundColor: COLORS.green,
+                                color: "#fff",
+                                fontWeight: 600,
+                                fontSize: "0.65rem",
+                                height: 20
+                              }
+                            }
+                          ) : dayjs(row.lastLogoutTime).format("DD MMM YYYY hh:mm A") }),
+                          /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              sx: { fontWeight: 600, color: COLORS.blue, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" },
+                              children: row.workingDurationFormatted || "\u2014"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              sx: { fontWeight: 500, color: COLORS.amber, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" },
+                              children: row.breakDurationFormatted || "\u2014"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: 500, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }, children: row.loginDurationFormatted || "\u2014" }),
+                          /* @__PURE__ */ jsx(TableCell, { sx: { minWidth: 120 }, children: row.utilisationPct != null ? (() => {
+                            const pct = Math.min(row.utilisationPct, 100);
+                            const barColor = pct >= 80 ? "#10b981" : pct >= 60 ? "#f59e0b" : "#ef4444";
+                            const bgTint = pct >= 80 ? "#d1fae5" : pct >= 60 ? "#fef3c7" : "#fee2e2";
+                            return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.8 }, children: [
+                              /* @__PURE__ */ jsx(
+                                Box,
+                                {
+                                  sx: {
+                                    position: "relative",
+                                    flex: 1,
+                                    height: 7,
+                                    borderRadius: 4,
+                                    backgroundColor: bgTint,
+                                    overflow: "hidden"
+                                  },
+                                  children: /* @__PURE__ */ jsx(
+                                    Box,
+                                    {
+                                      sx: {
+                                        width: `${pct}%`,
+                                        height: "100%",
+                                        borderRadius: 4,
+                                        background: `linear-gradient(90deg, ${barColor}cc, ${barColor})`,
+                                        transition: "width 0.4s ease"
+                                      }
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Chip,
+                                {
+                                  label: `${Math.round(pct)}%`,
+                                  size: "small",
+                                  sx: {
+                                    fontFamily: FONT,
+                                    height: 18,
+                                    minWidth: 38,
+                                    fontSize: "0.63rem",
+                                    fontWeight: 700,
+                                    backgroundColor: bgTint,
+                                    color: barColor,
+                                    "& .MuiChip-label": { px: 0.6 }
+                                  }
+                                }
+                              )
+                            ] });
+                          })() : "\u2014" })
+                        ]
+                      },
+                      `${row.agentId}-${idx}`
+                    );
+                  }) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              TablePagination,
+              {
+                component: "div",
+                count: totalCount,
+                page,
+                onPageChange: handlePageChange,
+                rowsPerPage,
+                rowsPerPageOptions: [10, 15, 25, 50, 100],
+                onRowsPerPageChange: (e) => {
+                  setRowsPerPage(parseInt(e.target.value, 10));
+                  setPage(0);
+                },
+                sx: { borderTop: "1px solid #eef1f6", fontFamily: FONT, "& .MuiTablePagination-displayedRows": { fontFamily: FONT, fontSize: "0.73rem" }, "& .MuiTablePagination-selectLabel": { fontFamily: FONT, fontSize: "0.73rem" } }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog,
+        {
+          open: dialogOpen,
+          onClose: (_e, reason) => {
+            if (reason !== "backdropClick") closeDialog();
+          },
+          maxWidth: "md",
+          fullWidth: true,
+          PaperProps: {
+            sx: {
+              borderRadius: "12px",
+              fontFamily: FONT,
+              overflow: "hidden",
+              boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+              maxWidth: 450
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              DialogTitle,
+              {
+                sx: {
+                  fontFamily: FONT,
+                  background: "linear-gradient(135deg, var(--primary-color-dark, #14505b), var(--primary-color, #1A5F6C))",
+                  color: "#fff",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  py: 1.5,
+                  px: 2.5
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontFamily: FONT, fontWeight: 700, fontSize: "0.95rem", letterSpacing: "0.3px" }, children: "Login Sessions" }),
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: { fontFamily: FONT, opacity: 0.9, fontSize: "0.76rem", mt: 0.3 },
+                        children: [
+                          selectedRow == null ? void 0 : selectedRow.fullName,
+                          " \u2022 ",
+                          selectedRow == null ? void 0 : selectedRow.numLogins,
+                          " session",
+                          (selectedRow == null ? void 0 : selectedRow.numLogins) !== 1 ? "s" : ""
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    /* @__PURE__ */ jsx(
+                      AppButton,
+                      {
+                        size: "small",
+                        startIcon: /* @__PURE__ */ jsx(DownloadIcon, { sx: { fontSize: "0.85rem !important" } }),
+                        onClick: async () => {
+                          if (!selectedRow) return;
+                          try {
+                            await exportAgentLoginSessionsToExcel(selectedRow.agentId, {
+                              start_date: (startDate != null ? startDate : dayjs()).format("YYYY-MM-DDTHH:mm:ss"),
+                              end_date: (endDate != null ? endDate : dayjs()).format("YYYY-MM-DDTHH:mm:ss")
+                            });
+                          } catch (err) {
+                            setError((err == null ? void 0 : err.message) || "Failed to export Excel");
+                          }
+                        },
+                        sx: { whiteSpace: "nowrap" },
+                        children: "Export to Excel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: closeDialog,
+                        size: "small",
+                        sx: {
+                          color: "#fff",
+                          backgroundColor: "rgba(255,255,255,0.1)",
+                          "&:hover": { backgroundColor: "rgba(255,255,255,0.2)" }
+                        },
+                        children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(DialogContent, { sx: { p: 0, backgroundColor: "#f8fafb" }, children: sessionsLoading ? /* @__PURE__ */ jsx(Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 28, sx: { color: "var(--primary-color, #1A5F6C)" } }) }) : sessions.length > 0 ? /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, maxHeight: 300, overflowY: "auto" }, children: Object.entries(
+              sessions.reduce((acc, s) => {
+                const dateKey = s.loginTime ? dayjs(s.loginTime).format("DD MMM YYYY") : "Unknown Date";
+                if (!acc[dateKey]) acc[dateKey] = [];
+                acc[dateKey].push(s);
+                return acc;
+              }, {})
+            ).map(([date, dateSessions]) => /* @__PURE__ */ jsxs(
+              Paper,
+              {
+                elevation: 0,
+                sx: {
+                  mb: 1.5,
+                  borderRadius: "10px",
+                  border: "1px solid #e4eaf0",
+                  overflow: "hidden",
+                  backgroundColor: "#fff"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      sx: {
+                        px: 1.5,
+                        py: 0.8,
+                        backgroundColor: "#f0f5f4",
+                        borderBottom: "1px solid #e4eaf0"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          sx: {
+                            fontFamily: FONT,
+                            fontWeight: 700,
+                            fontSize: "0.8rem",
+                            color: "var(--primary-color-dark, #14505b)",
+                            letterSpacing: "0.3px"
+                          },
+                          children: date
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Box, { sx: { px: 1.5, py: 1 }, children: [
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 2,
+                          pb: 0.5,
+                          mb: 0.5,
+                          borderBottom: "1px solid #e4eaf0"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              sx: {
+                                flex: 1,
+                                fontFamily: FONT,
+                                fontSize: "0.72rem",
+                                fontWeight: 700,
+                                color: "#555",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.5px"
+                              },
+                              children: "Login"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              sx: {
+                                flex: 1,
+                                fontFamily: FONT,
+                                fontSize: "0.72rem",
+                                fontWeight: 700,
+                                color: "#555",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.5px"
+                              },
+                              children: "Logout"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    dateSessions.map((s, i) => {
+                      const isOpenSession = !s.logoutTime;
+                      const isEditing = s.sessionId != null && regularizeSessionId === s.sessionId;
+                      return /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          sx: {
+                            py: 0.6,
+                            borderBottom: i < dateSessions.length - 1 ? "1px dashed #e8ecf0" : "none"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+                              /* @__PURE__ */ jsxs(
+                                Typography,
+                                {
+                                  component: "span",
+                                  sx: {
+                                    flex: 1,
+                                    fontFamily: FONT,
+                                    fontSize: "0.78rem",
+                                    fontWeight: 500,
+                                    color: s.loginTime ? COLORS.green : "#9e9e9e",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 0.4
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9rem" }, children: "\u2199" }),
+                                    s.loginTime ? dayjs(s.loginTime).format("DD MMM YYYY h:mm:ss A") : "Missing"
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 0.4 }, children: [
+                                /* @__PURE__ */ jsxs(
+                                  Typography,
+                                  {
+                                    component: "span",
+                                    sx: {
+                                      fontFamily: FONT,
+                                      fontSize: "0.78rem",
+                                      fontWeight: 500,
+                                      color: s.logoutTime ? COLORS.red : "#9e9e9e",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 0.4
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9rem" }, children: "\u2197" }),
+                                      s.logoutTime ? dayjs(s.logoutTime).format("DD MMM YYYY h:mm:ss A") : "Missing"
+                                    ]
+                                  }
+                                ),
+                                isOpenSession && s.sessionId != null && !isEditing && /* @__PURE__ */ jsx(
+                                  SDKPermissionGuard,
+                                  {
+                                    permissions: [SDK_PERMISSIONS.REPORTS_AGENT_LOGIN_MANAGE],
+                                    showFallback: false,
+                                    children: /* @__PURE__ */ jsx(Tooltip, { title: "Regularize \u2014 set logout time", children: /* @__PURE__ */ jsx(
+                                      IconButton,
+                                      {
+                                        size: "small",
+                                        onClick: () => startRegularize(s),
+                                        sx: {
+                                          p: 0.4,
+                                          color: "var(--primary-color, #1A5F6C)",
+                                          borderRadius: "6px",
+                                          "&:hover": { backgroundColor: "rgba(26,95,108,0.08)" }
+                                        },
+                                        children: /* @__PURE__ */ jsx(EditCalendarIcon, { sx: { fontSize: "1.05rem" } })
+                                      }
+                                    ) })
+                                  }
+                                )
+                              ] })
+                            ] }),
+                            isEditing && /* @__PURE__ */ jsxs(
+                              Box,
+                              {
+                                sx: {
+                                  mt: 1,
+                                  p: 1.25,
+                                  borderRadius: "10px",
+                                  backgroundColor: "#f0f5f4",
+                                  border: "1px solid #d7e3e1"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      sx: {
+                                        fontFamily: FONT,
+                                        fontSize: "0.68rem",
+                                        fontWeight: 700,
+                                        textTransform: "uppercase",
+                                        letterSpacing: "0.5px",
+                                        color: "var(--primary-color-dark, #14505b)",
+                                        mb: 0.75
+                                      },
+                                      children: "Set Logout Time"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    DateTimePicker,
+                                    {
+                                      value: regularizeTime,
+                                      onChange: (val) => setRegularizeTime(val),
+                                      minDateTime: s.loginTime ? dayjs(s.loginTime) : void 0,
+                                      maxDateTime: dayjs(),
+                                      ampm: true,
+                                      format: "DD MMM YYYY hh:mm A",
+                                      slotProps: {
+                                        textField: {
+                                          size: "small",
+                                          fullWidth: true,
+                                          sx: {
+                                            backgroundColor: "#fff",
+                                            "& .MuiOutlinedInput-root": {
+                                              borderRadius: "8px",
+                                              fontFamily: FONT,
+                                              fontSize: "0.8rem",
+                                              "&.Mui-focused fieldset": { borderColor: "var(--primary-color, #1A5F6C)" }
+                                            }
+                                          }
+                                        },
+                                        actionBar: { actions: ["clear", "cancel", "accept"] }
+                                      }
+                                    }
+                                  ),
+                                  regularizeError && /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: FONT, color: COLORS.red, fontSize: "0.7rem", mt: 0.6 }, children: regularizeError }),
+                                  /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-end", spacing: 1, sx: { mt: 1 }, children: [
+                                    /* @__PURE__ */ jsx(
+                                      AppButton,
+                                      {
+                                        variant: "cancel",
+                                        size: "small",
+                                        onClick: cancelRegularize,
+                                        disabled: regularizing,
+                                        children: "Cancel"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(
+                                      AppButton,
+                                      {
+                                        size: "small",
+                                        onClick: saveRegularize,
+                                        disabled: regularizing,
+                                        startIcon: regularizing ? /* @__PURE__ */ jsx(CircularProgress, { size: 14, sx: { color: "#fff" } }) : /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: "0.95rem !important" } }),
+                                        children: regularizing ? "Saving\u2026" : "Regularize"
+                                      }
+                                    )
+                                  ] })
+                                ]
+                              }
+                            )
+                          ]
+                        },
+                        i
+                      );
+                    })
+                  ] })
+                ]
+              },
+              date
+            )) }) : /* @__PURE__ */ jsx(Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontFamily: FONT, color: "#9e9e9e", fontStyle: "italic", fontSize: "0.82rem" }, children: "No sessions found" }) }) })
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+var LoginReport = () => /* @__PURE__ */ jsx(SDKProvider, { children: /* @__PURE__ */ jsx(LoginReportContent, {}) });
+var loginReport_default = LoginReport;
+export {
+  loginReport_default as default
+};
+//# sourceMappingURL=loginReport-F47GUU53.mjs.map