financial summary button

src/components/ProjectCashFlow/ProjectCashFlow.tsx

@@ -121,18 +121,31 @@ const ProjectCashFlow: React.FC = () => {
     
   }
   const fetchReceivableAndExpenditureData = async () => {
-    const cashFlowReceivableAndExpenditureData = await fetchProjectsCashFlowReceivableAndExpenditure(selectedProjectIdList);
-    if(cashFlowReceivableAndExpenditureData.length !== 0){
-      setReceivedPercentage(cashFlowReceivableAndExpenditureData[0].receivedPercentage)
-      setInvoicedPercentage(cashFlowReceivableAndExpenditureData[0].invoicedPercentage)
-      setTotalFee(cashFlowReceivableAndExpenditureData[0].totalProjectFee)
-      setTotalInvoiced(cashFlowReceivableAndExpenditureData[0].totalInvoiced)
-      setTotalReceived(cashFlowReceivableAndExpenditureData[0].totalReceived)
-      setReceivable(cashFlowReceivableAndExpenditureData[0].receivable)
-      setExpenditurePercentage(cashFlowReceivableAndExpenditureData[0].expenditurePercentage)
-      setTotalBudget(cashFlowReceivableAndExpenditureData[0].totalBudget)
-      setTotalExpenditure(cashFlowReceivableAndExpenditureData[0].totalExpenditure)
-      setExpenditureReceivable(cashFlowReceivableAndExpenditureData[0].expenditureReceivable)
+    if (selectedProjectIdList.length === 0) {
+      setReceivedPercentage(0)
+      setInvoicedPercentage(0)
+      setTotalFee(0)
+      setTotalInvoiced(0)
+      setTotalReceived(0)
+      setReceivable(0)
+      setExpenditurePercentage(0)
+      setTotalBudget(0)
+      setTotalExpenditure(0)
+      setExpenditureReceivable(0)
+    } else {
+      const cashFlowReceivableAndExpenditureData = await fetchProjectsCashFlowReceivableAndExpenditure(selectedProjectIdList);
+      if(cashFlowReceivableAndExpenditureData.length !== 0){
+        setReceivedPercentage(cashFlowReceivableAndExpenditureData[0].receivedPercentage)
+        setInvoicedPercentage(cashFlowReceivableAndExpenditureData[0].invoicedPercentage)
+        setTotalFee(cashFlowReceivableAndExpenditureData[0].totalProjectFee)
+        setTotalInvoiced(cashFlowReceivableAndExpenditureData[0].totalInvoiced)
+        setTotalReceived(cashFlowReceivableAndExpenditureData[0].totalReceived)
+        setReceivable(cashFlowReceivableAndExpenditureData[0].receivable)
+        setExpenditurePercentage(cashFlowReceivableAndExpenditureData[0].expenditurePercentage)
+        setTotalBudget(cashFlowReceivableAndExpenditureData[0].totalBudget)
+        setTotalExpenditure(cashFlowReceivableAndExpenditureData[0].totalExpenditure)
+        setExpenditureReceivable(cashFlowReceivableAndExpenditureData[0].expenditureReceivable)
+      }
     }
   }
   const fetchAnticipateData = async () => {

src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx

@@ -458,6 +458,14 @@ const columns2 = [
     fetchProjectTableData(params.row.teamId,params.row.cid)
   };
 
+  const handleExportByClient = () => {
+    console.log(clientFinancialRows)
+  };
+
+  const handleExportByProject = () => {
+    console.log(projectFinancialRows)
+  };
+
   return (
       <Grid item sm>
         <Card>
@@ -471,14 +479,32 @@ const columns2 = [
           </div>
         </Card>
         <Card className="mt-5">
-          <CardHeader className="text-slate-500" title="Financial Status (by Client)"/>
+          <div style={{display:"inline-block"}}>
+            <CardHeader className="text-slate-500" title="Financial Status (by Client)"/>
+          </div>
+          <div style={{display:"inline-block"}}>
+            {clientFinancialRows.length > 0 && (
+              <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">
+                  Export Excel
+              </button>
+            )}
+          </div>
           <div style={{display:"inline-block",width:"99%",marginLeft:10}}>
             {/* <CustomDatagrid rows={clientFinancialRows} columns={columns} columnWidth={200} dataGridHeight={300} checkboxSelection={true} onRowSelectionModelChange={handleSelectionChange} selectionModel={selectionModel}/> */}
             <CustomDatagrid onRowClick={handleRowClick} rows={clientFinancialRows} columns={columns} columnWidth={200} dataGridHeight={300}/>
           </div>
         </Card>
         <Card className="mt-5">
-          <CardHeader className="text-slate-500" title="Financial Status (by Project)"/>
+          <div style={{display:"inline-block"}}>
+            <CardHeader className="text-slate-500" title="Financial Status (by Project)"/>
+          </div>
+          <div style={{display:"inline-block"}}>
+            {projectFinancialRows.length > 0 && (
+              <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">
+                  Export Excel
+              </button>
+            )}
+          </div>
           <div style={{display:"inline-block",width:"99%",marginLeft:10}}>
             <CustomDatagrid rows={projectFinancialRows} columns={columns2} columnWidth={200} dataGridHeight={300}/>
           </div>