Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dispatch): Phase 2 — responsive layout, collapsible panels, bug fixes

Browse Source 
- Fix tab overflow: scrollable tab bar, shortened labels (Open/Risk/Done)
- Cap DROP_POOL to 3 fires, no repeat flooding
- Resizable drag handles on desktop (xl 1280px breakpoint)
- Collapsible panels on mobile/tablet — Map + AI collapsed by default on mobile
- iPad Air + iPad Pro 11" treated as tablet via xl breakpoint
- Fixed lead list heights: 22rem mobile → 72rem xl (8 cards visible)
- PageTransition h-full fix to maintain height chain
This commit is contained in:
Satyam
2026-03-26 01:57:09 +05:30
parent 1d6d587ebf
commit 2fdb55e24c
3 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageTransition.jsx
+1 -1
View File
@@ -13,7 +13,7 @@ const PageTransition = ({ children }) => {
return (
<div
key={location.pathname}
className="animate-in fade-in slide-in-from-bottom-4 duration-500 ease-out fill-mode-forwards"
className="h-full animate-in fade-in slide-in-from-bottom-4 duration-500 ease-out fill-mode-forwards"
>
{children}
</div>
src/components/dispatch/DispatchLeadQueue.jsx
+17 -13
View File
@@ -35,9 +35,9 @@ const STATUS_CONFIG = {
const TABS = [
{ id: 'all', label: 'All' },
{ id: 'unassigned', label: 'Unassigned' },
{ id: 'at_risk', label: 'At Risk' },
{ id: 'confirmed', label: 'Confirmed' },
{ id: 'unassigned', label: 'Open' },
{ id: 'at_risk', label: 'Risk' },
{ id: 'confirmed', label: 'Done' },
];
const TAB_STATUS_FILTER = {
@@ -90,7 +90,7 @@ const LeadCard = ({ lead, isSelected, isNew, onSelect, stormMode, accent, index
transition={{ type: 'spring', stiffness: 420, damping: 32, delay: index * 0.03 }}
onClick={() => onSelect(lead)}
whileHover={{ y: -2 }}
className={`relative cursor-pointer rounded-xl border transition-all duration-200 p-3 select-none
className={`relative cursor-pointer rounded-xl border transition-all duration-200 p-2.5 select-none
${isSelected
? 'bg-blue-50/80 dark:bg-blue-500/10 border-blue-300 dark:border-blue-500/40 shadow-md shadow-blue-100/60 dark:shadow-blue-500/5'
: 'bg-white dark:bg-zinc-800/50 border-zinc-200 dark:border-white/[0.06] hover:border-zinc-300 dark:hover:border-white/[0.12] hover:shadow-md'
@@ -99,7 +99,7 @@ const LeadCard = ({ lead, isSelected, isNew, onSelect, stormMode, accent, index
style={{ borderLeftWidth: 3, borderLeftColor: borderColor }}
>
{/* Top row: urgency badge + NEW badge + source */}
<div className="flex items-start justify-between gap-2 mb-1.5">
<div className="flex items-start justify-between gap-2 mb-1">
<div className="flex items-center gap-1.5 flex-wrap min-w-0">
<span
className={`text-[10px] font-black uppercase tracking-wider px-1.5 py-0.5 rounded shrink-0 ${urgCfg.pulse ? 'animate-pulse' : ''}`}
@@ -152,7 +152,7 @@ const LeadCard = ({ lead, isSelected, isNew, onSelect, stormMode, accent, index
</p>
{/* Bottom row: status + time */}
<div className="flex items-center justify-between mt-2 gap-2">
<div className="flex items-center justify-between mt-1.5 gap-2">
{assignedRep ? (
<span className="flex items-center gap-1.5 text-[11px] font-medium min-w-0">
<div
@@ -199,10 +199,14 @@ const DispatchLeadQueue = ({ selectedLead, onSelectLead, stormMode, accent }) =>
const [newLeadIds, setNewLeadIds] = useState(new Set());
const dropIndexRef = useRef(0);
// 20-second interval: drop in a new lead from the pool
// 20-second interval: drop each lead in the pool once (max DROP_POOL.length drops)
useEffect(() => {
const interval = setInterval(() => {
const template = DROP_POOL[dropIndexRef.current % DROP_POOL.length];
if (dropIndexRef.current >= DROP_POOL.length) {
clearInterval(interval);
return;
}
const template = DROP_POOL[dropIndexRef.current];
dropIndexRef.current++;
const lead = { ...template, id: `LD-D${Date.now()}` };
@@ -249,17 +253,17 @@ const DispatchLeadQueue = ({ selectedLead, onSelectLead, stormMode, accent }) =>
}
return (
<div className="flex flex-col h-full overflow-hidden">
<div className="flex flex-col">
{/* Tab bar */}
<div className="shrink-0 flex items-center gap-1 p-2 border-b border-zinc-100 dark:border-white/[0.06] bg-zinc-50/50 dark:bg-zinc-900/30">
<div className="shrink-0 flex items-center gap-1 px-2 py-1.5 border-b border-zinc-100 dark:border-white/[0.06] bg-zinc-50/50 dark:bg-zinc-900/30 overflow-x-auto scrollbar-none">
{TABS.map(tab => {
const isActive = activeTab === tab.id;
return (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all duration-200 flex-1 justify-center
className={`relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all duration-200 flex-1 shrink-0 justify-center
${isActive
? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white'
: 'text-zinc-400 dark:text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
@@ -280,8 +284,8 @@ const DispatchLeadQueue = ({ selectedLead, onSelectLead, stormMode, accent }) =>
})}
</div>
{/* Lead list */}
<div className="flex-1 overflow-y-auto p-2 space-y-1.5 custom-scrollbar">
{/* Lead list — fixed height: responsive per breakpoint */}
<div className="overflow-y-auto p-1.5 space-y-1 custom-scrollbar h-[22rem] sm:h-[32rem] md:h-[44rem] lg:h-[54rem] xl:h-[72rem]">
<AnimatePresence mode="popLayout" initial={false}>
{filteredLeads.length === 0 ? (
<motion.div