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

make-these-code-the-ui-more-better-import-React,-{-useContext,-useEffect,-useState-}-from-"react";-import-{-AdminContext-}-from-"../../context/AdminContext";-import-{-toast-}-from-"react-toastify";-import-{-Box,-Card,-CardContent,-Typography,-Modal,-Select,-MenuItem,-Stack,-Avatar,-Snackbar,-Alert-}-from-"@mui/material";-import-{-DragDropContext,-Droppable,-Draggable-}-from-"react-beautiful-dnd";-const-stages-=-[-"Application-Submitted",-"Document-Verification",-"Guarantee-and-Medical-Test",-"Interview",-"Get-Exam",-"Re-examination",-"Active",-];-const-Vetting-=-()-=>-{-const-{-careGivers,-getAllCareGivers,-updateVettingStatus-}-=-useContext(AdminContext);-const-[groupedCaregivers,-setGroupedCaregivers]-=-useState({});-const-[notification,-setNotification]-=-useState({-open:-false,-message:-"",-severity:-"success"-});-const-[selectedCaregiver,-setSelectedCaregiver]-=-useState(null);-useEffect(()-=>-{-getAllCareGivers();-},-[]);-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]);-const-handleStatusChange-=-async-(caregiverId,-newStatus)-=>-{-try-{-const-response-=-await-updateVettingStatus(caregiverId,-newStatus);-if-(response.success)-{-setGroupedCaregivers((prev)-=>-{-const-updatedGrouped-=-{-...prev-};-const-caregiverIndex-=-updatedGrouped[newStatus].findIndex((cg)-=>-cg._id-===-caregiverId);-if-(caregiverIndex-!==--1)-{-updatedGrouped[newStatus][caregiverIndex].vetting_status-=-newStatus;-}-return-updatedGrouped;-});-setNotification({-open:-true,-message:-"Status-updated-successfully",-severity:-"success"-});-}-else-{-toast.error("Failed-to-update-vetting-status");-}-}-catch-(error)-{-toast.error("Error-updating-vetting-status");-}-};-const-handleDragEnd-=-(result)-=>-{-const-{-source,-destination,-draggableId-}-=-result;-if-(!destination-||-source.droppableId-===-destination.droppableId)-return;-const-sourceColumn-=-Array.from(groupedCaregivers[source.droppableId]-||-[]);-const-destColumn-=-Array.from(groupedCaregivers[destination.droppableId]-||-[]);-const-[movedCaregiver]-=-sourceColumn.splice(source.index,-1);-movedCaregiver.vetting_status-=-destination.droppableId;-destColumn.splice(destination.index,-0,-movedCaregiver);-setGroupedCaregivers({-...groupedCaregivers,-[source.droppableId]:-sourceColumn,-[destination.droppableId]:-destColumn,-});-setNotification({-open:-true,-message:-"Status-updated-successfully",-severity:-"success"-});-};-return-(-<Box>-<DragDropContext-onDragEnd={handleDragEnd}>-<Box-display="flex"-gap="1rem"-p="1rem"-bgcolor="#f5f5f5"-overflowX="auto">-{stages.map((stage)-=>-(-<Box-key={stage}-minWidth="300px"-bgcolor="#fff"-borderRadius="8px"-p="1rem">-<Typography-variant="h6"-gutterBottom>{stage}</Typography>-<Droppable-droppableId={stage}>-{(provided)-=>-(-<Box-ref={provided.innerRef}-{...provided.droppableProps}-minHeight="100px">-{(groupedCaregivers[stage]-||-[]).map((caregiver,-index)-=>-(-<Draggable-key={caregiver._id}-draggableId={caregiver._id}-index={index}>-{(provided)-=>-(-<Card-ref={provided.innerRef}-{...provided.draggableProps}-{...provided.dragHandleProps}-sx={{-mb:-2-}}>-<CardContent>-<Stack-direction="row"-spacing={2}-alignItems="center">-<Avatar-src={caregiver.image}-alt={caregiver.name}-sx={{-width:-56,-height:-56-}}-/>-<Box>-<Typography-variant="subtitle1">{caregiver.name}</Typography>-<Typography-variant="body2"-color="text.secondary">{caregiver.phoneNumber}</Typography>-<Typography-variant="body2"-color="text.secondary">-{caregiver.address?.line1},-{caregiver.address?.line2}-</Typography>-</Box>-</Stack>-<Select-size="small"-fullWidth-value={caregiver.vetting_status}-onChange={(e)-=>-handleStatusChange(caregiver._id,-e.target.value)}-sx={{-mt:-2-}}->-{stages.map((status)-=>-(-<MenuItem-key={status}-value={status}>{status}</MenuItem>-))}-</Select>-<Typography-variant="body2"-sx={{-mt:-1,-cursor:-"pointer",-color:-"primary.main"-}}-onClick={()-=>-setSelectedCaregiver(caregiver)}->-View-Profile-</Typography>-</CardContent>-</Card>-)}-</Draggable>-))}-{provided.placeholder}-</Box>-)}-</Droppable>-</Box>-))}-</Box>-</DragDropContext>-<Modal-open={Boolean(selectedCaregiver)}-onClose={()-=>-setSelectedCaregiver(null)}>-<Box-p={2}-maxWidth="400px"-bgcolor="background.paper"-borderRadius={1}-m="auto"-mt={5}>-{selectedCaregiver-&&-(-<Stack-spacing={2}>-<Avatar-src={selectedCaregiver.image}-alt={selectedCaregiver.name}-sx={{-width:-120,-height:-120,-m:-"auto"-}}-/>-<Typography-variant="h5"-align="center">{selectedCaregiver.name}</Typography>-<Typography-variant="subtitle1">Address</Typography>-<Typography-color="text.secondary">-{selectedCaregiver.address?.line1},-{selectedCaregiver.address?.line2}-</Typography>-<Typography-variant="subtitle1">Phone</Typography>-<Typography-color="text.secondary">{selectedCaregiver.phoneNumber}</Typography>-</Stack>-)}-</Box>-</Modal>-<Snackbar-open={notification.open}-autoHideDuration={3000}-onClose={()-=>-setNotification({-...notification,-open:-false-})}>-<Alert-severity={notification.severity}>{notification.message}</Alert>-</Snackbar>-</Box>-);-};-export-default-Vetting;