users of list

.env

@@ -1,3 +1,3 @@
-VITE_API_BASE_URL = 'http://10.86.60.88:4000'
+VITE_API_BASE_URL = 'http://192.168.99.218:4000'
 VITE_TOKEN_NAME = 'negareh_at'
 VITE_REFRESH_TOKEN_NAME = 'negareh_art'

src/config/Paths.tsx

@@ -20,6 +20,9 @@ export const Paths = {
             list: '/product/attribute-value/'
         }
     },
+    users: {
+        list: '/users/list'
+    },
     formBuilder: {
         list: '/form-builder/list/',
         create: '/form-builder/create/',

src/pages/formBuilder/types/Types.ts

@@ -1,5 +1,6 @@
 import { type BaseResponse } from "@/shared/types/Types";
 import type { FieldTypeEnum } from "../enum/Enum";
+import type { RowDataType } from "@/components/types/TableTypes";
 
 export type CreateFieldType = {
   name: string,
@@ -10,7 +11,7 @@ export type CreateFieldType = {
   entityType:string, // 'product' | 'print'
 }
 
-export interface FieldType {
+export interface FieldType extends RowDataType {
     createdAt: string,
     id: number,
     isRequired: boolean,

src/pages/user/List.tsx

@@ -0,0 +1,58 @@
+import { useState, type FC } from 'react'
+import { useGetUsers } from './hooks/useUserData'
+import Table from '@/components/Table'
+import moment from 'moment-jalaali'
+
+const UsersList: FC = () => {
+
+    const [page, setPage] = useState<number>(1)
+    const { data } = useGetUsers(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) => {
+                            if (item.firstName)
+                                return (
+                                    <div>{item.firstName + ' ' + item.lastName}</div>
+                                )
+                            else return (
+                                <div>{item.phone}</div>
+                            )
+                        }
+                    },
+                    {
+                        key: 'phone',
+                        title: 'موبایل'
+                    },
+                    {
+                        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 UsersList

src/pages/user/hooks/useUserData.ts

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

src/pages/user/service/UserService.ts

@@ -1,7 +1,9 @@
 import axios from "@/config/axios";
 import type { UsersResponseType } from "../types/Types";
 
-export const getUsers = async () => {
+export const getUsers = async (page: number) => {
-  const { data } = await axios.get<UsersResponseType>(`/admin/users`);
+  const { data } = await axios.get<UsersResponseType>(
+    `/admin/users?page=${page}`
+  );
   return data;
 };

src/pages/user/types/Types.ts

@@ -1,6 +1,7 @@
+import type { RowDataType } from "@/components/types/TableTypes";
 import type { BaseResponse } from "@/shared/types/Types";
 
-export type UserType = {
+export interface UserType extends RowDataType {
   id: string;
   firstName: string | null;
   lastName: string | null;
@@ -11,6 +12,6 @@ export type UserType = {
   isActive: boolean;
   createdAt: string;
   deletedAt: string | null;
-};
+}
 
 export type UsersResponseType = BaseResponse<UserType[]>;

src/router/MainRouter.tsx

@@ -44,6 +44,7 @@ import SectionList from '@/pages/print/List'
 import CreateSection from '@/pages/print/Create'
 import UpdateSection from '@/pages/print/Update'
 import PrintForm from '@/pages/print/Form'
+import UsersList from '@/pages/user/List'
 
 const MainRouter: FC = () => {
     return (
@@ -87,6 +88,8 @@ const MainRouter: FC = () => {
                             <Route path={Paths.print.update + ':id'} element={<UpdateSection />} />
                             <Route path={Paths.print.form + ':itemId/:orderId'} element={<PrintForm />} />
 
+                            <Route path={Paths.users.list} element={<UsersList />} />
+
                             <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

@@ -82,7 +82,7 @@ const SideBar: FC = () => {
                             icon={<People size={iconSizeSideBar} color='#4F5260' />}
                             title={'مشتریان'}
                             isActive={isActive('customer')}
-                            link={'Paths.'}
+                            link={Paths.users.list}
                         />
 
                         <SideBarItem