Remove page subtitles from all dashboard pages

Subtitles added noise without value. Stripped subtitle props from all 8
PageHeader calls, removed subtitle display from TopBar, and simplified
the PageTitleContext and PageHeader interfaces to title-only.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-09-01 09:31:32 -04:00
parent 9d016a08cb
commit 4e2e847828
10 changed files with 20 additions and 32 deletions

View File

@@ -659,7 +659,7 @@ export default function AccountExplorer() {
return ( return (
<div> <div>
<PageHeader title="Account Explorer" subtitle="Tell me everything about this account" /> <PageHeader title="Account Explorer" />
{/* KPI Summary Cards */} {/* KPI Summary Cards */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-4"> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-4">

View File

@@ -174,7 +174,7 @@ export default function ActivityDeepDive() {
return ( return (
<div> <div>
<PageHeader title="Activities" subtitle="Are we doing the right activities at the right volume?" /> <PageHeader title="Activities" />
{/* Type filter chips */} {/* Type filter chips */}
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">

View File

@@ -120,7 +120,7 @@ export default function GoalsPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<PageHeader title="Goals & Targets" subtitle="Set and track district performance targets" /> <PageHeader title="Goals & Targets" />
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<label className="text-sm font-medium text-muted">Quarter</label> <label className="text-sm font-medium text-muted">Quarter</label>

View File

@@ -62,7 +62,7 @@ export default function ImplementationOutcomes() {
return ( return (
<div> <div>
<PageHeader title="Implementation & Outcomes" subtitle="Are closed deals going live and becoming references?" /> <PageHeader title="Implementation & Outcomes" />
{/* Health Summary */} {/* Health Summary */}
<div className="grid grid-cols-3 gap-3 mb-6"> <div className="grid grid-cols-3 gap-3 mb-6">

View File

@@ -113,7 +113,7 @@ export default function ExecutiveOverview() {
return ( return (
<div> <div>
<PageHeader title="Executive Overview" subtitle="Are we on track for a successful launch?" /> <PageHeader title="Executive Overview" />
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-3 mb-6"> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-3 mb-6">
<Scorecard label="Total Accounts" value={kpis.totalAccounts} /> <Scorecard label="Total Accounts" value={kpis.totalAccounts} />

View File

@@ -180,7 +180,7 @@ export default function PipelineDeepDive() {
return ( return (
<div> <div>
<PageHeader title="Pipeline Deep Dive" subtitle="Where is the money and will it close?" /> <PageHeader title="Pipeline Deep Dive" />
<div className="flex justify-end mb-2"> <div className="flex justify-end mb-2">
<ExportButton table="pipeline" /> <ExportButton table="pipeline" />

View File

@@ -132,7 +132,7 @@ export default function PlaybooksPage() {
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6" /></svg> <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6" /></svg>
Back Back
</button> </button>
<PageHeader title={selectedPlaybook.play_name} subtitle={selectedPlaybook.description || 'Campaign playbook'} /> <PageHeader title={selectedPlaybook.play_name} />
</div> </div>
{editing ? ( {editing ? (
@@ -221,7 +221,7 @@ export default function PlaybooksPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<PageHeader title="Campaign Playbooks" subtitle="Standardized sales plays and account progress tracking" /> <PageHeader title="Campaign Playbooks" />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{playbooks.map(pb => { {playbooks.map(pb => {

View File

@@ -16,7 +16,7 @@ const DATE_PRESETS: { value: DatePreset; label: string }[] = [
export function TopBar() { export function TopBar() {
const { filters, setDistricts, setDatePreset, refresh, isLoading, lastRefreshed, clearAllFilters, clearCrossFilter } = useData(); const { filters, setDistricts, setDatePreset, refresh, isLoading, lastRefreshed, clearAllFilters, clearCrossFilter } = useData();
const { title, subtitle } = usePageTitle(); const { title } = usePageTitle();
const [showDistrictDropdown, setShowDistrictDropdown] = useState(false); const [showDistrictDropdown, setShowDistrictDropdown] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
@@ -56,10 +56,7 @@ export function TopBar() {
{/* Page title */} {/* Page title */}
<div className="hidden lg:flex flex-1 items-center gap-2 min-w-0"> <div className="hidden lg:flex flex-1 items-center gap-2 min-w-0">
{title && ( {title && (
<>
<h1 className="text-sm font-bold text-foreground truncate">{title}</h1> <h1 className="text-sm font-bold text-foreground truncate">{title}</h1>
{subtitle && <span className="text-xs text-muted truncate hidden xl:inline"> {subtitle}</span>}
</>
)} )}
</div> </div>

View File

@@ -5,16 +5,15 @@ import { usePageTitle } from '@/lib/page-title-context';
interface PageHeaderProps { interface PageHeaderProps {
title: string; title: string;
subtitle: string;
} }
export function PageHeader({ title, subtitle }: PageHeaderProps) { export function PageHeader({ title }: PageHeaderProps) {
const { setPageTitle } = usePageTitle(); const { setPageTitle } = usePageTitle();
useEffect(() => { useEffect(() => {
setPageTitle(title, subtitle); setPageTitle(title);
return () => setPageTitle('', ''); return () => setPageTitle('');
}, [title, subtitle, setPageTitle]); }, [title, setPageTitle]);
return null; return null;
} }

View File

@@ -2,33 +2,25 @@
import { createContext, useContext, useState, useCallback, ReactNode } from 'react'; import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
interface PageTitleState { interface PageTitleContextValue {
title: string; title: string;
subtitle: string; setPageTitle: (title: string) => void;
}
interface PageTitleContextValue extends PageTitleState {
setPageTitle: (title: string, subtitle: string) => void;
} }
const PageTitleContext = createContext<PageTitleContextValue>({ const PageTitleContext = createContext<PageTitleContextValue>({
title: '', title: '',
subtitle: '',
setPageTitle: () => {}, setPageTitle: () => {},
}); });
export function PageTitleProvider({ children }: { children: ReactNode }) { export function PageTitleProvider({ children }: { children: ReactNode }) {
const [state, setState] = useState<PageTitleState>({ title: '', subtitle: '' }); const [title, setTitle] = useState('');
const setPageTitle = useCallback((title: string, subtitle: string) => { const setPageTitle = useCallback((t: string) => {
setState(prev => { setTitle(prev => prev === t ? prev : t);
if (prev.title === title && prev.subtitle === subtitle) return prev;
return { title, subtitle };
});
}, []); }, []);
return ( return (
<PageTitleContext.Provider value={{ ...state, setPageTitle }}> <PageTitleContext.Provider value={{ title, setPageTitle }}>
{children} {children}
</PageTitleContext.Provider> </PageTitleContext.Provider>
); );