feat: disposition modal, persistent top bar, pagination, QA fixes

- DispositionModal: single modal for all call endings. Dismissable (agent can resume call).
  Agent clicks End → modal → select reason → hangup + dispose. Caller disconnects → same modal.
- One call screen: CallWidget stripped to ringing notification + auto-redirect to Call Desk.
- Persistent top bar in AppShell: agent status toggle + network indicator on all pages.
- Network indicator always visible (Connected/Unstable/No connection).
- Pagination: Untitled UI PaginationCardDefault on Call History + Appointments (20/page).
- Pinned table headers/footers: sticky column headers, scrollable body, pinned pagination.
  Applied to Call Desk worklist, Call History, Appointments, Call Recordings, Missed Calls.
- "Patient" → "Caller" column label in Call History.
- Offline → Ready toggle enabled.
- Profile status dot reflects Ozonetel state.
- NavAccountCard: popover placement top, View Profile + Account Settings restored.
- WIP pages for /profile and /account-settings.
- Enquiry form PHONE_INQUIRY → PHONE enum fix.
- Force Ready / View Profile / Account Settings removed then restored properly.

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

src/pages/appointments.tsx

@@ -6,6 +6,7 @@ const SearchLg = faIcon(faMagnifyingGlass);
 import { Badge } from '@/components/base/badges/badges';
 import { Input } from '@/components/base/input/input';
 import { Table } from '@/components/application/table/table';
+import { PaginationCardDefault } from '@/components/application/pagination/pagination';
 import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
 import { TopBar } from '@/components/layout/top-bar';
 import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
@@ -69,6 +70,8 @@ export const AppointmentsPage = () => {
     const [loading, setLoading] = useState(true);
     const [tab, setTab] = useState<StatusTab>('all');
     const [search, setSearch] = useState('');
+    const [page, setPage] = useState(1);
+    const PAGE_SIZE = 20;
 
     useEffect(() => {
         apiClient.graphql<{ appointments: { edges: Array<{ node: AppointmentRecord }> } }>(QUERY, undefined, { silent: true })
@@ -108,6 +111,12 @@ export const AppointmentsPage = () => {
         return rows;
     }, [appointments, tab, search]);
 
+    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+    const pagedRows = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
+    // Reset page on filter/search change
+    useEffect(() => { setPage(1); }, [tab, search]);
+
     const tabItems = [
         { id: 'all' as const, label: 'All', badge: appointments.length > 0 ? String(appointments.length) : undefined },
         { id: 'SCHEDULED' as const, label: 'Booked', badge: statusCounts.SCHEDULED ? String(statusCounts.SCHEDULED) : undefined },
@@ -122,7 +131,7 @@ export const AppointmentsPage = () => {
 
             <div className="flex flex-1 flex-col overflow-hidden">
                 {/* Tabs + search */}
-                <div className="flex items-end justify-between border-b border-secondary px-6 pt-3 pb-0.5">
+                <div className="flex shrink-0 items-end justify-between border-b border-secondary px-6 pt-3 pb-0.5">
                     <Tabs selectedKey={tab} onSelectionChange={(key) => setTab(key as StatusTab)}>
                         <TabList items={tabItems} type="underline" size="sm">
                             {(item) => <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />}
@@ -141,7 +150,7 @@ export const AppointmentsPage = () => {
                 </div>
 
                 {/* Table */}
-                <div className="flex-1 overflow-y-auto px-4 pt-3">
+                <div className="flex flex-1 flex-col overflow-hidden px-4 pt-3">
                     {loading ? (
                         <div className="flex items-center justify-center py-12">
                             <p className="text-sm text-tertiary">Loading appointments...</p>
@@ -162,7 +171,7 @@ export const AppointmentsPage = () => {
                                 <Table.Head label="Status" className="w-28" />
                                 <Table.Head label="Chief Complaint" />
                             </Table.Header>
-                            <Table.Body items={filtered}>
+                            <Table.Body items={pagedRows}>
                                 {(appt) => {
                                     const patientName = appt.patient
                                         ? `${appt.patient.fullName?.firstName ?? ''} ${appt.patient.fullName?.lastName ?? ''}`.trim() || 'Unknown'
@@ -222,6 +231,13 @@ export const AppointmentsPage = () => {
                             </Table.Body>
                         </Table>
                     )}
+                    <div className="shrink-0">
+                        <PaginationCardDefault
+                            page={page}
+                            total={totalPages}
+                            onPageChange={setPage}
+                        />
+                    </div>
                 </div>
             </div>
         </>