bills

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;
+};