feat: supervisor fixes — settings disabled cards, column toggle fix, hold SSE, campaign edit disabled

- SectionCard: added disabled prop (muted, non-clickable, no arrow)
- Settings hub: Clinics, Doctors, Team, Telephony, AI, Widget cards disabled
- Campaigns: edit button disabled
- Missed calls + Call recordings: column toggle blank page fixed (key-based
  Table remount forces clean React Aria collection on column change)
- Live monitor: replaced 5s polling with SSE stream for real-time active
  call updates (new/hold/unhold/disconnect reflected instantly)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/setup/section-card.tsx

@@ -17,6 +17,7 @@ type SectionCardProps = {
     href?: string;
     onClick?: () => void;
     status?: SectionStatus;
+    disabled?: boolean;
 };
 
 // Settings hub card. Each card represents one setup-able section (Branding,
@@ -30,26 +31,32 @@ export const SectionCard = ({
     href,
     onClick,
     status = 'unknown',
+    disabled = false,
 }: SectionCardProps) => {
     const className = cx(
-        'group block w-full text-left rounded-xl border border-secondary bg-primary p-5 shadow-xs transition hover:border-brand hover:shadow-md',
+        'group block w-full text-left rounded-xl border border-secondary p-5 shadow-xs transition',
+        disabled
+            ? 'cursor-not-allowed opacity-50 bg-disabled_subtle'
+            : 'bg-primary hover:border-brand hover:shadow-md',
     );
     const body = (
         <>
             <div className="flex items-start justify-between gap-4">
                 <div className="flex items-start gap-4">
                     <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-secondary">
-                        <FontAwesomeIcon icon={icon} className={cx('size-5', iconColor)} />
+                        <FontAwesomeIcon icon={icon} className={cx('size-5', disabled ? 'text-fg-disabled' : iconColor)} />
                     </div>
                     <div className="min-w-0">
-                        <h3 className="text-sm font-semibold text-primary">{title}</h3>
+                        <h3 className={cx('text-sm font-semibold', disabled ? 'text-disabled' : 'text-primary')}>{title}</h3>
                         <p className="mt-1 text-xs text-tertiary">{description}</p>
                     </div>
                 </div>
-                <FontAwesomeIcon
-                    icon={faArrowRight}
-                    className="size-4 shrink-0 text-quaternary transition group-hover:translate-x-0.5 group-hover:text-brand-primary"
-                />
+                {!disabled && (
+                    <FontAwesomeIcon
+                        icon={faArrowRight}
+                        className="size-4 shrink-0 text-quaternary transition group-hover:translate-x-0.5 group-hover:text-brand-primary"
+                    />
+                )}
             </div>
 
             {status !== 'unknown' && (
@@ -70,6 +77,13 @@ export const SectionCard = ({
         </>
     );
 
+    if (disabled) {
+        return (
+            <div className={className}>
+                {body}
+            </div>
+        );
+    }
     if (onClick) {
         return (
             <button type="button" onClick={onClick} className={className}>