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/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)}
         >
-            <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} />
-                </div>
-            </div>
+            {({ 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={() => { close(); onForceReady?.(); }} />
+                        </div>
+                    </div>
 
-            <div className="pt-1 pb-1.5">
-                <NavAccountCardMenuItem label="Sign out" icon={IconLogout} shortcut="⌥⇧Q" onClick={onSignOut} />
-            </div>
+                    <div className="pt-1 pb-1.5">
+                        <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,19 +94,21 @@ export const DispositionForm = ({ onSubmit, defaultDisposition }: DispositionFor
                 rows={3}
             />
 
-            <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',
-                    selected !== null
-                        ? 'cursor-pointer bg-brand-solid text-white hover:bg-brand-solid_hover'
-                        : 'cursor-not-allowed bg-disabled text-disabled',
-                )}
-            >
-                Save & Close Call
-            </button>
+            <div className="flex justify-end">
+                <button
+                    type="button"
+                    onClick={handleSubmit}
+                    disabled={selected === null}
+                    className={cx(
+                        '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',
+                    )}
+                >
+                    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,114 +71,53 @@ export const LoginPage = () => {
     };
 
     return (
-        <div className="flex h-screen w-full overflow-hidden">
-            {/* Left panel — 60% — hidden on mobile */}
-            <div
-                className="relative hidden lg:flex flex-col justify-center items-center bg-brand-section overflow-hidden"
-                style={{ flex: '0 0 60%' }}
-            >
-                {/* Abstract corner gradients */}
-                <div
-                    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 className="min-h-screen bg-brand-section flex flex-col items-center justify-center p-4">
+            {/* Login Card */}
+            <div className="w-full max-w-[420px] bg-primary rounded-xl shadow-xl p-8">
+                {/* Logo */}
+                <div className="flex flex-col items-center mb-8">
+                    <img src="/helix-logo.png" alt="Helix Engage" className="size-12 rounded-xl mb-3" />
+                    <h1 className="text-display-xs font-bold text-primary font-display">Sign in to Helix Engage</h1>
+                    <p className="text-sm text-tertiary mt-1">Global Hospital</p>
                 </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
+                {/* Google sign-in */}
+                <SocialButton
+                    social="google"
+                    size="lg"
+                    theme="gray"
+                    type="button"
+                    onClick={handleGoogleSignIn}
+                    className="w-full rounded-xl py-3 border-2 border-secondary font-semibold hover:bg-secondary transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
                 >
-                    {/* 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>
+                    Sign in with Google
+                </SocialButton>
 
-                    {/* Role is determined by platform — no selector needed */}
+                {/* Divider */}
+                <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>
 
-                    {/* Google sign-in */}
-                    <div className="mt-6">
-                        <SocialButton
-                            social="google"
-                            size="lg"
-                            theme="gray"
-                            type="button"
-                            onClick={handleGoogleSignIn}
-                            className="w-full rounded-xl py-3 border-2 border-secondary font-semibold hover:bg-secondary transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
-                        >
-                            Sign in with Google
-                        </SocialButton>
-                    </div>
+                {/* Form */}
+                <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>
+                    )}
 
-                    {/* Divider */}
-                    <div className="mt-6 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>
+                    <Input
+                        label="Email"
+                        type="email"
+                        placeholder="you@globalhospital.com"
+                        value={email}
+                        onChange={(value) => setEmail(value)}
+                        size="md"
+                    />
 
-                    {/* Email input */}
-                    <div className="mt-6">
-                        <Input
-                            label="Email"
-                            type="email"
-                            placeholder="sanjay@globalhospital.com"
-                            value={email}
-                            onChange={(value) => setEmail(value)}
-                            size="md"
-                        />
-                    </div>
-
-                    {/* Password input with eye toggle */}
-                    <div className="mt-4 relative">
+                    <div className="relative">
                         <Input
                             label="Password"
                             type={showPassword ? 'text' : 'password'}
@@ -213,8 +136,7 @@ export const LoginPage = () => {
                         </button>
                     </div>
 
-                    {/* Remember me + Forgot password */}
-                    <div className="mt-3 flex items-center justify-between">
+                    <div className="flex items-center justify-between">
                         <Checkbox
                             label="Remember me"
                             size="sm"
@@ -230,27 +152,20 @@ 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"
-                            color="primary"
-                            isLoading={isLoading}
-                            className="w-full rounded-xl py-3 font-semibold active:scale-[0.98] transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
-                        >
-                            Sign in
-                        </Button>
-                    </div>
+                    <Button
+                        type="submit"
+                        size="lg"
+                        color="primary"
+                        isLoading={isLoading}
+                        className="w-full rounded-xl py-3 font-semibold active:scale-[0.98] transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
+                    >
+                        Sign in
+                    </Button>
                 </form>
             </div>
+
+            {/* Footer */}
+            <p className="mt-6 text-xs text-primary_on-brand opacity-60">Powered by FortyTwo</p>
         </div>
     );
 };