feat: Phase 2 — missed call queue, login redesign, button fix

- Missed call queue with FIFO auto-assignment, dedup, SLA tracking
- Status sub-tabs (Pending/Attempted/Completed/Invalid) in worklist
- missedCallId passed through disposition flow for callback tracking
- Login page redesigned: centered white card on blue background
- Disposition button changed to content-width
- NavAccountCard popover close fix on menu item click

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

docs/superpowers/specs/2026-03-22-phase2-missed-call-queue-login-redesign.md

@@ -0,0 +1,242 @@
+# Phase 2: Missed Call Queue + Login Redesign + Button Fix
+
+**Date**: 2026-03-22
+**PRD Reference**: US 7 (Missed Call Queue), Login Page Redesign, Button Width Fix
+**Branch**: `dev`
+
+---
+
+## 1. Missed Call Queue (US 7)
+
+### 1.1 Data Model
+
+The existing `Call` entity on the Fortytwo platform is extended with 4 custom fields (already added via admin portal):
+
+| GraphQL Field Name | DB Column | Type | Purpose |
+|---|---|---|---|
+| `callbackstatus` | `callbackstatus` | SELECT | Lifecycle: `PENDING_CALLBACK`, `CALLBACK_ATTEMPTED`, `CALLBACK_COMPLETED`, `INVALID`, `WRONG_NUMBER` |
+| `callsourcenumber` | `callsourcenumber` | TEXT | Which DID/branch the patient called |
+| `missedcallcount` | `missedcallcount` | NUMBER | Dedup counter — same number calling multiple times before callback |
+| `callbackattemptedat` | `callbackattemptedat` | DATE_TIME | Timestamp of first callback attempt |
+
+**Important**: Custom fields use **all-lowercase** GraphQL names (not camelCase). Verified via introspection and mutation test on staging.
+
+Existing fields used:
+- `callStatus: MISSED` — identifies missed calls
+- `agentName` — tracks which agent is assigned
+- `disposition` — records callback outcome
+- `callerNumber` — caller's phone (PHONES type, accessed as `callerNumber { primaryPhoneNumber }`)
+- `startedAt` — when the call was missed
+- `leadId` — linked lead (if matched)
+
+### 1.2 Sidecar: Missed Queue Service
+
+Extend the existing `src/worklist/` module (already handles missed call data and is registered in `app.module.ts`).
+
+**New files**:
+- `src/worklist/missed-queue.service.ts` — Queue logic (ingestion, dedup, assignment)
+
+**Modified files**:
+- `src/worklist/worklist.controller.ts` — Add missed queue endpoints
+- `src/worklist/worklist.module.ts` — Register MissedQueueService
+
+**Auth model**:
+- `GET /api/missed-queue` and `PATCH /api/missed-queue/:id/status` — use agent's forwarded auth token (same as existing worklist endpoints)
+- Ingestion timer and auto-assignment — use server API key (`PLATFORM_API_KEY`) since these run without a user request
+
+#### Endpoints
+
+| Method | Path | Purpose |
+|--------|------|---------|
+| `GET` | `/api/missed-queue` | Returns missed calls for current agent, grouped by `callbackstatus` |
+| `POST` | `/api/missed-queue/ingest` | Polls Ozonetel `abandonCalls`, deduplicates, writes to platform |
+| `PATCH` | `/api/missed-queue/:id/status` | Updates `callbackstatus` on a Call record |
+| `POST` | `/api/missed-queue/assign` | Assigns oldest unassigned PENDING_CALLBACK call to an agent |
+
+#### Ingestion Flow (runs every 30s via `setInterval` on service init)
+
+1. Call `OzonetelAgentService.getAbandonCalls()` with `fromTime`/`toTime` limited to the **last 5 minutes** (the method already supports these parameters). This prevents re-processing the entire day's abandon calls on service restart.
+2. Normalize caller phone numbers to `+91XXXXXXXXXX` format before any query or write (Ozonetel may return numbers in varying formats like `009919876543210` or `9876543210`).
+3. For each abandoned call:
+   - Extract `callerID` (phone number, normalized) and `did` (source number)
+   - Query platform: `calls(filter: { callerNumber: { primaryPhoneNumber: { eq: "<normalized_number>" } }, callbackstatus: { eq: PENDING_CALLBACK } })`
+   - **Match found** → `updateCall`: increment `missedcallcount`, update `startedAt` to latest timestamp
+   - **No match** → `createCall`:
+     ```graphql
+     mutation { createCall(data: {
+       callStatus: MISSED,
+       direction: INBOUND,
+       callerNumber: { primaryPhoneNumber: "<normalized_number>", primaryPhoneCallingCode: "+91" },
+       callsourcenumber: "<DID>",
+       callbackstatus: PENDING_CALLBACK,
+       missedcallcount: 1,
+       startedAt: "<timestamp>"
+     }) { id } }
+     ```
+4. Track ingested Ozonetel `monitorUCID` values in a Set to avoid re-processing within the same poll cycle
+
+#### Auto-Assignment (triggered on two events)
+
+Assignment fires when an agent becomes available via either path:
+
+1. **Disposition submission** (`POST /api/ozonetel/dispose`): After an agent completes a call and submits disposition, they become Ready. This is the primary trigger — most "agent available" transitions happen here.
+2. **Manual state change** (`POST /api/ozonetel/agent-state`): When an agent manually toggles to Ready via AgentStatusToggle.
+
+In both cases, call `MissedQueueService.assignNext(agentName)`:
+1. Query platform: oldest Call with `callbackstatus: PENDING_CALLBACK` and `agentName` is null/empty, ordered by `startedAt: AscNullsLast`
+2. If found → `updateCall` setting `agentName` to the available agent
+3. Use optimistic concurrency: if the update fails (another agent claimed it first), retry with the next oldest call
+4. Return assigned call to frontend (so it can surface at top of worklist)
+
+**Note on race conditions**: Since this is a single-instance sidecar, a simple in-memory mutex around the assignment query+update is sufficient to prevent two simultaneous Ready events from claiming the same call.
+
+#### Status Transitions
+
+| Trigger | From Status | To Status | Additional Updates |
+|---------|------------|-----------|-------------------|
+| Agent clicks call-back | `PENDING_CALLBACK` | `CALLBACK_ATTEMPTED` | Set `callbackattemptedat` |
+| Disposition: APPOINTMENT_BOOKED, INFO_PROVIDED, FOLLOW_UP_SCHEDULED, CALLBACK_REQUESTED | `CALLBACK_ATTEMPTED` | `CALLBACK_COMPLETED` | — |
+| Disposition: NO_ANSWER (after max retries) | `CALLBACK_ATTEMPTED` | `CALLBACK_ATTEMPTED` | Stays attempted, agent can retry |
+| Disposition: WRONG_NUMBER | `CALLBACK_ATTEMPTED` | `WRONG_NUMBER` | — |
+| Agent marks invalid | Any | `INVALID` | — |
+
+### 1.3 Sidecar: Worklist Update
+
+Update `WorklistService.getMissedCalls()` to include the new fields in the query:
+
+```graphql
+calls(first: 20, filter: {
+  agentName: { eq: "<agent>" },
+  callStatus: { eq: MISSED },
+  callbackstatus: { in: [PENDING_CALLBACK, CALLBACK_ATTEMPTED] }
+}, orderBy: [{ startedAt: AscNullsLast }]) {
+  edges { node {
+    id name createdAt
+    direction callStatus agentName
+    callerNumber { primaryPhoneNumber }
+    startedAt endedAt durationSec
+    disposition leadId
+    callbackstatus callsourcenumber missedcallcount callbackattemptedat
+  } }
+}
+```
+
+### 1.4 Frontend: Worklist Panel Changes
+
+**`src/hooks/use-worklist.ts`**:
+- Add `callbackstatus`, `callsourcenumber`, `missedcallcount`, `callbackattemptedat` to `MissedCall` type
+- Transform data from sidecar response (fields are already lowercase, minimal mapping needed)
+
+**`src/components/call-desk/worklist-panel.tsx`**:
+
+Replace the flat "Missed" tab with status sub-tabs:
+
+```
+[All] [Missed] [Callbacks] [Follow-ups] [Leads]
+         │
+         └── [Pending | Attempted | Completed | Invalid]
+```
+
+**Pending sub-tab** (default view):
+- FIFO ordered (oldest first, matching `AscNullsLast` sort)
+- Row content: caller phone, time since missed, missed call count badge (shown if >1), call source number, SLA color indicator
+- SLA thresholds: green (<15 min), orange (15–30 min), red (>30 min) — existing logic
+- Click-to-call → triggers callback, sidecar auto-transitions to `CALLBACK_ATTEMPTED`
+
+**Attempted sub-tab**:
+- Calls where agent tried calling back but no final resolution yet
+- Row content: caller phone, time since first attempt (`callbackattemptedat`), last disposition
+- Click-to-call for retry
+
+**Completed / Invalid sub-tabs**:
+- Read-only history of resolved missed calls
+- Shows: caller phone, final disposition, resolution timestamp
+
+**Assignment notification**: When auto-assigned, the missed call appears at **top of the worklist** with a highlighted "Missed Call" badge. A toast notification alerts the agent.
+
+### 1.5 Frontend: Post-Callback Status Update
+
+When an agent clicks call-back on a missed call:
+1. Frontend calls `PATCH /api/missed-queue/:id/status` with `{ status: 'CALLBACK_ATTEMPTED' }`
+2. Normal outbound call flow begins via SIP
+3. After call ends → disposition form → disposition submitted → sidecar maps disposition to final `callbackstatus` and updates platform
+
+This integrates with the existing `ActiveCallCard` disposition flow. The frontend must pass the missed Call record ID as `missedCallId` in the disposition request body so the sidecar can look up and update the `callbackstatus`. The dispose endpoint currently receives `{ ucid, disposition, callerPhone, direction, durationSec, leadId, notes }` — add `missedCallId?: string` as an optional field. When present, the sidecar updates the corresponding Call record's `callbackstatus` based on disposition mapping:
+
+- APPOINTMENT_BOOKED, INFO_PROVIDED, FOLLOW_UP_SCHEDULED, CALLBACK_REQUESTED → `CALLBACK_COMPLETED`
+- WRONG_NUMBER → `WRONG_NUMBER`
+- NO_ANSWER → stays `CALLBACK_ATTEMPTED` (agent can retry)
+
+---
+
+## 2. Login Page Redesign
+
+### Current State
+Split-panel layout: 60% blue left panel with marketing feature cards (Unified Lead Inbox, Campaign Intelligence, Speed to Contact) + 40% white right panel with login form.
+
+### Target State
+- **Full blue background** using `bg-brand-section` (existing brand blue token)
+- **Centered white card** (~420px max-width, `rounded-xl`, `shadow-xl`)
+- **Inside the card**:
+  - Helix Engage logo (prominent, centered)
+  - "Global Hospital" subtitle
+  - Google sign-in button with "OR CONTINUE WITH" divider
+  - Email input
+  - Password input with eye toggle
+  - Remember me checkbox + Forgot password link (same row)
+  - Sign in button (full-width within card — standard for login forms)
+- **Footer**: subtle "Powered by FortyTwo" text below the card
+- **No left panel, no marketing copy, no feature cards**
+- **Mobile**: card fills screen width with padding
+
+### File Changes
+- `src/pages/login.tsx` — restructure layout, remove left panel, center card
+
+---
+
+## 3. Button Width Fix
+
+### Problem
+Buttons in call desk inline forms (disposition, appointment, enquiry, transfer) use `w-full`, spanning the entire container width. This looks awkward in wide panels.
+
+### Fix
+Change buttons in these forms from `w-full` to `w-auto` with right-aligned layout (`flex justify-end gap-3`).
+
+### Scope
+Login page buttons stay `w-full` (narrow container, standard practice).
+
+### Affected Files
+- `src/components/call-desk/disposition-form.tsx` — Save Disposition button (confirmed `w-full`)
+- Other call desk form buttons (appointment, enquiry, transfer) — verify at implementation time, may already be content-width
+
+---
+
+## Technical Notes
+
+### GraphQL Field Naming
+Custom fields added via admin portal use **all-lowercase** GraphQL names:
+- `callbackstatus` (not `callbackStatus`)
+- `callsourcenumber` (not `callSourceNumber`)
+- `missedcallcount` (not `missedCallCount`)
+- `callbackattemptedat` (not `callbackAttemptedAt`)
+
+Managed (app-defined) fields retain camelCase (`callStatus`, `agentName`, etc.).
+
+### Verified on Staging
+- Queries: `calls(first: 2) { edges { node { callbackstatus callsourcenumber missedcallcount callbackattemptedat } } }` ✅
+- Mutations: `updateCall(id: "...", data: { callbackstatus: PENDING_CALLBACK, missedcallcount: 1 })` ✅
+- Staging DB: `fortytwo_staging`, workspace schema: `workspace_3x7sonctrktrxft4b0bwuc26x`, table: `_call`
+
+### Dedup Strategy
+Deduplication is by caller phone number against `PENDING_CALLBACK` records. Once a missed call transitions to any other status, a new missed call from the same number creates a fresh record. This prevents stale dedup.
+
+### Ozonetel Ingestion Idempotency
+Each poll queries only the last 5 minutes via `fromTime`/`toTime` parameters, preventing full-day reprocessing on restart. Within a poll cycle, processed `monitorUCID` values are tracked in a `Set<string>` to avoid duplicates. The platform dedup query (phone number + `PENDING_CALLBACK`) provides a second safety net.
+
+### Phone Number Normalization
+All phone numbers are normalized to `+91XXXXXXXXXX` format before writes and queries. Ozonetel may return numbers as `009919876543210`, `919876543210`, or `9876543210` — strip leading `0091`/`91`/`0` prefixes, then prepend `+91`.
+
+### Edge Cases
+- **Multiple DIDs**: If a caller dials branch A, then branch B before callback, the records merge (count incremented). The `callsourcenumber` updates to the latest branch. This is intentional — the callback is to the patient, not the branch.
+- **Agent goes offline after assignment**: Assigned missed calls stay with the agent. No automatic requeue. Supervisors can manually reassign in Phase 3.
+- **Ingestion poll interval**: 30s, configurable via `MISSED_QUEUE_POLL_INTERVAL_MS` env var.

