ahs-cti 0.0.12 → 0.0.13

package/dist-react/index.js

@@ -21419,19 +21419,23 @@ var managementDashboard_exports = {};
 __export(managementDashboard_exports, {
   default: () => managementDashboard_default
 });
-function DirectionCard({ title, data }) {
+function DirectionCard({ title, data, icon }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 32, fontWeight: 800, color: C4.navy, lineHeight: 1, mb: 1.2 }, children: data.total.toLocaleString() }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, borderTop: `2px solid ${C4.s3}`, pt: 1 }, children: [
-        { label: "ANSWERED", value: data.answered, pct: data.answered_pct, color: C4.blue },
-        { label: "UNANSWERED", value: data.unanswered, pct: data.unanswered_pct, color: C4.t3 }
-      ].map(({ label, value, pct, color }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1, mb: 1.2 }, children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 32, fontWeight: 800, color: C4.navy, lineHeight: 1 }, children: data.total.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: `2px solid ${C4.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__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: __spreadValues({ textAlign: "center" }, idx === 0 && { borderRight: `1px solid ${C4.b1}` }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 10, fontWeight: 700, letterSpacing: 0.5, color: C4.t3, mb: 0.3 }, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", alignItems: "baseline", gap: 0.5 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 18, fontWeight: 700, color }, children: value.toLocaleString() }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", alignItems: "baseline", justifyContent: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 15, fontWeight: 700, color: C4.blue }, children: value.toLocaleString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3 }, children: "|" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 12, fontWeight: 600, color: C4.blue }, children: [
             pct.toFixed(1),
             "%"
           ] })
@@ -21441,70 +21445,77 @@ function DirectionCard({ title, data }) {
   ] });
 }
 function QueueCallsCard({ data }) {
+  const maxCount = data.reduce((m, q) => Math.max(m, q.call_count), 0) || 1;
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Queue Wise Calls" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { p: 1.5 }, children: [
       data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 12, color: C4.t3, textAlign: "center", py: 2 }, children: "No data" }),
-      data.map((q, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", py: 0.6, borderBottom: `1px solid #f0f0f0`, "&:last-child": { borderBottom: "none" } }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 12, fontWeight: 600, color: C4.t2 }, children: q.queue_name }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { 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__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { mb: 0.7, "&:last-child": { mb: 0 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.3 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 12, fontWeight: 600, color: C4.t2 }, children: q.queue_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 13, fontWeight: 700, color: C4.blue }, children: q.call_count })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { height: 6, background: C4.s3, borderRadius: 3, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { height: "100%", width: `${pct}%`, background: i === 0 ? C4.blue : "#7fb3bd", borderRadius: 3 } }) })
+        ] }, q.queue_name);
+      })
     ] })
   ] });
 }
-function AbandonedCard({ data }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Abandoned Patients" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C4.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__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { mb: 0.4 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3, display: "inline" }, children: [
-          label,
-          " "
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 13, fontWeight: 700, color: C4.blue, display: "inline" }, children: [
-          value,
-          " "
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { 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 ${C4.b1}` };
+  const subLabelSx = { fontSize: 10, fontWeight: 600, color: C4.t3, mb: 0.3, lineHeight: 1.2 };
+  const subRowSx = { display: "flex", alignItems: "baseline", justifyContent: "center", gap: 0.5 };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Paper, { sx: cardPaper, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: __spreadProps(__spreadValues({}, cardHeader), { borderRight: `1px solid ${C4.b1}` }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Abandoned Patients" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Avg Callback Duration" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: __spreadProps(__spreadValues({}, numCellSx), { borderRight: `1px solid ${C4.b1}` }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C4.navy, lineHeight: 1 }, children: data.total.toLocaleString() }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: numCellSx, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 24, fontWeight: 700, color: C4.navy, letterSpacing: 1 }, children: data.avg_callback_duration }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: __spreadProps(__spreadValues({}, subCellSx), { borderRight: `1px solid ${C4.b1}` }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: subLabelSx, children: "Called Back Patients" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: subRowSx, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 13, fontWeight: 700, color: C4.blue }, children: data.called_back }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3 }, children: "|" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 12, fontWeight: 600, color: C4.blue }, children: [
+          data.called_back_pct.toFixed(1),
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: subCellSx, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: subLabelSx, children: "To be Called Patients" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: subRowSx, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 13, fontWeight: 700, color: C4.blue }, children: data.to_call }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3 }, children: "|" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 12, fontWeight: 600, color: C4.blue }, children: [
+          data.to_call_pct.toFixed(1),
           "%"
         ] })
-      ] }, label))
+      ] })
     ] })
-  ] });
-}
-function AvgCallbackCard({ duration }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Avg Callback Duration" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { p: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 26, fontWeight: 700, color: C4.navy, mt: 1, letterSpacing: 1 }, children: duration }) })
-  ] });
+  ] }) });
 }
 function IvrCard({ data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "IVR Patients" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { p: 1.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C4.navy, lineHeight: 1, mb: 1 }, children: data.total.toLocaleString() }),
-      [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontFamily: "'Barlow Condensed', sans-serif", fontSize: 30, fontWeight: 800, color: C4.navy, lineHeight: 1, mb: 1, textAlign: "center" }, children: data.total.toLocaleString() }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: `2px solid ${C4.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__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { mb: 0.4 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3, display: "inline" }, children: [
-          label,
-          " "
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 13, fontWeight: 700, color: C4.blue, display: "inline" }, children: [
-          value,
-          " "
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 11, fontWeight: 700, color: "#48bb78", display: "inline" }, children: [
-          pct.toFixed(1),
-          "%"
+      ].map(({ label, value, pct }, idx) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: __spreadValues({ textAlign: "center", px: 0.5 }, idx === 0 && { borderRight: `1px solid ${C4.b1}` }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 10, fontWeight: 600, color: C4.t3, mb: 0.3, lineHeight: 1.2 }, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", alignItems: "baseline", justifyContent: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 13, fontWeight: 700, color: C4.blue }, children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3 }, children: "|" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Typography, { sx: { fontSize: 12, fontWeight: 600, color: C4.blue }, children: [
+            pct.toFixed(1),
+            "%"
+          ] })
         ] })
