update account creation fileds

2026-05-25 14:05:37 -04:00
parent 813eb5404c
commit 914ae839a7
10 changed files with 448 additions and 50 deletions
@@ -15,14 +15,23 @@ interface AdminUser {
 }

 const ROLES = ['SUPER_ADMIN', 'ADMIN', 'SUPPORT', 'FINANCE', 'VIEWER']
+const EMPTY_FORM = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  password: '',
+  role: 'SUPPORT',
+  isActive: true,
+}

 export default function AdminUsersPage() {
  const [admins, setAdmins] = useState<AdminUser[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [showModal, setShowModal] = useState(false)
-  const [form, setForm] = useState({ firstName: '', lastName: '', email: '', password: '', role: 'SUPPORT' })
-  const [creating, setCreating] = useState(false)
+  const [editingAdminId, setEditingAdminId] = useState<string | null>(null)
+  const [form, setForm] = useState(EMPTY_FORM)
+  const [saving, setSaving] = useState(false)

  function getToken() { return localStorage.getItem('admin_token') ?? '' }

@@ -44,25 +53,61 @@ export default function AdminUsersPage() {

  useEffect(() => { fetchAdmins() }, [])

-  async function createAdmin(e: React.FormEvent) {
+  function openCreateModal() {
+    setEditingAdminId(null)
+    setForm(EMPTY_FORM)
+    setError(null)
+    setShowModal(true)
+  }
+
+  function openEditModal(admin: AdminUser) {
+    setEditingAdminId(admin.id)
+    setForm({
+      firstName: admin.firstName,
+      lastName: admin.lastName,
+      email: admin.email,
+      password: '',
+      role: admin.role,
+      isActive: admin.isActive,
+    })
+    setError(null)
+    setShowModal(true)
+  }
+
+  function closeModal() {
+    setShowModal(false)
+    setEditingAdminId(null)
+    setForm(EMPTY_FORM)
+  }
+
+  async function saveAdmin(e: React.FormEvent) {
    e.preventDefault()
-    setCreating(true)
+    setSaving(true)
    setError(null)
    try {
-      const res = await fetch(`${ADMIN_API_BASE}/admin/admins`, {
-        method: 'POST',
+      const isEditing = Boolean(editingAdminId)
+      const payload = {
+        firstName: form.firstName,
+        lastName: form.lastName,
+        email: form.email,
+        role: form.role,
+        isActive: form.isActive,
+        ...(form.password ? { password: form.password } : {}),
+      }
+
+      const res = await fetch(`${ADMIN_API_BASE}/admin/admins${editingAdminId ? `/${editingAdminId}` : ''}`, {
+        method: isEditing ? 'PATCH' : 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getToken()}` },
-        body: JSON.stringify(form),
+        body: JSON.stringify(payload),
      })
      const json = await res.json()
-      if (!res.ok) throw new Error(json?.message ?? 'Failed to create')
-      setShowModal(false)
-      setForm({ firstName: '', lastName: '', email: '', password: '', role: 'SUPPORT' })
+      if (!res.ok) throw new Error(json?.message ?? `Failed to ${isEditing ? 'update' : 'create'} admin`)
+      closeModal()
      await fetchAdmins()
    } catch (err: any) {
      setError(err.message)
    } finally {
-      setCreating(false)
+      setSaving(false)
    }
  }

@@ -82,7 +127,7 @@ export default function AdminUsersPage() {
          <h1 className="mt-1 text-3xl font-black">Admin Users</h1>
        </div>
        <button
-          onClick={() => setShowModal(true)}
+          onClick={openCreateModal}
          className="px-4 py-2 rounded-xl bg-emerald-700 hover:bg-emerald-600 text-white text-sm font-semibold transition-colors"
        >
          + New admin
@@ -102,13 +147,14 @@ export default function AdminUsersPage() {
                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Permissions</th>
                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Status</th>
                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Joined</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-800/60">
              {loading ? (
-                <tr><td colSpan={6} className="px-6 py-12 text-center text-zinc-500">Loading…</td></tr>
+                <tr><td colSpan={7} className="px-6 py-12 text-center text-zinc-500">Loading…</td></tr>
              ) : admins.length === 0 ? (
-                <tr><td colSpan={6} className="px-6 py-12 text-center text-zinc-500">No admin users found</td></tr>
+                <tr><td colSpan={7} className="px-6 py-12 text-center text-zinc-500">No admin users found</td></tr>
              ) : admins.map((a) => (
                <tr key={a.id} className="hover:bg-zinc-800/30 transition-colors">
                  <td className="px-6 py-4 font-medium text-zinc-100">{a.firstName} {a.lastName}</td>
@@ -129,6 +175,15 @@ export default function AdminUsersPage() {
                    </span>
                  </td>
                  <td className="px-6 py-4 text-zinc-500 text-xs">{new Date(a.createdAt).toLocaleDateString()}</td>
+                  <td className="px-6 py-4">
+                    <button
+                      type="button"
+                      onClick={() => openEditModal(a)}
+                      className="rounded-lg border border-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-500 hover:text-white"
+                    >
+                      Edit
+                    </button>
+                  </td>
                </tr>
              ))}
            </tbody>
@@ -140,10 +195,10 @@ export default function AdminUsersPage() {
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/60 backdrop-blur-sm">
          <div className="w-full max-w-md rounded-2xl border border-zinc-700 bg-zinc-900 p-8 shadow-2xl">
            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-lg font-semibold">New admin user</h2>
-              <button onClick={() => setShowModal(false)} className="text-zinc-500 hover:text-zinc-200">✕</button>
+              <h2 className="text-lg font-semibold">{editingAdminId ? 'Edit admin user' : 'New admin user'}</h2>
+              <button onClick={closeModal} className="text-zinc-500 hover:text-zinc-200">✕</button>
            </div>
-            <form onSubmit={createAdmin} className="space-y-4">
+            <form onSubmit={saveAdmin} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-medium text-zinc-400 mb-1">First name</label>
@@ -175,11 +230,13 @@ export default function AdminUsersPage() {
                />
              </div>
              <div>
-                <label className="block text-xs font-medium text-zinc-400 mb-1">Password</label>
+                <label className="block text-xs font-medium text-zinc-400 mb-1">
+                  Password {editingAdminId ? <span className="text-zinc-500">(leave blank to keep current)</span> : null}
+                </label>
                <input
                  type="password"
-                  required
-                  minLength={8}
+                  required={!editingAdminId}
+                  minLength={editingAdminId ? undefined : 8}
                  className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  value={form.password}
                  onChange={(e) => setForm({ ...form, password: e.target.value })}
@@ -195,10 +252,21 @@ export default function AdminUsersPage() {
                  {ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
+              <div>
+                <label className="block text-xs font-medium text-zinc-400 mb-1">Status</label>
+                <select
+                  className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
+                  value={form.isActive ? 'active' : 'inactive'}
+                  onChange={(e) => setForm({ ...form, isActive: e.target.value === 'active' })}
+                >
+                  <option value="active">Active</option>
+                  <option value="inactive">Inactive</option>
+                </select>
+              </div>
              <div className="flex gap-3 pt-2">
-                <button type="button" onClick={() => setShowModal(false)} className="flex-1 py-2.5 rounded-xl bg-zinc-800 text-zinc-300 text-sm font-medium">Cancel</button>
-                <button type="submit" disabled={creating} className="flex-1 py-2.5 rounded-xl bg-emerald-700 hover:bg-emerald-600 text-white text-sm font-semibold disabled:opacity-50">
-                  {creating ? 'Creating…' : 'Create admin'}
+                <button type="button" onClick={closeModal} className="flex-1 py-2.5 rounded-xl bg-zinc-800 text-zinc-300 text-sm font-medium">Cancel</button>
+                <button type="submit" disabled={saving} className="flex-1 py-2.5 rounded-xl bg-emerald-700 hover:bg-emerald-600 text-white text-sm font-semibold disabled:opacity-50">
+                  {saving ? (editingAdminId ? 'Saving…' : 'Creating…') : (editingAdminId ? 'Save changes' : 'Create admin')}
                </button>
              </div>
            </form>