לוח קנבן ב-React: ניהול משימות מותאם אישית עם DnD Kit

פיתוח לוח קנבן לניהול משימות באתר שלך

בואו נהיה כנים: כשפרויקט כולל יותר מעשרה אנשים, משימות הולכות לאיבוד בצ'אטים ובגיליונות אלקטרוניים. סדרי העדיפויות מתבלבלים, מועדי אספקה נדחים, ומנהלים מבזבזים שעות על סנכרון. 80% מהצוותים שמאמצים קנבן מדווחים על עלייה של 30% ביעילות — אבל רק אם הלוח משולב כראוי עם הקצה האחורי. הבעיה חריפה במיוחד בעבודה מקבילה: אדם אחד מעדכן סטטוס, אחר לא רואה את השינוי, והנתונים הופכים לבלתי עקביים. אנחנו פותרים את הכאב הזה: אנחנו מפתחים לוחות קנבן עם גרירה ושחרור שמשתלבים ישירות באתר או ב-CRM שלך. בניגוד ל-Trello או Jira, אתה מקבל שליטה מלאה על הנתונים והעיצוב, והאינטגרציה עם הקצה האחורי מתבצעת ברמת ה-API.

איך לוח קנבן עובד עם React ו-DnD Kit

בליבה נמצאת ספריית @dnd-kit. היא מספקת חיישנים, גרירה בין עמודות, DragOverlay, ומיון בתוך עמודה. זו הספרייה היחידה שאנחנו משתמשים בה לגרירה ושחרור ב-React. תיעוד DnD Kit — הגמישות שלה מאפשרת לנו ליישם תרחישים מורכבים כמו מיון כרטיסים מקונן או הגבלות אזורי שחרור.

התקנה:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities 

קוד הלוח:

import { DndContext, DragOverlay, DragStartEvent, DragEndEvent, PointerSensor, useSensor, useSensors, closestCorners } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

interface Task {
  id: string;
  title: string;
  columnId: string;
  order: number;
}

interface Column {
  id: string;
  title: string;
  color: string;
}

function KanbanBoard({ initialColumns, initialTasks, onTaskMove }) {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [activeTask, setActiveTask] = useState<Task | null>(null);

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: { distance: 8 } // 8px перед началом drag
    })
  );

  const handleDragStart = ({ active }: DragStartEvent) => {
    setActiveTask(tasks.find(t => t.id === active.id) ?? null);
  };

  const handleDragEnd = ({ active, over }: DragEndEvent) => {
    setActiveTask(null);
    if (!over) return;

    const activeTask = tasks.find(t => t.id === active.id);
    if (!activeTask) return;

    const overId = over.id as string;
    const overColumn = initialColumns.find(c => c.id === overId);
    const overTask = tasks.find(t => t.id === overId);
    const targetColumnId = overColumn?.id ?? overTask?.columnId ?? activeTask.columnId;
    const isMovingColumn = targetColumnId !== activeTask.columnId;

    setTasks(prev => {
      // Оптимистичное обновление UI
      const updated = prev.map(t =>
        t.id === activeTask.id ? { ...t, columnId: targetColumnId } : t
      );

      // Пересортировать внутри колонки
      if (!isMovingColumn && overTask) {
        const oldIndex = prev.findIndex(t => t.id === activeTask.id);
        const newIndex = prev.findIndex(t => t.id === overId);
        return arrayMove(updated, oldIndex, newIndex);
      }

      return updated;
    });

    // Синхронизация с сервером
    onTaskMove(activeTask.id, targetColumnId).catch(() => {
      // Откат при ошибке
      setTasks(initialTasks);
    });
  };

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <div className="kanban-board flex gap-4 overflow-x-auto p-4">
        {initialColumns.map(column => (
          <KanbanColumn
            key={column.id}
            column={column}
            tasks={tasks.filter(t => t.columnId === column.id)}
          />
        ))}
      </div>
      <DragOverlay>
        {activeTask && <TaskCard task={activeTask} isDragging />}
      </DragOverlay>
    </DndContext>
  );
}

אילו בעיות סנכרון גרירה ושחרור פותר?

