ahs-cti 0.0.11 → 0.0.13

package/dist/{liveStatus-PRDEL7CK.mjs → liveStatus-HFFNXGEY.mjs}

@@ -10,19 +10,19 @@ var require = function (id) {
 
 import {
   useCallMonitoring
-} from "./chunk-3PNP6G5P.mjs";
+} from "./chunk-RKH7ICVQ.mjs";
 import {
   SDKPermissionGuard
-} from "./chunk-TCYBXDAP.mjs";
+} from "./chunk-RPGIS6VI.mjs";
 import {
   SDKProvider,
   useToast
-} from "./chunk-M7FJYZF6.mjs";
+} from "./chunk-BZDLXMEG.mjs";
 import {
   END_POINT,
   SDK_PERMISSIONS,
   axios_default
-} from "./chunk-KSVNZKRD.mjs";
+} from "./chunk-A3UIDKO2.mjs";
 import {
   Box_default,
   CircularProgress_default,
@@ -30,7 +30,7 @@ import {
   __spreadValues,
   keyframes,
   styled_default
-} from "./chunk-ERSNXW5X.mjs";
+} from "./chunk-ZMO5SOQ4.mjs";
 
 // call-control-sdk/lib/pages/liveStatus/index.tsx
 import React, { useCallback as useCallback2, useState as useState2, useEffect as useEffect2 } from "react";
@@ -1085,4 +1085,4 @@ function LiveStatusPage(props) {
 export {
   LiveStatusPage as default
 };
-//# sourceMappingURL=liveStatus-PRDEL7CK.mjs.map
+//# sourceMappingURL=liveStatus-HFFNXGEY.mjs.map

package/dist/{loginReport-47QNACQU.mjs → loginReport-N6C37XY2.mjs}

@@ -10,43 +10,43 @@ var require = function (id) {
 
 import {
   Download_default
-} from "./chunk-635IIVZE.mjs";
+} from "./chunk-YNU5BQBL.mjs";
 import {
   ReportFilterBar,
   SearchBar,
   headCellSx,
   require_isoWeek
-} from "./chunk-SUS5RUCA.mjs";
+} from "./chunk-SYOIXQFQ.mjs";
 import {
   SDKPermissionGuard
-} from "./chunk-TCYBXDAP.mjs";
+} from "./chunk-RPGIS6VI.mjs";
 import {
   Close_default
-} from "./chunk-VII5JNA6.mjs";
+} from "./chunk-H5FOGKNG.mjs";
 import {
   PageHeader
-} from "./chunk-Y4PAUTZ4.mjs";
+} from "./chunk-VZXMSMLL.mjs";
 import {
   AppButton
-} from "./chunk-ZSRD3ZXF.mjs";
+} from "./chunk-GU67CHVR.mjs";
 import {
   AdapterDayjs,
   DateTimePicker,
   LocalizationProvider,
   require_dayjs_min
-} from "./chunk-GTI2ZVQX.mjs";
+} from "./chunk-JLTFPMGH.mjs";
 import {
   Refresh_default
-} from "./chunk-HAOFUADN.mjs";
+} from "./chunk-3W5XAE5U.mjs";
 import {
   SDKProvider
-} from "./chunk-M7FJYZF6.mjs";
+} from "./chunk-BZDLXMEG.mjs";
 import {
   END_POINT,
   SDK_PERMISSIONS,
   axios_default,
   deepFindArray
-} from "./chunk-KSVNZKRD.mjs";
+} from "./chunk-A3UIDKO2.mjs";
 import {
   Alert_default,
   Box_default,
@@ -70,7 +70,7 @@ import {
   Typography_default,
   __toESM,
   createSvgIcon
-} from "./chunk-ERSNXW5X.mjs";
+} from "./chunk-ZMO5SOQ4.mjs";
 
 // call-control-sdk/lib/pages/loginReport/index.tsx
 import { useCallback as useCallback2, useEffect, useMemo, useRef, useState as useState2 } from "react";
@@ -1009,4 +1009,4 @@ var loginReport_default = LoginReport;
 export {
   loginReport_default as default
 };
-//# sourceMappingURL=loginReport-47QNACQU.mjs.map
+//# sourceMappingURL=loginReport-N6C37XY2.mjs.map

