Add support for deleting roadmap board

Author: arjunkomath

apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx

@@ -260,10 +260,10 @@ export default function RoadmapPage({
                                   handleVote(item.id);
                                 }}
                                 disabled={votingItems.has(item.id)}
-                                className={`flex items-center text-xs px-2 py-1 rounded transition-colors ${
+                                className={`flex items-center text-xs px-2 py-1 rounded border transition-colors ${
                                   votes[item.id]?.voted
-                                    ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                                    : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600"
+                                    ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 border-blue-300 dark:border-blue-700"
+                                    : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500"
                                 } ${
                                   votingItems.has(item.id)
                                     ? "opacity-50 cursor-not-allowed"
@@ -420,10 +420,10 @@ export default function RoadmapPage({
                             disabled={
                               !selectedItem || votingItems.has(selectedItem.id)
                             }
-                            className={`flex items-center text-sm px-3 py-1.5 rounded-lg transition-colors ${
+                            className={`flex items-center text-sm px-3 py-1.5 rounded-lg border transition-colors ${
                               selectedItem && votes[selectedItem.id]?.voted
-                                ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                                : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600"
+                                ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 border-blue-300 dark:border-blue-700"
+                                : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500"
                             } ${
                               !selectedItem || votingItems.has(selectedItem.id)
                                 ? "opacity-50 cursor-not-allowed"

apps/web/components/roadmap/RoadmapItem.tsx

@@ -86,7 +86,7 @@ export default function RoadmapItem({
             </span>
           )}
         </div>
-        <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
+        <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600 rounded-md px-2 py-1 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
           <svg className="mr-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
             <path
               fillRule="evenodd"

apps/web/pages/pages/[page_id]/roadmap/[board_id]/settings.tsx

@@ -8,6 +8,7 @@ import { PencilIcon, PlusIcon, TrashIcon } from "@heroicons/react/solid";
 import { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState, type JSX } from "react";
+import ConfirmDeleteDialog from "../../../../../components/dialogs/confirm-delete-dialog.component";
 import SwitchComponent from "../../../../../components/forms/switch.component";
 import AuthLayout from "../../../../../components/layout/auth-layout.component";
 import Page from "../../../../../components/layout/page.component";
@@ -153,6 +154,10 @@ export default function BoardSettings({
   const [draggedColumn, setDraggedColumn] = useState(null);
   const [dragOverIndex, setDragOverIndex] = useState(null);
 
+  // Delete board state
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeletingBoard, setIsDeletingBoard] = useState(false);
+
   const tabs = [
     {
       name: "Settings",
@@ -303,7 +308,7 @@ export default function BoardSettings({
     }
   };
 
-  const handleUpdateCategory = async (categoryId) => {
+  const handleUpdateCategory = async (categoryId: string) => {
     if (!categoryToEdit.trim() || !isPageOwner) return;
 
     try {
@@ -355,7 +360,7 @@ export default function BoardSettings({
     }
   };
 
-  const handleDeleteCategory = async (categoryId) => {
+  const handleDeleteCategory = async (categoryId: string) => {
     // Check if category has items
     try {
       const { data: itemsWithCategory, error: checkError } = await supabase
@@ -438,7 +443,7 @@ export default function BoardSettings({
     }
   };
 
-  const handleUpdateColumn = async (columnId) => {
+  const handleUpdateColumn = async (columnId: string) => {
     if (!columnToEdit.trim() || !isPageOwner) return;
 
     try {
@@ -478,7 +483,7 @@ export default function BoardSettings({
     }
   };
 
-  const handleDeleteColumn = async (columnId) => {
+  const handleDeleteColumn = async (columnId: string) => {
     // Check if stage has items
     try {
       const { data: itemsInColumn, error: checkError } = await supabase
@@ -607,6 +612,37 @@ export default function BoardSettings({
     setDragOverIndex(null);
   };
 
+  // Delete board function
+  const handleDeleteBoard = async () => {
+    if (!isPageOwner) return;
+
+    setIsDeletingBoard(true);
+    try {
+      const { error } = await supabase
+        .from("roadmap_boards")
+        .delete()
+        .eq("id", board.id);
+
+      if (error) throw error;
+
+      // Create audit log for board deletion
+      await createAuditLog(supabase, {
+        page_id: page_id,
+        actor_id: user.id,
+        action: `Deleted Roadmap Board: ${board.title}`,
+        changes: { board: board },
+      });
+
+      // Redirect to roadmap list
+      router.push(`/pages/${page_id}/roadmap`);
+    } catch (error) {
+      console.error("Error deleting board:", error);
+      alert("Failed to delete board");
+      setIsDeletingBoard(false);
+    }
+    setShowDeleteDialog(false);
+  };
+
   if (!page_id || !board || !isPageOwner) {
     return <div>Access denied</div>;
   }
@@ -767,7 +803,15 @@ export default function BoardSettings({
                 />
               </div>
 
-              <div className="flex justify-end">
+              <div className="flex justify-between items-center">
+                <button
+                  type="button"
+                  onClick={() => setShowDeleteDialog(true)}
+                  className="inline-flex items-center justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                >
+                  <TrashIcon className="h-4 w-4 mr-2" />
+                  Delete Board
+                </button>
                 <button
                   type="submit"
                   disabled={isSavingBoard}
@@ -1044,6 +1088,17 @@ export default function BoardSettings({
           </div>
         )}
       </div>
+
+      {/* Delete Board Confirmation Dialog */}
+      <ConfirmDeleteDialog
+        itemName={board.title}
+        open={showDeleteDialog}
+        setOpen={setShowDeleteDialog}
+        highRiskAction={true}
+        riskVerificationText={board.title}
+        deleteCallback={handleDeleteBoard}
+        processing={isDeletingBoard}
+      />
     </Page>
   );
 }