העיקרית היא עקביות נתונים. כשמשתמש אחד גורר כרטיס בזמן שמשתמש אחר עורך אותו, ללא עדכונים אופטימיים וגלגולים לאחור, נוצרות אי-התאמות. אנחנו משתמשים בתבנית: עדכון מיידי של המצב המקומי, שליחת PATCH לשרת, ובמקרה של שגיאה גלגול לאחור למצב הקודם. זה נותן ממשק משתמש רספונסיבי ללא אובדן נתונים ומפחית את זמן הסנכרון ב-70% בהשוואה לבקשות חוסמות.

בעיה שנייה היא ביצועים. אם עמודה מכילה 50+ כרטיסים, רינדור כל אחד עם אנימציה עלול לגרום לפיגור. @dnd-kit מטפל בזה עם וירטואליזציה ורינדור עצלן. אנחנו בנוסף משתמשים ב-npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities ו-import { DndContext, DragOverlay, DragStartEvent, DragEndEvent, PointerSensor, useSensor, useSensors, closestCorners } from '@dnd-kit/core'; import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; interface Task { id: string; title: string; columnId: string; order: number; } interface Column { id: string; title: string; color: string; } function KanbanBoard({ initialColumns, initialTasks, onTaskMove }) { const [tasks, setTasks] = useState<Task[]>(initialTasks); const [activeTask, setActiveTask] = useState<Task | null>(null); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } // 8px перед началом drag }) ); const handleDragStart = ({ active }: DragStartEvent) => { setActiveTask(tasks.find(t => t.id === active.id) ?? null); }; const handleDragEnd = ({ active, over }: DragEndEvent) => { setActiveTask(null); if (!over) return; const activeTask = tasks.find(t => t.id === active.id); if (!activeTask) return; const overId = over.id as string; const overColumn = initialColumns.find(c => c.id === overId); const overTask = tasks.find(t => t.id === overId); const targetColumnId = overColumn?.id ?? overTask?.columnId ?? activeTask.columnId; const isMovingColumn = targetColumnId !== activeTask.columnId; setTasks(prev => { // Оптимистичное обновление UI const updated = prev.map(t => t.id === activeTask.id ? { ...t, columnId: targetColumnId } : t ); // Пересортировать внутри колонки if (!isMovingColumn && overTask) { const oldIndex = prev.findIndex(t => t.id === activeTask.id); const newIndex = prev.findIndex(t => t.id === overId); return arrayMove(updated, oldIndex, newIndex); } return updated; }); // Синхронизация с сервером onTaskMove(activeTask.id, targetColumnId).catch(() => { // Откат при ошибке setTasks(initialTasks); }); }; return ( <DndContext sensors={sensors} collisionDetection={closestCorners} onDragStart={handleDragStart} onDragEnd={handleDragEnd}> <div className="kanban-board flex gap-4 overflow-x-auto p-4"> {initialColumns.map(column => ( <KanbanColumn key={column.id} column={column} tasks={tasks.filter(t => t.columnId === column.id)} /> ))} </div> <DragOverlay> {activeTask && <TaskCard task={activeTask} isDragging />} </DragOverlay> </DndContext> ); } כדי לייצב הפניות. כמו כן, כשהמשימות עולות על 1000, אנחנו מיישמים פגינציה או גלילה אינסופית — אנחנו מתכננים את זה מההתחלה.

השוואה: לוח מותאם אישית מול פתרונות מוכנים

מערכות מוכנות (Trello, Jira) גובות דמי מנוי חודשיים ומגבילות התאמה אישית. לוח מותאם אישית זול יותר בטווח הארוך: אתה משלם פעם אחת על פיתוח ואירוח. יתרה מכך, שליטה מלאה בנתונים היא קריטית לחברות עם דרישות GDPR או אבטחה תאגידית. אינטגרציה עם ה-CRM או ה-ERP הקיים שלך מתבצעת דרך ה-API שלך, ללא מתווכים.

