@visns-studio/visns-components 6.25.0 → 6.26.0

package/src/components/styles/CallQueueDiagnostics.module.scss

@@ -0,0 +1,398 @@
+// ---------------------------------------------------------------------------
+// Call Pop Diagnostics (.cqdiag)
+// ---------------------------------------------------------------------------
+// The support panel behind Settings -> Call Queues -> Diagnostics
+// (components/callQueue/CallQueueDiagnostics.jsx). Sibling of
+// CallQueueSettings.module.scss and deliberately built from the same tokens,
+// pills and panel frame — it hangs off the bottom of that page and should read
+// as one more section of it, not a different product.
+//
+// Every brand value is a CSS custom property with a neutral fallback, because
+// this library has no sass config layer of its own.
+// ---------------------------------------------------------------------------
+
+$cqdiag-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+
+.cqdiag {
+    --cq-primary: var(--primary-color, #00386c);
+    --cq-secondary: var(--secondary-color, #404040);
+    --cq-tertiary: var(--tertiary-color, #fff);
+    --cq-paragraph: var(--paragraph-color, #2b2b2b);
+    --cq-background: var(--background-color, #fff);
+    --cq-br: var(--br, 5px);
+    --cq-btn-br: var(--btn-br, 5px);
+
+    // The same three verdict colours the pop and the settings table use, so
+    // "good", "look at this" and "broken" mean one thing across the feature.
+    --cq-ok: rgb(43, 145, 85);
+    --cq-warn: rgb(191, 138, 41);
+    --cq-bad: rgb(214, 100, 100);
+
+    width: 100%;
+    padding: 0.5rem 0 1rem;
+    color: var(--cq-paragraph);
+    font-size: 0.8rem;
+
+    .spin {
+        animation: spin 1s linear infinite;
+    }
+
+    .cqdiagTitle {
+        margin: 0 0 0.75rem;
+        color: var(--cq-primary);
+        font-size: 0.95rem;
+        font-weight: 700;
+    }
+
+    // --- verdict tones -----------------------------------------------------
+    // Applied to a value, a badge, a chip or a dot; each picks up whichever of
+    // colour/background it needs from the rules below.
+    .isOk {
+        color: var(--cq-ok);
+    }
+
+    .isWarn {
+        color: color-mix(in srgb, var(--cq-warn) 88%, #000);
+    }
+
+    .isBad {
+        color: color-mix(in srgb, var(--cq-bad) 78%, #000);
+    }
+
+    .isMuted {
+        color: color-mix(in srgb, var(--cq-paragraph) 55%, transparent);
+    }
+
+    // --- the three top panels ----------------------------------------------
+    // Auto-fit rather than a fixed three-up: inside the Admin card the panel is
+    // narrow, and a squeezed third column is worse than a second row.
+    .cqdiagColumns {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .cqdiagSection {
+        padding: 0.75rem 0.85rem;
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 14%, transparent);
+        border-radius: var(--cq-br);
+        background: var(--cq-background);
+    }
+
+    .cqdiagHeading {
+        display: flex;
+        gap: 0.4rem;
+        align-items: center;
+        margin: 0 0 0.55rem;
+        color: var(--cq-primary);
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+
+        svg {
+            flex: none;
+        }
+    }
+
+    .cqdiagCopy {
+        margin: 0 0 0.6rem;
+        color: color-mix(in srgb, var(--cq-paragraph) 65%, transparent);
+        font-size: 0.74rem;
+        line-height: 1.45;
+    }
+
+    // --- label / value rows ------------------------------------------------
+    // Two columns so the values line up down the panel; the value wraps rather
+    // than pushing the panel wider, because an auth error can be a sentence.
+    .cqdiagRow {
+        display: flex;
+        gap: 0.5rem;
+        align-items: baseline;
+        justify-content: space-between;
+        padding: 0.22rem 0;
+        border-bottom: 1px solid
+            color-mix(in srgb, var(--cq-secondary) 8%, transparent);
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+
+    .cqdiagLabel {
+        flex: none;
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+        font-size: 0.72rem;
+    }
+
+    .cqdiagValue {
+        display: inline-flex;
+        gap: 0.35rem;
+        align-items: center;
+        min-width: 0;
+        font-size: 0.74rem;
+        font-weight: 600;
+        text-align: right;
+        overflow-wrap: anywhere;
+    }
+
+    .cqdiagNone {
+        color: color-mix(in srgb, var(--cq-paragraph) 35%, transparent);
+        font-weight: 400;
+    }
+
+    // The socket light. Colour comes from the tone class beside it, so the dot
+    // and the word it sits next to can never disagree.
+    .cqdiagDot {
+        display: inline-block;
+        flex: none;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: currentColor;
+    }
+
+    // --- buttons -----------------------------------------------------------
+    .cqdiagActions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+        margin-top: 0.65rem;
+    }
+
+    .cqdiagButton {
+        display: inline-flex;
+        gap: 0.35rem;
+        align-items: center;
+        justify-content: center;
+        padding: 0.3rem 0.6rem;
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 25%, transparent);
+        border-radius: var(--cq-btn-br);
+        background: color-mix(in srgb, var(--cq-primary) 6%, transparent);
+        color: var(--cq-primary);
+        font-family: inherit;
+        font-size: 0.72rem;
+        font-weight: 700;
+        line-height: 1.4;
+        cursor: pointer;
+        transition:
+            background 0.15s ease,
+            border-color 0.15s ease;
+
+        svg {
+            flex: none;
+        }
+
+        &:hover:not(:disabled) {
+            background: color-mix(in srgb, var(--cq-primary) 12%, transparent);
+        }
+
+        &:focus-visible {
+            outline: 2px solid
+                color-mix(in srgb, var(--cq-primary) 45%, transparent);
+            outline-offset: 1px;
+        }
+
+        &:disabled {
+            border-color: color-mix(
+                in srgb,
+                var(--cq-secondary) 20%,
+                transparent
+            );
+            background: color-mix(in srgb, var(--cq-secondary) 7%, transparent);
+            color: color-mix(in srgb, var(--cq-paragraph) 40%, transparent);
+            cursor: default;
+        }
+    }
+
+    .cqdiagResult {
+        margin: 0.55rem 0 0;
+        font-size: 0.74rem;
+        font-weight: 600;
+        line-height: 1.45;
+    }
+
+    .cqdiagWarning {
+        display: flex;
+        gap: 0.5rem;
+        align-items: flex-start;
+        margin: 0 0 0.6rem;
+        padding: 0.45rem 0.6rem;
+        border: 1px solid color-mix(in srgb, var(--cq-bad) 35%, transparent);
+        border-radius: var(--cq-br);
+        background: color-mix(in srgb, var(--cq-bad) 8%, transparent);
+        color: color-mix(in srgb, var(--cq-bad) 67%, #000);
+        font-size: 0.72rem;
+        line-height: 1.45;
+
+        svg {
+            flex: none;
+            margin-top: 0.12rem;
+        }
+    }
+
+    // --- ledger bar + summary ----------------------------------------------
+    .cqdiagBar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+        justify-content: space-between;
+
+        .cqdiagHeading {
+            margin-bottom: 0;
+        }
+    }
+
+    .cqdiagBarActions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+    }
+
+    .cqdiagCheck {
+        display: inline-flex;
+        gap: 0.3rem;
+        align-items: center;
+        color: color-mix(in srgb, var(--cq-paragraph) 65%, transparent);
+        font-size: 0.72rem;
+        cursor: pointer;
+    }
+
+    .cqdiagSummary {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 0.25rem 1rem;
+        margin: 0.65rem 0;
+    }
+
+    .cqdiagSummaryRow {
+        display: flex;
+        gap: 0.5rem;
+        align-items: baseline;
+        justify-content: space-between;
+        padding: 0.2rem 0;
+    }
+
+    .cqdiagChips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        justify-content: flex-end;
+    }
+
+    .cqdiagChip,
+    .cqdiagBadge {
+        display: inline-block;
+        padding: 0.1rem 0.38rem;
+        border: 1px solid currentColor;
+        border-radius: 999px;
+        background: color-mix(in srgb, currentColor 8%, transparent);
+        font-size: 0.66rem;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+    }
+
+    // --- the ledger table --------------------------------------------------
+    // The panel is the scroll container, exactly as on the settings page: on a
+    // narrow viewport the table slides inside its frame rather than pushing the
+    // page body sideways.
+    .cqdiagPanel {
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 14%, transparent);
+        border-radius: var(--cq-br);
+        background: var(--cq-background);
+        overflow-x: auto;
+    }
+
+    .cqdiagState {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        padding: 1.1rem;
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+        font-size: 0.78rem;
+    }
+
+    .cqdiagTable {
+        width: 100%;
+        min-width: 900px;
+        border-collapse: collapse;
+        font-size: 0.74rem;
+
+        th,
+        td {
+            padding: 0.4rem 0.7rem;
+            text-align: left;
+            vertical-align: middle;
+            white-space: nowrap;
+        }
+
+        thead th {
+            border-bottom: 1px solid
+                color-mix(in srgb, var(--cq-primary) 18%, transparent);
+            background: #f0f0f0;
+            color: var(--cq-primary);
+            font-size: 0.64rem;
+            font-weight: 700;
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+        }
+
+        tbody tr {
+            border-bottom: 1px solid
+                color-mix(in srgb, var(--cq-secondary) 10%, transparent);
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &:hover {
+                background: color-mix(
+                    in srgb,
+                    var(--cq-primary) 3.5%,
+                    transparent
+                );
+            }
+        }
+
+        // Ids, numbers and timings all read as columns of digits.
+        tbody td:first-child,
+        tbody td:nth-child(5),
+        tbody td:nth-child(6),
+        tbody td:nth-child(8) {
+            font-family: $cqdiag-mono;
+            font-size: 0.7rem;
+            font-variant-numeric: tabular-nums;
+        }
+    }
+
+    .cqdiagNote {
+        margin: 0.7rem 0 0;
+        padding: 0.55rem 0.75rem;
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 18%, transparent);
+        border-radius: var(--cq-br);
+        background: color-mix(in srgb, var(--cq-primary) 5%, transparent);
+        color: color-mix(in srgb, var(--cq-paragraph) 80%, transparent);
+        font-size: 0.72rem;
+        line-height: 1.5;
+
+        strong {
+            color: var(--cq-primary);
+        }
+    }
+}
+
+// Same reason as the settings module: the CRM had `spin` globally in
+// main.scss, this library ships it beside the class that references it.
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/components/styles/CallQueuePop.module.scss

@@ -95,6 +95,12 @@
     border-left: 4px solid var(--cq-primary);
 }
 
+// Direct calls carry their badge colour down the spine too, so a glance at the
+// stack separates "the practice is ringing" from "Jane is ringing".
+.cqpopCardDirect {
+    border-left-color: var(--cq-answer);
+}
+
 .cqpopCardLeaving {
     animation: cqpop-out 0.22s cubic-bezier(0.33, 0, 0.68, 0) both;
 }
@@ -149,6 +155,13 @@
     white-space: nowrap;
 }
 
