From dfcaa175ab3816adbe078023f36e16ef34359ce6 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Thu, 16 Apr 2026 21:31:30 +0530
Subject: [PATCH] feat: PageHeader component + refactor all 6 list pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 55 ++++++++++++++++
 src/pages/all-leads.tsx               | 62 +++++++++---------
 src/pages/appointments-v2.tsx         | 48 +++++++-------
 src/pages/call-history.tsx            | 91 ++++++++++++++-------------
 src/pages/contacts.tsx                | 22 +++----
 src/pages/missed-calls.tsx            | 86 ++++++++++++-------------
 src/pages/patients.tsx                | 73 +++++++++++----------
 7 files changed, 246 insertions(+), 191 deletions(-)
 create mode 100644 src/components/layout/page-header.tsx

diff --git a/src/components/layout/page-header.tsx b/src/components/layout/page-header.tsx
new file mode 100644
index 0000000..8a312a1
--- /dev/null
+++ b/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>
+);
diff --git a/src/pages/all-leads.tsx b/src/pages/all-leads.tsx
index a787ac7..1745b3f 100644
--- a/src/pages/all-leads.tsx
+++ b/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,37 +243,36 @@ 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">
-                    <div className="w-56">
-                        <Input
-                            placeholder="Search leads..."
-                            icon={SearchLg}
+            <PageHeader
+                title="All Leads"
+                subtitle={`${total} total`}
+                controls={
+                    <>
+                        <div className="w-56">
+                            <Input
+                                placeholder="Search leads..."
+                                icon={SearchLg}
+                                size="sm"
+                                value={searchQuery}
+                                onChange={(value) => {
+                                    setSearchQuery(value);
+                                    setCurrentPage(1);
+                                }}
+                                aria-label="Search leads"
+                            />
+                        </div>
+                        <ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} />
+                        <Button
                             size="sm"
-                            value={searchQuery}
-                            onChange={(value) => {
-                                setSearchQuery(value);
-                                setCurrentPage(1);
-                            }}
-                            aria-label="Search leads"
-                        />
-                    </div>
-                    <ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} />
-                    <Button
-                        size="sm"
-                        color="secondary"
-                        iconLeading={Download01}
-                        onClick={handleExportCsv}
-                    >
-                        Export CSV
-                    </Button>
-                </div>
-            </div>
+                            color="secondary"
+                            iconLeading={Download01}
+                            onClick={handleExportCsv}
+                        >
+                            Export CSV
+                        </Button>
+                    </>
+                }
+            />
 
             <div className="flex flex-1 flex-col overflow-hidden">
 