-      ] }, label))
+      ] }, label)) })
     ] })
   ] });
 }
@@ -21523,7 +21534,6 @@ function ManagementDashboardContent() {
   const [loading, setLoading] = (0, import_react34.useState)(false);
   const [error, setError] = (0, import_react34.useState)("");
   const [repeatedSearch, setRepeatedSearch] = (0, import_react34.useState)("");
-  const [chartDir, setChartDir] = (0, import_react34.useState)("inbound");
   const chartRef = (0, import_react34.useRef)(null);
   const fetchDashboard = (0, import_react34.useCallback)(async () => {
     var _a2, _b;
@@ -21581,7 +21591,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();
     };
@@ -21639,15 +21649,14 @@ function ManagementDashboardContent() {
     !loading && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { px: { xs: 1, md: 2 }, py: 1.5 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { 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__ */ (0, import_jsx_runtime26.jsx)(DirectionCard, { title: "Inbound Calls", data: data.inbound }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DirectionCard, { title: "Inbound Calls", data: data.inbound, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_PhoneCallback.default, { sx: numIconSx }) }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(QueueCallsCard, { data: data.queue_calls }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AbandonedCard, { data: data.abandoned }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AvgCallbackCard, { duration: data.abandoned.avg_callback_duration }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DirectionCard, { title: "Outbound Calls", data: data.outbound }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AbandonedCallbackCard, { data: data.abandoned }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DirectionCard, { title: "Outbound Calls", data: data.outbound, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_PhoneForwarded.default, { sx: numIconSx }) }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IvrCard, { data: data.ivr })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: {
@@ -21696,11 +21705,11 @@ function ManagementDashboardContent() {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Inbound Average Waiting" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { p: 1.5, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 1, mt: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { 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__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { textAlign: "center" }, children: [
+          ].map(({ label, value }, idx) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: __spreadValues({ textAlign: "center", px: 0.5 }, idx < 2 && { borderRight: `1px solid ${C4.b1}` }), children: [
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 10, fontWeight: 600, color: C4.t3, mb: 0.5 }, children: label }),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: __spreadProps(__spreadValues({}, monoSx2), { fontSize: 18, color: C4.blue }), children: value })
           ] }, label)) })
@@ -21728,41 +21737,26 @@ function ManagementDashboardContent() {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gap: 1.2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: __spreadProps(__spreadValues({}, cardHeader), { flexWrap: "wrap", gap: 1 }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: __spreadProps(__spreadValues({}, cardHeader), { flexWrap: "wrap", gap: 1, justifyContent: "space-between" }), children: [
             /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Avg Hour Wise Inbound Calls vs Agents" }),
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Stack, { 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__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { width: 12, height: 12, borderRadius: "2px", background: color } }),
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: { fontSize: 11, color: C4.t3 }, children: label })
               ] }, label)) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.5 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-                import_material24.RadioGroup,
