tsms/src/components/EditStaffForm/EditStaffForm.tsx

// import { fetchStaffEdit } from "@/app/api/staff";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import CustomInputForm from "../CustomInputForm";
import { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
import { CreateStaffInputs, saveStaff, testing } from "@/app/api/staff/actions";
import { Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import dayjs from "dayjs";

interface Options {
    id: any;
    label: string;
    [key: string]: any;
  }

interface Field {
  //   subtitle: string;
  id: string;
  label: string;
  type: string;
  value?: any;
  required?: boolean;
  options?: any[] | null;
  readOnly?: boolean;
}

interface formProps {
  Title?: string[];
  fieldLists: Field[][];
}

const EditStaffForm: React.FC<formProps> = ({ Title, fieldLists }) => {
  const router = useRouter();
  const { t } = useTranslation();
  const searchParams = useSearchParams();
  const idString = searchParams.get("id")
  const [serverError, setServerError] = useState("");
  // make new inputs
  const onSubmit = useCallback<SubmitHandler<CreateStaffInputs>>(
    async (data) => {
      try {
        let formatJoinDate = data.joinDate
        let formatDepartDate = data.departDate
        if (data.joinDate && /^\d{2}\/\d{2}\/\d{4}$/.test(data.joinDate)) {
          const formattedDate = dayjs(data.joinDate, 'MM/DD/YYYY').format('YYYY-MM-DD');
          formatJoinDate = formattedDate;
        }
        if (data.departDate && data.departDate.length > 0 && /^\d{2}\/\d{2}\/\d{4}$/.test(data.departDate)) {
          const formattedDate = dayjs(data.departDate, 'MM/DD/YYYY').format('YYYY-MM-DD');
          formatDepartDate = formattedDate;
        }
        if (idString) {
          const temp = {
              id: parseInt(idString),
              ...data,
              emergContactPhone: data.emergContactPhone.toString(),
              phone1: data.phone1.toString(),
              phone2: data.phone1.toString(),
              joinDate: formatJoinDate,
              departDate: formatDepartDate,
          }
          console.log(temp)
          setServerError("");
          await saveStaff(temp);
          router.replace("/settings/staff");
        }
      } catch (e) {
        setServerError(t("An error has occurred. Please try again later."));
      }
    },
    [router, t]
  );
  const onSubmitError = useCallback<SubmitErrorHandler<CreateStaffInputs>>(
    (errors) => {
      console.log(errors);
    },
    []
  );

  const handleCancel = () => {
    router.back();
  };
  return (
    <>
          {serverError && (
        <Typography variant="body2" color="error" alignSelf="flex-end">
          {serverError}
        </Typography>
      )}
      <CustomInputForm
        Title={Title}
        fieldLists={fieldLists}
        isActive={true}
        onSubmit={onSubmit}
        onSubmitError={onSubmitError}
        onCancel={handleCancel}
      />
    </>
  );
};
export default EditStaffForm;