); return (

{/* Sarlavha */}

{col.title} {orders.length}

{DB.fmtSum(total)} so'm

{/* Karta zonasi */}

{ if (dropAllowed) { e.preventDefault(); if (reorderActive) dnd.setReorder(col.key, excluded.length); else dnd.setOver(col.key); } }} onDragLeave={(e) => { if (e.currentTarget === e.target) dnd.setOver(null); }} onDrop={(e) => { e.preventDefault(); dnd.onDrop(col.key); }} style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 6px 14px', display: 'flex', flexDirection: 'column', gap: 9, borderRadius: 'var(--r)', background: isOver && dropAllowed && !reorderActive ? 'var(--brand-tint)' : (dnd.dragging && dropAllowed && !reorderActive ? 'rgba(11,130,118,.04)' : 'transparent'), outline: isOver && dropAllowed && !reorderActive ? '2px dashed var(--brand)' : '2px dashed transparent', outlineOffset: -2, transition: 'background .15s, outline-color .15s', }}> {canAddHere && ( )} {orders.map((o, i) => ( {barBeforeId === o.id && }

cardDragOver(e, o.id)}> onEditOrder(o)} canEdit={canEditHere} canDrag={perms.moveAny} queueIndex={isPlanned ? i + 1 : null} canReorder={canReorder} dragging={dnd.draggingId === o.id} onDragStart={dnd.onDragStart} onDragEnd={dnd.onDragEnd} />

))} {barAtEnd && } {orders.length === 0 && !canAddHere && (

Bu bosqichda zakaz yo'q

)}

); } /* ---------- Doska ---------- */ function KanbanBoard({ orders, setOrders, user, perms, onAddOrder, onEditOrder, onDeleteOrder, showToast, reloadOrders, density, search, regionFilter, sortBy }) { // Bir zakazni ketma-ket ko'chirishlarni navbatga qo'yamiz (server ularni to'g'ri // tartibda oladi); har xil zakazlar parallel ketadi. Vaqtinchalik server xatosida // (sekin/5xx/tarmoq) REVERT QILMAYMIZ — optimistik holat qoladi va qayta urinamiz. // Faqat haqiqiy rad etishда (4xx — ruxsat/validatsiya) serverga moslaymiz. const moveChains = useRef({}); // Faqat BITTA kartani orqaga qaytaradi (butun doskani emas) — boshqa ko'chirishlarni buzmaydi. function revertCard(orderId, status, deadline) { setOrders((prev) => prev.map((o) => (o.id === orderId ? { ...o, status, ...(deadline !== undefined ? { deadline } : {}) } : o))); } async function persistMove(fn, revert) { const RETRIES = 4; for (let a = 0; a <= RETRIES; a++) { try { await fn(); return; // muvaffaqiyat — optimistik holat to'g'ri } catch (ex) { const st = ex && ex.status; if (st && st >= 400 && st < 500) { // haqiqiy rad (ruxsat/validatsiya) — FAQAT shu kartani qaytaramiz showToast((ex && ex.message) || 'Ruxsat yo`q'); if (revert) revert(); return; } if (a < RETRIES) { await new Promise((r) => setTimeout(r, 400 * (a + 1))); continue; } // vaqtinchalik — qayta return; // oxirigacha muvaffaqiyatsiz — optimistik holat qoladi (revert yo'q) } } } // Bir zakaz ko'chirishlarini navbatga qo'yamiz (tartib to'g'ri bo'lsin); har xil zakazlar parallel. function queueMove(orderId, fn, revert) { const prev = moveChains.current[orderId] || Promise.resolve(); const next = prev.then(() => persistMove(fn, revert)).catch(() => {}); moveChains.current[orderId] = next; } // Eski nomlar bilan moslik (izohlar/boshqa amallar uchun) const onApiError = (ex) => { showToast((ex && ex.message) || 'Server xatosi'); if (reloadOrders) reloadOrders(); }; const [openOrder, setOpenOrder] = useState(null); const [deadlineFor, setDeadlineFor] = useState(null); // {orderId} const [draggingId, setDraggingId] = useState(null); const [overCol, setOverCol] = useState(null); const [reorderCol, setReorderCol] = useState(null); const [reorderIndex, setReorderIndex] = useState(null); const dragRef = useRef(null); const filtered = useMemo(() => orders.filter(o => { if (regionFilter !== 'all' && o.region !== regionFilter) return false; if (search) { const s = search.toLowerCase(); const hit = DB.distributorName(o.distributorId).toLowerCase().includes(s) || o.code.toLowerCase().includes(s) || DB.regionName(o.region).toLowerCase().includes(s); if (!hit) return false; } return true; }), [orders, search, regionFilter]); const byCol = useMemo(() => { const m = {}; DB.COLUMNS.forEach(c => m[c.key] = []); filtered.forEach(o => m[o.status].push(o)); const dl = (o) => (o.deadline ? new Date(o.deadline).getTime() : Infinity); // deadline yo'q — oxiriga const nameOf = (o) => DB.distributorName(o.distributorId).toLowerCase(); const cmp = { az: (a, b) => nameOf(a).localeCompare(nameOf(b)), za: (a, b) => nameOf(b).localeCompare(nameOf(a)), date: (a, b) => dl(a) - dl(b) || (new Date(a.createdAt) - new Date(b.createdAt)), }[sortBy] || ((a, b) => (a.order || 0) - (b.order || 0)); const ct = (o) => (o.createdAt ? new Date(o.createdAt).getTime() : 0); Object.entries(m).forEach(([key, arr]) => { // Rejalangan ustun — DOIM eng yaqin deadline birinchida (umumiy saralash ta'sir qilmaydi) if (key === 'planned') arr.sort((a, b) => dl(a) - dl(b) || (a.order || 0) - (b.order || 0)); // Rejalanmagan ustun — DOIM eng eski kiritilgan zakaz tepada (vaqt bo'yicha, eskidan-yangiga) else if (key === 'unplanned') arr.sort((a, b) => ct(a) - ct(b)); else arr.sort(cmp); }); return m; }, [filtered, sortBy]); function canDropIn(targetKey) { const o = dragRef.current; if (!o) return false; if (o.status === targetKey) { // bir ustun ichida: faqat Rejalangan navbatini Generalniy Menejer o'zgartiradi return targetKey === 'planned' && perms.reorderQueue; } // Rejalanmagan → Rejalangan : faqat plan ruxsati borlar if (o.status === 'unplanned' && targetKey === 'planned') return perms.plan; // "Rejalangan"dan keyingi ustunlar (Yuklanayotgan/Yo'ldagi/Yetkazilgan) if (DB.COL_INDEX[targetKey] > DB.COL_INDEX['planned']) { if (!perms.moveBeyondPlanned) return false; // #3: regional menejer o'tkaza olmaydi if (!o.deadline) return false; // #4: sanasi yo'q karta o'tmaydi } // boshqa ustunlar orasida ko'chirish return perms.moveAny; } function onDragStart(e, order) { dragRef.current = order; setDraggingId(order.id); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', order.id); } catch (_) {} } function onDragEnd() { setDraggingId(null); setOverCol(null); setReorderCol(null); setReorderIndex(null); dragRef.current = null; } function setReorder(colKey, idx) { setReorderCol(colKey); setReorderIndex(idx); setOverCol(colKey); } function applyMove(orderId, targetKey, deadline) { applyMoveAt(orderId, targetKey, null, deadline); } function applyMoveAt(orderId, targetKey, index, deadline) { setOrders(prev => { const moving = prev.find(o => o.id === orderId); if (!moving) return prev; const list = prev.filter(o => o.status === targetKey && o.id !== orderId).sort((a, b) => (a.order || 0) - (b.order || 0)); const idx = index == null ? list.length : Math.max(0, Math.min(index, list.length)); const newMoving = { ...moving, status: targetKey, deadline: deadline !== undefined ? deadline : (targetKey === 'unplanned' ? null : moving.deadline) }; list.splice(idx, 0, newMoving); const pos = {}; list.forEach((o, i) => pos[o.id] = i); return prev.map(o => { if (o.id === orderId) return { ...newMoving, order: pos[orderId] }; if (o.status === targetKey && pos[o.id] != null) return { ...o, order: pos[o.id] }; return o; }); }); } function onDrop(targetKey) { const o = dragRef.current; const rCol = reorderCol, rIdx = reorderIndex; setOverCol(null); setDraggingId(null); setReorderCol(null); setReorderIndex(null); if (!o) return; if (o.status === targetKey) { if (targetKey === 'planned' && perms.reorderQueue && rCol === 'planned' && rIdx != null) { const plannedSorted = orders.filter(x => x.status === 'planned').sort((a, b) => (a.order || 0) - (b.order || 0)); const oldPos = plannedSorted.findIndex(x => x.id === o.id); if (rIdx !== oldPos) { applyMoveAt(o.id, 'planned', rIdx); showToast('Navbat yangilandi'); queueMove(o.id, () => API.reorderOrder(o.id, rIdx), () => { if (reloadOrders) reloadOrders(); }); } } else if (targetKey === 'planned' && !perms.reorderQueue) { showToast('Navbatni faqat Generalniy Menejer oʼzgartiradi'); } dragRef.current = null; return; } if (!canDropIn(targetKey)) { const beyondPlanned = DB.COL_INDEX[targetKey] > DB.COL_INDEX['planned']; if (o.status === 'unplanned' && targetKey === 'planned') { showToast('Rejalashtirish faqat super adminlar uchun'); } else if (beyondPlanned && !perms.moveBeyondPlanned) { showToast("Regional menejer 'Rejalangan'dan keyingi ustunga ko\u02bcchira olmaydi"); } else if (beyondPlanned && !o.deadline) { showToast('Avval sanasini belgilang (rejalashtiring) \u2014 sanasiz bu ustunga o\u02bctmaydi'); } else { showToast('Bu amal uchun ruxsatingiz yo\u02bcq'); } dragRef.current = null; return; } // Rejalanmagan → Rejalangan : majburiy deadline if (o.status === 'unplanned' && targetKey === 'planned') { setDeadlineFor({ orderId: o.id }); dragRef.current = null; return; } const fromStatus = o.status, fromDeadline = o.deadline; applyMove(o.id, targetKey); const col = DB.COLUMNS[DB.COL_INDEX[targetKey]]; showToast(`${o.code} → ${col.title}`); queueMove(o.id, () => API.moveOrder(o.id, targetKey), () => revertCard(o.id, fromStatus, fromDeadline)); dragRef.current = null; } function confirmDeadline(iso) { const oid = deadlineFor.orderId; const o = orders.find(x => x.id === oid); const fromStatus = o ? o.status : 'unplanned', fromDeadline = o ? o.deadline : null; applyMove(oid, 'planned', iso); showToast(`${o ? o.code : 'Zakaz'} rejalashtirildi`); queueMove(oid, () => API.moveOrder(oid, 'planned', iso), () => revertCard(oid, fromStatus, fromDeadline)); setDeadlineFor(null); } const dnd = { draggingId, dragging: !!draggingId, overCol, setOver: setOverCol, onDragStart, onDragEnd, onDrop, canDropIn, dragSource: dragRef.current ? dragRef.current.status : null, reorderCol, reorderIndex, setReorder }; return ( <>

{DB.COLUMNS.map((col, i) => ( ))}

{openOrder && ( o.id === openOrder.id) || openOrder} perms={perms} onClose={() => setOpenOrder(null)} onEdit={() => { const o = openOrder; setOpenOrder(null); onEditOrder(o); }} onSaveNote={async (id, note) => { try { const { order } = await API.updateOrderNote(id, note); setOrders(prev => prev.map(o => (o.id === order.id ? order : o))); showToast('Izoh saqlandi'); } catch (ex) { onApiError(ex); throw ex; } }} onDelete={onDeleteOrder ? (() => { const o = openOrder; setOpenOrder(null); onDeleteOrder(o); }) : null} /> )} {deadlineFor && ( setDeadlineFor(null)} onConfirm={confirmDeadline} order={orders.find(o => o.id === deadlineFor.orderId)} /> )} ); } window.KanbanBoard = KanbanBoard;