src/components/application/app-navigation/base-components/nav-account-card.tsx

@@ -71,17 +71,21 @@ export const NavAccountMenu = ({
             ref={dialogRef}
             className={cx("w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden", className)}
         >
+            {({ close }) => (
+                <>
                     <div className="rounded-xl bg-primary ring-1 ring-secondary">
                         <div className="flex flex-col gap-0.5 py-1.5">
                             <NavAccountCardMenuItem label="View profile" icon={IconUser} shortcut="⌘K->P" />
                             <NavAccountCardMenuItem label="Account settings" icon={IconSettings} shortcut="⌘S" />
-                    <NavAccountCardMenuItem label="Force Ready" icon={IconForceReady} onClick={onForceReady} />
+                            <NavAccountCardMenuItem label="Force Ready" icon={IconForceReady} onClick={() => { close(); onForceReady?.(); }} />
                         </div>
                     </div>
 
                     <div className="pt-1 pb-1.5">
-                <NavAccountCardMenuItem label="Sign out" icon={IconLogout} shortcut="⌥⇧Q" onClick={onSignOut} />
+                        <NavAccountCardMenuItem label="Sign out" icon={IconLogout} shortcut="⌥⇧Q" onClick={() => { close(); onSignOut?.(); }} />
                     </div>
+                </>
+            )}
         </AriaDialog>
     );
 };

