users

src/pages/user/List.tsx

@@ -0,0 +1,103 @@
+import { type FC, useState } from 'react'
+import { useGetUsers } from './hooks/useUserData'
+import { type User } from './types/Types'
+import PageLoading from '../../components/PageLoading'
+import Error from '../../components/Error'
+import PaginationUi from '../../components/PaginationUi'
+import Td from '../../components/Td'
+import { Calendar, Call, Card, User as UserIcon } from 'iconsax-react'
+
+const UsersList: FC = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const { data: usersData, isLoading, error } = useGetUsers(currentPage);
+
+    if (isLoading) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <PageLoading />
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <Error errorText="خطا در بارگذاری کاربران" />
+            </div>
+        );
+    }
+
+    const users = usersData?.results?.users || [];
+    const pager = usersData?.results?.pager;
+
+    const formatDate = (dateString: string) => {
+        if (!dateString) return '-';
+        return new Date(dateString).toLocaleDateString('fa-IR');
+    };
+
+    return (
+        <div>
+            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
+                <table className='w-full text-sm'>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={'نام و نام خانوادگی'} />
+                            <Td text={'شماره تلفن'} />
+                            <Td text={'کد ملی'} />
+                            <Td text={'تاریخ تولد'} />
+                            <Td text={'تاریخ ثبت‌نام'} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {users.length === 0 ? (
+                            <tr className='tr'>
+                                <td colSpan={6} className="text-center py-8 text-gray-500">
+                                    هیچ کاربری یافت نشد
+                                </td>
+                            </tr>
+                        ) : (
+                            users.map((user: User) => (
+                                <tr key={user._id} className='tr'>
+                                    <Td text="">
+                                        <div className="flex items-center gap-2">
+                                            <UserIcon size={16} color="#8C90A3" />
+                                            <span>{user.fullName || '-'}</span>
+                                        </div>
+                                    </Td>
+                                    <Td text="">
+                                        <div className="flex items-center gap-2">
+                                            <Call size={16} color="#8C90A3" />
+                                            <span>{user.phoneNumber}</span>
+                                        </div>
+                                    </Td>
+                                    <Td text="">
+                                        <div className="flex items-center gap-2">
+                                            <Card size={16} color="#8C90A3" />
+                                            <span>{user.nationalCode || '-'}</span>
+                                        </div>
+                                    </Td>
+                                    <Td text="">
+                                        <div className="flex items-center gap-2">
+                                            <Calendar size={16} color="#8C90A3" />
+                                            <span>{user.dateOfBirth}</span>
+                                        </div>
+                                    </Td>
+                                    <Td text={formatDate(user.createdAt)} />
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            <PaginationUi
+                pager={pager}
+                onPageChange={(page) => {
+                    setCurrentPage(page);
+                }}
+            />
+        </div>
+    )
+}
+
+export default UsersList

src/pages/user/hooks/useUserData.ts

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

src/pages/user/service/UserService.ts

@@ -0,0 +1,13 @@
+import axios from "../../../config/axios";
+
+import type { UserResponse } from "../types/Types";
+
+export const getUsers = async (
+  page: number = 1,
+  limit: number = 10
+): Promise<UserResponse> => {
+  const { data } = await axios.get("/admin/users", {
+    params: { page, limit },
+  });
+  return data;
+};

src/pages/user/types/Types.ts

@@ -0,0 +1,32 @@
+export interface User {
+  _id: string;
+  fullName: string;
+  phoneNumber: string;
+  dateOfBirth: string | null;
+  address: string | null;
+  nationalCode: string | null;
+  homeNumber: string | null;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
+export interface Pager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  prevPage: boolean;
+  nextPage: string | null;
+}
+
+export interface UserResults {
+  users: User[];
+  pager: Pager;
+}
+
+export interface UserResponse {
+  status: number;
+  success: boolean;
+  results: UserResults;
+}