paginate false

src/langs/fa.json

@@ -488,7 +488,10 @@
     "4": "چهارماهه",
     "5": "سالانه",
     "maxRecurringCycles": "حداکثر تعداد تکرار دوره",
-    "WAIT_PAYMENT": "در انتظار پرداخت"
+    "WAIT_PAYMENT": "در انتظار پرداخت",
+    "overdue": "سررسید شده",
+    "OVERDUE": "سررسید شده",
+    "lateFee": "مبلغ پرداختی"
   },
   "edit": "ویرایش",
   "transaction": {

src/pages/customer/hooks/useCustomerData.ts

@@ -2,10 +2,10 @@ import * as api from "../service/CustomerService";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const useGetCustomers = (page: number) => {
+export const useGetCustomers = (page: number, withoutPaginate?: boolean) => {
   return useQuery({
     queryKey: ["customers", page],
-    queryFn: () => api.getCustomers(page),
+    queryFn: () => api.getCustomers(page, withoutPaginate),
   });
 };
 

src/pages/customer/service/CustomerService.ts

@@ -1,8 +1,10 @@
 import axios from "../../../config/axios";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const getCustomers = async (page: number) => {
+export const getCustomers = async (page: number, withoutPaginate?: boolean) => {
-  const { data } = await axios.get(`/users/customers?page=${page}`);
+  const { data } = await axios.get(
+    `/users/customers?page=${page}&paginate=${withoutPaginate ? "0" : "1"}`
+  );
   return data;
 };
 

src/pages/receipts/Create.tsx

@@ -26,7 +26,7 @@ const CreateReceipt: FC = () => {
     const [isRecurring, setIsRecurring] = useState<boolean>(false)
     const [type, setType] = useState<ReceiptTypeEnum>(ReceiptTypeEnum.DAILY)
     const [maxRecurringCycles, setMaxRecurringCycles] = useState<number>(0)
-    const getCustomers = useGetCustomers(1)
+    const getCustomers = useGetCustomers(1, true)
     const createInvoice = useCreateInvoice()
 
     const formik = useFormik<ReceiptCreateItemsType>({

src/pages/receipts/List.tsx

@@ -13,7 +13,7 @@ import DatePickerComponent from '../../components/DatePicker'
 import { useSearchParams } from 'react-router-dom'
 import moment from 'moment-jalaali'
 import Pagination from '../../components/Pagination'
-type ActiveTabType = "PENDING" | "WAIT_PAYMENT" | "PAID" | "CANCELLED" | "EXPIRED" | ""
+type ActiveTabType = "PENDING" | "WAIT_PAYMENT" | "PAID" | "CANCELLED" | "EXPIRED" | "" | "OVERDUE"
 
 const ReceiptsList: FC = () => {
 
@@ -111,6 +111,11 @@ const ReceiptsList: FC = () => {
                             label: t('receip.archive'),
                             value: 'EXPIRED'
                         },
+                        {
+                            icon: <CloseCircle color={activeTab === 'OVERDUE' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.overdue'),
+                            value: 'OVERDUE'
+                        }
                     ]}
                     onChange={(value) => setActiveTab(value as ActiveTabType)}
                 />
@@ -131,6 +136,7 @@ const ReceiptsList: FC = () => {
                                     <Td text={t('receip.date_receipt')} />
                                     <Td text={t('receip.last_date_receipt')} />
                                     <Td text={t('receip.total')} />
+                                    <Td text={t('receip.lateFee')} />
                                     <Td text={t('receip.service')} />
                                     <Td text={t('receip.status')} />
                                     <Td text={t('receip.status_paid')} />
@@ -149,7 +155,8 @@ const ReceiptsList: FC = () => {
                                                 <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                                 <Td text={moment(item.dueDate).format('jYYYY/jMM/jDD')} />
                                                 <Td text={NumberFormat(item.totalPrice)} />
-                                                <Td text={t('receip.service')} />
+                                                <Td text={NumberFormat(item.lateFee)} />
+                                                <Td text={item.items[0]?.name} />
                                                 <Td text={item.status === 'APPROVED' || item.status === 'PAID' ? t('receip.approved') : t('receip.pending')} />
                                                 <Td text={t(`receip.${item.status}`)} />
                                                 <Td text=''>

src/pages/receipts/types/ReceiptTypes.ts

@@ -34,6 +34,7 @@ export type ReceiptItemType = {
   isRecurring: boolean;
   recurringPeriod?: number;
   maxRecurringCycles?: number;
+  lateFee: number;
 };
 
 export type InvoiceUserItemType = {