list of resellers

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
 # VITE_BASE_URL = 'https://api.danakcorp.com'
-VITE_BASE_URL = 'http://192.168.99.181:3500'
+VITE_BASE_URL = 'http://10.73.49.88:3500'

src/config/Pages.ts

@@ -156,4 +156,7 @@ export const Pages = {
   subscriptions: {
     list: "/customers/subscriptions",
   },
+  reseller: {
+    list: "/reseller/list",
+  },
 };

src/langs/fa.json

@@ -85,7 +85,15 @@
     "subscriptions": "اشتراک ها",
     "financial": "مالی",
     "dmail": "دی میل",
-    "domain": "دامنه"
+    "domain": "دامنه",
+    "reseller": "نماینده",
+    "resellers": "نمایندگان"
+  },
+  "reseller": {
+    "list": "لیست نمایندکان",
+    "add_new": "افزودن نماینده جدید",
+    "name": "نام نمایندگی",
+    "user": "کاربر"
   },
   "dmail": {
     "domain": "لیست دامنه ها"

src/pages/reseller/List.tsx

@@ -0,0 +1,70 @@
+import { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import Button from '../../components/Button'
+import { Add } from 'iconsax-react'
+import { useGetResellers } from './hooks/useResellerData'
+import PageLoading from '../../components/PageLoading'
+import Td from '../../components/Td'
+import { ResellerItemType } from './types/Types'
+
+const ResellerList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const getReseller = useGetResellers()
+
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('reseller.list')}
+                </div>
+
+                <Link to={Pages.discount.create}>
+                    <Button
+                        className='w-[172px]'
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <Add size={20} color='white' />
+                            <div>
+                                {t('reseller.add_new')}
+                            </div>
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+
+            {
+                getReseller.isPending ?
+                    <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('reseller.name')} />
+                                    <Td text={t('reseller.user')} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    getReseller?.data?.data?.map((item: ResellerItemType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={item.name} />
+                                                <Td text={item?.owner?.firstName + ' ' + item.owner?.lastName} />
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+        </div>
+    )
+}
+
+export default ResellerList

src/pages/reseller/hooks/useResellerData.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/ResellerService";
+
+export const useGetResellers = () => {
+  return useQuery({
+    queryKey: ["resellers"],
+    queryFn: api.getResellers,
+  });
+};

src/pages/reseller/service/ResellerService.ts

@@ -0,0 +1,6 @@
+import axios from "../../../config/axios";
+
+export const getResellers = async () => {
+  const { data } = await axios.get(`/reseller`);
+  return data;
+};

src/pages/reseller/types/Types.ts

@@ -0,0 +1,8 @@
+import { UserItemType } from "../../users/types/UserTypes";
+
+export type ResellerItemType = {
+  createdAt: string;
+  id: string;
+  name: string;
+  owner: UserItemType;
+};

src/router/Main.tsx

@@ -91,6 +91,7 @@ import DkalaSmsCountList from '../pages/dkala/shop/SmsCountList.tsx'
 import UpdateShop from '../pages/dkala/shop/Update.tsx'
 import SubscriptionsList from '../pages/subscriptions/List.tsx'
 import Domains from '../pages/dmail/Domains.tsx'
+import ResellerList from '../pages/reseller/List.tsx'
 // import WarningsList from '../pages/dmenu/reports/List' // TODO: Create this component
 const MainRouter: FC = () => {
 
@@ -198,6 +199,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.subscriptions.list} element={<SubscriptionsList />} />
 
                             <Route path={Pages.dmail.list} element={<Domains />} />
+
+                            <Route path={Pages.reseller.list} element={<ResellerList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useState } 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, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2, Global } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2, Global, UserTick } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -326,6 +326,43 @@ const SideBar: FC = () => {
                         </div>
                     }
 
+                    {
+                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'reseller') &&
+                        <>
+                            <div onClick={() => handleOpenMenu('reseller')} className={clx(
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
+                            )}>
+                                {t('sidebar.reseller')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('reseller') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
+                                </div>
+                            </div>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('reseller') && 'hidden'
+
+                            )}>
+
+                                <div className='text-xs text-[#8C90A3]'>
+                                    <SideBarItem
+                                        icon={<UserTick variant={isActive('reseller/list') ? 'Bold' : 'Outline'} color={isActive('reseller/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        title={t('sidebar.resellers')}
+                                        isActive={isActive('reseller/list')}
+                                        link={Pages.reseller.list}
+                                        activeName='reseller'
+                                    />
+                                </div>
+                            </div>
+                        </>
+                    }
+
 
                     <div className={clx(
                         !openMenu.includes('content') && 'hidden'