Add delete Invoice button in edit dialog

src/app/api/invoices/actions.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { serverFetchJson, serverFetchString } from "@/app/utils/fetchUtil";
+import { serverFetchJson, serverFetchString, serverFetchWithNoContent } from "@/app/utils/fetchUtil";
 import { BASE_API_URL } from "@/config/api";
 import { revalidateTag } from "next/cache";
 import { cache } from "react";
@@ -117,4 +117,17 @@ export const updateInvoice = async (data: any) => {
   
   revalidateTag("invoices")
   return updateInvoice;
-}
+}
+
+export const deleteInvoice = async (id: number) => {
+  const invoice = await serverFetchWithNoContent(
+    `${BASE_API_URL}/invoices/${id}`,
+    {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+
+  revalidateTag("invoices");
+  return invoice;
+};

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -8,8 +8,8 @@ import EditNote from "@mui/icons-material/EditNote";
 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 { importIssuedInovice, importReceivedInovice, updateInvoice } from "@/app/api/invoices/actions";
-import { errorDialogWithContent, successDialog } from "../Swal/CustomAlerts";
+import { deleteInvoice, importIssuedInovice, importReceivedInovice, updateInvoice } from "@/app/api/invoices/actions";
+import { deleteDialog, errorDialogWithContent, successDialog } from "../Swal/CustomAlerts";
 import { invoiceList, issuedInvoiceList, issuedInvoiceSearchForm, receivedInvoiceList, receivedInvoiceSearchForm } from "@/app/api/invoices";
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import { GridCellParams, GridColDef, GridEventListener, GridRowId, GridRowModes, GridRowModesModel } from "@mui/x-data-grid";
@@ -43,7 +43,7 @@ type SearchQuery2 = Partial<Omit<receivedInvoiceSearchForm, "id">>;
 type SearchParamNames2 = keyof SearchQuery2;
 
 const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoices }) => {
-  console.log(invoices)
+  // console.log(invoices)
   const { t } = useTranslation("invoices");
   const [tabIndex, setTabIndex] = useState(0);
 
@@ -268,6 +268,19 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
     // setSelectedRow([]);
   };
 
+  const handleDeleteInvoice = useCallback(() => {
+    deleteDialog(async() => {
+      //console.log(selectedRow[0])
+      await deleteInvoice(selectedRow[0].id!!)
+      setDialogOpen(false);
+      const result = await successDialog("Delete Success", t);
+      if (result) {
+        window.location.reload()
+      }
+    }, t)
+  }, [selectedRow]);
+
+
   const handleSaveDialog = async () => {
     // setDialogOpen(false);
     await updateInvoice(selectedRow[0])
@@ -562,6 +575,9 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
       />
       </DialogContent>
       <DialogActions>
+      <Button onClick={handleDeleteInvoice} color="error">
+          {t("Delete")}
+        </Button>
         <Button onClick={handleCloseDialog} color="primary">
           {t("Cancel")}
         </Button>