list of admins

package-lock.json

@@ -45,6 +45,7 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.22",
         "globals": "^16.4.0",
+        "prettier": "^3.8.1",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.45.0",
         "vite": "^7.1.7"
@@ -4339,6 +4340,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -47,6 +47,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
+    "prettier": "^3.8.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
     "vite": "^7.1.7"

src/config/Paths.tsx

@@ -9,44 +9,49 @@ export const Paths = {
     category: {
       create: '/product/category/create',
       list: '/product/category/list',
-            update: '/product/category/update/'
+      update: '/product/category/update/',
     },
     attribute: {
       list: '/product/attribute/',
       create: '/product/attribute/create/',
-            update: '/product/attribute/update/'
+      update: '/product/attribute/update/',
     },
     attributeValue: {
-            list: '/product/attribute-value/'
+      list: '/product/attribute-value/',
-        }
+    },
   },
   users: {
-        list: '/users/list'
+    list: '/users/list',
+  },
+  admin: {
+    list: '/admin/list',
+    create: '/admin/create',
+    update: '/admin/update/',
   },
   formBuilder: {
     list: '/form-builder/list/',
     create: '/form-builder/create/',
     update: '/form-builder/update/',
-        values: '/form-builder/values/'
+    values: '/form-builder/values/',
   },
   order: {
     list: '/order/list',
     details: '/order/detail/',
     create: '/order/create',
-        edit: '/order/edit/'
+    edit: '/order/edit/',
   },
   features: {
     list: '/features/list',
-        create: '/features/create'
+    create: '/features/create',
   },
   service: {
-        print: '/service/print'
+    print: '/service/print',
   },
   home: '/home',
   myOrders: '/my-orders',
   perfomaInvoice: {
     list: '/perfoma-invoice/list',
-        detail: '/perfoma-invoice/'
+    detail: '/perfoma-invoice/',
   },
   newOrder: '/new-order',
   orderDetails: '/order/',
@@ -57,30 +62,30 @@ export const Paths = {
     login: '/auth/login',
   },
   ticket: {
-        list: "/tickets/list",
+    list: '/tickets/list',
-        create: "/tickets/create",
+    create: '/tickets/create',
-        detail: "/tickets/messages/",
+    detail: '/tickets/messages/',
-        category: "/tickets/category",
+    category: '/tickets/category',
   },
   announcement: {
-        list: "/announcement",
+    list: '/announcement',
-        detail: "/announcement/detail/",
+    detail: '/announcement/detail/',
-        create: "/announcement/create",
+    create: '/announcement/create',
   },
   criticisms: {
-        list: "/criticisms",
+    list: '/criticisms',
-        detail: "/criticisms/detail/",
+    detail: '/criticisms/detail/',
   },
   learning: {
-        list: "/learning/list",
+    list: '/learning/list',
-        detail: "/learning/detail/",
+    detail: '/learning/detail/',
-        create: "/learning/create",
+    create: '/learning/create',
-        category: "/learning/category",
+    category: '/learning/category',
   },
   print: {
     list: '/print/list',
     create: '/print/create',
     update: '/print/update/',
-        form: '/print/form/'
+    form: '/print/form/',
-    }
+  },
-}
+};

src/pages/admin/List.tsx

