list of admins

src/config/Pages.ts

@@ -56,4 +56,8 @@ export const Pages = {
     add: "/roles/add",
     update: "/roles/update/",
   },
+  admins: {
+    list: "/admins/list",
+    update: "/admins/update/",
+  },
 };

src/langs/fa.json

@@ -62,7 +62,8 @@
     "setting": "تنظیمات",
     "logout": "خروج",
     "roles": "سطح دسترسی ها",
-    "payment_methods": "روش های پرداخت"
+    "payment_methods": "روش های پرداخت",
+    "admins": "مدیران"
   },
   "slider": {
     "new_slider": "اسلایدر جدید",

src/pages/admin/List.tsx

@@ -0,0 +1,60 @@
+import { type FC } from 'react'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { useGetAdmins, useDeleteAdmin } from './hooks/useAdminData'
+import { useAdminFilters } from './hooks/useAdminFilters'
+import { getAdminTableColumns } from './components/AdminTableColumns'
+import { useAdminFiltersFields } from './components/AdminFiltersFields'
+
+const AdminList: FC = () => {
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    } = useAdminFilters()
+
+    const { data: adminsData, isLoading } = useGetAdmins(apiParams)
+    const { mutate: deleteAdmin, isPending: isDeleting } = useDeleteAdmin()
+
+    const admins = adminsData?.data || []
+    const columns = getAdminTableColumns({
+        onDelete: (id: string) => deleteAdmin(id),
+        isDeleting
+    })
+    const filterFields = useAdminFiltersFields()
+
+    const totalPages = Math.ceil(admins.length / limit) || 1
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>لیست مدیران</h1>
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={filterFields}
+                    onChange={handleFiltersChange}
+                    initialValues={filters}
+                    searchField="search"
+                />
+            </div>
+
+            <Table
+                columns={columns}
+                data={admins}
+                isloading={isLoading}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
+        </div>
+    )
+}
+
+export default AdminList

src/pages/admin/components/AdminFiltersFields.tsx

@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+import type { FieldType } from '@/components/Filters'
+
+export const useAdminFiltersFields = (): FieldType[] => {
+    return useMemo(() => [
+        {
+            type: 'input',
+            name: 'search',
+            placeholder: 'جستجو',
+        },
+    ], [])
+}
+

src/pages/admin/components/AdminTableColumns.tsx

@@ -0,0 +1,75 @@
+import type { ColumnType } from '@/components/types/TableTypes'
+import type { Admin } from '../types/Types'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { Eye } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
+
+interface GetAdminTableColumnsParams {
+    onDelete?: (id: string) => void
+    isDeleting?: boolean
+}
+
+export const getAdminTableColumns = ({ onDelete, isDeleting }: GetAdminTableColumnsParams = {}): ColumnType<Admin>[] => {
+    return [
+        {
+            key: 'firstName',
+            title: 'نام',
+            render: (item: Admin) => {
+                return item.firstName || '-'
+            }
+        },
+        {
+            key: 'lastName',
+            title: 'نام خانوادگی',
+            render: (item: Admin) => {
+                return item.lastName || '-'
+            }
+        },
+        {
+            key: 'phone',
+            title: 'شماره تماس',
+            render: (item: Admin) => {
+                return item.phone || '-'
+            }
+        },
+        {
+            key: 'roles',
+            title: 'تعداد نقش‌ها',
+            render: (item: Admin) => {
+                return item.roles?.length || 0
+            }
+        },
+        {
+            key: 'createdAt',
+            title: 'تاریخ ایجاد',
+            render: (item: Admin) => {
+                return new Date(item.createdAt).toLocaleDateString('fa-IR')
+            }
+        },
+        {
+            key: 'actions',
+            title: '',
+            render: (item: Admin) => {
+                return (
+                    <div className='flex gap-2 items-center'>
+                        <Link to={Pages.admins.update + item.id}>
+                            <Eye
+                                size={20}
+                                color='#8C90A3'
+                                className='cursor-pointer'
+                            />
+                        </Link>
+                        {onDelete && (
+                            <TrashWithConfrim
+                                onDelete={() => onDelete(item.id)}
+                                isloading={isDeleting}
+                            />
+                        )}
+                    </div>
+                )
+            }
+        },
+    ]
+}
+

