Styled Board - Copy this React, Mui Component to your project

7. Kanban Board (components_vetting_kanban board.jsx) Purpose: Display the vetting process as a drag and drop Kanban board. Components: Columns: Each column represents a stage in the vetting process (e.g., Application Submitted, Document Verification, Interview, etc.). Cards: Each card represents a service provider and contains a ServiceProviderCard. Drag and Drop: Users can drag cards between columns to move service providers through the vetting process. Double Click: Double clicking a card opens the ServiceProviderDetailsDialog. UI Details: The board should be horizontally scrollable with a fixed height. Each column should have a title and a count of items in that column. The background color of each column should vary based on the stage (e.g., blue for Application Submitted, green for Document Verification, etc.). Cards should be draggable and droppable within and between columns."use client"; import { DragDropContext, Draggable, Droppable } from "@hello pangea/dnd"; import { useState } from "react"; export function KanbanBoard({ columns: initialColumns, onDragEnd, onCardDoubleClick, selectedProviders, setSelectedProviders }) { const [columns, setColumns] = useState(initialColumns || []); const handleDragEnd = (result) => { if (!result.destination) return; const { source, destination } = result; const sourceColumn = columns.find((col) => col.id === source.droppableId); const destColumn = columns.find((col) => col.id === destination.droppableId); if (!sourceColumn || !destColumn) return; if (source.droppableId === destination.droppableId) { const newItems = Array.from(sourceColumn.items || []); const [removed] = newItems.splice(source.index, 1); newItems.splice(destination.index, 0, removed); const newColumns = columns.map((col) => { if (col.id === source.droppableId) { return { ...col, items: newItems }; } return col; }); setColumns(newColumns); } else { const sourceItems = Array.from(sourceColumn.items || []); const destItems = Array.from(destColumn.items || []); const [removed] = sourceItems.splice(source.index, 1); destItems.splice(destination.index, 0, removed); const newColumns = columns.map((col) => { if (col.id === source.droppableId) { return { ...col, items: sourceItems }; } if (col.id === destination.droppableId) { return { ...col, items: destItems }; } return col; }); setColumns(newColumns); } onDragEnd(result); }; const getColumnBackground = (columnId) => { switch (columnId) { case 'application submitted': case 'new entry': return 'bg gradient to br from blue 100 to blue 200'; case 'document verification': case 'course one': return 'bg gradient to br from green 100 to green 200'; case 'guarantee and medical': case 'course two': return 'bg gradient to br from yellow 100 to yellow 200'; case 'interview': case 'final course': return 'bg gradient to br from purple 100 to purple 200'; case 'get exam': return 'bg gradient to br from red 100 to red 200'; case 're examination': return 'bg gradient to br from orange 100 to orange 200'; default: return 'bg gradient to br from gray 100 to gray 200'; } }; return ( <DragDropContext onDragEnd={handleDragEnd}> <div className="flex gap 4 overflow x auto pb 4 h [calc(100vh 12rem)]"> {columns?.map((column) => ( <div key={column.id} className={`flex flex col min w [300px] rounded lg p 4 ${getColumnBackground(column.id)}`}> <h3 className="font semibold mb 4 text lg"> {column.title} <span className="text muted foreground">({column.items?.length || 0})</span> </h3> <Droppable droppableId={column.id}> {(provided) => ( <div {...provided.droppableProps} ref={provided.innerRef} className="flex flex col gap 2 h full" > {column.items?.map((item, index) => ( <Draggable key={item.id} draggableId={item.id} index={index}> {(provided) => ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} onDoubleClick={() => onCardDoubleClick(item)} > {item.content} </div> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </div> ))} </div> </DragDropContext> ); }