+// A direct call rang a person, not a queue. It gets the answer green rather
+// than the brand primary — the only two-colour distinction on the card, and it
+// is the one that says "this is somebody's own phone ringing out".
+.cqpopBadgeDirect {
+    background: var(--cq-answer);
+}
+
 // Pulsing "still ringing" indicator inside the badge.
 .cqpopDot {
     width: 7px;
@@ -203,6 +216,22 @@
     color: var(--cq-paragraph);
 }
 
+// "Ringing Jane Smith · transferred by Reception" — who a direct call is
+// actually ringing. Quiet: the caller is still the headline.
+.cqpopCallee {
+    font-size: 0.74rem;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--cq-paragraph) 70%, transparent);
+}
+
+// One ringing leg was declined, and the card is in its grace period. Muted on
+// purpose: the call may well still be ringing somewhere else.
+.cqpopMissed {
+    font-size: 0.68rem;
+    font-style: italic;
+    color: color-mix(in srgb, var(--cq-paragraph) 55%, transparent);
+}
+
 .cqpopClient {
     font-size: 0.78rem;
     color: var(--cq-paragraph);

package/src/components/styles/CallQueueSettings.module.scss

@@ -255,6 +255,68 @@ $cqsettings-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
         color: color-mix(in srgb, var(--cq-paragraph) 30%, transparent);
     }
 
