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>

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">