@@ -0,0 +1,58 @@
+import { useState, type FC } from "react";
+import { useGetAdmins } from "./hooks/useAdminData";
+import Table from "@/components/Table";
+import moment from "moment-jalaali";
+
+const AdminList: FC = () => {
+
+  const [page, setPage] = useState<number>(1);
+  const { data } = useGetAdmins(page);
+
+  return (
+    <div className="mt-5">
+      <div className="flex justify-between items-center">
+        <h1 className="text-lg font-light">مدیران</h1>
+      </div>
+
+      <Table
+        columns={[
+          {
+            key: "fullName",
+            title: "نام و نام خانوادگی",
+            render: (item) => {
+              return <div>{item.firstName + " " + item.lastName}</div>;
+            },
+          },
+          {
+            key: "phone",
+            title: "موبایل",
+          },
+          {
+            key: "role",
+            title: "نقش",
+            render: (item) => {
+              return <div>{item.role.title || item.role.name}</div>;
+            },
+          },
+          {
+            key: "createdAt",
+            title: "تاریخ ثبت",
+            render: (item) => {
+              return (
+                <div>{moment(item.createdAt).format("jYYYY-jMM-jDD")}</div>
+              );
+            },
+          },
+        ]}
+        data={data?.data}
+        pagination={{
+          currentPage: page,
+          onPageChange: setPage,
+          totalPages: data?.meta?.totalPages as number,
+        }}
+      />
+    </div>
+  );
+};
+
+export default AdminList;

src/pages/admin/hooks/useAdminData.ts

@@ -0,0 +1,9 @@
+import * as api from "../service/AdminService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetAdmins = (page: number) => {
+  return useQuery({
+    queryKey: ["admins", page],
+    queryFn: () => api.getAdmins(page),
+  });
+};

src/pages/admin/service/AdminService.ts

@@ -0,0 +1,9 @@
+import axios from "@/config/axios";
+import type { AdminsType } from "../types/Types";
+
+export const getAdmins = async (page: number) => {
+  const { data } = await axios.get<AdminsType>("/admin/admins", {
+    params: { page },
+  });
+  return data;
+};

src/pages/admin/types/Types.ts

@@ -0,0 +1,21 @@
+import type { RowDataType } from "@/components/types/TableTypes";
+import type { BaseResponse } from "@/shared/types/Types";
+
+export interface AdminItemType extends RowDataType {
+  id: string;
+  createdAt: string;
+  deletedAt: string | null;
+  firstName: string;
+  lastName: string;
+  role: {
+    id: string;
+    createdAt: string;
+    deletedAt: string | null;
+    name: string;
+    title: string;
+    isSystem: boolean;
+  };
+  phone: string;
+}
+
+export type AdminsType = BaseResponse<AdminItemType[]>;

src/router/MainRouter.tsx

@@ -45,6 +45,7 @@ import CreateSection from '@/pages/print/Create'
 import UpdateSection from '@/pages/print/Update'
 import PrintForm from '@/pages/print/Form'
 import UsersList from '@/pages/user/List'
