98 lines
2.4 KiB
Svelte
98 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { Clock, User, FileText } from 'lucide-svelte';
|
|
|
|
interface HistoricoItem {
|
|
acao: string;
|
|
usuarioId: string;
|
|
usuarioNome?: string;
|
|
timestamp: number;
|
|
observacoes?: string;
|
|
dadosAnteriores?: string;
|
|
dadosNovos?: string;
|
|
}
|
|
|
|
interface Props {
|
|
historico: HistoricoItem[];
|
|
}
|
|
|
|
let { historico }: Props = $props();
|
|
|
|
function getAcaoLabel(acao: string) {
|
|
switch (acao) {
|
|
case 'criacao':
|
|
return 'Criação';
|
|
case 'edicao':
|
|
return 'Edição';
|
|
case 'exclusao':
|
|
return 'Exclusão';
|
|
case 'movimentacao':
|
|
return 'Movimentação';
|
|
default:
|
|
return acao;
|
|
}
|
|
}
|
|
|
|
function getAcaoColor(acao: string) {
|
|
switch (acao) {
|
|
case 'criacao':
|
|
return 'text-success';
|
|
case 'edicao':
|
|
return 'text-info';
|
|
case 'exclusao':
|
|
return 'text-error';
|
|
case 'movimentacao':
|
|
return 'text-warning';
|
|
default:
|
|
return 'text-base-content';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-4">
|
|
{#each historico as item, index}
|
|
<div class="flex gap-4">
|
|
<!-- Linha vertical -->
|
|
{#if index < historico.length - 1}
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
|
|
<Clock class="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div class="w-0.5 h-full bg-base-300 my-2"></div>
|
|
</div>
|
|
{:else}
|
|
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
|
|
<Clock class="h-6 w-6 text-primary" />
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Conteúdo -->
|
|
<div class="flex-1 pb-4">
|
|
<div class="card bg-base-100 shadow">
|
|
<div class="card-body p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<User class="h-4 w-4 text-base-content/60" />
|
|
<span class="font-medium">{item.usuarioNome || 'Usuário'}</span>
|
|
</div>
|
|
<span class="badge {getAcaoColor(item.acao)} badge-outline">
|
|
{getAcaoLabel(item.acao)}
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-base-content/60 mb-2">
|
|
{new Date(item.timestamp).toLocaleString('pt-BR')}
|
|
</p>
|
|
{#if item.observacoes}
|
|
<div class="flex items-start gap-2 mt-2">
|
|
<FileText class="h-4 w-4 text-base-content/60 mt-0.5" />
|
|
<p class="text-sm text-base-content/70">{item.observacoes}</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
|