From 61ad75c437eeec2e92cda9f3035549101bd1faaf Mon Sep 17 00:00:00 2001
From: "MSI\\derek" <abc@gmail.com>
Date: Tue, 17 Sep 2024 12:40:49 +0800
Subject: [PATCH] update cash flow expense partial

---
 src/app/api/cashflow/index.ts                 |  1 +
 .../ProjectCashFlow/ProjectCashFlow.tsx       | 33 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/app/api/cashflow/index.ts b/src/app/api/cashflow/index.ts
index 5d2f9fb..0f62831 100644
--- a/src/app/api/cashflow/index.ts
+++ b/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[];
diff --git a/src/components/ProjectCashFlow/ProjectCashFlow.tsx b/src/components/ProjectCashFlow/ProjectCashFlow.tsx
index 66827ff..b3dcbef 100644
--- a/src/components/ProjectCashFlow/ProjectCashFlow.tsx
+++ b/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" }}