package/dist/{managementDashboard-SZFYULKA.mjs → managementDashboard-PDXSO6BB.mjs}

@@ -11,8 +11,8 @@ var require = function (id) {
 import {
   ReportFilterBar,
   headCellSx
-} from "./chunk-SUS5RUCA.mjs";
-import "./chunk-VII5JNA6.mjs";
+} from "./chunk-SYOIXQFQ.mjs";
+import "./chunk-H5FOGKNG.mjs";
 import {
   Bar,
   CartesianGrid,
@@ -22,42 +22,39 @@ import {
   Tooltip,
   XAxis,
   YAxis
-} from "./chunk-45MLTWV7.mjs";
+} from "./chunk-SG26PWKV.mjs";
 import {
   FileDownload_default
-} from "./chunk-H22TUCN3.mjs";
+} from "./chunk-U6GXXCCQ.mjs";
 import {
   PageHeader
-} from "./chunk-Y4PAUTZ4.mjs";
+} from "./chunk-VZXMSMLL.mjs";
 import {
   AppButton
-} from "./chunk-ZSRD3ZXF.mjs";
+} from "./chunk-GU67CHVR.mjs";
 import {
   AdapterDayjs,
   LocalizationProvider,
   require_dayjs_min
-} from "./chunk-GTI2ZVQX.mjs";
+} from "./chunk-JLTFPMGH.mjs";
 import {
   Refresh_default,
   Search_default
-} from "./chunk-HAOFUADN.mjs";
+} from "./chunk-3W5XAE5U.mjs";
 import {
   SDKProvider
-} from "./chunk-M7FJYZF6.mjs";
+} from "./chunk-BZDLXMEG.mjs";
 import {
   END_POINT,
   axios_default
-} from "./chunk-KSVNZKRD.mjs";
+} from "./chunk-A3UIDKO2.mjs";
 import {
   Alert_default,
   Box_default,
   Chip_default,
   CircularProgress_default,
-  FormControlLabel_default,
   InputAdornment_default,
   Paper_default,
-  RadioGroup_default,
-  Radio_default,
   Stack_default,
   TableBody_default,
   TableCell_default,
@@ -69,13 +66,26 @@ import {
   Typography_default,
   __spreadProps,
   __spreadValues,
-  __toESM
-} from "./chunk-ERSNXW5X.mjs";
+  __toESM,
+  createSvgIcon
+} from "./chunk-ZMO5SOQ4.mjs";
 
 // call-control-sdk/lib/pages/managementDashboard/index.tsx
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 var import_dayjs = __toESM(require_dayjs_min());
 
