Kanban Container - Copy this React, Mui Component to your project

i-want-you-to-build-a-kanban-board-for-my-care-giver-vetting-process-the-columns-value-will-be-"Application-Submitted",-"Document-Verification",-"Guarantee-and-Medical-Test",-"Interview",-"Get-Exam",-"Re-examination",-"Active",-and-caregive-card-will-be-darg-and-drop-to-one-column-vetting_status-will-be-changed-,-if-i-click-on-care-giver-profile-in-modal-i-will-see-<StyledTableCell>Image</StyledTableCell>-<StyledTableCell>Name</StyledTableCell>-<StyledTableCell>Category</StyledTableCell>-<StyledTableCell>Fees</StyledTableCell>-<StyledTableCell>Rating</StyledTableCell>-<StyledTableCell>Address</StyledTableCell>-<StyledTableCell>Contact</StyledTableCell>,-the-card-on-kanband-board-for-each-will-show-their-image,-name-and-phone-number-,-always-kanban-board-height-will-be-fixed-screensize-.-my-code-was-/*-eslint-disable-no-unused-vars-*/-import-React,-{-useContext,-useEffect,-useState-}-from-"react";-import-{-AdminContext-}-from-"../../context/AdminContext";-import-{-toast-}-from-"react-toastify";-const-Vetting-=-()-=>-{-const-{-careGivers,-getAllCareGivers,-updateVettingStatus-}-=-useContext(AdminContext);-const-[groupedCaregivers,-setGroupedCaregivers]-=-useState({});-//-Group-caregivers-by-vetting-status-whenever-caregivers-data-changes-useEffect(()-=>-{-const-grouped-=-careGivers.reduce((acc,-caregiver)-=>-{-const-status-=-caregiver.vetting_status-||-"Application-Submitted";-if-(!acc[status])-{-acc[status]-=-[];-}-acc[status].push(caregiver);-return-acc;-},-{});-setGroupedCaregivers(grouped);-},-[careGivers]);-//-Fetch-caregivers-initially-useEffect(()-=>-{-getAllCareGivers();-},-[]);-const-handleStatusChange-=-async-(caregiverId,-newStatus)-=>-{-try-{-const-response-=-await-updateVettingStatus(caregiverId,-newStatus);-if-(response.success)-{-toast.success(response.message);-getAllCareGivers();-//-Refresh-caregiver-data-}-else-{-toast.error("Failed-to-update-vetting-status");-}-}-catch-(error)-{-toast.error("Error-updating-vetting-status");-}-};-const-stages-=-[-"Application-Submitted",-"Document-Verification",-"Guarantee-and-Medical-Test",-"Interview",-"Get-Exam",-"Re-examination",-"Active",-];-return-(-<div-className="kanban-board-grid-grid-cols-7-gap-4">-{stages.map((stage)-=>-(-<div-key={stage}-className="kanban-column-bg-gray-100-p-4-rounded-shadow"->-<h2-className="text-xl-font-bold-mb-2">{stage}</h2>-{groupedCaregivers[stage]-&&-groupedCaregivers[stage].map((caregiver)-=>-(-<div-key={caregiver._id}-className="kanban-card-bg-white-p-4-rounded-shadow-mb-4"->-<img-src={caregiver.image}-alt={caregiver.name}-className="w-12-h-12-rounded-full-mb-2"-/>-<h3-className="text-lg-font-semibold">{caregiver.name}</h3>-<p-className="text-sm">{caregiver.phoneNumber}</p>-<select-className="mt-2-p-1-rounded-border"-value={caregiver.vetting_status}-onChange={(e)-=>-handleStatusChange(caregiver._id,-e.target.value)-}->-{stages.map((status)-=>-(-<option-key={status}-value={status}>-{status}-</option>-))}-</select>-</div>-))}-</div>-))}-</div>-);-};-export-default-Vetting;