users of list

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"],
-    queryFn: api.getUsers,
+    queryKey: ["users", page],
+    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 () => {
-  const { data } = await axios.get<UsersResponseType>(`/admin/users`);
+export const getUsers = async (page: number) => {
+  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[]>;