add eye for all password fields

apps/admin/src/app/dashboard/admin-users/page.tsx

@@ -31,6 +31,7 @@ export default function AdminUsersPage() {
   const [showModal, setShowModal] = useState(false)
   const [editingAdminId, setEditingAdminId] = useState<string | null>(null)
   const [form, setForm] = useState(EMPTY_FORM)
+  const [showPassword, setShowPassword] = useState(false)
   const [saving, setSaving] = useState(false)
 
   async function fetchAdmins() {
@@ -54,6 +55,7 @@ export default function AdminUsersPage() {
   function openCreateModal() {
     setEditingAdminId(null)
     setForm(EMPTY_FORM)
+    setShowPassword(false)
     setError(null)
     setShowModal(true)
   }
@@ -75,6 +77,7 @@ export default function AdminUsersPage() {
   function closeModal() {
     setShowModal(false)
     setEditingAdminId(null)
+    setShowPassword(false)
     setForm(EMPTY_FORM)
   }
 
@@ -232,14 +235,33 @@ export default function AdminUsersPage() {
                 <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={!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 })}
-                />
+                <div className="relative">
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    required={!editingAdminId}
+                    minLength={editingAdminId ? undefined : 8}
+                    className="w-full px-3 py-2 pr-10 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 })}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((v) => !v)}
+                    className="absolute inset-y-0 right-3 flex items-center text-zinc-500 hover:text-zinc-200"
+                    tabIndex={-1}
+                  >
+                    {showPassword ? (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                      </svg>
+                    ) : (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
               </div>
               <div>
                 <label className="block text-xs font-medium text-zinc-400 mb-1">Role</label>