update staff create combo

src/app/api/companys/actions.ts

@@ -9,7 +9,7 @@ export interface comboProp {
 }
 
 export interface combo {
-    records: comboProp;
+    records: comboProp[];
   }
 
 export const fetchCompanyCombo = cache(async () => {

src/app/api/departments/actions.ts

@@ -11,7 +11,7 @@ export interface comboProp {
 }
 
 export interface combo {
-  records: comboProp;
+  records: comboProp[];
 }
 export interface CreateDepartmentInputs {
     departmentCode: string;

src/app/api/grades/actions.ts

@@ -10,7 +10,7 @@ export interface comboProp {
 }
 
 export interface combo {
-  records: comboProp;
+  records: comboProp[];
 }
   
 export const fetchGradeCombo = cache(async () => {

src/app/api/positions/actions.ts

@@ -10,7 +10,7 @@ export interface comboProp {
 }
 
 export interface combo {
-  records: comboProp;
+  records: comboProp[];
 }
 
 export interface CreatePositionInputs {

src/app/api/salarys/actions.ts

@@ -10,7 +10,7 @@ export interface comboProp {
 }
 
 export interface combo {
-  records: comboProp;
+  records: comboProp[];
 }
   
 export const fetchSalaryCombo = cache(async () => {

src/app/api/skill/actions.ts

@@ -11,7 +11,7 @@ export interface comboProp {
 }
 
 export interface combo {
-  records: comboProp;
+  records: comboProp[];
 }
   
 export const fetchSkillCombo = cache(async () => {

src/app/api/team/actions.ts

@@ -9,7 +9,7 @@ export interface comboProp {
 }
 
 export interface combo {
-    records: comboProp;
+    records: comboProp[];
   }
 
 export const fetchTeamCombo = cache(async () => {

src/components/CreateStaff/CreateStaff.tsx

@@ -0,0 +1,320 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import CustomInputForm from "../CustomInputForm";
+import { useRouter } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import {
+  FieldErrors,
+  FormProvider,
+  SubmitErrorHandler,
+  SubmitHandler,
+  useForm,
+} from "react-hook-form";
+import { CreateStaffInputs, saveStaff, testing } from "@/app/api/staff/actions";
+import { Typography } from "@mui/material";
+import CreateStaffForm from "../CreateStaffForm";
+import { comboProp, fetchCompanyCombo } from "@/app/api/companys/actions";
+import { fetchTeamCombo } from "@/app/api/team/actions";
+import { fetchDepartmentCombo } from "@/app/api/departments/actions";
+import { fetchPositionCombo } from "@/app/api/positions/actions";
+import { fetchGradeCombo } from "@/app/api/grades/actions";
+import { fetchSkillCombo } from "@/app/api/skill/actions";
+import { fetchSalaryCombo } from "@/app/api/salarys/actions";
+// import { fetchTeamCombo } from "@/app/api/team/actions";
+// import { fetchDepartmentCombo } from "@/app/api/departments/actions";
+// import { fetchPositionCombo } from "@/app/api/positions/actions";
+// import { fetchGradeCombo } from "@/app/api/grades/actions";
+// import { fetchSkillCombo } from "@/app/api/skill/actions";
+// import { fetchSalaryCombo } from "@/app/api/salarys/actions";
+
+interface Field {
+  //   subtitle: string;
+  id: string;
+  label: string;
+  type: string;
+  value?: any;
+  required?: boolean;
+  pattern?: string;
+  message?: string;
+  options?: any[];
+  readOnly?: boolean;
+}
+
+interface formProps {
+  Title?: string[];
+  // fieldLists: Field[][];
+}
+
+export interface comboItem {
+  company: comboProp[];
+  team: comboProp[];
+  department: comboProp[];
+  position: comboProp[];
+  grade: comboProp[];
+  skill: comboProp[];
+  salary: comboProp[];
+}
+
+const CreateStaff: React.FC<formProps> = ({ Title }) => {
+  // const router = useRouter();
+  const { t } = useTranslation();
+  const [companyCombo, setCompanyCombo] = useState<comboProp[]>();
+  const [teamCombo, setTeamCombo] = useState<comboProp[]>();
+  const [departmentCombo, setDepartmentCombo] = useState<comboProp[]>();
+  const [positionCombo, setPositionCombo] = useState<comboProp[]>();
+  const [gradeCombo, setGradeCombo] = useState<comboProp[]>();
+  const [skillCombo, setSkillCombo] = useState<comboProp[]>();
+  const [salaryCombo, setSalaryCombo] = useState<comboProp[]>();
+  // const [serverError, setServerError] = useState("");
+
+  let comboItem: comboItem = {
+    company: [],
+    team: [],
+    department: [],
+    position: [],
+    grade: [],
+    skill: [],
+    salary: [],
+  };
+
+  const fetchCompany = async () => {
+    await fetchCompanyCombo().then((data) => {
+      if (data) setCompanyCombo(data.records);
+    });
+  }
+
+  const fetchTeam = async () => {
+    await fetchTeamCombo().then((data) => {
+      if (data) setTeamCombo(data.records);
+    });
+  }
+
+  const fetchDepartment = async () => {
+    await fetchDepartmentCombo().then((data) => {
+      if (data) setDepartmentCombo(data.records);
+    });
+  }
+
+  const fetchPosition = async () => {
+    await fetchPositionCombo().then((data) => {
+      if (data) setPositionCombo(data.records);
+    });
+  }
+
+  const fetchGrade = async () => {
+    await fetchGradeCombo().then((data) => {
+      if (data) setGradeCombo(data.records);
+    });
+  }
+
+  const fetchSkill = async () => {
+    await fetchSkillCombo().then((data) => {
+      if (data) setSkillCombo(data.records);
+    });
+  }
+
+  const fetchSalary = async () => {
+    await fetchSalaryCombo().then((data) => {
+      if (data) setSalaryCombo(data.records);
+    });
+  }
+
+  useEffect(() => {
+    fetchCompany()
+    fetchTeam()
+    fetchDepartment()
+    fetchPosition()
+    fetchGrade()
+    fetchSkill()
+    fetchSalary()
+  }, []);
+
+  useEffect(() => {
+    if(!companyCombo)
+        fetchCompany()
+    if(!teamCombo)
+        fetchTeam()
+    if(!departmentCombo)
+        fetchDepartment()
+    if(!positionCombo)
+        fetchPosition()
+    if(!gradeCombo)
+        fetchGrade()
+    if(!skillCombo)
+        fetchSkill()
+    if(!salaryCombo)
+        fetchSalary()
+
+  }, [companyCombo, teamCombo, departmentCombo, positionCombo, gradeCombo, skillCombo, salaryCombo]);
+
+  // useEffect(() => {
+  //   console.log(companyCombo)
+  // }, [companyCombo]);
+
+  const fieldLists: Field[][] = [
+    [
+      {
+        id: "staffId",
+        label: t("Staff ID"),
+        type: "text",
+        value: "",
+        required: true,
+      },
+      {
+        id: "name",
+        label: t("Staff Name"),
+        type: "text",
+        value: "",
+        required: true,
+      },
+      {
+        id: "companyId",
+        label: t("Company"),
+        type: "combo-Obj",
+        options: teamCombo,
+        required: true,
+      },
+      {
+        id: "teamId",
+        label: t("Team"),
+        type: "combo-Obj",
+        options: teamCombo,
+        required: true,
+      },
+      {
+        id: "departmentId",
+        label: t("Department"),
+        type: "combo-Obj",
+        options: departmentCombo,
+        required: true,
+      },
+      {
+        id: "gradeId",
+        label: t("Grade"),
+        type: "combo-Obj",
+        options: gradeCombo,
+        required: true,
+      },
+      {
+        id: "skillSetId",
+        label: t("Skillset"),
+        type: "combo-Obj",
+        options: skillCombo,
+        required: true,
+      },
+      {
+        id: "currentPositionId",
+        label: t("Current Position"),
+        type: "combo-Obj",
+        options: positionCombo,
+        required: true,
+      },
+      {
+        id: "salaryEffId",
+        label: t("Salary Point"),
+        type: "combo-Obj",
+        options: salaryCombo,
+        required: true,
+      },
+      {
+        id: "hourlyRate",
+        label: t("Hourly Rate"),
+        type: "numeric-testing",
+        value: "",
+        required: true,
+      },      
+      {
+        id: "employType",
+        label: t("Employ Type"),
+        type: "combo-Obj",
+        options: [{id: "FT", label: t("FT")}, {id: "PT", label: t("PT")}],
+        value: "",
+        required: true,
+      },
+      {
+        id: "email",
+        label: t("Email"),
+        type: "text",
+        value: "",
+        pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$",
+        message: t("input matching format"),
+        required: true,
+      },
+      {
+        id: "phone1",
+        label: t("Phone1"),
+        type: "text",
+        value: "",
+        pattern: "^\\d{8}$",
+        message: t("input correct phone no."),
+        required: true,
+      },
+      {
+        id: "phone2",
+        label: t("Phone2"),
+        type: "text",
+        value: "",
+        pattern: "^\\d{8}$",
+        message: t("input correct phone no."),
+        required: true,
+      },      
+    ],
+    [
+      {
+        id: "emergContactName",
+        label: t("Emergency Contact Name"),
+        type: "text",
+        value: "",
+        required: true,
+      },
+      {
+        id: "emergContactPhone",
+        label: t("Emergency Contact Phone"),
+        type: "text",
+        value: "",
+        pattern: "^\\d{8}$",
+        message: t("input correct phone no."),
+        required: true,
+      },
+      {
+        id: "joinDate",
+        label: t("Join Date"),
+        type: "multiDate",
+        value: "",
+        required: true,
+      },
+      {
+        id: "joinPositionId",
+        label: t("Join Position"),
+        type: "combo-Obj",
+        options: positionCombo,
+        required: true,
+      },
+      {
+        id: "departDate",
+        label: t("Depart Date"),
+        type: "multiDate",
+        value: "",
+      },
+      {
+        id: "departReason",
+        label: t("Depart Reason"),
+        type: "text",
+        value: "",
+      },
+      {
+        id: "remark",
+        label: t("Remark"),
+        type: "remarks",
+        value: "",
+      },
+    ]
+  ];
+  return (
+    <>
+      <CreateStaffForm Title={Title} fieldLists={fieldLists}/>
+    </>
+  );
+};
+
+export default CreateStaff;

src/components/CreateStaff/CreateStaffLoading.tsx

@@ -0,0 +1,40 @@
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+import React from "react";
+
+// Can make this nicer
+export const CreateStaffLoading: React.FC = () => {
+  return (
+    <>
+      <Card>
+        <CardContent>
+          <Stack spacing={2}>
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton
+              variant="rounded"
+              height={50}
+              width={100}
+              sx={{ alignSelf: "flex-end" }}
+            />
+          </Stack>
+        </CardContent>
+      </Card>
+      <Card>CreateStaff
+        <CardContent>
+          <Stack spacing={2}>
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+          </Stack>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+
+export default CreateStaffLoading;

src/components/CreateStaff/CreateStaffWrapper.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import CreateStaff from "./CreateStaff";
+import CreateStaffLoading from "./CreateStaffLoading";
+import { fetchStaff, fetchTeamLeads } from "@/app/api/staff";
+import { useSearchParams } from "next/navigation";
+
+interface SubComponents {
+  Loading: typeof CreateStaffLoading;
+} 
+
+const CreateStaffWrapper: React.FC & SubComponents = async () => {
+
+
+  return <CreateStaff/>;
+};
+
+CreateStaffWrapper.Loading = CreateStaffLoading;
+
+export default CreateStaffWrapper;

src/components/CreateStaff/index.ts

@@ -1 +1 @@
-export { default } from "./CreateStaffForm";
+export { default } from "./CreateStaffWrapper";

src/components/CreateStaff/CreateStaffForm.tsx → src/components/CreateStaffForm/CreateStaffForm.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback, useState } from "react";
 import CustomInputForm from "../CustomInputForm";
 import { useRouter } from "next/navigation";

src/components/CreateStaffForm/index.ts

@@ -0,0 +1 @@
+export { default } from "./CreateStaffForm";

src/components/EditStaff/EditStaff.tsx

@@ -55,13 +55,13 @@ const EditStaff: React.FC = async () => {
   const idString = searchParams.get("id");
   const [id, setId] = useState(0);
   const [fieldLists, setFieldLists] = useState<Field[][]>();
-  const [companyCombo, setCompanyCombo] = useState<comboProp>();
-  const [teamCombo, setTeamCombo] = useState<comboProp>();
-  const [departmentCombo, setDepartmentCombo] = useState<comboProp>();
-  const [positionCombo, setPositionCombo] = useState<comboProp>();
-  const [gradeCombo, setGradeCombo] = useState<comboProp>();
-  const [skillCombo, setSkillCombo] = useState<comboProp>();
-  const [salaryCombo, setSalaryCombo] = useState<comboProp>();
+  const [companyCombo, setCompanyCombo] = useState<comboProp[]>();
+  const [teamCombo, setTeamCombo] = useState<comboProp[]>();
+  const [departmentCombo, setDepartmentCombo] = useState<comboProp[]>();
+  const [positionCombo, setPositionCombo] = useState<comboProp[]>();
+  const [gradeCombo, setGradeCombo] = useState<comboProp[]>();
+  const [skillCombo, setSkillCombo] = useState<comboProp[]>();
+  const [salaryCombo, setSalaryCombo] = useState<comboProp[]>();
   //   const employTypeCombo = [{id: "FT", label: t("FT")}, {id: "PT", label: t("PT")}];
   const title = ["", t('Additional Info')]
   const employTypeCombo = [

src/components/StaffSearch/StaffSearch.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { StaffResult } from "@/app/api/staff";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import SearchBox, { Criterion } from "../SearchBox/index";
@@ -11,6 +10,10 @@ import ConfirmModal from "./ConfirmDeleteModal";
 import { deleteStaff } from "@/app/api/staff/actions";
 import { useRouter } from "next/navigation";
 
+interface combo {
+  id: any;
+  label: string;
+}
 interface Props {
   staff: StaffResult[];
 }

src/components/StaffSearch/StaffSearchWrapper.tsx

@@ -1,8 +1,14 @@
-
 import { fetchStaff, fetchTeamLeads } from "@/app/api/staff";
 import React from "react";
 import StaffSearch from "./StaffSearch";
 import StaffSearchLoading from "./StaffSearchLoading";
+import { comboProp, fetchCompanyCombo } from "@/app/api/companys/actions";
+import { fetchTeamCombo } from "@/app/api/team/actions";
+import { fetchDepartmentCombo } from "@/app/api/departments/actions";
+import { fetchPositionCombo } from "@/app/api/positions/actions";
+import { fetchGradeCombo } from "@/app/api/grades/actions";
+import { fetchSkillCombo } from "@/app/api/skill/actions";
+import { fetchSalaryCombo } from "@/app/api/salarys/actions";
 // import { preloadStaff } from "@/app/api/staff";
 
 interface SubComponents {
@@ -11,8 +17,8 @@ interface SubComponents {
 
 const StaffSearchWrapper: React.FC & SubComponents = async () => {
   const staff = await fetchStaff();
-  // console.log(staff)
-  
+  console.log(staff);
+
   return <StaffSearch staff={staff} />;
 };