diff --git a/src/app/(main)/dashboard/ProjectStatusByClient/page.tsx b/src/app/(main)/dashboard/ProjectStatusByClient/page.tsx
index a4df131..1b51537 100644
--- a/src/app/(main)/dashboard/ProjectStatusByClient/page.tsx
+++ b/src/app/(main)/dashboard/ProjectStatusByClient/page.tsx
@@ -1,14 +1,17 @@
+
 import { Metadata } from "next";
 import { I18nProvider } from "@/i18n";
 import DashboardPage from "@/components/DashboardPage/DashboardPage";
 import DashboardPageButton from "@/components/DashboardPage/DashboardTabButton";
 import ProgressByClientSearch from "@/components/ProgressByClientSearch";
-import { Suspense } from "react";
+import { Suspense} from "react";
 import Tabs, { TabsProps } from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Typography from "@mui/material/Typography";
 import ProgressByClient from "@/components/ProgressByClient";
 import { preloadClientProjects } from "@/app/api/clientprojects";
+import { ClientProjectResult} from "@/app/api/clientprojects";
+import { useSearchParams } from 'next/navigation';
 
 export const metadata: Metadata = {
   title: "Project Status by Client",
@@ -24,6 +27,7 @@ const ProjectStatusByClient: React.FC = () => {
       <Suspense fallback={<ProgressByClientSearch.Loading />}>
         <ProgressByClientSearch />
       </Suspense>
+      <ProgressByClient/>
     </I18nProvider>
   );
 };
diff --git a/src/app/api/clientprojects/actions.ts b/src/app/api/clientprojects/actions.ts
index 27b80df..9de9ea5 100644
--- a/src/app/api/clientprojects/actions.ts
+++ b/src/app/api/clientprojects/actions.ts
@@ -21,8 +21,15 @@ export interface ClientSubsidiaryProjectResult {
   comingPaymentMilestone: string;
 }
 
