added search function in resource consumption and coming milestones

src/components/ProgressByClient/ProgressByClient.tsx

@@ -25,6 +25,9 @@ import { useSearchParams } from 'next/navigation';
 import { fetchAllClientSubsidiaryProjects} from "@/app/api/clientprojects/actions";
 // const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
+type SearchProjectQuery = Partial<Omit<ClientSubsidiaryProjectResult, "id">>;
+type SearchProjectParamNames = keyof SearchProjectQuery;
+
 interface Props {
   // clientSubsidiaryProjectResult: ClientSubsidiaryProjectResult[];
 }
@@ -51,6 +54,7 @@ const ProgressByClient: React.FC<Props> = () => {
     React.useState("-");
   const [actualManhourSpent, setActualManhourSpent]: any = React.useState("-");
   const [remainedManhour, setRemainedManhour]: any = React.useState("-");
+  const [filteredClientSubsidiaryProjectResult, setFilteredClientSubsidiaryProjectResult]:any[] = useState([]);
   const [lastUpdate, setLastUpdate]: any = React.useState("-");
   const [dropdownDemo, setDropdownDemo] = useState("");
   const [dateDemo, setDateDemo] = useState(null);
@@ -100,6 +104,7 @@ const ProgressByClient: React.FC<Props> = () => {
             Number(customerId),tableSorting,Number(0))
             console.log(clickResult)
           setClientSubsidiaryProjectResult(clickResult);
+          setFilteredClientSubsidiaryProjectResult(clickResult);
         } else {
           const clickResult = await fetchAllClientSubsidiaryProjects(
             Number(customerId),
@@ -149,7 +154,13 @@ const ProgressByClient: React.FC<Props> = () => {
    fetchData()
   }, [customerId,subsidiaryId,tableSorting]);
 
-
+  const projectSearchCriteria: Criterion<SearchProjectParamNames>[] = useMemo(
+    () => [
+      { label: t("Project Code"), paramName: "projectCode", type: "text" },
+      { label: t("Project Name"), paramName: "projectName", type: "text" },
+    ],
+    [t],
+  );
 
   const rows2 = [
     {
@@ -623,11 +634,25 @@ const ProgressByClient: React.FC<Props> = () => {
               className="text-slate-500"
               title= {t("Resource Consumption and Coming Milestones")}
             />
+            {clientSubsidiaryProjectResult.length > 0 && (
+              <SearchBox
+                  criteria={projectSearchCriteria}
+                  onSearch={(query) => {
+                    setFilteredClientSubsidiaryProjectResult(
+                      clientSubsidiaryProjectResult.filter(
+                        (cp:any) =>
+                          cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) &&
+                          cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) 
+                      ),
+                    );
+                  }}
+              />
+            )}
             <div
               style={{ display: "inline-block", width: "99%", marginLeft: 10 }}
             >
               <CustomDatagrid
-                rows={clientSubsidiaryProjectResult}
+                rows={filteredClientSubsidiaryProjectResult}
                 columns={columns2}
                 columnWidth={200}
                 dataGridHeight={300}

src/components/ProgressByTeam/ProgressByTeam.tsx

@@ -19,9 +19,12 @@ import SearchBox, { Criterion } from "../SearchBox";
 import ProgressByTeamSearch from "@/components/ProgressByTeamSearch";
 import { Suspense } from "react";
 import { useSearchParams } from 'next/navigation';
-import { fetchAllTeamProjects} from "@/app/api/teamprojects/actions";
+import { fetchAllTeamProjects,ClientSubsidiaryProjectResult} from "@/app/api/teamprojects/actions";
 // const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
+type SearchProjectQuery = Partial<Omit<ClientSubsidiaryProjectResult, "id">>;
+type SearchProjectParamNames = keyof SearchProjectQuery;
+
 const ProgressByTeam: React.FC = () => {
   const searchParams = useSearchParams();
   const teamLeadId = searchParams.get('teamLeadId');
@@ -51,6 +54,7 @@ const ProgressByTeam: React.FC = () => {
   const [chartProjectName, setChartProjectName]:any[] = useState([]);
   const [chartProjectDisplayName, setChartProjectDisplayName]:any[] = useState([]);
   const [chartProjectBudgetedHour, setChartProjectBudgetedHour]:any[] = useState([]);
+  const [filteredTeamProjectResult, setFilteredTeamProjectResult]:any[] = useState([]);
   const [chartProjectSpentHour, setChartProjectSpentHour]:any[] = useState([]);
   const [chartManhourConsumptionPercentage, setChartManhourConsumptionPercentage]:any[] = useState([]);
   const color = ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b",
@@ -89,6 +93,14 @@ const ProgressByTeam: React.FC = () => {
   const recordsPerPage = 10;
   const [tableSorting, setTableSorting] = useState('ProjectName');
 
+  const projectSearchCriteria: Criterion<SearchProjectParamNames>[] = useMemo(
+    () => [
+      { label: t("Project Code"), paramName: "projectCode", type: "text" },
+      { label: t("Project Name"), paramName: "projectName", type: "text" },
+    ],
+    [t],
+  );
+
   const fetchData = async () => {
     console.log(tableSorting)
     if (teamLeadId) {
@@ -97,6 +109,7 @@ const ProgressByTeam: React.FC = () => {
         Number(teamLeadId),tableSorting)
         console.log(clickResult)
         setTeamProjectResult(clickResult);
+        setFilteredTeamProjectResult(clickResult);
       } catch (error) {
         console.error('Error fetching team projects:', error);
       }
@@ -734,11 +747,25 @@ const ProgressByTeam: React.FC = () => {
               className="text-slate-500"
               title= {t("Resource Consumption and Coming Milestones")}
             />
+             {teamProjectResult.length > 0 && (
+              <SearchBox
+                  criteria={projectSearchCriteria}
+                  onSearch={(query) => {
+                    setFilteredTeamProjectResult(
+                      teamProjectResult.filter(
+                        (cp:any) =>
+                          cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) &&
+                          cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) 
+                      ),
+                    );
+                  }}
+              />
+            )}
             <div
               style={{ display: "inline-block", width: "99%", marginLeft: 10 }}
             >
               <CustomDatagrid
-                rows={teamProjectResult}
+                rows={filteredTeamProjectResult}
                 columns={columns2}
                 columnWidth={200}
                 dataGridHeight={300}

src/components/ProjectCashFlow/ProjectCashFlow.tsx

@@ -74,20 +74,16 @@ const ProjectCashFlow: React.FC = () => {
     
     if (!isInitializing) {
       setSelectionModel(newSelectionModel);
-      console.log(newSelectionModel)
-      console.log(projectData)
       const selectedRowsData = projectData.filter((row: any) =>
         newSelectionModel.includes(row.id)
       );
       const projectIdList = selectedRowsData.map((row: any) => row.id);
-      console.log(selectedRowsData)
       setSelectedProjectIdList(projectIdList);
     }
   };
 
   const fetchData = async () => {
     const cashFlowProject = await fetchProjectsCashFlow();
-    console.log(cashFlowProject)
     setProjectData(cashFlowProject)
     setFilteredResult(cashFlowProject)
   }
@@ -129,7 +125,6 @@ const ProjectCashFlow: React.FC = () => {
     
   }
   const fetchReceivableAndExpenditureData = async () => {
-    console.log("s2")
     if (selectedProjectIdList.length === 0) {
       setReceivedPercentage(0)
       setInvoicedPercentage(0)
@@ -764,15 +759,12 @@ const ProjectCashFlow: React.FC = () => {
   );
 
   function isDateInRange(dateToCheck: string, startDate: string, endDate: string): boolean {
-    console.log(startDate)
-    console.log(endDate)
     if (!startDate || !endDate) {
       return false;
     }
     const dateToCheckObj = new Date(dateToCheck);
     const startDateObj = new Date(startDate);
     const endDateObj = new Date(endDate);
-    console.log(dateToCheckObj)
     return dateToCheckObj >= startDateObj && dateToCheckObj <= endDateObj;
   }
 
@@ -787,7 +779,6 @@ const ProjectCashFlow: React.FC = () => {
       <SearchBox
         criteria={searchCriteria}
         onSearch={(query) => {
-          console.log(query)
           setFilteredResult(
             projectData.filter(
               (cp:any) =>

src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx

@@ -19,10 +19,11 @@ import SearchBox, { Criterion } from "../SearchBox";
 import ProgressByTeamSearch from "@/components/ProgressByTeamSearch";
 import { Suspense } from "react";
 import { useSearchParams } from 'next/navigation';
-import { fetchAllTeamProjects, TeamProjectResult, fetchTeamProjects, fetchAllTeamConsumption, fetchAllTeamConsumptionColorOrder} from "@/app/api/teamprojects/actions";
+import { fetchAllTeamProjects, TeamProjectResult, ClientSubsidiaryProjectResult, fetchTeamProjects, fetchAllTeamConsumption, fetchAllTeamConsumptionColorOrder} from "@/app/api/teamprojects/actions";
 import Typography from "@mui/material/Typography";
 // const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
-
+type SearchProjectQuery = Partial<Omit<ClientSubsidiaryProjectResult, "id">>;
+type SearchProjectParamNames = keyof SearchProjectQuery;
 interface Props {
   projects: TeamProjectResult[];
 }
@@ -44,6 +45,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
   const [colorArray, setColorArray]: any[] = useState([]);
   const [selectionModel, setSelectionModel]: any[] = React.useState([]);
   const [pieChartColor, setPieChartColor]: any[] = React.useState([]);
+  const [filteredTeamProjectResult, setFilteredTeamProjectResult]:any[] = useState([]);
   const [totalSpentPercentage, setTotalSpentPercentage]: any = React.useState();
   const [projectBudgetManhour, setProjectBudgetManhour]: any =
     React.useState("-");
@@ -117,6 +119,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
           selectedTeamIdList,tableSorting)
         console.log(clickResult)
         setTeamProjectResult(clickResult);
+        setFilteredTeamProjectResult(clickResult);
         setTeamProjectColorOrder(colorOrder);
       } catch (error) {
         console.error('Error fetching team consumption:', error);
@@ -124,6 +127,14 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
     }
   }
 
+   const projectSearchCriteria: Criterion<SearchProjectParamNames>[] = useMemo(
+    () => [
+      { label: t("Project Code"), paramName: "projectCode", type: "text" },
+      { label: t("Project Name"), paramName: "projectName", type: "text" },
+    ],
+    [t],
+  );
+
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
       { label: t("Team Code"), paramName: "teamCode", type: "text" },
@@ -854,11 +865,25 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
               className="text-slate-500"
               title={t("Resource Consumption and Coming Milestones")}
             />
+            {teamProjectResult.length > 0 && (
+              <SearchBox
+                  criteria={projectSearchCriteria}
+                  onSearch={(query) => {
+                    setFilteredTeamProjectResult(
+                      teamProjectResult.filter(
+                        (cp:any) =>
+                          cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) &&
+                          cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) 
+                      ),
+                    );
+                  }}
+              />
+            )}
             <div
               style={{ display: "inline-block", width: "99%", marginLeft: 10 }}
             >
               <CustomDatagrid
-                rows={teamProjectResult}
+                rows={filteredTeamProjectResult}
                 columns={columns2}
                 columnWidth={200}
                 dataGridHeight={300}