From 898e74b819708733fed118006658bacb99aab5cd Mon Sep 17 00:00:00 2001 From: "Mac\\David" Date: Fri, 24 May 2024 00:17:39 +0800 Subject: [PATCH] update dashboard --- src/app/api/cashflow/index.ts | 21 ++------- src/app/api/financialsummary/actions.ts | 30 ++++++++---- src/components/Breadcrumb/Breadcrumb.tsx | 1 + .../CustomDatagrid/CustomDatagrid.tsx | 6 +++ .../ProjectCashFlow/ProjectCashFlow.tsx | 47 ++++++++++++++++--- .../ProjectFinancialCard.tsx | 12 ++--- .../ProjectFinancialSummary.tsx | 34 ++++++++------ 7 files changed, 97 insertions(+), 54 deletions(-) diff --git a/src/app/api/cashflow/index.ts b/src/app/api/cashflow/index.ts index 978a61e..f71ba74 100644 --- a/src/app/api/cashflow/index.ts +++ b/src/app/api/cashflow/index.ts @@ -1,4 +1,7 @@ +"use server"; import { cache } from "react"; +import { serverFetchJson } from "@/app/utils/fetchUtil"; +import { BASE_API_URL } from "@/config/api"; export interface CashFlow { id: number; @@ -19,21 +22,5 @@ export const preloadProjects = () => { }; export const fetchProjectsCashFlow = cache(async () => { - return mockProjects; + return serverFetchJson(`${BASE_API_URL}/dashboard/searchCashFlowProject`); }); - -const mockProjects: CashFlow[] = [ - { - id: 1, - projectCode: "CUST-001", - projectName: "Client A", - team: "N/A", - teamLeader: "N/A", - startDate: "5", - startDateFrom: "5", - startDateTo: "5", - targetEndDate: "s", - client: "ss", - subsidiary: "ss", - }, -]; diff --git a/src/app/api/financialsummary/actions.ts b/src/app/api/financialsummary/actions.ts index bb5b82b..c1dda65 100644 --- a/src/app/api/financialsummary/actions.ts +++ b/src/app/api/financialsummary/actions.ts @@ -39,16 +39,28 @@ export interface FinancialSummaryByProjectResult { totalUninvoiced: number; } -export const searchFinancialSummaryByClient = cache(async (teamId: number) => { - - return serverFetchJson( - `${BASE_API_URL}/dashboard/searchFinancialSummaryByClient?teamId=${teamId}` - ); +export const searchFinancialSummaryByClient = cache(async (teamId?: number) => { + if (teamId === undefined) { + return serverFetchJson( + `${BASE_API_URL}/dashboard/searchFinancialSummaryByClient` + ); + } else { + return serverFetchJson( + `${BASE_API_URL}/dashboard/searchFinancialSummaryByClient?teamId=${teamId}` + ); + } + }); -export const searchFinancialSummaryByProject = cache(async (teamId: number) => { +export const searchFinancialSummaryByProject = cache(async (teamId?: number, customerId?:number) => { + if (teamId === undefined) { + return serverFetchJson( + `${BASE_API_URL}/dashboard/searchFinancialSummaryByProject` + ); + } else { + return serverFetchJson( + `${BASE_API_URL}/dashboard/searchFinancialSummaryByProject?teamId=${teamId}&customerId=${customerId}` + ); + } - return serverFetchJson( - `${BASE_API_URL}/dashboard/searchFinancialSummaryByProject?teamId=${teamId}` - ); }); diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index 73f41f6..77a4eda 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -13,6 +13,7 @@ import { I18nProvider } from "@/i18n"; const pathToLabelMap: { [path: string]: string } = { "": "Overview", "/home": "User Workspace", + "/dashboard": "Dashboard", "/projects": "Projects", "/projects/create": "Create Project", "/projects/createSub": "Sub Project", diff --git a/src/components/CustomDatagrid/CustomDatagrid.tsx b/src/components/CustomDatagrid/CustomDatagrid.tsx index c346874..83f395d 100644 --- a/src/components/CustomDatagrid/CustomDatagrid.tsx +++ b/src/components/CustomDatagrid/CustomDatagrid.tsx @@ -15,6 +15,7 @@ interface CustomDatagridProps { dataGridHeight?: number | string; [key: string]: any; checkboxSelection?: boolean; + onRowClick?: any; onRowSelectionModelChange?: ( newSelectionModel: GridRowSelectionModel, ) => void; @@ -34,6 +35,7 @@ const CustomDatagrid: React.FC = ({ checkboxSelection, // Destructure the new prop onRowSelectionModelChange, // Destructure the new prop selectionModel, + onRowClick, columnGroupingModel, pageSize, ...props @@ -195,6 +197,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + onRowClick={onRowClick} checkboxSelection={checkboxSelection} onRowSelectionModelChange={onRowSelectionModelChange} experimentalFeatures={{ columnGrouping: true }} @@ -226,6 +229,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + onRowClick={onRowClick} checkboxSelection={checkboxSelection} onRowSelectionModelChange={onRowSelectionModelChange} experimentalFeatures={{ columnGrouping: true }} @@ -257,6 +261,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + onRowClick={onRowClick} checkboxSelection={checkboxSelection} onRowSelectionModelChange={onRowSelectionModelChange} experimentalFeatures={{ columnGrouping: true }} @@ -289,6 +294,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + onRowClick={onRowClick} style={{ marginRight: 0 }} checkboxSelection={checkboxSelection} onRowSelectionModelChange={onRowSelectionModelChange} diff --git a/src/components/ProjectCashFlow/ProjectCashFlow.tsx b/src/components/ProjectCashFlow/ProjectCashFlow.tsx index ef81aff..4a78c62 100644 --- a/src/components/ProjectCashFlow/ProjectCashFlow.tsx +++ b/src/components/ProjectCashFlow/ProjectCashFlow.tsx @@ -19,17 +19,34 @@ import SearchBox, { Criterion } from "../SearchBox"; import ProgressByClientSearch from "@/components/ProgressByClientSearch"; import { Suspense } from "react"; import ProgressCashFlowSearch from "@/components/ProgressCashFlowSearch"; +import { fetchProjectsCashFlow} from "@/app/api/cashflow"; import { Input, Label } from "reactstrap"; +import { CashFlow } from "@/app/api/cashflow"; + +interface Props { + projects: CashFlow[]; +} +type SearchQuery = Partial>; +type SearchParamNames = keyof SearchQuery; const ProjectCashFlow: React.FC = () => { + const { t } = useTranslation("projects"); const todayDate = new Date(); const [selectionModel, setSelectionModel]: any[] = React.useState([]); + const [projectData, setProjectData]: any[] = React.useState([]); const [cashFlowYear, setCashFlowYear]: any[] = React.useState( todayDate.getFullYear(), ); const [anticipateCashFlowYear, setAnticipateCashFlowYear]: any[] = React.useState( todayDate.getFullYear(), ); + const fetchData = async () => { + const cashFlowProject = await fetchProjectsCashFlow(); + setProjectData(cashFlowProject) + } + useEffect(() => { + fetchData() + }, []); const columns = [ { id: "projectCode", @@ -50,8 +67,8 @@ const ProjectCashFlow: React.FC = () => { flex: 1, }, { - id: "teamLeader", - field: "teamLeader", + id: "teamLead", + field: "teamLead", headerName: "Team Leader", flex: 1, }, @@ -530,8 +547,6 @@ const ProjectCashFlow: React.FC = () => { remarks: "Monthly Manpower Expenditure", }, ]; - - const [projectData, setProjectData]: any[] = React.useState(rows); const [ledgerData, setLedgerData]: any[] = React.useState(ledgerRows); const handleSelectionChange = (newSelectionModel: GridRowSelectionModel) => { const selectedRowsData = projectData.filter((row: any) => @@ -540,11 +555,31 @@ const ProjectCashFlow: React.FC = () => { console.log(selectedRowsData); }; + const searchCriteria: Criterion[] = useMemo( + () => [ + { label: "Project Code", paramName: "projectCode", type: "text" }, + { label: "Project Name", paramName: "projectName", type: "text" }, + { + label: "Start Date From", + label2: "Start Date To", + paramName: "startDateFrom", + type: "dateRange", + }, + ], + [t], + ); + return ( <> - }> + {/* }> - + */} + { + console.log(query); + }} + /> = ({ : "border-green-200 border-solid"; const selectedBackgroundColor = ClickedIndex === Index ? "rgb(235 235 235)" : "rgb(255 255 255)"; - console.log(ClickedIndex); - console.log(Index); return ( = ({ Total Fees
- {TotalFees.toLocaleString()} + {TotalFees.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
Total Budget
- {TotalBudget.toLocaleString()} + {TotalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
Total Cumulative Expenditure
- {TotalCumulative.toLocaleString()} + {TotalCumulative.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
Total Invoiced Amount
- {TotalInvoicedAmount.toLocaleString()} + {TotalInvoicedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
Total Received Amount
- {TotalReceivedAmount.toLocaleString()} + {TotalReceivedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
diff --git a/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx b/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx index eafaba4..c803b59 100644 --- a/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx +++ b/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx @@ -21,6 +21,7 @@ import { Suspense } from "react"; import { fetchFinancialSummaryCard } from "@/app/api/financialsummary"; import { searchFinancialSummaryByClient,searchFinancialSummaryByProject } from "@/app/api/financialsummary/actions"; import ProjectFinancialCard from "./ProjectFinancialCard"; +import VisibilityIcon from '@mui/icons-material/Visibility'; const ProjectFinancialSummary: React.FC = () => { const [SearchCriteria, setSearchCriteria] = React.useState({}); @@ -33,16 +34,16 @@ const ProjectFinancialSummary: React.FC = () => { const financialSummaryCard = await fetchFinancialSummaryCard(); setProjectFinancialData(financialSummaryCard) } - const fetchTableData = async (teamId:any) => { + const fetchTableData = async (teamId?:any) => { const financialSummaryByClient = await searchFinancialSummaryByClient(teamId); - const financialSummaryByProject = await searchFinancialSummaryByProject(teamId); + console.log(financialSummaryByClient) - console.log(financialSummaryByProject) + // console.log(financialSummaryByProject) setClientFinancialRows(financialSummaryByClient) - setProjectFinancialRows(financialSummaryByProject) } useEffect(() => { fetchData() + fetchTableData(undefined) }, []); const rows0 = [{id: 1,projectCode:"M1201",projectName:"Consultancy Project C", team:"XXX", teamLeader:"XXX", startDate:"01/08/2022", targetEndDate: "01/05/2024", client:"Client A", subsidiary:"N/A"}, @@ -73,16 +74,9 @@ const ProjectFinancialSummary: React.FC = () => { const [selectedTeamData, setSelectedTeamData]: any[] = React.useState(rows0); - const handleCardClick = (r: any) => { + const handleCardClick = (r: any, index:any) => { fetchTableData(r.teamId) - // setIsCardClickedIndex(r); - // if (r === 0) { - // setSelectedTeamData(rows0); - // } else if (r === 1) { - // setSelectedTeamData(rows1); - // } else if (r === 2) { - // setSelectedTeamData(rows2); - // } + setIsCardClickedIndex(index) }; const columns = [ @@ -380,6 +374,16 @@ const columns2 = [ ); console.log(selectedRowsData); }; + + const fetchProjectTableData = async (teamId?:any,customerId?:any) => { + const financialSummaryByProject = await searchFinancialSummaryByProject(teamId,customerId); + setProjectFinancialRows(financialSummaryByProject) + } + + const handleRowClick = (params:any) => { + console.log(params.row.teamId); + fetchProjectTableData(params.row.teamId,params.row.cid) + }; return ( @@ -387,7 +391,7 @@ const columns2 = [
{projectFinancialData.map((record:any, index:any) => ( -
handleCardClick(record)}> +
handleCardClick(record,index)}>
))} @@ -397,7 +401,7 @@ const columns2 = [
{/* */} - +