src/components/call-desk/active-call-card.tsx

@@ -26,6 +26,8 @@ type PostCallStage = 'disposition' | 'appointment' | 'follow-up' | 'done';
 interface ActiveCallCardProps {
     lead: Lead | null;
     callerPhone: string;
+    missedCallId?: string | null;
+    onCallComplete?: () => void;
 }
 
 const formatDuration = (seconds: number): string => {
@@ -34,7 +36,7 @@ const formatDuration = (seconds: number): string => {
     return `${m}:${s.toString().padStart(2, '0')}`;
 };
 
-export const ActiveCallCard = ({ lead, callerPhone }: ActiveCallCardProps) => {
+export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete }: ActiveCallCardProps) => {
     const { callState, callDuration, callUcid, isMuted, isOnHold, answer, reject, hangup, toggleMute, toggleHold } = useSip();
     const setCallState = useSetAtom(sipCallStateAtom);
     const setCallerNumber = useSetAtom(sipCallerNumberAtom);
@@ -68,6 +70,7 @@ export const ActiveCallCard = ({ lead, callerPhone }: ActiveCallCardProps) => {
                 durationSec: callDuration,
                 leadId: lead?.id ?? null,
                 notes,
+                missedCallId: missedCallId ?? undefined,
             }).catch((err) => console.warn('Disposition failed:', err));
         }
 