src/pages/admin/hooks/useAdminData.ts

@@ -0,0 +1,22 @@
+import * as api from "../service/AdminService";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { GetAdminsParams } from "../types/Types";
+
+export const useGetAdmins = (params?: GetAdminsParams) => {
+  return useQuery({
+    queryKey: ["admins", params],
+    queryFn: () => api.getAdmins(params),
+  });
+};
+
+export const useDeleteAdmin = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.deleteAdmin,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["admins"],
+      });
+    },
+  });
+};

src/pages/admin/hooks/useAdminFilters.ts

@@ -0,0 +1,44 @@
+import { useState, useMemo } from 'react'
+import type { FilterValues } from '@/components/Filters'
+import type { GetAdminsParams } from '../types/Types'
+
+const DEFAULT_PAGE = 1
+const DEFAULT_LIMIT = 10
+
+export const useAdminFilters = () => {
+    const [filters, setFilters] = useState<FilterValues>({})
+    const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE)
+    const [limit] = useState(DEFAULT_LIMIT)
+
+    const apiParams = useMemo<GetAdminsParams>(() => {
+        const params: GetAdminsParams = {
+            page: currentPage,
+            limit: limit,
+        }
+
+        if (filters.search) {
+            params.search = filters.search
+        }
+
+        return params
+    }, [filters, currentPage, limit])
+
+    const handleFiltersChange = (newFilters: FilterValues) => {
+        setFilters(newFilters)
+        setCurrentPage(DEFAULT_PAGE)
+    }
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page)
+    }
+
+    return {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    }
+}
+

src/pages/admin/service/AdminService.ts

@@ -0,0 +1,16 @@
+import axios from "@/config/axios";
+import type { GetAdminsResponse, GetAdminsParams } from "../types/Types";
+
+export const getAdmins = async (
+  params?: GetAdminsParams
+): Promise<GetAdminsResponse> => {
+  const { data } = await axios.get<GetAdminsResponse>("/admin/admins", {
+    params,
+  });
+  return data;
+};
+
+export const deleteAdmin = async (id: string) => {
+  const { data } = await axios.delete(`/admin/admins/${id}`);
+  return data;
+};

src/pages/admin/types/Types.ts

@@ -0,0 +1,40 @@
+import type { IResponse } from "@/types/response.types";
+
+export type RoleDetail = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  restaurant: string | null;
+};
+
+export type AdminRole = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  admin: string;
+  role: RoleDetail;
+  restaurant: string;
+};
+
+export type Admin = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  roles: AdminRole[];
+};
+
+export type GetAdminsParams = {
+    page?: number
+    limit?: number
+    search?: string
+}
+
+export type GetAdminsResponse = IResponse<Admin[]>;
+

src/router/Main.tsx

@@ -27,6 +27,7 @@ import Setting from '@/pages/settings/Setting'
 import PaymentMethodsList from '@/pages/paymentMethods/List'
 import CreatePaymentMethod from '@/pages/paymentMethods/Create'
 import UpdatePaymentMethod from '@/pages/paymentMethods/Update'
+import AdminList from '@/pages/admin/List'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -66,6 +67,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.payment_methods.list} element={<PaymentMethodsList />} />
                             <Route path={Pages.payment_methods.add} element={<CreatePaymentMethod />} />
                             <Route path={Pages.payment_methods.update + ':id'} element={<UpdatePaymentMethod />} />
+
+                            <Route path={Pages.admins.list} element={<AdminList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { type 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 { DocumentText, Home2, Logout, Message, NotificationStatus, People, Setting2, TicketDiscount, Chart, Calendar, Security, Card } from 'iconsax-react'
+import { DocumentText, Home2, Logout, Message, NotificationStatus, People, Setting2, TicketDiscount, Chart, Calendar, Security, Card, SecurityUser } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -110,6 +110,16 @@ const SideBar: FC = () => {
                             name='customers'
                             activeName='customers'
                         />
+
+                        <SideBarItem
+                            icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.admins')}
+                            isActive={isActive('admins')}
+                            link={Pages.admins.list}
+                            name='admins'
+                            activeName='admins'
+                        />
+
                         <SideBarItem
                             icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.discount')}