+// node_modules/@mui/icons-material/PhoneCallback.mjs
+import { jsx as _jsx } from "react/jsx-runtime";
+var PhoneCallback_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
+  d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02zm13.54-7.1-.71-.7L13 9.29V5h-1v6h6v-1h-4.15z"
+}), "PhoneCallback");
+
+// node_modules/@mui/icons-material/PhoneForwarded.mjs
+import { jsx as _jsx2 } from "react/jsx-runtime";
+var PhoneForwarded_default = createSvgIcon(/* @__PURE__ */ _jsx2("path", {
+  d: "m18 11 5-5-5-5v3h-4v4h4zm2 4.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1"
+}), "PhoneForwarded");
+
 // call-control-sdk/lib/pages/managementDashboard/useManagementDashboard.ts
 function buildQs(params) {
   const qs = new URLSearchParams();
@@ -95,32 +105,33 @@ async function getManagementDashboard(params) {
 // call-control-sdk/lib/pages/managementDashboard/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var C = {
-  navy: "#1a3a6b",
-  blue: "#2b6cb0",
-  green: "#276749",
-  amber: "#c47c00",
-  red: "#c53030",
-  teal: "#0b7a8f",
+  navy: "#14505b",
+  blue: "#1A5F6C",
+  green: "#00A550",
+  amber: "#C47C00",
+  red: "#F05A22",
+  teal: "#1A5F6C",
   surface: "#fff",
-  s2: "#f7f9fc",
-  s3: "#eef2f7",
-  b1: "rgba(20,50,100,.07)",
-  b2: "rgba(20,50,100,.13)",
-  t1: "#2d3748",
-  t2: "#4a5568",
-  t3: "#718096",
-  blt: "#e8f0fc",
+  s2: "#f5f9fa",
+  s3: "#e7f1f2",
+  b1: "rgba(26,95,108,.08)",
+  b2: "rgba(26,95,108,.16)",
+  t1: "#1a2e33",
+  t2: "#3d5a60",
+  t3: "#6b8a90",
+  blt: "#e3f1f3",
   glt: "#e4f6ef",
   alt: "#fdf3e0",
-  rlt: "#fde8e8",
-  tlt: "#e3f4f7"
+  rlt: "#fdeae3",
+  tlt: "#e3f1f3"
 };
 var headSx = __spreadProps(__spreadValues({}, headCellSx), { py: 1, px: 1.5 });
 var cellSx = { fontSize: 12, py: 0.8, px: 1.5, borderBottom: `1px solid ${C.b1}` };
 var monoSx = { fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700 };
 var labelSx = { fontSize: 11, fontWeight: 700, letterSpacing: 0.7, textTransform: "uppercase", color: C.t2 };
 var cardPaper = { background: C.surface, border: `1px solid #dce3ef`, borderRadius: "6px", overflow: "hidden", boxShadow: "0 1px 4px rgba(0,0,0,.09)" };
-var cardHeader = { px: 1.5, py: 1, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" };
+var cardHeader = { px: 1.5, py: 1, background: C.s2, borderBottom: `1px solid ${C.b1}`, display: "flex", alignItems: "center", justifyContent: "center" };
+var numIconSx = { fontSize: 28, color: C.blue };
 var EMPTY = {
   inbound: { total: 0, answered: 0, unanswered: 0, answered_pct: 0, unanswered_pct: 0 },
   outbound: { total: 0, answered: 0, unanswered: 0, answered_pct: 0, unanswered_pct: 0 },
@@ -133,19 +144,23 @@ var EMPTY = {
   hourly_chart: [],
   repeated_calls: []
 };
-function DirectionCard({ title, data }) {
+function DirectionCard({ title, data, icon }) {
   return /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
     /* @__PURE__ */ jsx(Box_default, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: title }) }),
     /* @__PURE__ */ jsxs(Box_default, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 32, fontWeight: 800, color: C.navy, lineHeight: 1, mb: 1.2 }, children: data.total.toLocaleString() }),
-      /* @__PURE__ */ jsx(Box_default, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, borderTop: `2px solid ${C.s3}`, pt: 1 }, children: [
-        { label: "ANSWERED", value: data.answered, pct: data.answered_pct, color: C.blue },
-        { label: "UNANSWERED", value: data.unanswered, pct: data.unanswered_pct, color: C.t3 }
-      ].map(({ label, value, pct, color }) => /* @__PURE__ */ jsxs(Box_default, { children: [
+      /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1, mb: 1.2 }, children: [
+        icon,
+        /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 32, fontWeight: 800, color: C.navy, lineHeight: 1 }, children: data.total.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsx(Box_default, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: `2px solid ${C.s3}`, pt: 1 }, children: [
+        { label: "ANSWERED", value: data.answered, pct: data.answered_pct },
+        { label: "UNANSWERED", value: data.unanswered, pct: data.unanswered_pct }
+      ].map(({ label, value, pct }, idx) => /* @__PURE__ */ jsxs(Box_default, { sx: __spreadValues({ textAlign: "center" }, idx === 0 && { borderRight: `1px solid ${C.b1}` }), children: [
         /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 10, fontWeight: 700, letterSpacing: 0.5, color: C.t3, mb: 0.3 }, children: label }),
-        /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "baseline", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 18, fontWeight: 700, color }, children: value.toLocaleString() }),
-          /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: [
+        /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "baseline", justifyContent: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 15, fontWeight: 700, color: C.blue }, children: value.toLocaleString() }),
+          /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: "|" }),
+          /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 12, fontWeight: 600, color: C.blue }, children: [
             pct.toFixed(1),
             "%"
           ] })