החיסכון עם לוח מותאם אישית מגיע ל-60% על פני שנתיים עבור צוות של 20 איש. מנוי Trello ממוצע לצוות כזה הוא בסביבות $1000 לחודש; לוח מותאם אישית מחזיר את ההשקעה תוך 4 חודשים.

תהליך הפיתוח של לוח קנבן

מה כלול

• קוד מקור של לוח הקנבן (רכיבי React + בקרי קצה אחורי)
• תיעוד פריסה ו-API
• גישה לריפוזיטורי, CI/CD, סביבת staging
• הכשרת צוות (סדנה של 2–3 שעות)
• תמיכה של שבועיים לאחר הפריסה (תיקוני באגים, התאמות קטנות)

לוח זמנים משוער

לוח קנבן בסיסי עם גרירה ושחרור וסנכרון — משבוע עד שבועיים. גרסה מלאה עם פילטרים, תת-משימות, תגובות ועדכונים בזמן אמת — מ-3 עד 4 שבועות. העלות מוערכת באופן אישי לאחר בחינת הדרישות שלכם.

למה לבחור בנו

יש לנו ניסיון מסחרי נרחב עם React ויותר מ-30 פרויקטים של ניהול משימות שיושמו. אנחנו מציעים אחריות של 6 חודשים על הקוד — תיקוני באגים בחינם. כל הפתרונות עוברים בדיקת קוד ומכוסים בבדיקות. כל פרויקט מגיע עם חוזה שמגדיר מדדי ביצועים (LCP < 2.5s, TTFB < 500ms).

צרו קשר — נכין הצעה מסחרית ונעריך את הפרויקט שלכם.

רכיבי עמודות וכרטיסים

function KanbanColumn({ column, tasks }) {
  const taskIds = tasks.map(t => t.id);
  return (
    <div className="kanban-column w-72 shrink-0 bg-gray-50 rounded-xl p-3">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full" style={{ background: column.color }} />
          <h3 className="font-semibold text-gray-700">{column.title}</h3>
          <span className="text-xs bg-gray-200 text-gray-500 rounded-full px-2 py-0.5">
            {tasks.length}
          </span>
        </div>
        <AddTaskButton columnId={column.id} />
      </div>
      <SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
        <div className="space-y-2 min-h-20">
          {tasks.map(task => (
            <SortableTaskCard key={task.id} task={task} />
          ))}
        </div>
      </SortableContext>
    </div>
  );
}

function SortableTaskCard({ task }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1
  };
  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <TaskCard task={task} />
    </div>
  );
}

function TaskCard({ task, isDragging = false }) {
  return (
    <div className={`bg-white rounded-lg border border-gray-200 p-3 shadow-sm hover:shadow-md transition-shadow cursor-grab active:cursor-grabbing ${isDragging ? 'shadow-xl ring-2 ring-blue-300' : ''}`}>
      <p className="text-sm font-medium text-gray-800 mb-2">{task.title}</p>
      <div className="flex items-center justify-between">
        <PriorityBadge priority={task.priority} />
        {task.assignee && <AssigneeAvatar user={task.assignee} />}
      </div>
      {task.dueDate && (
        <p className={`text-xs mt-1 ${isPast(task.dueDate) ? 'text-red-500' : 'text-gray-400'}`}>
          📅 {format(task.dueDate, 'dd.MM')}
        </p>
      )}
    </div>
  );
}

פילטרים וחיפוש

function KanbanWithFilters({ board }) {
  const [filters, setFilters] = useState({
    assignee: null,
    priority: null,
    search: ''
  });

  const filteredTasks = board.tasks.filter(task => {
    if (filters.search && !task.title.toLowerCase().includes(filters.search.toLowerCase())) {
      return false;
    }
    if (filters.assignee && task.assigneeId !== filters.assignee) return false;
    if (filters.priority && task.priority !== filters.priority) return false;
    return true;
  });

  return (
    <div>
      <KanbanFilters filters={filters} onChange={setFilters} />
      <KanbanBoard tasks={filteredTasks} columns={board.columns} />
    </div>
  );
}

קבלו ייעוץ למשימה שלכם — צרו קשר. נעריך את הפרויקט ונציע ארכיטקטורה אופטימלית.