+    // --- direct calls -------------------------------------------------------
+    // Calls that ring one staff member's own extension are not a Zoom call
+    // queue, so their row sits under its own heading rather than being read as
+    // a queue nobody recognises.
+    .cqsettingsSection {
+        td {
+            padding: 1rem 0.75rem 0.55rem;
+            border-top: 2px solid
+                color-mix(in srgb, var(--cq-primary) 20%, transparent);
+        }
+    }
+
+    .cqsettingsSectionTitle {
+        display: block;
+        color: var(--cq-primary);
+        font-size: 0.82rem;
+        font-weight: 700;
+    }
+
+    .cqsettingsSectionText {
+        display: block;
+        margin-top: 0.15rem;
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+        font-size: 0.72rem;
+        line-height: 1.45;
+    }
+
+    // Same callout language as the page-level info note, at row scale: the
+    // pickup code this row takes is a different kind of code from every other
+    // row's, and that has to be said where it is typed.
+    .cqsettingsSectionNote {
+        display: flex;
+        gap: 0.4rem;
+        align-items: flex-start;
+        // Wide enough to read, narrow enough not to stretch across a 940px
+        // table and lose the eye on the way back.
+        max-width: 78ch;
+        margin-top: 0.5rem;
+        padding: 0.45rem 0.6rem;
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 18%, transparent);
+        border-radius: var(--cq-br);
+        background-color: color-mix(in srgb, var(--cq-primary) 5%, transparent);
+        color: color-mix(in srgb, var(--cq-paragraph) 80%, transparent);
+        font-size: 0.72rem;
+        font-weight: 400;
+        line-height: 1.45;
+
+        svg {
+            flex: none;
+            margin-top: 0.1rem;
+            color: var(--cq-primary);
+        }
+    }
+
+    // "No call queues found" as a table row, for the case where Zoom returned
+    // nothing but the direct-calls row still has to be editable.
+    .cqsettingsEmptyCell {
+        padding: 1rem 0.75rem;
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+        font-size: 0.82rem;
+    }
+
     // --- pills -------------------------------------------------------------
     // One shape for both status columns: muted by default, tinted green only
     // when the answer is "yes, this is working".
