feat: add superadmin management

2026-09-01 09:54:45 -03:00
parent 2dfca33758
commit a5055238b9
21 changed files with 366 additions and 74 deletions
--- a/pages/SuperAdmin.tsx
+++ b/pages/SuperAdmin.tsx
@@ -0,0 +1,171 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Loader2, RefreshCw, ShieldCheck, UserCheck, UserX, Users } from 'lucide-react';
+import { adminApi, ManagedUser } from '../services/api';
+import { useAuth } from '../context/AuthContext';
+import { useToast } from '../context/ToastContext';
+import { useNavigate } from 'react-router-dom';
+
+const roleLabel: Record<ManagedUser['role'], string> = {
+  admin: 'Superadmin',
+  instructor: 'Instrutor',
+  student: 'Aluno',
+};
+
+export const SuperAdmin: React.FC = () => {
+  const { user } = useAuth();
+  const { showToast } = useToast();
+  const navigate = useNavigate();
+  const [users, setUsers] = useState<ManagedUser[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [updatingUserId, setUpdatingUserId] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+
+  const loadUsers = async () => {
+    setIsLoading(true);
+    try {
+      const response = await adminApi.listUsers();
+      setUsers(response.data);
+    } catch {
+      showToast('Não foi possível carregar os usuários.', 'error');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void loadUsers();
+  }, []);
+
+  const filteredUsers = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return users;
+    return users.filter((account) =>
+      account.name.toLowerCase().includes(normalized) || account.email.toLowerCase().includes(normalized),
+    );
+  }, [query, users]);
+
+  const updateUser = async (account: ManagedUser, update: Partial<Pick<ManagedUser, 'role' | 'isActive'>>) => {
+    setUpdatingUserId(account.id);
+    try {
+      const response = await adminApi.updateUser(account.id, update);
+      setUsers((current) => current.map((item) => item.id === account.id ? response.data : item));
+      showToast('Usuário atualizado.', 'success');
+    } catch {
+      showToast('Não foi possível atualizar este usuário.', 'error');
+    } finally {
+      setUpdatingUserId(null);
+    }
+  };
+
+  const activeUsers = users.filter((account) => account.isActive).length;
+  const instructorUsers = users.filter((account) => account.role === 'instructor' && account.isActive).length;
+
+  return (
+    <main className="min-h-screen pt-28 pb-20 px-6 md:px-12 max-w-[1440px] mx-auto">
+      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
+        <div>
+          <div className="flex items-center gap-2 text-orange-400 text-xs font-bold uppercase tracking-wider mb-3">
+            <ShieldCheck className="w-4 h-4" /> Superadmin
+          </div>
+          <h1 className="text-3xl md:text-4xl font-bold text-white">Painel Administrativo</h1>
+          <p className="text-gray-400 mt-2">Gerencie os acessos da plataforma. Cursos e aulas continuam no Painel do Instrutor.</p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <button
+            onClick={() => navigate('/gerenciar')}
+            className="inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-semibold bg-orange-500 hover:bg-orange-600 text-white transition-colors"
+          >
+            Gerenciar cursos
+          </button>
+          <button
+            onClick={() => void loadUsers()}
+            className="inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-semibold bg-white/10 hover:bg-white/15 text-white transition-colors"
+          >
+            <RefreshCw className="w-4 h-4" /> Atualizar
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+        <StatCard icon={<Users className="w-5 h-5" />} label="Usuários cadastrados" value={users.length} />
+        <StatCard icon={<UserCheck className="w-5 h-5" />} label="Contas ativas" value={activeUsers} />
+        <StatCard icon={<ShieldCheck className="w-5 h-5" />} label="Instrutores ativos" value={instructorUsers} />
+      </div>
+
+      <section className="rounded-2xl border border-white/10 bg-zinc-950/80 overflow-hidden">
+        <div className="p-5 border-b border-white/10 flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
+          <h2 className="text-lg font-bold text-white">Usuários</h2>
+          <input
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Buscar por nome ou e-mail"
+            className="w-full sm:w-80 rounded-xl bg-zinc-900 border border-white/10 px-4 py-2.5 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-orange-500"
+          />
+        </div>
+
+        {isLoading ? (
+          <div className="h-64 flex items-center justify-center"><Loader2 className="w-8 h-8 animate-spin text-orange-400" /></div>
+        ) : filteredUsers.length === 0 ? (
+          <div className="h-48 flex items-center justify-center text-sm text-gray-500">Nenhum usuário encontrado.</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[760px] text-left text-sm">
+              <thead className="bg-white/[0.03] text-xs uppercase tracking-wider text-gray-500">
+                <tr>
+                  <th className="px-5 py-4">Usuário</th>
+                  <th className="px-5 py-4">Perfil</th>
+                  <th className="px-5 py-4">Status</th>
+                  <th className="px-5 py-4">Cadastro</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-white/5">
+                {filteredUsers.map((account) => {
+                  const isCurrentUser = account.id === user?.id;
+                  const isUpdating = updatingUserId === account.id;
+                  return (
+                    <tr key={account.id} className="text-gray-300">
+                      <td className="px-5 py-4">
+                        <div className="font-semibold text-white">{account.name}</div>
+                        <div className="text-xs text-gray-500 mt-1">{account.email}</div>
+                      </td>
+                      <td className="px-5 py-4">
+                        <select
+                          value={account.role}
+                          disabled={isCurrentUser || isUpdating}
+                          onChange={(event) => void updateUser(account, { role: event.target.value as ManagedUser['role'] })}
+                          className="rounded-lg bg-zinc-900 border border-white/10 px-3 py-2 text-xs text-white disabled:opacity-50"
+                        >
+                          {Object.entries(roleLabel).map(([role, label]) => <option key={role} value={role}>{label}</option>)}
+                        </select>
+                      </td>
+                      <td className="px-5 py-4">
+                        <button
+                          disabled={isCurrentUser || isUpdating}
+                          onClick={() => void updateUser(account, { isActive: !account.isActive })}
+                          className={`inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-semibold disabled:opacity-50 ${
+                            account.isActive ? 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25' : 'bg-red-500/15 text-red-400 hover:bg-red-500/25'
+                          }`}
+                        >
+                          {account.isActive ? <UserCheck className="w-3.5 h-3.5" /> : <UserX className="w-3.5 h-3.5" />}
+                          {account.isActive ? 'Ativo' : 'Desativado'}
+                        </button>
+                      </td>
+                      <td className="px-5 py-4 text-xs text-gray-500">{new Intl.DateTimeFormat('pt-BR').format(new Date(account.createdAt))}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </main>
+  );
+};
+
+const StatCard: React.FC<{ icon: React.ReactNode; label: string; value: number }> = ({ icon, label, value }) => (
+  <div className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5">
+    <div className="flex items-center gap-2 text-orange-400 mb-3">{icon}<span className="text-xs font-semibold uppercase tracking-wider">{label}</span></div>
+    <div className="text-3xl font-bold text-white">{value}</div>
+  </div>
+);