JoeBot/campaign-command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix activity detail overlay on Account Explorer detail view

Browse Source 
The overlay was only in the account list return block, not the account
detail return block, so clicking an activity set state but never rendered.
Duplicated the overlay into the selectedAccount detail view.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chris Olson
2026-09-01 11:09:30 -04:00
parent 4266fef8dc
commit a131072226
1 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/(dashboard)/accounts/page.tsx
View File

@@ -670,6 +670,80 @@ export default function AccountExplorer() {
</div>
</div>
)}
{/* Activity Detail Overlay (account detail view) */}
{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>
);
}