feat: added drag-and-drop feature. Closes #7

app/dashboard/page.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { ModuleGrid } from "@/components/dashboard/module-grid";
+import { MultiColumnGrid } from "@/components/dashboard/multi-column-grid";
+import { SortableModuleItem } from "@/components/dashboard/sortable-module-item";
 import { ModulesSidebar } from "@/components/layout/modules-sidebar";
 import { MarketingSections } from "@/components/marketing/marketing-sections";
 import { getModuleById } from "@/src/config/modules";
 import { useModuleContext } from "@/src/contexts/modules-context";
 import { useSession } from "@/src/lib/auth-client";
+import { useMemo } from "react";
 
 export default function DashboardPage() {
   const { data: session, isPending } = useSession();
@@ -17,8 +19,20 @@ export default function DashboardPage() {
     sidebarCollapsed,
     isAuthenticated,
     onAuthRequired,
+    moduleOrder,
+    handleReorderModules,
+    visibleColumns,
   } = useModuleContext();
 
+  // Get all modules that should be displayed
+  const allModules = useMemo(
+    () =>
+      isAuthenticated
+        ? Array.from(new Set([...pinnedModules, ...tempOpenModules]))
+        : tempOpenModules,
+    [isAuthenticated, pinnedModules, tempOpenModules]
+  );
+
   if (isPending) {
     return (
       <div className="container mx-auto px-4 py-16">
@@ -29,12 +43,40 @@ export default function DashboardPage() {
     );
   }
 
-  //modules to display :
-  //Visitors = tempOpenModules (3 default modules + the ones the visitor chooses to open)
-  //Auth users : pinnedModules + tempOpenModules
-  const allModules = isAuthenticated
-    ? Array.from(new Set([...pinnedModules, ...tempOpenModules]))
-    : tempOpenModules;
+  // Render a single module
+  const renderModule = (moduleId: string) => {
+    const moduleConfig = getModuleById(moduleId);
+    if (!moduleConfig) return null;
+    const ModuleComponent = moduleConfig.component;
+    const isPinned = pinnedModules.includes(moduleId);
+    const isTemp = tempOpenModules.includes(moduleId);
+
+    return (
+      <SortableModuleItem key={moduleId} id={moduleId}>
+        <ModuleComponent
+          isPinned={isPinned}
+          onTogglePin={() => {
+            //visitors : close module
+            if (!isAuthenticated) {
+              toggleTempOpen(moduleId);
+
+              //auth user
+            } else if (isPinned) {
+              //pinned module : unpin
+              handleTogglePin(moduleId);
+
+              //unpinned module : can pin then can close
+            } else if (isTemp) {
+              handleTogglePin(moduleId);
+              toggleTempOpen(moduleId);
+            }
+          }}
+          isAuthenticated={isAuthenticated}
+          onAuthRequired={onAuthRequired}
+        />
+      </SortableModuleItem>
+    );
+  };
 
   return (
     <div className="flex min-h-[calc(100vh-4rem)]">
@@ -48,40 +90,13 @@ export default function DashboardPage() {
           }`}
         >
           {allModules.length > 0 ? (
-            <ModuleGrid>
-              {allModules.map((moduleId) => {
-                const moduleConfig = getModuleById(moduleId);
-                if (!moduleConfig) return null;
-                const ModuleComponent = moduleConfig.component;
-                const isPinned = pinnedModules.includes(moduleId);
-                const isTemp = tempOpenModules.includes(moduleId);
-
-                return (
-                  <ModuleComponent
-                    key={moduleId}
-                    isPinned={isPinned}
-                    onTogglePin={() => {
-                      //visitors : close module
-                      if (!isAuthenticated) {
-                        toggleTempOpen(moduleId);
-
-                        //auth user
-                      } else if (isPinned) {
-                        //pinned module : unpin
-                        handleTogglePin(moduleId);
-
-                        //unpinned module : can pin then can close
-                      } else if (isTemp) {
-                        handleTogglePin(moduleId);
-                        toggleTempOpen(moduleId);
-                      }
-                    }}
-                    isAuthenticated={isAuthenticated}
-                    onAuthRequired={onAuthRequired}
-                  />
-                );
-              })}
-            </ModuleGrid>
+            <MultiColumnGrid
+              moduleOrder={moduleOrder}
+              visibleColumns={visibleColumns}
+              onReorder={handleReorderModules}
+              renderModule={renderModule}
+              allModules={allModules}
+            />
           ) : (
             <div className="border-2 border-dashed rounded-lg p-12 text-center">
               <p className="text-muted-foreground mb-2">No pinned modules</p>

components/dashboard/droppable-column.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { ReactNode } from "react";
+import { type ColumnId } from "@/src/types/module-order";
+
+interface DroppableColumnProps {
+  columnId: ColumnId;
+  moduleIds: string[];
+  children: ReactNode;
+}
+
+export function DroppableColumn({
+  columnId,
+  moduleIds,
+  children,
+}: DroppableColumnProps) {
+  const { setNodeRef } = useDroppable({
+    id: columnId,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className="flex flex-col gap-6 flex-1 basis-0 min-w-0 min-h-[200px]"
+    >
+      <SortableContext items={moduleIds} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </div>
+  );
+}

components/dashboard/module-grid.tsx

@@ -6,7 +6,7 @@ interface ModuleGridProps {
 
 export function ModuleGrid({ children }: ModuleGridProps) {
   return (
-    <div className="columns-1 md:columns-2 lg:columns-3 3xl:columns-4 4xl:columns-5 gap-6 space-y-6">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 4xl:grid-cols-5 gap-6 auto-rows-min">
       {children}
     </div>
   );

components/dashboard/module.tsx

@@ -29,7 +29,7 @@ export function Module({
   children,
 }: ModuleProps) {
   return (
-    <Card className="flex flex-col break-inside-avoid mb-6 w-full">
+    <Card className="flex flex-col w-full">
       <CardHeader>
         <div className="flex items-start justify-between gap-2">
           <div className="flex items-center gap-4 flex-1">