update project history

src/components/EditStaff/EditStaff.tsx

@@ -285,7 +285,7 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos, SalaryEffectiveInfo, In
             </Tabs>
           </Stack>
           {tabIndex == 0 && Staff && <StaffInfo combos={combos} />}
-          {tabIndex == 2 && <ProjectHistory InvolvedProject={InvolvedProject}/>}
+          {tabIndex == 1 && <ProjectHistory InvolvedProject={InvolvedProject}/>}
           {tabIndex == 0 &&
           <Stack direction="row" justifyContent="flex-end" gap={1}>
           <Button

src/components/EditStaff/ProjectHistory.tsx

@@ -1,17 +1,29 @@
 import { projects } from "@/app/api/staff";
-import { Box, Card, CardContent, Grid, Stack } from "@mui/material";
+import { Box, Card, CardContent, Grid, Stack, SxProps } from "@mui/material";
 import StyledDataGrid from "../StyledDataGrid";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 
 interface Props {
-    InvolvedProject?: projects[]
+    InvolvedProject: projects[]
   }
 
 
 const ProjectHistory: React.FC<Props> = async ({ InvolvedProject }) => {
     const { t } = useTranslation();
+    console.log(InvolvedProject)
+    const _sx: SxProps = useMemo(() => (
+      InvolvedProject.length == 0 ? 
+        {
+          height: 300
+        }
+        :
+        {
+          height: 500
+        }
+      )
+    , []);
     const projectCols = useMemo(
         () => [
           {
@@ -33,12 +45,14 @@ const ProjectHistory: React.FC<Props> = async ({ InvolvedProject }) => {
              <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                 <Grid item xs={6}>
                     <StyledDataGrid
+                        sx={_sx}
                         rows={InvolvedProject?.filter(item => item.status === "On-going") ?? []}
                         columns={projectCols}
                     />
                 </Grid>
                 <Grid item xs={6}>
                     <StyledDataGrid
+                        sx={_sx}
                         rows={InvolvedProject?.filter(item => item.status === "Completed") ?? []}
                         columns={projectCols}
                     />