Delete bill

src/pages/bill/List.tsx

@@ -1,5 +1,5 @@
 import { FC, Fragment, useState } from 'react'
-import { useGetBills } from './hooks/useBillData'
+import { useDeleteBill, useGetBills } from './hooks/useBillData'
 import Td from '../../components/Td'
 import PageLoading from '../../components/PageLoading'
 import { BillItemType } from './types/Types'
@@ -9,11 +9,13 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { Eye } from 'iconsax-react'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
 
 const BillsList: FC = () => {
     const { t } = useTranslation('global')
     const [page, setPage] = useState<number>(1)
-    const { data, isLoading } = useGetBills(page)
+    const { data, isLoading, refetch } = useGetBills(page)
+    const { mutate: deleteBill, isPending } = useDeleteBill()
 
     const getBillTypeLabel = (type: BillItemType['type']) => {
         return type === 'water_bill' ? t('bill.water_bill') : t('bill.monthly_charge')
@@ -49,9 +51,21 @@ const BillsList: FC = () => {
                                             </Link>
                                         </Td>
                                         <Td text={''}>
-                                            <Link to={Pages.receipts.index + `?bill=${item.id}`}>
-                                                <Eye size={20} color="#8C90A3" />
-                                            </Link>
+                                            <div className='flex gap-2'>
+                                                <Link to={Pages.receipts.index + `?bill=${item.id}`}>
+                                                    <Eye size={20} color="#8C90A3" />
+                                                </Link>
+                                                <TrashWithConfrim
+                                                    isLoading={isPending}
+                                                    onDelete={() => {
+                                                        deleteBill(item.id, {
+                                                            onSuccess: () => {
+                                                                refetch()
+                                                            }
+                                                        })
+                                                    }}
+                                                />
+                                            </div>
                                         </Td>
                                     </tr>
                                 ))}

src/pages/bill/hooks/useBillData.ts

@@ -25,3 +25,9 @@ export const useGetBills = (page: number = 1) => {
     queryFn: () => api.getBills(page),
   });
 };
+
+export const useDeleteBill = () => {
+  return useMutation({
+    mutationFn: api.deleteBill,
+  });
+};

src/pages/bill/service/Service.ts

@@ -1,5 +1,9 @@
 import axios from "../../../config/axios";
-import { CreateBillType, CreateBillChargeType, CreateBillWithExcelType } from "../types/Types";
+import {
+  CreateBillType,
+  CreateBillChargeType,
+  CreateBillWithExcelType,
+} from "../types/Types";
 
 export const createBill = async (params: CreateBillType) => {
   const { data } = await axios.post("/bills/water", params);
@@ -26,3 +30,8 @@ export const createBillWithExcel = async (params: CreateBillWithExcelType) => {
   });
   return data;
 };
+
+export const deleteBill = async (id: string) => {
+  const { data } = await axios.delete(`/bills/${id}`);
+  return data;
+};