update

src/app/(main)/settings/skill/create/page.tsx

@@ -28,11 +28,7 @@ import CreateSkill from "@/components/CreateSkill";
 // const Title = ["title1", "title2"];
 
 const CreateStaff: React.FC = async () => {
-  const { t } = await getServerI18n("staff");
-
-  const title = ['', t('Additional Info')]
-  // const regex = new RegExp("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")
-  // console.log(regex)
+  const { t } = await getServerI18n("skill");
 
   return (
     <>

src/app/(main)/settings/skill/edit/page.tsx

@@ -17,13 +17,13 @@ const EditSkillPage: React.FC<searchParamsProps> = async ({
   searchParams,
 }) => {
     console.log(searchParams.id)
-    const { t } = await getServerI18n("staff");
+    const { t } = await getServerI18n("skill");
 
   return (
 
       <>
         <Typography variant="h4">{t("Edit Skill")}</Typography>
-        <I18nProvider namespaces={["team", "common"]}>
+        <I18nProvider namespaces={["skill", "common"]}>
           <Suspense fallback={<EditSkill.Loading />}>
             <EditSkill id={parseInt(searchParams.id as string)}/>
           </Suspense>

src/app/(main)/settings/skill/page.tsx

@@ -38,7 +38,7 @@ const Skill: React.FC = async () => {
           {t("Create Skill")}
         </Button>
       </Stack>
-      <I18nProvider namespaces={["staff", "common"]}>
+      <I18nProvider namespaces={["skill", "common"]}>
         <Suspense fallback={<SkillSearch.Loading />}>
           <SkillSearch />
         </Suspense>

src/app/(main)/settings/team/create/page.tsx

@@ -1,28 +1,6 @@
-// 'use client';
 import { I18nProvider, getServerI18n } from "@/i18n";
-import CustomInputForm from "@/components/CustomInputForm";
-import Check from "@mui/icons-material/Check";
-import Close from "@mui/icons-material/Close";
-import Button from "@mui/material/Button";
-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 { useTranslation } from "react-i18next";
-import { Task, TaskTemplate } from "@/app/api/tasks";
-import {
-  FieldErrors,
-  FormProvider,
-  SubmitErrorHandler,
-  SubmitHandler,
-  useForm,
-} from "react-hook-form";
-import { CreateProjectInputs, saveProject } from "@/app/api/projects/actions";
-import { Error } from "@mui/icons-material";
-import { ProjectCategory } from "@/app/api/projects";
-import { Grid, Typography } from "@mui/material";
-import CreateStaffForm from "@/components/CreateStaff/CreateStaff";
+import React from "react";
+import { Typography } from "@mui/material";
 import CreateTeam from "@/components/CreateTeam";
 
 const CreateTeamPage: React.FC = async () => {
@@ -31,7 +9,7 @@ const CreateTeamPage: React.FC = async () => {
   return (
     <>
       <Typography variant="h4">{t("Create Team")}</Typography>
-      <I18nProvider namespaces={["Team"]}>
+      <I18nProvider namespaces={["team"]}>
         <CreateTeam/>
       </I18nProvider>
     </>

src/app/(main)/settings/team/page.tsx

@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 
 
   const Team: React.FC = async () => {
-    const { t } = await getServerI18n("Team");
+    const { t } = await getServerI18n("team");
     // preloadTeamLeads();
     // preloadStaff();
     return (
@@ -41,7 +41,7 @@ export const metadata: Metadata = {
             {t("Create Team")}
           </Button>
         </Stack>
-        <I18nProvider namespaces={["Team", "common"]}>
+        <I18nProvider namespaces={["team", "common"]}>
           <Suspense fallback={<TeamSearch.Loading />}>
             <TeamSearch />
           </Suspense>

src/app/api/group/actions.ts

@@ -36,16 +36,20 @@ export const fetchAuth = cache(async (target: string, id?: number ) => {
 });
   
 export const saveGroup = async (data: CreateGroupInputs) => {
-  return serverFetchJson(`${BASE_API_URL}/group/save`, {
-      method: "POST",
-      body: JSON.stringify(data),
-      headers: { "Content-Type": "application/json" },
-    });
+  const newGroup = serverFetchJson(`${BASE_API_URL}/group/save`, {
+    method: "POST",
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+  });
+  revalidateTag("group")
+  return newGroup
   };
   
 export const deleteGroup = async (id: number) => {
-  return serverFetchWithNoContent(`${BASE_API_URL}/group/${id}`, {
+  const newGroup = serverFetchWithNoContent(`${BASE_API_URL}/group/${id}`, {
     method: "DELETE",
     headers: { "Content-Type": "application/json" },
   });
+  revalidateTag("group")
+  return newGroup
 };

src/app/api/skill/actions.ts

@@ -1,8 +1,9 @@
 
 "use server"
 
-import { serverFetchJson } from "@/app/utils/fetchUtil";
+import { serverFetchJson, serverFetchWithNoContent } from "@/app/utils/fetchUtil";
 import { BASE_API_URL } from "@/config/api";
+import { revalidateTag } from "next/cache";
 import { cache } from "react";
 
 export interface CreateSkillInputs {
@@ -29,9 +30,21 @@ export const fetchSkillCombo = cache(async () => {
 
   
 export const saveSkill = async (data: CreateSkillInputs) => {
-  return serverFetchJson(`${BASE_API_URL}/skill/save`, {
-      method: "POST",
-      body: JSON.stringify(data),
-      headers: { "Content-Type": "application/json" },
-    });
+  const newSkill = serverFetchJson(`${BASE_API_URL}/skill/save`, {
+    method: "POST",
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+  });
+  revalidateTag("skill")
+  return newSkill
+  };
+
+    
+export const deleteSkill = async (id: number) => {
+  const newSkill = await serverFetchWithNoContent(`${BASE_API_URL}/skill/delete/${id}`, {
+    method: "DELETE",
+    headers: { "Content-Type": "application/json" },
+  });
+  revalidateTag("skill");
+  return newSkill
   };

src/app/api/skill/index.ts

@@ -4,11 +4,12 @@ import { cache } from "react";
 import "server-only";
 
 export interface SkillResult {
-    action: any;
+    action: unknown;
     id: number;
     name: string;
     description: string;
     code: string;
+    delete: unknown
   }
 
   export const preloadSkill = () => {
@@ -17,12 +18,12 @@ export interface SkillResult {
 
   export const fetchSkill = cache(async () => {
     return serverFetchJson<SkillResult[]>(`${BASE_API_URL}/skill`, {
-      next: { tags: ["sill"] },
+      next: { tags: ["skill"] },
     });
   });
 
   export const fetchSkillDetail = cache(async (id: number) => {
     return serverFetchJson<SkillResult[]>(`${BASE_API_URL}/skill/${id}`, {
-      next: { tags: ["sill"] },
+      next: { tags: ["skill"] },
     });
   });

src/app/api/staff/actions.ts

@@ -1,9 +1,10 @@
 "use server";
-import { serverFetchJson, serverFetchWithNoContent } from "@/app/utils/fetchUtil";
+import { ServerFetchError, serverFetchJson, serverFetchWithNoContent } from "@/app/utils/fetchUtil";
 import { BASE_API_URL } from "@/config/api";
 import { StaffResult, data } from ".";
 import { cache } from "react";
 import { Team, staff } from "../team/actions";
+import { revalidateTag } from "next/cache";
 export interface CreateCustomInputs {
     // Project details
     projectCode: string;
@@ -41,17 +42,27 @@ export interface CreateStaffInputs {
     name: string;
     // team: Team[];
   }
-  // export interface Staff4TransferList {
-  //   records: records[];
-  // }
 
 export const saveStaff = async (data: CreateStaffInputs) => {
-  return serverFetchJson(`${BASE_API_URL}/staffs/save`, {
+  // try {
+    const newStaffList = await serverFetchJson(`${BASE_API_URL}/staffs/save`, {
       method: "POST",
       body: JSON.stringify(data),
       headers: { "Content-Type": "application/json" },
     });
+    console.log(newStaffList)
+    revalidateTag("staffs");
+    return newStaffList
+    
+  // } catch (e: any) {
+  //   console.log(e.response)
+  //   throw new ServerFetchError(
+  //     "Something went wrong fetching data in serverssssss.",
+  //     e.response,
+  //   );
+  // }
   };
+
   
 export const testing = async (data: CreateStaffInputs) => {
   return serverFetchJson(`${BASE_API_URL}/staffs/testing`, {
@@ -62,11 +73,13 @@ export const testing = async (data: CreateStaffInputs) => {
   };
   
 export const deleteStaff = async (id: number) => {
-    return serverFetchWithNoContent(`${BASE_API_URL}/staffs/delete/${id}`, {
-      method: "DELETE",
-      // body: JSON.stringify(data),
-      headers: { "Content-Type": "application/json" },
-    });
+  const newStaffList = await serverFetchWithNoContent(`${BASE_API_URL}/staffs/delete/${id}`, {
+    method: "DELETE",
+    // body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+  });
+  revalidateTag("staffs");
+  return newStaffList
   };
 
     

src/app/api/staff/index.ts

@@ -38,6 +38,7 @@ export interface StaffResult {
   data: data;
   teamId: number;
   staffName: string;
+  userId: number;
 }
 export interface searchInput {
   staffId: string;

src/app/api/team/actions.ts

@@ -3,6 +3,7 @@ import { serverFetchJson, serverFetchWithNoContent } from "@/app/utils/fetchUtil
 import { BASE_API_URL } from "@/config/api";
 import { cache } from "react";
 import { TeamResult } from ".";
+import { revalidateTag } from "next/cache";
 
 
 export interface CreateTeamInputs {
@@ -45,17 +46,21 @@ export const fetchTeamCombo = cache(async () => {
 });
 
 export const saveTeam = async (data: CreateTeamInputs) => {
-  return serverFetchJson(`${BASE_API_URL}/team/save`, {
-      method: "POST",
-      body: JSON.stringify(data),
-      headers: { "Content-Type": "application/json" },
-    });
+  const newTeam = serverFetchJson(`${BASE_API_URL}/team/save`, {
+    method: "POST",
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+  });
+  revalidateTag("team")
+  return newTeam
   };
 
     
 export const deleteTeam = async (id: number) => {
-  return serverFetchWithNoContent(`${BASE_API_URL}/team/delete/${id}`, {
+  const newTeam = serverFetchWithNoContent(`${BASE_API_URL}/team/delete/${id}`, {
     method: "DELETE",
     headers: { "Content-Type": "application/json" },
   });
+  revalidateTag("team")
+  return newTeam
 };

src/app/api/user/actions.ts

@@ -26,18 +26,22 @@ export const fetchUserDetails = cache(async (id: number) => {
   });
 
 export const editUser = async (id: number, data: UserInputs) => {
-    return serverFetchWithNoContent(`${BASE_API_URL}/user/${id}`, {
-      method: "PUT",
-      body: JSON.stringify(data),
-      headers: { "Content-Type": "application/json" },
-    });
+  const newUser = serverFetchWithNoContent(`${BASE_API_URL}/user/${id}`, {
+    method: "PUT",
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+  });
+  revalidateTag("user")
+  return newUser
   };
 
 export const deleteUser = async (id: number) => {
-    return serverFetchWithNoContent(`${BASE_API_URL}/user/${id}`, {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-    });
+  const newUser = serverFetchWithNoContent(`${BASE_API_URL}/user/${id}`, {
+    method: "DELETE",
+    headers: { "Content-Type": "application/json" },
+  });
+  revalidateTag("user")
+  return newUser
   };
 
 export const changePassword = async (data: any) => {

src/app/utils/fetchUtil.ts

@@ -38,18 +38,23 @@ type FetchParams = Parameters<typeof fetch>;
 
 export async function serverFetchJson<T>(...args: FetchParams) {
   const response = await serverFetch(...args);
-
   if (response.ok) {
     return response.json() as T;
   } else {
+    const errorText = await response.text()
     switch (response.status) {
       case 401:
         signOutUser();
+      case 422:
+        throw new ServerFetchError(
+          JSON.parse(errorText).error,
+          response
+        );
       default:
-        console.error(await response.text());
+        console.error(errorText);
         throw new ServerFetchError(
           "Something went wrong fetching data in server.",
-          response,
+          response
         );
     }
   }

src/components/ChangePassword/ChangePassword.tsx

@@ -8,7 +8,6 @@ import { useTranslation } from "react-i18next";
 import { Button, Stack, Tab, Tabs, TabsProps, Typography } from "@mui/material";
 import { Check, Close, Error } from "@mui/icons-material";
 import ChagnePasswordForm from "./ChangePasswordForm";
-import { ServerFetchError } from "@/app/utils/fetchUtil";
 
 // interface Props {
 //     // auth?: auth[]

src/components/CreateSkill/CreateSkill.tsx

@@ -23,7 +23,7 @@ const CreateSkill: React.FC<Props> = () => {
   const [serverError, setServerError] = useState("");
   const router = useRouter();
   const { t } = useTranslation();
-  const [tabIndex, setTabIndex] = useState(0);
+  // const [tabIndex, setTabIndex] = useState(0);
   const errors = formProps.formState.errors;
 
   const onSubmit = useCallback<SubmitHandler<CreateSkillInputs>>(
@@ -44,28 +44,28 @@ const CreateSkill: React.FC<Props> = () => {
     router.back();
   };
 
-//   const handleReset = useCallback(() => {
-//     console.log(defaultValues)
-// }, [defaultValues])
+  const resetSkill = useCallback(() => {
+    formProps.reset()
+}, [])
 
-  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
-    (_e, newValue) => {
-      setTabIndex(newValue);
-    },
-    []
-  );
+  // const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
+  //   (_e, newValue) => {
+  //     setTabIndex(newValue);
+  //   },
+  //   []
+  // );
 
-  const hasErrorsInTab = (
-    tabIndex: number,
-    errors: FieldErrors<CreateSkillInputs>
-  ) => {
-    switch (tabIndex) {
-      case 0:
-        return Object.keys(errors).length > 0;
-      default:
-        false;
-    }
-  };
+  // const hasErrorsInTab = (
+  //   tabIndex: number,
+  //   errors: FieldErrors<CreateSkillInputs>
+  // ) => {
+  //   switch (tabIndex) {
+  //     case 0:
+  //       return Object.keys(errors).length > 0;
+  //     default:
+  //       false;
+  //   }
+  // };
   return (
     <>
       <FormProvider {...formProps}>
@@ -74,13 +74,13 @@ const CreateSkill: React.FC<Props> = () => {
           component="form"
           onSubmit={formProps.handleSubmit(onSubmit)}
         >
-          <Tabs
+          {/* <Tabs
             value={tabIndex}
             onChange={handleTabChange}
             variant="scrollable"
           >
             <Tab
-              label={t("Team Info")}
+              label={t("Skill Info")}
               icon={
                 hasErrorsInTab(0, errors) ? (
                   <Error sx={{ marginInlineEnd: 1 }} color="error" />
@@ -88,15 +88,22 @@ const CreateSkill: React.FC<Props> = () => {
               }
               iconPosition="end"
             />
-            {/* <Tab label={t("Certification")} iconPosition="end" /> */}
-          </Tabs>
+          </Tabs> */}
           {serverError && (
             <Typography variant="body2" color="error" alignSelf="flex-end">
               {serverError}
             </Typography>
           )}
-          {tabIndex === 0 && <SkillInfo />}
+          {/* {tabIndex === 0 && <SkillInfo />} */}
+          <SkillInfo />
           <Stack direction="row" justifyContent="flex-end" gap={1}>
+          <Button
+              variant="text"
+              startIcon={<RestartAlt />}
+              onClick={resetSkill}
+            >
+              {t("Reset")}
+            </Button>
             <Button
               variant="outlined"
               startIcon={<Close />}

src/components/CreateSkill/SkillInfo.tsx

@@ -15,8 +15,7 @@ import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import { useCallback } from "react";
 import { CreateSkillInputs } from "@/app/api/skill/actions";
 
-const SkillInfo: React.FC = (
-) => {
+const SkillInfo: React.FC = () => {
   const { t } = useTranslation();
   const {
     register,
@@ -27,13 +26,6 @@ const SkillInfo: React.FC = (
     setValue,
   } = useFormContext<CreateSkillInputs>();
 
-  const resetSkill = useCallback(() => {
-    console.log(defaultValues);
-    if (defaultValues !== undefined) {
-      resetField("name");
-    }
-  }, [defaultValues]);
-  
   return (
     <>
       <Card sx={{ display: "block" }}>
@@ -42,45 +34,61 @@ const SkillInfo: React.FC = (
             <Typography variant="overline" display="block" marginBlockEnd={1}>
               {t("Skill Info")}
             </Typography>
-                <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
-                    <Grid item xs={6}>
-                    <TextField
-                        label={t("Skill Name")}
-                        fullWidth
-                        rows={4}
-                        {...register("name", {
-                            required: true,
-                        })}
-                        error={Boolean(errors.name)}
-                        helperText={Boolean(errors.name) && (errors.name?.message ? t(errors.name.message) : t("Please input correct name"))}
-                    />
-                    </Grid>
-                    <Grid item xs={6}>
-                    <TextField
-                        label={t("Skill Code")}
-                        fullWidth
-                        rows={4}
-                        {...register("code", {
-                            required: true,
-                        })}
-                        error={Boolean(errors.code)}
-                        helperText={Boolean(errors.code) && (errors.code?.message ? t(errors.code.message) : t("Please input correct name"))}
-                    />
-                    </Grid>
-                    <Grid item xs={12}>
-                    <TextField
-                        label={t("Skill Description")}
-                        fullWidth
-                        multiline
-                        rows={4}
-                        {...register("description", {
-                            required: true,
-                        })}
-                        error={Boolean(errors.description)}
-                        helperText={Boolean(errors.description) && (errors.description?.message ? t(errors.description.message) : t("Please input correct name"))}
-                    />
-                    </Grid>
-                </Grid>
+            <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
+              <Grid item xs={6}>
+                <TextField
+                  label={t("Skill Name")}
+                  fullWidth
+                  rows={4}
+                  {...register("name", {
+                    required: true,
+                  })}
+                  error={Boolean(errors.name)}
+                  helperText={
+                    Boolean(errors.name) &&
+                    (errors.name?.message
+                      ? t(errors.name.message)
+                      : `${t("Please input correct ")}${t("name")}`
+
+                      )}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label={t("Code")}
+                  fullWidth
+                  rows={4}
+                  {...register("code", {
+                    required: true,
+                  })}
+                  error={Boolean(errors.code)}
+                  helperText={
+                    Boolean(errors.code) &&
+                    (errors.code?.message
+                      ? t(errors.code.message)
+                      : `${t("Please input correct ")}${t("code")}`
+                    )}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  label={t("Description")}
+                  fullWidth
+                  multiline
+                  rows={4}
+                  {...register("description", {
+                    required: true,
+                  })}
+                  error={Boolean(errors.description)}
+                  helperText={
+                    Boolean(errors.description) &&
+                    (errors.description?.message
+                      ? t(errors.description.message)
+                      : `${t("Please input correct ")}${t("description")}`
+                      )}
+                />
+              </Grid>
+            </Grid>
           </Box>
         </CardContent>
       </Card>

src/components/CreateStaff/CreateStaff.tsx

@@ -22,6 +22,7 @@ import { fetchSkillCombo } from "@/app/api/skill/actions";
 import { fetchSalaryCombo } from "@/app/api/salarys/actions";
 import StaffInfo from "./StaffInfo";
 import { Check, Close } from "@mui/icons-material";
+import { ServerFetchError } from "@/app/utils/fetchUtil";
 
 interface Field {
   id: string;
@@ -59,6 +60,10 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
 
   const errors = formProps.formState.errors;
 
+  const checkDuplicates = (str1: string, str2: string, str3: string) => {
+    return str1 === str2 || str1 === str3 || str2 === str3;
+  }
+
   const onSubmit = useCallback<SubmitHandler<CreateStaffInputs>>(
     async (data) => {
       try {
@@ -85,6 +90,14 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
             formProps.setError("phone2", { message: t("Please Enter Correct Phone No.."), type: "required" })
           }
         }
+        if (data.phone1 === data.phone2 || data.phone1 === data.emergContactPhone || data.phone2 === data.emergContactPhone) {
+          haveError = true
+          formProps.setError("phone1", { message: t("Please Enter Different Phone No.."), type: "required" })
+          if (data.phone2!.length > 0) {
+            formProps.setError("phone2", { message: t("Please Enter Different Phone No.."), type: "required" })
+          }
+          formProps.setError("emergContactPhone", { message: t("Please Enter Different Phone No.."), type: "required" })
+        }
         if (!regex_email.test(data.email)) {
           haveError = true
           formProps.setError("email", { message: t("Please Enter Correct Email."), type: "required" })
@@ -93,10 +106,6 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
           haveError = true
           formProps.setError("companyId", { message: t("Please Enter Company."), type: "required" })
         }
-        if (!data.gradeId) {
-          haveError = true
-          formProps.setError("gradeId", { message: t("Please Enter grade."), type: "required" })
-        }
         if (!data.employType) {
           haveError = true
           formProps.setError("employType", { message: t("Please Enter Employ Type."), type: "required" })
@@ -117,19 +126,20 @@ const CreateStaff: React.FC<formProps> = ({ combos }) => {
           haveError = true
           formProps.setError("departDate", { message: t("Depart Date cannot be earlier than Join Date."), type: "required" })
         }
-        // if (!data.joinPositionId) {
-        //   haveError = true
-        //   formProps.setError("joinPositionId", { message: t("Depart Date cannot be earlier than Join Date."), type: "required" })
-        // }
         if (haveError) {
           return
         }
         console.log("passed")
         await saveStaff(data)
         router.replace("/settings/staff")
-      } catch (e) {
+      } catch (e: any) {
         console.log(e);
-        setServerError(t("An error has occurred. Please try again later."));
+        formProps.setError("staffId", { message: t("Please Enter Employ Type."), type: "required" })
+        let msg = ""
+        if (e.message === "Duplicated StaffId Found") {
+          msg = t("Duplicated StaffId Found")
+        }
+        setServerError(`${t("An error has occurred. Please try again later.")} ${msg} `);
       }
     },
     [router]

src/components/CreateStaff/StaffInfo.tsx

@@ -164,7 +164,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
             </Grid>
             <Grid item xs={6}>
               <FormControl fullWidth>
-                <InputLabel>{t("Department")}</InputLabel>
+                <InputLabel required>{t("Department")}</InputLabel>
                 <Controller
                   control={control}
                   name="departmentId"
@@ -189,7 +189,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
             </Grid>
             <Grid item xs={6}>
               <FormControl fullWidth>
-                <InputLabel required>{t("Grade")}</InputLabel>
+                <InputLabel>{t("Grade")}</InputLabel>
                 <Controller
                   control={control}
                   name="gradeId"
@@ -272,7 +272,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
             </Grid>
             <Grid item xs={6}>
               <FormControl fullWidth>
-                <InputLabel>{t("Salary Point")}</InputLabel>
+                <InputLabel required>{t("Salary Point")}</InputLabel>
                 <Controller
                   control={control}
                   name="salaryId"
@@ -297,7 +297,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
             </Grid>
             <Grid item xs={6}>
               <FormControl fullWidth>
-                <InputLabel>{t("Employ Type")}</InputLabel>
+                <InputLabel required>{t("Employ Type")}</InputLabel>
                 <Controller
                   control={control}
                   name="employType"
@@ -408,28 +408,29 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
               <LocalizationProvider
                 dateAdapter={AdapterDayjs}
                 adapterLocale={`${language}-hk`}
-              >
+                >
                 <DatePicker
                   sx={{ width: "100%" }}
                   label={t("Join Date")}
                   value={joinDate ? dayjs(joinDate) : null}
                   onChange={(date) => {
-                    if (!date) return;
-                    setValue("joinDate", date.format(INPUT_DATE_FORMAT));
-                  }}
-                  slotProps={{
-                    textField: {
-                      error:
-                        joinDate === "Invalid Date" || Boolean(errors.joinDate),
-                        // value: errors.joinDate?.message,
-                    },
-                  }}
-                />
+                      if (!date) return;
+                      setValue("joinDate", date.format(INPUT_DATE_FORMAT));
+                    }}
+                    slotProps={{
+                        textField: {
+                            required: true,
+                            error:
+                            joinDate === "Invalid Date" || Boolean(errors.joinDate),
+                            // value: errors.joinDate?.message,
+                        },
+                    }}
+                    />
               </LocalizationProvider>
             </Grid>
             <Grid item xs={6}>
               <FormControl fullWidth>
-                <InputLabel>{t("Join Position")}</InputLabel>
+                <InputLabel required>{t("Join Position")}</InputLabel>
                 <Controller
                   control={control}
                   name="joinPositionId"
@@ -442,7 +443,7 @@ const StaffInfo: React.FC<Props> = ({ combos }) => {
                       {combos.position.map((position, index) => (
                         <MenuItem
                           key={`${position.id}-${index}`}
-                          value={position.label}
+                          value={position.id}
                         >
                           {t(position.label)}
                         </MenuItem>

src/components/CreateTeam/CreateTeam.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import {
   FieldErrors,
   FormProvider,
@@ -13,7 +12,7 @@ import { CreateTeamInputs, saveTeam } from "@/app/api/team/actions";
 import { Button, Stack, Tab, Tabs, TabsProps, Typography } from "@mui/material";
 import { Check, Close } from "@mui/icons-material";
 import { useCallback, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import { Error } from "@mui/icons-material";
 import TeamInfo from "./TeamInfo";
@@ -28,7 +27,7 @@ const CreateTeam: React.FC<Props> = ({ allstaff }) => {
   const router = useRouter();
   const [tabIndex, setTabIndex] = useState(0);
   const { t } = useTranslation();
-  const searchParams = useSearchParams()
+  // const searchParams = useSearchParams()
 
   const errors = formProps.formState.errors;
 
@@ -81,7 +80,7 @@ const hasErrorsInTab = (
             variant="scrollable"
           >
             <Tab
-              label={t("Team Info")}
+              label={t("Team Info")}                     
               icon={
                 hasErrorsInTab(0, errors) ? (
                   <Error sx={{ marginInlineEnd: 1 }} color="error" />
@@ -98,8 +97,6 @@ const hasErrorsInTab = (
           )}
           {tabIndex === 0 && <TeamInfo/>}
           {tabIndex === 1 && <StaffAllocation allStaffs={allstaff} />}
-
-          {/* <StaffAllocation allStaffs={allstaff} /> */}
           <Stack direction="row" justifyContent="flex-end" gap={1}>
             <Button
               variant="outlined"

src/components/CreateTeam/StaffAllocation.tsx

@@ -138,7 +138,7 @@ const StaffAllocation: React.FC<Props> = ({ allStaffs: staff }) => {
       { label: t("Staff Name"), name: "name" },
       { label: t("Position"), name: "currentPosition" },
       {
-        label: t("Team Lead"),
+        label: t("teamLead"),
         name: "action",
         onClick: setTeamLead,
         buttonIcon: <StarsIcon />,
@@ -194,9 +194,6 @@ const StaffAllocation: React.FC<Props> = ({ allStaffs: staff }) => {
             sx={{ display: "flex", flexDirection: "column", gap: 1 }}
           >
             <Stack gap={2}>
-              <Typography variant="overline" display="block">
-                {t("staff")}
-              </Typography>
               <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                 <Grid item xs={6} display="flex" alignItems="center">
                   <Search sx={{ marginInlineEnd: 1 }} />

src/components/EditSkill/EditSkill.tsx

@@ -20,7 +20,7 @@ import {
   useForm,
   useFormContext,
 } from "react-hook-form";
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Check, Close, Error, RestartAlt } from "@mui/icons-material";
@@ -39,10 +39,10 @@ const EditSkill: React.FC<Props> = async ({ skills }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const id = parseInt(searchParams.get("id") || "0");
-  const [tabIndex, setTabIndex] = useState(0);
-  const [filteredSkill, setFilteredSkill] = useState<SkillResult>(() =>
-  skills.filter((s) => s.id === id)[0] as SkillResult
-  );
+  // const [tabIndex, setTabIndex] = useState(0);
+  // const [filteredSkill, setFilteredSkill] = useState<SkillResult>(
+  //   () => skills.filter((s) => s.id === id)[0] as SkillResult
+  // );
   const errors = formProps.formState.errors;
 
   const onSubmit = useCallback<SubmitHandler<CreateSkillInputs>>(
@@ -50,11 +50,11 @@ const EditSkill: React.FC<Props> = async ({ skills }) => {
       try {
         console.log(data);
         const postData = {
-            ...data,
-            id: id
-        }
-        await saveSkill(postData)
-        router.replace(`/settings/skill`)
+          ...data,
+          id: id,
+        };
+        await saveSkill(postData);
+        router.replace(`/settings/skill`);
       } catch (e) {
         console.log(e);
         setServerError(t("An error has occurred. Please try again later."));
@@ -67,33 +67,36 @@ const EditSkill: React.FC<Props> = async ({ skills }) => {
     router.back();
   };
 
-  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
-    (_e, newValue) => {
-      setTabIndex(newValue);
-    },
-    []
-  );
+  // const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
+  //   (_e, newValue) => {
+  //     setTabIndex(newValue);
+  //   },
+  //   []
+  // );
 
-  useEffect(() => {
+  // const hasErrorsInTab = (
+  //   tabIndex: number,
+  //   errors: FieldErrors<CreateSkillInputs>
+  // ) => {
+  //   switch (tabIndex) {
+  //     case 0:
+  //       return Object.keys(errors).length > 0;
+  //     default:
+  //       false;
+  //   }
+  // };
+  const resetSkill = React.useCallback(() => {
     formProps.reset({
-        name: filteredSkill.name,
-        code: filteredSkill.code,
-        description: filteredSkill.description
-      });
+      name: skills[0].name,
+      code: skills[0].code,
+      description: skills[0].description,
+    });
+  }, []);
+  
+  useEffect(() => {
+    resetSkill()
   }, [skills]);
 
-  const hasErrorsInTab = (
-    tabIndex: number,
-    errors: FieldErrors<CreateSkillInputs>
-  ) => {
-    switch (tabIndex) {
-      case 0:
-        return Object.keys(errors).length > 0;
-      default:
-        false;
-    }
-  };
-
   return (
     <>
       {serverError && (
@@ -107,7 +110,7 @@ const EditSkill: React.FC<Props> = async ({ skills }) => {
           component="form"
           onSubmit={formProps.handleSubmit(onSubmit)}
         >
-            <Tabs
+          {/* <Tabs
             value={tabIndex}
             onChange={handleTabChange}
             variant="scrollable"
@@ -121,14 +124,14 @@ const EditSkill: React.FC<Props> = async ({ skills }) => {
               }
               iconPosition="end"
             />
-            {/* <Tab label={t("Certification")} iconPosition="end" /> */}
-          </Tabs>
-          {tabIndex === 0 && <EditSkillForm />}
+          </Tabs> */}
+          {/* {tabIndex === 0 && <EditSkillForm />} */}
+          <EditSkillForm />
           <Stack direction="row" justifyContent="flex-end" gap={1}>
             <Button
               variant="text"
               startIcon={<RestartAlt />}
-              // onClick={() => console.log("asdasd")}
+              onClick={resetSkill}
             >
               {t("Reset")}
             </Button>

src/components/EditSkill/EditSkillForm.tsx

@@ -1,47 +1,30 @@
 "use client";
-
-import { CreateSkillInputs } from "@/app/api/skill/actions";
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Grid,
-  Stack,
-  Tab,
-  Tabs,
-  TabsProps,
-  TextField,
-  Typography,
-} from "@mui/material";
-import { useSearchParams } from "next/navigation";
-import {
-  FieldErrors,
-  FormProvider,
-  SubmitErrorHandler,
-  SubmitHandler,
-  useForm,
-  useFormContext,
-} from "react-hook-form";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Grid from "@mui/material/Grid";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
+import CardActions from "@mui/material/CardActions";
+import RestartAlt from "@mui/icons-material/RestartAlt";
+import Button from "@mui/material/Button";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { useCallback } from "react";
+import { CreateSkillInputs } from "@/app/api/skill/actions";
 
-interface Props {
-  // users: UserResult[]
-}
-
-const EditSkillForm: React.FC<Props> = async ({}) => {
+const EditSkillForm: React.FC = () => {
   const { t } = useTranslation();
-  const searchParams = useSearchParams();
-  const idString = searchParams.get("id");
   const {
     register,
-    setValue,
-    getValues,
     formState: { errors, defaultValues },
+    control,
     reset,
     resetField,
+    setValue,
   } = useFormContext<CreateSkillInputs>();
-  // const formProps = useForm({});
 
   return (
     <>
@@ -65,13 +48,14 @@ const EditSkillForm: React.FC<Props> = async ({}) => {
                     Boolean(errors.name) &&
                     (errors.name?.message
                       ? t(errors.name.message)
-                      : t("Please input correct name"))
-                  }
+                      : `${t("Please input correct ")}${t("name")}`
+
+                      )}
                 />
               </Grid>
               <Grid item xs={6}>
                 <TextField
-                  label={t("Skill Code")}
+                  label={t("Code")}
                   fullWidth
                   rows={4}
                   {...register("code", {
@@ -82,13 +66,13 @@ const EditSkillForm: React.FC<Props> = async ({}) => {
                     Boolean(errors.code) &&
                     (errors.code?.message
                       ? t(errors.code.message)
-                      : t("Please input correct name"))
-                  }
+                      : `${t("Please input correct ")}${t("code")}`
+                    )}
                 />
               </Grid>
               <Grid item xs={12}>
                 <TextField
-                  label={t("Skill Description")}
+                  label={t("description")}
                   fullWidth
                   multiline
                   rows={4}
@@ -100,8 +84,8 @@ const EditSkillForm: React.FC<Props> = async ({}) => {
                     Boolean(errors.description) &&
                     (errors.description?.message
                       ? t(errors.description.message)
-                      : t("Please input correct name"))
-                  }
+                      : `${t("Please input correct ")}${t("description")}`
+                      )}
                 />
               </Grid>
             </Grid>

src/components/EditTeam/Allocation.tsx

@@ -127,14 +127,14 @@ const Allocation: React.FC<Props> = ({ allStaffs: staff, teamLead }) => {
   const StaffPoolColumns = useMemo<Column<StaffResult>[]>(
     () => [
       {
-        label: t("Add"),
+        label: t("add"),
         name: "id",
         onClick: addStaff,
         buttonIcon: <PersonAdd />,
       },
       { label: t("Staff Id"), name: "staffId" },
       { label: t("Staff Name"), name: "name" },
-      { label: t("Current Position"), name: "currentPosition" },
+      { label: t("Position"), name: "currentPosition" },
     ],
     [addStaff, t]
   );
@@ -142,16 +142,16 @@ const Allocation: React.FC<Props> = ({ allStaffs: staff, teamLead }) => {
   const allocatedStaffColumns = useMemo<Column<StaffResult>[]>(
     () => [
       {
-        label: t("Remove"),
+        label: t("remove"),
         name: "action",
         onClick: removeStaff,
         buttonIcon: <PersonRemove />,
       },
       { label: t("Staff Id"), name: "staffId" },
       { label: t("Staff Name"), name: "name" },
-      { label: t("Current Position"), name: "currentPosition" },
+      { label: t("Position"), name: "currentPosition" },
       {
-        label: t("Team Lead"),
+        label: t("teamLead"),
         name: "action",
         onClick: setTeamLead,
         buttonIcon: <StarsIcon />,
@@ -210,9 +210,6 @@ const Allocation: React.FC<Props> = ({ allStaffs: staff, teamLead }) => {
             sx={{ display: "flex", flexDirection: "column", gap: 1 }}
           >
             <Stack gap={2}>
-              <Typography variant="overline" display="block">
-                {t("staff")}
-              </Typography>
               <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                 <Grid item xs={6} display="flex" alignItems="center">
                   <Search sx={{ marginInlineEnd: 1 }} />
@@ -221,7 +218,7 @@ const Allocation: React.FC<Props> = ({ allStaffs: staff, teamLead }) => {
                     fullWidth
                     onChange={onQueryInputChange}
                     value={query}
-                    placeholder={t("Search by staff ID, name or position.")}
+                    placeholder={t("Search by Staff Id, Name or Position.")}
                     InputProps={{
                       endAdornment: query && (
                         <InputAdornment position="end">

src/components/EditTeam/EditTeam.tsx

@@ -68,15 +68,13 @@ const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
   );
   useEffect(() => {
     let idList: number[] = []
-    console.log(desc)
+    // console.log(desc)
     if (idString) {
       const filteredTeam = staff.filter(
         (item) => {
-          console.log(item)
-          console.log(parseInt(idString))
           return (item.teamId === parseInt(idString))}
       );
-      console.log(filteredTeam)
+      // console.log(filteredTeam)
       const tempDesc = desc.filter(
         (item) => item.id === parseInt(idString)
       )
@@ -100,15 +98,15 @@ const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
           // }
 
         idList = filteredIds
-        console.log(filteredIds)
+        // console.log(filteredIds)
       }
-      console.log(idList)
+      // console.log(idList)
       setFilteredItems(filteredTeam);
       formProps.reset({description: tempDesc[0].description, addStaffIds: idList})
       setFilteredDesc(tempDesc[0].description)
       setFilteredName(tempDesc[0].name)
     }
-    console.log(staff)
+    // console.log(staff)
 
     setAllStaffs(staff)
     
@@ -133,7 +131,7 @@ const EditTeam: React.FC<Props> = async ({ staff, desc }) => {
   const onSubmit = useCallback<SubmitHandler<CreateTeamInputs>>(
     async (data) => {
       try {
-        console.log(data);
+        // console.log(data);
         const tempData = {
             description: data.description,
             addStaffIds: data.addStaffIds,

src/components/SkillSearch/SkillSearch.tsx

@@ -8,6 +8,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { useRouter } from "next/navigation";
 import { deleteDialog, successDialog } from "../Swal/CustomAlerts";
 import { SkillResult } from "@/app/api/skill";
+import { deleteSkill } from "@/app/api/skill/actions";
 
 interface Props {
   skill: SkillResult[];
@@ -29,7 +30,7 @@ const SkillSearch: React.FC<Props> = ({ skill }) => {
         type: "text",
       },
       {
-        label: t("Skill code"),
+        label: t("Skill Code"),
         paramName: "code",
         type: "text",
       },
@@ -47,11 +48,11 @@ const SkillSearch: React.FC<Props> = ({ skill }) => {
   );
 
   const deleteClick = useCallback((skill: SkillResult) => {
-    // deleteDialog(async () => {
-    //   await deleteStaff(skill.id);
-    //   successDialog("Delete Success", t);
-    //   setFilteredSkill((prev) => prev.filter((obj) => obj.id !== skill.id));
-    // }, t);
+    deleteDialog(async () => {
+      await deleteSkill(skill.id);
+      successDialog("Delete Success", t);
+      // setFilteredSkill((prev) => prev.filter((obj) => obj.id !== skill.id));
+    }, t);
   }, []);
 
   const columns = useMemo<Column<SkillResult>[]>(
@@ -62,12 +63,12 @@ const SkillSearch: React.FC<Props> = ({ skill }) => {
         onClick: onSkillClick,
         buttonIcon: <EditNote />,
       },
-      { name: "name", label: t("Name") },
-      { name: "code", label: t("Code") },
-      { name: "description", label: t("Description") },
+      { name: "name", label: t("name") },
+      { name: "code", label: t("code") },
+      { name: "description", label: t("description") },
       {
-        name: "action",
-        label: t("Actions"),
+        name: "delete",
+        label: t("Delete"),
         onClick: deleteClick,
         buttonIcon: <DeleteIcon />,
         color: "error", 

src/components/SkillSearch/SkillSearchWrapper.tsx

@@ -17,7 +17,6 @@ interface SubComponents {
 
 const SkillSearchWrapper: React.FC & SubComponents = async () => {
   const skill = await fetchSkill()
-  console.log(skill);
 
   return <SkillSearch skill={skill} />;
 };

src/components/StaffSearch/StaffSearch.tsx

@@ -61,7 +61,7 @@ const StaffSearch: React.FC<Props> = ({ staff, abilities }) => {
 
   const onStaffClick = useCallback(
     (staff: StaffResult) => {
-      console.log(staff);
+      // console.log(staff);
       const id = staff.id;
       router.push(`/settings/staff/edit?id=${id}`);
     },
@@ -70,8 +70,8 @@ const StaffSearch: React.FC<Props> = ({ staff, abilities }) => {
 
   const onUserClick = useCallback(
     (staff: StaffResult) => {
-      console.log(staff);
-      router.push(`/settings/staff/user?id=${staff.id}`);
+      // console.log(staff);
+      router.push(`/settings/staff/user?id=${staff.userId}`);
     },
     [router, t]
   );
@@ -94,7 +94,7 @@ const StaffSearch: React.FC<Props> = ({ staff, abilities }) => {
       },
       {
         name: "id",
-        label: t("Actions"),
+        label: t("Users"),
         onClick: onUserClick,
         buttonIcon: <Person />,
         isHidden: ![MAINTAIN_USER, VIEW_USER].some((ability) => abilities.includes(ability)),

src/components/TeamSearch/TeamSearch.tsx

@@ -21,21 +21,28 @@ const TeamSearch: React.FC<Props> = ({ team }) => {
   const { t } = useTranslation();
   const [filteredTeam, setFilteredTeam] = useState(team);
   const router = useRouter();
+  // translation
+  const edit = t("edit")
+  const name = t("name")
+  const code = t("code")
+  const description = t("description")
+  const teamLead = t("teamLead")
+  const delete_t = t("delete")
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
       {
-        label: t("Team Name"),
+        label: name,
         paramName: "name",
         type: "text",
       },
       {
-        label: t("Team Code"),
+        label: code,
         paramName: "code",
         type: "text",
       },
       {
-        label: t("Team Description"),
+        label: description,
         paramName: "description",
         type: "text",
       },
@@ -55,10 +62,7 @@ const TeamSearch: React.FC<Props> = ({ team }) => {
   const onDeleteClick = useCallback((team: TeamResult) => {
     deleteDialog(async () => {
       await deleteTeam(team.id);
-
       successDialog(t("Delete Success"), t);
-
-      setFilteredTeam((prev) => prev.filter((obj) => obj.id !== team.id));
     }, t);
   }, []);
 
@@ -66,17 +70,17 @@ const TeamSearch: React.FC<Props> = ({ team }) => {
     () => [
       {
         name: "action",
-        label: t("Edit"),
+        label: edit,
         onClick: onTeamClick,
         buttonIcon: <EditNote />,
       },
-      { name: "name", label: t("Name") },
-      { name: "code", label: t("Code") },
-      { name: "description", label: t("description") },
-      { name: "staffName", label: t("TeamLead") },
+      { name: "name", label: name },
+      { name: "code", label: code },
+      { name: "description", label: description },
+      { name: "staffName", label: teamLead },
       {
         name: "action",
-        label: t("Delete"),
+        label: delete_t,
         onClick: onDeleteClick,
         buttonIcon: <DeleteIcon />,
         color: "error"

src/components/UserGroupSearch/UserGroupSearch.tsx

@@ -45,10 +45,7 @@ const UserGroupSearch: React.FC<Props> = ({ users }) => {
   const onDeleteClick = useCallback((group: UserGroupResult) => {
     deleteDialog(async () => {
       await deleteGroup(group.id);
-
       successDialog(t("Delete Success"), t);
-
-      setFilteredUser((prev) => prev.filter((obj) => obj.id !== group.id));
     }, t);
   }, []);
 

src/components/UserSearch/UserSearch.tsx

@@ -44,10 +44,7 @@ const UserSearch: React.FC<Props> = ({ users }) => {
   const onDeleteClick = useCallback((users: UserResult) => {
     deleteDialog(async () => {
       await deleteUser(users.id);
-
       successDialog(t("Delete Success"), t);
-
-      setFilteredUser((prev) => prev.filter((obj) => obj.id !== users.id));
     }, t);
   }, []);
 

src/i18n/zh/skill.json

@@ -0,0 +1,18 @@
+{
+    "Actions": "編輯",
+    "Skill": "技能",
+    "Skill Name": "名稱",
+    "Skill Code": "編號",
+    "Skill Info": "技能詳情",
+    "name": "技能",
+    "code": "編號",
+    "description": "描述",
+    "Confirm": "確定",
+    "Cancel": "取消",
+    "Delete": "刪除",
+    "Reset": "重設",
+    "Edit Skill": "編輯技能",
+    "Create Skill": "建立技能",
+    "Please input correct ": "請輸入正確"
+
+}

src/i18n/zh/staff.json

@@ -6,6 +6,7 @@
     "Grade": "級別",
     "Current Position": "現職",
     "Actions": "編輯",
+    "Users": "用戶",
     "Create Staff": "新增員工",
     "Company": "公司",
     "Department": "部門",

src/i18n/zh/team.json

@@ -0,0 +1,25 @@
+{
+    "Team": "隊伍",
+    "Team Info": "隊伍資料",
+    "Staff Allocation": "員工分配",
+    "Create Team": "建立隊伍",
+    "Edit Team": "編輯隊伍",
+    "name": "名稱",
+    "code": "編號",
+    "description": "描述",
+    "Team Description": "隊伍描述",
+    "edit": "編輯",
+    "teamLead": "負責人",
+    "Confirm": "確定",
+    "Cancel": "取消",
+    "delete": "刪除",
+    "add": "加入",
+    "remove": "移除",
+    "Staff Pool": "可分配員工",
+    "Allocated Staff": "已分配員工",
+    "Staff Id": "員工編號",
+    "Staff Name": "員工名稱",
+    "Position": "職位",
+    "Search by Staff Id, Name or Position.": "按員工編號、姓名或職位搜索",
+    "An error has occurred. Please try again later.": "發生了錯誤。請稍後再試"
+}