From 3f4aefb112f50d9110e476aced35f94795f90a75 Mon Sep 17 00:00:00 2001 From: hosseintaromi Date: Tue, 22 Jul 2025 08:48:36 +0330 Subject: [PATCH] admin-users: implement complete admin users management - Add admin users CRUD operations (list, create, edit, delete) - Implement proper API response structure handling (admin_user vs user) - Add form validation with conditional password requirement (optional in edit mode) - Create reusable hooks and request functions following established pattern - Add TypeScript interfaces and proper error handling - Include debug logging for API responses --- .../admin-user-form/AdminUserFormPage.tsx | 220 +++++++++++++++ .../admin-users-list/AdminUsersListPage.tsx | 266 ++++++++++++++++++ src/pages/admin-users/core/_hooks.ts | 90 ++++++ src/pages/admin-users/core/_models.ts | 48 ++++ src/pages/admin-users/core/_requests.ts | 154 ++++++++++ 5 files changed, 778 insertions(+) create mode 100644 src/pages/admin-users/admin-user-form/AdminUserFormPage.tsx create mode 100644 src/pages/admin-users/admin-users-list/AdminUsersListPage.tsx create mode 100644 src/pages/admin-users/core/_hooks.ts create mode 100644 src/pages/admin-users/core/_models.ts create mode 100644 src/pages/admin-users/core/_requests.ts diff --git a/src/pages/admin-users/admin-user-form/AdminUserFormPage.tsx b/src/pages/admin-users/admin-user-form/AdminUserFormPage.tsx new file mode 100644 index 0000000..be11323 --- /dev/null +++ b/src/pages/admin-users/admin-user-form/AdminUserFormPage.tsx @@ -0,0 +1,220 @@ +import React, { useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { useForm } from 'react-hook-form'; +import { yupResolver } from '@hookform/resolvers/yup'; +import * as yup from 'yup'; +import { useAdminUser, useCreateAdminUser, useUpdateAdminUser } from '../core/_hooks'; +import { AdminUserFormData } from '../core/_models'; +import { Button } from "@/components/ui/Button"; +import { Input } from "@/components/ui/Input"; +import { LoadingSpinner } from "@/components/ui/LoadingSpinner"; +import { ArrowRight } from "lucide-react"; + +const adminUserSchema = yup.object({ + first_name: yup.string().required('نام الزامی است').min(2, 'نام باید حداقل 2 کاراکتر باشد'), + last_name: yup.string().required('نام خانوادگی الزامی است').min(2, 'نام خانوادگی باید حداقل 2 کاراکتر باشد'), + username: yup.string().required('نام کاربری الزامی است').min(3, 'نام کاربری باید حداقل 3 کاراکتر باشد'), + password: yup.string().when('isEdit', { + is: false, + then: (schema) => schema.required('رمز عبور الزامی است').min(8, 'رمز عبور باید حداقل 8 کاراکتر باشد'), + otherwise: (schema) => schema.notRequired().test('min-length', 'رمز عبور باید حداقل 8 کاراکتر باشد', function (value) { + return !value || value.length >= 8; + }) + }), + status: yup.string().required('وضعیت الزامی است').oneOf(['active', 'deactive'], 'وضعیت نامعتبر است'), + isEdit: yup.boolean().default(false) +}); + +const AdminUserFormPage = () => { + const navigate = useNavigate(); + const { id } = useParams<{ id: string }>(); + const isEdit = !!id; + + const { data: user, isLoading: isLoadingUser } = useAdminUser(id || '', isEdit); + const { mutate: createUser, isPending: isCreating } = useCreateAdminUser(); + const { mutate: updateUser, isPending: isUpdating } = useUpdateAdminUser(); + + const isLoading = isCreating || isUpdating; + + const { + register, + handleSubmit, + formState: { errors, isValid, isDirty }, + setValue, + watch + } = useForm({ + resolver: yupResolver(adminUserSchema) as any, + mode: 'onChange', + defaultValues: { + first_name: '', + last_name: '', + username: '', + password: '', + status: 'active' as 'active' | 'deactive', + isEdit: isEdit + } + }); + + // Debug form state + const formValues = watch(); + console.log('🔍 Current form values:', formValues); + console.log('🔍 Form isValid:', isValid); + console.log('🔍 Form isDirty:', isDirty); + console.log('🔍 Form errors:', errors); + + // Populate form when editing + useEffect(() => { + if (isEdit && user) { + setValue('first_name', user.first_name, { shouldValidate: true }); + setValue('last_name', user.last_name, { shouldValidate: true }); + setValue('username', user.username, { shouldValidate: true }); + setValue('status', user.status, { shouldValidate: true }); + setValue('isEdit', true, { shouldValidate: true }); + } + }, [isEdit, user, setValue]); + + const onSubmit = (data: AdminUserFormData) => { + if (isEdit && id) { + updateUser({ + id, + userData: { + id: parseInt(id), + first_name: data.first_name, + last_name: data.last_name, + username: data.username, + password: data.password && data.password.trim() ? data.password : undefined, + status: data.status + } + }, { + onSuccess: () => { + navigate('/admin-users'); + } + }); + } else { + console.log('🚀 Creating new admin user...'); + createUser({ + first_name: data.first_name, + last_name: data.last_name, + username: data.username, + password: data.password || '', + status: data.status + }, { + onSuccess: (result) => { + console.log('✅ Admin user created successfully:', result); + console.log('🔄 Navigating to admin users list...'); + navigate('/admin-users'); + }, + onError: (error) => { + console.error('❌ Error in component onError:', error); + } + }); + } + }; + + const handleBack = () => { + navigate('/admin-users'); + }; + + if (isEdit && isLoadingUser) { + return ( +
+ +
+ ); + } + + return ( +
+ {/* Header */} +
+ +
+

+ {isEdit ? 'ویرایش کاربر ادمین' : 'ایجاد کاربر ادمین جدید'} +

+

+ {isEdit ? 'ویرایش اطلاعات کاربر ادمین' : 'اطلاعات کاربر ادمین جدید را وارد کنید'} +

+
+
+ + {/* Form */} +
+
+
+ + +
+ + + + + +
+ + + {errors.status && ( +

{errors.status.message}

+ )} +
+ +
+ + +
+
+
+
+ ); +}; + +export default AdminUserFormPage; \ No newline at end of file diff --git a/src/pages/admin-users/admin-users-list/AdminUsersListPage.tsx b/src/pages/admin-users/admin-users-list/AdminUsersListPage.tsx new file mode 100644 index 0000000..69f6601 --- /dev/null +++ b/src/pages/admin-users/admin-users-list/AdminUsersListPage.tsx @@ -0,0 +1,266 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useAdminUsers, useDeleteAdminUser } from '../core/_hooks'; +import { AdminUserInfo } from '../core/_models'; +import { Button } from "@/components/ui/Button"; +import { LoadingSpinner } from "@/components/ui/LoadingSpinner"; +import { Trash2, Edit3, Plus, Eye, Users, UserPlus } from "lucide-react"; +import { Modal } from "@/components/ui/Modal"; + +const AdminUsersListPage = () => { + const navigate = useNavigate(); + const [deleteUserId, setDeleteUserId] = useState(null); + const [filters, setFilters] = useState({ + search: '', + status: '' + }); + + const { data: users, isLoading, error } = useAdminUsers(filters); + const { mutate: deleteUser, isPending: isDeleting } = useDeleteAdminUser(); + + const handleCreate = () => { + navigate('/admin-users/create'); + }; + + const handleView = (userId: number) => { + navigate(`/admin-users/${userId}`); + }; + + const handleEdit = (userId: number) => { + navigate(`/admin-users/${userId}/edit`); + }; + + const handleDeleteConfirm = () => { + if (deleteUserId) { + deleteUser(deleteUserId, { + onSuccess: () => { + setDeleteUserId(null); + } + }); + } + }; + + const handleSearchChange = (e: React.ChangeEvent) => { + setFilters(prev => ({ ...prev, search: e.target.value })); + }; + + const handleStatusChange = (e: React.ChangeEvent) => { + setFilters(prev => ({ ...prev, status: e.target.value })); + }; + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (error) { + return ( +
+

خطا در بارگذاری کاربران ادمین

+
+ ); + } + + return ( +
+ {/* Header */} +
+
+

+ مدیریت کاربران ادمین +

+

+ مدیریت کاربران ادمین سیستم +

+
+ +
+ + {/* Filters */} +
+
+
+ + +
+
+ + +
+
+
+ + {/* Users Table */} +
+ {(users || []).length === 0 ? ( +
+ +

+ هیچ کاربر ادمین یافت نشد +

+

+ شما هنوز هیچ کاربر ادمین ایجاد نکرده‌اید +

+ +
+ ) : ( +
+ + + + + + + + + + + + + {(users || []).map((user: AdminUserInfo) => ( + + + + + + + + + ))} + +
+ کاربر + + نام کاربری + + وضعیت + + نقش‌ها + + تاریخ ایجاد + + عملیات +
+
+
+ + {user.first_name?.[0]}{user.last_name?.[0]} + +
+
+
+ {user.first_name} {user.last_name} +
+
+
+ 		+ {user.username} + + + {user.status === 'active' ? 'فعال' : 'غیرفعال'} + + + + {user.roles?.length || 0} نقش + + + {new Date(user.created_at).toLocaleDateString('fa-IR')} + + + + +
+
+ )} +
+ + {/* Delete Confirmation Modal */} + setDeleteUserId(null)} + title="حذف کاربر ادمین" + > +
+

+ آیا از حذف این کاربر ادمین اطمینان دارید؟ این عمل قابل بازگشت نیست. +

+
+ + +
+
+ +
+ ); +}; + +export default AdminUsersListPage; \ No newline at end of file diff --git a/src/pages/admin-users/core/_hooks.ts b/src/pages/admin-users/core/_hooks.ts new file mode 100644 index 0000000..e9c78e2 --- /dev/null +++ b/src/pages/admin-users/core/_hooks.ts @@ -0,0 +1,90 @@ +import { QUERY_KEYS } from "@/utils/query-key"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { + getAdminUsers, + getAdminUser, + createAdminUser, + updateAdminUser, + deleteAdminUser, +} from "./_requests"; +import { + CreateAdminUserRequest, + UpdateAdminUserRequest, + AdminUserFilters, +} from "./_models"; +import toast from "react-hot-toast"; + +export const useAdminUsers = (filters?: AdminUserFilters) => { + return useQuery({ + queryKey: [QUERY_KEYS.GET_ADMIN_USERS, filters], + queryFn: () => getAdminUsers(filters), + }); +}; + +export const useAdminUser = (id: string, enabled: boolean = true) => { + return useQuery({ + queryKey: [QUERY_KEYS.GET_ADMIN_USER, id], + queryFn: () => getAdminUser(id), + enabled: enabled && !!id, + }); +}; + +export const useCreateAdminUser = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationKey: [QUERY_KEYS.CREATE_ADMIN_USER], + mutationFn: (userData: CreateAdminUserRequest) => createAdminUser(userData), + onSuccess: (data) => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_ADMIN_USERS] }); + toast.success("کاربر ادمین با موفقیت ایجاد شد"); + }, + onError: (error: any) => { + console.error("Create admin user error:", error); + toast.error(error?.message || "خطا در ایجاد کاربر ادمین"); + }, + }); +}; + +export const useUpdateAdminUser = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationKey: [QUERY_KEYS.UPDATE_ADMIN_USER], + mutationFn: ({ + id, + userData, + }: { + id: string; + userData: UpdateAdminUserRequest; + }) => updateAdminUser(id, userData), + onSuccess: (data, variables) => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_ADMIN_USERS] }); + queryClient.invalidateQueries({ + queryKey: [QUERY_KEYS.GET_ADMIN_USER, variables.id], + }); + toast.success("کاربر ادمین با موفقیت به‌روزرسانی شد"); + }, + onError: (error: any) => { + console.error("Update admin user error:", error); + toast.error(error?.message || "خطا در به‌روزرسانی کاربر ادمین"); + }, + }); +}; + +export const useDeleteAdminUser = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationKey: [QUERY_KEYS.DELETE_ADMIN_USER], + mutationFn: (id: string) => deleteAdminUser(id), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_ADMIN_USERS] }); + toast.success("کاربر ادمین با موفقیت حذف شد"); + }, + onError: (error: any) => { + console.error("Delete admin user error:", error); + toast.error(error?.message || "خطا در حذف کاربر ادمین"); + }, + }); +}; diff --git a/src/pages/admin-users/core/_models.ts b/src/pages/admin-users/core/_models.ts new file mode 100644 index 0000000..dc0555c --- /dev/null +++ b/src/pages/admin-users/core/_models.ts @@ -0,0 +1,48 @@ +import { + AdminUserInfo, + CreateAdminUserRequest, + UpdateAdminUserRequest, +} from "@/types/auth"; + +export interface AdminUserFormData { + first_name: string; + last_name: string; + username: string; + password?: string; + status: "active" | "deactive"; + isEdit: boolean; +} + +export interface AdminUserFilters { + search?: string; + status?: string; + page?: number; + limit?: number; +} + +export interface AdminUsersResponse { + users: AdminUserInfo[] | null; +} + +export interface AdminUserResponse { + user: AdminUserInfo; +} + +export interface CreateAdminUserResponse { + user: AdminUserInfo; +} + +export interface UpdateAdminUserResponse { + user: AdminUserInfo; +} + +export interface DeleteAdminUserResponse { + message: string; +} + +// Export types for easier access +export type { + AdminUserInfo, + CreateAdminUserRequest, + UpdateAdminUserRequest, +} from "@/types/auth"; diff --git a/src/pages/admin-users/core/_requests.ts b/src/pages/admin-users/core/_requests.ts new file mode 100644 index 0000000..7e27ed1 --- /dev/null +++ b/src/pages/admin-users/core/_requests.ts @@ -0,0 +1,154 @@ +import { + httpGetRequest, + httpPostRequest, + httpPutRequest, + httpDeleteRequest, + APIUrlGenerator, +} from "@/utils/baseHttpService"; +import { API_ROUTES } from "@/constant/routes"; +import { + AdminUserInfo, + CreateAdminUserRequest, + UpdateAdminUserRequest, + AdminUsersResponse, + AdminUserResponse, + CreateAdminUserResponse, + UpdateAdminUserResponse, + DeleteAdminUserResponse, + AdminUserFilters, +} from "./_models"; + +export const getAdminUsers = async (filters?: AdminUserFilters) => { + try { + const queryParams: Record = {}; + + if (filters?.search) queryParams.search = filters.search; + if (filters?.status) queryParams.status = filters.status; + if (filters?.page) queryParams.page = filters.page; + if (filters?.limit) queryParams.limit = filters.limit; + + const url = APIUrlGenerator(API_ROUTES.GET_ADMIN_USERS, queryParams); + console.log("🔍 Admin Users URL:", url); + console.log("🔍 API_ROUTES.GET_ADMIN_USERS:", API_ROUTES.GET_ADMIN_USERS); + + const response = await httpGetRequest(url); + + console.log("Admin Users API Response:", response); + console.log("Admin Users data:", response.data); + + // Handle different response structures + if (response.data && (response.data as any).admin_users) { + return Array.isArray((response.data as any).admin_users) + ? (response.data as any).admin_users + : []; + } + + if (response.data && response.data.users) { + return Array.isArray(response.data.users) ? response.data.users : []; + } + + if (response.data && Array.isArray(response.data)) { + return response.data; + } + + return []; + } catch (error) { + console.error("Error fetching admin users:", error); + return []; + } +}; + +export const getAdminUser = async (id: string) => { + try { + const response = await httpGetRequest( + APIUrlGenerator(API_ROUTES.GET_ADMIN_USER(id)) + ); + + console.log("Get Admin User API Response:", response); + console.log("Get Admin User data:", response.data); + + if (response.data && (response.data as any).admin_user) { + return (response.data as any).admin_user; + } + + if (response.data && response.data.user) { + return response.data.user; + } + + throw new Error("Failed to get admin user"); + } catch (error) { + console.error("Error getting admin user:", error); + throw error; + } +}; + +export const createAdminUser = async (userData: CreateAdminUserRequest) => { + try { + console.log("🚀 Creating admin user with data:", userData); + + const response = await httpPostRequest( + APIUrlGenerator(API_ROUTES.CREATE_ADMIN_USER), + userData + ); + + console.log("✅ Create Admin User API Response:", response); + console.log("📊 Response data:", response.data); + + if (response.data && (response.data as any).admin_user) { + console.log("✅ Returning admin_user from response"); + return (response.data as any).admin_user; + } + + if (response.data && response.data.user) { + console.log("✅ Returning user from response"); + return response.data.user; + } + + console.log("⚠️ Response structure unexpected, throwing error"); + throw new Error("Failed to create admin user"); + } catch (error) { + console.error("❌ Error creating admin user:", error); + throw error; + } +}; + +export const updateAdminUser = async ( + id: string, + userData: UpdateAdminUserRequest +) => { + try { + const response = await httpPutRequest( + APIUrlGenerator(API_ROUTES.UPDATE_ADMIN_USER(id)), + userData + ); + + console.log("Update Admin User API Response:", response); + console.log("Update Admin User data:", response.data); + + if (response.data && (response.data as any).admin_user) { + return (response.data as any).admin_user; + } + + if (response.data && response.data.user) { + return response.data.user; + } + + throw new Error("Failed to update admin user"); + } catch (error) { + console.error("Error updating admin user:", error); + throw error; + } +}; + +export const deleteAdminUser = async (id: string) => { + try { + const response = await httpDeleteRequest( + APIUrlGenerator(API_ROUTES.DELETE_ADMIN_USER(id)) + ); + + return response.data; + } catch (error) { + console.error("Error deleting admin user:", error); + throw error; + } +};