-                {
-                  row: true,
-                  value: chartDir,
-                  onChange: (e) => setChartDir(e.target.value),
-                  sx: { "& .MuiFormControlLabel-root": { mr: 0.5 }, "& .MuiFormControlLabel-label": { fontSize: 12 } },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.FormControlLabel, { value: "inbound", control: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Radio, { size: "small" }), label: "Inbound" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.FormControlLabel, { value: "outbound", control: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Radio, { size: "small" }), label: "Outbound" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                import_material24.Typography,
-                {
-                  onClick: downloadChart,
-                  sx: { fontSize: 11, color: "#3182ce", cursor: "pointer", border: "1px solid #bee3f8", borderRadius: "4px", px: 1, py: 0.3 },
-                  children: "\u2B07 DOWNLOAD"
-                }
-              )
-            ] })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_material24.Typography,
+              {
+                onClick: downloadChart,
+                sx: { fontSize: 11, color: C4.blue, cursor: "pointer", border: `1px solid ${C4.b2}`, borderRadius: "4px", px: 1, py: 0.3 },
+                children: "\u2B07 DOWNLOAD"
+              }
+            ) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Box, { ref: chartRef, sx: { p: 1.5, height: 260 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_recharts2.ComposedChart, { data: hourlyData, margin: { top: 4, right: 30, left: -20, bottom: 0 }, barGap: 1, children: [
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: C4.b2, vertical: false }),
@@ -21773,16 +21767,19 @@ function ManagementDashboardContent() {
               import_recharts2.Tooltip,
               {
                 contentStyle: { fontSize: 11, borderRadius: 6, border: `1px solid ${C4.b2}` },
-                formatter: (v, n) => [v, n.charAt(0).toUpperCase() + n.slice(1)]
+                formatter: (v, n) => {
+                  const s2 = String(n != null ? n : "");
+                  return [v, s2.charAt(0).toUpperCase() + s2.slice(1)];
+                }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.Bar, { yAxisId: "left", dataKey: "answered", fill: "#f6a623", radius: [2, 2, 0, 0], maxBarSize: 14 }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.Bar, { yAxisId: "left", dataKey: "abandoned", fill: "#90a4c0", radius: [2, 2, 0, 0], maxBarSize: 14 }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.Line, { yAxisId: "right", type: "monotone", dataKey: "agents", stroke: "#4a5568", strokeWidth: 1.5, dot: { r: 2, fill: "#4a5568" } })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.Bar, { yAxisId: "left", dataKey: "answered", fill: "#F2B51D", radius: [2, 2, 0, 0], maxBarSize: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.Bar, { yAxisId: "left", dataKey: "abandoned", fill: "#9fc4cb", radius: [2, 2, 0, 0], maxBarSize: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts2.Line, { yAxisId: "right", type: "monotone", dataKey: "agents", stroke: "#14505b", strokeWidth: 1.5, dot: { r: 2, fill: "#14505b" } })
           ] }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Paper, { sx: cardPaper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: cardHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material24.Box, { sx: __spreadProps(__spreadValues({}, cardHeader), { justifyContent: "space-between" }), children: [
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Typography, { sx: labelSx2, children: "Repeated Calls" }),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material24.Chip, { label: data.repeated_calls.length, size: "small", sx: { background: C4.rlt, color: C4.red, fontWeight: 700, fontSize: 11 } })
           ] }),
@@ -21824,7 +21821,7 @@ function ManagementDashboardContent() {
     ] })
   ] }) });
 }
-var import_react34, import_material24, import_dayjs7, import_LocalizationProvider6, import_AdapterDayjs6, import_recharts2, import_Search5, import_FileDownload4, import_Refresh7, import_jsx_runtime26, C4, headSx, cellSx, monoSx2, labelSx2, cardPaper, cardHeader, EMPTY, ManagementDashboard, managementDashboard_default;
+var import_react34, import_material24, import_dayjs7, import_LocalizationProvider6, import_AdapterDayjs6, import_recharts2, import_Search5, import_FileDownload4, import_Refresh7, import_PhoneCallback, import_PhoneForwarded, import_jsx_runtime26, C4, headSx, cellSx, monoSx2, labelSx2, cardPaper, cardHeader, numIconSx, EMPTY, ManagementDashboard, managementDashboard_default;
 var init_managementDashboard = __esm({
   "call-control-sdk/lib/pages/managementDashboard/index.tsx"() {
     "use strict";
@@ -21837,6 +21834,8 @@ var init_managementDashboard = __esm({
     import_Search5 = __toESM(require("@mui/icons-material/Search"));
     import_FileDownload4 = __toESM(require("@mui/icons-material/FileDownload"));
     import_Refresh7 = __toESM(require("@mui/icons-material/Refresh"));
+    import_PhoneCallback = __toESM(require("@mui/icons-material/PhoneCallback"));
+    import_PhoneForwarded = __toESM(require("@mui/icons-material/PhoneForwarded"));
     init_PageHeader();
     init_ReportFilterBar();
     init_AppButton();
@@ -21845,32 +21844,33 @@ var init_managementDashboard = __esm({
     init_useManagementDashboard();
     import_jsx_runtime26 = require("react/jsx-runtime");
     C4 = {
-      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"
     };
     headSx = __spreadProps(__spreadValues({}, headCellSx2), { py: 1, px: 1.5 });
     cellSx = { fontSize: 12, py: 0.8, px: 1.5, borderBottom: `1px solid ${C4.b1}` };
     monoSx2 = { fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700 };
     labelSx2 = { fontSize: 11, fontWeight: 700, letterSpacing: 0.7, textTransform: "uppercase", color: C4.t2 };
     cardPaper = { background: C4.surface, border: `1px solid #dce3ef`, borderRadius: "6px", overflow: "hidden", boxShadow: "0 1px 4px rgba(0,0,0,.09)" };
-    cardHeader = { px: 1.5, py: 1, background: C4.s2, borderBottom: `1px solid ${C4.b1}`, display: "flex", alignItems: "center", justifyContent: "space-between" };
+    cardHeader = { px: 1.5, py: 1, background: C4.s2, borderBottom: `1px solid ${C4.b1}`, display: "flex", alignItems: "center", justifyContent: "center" };
+    numIconSx = { fontSize: 28, color: C4.blue };
     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 },