Add cross-linking between all account/activity references

Make account names and activity items clickable across all views:
- Account Explorer activity timeline items open detail overlay
- Pipeline table and deal detail link to Account Explorer
- Implementation kanban cards link to Account Explorer
- Executive Overview NBA account names link to Account Explorer
- Playbooks account progress links to Account Explorer
- Activities overlay and Follow-Ups view link to Account Explorer

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(dashboard)/accounts/page.tsx

@@ -5,9 +5,10 @@ import { PageHeader } from '@/components/ui/PageHeader';
 import { ChartCard } from '@/components/ui/ChartCard';
 import { Scorecard } from '@/components/ui/Scorecard';
 import { formatCurrency, CHART_COLORS, STATUS_COLORS, DISTRICT_SHORT, STAGE_COLORS, TIER_COLORS } from '@/lib/formatters';
-import { useMemo, useState, useCallback } from 'react';
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
 import { parseISO, format, differenceInDays, eachDayOfInterval, addMonths, addQuarters } from 'date-fns';
-import { AccountRecord, STAGES, FORECAST_CATEGORIES, ACTIVITY_TYPES } from '@/types/data';
+import { AccountRecord, ActivityRecord, STAGES, FORECAST_CATEGORIES, ACTIVITY_TYPES } from '@/types/data';
 import { ExportButton } from '@/components/ui/ExportButton';
 import { scoreAccountHealth, HEALTH_LEVEL_COLORS } from '@/lib/scoring';
 import { AccountNotes } from '@/components/account/AccountNotes';
