first commit

src/components/processos/ProcessosPage.tsx

@@ -0,0 +1,74 @@
+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>
+  );
+};