101 lines
4.6 KiB
TypeScript
101 lines
4.6 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { DocumentTextIcon } from "@heroicons/react/24/outline";
|
|
import { useProcessosAdministrativos } from "../../hooks/useProcessosAdministrativos";
|
|
import { formatCurrency } from "../../utils/format";
|
|
import { ProcessoAdministrativo, StatusProcessoAdministrativo } from "../../types/processoAdministrativo";
|
|
|
|
const statusColor = {
|
|
[StatusProcessoAdministrativo.INICIAL]: 'bg-yellow-100 text-yellow-800',
|
|
[StatusProcessoAdministrativo.EM_ANALISE]: 'bg-blue-100 text-blue-800',
|
|
[StatusProcessoAdministrativo.EM_RECURSO]: 'bg-purple-100 text-purple-800',
|
|
[StatusProcessoAdministrativo.FINALIZADO]: 'bg-green-100 text-green-800',
|
|
[StatusProcessoAdministrativo.ARQUIVADO]: 'bg-gray-100 text-gray-800'
|
|
};
|
|
|
|
export function ProcessoAdministrativoList() {
|
|
console.log('Renderizando ProcessoAdministrativoList');
|
|
const navigate = useNavigate();
|
|
const { processos, isLoading } = useProcessosAdministrativos();
|
|
|
|
if (isLoading) {
|
|
return <div className="p-4">Carregando...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 sm:px-6 lg:px-8">
|
|
<div className="sm:flex sm:items-center">
|
|
<div className="sm:flex-auto">
|
|
<h1 className="text-xl font-semibold text-gray-900">Processos Administrativos</h1>
|
|
</div>
|
|
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate("/processos-administrativos/novo")}
|
|
className="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700"
|
|
>
|
|
Novo Processo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 flex flex-col">
|
|
<div className="-mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
|
|
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
<table className="min-w-full divide-y divide-gray-300">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
|
Número/Protocolo
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
|
Órgão
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
|
Status
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
|
Valor Pretensão
|
|
</th>
|
|
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
|
<span className="sr-only">Ações</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 bg-white">
|
|
{processos?.map((processo) => (
|
|
<tr key={processo.id}>
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-900">
|
|
{processo.numero}
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
|
{processo.orgao}
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm">
|
|
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColor[processo.status]}`}>
|
|
{processo.status}
|
|
</span>
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
|
{processo.valorPretensao ? formatCurrency(processo.valorPretensao) : '-'}
|
|
</td>
|
|
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
|
<button
|
|
onClick={() => navigate(`/processos-administrativos/${processo.id}`)}
|
|
className="text-blue-600 hover:text-blue-900"
|
|
>
|
|
Visualizar
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|