update Create Project button

display after loading complete

src/components/CreateProject/CreateProject.tsx

@@ -9,7 +9,7 @@ import Stack from "@mui/material/Stack";
 import Tab from "@mui/material/Tab";
 import Tabs, { TabsProps } from "@mui/material/Tabs";
 import { useRouter } from "next/navigation";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import ProjectClientDetails from "./ProjectClientDetails";
 import TaskSetup from "./TaskSetup";
@@ -125,9 +125,29 @@ const CreateProject: React.FC<Props> = ({
   abilities,
 }) => {
   const [serverError, setServerError] = useState("");
+  const [loading, setLoading] = useState(true);
   const [tabIndex, setTabIndex] = useState(0);
   const { t } = useTranslation();
   const router = useRouter();
+  const [buttonData, setButtonData] = useState<{
+    buttonName: string;
+    title: string;
+    confirmButtonText: string;
+    successTitle: string;
+    errorTitle: string;
+    buttonText: string;
+    buttonIcon: any;
+    buttonColor: any
+  }> ({
+    buttonName: "submit",
+    title: t("Do you want to submit?"),
+    confirmButtonText: t("Submit"),
+    successTitle: t("Submit Success"),
+    errorTitle: t("Submit Fail"),
+    buttonText: t("Submit Project"),
+    buttonIcon: <PlayArrow />,
+    buttonColor : "success"
+  })
 
   const handleCancel = () => {
     router.replace("/projects");
@@ -266,34 +286,14 @@ const CreateProject: React.FC<Props> = ({
         // save project
         setServerError("");
 
-        let title = t("Do you want to submit?");
-        let confirmButtonText = t("Submit");
-        let successTitle = t("Submit Success");
-        let errorTitle = t("Submit Fail");
-        const buttonName = (event?.nativeEvent as any).submitter.name;
-
-        if (buttonName === "start") {
-          title = t("Do you want to start?");
-          confirmButtonText = t("Start");
-          successTitle = t("Start Success");
-          errorTitle = t("Start Fail");
-        } else if (buttonName === "complete") {
-          title = t("Do you want to complete?");
-          confirmButtonText = t("Complete");
-          successTitle = t("Complete Success");
-          errorTitle = t("Complete Fail");
-        } else if (buttonName === "reopen") {
-          title = t("Do you want to reopen?");
-          confirmButtonText = t("Reopen");
-          successTitle = t("Reopen Success");
-          errorTitle = t("Reopen Fail");
-        }
+        // const buttonName = (event?.nativeEvent as any).submitter.name;
+
 
         submitDialog(
           async () => {
-            if (buttonName === "start") {
+            if (buttonData.buttonName === "start") {
               data.projectActualStart = dayjs().format("YYYY-MM-DD");
-            } else if (buttonName === "complete") {
+            } else if (buttonData.buttonName === "complete") {
               data.projectActualEnd = dayjs().format("YYYY-MM-DD");
             }/* else if (buttonName === "reopen") {
               data.projectActualEnd = dayjs().format("YYYY-MM-DD");
@@ -308,11 +308,11 @@ const CreateProject: React.FC<Props> = ({
               response.message?.toLowerCase() === "success" &&
               response.errorPosition === null
             ) {
-              successDialog(successTitle, t).then(() => {
+              successDialog(buttonData.successTitle, t).then(() => {
                 router.replace("/projects");
               });
             } else {
-              errorDialog(response.message ?? errorTitle, t).then(() => {
+              errorDialog(response.message ?? buttonData.errorTitle, t).then(() => {
                 if (
                   response.errorPosition !== null &&
                   response.errorPosition === "projectCode"
@@ -323,13 +323,13 @@ const CreateProject: React.FC<Props> = ({
                   });
                   setTabIndex(0);
                 }
-
+        
                 return false;
               });
             }
           },
           t,
-          { title: title, confirmButtonText: confirmButtonText },
+          { title: buttonData.title, confirmButtonText: buttonData.confirmButtonText },
         );
       } catch (e) {
         setServerError(t("An error has occurred. Please try again later."));
@@ -417,6 +417,52 @@ const CreateProject: React.FC<Props> = ({
     }
   }, [totalManhour])
 
+  useEffect(() => {
+    if (formProps?.getValues("projectName")){//defaultValues) {
+      setLoading(false);
+      const status = formProps.getValues("projectStatus")?.toLowerCase();
+
+      //Button Parameters//
+      switch (status) {
+        case "pending to start" :
+          setButtonData({
+            buttonName: "start",
+            title : t("Do you want to start?"),
+            confirmButtonText : t("Start"),
+            successTitle : t("Start Success"),
+            errorTitle : t("Start Fail"),
+            buttonText : t("Start Project"),
+            buttonIcon : <PlayArrow />,
+            buttonColor: "success"
+          })
+          break;
+        case "on-going" :
+          setButtonData({
+            buttonName: "complete",
+            title : t("Do you want to complete?"),
+            confirmButtonText : t("Complete"),
+            successTitle : t("Complete Success"),
+            errorTitle : t("Complete Fail"),
+            buttonText : t("Complete Project"),
+            buttonIcon : <DoneIcon />,
+            buttonColor: "info"
+          })
+          break;
+        case "completed" :
+          setButtonData({
+            buttonName: "reopen",
+            title : t("Do you want to reopen?"),
+            confirmButtonText : t("Reopen"),
+            successTitle : t("Reopen Success"),
+            errorTitle : t("Reopen Fail"),
+            buttonText : t("Reopen Project"),
+            buttonIcon : <AutorenewIcon />,
+            buttonColor: "secondary"
+          })
+      }
+    }}, [formProps]
+  )
+
   return (
     <>
       <FormProvider {...formProps}>
@@ -425,47 +471,18 @@ const CreateProject: React.FC<Props> = ({
           component="form"
           onSubmit={formProps.handleSubmit(onSubmit, onSubmitError)}
         >
-          {isEditMode && !(formProps.getValues("projectDeleted") === true) && (
+          {isEditMode && !(formProps.getValues("projectDeleted") === true) && !loading && (
             <Stack direction="row" gap={1}>
               {/* {!formProps.getValues("projectActualStart") && ( */}
-              {formProps.getValues("projectStatus")?.toLowerCase() ===
-                "pending to start" && (
-                <Button
-                  name="start"
-                  type="submit"
-                  variant="contained"
-                  startIcon={<PlayArrow />}
-                  color="success"
-                >
-                  {t("Start Project")}
-                </Button>
-              )}
-              {/* {formProps.getValues("projectActualStart") &&
-                !formProps.getValues("projectActualEnd") && ( */}
-              {formProps.getValues("projectStatus")?.toLowerCase() ===
-                "on-going" && (
-                <Button
-                  name="complete"
-                  type="submit"
-                  variant="contained"
-                  startIcon={<DoneIcon />}
-                  color="info"
-                >
-                  {t("Complete Project")}
-                </Button>
-              )}
-              {formProps.getValues("projectStatus")?.toLowerCase() ===
-                "completed" && (
-                <Button
-                  name="reopen"
-                  type="submit"
-                  variant="contained"
-                  startIcon={<AutorenewIcon />}
-                  color="secondary"
-                >
-                  {t("Reopen Project")}
-                </Button>
-              )}
+              <Button
+                name={buttonData.buttonName}
+                type="submit"
+                variant="contained"
+                startIcon={buttonData.buttonIcon}
+                color={buttonData.buttonColor}
+              >
+                {t(buttonData.buttonText)}
+              </Button>
               {!(
                 // formProps.getValues("projectActualStart") &&
                 // formProps.getValues("projectActualEnd")