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/components/layout/page-header.tsx

@@ -0,0 +1,55 @@
+// PageHeader — consistent header layout for all list pages.
+//
+// Row 1: Title (+ optional badge + subtitle) on the left,
+//         controls (search, columns, export, etc.) on the right.
+// Row 2: Optional tabs (underline style) — no extra borders.
+//
+// Usage:
+//   <PageHeader
+//       title="Appointments"
+//       badge={37}
+//       subtitle="Manage appointments"
+//       controls={<><Input .../> <Button .../></>}
+//       tabs={<Tabs ...><TabList ...>{...}</TabList></Tabs>}
+//   />
+
+import type { ReactNode } from 'react';
+
+interface PageHeaderProps {
+    title: string;
+    badge?: number | string;
+    subtitle?: string;
+    controls?: ReactNode;
+    tabs?: ReactNode;
+}
+
+export const PageHeader = ({ title, badge, subtitle, controls, tabs }: PageHeaderProps) => (
+    <div className="shrink-0">
+        {/* Row 1: title + controls */}
+        <div className="flex items-center justify-between px-6 py-3">
+            <div className="flex items-center gap-2">
+                <h1 className="text-lg font-bold text-primary">{title}</h1>
+                {badge != null && (
+                    <span className="inline-flex items-center justify-center rounded-full bg-brand-secondary px-2 py-0.5 text-xs font-semibold text-white">
+                        {badge}
+                    </span>
+                )}
+                {subtitle && (
+                    <span className="text-sm text-tertiary ml-1">{subtitle}</span>
+                )}
+            </div>
+            {controls && (
+                <div className="flex items-center gap-2">
+                    {controls}
+                </div>
+            )}
+        </div>
+
+        {/* Row 2: optional tabs — no container border, tab underline is the separator */}
+        {tabs && (
+            <div className="px-6">
+                {tabs}
+            </div>
+        )}
+    </div>
+);

src/pages/all-leads.tsx

@@ -11,8 +11,7 @@ import { Input } from '@/components/base/input/input';
 // Tabs removed — campaign pills handle all filtering now
 // import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
 import { PaginationPageDefault } from '@/components/application/pagination/pagination';
-// TopBar replaced by inline header
-// import { TopBar } from '@/components/layout/top-bar';
+import { PageHeader } from '@/components/layout/page-header';
 import { LeadTable } from '@/components/leads/lead-table';
 import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle';
 // Bulk actions removed — checkboxes hidden
