463 lines
20 KiB
TypeScript
463 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState, useCallback } from "react";
|
|
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Input } from "@/components/ui/input"; // <--- 1. Importação Adicionada
|
|
import { Plus, Eye, Filter, Loader2, Search } from "lucide-react"; // <--- 1. Ícone Search Adicionado
|
|
import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
|
import { api, login } from "services/api.mjs";
|
|
import { usersService } from "services/usersApi.mjs";
|
|
import Sidebar from "@/components/Sidebar";
|
|
|
|
interface FlatUser {
|
|
id: string;
|
|
user_id: string;
|
|
full_name?: string;
|
|
email: string;
|
|
phone?: string | null;
|
|
role: string;
|
|
}
|
|
|
|
interface UserInfoResponse {
|
|
user: any;
|
|
profile: any;
|
|
roles: string[];
|
|
permissions: Record<string, boolean>;
|
|
}
|
|
|
|
export default function UsersPage() {
|
|
const [users, setUsers] = useState<FlatUser[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
|
const [userDetails, setUserDetails] = useState<UserInfoResponse | null>(null);
|
|
|
|
// --- Estados de Filtro ---
|
|
const [searchTerm, setSearchTerm] = useState(""); // <--- 2. Estado da busca
|
|
const [selectedRole, setSelectedRole] = useState<string>("all");
|
|
|
|
// --- Lógica de Paginação INÍCIO ---
|
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
const handleItemsPerPageChange = (value: string) => {
|
|
setItemsPerPage(Number(value));
|
|
setCurrentPage(1);
|
|
};
|
|
// --- Lógica de Paginação FIM ---
|
|
|
|
const fetchUsers = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const rolesData: any[] = await usersService.list_roles();
|
|
const rolesArray = Array.isArray(rolesData) ? rolesData : [];
|
|
|
|
const profilesData: any[] = await api.get(
|
|
`/rest/v1/profiles?select=id,full_name,email,phone`
|
|
);
|
|
|
|
const profilesById = new Map<string, any>();
|
|
if (Array.isArray(profilesData)) {
|
|
for (const p of profilesData) {
|
|
if (p?.id) profilesById.set(p.id, p);
|
|
}
|
|
}
|
|
|
|
const mapped: FlatUser[] = rolesArray.map((roleItem) => {
|
|
const uid = roleItem.user_id;
|
|
const profile = profilesById.get(uid);
|
|
return {
|
|
id: uid,
|
|
user_id: uid,
|
|
full_name: profile?.full_name ?? "—",
|
|
email: profile?.email ?? "—",
|
|
phone: profile?.phone ?? "—",
|
|
role: roleItem.role ?? "—",
|
|
};
|
|
});
|
|
|
|
setUsers(mapped);
|
|
setCurrentPage(1);
|
|
} catch (err: any) {
|
|
console.error("Erro ao buscar usuários:", err);
|
|
setError("Não foi possível carregar os usuários. Veja console.");
|
|
setUsers([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
try {
|
|
await login();
|
|
} catch (e) {
|
|
console.warn("login falhou no init:", e);
|
|
}
|
|
await fetchUsers();
|
|
};
|
|
init();
|
|
}, [fetchUsers]);
|
|
|
|
const openDetailsDialog = async (flatUser: FlatUser) => {
|
|
setDetailsDialogOpen(true);
|
|
setUserDetails(null);
|
|
|
|
try {
|
|
const data = await usersService.full_data(flatUser.user_id);
|
|
setUserDetails(data);
|
|
} catch (err: any) {
|
|
console.error("Erro ao carregar detalhes:", err);
|
|
setUserDetails({
|
|
user: { id: flatUser.user_id, email: flatUser.email },
|
|
profile: { full_name: flatUser.full_name, phone: flatUser.phone },
|
|
roles: [flatUser.role],
|
|
permissions: {},
|
|
});
|
|
}
|
|
};
|
|
|
|
// --- 3. Lógica de Filtragem Atualizada ---
|
|
const filteredUsers = users.filter((u) => {
|
|
// Filtro por Papel (Role)
|
|
const roleMatch = selectedRole === "all" || u.role === selectedRole;
|
|
|
|
// Filtro da Barra de Pesquisa (Nome, Email ou Telefone)
|
|
const searchLower = searchTerm.toLowerCase();
|
|
const nameMatch = u.full_name?.toLowerCase().includes(searchLower);
|
|
const emailMatch = u.email?.toLowerCase().includes(searchLower);
|
|
const phoneMatch = u.phone?.includes(searchLower);
|
|
|
|
const searchMatch = !searchTerm || nameMatch || emailMatch || phoneMatch;
|
|
|
|
return roleMatch && searchMatch;
|
|
});
|
|
|
|
const indexOfLastItem = currentPage * itemsPerPage;
|
|
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
|
const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
|
|
|
|
const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
|
|
|
|
const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
|
|
|
|
const goToPrevPage = () => {
|
|
setCurrentPage((prev) => Math.max(1, prev - 1));
|
|
};
|
|
|
|
const goToNextPage = () => {
|
|
setCurrentPage((prev) => Math.min(totalPages, prev + 1));
|
|
};
|
|
|
|
const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
|
|
const pages: number[] = [];
|
|
const maxVisiblePages = 5;
|
|
const halfRange = Math.floor(maxVisiblePages / 2);
|
|
let startPage = Math.max(1, currentPage - halfRange);
|
|
let endPage = Math.min(totalPages, currentPage + halfRange);
|
|
|
|
if (endPage - startPage + 1 < maxVisiblePages) {
|
|
if (endPage === totalPages) {
|
|
startPage = Math.max(1, totalPages - maxVisiblePages + 1);
|
|
}
|
|
if (startPage === 1) {
|
|
endPage = Math.min(totalPages, maxVisiblePages);
|
|
}
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
pages.push(i);
|
|
}
|
|
return pages;
|
|
};
|
|
|
|
const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
|
|
|
|
return (
|
|
<Sidebar>
|
|
<div className="space-y-6 px-2 sm:px-4 md:px-8">
|
|
{/* Header */}
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Usuários</h1>
|
|
<p className="text-sm text-gray-500">Gerencie usuários.</p>
|
|
</div>
|
|
<Link href="/manager/usuario/novo" className="w-full sm:w-auto">
|
|
<Button className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700">
|
|
<Plus className="w-4 h-4 mr-2" /> Novo Usuário
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* --- 4. Filtro (Barra de Pesquisa + Selects) --- */}
|
|
<div className="flex flex-col md:flex-row items-start md:items-center gap-3 bg-white p-4 rounded-lg border border-gray-200">
|
|
|
|
{/* Barra de Pesquisa */}
|
|
<div className="relative w-full md:flex-1">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
placeholder="Buscar por nome, e-mail ou telefone..."
|
|
value={searchTerm}
|
|
onChange={(e) => {
|
|
setSearchTerm(e.target.value);
|
|
setCurrentPage(1); // Reseta a paginação ao pesquisar
|
|
}}
|
|
className="pl-10 w-full bg-gray-50 border-gray-200 focus:bg-white transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
|
|
{/* Select de Filtro por Papel */}
|
|
<div className="flex items-center gap-2 w-full md:w-auto">
|
|
<Select
|
|
onValueChange={(value) => {
|
|
setSelectedRole(value);
|
|
setCurrentPage(1);
|
|
}}
|
|
value={selectedRole}>
|
|
|
|
<SelectTrigger className="w-full sm:w-[150px]">
|
|
<SelectValue placeholder="Papel" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos</SelectItem>
|
|
<SelectItem value="admin">Admin</SelectItem>
|
|
<SelectItem value="gestor">Gestor</SelectItem>
|
|
<SelectItem value="medico">Médico</SelectItem>
|
|
<SelectItem value="secretaria">Secretária</SelectItem>
|
|
<SelectItem value="user">Usuário</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Select de Itens por Página */}
|
|
<div className="flex items-center gap-2 w-full md:w-auto">
|
|
<Select
|
|
onValueChange={handleItemsPerPageChange}
|
|
defaultValue={String(itemsPerPage)}
|
|
>
|
|
<SelectTrigger className="w-full sm:w-[80px]">
|
|
<SelectValue placeholder="10" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="5">5</SelectItem>
|
|
<SelectItem value="10">10</SelectItem>
|
|
<SelectItem value="20">20</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Button variant="outline" className="ml-auto w-full md:w-auto hidden lg:flex">
|
|
<Filter className="w-4 h-4 mr-2" />
|
|
Filtros
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{/* Fim do Filtro */}
|
|
|
|
{/* Tabela/Lista */}
|
|
<div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-x-auto">
|
|
{loading ? (
|
|
<div className="p-8 text-center text-gray-500">
|
|
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
|
|
Carregando usuários...
|
|
</div>
|
|
) : error ? (
|
|
<div className="p-8 text-center text-red-600">{error}</div>
|
|
) : filteredUsers.length === 0 ? (
|
|
<div className="p-8 text-center text-gray-500">
|
|
Nenhum usuário encontrado com os filtros aplicados.
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Tabela para Telas Médias e Grandes */}
|
|
<table className="min-w-full divide-y divide-gray-200 hidden md:table">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Nome
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
E-mail
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Telefone
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Cargo
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
|
|
Ações
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{currentItems.map((u) => (
|
|
<tr key={u.id} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 text-sm text-gray-900">
|
|
{u.full_name}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-500 break-all">
|
|
{u.email}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-500">
|
|
{u.phone}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-500 capitalize">
|
|
{u.role}
|
|
</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => openDetailsDialog(u)}
|
|
title="Visualizar"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Layout em Cards/Lista para Telas Pequenas */}
|
|
<div className="md:hidden divide-y divide-gray-200">
|
|
{currentItems.map((u) => (
|
|
<div key={u.id} className="flex items-center justify-between p-4 hover:bg-gray-50">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium text-gray-900 truncate">
|
|
{u.full_name || "—"}
|
|
</div>
|
|
<div className="text-xs text-gray-500 truncate">
|
|
{u.email}
|
|
</div>
|
|
<div className="text-sm text-gray-500 capitalize mt-1">
|
|
{u.role || "—"}
|
|
</div>
|
|
</div>
|
|
<div className="ml-4 flex-shrink-0">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => openDetailsDialog(u)}
|
|
title="Visualizar"
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Paginação */}
|
|
{totalPages > 1 && (
|
|
<div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 border-t border-gray-200">
|
|
{/* Botão Anterior */}
|
|
<button
|
|
onClick={goToPrevPage}
|
|
disabled={currentPage === 1}
|
|
className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
|
|
>
|
|
{"< Anterior"}
|
|
</button>
|
|
|
|
{/* Números das Páginas */}
|
|
{visiblePageNumbers.map((number) => (
|
|
<button
|
|
key={number}
|
|
onClick={() => paginate(number)}
|
|
className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${
|
|
currentPage === number
|
|
? "bg-blue-600 text-white shadow-md border-blue-600"
|
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
|
}`}
|
|
>
|
|
{number}
|
|
</button>
|
|
))}
|
|
|
|
{/* Botão Próximo */}
|
|
<button
|
|
onClick={goToNextPage}
|
|
disabled={currentPage === totalPages}
|
|
className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
|
|
>
|
|
{"Próximo >"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal de Detalhes */}
|
|
<AlertDialog
|
|
open={detailsDialogOpen}
|
|
onOpenChange={setDetailsDialogOpen}
|
|
>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className="text-2xl">
|
|
{userDetails?.profile?.full_name || "Detalhes do Usuário"}
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{!userDetails ? (
|
|
<div className="p-4 text-center text-gray-500">
|
|
<Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-green-600" />
|
|
Buscando dados completos...
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3 pt-2 text-left text-gray-700">
|
|
<div>
|
|
<strong>ID:</strong> {userDetails.user.id}
|
|
</div>
|
|
<div>
|
|
<strong>E-mail:</strong> {userDetails.user.email}
|
|
</div>
|
|
<div>
|
|
<strong>Nome completo:</strong>{" "}
|
|
{userDetails.profile.full_name}
|
|
</div>
|
|
<div>
|
|
<strong>Telefone:</strong> {userDetails.profile.phone}
|
|
</div>
|
|
<div>
|
|
<strong>Roles:</strong> {userDetails.roles?.join(", ")}
|
|
</div>
|
|
<div className="pt-2">
|
|
<strong className="block mb-1">Permissões:</strong>
|
|
<ul className="list-disc list-inside space-y-0.5 text-sm">
|
|
{Object.entries(userDetails.permissions || {}).map(
|
|
([k, v]) => (
|
|
<li key={k}>
|
|
{k}:{" "}
|
|
<span
|
|
className={`font-semibold ${
|
|
v ? "text-green-600" : "text-red-600"
|
|
}`}
|
|
>
|
|
{v ? "Sim" : "Não"}
|
|
</span>
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Fechar</AlertDialogCancel>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
</Sidebar>
|
|
);
|
|
}
|