update cash flow expense partial

src/app/api/cashflow/index.ts

@@ -43,6 +43,7 @@ export interface CashFlowReceivableAndExpenditure {
   expenditureReceivable: number;
   totalProjectFee: number;
   invoicedPercentage: number;
+  expense: number;
 }
 export interface CashFlowAnticipatedChartResult {
   anticipateIncomeList: any[];

src/components/ProjectCashFlow/ProjectCashFlow.tsx

@@ -57,6 +57,7 @@ const ProjectCashFlow: React.FC = () => {
   const [totalReceived,setTotalReceived]: any[] = React.useState(0);
   const [receivable,setReceivable]: any[] = React.useState(0);
   const [totalExpenditure,setTotalExpenditure]: any[] = React.useState(0);
+  const [expense, setExpense] = React.useState(0);
   const [expenditureReceivable,setExpenditureReceivable]: any[] = React.useState(0);
   const [expenditurePercentage,setExpenditurePercentage]: any[] = React.useState(0);
   const [monthlyAnticipateIncomeList, setMonthlyAnticipateIncomeList]: any[] = React.useState([0,0,0,0,0,0,0,0,0,0,0,0]);
@@ -139,6 +140,7 @@ const ProjectCashFlow: React.FC = () => {
       setExpenditureReceivable(0)
     } else {
       const cashFlowReceivableAndExpenditureData = await fetchProjectsCashFlowReceivableAndExpenditure(selectedProjectIdList);
+      console.log(cashFlowReceivableAndExpenditureData)
       if(cashFlowReceivableAndExpenditureData.length !== 0){
         setReceivedPercentage(cashFlowReceivableAndExpenditureData[0].receivedPercentage)
         setInvoicedPercentage(cashFlowReceivableAndExpenditureData[0].invoicedPercentage)
@@ -150,6 +152,7 @@ const ProjectCashFlow: React.FC = () => {
         setTotalBudget(cashFlowReceivableAndExpenditureData[0].totalBudget)
         setTotalExpenditure(cashFlowReceivableAndExpenditureData[0].totalExpenditure)
         setExpenditureReceivable(cashFlowReceivableAndExpenditureData[0].expenditureReceivable)
+        setExpense(cashFlowReceivableAndExpenditureData[0].expense)
       }
     }
   }
@@ -171,6 +174,8 @@ const ProjectCashFlow: React.FC = () => {
     }
   
     if(cashFlowAnticipateData.length !== 0){
+      console.log(cashFlowAnticipateData)
+    
       if (cashFlowAnticipateData[0].anticipateExpenditureList.length !== 0) {
         const anticipateExpenditureList = []
         for (var i = 0; i < cashFlowAnticipateData[0].anticipateExpenditureList.length; i++) {
@@ -189,6 +194,8 @@ const ProjectCashFlow: React.FC = () => {
           }
           anticipateExpenditureList.push(subAnticipateExpenditure)
         }
+        console.log(anticipateExpenditureList[0])
+        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++) {
@@ -974,6 +981,32 @@ const ProjectCashFlow: React.FC = () => {
                   ${totalExpenditure.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                 </div>
                 <hr />
+                <div
+                  className="text-sm font-medium ml-5"
+                  style={{ color: "#898d8d" }}
+                >
+                  {t("Total Manhours Spent")}
+                </div>
+                <div
+                  className="text-lg font-medium mx-5"
+                  style={{ color: "#6b87cf", textAlign: "right"  }}
+                >
+                  ${((totalExpenditure || 0 )-(expense || 0)).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                </div>
+                <hr />
+                <div
+                  className="text-sm font-medium ml-5"
+                  style={{ color: "#898d8d" }}
+                >
+                  {t("Total Project expense")}
+                </div>
+                <div
+                  className="text-lg font-medium mx-5"
+                  style={{ color: "#6b87cf", textAlign: "right"  }}
+                >
+                  ${expense.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                </div>
+                <hr />
                 <div
                   className="text-sm font-medium ml-5"
                   style={{ color: "#898d8d" }}