wayne.lee
/
tsms
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 2 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
504 Commits
12 Branches
5.0 MiB
 
 
Struktur: a1d55b3c83
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „a1d55b3c83“
${ noResults }
tsms/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx

598 Zeilen
23 KiB
Originalformat Blame Verlauf 

  1. "use client";

  2. import * as React from "react";

  3. import Grid from "@mui/material/Grid";

  4. import { useState, useEffect, useMemo } from "react";

  5. import Paper from "@mui/material/Paper";

  6. import { TFunction } from "i18next";

  7. import { useTranslation } from "react-i18next";

  8. import { Card, CardHeader } from "@mui/material";

  9. import CustomSearchForm from "../CustomSearchForm/CustomSearchForm";

  10. import CustomDatagrid from "../CustomDatagrid/CustomDatagrid";

  11. import ReactApexChart from "react-apexcharts";

  12. import { ApexOptions } from "apexcharts";

  13. import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";

  14. import ReportProblemIcon from "@mui/icons-material/ReportProblem";

  15. import dynamic from "next/dynamic";

  16. import "../../app/global.css";

  17. import { AnyARecord, AnyCnameRecord } from "dns";

  18. import SearchBox, { Criterion } from "../SearchBox";

  19. import ProgressByClientSearch from "@/components/ProgressByClientSearch";

  20. import { Suspense } from "react";

  21. import { fetchFinancialSummaryCard } from "@/app/api/financialsummary";

  22. import { exportFinancialSummaryByClientExcel, exportFinancialSummaryByProjectExcel, FinancialSummaryByProjectResult, FinancialSummaryByClientResult, searchFinancialSummaryByClient,searchFinancialSummaryByProject } from "@/app/api/financialsummary/actions";

  23. import ProjectFinancialCard from "./ProjectFinancialCard";

  24. import VisibilityIcon from '@mui/icons-material/Visibility';

  25. import { downloadFile } from "@/app/utils/commonUtil";

  26. 

  27. type SearchProjectQuery = Partial<Omit<FinancialSummaryByProjectResult, "id">>;

  28. type SearchClientQuery = Partial<Omit<FinancialSummaryByClientResult, "id">>;

  29. type SearchProjectParamNames = keyof SearchProjectQuery;

  30. type SearchClientParamNames = keyof SearchClientQuery;

  31. 

  32. const ProjectFinancialSummary: React.FC = () => {

  33.   const [SearchCriteria, setSearchCriteria] = React.useState({});

  34.   const { t } = useTranslation("dashboard");

  35.   const [selectionModel, setSelectionModel]: any[] = React.useState([]);

  36.   const [projectFinancialData, setProjectFinancialData]: any[] = React.useState([]);

  37.   const [clientFinancialRows, setClientFinancialRows]: any[] = React.useState([]);

  38.   const [projectFinancialRows, setProjectFinancialRows]: any[] = React.useState([]);

  39.   const [filteredProjectResult, setFilteredProjectResult]:any[] = useState([]);

  40.   const [filteredClientResult, setFilteredClientResult]:any[] = useState([]);

  41. 

  42.   const projectSearchCriteria: Criterion<SearchProjectParamNames>[] = useMemo(

  43.     () => [

  44.       { label: "Project Code", paramName: "projectCode", type: "text" },

  45.       { label: "Project Name", paramName: "projectName", type: "text" },

  46.     ],

  47.     [t],

  48.   );

  49.   const clientSearchCriteria: Criterion<SearchClientParamNames>[] = useMemo(

  50.     () => [

  51.       { label: "Client Code", paramName: "customerCode", type: "text" },

  52.       { label: "Client Name", paramName: "customerName", type: "text" },

  53.     ],

  54.     [t],

  55.   );

  56. 

  57.   const fetchData = async () => {

  58.     const financialSummaryCard = await fetchFinancialSummaryCard();

  59.     setProjectFinancialData(financialSummaryCard)

  60.   }

  61.   const fetchTableData = async (teamId?:any) => {

  62.     const financialSummaryByClient = await searchFinancialSummaryByClient(teamId);

  63.     

  64.     console.log(financialSummaryByClient)

  65.     // console.log(financialSummaryByProject)

  66.     setClientFinancialRows(financialSummaryByClient)

  67.     setFilteredClientResult(financialSummaryByClient)

  68.   }

  69.   useEffect(() => {

  70.     fetchData()

  71.     // fetchTableData(undefined)

  72.    }, []);

  73. 

  74.   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"},

  75.   {id: 2,projectCode:"M1321",projectName:"Consultancy Project CCC", team:"XXX", teamLeader:"XXX", startDate:"01/08/2022", targetEndDate: "20/01/2024", client:"Client E", subsidiary:"Subsidiary B"},

  76.   {id: 3,projectCode:"M1001",projectName:"Consultancy Project A", team:"YYY", teamLeader:"YYY", startDate:"01/07/2022", targetEndDate: "01/04/2024", client:"Client B", subsidiary:"N/A"},

  77.   {id: 4,projectCode:"M1301",projectName:"Consultancy Project AAAA", team:"YYY", teamLeader:"YYY", startDate:"01/09/2022", targetEndDate: "20/02/2024", client:"Client C", subsidiary:"Subsidiary A"},

  78.   {id: 5,projectCode:"M1354",projectName:"Consultancy Project BBB", team:"YYY", teamLeader:"YYY", startDate:"01/02/2023", targetEndDate: "31/01/2024", client:"Client D", subsidiary:"Subsidiary C"}

  79.   ]

  80. 

  81.   const rows1 = [{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"},

  82.   {id: 2,projectCode:"M1321",projectName:"Consultancy Project CCC", team:"XXX", teamLeader:"XXX", startDate:"01/08/2022", targetEndDate: "20/01/2024", client:"Client E", subsidiary:"Subsidiary B"},

  83.   ]

  84. 

  85.   const rows2 = [{id: 3,projectCode:"M1001",projectName:"Consultancy Project A", team:"YYY", teamLeader:"YYY", startDate:"01/07/2022", targetEndDate: "01/04/2024", client:"Client B", subsidiary:"N/A"},

  86.   {id: 4,projectCode:"M1301",projectName:"Consultancy Project AAAA", team:"YYY", teamLeader:"YYY", startDate:"01/09/2022", targetEndDate: "20/02/2024", client:"Client C", subsidiary:"Subsidiary A"},

  87.   {id: 5,projectCode:"M1354",projectName:"Consultancy Project BBB", team:"YYY", teamLeader:"YYY", startDate:"01/02/2023", targetEndDate: "31/01/2024", client:"Client D", subsidiary:"Subsidiary C"}

  88.   ]

  89. 

  90.   // const projectFinancialRows = [{id: 1,projectCode:"M1354",projectName:"Consultanct Project BBB",clientName:"Client D",cashFlowStatus:"Positive",cpi:"1.25", totalFees:"500,000.00", totalBudget:"400,000.00", totalCumulativeExpenditure:"280,000.00", totalInvoicedAmount: "350,000.00", totalUnInvoicedAmount:"150,000.00", totalReceivedAmount:"350,000.00"}

  91.   // ]

  92. 

  93.   // const clientFinancialRows =[{id: 1,clientCode:"Cust-02",clientName:"Client B",totalProjectInvolved:"1",cashFlowStatus:"Positive",cpi:"1.25", totalFees:"500,000.00", totalBudget:"400,000.00", totalCumulativeExpenditure:"280,000.00", totalInvoicedAmount: "350,000.00", totalUnInvoicedAmount:"150,000.00", totalReceivedAmount:"350,000.00"},

  94.   // {id: 2,clientCode:"Cust-03",clientName:"Client C",totalProjectInvolved:"1",cashFlowStatus:"Positive",cpi:"1.25", totalFees:"500,000.00", totalBudget:"400,000.00", totalCumulativeExpenditure:"280,000.00", totalInvoicedAmount: "350,000.00", totalUnInvoicedAmount:"150,000.00", totalReceivedAmount:"350,000.00"},

  95.   // {id: 3,clientCode:"Cust-04",clientName:"Client D",totalProjectInvolved:"4",cashFlowStatus:"Positive",cpi:"1.25", totalFees:"500,000.00", totalBudget:"400,000.00", totalCumulativeExpenditure:"280,000.00", totalInvoicedAmount: "350,000.00", totalUnInvoicedAmount:"150,000.00", totalReceivedAmount:"350,000.00"}

  96.   // ]

  97. 

  98.   const [isCardClickedIndex, setIsCardClickedIndex] = React.useState(0);

  99. 

  100.   const [selectedTeamData, setSelectedTeamData]: any[] = React.useState(rows0);

  101. 

  102.   const handleCardClick = (r: any, index:any) => {

  103.     fetchTableData(r.teamId)

  104.     fetchProjectTableData(r.teamId)

  105.     setIsCardClickedIndex(index)

  106.   };

  107. 

  108.   const columns = [

  109.     {

  110.       id: 'customerCode',

  111.       field: 'customerCode',

  112.       headerName: "Client Code",

  113.       minWidth:50

  114.     },

  115.     {

  116.       id: 'customerName',

  117.       field: 'customerName',

  118.       headerName: "Client Name",

  119.       minWidth:80

  120.     },

  121.     {

  122.       id: 'projectNo',

  123.       field: 'projectNo',

  124.       headerName: "Total Project Involved",

  125.       minWidth:80

  126.     },

  127.     {

  128.       id: 'cashFlowStatus',

  129.       field: 'cashFlowStatus',

  130.       headerName: "Cash Flow Status",

  131.       minWidth:100,

  132.       renderCell: (params:any) => {

  133.         console.log(params.row)

  134.         if (params.row.cashFlowStatus === "Positive") {

  135.           return (

  136.             <span className="text-lime-500">{params.row.cashFlowStatus}</span>

  137.           )

  138.         } else if (params.row.cashFlowStatus === "Negative") {

  139.           return (

  140.             <span className="text-red-500">{params.row.cashFlowStatus}</span>

  141.           )

  142.         }

  143.       },

  144.   },

  145.   {

  146.       id: 'cpi',

  147.       field: 'cpi',

  148.       headerName: "CPI",

  149.       minWidth:50,

  150.       renderCell: (params:any) => {

  151.         if (params.row.cpi >= 1) {

  152.           return (

  153.             <span className="text-lime-500">{params.row.cpi}</span>

  154.           )

  155.         } else if (params.row.cpi < 1) {

  156.           return (

  157.             <span className="text-red-500">{params.row.cpi}</span>

  158.           )

  159.         }

  160.       },

  161.   },

  162.   {

  163.     id: 'projectedCashFlowStatus',

  164.     field: 'projectedCashFlowStatus',

  165.     headerName: "Projected Cash Flow Status",

  166.     minWidth:100,

  167.     renderCell: (params:any) => {

  168.       if (params.row.projectedCashFlowStatus === "Positive") {

  169.         return (

  170.           <span className="text-lime-500">{params.row.projectedCashFlowStatus}</span>

  171.         )

  172.       } else if (params.row.projectedCashFlowStatus === "Negative") {

  173.         return (

  174.           <span className="text-red-500">{params.row.projectedCashFlowStatus}</span>

  175.         )

  176.       }

  177.     },

  178.   },

  179.   {

  180.     id: 'projectedCpi',

  181.     field: 'projectedCpi',

  182.     headerName: "Projected CPI",

  183.     minWidth:50,

  184.     renderCell: (params:any) => {

  185.       if (params.row.projectedCpi >= 1) {

  186.         return (

  187.           <span className="text-lime-500">{params.row.projectedCpi}</span>

  188.         )

  189.       } else if (params.row.projectedCpi < 1) {

  190.         return (

  191.           <span className="text-red-500">{params.row.projectedCpi}</span>

  192.         )

  193.       }

  194.     },

  195.   },

  196.   {

  197.     id: 'totalFee',

  198.     field: 'totalFee',

  199.     headerName: "Total Fees (HKD)",

  200.     minWidth:50,

  201.     renderCell: (params:any) => {

  202.         return (

  203.           <span>${params.row.totalFee.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  204.         )

  205.     },

  206.   },

  207.   {

  208.     id: 'totalBudget',

  209.     field: 'totalBudget',

  210.     headerName: "Total Budget (HKD)",

  211.     minWidth:50,

  212.     renderCell: (params:any) => {

  213.       return (

  214.         <span>${params.row.totalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  215.       )

  216.   },

  217.   },

  218.   {

  219.     id: 'cumulativeExpenditure',

  220.     field: 'cumulativeExpenditure',

  221.     headerName: "Total Cumulative Expenditure (HKD)",

  222.     minWidth:280,

  223.     renderCell: (params:any) => {

  224.       return (

  225.         <span>${params.row.cumulativeExpenditure.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  226.       )

  227.     },

  228.   },

  229.   {

  230.     id: 'totalInvoiced',

  231.     field: 'totalInvoiced',

  232.     headerName: "Total Invoiced Amount (HKD)",

  233.     minWidth:250,

  234.     renderCell: (params:any) => {

  235.       return (

  236.         <span>${params.row.totalInvoiced.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  237.       )

  238.     },

  239.   },

  240.   {

  241.     id: 'totalUnInvoiced',

  242.     field: 'totalUnInvoiced',

  243.     headerName: "Total Un-invoiced Amount (HKD)",

  244.     minWidth:250,

  245.     renderCell: (params:any) => {

  246.       return (

  247.         <span>${params.row.totalUninvoiced.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  248.       )

  249.     },

  250.   },

  251.   {

  252.     id: 'totalReceived',

  253.     field: 'totalReceived',

  254.     headerName: "Total Received Amount (HKD)",

  255.     minWidth:250,

  256.     renderCell: (params:any) => {

  257.       return (

  258.         <span>${params.row.totalReceived.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  259.       )

  260.     },

  261.   },

  262. 

  263.   //   {

  264.   //     id: 'projectCode',

  265.   //     field: 'projectCode',

  266.   //     headerName: "Project Code",

  267.   //     flex: 1,

  268.   // },

  269.   // {

  270.   //     id: 'projectName',

  271.   //     field: 'projectName',

  272.   //     headerName: "Project Name",

  273.   //     flex: 1,

  274.   // },

  275.   // {

  276.   //   id: 'team',

  277.   //   field: 'team',

  278.   //   headerName: "Team",

  279.   //   flex: 1,

  280.   // },

  281.   // {

  282.   //   id: 'teamLeader',

  283.   //   field: 'teamLeader',

  284.   //   headerName: "Team Leader",

  285.   //   flex: 1,

  286.   // },

  287.   // {

  288.   //   id: 'startDate',

  289.   //   field: 'startDate',

  290.   //   headerName: "Start Date",

  291.   //   flex: 1,

  292.   // },

  293.   // {

  294.   //   id: 'targetEndDate',

  295.   //   field: 'targetEndDate',

  296.   //   headerName: "Target End Date",

  297.   //   flex: 1,

  298.   // },

  299.   // {

  300.   //   id: 'client',

  301.   //   field: 'client',

  302.   //   headerName: "Client",

  303.   //   flex: 1,

  304.   // },

  305.   // {

  306.   //   id: 'subsidiary',

  307.   //   field: 'subsidiary',

  308.   //   headerName: "Subsidiary",

  309.   //   flex: 1,

  310.   // },

  311. ];

  312. 

  313. const columns2 = [

  314.   {

  315.     id: 'projectCode',

  316.     field: 'projectCode',

  317.     headerName: "Project Code",

  318.     minWidth:50,

  319.   },

  320.   {

  321.     id: 'projectName',

  322.     field: 'projectName',

  323.     headerName: "Project Name",

  324.     minWidth:50,

  325.   },

  326.   {

  327.     id: 'customerName',

  328.     field: 'customerName',

  329.     headerName: "Client Name",

  330.     minWidth:50,

  331.   },

  332.   {

  333.     id: 'subsidiaryName',

  334.     field: 'subsidiaryName',

  335.     headerName: "Subsidiary",

  336.     minWidth:50,

  337.   },

  338.   {

  339.     id: 'cashFlowStatus',

  340.     field: 'cashFlowStatus',

  341.     headerName: "Cash Flow Status",

  342.     minWidth:80,

  343.     renderCell: (params:any) => {

  344.       if (params.row.cashFlowStatus === "Positive") {

  345.         return (

  346.           <span className="text-lime-500">{params.row.cashFlowStatus}</span>

  347.         )

  348.       } else if (params.row.cashFlowStatus === "Negative") {

  349.         return (

  350.           <span className="text-red-500">{params.row.cashFlowStatus}</span>

  351.         )

  352.       }

  353.     },

  354.   },

  355.   {

  356.     id: "cpi",

  357.     field: "cpi",

  358.     headerName: "CPI",

  359.     minWidth:50,

  360.     renderCell: (params: any) => {

  361.       if (params.row.cpi >= 1) {

  362.         return <span className="text-lime-500">{params.row.cpi}</span>;

  363.       } else if (params.row.cpi < 1) {

  364.         return <span className="text-red-500">{params.row.cpi}</span>;

  365.       }

  366.     },

  367.   },

  368.   {

  369.     id: 'projectedCashFlowStatus',

  370.     field: 'projectedCashFlowStatus',

  371.     headerName: "Projected Cash Flow Status",

  372.     minWidth:100,

  373.     renderCell: (params:any) => {

  374.       if (params.row.projectedCashFlowStatus === "Positive") {

  375.         return (

  376.           <span className="text-lime-500">{params.row.projectedCashFlowStatus}</span>

  377.         )

  378.       } else if (params.row.projectedCashFlowStatus === "Negative") {

  379.         return (

  380.           <span className="text-red-500">{params.row.projectedCashFlowStatus}</span>

  381.         )

  382.       }

  383.     },

  384.   },

  385.   {

  386.     id: 'projectedCpi',

  387.     field: 'projectedCpi',

  388.     headerName: "Projected CPI",

  389.     minWidth:50,

  390.     renderCell: (params:any) => {

  391.       if (params.row.projectedCpi >= 1) {

  392.         return (

  393.           <span className="text-lime-500">{params.row.projectedCpi}</span>

  394.         )

  395.       } else if (params.row.projectedCpi < 1) {

  396.         return (

  397.           <span className="text-red-500">{params.row.projectedCpi}</span>

  398.         )

  399.       }

  400.     },

  401.   },

  402.   {

  403.     id: 'totalFees',

  404.     field: 'totalFees',

  405.     headerName: "Total Fees (HKD)",

  406.     minWidth:50,

  407.     renderCell: (params:any) => {

  408.         return (

  409.           <span>${params.row.totalFee.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  410.         )

  411.     },

  412.   },

  413.   {

  414.     id: 'totalBudget',

  415.     field: 'totalBudget',

  416.     headerName: "Total Budget (HKD)",

  417.     minWidth:50,

  418.     renderCell: (params:any) => {

  419.       return (

  420.         <span>${params.row.totalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  421.       )

  422.   },

  423.   },

  424.   {

  425.     id: 'totalCumulativeExpenditure',

  426.     field: 'totalCumulativeExpenditure',

  427.     headerName: "Total Cumulative Expenditure (HKD)",

  428.     minWidth:250,

  429.     renderCell: (params:any) => {

  430.       return (

  431.         <span>${params.row.cumulativeExpenditure.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  432.       )

  433.     },

  434.   },

  435.   {

  436.     id: 'totalInvoicedAmount',

  437.     field: 'totalInvoicedAmount',

  438.     headerName: "Total Invoiced Amount (HKD)",

  439.     minWidth:250,

  440.     renderCell: (params:any) => {

  441.       return (

  442.         <span>${params.row.totalInvoiced.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  443.       )

  444.     },

  445.   },

  446.   {

  447.     id: 'totalUnInvoicedAmount',

  448.     field: 'totalUnInvoicedAmount',

  449.     headerName: "Total Un-invoiced Amount (HKD)",

  450.     minWidth:250,

  451.     renderCell: (params:any) => {

  452.       return (

  453.         <span>${params.row.totalUninvoiced.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  454.       )

  455.     },

  456.   },

  457.   {

  458.     id: 'totalReceivedAmount',

  459.     field: 'totalReceivedAmount',

  460.     headerName: "Total Received Amount (HKD)",

  461.     minWidth:250,

  462.     renderCell: (params:any) => {

  463.       return (

  464.         <span>${params.row.totalReceived.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>

  465.       )

  466.     },

  467.   },

  468. ];

  469. 

  470.   const handleSelectionChange = (newSelectionModel: GridRowSelectionModel) => {

  471.     const selectedRowsData = selectedTeamData.filter((row: any) =>

  472.       newSelectionModel.includes(row.id),

  473.     );

  474.     console.log(selectedRowsData);

  475.   };

  476.   

  477.   const fetchProjectTableData = async (teamId?:any,customerId?:any) => {

  478.     const financialSummaryByProject = await searchFinancialSummaryByProject(teamId);

  479.     setProjectFinancialRows(financialSummaryByProject)

  480.     setFilteredProjectResult(financialSummaryByProject)

  481.   }

  482. 

  483.   const handleRowClick = (params:any) => {

  484.     console.log(params.row.teamId);

  485.     // fetchProjectTableData(params.row.teamId,params.row.cid)

  486.   };

  487. 

  488.   const handleExportByClient = async () => {

  489.     const response = await exportFinancialSummaryByClientExcel({financialSummaryByClients: clientFinancialRows})

  490.     if (response) {

  491.         downloadFile(new Uint8Array(response.blobValue), response.filename!!)

  492.     }

  493.     console.log(clientFinancialRows)

  494.   };

  495. 

  496.   const handleExportByProject = async () => {

  497.     const response = await exportFinancialSummaryByProjectExcel({financialSummaryByProjects: projectFinancialRows})

  498.     if (response) {

  499.         downloadFile(new Uint8Array(response.blobValue), response.filename!!)

  500.     }

  501.     console.log(projectFinancialRows)

  502.   };

  503. 

  504.   return (

  505.       <Grid item sm>

  506.         <Card>

  507.           <CardHeader className="text-slate-500" title="Active Project Financial Status"/>

  508.           <div className="ml-10 mr-10" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'start'}}>

  509.             {projectFinancialData.map((record:any, index:any) => (

  510.               <div className="hover:cursor-pointer ml-4 mt-5 mb-4 inline-block" key={index} onClick={(r) => handleCardClick(record,index)}>

  511.                     <ProjectFinancialCard Title={record.teamName} TotalActiveProjectNumber={record.projectNo} TotalFees={record.totalFee} TotalBudget={record.totalBudget} TotalCumulative={record.cumulativeExpenditure ?? 0} TotalInvoicedAmount={record.totalInvoiced ?? 0} TotalUnInvoicedAmount={record.unInvoiced ?? 0} TotalReceivedAmount={record.totalReceived ?? 0} CashFlowStatus={record.cashFlowStatus ?? "Negative"} CostPerformanceIndex={record.cpi ?? 0} ProjectedCashFlowStatus={record.projectedCashFlowStatus ?? "Negative"} ProjectedCPI={record.projectedCpi ?? 0} ClickedIndex={isCardClickedIndex} Index={index}/>

  512.               </div>

  513.             ))}

  514.           </div>

  515.           <hr></hr>

  516.           <div className="ml-10 text-base"><strong>-Formula-</strong></div>

  517.           <div className="ml-10 text-sm"><strong>CPI:</strong> Invoiced Amount / Cumulative Expenditure</div>

  518.           <div className="ml-10 text-sm"><strong>Cash Flow Status: </strong>{`Positive when CPI >= 1`}</div>

  519.           <div className="ml-10 text-sm"><strong>Projected CPI:</strong> Project Fee / Cumulative Expenditure</div>

  520.           <div className="ml-10 text-sm mb-5"><strong>Cash Flow Status: </strong>{`Positive when Projected CPI >= 1`}</div>

  521.         </Card>

  522.         <Card className="mt-5">

  523.           <div style={{display:"inline-block"}}>

  524.             <CardHeader className="text-slate-500" title="Financial Status (by Project)"/>

  525.           </div>

  526.           <div style={{display:"inline-block"}}>

  527.             {projectFinancialRows.length > 0 && (

  528.               <button onClick={handleExportByProject} className="hover:cursor-pointer hover:bg-violet-50 text-base bg-transparent border-violet-500 text-violet-500 border-solid rounded-md w-36">

  529.                   Export Excel

  530.               </button>

  531.             )}

  532.           </div>

  533.           {projectFinancialRows.length > 0 && (

  534.               <SearchBox

  535.                   criteria={projectSearchCriteria}

  536.                   onSearch={(query) => {

  537.                     setFilteredProjectResult(

  538.                       projectFinancialRows.filter(

  539.                         (cp:any) =>

  540.                           cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) &&

  541.                           cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) 

  542.                       ),

  543.                     );

  544.                   }}

  545.               />

  546.             )}

  547.           <div style={{display:"inline-block",width:"99%",marginLeft:10}}>

  548.             <CustomDatagrid rows={filteredProjectResult} columns={columns2} columnWidth={200} dataGridHeight={300}/>

  549.           </div>

  550.           {/* <hr></hr>

  551.           <div className="ml-10 text-base"><strong>-Formula-</strong></div>

  552.           <div className="ml-10 text-sm"><strong>CPI:</strong> Invoiced Amount / Cumulative Expenditure</div>

  553.           <div className="ml-10 text-sm"><strong>Cash Flow Status: </strong>{`Positive when CPI >= 1`}</div>

  554.           <div className="ml-10 text-sm"><strong>Projected CPI:</strong> Project Fee / Cumulative Expenditure</div>

  555.           <div className="ml-10 text-sm mb-5"><strong>Cash Flow Status: </strong>{`Positive when Projected CPI >= 1`}</div> */}

  556.         </Card>

  557.         <Card className="mt-5">

  558.           <div style={{display:"inline-block"}}>

  559.             <CardHeader className="text-slate-500" title="Financial Status (by Client)"/>

  560.           </div>

  561.           <div style={{display:"inline-block"}}>

  562.             {clientFinancialRows.length > 0 && (

  563.               <button onClick={handleExportByClient} className="hover:cursor-pointer hover:bg-violet-50 text-base bg-transparent border-violet-500 text-violet-500 border-solid rounded-md w-36">

  564.                   Export Excel

  565.               </button>

  566.             )}

  567.           </div>

  568.           {clientFinancialRows.length > 0 && (

  569.               <SearchBox

  570.                   criteria={clientSearchCriteria}

  571.                   onSearch={(query) => {

  572.                     setFilteredClientResult(

  573.                       clientFinancialRows.filter(

  574.                         (cp:any) =>

  575.                           cp.customerCode.toLowerCase().includes(query.customerCode.toLowerCase()) &&

  576.                           cp.customerName.toLowerCase().includes(query.customerName.toLowerCase()) 

  577.                       ),

  578.                     );

  579.                   }}

  580.               />

  581.             )}

  582.           <div style={{display:"inline-block",width:"99%",marginLeft:10}}>

  583.             {/* <CustomDatagrid rows={clientFinancialRows} columns={columns} columnWidth={200} dataGridHeight={300} checkboxSelection={true} onRowSelectionModelChange={handleSelectionChange} selectionModel={selectionModel}/> */}

  584.             <CustomDatagrid onRowClick={handleRowClick} rows={filteredClientResult} columns={columns} columnWidth={200} dataGridHeight={300}/>

  585.           </div>

  586.           {/* <hr></hr>

  587.           <div className="ml-10 text-base"><strong>-Formula-</strong></div>

  588.           <div className="ml-10 text-sm"><strong>CPI:</strong> Invoiced Amount / Cumulative Expenditure</div>

  589.           <div className="ml-10 text-sm"><strong>Cash Flow Status: </strong>{`Positive when CPI >= 1`}</div>

  590.           <div className="ml-10 text-sm"><strong>Projected CPI:</strong> Project Fee / Cumulative Expenditure</div>

  591.           <div className="ml-10 text-sm mb-5"><strong>Cash Flow Status: </strong>{`Positive when Projected CPI >= 1`}</div> */}

  592.         </Card>

  593.       </Grid>

  594.   );

  595. };

  596. 

  597. export default ProjectFinancialSummary;