From c36802864c07c9334ccd48d3e398312fc64c9d81 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Tue, 31 Mar 2026 13:18:31 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20Lead=20Master=20=E2=80=94=20campaign=20?=
 =?UTF-8?q?filter=20pills=20+=20fixed-height=20table=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Campaign filter pills: clickable badges for each campaign + "No Campaign", toggle filtering
- Fixed-height layout: header/tabs/pills pinned, table fills viewport with internal scroll, pagination pinned at bottom

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/all-leads.tsx | 80 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 67 insertions(+), 13 deletions(-)

diff --git a/src/pages/all-leads.tsx b/src/pages/all-leads.tsx
index 664d1aa..eae6eb3 100644
--- a/src/pages/all-leads.tsx
+++ b/src/pages/all-leads.tsx
@@ -24,6 +24,7 @@ import { LeadActivitySlideout } from '@/components/leads/lead-activity-slideout'
 import { useLeads } from '@/hooks/use-leads';
 import { useAuth } from '@/providers/auth-provider';
 import { useData } from '@/providers/data-provider';
+import { cx } from '@/utils/cx';
 import type { Lead, LeadSource, LeadStatus } from '@/types/entities';
 
 type TabKey = 'new' | 'my-leads' | 'all';
@@ -57,7 +58,8 @@ export const AllLeadsPage = () => {
         search: searchQuery || undefined,
     });
 
-    const { agents, templates, leadActivities } = useData();
+    const { agents, templates, leadActivities, campaigns } = useData();
+    const [campaignFilter, setCampaignFilter] = useState<string | null>(null);
 
     // Client-side sorting
     const sortedLeads = useMemo(() => {
@@ -114,13 +116,19 @@ export const AllLeadsPage = () => {
         return sorted;
     }, [filteredLeads, sortField, sortDirection]);
 
-    // Apply "My Leads" filter when on that tab
+    // Apply "My Leads" + campaign filter
     const displayLeads = useMemo(() => {
+        let result = sortedLeads;
         if (myLeadsOnly) {
-            return sortedLeads.filter((l) => l.assignedAgent === user.name);
+            result = result.filter((l) => l.assignedAgent === user.name);
         }
-        return sortedLeads;
-    }, [sortedLeads, myLeadsOnly, user.name]);
+        if (campaignFilter) {
+            result = campaignFilter === '__none__'
+                ? result.filter((l) => !l.campaignId)
+                : result.filter((l) => l.campaignId === campaignFilter);
+        }
+        return result;
+    }, [sortedLeads, myLeadsOnly, user.name, campaignFilter]);
 
     // Client-side pagination
     const totalPages = Math.max(1, Math.ceil(displayLeads.length / PAGE_SIZE));
@@ -203,9 +211,9 @@ export const AllLeadsPage = () => {
         <div className="flex flex-1 flex-col overflow-hidden">
             <TopBar title="All Leads" subtitle={`${total} total`} />
 
-            <div className="flex flex-1 flex-col overflow-y-auto p-7">
+            <div className="flex flex-1 flex-col overflow-hidden">
                 {/* Tabs + Controls row */}
-                <div className="flex items-center justify-between">
+                <div className="flex shrink-0 items-center justify-between px-6 py-3 border-b border-secondary">
                     <div className="flex items-center gap-3">
                         <Button
                             href="/"
@@ -264,7 +272,7 @@ export const AllLeadsPage = () => {
 
                 {/* Active filters */}
                 {activeFilters.length > 0 && (
-                    <div className="mt-3">
+                    <div className="shrink-0 px-6 pt-2">
                         <FilterPills
                             filters={activeFilters}
                             onRemove={handleRemoveFilter}
@@ -273,9 +281,55 @@ export const AllLeadsPage = () => {
                     </div>
                 )}
 
+                {/* Campaign filter pills */}
+                {campaigns.length > 0 && (
+                    <div className="flex shrink-0 items-center gap-1.5 px-6 py-2 border-b border-secondary overflow-x-auto">
+                        <button
+                            onClick={() => { setCampaignFilter(null); setCurrentPage(1); }}
+                            className={cx(
+                                'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
+                                !campaignFilter
+                                    ? 'bg-brand-solid text-white'
+                                    : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
+                            )}
+                        >
+                            All
+                        </button>
+                        {campaigns.map(c => {
+                            const isActive = campaignFilter === c.id;
+                            const count = filteredLeads.filter(l => l.campaignId === c.id).length;
+                            return (
+                                <button
+                                    key={c.id}
+                                    onClick={() => { setCampaignFilter(isActive ? null : c.id); setCurrentPage(1); }}
+                                    className={cx(
+                                        'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
+                                        isActive
+                                            ? 'bg-brand-solid text-white'
+                                            : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
+                                    )}
+                                >
+                                    {c.campaignName ?? 'Untitled'} ({count})
+                                </button>
+                            );
+                        })}
+                        <button
+                            onClick={() => { setCampaignFilter(campaignFilter === '__none__' ? null : '__none__'); setCurrentPage(1); }}
+                            className={cx(
+                                'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
+                                campaignFilter === '__none__'
+                                    ? 'bg-brand-solid text-white'
+                                    : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
+                            )}
+                        >
+                            No Campaign ({filteredLeads.filter(l => !l.campaignId).length})
+                        </button>
+                    </div>
+                )}
+
                 {/* Bulk action bar */}
                 {selectedIds.length > 0 && (
-                    <div className="mt-3">
+                    <div className="shrink-0 px-6 pt-2">
                         <BulkActionBar
                             selectedCount={selectedIds.length}
                             onAssign={handleBulkAssign}
@@ -286,8 +340,8 @@ export const AllLeadsPage = () => {
                     </div>
                 )}
 
-                {/* Table */}
-                <div className="mt-3">
+                {/* Table — fills remaining space, scrolls internally */}
+                <div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-2">
                     <LeadTable
                         leads={pagedLeads}
                         onSelectionChange={setSelectedIds}
@@ -299,9 +353,9 @@ export const AllLeadsPage = () => {
                     />
                 </div>
 
-                {/* Pagination */}
+                {/* Pagination — pinned at bottom */}
                 {totalPages > 1 && (
-                    <div className="mt-3">
+                    <div className="shrink-0 border-t border-secondary px-6 py-3">
                         <PaginationPageDefault
                             page={currentPage}
                             total={totalPages}