helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-05-18 20:08:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: PageHeader component + refactor all 6 list pages

Browse Source 
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>
This commit is contained in:
saridsa2
2026-04-16 21:31:30 +05:30
parent dd8e05b343
commit dfcaa175ab
7 changed files with 246 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/all-leads.tsx
View File

@@ -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">