update dashboard

src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx

@@ -178,6 +178,13 @@ const CompanyTeamCashFlow: React.FC = () => {
   ];
 
   const options: ApexOptions = {
+    tooltip: {
+      y: {
+        formatter: function(val) {
+          return val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+        }
+      }
+    },
     chart: {
       height: 350,
       type: "line",

src/components/ProgressByClient/ProgressByClient.tsx

@@ -246,7 +246,10 @@ const ProgressByClient: React.FC<Props> = () => {
       id: "budgetedManhour",
       field: "budgetedManhour",
       headerName: "Budgeted Manhour",
-      minWidth: 70
+      minWidth: 70,
+      renderCell: (params: any) => {
+        return <span>{params.row.budgetedManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
+      }
     },
     {
       id: "spentManhour",
@@ -255,11 +258,11 @@ const ProgressByClient: React.FC<Props> = () => {
       renderCell: (params: any) => {
         if (params.row.budgetedManhour - params.row.spentManhour <= 0) {
           return (
-            <span className="text-red-300">{params.row.spentManhour}</span>
+            <span className="text-red-300">{params.row.spentManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
           );
         } else {
           console.log(params)
-          return <span>{params.row.spentManhour}</span>;
+          return <span>{params.row.spentManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
         }
       },
       minWidth: 70
@@ -271,10 +274,10 @@ const ProgressByClient: React.FC<Props> = () => {
       renderCell: (params: any) => {
         if (params.row.budgetedManhour - params.row.spentManhour <= 0) {
           return (
-            <span className="text-red-300">({params.row.remainedManhour})</span>
+            <span className="text-red-300">({params.row.remainedManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })})</span>
           );
         } else {
-          return <span>{params.row.remainedManhour}</span>;
+          return <span>{params.row.remainedManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
         }
       },
       minWidth: 70

src/components/ProgressByTeam/ProgressByTeam.tsx

@@ -277,7 +277,10 @@ const ProgressByTeam: React.FC = () => {
       id: "budgetedManhour",
       field: "budgetedManhour",
       headerName: "Budgeted Manhour",
-      minWidth: 70
+      minWidth: 70,
+      renderCell: (params: any) => {
+        return <span>{params.row.budgetedManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
+      }
     },
     {
       id: "spentManhour",
@@ -286,10 +289,10 @@ const ProgressByTeam: React.FC = () => {
       renderCell: (params: any) => {
         if (params.row.budgetedManhour - params.row.spentManhour <= 0) {
           return (
-            <span className="text-red-300">{params.row.spentManhour}</span>
+            <span className="text-red-300">{params.row.spentManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
           );
         } else {
-          return <span>{params.row.spentManhour}</span>;
+          return <span>{params.row.spentManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
         }
       },
       minWidth: 70
@@ -301,10 +304,10 @@ const ProgressByTeam: React.FC = () => {
       renderCell: (params: any) => {
         if (params.row.budgetedManhour - params.row.spentManhour <= 0) {
           return (
-            <span className="text-red-300">({params.row.remainedManhour})</span>
+            <span className="text-red-300">({params.row.remainedManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })})</span>
           );
         } else {
-          return <span>{params.row.remainedManhour}</span>;
+          return <span>{params.row.remainedManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
         }
       },
       minWidth: 70

src/components/ProjectCashFlow/ProjectCashFlow.tsx

@@ -146,6 +146,7 @@ const ProjectCashFlow: React.FC = () => {
       setMonthlyAnticipateExpenditureList([0,0,0,0,0,0,0,0,0,0,0,0])
     }
     setMonthlyAnticipateIncomeList(monthlyAnticipateIncome)
+    console.log(cashFlowAnticipateData)
     if(cashFlowAnticipateData.length !== 0){
       if (cashFlowAnticipateData[0].anticipateExpenditureList.length !== 0) {
         const anticipateExpenditureList = []
@@ -157,6 +158,7 @@ const ProjectCashFlow: React.FC = () => {
           for (var j = 1; j < 13; j++){
             if (month === j && duration > 0) {
               subAnticipateExpenditure.push(anticipateExpenditure)
+              month = month + 1
               duration = duration - 1
             } else {
               subAnticipateExpenditure.push(0)
@@ -164,6 +166,7 @@ const ProjectCashFlow: React.FC = () => {
           }
           anticipateExpenditureList.push(subAnticipateExpenditure)
         }
+        console.log(anticipateExpenditureList)
         const result = new Array(anticipateExpenditureList[0].length).fill(0);
         for (const arr of anticipateExpenditureList) {
           for (let i = 0; i < arr.length; i++) {
@@ -306,6 +309,13 @@ const ProjectCashFlow: React.FC = () => {
   ];
 
   const options: ApexOptions = {
+    tooltip: {
+      y: {
+        formatter: function(val) {
+          return val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+        }
+      }
+    },
     chart: {
       height: 350,
       type: "line",