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/pages/patients.tsx

@@ -10,6 +10,7 @@ import { Badge } from '@/components/base/badges/badges';
 // Button removed — actions are icon-only now
 import { Input } from '@/components/base/input/input';
 import { Table, TableCard } from '@/components/application/table/table';
+import { PaginationPageDefault } from '@/components/application/pagination/pagination';
 import { TopBar } from '@/components/layout/top-bar';
 import { ClickToCallButton } from '@/components/call-desk/click-to-call-button';
 import { PatientProfilePanel } from '@/components/shared/patient-profile-panel';
@@ -59,13 +60,13 @@ export const PatientsPage = () => {
     const { patients, loading } = useData();
     const navigate = useNavigate();
     const [searchQuery, setSearchQuery] = useState('');
-    const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
     const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
     const [panelOpen, setPanelOpen] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const PAGE_SIZE = 15;
 
     const filteredPatients = useMemo(() => {
         return patients.filter((patient) => {
-            // Search filter
             if (searchQuery.trim()) {
                 const query = searchQuery.trim().toLowerCase();
                 const name = getPatientDisplayName(patient).toLowerCase();
@@ -75,13 +76,13 @@ export const PatientsPage = () => {
                     return false;
                 }
             }
-
-            // Status filter — treat all patients as active for now since we don't have a status field
-            if (statusFilter === 'inactive') return false;
-
             return true;
         });
-    }, [patients, searchQuery, statusFilter]);
+    }, [patients, searchQuery]);
+
+    const totalPages = Math.max(1, Math.ceil(filteredPatients.length / PAGE_SIZE));
+    const pagedPatients = filteredPatients.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+    const handleSearch = (val: string) => { setSearchQuery(val); setCurrentPage(1); };
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
@@ -103,22 +104,6 @@ export const PatientsPage = () => {
                                 >
                                     <FontAwesomeIcon icon={panelOpen ? faSidebarFlip : faSidebar} className="size-4" />
                                 </button>
-                                {/* Status filter buttons */}
-                                <div className="flex rounded-lg border border-secondary overflow-hidden">
-                                    {(['all', 'active', 'inactive'] as const).map((status) => (
-                                        <button
-                                            key={status}
-                                            onClick={() => setStatusFilter(status)}
-                                            className={`px-3 py-1.5 text-xs font-medium transition duration-100 ease-linear capitalize ${
-                                                statusFilter === status
-                                                    ? 'bg-active text-brand-secondary'
-                                                    : 'bg-primary text-tertiary hover:bg-primary_hover'
-                                            }`}
-                                        >
-                                            {status}
-                                        </button>
-                                    ))}
-                                </div>
 
                                 <div className="w-56">
                                     <Input
@@ -126,7 +111,7 @@ export const PatientsPage = () => {
                                         icon={SearchLg}
                                         size="sm"
                                         value={searchQuery}
-                                        onChange={(value) => setSearchQuery(value)}
+                                        onChange={handleSearch}
                                         aria-label="Search patients"
                                     />
                                 </div>
@@ -154,10 +139,9 @@ export const PatientsPage = () => {
                                 <Table.Head label="TYPE" />
                                 <Table.Head label="GENDER" />
                                 <Table.Head label="AGE" />
-                                <Table.Head label="STATUS" />
                                 <Table.Head label="ACTIONS" />
                             </Table.Header>
-                            <Table.Body items={filteredPatients}>
+                            <Table.Body items={pagedPatients}>
                                 {(patient) => {
                                     const displayName = getPatientDisplayName(patient);
                                     const age = computeAge(patient.dateOfBirth);
@@ -239,13 +223,6 @@ export const PatientsPage = () => {
                                                 </span>
                                             </Table.Cell>
 
-                                            {/* Status */}
-                                            <Table.Cell>
-                                                <Badge size="sm" color="success" type="pill-color">
-                                                    Active
-                                                </Badge>
-                                            </Table.Cell>
-
                                             {/* Actions */}
                                             <Table.Cell>
                                                 <div className="flex items-center gap-1">
@@ -288,6 +265,12 @@ export const PatientsPage = () => {
                         </Table>
                     )}
                 </TableCard.Root>
+
+                {totalPages > 1 && (
+                    <div className="shrink-0 border-t border-secondary px-6 py-3">
+                        <PaginationPageDefault page={currentPage} total={totalPages} onPageChange={setCurrentPage} />
+                    </div>
+                )}
                 </div>
 
                 {/* Patient Profile Panel - collapsible with smooth transition */}