list of resellers

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