subscription list

src/pages/subscriptions/List.tsx

@@ -0,0 +1,137 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGetUserSubscriptions } from './hooks/useSucscriptionData'
+import PageLoading from '../../components/PageLoading'
+import Td from '../../components/Td'
+import Pagination from '../../components/Pagination'
+import { UserSubscriptionsResponse, UserSubscription } from './types/SubscriptionTypes'
+import moment from 'moment-jalaali'
+
+const SubscriptionsList: FC = () => {
+    const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const { data: subscriptionsResponse, isLoading } = useGetUserSubscriptions(page)
+
+    const subscriptionsData = (subscriptionsResponse as UserSubscriptionsResponse | undefined)?.data
+    const subscriptionsList = subscriptionsData?.userSubscriptions || []
+    const totalPages = subscriptionsData?.pager?.totalPages || 1
+
+    const formatJalaliDate = (date: string): string => {
+        return moment(date).format('jYYYY-jMM-jDD')
+    }
+
+    const calculateDaysRemaining = (endDate: string): string => {
+        const end = moment(endDate)
+        const now = moment()
+        const diff = end.diff(now, 'days')
+        if (diff < 0) {
+            return t('subscription.expired')
+        }
+        return `${diff} ${t('subscription.days')}`
+    }
+
+    const getStatusBadgeClass = (status: string): string => {
+        switch (status) {
+            case 'ACTIVE':
+                return 'bg-green-100 text-green-700'
+            case 'EXPIRED':
+                return 'bg-red-100 text-red-700'
+            case 'CANCELLED':
+                return 'bg-gray-100 text-gray-700'
+            case 'INACTIVE':
+                return 'bg-yellow-100 text-yellow-700'
+            default:
+                return 'bg-blue-100 text-blue-700'
+        }
+    }
+
+    const getStatusText = (status: string): string => {
+        switch (status) {
+            case 'ACTIVE':
+                return t('subscription.active')
+            case 'EXPIRED':
+                return t('subscription.expired')
+            case 'CANCELLED':
+                return t('subscription.cancelled')
+            case 'INACTIVE':
+                return t('subscription.inactive')
+            default:
+                return status
+        }
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    {t('subscription.list_subscriptions')}
+                </div>
+            </div>
+
+            {isLoading ? (
+                <PageLoading />
+            ) : (
+                <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('subscription.id')} />
+                                <Td text={t('auth.name')} />
+                                <Td text={t('auth.family')} />
+                                <Td text={t('auth.phonen_number')} />
+                                <Td text={t('subscription.service')} />
+                                <Td text={t('subscription.plan')} />
+                                <Td text={t('subscription.subscription_start_date')} />
+                                <Td text={t('subscription.subscription_end_date')} />
+                                <Td text={t('subscription.days_remaining')} />
+                                <Td text={t('status')} />
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {subscriptionsList.map((item: UserSubscription) => (
+                                <tr key={item.id} className='tr'>
+                                    <Td text={item.id} />
+                                    <Td text={item.user.firstName || '-'} />
+                                    <Td text={item.user.lastName || '-'} />
+                                    <Td text={item.user.phone || '-'} />
+                                    <Td text={item.plan.service?.name || item.plan.service?.title || '-'} />
+                                    <Td text={item.plan.name || '-'} />
+                                    <Td text=''>
+                                        <div className='dltr text-right'>
+                                            {formatJalaliDate(item.startDate)}
+                                        </div>
+                                    </Td>
+                                    <Td text=''>
+                                        <div className='dltr text-right'>
+                                            {formatJalaliDate(item.endDate)}
+                                        </div>
+                                    </Td>
+                                    <Td text=''>
+                                        <div className='dltr text-right'>
+                                            {calculateDaysRemaining(item.endDate)}
+                                        </div>
+                                    </Td>
+                                    <Td text=''>
+                                        <div className={`w-fit px-3 py-1 rounded-2xl text-xs ${getStatusBadgeClass(item.status)}`}>
+                                            {getStatusText(item.status)}
+                                        </div>
+                                    </Td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+
+                    {totalPages > 1 && (
+                        <Pagination
+                            currentPage={page}
+                            totalPages={totalPages}
+                            onPageChange={setPage}
+                        />
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default SubscriptionsList

src/pages/subscriptions/hooks/useSucscriptionData.ts

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

src/pages/subscriptions/service/SubscriptionService.ts

@@ -0,0 +1,8 @@
+import axios from "../../../config/axios";
+
+export const getUserSubscriptions = async (page: number) => {
+  const { data } = await axios.get(
+    `/subscriptions/admin/user-subscriptions/all?page=${page}`
+  );
+  return data;
+};

src/pages/subscriptions/types/SubscriptionTypes.ts

@@ -0,0 +1,71 @@
+export interface SubscriptionUser {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  email: string | null;
+  phone: string;
+  userName: string;
+  firstName: string;
+  lastName: string;
+  birthDate: string | null;
+  nationalCode: string | null;
+  profilePic: string | null;
+  emailVerified: boolean;
+  financialType: string | null;
+  deletedAt: string | null;
+}
+
+export interface SubscriptionService {
+  name: string;
+  title: string;
+}
+
+export interface SubscriptionPlan {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  duration: number;
+  isFree: boolean;
+  price: number;
+  originalPrice: number;
+  isActive: boolean;
+  service: SubscriptionService;
+  deletedAt: string | null;
+}
+
+export interface UserSubscription {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  user: SubscriptionUser;
+  plan: SubscriptionPlan;
+  startDate: string;
+  endDate: string;
+  businessName: string;
+  businessPhone: string;
+  description: string | null;
+  slug: string;
+  status: string;
+}
+
+export interface SubscriptionPager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  prevPage: boolean | string;
+  nextPage: string | null;
+}
+
+export interface UserSubscriptionsData {
+  pager: SubscriptionPager;
+  userSubscriptions: UserSubscription[];
+  pagination: boolean;
+}
+
+export interface UserSubscriptionsResponse {
+  statusCode: number;
+  success: boolean;
+  data: UserSubscriptionsData;
+}