diff --git a/src/components/layout/page-header.tsx b/src/components/layout/page-header.tsx index 8a312a1..9a33608 100644 --- a/src/components/layout/page-header.tsx +++ b/src/components/layout/page-header.tsx @@ -1,29 +1,71 @@ // PageHeader — consistent header layout for all list pages. // -// Row 1: Title (+ optional badge + subtitle) on the left, +// Row 1: Title (+ optional badge + info icon) on the left, // controls (search, columns, export, etc.) on the right. // Row 2: Optional tabs (underline style) — no extra borders. // +// The `infoText` prop renders as a hoverable info icon (ⓘ) next to +// the title. Long descriptive text goes here instead of inline +// subtitle — keeps the header compact. +// // Usage: // + {open && ( +
+ {text} +
+ )} + + ); +}; + +export const PageHeader = ({ title, badge, subtitle, infoText, controls, tabs }: PageHeaderProps) => (
{/* Row 1: title + controls */}
@@ -37,6 +79,7 @@ export const PageHeader = ({ title, badge, subtitle, controls, tabs }: PageHeade {subtitle && ( {subtitle} )} + {infoText && }
{controls && (
diff --git a/src/pages/all-leads.tsx b/src/pages/all-leads.tsx index 1745b3f..3f4a57c 100644 --- a/src/pages/all-leads.tsx +++ b/src/pages/all-leads.tsx @@ -246,6 +246,7 @@ export const AllLeadsPage = () => {
diff --git a/src/pages/appointments-v2.tsx b/src/pages/appointments-v2.tsx index 9571ae6..786f748 100644 --- a/src/pages/appointments-v2.tsx +++ b/src/pages/appointments-v2.tsx @@ -555,6 +555,7 @@ export const AppointmentsPageV2 = () => { { const { user } = useAuth(); @@ -166,11 +168,14 @@ export const CallDeskPage = () => { return (
- {/* Compact header: title + name on left, status + toggle on right */} -
-
+ {/* Header — matches PageHeader visual pattern */} +
+

Call Desk

- {user.name} + {user.name} + + +
diff --git a/src/pages/call-history.tsx b/src/pages/call-history.tsx index d2939f6..5b30340 100644 --- a/src/pages/call-history.tsx +++ b/src/pages/call-history.tsx @@ -194,6 +194,7 @@ export const CallHistoryPage = () => { title={isAdmin ? 'Call History' : 'My Call History'} badge={filteredCalls.length} subtitle={isAdmin ? `${completedCount} completed \u00B7 ${missedCount} missed` : `${completedCount} completed`} + infoText={isAdmin ? 'All calls across all agents with recordings and dispositions.' : 'Your answered inbound and outbound calls.'} controls={ <>
diff --git a/src/pages/contacts.tsx b/src/pages/contacts.tsx index ccc77bf..51df4bc 100644 --- a/src/pages/contacts.tsx +++ b/src/pages/contacts.tsx @@ -116,7 +116,7 @@ export const ContactsPage = () => {
diff --git a/src/pages/missed-calls.tsx b/src/pages/missed-calls.tsx index f53bdf3..4b5fdc0 100644 --- a/src/pages/missed-calls.tsx +++ b/src/pages/missed-calls.tsx @@ -242,6 +242,7 @@ export const MissedCallsPage = () => { diff --git a/src/pages/patients.tsx b/src/pages/patients.tsx index 0fa18d2..bcf16b1 100644 --- a/src/pages/patients.tsx +++ b/src/pages/patients.tsx @@ -131,7 +131,7 @@ export const PatientsPage = () => {