-export const fetchAllClientSubsidiaryProjects = cache(async (customerId: number, subsidiaryId: number) => {
-  return serverFetchJson<ClientSubsidiaryProjectResult[]>(
-    `${BASE_API_URL}/dashboard/searchCustomerSubsidiaryProject?customerId=${customerId}&subsidiaryId=${subsidiaryId}`
-  );
+export const fetchAllClientSubsidiaryProjects = cache(async (customerId: number, subsidiaryId?: number) => {
+  if (subsidiaryId === 0){
+    return serverFetchJson<ClientSubsidiaryProjectResult[]>(
+      `${BASE_API_URL}/dashboard/searchCustomerSubsidiaryProject?customerId=${customerId}`
+    );
+  } else {
+    return serverFetchJson<ClientSubsidiaryProjectResult[]>(
+      `${BASE_API_URL}/dashboard/searchCustomerSubsidiaryProject?customerId=${customerId}&subsidiaryId=${subsidiaryId}`
+    );
+  }
+  
 });
diff --git a/src/components/CreateProject/CreateProject.tsx b/src/components/CreateProject/CreateProject.tsx
index 4242afb..fac9c79 100644
--- a/src/components/CreateProject/CreateProject.tsx
+++ b/src/components/CreateProject/CreateProject.tsx
@@ -170,12 +170,12 @@ const CreateProject: React.FC<Props> = ({
 
         // Tab - Milestone
         let projectTotal = 0
-        const milestonesKeys = Object.keys(data.milestones)
+        const milestonesKeys = Object.keys(data.milestones).filter(key => taskGroupKeys.includes(key))
         milestonesKeys.filter(key => Object.keys(data.taskGroups).includes(key)).forEach(key => {
           const { startDate, endDate, payments } = data.milestones[parseFloat(key)]
 
           if (!Boolean(startDate) || startDate === "Invalid Date" || !Boolean(endDate) || endDate === "Invalid Date" || new Date(startDate) > new Date(endDate)) {
-            formProps.setError("milestones", {message: "milestones is not valid", type: "invalid"})
+            formProps.setError("milestones", { message: "milestones is not valid", type: "invalid" })
             setTabIndex(3)
             hasErrors = true
           }
@@ -183,8 +183,8 @@ const CreateProject: React.FC<Props> = ({
           projectTotal += payments.reduce((acc, payment) => acc + payment.amount, 0)
         })
 
-        if (projectTotal !== data.expectedProjectFee) {
-          formProps.setError("milestones", {message: "milestones is not valid", type: "invalid"})
+        if (projectTotal !== data.expectedProjectFee || milestonesKeys.length !== taskGroupKeys.length) {
+          formProps.setError("milestones", { message: "milestones is not valid", type: "invalid" })
           setTabIndex(3)
           hasErrors = true
         }
@@ -219,7 +219,7 @@ const CreateProject: React.FC<Props> = ({
               data.projectActualEnd = dayjs().format("YYYY-MM-DD");
             }
 
-            data.taskTemplateId = data.taskTemplateId === "All" ? undefined : data.taskTemplateId; 
+            data.taskTemplateId = data.taskTemplateId === "All" ? undefined : data.taskTemplateId;
             const response = await saveProject(data);
 
             if (response.id > 0) {
@@ -293,7 +293,7 @@ const CreateProject: React.FC<Props> = ({
           {isEditMode && !(formProps.getValues("projectDeleted") === true) && (
             <Stack direction="row" gap={1}>
               {/* {!formProps.getValues("projectActualStart") && ( */}
-              {formProps.getValues("projectStatus") === "Pending to Start" && (
+              {formProps.getValues("projectStatus").toLowerCase() === "pending to start" && (
                 <Button
                   name="start"
                   type="submit"
@@ -306,21 +306,21 @@ const CreateProject: React.FC<Props> = ({
               )}
               {/* {formProps.getValues("projectActualStart") &&
                 !formProps.getValues("projectActualEnd") && ( */}
-                {formProps.getValues("projectStatus") === "On-going" && (
-                  <Button
-                    name="complete"
-                    type="submit"
-                    variant="contained"
-                    startIcon={<DoneIcon />}
-                    color="info"
-                  >
-                    {t("Complete Project")}
-                  </Button>
-                )}
+              {formProps.getValues("projectStatus").toLowerCase() === "on-going" && (
+                <Button
+                  name="complete"
+                  type="submit"
+                  variant="contained"
+                  startIcon={<DoneIcon />}
+                  color="info"
+                >
+                  {t("Complete Project")}
+                </Button>
+              )}
               {!(
                 // formProps.getValues("projectActualStart") &&
                 // formProps.getValues("projectActualEnd")
-                formProps.getValues("projectStatus") === "Completed" || 
+                formProps.getValues("projectStatus") === "Completed" ||
                 formProps.getValues("projectStatus") === "Deleted"
               ) && (
                   <Button
diff --git a/src/components/CreateProject/Milestone.tsx b/src/components/CreateProject/Milestone.tsx
index d9c021b..c91c0fa 100644
--- a/src/components/CreateProject/Milestone.tsx
+++ b/src/components/CreateProject/Milestone.tsx
@@ -61,11 +61,12 @@ const Milestone: React.FC<Props> = ({ allTasks, isActive }) => {
   const milestones = watch("milestones")
   const expectedTotalFee = watch("expectedProjectFee");
   useEffect(() => {
-    const milestonesKeys = Object.keys(milestones)
+    const taskGroupsIds = taskGroups.map(taskGroup => taskGroup.id.toString())
+    const milestonesKeys = Object.keys(milestones).filter(key => taskGroupsIds.includes(key))
     let hasError = false
     let projectTotal = 0
 
-    milestonesKeys.filter(key => taskGroups.map(taskGroup => taskGroup.id).includes(parseInt(key))).forEach(key => {
+    milestonesKeys.forEach(key => {
       const { startDate, endDate, payments } = milestones[parseFloat(key)]
 
       if (new Date(startDate) > new Date(endDate) || !Boolean(startDate) || !Boolean(endDate)) {
@@ -75,7 +76,7 @@ const Milestone: React.FC<Props> = ({ allTasks, isActive }) => {
       projectTotal += payments.reduce((acc, payment) => acc + payment.amount, 0)
     })
 
-    if (projectTotal !== expectedTotalFee) {
+    if (projectTotal !== expectedTotalFee || milestonesKeys.length !== taskGroupsIds.length) {
       hasError = true
     }
     // console.log(Object.keys(milestones).reduce((acc, key) => acc + milestones[parseFloat(key)].payments.reduce((acc2, value) => acc2 + value.amount, 0), 0))
diff --git a/src/components/CreateProject/MilestoneSection.tsx b/src/components/CreateProject/MilestoneSection.tsx
index 969f0c5..a9e65e7 100644
--- a/src/components/CreateProject/MilestoneSection.tsx
+++ b/src/components/CreateProject/MilestoneSection.tsx
@@ -244,6 +244,7 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
               <DatePicker
                 label={t("Stage Start Date")}
                 value={startDate ? dayjs(startDate) : null}
+                format="YYYY/MM/DD"
                 onChange={(date) => {
                   if (!date) return;
                   const milestones = getValues("milestones");
@@ -272,6 +273,7 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
               <DatePicker
                 label={t("Stage End Date")}
                 value={endDate ? dayjs(endDate) : null}
+                format="YYYY/MM/DD"
                 onChange={(date) => {
                   if (!date) return;
                   const milestones = getValues("milestones");
diff --git a/src/components/CreateProject/StaffAllocation.tsx b/src/components/CreateProject/StaffAllocation.tsx
index b65aeb5..89f20fa 100644
--- a/src/components/CreateProject/StaffAllocation.tsx
+++ b/src/components/CreateProject/StaffAllocation.tsx
@@ -39,8 +39,8 @@ import { StaffResult } from "@/app/api/staff";
 
 const staffComparator = (a: StaffResult, b: StaffResult) => {
   return (
-    a.team.localeCompare(b.team) ||
-    a.grade.localeCompare(b.grade) ||
+    a.team?.localeCompare(b.team) ||
+    a.grade?.localeCompare(b.grade) ||
     a.id - b.id
   );
 };
diff --git a/src/components/CustomDatagrid/CustomDatagrid.tsx b/src/components/CustomDatagrid/CustomDatagrid.tsx
index 4867623..c346874 100644
--- a/src/components/CustomDatagrid/CustomDatagrid.tsx
+++ b/src/components/CustomDatagrid/CustomDatagrid.tsx
@@ -1,7 +1,7 @@
 "use client";
 import * as React from "react";
 import { Card, CardHeader, CardContent, SxProps, Theme } from "@mui/material";
-import { DataGrid, GridColDef, GridRowSelectionModel, GridColumnGroupingModel} from "@mui/x-data-grid";
+import { DataGrid, GridColDef, GridRowSelectionModel, GridColumnGroupingModel, useGridApiRef} from "@mui/x-data-grid";
 import { darken, lighten, styled } from "@mui/material/styles";
 import { useState } from "react";
 
diff --git a/src/components/EditStaff/EditStaff.tsx b/src/components/EditStaff/EditStaff.tsx
index 4c032cc..0aa3428 100644
--- a/src/components/EditStaff/EditStaff.tsx
+++ b/src/components/EditStaff/EditStaff.tsx
@@ -216,12 +216,13 @@ const EditStaff: React.FC = async () => {
                   required: true,
                 };
               case "salary":
+                // console.log("salary", data[key])
                 return {
                   id: `salaryId`,
                   label: t(`Salary Point`),
                   type: "combo-Obj",
                   options: salaryCombo,
-                  value: data[key]?.id ?? "",
+                  value: data[key]?.salaryPoint ?? "",
                   required: true,
                 };
               // case "hourlyRate":
diff --git a/src/components/ProgressByClient/ProgressByClient.tsx b/src/components/ProgressByClient/ProgressByClient.tsx
index 37a2e86..115c08f 100644
--- a/src/components/ProgressByClient/ProgressByClient.tsx
+++ b/src/components/ProgressByClient/ProgressByClient.tsx
@@ -21,13 +21,18 @@ import { ClientProjectResult} from "@/app/api/clientprojects";
 import { ConstructionOutlined } from "@mui/icons-material";
 import ReactApexChart from "react-apexcharts";
 import { ApexOptions } from "apexcharts";
+import { useSearchParams } from 'next/navigation';
+import { fetchAllClientSubsidiaryProjects} from "@/app/api/clientprojects/actions";
 // const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 interface Props {
-  clientSubsidiaryProjectResult: ClientSubsidiaryProjectResult[];
+  // clientSubsidiaryProjectResult: ClientSubsidiaryProjectResult[];
 }
 
-const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) => {
+const ProgressByClient: React.FC<Props> = () => {
+  const searchParams = useSearchParams();
+  const customerId = searchParams.get('customerId');
+  const subsidiaryId = searchParams.get('subsidiaryId');
   const [activeTab, setActiveTab] = useState("financialSummary");
   const [SearchCriteria, setSearchCriteria] = React.useState({});
   const { t } = useTranslation("dashboard");
@@ -56,6 +61,32 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
   const [chartProjectName, setChartProjectName]:any[] = useState([]);
   const [chartManhourConsumptionPercentage, setChartManhourConsumptionPercentage]:any[] = useState([]);
   const color = ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b"];
+  const [clientSubsidiaryProjectResult, setClientSubsidiaryProjectResult]:any[] = useState([]);
+
+  const fetchData = async () => {
+    if (customerId && subsidiaryId) {
+      try {
+        if (subsidiaryId === '-'){
+          console.log("ss")
+          const clickResult = await fetchAllClientSubsidiaryProjects(
+            Number(customerId),Number(0))
+            console.log(clickResult)
+          setClientSubsidiaryProjectResult(clickResult);
+        } else {
+          const clickResult = await fetchAllClientSubsidiaryProjects(
+            Number(customerId),
+            Number(subsidiaryId))
+            console.log(clickResult)
+          setClientSubsidiaryProjectResult(clickResult);
+        }
+        
+        
+      } catch (error) {
+        console.error('Error fetching client subsidiary projects:', error);
+      }
+    }
+  }
+  
   useEffect(() => {
     const projectName = []
     const manhourConsumptionPercentage = []
@@ -68,6 +99,12 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
    setChartManhourConsumptionPercentage(manhourConsumptionPercentage)
   }, [clientSubsidiaryProjectResult]);
 
+  useEffect(() => {
+   fetchData()
+  }, [customerId,subsidiaryId]);
+
+
+
   const rows2 = [
     {
       id: 1,
@@ -155,37 +192,37 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
           ></span>
         );
       },
-      flex: 0.1,
+      flex:0.1
     },
     {
       id: "projectName",
       field: "projectName",
       headerName: "Project",
-      flex: 1,
+      minWidth:300
     },
     {
       id: "team",
       field: "team",
       headerName: "Team",
-      flex: 0.8,
+      minWidth: 50
     },
     {
-      id: "teamLeader",
-      field: "teamLeader",
+      id: "teamLead",
+      field: "teamLead",
       headerName: "Team Leader",
-      flex: 0.8,
+      minWidth: 70
     },
     {
       id: "expectedStage",
       field: "expectedStage",
       headerName: "Expected Stage",
-      flex: 1,
+      minWidth: 300
     },
     {
       id: "budgetedManhour",
       field: "budgetedManhour",
       headerName: "Budgeted Manhour",
-      flex: 0.8,
+      minWidth: 70
     },
     {
       id: "spentManhour",
@@ -201,7 +238,7 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
           return <span>{params.row.spentManhour}</span>;
         }
       },
-      flex: 0.8,
+      minWidth: 70
     },
     {
       id: "remainedManhour",
@@ -216,13 +253,13 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
           return <span>{params.row.remainedManhour}</span>;
         }
       },
-      flex: 1,
+      minWidth: 70
     },
     {
       id: "comingPaymentMilestone",
       field: "comingPaymentMilestone",
       headerName: "Coming Payment Milestone",
-      flex: 1,
+      minWidth: 100
     },
     {
       id: "alert",
@@ -239,7 +276,7 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
           return <span></span>;
         }
       },
-      flex: 0.2,
+      flex:0.1
     },
   ];
   const optionstest: ApexOptions = {
@@ -463,7 +500,7 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
   };
 
   const handleSelectionChange = (newSelectionModel: GridRowSelectionModel) => {
-    const selectedRowsData:any = clientSubsidiaryProjectResult.filter((row) =>
+    const selectedRowsData:any = clientSubsidiaryProjectResult.filter((row:any) =>
       newSelectionModel.includes(row.projectId),
     );
     console.log(selectedRowsData);
@@ -533,9 +570,9 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
             <CardHeader className="text-slate-500" title="Project Resource Consumption" />
             <div style={{ display: "inline-block", width: "99%" }}>
               <ReactApexChart
-                options={optionstest}
-                series={optionstest.series}
-                type="line"
+                options={options}
+                series={options.series}
+                type="bar"
                 height={350}
               />
             </div>
@@ -590,13 +627,13 @@ const ProgressByClient: React.FC<Props> = ({ clientSubsidiaryProjectResult }) =>
                 Please select the project you want to check.
               </div>
             )}
-            {/* {percentageArray.length > 0 && (
+            {percentageArray.length > 0 && (
               <ReactApexChart
                 options={options2}
                 series={percentageArray}
                 type="donut"
               />
-            )} */}
+            )}
           </Card>
         </Grid>
         <Grid item xs={12} md={12} lg={12}>
diff --git a/src/components/ProgressByClientSearch/ProgressByClientSearch.tsx b/src/components/ProgressByClientSearch/ProgressByClientSearch.tsx
index abd0333..7661856 100644
--- a/src/components/ProgressByClientSearch/ProgressByClientSearch.tsx
+++ b/src/components/ProgressByClientSearch/ProgressByClientSearch.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ProjectResult } from "@/app/api/projects";
-import React, { useMemo, useState, useCallback } from "react";
+import React, { useMemo, useState, useCallback, useEffect } from "react";
 import SearchBox, { Criterion } from "../SearchBox";
 import { useTranslation } from "react-i18next";
 import SearchResults, { Column } from "../SearchResults";
@@ -18,6 +18,7 @@ type SearchQuery = Partial<Omit<ClientProjectResult, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
 const ProgressByClientSearch: React.FC<Props> = ({ clientProjects }) => {
+  const router = useRouter();
   const { t } = useTranslation("projects");
   const searchParams = useSearchParams()
   // If project searching is done on the server-side, then no need for this.
@@ -41,9 +42,9 @@ const ProgressByClientSearch: React.FC<Props> = ({ clientProjects }) => {
 
   const onTaskClick = useCallback(async (clientProjectResult: ClientProjectResult) => {
     try {
-        const clickResult = await fetchAllClientSubsidiaryProjects(clientProjectResult.customerId, clientProjectResult.subsidiaryId);
-        console.log(clickResult);
-        setClientSubsidiaryProjectResult(clickResult);
+      router.push(
+        `/dashboard/ProjectStatusByClient?customerId=${clientProjectResult.customerId}&subsidiaryId=${clientProjectResult.subsidiaryId}`
+      );
     } catch (error) {
         console.error('Error fetching client subsidiary projects:', error);
     }
@@ -86,7 +87,9 @@ const ProgressByClientSearch: React.FC<Props> = ({ clientProjects }) => {
         items={filteredProjects}
         columns={columns}
       />
-      <ProgressByClient clientSubsidiaryProjectResult={clientSubsidiaryProjectResult}/>
+      {/* {clientSubsidiaryProjectResult.length > 0 && (
+        <ProgressByClient clientSubsidiaryProjectResult={clientSubsidiaryProjectResult} />
+      )} */}
     </>
   );
 };