);
-const PanelHeader = ({ title, subtitle, accent, right }) => (
+// PanelHeader — supports optional collapse toggle on mobile/tablet
+const PanelHeader = ({ title, subtitle, accent, right, collapsible, isCollapsed, onToggle }) => (
-
+
{title}
{subtitle &&
{subtitle}
}
- {right &&
{right}
}
+
+ {right && (
+
collapsible && e.stopPropagation()}>
+ {right}
+
+ )}
+ {collapsible && (
+
+ )}
+
);
// ---------------------------------------------------------------------------
-// KPI Card — bottom bar metric card
+// KPI Card
// ---------------------------------------------------------------------------
const KpiCard = ({ label, value, icon: Icon, accent, stormMode, pulse }) => (
-
-
+
-
{label}
-
{value}
+
{label}
+
{value}
{stormMode && pulse && (
@@ -53,29 +70,122 @@ const KpiCard = ({ label, value, icon: Icon, accent, stormMode, pulse }) => (
);
+// ---------------------------------------------------------------------------
+// ResizableHandle — desktop only (xl+)
+// ---------------------------------------------------------------------------
+const ResizableHandle = ({ onDrag }) => {
+ const dragging = useRef(false);
+ const lastX = useRef(0);
+
+ const onMouseDown = useCallback((e) => {
+ dragging.current = true;
+ lastX.current = e.clientX;
+ e.preventDefault();
+
+ const onMove = (ev) => {
+ if (!dragging.current) return;
+ const delta = ev.clientX - lastX.current;
+ lastX.current = ev.clientX;
+ onDrag(delta);
+ };
+ const onUp = () => {
+ dragging.current = false;
+ document.removeEventListener('mousemove', onMove);
+ document.removeEventListener('mouseup', onUp);
+ };
+ document.addEventListener('mousemove', onMove);
+ document.addEventListener('mouseup', onUp);
+ }, [onDrag]);
+
+ return (
+
+ );
+};
+
+// Animated collapse wrapper
+const CollapsePanel = ({ open, children }) => (
+
+ {open && (
+
+ {children}
+
+ )}
+
+);
+
// ---------------------------------------------------------------------------
// Main Page
// ---------------------------------------------------------------------------
const LynkDispatchPage = () => {
- const { theme } = useTheme();
- const { dispatchLeads } = useMockStore();
+ const { dispatchLeads, assignDispatchLead } = useMockStore();
const [selectedLead, setSelectedLead] = useState(null);
const [stormMode, setStormMode] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
+ const [leftWidth, setLeftWidth] = useState(300);
+ const [rightWidth, setRightWidth] = useState(320);
+
+ // xl = 1280px — treats all iPads (inc. Air 820/1180 & Pro 11" 834/1194) as tablet
+ const [isDesktop, setIsDesktop] = useState(() => window.innerWidth >= 1280);
+ const aiPanelRef = useRef(null);
+
+ useEffect(() => {
+ const handler = () => setIsDesktop(window.innerWidth >= 1280);
+ window.addEventListener('resize', handler);
+ return () => window.removeEventListener('resize', handler);
+ }, []);
+
+ // Collapse state — map & AI default-collapsed on small phones only
+ const [collapsed, setCollapsed] = useState(() => ({
+ queue: false,
+ map: window.innerWidth < 640,
+ ai: window.innerWidth < 640,
+ }));
+ const toggle = (key) => setCollapsed(p => ({ ...p, [key]: !p[key] }));
+
+ const dragLeft = useCallback((delta) => setLeftWidth(w => Math.min(440, Math.max(220, w + delta))), []);
+ const dragRight = useCallback((delta) => setRightWidth(w => Math.min(440, Math.max(260, w - delta))), []);
const handleSelectLead = (lead) => {
if (selectedLead?.id === lead.id) return;
setSelectedLead(lead);
setIsProcessing(true);
setTimeout(() => setIsProcessing(false), 1200);
+
+ // Mobile/tablet: expand AI panel and scroll to it
+ if (!isDesktop) {
+ setCollapsed(p => ({ ...p, ai: false }));
+ setTimeout(() => {
+ aiPanelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }, 120);
+ }
};
- const accent = stormMode ? '#F59E0B' : '#3B82F6';
- const unassigned = dispatchLeads.filter(l => l.status === 'unassigned').length;
+ const handleAssign = useCallback((leadId, repId) => {
+ assignDispatchLead(leadId, repId);
+ }, [assignDispatchLead]);
+
+ const handleDismissAfterAssign = useCallback(() => {
+ setSelectedLead(null);
+ }, []);
+
+ const accent = stormMode ? '#F59E0B' : '#3B82F6';
+ const unassigned = dispatchLeads.filter(l => l.status === 'unassigned').length;
return (
-
+
{/* Storm Banner */}
@@ -97,9 +207,8 @@ const LynkDispatchPage = () => {
)}
- {/* ── Header ─────────────────────────────────────────────────────── */}
-
- {/* Branding */}
+ {/* ── Header ── */}
+