subscription list

src/config/Pages.ts

@@ -136,4 +136,7 @@ export const Pages = {
       smsCountList: "/dmenu/sms-count/list",
     },
   },
+  subscriptions: {
+    list: "/subscriptions/list",
+  },
 };

src/langs/fa.json

@@ -79,7 +79,8 @@
     "groups_icon": "گروه های آیکون",
     "reports": "گزارش ها",
     "restaurants": "رستوران ها",
-    "sms_count": "تعداد پیامک"
+    "sms_count": "تعداد پیامک",
+    "subscriptions": "اشتراک ها"
   },
   "slider": {
     "new_slider": "اسلایدر جدید",
@@ -894,5 +895,19 @@
     "subscription_end_date": "تاریخ پایان اشتراک",
     "days_remaining": "چند روز مانده"
   },
+  "subscription": {
+    "list_subscriptions": "لیست اشتراک‌ها",
+    "service": "سرویس",
+    "plan": "پلن",
+    "subscription_start_date": "تاریخ شروع اشتراک",
+    "subscription_end_date": "تاریخ پایان اشتراک",
+    "days_remaining": "چند روز مانده",
+    "expired": "منقضی شده",
+    "cancelled": "لغو شده",
+    "active": "فعال",
+    "inactive": "غیرفعال",
+    "days": "روز",
+    "id": "شناسه"
+  },
   "cancel": "لغو"
 }

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

src/router/Main.tsx

@@ -83,6 +83,7 @@ import WarningsList from '../pages/dmenu/report/List.tsx'
 import RestaurantsList from '../pages/dmenu/restaurant/List.tsx'
 import SmsCountList from '../pages/dmenu/restaurant/SmsCountList.tsx'
 import UpdateRestaurant from '../pages/dmenu/restaurant/Update.tsx'
+import SubscriptionsList from '../pages/subscriptions/List.tsx'
 // import WarningsList from '../pages/dmenu/reports/List' // TODO: Create this component
 const MainRouter: FC = () => {
 
@@ -179,6 +180,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.dmenu.restaurants.list} element={<RestaurantsList />} />
                             <Route path={Pages.dmenu.restaurants.smsCountList} element={<SmsCountList />} />
                             <Route path={Pages.dmenu.restaurants.update + ':id'} element={<UpdateRestaurant />} />
+
+                            <Route path={Pages.subscriptions.list} element={<SubscriptionsList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import LogoSmall from '../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
-import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, BagTick } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -187,6 +187,14 @@ const SideBar: FC = () => {
                             activeName='services'
                         />
 
+                        <SideBarItem
+                            icon={<BagTick variant={isActive('subscriptions') ? 'Bold' : 'Outline'} color={isActive('subscriptions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.subscriptions')}
+                            isActive={isActive('subscriptions')}
+                            link={Pages.subscriptions.list}
+                            activeName='payments'
+                        />
+
                     </div>
 
                     {