@@ -155,70 +170,77 @@ function DirectionCard({ title, data }) {
   ] });
 }
 function QueueCallsCard({ data }) {
+  const maxCount = data.reduce((m, q) => Math.max(m, q.call_count), 0) || 1;
   return /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
     /* @__PURE__ */ jsx(Box_default, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Queue Wise Calls" }) }),
     /* @__PURE__ */ jsxs(Box_default, { sx: { p: 1.5 }, children: [
       data.length === 0 && /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, color: C.t3, textAlign: "center", py: 2 }, children: "No data" }),
-      data.map((q, i) => /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", py: 0.6, borderBottom: `1px solid #f0f0f0`, "&:last-child": { borderBottom: "none" } }, children: [
-        /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 600, color: C.t2 }, children: q.queue_name }),
-        /* @__PURE__ */ jsx(Box_default, { sx: { background: i === 0 ? "#3182ce" : "#90cdf4", color: i === 0 ? "#fff" : "#1a365d", borderRadius: "4px", px: 1.2, py: 0.3, minWidth: 44, textAlign: "center", fontSize: 14, fontWeight: 700 }, children: q.call_count })
-      ] }, q.queue_name))
+      data.map((q, i) => {
+        const pct = Math.max(6, q.call_count / maxCount * 100);
+        return /* @__PURE__ */ jsxs(Box_default, { sx: { mb: 0.7, "&:last-child": { mb: 0 } }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.3 }, children: [
+            /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 12, fontWeight: 600, color: C.t2 }, children: q.queue_name }),
+            /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 13, fontWeight: 700, color: C.blue }, children: q.call_count })
+          ] }),
+          /* @__PURE__ */ jsx(Box_default, { sx: { height: 6, background: C.s3, borderRadius: 3, overflow: "hidden" }, children: /* @__PURE__ */ jsx(Box_default, { sx: { height: "100%", width: `${pct}%`, background: i === 0 ? C.blue : "#7fb3bd", borderRadius: 3 } }) })
+        ] }, q.queue_name);
+      })
     ] })
   ] });
 }
-function AbandonedCard({ data }) {
-  return /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
-    /* @__PURE__ */ jsx(Box_default, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Abandoned Patients" }) }),
-    /* @__PURE__ */ jsxs(Box_default, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C.navy, lineHeight: 1, mb: 1 }, children: data.total.toLocaleString() }),
-      [
-        { label: "Called Back Patients", value: data.called_back, pct: data.called_back_pct },
-        { label: "To be Called Patients", value: data.to_call, pct: data.to_call_pct }
-      ].map(({ label, value, pct }) => /* @__PURE__ */ jsxs(Box_default, { sx: { mb: 0.4 }, children: [
-        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3, display: "inline" }, children: [
-          label,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 13, fontWeight: 700, color: C.blue, display: "inline" }, children: [
-          value,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, fontWeight: 700, color: "#48bb78", display: "inline" }, children: [
-          pct.toFixed(1),
+function AbandonedCallbackCard({ data }) {
+  const numCellSx = { p: 1, textAlign: "center" };
+  const subCellSx = { p: 1, textAlign: "center", borderTop: `1px solid ${C.b1}` };
+  const subLabelSx = { fontSize: 10, fontWeight: 600, color: C.t3, mb: 0.3, lineHeight: 1.2 };
+  const subRowSx = { display: "flex", alignItems: "baseline", justifyContent: "center", gap: 0.5 };
+  return /* @__PURE__ */ jsx(Paper_default, { sx: cardPaper, children: /* @__PURE__ */ jsxs(Box_default, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr" }, children: [
+    /* @__PURE__ */ jsx(Box_default, { sx: __spreadProps(__spreadValues({}, cardHeader), { borderRight: `1px solid ${C.b1}` }), children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Abandoned Patients" }) }),
+    /* @__PURE__ */ jsx(Box_default, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Avg Callback Duration" }) }),
+    /* @__PURE__ */ jsx(Box_default, { sx: __spreadProps(__spreadValues({}, numCellSx), { borderRight: `1px solid ${C.b1}` }), children: /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C.navy, lineHeight: 1 }, children: data.total.toLocaleString() }) }),
+    /* @__PURE__ */ jsx(Box_default, { sx: numCellSx, children: /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 24, fontWeight: 700, color: C.navy, letterSpacing: 1 }, children: data.avg_callback_duration }) }),
+    /* @__PURE__ */ jsxs(Box_default, { sx: __spreadProps(__spreadValues({}, subCellSx), { borderRight: `1px solid ${C.b1}` }), children: [
+      /* @__PURE__ */ jsx(Typography_default, { sx: subLabelSx, children: "Called Back Patients" }),
+      /* @__PURE__ */ jsxs(Box_default, { sx: subRowSx, children: [
+        /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 13, fontWeight: 700, color: C.blue }, children: data.called_back }),
+        /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: "|" }),
+        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 12, fontWeight: 600, color: C.blue }, children: [
+          data.called_back_pct.toFixed(1),
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box_default, { sx: subCellSx, children: [
+      /* @__PURE__ */ jsx(Typography_default, { sx: subLabelSx, children: "To be Called Patients" }),
+      /* @__PURE__ */ jsxs(Box_default, { sx: subRowSx, children: [
+        /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 13, fontWeight: 700, color: C.blue }, children: data.to_call }),
+        /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: "|" }),
+        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 12, fontWeight: 600, color: C.blue }, children: [
+          data.to_call_pct.toFixed(1),
           "%"
         ] })
-      ] }, label))
+      ] })
     ] })
