Merge branch 'main' of https://git.2fi-solutions.com/wayne.lee/tsms

src/app/(main)/layout.tsx

@@ -6,6 +6,7 @@ import Box from "@mui/material/Box";
 import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 import Stack from "@mui/material/Stack";
 import Breadcrumb from "@/components/Breadcrumb";
+import { I18nProvider } from "@/i18n";
 
 export default async function MainLayout({
   children,
@@ -31,10 +32,12 @@ export default async function MainLayout({
           padding: { xs: "1rem", sm: "1.5rem", lg: "3rem" },
         }}
       >
-        <Stack spacing={2}>
-          <Breadcrumb />
-          {children}
-        </Stack>
+        <I18nProvider namespaces={["common"]}>
+          <Stack spacing={2}>
+            <Breadcrumb />
+            {children}
+          </Stack>
+        </I18nProvider>
       </Box>
     </>
   );

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

@@ -18,7 +18,7 @@ const Companys: React.FC<Props> = async ({searchParams}) => {
 
     return(
         <>
-      <Typography variant="h4">{t("Create Company")}</Typography>
+      <Typography variant="h4">{t("Edit Company")}</Typography>
       <I18nProvider namespaces={["companys"]}>
         <CreateCompany isEdit={true} companyId={companyId} />
       </I18nProvider>

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/companys/actions.ts

@@ -3,6 +3,7 @@
 import { serverFetchJson, serverFetchWithNoContent } from "@/app/utils/fetchUtil";
 import { BASE_API_URL } from "@/config/api";
 import { Dayjs } from "dayjs";
+import { revalidateTag } from "next/cache";
 import { cache } from "react";    
 
 export interface comboProp {
@@ -49,17 +50,21 @@ export interface EditCompanyInputs {
 }
 
 export const saveCompany = async (data: CreateCompanyInputs) => {
-  return serverFetchJson(`${BASE_API_URL}/companys/new`, {
+  const newCompany = serverFetchJson(`${BASE_API_URL}/companys/new`, {
     method: "POST",
     body: JSON.stringify(data),
     headers: { "Content-Type": "application/json" },
   });
+
+  revalidateTag("companys");
+  return newCompany
 };
 
 export const fetchCompanyCombo = cache(async () => {
   return serverFetchJson<combo>(`${BASE_API_URL}/companys/combo`, {
     next: { tags: ["company"] },
   });
+
 });
 
 export const deleteCompany = async (id: number) => {
@@ -71,5 +76,6 @@ export const deleteCompany = async (id: number) => {
       },
   );
 
+  revalidateTag("companys");
   return department
 };

src/app/api/companys/index.ts

@@ -28,7 +28,7 @@ export const fetchCompanyDetails = cache(async (companyId: string) => {
     return serverFetchJson<EditCompanyInputs>(
       `${BASE_API_URL}/companys/companyDetails/${companyId}`,
       {
-        next: { tags: [`departmentDetail${companyId}`] },
+        next: { tags: [`departmentDetail`] },
       },
     );
 });

src/app/api/customer/index.ts

@@ -11,6 +11,8 @@ export interface Customer {
   address: string | null;
   district: string | null;
   customerType: CustomerType;
+
+  contacts: Contact[];
 }
 
 export interface SaveCustomerResponse {
@@ -40,6 +42,7 @@ export interface Subsidiary {
   district: string | null;
   email: string | null;
   subsidiaryType: SubsidiaryType;
+  subsidiaryContacts: Contact[];
 }
 
 export interface SubsidiaryTable {

src/app/api/departments/actions.ts

@@ -2,6 +2,7 @@
 
 import { serverFetchJson, serverFetchWithNoContent } from "@/app/utils/fetchUtil";
 import { BASE_API_URL } from "@/config/api";
+import { revalidateTag } from "next/cache";
 import { cache } from "react";
 
 
@@ -21,11 +22,14 @@ export interface CreateDepartmentInputs {
 }
 
 export const saveDepartment = async (data: CreateDepartmentInputs) => {
-    return serverFetchJson(`${BASE_API_URL}/departments/new`, {
+    const newDepartment = serverFetchJson(`${BASE_API_URL}/departments/new`, {
       method: "POST",
       body: JSON.stringify(data),
       headers: { "Content-Type": "application/json" },
     });
+
+    revalidateTag("departments")
+    return newDepartment
 };
 
 export const deleteDepartment = async (id: number) => {
@@ -37,6 +41,7 @@ export const deleteDepartment = async (id: number) => {
         },
     );
 
+    revalidateTag("departments")
     return department
 };
 

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/positions/actions.ts

@@ -4,6 +4,7 @@ import { serverFetchJson, serverFetchWithNoContent } from "@/app/utils/fetchUtil
 import { BASE_API_URL } from "@/config/api";
 import { cache } from "react";
 import { PositionResult } from ".";
+import { revalidateTag } from "next/cache";
 
 export interface comboProp {
   id: any;
@@ -30,19 +31,25 @@ export interface EditPositionInputs {
 }
 
 export const savePosition = async (data: CreatePositionInputs) => {
-    return serverFetchJson(`${BASE_API_URL}/positions/new`, {
+    const newPosition = serverFetchJson(`${BASE_API_URL}/positions/new`, {
       method: "POST",
       body: JSON.stringify(data),
       headers: { "Content-Type": "application/json" },
     });
+
+    revalidateTag("positions")
+    return newPosition
   };
 
 export const editPosition = async (data: EditPositionInputs) => {
-  return serverFetchJson(`${BASE_API_URL}/positions/new`, {
+  const editPostion = serverFetchJson(`${BASE_API_URL}/positions/new`, {
     method: "POST",
     body: JSON.stringify(data),
     headers: { "Content-Type": "application/json" },
   });
+
+  revalidateTag("positions")
+  return editPostion
 };
 
 export const deletePosition = async (id: number) => {
@@ -54,6 +61,7 @@ export const deletePosition = async (id: number) => {
       },
   );
 
+  revalidateTag("positions")
   return position
 };  
 

src/app/api/projects/actions.ts

@@ -20,6 +20,8 @@ export interface CreateProjectInputs {
   projectLeadId: number;
   projectActualStart: string;
   projectActualEnd: string;
+  projectStatus: string;
+  isClpProject: boolean;
 
   // Project info
   serviceTypeId: number;
@@ -28,11 +30,14 @@ export interface CreateProjectInputs {
   locationId: number;
   buildingTypeIds: number[];
   workNatureIds: number[];
+  taskTemplateId?: number | "All";
 
   // Client details
   clientId: Customer["id"];
-  clientContactId: number;
+  clientContactId?: number;
   clientSubsidiaryId?: number;
+  subsidiaryContactId: number;
+  isSubsidiaryContact?: boolean;
 
   // Allocation
   totalManhour: number;

src/app/api/projects/index.ts

@@ -12,6 +12,7 @@ export interface ProjectResult {
   category: string;
   team: string;
   client: string;
+  status: string;
 }
 
 export interface ProjectCategory {

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/subsidiary/index.ts

@@ -10,7 +10,9 @@ export interface Customer {
   brNo: string | null;
   address: string | null;
   district: string | null;
-  customerType: CustomerType
+  customerType: CustomerType;
+  
+  contacts: Contact[];
 }
 
 export interface CustomerTable {
@@ -40,7 +42,9 @@ export interface Subsidiary {
   brNo: string | null;
   address: string | null;
   district: string | null;
-  subsidiaryType: SubsidiaryType
+  subsidiaryType: SubsidiaryType;
+
+  contacts: Contact[];
 }
 
 export interface SaveSubsidiaryResponse {

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/AppBar/Profile.tsx

@@ -10,7 +10,7 @@ import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import { signOut } from "next-auth/react";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 type Props = Pick<AppBarProps, "avatarImageSrc" | "profileName">;
 
@@ -26,8 +26,17 @@ const Profile: React.FC<Props> = ({ avatarImageSrc, profileName }) => {
     setProfileMenuAnchorEl(undefined);
   };
 
-  const { t } = useTranslation("login");
+  const { t, i18n: { language } } = useTranslation("login");
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams()
+
+  const onLangClick = React.useCallback((lang: string) => {
+    const params = new URLSearchParams(searchParams.toString())
+    params.set("lang", lang)
+    router.replace(`${pathname}?${params.toString()}`);
+    window.location.reload();
+  }, [router, pathname, searchParams]);
 
   return (
     <>
@@ -54,7 +63,9 @@ const Profile: React.FC<Props> = ({ avatarImageSrc, profileName }) => {
           {profileName}
         </Typography>
         <Divider />
-        <MenuItem onClick={() => {router.replace("/settings/changepassword")}}>{t("Change Password")}</MenuItem>
+        <MenuItem onClick={() => { router.replace("/settings/changepassword") }}>{t("Change Password")}</MenuItem>
+        {language === "zh" && <MenuItem onClick={() => { onLangClick("en") }}>{t("Change To English Version")}</MenuItem>}
+        {language === "en" && <MenuItem onClick={() => { onLangClick("zh") }}>{t("Change To Chinese Version")}</MenuItem>}
         <MenuItem onClick={() => signOut()}>{t("Sign out")}</MenuItem>
       </Menu>
     </>

src/components/Breadcrumb/Breadcrumb.tsx

@@ -6,6 +6,9 @@ import Link from "next/link";
 import MUILink from "@mui/material/Link";
 import { usePathname } from "next/navigation";
 import { useTranslation } from "react-i18next";
+import Clock from "./Clock";
+import { Grid } from "@mui/material";
+import { I18nProvider } from "@/i18n";
 
 const pathToLabelMap: { [path: string]: string } = {
   "": "Overview",
@@ -26,8 +29,12 @@ const pathToLabelMap: { [path: string]: string } = {
   "/company": "Company",
   "/settings/department": "Department",
   "/settings/department/new": "Create Department",
+  "/settings/department/edit": "Edit Department",
   "/settings/position": "Position",
+  "/settings/position/edit": "Edit Position",
   "/settings/position/new": "Create Position",
+  "/settings/company/edit": "Edit Company",
+  "/settings/company/create": "Create Company",
   "/settings/salarys": "Salary",
   "/analytics/ProjectCashFlowReport": "Project Cash Flow Report",
   "/settings/holiday": "Holiday",
@@ -39,34 +46,42 @@ const Breadcrumb = () => {
 
   // const { t } = useTranslation("customer");
 
+
   return (
-    <Breadcrumbs>
-      {segments.map((segment, index) => {
-        const href = segments.slice(0, index + 1).join("/");
-        const label = pathToLabelMap[href] || segment;
+    <Grid container>
+      <Grid item xs={6}>
+        <Breadcrumbs>
+          {segments.map((segment, index) => {
+            const href = segments.slice(0, index + 1).join("/");
+            const label = pathToLabelMap[href] || segment;
 
-        if (index === segments.length - 1) {
-          return (
-            <Typography key={index} color="text.primary">
-              {label}
-              {/* {t(label)} */}
-            </Typography>
-          );
-        } else {
-          return (
-            <MUILink
-              underline="hover"
-              color="inherit"
-              key={index}
-              component={Link}
-              href={href || "/"}
-            >
-              {label}
-            </MUILink>
-          );
-        }
-      })}
-    </Breadcrumbs>
+            if (index === segments.length - 1) {
+              return (
+                <Typography key={index} color="text.primary">
+                  {label}
+                  {/* {t(label)} */}
+                </Typography>
+              );
+            } else {
+              return (
+                <MUILink
+                  underline="hover"
+                  color="inherit"
+                  key={index}
+                  component={Link}
+                  href={href || "/"}
+                >
+                  {label}
+                </MUILink>
+              );
+            }
+          })}
+        </Breadcrumbs>
+      </Grid>
+      <Grid item xs={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Clock />
+      </Grid>
+    </Grid>
   );
 };
 

src/components/Breadcrumb/Clock.tsx

@@ -0,0 +1,32 @@
+"use client"
+import { useState, useEffect, useLayoutEffect } from 'react';
+import Typography from "@mui/material/Typography";
+import { useTranslation } from 'react-i18next';
+
+const Clock = () => {
+    const {
+        i18n: { language },
+    } = useTranslation();
+    const [currentDateTime, setCurrentDateTime] = useState(new Date());
+
+    useLayoutEffect(() => {
+        const timer = setInterval(() => {
+            setCurrentDateTime(new Date());
+        }, 1000);
+
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
+    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
+    const formattedDateTime = new Intl.DateTimeFormat(language, options).format(currentDateTime)
+
+    return (
+        <Typography color="text.primary" suppressHydrationWarning>
+            {formattedDateTime}
+        </Typography>
+    );
+};
+
+export default Clock;

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/CreateCompany/CompanyDetails.tsx

@@ -44,7 +44,7 @@ const CompanyDetails: React.FC<Props> = ({
     getValues,
   } = useFormContext<CreateCompanyInputs>();
 
-  console.log(content)
+  // console.log(content)
 
   useEffect(() => {
     setValue("normalHourFrom", convertTimeArrayToString(content.normalHourFrom, "HH:mm:ss", false));

src/components/CreateCompany/CreateCompanyWrapper.tsx

@@ -11,8 +11,8 @@ type Props = CreateCompanyProps | EditCompanyProps;
 
 const CreateCompanyWrapper: React.FC<Props> = async (props) => {
 
-    console.log(props)
-    
+    // console.log(props)
+
     const companyDetails = props.isEdit
   ? await fetchCompanyDetails(props.companyId!)
   : undefined;

src/components/CreateProject/CreateProject.tsx

@@ -76,7 +76,7 @@ const hasErrorsInTab = (
   switch (tabIndex) {
     case 0:
       return (
-        errors.projectName || errors.projectCode || errors.projectDescription
+        errors.projectName || errors.projectDescription || errors.clientId
       );
     case 2:
       return (
@@ -114,6 +114,8 @@ const CreateProject: React.FC<Props> = ({
   const { t } = useTranslation();
   const router = useRouter();
 
+console.log(defaultInputs)
+
   const handleCancel = () => {
     router.replace("/projects");
   };
@@ -219,6 +221,7 @@ const CreateProject: React.FC<Props> = ({
               data.projectActualEnd = dayjs().format("YYYY-MM-DD");
             }
 
+            data.taskTemplateId = data.taskTemplateId === "All" ? undefined : data.taskTemplateId; 
             const response = await saveProject(data);
 
             if (response.id > 0) {
@@ -248,7 +251,8 @@ const CreateProject: React.FC<Props> = ({
       if (
         errors.projectName ||
         errors.projectDescription ||
-        errors.projectCode
+        // errors.projectCode ||
+        errors.clientId
       ) {
         setTabIndex(0);
       } else if (errors.totalManhour || errors.manhourPercentageByGrade || errors.taskGroups) {
@@ -266,6 +270,7 @@ const CreateProject: React.FC<Props> = ({
       allocatedStaffIds: [],
       milestones: {},
       totalManhour: 0,
+      taskTemplateId: "All",
       ...defaultInputs,
 
       // manhourPercentageByGrade should have a sensible default
@@ -289,7 +294,8 @@ const CreateProject: React.FC<Props> = ({
         >
           {isEditMode && !(formProps.getValues("projectDeleted") === true) && (
             <Stack direction="row" gap={1}>
-              {!formProps.getValues("projectActualStart") && (
+              {/* {!formProps.getValues("projectActualStart") && ( */}
+              {formProps.getValues("projectStatus") === "Pending to Start" && (
                 <Button
                   name="start"
                   type="submit"
@@ -300,8 +306,9 @@ const CreateProject: React.FC<Props> = ({
                   {t("Start Project")}
                 </Button>
               )}
-              {formProps.getValues("projectActualStart") &&
-                !formProps.getValues("projectActualEnd") && (
+              {/* {formProps.getValues("projectActualStart") &&
+                !formProps.getValues("projectActualEnd") && ( */}
+                {formProps.getValues("projectStatus") === "On-going" && (
                   <Button
                     name="complete"
                     type="submit"
@@ -313,8 +320,10 @@ const CreateProject: React.FC<Props> = ({
                   </Button>
                 )}
               {!(
-                formProps.getValues("projectActualStart") &&
-                formProps.getValues("projectActualEnd")
+                // formProps.getValues("projectActualStart") &&
+                // formProps.getValues("projectActualEnd")
+                formProps.getValues("projectStatus") === "Completed" || 
+                formProps.getValues("projectStatus") === "Deleted"
               ) && (
                   <Button
                     variant="outlined"
@@ -412,7 +421,7 @@ const CreateProject: React.FC<Props> = ({
               startIcon={<Check />}
               type="submit"
               disabled={
-                formProps.getValues("projectDeleted") === true ||
+                formProps.getValues("projectDeleted") === true || formProps.getValues("projectStatus") === "Deleted" ||
                 (!!formProps.getValues("projectActualStart") &&
                   !!formProps.getValues("projectActualEnd"))
               }

src/components/CreateProject/ProjectClientDetails.tsx

@@ -85,6 +85,7 @@ const ProjectClientDetails: React.FC<Props> = ({
   );
 
   const [customerContacts, setCustomerContacts] = useState<Contact[]>([]);
+  const [subsidiaryContacts, setSubsidiaryContacts] = useState<Contact[]>([]);
   const [customerSubsidiaryIds, setCustomerSubsidiaryIds] = useState<number[]>(
     [],
   );
@@ -92,21 +93,44 @@ const ProjectClientDetails: React.FC<Props> = ({
   const selectedCustomerContactId = watch("clientContactId");
   const selectedCustomerContact = useMemo(
     () =>
-      customerContacts.find(
-        (contact) => contact.id === selectedCustomerContactId,
-      ),
-    [customerContacts, selectedCustomerContactId],
+      subsidiaryContacts.length > 0 ?
+        subsidiaryContacts.find((contact) => contact.id === selectedCustomerContactId)
+        : customerContacts.find(
+          (contact) => contact.id === selectedCustomerContactId,
+        ),
+    [subsidiaryContacts, customerContacts, selectedCustomerContactId],
   );
 
+  // get customer (client) contact combo
   useEffect(() => {
     if (selectedCustomerId !== undefined) {
       fetchCustomer(selectedCustomerId).then(({ contacts, subsidiaryIds }) => {
         setCustomerContacts(contacts);
         setCustomerSubsidiaryIds(subsidiaryIds);
+
+        if (subsidiaryIds.length > 0) setValue("clientSubsidiaryId", subsidiaryIds[0])
+        else setValue("clientSubsidiaryId", undefined)
+        // if (contacts.length > 0) setValue("clientContactId", contacts[0].id)
+        // else setValue("clientContactId", undefined)
       });
     }
   }, [selectedCustomerId]);
 
+  const clientSubsidiaryId = watch("clientSubsidiaryId")
+  useEffect(() => {
+    if (Boolean(clientSubsidiaryId)) {
+      // get subsidiary contact combo
+      const contacts = allSubsidiaries.find(subsidiary => subsidiary.id === clientSubsidiaryId)?.subsidiaryContacts!!
+      setSubsidiaryContacts(contacts)
+      setValue("clientContactId", contacts[0].id)
+      setValue("isSubsidiaryContact", true)
+    } else if (customerContacts?.length > 0) {
+      setSubsidiaryContacts([])
+      setValue("clientContactId", customerContacts[0].id)
+      setValue("isSubsidiaryContact", false)
+    }
+  }, [customerContacts, clientSubsidiaryId]);
+
   // Automatically add the team lead to the allocated staff list
   const selectedTeamLeadId = watch("projectLeadId");
   useEffect(() => {
@@ -139,10 +163,13 @@ const ProjectClientDetails: React.FC<Props> = ({
               <TextField
                 label={t("Project Code")}
                 fullWidth
-                {...register("projectCode", {
-                  required: "Project code required!",
-                })}
-                error={Boolean(errors.projectCode)}
+                disabled
+                {...register("projectCode", 
+                // {
+                //   required: "Project code required!",
+                // }
+                )}
+                // error={Boolean(errors.projectCode)}
               />
             </Grid>
             <Grid item xs={6}>
@@ -354,6 +381,16 @@ const ProjectClientDetails: React.FC<Props> = ({
                 {...register("expectedProjectFee", { valueAsNumber: true })}
               />
             </Grid>
+
+            <Grid item xs={6}>
+                <Checkbox
+                  {...register("isClpProject")}
+                  defaultChecked={watch("isClpProject")}
+                />
+                <Typography  variant="overline" display="inline">
+                  {t("CLP Project")}
+                </Typography>
+            </Grid>
           </Grid>
         </Box>
 
@@ -373,12 +410,15 @@ const ProjectClientDetails: React.FC<Props> = ({
           </Stack>
           <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
             <Grid item xs={6}>
-              <FormControl fullWidth>
+              <FormControl fullWidth error={Boolean(errors.clientId)}>
                 <InputLabel>{t("Client")}</InputLabel>
                 <Controller
-                  defaultValue={allCustomers[0].id}
+                  defaultValue={allCustomers[0]?.id}
                   control={control}
                   name="clientId"
+                  rules={{
+                    required: "Please select a client",
+                  }}
                   render={({ field }) => (
                     <Select label={t("Client")} {...field}>
                       {allCustomers.map((customer, index) => (
@@ -408,6 +448,50 @@ const ProjectClientDetails: React.FC<Props> = ({
             <Grid item sx={{ display: { xs: "none", sm: "block" } }} />
             {customerContacts.length > 0 && (
               <>
+                {customerSubsidiaryIds.length > 0 && (
+                  <Grid item xs={6}>
+                    <FormControl
+                      fullWidth
+                      error={Boolean(errors.clientSubsidiaryId)}
+                    >
+                      <InputLabel>{t("Client Subsidiary")}</InputLabel>
+                      <Controller
+                        // rules={{
+                        //   validate: (value) => {
+                        //     if (
+                        //       !customerSubsidiaryIds.find(
+                        //         (subsidiaryId) => subsidiaryId === value,
+                        //       )
+                        //     ) {
+                        //       return t("Please choose a valid subsidiary");
+                        //     } else return true;
+                        //   },
+                        // }}
+                        defaultValue={customerSubsidiaryIds[0]}
+                        control={control}
+                        name="clientSubsidiaryId"
+                        render={({ field }) => (
+                          <Select label={t("Client Subsidiary")} {...field}>
+                            {customerSubsidiaryIds
+                              .filter((subId) => subsidiaryMap[subId])
+                              .map((subsidiaryId, index) => {
+                                const subsidiary = subsidiaryMap[subsidiaryId];
+
+                                return (
+                                  <MenuItem
+                                    key={`${subsidiaryId}-${index}`}
+                                    value={subsidiaryId}
+                                  >
+                                    {`${subsidiary.code} - ${subsidiary.name}`}
+                                  </MenuItem>
+                                );
+                              })}
+                          </Select>
+                        )}
+                      />
+                    </FormControl>
+                  </Grid>
+                )}
                 <Grid item xs={6}>
                   <FormControl
                     fullWidth
@@ -418,33 +502,44 @@ const ProjectClientDetails: React.FC<Props> = ({
                       rules={{
                         validate: (value) => {
                           if (
-                            !customerContacts.find(
+                            (customerContacts.length > 0 && !customerContacts.find(
+                              (contact) => contact.id === value,
+                            )) && (subsidiaryContacts?.length > 0 && !subsidiaryContacts.find(
                               (contact) => contact.id === value,
-                            )
+                            ))
                           ) {
                             return t("Please provide a valid contact");
                           } else return true;
                         },
                       }}
-                      defaultValue={customerContacts[0].id}
+                      defaultValue={subsidiaryContacts?.length > 0 ? subsidiaryContacts[0].id : customerContacts[0].id}
                       control={control}
                       name="clientContactId"
                       render={({ field }) => (
                         <Select label={t("Client Lead")} {...field}>
-                          {customerContacts.map((contact, index) => (
-                            <MenuItem
-                              key={`${contact.id}-${index}`}
-                              value={contact.id}
-                            >
-                              {contact.name}
-                            </MenuItem>
-                          ))}
+                          {subsidiaryContacts?.length > 0 ?
+                            subsidiaryContacts.map((contact, index) => (
+                              <MenuItem
+                                key={`${contact.id}-${index}`}
+                                value={contact.id}
+                              >
+                                {contact.name}
+                              </MenuItem>
+                            ))
+                            : customerContacts.map((contact, index) => (
+                              <MenuItem
+                                key={`${contact.id}-${index}`}
+                                value={contact.id}
+                              >
+                                {contact.name}
+                              </MenuItem>
+                            ))}
                         </Select>
                       )}
                     />
                   </FormControl>
                 </Grid>
-                <Grid item sx={{ display: { xs: "none", sm: "block" } }} />
+                <Grid container sx={{ display: { xs: "none", sm: "block" } }} />
                 <Grid item xs={6}>
                   <TextField
                     label={t("Client Lead Phone Number")}
@@ -467,50 +562,6 @@ const ProjectClientDetails: React.FC<Props> = ({
                 </Grid>
               </>
             )}
-            {customerSubsidiaryIds.length > 0 && (
-              <Grid item xs={6}>
-                <FormControl
-                  fullWidth
-                  error={Boolean(errors.clientSubsidiaryId)}
-                >
-                  <InputLabel>{t("Client Subsidiary")}</InputLabel>
-                  <Controller
-                    // rules={{
-                    //   validate: (value) => {
-                    //     if (
-                    //       !customerSubsidiaryIds.find(
-                    //         (subsidiaryId) => subsidiaryId === value,
-                    //       )
-                    //     ) {
-                    //       return t("Please choose a valid subsidiary");
-                    //     } else return true;
-                    //   },
-                    // }}
-                    defaultValue={customerSubsidiaryIds[0]}
-                    control={control}
-                    name="clientSubsidiaryId"
-                    render={({ field }) => (
-                      <Select label={t("Client Lead")} {...field}>
-                        {customerSubsidiaryIds
-                          .filter((subId) => subsidiaryMap[subId])
-                          .map((subsidiaryId, index) => {
-                            const subsidiary = subsidiaryMap[subsidiaryId];
-
-                            return (
-                              <MenuItem
-                                key={`${subsidiaryId}-${index}`}
-                                value={subsidiaryId}
-                              >
-                                {`${subsidiary.code} - ${subsidiary.name}`}
-                              </MenuItem>
-                            );
-                          })}
-                      </Select>
-                    )}
-                  />
-                </FormControl>
-              </Grid>
-            )}
           </Grid>
         </Box>
         <CardActions sx={{ justifyContent: "flex-end" }}>

src/components/CreateProject/TaskSetup.tsx

@@ -33,7 +33,7 @@ const TaskSetup: React.FC<Props> = ({
   isActive,
 }) => {
   const { t } = useTranslation();
-  const { setValue, watch, clearErrors, setError } = useFormContext<CreateProjectInputs>();
+  const { setValue, watch, clearErrors, setError, formState: { defaultValues } } = useFormContext<CreateProjectInputs>();
   const currentTaskGroups = watch("taskGroups");
   const currentTaskIds = Object.values(currentTaskGroups).reduce<Task["id"][]>(
     (acc, group) => {
@@ -48,7 +48,7 @@ const TaskSetup: React.FC<Props> = ({
 
   const [selectedTaskTemplateId, setSelectedTaskTemplateId] = useState<
     "All" | number
-  >("All");
+  >(watch("taskTemplateId") ?? "All");
   const onSelectTaskTemplate = useCallback(
     (e: SelectChangeEvent<number | "All">) => {
       if (e.target.value === "All" || isNumber(e.target.value)) {
@@ -64,7 +64,8 @@ const TaskSetup: React.FC<Props> = ({
       (template) => template.id === selectedTaskTemplateId,
     )
 
-    if (selectedTaskTemplateId !== "All") {
+    if (selectedTaskTemplateId !== "All" && selectedTaskTemplateId !== watch("taskTemplateId")) {
+
       // update the "manhour allocation by grade" by task template
       const updatedManhourPercentageByGrade: ManhourAllocation = watch("manhourPercentageByGrade")
       selectedTaskTemplate?.gradeAllocations.forEach((gradeAllocation) => {
@@ -73,28 +74,30 @@ const TaskSetup: React.FC<Props> = ({
 
       setValue("manhourPercentageByGrade", updatedManhourPercentageByGrade)
       if (Object.values(updatedManhourPercentageByGrade).reduce((acc, value) => acc + value, 0) === 100) clearErrors("manhourPercentageByGrade")
-      else setError("manhourPercentageByGrade", {message: "manhourPercentageByGrade value is not valid", type: "invalid"})
+      else setError("manhourPercentageByGrade", { message: "manhourPercentageByGrade value is not valid", type: "invalid" })
 
       // update the "manhour allocation by grade by stage" by task template
       const updatedTaskGroups = watch("taskGroups")
       const taskGroupsKeys = Object.keys(updatedTaskGroups)
       selectedTaskTemplate?.groupAllocations.forEach((groupAllocation) => {
         const taskGroupId = groupAllocation.taskGroup.id
-        if(taskGroupsKeys.includes(taskGroupId.toString())) {
-          updatedTaskGroups[taskGroupId] = {...updatedTaskGroups[taskGroupId], percentAllocation: groupAllocation?.percentage}
+        if (taskGroupsKeys.includes(taskGroupId.toString())) {
+          updatedTaskGroups[taskGroupId] = { ...updatedTaskGroups[taskGroupId], percentAllocation: groupAllocation?.percentage }
         }
       })
 
       const percentageToZeroGroupIds = difference(taskGroupsKeys.map(key => parseFloat(key)), selectedTaskTemplate?.groupAllocations.map(groupAllocation => groupAllocation.taskGroup.id)!!)
       percentageToZeroGroupIds.forEach((percentageToZeroGroupId) => {
-        updatedTaskGroups[percentageToZeroGroupId] = {...updatedTaskGroups[percentageToZeroGroupId], percentAllocation: 0}
+        updatedTaskGroups[percentageToZeroGroupId] = { ...updatedTaskGroups[percentageToZeroGroupId], percentAllocation: 0 }
       })
-      
+
       setValue("taskGroups", updatedTaskGroups)
       if (Object.values(updatedTaskGroups).reduce((acc, value) => acc + value.percentAllocation, 0) === 100) clearErrors("taskGroups")
-      else setError("taskGroups", {message: "Task Groups value is not invalid", type: "invalid"})
+      else setError("taskGroups", { message: "Task Groups value is not invalid", type: "invalid" })
     }
 
+    setValue("taskTemplateId", selectedTaskTemplateId)
+
     const taskList =
       selectedTaskTemplateId === "All"
         ? tasks
@@ -176,7 +179,26 @@ const TaskSetup: React.FC<Props> = ({
               };
             }, {});
 
-            setValue("taskGroups", newTaskGroups);
+            // update the "manhour allocation by grade by stage" by task template
+            const taskGroupsKeys = Object.keys(newTaskGroups)
+            const selectedTaskTemplate = taskTemplates.find(
+              (template) => template.id === selectedTaskTemplateId,
+            )
+            selectedTaskTemplate?.groupAllocations.forEach((groupAllocation) => {
+              const taskGroupId = groupAllocation.taskGroup.id
+              if (taskGroupsKeys.includes(taskGroupId.toString())) {
+                newTaskGroups[taskGroupId] = { ...newTaskGroups[taskGroupId], percentAllocation: groupAllocation?.percentage }
+              }
+            })
+
+            const percentageToZeroGroupIds = difference(taskGroupsKeys.map(key => parseFloat(key)), selectedTaskTemplate?.groupAllocations.map(groupAllocation => groupAllocation.taskGroup.id)!!)
+            percentageToZeroGroupIds.forEach((percentageToZeroGroupId) => {
+              newTaskGroups[percentageToZeroGroupId] = { ...newTaskGroups[percentageToZeroGroupId], percentAllocation: 0 }
+            })
+
+            setValue("taskGroups", newTaskGroups)
+            if (Object.values(newTaskGroups).reduce((acc, value) => acc + value.percentAllocation, 0) === 100) clearErrors("taskGroups")
+            else setError("taskGroups", { message: "Task Groups value is not invalid", type: "invalid" })
           }}
           allItemsLabel={t("Task Pool")}
           selectedItemsLabel={t("Project Task List")}

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/ProjectSearch/ProjectSearch.tsx

@@ -46,6 +46,12 @@ const ProjectSearch: React.FC<Props> = ({ projects, projectCategories }) => {
         type: "select",
         options: uniq(projects.map((project) => project.team)),
       },
+      {
+        label: t("Status"),
+        paramName: "status",
+        type: "select",
+        options: uniq(projects.map((project) => project.status)),
+      },
     ],
     [t, projectCategories, projects],
   );
@@ -74,6 +80,7 @@ const ProjectSearch: React.FC<Props> = ({ projects, projectCategories }) => {
       { name: "category", label: t("Project Category") },
       { name: "team", label: t("Team") },
       { name: "client", label: t("Client") },
+      { name: "status", label: t("Status") },
     ],
     [t, onProjectClick],
   );
@@ -90,7 +97,8 @@ const ProjectSearch: React.FC<Props> = ({ projects, projectCategories }) => {
                 p.name.toLowerCase().includes(query.name.toLowerCase()) &&
                 (query.client === "All" || p.client === query.client) &&
                 (query.category === "All" || p.category === query.category) &&
-                (query.team === "All" || p.team === query.team),
+                (query.team === "All" || p.team === query.team) &&
+                (query.status === "All" || p.status === query.status),
             ),
           );
         }}

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.": "發生了錯誤。請稍後再試"
+}