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:
@@ -659,7 +659,7 @@ export default function AccountExplorer() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader title="Account Explorer" subtitle="Tell me everything about this account" />
|
||||
<PageHeader title="Account Explorer" />
|
||||
|
||||
{/* KPI Summary Cards */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-4">
|
||||
|
||||
@@ -174,7 +174,7 @@ export default function ActivityDeepDive() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader title="Activities" subtitle="Are we doing the right activities at the right volume?" />
|
||||
<PageHeader title="Activities" />
|
||||
|
||||
{/* Type filter chips */}
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
|
||||
@@ -120,7 +120,7 @@ export default function GoalsPage() {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<label className="text-sm font-medium text-muted">Quarter</label>
|
||||
|
||||
@@ -62,7 +62,7 @@ export default function ImplementationOutcomes() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader title="Implementation & Outcomes" subtitle="Are closed deals going live and becoming references?" />
|
||||
<PageHeader title="Implementation & Outcomes" />
|
||||
|
||||
{/* Health Summary */}
|
||||
<div className="grid grid-cols-3 gap-3 mb-6">
|
||||
|
||||
@@ -113,7 +113,7 @@ export default function ExecutiveOverview() {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<Scorecard label="Total Accounts" value={kpis.totalAccounts} />
|
||||
|
||||
@@ -180,7 +180,7 @@ export default function PipelineDeepDive() {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<ExportButton table="pipeline" />
|
||||
|
||||
@@ -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>
|
||||
Back
|
||||
</button>
|
||||
<PageHeader title={selectedPlaybook.play_name} subtitle={selectedPlaybook.description || 'Campaign playbook'} />
|
||||
<PageHeader title={selectedPlaybook.play_name} />
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
@@ -221,7 +221,7 @@ export default function PlaybooksPage() {
|
||||
|
||||
return (
|
||||
<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">
|
||||
{playbooks.map(pb => {
|
||||
|
||||
@@ -16,7 +16,7 @@ const DATE_PRESETS: { value: DatePreset; label: string }[] = [
|
||||
|
||||
export function TopBar() {
|
||||
const { filters, setDistricts, setDatePreset, refresh, isLoading, lastRefreshed, clearAllFilters, clearCrossFilter } = useData();
|
||||
const { title, subtitle } = usePageTitle();
|
||||
const { title } = usePageTitle();
|
||||
const [showDistrictDropdown, setShowDistrictDropdown] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -56,10 +56,7 @@ export function TopBar() {
|
||||
{/* Page title */}
|
||||
<div className="hidden lg:flex flex-1 items-center gap-2 min-w-0">
|
||||
{title && (
|
||||
<>
|
||||
<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>
|
||||
|
||||
|
||||
@@ -5,16 +5,15 @@ import { usePageTitle } from '@/lib/page-title-context';
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
export function PageHeader({ title, subtitle }: PageHeaderProps) {
|
||||
export function PageHeader({ title }: PageHeaderProps) {
|
||||
const { setPageTitle } = usePageTitle();
|
||||
|
||||
useEffect(() => {
|
||||
setPageTitle(title, subtitle);
|
||||
return () => setPageTitle('', '');
|
||||
}, [title, subtitle, setPageTitle]);
|
||||
setPageTitle(title);
|
||||
return () => setPageTitle('');
|
||||
}, [title, setPageTitle]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -2,33 +2,25 @@
|
||||
|
||||
import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
||||
|
||||
interface PageTitleState {
|
||||
interface PageTitleContextValue {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
interface PageTitleContextValue extends PageTitleState {
|
||||
setPageTitle: (title: string, subtitle: string) => void;
|
||||
setPageTitle: (title: string) => void;
|
||||
}
|
||||
|
||||
const PageTitleContext = createContext<PageTitleContextValue>({
|
||||
title: '',
|
||||
subtitle: '',
|
||||
setPageTitle: () => {},
|
||||
});
|
||||
|
||||
export function PageTitleProvider({ children }: { children: ReactNode }) {
|
||||
const [state, setState] = useState<PageTitleState>({ title: '', subtitle: '' });
|
||||
const [title, setTitle] = useState('');
|
||||
|
||||
const setPageTitle = useCallback((title: string, subtitle: string) => {
|
||||
setState(prev => {
|
||||
if (prev.title === title && prev.subtitle === subtitle) return prev;
|
||||
return { title, subtitle };
|
||||
});
|
||||
const setPageTitle = useCallback((t: string) => {
|
||||
setTitle(prev => prev === t ? prev : t);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PageTitleContext.Provider value={{ ...state, setPageTitle }}>
|
||||
<PageTitleContext.Provider value={{ title, setPageTitle }}>
|
||||
{children}
|
||||
</PageTitleContext.Provider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user