-  ] });
-}
-function AvgCallbackCard({ duration }) {
-  return /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
-    /* @__PURE__ */ jsx(Box_default, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Avg Callback Duration" }) }),
-    /* @__PURE__ */ jsx(Box_default, { sx: { p: 1.5 }, children: /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 26, fontWeight: 700, color: C.navy, mt: 1, letterSpacing: 1 }, children: duration }) })
-  ] });
+  ] }) });
 }
 function IvrCard({ data }) {
   return /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
     /* @__PURE__ */ jsx(Box_default, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "IVR Patients" }) }),
     /* @__PURE__ */ jsxs(Box_default, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C.navy, lineHeight: 1, mb: 1 }, children: data.total.toLocaleString() }),
-      [
+      /* @__PURE__ */ jsx(Typography_default, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C.navy, lineHeight: 1, mb: 1, textAlign: "center" }, children: data.total.toLocaleString() }),
+      /* @__PURE__ */ jsx(Box_default, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: `2px solid ${C.s3}`, pt: 1 }, children: [
         { label: "Called Back", value: data.called_back, pct: data.called_back_pct },
         { label: "To Be Called", value: data.to_call, pct: data.to_call_pct }
-      ].map(({ label, value, pct }) => /* @__PURE__ */ jsxs(Box_default, { sx: { mb: 0.4 }, children: [
-        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, color: C.t3, display: "inline" }, children: [
-          label,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 13, fontWeight: 700, color: C.blue, display: "inline" }, children: [
-          value,
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 11, fontWeight: 700, color: "#48bb78", display: "inline" }, children: [
-          pct.toFixed(1),
-          "%"
+      ].map(({ label, value, pct }, idx) => /* @__PURE__ */ jsxs(Box_default, { sx: __spreadValues({ textAlign: "center", px: 0.5 }, idx === 0 && { borderRight: `1px solid ${C.b1}` }), children: [
+        /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 10, fontWeight: 600, color: C.t3, mb: 0.3, lineHeight: 1.2 }, children: label }),
+        /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "baseline", justifyContent: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 13, fontWeight: 700, color: C.blue }, children: value }),
+          /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: "|" }),
+          /* @__PURE__ */ jsxs(Typography_default, { sx: { fontSize: 12, fontWeight: 600, color: C.blue }, children: [
+            pct.toFixed(1),
+            "%"
+          ] })
         ] })
-      ] }, label))
+      ] }, label)) })
     ] })
   ] });
 }
