create and list restuarant payment method

src/config/Pages.ts

@@ -12,7 +12,7 @@ export const Pages = {
   },
   payment_methods: {
     list: "/payment_methods/list",
-    add: "/payment_methods/add",
+    add: "/payment_methods/create",
     update: "/payment_methods/update/",
   },
   foods: {

src/pages/paymentMethods/Create.tsx

@@ -0,0 +1,106 @@
+import { type FC } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import Switch from '@/components/Switch'
+import type { CreateRestaurantPaymentMethodType, PaymentMethod } from './types/Types'
+import { useCreateRestaurantPaymentMethod, useGetPaymentMethods } from './hooks/usePaymentMethodData'
+import { Pages } from '@/config/Pages'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+
+const CreatePaymentMethod: FC = () => {
+    const navigate = useNavigate()
+    const { mutate: createPaymentMethod, isPending } = useCreateRestaurantPaymentMethod()
+    const { data: paymentMethodsData } = useGetPaymentMethods()
+
+    const paymentMethods = paymentMethodsData?.data?.map((method: PaymentMethod) => ({
+        label: method.name,
+        value: method.id
+    })) || []
+
+    const formik = useFormik<CreateRestaurantPaymentMethodType>({
+        initialValues: {
+            paymentMethodId: '',
+            merchantId: '',
+            isActive: true,
+        },
+        validationSchema: Yup.object().shape({
+            paymentMethodId: Yup.string().required('روش پرداخت الزامی است'),
+            merchantId: Yup.string().required('شناسه مرچنت الزامی است'),
+            isActive: Yup.boolean(),
+        }),
+        onSubmit: (values) => {
+            createPaymentMethod(values, {
+                onSuccess: () => {
+                    toast.success('روش پرداخت با موفقیت ایجاد شد')
+                    navigate(Pages.payment_methods.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            })
+        },
+    })
+
+    return (
+        <div className='mt-5'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-lg font-light'>
+                    افزودن روش پرداخت
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isloading={isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='white' />
+                            <div>ثبت روش پرداخت</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <div className='bg-white rounded-3xl p-6'>
+                    <div className='mb-4'>
+                        <Select
+                            label='روش پرداخت'
+                            name='paymentMethodId'
+                            value={formik.values.paymentMethodId}
+                            onChange={formik.handleChange}
+                            items={paymentMethods}
+                            placeholder='روش پرداخت را انتخاب کنید'
+                            error_text={formik.touched.paymentMethodId && formik.errors.paymentMethodId ? formik.errors.paymentMethodId : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label='شناسه مرچنت'
+                            name='merchantId'
+                            value={formik.values.merchantId}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.merchantId && formik.errors.merchantId ? formik.errors.merchantId : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Switch
+                            active={formik.values.isActive}
+                            onChange={(value) => formik.setFieldValue('isActive', value)}
+                            label='فعال'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreatePaymentMethod

src/pages/paymentMethods/List.tsx

@@ -1,9 +1,70 @@
 import { type FC } from 'react'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { Add } from 'iconsax-react'
+import Button from '@/components/Button'
+import { useGetRestaurantPaymentMethods, useDeleteRestaurantPaymentMethod } from './hooks/usePaymentMethodData'
+import { usePaymentMethodFilters } from './hooks/usePaymentMethodFilters'
+import { getPaymentMethodTableColumns } from './components/PaymentMethodTableColumns'
+import { usePaymentMethodFiltersFields } from './components/PaymentMethodFiltersFields'
+import { Link } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
 
 const PaymentMethodsList: FC = () => {
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    } = usePaymentMethodFilters()
+
+    const { data: restaurantPaymentMethodsData, isLoading } = useGetRestaurantPaymentMethods(apiParams)
+    const { mutate: deletePaymentMethod, isPending: isDeleting } = useDeleteRestaurantPaymentMethod()
+
+    const paymentMethods = restaurantPaymentMethodsData?.data || []
+    const columns = getPaymentMethodTableColumns({
+        onDelete: (id: string) => deletePaymentMethod(id),
+        isDeleting
+    })
+    const filterFields = usePaymentMethodFiltersFields()
+
+    const totalPages = Math.ceil(paymentMethods.length / limit) || 1
+
     return (
         <div className='mt-5'>
+            <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>لیست روش های پرداخت</h1>
+                <Link to={Pages.payment_methods.add}>
+                    <Button className='w-fit px-6'>
+                        <div className='flex gap-2 items-center'>
+                            <Add color='#fff' size={20} />
+                            <span>افزودن روش پرداخت</span>
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={filterFields}
+                    onChange={handleFiltersChange}
+                    initialValues={filters}
+                    searchField="search"
+                />
+            </div>
+
+            <Table
+                columns={columns}
+                data={paymentMethods}
+                isloading={isLoading}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
         </div>
     )
 }

src/pages/paymentMethods/components/PaymentMethodFiltersFields.tsx

@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+import type { FieldType } from '@/components/Filters'
+
+export const usePaymentMethodFiltersFields = (): FieldType[] => {
+    return useMemo(() => [
+        {
+            type: 'input',
+            name: 'search',
+            placeholder: 'جستجو',
+        },
+    ], [])
+}
+

src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx

@@ -0,0 +1,76 @@
+import type { ColumnType } from '@/components/types/TableTypes'
+import type { PaymentMethod } from '../types/Types'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { Eye } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
+import Status from '@/components/Status'
+
+interface GetPaymentMethodTableColumnsParams {
+    onDelete?: (id: string) => void
+    isDeleting?: boolean
+}
+
+export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymentMethodTableColumnsParams = {}): ColumnType<PaymentMethod>[] => {
+    return [
+        {
+            key: 'name',
+            title: 'نام',
+        },
+        {
+            key: 'keyName',
+            title: 'کلید',
+        },
+        {
+            key: 'description',
+            title: 'توضیحات',
+        },
+        {
+            key: 'isActive',
+            title: 'وضعیت',
+            render: (item: PaymentMethod) => {
+                return (
+                    <Status 
+                        variant={item.isActive ? 'success' : 'error'} 
+                        label={item.isActive ? 'فعال' : 'غیرفعال'} 
+                    />
+                )
+            }
+        },
+        {
+            key: 'order',
+            title: 'ترتیب',
+        },
+        {
+            key: 'createdAt',
+            title: 'تاریخ ایجاد',
+            render: (item: PaymentMethod) => {
+                return new Date(item.createdAt).toLocaleDateString('fa-IR')
+            }
+        },
+        {
+            key: 'actions',
+            title: '',
+            render: (item: PaymentMethod) => {
+                return (
+                    <div className='flex gap-2 items-center'>
+                        <Link to={Pages.payment_methods.update + item.id}>
+                            <Eye
+                                size={20}
+                                color='#8C90A3'
+                                className='cursor-pointer'
+                            />
+                        </Link>
+                        {onDelete && (
+                            <TrashWithConfrim
+                                onDelete={() => onDelete(item.id)}
+                                isloading={isDeleting}
+                            />
+                        )}
+                    </div>
+                )
+            }
+        },
+    ]
+}
+

src/pages/paymentMethods/hooks/usePaymentMethodData.ts

@@ -1,5 +1,6 @@
 import * as api from "../service/PaymentMethodService";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { GetRestaurantPaymentMethodsParams } from "../types/Types";
 
 export const useGetPaymentMethods = () => {
   return useQuery({
@@ -8,9 +9,35 @@ export const useGetPaymentMethods = () => {
   });
 };
 
-export const useGetRestaurantPaymentMethods = () => {
+export const useGetRestaurantPaymentMethods = (
+  params?: GetRestaurantPaymentMethodsParams
+) => {
   return useQuery({
-    queryKey: ["restaurant-payment-methods"],
+    queryKey: ["restaurant-payment-methods", params],
-    queryFn: api.getRestaurantPaymentMethods,
+    queryFn: () => api.getRestaurantPaymentMethods(params),
+  });
+};
+
+export const useCreateRestaurantPaymentMethod = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createRestaurantPaymentMethod,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["restaurant-payment-methods"],
+      });
+    },
+  });
+};
+
+export const useDeleteRestaurantPaymentMethod = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.deleteRestaurantPaymentMethod,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["restaurant-payment-methods"],
+      });
+    },
   });
 };

