first commit

2026-02-20 17:31:01 +01:00
commit 61ab24490d
160 changed files with 17034 additions and 0 deletions
@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { useUsers, useCreateUser, useUpdateAccess, useResetPassword } from '../../hooks/useAdmin';
+import { SkeletonTable } from '../ui/Skeleton';
+import type { AdminUser } from '../../lib/types';
+
+export function UserTable() {
+  const { data: users, isLoading, isError, error } = useUsers();
+  const createUser = useCreateUser();
+  const updateAccess = useUpdateAccess();
+  const resetPassword = useResetPassword();
+
+  const [newUsername, setNewUsername] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [newRole, setNewRole] = useState('user');
+  const [newAccess, setNewAccess] = useState(true);
+  const [resetTarget, setResetTarget] = useState<number | null>(null);
+  const [resetPw, setResetPw] = useState('');
+
+  function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!newUsername.trim() || !newPassword.trim()) return;
+    createUser.mutate(
+      { username: newUsername.trim(), password: newPassword, role: newRole, has_access: newAccess },
+      { onSuccess: () => { setNewUsername(''); setNewPassword(''); setNewRole('user'); setNewAccess(true); } },
+    );
+  }
+
+  function handleToggleAccess(user: AdminUser) {
+    updateAccess.mutate({ userId: user.id, hasAccess: !user.has_access });
+  }
+
+  function handleResetPassword(userId: number) {
+    if (!resetPw.trim()) return;
+    resetPassword.mutate(
+      { userId, password: resetPw },
+      { onSuccess: () => { setResetTarget(null); setResetPw(''); } },
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Create user form */}
+      <form onSubmit={handleCreate} className="glass p-5 flex flex-wrap items-end gap-3">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs text-gray-400">Username</label>
+          <input type="text" value={newUsername} onChange={(e) => setNewUsername(e.target.value)}
+            placeholder="username" className="input-glass px-3 py-2 text-sm" />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs text-gray-400">Password</label>
+          <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)}
+            placeholder="password" className="input-glass px-3 py-2 text-sm" />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs text-gray-400">Role</label>
+          <select value={newRole} onChange={(e) => setNewRole(e.target.value)} className="input-glass px-3 py-2 text-sm">
+            <option value="user">User</option>
+            <option value="admin">Admin</option>
+          </select>
+        </div>
+        <label className="flex items-center gap-2 text-sm text-gray-300 pb-1">
+          <input type="checkbox" checked={newAccess} onChange={(e) => setNewAccess(e.target.checked)}
+            className="rounded border-white/[0.1] bg-white/[0.04] text-blue-500 focus:ring-blue-500" />
+          Access
+        </label>
+        <button type="submit" disabled={createUser.isPending || !newUsername.trim() || !newPassword.trim()}
+          className="btn-gradient px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
+          <span>{createUser.isPending ? 'Creating…' : 'Create User'}</span>
+        </button>
+      </form>
+
+      {isLoading && <SkeletonTable rows={4} cols={4} />}
+      {isError && <p className="text-sm text-red-400">{(error as Error)?.message || 'Failed to load users'}</p>}
+
+      {users && users.length > 0 && (
+        <div className="glass overflow-x-auto">
+          <table className="w-full text-sm text-left">
+            <thead className="border-b border-white/[0.06] text-gray-500">
+              <tr>
+                <th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Username</th>
+                <th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Role</th>
+                <th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Access</th>
+                <th className="px-4 py-3 font-medium text-xs uppercase tracking-wider text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-white/[0.04]">
+              {users.map((user) => (
+                <tr key={user.id} className="hover:bg-white/[0.03] transition-all duration-150">
+                  <td className="px-4 py-3 font-medium text-gray-100">{user.username}</td>
+                  <td className="px-4 py-3 text-gray-300 capitalize">{user.role}</td>
+                  <td className="px-4 py-3">
+                    <span className={`inline-block h-2.5 w-2.5 rounded-full ${user.has_access ? 'bg-emerald-400 shadow-lg shadow-emerald-400/40' : 'bg-red-400 shadow-lg shadow-red-400/40'}`} />
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <div className="flex items-center justify-end gap-2 flex-wrap">
+                      <button onClick={() => handleToggleAccess(user)} disabled={updateAccess.isPending}
+                        className="rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs text-gray-300 hover:bg-white/[0.08] disabled:opacity-50 transition-all duration-200">
+                        {user.has_access ? 'Revoke' : 'Grant'}
+                      </button>
+                      {resetTarget === user.id ? (
+                        <span className="flex items-center gap-1">
+                          <input type="password" value={resetPw} onChange={(e) => setResetPw(e.target.value)}
+                            placeholder="new password" className="w-32 input-glass px-2 py-1 text-xs" />
+                          <button onClick={() => handleResetPassword(user.id)}
+                            disabled={resetPassword.isPending || !resetPw.trim()}
+                            className="btn-gradient px-2 py-1 text-xs disabled:opacity-50">
+                            <span>Save</span>
+                          </button>
+                          <button onClick={() => { setResetTarget(null); setResetPw(''); }}
+                            className="rounded-lg border border-white/[0.08] bg-white/[0.04] px-2 py-1 text-xs text-gray-400 hover:bg-white/[0.08] transition-all duration-200">
+                            Cancel
+                          </button>
+                        </span>
+                      ) : (
+                        <button onClick={() => { setResetTarget(user.id); setResetPw(''); }}
+                          className="rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs text-gray-300 hover:bg-white/[0.08] transition-all duration-200">
+                          Reset Password
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {users && users.length === 0 && <p className="text-sm text-gray-500">No users found.</p>}
+    </div>
+  );
+}