wayne.lee
/
tsms
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 2 Wiki Actividad
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
350 Commits
12 Ramas
5.0 MiB
 
 
Árbol: 8c374579aa
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '8c374579aa'
${ noResults }
tsms/src/components/ProjectResourceSummary/ProjectResourceSummary.tsx

732 líneas
33 KiB
Original Blame Histórico 

  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 { DataGrid, 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 { getPossibleInstrumentationHookFilenames } from "next/dist/build/utils";

  22. import Table from '@mui/material/Table';

  23. import TableBody from '@mui/material/TableBody';

  24. import TableCell from '@mui/material/TableCell';

  25. import TableContainer from '@mui/material/TableContainer';

  26. import TableHead from '@mui/material/TableHead';

  27. import TableRow from '@mui/material/TableRow';

  28. import Collapse from '@mui/material/Collapse';

  29. import IconButton from '@mui/material/IconButton';

  30. import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

  31. import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

  32. import Box from '@mui/material/Box';

  33. import Typography from '@mui/material/Typography';

  34. import { useSearchParams } from 'next/navigation';

  35. import {fetchResourceSummaryDetailResult} from "@/app/api/resourcesummary/actions";

  36. 

  37. 

  38. const ProjectResourceSummary: React.FC = () => {

  39.   const searchParams = useSearchParams();

  40.   const projectId = searchParams.get('projectId');

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

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

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

  44.   const [projectName, setProjectName]:any = React.useState("NA");

  45.   const [projectFee, setProjectFee]:any = React.useState(0);

  46.   const [status, setStatus]:any = React.useState("NA");

  47.   const [plannedResources, setPlannedResources]:any = React.useState(0);

  48.   const [actualResourcesSpent, setActualResourcesSpent]:any = React.useState(0);

  49.   const [remainingResources, setRemainingResources]:any = React.useState(0);

  50.   const [dataList, setDataList]:any = React.useState();

  51.   const [rows,setRows]:any[] = React.useState([]);

  52. 

  53.   //[subStage, subTaskCount, subTotalPlanned, subTotalActual, subG1Planned, subG1Actual, subG2Planned, subG2Actual, subG3Planned, subG3Actual, subG4Planned, subG4Actual, subG5Planned, subG5Actual]:any[]

  54.   function createData([stage, taskCount, totalPlanned, totalActual, g1Planned, g1Actual, g2Planned, g2Actual, g3Planned, g3Actual, g4Planned, g4Actual, g5Planned, g5Actual]: any[], task:any[]) {

  55.     return {

  56.       stage,

  57.       taskCount,

  58.       g1Planned,

  59.       g1Actual,

  60.       g2Planned,

  61.       g2Actual,

  62.       g3Planned,

  63.       g3Actual,

  64.       g4Planned,

  65.       g4Actual,

  66.       g5Planned,

  67.       g5Actual,

  68.       totalPlanned,

  69.       totalActual,

  70.       task:task

  71.       // subStage,

  72.       // subTaskCount, 

  73.       // subTotalPlanned, 

  74.       // subTotalActual, 

  75.       // subG1Planned, 

  76.       // subG1Actual, 

  77.       // subG2Planned, 

  78.       // subG2Actual, 

  79.       // subG3Planned, 

  80.       // subG3Actual, 

  81.       // subG4Planned, 

  82.       // subG4Actual, 

  83.       // subG5Planned, 

  84.       // subG5Actual

  85.     }

  86.   }

  87. 

  88.   const fetchData = async () => {

  89.     var intProjectId = 0

  90.     if (projectId !== null) {

  91.       intProjectId = parseInt(projectId);

  92.     }

  93.     if (intProjectId !== 0) {

  94.     const result = await fetchResourceSummaryDetailResult(intProjectId);

  95.     setProjectName(result[0].summaryInformation[0].projectCodeAndName)

  96.     setProjectFee(result[0].summaryInformation[0].totalFee)

  97.     setStatus(result[0].summaryInformation[0].status)

  98.     setPlannedResources(result[0].summaryInformation[0].plannedResources)

  99.     setActualResourcesSpent(result[0].summaryInformation[0].resourcesSpent)

  100.     setRemainingResources(result[0].summaryInformation[0].remainingResources)

  101.     console.log(result);

  102.     const mainStageResult = result[0].summaryMainStage

  103.     const subStageResult = result[0].summarySubStage

  104.     const mainStageFullList = []

  105.     const subStageFullList = []

  106.     var tgID = mainStageResult[0].id

  107.     var tID = subStageResult[0].id

  108.     var subTgId = subStageResult[0].tgId

  109.     var firstTg = true

  110.     var firstT = true

  111.     var mainStageList = []

  112.     var subStageList = []

  113.     var subStageSecondLayerList = []

  114.     var arrayNumber = 0

  115.     for (var i = 0; i < subStageResult.length ; i++) {

  116.       if (subStageResult[i].id !== tID) {

  117.         subStageSecondLayerList.push(subStageList)

  118.         if (subStageResult[i].tgId !== subTgId) {

  119.           subStageFullList.push(subStageSecondLayerList)

  120.           subStageSecondLayerList = []

  121.           subTgId = subStageResult[i].tgId

  122.         }

  123.         tID = subStageResult[i].id

  124.         firstT = true

  125.         subStageList = []

  126.       }

  127.       if (firstT === true) {

  128.         subStageList.push(subStageResult[i].name)

  129.         subStageList.push(subStageResult[i].taskCount)

  130.         subStageList.push(subStageResult[i].totalPlannedResource)

  131.         subStageList.push(subStageResult[i].totalActualResourcesSpent)

  132.         firstT = false

  133.       }

  134.       if (subStageResult[i].id === tID) {

  135.         subStageList.push(subStageResult[i].plannedResources)

  136.         subStageList.push(subStageResult[i].actualResourcesSpent)

  137.       }

  138.      

  139.     }

  140.     console.log(subStageFullList)

  141.     for (var i = 0; i < mainStageResult.length; i++) {

  142.       if (mainStageResult[i].id !== tgID) {

  143.         mainStageFullList.push(createData(mainStageList,subStageFullList[arrayNumber]))

  144.         arrayNumber += 1

  145.         tgID = mainStageResult[i].id

  146.         firstTg = true

  147.         mainStageList = []

  148.       }

  149.       if (firstTg === true) {

  150.         mainStageList.push(mainStageResult[i].name)

  151.         mainStageList.push(mainStageResult[i].taskCount)

  152.         mainStageList.push(mainStageResult[i].totalPlannedResources)

  153.         mainStageList.push(mainStageResult[i].totalActualResourcesSpent)

  154.         firstTg = false

  155.       }

  156.       if (mainStageResult[i].id === tgID) {

  157.         mainStageList.push(mainStageResult[i].plannedResources)

  158.         mainStageList.push(mainStageResult[i].actualResourcesSpent)

  159.       }

  160.     }

  161.     setRows(mainStageFullList)

  162.     }

  163.   }

  164.   useEffect(() => {

  165.     fetchData()

  166.    }, [projectId]);

  167. 

  168.   function createTaskData(stage:any, taskCount:any, g1Planned:any, g1Actual:any, g2Planned:any, g2Actual:any, g3Planned:any, g3Actual:any, g4Planned:any, g4Actual:any, g5Planned:any, g5Actual:any, totalPlanned:any, totalActual:any) {

  169.     return {

  170.       stage,

  171.       taskCount,

  172.       g1Planned,

  173.       g1Actual,

  174.       g2Planned,

  175.       g2Actual,

  176.       g3Planned,

  177.       g3Actual,

  178.       g4Planned,

  179.       g4Actual,

  180.       g5Planned,

  181.       g5Actual,

  182.       totalPlanned,

  183.       totalActual,

  184.     }

  185.   }

  186. 

  187.   const task1Rows:any = [

  188.     {stage:"1.1 Preparation of preliminary...",taskCount:"-",g1Planned:"-",g1Actual:"172.00",g2Planned:"-", g2Actual:"54.00", g3Planned:"-", g3Actual:"42.00", g4Planned: "-", g4Actual:"12.00", g5Planned:"-", g5Actual:"3.00", totalPlanned:"-", totalActual:"283.00"},

  189.     {stage:"1.2 Cash flow forecast",taskCount:"-",g1Planned:"-",g1Actual:"172.00",g2Planned:"-", g2Actual:"54.00", g3Planned:"-", g3Actual:"42.00", g4Planned: "-", g4Actual:"12.00", g5Planned:"-", g5Actual:"3.00", totalPlanned:"-", totalActual:"283.00"},

  190.     {stage:"1.3 Cost studies for alterative design solutions",taskCount:"-",g1Planned:"-",g1Actual:"115.00",g2Planned:"-", g2Actual:"36.00", g3Planned:"-", g3Actual:"28.00", g4Planned: "-", g4Actual:"7.00", g5Planned:"-", g5Actual:"1.75", totalPlanned:"-", totalActual:"188.00"},

  191.     {stage:"1.4 Attend design co-ordiantion / project",taskCount:"-",g1Planned:"-",g1Actual:"29.00",g2Planned:"-", g2Actual:"9.00", g3Planned:"-", g3Actual:"7.00", g4Planned: "-", g4Actual:"2.00", g5Planned:"-", g5Actual:"1.00", totalPlanned:"-", totalActual:"48.00"},

  192.     {stage:"1.5 Prepare / Review RIC",taskCount:"-",g1Planned:"-",g1Actual:"88.00",g2Planned:"-", g2Actual:"27.00", g3Planned:"-", g3Actual:"21.00", g4Planned: "-", g4Actual:"5.00", g5Planned:"-", g5Actual:"1.00", totalPlanned:"-", totalActual:"141.75"}

  193.   ]

  194.   const data:any = [

  195.     "Stage 1 - Design & Cost Planning / Estimating",

  196.     "5",

  197.     "576.00",

  198.     "576.00",

  199.     "192.00",

  200.     "180.00",

  201.     "144.00",

  202.     "140.00",

  203.     "38.40",

  204.     "38.00",

  205.     "9.60",

  206.     "9.75",

  207.     "960.00",

  208.     "943.75",

  209.   ];

  210.   // const rows = [

  211.   //   createData(data,task1Rows),

  212.   //   // createData("Stage 2 - Tender Documentation","11", "384.00", "382.00", "128.00", "130.00", "96.00", "79.00", "25.60", "25.00", "6.40", "4.00", "640.00", "620.00",task2Rows),

  213.   //   // createData("Stage 3 - Tender Analysis & Report & Contract Documentation","7", "384.00", "300.00", "128.00", "130.00", "96.00", "79.00", "25.60", "25.00", "6.40", "4.00", "640.00", "538.00",task3Rows),

  214.   //   // createData("Stage 4 - Construction", "13", "480.00", "400.00", "160.00", "160.00", "120.00", "128.00", "32.00", "25.00", "8.00", "3.00", "800.00", "716.00",task4Rows),

  215.   //   // createData("Stage 5 - Miscellaneous", "4", "96.00", "-", "32.00", "-", "24.00", "-0", "6.40", "-", "1.600", "-", "160.00", "-",task5Rows),

  216.   //   // createData("","Total", "1920.00", "1658.00", "640.00", "600.00", "480.00", "426.00", "128.00", "113.00", "32.00", "20.75", "3,200.00", "2817.75",task6Rows),

  217.   // ];

  218. 

  219.   // const taskRows = [

  220.   //   createTaskData("1.1 Preparation of preliminary...","-","-","172.00","-","54.00","-","42.00","-","12.00","-","3.00","-","283.00"),

  221.   // ];

  222. 

  223.   function Row(props:any) {

  224.     const { row } = props;

  225.     const [open, setOpen] = React.useState(false);

  226.   

  227.     return (

  228.       <React.Fragment>

  229.         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>

  230.           <TableCell>

  231.             {row.task.length > 0 && (

  232.               <IconButton

  233.               aria-label="expand row"

  234.               size="small"

  235.               onClick={() => setOpen(!open)}

  236.             >

  237.               {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}

  238.             </IconButton>

  239.             )}

  240.           </TableCell>

  241.           <TableCell style={{fontSize:10}}>{row.stage}</TableCell>

  242.           <TableCell style={{fontSize:10}}>{row.taskCount}</TableCell>

  243.           <TableCell style={{fontSize:10}}>{row.g1Planned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  244.           <TableCell style={{fontSize:10}}>{row.g1Actual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  245.           <TableCell style={{fontSize:10}}>{row.g2Planned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  246.           <TableCell style={{fontSize:10}}>{row.g2Actual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  247.           <TableCell style={{fontSize:10}}>{row.g3Planned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  248.           <TableCell style={{fontSize:10}}>{row.g3Actual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  249.           <TableCell style={{fontSize:10}}>{row.g4Planned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  250.           <TableCell style={{fontSize:10}}>{row.g4Actual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  251.           <TableCell style={{fontSize:10}}>{row.g5Planned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  252.           <TableCell style={{fontSize:10}}>{row.g5Actual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  253.           <TableCell style={{fontSize:10}}>{row.totalPlanned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  254.           <TableCell style={{fontSize:10}}>{row.totalActual.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>

  255.         </TableRow>

  256.         {row.task.map((taskRow:any) => (

  257.         <TableRow key={taskRow[0]} style={{backgroundColor:"#f0f3f7"}}>

  258.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  259.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  260.               <Box sx={{ margin: 0 }}>

  261.               <Table size="small" aria-label="tasks">

  262.               <TableBody>

  263.                   <TableRow>

  264.                   <TableCell colSpan={1}/>  

  265.                   </TableRow>

  266.                   </TableBody>  

  267.               </Table>

  268.               </Box>

  269.             </Collapse>

  270.           </TableCell>

  271.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  272.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  273.               <Box sx={{ margin: 0 }}>

  274.                 <Table size="small" aria-label="tasks">

  275.                 <TableBody>

  276.                   <TableRow>

  277.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[0]}</TableCell>       

  278.                   </TableRow>

  279.                   </TableBody>  

  280.               </Table>

  281.               </Box>

  282.             </Collapse>

  283.           </TableCell>

  284.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  285.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  286.               <Box sx={{ margin: 0 }}>

  287.                 <Table size="small" aria-label="tasks">

  288.                 <TableBody>

  289.                   <TableRow>

  290.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[1]}</TableCell>       

  291.                   </TableRow>

  292.                   </TableBody>  

  293.               </Table>

  294.               </Box>

  295.             </Collapse>

  296.           </TableCell>

  297.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  298.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  299.               <Box sx={{ margin: 0 }}>

  300.                 <Table size="small" aria-label="tasks">

  301.                 <TableBody>

  302.                   <TableRow>

  303.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[4].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  304.                   </TableRow>

  305.                   </TableBody>  

  306.               </Table>

  307.               </Box>

  308.             </Collapse>

  309.           </TableCell>

  310.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  311.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  312.               <Box sx={{ margin: 0 }}>

  313.                 <Table size="small" aria-label="tasks">

  314.                 <TableBody>

  315.                   <TableRow>

  316.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[5].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  317.                   </TableRow>

  318.                   </TableBody>  

  319.               </Table>

  320.               </Box>

  321.             </Collapse>

  322.           </TableCell>

  323.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  324.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  325.               <Box sx={{ margin: 0 }}>

  326.                 <Table size="small" aria-label="tasks">

  327.                 <TableBody>

  328.                   <TableRow>

  329.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[6].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  330.                   </TableRow>

  331.                   </TableBody>  

  332.               </Table>

  333.               </Box>

  334.             </Collapse>

  335.           </TableCell>

  336.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  337.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  338.               <Box sx={{ margin: 0 }}>

  339.                 <Table size="small" aria-label="tasks">

  340.                 <TableBody>

  341.                   <TableRow>

  342.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[7].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  343.                   </TableRow>

  344.                   </TableBody>  

  345.               </Table>

  346.               </Box>

  347.             </Collapse>

  348.           </TableCell>

  349.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  350.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  351.               <Box sx={{ margin: 0 }}>

  352.                 <Table size="small" aria-label="tasks">

  353.                 <TableBody>

  354.                   <TableRow>

  355.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[8].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  356.                   </TableRow>

  357.                   </TableBody>  

  358.               </Table>

  359.               </Box>

  360.             </Collapse>

  361.           </TableCell>

  362.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  363.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  364.               <Box sx={{ margin: 0 }}>

  365.                 <Table size="small" aria-label="tasks">

  366.                 <TableBody>

  367.                   <TableRow>

  368.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[9].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  369.                   </TableRow>

  370.                   </TableBody>  

  371.               </Table>

  372.               </Box>

  373.             </Collapse>

  374.           </TableCell>

  375.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  376.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  377.               <Box sx={{ margin: 0 }}>

  378.                 <Table size="small" aria-label="tasks">

  379.                 <TableBody>

  380.                   <TableRow>

  381.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[10].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  382.                   </TableRow>

  383.                   </TableBody>  

  384.               </Table>

  385.               </Box>

  386.             </Collapse>

  387.           </TableCell>

  388.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  389.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  390.               <Box sx={{ margin: 0 }}>

  391.                 <Table size="small" aria-label="tasks">

  392.                 <TableBody>

  393.                   <TableRow>

  394.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[11].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  395.                   </TableRow>

  396.                   </TableBody>  

  397.               </Table>

  398.               </Box>

  399.             </Collapse>

  400.           </TableCell>

  401.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  402.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  403.               <Box sx={{ margin: 0 }}>

  404.                 <Table size="small" aria-label="tasks">

  405.                 <TableBody>

  406.                   <TableRow>

  407.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[12].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  408.                   </TableRow>

  409.                   </TableBody>  

  410.               </Table>

  411.               </Box>

  412.             </Collapse>

  413.           </TableCell>

  414.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  415.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  416.               <Box sx={{ margin: 0 }}>

  417.                 <Table size="small" aria-label="tasks">

  418.                 <TableBody>

  419.                   <TableRow>

  420.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[13].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  421.                   </TableRow>

  422.                   </TableBody>  

  423.               </Table>

  424.               </Box>

  425.             </Collapse>

  426.           </TableCell>

  427.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  428.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  429.               <Box sx={{ margin: 0 }}>

  430.                 <Table size="small" aria-label="tasks">

  431.                 <TableBody>

  432.                   <TableRow>

  433.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[2].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  434.                   </TableRow>

  435.                   </TableBody>  

  436.               </Table>

  437.               </Box>

  438.             </Collapse>

  439.           </TableCell>

  440.           <TableCell style={{ paddingBottom: 0, paddingTop: 0}} colSpan={1}>

  441.             <Collapse in={open} timeout="auto" unmountOnExit style={{marginLeft:-17, marginRight:-17}}>

  442.               <Box sx={{ margin: 0 }}>

  443.                 <Table size="small" aria-label="tasks">

  444.                 <TableBody>

  445.                   <TableRow>

  446.                   <TableCell style={{fontSize:10}} colSpan={1}>{taskRow[3].toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>       

  447.                   </TableRow>

  448.                   </TableBody>  

  449.               </Table>

  450.               </Box>

  451.             </Collapse>

  452.           </TableCell>

  453.           

  454.         </TableRow>

  455.           ))} 

  456.         

  457.       </React.Fragment>

  458.     );

  459.   }

  460. 

  461.   const projectResourcesRows = [

  462.     {id: 1,stage:"Stage 1 - Design & Cost Planning / Estimating",taskCount:"5",g1Planned:"576.00",g1Actual:"576.00",g2Planned:"192.00", g2Actual:"180.00", g3Planned:"144.00", g3Actual:"140.00", g4Planned: "38.40", g4Actual:"38S.00", g5Planned:"9.60", g5Actual:"9.75", totalPlanned:"960.00", totalActual:"943.75"},

  463.     {id: 2,stage:"1.1 Preparation of preliminary...",taskCount:"-",g1Planned:"-",g1Actual:"172.00",g2Planned:"-", g2Actual:"54.00", g3Planned:"-", g3Actual:"42.00", g4Planned: "-", g4Actual:"12.00", g5Planned:"-", g5Actual:"3.00", totalPlanned:"-", totalActual:"283.00"},

  464.     {id: 3,stage:"1.2 Cash flow forecast",taskCount:"-",g1Planned:"-",g1Actual:"172.00",g2Planned:"-", g2Actual:"54.00", g3Planned:"-", g3Actual:"42.00", g4Planned: "-", g4Actual:"12.00", g5Planned:"-", g5Actual:"3.00", totalPlanned:"-", totalActual:"283.00"},

  465.     {id: 4,stage:"1.3 Cost studies for alterative design solutions",taskCount:"-",g1Planned:"-",g1Actual:"115.00",g2Planned:"-", g2Actual:"36.00", g3Planned:"-", g3Actual:"28.00", g4Planned: "-", g4Actual:"7.00", g5Planned:"-", g5Actual:"1.75", totalPlanned:"-", totalActual:"188.00"},

  466.     {id: 5,stage:"1.4 Attend design co-ordiantion / project",taskCount:"-",g1Planned:"-",g1Actual:"29.00",g2Planned:"-", g2Actual:"9.00", g3Planned:"-", g3Actual:"7.00", g4Planned: "-", g4Actual:"2.00", g5Planned:"-", g5Actual:"1.00", totalPlanned:"-", totalActual:"48.00"},

  467.     {id: 6,stage:"1.5 Prepare / Review RIC",taskCount:"-",g1Planned:"-",g1Actual:"88.00",g2Planned:"-", g2Actual:"27.00", g3Planned:"-", g3Actual:"21.00", g4Planned: "-", g4Actual:"5.00", g5Planned:"-", g5Actual:"1.00", totalPlanned:"-", totalActual:"141.75"},

  468.     {id: 7,stage:"Stage 2 - Tender Documentation",taskCount:"11",g1Planned:"384.00",g1Actual:"382.00",g2Planned:"128.00", g2Actual:"130.00", g3Planned:"96.00", g3Actual:"79.00", g4Planned: "25.60", g4Actual:"25.00", g5Planned:"6.40", g5Actual:"4.00", totalPlanned:"640.00", totalActual:"620.00"},

  469.     {id: 8,stage:"Stage 3 - Tender Analysis & Report & Contract Documentation",taskCount:"7",g1Planned:"384.00",g1Actual:"300.00",g2Planned:"128.00", g2Actual:"130.00", g3Planned:"96.00", g3Actual:"79.00", g4Planned: "25.60", g4Actual:"25.00", g5Planned:"6.40", g5Actual:"4.00", totalPlanned:"640.00", totalActual:"538.00"},

  470.     {id: 9,stage:"Stage 4 - Construction",taskCount:"13",g1Planned:"480.00",g1Actual:"400.00",g2Planned:"160.00", g2Actual:"160.00", g3Planned:"120.00", g3Actual:"128.00", g4Planned: "32.00", g4Actual:"25.00", g5Planned:"8.00", g5Actual:"3.00", totalPlanned:"800.00", totalActual:"716.00"},

  471.     {id: 10,stage:"Stage 5 - Miscellaneous",taskCount:"4",g1Planned:"96.00",g1Actual:"-",g2Planned:"32.00", g2Actual:"-", g3Planned:"24.00", g3Actual:"-0", g4Planned: "6.40", g4Actual:"-", g5Planned:"1.600", g5Actual:"-", totalPlanned:"160.00", totalActual:"-"},

  472.     {id: 11,stage:"",taskCount:"Total",g1Planned:"1920.00",g1Actual:"1658.00",g2Planned:"640.00", g2Actual:"600.00", g3Planned:"480.00", g3Actual:"426.00", g4Planned: "128.00", g4Actual:"113.00", g5Planned:"32.00", g5Actual:"20.75", totalPlanned:"3,200.00", totalActual:"2817.75"},

  473.   ]

  474. 

  475. const columns2 = [

  476.   {

  477.     id: 'stage',

  478.     field: 'stage',

  479.     headerName: "Stage",

  480.     flex: 2,

  481.   },

  482.   {

  483.     id: 'taskCount',

  484.     field: 'taskCount',

  485.     headerName: "Task Count",

  486.     flex: 0.5,

  487.   },

  488.   {

  489.     id: 'g1Planned',

  490.     field: 'g1Planned',

  491.     headerName: "Planned",

  492.     flex: 0.7,

  493.   },

  494.   {

  495.     id: 'g1Actual',

  496.     field: 'g1Actual',

  497.     headerName: "Actual",

  498.     flex: 0.7,

  499.   },

  500.   {

  501.     id: 'g2Planned',

  502.     field: 'g2Planned',

  503.     headerName: "Planned",

  504.     flex: 0.7,

  505.   },

  506.   {

  507.     id: 'g2Actual',

  508.     field: 'g2Actual',

  509.     headerName: "Actual",

  510.     flex: 0.7,

  511.   },

  512.   {

  513.     id: 'g3Planned',

  514.     field: 'g3Planned',

  515.     headerName: "Planned",

  516.     flex: 0.7,

  517.   },

  518.   {

  519.     id: 'g3Actual',

  520.     field: 'g3Actual',

  521.     headerName: "Actual",

  522.     flex: 0.7,

  523.   },

  524.   {

  525.     id: 'g4Planned',

  526.     field: 'g4Planned',

  527.     headerName: "Planned",

  528.     flex: 0.7,

  529.   },

  530.   {

  531.     id: 'g4Actual',

  532.     field: 'g4Actual',

  533.     headerName: "Actual",

  534.     flex: 0.7,

  535.   },

  536.   {

  537.     id: 'g5Planned',

  538.     field: 'g5Planned',

  539.     headerName: "Planned",

  540.     flex: 0.7,

  541.   },

  542.   {

  543.     id: 'g5Actual',

  544.     field: 'g5Actual',

  545.     headerName: "Actual",

  546.     flex: 0.7,

  547.   },

  548.   {

  549.     id: 'totalPlanned',

  550.     field: 'totalPlanned',

  551.     headerName: "Planned",

  552.     flex: 0.7,

  553.   },

  554.   {

  555.     id: 'totalActual',

  556.     field: 'totalActual',

  557.     headerName: "Actual",

  558.     flex: 0.7,

  559.   },

  560. ];

  561. 

  562.   const columnGroupingModel = [

  563.     {

  564.       groupId: 'G1',

  565.       children: [{ field: 'g1Planned' },{ field: 'g1Actual' }],

  566.       headerClassName: 'groupColor',

  567.     },

  568.     {

  569.       groupId: 'G2',

  570.       children: [{ field: 'g2Planned' },{ field: 'g2Actual' }],

  571.       headerClassName: 'groupColor',

  572.     },

  573.     {

  574.       groupId: 'G3',

  575.       children: [{ field: 'g3Planned' },{ field: 'g3Actual' }],

  576.       headerClassName: 'groupColor',

  577.     },

  578.     {

  579.       groupId: 'G4',

  580.       children: [{ field: 'g4Planned' },{ field: 'g4Actual' }],

  581.       headerClassName: 'groupColor',

  582.     },

  583.     {

  584.       groupId: 'G5',

  585.       children: [{ field: 'g5Planned' },{ field: 'g5Actual' }],

  586.       headerClassName: 'groupColor',

  587.     },

  588.     {

  589.       groupId: 'Total',

  590.       children: [{ field: 'totalPlanned' },{ field: 'totalActual' }],

  591.       headerClassName: 'totalGroupColor',

  592.     },

  593.   ];

  594. 

  595.   return (

  596.       <Grid item sm sx={{

  597.         '& .groupColor': {

  598.           backgroundColor: 'rgba(240, 240, 240, 0.55)',

  599.         },

  600.         '& .totalGroupColor': {

  601.           backgroundColor: 'rgba(218, 218, 245, 0.55)',

  602.         },

  603.       }}>

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

  605.           <CardHeader className="text-slate-500" title="Project Information"/>

  606.             <div className="ml-6 mr-6">

  607.               <div style={{ display: "inline-block", width: "33%"}}>

  608.                 <div style={{fontSize:"1em", fontWeight:"bold"}}>

  609.                   <u>

  610.                   Project

  611.                   </u>

  612.                 </div>

  613.                 <div style={{fontSize:"1em"}}>

  614.                   {projectName}

  615.                 </div>

  616.               </div>

  617.               <div style={{ display: "inline-block", width: "33%"}}>

  618.                 <div style={{ fontSize:"1em", fontWeight:"bold"}}>

  619.                   <u>

  620.                     Project Fee

  621.                   </u>

  622.                 </div>

  623.                 <div style={{fontSize:"1em"}}>

  624.                   HKD ${projectFee.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

  625.                 </div>

  626.               </div>

  627.               <div style={{ display: "inline-block", width: "33%"}}>

  628.                 <div style={{ fontSize:"1em", fontWeight:"bold"}}>

  629.                   <u>

  630.                     Status 

  631.                   </u>

  632.                 </div>

  633.                 <div style={{fontSize:"1em"}}>

  634.                   {status}

  635.                 </div>

  636.               </div>

  637.               <div style={{ display: "inline-block", width: "33%"}}>

  638.                 <div style={{ fontSize:"1em", fontWeight:"bold"}}>

  639.                   <u>

  640.                     Planned Resources

  641.                   </u>

  642.                 </div>

  643.                 <div style={{fontSize:"1em"}}>

  644.                   {plannedResources.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} Manhours

  645.                 </div>

  646.               </div>

  647.               <div style={{ display: "inline-block", width: "33%"}}>

  648.                 <div style={{ fontSize:"1em", fontWeight:"bold"}}>

  649.                   <u>

  650.                     Actual Resources Spent

  651.                   </u>

  652.                 </div>

  653.                 <div style={{fontSize:"1em"}}>

  654.                   {actualResourcesSpent.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} Manhours

  655.                 </div>

  656.               </div>

  657.               <div style={{ display: "inline-block", width: "33%"}}>

  658.                 <div style={{ fontSize:"1em", fontWeight:"bold"}}>

  659.                   <u>

  660.                    Remaining Resources

  661.                   </u>

  662.                 </div>

  663.                 <div style={{fontSize:"1em"}}>

  664.                   {remainingResources.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} Manhours

  665.                 </div>

  666.               </div>

  667.             </div>

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

  669.             <CustomDatagrid rows={projectResourcesRows} columns={columns2} columnWidth={200} dataGridHeight={480} pageSize={100} columnGroupingModel={columnGroupingModel} sx={{fontSize:10}}/>

  670.           </div> */}

  671.           {/* <div style={{display:"inline-block",width:"99%",marginLeft:10, marginRight:10, marginTop:10}}> */}

  672.           <TableContainer component={Paper}>

  673.             <Table sx={{ minWidth: 650 }} aria-label="simple table">

  674.               <TableHead>

  675.                 <TableRow>

  676.                   <TableCell align="center" colSpan={3}>

  677.                     

  678.                   </TableCell>

  679.                   <TableCell align="center" colSpan={2}>

  680.                     G1

  681.                   </TableCell>

  682.                   <TableCell align="center" colSpan={2}>

  683.                     G2

  684.                   </TableCell>

  685.                   <TableCell align="center" colSpan={2}>

  686.                     G3

  687.                   </TableCell>

  688.                   <TableCell align="center" colSpan={2}>

  689.                     G4

  690.                   </TableCell>

  691.                   <TableCell align="center" colSpan={2}>

  692.                     G5

  693.                   </TableCell>

  694.                   <TableCell align="center" colSpan={2} style={{backgroundColor:"rgba(218, 218, 245, 0.55)"}}>

  695.                     Total

  696.                   </TableCell>

  697.                 </TableRow>

  698.                 <TableRow>

  699.                   <TableCell style={{width:"5%"}}/>

  700.                   <TableCell style={{fontSize:10, width:"20%"}}>Stage</TableCell>

  701.                   <TableCell style={{fontSize:10, width:"5%"}}>Task Count</TableCell>

  702.                   <TableCell style={{fontSize:10, width:"5%"}}>Planned</TableCell>

  703.                   <TableCell style={{fontSize:10, width:"5%"}}>Actual</TableCell>

  704.                   <TableCell style={{fontSize:10, width:"5%"}}>Planned</TableCell>

  705.                   <TableCell style={{fontSize:10, width:"5%"}}>Actual</TableCell>

  706.                   <TableCell style={{fontSize:10, width:"5%"}}>Planned</TableCell>

  707.                   <TableCell style={{fontSize:10, width:"5%"}}>Actual</TableCell>

  708.                   <TableCell style={{fontSize:10, width:"5%"}}>Planned</TableCell>

  709.                   <TableCell style={{fontSize:10, width:"5%"}}>Actual</TableCell>

  710.                   <TableCell style={{fontSize:10, width:"5%"}}>Planned</TableCell>

  711.                   <TableCell style={{fontSize:10, width:"5%"}}>Actual</TableCell>

  712.                   <TableCell style={{fontSize:10, width:"5%"}}>Planned</TableCell>

  713.                   <TableCell style={{fontSize:10, width:"5%"}}>Actual</TableCell>

  714.                 </TableRow>

  715.               </TableHead>

  716.               <TableBody>

  717.                 {rows.map((row:any) => (

  718.                   <Row key={row.stage} row={row} />

  719.                 ))}

  720.               </TableBody>

  721.             </Table>

  722.           </TableContainer>

  723.           {/* </div> */}

  724.         </Card>

  725.       </Grid>

  726.   );

  727. };

  728. 

  729. export default ProjectResourceSummary;

  730.