feat: implement user archiving and unarchiving functionality in admin panel
This commit is contained in:
seaznCode
parent
4e9ae3a826
commit
5709f48dc3
@ -5,9 +5,7 @@ import PageLayout from '../../components/PageLayout'
|
||||
import UserDetailModal from '../../components/UserDetailModal'
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
EyeIcon,
|
||||
PencilSquareIcon,
|
||||
XMarkIcon,
|
||||
ExclamationTriangleIcon
|
||||
} from '@heroicons/react/24/outline'
|
||||
import { useAdminUsers } from '../../hooks/useAdminUsers'
|
||||
@ -15,7 +13,7 @@ import { AdminAPI } from '../../utils/api'
|
||||
import useAuthStore from '../../store/authStore'
|
||||
|
||||
type UserType = 'personal' | 'company'
|
||||
type UserStatus = 'active' | 'pending' | 'disabled'
|
||||
type UserStatus = 'active' | 'pending' | 'disabled' | 'inactive'
|
||||
type UserRole = 'user' | 'admin'
|
||||
|
||||
interface User {
|
||||
@ -32,7 +30,7 @@ interface User {
|
||||
company_name?: string
|
||||
}
|
||||
|
||||
const STATUSES: UserStatus[] = ['active','pending','disabled']
|
||||
const STATUSES: UserStatus[] = ['active','pending','disabled','inactive']
|
||||
const TYPES: UserType[] = ['personal','company']
|
||||
const ROLES: UserRole[] = ['user','admin']
|
||||
|
||||
@ -101,9 +99,10 @@ export default function AdminUserManagementPage() {
|
||||
const fullName = u.user_type === 'company' ? companyName : `${firstName} ${lastName}`
|
||||
|
||||
// Map backend status to frontend status
|
||||
// Backend status can be: 'pending', 'active', 'suspended', etc.
|
||||
// Backend status can be: 'pending', 'active', 'suspended', 'inactive', etc.
|
||||
// is_admin_verified: 1 = verified by admin, 0 = not verified
|
||||
const userStatus: UserStatus = u.is_admin_verified === 1 ? 'active' :
|
||||
const userStatus: UserStatus = u.status === 'inactive' ? 'inactive' :
|
||||
u.is_admin_verified === 1 ? 'active' :
|
||||
u.status === 'pending' ? 'pending' :
|
||||
u.status === 'suspended' ? 'disabled' :
|
||||
'pending' // default fallback
|
||||
@ -174,7 +173,7 @@ export default function AdminUserManagementPage() {
|
||||
]
|
||||
const rows = filtered.map(u => {
|
||||
// Map backend to friendly values
|
||||
const userStatus: 'active'|'pending'|'disabled' =
|
||||
const userStatus: UserStatus = u.status === 'inactive' ? 'inactive' :
|
||||
u.is_admin_verified === 1 ? 'active' :
|
||||
u.status === 'pending' ? 'pending' :
|
||||
u.status === 'suspended' ? 'disabled' : 'pending'
|
||||
@ -221,6 +220,7 @@ export default function AdminUserManagementPage() {
|
||||
const statusBadge = (s: UserStatus) =>
|
||||
s==='active' ? badge('Active','green')
|
||||
: s==='pending' ? badge('Pending','amber')
|
||||
: s==='inactive' ? badge('Inactive','gray')
|
||||
: badge('Disabled','rose')
|
||||
|
||||
const typeBadge = (t: UserType) =>
|
||||
@ -229,13 +229,11 @@ export default function AdminUserManagementPage() {
|
||||
const roleBadge = (r: UserRole) =>
|
||||
r==='admin' ? badge('Admin','indigo') : badge('User','gray')
|
||||
|
||||
// Action stubs
|
||||
const onView = (id: string) => {
|
||||
// Action handler for opening edit modal
|
||||
const onEdit = (id: string) => {
|
||||
setSelectedUserId(id)
|
||||
setIsDetailModalOpen(true)
|
||||
}
|
||||
const onEdit = (id: string) => console.log('Edit', id)
|
||||
const onDelete = (id: string) => console.log('Delete', id)
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
@ -385,7 +383,8 @@ export default function AdminUserManagementPage() {
|
||||
: `${u.first_name?.[0] || 'U'}${u.last_name?.[0] || 'U'}`.toUpperCase()
|
||||
|
||||
// Map backend status to frontend status for display
|
||||
const userStatus: UserStatus = u.is_admin_verified === 1 ? 'active' :
|
||||
const userStatus: UserStatus = u.status === 'inactive' ? 'inactive' :
|
||||
u.is_admin_verified === 1 ? 'active' :
|
||||
u.status === 'pending' ? 'pending' :
|
||||
u.status === 'suspended' ? 'disabled' :
|
||||
'pending' // default fallback
|
||||
@ -420,23 +419,11 @@ export default function AdminUserManagementPage() {
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => onView(u.id.toString())}
|
||||
onClick={() => onEdit(u.id.toString())}
|
||||
className="inline-flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 hover:bg-blue-100 text-blue-700 px-2.5 py-1 text-xs font-medium transition"
|
||||
>
|
||||
<EyeIcon className="h-4 w-4" /> View
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onEdit(u.id.toString())}
|
||||
className="inline-flex items-center gap-1 rounded-md border border-amber-200 bg-amber-50 hover:bg-amber-100 text-amber-700 px-2.5 py-1 text-xs font-medium transition"
|
||||
>
|
||||
<PencilSquareIcon className="h-4 w-4" /> Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(u.id.toString())}
|
||||
className="inline-flex items-center gap-1 rounded-md border border-red-200 bg-red-50 hover:bg-red-100 text-red-600 px-2.5 py-1 text-xs font-medium transition"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -486,6 +473,7 @@ export default function AdminUserManagementPage() {
|
||||
setSelectedUserId(null)
|
||||
}}
|
||||
userId={selectedUserId}
|
||||
onUserUpdated={fetchAllUsers}
|
||||
/>
|
||||
</PageLayout>
|
||||
)
|
||||
|
||||
@ -14,7 +14,10 @@ import {
|
||||
BuildingOfficeIcon,
|
||||
IdentificationIcon,
|
||||
CheckCircleIcon,
|
||||
XCircleIcon
|
||||
XCircleIcon,
|
||||
PencilSquareIcon,
|
||||
TrashIcon,
|
||||
ExclamationTriangleIcon
|
||||
} from '@heroicons/react/24/outline'
|
||||
import { AdminAPI, DetailedUserInfo } from '../utils/api'
|
||||
import useAuthStore from '../store/authStore'
|
||||
@ -23,17 +26,26 @@ interface UserDetailModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
userId: string | null
|
||||
onUserUpdated?: () => void
|
||||
}
|
||||
|
||||
export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailModalProps) {
|
||||
export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated }: UserDetailModalProps) {
|
||||
const [userDetails, setUserDetails] = useState<DetailedUserInfo | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [archiving, setArchiving] = useState(false)
|
||||
const [showArchiveConfirm, setShowArchiveConfirm] = useState(false)
|
||||
const [editedProfile, setEditedProfile] = useState<any>(null)
|
||||
const token = useAuthStore(state => state.accessToken)
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && userId && token) {
|
||||
fetchUserDetails()
|
||||
setIsEditing(false)
|
||||
setShowArchiveConfirm(false)
|
||||
setEditedProfile(null)
|
||||
}
|
||||
}, [isOpen, userId, token])
|
||||
|
||||
@ -47,6 +59,12 @@ export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailM
|
||||
const response = await AdminAPI.getDetailedUserInfo(token, userId)
|
||||
if (response.success) {
|
||||
setUserDetails(response)
|
||||
// Initialize edited profile with current data
|
||||
if (response.personalProfile) {
|
||||
setEditedProfile(response.personalProfile)
|
||||
} else if (response.companyProfile) {
|
||||
setEditedProfile(response.companyProfile)
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to fetch user details')
|
||||
}
|
||||
@ -59,6 +77,104 @@ export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailM
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchiveUser = async () => {
|
||||
if (!userId || !token) return
|
||||
|
||||
setArchiving(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const isCurrentlyInactive = userDetails?.userStatus?.status === 'inactive'
|
||||
|
||||
if (isCurrentlyInactive) {
|
||||
// Unarchive user
|
||||
const response = await AdminAPI.unarchiveUser(token, userId)
|
||||
if (response.success) {
|
||||
onClose()
|
||||
if (onUserUpdated) {
|
||||
onUserUpdated()
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to unarchive user')
|
||||
}
|
||||
} else {
|
||||
// Archive user
|
||||
const response = await AdminAPI.archiveUser(token, userId)
|
||||
if (response.success) {
|
||||
onClose()
|
||||
if (onUserUpdated) {
|
||||
onUserUpdated()
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to archive user')
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to archive/unarchive user'
|
||||
setError(errorMessage)
|
||||
console.error('UserDetailModal.handleArchiveUser error:', err)
|
||||
} finally {
|
||||
setArchiving(false)
|
||||
setShowArchiveConfirm(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveProfile = async () => {
|
||||
if (!userId || !token || !editedProfile || !userDetails) return
|
||||
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const userType = userDetails.user.user_type
|
||||
const response = await AdminAPI.updateUserProfile(token, userId, editedProfile, userType)
|
||||
if (response.success) {
|
||||
// Refresh user details
|
||||
await fetchUserDetails()
|
||||
setIsEditing(false)
|
||||
if (onUserUpdated) {
|
||||
onUserUpdated()
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to update user profile')
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to update user profile'
|
||||
setError(errorMessage)
|
||||
console.error('UserDetailModal.handleSaveProfile error:', err)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleAdminVerification = async () => {
|
||||
if (!userId || !token || !userDetails) return
|
||||
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const newVerificationStatus = userDetails.userStatus?.is_admin_verified === 1 ? 0 : 1
|
||||
// Note: You'll need to implement this API method
|
||||
const response = await AdminAPI.updateUserVerification(token, userId, newVerificationStatus)
|
||||
if (response.success) {
|
||||
// Refresh user details
|
||||
await fetchUserDetails()
|
||||
if (onUserUpdated) {
|
||||
onUserUpdated()
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to update verification status')
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to update verification status'
|
||||
setError(errorMessage)
|
||||
console.error('UserDetailModal.handleToggleAdminVerification error:', err)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
@ -110,11 +226,11 @@ export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailM
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-6">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
@ -124,8 +240,8 @@ export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailM
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl sm:p-6">
|
||||
<div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-4xl max-h-[85vh] flex flex-col">
|
||||
<div className="absolute right-0 top-0 z-10 pr-4 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
@ -136,10 +252,17 @@ export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailM
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="sm:flex sm:items-start">
|
||||
{/* Scrollable Content Area */}
|
||||
<div className="overflow-y-auto px-4 pb-4 pt-5 sm:p-6">
|
||||
<div className="w-full">
|
||||
<Dialog.Title as="h3" className="text-lg font-semibold leading-6 text-gray-900 mb-6">
|
||||
<Dialog.Title as="h3" className="text-lg font-semibold leading-6 text-gray-900 mb-6 flex items-center gap-2 pr-8">
|
||||
User Details
|
||||
{isEditing && (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700">
|
||||
<PencilSquareIcon className="h-3 w-3" />
|
||||
Edit Mode
|
||||
</span>
|
||||
)}
|
||||
</Dialog.Title>
|
||||
|
||||
{loading && (
|
||||
@ -236,70 +359,232 @@ export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailM
|
||||
<h4 className="text-sm font-medium text-gray-900">Profile Information</h4>
|
||||
</div>
|
||||
|
||||
{userDetails.personalProfile && (
|
||||
{isEditing && editedProfile ? (
|
||||
// Edit mode - show input fields
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Name:</span>
|
||||
<span className="ml-2 text-gray-600">
|
||||
{userDetails.personalProfile.first_name} {userDetails.personalProfile.last_name}
|
||||
</span>
|
||||
</div>
|
||||
{userDetails.personalProfile.phone && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Phone:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.personalProfile.phone}</span>
|
||||
</div>
|
||||
{userDetails.personalProfile && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.first_name || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, first_name: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.last_name || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, last_name: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Phone</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.phone || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, phone: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Date of Birth</label>
|
||||
<input
|
||||
type="date"
|
||||
value={editedProfile.date_of_birth || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, date_of_birth: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="block font-medium text-gray-700 mb-1">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.address || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, address: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">City</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.city || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, city: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Postal Code</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.zip_code || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, zip_code: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Country</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.country || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, country: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{userDetails.personalProfile.date_of_birth && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Date of Birth:</span>
|
||||
<span className="ml-2 text-gray-600">{formatDate(userDetails.personalProfile.date_of_birth)}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.personalProfile.address && (
|
||||
<div className="sm:col-span-2">
|
||||
<span className="font-medium text-gray-700">Address:</span>
|
||||
<span className="ml-2 text-gray-600">
|
||||
{userDetails.personalProfile.address}, {userDetails.personalProfile.postal_code} {userDetails.personalProfile.city}, {userDetails.personalProfile.country}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{userDetails.companyProfile && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Company Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.company_name || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, company_name: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Tax ID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.tax_id || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, tax_id: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Registration Number</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.registration_number || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, registration_number: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Phone</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.phone || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, phone: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="block font-medium text-gray-700 mb-1">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.address || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, address: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">City</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.city || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, city: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Postal Code</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.zip_code || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, zip_code: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium text-gray-700 mb-1">Country</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedProfile.country || ''}
|
||||
onChange={(e) => setEditedProfile({...editedProfile, country: e.target.value})}
|
||||
className="w-full rounded border-gray-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
// View mode - show readonly data
|
||||
<>
|
||||
{userDetails.personalProfile && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Name:</span>
|
||||
<span className="ml-2 text-gray-600">
|
||||
{userDetails.personalProfile.first_name} {userDetails.personalProfile.last_name}
|
||||
</span>
|
||||
</div>
|
||||
{userDetails.personalProfile.phone && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Phone:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.personalProfile.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.personalProfile.date_of_birth && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Date of Birth:</span>
|
||||
<span className="ml-2 text-gray-600">{formatDate(userDetails.personalProfile.date_of_birth)}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.personalProfile.address && (
|
||||
<div className="sm:col-span-2">
|
||||
<span className="font-medium text-gray-700">Address:</span>
|
||||
<span className="ml-2 text-gray-600">
|
||||
{userDetails.personalProfile.address}, {userDetails.personalProfile.zip_code} {userDetails.personalProfile.city}, {userDetails.personalProfile.country}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{userDetails.companyProfile && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Company Name:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.company_name}</span>
|
||||
</div>
|
||||
{userDetails.companyProfile.tax_id && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Tax ID:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.tax_id}</span>
|
||||
{userDetails.companyProfile && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Company Name:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.company_name}</span>
|
||||
</div>
|
||||
{userDetails.companyProfile.tax_id && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Tax ID:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.tax_id}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.companyProfile.registration_number && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Registration Number:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.registration_number}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.companyProfile.phone && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Phone:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.companyProfile.address && (
|
||||
<div className="sm:col-span-2">
|
||||
<span className="font-medium text-gray-700">Address:</span>
|
||||
<span className="ml-2 text-gray-600">
|
||||
{userDetails.companyProfile.address}, {userDetails.companyProfile.zip_code} {userDetails.companyProfile.city}, {userDetails.companyProfile.country}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{userDetails.companyProfile.registration_number && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Registration Number:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.registration_number}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.companyProfile.phone && (
|
||||
<div>
|
||||
<span className="font-medium text-gray-700">Phone:</span>
|
||||
<span className="ml-2 text-gray-600">{userDetails.companyProfile.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
{userDetails.companyProfile.address && (
|
||||
<div className="sm:col-span-2">
|
||||
<span className="font-medium text-gray-700">Address:</span>
|
||||
<span className="ml-2 text-gray-600">
|
||||
{userDetails.companyProfile.address}, {userDetails.companyProfile.postal_code} {userDetails.companyProfile.city}, {userDetails.companyProfile.country}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -415,13 +700,155 @@ export default function UserDetailModal({ isOpen, onClose, userId }: UserDetailM
|
||||
</div>
|
||||
|
||||
<div className="mt-5 sm:mt-6">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
onClick={onClose}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
{showArchiveConfirm ? (
|
||||
// Archive/Unarchive Confirmation Dialog
|
||||
<div className={`${userDetails?.userStatus?.status === 'inactive' ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'} border rounded-lg p-4 mb-4`}>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<ExclamationTriangleIcon className={`h-5 w-5 ${userDetails?.userStatus?.status === 'inactive' ? 'text-green-600' : 'text-red-600'}`} />
|
||||
<h4 className={`text-sm font-medium ${userDetails?.userStatus?.status === 'inactive' ? 'text-green-900' : 'text-red-900'}`}>
|
||||
{userDetails?.userStatus?.status === 'inactive' ? 'Unarchive User' : 'Archive User'}
|
||||
</h4>
|
||||
</div>
|
||||
<p className={`text-sm ${userDetails?.userStatus?.status === 'inactive' ? 'text-green-700' : 'text-red-700'} mb-4`}>
|
||||
{userDetails?.userStatus?.status === 'inactive'
|
||||
? 'Are you sure you want to unarchive this user? This will reactivate their account.'
|
||||
: 'Are you sure you want to archive this user? This action will disable their account but preserve all their data.'}
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleArchiveUser}
|
||||
disabled={archiving}
|
||||
className={`inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
|
||||
userDetails?.userStatus?.status === 'inactive'
|
||||
? 'bg-green-600 hover:bg-green-500 focus-visible:outline-green-600'
|
||||
: 'bg-red-600 hover:bg-red-500 focus-visible:outline-red-600'
|
||||
}`}
|
||||
>
|
||||
{archiving ? (
|
||||
<>
|
||||
<div className="h-4 w-4 border-2 border-white border-b-transparent rounded-full animate-spin" />
|
||||
{userDetails?.userStatus?.status === 'inactive' ? 'Unarchiving...' : 'Archiving...'}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
{userDetails?.userStatus?.status === 'inactive' ? 'Unarchive User' : 'Archive User'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowArchiveConfirm(false)}
|
||||
disabled={archiving}
|
||||
className="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Normal action buttons
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
{isEditing ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSaveProfile}
|
||||
disabled={saving}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-green-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<div className="h-4 w-4 border-2 border-white border-b-transparent rounded-full animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircleIcon className="h-4 w-4" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsEditing(false)
|
||||
// Reset edited profile to original
|
||||
if (userDetails?.personalProfile) {
|
||||
setEditedProfile(userDetails.personalProfile)
|
||||
} else if (userDetails?.companyProfile) {
|
||||
setEditedProfile(userDetails.companyProfile)
|
||||
}
|
||||
}}
|
||||
disabled={saving}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<XCircleIcon className="h-4 w-4" />
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditing(true)}
|
||||
disabled={saving}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<PencilSquareIcon className="h-4 w-4" />
|
||||
Edit Profile
|
||||
</button>
|
||||
|
||||
{userDetails?.userStatus && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggleAdminVerification}
|
||||
disabled={saving}
|
||||
className={`inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
|
||||
userDetails.userStatus.is_admin_verified === 1
|
||||
? 'bg-amber-600 hover:bg-amber-500 text-white focus-visible:outline-amber-600'
|
||||
: 'bg-green-600 hover:bg-green-500 text-white focus-visible:outline-green-600'
|
||||
}`}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<div className="h-4 w-4 border-2 border-white border-b-transparent rounded-full animate-spin" />
|
||||
Updating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ShieldCheckIcon className="h-4 w-4" />
|
||||
{userDetails.userStatus.is_admin_verified === 1 ? 'Unverify User' : 'Verify User'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowArchiveConfirm(true)}
|
||||
className={`inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-offset-2 ${
|
||||
userDetails?.userStatus?.status === 'inactive'
|
||||
? 'bg-green-600 hover:bg-green-500 focus-visible:outline-green-600'
|
||||
: 'bg-red-600 hover:bg-red-500 focus-visible:outline-red-600'
|
||||
}`}
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
{userDetails?.userStatus?.status === 'inactive' ? 'Unarchive User' : 'Archive User'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
|
||||
@ -593,7 +593,7 @@ export default function StorePage() {
|
||||
}}
|
||||
disabled={!product.inStock}
|
||||
className={`
|
||||
inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-200
|
||||
inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 transition-colors duration-200
|
||||
${product.inStock
|
||||
? 'bg-[#8D6B1D] text-white hover:bg-[#7A5E1A] focus-visible:outline-[#8D6B1D]'
|
||||
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
@ -689,7 +689,7 @@ export default function StorePage() {
|
||||
<button
|
||||
disabled={!product.inStock}
|
||||
className={`
|
||||
inline-flex items-center rounded-md px-4 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
|
||||
inline-flex items-center rounded-md px-4 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2
|
||||
${product.inStock
|
||||
? 'bg-[#8D6B1D] text-white hover:bg-[#7A5E1A] focus-visible:outline-[#8D6B1D]'
|
||||
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
|
||||
@ -41,6 +41,10 @@ export const API_ENDPOINTS = {
|
||||
ADMIN_VERIFICATION_PENDING: '/api/admin/verification-pending-users',
|
||||
ADMIN_UNVERIFIED_USERS: '/api/admin/unverified-users',
|
||||
ADMIN_VERIFY_USER: '/api/admin/verify-user/:id',
|
||||
ADMIN_ARCHIVE_USER: '/api/admin/archive-user/:id',
|
||||
ADMIN_UNARCHIVE_USER: '/api/admin/unarchive-user/:id',
|
||||
ADMIN_UPDATE_USER_VERIFICATION: '/api/admin/update-verification/:id',
|
||||
ADMIN_UPDATE_USER_PROFILE: '/api/admin/update-user-profile/:id',
|
||||
}
|
||||
|
||||
// API Helper Functions
|
||||
@ -237,7 +241,8 @@ export class AdminAPI {
|
||||
static async getUserStats(token: string) {
|
||||
const response = await ApiClient.get(API_ENDPOINTS.ADMIN_USER_STATS, token)
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch user stats')
|
||||
const error = await response.json().catch(() => ({ message: 'Failed to fetch user stats' }))
|
||||
throw new Error(error.message || 'Failed to fetch user stats')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
@ -245,7 +250,8 @@ export class AdminAPI {
|
||||
static async getUserList(token: string) {
|
||||
const response = await ApiClient.get(API_ENDPOINTS.ADMIN_USER_LIST, token)
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch user list')
|
||||
const error = await response.json().catch(() => ({ message: 'Failed to fetch user list' }))
|
||||
throw new Error(error.message || 'Failed to fetch user list')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
@ -253,7 +259,8 @@ export class AdminAPI {
|
||||
static async getVerificationPendingUsers(token: string) {
|
||||
const response = await ApiClient.get(API_ENDPOINTS.ADMIN_VERIFICATION_PENDING, token)
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch pending users')
|
||||
const error = await response.json().catch(() => ({ message: 'Failed to fetch pending users' }))
|
||||
throw new Error(error.message || 'Failed to fetch pending users')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
@ -261,7 +268,8 @@ export class AdminAPI {
|
||||
static async getUnverifiedUsers(token: string) {
|
||||
const response = await ApiClient.get(API_ENDPOINTS.ADMIN_UNVERIFIED_USERS, token)
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch unverified users')
|
||||
const error = await response.json().catch(() => ({ message: 'Failed to fetch unverified users' }))
|
||||
throw new Error(error.message || 'Failed to fetch unverified users')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
@ -270,7 +278,8 @@ export class AdminAPI {
|
||||
const endpoint = API_ENDPOINTS.ADMIN_USER_DETAILED.replace(':id', userId)
|
||||
const response = await ApiClient.get(endpoint, token)
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch detailed user info')
|
||||
const error = await response.json().catch(() => ({ message: 'Failed to fetch detailed user info' }))
|
||||
throw new Error(error.message || 'Failed to fetch detailed user info')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
@ -284,6 +293,46 @@ export class AdminAPI {
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
|
||||
static async archiveUser(token: string, userId: string) {
|
||||
const endpoint = API_ENDPOINTS.ADMIN_ARCHIVE_USER.replace(':id', userId)
|
||||
const response = await ApiClient.patch(endpoint, { status: 'inactive' }, token)
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
throw new Error(error.message || 'Failed to archive user')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
|
||||
static async unarchiveUser(token: string, userId: string) {
|
||||
const endpoint = API_ENDPOINTS.ADMIN_UNARCHIVE_USER.replace(':id', userId)
|
||||
const response = await ApiClient.patch(endpoint, { status: 'active' }, token)
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
throw new Error(error.message || 'Failed to unarchive user')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
|
||||
static async updateUserVerification(token: string, userId: string, isVerified: number) {
|
||||
const endpoint = API_ENDPOINTS.ADMIN_UPDATE_USER_VERIFICATION.replace(':id', userId)
|
||||
const response = await ApiClient.patch(endpoint, { is_admin_verified: isVerified }, token)
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
throw new Error(error.message || 'Failed to update user verification')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
|
||||
static async updateUserProfile(token: string, userId: string, profileData: any, userType: string) {
|
||||
const endpoint = API_ENDPOINTS.ADMIN_UPDATE_USER_PROFILE.replace(':id', userId)
|
||||
const response = await ApiClient.patch(endpoint, { profileData, userType }, token)
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
throw new Error(error.message || 'Failed to update user profile')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
}
|
||||
|
||||
// Response Types
|
||||
@ -338,7 +387,7 @@ export interface DetailedUserInfo {
|
||||
phone?: string
|
||||
address?: string
|
||||
city?: string
|
||||
postal_code?: string
|
||||
zip_code?: string
|
||||
country?: string
|
||||
}
|
||||
companyProfile?: {
|
||||
@ -349,7 +398,7 @@ export interface DetailedUserInfo {
|
||||
phone?: string
|
||||
address?: string
|
||||
city?: string
|
||||
postal_code?: string
|
||||
zip_code?: string
|
||||
country?: string
|
||||
}
|
||||
userStatus?: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user