plan users

src/pages/support/List.tsx

@@ -41,17 +41,28 @@ const SupportList: FC = () => {
                             <Td text={t('support.plan_name')} />
                             <Td text={t('support.price')} />
                             <Td text={t('support.duration')} />
+                            <Td text={t('support.users')} />
                             <Td text={''} />
                         </tr>
                     </thead>
                     <tbody>
                         {
-                            data?.data?.supportPlans?.map((item: { id: string, name: string, price: number, duration: string }) => {
+                            data?.data?.supportPlans?.map((item: { id: string, name: string, price: number, duration: string, userCount: number }) => {
                                 return (
                                     <tr className='tr' key={item.id}>
                                         <Td text={item.name} />
                                         <Td text={NumberFormat(item.price)} />
                                         <Td text={item.duration} />
+                                        <Td text={''}>
+                                            <Link to={Pages.support.planUsers + item.id}>
+                                                <div className='flex items-center gap-2 text-blue-500'>
+                                                    <div>
+                                                        {item.userCount}
+                                                    </div>
+                                                    کاربر
+                                                </div>
+                                            </Link>
+                                        </Td>
                                         <Td text={''}>
                                             <div className='flex items-center gap-2'>
                                                 <Link to={Pages.support.detail + item.id}>

src/pages/support/PlanUsers.tsx

@@ -0,0 +1,56 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGetPlanUsers } from './hooks/useSupportData'
+import { useParams } from 'react-router-dom'
+import Td from '../../components/Td'
+import moment from 'moment-jalaali'
+import { PlanItemUserType } from './types/SupportTypes'
+const PlanUsers: FC = () => {
+
+    const { t } = useTranslation('global')
+    const { id } = useParams()
+    const { data } = useGetPlanUsers(id)
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('support.plan_users')} {data?.data?.users?.[0]?.supportPlan?.name}
+            </div>
+
+            <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('support.full_name')} />
+                            <Td text={t('support.start_date')} />
+                            <Td text={t('support.end_date')} />
+                            <Td text={t('support.status')} />
+                            <Td text={''} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data?.data?.users?.map((item: PlanItemUserType) => (
+                            <tr className='tr' key={item.id}>
+                                <Td text={item.user.firstName + ' ' + item.user.lastName} />
+                                <Td text={''}>
+                                    <div className='dltr text-right'>
+                                        {moment(item.startDate).format('jYYYY/jMM/jDD HH:mm')}
+                                    </div>
+                                </Td>
+                                <Td text={''}>
+                                    <div className='dltr text-right'>
+                                        {moment(item.endDate).format('jYYYY/jMM/jDD HH:mm')}
+                                    </div>
+                                </Td>
+                                <Td text={t(`support.${item.status}`)} />
+                                <Td text={''} />
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default PlanUsers

src/pages/support/enum/SupportEnum.ts

@@ -1,11 +1,13 @@
 export enum SupportPlanFeatureKey {
   LEARNING_DOCS = "learning_docs", // راهنما و مستندات آموزشی
   TICKET_SUPPORT = "ticket_support", // ارسال تیکت
+  TICKET_LIMIT = "ticket_limit", // ظرفیت ارسال تیکت
   RESPONSE_TIME = "response_time", // زمان پاسخگویی به تیکت
   PHONE_SUPPORT = "phone_support", // پاسخگویی تلفنی
-  BACKUP_VERSION = "backup_version", // نسخه بکاپ
+  TECHNICAL_ISSUE_RESOLUTION = "technical_issue_resolution", // رفع ایراد فنی
   TECHNICAL_EXPERT_ACCESS = "technical_expert_access", // دسترسی به متخصصین فنی
+  BACKUP_VERSION = "backup_version", // نسخه بکاپ
+  SERVICE_FUNCTIONALITY_TEST = "service_functionality_test", // تست عملکرد سرویس
   ON_SITE_SUPPORT = "on_site_support", // پشتیبانی در محل
   ON_SITE_TRAINING = "on_site_training", // آموزش در محل
-  TICKET_LIMIT = "ticket_limit", // ظرفیت ارسال تیکت
 }

src/pages/support/hooks/useSupportData.ts

@@ -34,3 +34,11 @@ export const useDeletePlan = () => {
     mutationFn: (id: string) => api.deletePlan(id),
   });
 };
+
+export const useGetPlanUsers = (id?: string) => {
+  return useQuery({
+    queryKey: ["plan-users", id],
+    queryFn: () => api.getPlanUsers(id),
+    enabled: !!id,
+  });
+};

src/pages/support/service/SupportService.ts

@@ -25,3 +25,8 @@ export const deletePlan = async (id: string) => {
   const { data } = await axios.delete(`/support-plans/${id}`);
   return data;
 };
+
+export const getPlanUsers = async (id?: string) => {
+  const { data } = await axios.get(`/support-plans/${id}/users`);
+  return data;
+};

src/pages/support/types/SupportTypes.ts

@@ -10,3 +10,40 @@ export type CreatePlanType = {
     featureType: "boolean" | "text";
   }[];
 };
+
+export type PlanItemUserType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  user: {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    email: string;
+    phone: string;
+    userName: string;
+    firstName: string;
+    lastName: string;
+    birthDate: string;
+    nationalCode: string;
+    profilePic: string | null;
+    emailVerified: boolean;
+    financialType: string;
+    deletedAt: string | null;
+  };
+  supportPlan: {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name: string;
+    description: string;
+    price: number;
+    isFree: boolean;
+    duration: number;
+    isActive: boolean;
+    deletedAt: string | null;
+  };
+  startDate: string;
+  endDate: string;
+  status: string;
+};