Add Renewal Timeline visualization to Account Explorer

Collapsible SVG timeline showing Next Renewal and Anchor Contract dates
for all filtered accounts. Color-coded account names by opportunity status
(green=won/late stage, yellow=early stage, black=lost, gray=none). Includes
dollar amount slider filter, Today marker, and year/quarter gridlines.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-09-01 08:37:40 -04:00
parent d2d5632086
commit 938e642d68
2 changed files with 507 additions and 0 deletions

View File

@@ -12,6 +12,7 @@ import { ExportButton } from '@/components/ui/ExportButton';
import { scoreAccountHealth, HEALTH_LEVEL_COLORS } from '@/lib/scoring';
import { AccountNotes } from '@/components/account/AccountNotes';
import { ContactMap } from '@/components/account/ContactMap';
import { RenewalTimeline } from '@/components/ui/RenewalTimeline';
import {
BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell,
} from 'recharts';
@@ -546,6 +547,9 @@ export default function AccountExplorer() {
</ChartCard>
</div>
{/* Renewal Timeline */}
<RenewalTimeline accounts={filteredAccounts} pipeline={pipeline} />
{/* Search & Filters */}
<div className="flex flex-wrap gap-2 mb-2">
<input