subscription list

src/components/Select.tsx

@@ -31,7 +31,7 @@ const Select: FC<Props> = (props: Props) => {
             )}>
                 {
                     props.placeholder &&
-                    <option value="" disabled selected>{props.placeholder}</option>
+                    <option value="" disabled selected={!props.value}>{props.placeholder}</option>
                 }
                 {
                     props.items?.map((item) => {

src/pages/subscriptions/List.tsx

@@ -6,11 +6,20 @@ import Td from '../../components/Td'
 import Pagination from '../../components/Pagination'
 import { UserSubscriptionsResponse, UserSubscription } from './types/SubscriptionTypes'
 import moment from 'moment-jalaali'
+import Select from '../../components/Select'
+import Input from '../../components/Input'
+import { useGetAllServices } from '../service/hooks/useServiceData'
+import { ServiceItemType } from '../service/types/ServiceTypes'
 
 const SubscriptionsList: FC = () => {
     const { t } = useTranslation('global')
     const [page, setPage] = useState<number>(1)
-    const { data: subscriptionsResponse, isLoading } = useGetUserSubscriptions(page)
+    const [status, setStatus] = useState<string>('')
+    const [serviceId, setServiceId] = useState<string>('')
+    const [search, setSearch] = useState<string>('')
+
+    const { data: subscriptionsResponse, isLoading } = useGetUserSubscriptions(page, status, serviceId, search)
+    const getServices = useGetAllServices('', 1, '', '', false, 50)
 
     const subscriptionsData = (subscriptionsResponse as UserSubscriptionsResponse | undefined)?.data
     const subscriptionsList = subscriptionsData?.userSubscriptions || []
@@ -37,6 +46,7 @@ const SubscriptionsList: FC = () => {
             case 'EXPIRED':
                 return 'bg-red-100 text-red-700'
             case 'CANCELLED':
+            case 'CANCELED':
                 return 'bg-gray-100 text-gray-700'
             case 'INACTIVE':
                 return 'bg-yellow-100 text-yellow-700'
@@ -52,6 +62,7 @@ const SubscriptionsList: FC = () => {
             case 'EXPIRED':
                 return t('subscription.expired')
             case 'CANCELLED':
+            case 'CANCELED':
                 return t('subscription.cancelled')
             case 'INACTIVE':
                 return t('subscription.inactive')
@@ -68,6 +79,54 @@ const SubscriptionsList: FC = () => {
                 </div>
             </div>
 
+            <div className='flex justify-between items-center mt-12 gap-4'>
+                <div className='flex gap-4'>
+                    <Select
+                        className='w-36'
+                        items={[
+                            { label: t('all'), value: '' },
+                            { label: t('subscription.active'), value: 'ACTIVE' },
+                            { label: t('subscription.inactive'), value: 'INACTIVE' },
+                            { label: t('subscription.cancelled'), value: 'CANCELED' },
+                        ]}
+                        placeholder={t('status')}
+                        value={status}
+                        onChange={(e) => {
+                            setStatus(e.target.value)
+                            setPage(1)
+                        }}
+                    />
+                    <Select
+                        className='w-48'
+                        items={
+                            getServices.data?.data?.services?.map((item: ServiceItemType) => ({
+                                label: item.name,
+                                value: item.id,
+                            })) || []
+                        }
+                        placeholder={t('subscription.service')}
+                        value={serviceId}
+                        onChange={(e) => {
+                            setServiceId(e.target.value)
+                            setPage(1)
+                        }}
+                    />
+                </div>
+                <div className='w-64'>
+                    <Input
+                        variant='search'
+                        placeholder={t('header.search')}
+                        value={search}
+                        className='bg-white'
+                        onChange={(e) => setSearch(e.target.value)}
+                        onChangeSearchFinal={(value) => {
+                            setSearch(value)
+                            setPage(1)
+                        }}
+                    />
+                </div>
+            </div>
+
             {isLoading ? (
                 <PageLoading />
             ) : (
@@ -79,6 +138,8 @@ const SubscriptionsList: FC = () => {
                                 <Td text={t('auth.name')} />
                                 <Td text={t('auth.family')} />
                                 <Td text={t('auth.phonen_number')} />
+                                <Td text='نام کسب‌وکار' />
+                                <Td text='تلفن کسب‌وکار' />
                                 <Td text={t('subscription.service')} />
                                 <Td text={t('subscription.plan')} />
                                 <Td text={t('subscription.subscription_start_date')} />
@@ -94,6 +155,8 @@ const SubscriptionsList: FC = () => {
                                     <Td text={item.user.firstName || '-'} />
                                     <Td text={item.user.lastName || '-'} />
                                     <Td text={item.user.phone || '-'} />
+                                    <Td text={item.businessName || '-'} />
+                                    <Td text={item.businessPhone || '-'} />
                                     <Td text={item.plan.service?.name || item.plan.service?.title || '-'} />
                                     <Td text={item.plan.name || '-'} />
                                     <Td text=''>

src/pages/subscriptions/hooks/useSucscriptionData.ts

@@ -1,9 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import * as api from "../service/SubscriptionService";
 
-export const useGetUserSubscriptions = (page: number) => {
+export const useGetUserSubscriptions = (
+  page: number,
+  status?: string,
+  serviceId?: string,
+  q?: string
+) => {
   return useQuery({
-    queryKey: ["user-subscriptions", page],
-    queryFn: () => api.getUserSubscriptions(page),
+    queryKey: ["user-subscriptions", page, status, serviceId, q],
+    queryFn: () => api.getUserSubscriptions(page, status, serviceId, q),
   });
 };

src/pages/subscriptions/service/SubscriptionService.ts

@@ -1,8 +1,23 @@
 import axios from "../../../config/axios";
 
-export const getUserSubscriptions = async (page: number) => {
+export const getUserSubscriptions = async (
+  page: number,
+  status?: string,
+  serviceId?: string,
+  q?: string
+) => {
+  let query = `?page=${page}`;
+  if (status) {
+    query += `&status=${status}`;
+  }
+  if (serviceId) {
+    query += `&serviceId=${serviceId}`;
+  }
+  if (q) {
+    query += `&q=${q}`;
+  }
   const { data } = await axios.get(
-    `/subscriptions/admin/user-subscriptions/all?page=${page}`
+    `/subscriptions/admin/user-subscriptions/all${query}`
   );
   return data;
 };