Job Management - Copy this React, Tailwind Component to your project

Design-an-intractive-job-managment-page-so-it-will-have-heading-saying-job-manangmet-with-tooltip-and-make-the-table-height-fit-to-screen-fixed-a-table-column-will-be-job-title,-client-name,-job-status-and-action-will-be-3-dot-vertical-icons-and-will-have-the-option-when-lcick-it-(the-action-three-buttons-close-job-,assign-caregiver-and-see-applicants).-so-when-admin-click-ijob-title-it-should-open-modal-and-show-job-name,-description,-requirments,-salary,-expereinceLevel,-location,-jobType,position-and-if-he-click-client-name-open-modal-and-show-client-image,name-email,-phone-number,-we-will-have-global-search-using-for-job-title-and-client-name-and-filter-with-dropdown-for-job-status-(which-are-close-and-open),-amd-if-job-is-close-we-have-to-show-only-see-applicants-action.-if-job-is-open-close-action-will-close-job-ask-admin-are-you-sure-you-want-to-close,-next-is-see-applicants-action-and-the-third-one-is-assign-caregiver-will-opne-a-model-when-assign-care-giver-is-clicked-and-admin-can-see-alist-of-care-giver-or-search-with-name-or-phoneNumber-and-select-one-and-assign-button-click-are-you-sure-ti-assign-these-care-giver-question-next-to-assing-is-cancel-for-modal-it-have-to-be-more-attratvie-use-aos-and-have-must-ppagination-have-to-show-10-jobs-per-page,pagination-will-have-show-page-number-,ext-and-prev-button-and-search-page-number-and-for-buttons-and-other-color-u-are-gonna-use-use-these-color-##CE257A-my-code-functionaliries-for-above-ui-i-am-asking-is-these-/*-eslint-disable-no-unused-vars-*/-import-React,-{-useContext,-useState,-useEffect-}-from-"react";-import-{-AdminContext-}-from-"../../context/AdminContext";-import-{-Table,-TableBody,-TableCell,-TableContainer,-TableHead,-TableRow,-Button,-}-from-"@mui/material";-import-AssignCaregiverModal-from-"./AssignCaregiverModal-";-import-{-useNavigate-}-from-"react-router-dom";-const-JobManagementTable-=-()-=>-{-const-{-getAllJobs,-closeJob,-assignCaregiverToJob,-jobs,-careGivers-}-=-useContext(AdminContext);-const-[openAssignModal,-setOpenAssignModal]-=-useState(false);-const-[selectedJobId,-setSelectedJobId]-=-useState(null);-const-navigate-=-useNavigate();-useEffect(()-=>-{-getAllJobs();-},-[getAllJobs]);-const-handleAssignClick-=-(jobId)-=>-{-setSelectedJobId(jobId);-setOpenAssignModal(true);-};-const-handleCloseJob-=-(jobId)-=>-{-closeJob(jobId);-};-const-handleSeeApplicantsClick-=-(jobId)-=>-{-navigate(`/applicants/${jobId}`);-};-return-(-<TableContainer>-<Table>-<TableHead>-<TableRow>-<TableCell>Job-Title</TableCell>-<TableCell>Client</TableCell>-<TableCell>Status</TableCell>-<TableCell>Actions</TableCell>-</TableRow>-</TableHead>-<TableBody>-{jobs.map((job)-=>-(-<TableRow-key={job._id}>-<TableCell>{job.title}</TableCell>-<TableCell>{job.clientEmail}</TableCell>-<TableCell>-{job.status-===-"closed"-?-"Job-Closed"-:-"Open"}-</TableCell>-<TableCell>-{job.status-!==-"closed"-?-(-<Button-onClick={()-=>-handleCloseJob(job._id)}-color="secondary"->-Close-</Button>-)-:-(-<span>Job-Closed</span>-)}-{job.status-!==-"closed"-&&-(-<Button-onClick={()-=>-handleAssignClick(job._id)}-color="primary"->-Assign-Caregiver-</Button>-)}-<Button-onClick={()-=>-handleSeeApplicantsClick(job._id)}-color="default"->-See-Applicants-</Button>-</TableCell>-</TableRow>-))}-</TableBody>-</Table>-{openAssignModal-&&-(-<AssignCaregiverModal-open={openAssignModal}-onClose={()-=>-setOpenAssignModal(false)}-onAssign={(selectedCaregiver)-=>-assignCaregiverToJob(selectedJobId,-selectedCaregiver)-}-careGivers={careGivers}-//-Ensure-careGivers-is-passed-correctly-/>-)}-</TableContainer>-);-};-export-default-JobManagementTable;