@@ -113,9 +114,19 @@ export default function AccountExplorer() {
   const [competitorFilter, setCompetitorFilter] = useState<string | null>(null);
   const [cpmFilter, setCpmFilter] = useState<string | null>(null);
   const [selectedAccount, setSelectedAccount] = useState<AccountRecord | null>(null);
+  const [selectedActivity, setSelectedActivity] = useState<ActivityRecord | null>(null);
   const [showCreateOpp, setShowCreateOpp] = useState(false);
   const [showAddActivity, setShowAddActivity] = useState(false);
   const [saving, setSaving] = useState(false);
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const accountParam = searchParams.get('account');
+    if (accountParam && accounts.length > 0) {
+      const found = accounts.find(a => a.Account_Name === accountParam);
+      if (found) setSelectedAccount(found);
+    }
+  }, [searchParams, accounts]);
 
   const createOpp = useCallback(async (form: Record<string, string>) => {
     setSaving(true);
@@ -601,7 +612,11 @@ export default function AccountExplorer() {
                 <div className="absolute left-3 top-0 bottom-0 w-px bg-card-border" />
                 <div className="space-y-4">
                   {accountActivities.slice(0, 20).map((a, i) => (
-                    <div key={i} className="flex items-start gap-3 relative">
+                    <div
+                      key={i}
+                      className="flex items-start gap-3 relative cursor-pointer hover:bg-brand-azure/5 -mx-2 px-2 py-1 rounded-lg transition"
+                      onClick={() => setSelectedActivity(a)}
+                    >
                       <div
                         className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 relative z-10"
                         style={{ backgroundColor: ACTIVITY_TYPE_COLORS[a.Activity_Type] || CHART_COLORS.navy }}
@@ -612,10 +627,12 @@ export default function AccountExplorer() {
                         <div className="flex items-center gap-2">
                           <span className="text-xs font-medium">{a.Activity_Type}</span>
                           <span className="text-[10px] text-muted">{format(parseISO(a.Activity_Date), 'MMM d, yyyy')}</span>
+                          {a.Status === 'Planned' && <span className="px-1.5 py-0.5 rounded text-[9px] font-bold bg-blue-100 text-blue-700">Planned</span>}
                         </div>
                         {a.Contact_Name && <div className="text-[10px] text-muted mt-0.5">with {a.Contact_Name}</div>}
                         {a.Notes && <div className="text-xs text-muted mt-1 bg-gray-50 rounded p-2">{a.Notes}</div>}
                       </div>
+                      <svg className="w-3.5 h-3.5 text-muted flex-shrink-0 mt-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="9 18 15 12 9 6" /></svg>
                     </div>
                   ))}
                 </div>
@@ -942,6 +959,80 @@ export default function AccountExplorer() {
           );
         })}
       </div>
+
+      {/* Activity Detail Overlay */}
+      {selectedActivity && (
+        <div className="fixed inset-0 z-50 flex justify-end" onClick={() => setSelectedActivity(null)}>
+          <div className="absolute inset-0 bg-black/30" />
+          <div className="relative w-full max-w-md bg-white shadow-2xl overflow-y-auto animate-in slide-in-from-right" onClick={e => e.stopPropagation()}>
+            <div className="sticky top-0 bg-[#1B1D36] text-white px-5 py-4 z-10">
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-[10px] uppercase tracking-wider text-white/60 mb-1">Activity Detail</div>
+                  <h2 className="text-base font-bold">{selectedActivity.Account_Name}</h2>
+                </div>
+                <button onClick={() => setSelectedActivity(null)} className="text-white/60 hover:text-white p-1">
+                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+                </button>
+              </div>
+            </div>
+            <div className="p-5 space-y-4">
+              <div className="bg-brand-azure/5 rounded-xl border border-brand-azure/20 p-4">
+                <div className="grid grid-cols-2 gap-3 text-xs">
+                  <div>
+                    <div className="text-[10px] text-muted uppercase">Type</div>
+                    <span className="inline-block mt-0.5 px-2 py-0.5 rounded-full text-[10px] text-white font-medium" style={{ backgroundColor: ACTIVITY_TYPE_COLORS[selectedActivity.Activity_Type] || CHART_COLORS.navy }}>
+                      {selectedActivity.Activity_Type}
+                    </span>
+                  </div>
+                  <div>
+                    <div className="text-[10px] text-muted uppercase">Date</div>
+                    <div className="font-semibold mt-0.5">{format(parseISO(selectedActivity.Activity_Date), 'MMMM d, yyyy')}</div>
+                  </div>
+                  <div>
+                    <div className="text-[10px] text-muted uppercase">Contact</div>
+                    <div className="font-medium mt-0.5">{selectedActivity.Contact_Name || '—'}</div>
+                  </div>
+                  <div>
+                    <div className="text-[10px] text-muted uppercase">District</div>
+                    <div className="font-medium mt-0.5">{DISTRICT_SHORT[selectedActivity.District_Name] || selectedActivity.District_Name}</div>
+                  </div>
+                  {selectedActivity.Status && (
+                    <div>
+                      <div className="text-[10px] text-muted uppercase">Status</div>
+                      <div className="font-medium mt-0.5">{selectedActivity.Status}</div>
+                    </div>
+                  )}
+                  {selectedActivity.Outcome && (
+                    <div>
+                      <div className="text-[10px] text-muted uppercase">Outcome</div>
+                      <div className="font-medium mt-0.5">{selectedActivity.Outcome}</div>
+                    </div>
+                  )}
+                  {selectedActivity.Play && (
+                    <div>
+                      <div className="text-[10px] text-muted uppercase">Play</div>
+                      <div className="font-medium mt-0.5">{selectedActivity.Play}</div>
+                    </div>
+                  )}
+                  {selectedActivity.Logged_By && (
+                    <div>
+                      <div className="text-[10px] text-muted uppercase">Logged By</div>
+                      <div className="font-medium mt-0.5">{selectedActivity.Logged_By}</div>
+                    </div>
+                  )}
+                </div>
+                {selectedActivity.Notes && (
+                  <div className="mt-3 pt-3 border-t border-brand-azure/20">
+                    <div className="text-[10px] text-muted uppercase mb-1">Notes</div>
+                    <div className="text-xs text-foreground bg-white rounded-lg p-3 border border-card-border">{selectedActivity.Notes}</div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/app/(dashboard)/activity/page.tsx

@@ -14,6 +14,7 @@ import { ActivityRecord, ACTIVITY_TYPES } from '@/types/data';
 import { ExportButton } from '@/components/ui/ExportButton';
 import { AccountNotes } from '@/components/account/AccountNotes';
 import { ContactMap } from '@/components/account/ContactMap';
+import Link from 'next/link';
 
 const TYPE_COLORS: Record<string, string> = {
   'Launch Briefing': CHART_COLORS.navy,
@@ -547,7 +548,7 @@ export default function ActivityDeepDive() {
               <div className="flex items-center justify-between">
                 <div>
                   <div className="text-[10px] uppercase tracking-wider text-white/60 mb-1">Activity Detail</div>
-                  <h2 className="text-base font-bold">{selectedActivity.Account_Name}</h2>
+                  <Link href={`/accounts?account=${encodeURIComponent(selectedActivity.Account_Name)}`} className="text-base font-bold hover:underline">{selectedActivity.Account_Name}</Link>
                 </div>
                 <button onClick={() => setSelectedActivity(null)} className="text-white/60 hover:text-white p-1">
                   <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
@@ -833,7 +834,7 @@ function FollowUpsView({
                     <div className={`w-2 h-2 rounded-full flex-shrink-0 ${daysOverdue > 7 ? 'bg-red-500' : daysOverdue > 3 ? 'bg-amber-500' : 'bg-blue-500'}`} />
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2">
-                        <span className="text-sm font-semibold truncate">{item.Account_Name}</span>
+                        <Link href={`/accounts?account=${encodeURIComponent(item.Account_Name)}`} className="text-sm font-semibold truncate text-brand-azure hover:underline" onClick={e => e.stopPropagation()}>{item.Account_Name}</Link>
                         <span className="px-2 py-0.5 rounded-full text-[10px] text-white font-medium" style={{ backgroundColor: TYPE_COLORS[item.Activity_Type] || CHART_COLORS.navy }}>
                           {item.Activity_Type}
                         </span>

src/app/(dashboard)/implementation/page.tsx

@@ -5,6 +5,7 @@ import { Scorecard } from '@/components/ui/Scorecard';
 import { ChartCard } from '@/components/ui/ChartCard';
 import { PageHeader } from '@/components/ui/PageHeader';
 import { formatCurrency, CHART_COLORS, HEALTH_COLORS, DISTRICT_SHORT } from '@/lib/formatters';
+import Link from 'next/link';
 import { useMemo, useState } from 'react';
 import {
   BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Cell,
@@ -114,7 +115,7 @@ export default function ImplementationOutcomes() {
                   return (
                     <div key={t.Account_Name} className="bg-white border border-card-border rounded-lg p-3 shadow-sm hover:shadow transition">
                       <div className="flex items-start justify-between gap-2">
-                        <div className="text-xs font-medium text-foreground leading-tight">{t.Account_Name}</div>
+                        <Link href={`/accounts?account=${encodeURIComponent(t.Account_Name)}`} className="text-xs font-medium text-brand-azure hover:underline leading-tight">{t.Account_Name}</Link>
                         {t.Health_Status && (
                           <div
                             className="w-2 h-2 rounded-full flex-shrink-0 mt-1"

src/app/(dashboard)/pipeline/page.tsx

@@ -13,6 +13,7 @@ import { parseISO, differenceInDays, format } from 'date-fns';
 import { PipelineRecord } from '@/types/data';
 import { ExportButton } from '@/components/ui/ExportButton';
 import { scoreDealRisk, RISK_LEVEL_COLORS } from '@/lib/scoring';
+import Link from 'next/link';
 
 
 function DealDetailPanel({ deal, onClose, activities, allDeals }: { deal: PipelineRecord; onClose: () => void; activities: { Account_Name: string; Activity_Date: string }[]; allDeals: PipelineRecord[] }) {
@@ -20,7 +21,12 @@ function DealDetailPanel({ deal, onClose, activities, allDeals }: { deal: Pipeli
   return (
     <div className="fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-2xl z-50 overflow-y-auto">
       <div className="sticky top-0 bg-white border-b border-card-border px-5 py-4 flex items-center justify-between">
-        <h3 className="font-bold text-foreground">{deal.Account_Name}</h3>
+        <div>
+          <h3 className="font-bold text-foreground">{deal.Account_Name}</h3>
+          <Link href={`/accounts?account=${encodeURIComponent(deal.Account_Name)}`} className="text-[10px] text-brand-azure hover:underline">
+            View Account →
+          </Link>
+        </div>
         <button onClick={onClose} className="p-1 rounded hover:bg-gray-100">
           <svg className="w-5 h-5 text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
         </button>
@@ -309,7 +315,15 @@ export default function PipelineDeepDive() {
                 const risk = scoreDealRisk(deal, activities as Parameters<typeof scoreDealRisk>[1], pipeline);
                 return (
                   <tr key={deal.Opportunity_ID} className="border-b border-card-border/50 hover:bg-gray-50 cursor-pointer transition" onClick={() => setSelectedDeal(deal)}>
-                    <td className="py-2 px-2 font-medium">{deal.Account_Name}</td>
+                    <td className="py-2 px-2 font-medium">
+                      <Link
+                        href={`/accounts?account=${encodeURIComponent(deal.Account_Name)}`}
+                        className="text-brand-azure hover:underline"
+                        onClick={e => e.stopPropagation()}
+                      >
+                        {deal.Account_Name}
+                      </Link>
+                    </td>
                     <td className="py-2 px-2 text-right font-medium">{formatCurrency(deal.Amount_USD, true)}</td>
                     <td className="py-2 px-2">
                       <span className="px-2 py-0.5 rounded-full text-[10px] text-white font-medium" style={{ backgroundColor: STAGE_COLORS[deal.Stage] }}>{deal.Stage}</span>

src/app/(dashboard)/playbooks/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { PageHeader } from '@/components/ui/PageHeader';
 import { ChartCard } from '@/components/ui/ChartCard';
+import Link from 'next/link';
 
 interface PlaybookStep {
   step: number;
@@ -182,7 +183,7 @@ export default function PlaybooksPage() {
                   return (
                     <div key={p.id} className="flex items-center gap-3 py-1.5 border-b border-card-border/50 last:border-0">
                       <div className="flex-1 min-w-0">
-                        <div className="text-xs font-semibold text-foreground">{p.Account_Name}</div>
+                        <Link href={`/accounts?account=${encodeURIComponent(p.Account_Name)}`} className="text-xs font-semibold text-brand-azure hover:underline">{p.Account_Name}</Link>
                         <div className="flex items-center gap-2 mt-1">
                           <div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
                             <div className="h-full rounded-full transition-all" style={{ width: `${pct}%`, backgroundColor: STEP_STATUS_COLORS[p.status] || '#94A3B8' }} />

src/components/ui/NextBestAction.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
+import Link from 'next/link';
 import { AccountRecord, ActivityRecord, PipelineRecord } from '@/types/data';
 import { differenceInDays, parseISO, format } from 'date-fns';
 
@@ -132,7 +133,7 @@ export function NextBestAction({ accounts, activities, pipeline, limit = 8 }: {
           <div className="flex items-start justify-between gap-2">
             <div className="min-w-0">
               <div className="flex items-center gap-2 mb-0.5">
-                <span className="text-xs font-bold text-foreground truncate">{action.account}</span>
+                <Link href={`/accounts?account=${encodeURIComponent(action.account)}`} className="text-xs font-bold text-brand-azure hover:underline truncate">{action.account}</Link>
                 <span className={`px-1.5 py-0.5 rounded text-[9px] font-semibold ${PRIORITY_LABELS[action.priority].color}`}>
                   {PRIORITY_LABELS[action.priority].text}
                 </span>