feat: PC 端表格拖拽排序

2026-02-27 20:27:08 +08:00
parent 510664c4d3
commit e7192987f4
5 changed files with 375 additions and 116 deletions
--- a/app/components/PcFundTable.jsx
+++ b/app/components/PcFundTable.jsx
@@ -1,14 +1,75 @@
 'use client';

-import { useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
  flexRender,
  getCoreRowModel,
  useReactTable,
 } from '@tanstack/react-table';
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers';
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import ConfirmModal from './ConfirmModal';
-import { ExitIcon, ResetIcon, SettingsIcon, StarIcon, TrashIcon } from './Icons';
+import { DragIcon, ExitIcon, ResetIcon, SettingsIcon, StarIcon, TrashIcon } from './Icons';
+
+const SortableRowContext = createContext({
+  setActivatorNodeRef: null,
+  listeners: null,
+});
+
+function SortableRow({ row, children, isTableDragging, disabled }) {
+  const {
+    attributes,
+    listeners,
+    transform,
+    transition,
+    setNodeRef,
+    setActivatorNodeRef,
+    isDragging,
+  } = useSortable({ id: row.original.code, disabled });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    ...(isDragging ? { position: 'relative', zIndex: 9999, opacity: 0.8, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' } : {}),
+  };
+
+  const contextValue = useMemo(
+    () => ({ setActivatorNodeRef, listeners }),
+    [setActivatorNodeRef, listeners]
+  );
+
+  return (
+    <SortableRowContext.Provider value={contextValue}>
+      <motion.div
+        ref={setNodeRef}
+        className="table-row-wrapper"
+        layout={isTableDragging ? undefined : "position"}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2, ease: 'easeOut' }}
+        style={{ ...style, position: 'relative' }}
+        {...attributes}
+      >
+        {children}
+      </motion.div>
+    </SortableRowContext.Provider>
+  );
+}

 /**
 * PC 端基金列表表格组件（基于 @tanstack/react-table）
@@ -45,7 +106,39 @@ export default function PcFundTable({
  onHoldingAmountClick,
  onHoldingProfitClick,
  refreshing = false,
+  sortBy = 'default',
+  onReorder,
 }) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor)
+  );
+
+  const [activeId, setActiveId] = useState(null);
+
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+
+  const handleDragCancel = () => {
+    setActiveId(null);
+  };
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      const oldIndex = data.findIndex(item => item.code === active.id);
+      const newIndex = data.findIndex(item => item.code === over.id);
+      if (oldIndex !== -1 && newIndex !== -1 && onReorder) {
+        onReorder(oldIndex, newIndex);
+      }
+    }
+    setActiveId(null);
+  };
  const getStoredColumnSizing = () => {
    if (typeof window === 'undefined') return {};
    try {
@@ -108,6 +201,65 @@ export default function PcFundTable({
    onHoldingAmountClick,
    onHoldingProfitClick,
  ]);
+
+  const FundNameCell = ({ info }) => {
+    const original = info.row.original || {};
+    const code = original.code;
+    const isUpdated = original.isUpdated;
+    const isFavorites = favorites?.has?.(code);
+    const isGroupTab = currentTab && currentTab !== 'all' && currentTab !== 'fav';
+    const rowContext = useContext(SortableRowContext);
+
+    return (
+      <div className="name-cell-content" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {sortBy === 'default' && (
+          <button
+            className="icon-button drag-handle"
+            ref={rowContext?.setActivatorNodeRef}
+            {...rowContext?.listeners}
+            style={{ cursor: 'grab', padding: 2, margin: '-2px -4px -2px 0', color: 'var(--muted)', background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            title="拖拽排序"
+            onClick={(e) => e.stopPropagation?.()}
+          >
+            <DragIcon width="16" height="16" />
+          </button>
+        )}
+        {isGroupTab ? (
+          <button
+            className="icon-button fav-button"
+            onClick={(e) => {
+              e.stopPropagation?.();
+              onRemoveFromGroupRef.current?.(original);
+            }}
+            title="从小分组移除"
+          >
+            <ExitIcon width="18" height="18" style={{ transform: 'rotate(180deg)' }} />
+          </button>
+        ) : (
+          <button
+            className={`icon-button fav-button ${isFavorites ? 'active' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation?.();
+              onToggleFavoriteRef.current?.(original);
+            }}
+            title={isFavorites ? '取消自选' : '添加自选'}
+          >
+            <StarIcon width="18" height="18" filled={isFavorites} />
+          </button>
+        )}
+        <div className="title-text">
+          <span
+            className={`name-text ${isUpdated ? 'updated' : ''}`}
+            title={isUpdated ? '今日净值已更新' : ''}
+          >
+            {info.getValue() ?? '—'}
+          </span>
+          {code ? <span className="muted code-text">#{code}</span> : null}
+        </div>
+      </div>
+    );
+  };
+
  const columns = useMemo(
    () => [
      {
@@ -116,49 +268,7 @@ export default function PcFundTable({
        size: 265,
        minSize: 140,
        enablePinning: true,
-        cell: (info) => {
-          const original = info.row.original || {};
-          const code = original.code;
-          const isUpdated = original.isUpdated;
-          const isFavorites = favorites?.has?.(code);
-          const isGroupTab = currentTab && currentTab !== 'all' && currentTab !== 'fav';
-          return (
-            <div className="name-cell-content" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              {isGroupTab ? (
-                <button
-                  className="icon-button fav-button"
-                  onClick={(e) => {
-                    e.stopPropagation?.();
-                    onRemoveFromGroupRef.current?.(original);
-                  }}
-                  title="从当前分组移除"
-                >
-                  <ExitIcon width="18" height="18" style={{ transform: 'rotate(180deg)' }} />
-                </button>
-              ) : (
-                <button
-                  className={`icon-button fav-button ${isFavorites ? 'active' : ''}`}
-                  onClick={(e) => {
-                    e.stopPropagation?.();
-                    onToggleFavoriteRef.current?.(original);
-                  }}
-                  title={isFavorites ? '取消自选' : '添加自选'}
-                >
-                  <StarIcon width="18" height="18" filled={isFavorites} />
-                </button>
-              )}
-              <div className="title-text">
-                <span
-                  className={`name-text ${isUpdated ? 'updated' : ''}`}
-                  title={isUpdated ? '今日净值已更新' : ''}
-                >
-                  {info.getValue() ?? '—'}
-                </span>
-                {code ? <span className="muted code-text">#{code}</span> : null}
-              </div>
-            </div>
-          );
-        },
+        cell: (info) => <FundNameCell info={info} />,
        meta: {
          align: 'left',
          cellClassName: 'name-cell',
@@ -188,11 +298,11 @@ export default function PcFundTable({
          const date = original.yesterdayDate ?? '-';
          const cls = value > 0 ? 'up' : value < 0 ? 'down' : '';
          return (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
              <span className={cls} style={{ fontWeight: 700 }}>
                {info.getValue() ?? '—'}
              </span>
-              <span className="muted" style={{ fontSize: '12px' }}>
+              <span className="muted" style={{ fontSize: '11px' }}>
                {date}
              </span>
            </div>
@@ -215,11 +325,11 @@ export default function PcFundTable({
          const time = original.estimateTime ?? '-';
          const cls = isMuted ? 'muted' : value > 0 ? 'up' : value < 0 ? 'down' : '';
          return (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
              <span className={cls} style={{ fontWeight: 700 }}>
                {info.getValue() ?? '—'}
              </span>
-              <span className="muted" style={{ fontSize: '12px' }}>
+              <span className="muted" style={{ fontSize: '11px' }}>
                {time}
              </span>
            </div>
@@ -247,12 +357,12 @@ export default function PcFundTable({
                style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '12px', cursor: 'pointer' }}
                onClick={(e) => {
                  e.stopPropagation?.();
-                    onHoldingAmountClickRef.current?.(original, { hasHolding: false });
+                  onHoldingAmountClickRef.current?.(original, { hasHolding: false });
                }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
-                      onHoldingAmountClickRef.current?.(original, { hasHolding: false });
+                    onHoldingAmountClickRef.current?.(original, { hasHolding: false });
                  }
                }}
              >
@@ -355,7 +465,7 @@ export default function PcFundTable({
              title="重置列宽"
              style={{ border: 'none', width: '24px', height: '24px', backgroundColor: 'transparent', color: 'var(--text)' }}
            >
-              <ResetIcon width="14" height="14"  />
+              <ResetIcon width="14" height="14" />
            </button>
          </div>
        ),
@@ -399,7 +509,7 @@ export default function PcFundTable({
        },
      },
    ],
-    [currentTab, favorites, refreshing],
+    [currentTab, favorites, refreshing, sortBy],
  );

  const table = useReactTable({
@@ -551,15 +661,14 @@ export default function PcFundTable({
                {header.isPlaceholder
                  ? null
                  : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext(),
-                    )}
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
                <div
                  onMouseDown={header.column.getCanResize() ? header.getResizeHandler() : undefined}
                  onTouchStart={header.column.getCanResize() ? header.getResizeHandler() : undefined}
-                  className={`resizer ${
-                    header.column.getIsResizing() ? 'isResizing' : ''
-                  } ${header.column.getCanResize() ? '' : 'disabled'}`}
+                  className={`resizer ${header.column.getIsResizing() ? 'isResizing' : ''
+                    } ${header.column.getCanResize() ? '' : 'disabled'}`}
                />
              </div>
            );
@@ -568,56 +677,61 @@ export default function PcFundTable({
      )}

      {/* 表体 */}
