kanban

1'use client';
2 
3import {
4  closestCorners,
5  DndContext,
6  type DragEndEvent,
7  type DragOverEvent,
8  DragOverlay,
9  type DragStartEvent,
10  KeyboardSensor,
11  PointerSensor,
12  useDroppable,
13  useSensor,
14  useSensors,
15} from '@dnd-kit/core';
16import {
17  arrayMove,
18  SortableContext,
19  sortableKeyboardCoordinates,
20  useSortable,
21  verticalListSortingStrategy,
22} from '@dnd-kit/sortable';
23import { CSS } from '@dnd-kit/utilities';
24import { GripVertical, Plus, Search } from 'lucide-react';
25import * as React from 'react';
26import { Button } from '@/components/ui/button';
27import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
28import { Input } from '@/components/ui/input';
29import { cn } from '@/lib/utils';
30 
31export type KanbanColumn = {
32  id: string;
33  label: string;
34  color?: string;
35};
36 
37export type KanbanField<T> = {
38  key: keyof T;
39  label?: string;
40  render?: (value: T[keyof T], item: T) => React.ReactNode;
41};
42 
43export type KanbanProps<T extends Record<string, unknown>> = {
44  columns: KanbanColumn[];
45  data?: T[];
46  defaultData?: T[];
47  onDataChange?: (next: T[]) => void;
48  idField?: keyof T;
49  columnField: keyof T;
50  title?: (item: T) => React.ReactNode;
51  fields?: KanbanField<T>[];
52  cardContent?: (item: T) => React.ReactNode;
53  searchableFields?: (keyof T)[];
54  searchPlaceholder?: string;
55  renderColumnSummary?: (items: T[], column: KanbanColumn) => React.ReactNode;
56  onCardClick?: (item: T) => void;
57  onCardAdd?: (columnId: string) => void;
58  onCardMove?: (e: { item: T; fromColumn: string; toColumn: string; toIndex: number }) => void;
59  className?: string;
60};
61 
62export function Kanban<T extends Record<string, unknown>>({
63  columns,
64  data,
65  defaultData,
66  onDataChange,
67  idField = 'id' as keyof T,
68  columnField,
69  title,
70  fields,
71  cardContent,
72  searchableFields,
73  searchPlaceholder = 'Search...',
74  renderColumnSummary,
75  onCardClick,
76  onCardAdd,
77  onCardMove,
78  className,
79}: KanbanProps<T>) {
80  const getId = React.useCallback((item: T) => String(item[idField]), [idField]);
81  const getColumn = React.useCallback((item: T) => String(item[columnField]), [columnField]);
82 
83  const [items, setItems] = React.useState<T[]>(() => data ?? defaultData ?? []);
84  const draggingRef = React.useRef(false);
85  const fromColumnRef = React.useRef<string | null>(null);
86  const fromIndexRef = React.useRef<number | null>(null);
87  const startItemsRef = React.useRef<T[] | null>(null);
88  React.useEffect(() => {
89// … truncated