@@ -244,13 +243,11 @@ export const AllLeadsPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
-            {/* Header with controls inline */}
-            <div className="flex shrink-0 items-center justify-between border-b border-secondary px-6 py-3">
-                <div>
-                    <h1 className="text-lg font-bold text-primary">All Leads</h1>
-                    <p className="text-xs text-tertiary">{total} total</p>
-                </div>
-                <div className="flex items-center gap-2">
+            <PageHeader
+                title="All Leads"
+                subtitle={`${total} total`}
+                controls={
+                    <>
                         <div className="w-56">
                             <Input
                                 placeholder="Search leads..."
@@ -273,8 +270,9 @@ export const AllLeadsPage = () => {
                         >
                             Export CSV
                         </Button>
-                </div>
-            </div>
+                    </>
+                }
+            />
 
             <div className="flex flex-1 flex-col overflow-hidden">
 

src/pages/appointments-v2.tsx

@@ -20,6 +20,7 @@ import { Select } from '@/components/base/select/select';
 import { DatePicker } from '@/components/application/date-picker/date-picker';
 import { parseDate, today, getLocalTimeZone } from '@internationalized/date';
 import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
+import { PageHeader } from '@/components/layout/page-header';
 import { formatPhone, formatDateOnly, formatTimeOnly } from '@/lib/format';
 import { apiClient } from '@/lib/api-client';
 import { notify } from '@/lib/toast';
@@ -551,11 +552,10 @@ export const AppointmentsPageV2 = () => {
 
     return (
         <>
-            {/* Header with search inline */}
-            <div className="flex shrink-0 items-center justify-between border-b border-secondary px-6 py-3">
-                <div>
-                    <h1 className="text-lg font-bold text-primary">Appointments</h1>
-                </div>
+            <PageHeader
+                title="Appointments"
+                badge={filtered.length}
+                controls={
                     <div className="w-56">
                         <Input
                             placeholder="Search patient, doctor..."
@@ -566,18 +566,18 @@ export const AppointmentsPageV2 = () => {
                             aria-label="Search appointments"
                         />
                     </div>
-            </div>
-
-            <div className="flex flex-1 overflow-hidden">
-                <div className="flex flex-1 flex-col overflow-hidden">
-                    {/* Tabs */}
-                    <div className="flex shrink-0 items-end px-6 pt-2 pb-0.5">
+                }
+                tabs={
                     <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} />}
                         </TabList>
                     </Tabs>
-                    </div>
+                }
+            />
+
+            <div className="flex flex-1 overflow-hidden">
+                <div className="flex flex-1 flex-col overflow-hidden">
 
                     <div className="flex flex-1 flex-col overflow-hidden px-4 pt-3">
                         {loading ? (

src/pages/call-history.tsx

@@ -11,11 +11,12 @@ import {
 } from '@fortawesome/pro-duotone-svg-icons';
 
 const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
-import { Table, TableCard } from '@/components/application/table/table';
+import { Table } from '@/components/application/table/table';
 import { Badge } from '@/components/base/badges/badges';
 import { Button } from '@/components/base/buttons/button';
 import { Input } from '@/components/base/input/input';
 import { Select } from '@/components/base/select/select';
+import { PageHeader } from '@/components/layout/page-header';
 import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
 import { formatShortDate, formatPhone } from '@/lib/format';
 // cx removed — no longer used after SLA column removal
@@ -189,14 +190,12 @@ export const CallHistoryPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
-            <div className="flex flex-1 flex-col overflow-hidden p-7">
-                <TableCard.Root size="md" className="flex-1 min-h-0">
-                    <TableCard.Header
+                <PageHeader
                     title={isAdmin ? 'Call History' : 'My Call History'}
-                        badge={String(filteredCalls.length)}
-                        description={isAdmin ? `${completedCount} completed \u00B7 ${missedCount} missed` : `${completedCount} completed`}
-                        contentTrailing={
-                            <div className="flex items-center gap-2">
+                    badge={filteredCalls.length}
+                    subtitle={isAdmin ? `${completedCount} completed \u00B7 ${missedCount} missed` : `${completedCount} completed`}
+                    controls={
+                        <>
                             <div className="w-44">
                                 <Select
                                     size="sm"
@@ -223,10 +222,11 @@ export const CallHistoryPage = () => {
                                     aria-label="Search calls"
                                 />
                             </div>
-                            </div>
+                        </>
                     }
                 />
 
+            <div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-3">
                     {filteredCalls.length === 0 ? (
                         <div className="flex flex-col items-center justify-center py-16">
                             <h3 className="text-sm font-semibold text-primary">No calls found</h3>
@@ -314,15 +314,16 @@ export const CallHistoryPage = () => {
                             </Table.Body>
                         </Table>
                     )}
-                    <div className="shrink-0">
+            </div>
+            {totalPages > 1 && (
+                <div className="shrink-0 border-t border-secondary px-6 py-3">
                     <PaginationCardDefault
                         page={page}
                         total={totalPages}
                         onPageChange={setPage}
                     />
                 </div>
-                </TableCard.Root>
-            </div>
+            )}
         </div>
     );
 };

src/pages/contacts.tsx

@@ -17,7 +17,7 @@ const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon
 import { Button } from '@/components/base/buttons/button';
 import { Input } from '@/components/base/input/input';
 import { PaginationPageDefault } from '@/components/application/pagination/pagination';
-import { TopBar } from '@/components/layout/top-bar';
+import { PageHeader } from '@/components/layout/page-header';
 import { LeadTable } from '@/components/leads/lead-table';
 import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle';
 import { LeadActivitySlideout } from '@/components/leads/lead-activity-slideout';
@@ -113,14 +113,12 @@ export const ContactsPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
-            <TopBar title="Contacts" subtitle={`${contacts.length} organic callers`} />
-
-            <div className="flex flex-1 flex-col overflow-hidden">
-                <div className="flex shrink-0 items-center justify-between px-6 py-3 border-b border-secondary">
-                    <p className="text-xs text-tertiary">
-                        People who reached out directly — phone, walk-in, referral. Not sourced from campaigns.
-                    </p>
-                    <div className="flex items-center gap-2">
+            <PageHeader
+                title="Contacts"
+                badge={contacts.length}
+                subtitle="People who reached out directly — phone, walk-in, referral. Not sourced from campaigns."
+                controls={
+                    <>
                         <div className="w-56">
                             <Input
                                 placeholder="Search contacts..."
@@ -135,9 +133,11 @@ export const ContactsPage = () => {
                         <Button size="sm" color="secondary" iconLeading={Download01} onClick={handleExportCsv}>
                             Export CSV
                         </Button>
-                    </div>
-                </div>
+                    </>
+                }
+            />
 
+            <div className="flex flex-1 flex-col overflow-hidden">
                 <div className="flex-1 overflow-y-auto px-4 pt-3">
                     <LeadTable
                         leads={paged}

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,23 +238,26 @@ 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">
+            <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">
@@ -287,6 +290,5 @@ export const MissedCallsPage = () => {
                 </div>
             )}
         </div>
-        </>
     );
 };

src/pages/patients.tsx

@@ -7,7 +7,8 @@ import { faIcon } from '@/lib/icon-wrapper';
 const SearchLg = faIcon(faMagnifyingGlass);
 import { Avatar } from '@/components/base/avatar/avatar';
 import { Input } from '@/components/base/input/input';
-import { Table, TableCard } from '@/components/application/table/table';
+import { Table } from '@/components/application/table/table';
+import { PageHeader } from '@/components/layout/page-header';
 import { PaginationPageDefault } from '@/components/application/pagination/pagination';
 
 import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
@@ -127,15 +128,12 @@ export const PatientsPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
-            <div className="flex flex-1 overflow-hidden">
-                <div className="flex flex-1 flex-col overflow-y-auto p-7">
-                <TableCard.Root size="sm">
-                    <TableCard.Header
+            <PageHeader
                 title="All Patients"
                 badge={filteredPatients.length}
-                        description="Manage and view patient records"
-                        contentTrailing={
-                            <div className="flex items-center gap-2">
+                subtitle="Manage and view patient records"
+                controls={
+                    <>
                         <button
                             onClick={() => setPanelOpen(!panelOpen)}
                             className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
@@ -154,10 +152,12 @@ export const PatientsPage = () => {
                                 aria-label="Search patients"
                             />
                         </div>
-                            </div>
+                    </>
                 }
             />
 
+            <div className="flex flex-1 overflow-hidden">
+                <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-20">
                             <p className="text-sm text-tertiary">Loading patients...</p>
@@ -267,7 +267,6 @@ export const PatientsPage = () => {
                             </Table.Body>
                         </Table>
                     )}
-                </TableCard.Root>
 
                     {totalPages > 1 && (
                         <div className="shrink-0 border-t border-secondary px-6 py-3">