75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import { PlusIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
|
import { ProcessosList } from "./ProcessosList";
|
|
import { ProcessoModal } from "./ProcessoModal";
|
|
import { Processo } from "../../types/entities";
|
|
|
|
export const ProcessosPage: React.FC = () => {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [selectedProcesso, setSelectedProcesso] = useState<Processo | null>(
|
|
null,
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center">
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar processos..."
|
|
className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600
|
|
bg-white dark:bg-gray-700 text-gray-900 dark:text-white
|
|
focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setSelectedProcesso(null);
|
|
setIsModalOpen(true);
|
|
}}
|
|
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg
|
|
hover:bg-blue-700 dark:hover:bg-blue-500 transition-colors"
|
|
>
|
|
<PlusIcon className="h-5 w-5 mr-2" />
|
|
Novo Processo
|
|
</button>
|
|
</div>
|
|
|
|
{/* Lista de Processos */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
|
|
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead className="bg-gray-50 dark:bg-gray-900">
|
|
<tr>
|
|
{/* ...headers... */}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{/* ...rows... */}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<ProcessosList
|
|
searchTerm={searchTerm}
|
|
onEdit={(processo) => {
|
|
setSelectedProcesso(processo);
|
|
setIsModalOpen(true);
|
|
}}
|
|
/>
|
|
|
|
<ProcessoModal
|
|
isOpen={isModalOpen}
|
|
processo={selectedProcesso}
|
|
onClose={() => {
|
|
setIsModalOpen(false);
|
|
setSelectedProcesso(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|