Update Search Result, when there is filter result, reset the table page to 0

src/components/CompanyHoliday/CompanyHoliday.tsx

@@ -79,7 +79,6 @@ const CompanyHoliday: React.FC<Props> = ({ holidays, abilities }) => {
   const onSubmit = useCallback<SubmitHandler<any>>(
     async (data) => {
       try {
-        // console.log(data);
         setServerError("");
         submitDialog(async () => {
           await saveCompanyHoliday(data);
@@ -121,8 +120,17 @@ const CompanyHoliday: React.FC<Props> = ({ holidays, abilities }) => {
     },
   });
 
+  function getHolidayButtonText(isEditable: boolean, isEdit: boolean) {
+    if (!isEditable) {
+      return "Bank Holiday";
+    } else if (isEdit) {
+      return "Edit Holiday";
+    } else {
+      return "Create Holiday";
+    }
+  }
+
   return (
-    <>
       <FormProvider {...formProps}>
         <FullCalendar
           plugins={[dayGridPlugin, interactionPlugin, listPlugin]}
@@ -146,11 +154,7 @@ const CompanyHoliday: React.FC<Props> = ({ holidays, abilities }) => {
           open={maintainHoliday && open}
           onClose={handleClose}
           title={
-            !editable
-              ? "Bank Holiday"
-              : isEdit
-                ? "Edit Holiday"
-                : "Create Holiday"
+            getHolidayButtonText(editable, isEdit)
           }
           content={dateContent}
           actions={
@@ -175,7 +179,6 @@ const CompanyHoliday: React.FC<Props> = ({ holidays, abilities }) => {
           editable={editable}
         />
       </FormProvider>
-    </>
   );
 };
 

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -6,7 +6,7 @@ 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 } from "@mui/material";
+import { Button, ButtonGroup, Stack, Tab, Tabs, TabsProps, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField } 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";
@@ -17,6 +17,9 @@ import { GridCellEditStartReasons, GridCellParams, GridColDef, GridEventListener
 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";
 
 interface Props {
   issuedInvoice: issuedInvoiceList[];
@@ -263,10 +266,10 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
 
   const handleSaveDialog = async () => {
     // setDialogOpen(false);
-    const response = await updateInvoice(selectedRow[0])
+    await updateInvoice(selectedRow[0])
     setDialogOpen(false);
     successDialog(t("Update Success"), t).then(() => {
-      // window.location.reload()
+      window.location.reload()
     })
 
     // console.log(selectedRow[0])
@@ -322,6 +325,16 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
         headerName: t("Settle Date"), 
         editable: true,
         flex: 0.4,
+        // renderCell: (params) => {
+        //   console.log(params)
+        //   return (
+        //     <LocalizationProvider dateAdapter={AdapterDayjs}>
+        //       <DatePicker
+        //         value={dayjs(params.value)}
+        //       />
+        //     </LocalizationProvider>
+        //   );
+        // }
       },
       { field: "receivedAmount", 
         headerName: t("Actual Received Amount (HKD)"), 

src/components/SearchResults/SearchResults.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import Paper from "@mui/material/Paper";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -60,6 +60,10 @@ function SearchResults<T extends ResultWithId>({
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const { t } = useTranslation()
 
+  useEffect(() => {
+    setPage(0);
+  }, [items]);
+
   const handleChangePage: TablePaginationProps["onPageChange"] = (
     _event,
     newPage,