@@ -117,6 +120,7 @@ export const ActiveCallCard = ({ lead, callerPhone }: ActiveCallCardProps) => {
         setCallerNumber(null);
         setCallUcid(null);
         setOutboundPending(false);
+        onCallComplete?.();
     };
 
     // Outbound ringing — agent initiated the call

src/components/call-desk/disposition-form.tsx

@@ -94,12 +94,13 @@ export const DispositionForm = ({ onSubmit, defaultDisposition }: DispositionFor
                 rows={3}
             />
 
+            <div className="flex justify-end">
                 <button
                     type="button"
                     onClick={handleSubmit}
                     disabled={selected === null}
                     className={cx(
-                    'w-full rounded-xl py-3 text-sm font-semibold transition duration-100 ease-linear',
+                        'rounded-xl px-6 py-2.5 text-sm font-semibold transition duration-100 ease-linear',
                         selected !== null
                             ? 'cursor-pointer bg-brand-solid text-white hover:bg-brand-solid_hover'
                             : 'cursor-not-allowed bg-disabled text-disabled',
@@ -108,5 +109,6 @@ export const DispositionForm = ({ onSubmit, defaultDisposition }: DispositionFor
                     Save & Close Call
                 </button>
             </div>
+        </div>
     );
 };

src/components/call-desk/worklist-panel.tsx

@@ -45,8 +45,14 @@ type MissedCall = {
     startedAt: string | null;
     leadId: string | null;
     disposition: string | null;
+    callbackstatus: string | null;
+    callsourcenumber: string | null;
+    missedcallcount: number | null;
+    callbackattemptedat: string | null;
 };
 
+type MissedSubTab = 'pending' | 'attempted' | 'completed' | 'invalid';
+
 interface WorklistPanelProps {
     missedCalls: MissedCall[];
     followUps: WorklistFollowUp[];
@@ -136,25 +142,27 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
 
     for (const call of missedCalls) {
         const phone = call.callerNumber?.[0];
+        const countBadge = call.missedcallcount && call.missedcallcount > 1 ? ` (${call.missedcallcount}x)` : '';
+        const sourceSuffix = call.callsourcenumber ? ` • ${call.callsourcenumber}` : '';
         rows.push({
             id: `mc-${call.id}`,
             type: 'missed',
             priority: 'HIGH',
-            name: phone ? formatPhone(phone) : 'Unknown',
+            name: (phone ? formatPhone(phone) : 'Unknown') + countBadge,
             phone: phone ? formatPhone(phone) : '',
             phoneRaw: phone?.number ?? '',
             direction: call.callDirection === 'OUTBOUND' ? 'outbound' : 'inbound',
             typeLabel: 'Missed Call',
             reason: call.startedAt
-                ? `Missed at ${new Date(call.startedAt).toLocaleTimeString('en-IN', { hour: 'numeric', minute: '2-digit', hour12: true })}`
+                ? `Missed at ${new Date(call.startedAt).toLocaleTimeString('en-IN', { hour: 'numeric', minute: '2-digit', hour12: true })}${sourceSuffix}`
                 : 'Missed call',
             createdAt: call.createdAt,
-            taskState: 'PENDING',
+            taskState: call.callbackstatus === 'CALLBACK_ATTEMPTED' ? 'ATTEMPTED' : 'PENDING',
             leadId: call.leadId,
             originalLead: null,
-            lastContactedAt: call.startedAt ?? call.createdAt,
+            lastContactedAt: call.callbackattemptedat ?? call.startedAt ?? call.createdAt,
             contactAttempts: 0,
-            source: null,
+            source: call.callsourcenumber ?? null,
             lastDisposition: call.disposition ?? null,
         });
     }
@@ -227,15 +235,29 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
 export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelectLead, selectedLeadId }: WorklistPanelProps) => {
     const [tab, setTab] = useState<TabKey>('all');
     const [search, setSearch] = useState('');
+    const [missedSubTab, setMissedSubTab] = useState<MissedSubTab>('pending');
+
+    const missedByStatus = useMemo(() => ({
+        pending: missedCalls.filter(c => c.callbackstatus === 'PENDING_CALLBACK' || !c.callbackstatus),
+        attempted: missedCalls.filter(c => c.callbackstatus === 'CALLBACK_ATTEMPTED'),
+        completed: missedCalls.filter(c => c.callbackstatus === 'CALLBACK_COMPLETED' || c.callbackstatus === 'WRONG_NUMBER'),
+        invalid: missedCalls.filter(c => c.callbackstatus === 'INVALID'),
+    }), [missedCalls]);
 
     const allRows = useMemo(
         () => buildRows(missedCalls, followUps, leads),
         [missedCalls, followUps, leads],
     );
 
+    // Build rows from sub-tab filtered missed calls when on missed tab
+    const missedSubTabRows = useMemo(
+        () => buildRows(missedByStatus[missedSubTab], [], []),
+        [missedByStatus, missedSubTab],
+    );
+
     const filteredRows = useMemo(() => {
         let rows = allRows;
-        if (tab === 'missed') rows = rows.filter((r) => r.type === 'missed');
+        if (tab === 'missed') rows = missedSubTabRows;
         else if (tab === 'callbacks') rows = rows.filter((r) => r.type === 'callback');
         else if (tab === 'follow-ups') rows = rows.filter((r) => r.type === 'follow-up');
 
@@ -318,6 +340,31 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
                 </div>
             </div>
 
+            {/* Missed call status sub-tabs */}
+            {tab === 'missed' && (
+                <div className="flex gap-1 px-5 py-2 border-b border-secondary">
+                    {(['pending', 'attempted', 'completed', 'invalid'] as MissedSubTab[]).map(sub => (
+                        <button
+                            key={sub}
+                            onClick={() => { setMissedSubTab(sub); setPage(1); }}
+                            className={cx(
+                                'px-3 py-1 text-xs font-medium rounded-md capitalize transition duration-100 ease-linear',
+                                missedSubTab === sub
+                                    ? 'bg-brand-50 text-brand-700 border border-brand-200'
+                                    : 'text-tertiary hover:text-secondary hover:bg-secondary',
+                            )}
+                        >
+                            {sub}
+                            {sub === 'pending' && missedByStatus.pending.length > 0 && (
+                                <span className="ml-1.5 bg-error-50 text-error-700 text-xs px-1.5 py-0.5 rounded-full">
+                                    {missedByStatus.pending.length}
+                                </span>
+                            )}
+                        </button>
+                    ))}
+                </div>
+            )}
+
             {filteredRows.length === 0 ? (
                 <div className="flex items-center justify-center py-12">
                     <p className="text-sm text-quaternary">

src/hooks/use-worklist.ts

@@ -15,6 +15,10 @@ type MissedCall = {
     disposition: string | null;
     callNotes: string | null;
     leadId: string | null;
+    callbackstatus: string | null;
+    callsourcenumber: string | null;
+    missedcallcount: number | null;
+    callbackattemptedat: string | null;
 };
 
 type WorklistFollowUp = {

src/pages/call-desk.tsx

@@ -21,6 +21,7 @@ export const CallDeskPage = () => {
     const { missedCalls, followUps, marketingLeads, totalPending, loading } = useWorklist();
     const [selectedLead, setSelectedLead] = useState<WorklistLead | null>(null);
     const [contextOpen, setContextOpen] = useState(true);
+    const [activeMissedCallId, setActiveMissedCallId] = useState<string | null>(null);
 
     const isInCall = callState === 'ringing-in' || callState === 'ringing-out' || callState === 'active' || callState === 'ended' || callState === 'failed';
 
@@ -62,7 +63,7 @@ export const CallDeskPage = () => {
                     {/* Active call */}
                     {isInCall && (
                         <div className="p-5">
-                            <ActiveCallCard lead={activeLeadFull} callerPhone={callerNumber ?? ''} />
+                            <ActiveCallCard lead={activeLeadFull} callerPhone={callerNumber ?? ''} missedCallId={activeMissedCallId} onCallComplete={() => setActiveMissedCallId(null)} />
                         </div>
                     )}
 

src/pages/login.tsx

@@ -8,22 +8,6 @@ import { SocialButton } from '@/components/base/buttons/social-button';
 import { Checkbox } from '@/components/base/checkbox/checkbox';
 import { Input } from '@/components/base/input/input';
 
-const features = [
-    {
-        title: 'Unified Lead Inbox',
-        description: 'All channels in one workspace',
-    },
-    {
-        title: 'Campaign Intelligence',
-        description: 'Real-time performance tracking',
-    },
-    {
-        title: 'Speed to Contact',
-        description: 'Automated assignment and outreach',
-    },
-];
-
-
 export const LoginPage = () => {
     const { loginWithUser } = useAuth();
     const navigate = useNavigate();
@@ -87,81 +71,17 @@ export const LoginPage = () => {
     };
 
     return (
-        <div className="flex h-screen w-full overflow-hidden">
+        <div className="min-h-screen bg-brand-section flex flex-col items-center justify-center p-4">
-            {/* Left panel — 60% — hidden on mobile */}
+            {/* Login Card */}
-            <div
+            <div className="w-full max-w-[420px] bg-primary rounded-xl shadow-xl p-8">
-                className="relative hidden lg:flex flex-col justify-center items-center bg-brand-section overflow-hidden"
+                {/* Logo */}
-                style={{ flex: '0 0 60%' }}
+                <div className="flex flex-col items-center mb-8">
-            >
+                    <img src="/helix-logo.png" alt="Helix Engage" className="size-12 rounded-xl mb-3" />
-                {/* Abstract corner gradients */}
+                    <h1 className="text-display-xs font-bold text-primary font-display">Sign in to Helix Engage</h1>
-                <div
+                    <p className="text-sm text-tertiary mt-1">Global Hospital</p>
-                    className="pointer-events-none absolute -top-24 -left-24 size-[400px] rounded-full"
-                    style={{
-                        background:
-                            'radial-gradient(circle, rgba(var(--color-brand-600-rgb, 99,102,241), 0.2) 0%, transparent 70%)',
-                        filter: 'blur(200px)',
-                    }}
-                    aria-hidden="true"
-                />
-                <div
-                    className="pointer-events-none absolute -bottom-24 -right-24 size-[400px] rounded-full"
-                    style={{
-                        background:
-                            'radial-gradient(circle, rgba(var(--color-blue-light-600-rgb, 56,189,248), 0.2) 0%, transparent 70%)',
-                        filter: 'blur(200px)',
-                    }}
-                    aria-hidden="true"
-                />
-
-                {/* Content */}
-                <div className="relative z-10 flex flex-col gap-10 w-full max-w-[560px] px-12">
-                    {/* Logo lockup */}
-                    <div className="flex items-center gap-3">
-                        <img src="/helix-logo.png" alt="Helix Engage" className="size-10 rounded-xl shrink-0" />
-                        <span className="text-white font-bold text-xl font-display tracking-tight">Helix Engage</span>
                 </div>
 
-                    {/* Headline */}
-                    <div className="flex flex-col gap-4">
-                        <h1 className="text-display-md font-bold text-white tracking-tight font-display leading-tight">
-                            Smarter lead management for healthcare teams.
-                        </h1>
-                        <p className="text-lg text-white/70">
-                            Unified visibility into leads, campaigns, and team performance. Built for Global Hospital.
-                        </p>
-                    </div>
-
-                    {/* Feature cards */}
-                    <div className="flex flex-col gap-3">
-                        {features.map((feature) => (
-                            <div
-                                key={feature.title}
-                                className="flex flex-col gap-1 rounded-2xl p-4 backdrop-blur-sm"
-                                style={{ background: 'rgba(255,255,255,0.05)' }}
-                            >
-                                <span className="text-sm font-semibold text-white">{feature.title}</span>
-                                <span className="text-sm" style={{ color: 'rgba(255,255,255,0.6)' }}>{feature.description}</span>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-
-            {/* Right panel — 40% on desktop, full width on mobile */}
-            <div className="flex flex-1 flex-col justify-center items-center bg-primary px-6 py-12">
-                <form
-                    onSubmit={handleSubmit}
-                    className="flex flex-col w-full max-w-[448px]"
-                    noValidate
-                >
-                    {/* Heading */}
-                    <h2 className="text-display-xs font-bold text-primary font-display">Sign in to Helix Engage</h2>
-                    <p className="mt-1 text-sm text-tertiary">Global Hospital</p>
-
-                    {/* Role is determined by platform — no selector needed */}
-
                 {/* Google sign-in */}
-                    <div className="mt-6">
                 <SocialButton
                     social="google"
                     size="lg"
@@ -172,29 +92,32 @@ export const LoginPage = () => {
                 >
                     Sign in with Google
                 </SocialButton>
-                    </div>
 
                 {/* Divider */}
-                    <div className="mt-6 flex items-center gap-3">
+                <div className="mt-5 mb-5 flex items-center gap-3">
                     <div className="flex-1 h-px bg-secondary" />
                     <span className="text-xs font-semibold text-quaternary tracking-wider uppercase">or continue with</span>
                     <div className="flex-1 h-px bg-secondary" />
                 </div>
 
-                    {/* Email input */}
+                {/* Form */}
-                    <div className="mt-6">
+                <form onSubmit={handleSubmit} className="flex flex-col gap-4" noValidate>
+                    {error && (
+                        <div className="rounded-lg bg-error-secondary p-3 text-sm text-error-primary">
+                            {error}
+                        </div>
+                    )}
+
                     <Input
                         label="Email"
                         type="email"
-                            placeholder="sanjay@globalhospital.com"
+                        placeholder="you@globalhospital.com"
                         value={email}
                         onChange={(value) => setEmail(value)}
                         size="md"
                     />
-                    </div>
 
-                    {/* Password input with eye toggle */}
+                    <div className="relative">
-                    <div className="mt-4 relative">
                         <Input
                             label="Password"
                             type={showPassword ? 'text' : 'password'}
@@ -213,8 +136,7 @@ export const LoginPage = () => {
                         </button>
                     </div>
 
-                    {/* Remember me + Forgot password */}
+                    <div className="flex items-center justify-between">
-                    <div className="mt-3 flex items-center justify-between">
                         <Checkbox
                             label="Remember me"
                             size="sm"
@@ -230,15 +152,6 @@ export const LoginPage = () => {
                         </button>
                     </div>
 
-                    {/* Error message */}
-                    {error && (
-                        <div className="mt-4 rounded-lg bg-error-primary p-3 text-sm text-error-primary">
-                            {error}
-                        </div>
-                    )}
-
-                    {/* Sign in button */}
-                    <div className="mt-6">
                     <Button
                         type="submit"
                         size="lg"
@@ -248,9 +161,11 @@ export const LoginPage = () => {
                     >
                         Sign in
                     </Button>
-                    </div>
                 </form>
             </div>
+
+            {/* Footer */}
+            <p className="mt-6 text-xs text-primary_on-brand opacity-60">Powered by FortyTwo</p>
         </div>
     );
 };