diff --git a/src/pages/appointments-v2.tsx b/src/pages/appointments-v2.tsx
index ee5f984..9571ae6 100644
--- a/src/pages/appointments-v2.tsx
+++ b/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,33 +552,32 @@ 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>
-                <div className="w-56">
-                    <Input
-                        placeholder="Search patient, doctor..."
-                        icon={SearchLg}
-                        size="sm"
-                        value={search}
-                        onChange={setSearch}
-                        aria-label="Search appointments"
-                    />
-                </div>
-            </div>
+            <PageHeader
+                title="Appointments"
+                badge={filtered.length}
+                controls={
+                    <div className="w-56">
+                        <Input
+                            placeholder="Search patient, doctor..."
+                            icon={SearchLg}
+                            size="sm"
+                            value={search}
+                            onChange={setSearch}
+                            aria-label="Search appointments"
+                        />
+                    </div>
+                }
+                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 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 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 flex-col overflow-hidden px-4 pt-3">
                         {loading ? (
diff --git a/src/pages/call-history.tsx b/src/pages/call-history.tsx
index e5bccd1..d2939f6 100644
--- a/src/pages/call-history.tsx
+++ b/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,44 +190,43 @@ 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
-                        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">
-                                <div className="w-44">
-                                    <Select
-                                        size="sm"
-                                        placeholder="All Calls"
-                                        selectedKey={filter}
-                                        onSelectionChange={(key) => setFilter(key as FilterKey)}
-                                        items={isAdmin ? allFilterItems : agentFilterItems}
-                                        aria-label="Filter calls"
-                                    >
-                                        {(item) => (
-                                            <Select.Item id={item.id} label={item.label}>
-                                                {item.label}
-                                            </Select.Item>
-                                        )}
-                                    </Select>
-                                </div>
-                                <div className="w-56">
-                                    <Input
-                                        placeholder="Search calls..."
-                                        icon={SearchLg}
-                                        size="sm"
-                                        value={search}
-                                        onChange={(value) => setSearch(value)}
-                                        aria-label="Search calls"
-                                    />
-                                </div>
+                <PageHeader
+                    title={isAdmin ? 'Call History' : 'My Call History'}
+                    badge={filteredCalls.length}
+                    subtitle={isAdmin ? `${completedCount} completed \u00B7 ${missedCount} missed` : `${completedCount} completed`}
+                    controls={
+                        <>
+                            <div className="w-44">
+                                <Select
+                                    size="sm"
+                                    placeholder="All Calls"
+                                    selectedKey={filter}
+                                    onSelectionChange={(key) => setFilter(key as FilterKey)}
+                                    items={isAdmin ? allFilterItems : agentFilterItems}
+                                    aria-label="Filter calls"
+                                >
+                                    {(item) => (
+                                        <Select.Item id={item.id} label={item.label}>
+                                            {item.label}
+                                        </Select.Item>
+                                    )}
+                                </Select>
                             </div>
-                        }
-                    />
+                            <div className="w-56">
+                                <Input
+                                    placeholder="Search calls..."
+                                    icon={SearchLg}
+                                    size="sm"
+                                    value={search}
+                                    onChange={(value) => setSearch(value)}
+                                    aria-label="Search calls"
+                                />
+                            </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">
-                        <PaginationCardDefault
-                            page={page}
-                            total={totalPages}
-                            onPageChange={setPage}
-                        />
-                    </div>
-                </TableCard.Root>
             </div>
+            {totalPages > 1 && (
+                <div className="shrink-0 border-t border-secondary px-6 py-3">
+                    <PaginationCardDefault
+                        page={page}
+                        total={totalPages}
+                        onPageChange={setPage}
+                    />
+                </div>
+            )}
         </div>
     );
 };
diff --git a/src/pages/contacts.tsx b/src/pages/contacts.tsx
index 8a9fe33..ccc77bf 100644
--- a/src/pages/contacts.tsx
+++ b/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}
diff --git a/src/pages/missed-calls.tsx b/src/pages/missed-calls.tsx
index d656966..f53bdf3 100644
--- a/src/pages/missed-calls.tsx
+++ b/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>
     );
 };
diff --git a/src/pages/patients.tsx b/src/pages/patients.tsx
index 07948ff..0fa18d2 100644
--- a/src/pages/patients.tsx
+++ b/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,37 +128,36 @@ export const PatientsPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
+            <PageHeader
+                title="All Patients"
+                badge={filteredPatients.length}
+                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"
+                            title={panelOpen ? 'Hide patient profile' : 'Show patient profile'}
+                        >
+                            <FontAwesomeIcon icon={panelOpen ? faSidebarFlip : faSidebar} className="size-4" />
+                        </button>
+
+                        <div className="w-56">
+                            <Input
+                                placeholder="Search by name or phone..."
+                                icon={SearchLg}
+                                size="sm"
+                                value={searchQuery}
+                                onChange={handleSearch}
+                                aria-label="Search patients"
+                            />
+                        </div>
+                    </>
+                }
+            />
+
             <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
-                        title="All Patients"
-                        badge={filteredPatients.length}
-                        description="Manage and view patient records"
-                        contentTrailing={
-                            <div className="flex items-center gap-2">
-                                <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"
-                                    title={panelOpen ? 'Hide patient profile' : 'Show patient profile'}
-                                >
-                                    <FontAwesomeIcon icon={panelOpen ? faSidebarFlip : faSidebar} className="size-4" />
-                                </button>
-
-                                <div className="w-56">
-                                    <Input
-                                        placeholder="Search by name or phone..."
-                                        icon={SearchLg}
-                                        size="sm"
-                                        value={searchQuery}
-                                        onChange={handleSearch}
-                                        aria-label="Search patients"
-                                    />
-                                </div>
-                            </div>
-                        }
-                    />
-
+                <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,13 +267,12 @@ export const PatientsPage = () => {
                             </Table.Body>
                         </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>
-                )}
+                    {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 */}