ahs-cti 0.0.8 → 0.0.9

package/dist-react/liveStatus-IDZ7CPYK.mjs

@@ -0,0 +1,1087 @@
+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 {
+  useCallMonitoring
+} from "./chunk-LWDAC6QU.mjs";
+import {
+  SDKPermissionGuard
+} from "./chunk-ADM2JJCP.mjs";
+import {
+  SDKProvider,
+  useToast
+} from "./chunk-4YF4IDV6.mjs";
+import {
+  END_POINT,
+  SDK_PERMISSIONS,
+  axios_default
+} from "./chunk-F7G2XFRU.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-S4J35V4B.mjs";
+
+// call-control-sdk/lib/pages/liveStatus/index.tsx
+import React, { useCallback as useCallback2, useState as useState2, useEffect as useEffect2 } from "react";
+import { Box as Box2, CircularProgress } from "@mui/material";
+
+// call-control-sdk/lib/pages/liveStatus/useLiveStatus.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var POLL_INTERVAL_MS = 5e3;
+var LONG_CALL_SECS = 420;
+var WAITING_THRESHOLD = 3;
+function parseDur(dur) {
+  const p = (dur || "00:00:00").split(":").map(Number);
+  return (p[0] || 0) * 3600 + (p[1] || 0) * 60 + (p[2] || 0);
+}
+function fmtDur(s) {
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sc = s % 60;
+  return [h, m, sc].map((x) => String(x).padStart(2, "0")).join(":");
+}
+var STATUS_PRIORITY = {
+  "s-oncall-in": 0,
+  "s-oncall-out": 1,
+  "s-break": 2,
+  "s-wrapup": 3,
+  "s-idle": 4
+};
+function getAgentStatusKey(status, callDirection) {
+  const lower = (status || "").toLowerCase();
+  if (lower.includes("idle") || lower.includes("ready") || lower.includes("available")) return "s-idle";
+  if (lower.includes("break") || lower.includes("pause")) return "s-break";
+  if (lower.includes("wrap") || lower.includes("acw")) return "s-wrapup";
+  if (lower.includes("outbound") || lower.includes("outgoing") || lower.includes("dialing")) return "s-oncall-out";
+  if (lower.includes("call") || lower.includes("busy") || lower.includes("oncall") || lower.includes("on-call") || lower.includes("on_call") || lower.includes("incoming") || lower.includes("ringing") || lower.includes("connected")) {
+    return callDirection === "OUTBOUND" ? "s-oncall-out" : "s-oncall-in";
+  }
+  return "s-idle";
+}
+function getSortedAgents(list) {
+  return [...list].sort(
+    (a, b) => {
+      var _a, _b;
+      return ((_a = STATUS_PRIORITY[getAgentStatusKey(a.status, a.callDirection)]) != null ? _a : 9) - ((_b = STATUS_PRIORITY[getAgentStatusKey(b.status, b.callDirection)]) != null ? _b : 9);
+    }
+  );
+}
+async function fetchTopStats() {
+  const res = await axios_default.get(END_POINT.DASHBOARD_TOP_STATS);
+  return res.data;
+}
+async function fetchAgents() {
+  const res = await axios_default.get(END_POINT.DASHBOARD_AGENTS);
+  return res.data;
+}
+async function fetchQueues() {
+  const res = await axios_default.get(END_POINT.DASHBOARD_QUEUES);
+  return res.data;
+}
+async function fetchAlerts() {
+  const res = await axios_default.get(END_POINT.DASHBOARD_ALERTS);
+  return res.data;
+}
+async function fetchQueuePulse() {
+  const res = await axios_default.get(END_POINT.DASHBOARD_QUEUE_PULSE);
+  return res.data;
+}
+function useLiveStatus() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [topStats, setTopStats] = useState(null);
+  const [agents, setAgents] = useState([]);
+  const [queues, setQueues] = useState([]);
+  const [alerts, setAlerts] = useState([]);
+  const [queuePulse, setQueuePulse] = useState(null);
+  const [durations, setDurations] = useState({});
+  const [clockStr, setClockStr] = useState("--:--:--");
+  const [dateStr, setDateStr] = useState("");
+  const agentsRef = useRef(agents);
+  agentsRef.current = agents;
+  const fetchDashboard = useCallback(async () => {
+    var _a;
+    try {
+      const [topStatsRes, agentsRes, queuesRes, alertsRes, pulseRes] = await Promise.allSettled([
+        fetchTopStats(),
+        fetchAgents(),
+        fetchQueues(),
+        fetchAlerts(),
+        fetchQueuePulse()
+      ]);
+      if (topStatsRes.status === "fulfilled" && topStatsRes.value) setTopStats(topStatsRes.value);
+      if (agentsRes.status === "fulfilled" && ((_a = agentsRes.value) == null ? void 0 : _a.length)) {
+        setAgents(agentsRes.value);
+        const m = {};
+        agentsRes.value.forEach((a) => {
+          m[a.agentId] = parseDur(a.statusDuration || "00:00:00");
+        });
+        setDurations(m);
+      }
+      if (queuesRes.status === "fulfilled" && queuesRes.value) setQueues(queuesRes.value);
+      if (alertsRes.status === "fulfilled" && alertsRes.value) setAlerts(alertsRes.value);
+      if (pulseRes.status === "fulfilled" && pulseRes.value) setQueuePulse(pulseRes.value);
+    } catch (e) {
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    fetchDashboard();
+    const iv = setInterval(fetchDashboard, POLL_INTERVAL_MS);
+    return () => clearInterval(iv);
+  }, [fetchDashboard]);
+  useEffect(() => {
+    const iv = setInterval(() => {
+      const now = /* @__PURE__ */ new Date();
+      setClockStr(
+        [now.getHours(), now.getMinutes(), now.getSeconds()].map((v) => String(v).padStart(2, "0")).join(":")
+      );
+      setDateStr(
+        now.toLocaleDateString("en-US", {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        })
+      );
+      setDurations((prev) => {
+        const next = __spreadValues({}, prev);
+        for (const key of Object.keys(next)) next[key] = next[key] + 1;
+        return next;
+      });
+    }, 1e3);
+    return () => clearInterval(iv);
+  }, []);
+  return {
+    isLoading,
+    topStats,
+    agents,
+    queues,
+    alerts,
+    queuePulse,
+    durations,
+    clockStr,
+    dateStr,
+    refresh: fetchDashboard
+  };
+}
+
+// call-control-sdk/lib/pages/liveStatus/styles.ts
+import { Box, styled } from "@mui/material";
+import { keyframes } from "@mui/material/styles";
+var pulse = keyframes`
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.6); opacity: 0.3; }
+`;
+var slideUp = keyframes`
+  from { transform: translateY(16px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+`;
+var flashBg = keyframes`
+  0%, 100% { background: #fdf3e0; }
+  50% { background: #fff7e0; }
+`;
+var rowBlink = keyframes`
+  0%, 100% { background: rgba(204,42,42,.07); }
+  50% { background: rgba(204,42,42,.2); }
+`;
+var ticker = keyframes`
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+`;
+var C = {
+  bg0: "#eef2f7",
+  bg1: "#ffffff",
+  bg2: "#f4f7fb",
+  bg3: "#e4eaf3",
+  bg4: "#d5dfee",
+  b1: "rgba(30,60,120,.08)",
+  b2: "rgba(30,60,120,.14)",
+  t1: "#0d1e35",
+  t2: "#3a5278",
+  t3: "#7a93b5",
+  t4: "#b0c0d5",
+  green: "#0a9a62",
+  greenLt: "#e4f6ef",
+  greenBd: "rgba(10,154,98,.2)",
+  amber: "#c47c00",
+  amberLt: "#fdf3e0",
+  amberBd: "rgba(196,124,0,.2)",
+  blue: "#1565c8",
+  blueLt: "#e8f0fc",
+  blueBd: "rgba(21,101,200,.2)",
+  red: "#cc2a2a",
+  redLt: "#fde8e8",
+  redBd: "rgba(204,42,42,.2)",
+  purple: "#6b3fbf",
+  purpleLt: "#f0eafa",
+  purpleBd: "rgba(107,63,191,.2)",
+  teal: "#0b7a8f",
+  tealLt: "#e3f4f7",
+  tealBd: "rgba(11,122,143,.2)",
+  orange: "#c45a00",
+  orangeLt: "#fdf0e4",
+  navy: "#1A5F6C"
+};
+var STATUS_COLORS = {
+  "s-oncall-in": { bg: "#fff8e1", border: "rgba(196,124,0,.3)", bar: "#e68a00", text: "#b36b00" },
+  "s-oncall-out": { bg: "#e3f2fd", border: "rgba(21,101,200,.3)", bar: "#1976d2", text: "#0d47a1" },
+  "s-wrapup": { bg: "#f3e5f5", border: "rgba(107,63,191,.3)", bar: "#8e24aa", text: "#6a1b9a" },
+  "s-break": { bg: "#ffebee", border: "rgba(204,42,42,.3)", bar: "#e53935", text: "#c62828" },
+  "s-idle": { bg: "#e8f5e9", border: "rgba(46,125,50,.25)", bar: "#2e7d32", text: "#1b5e20" }
+};
+var WallboardRoot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "isTv"
+})(({ theme, isTv }) => ({
+  display: "grid",
+  gridTemplateRows: "auto auto 1fr auto",
+  minHeight: isTv ? "100vh" : "calc(100vh - 60px)",
+  height: isTv ? "100vh" : "calc(100vh - 60px)",
+  fontFamily: "'Poppins', Arial, sans-serif",
+  background: "transparent",
+  color: C.t1,
+  [theme.breakpoints.up("lg")]: {
+    height: isTv ? "100vh" : "calc(100vh - 60px)",
+    overflow: "hidden"
+  }
+}));
+var TopBar = styled(Box)(({ theme }) => ({
+  background: C.navy,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 10px",
+  height: 34,
+  minHeight: 34,
+  borderBottom: `1px solid ${C.blue}`,
+  flexWrap: "wrap",
+  gap: 4,
+  [theme.breakpoints.up("sm")]: { padding: "0 14px", flexWrap: "nowrap" }
+}));
+var BrandLogo = styled(Box)({
+  width: 22,
+  height: 22,
+  borderRadius: 4,
+  background: "#fff",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "hidden"
+});
+var LiveBadge = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  background: "rgba(10,154,98,.2)",
+  border: "1px solid rgba(10,154,98,.4)",
+  borderRadius: 12,
+  padding: "2px 7px",
+  fontSize: 8,
+  fontWeight: 700,
+  letterSpacing: 1.5,
+  color: "#0ef5a8",
+  textTransform: "uppercase"
+});
+var PulseDot = styled("span")({
+  width: 5,
+  height: 5,
+  borderRadius: "50%",
+  background: "#0ef5a8",
+  display: "inline-block",
+  animation: `${pulse} 1.5s ease infinite`
+});
+var KpiStrip = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(72px, 1fr))",
+  background: "transparent",
+  borderBottom: `1px solid ${C.b1}`,
+  [theme.breakpoints.up("xl")]: {
+    gridTemplateColumns: "repeat(14, 1fr)"
+  }
+}));
+var KpiCell = styled(Box)(({ accentColor }) => ({
+  padding: "4px 0 3px 8px",
+  borderRight: `1px solid ${C.b1}`,
+  borderBottom: `1px solid ${C.b1}`,
+  position: "relative",
+  cursor: "default",
+  "&:last-child": { borderRight: "none" },
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    height: 2,
+    background: accentColor
+  },
+  "@media (min-width: 960px)": { padding: "5px 0 4px 6px" }
+}));
+var KpiValue = styled("div")(({ kcolor, theme }) => ({
+  fontFamily: "'Poppins', Arial, sans-serif",
+  fontSize: 15,
+  fontWeight: 800,
+  lineHeight: 1,
+  color: kcolor,
+  [theme.breakpoints.up("md")]: { fontSize: 17 },
+  [theme.breakpoints.up("lg")]: { fontSize: 20 }
+}));
+var KpiLabel = styled("div")({
+  fontSize: 8,
+  letterSpacing: 0.8,
+  textTransform: "uppercase",
+  color: C.t3,
+  fontWeight: 600,
+  marginTop: 1
+});
+var BodyGrid = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  marginTop: 0,
+  overflow: "auto",
+  minHeight: 0,
+  [theme.breakpoints.up("md")]: { gridTemplateColumns: "2fr 1fr" },
+  [theme.breakpoints.up("lg")]: { gridTemplateColumns: "2fr 1fr", overflow: "hidden" }
+}));
+var Panel = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  overflow: "auto",
+  minHeight: 0,
+  borderRight: `1px solid ${C.b1}`,
+  [theme.breakpoints.up("lg")]: { overflow: "hidden" }
+}));
+var PanelHeader = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "4px 10px",
+  background: "transparent",
+  borderBottom: `1px solid ${C.b1}`,
+  flexShrink: 0
+});
+var PhTitle = styled("span")({
+  fontFamily: "'Poppins', Arial, sans-serif",
+  fontSize: 10,
+  fontWeight: 700,
+  letterSpacing: 1.2,
+  textTransform: "uppercase",
+  color: C.t2
+});
+var Badge = styled("span")(({ bg, color, border }) => ({
+  fontFamily: "'JetBrains Mono', monospace",
+  fontSize: 9,
+  fontWeight: 700,
+  padding: "1px 6px",
+  borderRadius: 3,
+  letterSpacing: 0.2,
+  background: bg,
+  color,
+  border: `1px solid ${border}`
+}));
+var StatusDot = styled("span")(({ dotColor, animated }) => __spreadValues({
+  width: 5,
+  height: 5,
+  borderRadius: "50%",
+  flexShrink: 0,
+  background: dotColor
+}, animated ? { animation: `${pulse} 1.3s ease infinite` } : {}));
+var AgentTable = styled("table")({
+  width: "100%",
+  borderCollapse: "collapse",
+  tableLayout: "auto"
+});
+var AgTh = styled("th")({
+  padding: "4px 8px",
+  fontSize: 8,
+  letterSpacing: 0.8,
+  textTransform: "uppercase",
+  color: C.t3,
+  fontWeight: 600,
+  textAlign: "left",
+  borderBottom: `1px solid ${C.b2}`,
+  background: C.bg2,
+  whiteSpace: "nowrap",
+  position: "sticky",
+  top: 0,
+  zIndex: 1
+});
+var AgTd = styled("td")({
+  padding: "4px 8px",
+  fontSize: 11,
+  borderBottom: `1px solid ${C.b1}`,
+  verticalAlign: "middle"
+});
+var PageInfo = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "2px 10px",
+  fontSize: 8,
+  color: C.t3,
+  background: C.bg2,
+  flexShrink: 0,
+  borderTop: `1px solid ${C.b1}`
+});
+var QName = styled("span")({
+  fontWeight: 600,
+  color: C.t1,
+  fontFamily: "'Poppins', Arial, sans-serif",
+  fontSize: 11,
+  "@media (min-width: 1280px)": { fontSize: 12 }
+});
+var QNum = styled("span")(({ numColor }) => ({
+  fontFamily: "'JetBrains Mono', monospace",
+  fontWeight: 700,
+  fontSize: 11,
+  color: numColor || C.t1
+}));
+var QBar = styled(Box)({ height: 4, background: C.bg3, borderRadius: 2, overflow: "hidden", width: 56 });
+var QBarFill = styled(Box)(({ w, barColor }) => ({
+  height: "100%",
+  borderRadius: 3,
+  width: `${w}%`,
+  background: barColor
+}));
+var SbHeader = styled(Box)({
+  padding: "7px 12px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  background: C.bg2,
+  borderBottom: `1px solid ${C.b1}`
+});
+var SbTitle = styled("span")({
+  fontSize: 9,
+  fontWeight: 700,
+  letterSpacing: 1.5,
+  textTransform: "uppercase",
+  color: C.t3
+});
+var NoDataBox = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "12px 8px",
+  fontSize: 10,
+  fontWeight: 600,
+  color: C.t3,
+  letterSpacing: 0.5,
+  fontFamily: "'Poppins', Arial, sans-serif"
+});
+var Footer = styled(Box)({
+  background: C.navy,
+  borderTop: "1px solid rgba(255,255,255,.08)",
+  display: "flex",
+  alignItems: "center",
+  overflow: "hidden",
+  minHeight: 18,
+  height: 18,
+  position: "sticky",
+  bottom: 0,
+  zIndex: 5
+});
+var TickerLabel = styled("div")({
+  flexShrink: 0,
+  padding: "0 8px",
+  fontSize: 7,
+  fontWeight: 700,
+  letterSpacing: 1.2,
+  textTransform: "uppercase",
+  color: "rgba(255,255,255,.4)",
+  borderRight: "1px solid rgba(255,255,255,.1)",
+  whiteSpace: "nowrap"
+});
+var TickerTrack = styled(Box)({ flex: 1, overflow: "hidden", position: "relative" });
+var TickerInner = styled(Box)({
+  display: "flex",
+  animation: `${ticker} 50s linear infinite`,
+  whiteSpace: "nowrap"
+});
+var TickerSpan = styled("span")(({ isWarn, isGood }) => ({
+  fontSize: 9,
+  color: "rgba(255,255,255,.55)",
+  padding: "0 16px",
+  letterSpacing: 0.3,
+  "& b": {
+    color: isWarn ? "#fcd34d" : isGood ? "#6ee7b7" : "rgba(255,255,255,.85)",
+    fontWeight: 600
+  }
+}));
+var MonitorBtn = styled("button")(({ variant }) => {
+  const colors = {
+    listen: { bg: "#e3f2fd", color: "#1976d2", hoverBg: "#bbdefb" },
+    whisper: { bg: "#fff3e0", color: "#ef6c00", hoverBg: "#ffe0b2" },
+    barge: { bg: "#fce4ec", color: "#c2185b", hoverBg: "#f8bbd0" },
+    stop: { bg: "#ffebee", color: "#c62828", hoverBg: "#ffcdd2" }
+  };
+  const c = colors[variant];
+  return {
+    padding: "2px 5px",
+    border: "none",
+    borderRadius: 3,
+    cursor: "pointer",
+    fontSize: 8,
+    fontWeight: 600,
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    background: c.bg,
+    color: c.color,
+    transition: "all 0.2s",
+    "&:hover": { background: c.hoverBg },
+    "&:disabled": { opacity: 0.5, cursor: "not-allowed" }
+  };
+});
+var MonitorCard = styled(Box)({
+  position: "fixed",
+  bottom: 20,
+  right: 20,
+  width: 296,
+  background: "#fff",
+  borderRadius: 14,
+  boxShadow: "0 8px 32px rgba(13,30,53,0.18), 0 2px 8px rgba(13,30,53,0.08)",
+  zIndex: 1001,
+  overflow: "hidden",
+  animation: `${slideUp} 0.2s cubic-bezier(.22,.68,0,1.2)`
+});
+
+// call-control-sdk/lib/pages/liveStatus/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AgentTableRow = React.memo(({
+  agent,
+  durSecs,
+  onMonitor,
+  activeMonitoring,
+  onStopMonitoring
+}) => {
+  const statusKey = getAgentStatusKey(agent.status, agent.callDirection);
+  const sc = STATUS_COLORS[statusKey];
+  const isOnCall = statusKey === "s-oncall-in" || statusKey === "s-oncall-out";
+  const isLong = isOnCall && durSecs >= LONG_CALL_SECS;
+  const isBeingMonitored = (activeMonitoring == null ? void 0 : activeMonitoring.agentId) === agent.agentId;
+  const statusColor = isOnCall ? agent.callDirection === "OUTBOUND" ? C.blue : C.green : sc.text;
+  const durColor = isLong ? C.red : statusColor;
+  return /* @__PURE__ */ jsxs("tr", { style: { background: isLong ? "rgba(204,42,42,.07)" : sc.bg, transition: "background 0.3s" }, children: [
+    /* @__PURE__ */ jsx(AgTd, { sx: { borderLeft: `2px solid ${sc.bar}`, pl: "8px", maxWidth: 160 }, children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+      /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 11, fontWeight: 700, color: C.t1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: agent.agentName }),
+      isLong && /* @__PURE__ */ jsx(Box2, { component: "span", sx: { fontSize: 7, fontWeight: 700, color: C.red, letterSpacing: 0.3, flexShrink: 0 }, children: "!7m" })
+    ] }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: agent.extension || "\u2014" }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "4px", flexWrap: "nowrap" }, children: [
+      /* @__PURE__ */ jsx(StatusDot, { dotColor: statusColor, animated: isOnCall }),
+      /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 8, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase", color: statusColor, whiteSpace: "nowrap" }, children: agent.status })
+    ] }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: durColor, whiteSpace: "nowrap" }, children: fmtDur(durSecs) }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: agent.activeCallerNumber || "\u2014" }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 9, color: C.t3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 110 }, children: agent.queueNames || "\u2014" }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700, color: C.t2 }, children: agent.callsToday }) }),
+    onMonitor !== void 0 && /* @__PURE__ */ jsx(AgTd, { children: isOnCall && onMonitor && /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", gap: "3px", flexWrap: "nowrap", alignItems: "center" }, children: isBeingMonitored ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 7, color: C.green, fontWeight: 600, display: "flex", alignItems: "center", gap: "2px", whiteSpace: "nowrap" }, children: [
+        /* @__PURE__ */ jsx(StatusDot, { dotColor: C.green, animated: true }),
+        activeMonitoring == null ? void 0 : activeMonitoring.mode.toUpperCase()
+      ] }),
+      /* @__PURE__ */ jsx(MonitorBtn, { variant: "stop", onClick: onStopMonitoring, children: "\u23F9 Stop" })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SDKPermissionGuard, { permission: SDK_PERMISSIONS.SUPERVISOR_MONITOR_LISTEN, showFallback: false, children: /* @__PURE__ */ jsx(MonitorBtn, { variant: "listen", onClick: () => onMonitor(agent, "listen"), title: "Start listening", children: "\u{1F442}" }) }),
+      /* @__PURE__ */ jsx(SDKPermissionGuard, { permission: SDK_PERMISSIONS.SUPERVISOR_MONITOR_WHISPER, showFallback: false, children: /* @__PURE__ */ jsx(MonitorBtn, { variant: "whisper", onClick: () => onMonitor(agent, "whisper"), title: "Whisper to agent", children: "\u{1F5E3}" }) }),
+      /* @__PURE__ */ jsx(SDKPermissionGuard, { permission: SDK_PERMISSIONS.SUPERVISOR_MONITOR_BARGE, showFallback: false, children: /* @__PURE__ */ jsx(MonitorBtn, { variant: "barge", onClick: () => onMonitor(agent, "barge"), title: "Barge in to call", children: "\u{1F4E2}" }) })
+    ] }) }) })
+  ] });
+});
+function LiveStatusPageInner({ isTvDashboard = false }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  const toast = useToast();
+  const {
+    isLoading,
+    topStats,
+    agents,
+    queues,
+    alerts,
+    queuePulse,
+    durations,
+    clockStr,
+    dateStr
+  } = useLiveStatus();
+  const { startMonitoring, stopMonitoring, changeMode, isLoading: monitoringLoading } = useCallMonitoring();
+  const [monitoringSession, setMonitoringSession] = useState2(null);
+  const [showMonitorModal, setShowMonitorModal] = useState2(false);
+  const [selectedAgent, setSelectedAgent] = useState2(null);
+  const [selectedMode, setSelectedMode] = useState2("listen");
+  const [monitoringError, setMonitoringError] = useState2(null);
+  const handleOpenMonitorModal = useCallback2((agent, mode) => {
+    setSelectedAgent(agent);
+    setSelectedMode(mode);
+    setShowMonitorModal(true);
+    setMonitoringError(null);
+  }, []);
+  const handleStartMonitoring = useCallback2(async () => {
+    if (!selectedAgent) return;
+    if (!selectedAgent.activeCallUuid) {
+      setMonitoringError("No active call found for this agent");
+      return;
+    }
+    setMonitoringError(null);
+    const response = await startMonitoring({
+      call_id: selectedAgent.activeCallUuid,
+      agent_extension: selectedAgent.extension || "",
+      mode: selectedMode
+    });
+    if ((response == null ? void 0 : response.success) && (response == null ? void 0 : response.session_id)) {
+      setMonitoringSession({
+        sessionId: response.session_id,
+        agentId: selectedAgent.agentId,
+        agentName: selectedAgent.agentName,
+        agentExt: selectedAgent.extension || "",
+        mode: selectedMode,
+        callUuid: selectedAgent.activeCallUuid,
+        startTime: Date.now()
+      });
+      setShowMonitorModal(false);
+      if (response.message) toast.showToast(response.message, "success");
+    } else {
+      setMonitoringError((response == null ? void 0 : response.message) || "Failed to start monitoring");
+    }
+  }, [selectedAgent, selectedMode, startMonitoring, toast]);
+  const handleStopMonitoring = useCallback2(async () => {
+    if (!monitoringSession) return;
+    const response = await stopMonitoring({ call_uuid: monitoringSession.callUuid });
+    if ((response == null ? void 0 : response.success) && (response == null ? void 0 : response.message)) toast.showToast(response.message, "success");
+    setMonitoringSession(null);
+  }, [monitoringSession, stopMonitoring, toast]);
+  const handleChangeMode = useCallback2(async (newMode) => {
+    if (!monitoringSession) return;
+    const response = await changeMode({ call_uuid: monitoringSession.callUuid, mode: newMode });
+    if (response == null ? void 0 : response.success) {
+      setMonitoringSession((prev) => prev ? __spreadProps(__spreadValues({}, prev), { mode: newMode }) : null);
+      if (response.message) toast.showToast(response.message, "success");
+    }
+  }, [monitoringSession, changeMode, toast]);
+  const handleCloseMonitorModal = useCallback2(() => {
+    setShowMonitorModal(false);
+    setSelectedAgent(null);
+    setMonitoringError(null);
+  }, []);
+  useEffect2(() => {
+    var _a2;
+    if (!monitoringSession) return;
+    const agent = agents.find((a) => a.agentId === monitoringSession.agentId);
+    if (!agent) return;
+    const isOnCall = ((_a2 = agent.status) == null ? void 0 : _a2.toUpperCase()) === "ONCALL";
+    const callUuidChanged = agent.activeCallUuid !== monitoringSession.callUuid;
+    if (!isOnCall || callUuidChanged) {
+      setMonitoringSession(null);
+      setShowMonitorModal(false);
+      toast.showToast("Monitoring ended \u2014 agent call has ended.", "info");
+    }
+  }, [agents, monitoringSession, toast]);
+  const sorted = getSortedAgents(agents);
+  const oncallCount = (_a = topStats == null ? void 0 : topStats.onCall) != null ? _a : agents.filter((a) => getAgentStatusKey(a.status, a.callDirection).startsWith("s-oncall")).length;
+  const breakCount = (_b = topStats == null ? void 0 : topStats.onBreak) != null ? _b : agents.filter((a) => getAgentStatusKey(a.status, a.callDirection) === "s-break").length;
+  const longCallCount = agents.filter((a) => getAgentStatusKey(a.status, a.callDirection) === "s-oncall-in" && (durations[a.agentId] || 0) >= LONG_CALL_SECS).length;
+  const kpiTotalAgents = (_c = topStats == null ? void 0 : topStats.totalAgents) != null ? _c : agents.length;
+  const kpiLoginCount = (_d = topStats == null ? void 0 : topStats.loggedIn) != null ? _d : agents.length;
+  const kpiIdleCount = (_e = topStats == null ? void 0 : topStats.idleReady) != null ? _e : agents.filter((a) => getAgentStatusKey(a.status, a.callDirection) === "s-idle").length;
+  const kpiOnCallCount = (_f = topStats == null ? void 0 : topStats.onCall) != null ? _f : agents.filter((a) => getAgentStatusKey(a.status, a.callDirection).startsWith("s-oncall")).length;
+  const kpiWrapup = (_g = topStats == null ? void 0 : topStats.wrapup) != null ? _g : agents.filter((a) => getAgentStatusKey(a.status, a.callDirection) === "s-wrapup").length;
+  const kpiBreak = (_h = topStats == null ? void 0 : topStats.onBreak) != null ? _h : agents.filter((a) => getAgentStatusKey(a.status, a.callDirection) === "s-break").length;
+  const kpiNotLogged = (_i = topStats == null ? void 0 : topStats.notLogged) != null ? _i : Math.max(0, kpiTotalAgents - kpiLoginCount);
+  const tickerItems = queues.map((q) => ({
+    text: `${q.queueName} Queue \u2014 <b>${q.waitingCalls > 0 ? q.waitingCalls + " waiting" : "all clear"}</b> \xB7 avg ${q.avgWaitFormatted}`,
+    warn: q.waitingCalls > 0,
+    good: q.waitingCalls === 0
+  }));
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(Box2, { sx: {
+      height: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "transparent",
+      gap: 2
+    }, children: [
+      /* @__PURE__ */ jsx(CircularProgress, { size: 48, sx: { color: C.blue } }),
+      /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 16, fontWeight: 600, color: C.t2, letterSpacing: 1, textTransform: "uppercase" }, children: "Loading Live Status..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(WallboardRoot, { isTv: isTvDashboard, children: [
+    isTvDashboard && /* @__PURE__ */ jsxs(TopBar, { children: [
+      /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+        /* @__PURE__ */ jsx(BrandLogo, { children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 26 26", fill: "none", width: 16, height: 16, children: [
+          /* @__PURE__ */ jsx("rect", { width: "26", height: "26", rx: "5", fill: "#1A5F6C" }),
+          /* @__PURE__ */ jsx("path", { d: "M5 18 Q5 8 13 8 Q21 8 21 18", stroke: "#1565c8", strokeWidth: "2.5", fill: "none", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 18 Q9 12 13 12 Q17 12 17 18", stroke: "#0a9a62", strokeWidth: "2", fill: "none", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx("circle", { cx: "13", cy: "19", r: "2", fill: "#1565c8" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Box2, { sx: { color: "#fff" }, children: [
+          /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 13, fontWeight: 800, letterSpacing: 1.2, lineHeight: 1 }, children: "AHS" }),
+          /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 7.5, letterSpacing: 1, color: "rgba(255,255,255,.45)", textTransform: "uppercase" }, children: "Supervisor Wallboard" })
+        ] }),
+        /* @__PURE__ */ jsxs(LiveBadge, { children: [
+          /* @__PURE__ */ jsx(PulseDot, {}),
+          "LIVE"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box2, { sx: { textAlign: "right" }, children: [
+        /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700, color: "#fff", letterSpacing: 1.5, lineHeight: 1 }, children: clockStr }),
+        /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 7.5, color: "rgba(255,255,255,.4)", letterSpacing: 0.5, mt: "1px" }, children: dateStr })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(KpiStrip, { children: [
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: "#94a3b8", children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.t1, children: kpiTotalAgents }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Total Agents" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.green, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.green, children: kpiLoginCount }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Logged In" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: "#cbd5e1", children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: "#94a3b8", children: kpiNotLogged }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Not Logged" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.teal, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.teal, children: kpiIdleCount }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Idle / Ready" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.amber, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.amber, children: kpiOnCallCount }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "On Call" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.green, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.green, children: (_j = topStats == null ? void 0 : topStats.inboundToday) != null ? _j : 0 }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Inbound" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.blue, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.blue, children: (_k = topStats == null ? void 0 : topStats.outboundToday) != null ? _k : 0 }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Outbound" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.purple, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.purple, children: kpiWrapup }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Wrapup" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.red, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.red, children: kpiBreak }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "On Break" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.blue, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.blue, children: (_l = topStats == null ? void 0 : topStats.callsToday) != null ? _l : 0 }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Calls Today" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.red, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.red, children: (_m = topStats == null ? void 0 : topStats.abandonedToday) != null ? _m : 0 }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Abandoned" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.green, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.green, children: (topStats == null ? void 0 : topStats.slaThisHrPct) != null ? `${topStats.slaThisHrPct}%` : "\u2014" }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "SLA This Hr" })
+      ] }),
+      /* @__PURE__ */ jsxs(KpiCell, { accentColor: C.amber, children: [
+        /* @__PURE__ */ jsx(KpiValue, { kcolor: C.amber, children: (_n = topStats == null ? void 0 : topStats.avgSpeedAnswerFormatted) != null ? _n : "00:00" }),
+        /* @__PURE__ */ jsx(KpiLabel, { children: "Avg Speed Ans" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(BodyGrid, { children: [
+      /* @__PURE__ */ jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxs(PanelHeader, { children: [
+          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(PhTitle, { children: "Agent Status" }),
+            /* @__PURE__ */ jsxs(Badge, { bg: C.amberLt, color: C.amber, border: C.amberBd, children: [
+              oncallCount,
+              " On-Call"
+            ] }),
+            /* @__PURE__ */ jsxs(Badge, { bg: C.redLt, color: C.red, border: C.redBd, children: [
+              breakCount,
+              " Break"
+            ] }),
+            longCallCount > 0 && /* @__PURE__ */ jsxs(Badge, { bg: C.redLt, color: C.red, border: C.redBd, children: [
+              longCallCount,
+              " Long"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 8, color: C.t3 }, children: [
+            agents.length,
+            " agents"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box2, { sx: {
+          overflowX: "auto",
+          overflowY: "auto",
+          flex: 1,
+          minHeight: 0,
+          "&::-webkit-scrollbar": { width: 3, height: 3 },
+          "&::-webkit-scrollbar-track": { background: C.bg2, borderRadius: 2 },
+          "&::-webkit-scrollbar-thumb": { background: C.t4, borderRadius: 2, "&:hover": { background: C.t3 } }
+        }, children: /* @__PURE__ */ jsxs(AgentTable, { children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(AgTh, { style: { width: "20%" }, children: "Agent" }),
+            /* @__PURE__ */ jsx(AgTh, { style: { width: "7%" }, children: "Ext" }),
+            /* @__PURE__ */ jsx(AgTh, { style: { width: "14%" }, children: "Status" }),
+            /* @__PURE__ */ jsx(AgTh, { style: { width: "10%" }, children: "Duration" }),
+            /* @__PURE__ */ jsx(AgTh, { style: { width: "12%" }, children: "Caller" }),
+            /* @__PURE__ */ jsx(AgTh, { style: { width: "17%" }, children: "Queue" }),
+            /* @__PURE__ */ jsx(AgTh, { style: { width: "6%" }, children: "Calls" }),
+            !isTvDashboard && /* @__PURE__ */ jsx(AgTh, { style: { width: "14%" }, children: "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: sorted.length > 0 ? sorted.map((a) => /* @__PURE__ */ jsx(
+            AgentTableRow,
+            {
+              agent: a,
+              durSecs: durations[a.agentId] || 0,
+              onMonitor: isTvDashboard ? void 0 : handleOpenMonitorModal,
+              activeMonitoring: monitoringSession,
+              onStopMonitoring: handleStopMonitoring
+            },
+            a.agentId
+          )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(AgTd, { colSpan: isTvDashboard ? 7 : 8, children: /* @__PURE__ */ jsx(NoDataBox, { children: "No data available" }) }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(PageInfo, { children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            agents.length,
+            " agents \xB7 ",
+            oncallCount,
+            " on call \xB7 ",
+            agents.filter((a) => getAgentStatusKey(a.status, a.callDirection) === "s-idle").length,
+            " idle"
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: "Auto-refreshes every 5s" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Panel, { sx: { borderRight: `1px solid ${C.b1}`, maxHeight: { xs: "none", lg: "calc(100vh - 96px)" } }, children: [
+        /* @__PURE__ */ jsxs(PanelHeader, { children: [
+          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(PhTitle, { children: "Queue Performance" }),
+            /* @__PURE__ */ jsx(Badge, { bg: C.greenLt, color: C.green, border: C.greenBd, children: "All Healthy" })
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { bg: C.bg2, color: C.t3, border: C.b2, children: "Live SLA" })
+        ] }),
+        /* @__PURE__ */ jsxs(Box2, { sx: {
+          flex: 1,
+          minHeight: 0,
+          "&::-webkit-scrollbar": { width: 3 },
+          "&::-webkit-scrollbar-track": { background: C.bg2, borderRadius: 2 },
+          "&::-webkit-scrollbar-thumb": { background: C.t4, borderRadius: 2, "&:hover": { background: C.t3 } }
+        }, children: [
+          /* @__PURE__ */ jsx(Box2, { sx: { overflowX: "auto", "&::-webkit-scrollbar": { height: 3 }, "&::-webkit-scrollbar-track": { background: C.bg2, borderRadius: 2 }, "&::-webkit-scrollbar-thumb": { background: C.t4, borderRadius: 2 } }, children: /* @__PURE__ */ jsxs(AgentTable, { children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx(AgTh, { children: "Queue" }),
+              /* @__PURE__ */ jsx(AgTh, { children: "Agents" }),
+              /* @__PURE__ */ jsx(AgTh, { children: "Active" }),
+              /* @__PURE__ */ jsx(AgTh, { children: "Waiting" }),
+              /* @__PURE__ */ jsx(AgTh, { children: "Avg Wait" }),
+              /* @__PURE__ */ jsx(AgTh, { children: "Load" }),
+              /* @__PURE__ */ jsx(AgTh, { children: "SLA%" }),
+              /* @__PURE__ */ jsx(AgTh, { children: "C/hr" })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: queues.length > 0 ? queues.map((q) => {
+              const loadColor = q.loadPct > 50 ? C.red : q.loadPct > 25 ? C.amber : C.green;
+              const slaColor = q.slaPct >= 95 ? C.green : q.slaPct >= 85 ? C.amber : C.red;
+              const isWaitingHigh = q.waitingCalls > WAITING_THRESHOLD;
+              return /* @__PURE__ */ jsxs(Box2, { component: "tr", sx: isWaitingHigh ? { animation: `${rowBlink} 1s ease infinite` } : q.slaPct < 90 ? { background: "rgba(204,42,42,.04)" } : {}, children: [
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QName, { children: q.queueName }) }),
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: C.blue, children: q.totalAgents }) }),
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: C.amber, children: q.activeAgents }) }),
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: isWaitingHigh ? C.red : q.waitingCalls > 0 ? C.red : C.green, children: q.waitingCalls }) }),
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: C.green, children: q.avgWaitFormatted }) }),
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "5px" }, children: [
+                  /* @__PURE__ */ jsx(QBar, { children: /* @__PURE__ */ jsx(QBarFill, { w: q.loadPct, barColor: loadColor }) }),
+                  /* @__PURE__ */ jsxs(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: C.t3 }, children: [
+                    q.loadPct,
+                    "%"
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsxs(QNum, { numColor: slaColor, children: [
+                  q.slaPct,
+                  "%"
+                ] }) }),
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: C.blue, children: q.callsPerHour }) })
+              ] }, q.queueId);
+            }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(AgTd, { colSpan: 8, children: /* @__PURE__ */ jsx(NoDataBox, { children: "No data available" }) }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(Box2, { sx: { borderTop: `1px solid ${C.b1}` }, children: [
+            /* @__PURE__ */ jsxs(SbHeader, { children: [
+              /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "7px" }, children: [
+                /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M1 8h2l2-5 2 9 2-7 2 5 1-2h3", stroke: C.blue, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }),
+                /* @__PURE__ */ jsx(SbTitle, { children: "Queue Pulse" })
+              ] }),
+              /* @__PURE__ */ jsx(Badge, { bg: C.greenLt, color: C.green, border: C.greenBd, children: "Live" })
+            ] }),
+            /* @__PURE__ */ jsx(Box2, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", borderBottom: `1px solid ${C.b1}` }, children: [
+              { label: "In Queue", value: (_o = queuePulse == null ? void 0 : queuePulse.runningInQueue) != null ? _o : 0, color: C.amber, bg: C.amberLt },
+              { label: "Ready", value: (_p = queuePulse == null ? void 0 : queuePulse.readyAgents) != null ? _p : 0, color: C.green, bg: C.greenLt },
+              { label: "Avg Wait", value: (_q = queuePulse == null ? void 0 : queuePulse.avgWaitFormatted) != null ? _q : "--:--", color: C.blue, bg: C.blueLt }
+            ].map((s) => /* @__PURE__ */ jsxs(Box2, { sx: { p: "12px", borderRight: `1px solid ${C.b1}`, "&:last-child": { borderRight: "none" }, background: s.bg }, children: [
+              /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 20, fontWeight: 800, color: s.color, lineHeight: 1 }, children: s.value }),
+              /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 8, letterSpacing: 0.8, textTransform: "uppercase", color: s.color, mt: "4px", fontWeight: 600, opacity: 0.75 }, children: s.label })
+            ] }, s.label)) })
+          ] }),
+          /* @__PURE__ */ jsxs(Box2, { children: [
+            /* @__PURE__ */ jsxs(SbHeader, { children: [
+              /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "7px" }, children: [
+                /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M8 1.5a5 5 0 0 1 5 5v2.5l1 2H2l1-2V6.5a5 5 0 0 1 5-5z", stroke: alerts.length > 0 ? C.amber : C.t3, strokeWidth: "1.4", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M6.5 13a1.5 1.5 0 0 0 3 0", stroke: alerts.length > 0 ? C.amber : C.t3, strokeWidth: "1.4", strokeLinecap: "round" })
+                ] }),
+                /* @__PURE__ */ jsx(SbTitle, { children: "Live Alerts" })
+              ] }),
+              /* @__PURE__ */ jsx(Badge, { bg: alerts.length > 0 ? C.amberLt : C.bg2, color: alerts.length > 0 ? C.amber : C.t3, border: alerts.length > 0 ? C.amberBd : C.b2, children: alerts.length })
+            ] }),
+            /* @__PURE__ */ jsx(Box2, { sx: {
+              overflowY: "auto",
+              maxHeight: 220,
+              "&::-webkit-scrollbar": { width: 3 },
+              "&::-webkit-scrollbar-track": { background: C.bg2, borderRadius: 2 },
+              "&::-webkit-scrollbar-thumb": { background: C.t4, borderRadius: 2, "&:hover": { background: C.t3 } }
+            }, children: alerts.length > 0 ? alerts.map((a, i) => {
+              var _a2, _b2, _c2;
+              const sk = ((_a2 = a.severity) == null ? void 0 : _a2.toLowerCase()) === "critical" ? "red" : ((_b2 = a.severity) == null ? void 0 : _b2.toLowerCase()) === "warning" ? "amber" : "blue";
+              const ALERT_COLORS = {
+                red: { bg: C.redLt, color: C.red },
+                amber: { bg: C.amberLt, color: C.amber },
+                blue: { bg: C.blueLt, color: C.blue }
+              };
+              const ac = (_c2 = ALERT_COLORS[sk]) != null ? _c2 : ALERT_COLORS.blue;
+              return /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", gap: "10px", px: "12px", py: "9px", borderBottom: `1px solid ${C.b1}`, background: i % 2 === 0 ? "transparent" : C.bg2 }, children: [
+                /* @__PURE__ */ jsx(Box2, { sx: { width: 8, height: 8, borderRadius: "50%", background: ac.color, flexShrink: 0, mt: "3px" } }),
+                /* @__PURE__ */ jsxs(Box2, { sx: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 11, fontWeight: 600, color: C.t1, mb: "2px" }, children: a.alertTitle }),
+                  /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 9, color: C.t3, lineHeight: 1.4 }, children: a.alertMessage })
+                ] }),
+                /* @__PURE__ */ jsxs(Box2, { sx: { flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
+                  /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 7, fontWeight: 700, px: "5px", py: "1px", borderRadius: "3px", background: ac.bg, color: ac.color, textTransform: "uppercase", letterSpacing: 0.5 }, children: a.severity }),
+                  /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: (() => {
+                    try {
+                      const [h, m] = a.alertTime.split(":");
+                      const hr = parseInt(h, 10);
+                      return `${hr % 12 || 12}:${m} ${hr >= 12 ? "PM" : "AM"}`;
+                    } catch (e) {
+                      return a.alertTime;
+                    }
+                  })() })
+                ] })
+              ] }, i);
+            }) : /* @__PURE__ */ jsx(NoDataBox, { children: "No active alerts" }) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Footer, { children: [
+      /* @__PURE__ */ jsx(TickerLabel, { children: "AHS Live" }),
+      /* @__PURE__ */ jsx(TickerTrack, { children: /* @__PURE__ */ jsx(TickerInner, { children: [...tickerItems, ...tickerItems].map((t, i) => /* @__PURE__ */ jsx(TickerSpan, { isWarn: t.warn, isGood: t.good, dangerouslySetInnerHTML: { __html: t.text } }, i)) }) })
+    ] }),
+    showMonitorModal && selectedAgent && (() => {
+      const modeConfig = {
+        listen: { icon: "\u{1F442}", label: "Listen", desc: "Silent \u2013 agent unaware", accent: C.blue, accentLt: "#e3f2fd", accentText: "#1565c0" },
+        whisper: { icon: "\u{1F5E3}\uFE0F", label: "Whisper", desc: "Only agent hears you", accent: "#ef6c00", accentLt: "#fff3e0", accentText: "#e65100" },
+        barge: { icon: "\u{1F4E2}", label: "Barge", desc: "Both parties hear you", accent: "#c2185b", accentLt: "#fce4ec", accentText: "#880e4f" }
+      };
+      const m = modeConfig[selectedMode];
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Box2, { onClick: handleCloseMonitorModal, sx: { position: "fixed", inset: 0, zIndex: 1e3 } }),
+        /* @__PURE__ */ jsxs(MonitorCard, { children: [
+          /* @__PURE__ */ jsx(Box2, { sx: { height: 3, background: m.accent } }),
+          /* @__PURE__ */ jsxs(Box2, { sx: { p: "12px 14px" }, children: [
+            /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1.5 }, children: [
+              /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx(Box2, { sx: { width: 32, height: 32, borderRadius: "10px", background: m.accentLt, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: m.icon }),
+                /* @__PURE__ */ jsxs(Box2, { children: [
+                  /* @__PURE__ */ jsx(Box2, { sx: { fontWeight: 700, fontSize: 13, color: C.t1, lineHeight: 1.2 }, children: "Monitor Call" }),
+                  /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 10, color: C.t3 }, children: [
+                    selectedAgent.agentName,
+                    " \xB7 ext ",
+                    selectedAgent.extension || ""
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Box2, { component: "button", onClick: handleCloseMonitorModal, sx: { border: "none", background: "none", cursor: "pointer", color: C.t4, fontSize: 18, lineHeight: 1, p: 0, "&:hover": { color: C.t2 } }, children: "\xD7" })
+            ] }),
+            /* @__PURE__ */ jsx(Box2, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 0", background: C.bg2, borderRadius: "8px", p: "8px 10px", mb: 1.5 }, children: [
+              ["Customer", selectedAgent.activeCallerNumber || "\u2014"],
+              ["Duration", fmtDur(durations[selectedAgent.agentId] || 0)]
+            ].map(([label, value]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 10, color: C.t3, fontWeight: 500 }, children: label }),
+              /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 10, fontWeight: 600, color: C.t1, textAlign: "right" }, children: value })
+            ] }, label)) }),
+            /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", gap: "6px", mb: 1.5 }, children: ["listen", "whisper", "barge"].map((mode) => {
+              const mc = modeConfig[mode];
+              const active = selectedMode === mode;
+              return /* @__PURE__ */ jsxs(Box2, { onClick: () => setSelectedMode(mode), sx: { flex: 1, textAlign: "center", py: "5px", borderRadius: "20px", fontSize: 9, fontWeight: 700, letterSpacing: 0.4, cursor: "pointer", textTransform: "uppercase", transition: "all 0.15s", background: active ? mc.accent : C.bg2, color: active ? "#fff" : C.t3, border: `1px solid ${active ? mc.accent : "transparent"}`, "&:hover": { background: active ? mc.accent : C.bg3 } }, children: [
+                mc.icon,
+                " ",
+                mc.label
+              ] }, mode);
+            }) }),
+            /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 10, color: m.accentText, background: m.accentLt, borderRadius: "6px", px: 1.25, py: 0.75, mb: 1.5, display: "flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 11 }, children: "\u2139\uFE0F" }),
+              " ",
+              m.desc,
+              " \xB7 Your dialer will ring to connect."
+            ] }),
+            monitoringError && /* @__PURE__ */ jsx(Box2, { sx: { mb: 1.5, px: 1.25, py: 0.75, background: C.redLt, borderRadius: "6px", color: C.red, fontSize: 11 }, children: monitoringError }),
+            /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", gap: "8px" }, children: [
+              /* @__PURE__ */ jsx(Box2, { component: "button", onClick: handleCloseMonitorModal, sx: { flex: 1, py: "7px", border: `1px solid ${C.b2}`, borderRadius: "8px", cursor: "pointer", fontSize: 11, fontWeight: 500, background: "transparent", color: C.t2, "&:hover": { background: C.bg2 } }, children: "Cancel" }),
+              /* @__PURE__ */ jsx(Box2, { component: "button", onClick: handleStartMonitoring, disabled: monitoringLoading, sx: { flex: 2, py: "7px", border: "none", borderRadius: "8px", cursor: monitoringLoading ? "not-allowed" : "pointer", fontSize: 11, fontWeight: 700, background: m.accent, color: "#fff", opacity: monitoringLoading ? 0.7 : 1, transition: "opacity 0.15s", "&:hover": { opacity: monitoringLoading ? 0.7 : 0.88 } }, children: monitoringLoading ? "Starting\u2026" : `\u25B6 Start ${m.label}` })
+            ] })
+          ] })
+        ] })
+      ] });
+    })(),
+    monitoringSession && (() => {
+      var _a2;
+      const sessionModeConfig = {
+        listen: { icon: "\u{1F442}", accent: C.blue, accentLt: "#e3f2fd", label: "Listen" },
+        whisper: { icon: "\u{1F5E3}\uFE0F", accent: "#ef6c00", accentLt: "#fff3e0", label: "Whisper" },
+        barge: { icon: "\u{1F4E2}", accent: "#c2185b", accentLt: "#fce4ec", label: "Barge" }
+      };
+      const sm = (_a2 = sessionModeConfig[monitoringSession.mode]) != null ? _a2 : sessionModeConfig.listen;
+      return /* @__PURE__ */ jsxs(Box2, { sx: { position: "fixed", bottom: 20, right: 20, width: 268, background: "#fff", borderRadius: "14px", boxShadow: "0 8px 28px rgba(13,30,53,0.16), 0 2px 6px rgba(13,30,53,0.08)", zIndex: 999, overflow: "hidden", animation: `${slideUp} 0.22s cubic-bezier(.22,.68,0,1.2)` }, children: [
+        /* @__PURE__ */ jsx(Box2, { sx: { height: 3, background: sm.accent } }),
+        /* @__PURE__ */ jsxs(Box2, { sx: { p: "10px 12px" }, children: [
+          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "8px", mb: 1 }, children: [
+            /* @__PURE__ */ jsx(Box2, { sx: { width: 8, height: 8, borderRadius: "50%", background: C.green, flexShrink: 0, animation: `${pulse} 1.6s ease infinite` } }),
+            /* @__PURE__ */ jsxs(Box2, { sx: { fontWeight: 700, fontSize: 11, color: C.t1, textTransform: "uppercase", letterSpacing: 0.6 }, children: [
+              sm.icon,
+              " ",
+              sm.label,
+              " Active"
+            ] }),
+            /* @__PURE__ */ jsx(Box2, { sx: { ml: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, color: sm.accent }, children: fmtDur(Math.floor((Date.now() - monitoringSession.startTime) / 1e3)) })
+          ] }),
+          /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 11, color: C.t2, mb: 1, pl: "16px" }, children: [
+            monitoringSession.agentName,
+            /* @__PURE__ */ jsx(Box2, { component: "span", sx: { color: C.t4, mx: 0.5 }, children: "\xB7" }),
+            "ext ",
+            monitoringSession.agentExt
+          ] }),
+          /* @__PURE__ */ jsx(Box2, { sx: { borderTop: `1px solid ${C.b1}`, mb: 1 } }),
+          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", gap: "5px" }, children: [
+            ["listen", "whisper", "barge"].filter((m) => m !== monitoringSession.mode).map((mode) => {
+              const mc = sessionModeConfig[mode];
+              return /* @__PURE__ */ jsxs(MonitorBtn, { variant: mode, onClick: () => handleChangeMode(mode), style: { flex: 1, justifyContent: "center", padding: "4px 0", fontSize: 9, borderRadius: 4 }, children: [
+                mc.icon,
+                " ",
+                mc.label
+              ] }, mode);
+            }),
+            /* @__PURE__ */ jsx(MonitorBtn, { variant: "stop", onClick: handleStopMonitoring, style: { flex: 1, justifyContent: "center", padding: "4px 0", fontSize: 9, borderRadius: 4 }, children: "\u23F9 Stop" })
+          ] })
+        ] })
+      ] });
+    })()
+  ] });
+}
+function LiveStatusPage(props) {
+  return /* @__PURE__ */ jsx(SDKProvider, { children: /* @__PURE__ */ jsx(LiveStatusPageInner, __spreadValues({}, props)) });
+}
+export {
+  LiveStatusPage as default
+};
+//# sourceMappingURL=liveStatus-IDZ7CPYK.mjs.map