@@ -448,6 +510,37 @@ $cqsettings-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
             cursor: default;
         }
     }
+
+    // --- diagnostics disclosure --------------------------------------------
+    // Folded away under the table: an admin who is not chasing a fault should
+    // see one quiet line, not a wall of socket state.
+    .cqsettingsDiagnostics {
+        margin-top: 1rem;
+    }
+
+    .cqsettingsDisclosure {
+        display: inline-flex;
+        gap: 0.3rem;
+        align-items: center;
+        padding: 0.3rem 0;
+        border: none;
+        background: none;
+        color: var(--cq-primary);
+        font-family: inherit;
+        font-size: 0.78rem;
+        font-weight: 700;
+        cursor: pointer;
+
+        svg {
+            flex: none;
+        }
+
+        &:focus-visible {
+            outline: 2px solid
+                color-mix(in srgb, var(--cq-primary) 45%, transparent);
+            outline-offset: 2px;
+        }
+    }
 }
 
 // The CRM had this globally in main.scss; the library ships it with the module

package/src/index.js

@@ -140,6 +140,12 @@ import {
 /** Call Queue Components */
 import CallQueuePop from './components/callQueue/CallQueuePop';
 import CallQueueSettings from './components/callQueue/CallQueueSettings';
+import CallQueueDiagnostics from './components/callQueue/CallQueueDiagnostics';
+import {
+    CALL_POP_STATUS_EVENT,
+    getCallPopStatus,
+    updateCallPopStatus,
+} from './components/callQueue/callPopStatus';
 
 // Vault — the staff password manager. VaultQuickSearch mounts through
 // Navigation's `renderers` slot; VaultManager is the page behind it.
@@ -355,8 +361,12 @@ export {
     buildEnv,
     BusinessCardOcr,
     Call,
+    CALL_POP_STATUS_EVENT,
+    CallQueueDiagnostics,
     CallQueuePop,
     CallQueueSettings,
+    getCallPopStatus,
+    updateCallPopStatus,
     cleanBase32,
     decodeFromBlob,
     decodeFromSource,