From 6f8573fe162a4c3662a9d8d00e7dfe9fe2ea2e0b Mon Sep 17 00:00:00 2001
From: seaznCode <alexander.atmn@gmail.com>
Date: Sat, 1 Nov 2025 18:47:21 +0100
Subject: [PATCH] feat: Add UserDetailModal component and update API for user
 status management

- Implemented UserDetailModal component for displaying and editing user details.
- Added functionality for archiving/unarchiving users and toggling admin verification.
- Enhanced user profile editing capabilities with form inputs for personal and company profiles.
- Introduced loading and error handling states for better user experience.
- Updated API utility to include a new endpoint for updating user status.
- Modified DetailedUserInfo interface to accommodate new user role 'super_admin'.
---
 src/app/admin/user-management/page.tsx     |   31 +-
 src/app/components/UserDetailModal.tsx     | 1115 ++++++++------------
 src/app/components/UserDetailModal_Old.tsx |  860 +++++++++++++++
 src/app/utils/api.ts                       |   13 +-
 4 files changed, 1353 insertions(+), 666 deletions(-)
 create mode 100644 src/app/components/UserDetailModal_Old.tsx

diff --git a/src/app/admin/user-management/page.tsx b/src/app/admin/user-management/page.tsx
index 850676a..4bb7798 100644
--- a/src/app/admin/user-management/page.tsx
+++ b/src/app/admin/user-management/page.tsx
@@ -13,7 +13,7 @@ import { AdminAPI } from '../../utils/api'
 import useAuthStore from '../../store/authStore'
 
 type UserType = 'personal' | 'company'