+import AdminList from '@/pages/admin/List'
 
 const MainRouter: FC = () => {
     return (
@@ -90,6 +91,8 @@ const MainRouter: FC = () => {
 
                             <Route path={Paths.users.list} element={<UsersList />} />
 
+                            <Route path={Paths.admin.list} element={<AdminList />} />
+
                             <Route path={Paths.features.list} element={<FeaturesList />} />
                             <Route path={Paths.features.create} element={<CreateFeature />} />
                             <Route path={Paths.service.print} element={<PrintService />} />

src/shared/Sidebar.tsx

@@ -1,152 +1,166 @@
-import { type FC } from 'react'
+import { type FC } from 'react';
-import LogoImage from '@/assets/images/logo.svg'
+import LogoImage from '@/assets/images/logo.svg';
-import { AddSquare, DocumentText, Element3, ElementEqual, Home2, Messages3, MessageText, NotificationStatus, People, Printer, Profile2User, Receipt21, Teacher } from 'iconsax-react'
+import {
-import SideBarItem from './SidebarItem'
+  AddSquare,
-import { useLocation } from 'react-router-dom'
+  DocumentText,
-import { Paths } from '../config/Paths'
+  Element3,
-import { useSharedStore } from './store/useSharedStore'
+  ElementEqual,
-import { clx } from '../helpers/utils'
+  Home2,
-import { t } from '../locale'
+  Messages3,
-import Button from '@/components/Button'
+  MessageText,
+  NotificationStatus,
+  People,
+  Printer,
+  Profile2User,
+  Receipt21,
+  Teacher,
+  User,
+} from 'iconsax-react';
+import SideBarItem from './SidebarItem';
+import { useLocation } from 'react-router-dom';
+import { Paths } from '../config/Paths';
+import { useSharedStore } from './store/useSharedStore';
+import { clx } from '../helpers/utils';
+import { t } from '../locale';
+import Button from '@/components/Button';
 
 const SideBar: FC = () => {
-
+  const { openSidebar, setOpenSidebar } = useSharedStore();
-    const { openSidebar, setOpenSidebar } = useSharedStore()
+  const location = useLocation();
-    const location = useLocation()
 
   const isActive = (name: string) => {
-        return location.pathname.includes(name)
+    return location.pathname.includes(name);
-    }
+  };
 
-    const iconSizeSideBar = 20
+  const iconSizeSideBar = 20;
 
   return (
     <>
-            {
+      {openSidebar && (
-                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
+        <div
-            }
+          className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10"
+          onClick={() => setOpenSidebar(false)}
+        />
+      )}
       <div
         className={clx(
           'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[240px] bg-white flex-col py-12',
           openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
         )}
       >
-                <div className='px-6'>
+        <div className="px-6">
-                    <div className='flex border-b-2 border-[#F5F7FC] pb-10'>
+          <div className="flex border-b-2 border-[#F5F7FC] pb-10">
-                        <img src={LogoImage} className='w-[120px]' />
+            <img src={LogoImage} className="w-[120px]" />
           </div>
         </div>
 
-                <div className='flex-1 h-full overflow-y-auto no-scrollbar px-6'>
+        <div className="flex-1 h-full overflow-y-auto no-scrollbar px-6">
-                    <div className='mt-10 text-description px-6 text-header text-sm font-bold'>
+          <div className="mt-10 text-description px-6 text-header text-sm font-bold">{t('sidebar.menu')}</div>
-                        {t('sidebar.menu')}
-                    </div>
 
-                    <div className='mt-3'>
+          <div className="mt-3">
             <SideBarItem
-                            icon={<Home2 size={iconSizeSideBar} color='#4F5260' />}
+              icon={<Home2 size={iconSizeSideBar} color="#4F5260" />}
               title={t('sidebar.mainPage')}
               isActive={isActive('/home')}
               link={Paths.home}
             />
 
             <SideBarItem
-                            icon={<MessageText size={iconSizeSideBar} color='#4F5260' />}
+              icon={<MessageText size={iconSizeSideBar} color="#4F5260" />}
               title={'درخواست ها'}
               isActive={isActive('requests')}
               link={Paths.requests.list}
             />
 
             <SideBarItem
-                            icon={<Element3 size={iconSizeSideBar} color='#4F5260' />}
+              icon={<Element3 size={iconSizeSideBar} color="#4F5260" />}
               title={'سفارشات'}
               isActive={isActive('order')}
               link={Paths.order.list}
             />
 
             <SideBarItem
-                            icon={<Receipt21 size={iconSizeSideBar} color='#4F5260' />}
+              icon={<Receipt21 size={iconSizeSideBar} color="#4F5260" />}
               title={'پیش فاکتور'}
               isActive={isActive('/proforma-invoice')}
               link={Paths.perfomaInvoice.list}
             />
 
             <SideBarItem
-                            icon={<ElementEqual size={iconSizeSideBar} color='#4F5260' />}
+              icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
               title={'محصولات'}
               isActive={isActive('product')}
               link={Paths.product.list}
             />
 
             <SideBarItem
-                            icon={<People size={iconSizeSideBar} color='#4F5260' />}
+              icon={<People size={iconSizeSideBar} color="#4F5260" />}
               title={'مشتریان'}
               isActive={isActive('customer')}
               link={Paths.users.list}
             />
 
             <SideBarItem
-                            icon={<Printer size={iconSizeSideBar} color='#4F5260' />}
+              icon={<Printer size={iconSizeSideBar} color="#4F5260" />}
               title={'چاپ'}
               isActive={isActive('print')}
               link={Paths.print.list}
             />
 
-                    </div>
-
-                    <div className='mt-10 px-6 text-description text-sm font-bold'>
-                        {t('sidebar.other')}
-                    </div>
-
-                    <div className='mt-3'>
-
             <SideBarItem
-                            icon={<Profile2User size={iconSizeSideBar} color='#4F5260' />}
+              icon={<User size={iconSizeSideBar} color="#4F5260" />}
+              title={'ادمین'}
+              isActive={isActive('admin')}
+              link={Paths.admin.list}
+            />
+          </div>
+
+          <div className="mt-10 px-6 text-description text-sm font-bold">{t('sidebar.other')}</div>
+
+          <div className="mt-3">
+            <SideBarItem
+              icon={<Profile2User size={iconSizeSideBar} color="#4F5260" />}
               title={'کاربران'}
               isActive={isActive('/tickets')}
               link={Paths.tickets.list}
             />
 
             <SideBarItem
-                            icon={<Messages3 size={iconSizeSideBar} color='#4F5260' />}
+              icon={<Messages3 size={iconSizeSideBar} color="#4F5260" />}
               title={t('sidebar.tickets')}
               isActive={isActive('/tickets')}
               link={Paths.tickets.list}
             />
 
             <SideBarItem
-                            icon={<NotificationStatus size={iconSizeSideBar} color='#4F5260' />}
+              icon={<NotificationStatus size={iconSizeSideBar} color="#4F5260" />}
               title={t('sidebar.announcement')}
               isActive={isActive('/announcement')}
               link={Paths.announcement.list}
             />
 
             <SideBarItem
-                            icon={<DocumentText size={iconSizeSideBar} color='#4F5260' />}
+              icon={<DocumentText size={iconSizeSideBar} color="#4F5260" />}
               title={t('sidebar.criticisms')}
               isActive={isActive('/criticisms')}
               link={Paths.criticisms.list}
             />
 
             <SideBarItem
-                            icon={<Teacher size={iconSizeSideBar} color='#4F5260' />}
+              icon={<Teacher size={iconSizeSideBar} color="#4F5260" />}
               title={t('sidebar.learning')}
               isActive={isActive('/learning')}
               link={Paths.learning.list}
             />
           </div>
 
-
+          <div className="flex-1 items-end mt-14 pb-8">
-                    <div className='flex-1 items-end mt-14 pb-8'>
+            <div className="bg-[#F5F7FC] rounded-2xl p-4 text-center">
-
+              <div className="text-[15px] font-medium">{t('sidebar.submitYourOrder')}</div>
-                        <div className='bg-[#F5F7FC] rounded-2xl p-4 text-center'>
+              <div className="mt-2.5 text-[13px] text-[#7B7E8B]">{t('sidebar.submitYourOrderDescription')}</div>
-                            <div className='text-[15px] font-medium'>{t('sidebar.submitYourOrder')}</div>
+              <Button className="flex items-center mt-2.5">
-                            <div className='mt-2.5 text-[13px] text-[#7B7E8B]'>{t('sidebar.submitYourOrderDescription')}</div>
+                <div className="flex gap-1">
-                            <Button
+                  <AddSquare size={iconSizeSideBar} color="black" />
-                                className='flex items-center mt-2.5'
-                            >
-                                <div className='flex gap-1'>
-                                    <AddSquare size={iconSizeSideBar} color='black' />
                   <div>{t('sidebar.newOrder')}</div>
                 </div>
               </Button>
@@ -165,7 +179,7 @@ const SideBar: FC = () => {
         </div>
       </div>
     </>
-    )
+  );
-}
+};
 
-export default SideBar
+export default SideBar;