saas_app/src/app/(protected)/(administrativo)/(g_usuario)/usuarios/page.tsx

112 lines
No EOL
4.4 KiB
TypeScript

'use client'
import {
Card,
CardContent,
} from "@/components/ui/card"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import Usuario from "../../_interfaces/GUsuarioInterface";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { useGUsuarioIndexHook } from "../../_hooks/g_usuario/useGUsuarioIndexHook";
import { useEffect } from "react";
import Loading from "@/app/_components/loading/loading";
export default function UsuarioPage() {
const { usuarios, fetchUsuarios } = useGUsuarioIndexHook();
useEffect(() => {
fetchUsuarios();
}, []);
if (!usuarios) return <Loading type={2} />;
return (
<div>
<Card>
<CardContent>
<div className="grid grid-cols-2">
<div className="text-2xl font-semibold">
Usuarios
</div>
<div className="text-right">
<Button asChild>
<Link href="/usuarios/formulario">
+ Usuário
</Link>
</Button>
</div>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead className="text-center">
#
</TableHead>
<TableHead>
Situação
</TableHead>
<TableHead>
CPF
</TableHead>
<TableHead>
Login / Sigla / Nome
</TableHead>
<TableHead>
Função
</TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{usuarios.map((usuario: Usuario) => (
<TableRow key={usuario.usuario_id} className="cursor-pointer">
<TableCell className="text-center">
{usuario.usuario_id}
</TableCell>
<TableCell className="font-medium">
{usuario.situacao}
</TableCell>
<TableCell className="font-medium">
{usuario.cpf}
</TableCell>
<TableCell>
<div className="font-semibold text-xs">
{usuario.login} - {usuario.sigla}
</div>
<div className="text-base">
{usuario.nome_completo}
</div>
</TableCell>
<TableCell>
<div className="text-base">
{usuario.funcao}
</div>
</TableCell>
<TableCell>
<Button asChild>
<Link href={`/usuarios/${usuario.usuario_id}/detalhes`}>
Detalhes
</Link>
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
);
}