feat: PageHeader component + refactor all 6 list pages

New reusable PageHeader component (src/components/layout/page-header.tsx)
with consistent layout: title + badge + subtitle on left, controls on
right, optional tabs below with no extra borders.

Refactored pages:
 - All Leads: inline header → PageHeader
 - Contacts: inline header → PageHeader
 - Appointments v2: inline header → PageHeader with tabs
 - Call History: removed p-7 wrapper + TableCard.Root → flat table
 - Patients: removed p-7 wrapper + TableCard.Root → flat table
 - Missed Calls: removed TopBar → PageHeader with tabs

All pages now share identical header spacing, font sizing, and
control alignment. No more double borders from tab + container.

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

src/pages/missed-calls.tsx

@@ -9,7 +9,7 @@ import { Input } from '@/components/base/input/input';
 import { Table } from '@/components/application/table/table';
 import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
 import { PaginationPageDefault } from '@/components/application/pagination/pagination';
-import { TopBar } from '@/components/layout/top-bar';
+import { PageHeader } from '@/components/layout/page-header';
 import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle';
 import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
 import { apiClient } from '@/lib/api-client';
@@ -238,55 +238,57 @@ export const MissedCallsPage = () => {
     ];
 
     return (
-        <>
-            <TopBar title="Missed Calls" />
-            <div className="flex flex-1 flex-col overflow-hidden">
-                {/* Tabs + toolbar */}
-                <div className="flex shrink-0 items-end justify-between border-b border-secondary px-6 pt-3 pb-0.5">
+        <div className="flex flex-1 flex-col overflow-hidden">
+            <PageHeader
+                title="Missed Calls"
+                badge={calls.length}
+                controls={
+                    <>
+                        <ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} />
+                        <div className="w-56">
+                            <Input placeholder="Search phone, agent, branch..." icon={SearchLg} size="sm" value={search} onChange={handleSearch} />
+                        </div>
+                    </>
+                }
+                tabs={
                     <Tabs selectedKey={tab} onSelectionChange={(key) => handleTab(key as StatusTab)}>
                         <TabList items={tabItems} type="underline" size="sm">
                             {(item) => <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />}
                         </TabList>
                     </Tabs>
-                    <div className="flex items-center gap-3 pb-1">
-                        <ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} />
-                        <div className="w-56">
-                            <Input placeholder="Search phone, agent, branch..." icon={SearchLg} size="sm" value={search} onChange={handleSearch} />
-                        </div>
-                    </div>
-                </div>
+                }
+            />
 
-                {/* Table */}
-                <div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-3">
-                    {loading ? (
-                        <div className="flex items-center justify-center py-12">
-                            <p className="text-sm text-tertiary">Loading missed calls...</p>
-                        </div>
-                    ) : filtered.length === 0 ? (
-                        <div className="flex items-center justify-center py-12">
-                            <p className="text-sm text-quaternary">{search ? 'No matching calls' : 'No missed calls'}</p>
-                        </div>
-                    ) : (
-                        <DynamicMissedCallTable
-                            calls={pagedRows}
-                            columns={columnDefs.filter(c => visibleColumns.has(c.id))}
-                            sortDescriptor={sortDescriptor}
-                            onSortChange={setSortDescriptor}
-                        />
-                    )}
-                </div>
-
-                {/* Pagination */}
-                {totalPages > 1 && (
-                    <div className="shrink-0 border-t border-secondary px-6 py-3">
-                        <PaginationPageDefault
-                            page={currentPage}
-                            total={totalPages}
-                            onPageChange={setCurrentPage}
-                        />
+            {/* Table */}
+            <div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-3">
+                {loading ? (
+                    <div className="flex items-center justify-center py-12">
+                        <p className="text-sm text-tertiary">Loading missed calls...</p>
                     </div>
+                ) : filtered.length === 0 ? (
+                    <div className="flex items-center justify-center py-12">
+                        <p className="text-sm text-quaternary">{search ? 'No matching calls' : 'No missed calls'}</p>
+                    </div>
+                ) : (
+                    <DynamicMissedCallTable
+                        calls={pagedRows}
+                        columns={columnDefs.filter(c => visibleColumns.has(c.id))}
+                        sortDescriptor={sortDescriptor}
+                        onSortChange={setSortDescriptor}
+                    />
                 )}
             </div>
-        </>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+                <div className="shrink-0 border-t border-secondary px-6 py-3">
+                    <PaginationPageDefault
+                        page={currentPage}
+                        total={totalPages}
+                        onPageChange={setCurrentPage}
+                    />
+                </div>
+            )}
+        </div>
     );
 };