bills

src/config/Pages.ts

@@ -125,7 +125,6 @@ export const Pages = {
   bill: {
     createBillWater: "/receipts/bill/water/create",
     createBillCharge: "/receipts/bill/charge/create",
-    ListBillWater: "/receipts/bill/water/list",
-    ListBillCharge: "/receipts/bill/charge/list",
+    list: "/receipts/bills/list",
   },
 };

src/langs/fa.json

@@ -861,6 +861,16 @@
     "register_date": "تاریخ ثبت نام",
     "company": "شرکت"
   },
+  "bill": {
+    "list": "لیست قبض‌ها",
+    "row": "ردیف",
+    "created_at": "تاریخ ایجاد",
+    "type": "نوع",
+    "business": "کسب‌وکار",
+    "invoice_count": "تعداد صورتحساب",
+    "water_bill": "قبض آب",
+    "monthly_charge": "شارژ ماهانه"
+  },
   "request": {
     "request_list": "لیست درخواست ها",
     "details": "جزئیات درخواست",

src/pages/bill/List.tsx

@@ -0,0 +1,74 @@
+import { FC, Fragment, useState } from 'react'
+import { useGetBills } from './hooks/useBillData'
+import Td from '../../components/Td'
+import PageLoading from '../../components/PageLoading'
+import { BillItemType } from './types/Types'
+import moment from 'moment-jalaali'
+import Pagination from '../../components/Pagination'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { Eye } from 'iconsax-react'
+
+const BillsList: FC = () => {
+    const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const { data, isLoading } = useGetBills(page)
+
+    const getBillTypeLabel = (type: BillItemType['type']) => {
+        return type === 'water_bill' ? t('bill.water_bill') : t('bill.monthly_charge')
+    }
+
+    return (
+        <div className="mt-4">
+            <div>{t('bill.list')}</div>
+            {isLoading ? (
+                <PageLoading />
+            ) : (
+                <Fragment>
+                    <div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
+                        <table className="w-full text-sm">
+                            <thead className="thead">
+                                <tr>
+                                    <Td text={t('bill.row')} />
+                                    <Td text={t('bill.created_at')} />
+                                    <Td text={t('bill.type')} />
+                                    <Td text={t('bill.invoice_count')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {data?.data?.bills?.map((item: BillItemType, index: number) => (
+                                    <tr key={item.id} className="tr hover:bg-gray-50">
+                                        <Td text={String((page - 1) * 10 + index + 1)} />
+                                        <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
+                                        <Td text={getBillTypeLabel(item.type)} />
+                                        <Td text={''}>
+                                            <Link to={Pages.receipts.index + `?bill=${item.id}`}>
+                                                {item.invoiceCount}
+                                            </Link>
+                                        </Td>
+                                        <Td text={''}>
+                                            <Link to={Pages.receipts.index + `?bill=${item.id}`}>
+                                                <Eye size={20} color="#8C90A3" />
+                                            </Link>
+                                        </Td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div className="flex justify-end pb-4">
+                        <Pagination
+                            currentPage={page}
+                            totalPages={data?.data?.pager?.totalPages ?? 1}
+                            onPageChange={setPage}
+                        />
+                    </div>
+                </Fragment>
+            )}
+        </div>
+    )
+}
+
+export default BillsList

src/pages/bill/hooks/useBillData.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/Service";
 
 export const useCreateBill = () => {
@@ -12,3 +12,10 @@ export const useCreateCharge = () => {
     mutationFn: api.createChargeBill,
   });
 };
+
+export const useGetBills = (page: number = 1) => {
+  return useQuery({
+    queryKey: ["bills", page],
+    queryFn: () => api.getBills(page),
+  });
+};

src/pages/bill/service/Service.ts

@@ -10,3 +10,8 @@ export const createChargeBill = async (params: CreateBillChargeType) => {
   const { data } = await axios.post("/bills/charge", params);
   return data;
 };
+
+export const getBills = async (page: number = 1) => {
+  const { data } = await axios.get(`/bills?page=${page}`);
+  return data;
+};

src/pages/bill/types/Types.ts

@@ -11,3 +11,13 @@ export type CreateBillChargeType = {
   chargeRate: number;
   dueDays: number;
 };
+
+export type BillItemType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  type: 'water_bill' | 'monthly_charge';
+  business: string;
+  invoiceCount: number;
+};

src/router/Main.tsx

@@ -57,6 +57,7 @@ import UpdateSlider from '../pages/slider/Update'
 import CreateSlider from '../pages/slider/Create'
 import CreateBill from '../pages/bill/Create'
 import CreateCharge from '../pages/bill/CreateCharge'
+import BillsList from '../pages/bill/List'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -128,6 +129,7 @@ const MainRouter: FC = () => {
 
                             <Route path={Pages.bill.createBillWater} element={<CreateBill />} />
                             <Route path={Pages.bill.createBillCharge} element={<CreateCharge />} />
+                            <Route path={Pages.bill.list} element={<BillsList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/components/ReceiptSubMenu.tsx

@@ -30,7 +30,7 @@ const ReceiptSubMenu: FC = () => {
             <div className='flex flex-col mt-10 gap-4'>
                 <SubMenuItem
                     title={t('receip.receip_list')}
-                    isActive={isActive('list')}
+                    isActive={isActive('receipts/list')}
                     link={Pages.receipts.index}
                 />
                 <SubMenuItem
@@ -41,7 +41,7 @@ const ReceiptSubMenu: FC = () => {
 
                 <SubMenuItem
                     title={'صدور قبض آب'}
-                    isActive={isActive('bills')}
+                    isActive={isActive('water/create')}
                     link={Pages.bill.createBillWater}
                 />
 
@@ -51,11 +51,11 @@ const ReceiptSubMenu: FC = () => {
                     link={Pages.bill.createBillCharge}
                 />
 
-                {/* <SubMenuItem
+                <SubMenuItem
                     title={'قبض ها'}
-                    isActive={isActive('bills')}
-                    link={Pages.bill.create}
-                /> */}
+                    isActive={isActive('bills/list')}
+                    link={Pages.bill.list}
+                />
             </div>
         </div>
     )