From 3f07a09cb9ac589a83fac5c123286c5359cdb7d6 Mon Sep 17 00:00:00 2001
From: David Damilola <37887398+dagbolade@users.noreply.github.com>
Date: Fri, 3 Oct 2025 15:11:56 +0000
Subject: [PATCH] Show only icon as drag preview for TemplateCard (fixes drag
 UX)

---
 client/src/main.tsx                           |  27 +-
 .../templates/components/TemplateCard.tsx     | 111 +++---
 .../components/TemplateCardDragPreview.tsx    |  23 ++
 package-lock.json                             | 325 +++++++++++++++++-
 package.json                                  |  16 +
 5 files changed, 440 insertions(+), 62 deletions(-)
 create mode 100644 client/src/pages/automation/templates/components/TemplateCardDragPreview.tsx
 create mode 100644 package.json

diff --git a/client/src/main.tsx b/client/src/main.tsx
index 35b333bb0ef..b6bc50cc33a 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -16,7 +16,9 @@ import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import YamlWorker from 'monaco-yaml/yaml.worker?worker';
-import {StrictMode} from 'react';
+import { StrictMode } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import {RouterProvider} from 'react-router-dom';
 
 import {getRouter as getMainRouter} from './routes';
@@ -67,17 +69,18 @@ async function renderApp() {
 
     root.render(
         <StrictMode>
-            <ThemeProvider defaultTheme="light">
-                <QueryClientProvider client={queryClient}>
-                    <ConditionalPostHogProvider>
-                        <TooltipProvider>
-                            <RouterProvider router={router} />
-                        </TooltipProvider>
-                    </ConditionalPostHogProvider>
-
-                    <ReactQueryDevtools buttonPosition="bottom-right" initialIsOpen={false} />
-                </QueryClientProvider>
-            </ThemeProvider>
+            <DndProvider backend={HTML5Backend}>
+                <ThemeProvider defaultTheme="light">
+                    <QueryClientProvider client={queryClient}>
+                        <ConditionalPostHogProvider>
+                            <TooltipProvider>
+                                <RouterProvider router={router} />
+                            </TooltipProvider>
+                        </ConditionalPostHogProvider>
+                        <ReactQueryDevtools buttonPosition="bottom-right" initialIsOpen={false} />
+                    </QueryClientProvider>
+                </ThemeProvider>
+            </DndProvider>
         </StrictMode>
     );
 }
diff --git a/client/src/pages/automation/templates/components/TemplateCard.tsx b/client/src/pages/automation/templates/components/TemplateCard.tsx
index e3bba1cce78..eb78bad481f 100644
--- a/client/src/pages/automation/templates/components/TemplateCard.tsx
+++ b/client/src/pages/automation/templates/components/TemplateCard.tsx
@@ -1,10 +1,12 @@
 import LazyLoadSVG from '@/components/LazyLoadSVG/LazyLoadSVG';
-import {Badge} from '@/components/ui/badge';
-import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from '@/components/ui/card';
-import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
-import {Link} from 'react-router-dom';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Link } from 'react-router-dom';
 
-import type React from 'react';
+import React from 'react';
+import { useDrag } from 'react-dnd';
+import { TemplateCardDragPreview } from './TemplateCardDragPreview';
 
 const MAX_VISIBLE_ICONS = 8;
 
@@ -17,60 +19,71 @@ interface TemplateCardProps {
     title: string;
 }
 
