first commit

src/components/processos/AbaInformacoes.tsx

@@ -0,0 +1,151 @@
+import { useProcessoContext } from "../../context/ProcessoContext";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+export function AbaInformacoes() {
+  const { processo } = useProcessoContext();
+
+  if (!processo) {
+    return <div>Carregando...</div>;
+  }
+
+  // Encontrar próxima audiência
+  const proximaAudiencia = processo.dadosDatajud?.movimentos?.find((mov) => {
+    const isAudiencia =
+      mov.nome.toLowerCase().includes("audiência") &&
+      mov.complementosTabelados?.some((c) => c.nome === "designada");
+    if (!isAudiencia) return false;
+
+    const dataAudiencia = new Date(mov.dataHora);
+    return dataAudiencia > new Date();
+  });
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-xl p-6">
+        <h3 className="text-lg font-medium text-gray-900 mb-4">
+          Informações do Processo
+        </h3>
+
+        {/* Informações Básicas */}
+        <div className="grid grid-cols-2 gap-4">
+          <InfoItem label="Número do Processo" value={processo.numero} />
+          <InfoItem label="Natureza" value={processo.natureza} />
+          <InfoItem label="Classe" value={processo.classeProcessual} />
+          <InfoItem label="Órgão Julgador" value={processo.orgaoJulgador} />
+          <InfoItem
+            label="Tribunal"
+            value={`${processo.tribunal} (${processo.tribunalUF})`}
+          />
+          <InfoItem
+            label="Valor da Causa"
+            value={
+              processo.valorCausa
+                ? new Intl.NumberFormat("pt-BR", {
+                    style: "currency",
+                    currency: "BRL",
+                  }).format(processo.valorCausa)
+                : "Não informado"
+            }
+          />
+        </div>
+
+        {/* Dados do DataJud */}
+        <div className="mt-6 p-4 bg-gray-50 rounded-lg">
+          <h3 className="text-md font-medium text-gray-900 mb-4">
+            Dados do DataJud
+          </h3>
+
+          <div className="grid grid-cols-2 gap-4">
+            <InfoItem
+              label="Classe"
+              value={processo.dadosDatajud?.classe?.nome}
+            />
+            <InfoItem
+              label="Data de Ajuizamento"
+              value={
+                processo.dataAjuizamento
+                  ? format(new Date(processo.dataAjuizamento), "dd/MM/yyyy", {
+                      locale: ptBR,
+                    })
+                  : undefined
+              }
+            />
+            <InfoItem label="Grau" value={processo.dadosDatajud?.grau} />
+            <InfoItem
+              label="Formato"
+              value={processo.dadosDatajud?.formato?.nome}
+            />
+            <InfoItem
+              label="Sistema"
+              value={processo.dadosDatajud?.sistema?.nome}
+            />
+            <InfoItem
+              label="Órgão Julgador"
+              value={processo.dadosDatajud?.orgaoJulgador?.nome}
+            />
+          </div>
+
+          {/* Assuntos do DataJud */}
+          {processo.dadosDatajud?.assuntos &&
+            processo.dadosDatajud.assuntos.length > 0 && (
+              <div className="mt-4">
+                <h4 className="text-sm font-medium text-gray-900 mb-2">
+                  Assuntos
+                </h4>
+                <div className="flex flex-wrap gap-2">
+                  {processo.dadosDatajud.assuntos.map((assunto) => (
+                    <span
+                      key={assunto.codigo}
+                      className="inline-flex items-center px-3 py-1 rounded-full text-sm 
+                             bg-blue-50 text-blue-700 border border-blue-200"
+                    >
+                      {assunto.nome}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+        </div>
+
+        {/* Próxima Audiência */}
+        <div className="mt-6 p-4 bg-gray-50 rounded-lg">
+          <h4 className="font-medium text-gray-900 mb-2">Próxima Audiência</h4>
+          {proximaAudiencia ? (
+            <div className="space-y-2">
+              <p className="text-sm text-gray-900">
+                <span className="font-medium">Tipo:</span>{" "}
+                {proximaAudiencia.nome}
+              </p>
+              <p className="text-sm text-gray-900">
+                <span className="font-medium">Data:</span>{" "}
+                {format(
+                  new Date(proximaAudiencia.dataHora),
+                  "dd/MM/yyyy 'às' HH:mm",
+                  { locale: ptBR },
+                )}
+              </p>
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500">Nenhuma audiência agendada</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InfoItem({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | null | undefined;
+}) {
+  return (
+    <div>
+      <dt className="text-sm font-medium text-gray-500">{label}</dt>
+      <dd className="mt-1 text-sm text-gray-900">{value || "Não informado"}</dd>
+    </div>
+  );
+}