feat: inline forms, transfer redesign, patient fixes, UI polish

- Appointment/enquiry forms reverted to inline rendering (not modals)
- Forms: flat scrollable section with pinned footer, no card wrapper
- Appointment form: DatePicker component, date prefilled, removed Returning Patient checkbox
- Enquiry form: removed disposition dropdown, lead status defaults to CONTACTED
- Transfer dialog: agent picker with live status, doctor list with department, select-then-connect flow
- Transfer: removed external number input, moved Cancel/Connect to pinned header row
- Button mutual exclusivity: Book Appt / Enquiry / Transfer close each other
- Patient name write-back: appointment + enquiry forms update patient fullName after save
- Caller cache invalidation: POST /api/caller/invalidate after name update
- Follow-up fix (#513): assignedAgent, patientId, date validation in createFollowUp
- Patients page: removed status filters + column, added pagination (15/page)
- Pending badge removed from call desk header
- Table resize handles visible (bg-tertiary pill)
- Sim call button: dev-only (import.meta.env.DEV)
- CallControlStrip component (reusable, not currently mounted)

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

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

@@ -1,14 +1,10 @@
 import { useState, useEffect } from 'react';
-import { faCalendarPlus, faXmark } from '@fortawesome/pro-duotone-svg-icons';
-import { faIcon } from '@/lib/icon-wrapper';
-
-const CalendarPlus02 = faIcon(faCalendarPlus);
-const XClose = faIcon(faXmark);
 import { Input } from '@/components/base/input/input';
 import { Select } from '@/components/base/select/select';
 import { TextArea } from '@/components/base/textarea/textarea';
 import { Button } from '@/components/base/buttons/button';
-import { ModalOverlay, Modal, Dialog } from '@/components/application/modals/modal';
+import { DatePicker } from '@/components/application/date-picker/date-picker';
+import { parseDate } from '@internationalized/date';
 import { apiClient } from '@/lib/api-client';
 import { cx } from '@/utils/cx';
 import { notify } from '@/lib/toast';
@@ -90,7 +86,7 @@ export const AppointmentForm = ({
     const [doctor, setDoctor] = useState<string | null>(existingAppointment?.doctorId ?? null);
     const [date, setDate] = useState(() => {
         if (existingAppointment?.scheduledAt) return existingAppointment.scheduledAt.split('T')[0];
-        return '';
+        return new Date().toISOString().split('T')[0];
     });
     const [timeSlot, setTimeSlot] = useState<string | null>(() => {
         if (existingAppointment?.scheduledAt) {
@@ -249,7 +245,22 @@ export const AppointmentForm = ({
                     },
                 );
 
-                // Update lead status if we have a matched lead
+                // Update patient name if we have a name and a linked patient
+                if (patientId && patientName.trim()) {
+                    await apiClient.graphql(
+                        `mutation UpdatePatient($id: UUID!, $data: PatientUpdateInput!) {
+                            updatePatient(id: $id, data: $data) { id }
+                        }`,
+                        {
+                            id: patientId,
+                            data: {
+                                fullName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' },
+                            },
+                        },
+                    ).catch((err: unknown) => console.warn('Failed to update patient name:', err));
+                }
+
+                // Update lead status + name if we have a matched lead
                 if (leadId) {
                     await apiClient.graphql(
                         `mutation UpdateLead($id: UUID!, $data: LeadUpdateInput!) {
@@ -260,10 +271,16 @@ export const AppointmentForm = ({
                             data: {
                                 leadStatus: 'APPOINTMENT_SET',
                                 lastContactedAt: new Date().toISOString(),
+                                ...(patientName.trim() ? { contactName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' } } : {}),
                             },
                         },
                     ).catch((err: unknown) => console.warn('Failed to update lead:', err));
                 }
+
+                // Invalidate caller cache so next lookup gets the real name
+                if (callerNumber) {
+                    apiClient.post('/api/caller/invalidate', { phone: callerNumber }, { silent: true }).catch(() => {});
+                }
             }
 
             onSaved?.();
@@ -297,35 +314,12 @@ export const AppointmentForm = ({
         }
     };
 
-    return (
-        <ModalOverlay isOpen={isOpen} onOpenChange={onOpenChange} isDismissable>
-            <Modal className="max-w-2xl">
-                <Dialog>
-                    <div className="p-4">
-            {/* Header with close button */}
-            <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center gap-3">
-                    <div className="flex size-8 items-center justify-center rounded-lg bg-brand-secondary">
-                        <CalendarPlus02 className="size-4 text-fg-brand-primary" />
-                    </div>
-                    <div>
-                        <h3 className="text-sm font-semibold text-primary">
-                            {isEditMode ? 'Edit Appointment' : 'Book Appointment'}
-                        </h3>
-                        <p className="text-xs text-tertiary">
-                            {isEditMode ? 'Modify or cancel this appointment' : 'Schedule a new patient visit'}
-                        </p>
-                    </div>
-                </div>
-                <button
-                    onClick={() => onOpenChange(false)}
-                    className="flex size-7 items-center justify-center rounded-md text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
-                >
-                    <XClose className="size-4" />
-                </button>
-            </div>
+    if (!isOpen) return null;
 
-            {/* Form fields */}
+    return (
+        <div className="flex flex-col flex-1 min-h-0">
+            {/* Form fields — scrollable */}
+            <div className="flex-1 overflow-y-auto">
             <div className="flex flex-col gap-3">
                 {/* Patient Info — only for new appointments */}
                 {!isEditMode && (
@@ -416,13 +410,14 @@ export const AppointmentForm = ({
                     {(item) => <Select.Item id={item.id} label={item.label} />}
                 </Select>
 
-                <Input
-                    label="Date"
-                    type="date"
-                    value={date}
-                    onChange={setDate}
-                    isRequired
-                />
+                <div className="flex flex-col gap-1">
+                    <span className="text-xs font-medium text-secondary">Date <span className="text-error-primary">*</span></span>
+                    <DatePicker
+                        value={date ? parseDate(date) : null}
+                        onChange={(val) => setDate(val ? val.toString() : '')}
+                        granularity="day"
+                    />
+                </div>
 
                 {/* Time slot grid */}
                 {doctor && date && (
@@ -497,9 +492,10 @@ export const AppointmentForm = ({
                     </div>
                 )}
             </div>
+            </div>
 
-            {/* Footer buttons */}
-            <div className="flex items-center justify-between mt-4 pt-4 border-t border-secondary">
+            {/* Footer — pinned */}
+            <div className="shrink-0 flex items-center justify-between pt-4 border-t border-secondary">
                 <div>
                     {isEditMode && (
                         <Button size="sm" color="primary-destructive" isLoading={isSaving} onClick={handleCancel}>
@@ -516,9 +512,6 @@ export const AppointmentForm = ({
                     </Button>
                 </div>
             </div>
-                    </div>
-                </Dialog>
-            </Modal>
-        </ModalOverlay>
+        </div>
     );
 };