From d98da9a1ea22f0cc5cbbbfb9874b30e9677eb2a8 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Mon, 16 Mar 2026 16:15:08 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20wire=20role-based=20views=20=E2=80=94=20?=
 =?UTF-8?q?sidebar=20auth,=20user=20display,=20table=20tabs,=20card=20acti?=
 =?UTF-8?q?ons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar: use useAuth() for isAdmin and pass auth user to NavAccountCard
- NavAccountCard: fix bug where items prop was ignored (used placeholderAccounts)
- TopBar: replace hardcoded "SM" initials with user.initials from auth
- All Leads: add "My Leads" tab filtering by assignedAgent matching user
- Lead Card: add role-aware action buttons (Call/Disposition for assigned leads)
- Lead Workspace: pass onLogCall/onUpdateStatus handlers to LeadCard

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../base-components/nav-account-card.tsx      |  2 +-
 src/components/layout/sidebar.tsx             | 12 ++++++++++-
 src/components/layout/top-bar.tsx             |  5 ++++-
 src/components/leads/lead-card.tsx            | 14 ++++++++++++-
 src/pages/all-leads.tsx                       | 20 ++++++++++++++++---
 src/pages/lead-workspace.tsx                  | 10 ++++++++++
 6 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/components/application/app-navigation/base-components/nav-account-card.tsx b/src/components/application/app-navigation/base-components/nav-account-card.tsx
