From a1310722268957ab224559b26a842bbac2591579 Mon Sep 17 00:00:00 2001
From: Chris Olson <christopher.olson@gmail.com>
Date: Tue, 1 Sep 2026 11:09:30 -0400
Subject: [PATCH] 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>
---
 src/app/(dashboard)/accounts/page.tsx | 74 +++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/app/(dashboard)/accounts/page.tsx b/src/app/(dashboard)/accounts/page.tsx
index aa6386c..d2f23a5 100644
--- a/src/app/(dashboard)/accounts/page.tsx
+++ b/src/app/(dashboard)/accounts/page.tsx
@@ -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>
     );
   }