first commit

src/components/processos/MovimentacoesTimeline.tsx

@@ -0,0 +1,72 @@
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { useProcessoMovimentacoes } from "../../hooks/useProcessoMovimentacoes";
+
+interface MovimentacoesTimelineProps {
+  numeroProcesso: string;
+  tribunal: string;
+}
+
+export function MovimentacoesTimeline({
+  numeroProcesso,
+  tribunal,
+}: MovimentacoesTimelineProps) {
+  const { movimentacoes, loading, error } = useProcessoMovimentacoes(
+    numeroProcesso,
+    tribunal,
+  );
+
+  if (loading) {
+    return <div className="text-center p-4">Carregando movimentações...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="text-center p-4 text-red-600">
+        Erro ao carregar movimentações
+      </div>
+    );
+  }
+
+  if (!movimentacoes?.length) {
+    return (
+      <div className="text-center p-4">Nenhuma movimentação encontrada</div>
+    );
+  }
+
+  return (
+    <div className="flow-root">
+      <ul role="list" className="-mb-8">
+        {movimentacoes.map((mov, idx) => (
+          <li key={`${mov.codigo}-${mov.dataHora}`}>
+            <div className="relative pb-8">
+              {idx !== movimentacoes.length - 1 ? (
+                <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" />
+              ) : null}
+              <div className="relative flex space-x-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
+                  <span className="text-xs text-gray-500">{mov.codigo}</span>
+                </div>
+                <div className="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                  <div>
+                    <p className="text-sm text-gray-900">{mov.nome}</p>
+                    {mov.complementosTabelados?.map((comp: any) => (
+                      <p key={comp.codigo} className="text-sm text-gray-500">
+                        {comp.nome}
+                      </p>
+                    ))}
+                  </div>
+                  <div className="whitespace-nowrap text-right text-sm text-gray-500">
+                    {format(new Date(mov.dataHora), "dd/MM/yyyy 'às' HH:mm", {
+                      locale: ptBR,
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}