index 8da9970..67836a7 100644
--- a/src/components/application/app-navigation/base-components/nav-account-card.tsx
+++ b/src/components/application/app-navigation/base-components/nav-account-card.tsx
@@ -167,7 +167,7 @@ export const NavAccountCard = ({
     const triggerRef = useRef<HTMLDivElement>(null);
     const isDesktop = useBreakpoint("lg");
 
-    const selectedAccount = placeholderAccounts.find((account) => account.id === selectedAccountId);
+    const selectedAccount = items.find((account) => account.id === selectedAccountId);
 
     if (!selectedAccount) {
         console.warn(`Account with ID ${selectedAccountId} not found in <NavAccountCard />`);
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 177a5ff..8f8e0df 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -110,7 +110,17 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
 
             {/* Account card */}
             <div className="mt-auto flex flex-col gap-5 px-2 py-4 lg:gap-6 lg:px-4 lg:py-4">
-                <NavAccountCard onSignOut={handleSignOut} />
+                <NavAccountCard
+                    items={[{
+                        id: 'current',
+                        name: user.name,
+                        email: user.email,
+                        avatar: '',
+                        status: 'online' as const,
+                    }]}
+                    selectedAccountId="current"
+                    onSignOut={handleSignOut}
+                />
             </div>
         </aside>
     );
diff --git a/src/components/layout/top-bar.tsx b/src/components/layout/top-bar.tsx
index c833e36..6f5a6b5 100644
--- a/src/components/layout/top-bar.tsx
+++ b/src/components/layout/top-bar.tsx
@@ -1,6 +1,7 @@
 import { SearchLg } from "@untitledui/icons";
 import { Avatar } from "@/components/base/avatar/avatar";
 import { Input } from "@/components/base/input/input";
+import { useAuth } from "@/providers/auth-provider";
 
 interface TopBarProps {
     title: string;
@@ -8,6 +9,8 @@ interface TopBarProps {
 }
 
 export const TopBar = ({ title, subtitle }: TopBarProps) => {
+    const { user } = useAuth();
+
     return (
         <header className="flex h-16 items-center justify-between border-b border-secondary bg-primary px-6">
             <div className="flex flex-col justify-center">
@@ -23,7 +26,7 @@ export const TopBar = ({ title, subtitle }: TopBarProps) => {
                         aria-label="Search"
                     />
                 </div>
-                <Avatar initials="SM" size="sm" />
+                <Avatar initials={user.initials} size="sm" />
             </div>
         </header>
     );
diff --git a/src/components/leads/lead-card.tsx b/src/components/leads/lead-card.tsx
index 117676e..60f57f2 100644
--- a/src/components/leads/lead-card.tsx
+++ b/src/components/leads/lead-card.tsx
@@ -14,6 +14,8 @@ interface LeadCardProps {
     onMessage: (lead: Lead) => void;
     onMarkSpam: (lead: Lead) => void;
     onMerge: (lead: Lead) => void;
+    onLogCall?: (lead: Lead) => void;
+    onUpdateStatus?: (lead: Lead) => void;
 }
 
 const sourceLabelMap: Record<string, string> = {
@@ -29,7 +31,7 @@ const sourceLabelMap: Record<string, string> = {
     OTHER: 'Other',
 };
 
-export const LeadCard = ({ lead, onAssign, onMessage, onMarkSpam, onMerge }: LeadCardProps) => {
+export const LeadCard = ({ lead, onAssign, onMessage, onMarkSpam, onMerge, onLogCall, onUpdateStatus }: LeadCardProps) => {
     const firstName = lead.contactName?.firstName ?? '';
     const lastName = lead.contactName?.lastName ?? '';
     const name = `${firstName} ${lastName}`.trim() || 'Unknown';
@@ -38,6 +40,7 @@ export const LeadCard = ({ lead, onAssign, onMessage, onMarkSpam, onMerge }: Lea
     const sourceLabel = lead.leadSource ? sourceLabelMap[lead.leadSource] ?? lead.leadSource : '';
     const isSpam = (lead.spamScore ?? 0) >= 60;
     const isDuplicate = lead.isDuplicate === true;
+    const isAssigned = lead.assignedAgent !== null && lead.leadStatus !== 'NEW';
 
     return (
         <div
@@ -99,6 +102,15 @@ export const LeadCard = ({ lead, onAssign, onMessage, onMarkSpam, onMerge }: Lea
                             Merge
                         </Button>
                     </>
+                ) : isAssigned ? (
+                    <>
+                        <Button size="sm" color="primary" onClick={() => onLogCall?.(lead)}>
+                            Call
+                        </Button>
+                        <Button size="sm" color="secondary" onClick={() => onUpdateStatus?.(lead)}>
+                            Disposition
+                        </Button>
+                    </>
                 ) : (
                     <>
                         <Button size="sm" color="primary" onClick={() => onAssign(lead)}>
diff --git a/src/pages/all-leads.tsx b/src/pages/all-leads.tsx
index f92d81a..40fb1af 100644
--- a/src/pages/all-leads.tsx
+++ b/src/pages/all-leads.tsx
@@ -9,9 +9,10 @@ import { LeadTable } from '@/components/leads/lead-table';
 import { BulkActionBar } from '@/components/leads/bulk-action-bar';
 import { FilterPills } from '@/components/leads/filter-pills';
 import { useLeads } from '@/hooks/use-leads';
+import { useAuth } from '@/providers/auth-provider';
 import type { LeadSource, LeadStatus } from '@/types/entities';
 
-type TabKey = 'new' | 'all';
+type TabKey = 'new' | 'my-leads' | 'all';
 
 type ActiveFilter = {
     key: string;
@@ -22,6 +23,7 @@ type ActiveFilter = {
 const PAGE_SIZE = 25;
 
 export const AllLeadsPage = () => {
+    const { user } = useAuth();
     const [tab, setTab] = useState<TabKey>('new');
     const [selectedIds, setSelectedIds] = useState<string[]>([]);
     const [sortField, setSortField] = useState('createdAt');
@@ -31,6 +33,7 @@ export const AllLeadsPage = () => {
     const [currentPage, setCurrentPage] = useState(1);
 
     const statusFilter: LeadStatus | undefined = tab === 'new' ? 'NEW' : undefined;
+    const myLeadsOnly = tab === 'my-leads';
 
     const { leads: filteredLeads, total } = useLeads({
         source: sourceFilter ?? undefined,
@@ -93,9 +96,17 @@ export const AllLeadsPage = () => {
         return sorted;
     }, [filteredLeads, sortField, sortDirection]);
 
+    // Apply "My Leads" filter when on that tab
+    const displayLeads = useMemo(() => {
+        if (myLeadsOnly) {
+            return sortedLeads.filter((l) => l.assignedAgent === user.name);
+        }
+        return sortedLeads;
+    }, [sortedLeads, myLeadsOnly, user.name]);
+
     // Client-side pagination
-    const totalPages = Math.max(1, Math.ceil(sortedLeads.length / PAGE_SIZE));
-    const pagedLeads = sortedLeads.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+    const totalPages = Math.max(1, Math.ceil(displayLeads.length / PAGE_SIZE));
+    const pagedLeads = displayLeads.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
 
     const handleSort = (field: string) => {
         if (field === sortField) {
@@ -139,8 +150,11 @@ export const AllLeadsPage = () => {
         setCurrentPage(1);
     };
 
+    const myLeadsCount = sortedLeads.filter((l) => l.assignedAgent === user.name).length;
+
     const tabItems = [
         { id: 'new', label: 'New', badge: tab === 'new' ? total : undefined },
+        { id: 'my-leads', label: 'My Leads', badge: tab === 'my-leads' ? myLeadsCount : undefined },
         { id: 'all', label: 'All Leads', badge: tab === 'all' ? total : undefined },
     ];
 
diff --git a/src/pages/lead-workspace.tsx b/src/pages/lead-workspace.tsx
index 6450d2b..4852c7b 100644
--- a/src/pages/lead-workspace.tsx
+++ b/src/pages/lead-workspace.tsx
@@ -37,6 +37,14 @@ export const LeadWorkspacePage = () => {
         // placeholder
     };
 
+    const handleLogCall = () => {
+        // placeholder
+    };
+
+    const handleUpdateStatus = () => {
+        // placeholder
+    };
+
     return (
         <div className="flex flex-1 flex-col">
             <TopBar title="Lead Workspace" subtitle="Ramaiah Memorial Hospital · Last 24 hours" />
@@ -69,6 +77,8 @@ export const LeadWorkspacePage = () => {
                                     onMessage={handleMessage}
                                     onMarkSpam={handleMarkSpam}
                                     onMerge={handleMerge}
+                                    onLogCall={handleLogCall}
+                                    onUpdateStatus={handleUpdateStatus}
                                 />
                             ))}
                             {displayLeads.length === 0 && (