-export function TemplateCard({authorName, categories, description, icons, templateId, title}: TemplateCardProps) {
+export function TemplateCard({ authorName, categories, description, icons, templateId, title }: TemplateCardProps) {
     const hasExcessIcons = icons.length > MAX_VISIBLE_ICONS;
+    const visibleIcons = hasExcessIcons ? icons.slice(0, MAX_VISIBLE_ICONS - 1) : icons;
+    const mainIcon = icons[0];
 
-    if (hasExcessIcons) {
-        icons = icons.slice(0, MAX_VISIBLE_ICONS - 1);
-    }
+    const anchorRef = React.useRef<HTMLAnchorElement>(null);
+    const [{ isDragging }, drag] = useDrag({
+        type: 'TEMPLATE_CARD',
+        item: { templateId, icon: mainIcon },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    drag(anchorRef);
 
     return (
-        <Link to={templateId}>
-            <Card className="flex min-h-[230px] flex-col transition-all hover:border-primary/20 hover:shadow-lg">
-                <CardHeader>
-                    <div className="flex items-center justify-end">
-                        {categories.map((category, index) => (
-                            <Badge className="text-xs" key={index} variant="outline">
-                                {category}
-                            </Badge>
-                        ))}
-                    </div>
+        <>
+            <TemplateCardDragPreview />
+            <Link to={templateId} ref={anchorRef} style={{ opacity: isDragging ? 0.3 : 1, cursor: 'grab' }}>
+                <Card className="flex min-h-[230px] flex-col transition-all hover:border-primary/20 hover:shadow-lg">
+                    <CardHeader>
+                        <div className="flex items-center justify-end">
+                            {categories.map((category, index) => (
+                                <Badge className="text-xs" key={index} variant="outline">
+                                    {category}
+                                </Badge>
+                            ))}
+                        </div>
 
-                    <CardTitle>
-                        <Tooltip>
-                            <TooltipTrigger asChild className="line-clamp-1 text-base font-semibold leading-tight">
-                                <span>{title}</span>
-                            </TooltipTrigger>
+                        <CardTitle>
+                            <Tooltip>
+                                <TooltipTrigger asChild className="line-clamp-1 text-base font-semibold leading-tight">
+                                    <span>{title}</span>
+                                </TooltipTrigger>
 
-                            <TooltipContent>{title}</TooltipContent>
-                        </Tooltip>
-                    </CardTitle>
+                                <TooltipContent>{title}</TooltipContent>
+                            </Tooltip>
+                        </CardTitle>
 
-                    <CardDescription className="line-clamp-2 text-sm text-muted-foreground">
-                        {description || 'No description available.'}
-                    </CardDescription>
-                </CardHeader>
+                        <CardDescription className="line-clamp-2 text-sm text-muted-foreground">
+                            {description || 'No description available.'}
+                        </CardDescription>
+                    </CardHeader>
 
-                <CardContent className="flex-1">
-                    <div className="flex size-full items-end">
-                        <div className="flex flex-wrap gap-1">
-                            {icons.map((icon, index) => (
-                                <div className="flex items-center justify-center rounded-full bg-muted" key={index}>
-                                    <LazyLoadSVG className="m-1.5 size-6" src={icon} />
-                                </div>
-                            ))}
+                    <CardContent className="flex-1">
+                        <div className="flex size-full items-end">
+                            <div className="flex flex-wrap gap-1">
+                                {visibleIcons.map((icon, index) => (
+                                    <div className="flex items-center justify-center rounded-full bg-muted" key={index}>
+                                        <LazyLoadSVG className="m-1.5 size-6" src={icon} />
+                                    </div>
+                                ))}
 
-                            {hasExcessIcons && (
-                                <div className="flex items-center justify-center rounded-full bg-muted">
-                                    <span className="m-1.5 size-6">+{MAX_VISIBLE_ICONS}</span>
-                                </div>
-                            )}
+                                {hasExcessIcons && (
+                                    <div className="flex items-center justify-center rounded-full bg-muted">
+                                        <span className="m-1.5 size-6">+{MAX_VISIBLE_ICONS}</span>
+                                    </div>
+                                )}
+                            </div>
                         </div>
-                    </div>
-                </CardContent>
+                    </CardContent>
 
-                <CardFooter>{authorName}</CardFooter>
-            </Card>
-        </Link>
+                    <CardFooter>{authorName}</CardFooter>
+                </Card>
+            </Link>
+        </>
     );
 }
diff --git a/client/src/pages/automation/templates/components/TemplateCardDragPreview.tsx b/client/src/pages/automation/templates/components/TemplateCardDragPreview.tsx
new file mode 100644
index 00000000000..062c610e7fd
--- /dev/null
+++ b/client/src/pages/automation/templates/components/TemplateCardDragPreview.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useDragLayer } from 'react-dnd';
+import LazyLoadSVG from '@/components/LazyLoadSVG/LazyLoadSVG';
+
+export function TemplateCardDragPreview() {
+  const { isDragging, item } = useDragLayer((monitor) => ({
+    isDragging: monitor.isDragging(),
+    item: monitor.getItem(),
+  }));
+
+  if (!isDragging || !item || !item.icon) {
+    return null;
+  }
+
+  // You can style this preview as needed
+  return (
+    <div style={{ pointerEvents: 'none', zIndex: 100, position: 'fixed', left: 0, top: 0 }}>
+      <div className="flex items-center justify-center rounded-full bg-muted shadow-lg">
+        <LazyLoadSVG className="m-1.5 size-10" src={item.icon} />
+      </div>
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index d8be1fd6992..dfa7d75545f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,5 +2,328 @@
   "name": "bytechef",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "@tanstack/react-query": "^5.90.2",
+        "@tanstack/react-query-devtools": "^5.90.2",
+        "class-variance-authority": "^0.7.1",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-router-dom": "^7.9.3"
+      },
+      "devDependencies": {
+        "@types/node": "^24.6.2",
+        "@types/react": "^19.2.0",
+        "@types/react-dom": "^19.2.0",
+        "@types/react-router-dom": "^5.3.3"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.2.tgz",
+      "integrity": "sha512-k/TcR3YalnzibscALLwxeiLUub6jN5EDLwKDiO7q5f4ICEoptJ+n9+7vcEFy5/x/i6Q+Lb/tXrsKCggf5uQJXQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.90.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.90.1.tgz",
+      "integrity": "sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.2.tgz",
+      "integrity": "sha512-CLABiR+h5PYfOWr/z+vWFt5VsOA2ekQeRQBFSKlcoW6Ndx/f8rfyVmq4LbgOM4GG2qtxAxjLYLOpCNTYm4uKzw==",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.90.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.90.2.tgz",
+      "integrity": "sha512-vAXJzZuBXtCQtrY3F/yUNJCV4obT/A/n81kb3+YqLbro5Z2+phdAbceO+deU3ywPw8B42oyJlp4FhO0SoivDFQ==",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.90.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.90.2",
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "24.6.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.6.2.tgz",
+      "integrity": "sha512-d2L25Y4j+W3ZlNAeMKcy7yDsK425ibcAOO2t7aPTz6gNMH0z2GThtwENCDc0d/Pw9wgyRqE5Px1wkV7naz8ang==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~7.13.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
+      "integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
+      "devOptional": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.0.tgz",
+      "integrity": "sha512-brtBs0MnE9SMx7px208g39lRmC5uHZs96caOJfTjFcYSLHNamvaSMfJNagChVNkup2SdtOxKX1FDBkRSJe1ZAg==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true
+    },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
+      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-router": {
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
+      "integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.3.tgz",
+      "integrity": "sha512-1QSbA0TGGFKTAc/aWjpfW/zoEukYfU4dc1dLkT/vvf54JoGMkW+fNA+3oyo2gWVW1GM7BxjJVHz5GnPJv40rvg==",
+      "dependencies": {
+        "react-router": "7.9.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "peer": true
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
+    "node_modules/undici-types": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.13.0.tgz",
+      "integrity": "sha512-Ov2Rr9Sx+fRgagJ5AX0qvItZG/JKKoBRAVITs1zk7IqZGTJUwgUr7qoYBpWwakpWilTZFM98rG/AFRocu10iIQ==",
+      "devOptional": true
+    }
+  }
 }
diff --git a/package.json b/package.json
new file mode 100644
index 00000000000..bcc2a3ff326
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "class-variance-authority": "^0.7.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-router-dom": "^7.9.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/react-router-dom": "^5.3.3"
+  }
+}