Add area to show the total issued amount and received amount

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -5,23 +5,20 @@ import SearchBox, { Criterion } from "../SearchBox";
 import { useTranslation } from "react-i18next";
 import SearchResults, { Column } from "../SearchResults";
 import EditNote from "@mui/icons-material/EditNote";
-import { convertLocaleStringToNumber } from "@/app/utils/formatUtil"
-import { Button, ButtonGroup, Stack, Tab, Tabs, TabsProps, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField } from "@mui/material";
+import { moneyFormatter } from "@/app/utils/formatUtil"
+import { Button, ButtonGroup, Stack, Tab, Tabs, TabsProps, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField, CardContent, Typography, Divider, Card } from "@mui/material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
-import { dateInRange, downloadFile } from "@/app/utils/commonUtil";
-import { importInvoices, importIssuedInovice, importReceivedInovice, updateInvoice } from "@/app/api/invoices/actions";
+import { importIssuedInovice, importReceivedInovice, updateInvoice } from "@/app/api/invoices/actions";
 import { errorDialogWithContent, successDialog } from "../Swal/CustomAlerts";
-import { invoiceList, issuedInvoiceList, issuedInvoiceResult, issuedInvoiceSearchForm, receivedInvoiceList, receivedInvoiceSearchForm } from "@/app/api/invoices";
+import { invoiceList, issuedInvoiceList, issuedInvoiceSearchForm, receivedInvoiceList, receivedInvoiceSearchForm } from "@/app/api/invoices";
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import { GridCellEditStartReasons, GridCellParams, GridColDef, GridEventListener, GridRowId, GridRowModel, GridRowModes, GridRowModesModel } from "@mui/x-data-grid";
+import { GridCellParams, GridColDef, GridEventListener, GridRowId, GridRowModes, GridRowModesModel } from "@mui/x-data-grid";
 import { useGridApiRef } from "@mui/x-data-grid";
 import StyledDataGrid from "../StyledDataGrid";
-import { QrCodeScannerOutlined } from "@mui/icons-material";
-import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import dayjs from "dayjs";
+
 import { uniq } from "lodash";
 
+
 interface Props {
   issuedInvoice: issuedInvoiceList[];
   receivedInvoice: receivedInvoiceList[];
@@ -469,23 +466,13 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
           {t("Import Invoice Amount Receive Summary")}
         </Button>
       </ButtonGroup>
-      {/* <Button startIcon={<FileUploadIcon />} variant="contained" component="label">
-          <input
-            id='importExcel'
-            type='file'
-            accept='.xlsx, .csv'
-            hidden
-            onChange={(event) => {handleImportClick(event)}}
-          />
-          {t("Import Invoice Summary")}
-      </Button> */}
     </Stack>
       {
         // tabIndex == 0 &&
         <SearchBox
           criteria={searchCriteria}
           onSearch={(query) => {
-            console.log(query)
+            // console.log(query)
             setFilterInovices(
               invoices.filter(
                 (s) => (s.invoiceNo.toLowerCase().includes(query.invoiceNo.toLowerCase())) 
@@ -499,28 +486,22 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
           onReset={onReset}
         />
       }
-      {/* {
-        tabIndex == 1 &&
-        <SearchBox
-        criteria={searchCriteria2}
-        onSearch={(query) => {
-          console.log(query)
-          setFilteredReceivedInvoices(
-            receivedInvoice.filter(
-              (s) => 
-                (isDateInRange(s.receiptDate, query.receiptDate ?? undefined, query.receiptDateTo ?? undefined)) &&
-                (s.invoiceNo.toLowerCase().includes(query.invoiceNo.toLowerCase())) &&
-                (s.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()))
-            ),
-          );
-        }}
-        onReset={onReset}
-      />
-      } */}
-      {/* {<Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
-          <Tab label={t("Issued Invoices")}/>
-          <Tab label={t("Received Invoices")}/>
-      </Tabs>} */}
+      
+      <Divider sx={{ paddingBlockStart: 2 }} />
+      <Card sx={{ display: "block" }}>
+        <CardContent>
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="h6">{t('Total Issued Amount (HKD):')}</Typography>
+          <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.issuedAmount), 0))}</Typography>
+        </Stack>
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="h6">{t('Total Received Amount (HKD):')}</Typography>
+          <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.receivedAmount), 0))}</Typography>
+        </Stack>
+        </CardContent>
+      </Card>
+      <Divider sx={{ paddingBlockEnd: 2 }} />
+  
       {
         // tabIndex == 0 &&
         <SearchResults<invoiceList>
@@ -529,14 +510,6 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
           autoRedirectToFirstPage
         />
       }
-      {/* {
-        tabIndex == 1 &&
-        <SearchResults<receivedInvoiceList>
-          items={filteredReceivedInvoices}
-          columns={columns2}
-        />
-      } */}
-
     <Dialog open={dialogOpen} onClose={handleCloseDialog} maxWidth="lg" fullWidth>
       <DialogTitle>{t("Edit Invoice")}</DialogTitle>
       <DialogContent>