755 lines
33 KiB
TypeScript
755 lines
33 KiB
TypeScript
import { useEffect, useMemo, useState, type FormEvent } from 'react';
|
|
import {
|
|
AlertTriangle,
|
|
AtSign,
|
|
Check,
|
|
Copy,
|
|
Edit3,
|
|
KeyRound,
|
|
Loader2,
|
|
Mail,
|
|
Plus,
|
|
RefreshCw,
|
|
Search,
|
|
Trash2,
|
|
User as UserIcon,
|
|
UserCheck,
|
|
UserPlus,
|
|
UserX,
|
|
X
|
|
} from 'lucide-react';
|
|
import { createUser, deleteUser as deleteManagedUser, fetchUsers, updateUser } from '../dataService';
|
|
import type { ManagedUser } from '../types';
|
|
|
|
type StatusFilter = 'all' | 'active' | 'inactive';
|
|
type PasswordMode = 'auto' | 'manual';
|
|
type Notice = {
|
|
tone: 'success' | 'warning' | 'error';
|
|
text: string;
|
|
temporaryPassword?: string;
|
|
};
|
|
|
|
const statusOptions: Array<{ key: StatusFilter; label: string }> = [
|
|
{ key: 'all', label: 'Todos' },
|
|
{ key: 'active', label: 'Ativos' },
|
|
{ key: 'inactive', label: 'Inativos' }
|
|
];
|
|
|
|
const roleLabels: Record<string, string> = {
|
|
admin: 'Admin',
|
|
supervisor: 'Supervisor',
|
|
producao: 'Produção',
|
|
operacao: 'Operação',
|
|
vendedor: 'Vendedor',
|
|
financeiro: 'Financeiro',
|
|
user: 'Usuário'
|
|
};
|
|
|
|
const inputWrapClassName = 'flex h-11 items-center gap-3 rounded-lg border border-dark-border bg-dark-input px-3 transition-colors focus-within:border-brand-primary focus-within:ring-1 focus-within:ring-brand-primary';
|
|
const inputClassName = 'min-w-0 flex-1 bg-transparent text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted';
|
|
|
|
const getInitials = (name: string) => {
|
|
const parts = name.trim().split(/\s+/).filter(Boolean);
|
|
if (!parts.length) return '?';
|
|
return parts.slice(0, 2).map((part) => part[0]).join('').toUpperCase();
|
|
};
|
|
|
|
const getUserRoleLabel = (user: ManagedUser) => {
|
|
const role = String((user as ManagedUser & { role?: string }).role || 'user').toLowerCase();
|
|
return roleLabels[role] || role;
|
|
};
|
|
|
|
const AdminUsers = () => {
|
|
const [users, setUsers] = useState<ManagedUser[]>([]);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [editingUser, setEditingUser] = useState<ManagedUser | null>(null);
|
|
const [userToDelete, setUserToDelete] = useState<ManagedUser | null>(null);
|
|
const [passwordMode, setPasswordMode] = useState<PasswordMode>('auto');
|
|
const [isActive, setIsActive] = useState(true);
|
|
const [name, setName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [notice, setNotice] = useState<Notice | null>(null);
|
|
const [copyLabel, setCopyLabel] = useState('Copiar');
|
|
|
|
const activeCount = useMemo(() => users.filter((user) => user.isActive).length, [users]);
|
|
const inactiveCount = users.length - activeCount;
|
|
|
|
const filteredUsers = useMemo(() => {
|
|
const query = searchTerm.trim().toLowerCase();
|
|
|
|
return users.filter((user) => {
|
|
const matchesStatus =
|
|
statusFilter === 'all' ||
|
|
(statusFilter === 'active' && user.isActive) ||
|
|
(statusFilter === 'inactive' && !user.isActive);
|
|
const matchesQuery =
|
|
!query ||
|
|
user.name.toLowerCase().includes(query) ||
|
|
user.email.toLowerCase().includes(query);
|
|
|
|
return matchesStatus && matchesQuery;
|
|
});
|
|
}, [searchTerm, statusFilter, users]);
|
|
|
|
const hasFilters = searchTerm.trim() !== '' || statusFilter !== 'all';
|
|
|
|
const loadUsers = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
setUsers(await fetchUsers());
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// User management needs an initial API load when the admin page opens.
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
void loadUsers();
|
|
}, []);
|
|
|
|
const resetForm = () => {
|
|
setName('');
|
|
setEmail('');
|
|
setPassword('');
|
|
setPasswordMode('auto');
|
|
setIsActive(true);
|
|
setEditingUser(null);
|
|
setNotice(null);
|
|
setCopyLabel('Copiar');
|
|
};
|
|
|
|
const closeModal = () => {
|
|
if (isSubmitting) return;
|
|
setIsModalOpen(false);
|
|
resetForm();
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
setSearchTerm('');
|
|
setStatusFilter('all');
|
|
};
|
|
|
|
const openCreateModal = () => {
|
|
resetForm();
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const openEditModal = (user: ManagedUser) => {
|
|
setEditingUser(user);
|
|
setName(user.name);
|
|
setEmail(user.email);
|
|
setIsActive(user.isActive);
|
|
setPassword('');
|
|
setPasswordMode('auto');
|
|
setNotice(null);
|
|
setCopyLabel('Copiar');
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleCreateUser = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
setIsSubmitting(true);
|
|
setNotice(null);
|
|
setCopyLabel('Copiar');
|
|
|
|
try {
|
|
const result = await createUser({
|
|
name,
|
|
email,
|
|
password: passwordMode === 'manual' ? password : undefined
|
|
});
|
|
|
|
setUsers((currentUsers) => [result.user, ...currentUsers]);
|
|
|
|
if (result.temporaryPassword) {
|
|
setNotice({
|
|
tone: 'success',
|
|
text: 'Acesso criado. Copie a senha gerada antes de fechar.',
|
|
temporaryPassword: result.temporaryPassword
|
|
});
|
|
setName('');
|
|
setEmail('');
|
|
setPassword('');
|
|
setPasswordMode('auto');
|
|
} else {
|
|
setNotice({
|
|
tone: 'success',
|
|
text: 'Acesso criado com a senha definida.'
|
|
});
|
|
window.setTimeout(() => {
|
|
setIsModalOpen(false);
|
|
resetForm();
|
|
}, 900);
|
|
}
|
|
} catch (error) {
|
|
setNotice({
|
|
tone: 'error',
|
|
text: error instanceof Error ? error.message : 'Não foi possível criar o acesso.'
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleUpdateUser = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
if (!editingUser) return;
|
|
|
|
setIsSubmitting(true);
|
|
setNotice(null);
|
|
|
|
try {
|
|
const updatedUser = await updateUser(editingUser.id, {
|
|
name,
|
|
email,
|
|
isActive,
|
|
password: passwordMode === 'manual' ? password : undefined
|
|
});
|
|
|
|
setUsers((currentUsers) => currentUsers.map((user) => user.id === updatedUser.id ? updatedUser : user));
|
|
setNotice({
|
|
tone: 'success',
|
|
text: 'Usuário atualizado.'
|
|
});
|
|
window.setTimeout(() => {
|
|
setIsModalOpen(false);
|
|
resetForm();
|
|
}, 700);
|
|
} catch (error) {
|
|
setNotice({
|
|
tone: 'error',
|
|
text: error instanceof Error ? error.message : 'Não foi possível editar o usuário.'
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteUser = async () => {
|
|
if (!userToDelete) return;
|
|
|
|
setIsSubmitting(true);
|
|
try {
|
|
await deleteManagedUser(userToDelete.id);
|
|
setUsers((currentUsers) => currentUsers.filter((user) => user.id !== userToDelete.id));
|
|
setUserToDelete(null);
|
|
} catch (error) {
|
|
setNotice({
|
|
tone: 'error',
|
|
text: error instanceof Error ? error.message : 'Não foi possível excluir o usuário.'
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const copyTemporaryPassword = async () => {
|
|
if (!notice?.temporaryPassword) return;
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(notice.temporaryPassword);
|
|
setCopyLabel('Copiado');
|
|
window.setTimeout(() => setCopyLabel('Copiar'), 1600);
|
|
} catch {
|
|
setCopyLabel('Falhou');
|
|
}
|
|
};
|
|
|
|
const noticeClass = notice?.tone === 'error'
|
|
? 'border-red-500/30 bg-red-500/10 text-red-300'
|
|
: notice?.tone === 'warning'
|
|
? 'border-amber-500/30 bg-amber-500/10 text-amber-200'
|
|
: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300';
|
|
|
|
const statusCounts: Record<StatusFilter, number> = {
|
|
all: users.length,
|
|
active: activeCount,
|
|
inactive: inactiveCount
|
|
};
|
|
|
|
const stats = [
|
|
{ label: 'Total', value: users.length, icon: UserIcon, tone: 'text-dark-text', detail: 'acessos cadastrados' },
|
|
{ label: 'Ativos', value: activeCount, icon: UserCheck, tone: 'text-emerald-300', detail: 'podem entrar agora' },
|
|
{ label: 'Inativos', value: inactiveCount, icon: UserX, tone: 'text-red-300', detail: 'bloqueados no login' },
|
|
{ label: 'Exibindo', value: filteredUsers.length, icon: Search, tone: 'text-brand-primary', detail: hasFilters ? 'após filtros' : 'sem filtros' }
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<header className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
|
|
<div className="max-w-3xl">
|
|
<h1 className="text-3xl font-bold text-dark-text">Usuários</h1>
|
|
<p className="mt-2 text-sm leading-6 text-dark-muted">
|
|
Gerencie acessos individuais, senhas iniciais e bloqueios de entrada no painel.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => void loadUsers()}
|
|
disabled={isLoading}
|
|
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-card px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
|
|
Atualizar
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={openCreateModal}
|
|
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90"
|
|
>
|
|
<UserPlus className="h-4 w-4" />
|
|
Novo acesso
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
|
{stats.map((stat) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<div key={stat.label} className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">{stat.label}</p>
|
|
<p className={`mt-2 text-2xl font-bold ${stat.tone}`}>{stat.value}</p>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">{stat.detail}</p>
|
|
</div>
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted">
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</section>
|
|
|
|
<section className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
|
|
<div className="border-b border-dark-border p-4">
|
|
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
|
<div>
|
|
<h2 className="text-base font-bold text-dark-text">Acessos cadastrados</h2>
|
|
<p className="mt-1 text-sm text-dark-muted">Busque, filtre e edite os usuários do painel.</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
|
|
<div className="flex h-10 min-w-0 items-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 lg:w-80">
|
|
<Search className="h-4 w-4 shrink-0 text-dark-muted" />
|
|
<input
|
|
type="search"
|
|
value={searchTerm}
|
|
onChange={(event) => setSearchTerm(event.target.value)}
|
|
className="min-w-0 flex-1 bg-transparent text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted"
|
|
placeholder="Buscar nome ou e-mail"
|
|
/>
|
|
{searchTerm && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSearchTerm('')}
|
|
className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-dark-muted transition-colors hover:bg-dark-card hover:text-dark-text"
|
|
aria-label="Limpar busca"
|
|
title="Limpar busca"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 rounded-lg border border-dark-border bg-dark-input p-1">
|
|
{statusOptions.map((option) => (
|
|
<button
|
|
key={option.key}
|
|
type="button"
|
|
onClick={() => setStatusFilter(option.key)}
|
|
className={`h-8 cursor-pointer rounded-md px-3 text-sm font-semibold transition-colors ${
|
|
statusFilter === option.key
|
|
? 'bg-dark-card text-dark-text shadow-sm'
|
|
: 'text-dark-muted hover:text-dark-text'
|
|
}`}
|
|
>
|
|
{option.label}
|
|
<span className="ml-1 text-xs opacity-70">{statusCounts[option.key]}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="divide-y divide-dark-border" aria-label="Carregando usuários">
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
<div key={`user-skeleton-${index}`} className="grid grid-cols-[1.4fr_1fr_120px_140px_88px] gap-5 px-5 py-4">
|
|
{Array.from({ length: 5 }).map((__, column) => (
|
|
<div key={`user-skeleton-${index}-${column}`} className="skeleton h-4" />
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : users.length === 0 ? (
|
|
<div className="flex min-h-[360px] flex-col items-center justify-center px-6 py-12 text-center">
|
|
<div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-dark-border bg-dark-input text-brand-primary">
|
|
<UserPlus className="h-7 w-7" />
|
|
</div>
|
|
<p className="text-lg font-bold text-dark-text">Nenhum usuário cadastrado</p>
|
|
<p className="mt-2 max-w-md text-sm leading-6 text-dark-muted">Crie o primeiro acesso individual para tirar o uso compartilhado do login administrativo.</p>
|
|
<button
|
|
type="button"
|
|
onClick={openCreateModal}
|
|
className="mt-5 inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90"
|
|
>
|
|
<UserPlus className="h-4 w-4" />
|
|
Criar primeiro acesso
|
|
</button>
|
|
</div>
|
|
) : filteredUsers.length === 0 ? (
|
|
<div className="flex min-h-[320px] flex-col items-center justify-center px-6 py-12 text-center">
|
|
<div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-dark-border bg-dark-input text-dark-muted">
|
|
<Search className="h-7 w-7" />
|
|
</div>
|
|
<p className="text-lg font-bold text-dark-text">Nenhum resultado</p>
|
|
<p className="mt-2 max-w-md text-sm leading-6 text-dark-muted">Não encontramos usuários com os filtros atuais.</p>
|
|
<button
|
|
type="button"
|
|
onClick={clearFilters}
|
|
className="mt-5 inline-flex h-10 cursor-pointer items-center justify-center rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary"
|
|
>
|
|
Limpar filtros
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[900px] table-fixed text-left">
|
|
<thead className="border-b border-dark-border bg-dark-input/35 text-xs uppercase tracking-widest text-dark-muted">
|
|
<tr>
|
|
<th className="w-[34%] px-5 py-3 font-bold">Usuário</th>
|
|
<th className="w-[24%] px-5 py-3 font-bold">E-mail</th>
|
|
<th className="w-[16%] px-5 py-3 font-bold">Perfil</th>
|
|
<th className="w-[14%] px-5 py-3 font-bold">Status</th>
|
|
<th className="w-[12%] px-5 py-3 text-right font-bold">Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-dark-border">
|
|
{filteredUsers.map((user) => (
|
|
<tr key={user.id} className="text-sm transition-colors hover:bg-dark-input/45">
|
|
<td className="px-5 py-4">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-primary/10 text-sm font-bold text-brand-primary">
|
|
{getInitials(user.name)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="truncate font-bold text-dark-text">{user.name}</p>
|
|
<p className="mt-0.5 text-xs font-semibold text-dark-muted">ID {user.id}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-5 py-4">
|
|
<div className="flex min-w-0 items-center gap-2 text-dark-muted">
|
|
<Mail className="h-4 w-4 shrink-0" />
|
|
<span className="truncate font-semibold">{user.email}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-5 py-4">
|
|
<span className="inline-flex rounded-full border border-brand-primary/20 bg-brand-primary/10 px-2.5 py-1 text-xs font-bold text-brand-primary">
|
|
{getUserRoleLabel(user)}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4">
|
|
<span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold ${
|
|
user.isActive ? 'bg-emerald-500/10 text-emerald-300' : 'bg-red-500/10 text-red-300'
|
|
}`}>
|
|
<span className={`h-1.5 w-1.5 rounded-full ${user.isActive ? 'bg-emerald-300' : 'bg-red-300'}`} />
|
|
{user.isActive ? 'Ativo' : 'Inativo'}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4">
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => openEditModal(user)}
|
|
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-brand-primary/50 hover:text-brand-primary"
|
|
aria-label={`Editar ${user.name}`}
|
|
title="Editar"
|
|
>
|
|
<Edit3 className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setNotice(null);
|
|
setUserToDelete(user);
|
|
}}
|
|
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-dark-border text-dark-muted transition-colors hover:border-red-400/50 hover:text-red-300"
|
|
aria-label={`Excluir ${user.name}`}
|
|
title="Excluir"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/70 px-4 py-6">
|
|
<div className="w-full max-w-2xl overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-2xl">
|
|
<div className="flex items-start justify-between gap-4 border-b border-dark-border px-5 py-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-brand-primary">
|
|
{editingUser ? <Edit3 className="h-5 w-5" /> : <UserPlus className="h-5 w-5" />}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-bold text-dark-text">{editingUser ? 'Editar usuário' : 'Novo acesso'}</h2>
|
|
<p className="mt-1 text-sm leading-5 text-dark-muted">
|
|
{editingUser ? 'Atualize identificação, status e senha.' : 'Crie uma credencial individual para o painel.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={closeModal}
|
|
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg text-dark-muted transition-colors hover:bg-dark-input hover:text-dark-text"
|
|
aria-label="Fechar"
|
|
title="Fechar"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={editingUser ? handleUpdateUser : handleCreateUser}>
|
|
<div className="space-y-5 p-5">
|
|
<section>
|
|
<div className="mb-3">
|
|
<h3 className="text-sm font-bold text-dark-text">Identificação</h3>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">Use um nome reconhecível e um e-mail individual.</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<label className="block">
|
|
<span className="mb-2 block text-xs font-bold uppercase tracking-widest text-dark-muted">Nome</span>
|
|
<div className={inputWrapClassName}>
|
|
<UserIcon className="h-4 w-4 shrink-0 text-dark-muted" />
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
className={inputClassName}
|
|
placeholder="Nome completo"
|
|
required
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</label>
|
|
|
|
<label className="block">
|
|
<span className="mb-2 block text-xs font-bold uppercase tracking-widest text-dark-muted">E-mail</span>
|
|
<div className={inputWrapClassName}>
|
|
<AtSign className="h-4 w-4 shrink-0 text-dark-muted" />
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(event) => setEmail(event.target.value)}
|
|
className={inputClassName}
|
|
placeholder="usuario@empresa.com"
|
|
required
|
|
/>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div className="mb-3">
|
|
<h3 className="text-sm font-bold text-dark-text">{editingUser ? 'Senha' : 'Senha inicial'}</h3>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
|
{editingUser ? 'Mantenha a senha atual ou defina uma nova.' : 'Gere uma senha temporária ou defina uma senha manual.'}
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setPasswordMode('auto')}
|
|
className={`cursor-pointer rounded-xl border p-4 text-left transition-colors ${
|
|
passwordMode === 'auto'
|
|
? 'border-brand-primary/50 bg-brand-primary/10 text-dark-text'
|
|
: 'border-dark-border bg-dark-input text-dark-muted hover:border-brand-primary/35 hover:text-dark-text'
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2 text-sm font-bold">
|
|
<KeyRound className="h-4 w-4" />
|
|
{editingUser ? 'Manter senha' : 'Gerar senha'}
|
|
</span>
|
|
<span className="mt-1 block text-xs font-semibold opacity-80">
|
|
{editingUser ? 'Não altera a credencial atual.' : 'Mostra uma senha para copiar após criar.'}
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPasswordMode('manual')}
|
|
className={`cursor-pointer rounded-xl border p-4 text-left transition-colors ${
|
|
passwordMode === 'manual'
|
|
? 'border-brand-primary/50 bg-brand-primary/10 text-dark-text'
|
|
: 'border-dark-border bg-dark-input text-dark-muted hover:border-brand-primary/35 hover:text-dark-text'
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2 text-sm font-bold">
|
|
<Edit3 className="h-4 w-4" />
|
|
{editingUser ? 'Alterar senha' : 'Definir senha'}
|
|
</span>
|
|
<span className="mt-1 block text-xs font-semibold opacity-80">
|
|
Use quando a senha já será combinada fora do sistema.
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{passwordMode === 'manual' && (
|
|
<div className="mt-3">
|
|
<div className={inputWrapClassName}>
|
|
<KeyRound className="h-4 w-4 shrink-0 text-dark-muted" />
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
className={inputClassName}
|
|
placeholder="Mínimo de 6 caracteres"
|
|
minLength={6}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{editingUser && (
|
|
<label className="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-dark-border bg-dark-input px-4 py-3">
|
|
<div>
|
|
<span className="block text-sm font-bold text-dark-text">Usuário ativo</span>
|
|
<span className="mt-0.5 block text-xs font-semibold text-dark-muted">Usuários inativos não conseguem entrar.</span>
|
|
</div>
|
|
<input
|
|
type="checkbox"
|
|
checked={isActive}
|
|
onChange={(event) => setIsActive(event.target.checked)}
|
|
className="h-5 w-5 cursor-pointer accent-brand-primary"
|
|
/>
|
|
</label>
|
|
)}
|
|
|
|
{notice && (
|
|
<div className={`rounded-xl border px-3 py-3 text-sm font-semibold ${noticeClass}`}>
|
|
<div className="flex items-start gap-2">
|
|
{notice.tone === 'error' ? <X className="mt-0.5 h-4 w-4 shrink-0" /> : <Check className="mt-0.5 h-4 w-4 shrink-0" />}
|
|
<div className="min-w-0 flex-1">
|
|
<p>{notice.text}</p>
|
|
{notice.temporaryPassword && (
|
|
<div className="mt-3 flex flex-col gap-2 sm:flex-row">
|
|
<code className="min-w-0 flex-1 truncate rounded-lg bg-black/25 px-3 py-2 text-amber-100">
|
|
{notice.temporaryPassword}
|
|
</code>
|
|
<button
|
|
type="button"
|
|
onClick={copyTemporaryPassword}
|
|
className="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-amber-400/30 px-3 text-xs font-bold text-amber-100 transition-colors hover:bg-amber-400/10"
|
|
>
|
|
<Copy className="h-3.5 w-3.5" />
|
|
{copyLabel}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col-reverse gap-2 border-t border-dark-border bg-dark-input/35 px-5 py-4 sm:flex-row sm:justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={closeModal}
|
|
disabled={isSubmitting}
|
|
className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
|
|
{editingUser ? 'Salvar alterações' : 'Criar acesso'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{userToDelete && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4 py-6">
|
|
<div className="w-full max-w-md overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-2xl">
|
|
<div className="flex items-start gap-3 border-b border-dark-border px-5 py-4">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-red-500/25 bg-red-500/10 text-red-300">
|
|
<AlertTriangle className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-bold text-dark-text">Excluir usuário</h2>
|
|
<p className="mt-1 text-sm leading-5 text-dark-muted">Esta ação remove o acesso imediatamente.</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4 p-5">
|
|
<div className="rounded-xl border border-dark-border bg-dark-input p-4">
|
|
<p className="font-bold text-dark-text">{userToDelete.name}</p>
|
|
<p className="mt-1 text-sm font-semibold text-dark-muted">{userToDelete.email}</p>
|
|
</div>
|
|
|
|
{notice?.tone === 'error' && (
|
|
<div className={`rounded-xl border px-3 py-3 text-sm font-semibold ${noticeClass}`}>
|
|
{notice.text}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (isSubmitting) return;
|
|
setUserToDelete(null);
|
|
setNotice(null);
|
|
}}
|
|
disabled={isSubmitting}
|
|
className="h-10 cursor-pointer rounded-lg border border-dark-border px-4 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleDeleteUser}
|
|
disabled={isSubmitting}
|
|
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-red-500 px-4 text-sm font-bold text-white transition-colors hover:bg-red-400 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
|
Excluir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminUsers;
|