update delete staff

src/components/EditStaff/EditStaff.tsx

@@ -10,18 +10,20 @@ import {
   SubmitHandler,
   useForm,
 } from "react-hook-form";
-import { CreateStaffInputs, saveStaff, teamHistory } from "@/app/api/staff/actions";
+import { CreateStaffInputs, deleteStaff, saveStaff, teamHistory } from "@/app/api/staff/actions";
 import { Button, Stack, Tab, Tabs, TabsProps, Typography } from "@mui/material";
 // import CreateStaffForm from "../CreateStaffForm";
 import { comboProp } from "@/app/api/companys/actions";
 // import StaffInfo from "./StaffInfo";
 import { Check, Close, ConstructionOutlined, RestartAlt } from "@mui/icons-material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import StaffInfo from "./StaffInfo";
 import { IndividualStaff, projects, SalaryEffectiveInfo } from "@/app/api/staff";
 import dayjs from "dayjs";
 import ProjectHistory from "./ProjectHistory";
 import { InfoHistory } from "./EditStaffWrapper";
 import { fetchIndivTeam } from "@/app/api/team";
+import { deleteDialog, successDialog } from "../Swal/CustomAlerts";
 // import { useGridApiContext } from '@mui/x-data-grid';
 
 export interface comboItem {
@@ -43,7 +45,6 @@ interface formProps {
 }
 
 
-
 const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo, InvolvedProject, InfoHistory }) => {
   const defaultSkillset = Staff.skillset.map((s: any) => s.skill.id)
   const { t } = useTranslation();
@@ -256,6 +257,15 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo, In
     []
   );
 
+  const handleDelete = useCallback(() => {
+    console.log(id)
+    deleteDialog(async () => {
+      await deleteStaff(id);
+      router.replace("/settings/staff")
+      successDialog(t("Delete Success"), t);
+    }, t);
+  }, [])
+
   return (
     <>
       <FormProvider {...formProps}>
@@ -288,6 +298,14 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo, In
           {tabIndex == 1 && <ProjectHistory InvolvedProject={InvolvedProject}/>}
           {tabIndex == 0 &&
           <Stack direction="row" justifyContent="flex-end" gap={1}>
+          <Button
+              variant="contained"
+              color="error"
+              startIcon={<DeleteIcon />}
+              onClick={() => handleDelete()}
+            >
+              {t("Delete")}
+            </Button>
           <Button
               variant="text"
               startIcon={<RestartAlt />}