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/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>
     );
 };