@@ -237,7 +259,6 @@ function ManagementDashboardContent() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [repeatedSearch, setRepeatedSearch] = useState("");
-  const [chartDir, setChartDir] = useState("inbound");
   const chartRef = useRef(null);
   const fetchDashboard = useCallback(async () => {
     var _a, _b;
@@ -295,7 +316,7 @@ function ManagementDashboardContent() {
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.drawImage(img, 0, 0);
       const a = document.createElement("a");
-      a.download = `hourly_chart_${chartDir}.png`;
+      a.download = `hourly_chart.png`;
       a.href = canvas.toDataURL("image/png");
       a.click();
     };
@@ -353,15 +374,14 @@ function ManagementDashboardContent() {
     !loading && /* @__PURE__ */ jsxs(Box_default, { sx: { px: { xs: 1, md: 2 }, py: 1.5 }, children: [
       /* @__PURE__ */ jsxs(Box_default, { sx: {
         display: "grid",
-        gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", md: "repeat(3, 1fr)", lg: "1.3fr 1.2fr 1.1fr 0.75fr 1.3fr 1.1fr" },
+        gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", md: "repeat(3, 1fr)", lg: "1.3fr 1.2fr 1.9fr 1.3fr 1.1fr" },
         gap: 1.2,
         mb: 1.2
       }, children: [
-        /* @__PURE__ */ jsx(DirectionCard, { title: "Inbound Calls", data: data.inbound }),
+        /* @__PURE__ */ jsx(DirectionCard, { title: "Inbound Calls", data: data.inbound, icon: /* @__PURE__ */ jsx(PhoneCallback_default, { sx: numIconSx }) }),
         /* @__PURE__ */ jsx(QueueCallsCard, { data: data.queue_calls }),
-        /* @__PURE__ */ jsx(AbandonedCard, { data: data.abandoned }),
-        /* @__PURE__ */ jsx(AvgCallbackCard, { duration: data.abandoned.avg_callback_duration }),
-        /* @__PURE__ */ jsx(DirectionCard, { title: "Outbound Calls", data: data.outbound }),
+        /* @__PURE__ */ jsx(AbandonedCallbackCard, { data: data.abandoned }),
+        /* @__PURE__ */ jsx(DirectionCard, { title: "Outbound Calls", data: data.outbound, icon: /* @__PURE__ */ jsx(PhoneForwarded_default, { sx: numIconSx }) }),
         /* @__PURE__ */ jsx(IvrCard, { data: data.ivr })
       ] }),
       /* @__PURE__ */ jsxs(Box_default, { sx: {
@@ -410,11 +430,11 @@ function ManagementDashboardContent() {
         ] }),
         /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
           /* @__PURE__ */ jsx(Box_default, { sx: cardHeader, children: /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Inbound Average Waiting" }) }),
-          /* @__PURE__ */ jsx(Box_default, { sx: { p: 1.5, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 1, mt: 0.5 }, children: [
+          /* @__PURE__ */ jsx(Box_default, { sx: { p: 1.5, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", mt: 0.5 }, children: [
             { label: "Waiting Time", value: data.waiting.avg_wait_time },
             { label: "Language Selection", value: data.waiting.avg_lang_selection },
             { label: "Queue Waiting", value: data.waiting.avg_queue_wait }
-          ].map(({ label, value }) => /* @__PURE__ */ jsxs(Box_default, { sx: { textAlign: "center" }, children: [
+          ].map(({ label, value }, idx) => /* @__PURE__ */ jsxs(Box_default, { sx: __spreadValues({ textAlign: "center", px: 0.5 }, idx < 2 && { borderRight: `1px solid ${C.b1}` }), children: [
             /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 10, fontWeight: 600, color: C.t3, mb: 0.5 }, children: label }),
             /* @__PURE__ */ jsx(Typography_default, { sx: __spreadProps(__spreadValues({}, monoSx), { fontSize: 18, color: C.blue }), children: value })
           ] }, label)) })
@@ -442,41 +462,26 @@ function ManagementDashboardContent() {
       ] }),
       /* @__PURE__ */ jsxs(Box_default, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gap: 1.2 }, children: [
         /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsxs(Box_default, { sx: __spreadProps(__spreadValues({}, cardHeader), { flexWrap: "wrap", gap: 1 }), children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: __spreadProps(__spreadValues({}, cardHeader), { flexWrap: "wrap", gap: 1, justifyContent: "space-between" }), children: [
             /* @__PURE__ */ jsxs(Box_default, { children: [
               /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Avg Hour Wise Inbound Calls vs Agents" }),
               /* @__PURE__ */ jsx(Stack_default, { direction: "row", spacing: 1.5, sx: { mt: 0.5 }, children: [
-                { color: "#f6a623", label: "Answered" },
-                { color: "#90a4c0", label: "Abandoned" },
-                { color: "#4a5568", label: "Agents" }
+                { color: "#F2B51D", label: "Answered" },
+                { color: "#9fc4cb", label: "Abandoned" },
+                { color: "#14505b", label: "Agents" }
               ].map(({ color, label }) => /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
                 /* @__PURE__ */ jsx(Box_default, { sx: { width: 12, height: 12, borderRadius: "2px", background: color } }),
                 /* @__PURE__ */ jsx(Typography_default, { sx: { fontSize: 11, color: C.t3 }, children: label })
               ] }, label)) })
             ] }),
-            /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.5 }, children: [
-              /* @__PURE__ */ jsxs(
-                RadioGroup_default,
-                {
-                  row: true,
-                  value: chartDir,
-                  onChange: (e) => setChartDir(e.target.value),
-                  sx: { "& .MuiFormControlLabel-root": { mr: 0.5 }, "& .MuiFormControlLabel-label": { fontSize: 12 } },
-                  children: [
-                    /* @__PURE__ */ jsx(FormControlLabel_default, { value: "inbound", control: /* @__PURE__ */ jsx(Radio_default, { size: "small" }), label: "Inbound" }),
-                    /* @__PURE__ */ jsx(FormControlLabel_default, { value: "outbound", control: /* @__PURE__ */ jsx(Radio_default, { size: "small" }), label: "Outbound" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Typography_default,
-                {
-                  onClick: downloadChart,
-                  sx: { fontSize: 11, color: "#3182ce", cursor: "pointer", border: "1px solid #bee3f8", borderRadius: "4px", px: 1, py: 0.3 },
-                  children: "\u2B07 DOWNLOAD"
-                }
-              )
-            ] })
+            /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.5 }, children: /* @__PURE__ */ jsx(
+              Typography_default,
+              {
+                onClick: downloadChart,
+                sx: { fontSize: 11, color: C.blue, cursor: "pointer", border: `1px solid ${C.b2}`, borderRadius: "4px", px: 1, py: 0.3 },
+                children: "\u2B07 DOWNLOAD"
+              }
+            ) })
           ] }),
           /* @__PURE__ */ jsx(Box_default, { ref: chartRef, sx: { p: 1.5, height: 260 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: hourlyData, margin: { top: 4, right: 30, left: -20, bottom: 0 }, barGap: 1, children: [
             /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: C.b2, vertical: false }),
@@ -487,16 +492,19 @@ function ManagementDashboardContent() {
               Tooltip,
               {
                 contentStyle: { fontSize: 11, borderRadius: 6, border: `1px solid ${C.b2}` },
-                formatter: (v, n) => [v, n.charAt(0).toUpperCase() + n.slice(1)]
+                formatter: (v, n) => {
+                  const s = String(n != null ? n : "");
+                  return [v, s.charAt(0).toUpperCase() + s.slice(1)];
+                }
               }
             ),
-            /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: "answered", fill: "#f6a623", radius: [2, 2, 0, 0], maxBarSize: 14 }),
-            /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: "abandoned", fill: "#90a4c0", radius: [2, 2, 0, 0], maxBarSize: 14 }),
-            /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: "agents", stroke: "#4a5568", strokeWidth: 1.5, dot: { r: 2, fill: "#4a5568" } })
+            /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: "answered", fill: "#F2B51D", radius: [2, 2, 0, 0], maxBarSize: 14 }),
+            /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: "abandoned", fill: "#9fc4cb", radius: [2, 2, 0, 0], maxBarSize: 14 }),
+            /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: "agents", stroke: "#14505b", strokeWidth: 1.5, dot: { r: 2, fill: "#14505b" } })
           ] }) }) })
         ] }),
         /* @__PURE__ */ jsxs(Paper_default, { sx: cardPaper, children: [
-          /* @__PURE__ */ jsxs(Box_default, { sx: cardHeader, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: __spreadProps(__spreadValues({}, cardHeader), { justifyContent: "space-between" }), children: [
             /* @__PURE__ */ jsx(Typography_default, { sx: labelSx, children: "Repeated Calls" }),
             /* @__PURE__ */ jsx(Chip_default, { label: data.repeated_calls.length, size: "small", sx: { background: C.rlt, color: C.red, fontWeight: 700, fontSize: 11 } })
           ] }),
@@ -543,4 +551,4 @@ var managementDashboard_default = ManagementDashboard;
 export {
   managementDashboard_default as default
 };
-//# sourceMappingURL=managementDashboard-SZFYULKA.mjs.map
+//# sourceMappingURL=managementDashboard-PDXSO6BB.mjs.map