src/pages/paymentMethods/hooks/usePaymentMethodFilters.ts

@@ -0,0 +1,43 @@
+import { useState, useMemo } from "react";
+import type { FilterValues } from "@/components/Filters";
+import type { GetRestaurantPaymentMethodsParams } from "../types/Types";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const usePaymentMethodFilters = () => {
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  const apiParams = useMemo<GetRestaurantPaymentMethodsParams>(() => {
+    const params: GetRestaurantPaymentMethodsParams = {
+      page: currentPage,
+      limit: limit,
+    };
+
+    if (filters.search) {
+      params.search = filters.search;
+    }
+
+    return params;
+  }, [filters, currentPage, limit]);
+
+  const handleFiltersChange = (newFilters: FilterValues) => {
+    setFilters(newFilters);
+    setCurrentPage(DEFAULT_PAGE);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+    limit,
+  };
+};

src/pages/paymentMethods/service/PaymentMethodService.ts

@@ -1,11 +1,41 @@
 import axios from "@/config/axios";
+import type {
+  CreateRestaurantPaymentMethodType,
+  GetRestaurantPaymentMethodsParams,
+  PaymentMethodsResponse,
+  RestaurantPaymentMethodsResponse,
+} from "../types/Types";
 
-export const getPaymentMethods = async () => {
+export const getPaymentMethods = async (): Promise<PaymentMethodsResponse> => {
-  const { data } = await axios.get("/admin/payment-methods");
+  const { data } = await axios.get<PaymentMethodsResponse>(
+    "/admin/payment-methods"
+  );
   return data;
 };
 
-export const getRestaurantPaymentMethods = async () => {
+export const getRestaurantPaymentMethods = async (
-  const { data } = await axios.get("/admin/restaurant-payment-methods");
+  params?: GetRestaurantPaymentMethodsParams
+): Promise<RestaurantPaymentMethodsResponse> => {
+  const { data } = await axios.get<RestaurantPaymentMethodsResponse>(
+    "/admin/restaurant-payment-methods",
+    { params }
+  );
+  return data;
+};
+
+export const deleteRestaurantPaymentMethod = async (id: string) => {
+  const { data } = await axios.delete(
+    `/admin/restaurant-payment-methods/${id}`
+  );
+  return data;
+};
+
+export const createRestaurantPaymentMethod = async (
+  params: CreateRestaurantPaymentMethodType
+) => {
+  const { data } = await axios.post(
+    "/admin/restaurant-payment-methods",
+    params
+  );
   return data;
 };

src/pages/paymentMethods/types/Types.ts

@@ -0,0 +1,30 @@
+import type { IResponse } from "@/types/response.types";
+
+export type PaymentMethod = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  keyName: string;
+  description: string;
+  icon: string | null;
+  isActive: boolean;
+  order: number;
+};
+
+export type PaymentMethodsResponse = IResponse<PaymentMethod[]>;
+
+export type RestaurantPaymentMethodsResponse = IResponse<PaymentMethod[]>;
+
+export type CreateRestaurantPaymentMethodType = {
+  paymentMethodId: string;
+  merchantId: string;
+  isActive: boolean;
+};
+
+export type GetRestaurantPaymentMethodsParams = {
+  page?: number;
+  limit?: number;
+  search?: string;
+};

src/router/Main.tsx

@@ -25,6 +25,7 @@ import UpdateRole from '@/pages/roles/Update'
 import UpdateSchedule from '@/pages/schedule/Update'
 import Setting from '@/pages/settings/Setting'
 import PaymentMethodsList from '@/pages/paymentMethods/List'
+import CreatePaymentMethod from '@/pages/paymentMethods/Create'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -62,6 +63,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.setting} element={<Setting />} />
 
                             <Route path={Pages.payment_methods.list} element={<PaymentMethodsList />} />
+                            <Route path={Pages.payment_methods.add} element={<CreatePaymentMethod />} />
                         </Routes>
                     </div>
                 </div>