From 3fc5f822d41b36fde0998a725ff46dbb7050d861 Mon Sep 17 00:00:00 2001 From: "Mac\\David" Date: Thu, 16 May 2024 15:58:10 +0800 Subject: [PATCH] update project status by client --- .../dashboard/ProjectStatusByClient/page.tsx | 6 +- src/app/api/clientprojects/actions.ts | 15 +++- .../CustomDatagrid/CustomDatagrid.tsx | 2 +- .../ProgressByClient/ProgressByClient.tsx | 77 ++++++++++++++----- .../ProgressByClientSearch.tsx | 13 ++-- 5 files changed, 82 insertions(+), 31 deletions(-) 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 = () => { }> + ); }; 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( - `${BASE_API_URL}/dashboard/searchCustomerSubsidiaryProject?customerId=${customerId}&subsidiaryId=${subsidiaryId}` - ); +export const fetchAllClientSubsidiaryProjects = cache(async (customerId: number, subsidiaryId?: number) => { + if (subsidiaryId === 0){ + return serverFetchJson( + `${BASE_API_URL}/dashboard/searchCustomerSubsidiaryProject?customerId=${customerId}` + ); + } else { + return serverFetchJson( + `${BASE_API_URL}/dashboard/searchCustomerSubsidiaryProject?customerId=${customerId}&subsidiaryId=${subsidiaryId}` + ); + } + }); 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/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 = ({ clientSubsidiaryProjectResult }) => { +const ProgressByClient: React.FC = () => { + 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 = ({ 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 = ({ clientSubsidiaryProjectResult }) => setChartManhourConsumptionPercentage(manhourConsumptionPercentage) }, [clientSubsidiaryProjectResult]); + useEffect(() => { + fetchData() + }, [customerId,subsidiaryId]); + + + const rows2 = [ { id: 1, @@ -155,37 +192,37 @@ const ProgressByClient: React.FC = ({ clientSubsidiaryProjectResult }) => > ); }, - 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 = ({ clientSubsidiaryProjectResult }) => return {params.row.spentManhour}; } }, - flex: 0.8, + minWidth: 70 }, { id: "remainedManhour", @@ -216,13 +253,13 @@ const ProgressByClient: React.FC = ({ clientSubsidiaryProjectResult }) => return {params.row.remainedManhour}; } }, - 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 = ({ clientSubsidiaryProjectResult }) => return ; } }, - flex: 0.2, + flex:0.1 }, ]; const optionstest: ApexOptions = { @@ -463,7 +500,7 @@ const ProgressByClient: React.FC = ({ 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 = ({ clientSubsidiaryProjectResult }) =>
@@ -590,13 +627,13 @@ const ProgressByClient: React.FC = ({ clientSubsidiaryProjectResult }) => Please select the project you want to check. )} - {/* {percentageArray.length > 0 && ( + {percentageArray.length > 0 && ( - )} */} + )} 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>; type SearchParamNames = keyof SearchQuery; const ProgressByClientSearch: React.FC = ({ 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 = ({ 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 = ({ clientProjects }) => { items={filteredProjects} columns={columns} /> - + {/* {clientSubsidiaryProjectResult.length > 0 && ( + + )} */} ); };