Use grade and position from API for staff

src/app/(main)/projects/create/page.tsx

@@ -1,4 +1,5 @@
 import { fetchAllCustomers, fetchAllSubsidiaries } from "@/app/api/customer";
+import { fetchGrades } from "@/app/api/grades";
 import {
   fetchProjectBuildingTypes,
   fetchProjectCategories,
@@ -34,6 +35,7 @@ const Projects: React.FC = async () => {
   fetchProjectWorkNatures();
   fetchAllCustomers();
   fetchAllSubsidiaries();
+  fetchGrades();
   preloadTeamLeads();
   preloadStaff();
 

src/app/api/grades/index.ts

@@ -1,5 +1,15 @@
+import { serverFetchJson } from "@/app/utils/fetchUtil";
+import { BASE_API_URL } from "@/config/api";
+import { cache } from "react";
+
 export interface Grade {
   name: string;
   id: number;
   code: string;
 }
+
+export const fetchGrades = cache(async () => {
+  return serverFetchJson<Grade[]>(`${BASE_API_URL}/grades`, {
+    next: { tags: ["grades"] },
+  });
+});

src/app/api/positions/index.ts

@@ -4,18 +4,18 @@ import { cache } from "react";
 import "server-only";
 
 export interface PositionResult {
-    id: number;
-    code: string;
-    name: string;
-    description: string;
+  id: number;
+  code: string;
+  name: string;
+  description: string;
 }
 
 export const preloadPositions = () => {
-    fetchPositions();
+  fetchPositions();
 };
 
 export const fetchPositions = cache(async () => {
-    return serverFetchJson<PositionResult[]>(`${BASE_API_URL}/positions`, {
-      next: { tags: ["positions"] },
-    });
-});
+  return serverFetchJson<PositionResult[]>(`${BASE_API_URL}/positions`, {
+    next: { tags: ["positions"] },
+  });
+});

src/components/CreateProject/CreateProject.tsx

@@ -51,8 +51,6 @@ export interface Props {
   buildingTypes: BuildingType[];
   workNatures: WorkNature[];
   allStaffs: StaffResult[];
-
-  // Mocked
   grades: Grade[];
 }
 

src/components/CreateProject/CreateProjectWrapper.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/app/api/projects";
 import { fetchStaff, fetchTeamLeads } from "@/app/api/staff";
 import { fetchAllCustomers, fetchAllSubsidiaries } from "@/app/api/customer";
+import { fetchGrades } from "@/app/api/grades";
 
 const CreateProjectWrapper: React.FC = async () => {
   const [
@@ -27,6 +28,7 @@ const CreateProjectWrapper: React.FC = async () => {
     buildingTypes,
     workNatures,
     allStaffs,
+    grades,
   ] = await Promise.all([
     fetchAllTasks(),
     fetchTaskTemplates(),
@@ -41,6 +43,7 @@ const CreateProjectWrapper: React.FC = async () => {
     fetchProjectBuildingTypes(),
     fetchProjectWorkNatures(),
     fetchStaff(),
+    fetchGrades(),
   ]);
 
   return (
@@ -58,14 +61,7 @@ const CreateProjectWrapper: React.FC = async () => {
       buildingTypes={buildingTypes}
       workNatures={workNatures}
       allStaffs={allStaffs}
-      // Mocks
-      grades={[
-        { name: "Grade 1", id: 1, code: "1" },
-        { name: "Grade 2", id: 2, code: "2" },
-        { name: "Grade 3", id: 3, code: "3" },
-        { name: "Grade 4", id: 4, code: "4" },
-        { name: "Grade 5", id: 5, code: "5" },
-      ]}
+      grades={grades}
     />
   );
 };

src/components/CreateProject/StaffAllocation.tsx

@@ -54,7 +54,7 @@ export interface Props {
 }
 
 const StaffAllocation: React.FC<Props> = ({
-  allStaffs: dataStaffs,
+  allStaffs,
   allTasks,
   isActive,
   defaultManhourBreakdownByGrade,
@@ -63,15 +63,6 @@ const StaffAllocation: React.FC<Props> = ({
   const { t } = useTranslation();
   const { setValue, getValues, watch } = useFormContext<CreateProjectInputs>();
 
-  // TODO: remove this when grade and positions are done
-  const allStaffs = useMemo<StaffResult[]>(() => {
-    return dataStaffs.map((staff, index) => ({
-      ...staff,
-      grade: grades[index % grades.length].name,
-      currentPosition: `Mock Postion ${index}`,
-    }));
-  }, [dataStaffs, grades]);
-
   const [filteredStaff, setFilteredStaff] = React.useState(
     allStaffs.sort(staffComparator),
   );