-type UserStatus = 'active' | 'pending' | 'disabled' | 'inactive'
+type UserStatus = 'active' | 'pending' | 'disabled' | 'inactive' | 'suspended' | 'archived'
 type UserRole = 'user' | 'admin'
 
 interface User {
@@ -99,12 +99,13 @@ 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', 'inactive', etc.
+      // Backend status can be: 'pending', 'active', 'suspended', 'inactive', 'archived'
       // is_admin_verified: 1 = verified by admin, 0 = not verified
-      const userStatus: UserStatus = u.status === 'inactive' ? 'inactive' :
+      const userStatus: UserStatus = u.status === 'archived' ? 'archived' :
+                                    u.status === 'inactive' ? 'inactive' :
+                                    u.status === 'suspended' ? 'suspended' :
                                     u.is_admin_verified === 1 ? 'active' : 
                                     u.status === 'pending' ? 'pending' : 
-                                    u.status === 'suspended' ? 'disabled' :
                                     'pending' // default fallback
       
       return (
@@ -173,10 +174,11 @@ export default function AdminUserManagementPage() {
     ]
     const rows = filtered.map(u => {
       // Map backend to friendly values
-      const userStatus: UserStatus = u.status === 'inactive' ? 'inactive' :
+      const userStatus: UserStatus = u.status === 'archived' ? 'archived' :
+        u.status === 'inactive' ? 'inactive' :
+        u.status === 'suspended' ? 'suspended' :
         u.is_admin_verified === 1 ? 'active' :
-        u.status === 'pending' ? 'pending' :
-        u.status === 'suspended' ? 'disabled' : 'pending'
+        u.status === 'pending' ? 'pending' : 'pending'
       return [
         u.id,
         u.email,
@@ -220,8 +222,10 @@ export default function AdminUserManagementPage() {
   const statusBadge = (s: UserStatus) =>
     s==='active' ? badge('Active','green')
     : s==='pending' ? badge('Pending','amber')
+    : s==='suspended' ? badge('Suspended','rose')
+    : s==='archived' ? badge('Archived','gray')
     : s==='inactive' ? badge('Inactive','gray')
-    : badge('Disabled','rose')
+    : badge('Unknown','gray')
 
   const typeBadge = (t: UserType) =>
     t==='personal' ? badge('Personal','blue') : badge('Company','purple')
@@ -291,7 +295,7 @@ export default function AdminUserManagementPage() {
                 <select
                   value={fType}
                   onChange={e => setFType(e.target.value as any)}
-                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                 >
                   <option value="all">All Types</option>
                   <option value="personal">Personal</option>
@@ -303,7 +307,7 @@ export default function AdminUserManagementPage() {
                 <select
                   value={fStatus}
                   onChange={e => setFStatus(e.target.value as any)}
-                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                 >
                   <option value="all">All Status</option>
                   {STATUSES.map(s => <option key={s} value={s}>{s[0].toUpperCase()+s.slice(1)}</option>)}
@@ -314,7 +318,7 @@ export default function AdminUserManagementPage() {
                 <select
                   value={fRole}
                   onChange={e => setFRole(e.target.value as any)}
-                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                 >
                   <option value="all">All Roles</option>
                   {ROLES.map(r => <option key={r} value={r}>{r[0].toUpperCase()+r.slice(1)}</option>)}
@@ -383,10 +387,11 @@ 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.status === 'inactive' ? 'inactive' :
+                    const userStatus: UserStatus = u.status === 'archived' ? 'archived' :
+                                                  u.status === 'inactive' ? 'inactive' :
+                                                  u.status === 'suspended' ? 'suspended' :
                                                   u.is_admin_verified === 1 ? 'active' : 
                                                   u.status === 'pending' ? 'pending' : 
-                                                  u.status === 'suspended' ? 'disabled' :
                                                   'pending' // default fallback
                     
                     const createdDate = new Date(u.created_at).toLocaleDateString()
diff --git a/src/app/components/UserDetailModal.tsx b/src/app/components/UserDetailModal.tsx
index f21ccd8..246cf15 100644
--- a/src/app/components/UserDetailModal.tsx
+++ b/src/app/components/UserDetailModal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Fragment, useState, useEffect } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, Transition, Listbox } from '@headlessui/react'
 import {
   XMarkIcon,
   UserIcon,
@@ -15,9 +15,8 @@ import {
   IdentificationIcon,
   CheckCircleIcon,
   XCircleIcon,
-  PencilSquareIcon,
-  TrashIcon,
-  ExclamationTriangleIcon
+  ChevronUpDownIcon,
+  CheckIcon
 } from '@heroicons/react/24/outline'
 import { AdminAPI, DetailedUserInfo } from '../utils/api'
 import useAuthStore from '../store/authStore'
@@ -29,26 +28,36 @@ interface UserDetailModalProps {
   onUserUpdated?: () => void
 }
 
+type UserStatus = 'inactive' | 'pending' | 'active' | 'suspended' | 'archived'
+
+const STATUS_OPTIONS: { value: UserStatus; label: string; color: string }[] = [
+  { value: 'pending', label: 'Pending', color: 'amber' },
+  { value: 'active', label: 'Active', color: 'green' },
+  { value: 'suspended', label: 'Suspended', color: 'rose' },
+  { value: 'archived', label: 'Archived', color: 'gray' },
+  { value: 'inactive', label: 'Inactive', color: 'gray' }
+]
+
 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 [selectedStatus, setSelectedStatus] = useState<UserStatus>('pending')
   const token = useAuthStore(state => state.accessToken)
 
   useEffect(() => {
     if (isOpen && userId && token) {
       fetchUserDetails()
-      setIsEditing(false)
-      setShowArchiveConfirm(false)
-      setEditedProfile(null)
     }
   }, [isOpen, userId, token])
 
+  useEffect(() => {
+    if (userDetails?.userStatus?.status) {
+      setSelectedStatus(userDetails.userStatus.status as UserStatus)
+    }
+  }, [userDetails])
+
   const fetchUserDetails = async () => {
     if (!userId || !token) return
     
@@ -59,12 +68,6 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
       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')
       }
@@ -77,88 +80,43 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
     }
   }
 
-  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
+  const handleStatusChange = async (newStatus: UserStatus) => {
+    if (!userId || !token || newStatus === selectedStatus) return
     
     setSaving(true)
     setError(null)
     
     try {
-      const userType = userDetails.user.user_type
-      const response = await AdminAPI.updateUserProfile(token, userId, editedProfile, userType)
+      const response = await AdminAPI.updateUserStatus(token, userId, newStatus)
       if (response.success) {
-        // Refresh user details
+        setSelectedStatus(newStatus)
         await fetchUserDetails()
-        setIsEditing(false)
         if (onUserUpdated) {
           onUserUpdated()
         }
       } else {
-        throw new Error(response.message || 'Failed to update user profile')
+        throw new Error(response.message || 'Failed to update user status')
       }
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to update user profile'
+      const errorMessage = err instanceof Error ? err.message : 'Failed to update user status'
       setError(errorMessage)
-      console.error('UserDetailModal.handleSaveProfile error:', err)
+      console.error('UserDetailModal.handleStatusChange error:', err)
     } finally {
       setSaving(false)
     }
   }
 
   const handleToggleAdminVerification = async () => {
-    if (!userId || !token || !userDetails) return
+    if (!userId || !token || !userDetails?.userStatus) 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)
+      const newValue = userDetails.userStatus.is_admin_verified === 1 ? 0 : 1
+      const response = await AdminAPI.updateUserVerification(token, userId, newValue)
+      
       if (response.success) {
-        // Refresh user details
         await fetchUserDetails()
         if (onUserUpdated) {
           onUserUpdated()
@@ -175,45 +133,40 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
     }
   }
 
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('de-DE', {
+  const formatDate = (dateString: string | undefined | null) => {
+    if (!dateString) return 'N/A'
+    return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
       month: 'long',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
+      day: 'numeric'
     })
   }
 
-  const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes'
+  const formatFileSize = (bytes: number | undefined) => {
+    if (!bytes) return '0 B'
     const k = 1024
-    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const sizes = ['B', 'KB', 'MB', 'GB']
     const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
   }
 
-  const StatusBadge = ({ status, verified }: { status: boolean, verified?: boolean }) => {
-    if (verified) {
-      return (
-        <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">
-          <CheckCircleIcon className="h-3 w-3" />
-          Verified
-        </span>
-      )
-    }
-    return (
-      <span className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ${
-        status 
-          ? 'bg-green-100 text-green-700' 
-          : 'bg-red-100 text-red-700'
-      }`}>
-        {status ? <CheckCircleIcon className="h-3 w-3" /> : <XCircleIcon className="h-3 w-3" />}
-        {status ? 'Complete' : 'Incomplete'}
-      </span>
-    )
+  const getStatusColor = (status: UserStatus) => {
+    const option = STATUS_OPTIONS.find(opt => opt.value === status)
+    return option?.color || 'gray'
   }
 
+  const getStatusBadgeClass = (color: string) => {
+    const colorMap: Record<string, string> = {
+      amber: 'bg-amber-100 text-amber-800 border-amber-200',
+      green: 'bg-green-100 text-green-800 border-green-200',
+      rose: 'bg-rose-100 text-rose-800 border-rose-200',
+      gray: 'bg-gray-100 text-gray-800 border-gray-200'
+    }
+    return colorMap[color] || colorMap.gray
+  }
+
+  if (!isOpen) return null
+
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-50" onClose={onClose}>
@@ -240,7 +193,8 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
               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 shadow-xl transition-all w-full max-w-4xl max-h-[85vh] flex flex-col">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-5xl max-h-[85vh] flex flex-col">
+                {/* Close Button */}
                 <div className="absolute right-0 top-0 z-10 pr-4 pt-4">
                   <button
                     type="button"
@@ -255,600 +209,457 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
                 {/* 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 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 && (
-                      <div className="flex items-center justify-center py-12">
-                        <div className="h-8 w-8 rounded-full border-2 border-blue-500 border-b-transparent animate-spin" />
-                        <span className="ml-3 text-gray-600">Loading user details...</span>
+                    {loading ? (
+                      <div className="flex justify-center items-center py-12">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
                       </div>
-                    )}
-
-                    {error && (
-                      <div className="rounded-md bg-red-50 p-4 mb-6">
-                        <div className="text-sm text-red-700">{error}</div>
-                      </div>
-                    )}
-
-                    {userDetails && (
-                      <div className="space-y-6">
-                        {/* Basic User Info */}
-                        <div className="bg-gray-50 rounded-lg p-4">
-                          <div className="flex items-center gap-3 mb-4">
-                            <UserIcon className="h-5 w-5 text-gray-600" />
-                            <h4 className="text-sm font-medium text-gray-900">Basic Information</h4>
+                    ) : error ? (
+                      <div className="rounded-md bg-red-50 p-4">
+                        <div className="flex">
+                          <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+                          <div className="ml-3">
+                            <h3 className="text-sm font-medium text-red-800">Error</h3>
+                            <div className="mt-2 text-sm text-red-700">{error}</div>
                           </div>
-                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
-                            <div>
-                              <span className="font-medium text-gray-700">Email:</span>
-                              <span className="ml-2 text-gray-600">{userDetails.user.email}</span>
+                        </div>
+                      </div>
+                    ) : userDetails ? (
+                      <div className="space-y-6">
+                        {/* Header Section with User Info & Status */}
+                        <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg px-6 py-8 text-white">
+                          <div className="flex items-start justify-between">
+                            <div className="flex items-start gap-4">
+                              <div className="bg-white/20 backdrop-blur-sm p-4 rounded-full">
+                                {userDetails.user.user_type === 'company' ? (
+                                  <BuildingOfficeIcon className="h-10 w-10 text-white" />
+                                ) : (
+                                  <UserIcon className="h-10 w-10 text-white" />
+                                )}
+                              </div>
+                              <div className="text-left">
+                                <h2 className="text-2xl font-bold">
+                                  {userDetails.user.user_type === 'personal' 
+                                    ? `${userDetails.personalProfile?.first_name || ''} ${userDetails.personalProfile?.last_name || ''}`.trim()
+                                    : userDetails.companyProfile?.company_name || 'Unknown'}
+                                </h2>
+                                <p className="text-indigo-100 mt-1">{userDetails.user.email}</p>
+                                <div className="flex items-center gap-2 mt-3">
+                                  <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
+                                    userDetails.user.user_type === 'personal' 
+                                      ? 'bg-blue-100 text-blue-800' 
+                                      : 'bg-purple-100 text-purple-800'
+                                  }`}>
+                                    {userDetails.user.user_type === 'personal' ? 'Personal' : 'Company'}
+                                  </span>
+                                  <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
+                                    userDetails.user.role === 'admin' || userDetails.user.role === 'super_admin'
+                                      ? 'bg-yellow-100 text-yellow-800'
+                                      : 'bg-gray-100 text-gray-800'
+                                  }`}>
+                                    {userDetails.user.role === 'super_admin' ? 'Super Admin' : userDetails.user.role}
+                                  </span>
+                                </div>
+                              </div>
                             </div>
-                            <div>
-                              <span className="font-medium text-gray-700">Type:</span>
-                              <span className="ml-2 text-gray-600 capitalize">{userDetails.user.user_type}</span>
-                            </div>
-                            <div>
-                              <span className="font-medium text-gray-700">Role:</span>
-                              <span className="ml-2 text-gray-600 capitalize">{userDetails.user.role}</span>
-                            </div>
-                            <div>
-                              <span className="font-medium text-gray-700">Created:</span>
-                              <span className="ml-2 text-gray-600">{formatDate(userDetails.user.created_at)}</span>
-                            </div>
-                            {userDetails.user.last_login_at && (
-                              <div>
-                                <span className="font-medium text-gray-700">Last Login:</span>
-                                <span className="ml-2 text-gray-600">{formatDate(userDetails.user.last_login_at)}</span>
+                            
+                            {/* Status Badge */}
+                            {userDetails.userStatus && (
+                              <div className="bg-white rounded-lg px-4 py-3 text-gray-900">
+                                <div className="text-xs text-gray-500 mb-1">Current Status</div>
+                                <div className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold border ${
+                                  getStatusBadgeClass(getStatusColor(userDetails.userStatus.status as UserStatus))
+                                }`}>
+                                  {userDetails.userStatus.status.charAt(0).toUpperCase() + userDetails.userStatus.status.slice(1)}
+                                </div>
                               </div>
                             )}
                           </div>
                         </div>
 
-                        {/* Verification Status */}
-                        {userDetails.userStatus && (
-                          <div className="bg-blue-50 rounded-lg p-4">
-                            <div className="flex items-center gap-3 mb-4">
-                              <ShieldCheckIcon className="h-5 w-5 text-blue-600" />
-                              <h4 className="text-sm font-medium text-gray-900">Verification Status</h4>
+                        {/* Admin Controls Section */}
+                        <div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
+                          <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
+                            <ShieldCheckIcon className="h-5 w-5 text-indigo-600" />
+                            Admin Controls
+                          </h3>
+                          
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            {/* Status Dropdown */}
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-2">
+                                Change Status
+                              </label>
+                              <Listbox value={selectedStatus} onChange={handleStatusChange} disabled={saving}>
+                                <div className="relative">
+                                  <Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white py-2.5 pl-3 pr-10 text-left border border-gray-300 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
+                                    <span className="block truncate font-medium">
+                                      {STATUS_OPTIONS.find(opt => opt.value === selectedStatus)?.label || selectedStatus}
+                                    </span>
+                                    <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                                      <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                                    </span>
+                                  </Listbox.Button>
+                                  <Transition
+                                    as={Fragment}
+                                    leave="transition ease-in duration-100"
+                                    leaveFrom="opacity-100"
+                                    leaveTo="opacity-0"
+                                  >
+                                    <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                                      {STATUS_OPTIONS.map((option) => (
+                                        <Listbox.Option
+                                          key={option.value}
+                                          className={({ active }) =>
+                                            `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                                              active ? 'bg-indigo-100 text-indigo-900' : 'text-gray-900'
+                                            }`
+                                          }
+                                          value={option.value}
+                                        >
+                                          {({ selected }) => (
+                                            <>
+                                              <span className={`block truncate ${selected ? 'font-semibold' : 'font-normal'}`}>
+                                                {option.label}
+                                              </span>
+                                              {selected && (
+                                                <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-indigo-600">
+                                                  <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                                </span>
+                                              )}
+                                            </>
+                                          )}
+                                        </Listbox.Option>
+                                      ))}
+                                    </Listbox.Options>
+                                  </Transition>
+                                </div>
+                              </Listbox>
                             </div>
-                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
-                              <div className="flex items-center justify-between">
-                                <span className="text-sm text-gray-700">Email</span>
-                                <StatusBadge status={userDetails.userStatus.email_verified === 1} />
-                              </div>
-                              <div className="flex items-center justify-between">
-                                <span className="text-sm text-gray-700">Profile</span>
-                                <StatusBadge status={userDetails.userStatus.profile_completed === 1} />
-                              </div>
-                              <div className="flex items-center justify-between">
-                                <span className="text-sm text-gray-700">Documents</span>
-                                <StatusBadge status={userDetails.userStatus.documents_uploaded === 1} />
-                              </div>
-                              <div className="flex items-center justify-between">
-                                <span className="text-sm text-gray-700">Contract</span>
-                                <StatusBadge status={userDetails.userStatus.contract_signed === 1} />
-                              </div>
-                              <div className="flex items-center justify-between">
-                                <span className="text-sm text-gray-700">Admin Verified</span>
-                                <StatusBadge 
-                                  status={userDetails.userStatus.is_admin_verified === 1} 
-                                  verified={userDetails.userStatus.is_admin_verified === 1}
-                                />
-                              </div>
+
+                            {/* Admin Verification Toggle */}
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-2">
+                                Admin Verification
+                              </label>
+                              <button
+                                type="button"
+                                onClick={handleToggleAdminVerification}
+                                disabled={saving}
+                                className={`w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 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>
                             </div>
                           </div>
-                        )}
+                        </div>
 
                         {/* Profile Information */}
-                        {(userDetails.personalProfile || userDetails.companyProfile) && (
-                          <div className="bg-green-50 rounded-lg p-4">
-                            <div className="flex items-center gap-3 mb-4">
-                              {userDetails.user.user_type === 'personal' ? (
-                                <UserIcon className="h-5 w-5 text-green-600" />
-                              ) : (
-                                <BuildingOfficeIcon className="h-5 w-5 text-green-600" />
-                              )}
-                              <h4 className="text-sm font-medium text-gray-900">Profile Information</h4>
+                        {userDetails.user.user_type === 'personal' && userDetails.personalProfile && (
+                          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                            <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+                              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+                                <UserIcon className="h-5 w-5 text-gray-600" />
+                                Personal Information
+                              </h3>
+                            </div>
+                            <div className="px-6 py-5">
+                              <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5">
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">First Name</dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{userDetails.personalProfile.first_name || 'N/A'}</dd>
+                                </div>
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">Last Name</dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{userDetails.personalProfile.last_name || 'N/A'}</dd>
+                                </div>
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">
+                                    <PhoneIcon className="h-4 w-4 inline mr-1.5" />
+                                    Phone
+                                  </dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{userDetails.personalProfile.phone || 'N/A'}</dd>
+                                </div>
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">
+                                    <CalendarIcon className="h-4 w-4 inline mr-1.5" />
+                                    Date of Birth
+                                  </dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{formatDate(userDetails.personalProfile.date_of_birth)}</dd>
+                                </div>
+                                <div className="md:col-span-2">
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">
+                                    <MapPinIcon className="h-4 w-4 inline mr-1.5" />
+                                    Address
+                                  </dt>
+                                  <dd className="text-sm text-gray-900 font-medium">
+                                    {userDetails.personalProfile.address || 'N/A'}
+                                    {userDetails.personalProfile.city && <>, {userDetails.personalProfile.city}</>}
+                                    {userDetails.personalProfile.zip_code && <>, {userDetails.personalProfile.zip_code}</>}
+                                    {userDetails.personalProfile.country && <>, {userDetails.personalProfile.country}</>}
+                                  </dd>
+                                </div>
+                              </dl>
                             </div>
-                            
-                            {isEditing && editedProfile ? (
-                              // Edit mode - show input fields
-                              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
-                                {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.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>
-                                      </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>
-                                )}
-                              </>
-                            )}
                           </div>
                         )}
 
-                        {/* Documents */}
-                        {(userDetails.documents.length > 0 || userDetails.contracts.length > 0 || userDetails.idDocuments.length > 0) && (
-                          <div className="bg-purple-50 rounded-lg p-4">
-                            <div className="flex items-center gap-3 mb-4">
-                              <DocumentTextIcon className="h-5 w-5 text-purple-600" />
-                              <h4 className="text-sm font-medium text-gray-900">Documents</h4>
+                        {/* Company Profile Information */}
+                        {userDetails.user.user_type === 'company' && userDetails.companyProfile && (
+                          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                            <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+                              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+                                <BuildingOfficeIcon className="h-5 w-5 text-gray-600" />
+                                Company Information
+                              </h3>
                             </div>
+                            <div className="px-6 py-5">
+                              <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5">
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">Company Name</dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{userDetails.companyProfile.company_name || 'N/A'}</dd>
+                                </div>
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">Registration Number</dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{userDetails.companyProfile.registration_number || 'N/A'}</dd>
+                                </div>
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">Tax ID</dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{userDetails.companyProfile.tax_id || 'N/A'}</dd>
+                                </div>
+                                <div>
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">
+                                    <PhoneIcon className="h-4 w-4 inline mr-1.5" />
+                                    Phone
+                                  </dt>
+                                  <dd className="text-sm text-gray-900 font-medium">{userDetails.companyProfile.phone || 'N/A'}</dd>
+                                </div>
+                                <div className="md:col-span-2">
+                                  <dt className="text-sm font-medium text-gray-500 mb-1.5">
+                                    <MapPinIcon className="h-4 w-4 inline mr-1.5" />
+                                    Address
+                                  </dt>
+                                  <dd className="text-sm text-gray-900 font-medium">
+                                    {userDetails.companyProfile.address || 'N/A'}
+                                    {userDetails.companyProfile.city && <>, {userDetails.companyProfile.city}</>}
+                                    {userDetails.companyProfile.zip_code && <>, {userDetails.companyProfile.zip_code}</>}
+                                    {userDetails.companyProfile.country && <>, {userDetails.companyProfile.country}</>}
+                                  </dd>
+                                </div>
+                              </dl>
+                            </div>
+                          </div>
+                        )}
 
-                            {/* Regular Documents */}
-                            {userDetails.documents.length > 0 && (
-                              <div className="mb-4">
-                                <h5 className="text-xs font-medium text-gray-700 mb-2">Uploaded Documents</h5>
-                                <div className="space-y-2">
-                                  {userDetails.documents.map((doc) => (
-                                    <div key={doc.id} className="flex items-center justify-between bg-white p-2 rounded border">
-                                      <div>
-                                        <span className="text-sm font-medium text-gray-900">{doc.file_name}</span>
-                                        <span className="text-xs text-gray-500 ml-2">({formatFileSize(doc.file_size)})</span>
-                                      </div>
-                                      <span className="text-xs text-gray-500">{formatDate(doc.uploaded_at)}</span>
-                                    </div>
-                                  ))}
+                        {/* Account Status */}
+                        {userDetails.userStatus && (
+                          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                            <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+                              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+                                <CheckCircleIcon className="h-5 w-5 text-gray-600" />
+                                Registration Progress
+                              </h3>
+                            </div>
+                            <div className="px-6 py-5">
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div className="flex items-center gap-3">
+                                  {userDetails.userStatus.email_verified === 1 ? (
+                                    <CheckCircleIcon className="h-6 w-6 text-green-500" />
+                                  ) : (
+                                    <XCircleIcon className="h-6 w-6 text-gray-300" />
+                                  )}
+                                  <span className="text-sm font-medium text-gray-700">Email Verified</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                  {userDetails.userStatus.profile_completed === 1 ? (
+                                    <CheckCircleIcon className="h-6 w-6 text-green-500" />
+                                  ) : (
+                                    <XCircleIcon className="h-6 w-6 text-gray-300" />
+                                  )}
+                                  <span className="text-sm font-medium text-gray-700">Profile Completed</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                  {userDetails.userStatus.documents_uploaded === 1 ? (
+                                    <CheckCircleIcon className="h-6 w-6 text-green-500" />
+                                  ) : (
+                                    <XCircleIcon className="h-6 w-6 text-gray-300" />
+                                  )}
+                                  <span className="text-sm font-medium text-gray-700">Documents Uploaded</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                  {userDetails.userStatus.contract_signed === 1 ? (
+                                    <CheckCircleIcon className="h-6 w-6 text-green-500" />
+                                  ) : (
+                                    <XCircleIcon className="h-6 w-6 text-gray-300" />
+                                  )}
+                                  <span className="text-sm font-medium text-gray-700">Contract Signed</span>
                                 </div>
                               </div>
-                            )}
+                            </div>
+                          </div>
+                        )}
 
-                            {/* Contracts */}
-                            {userDetails.contracts.length > 0 && (
-                              <div className="mb-4">
-                                <h5 className="text-xs font-medium text-gray-700 mb-2">Contracts</h5>
-                                <div className="space-y-2">
-                                  {userDetails.contracts.map((contract) => (
-                                    <div key={contract.id} className="flex items-center justify-between bg-white p-2 rounded border">
-                                      <div>
-                                        <span className="text-sm font-medium text-gray-900">{contract.file_name}</span>
-                                        <span className="text-xs text-gray-500 ml-2">({formatFileSize(contract.file_size)})</span>
-                                      </div>
-                                      <span className="text-xs text-gray-500">{formatDate(contract.uploaded_at)}</span>
-                                    </div>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-
-                            {/* ID Documents */}
-                            {userDetails.idDocuments.length > 0 && (
-                              <div>
-                                <h5 className="text-xs font-medium text-gray-700 mb-2">ID Documents</h5>
-                                <div className="space-y-4">
-                                  {userDetails.idDocuments.map((idDoc) => (
-                                    <div key={idDoc.id} className="bg-white p-3 rounded border">
-                                      <div className="flex items-center gap-2 mb-2">
-                                        <IdentificationIcon className="h-4 w-4 text-gray-600" />
-                                        <span className="text-sm font-medium text-gray-900">{idDoc.document_type}</span>
-                                        <span className="text-xs text-gray-500">{formatDate(idDoc.uploaded_at)}</span>
-                                      </div>
-                                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                                        {idDoc.frontUrl && (
+                        {/* Documents Section */}
+                        {(userDetails.documents.length > 0 || userDetails.contracts.length > 0 || userDetails.idDocuments.length > 0) && (
+                          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                            <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+                              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+                                <DocumentTextIcon className="h-5 w-5 text-gray-600" />
+                                Documents ({userDetails.documents.length + userDetails.contracts.length + userDetails.idDocuments.length})
+                              </h3>
+                            </div>
+                            <div className="px-6 py-5 space-y-4">
+                              {/* Regular Documents */}
+                              {userDetails.documents.length > 0 && (
+                                <div>
+                                  <h5 className="text-sm font-medium text-gray-700 mb-3">Uploaded Documents</h5>
+                                  <div className="space-y-2">
+                                    {userDetails.documents.map((doc) => (
+                                      <div key={doc.id} className="flex items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-200">
+                                        <div className="flex items-center gap-3">
+                                          <DocumentTextIcon className="h-5 w-5 text-gray-400" />
                                           <div>
-                                            <p className="text-xs text-gray-700 mb-1">Front:</p>
-                                            <img 
-                                              src={idDoc.frontUrl} 
-                                              alt="ID Front" 
-                                              className="max-w-full h-32 object-contain border rounded"
-                                            />
+                                            <div className="text-sm font-medium text-gray-900">{doc.file_name}</div>
+                                            <div className="text-xs text-gray-500">{formatFileSize(doc.file_size)}</div>
                                           </div>
-                                        )}
-                                        {idDoc.backUrl && (
+                                        </div>
+                                        <span className="text-xs text-gray-500">{formatDate(doc.uploaded_at)}</span>
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+
+                              {/* Contracts */}
+                              {userDetails.contracts.length > 0 && (
+                                <div>
+                                  <h5 className="text-sm font-medium text-gray-700 mb-3">Contracts</h5>
+                                  <div className="space-y-2">
+                                    {userDetails.contracts.map((contract) => (
+                                      <div key={contract.id} className="flex items-center justify-between bg-blue-50 p-3 rounded-lg border border-blue-200">
+                                        <div className="flex items-center gap-3">
+                                          <DocumentTextIcon className="h-5 w-5 text-blue-600" />
                                           <div>
-                                            <p className="text-xs text-gray-700 mb-1">Back:</p>
-                                            <img 
-                                              src={idDoc.backUrl} 
-                                              alt="ID Back" 
-                                              className="max-w-full h-32 object-contain border rounded"
-                                            />
+                                            <div className="text-sm font-medium text-gray-900">{contract.file_name}</div>
+                                            <div className="text-xs text-gray-500">{formatFileSize(contract.file_size)}</div>
+                                          </div>
+                                        </div>
+                                        <span className="text-xs text-gray-500">{formatDate(contract.uploaded_at)}</span>
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+
+                              {/* ID Documents */}
+                              {userDetails.idDocuments.length > 0 && (
+                                <div>
+                                  <h5 className="text-sm font-medium text-gray-700 mb-3">ID Documents</h5>
+                                  <div className="space-y-4">
+                                    {userDetails.idDocuments.map((idDoc) => (
+                                      <div key={idDoc.id} className="bg-purple-50 p-4 rounded-lg border border-purple-200">
+                                        <div className="flex items-center gap-2 mb-3">
+                                          <IdentificationIcon className="h-5 w-5 text-purple-600" />
+                                          <span className="text-sm font-medium text-gray-900">{idDoc.document_type}</span>
+                                          <span className="text-xs text-gray-500 ml-auto">{formatDate(idDoc.uploaded_at)}</span>
+                                        </div>
+                                        {(idDoc.frontUrl || idDoc.backUrl) && (
+                                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                            {idDoc.frontUrl && (
+                                              <div>
+                                                <p className="text-xs font-medium text-gray-600 mb-2">Front</p>
+                                                <img
+                                                  src={idDoc.frontUrl}
+                                                  alt="ID Front"
+                                                  className="w-full h-40 object-cover rounded border border-gray-300"
+                                                />
+                                              </div>
+                                            )}
+                                            {idDoc.backUrl && (
+                                              <div>
+                                                <p className="text-xs font-medium text-gray-600 mb-2">Back</p>
+                                                <img
+                                                  src={idDoc.backUrl}
+                                                  alt="ID Back"
+                                                  className="w-full h-40 object-cover rounded border border-gray-300"
+                                                />
+                                              </div>
+                                            )}
                                           </div>
                                         )}
                                       </div>
-                                    </div>
-                                  ))}
+                                    ))}
+                                  </div>
                                 </div>
-                              </div>
-                            )}
+                              )}
+                            </div>
                           </div>
                         )}
 
                         {/* Permissions */}
                         {userDetails.permissions.length > 0 && (
-                          <div className="bg-indigo-50 rounded-lg p-4">
-                            <div className="flex items-center gap-3 mb-4">
-                              <ShieldCheckIcon className="h-5 w-5 text-indigo-600" />
-                              <h4 className="text-sm font-medium text-gray-900">Permissions</h4>
+                          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                            <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+                              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+                                <ShieldCheckIcon className="h-5 w-5 text-gray-600" />
+                                Permissions ({userDetails.permissions.length})
+                              </h3>
                             </div>
-                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                              {userDetails.permissions.map((permission) => (
-                                <div key={permission.id} className="bg-white p-2 rounded border">
-                                  <div className="text-sm font-medium text-gray-900">{permission.name}</div>
-                                  {permission.description && (
-                                    <div className="text-xs text-gray-600">{permission.description}</div>
-                                  )}
-                                </div>
-                              ))}
+                            <div className="px-6 py-5">
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                                {userDetails.permissions.map((perm) => (
+                                  <div
+                                    key={perm.id}
+                                    className={`flex items-center gap-3 p-3 rounded-lg border ${
+                                      perm.is_active
+                                        ? 'bg-green-50 border-green-200'
+                                        : 'bg-gray-50 border-gray-200'
+                                    }`}
+                                  >
+                                    {perm.is_active ? (
+                                      <CheckCircleIcon className="h-5 w-5 text-green-600 flex-shrink-0" />
+                                    ) : (
+                                      <XCircleIcon className="h-5 w-5 text-gray-400 flex-shrink-0" />
+                                    )}
+                                    <div>
+                                      <div className="text-sm font-medium text-gray-900">{perm.name}</div>
+                                      {perm.description && (
+                                        <div className="text-xs text-gray-500 mt-0.5">{perm.description}</div>
+                                      )}
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
                             </div>
                           </div>
                         )}
-                      </div>
-                    )}
-                  </div>
-                </div>
 
-                <div className="mt-5 sm:mt-6">
-                  {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>
-                          
+                        {/* Action Buttons */}
+                        <div className="flex justify-end gap-3 pt-4">
                           <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"
+                            className="inline-flex items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2.5 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>
+                      </div>
+                    ) : null}
+                  </div>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -857,4 +668,4 @@ export default function UserDetailModal({ isOpen, onClose, userId, onUserUpdated
       </Dialog>
     </Transition.Root>
   )
-}
\ No newline at end of file
+}
diff --git a/src/app/components/UserDetailModal_Old.tsx b/src/app/components/UserDetailModal_Old.tsx
new file mode 100644
index 0000000..f21ccd8
--- /dev/null
+++ b/src/app/components/UserDetailModal_Old.tsx
@@ -0,0 +1,860 @@
+'use client'
+
+import { Fragment, useState, useEffect } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import {
+  XMarkIcon,
+  UserIcon,
+  DocumentTextIcon,
+  ShieldCheckIcon,
+  CalendarIcon,
+  EnvelopeIcon,
+  PhoneIcon,
+  MapPinIcon,
+  BuildingOfficeIcon,
+  IdentificationIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  PencilSquareIcon,
+  TrashIcon,
+  ExclamationTriangleIcon
+} from '@heroicons/react/24/outline'
+import { AdminAPI, DetailedUserInfo } from '../utils/api'
+import useAuthStore from '../store/authStore'
+
+interface UserDetailModalProps {
+  isOpen: boolean
+  onClose: () => void
+  userId: string | null
+  onUserUpdated?: () => void
+}
+
+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])
+
+  const fetchUserDetails = async () => {
+    if (!userId || !token) return
+    
+    setLoading(true)
+    setError(null)
+    
+    try {
+      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')
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch user details'
+      setError(errorMessage)
+      console.error('UserDetailModal.fetchUserDetails error:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  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',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  const StatusBadge = ({ status, verified }: { status: boolean, verified?: boolean }) => {
+    if (verified) {
+      return (
+        <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">
+          <CheckCircleIcon className="h-3 w-3" />
+          Verified
+        </span>
+      )
+    }
+    return (
+      <span className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ${
+        status 
+          ? 'bg-green-100 text-green-700' 
+          : 'bg-red-100 text-red-700'
+      }`}>
+        {status ? <CheckCircleIcon className="h-3 w-3" /> : <XCircleIcon className="h-3 w-3" />}
+        {status ? 'Complete' : 'Incomplete'}
+      </span>
+    )
+  }
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <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-center justify-center p-4 text-center sm:p-6">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              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 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"
+                    onClick={onClose}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+
+                {/* 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 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 && (
+                      <div className="flex items-center justify-center py-12">
+                        <div className="h-8 w-8 rounded-full border-2 border-blue-500 border-b-transparent animate-spin" />
+                        <span className="ml-3 text-gray-600">Loading user details...</span>
+                      </div>
+                    )}
+
+                    {error && (
+                      <div className="rounded-md bg-red-50 p-4 mb-6">
+                        <div className="text-sm text-red-700">{error}</div>
+                      </div>
+                    )}
+
+                    {userDetails && (
+                      <div className="space-y-6">
+                        {/* Basic User Info */}
+                        <div className="bg-gray-50 rounded-lg p-4">
+                          <div className="flex items-center gap-3 mb-4">
+                            <UserIcon className="h-5 w-5 text-gray-600" />
+                            <h4 className="text-sm font-medium text-gray-900">Basic Information</h4>
+                          </div>
+                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
+                            <div>
+                              <span className="font-medium text-gray-700">Email:</span>
+                              <span className="ml-2 text-gray-600">{userDetails.user.email}</span>
+                            </div>
+                            <div>
+                              <span className="font-medium text-gray-700">Type:</span>
+                              <span className="ml-2 text-gray-600 capitalize">{userDetails.user.user_type}</span>
+                            </div>
+                            <div>
+                              <span className="font-medium text-gray-700">Role:</span>
+                              <span className="ml-2 text-gray-600 capitalize">{userDetails.user.role}</span>
+                            </div>
+                            <div>
+                              <span className="font-medium text-gray-700">Created:</span>
+                              <span className="ml-2 text-gray-600">{formatDate(userDetails.user.created_at)}</span>
+                            </div>
+                            {userDetails.user.last_login_at && (
+                              <div>
+                                <span className="font-medium text-gray-700">Last Login:</span>
+                                <span className="ml-2 text-gray-600">{formatDate(userDetails.user.last_login_at)}</span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Verification Status */}
+                        {userDetails.userStatus && (
+                          <div className="bg-blue-50 rounded-lg p-4">
+                            <div className="flex items-center gap-3 mb-4">
+                              <ShieldCheckIcon className="h-5 w-5 text-blue-600" />
+                              <h4 className="text-sm font-medium text-gray-900">Verification Status</h4>
+                            </div>
+                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm text-gray-700">Email</span>
+                                <StatusBadge status={userDetails.userStatus.email_verified === 1} />
+                              </div>
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm text-gray-700">Profile</span>
+                                <StatusBadge status={userDetails.userStatus.profile_completed === 1} />
+                              </div>
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm text-gray-700">Documents</span>
+                                <StatusBadge status={userDetails.userStatus.documents_uploaded === 1} />
+                              </div>
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm text-gray-700">Contract</span>
+                                <StatusBadge status={userDetails.userStatus.contract_signed === 1} />
+                              </div>
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm text-gray-700">Admin Verified</span>
+                                <StatusBadge 
+                                  status={userDetails.userStatus.is_admin_verified === 1} 
+                                  verified={userDetails.userStatus.is_admin_verified === 1}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Profile Information */}
+                        {(userDetails.personalProfile || userDetails.companyProfile) && (
+                          <div className="bg-green-50 rounded-lg p-4">
+                            <div className="flex items-center gap-3 mb-4">
+                              {userDetails.user.user_type === 'personal' ? (
+                                <UserIcon className="h-5 w-5 text-green-600" />
+                              ) : (
+                                <BuildingOfficeIcon className="h-5 w-5 text-green-600" />
+                              )}
+                              <h4 className="text-sm font-medium text-gray-900">Profile Information</h4>
+                            </div>
+                            
+                            {isEditing && editedProfile ? (
+                              // Edit mode - show input fields
+                              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
+                                {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.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>
+                                      </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>
+                                )}
+                              </>
+                            )}
+                          </div>
+                        )}
+
+                        {/* Documents */}
+                        {(userDetails.documents.length > 0 || userDetails.contracts.length > 0 || userDetails.idDocuments.length > 0) && (
+                          <div className="bg-purple-50 rounded-lg p-4">
+                            <div className="flex items-center gap-3 mb-4">
+                              <DocumentTextIcon className="h-5 w-5 text-purple-600" />
+                              <h4 className="text-sm font-medium text-gray-900">Documents</h4>
+                            </div>
+
+                            {/* Regular Documents */}
+                            {userDetails.documents.length > 0 && (
+                              <div className="mb-4">
+                                <h5 className="text-xs font-medium text-gray-700 mb-2">Uploaded Documents</h5>
+                                <div className="space-y-2">
+                                  {userDetails.documents.map((doc) => (
+                                    <div key={doc.id} className="flex items-center justify-between bg-white p-2 rounded border">
+                                      <div>
+                                        <span className="text-sm font-medium text-gray-900">{doc.file_name}</span>
+                                        <span className="text-xs text-gray-500 ml-2">({formatFileSize(doc.file_size)})</span>
+                                      </div>
+                                      <span className="text-xs text-gray-500">{formatDate(doc.uploaded_at)}</span>
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            )}
+
+                            {/* Contracts */}
+                            {userDetails.contracts.length > 0 && (
+                              <div className="mb-4">
+                                <h5 className="text-xs font-medium text-gray-700 mb-2">Contracts</h5>
+                                <div className="space-y-2">
+                                  {userDetails.contracts.map((contract) => (
+                                    <div key={contract.id} className="flex items-center justify-between bg-white p-2 rounded border">
+                                      <div>
+                                        <span className="text-sm font-medium text-gray-900">{contract.file_name}</span>
+                                        <span className="text-xs text-gray-500 ml-2">({formatFileSize(contract.file_size)})</span>
+                                      </div>
+                                      <span className="text-xs text-gray-500">{formatDate(contract.uploaded_at)}</span>
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            )}
+
+                            {/* ID Documents */}
+                            {userDetails.idDocuments.length > 0 && (
+                              <div>
+                                <h5 className="text-xs font-medium text-gray-700 mb-2">ID Documents</h5>
+                                <div className="space-y-4">
+                                  {userDetails.idDocuments.map((idDoc) => (
+                                    <div key={idDoc.id} className="bg-white p-3 rounded border">
+                                      <div className="flex items-center gap-2 mb-2">
+                                        <IdentificationIcon className="h-4 w-4 text-gray-600" />
+                                        <span className="text-sm font-medium text-gray-900">{idDoc.document_type}</span>
+                                        <span className="text-xs text-gray-500">{formatDate(idDoc.uploaded_at)}</span>
+                                      </div>
+                                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                        {idDoc.frontUrl && (
+                                          <div>
+                                            <p className="text-xs text-gray-700 mb-1">Front:</p>
+                                            <img 
+                                              src={idDoc.frontUrl} 
+                                              alt="ID Front" 
+                                              className="max-w-full h-32 object-contain border rounded"
+                                            />
+                                          </div>
+                                        )}
+                                        {idDoc.backUrl && (
+                                          <div>
+                                            <p className="text-xs text-gray-700 mb-1">Back:</p>
+                                            <img 
+                                              src={idDoc.backUrl} 
+                                              alt="ID Back" 
+                                              className="max-w-full h-32 object-contain border rounded"
+                                            />
+                                          </div>
+                                        )}
+                                      </div>
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        )}
+
+                        {/* Permissions */}
+                        {userDetails.permissions.length > 0 && (
+                          <div className="bg-indigo-50 rounded-lg p-4">
+                            <div className="flex items-center gap-3 mb-4">
+                              <ShieldCheckIcon className="h-5 w-5 text-indigo-600" />
+                              <h4 className="text-sm font-medium text-gray-900">Permissions</h4>
+                            </div>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                              {userDetails.permissions.map((permission) => (
+                                <div key={permission.id} className="bg-white p-2 rounded border">
+                                  <div className="text-sm font-medium text-gray-900">{permission.name}</div>
+                                  {permission.description && (
+                                    <div className="text-xs text-gray-600">{permission.description}</div>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="mt-5 sm:mt-6">
+                  {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>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}
\ No newline at end of file
diff --git a/src/app/utils/api.ts b/src/app/utils/api.ts
index 153dffe..a11cf21 100644
--- a/src/app/utils/api.ts
+++ b/src/app/utils/api.ts
@@ -45,6 +45,7 @@ export const API_ENDPOINTS = {
   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',
+  ADMIN_UPDATE_USER_STATUS: '/api/admin/update-user-status/:id',
 }
 
 // API Helper Functions
@@ -333,6 +334,16 @@ export class AdminAPI {
     }
     return response.json()
   }
+
+  static async updateUserStatus(token: string, userId: string, status: string) {
+    const endpoint = API_ENDPOINTS.ADMIN_UPDATE_USER_STATUS.replace(':id', userId)
+    const response = await ApiClient.patch(endpoint, { status }, token)
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Failed to update user status')
+    }
+    return response.json()
+  }
 }
 
 // Response Types
@@ -375,7 +386,7 @@ export interface DetailedUserInfo {
     id: number
     email: string
     user_type: 'personal' | 'company'
-    role: 'user' | 'admin'
+    role: 'user' | 'admin' | 'super_admin'
     created_at: string
     last_login_at: string | null
   }