-      <AnimatePresence mode="popLayout">
-        {table.getRowModel().rows.map((row) => (
-          <motion.div
-            key={row.original.code || row.id}
-            className="table-row-wrapper"
-            layout="position"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2, ease: 'easeOut' }}
-            style={{ position: 'relative' }}
-          >
-            <div
-              className="table-row table-row-scroll"
-            >
-              {row.getVisibleCells().map((cell) => {
-                const columnId = cell.column.id || cell.column.columnDef?.accessorKey;
-                const isNameColumn = columnId === 'fundName';
-                const rightAlignedColumns = new Set([
-                  'yesterdayChangePercent',
-                  'estimateChangePercent',
-                  'holdingAmount',
-                  'todayProfit',
-                  'holdingProfit',
-                ]);
-                const align = isNameColumn
-                  ? ''
-                  : rightAlignedColumns.has(columnId)
-                    ? 'text-right'
-                    : 'text-center';
-                const cellClassName =
-                  (cell.column.columnDef.meta && cell.column.columnDef.meta.cellClassName) || '';
-                const style = getCommonPinningStyles(cell.column, false);
-                return (
-                  <div
-                    key={cell.id}
-                    className={`table-cell ${align} ${cellClassName}`}
-                    style={style}
-                  >
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext(),
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </motion.div>
-        ))}
-      </AnimatePresence>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+        modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+      >
+        <SortableContext
+          items={data.map((item) => item.code)}
+          strategy={verticalListSortingStrategy}
+        >
+          <AnimatePresence mode="popLayout">
+            {table.getRowModel().rows.map((row) => (
+              <SortableRow key={row.original.code || row.id} row={row} isTableDragging={!!activeId} disabled={sortBy !== 'default'}>
+                <div
+                  className="table-row table-row-scroll"
+                >
+                  {row.getVisibleCells().map((cell) => {
+                    const columnId = cell.column.id || cell.column.columnDef?.accessorKey;
+                    const isNameColumn = columnId === 'fundName';
+                    const rightAlignedColumns = new Set([
+                      'yesterdayChangePercent',
+                      'estimateChangePercent',
+                      'holdingAmount',
+                      'todayProfit',
+                      'holdingProfit',
+                    ]);
+                    const align = isNameColumn
+                      ? ''
+                      : rightAlignedColumns.has(columnId)
+                        ? 'text-right'
+                        : 'text-center';
+                    const cellClassName =
+                      (cell.column.columnDef.meta && cell.column.columnDef.meta.cellClassName) || '';
+                    const style = getCommonPinningStyles(cell.column, false);
+                    return (
+                      <div
+                        key={cell.id}
+                        className={`table-cell ${align} ${cellClassName}`}
+                        style={style}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </SortableRow>
+            ))}
+          </AnimatePresence>
+        </SortableContext>
+      </DndContext>

      {table.getRowModel().rows.length === 0 && (
        <div className="table-row empty-row">
--- a/app/globals.css
+++ b/app/globals.css
@@ -1133,7 +1133,7 @@ input[type="number"] {
 }

 .tab {
-  padding: 0 20px;
+  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -640,14 +640,27 @@ export default function HomePage() {

  // 过滤和排序后的基金列表
  const displayFunds = useMemo(
-    () => funds
-      .filter(f => {
+    () => {
+      let filtered = funds.filter(f => {
        if (currentTab === 'all') return true;
        if (currentTab === 'fav') return favorites.has(f.code);
        const group = groups.find(g => g.id === currentTab);
        return group ? group.codes.includes(f.code) : true;
-      })
-      .sort((a, b) => {
+      });
+
+      if (currentTab !== 'all' && currentTab !== 'fav' && sortBy === 'default') {
+        const group = groups.find(g => g.id === currentTab);
+        if (group && group.codes) {
+          const codeMap = new Map(group.codes.map((code, index) => [code, index]));
+          filtered.sort((a, b) => {
+            const indexA = codeMap.get(a.code) ?? Number.MAX_SAFE_INTEGER;
+            const indexB = codeMap.get(b.code) ?? Number.MAX_SAFE_INTEGER;
+            return indexA - indexB;
+          });
+        }
+      }
+
+      return filtered.sort((a, b) => {
        if (sortBy === 'yield') {
          const valA = isNumber(a.estGszzl) ? a.estGszzl : (a.gszzl ?? a.zzl ?? 0);
          const valB = isNumber(b.estGszzl) ? b.estGszzl : (b.gszzl ?? a.zzl ?? 0);
@@ -664,7 +677,8 @@ export default function HomePage() {
          return sortOrder === 'asc' ? a.name.localeCompare(b.name, 'zh-CN') : b.name.localeCompare(a.name, 'zh-CN');
        }
        return 0;
-      }),
+      });
+    },
    [funds, currentTab, favorites, groups, sortBy, sortOrder, holdings, getHoldingProfit],
  );

@@ -1401,7 +1415,7 @@ export default function HomePage() {
      const list = JSON.parse(value || '[]');
      if (!Array.isArray(list)) return '';
      const codes = list.map((item) => item?.code).filter(Boolean);
-      return Array.from(new Set(codes)).sort().join('|');
+      return Array.from(new Set(codes)).join('|');
    } catch (e) {
      return '';
    }
@@ -1731,6 +1745,60 @@ export default function HomePage() {
    storageHelper.setItem('groups', JSON.stringify(next));
  };

+  const handleReorder = (oldIndex, newIndex) => {
+    const movedItem = displayFunds[oldIndex];
+    const targetItem = displayFunds[newIndex];
+    if (!movedItem || !targetItem) return;
+
+    if (currentTab === 'all' || currentTab === 'fav') {
+      const newFunds = [...funds];
+      const fromIndex = newFunds.findIndex(f => f.code === movedItem.code);
+
+      if (fromIndex === -1) return;
+
+      // Remove moved item
+      const [removed] = newFunds.splice(fromIndex, 1);
+
+      // Find target index in the array (after removal)
+      const toIndex = newFunds.findIndex(f => f.code === targetItem.code);
+
+      if (toIndex === -1) {
+        // If target not found (should not happen), put it back
+        newFunds.splice(fromIndex, 0, removed);
+        return;
+      }
+
+      if (oldIndex < newIndex) {
+        // Moving down, insert after target
+        newFunds.splice(toIndex + 1, 0, removed);
+      } else {
+        // Moving up, insert before target
+        newFunds.splice(toIndex, 0, removed);
+      }
+
+      setFunds(newFunds);
+      storageHelper.setItem('funds', JSON.stringify(newFunds));
+    } else {
+      const groupIndex = groups.findIndex(g => g.id === currentTab);
+      if (groupIndex > -1) {
+        const group = groups[groupIndex];
+        const newCodes = [...group.codes];
+        const fromIndex = newCodes.indexOf(movedItem.code);
+        const toIndex = newCodes.indexOf(targetItem.code);
+
+        if (fromIndex !== -1 && toIndex !== -1) {
+          newCodes.splice(fromIndex, 1);
+          newCodes.splice(toIndex, 0, movedItem.code);
+
+          const newGroups = [...groups];
+          newGroups[groupIndex] = { ...group, codes: newCodes };
+          setGroups(newGroups);
+          storageHelper.setItem('groups', JSON.stringify(newGroups));
+        }
+      }
+    }
+  };
+
  // 按 code 去重，保留第一次出现的项，避免列表重复
  const dedupeByCode = (list) => {
    const seen = new Set();
@@ -3743,6 +3811,8 @@ export default function HomePage() {
                                refreshing={refreshing}
                                currentTab={currentTab}
                                favorites={favorites}
+                                sortBy={sortBy}
+                                onReorder={handleReorder}
                                onRemoveFund={(row) => {
                                  if (refreshing) return;
                                  if (!row || !row.code) return;
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,10 @@
      "dependencies": {
        "@dicebear/collection": "^9.3.1",
        "@dicebear/core": "^9.3.1",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
        "@supabase/supabase-js": "^2.78.0",
        "@tanstack/react-table": "^8.21.3",
        "chart.js": "^4.5.1",
@@ -722,6 +726,73 @@
        "@dicebear/core": "^9.0.0"
      }
    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
+      "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/@emnapi/core": {
      "version": "1.8.1",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
--- a/package.json
+++ b/package.json
@@ -13,6 +13,10 @@
  "dependencies": {
    "@dicebear/collection": "^9.3.1",
    "@dicebear/core": "^9.3.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
    "@supabase/supabase-js": "^2.78.0",
    "@tanstack/react-table": "^8.21.3",
    "chart.js": "^4.5.1",