Fix activity detail overlay on Account Explorer detail view
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:
@@ -670,6 +670,80 @@ export default function AccountExplorer() {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user