74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
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>
|
|
);
|
|
}
|