58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
import { useStore } from '@nanostores/preact';
|
|
import { $syncLog } from '../../stores/fleetDashboardStore';
|
|
import AnimatedDataTable from '../ui/AnimatedDataTable';
|
|
|
|
function rowStyle(status) {
|
|
if (status === 'success') return 'text-emerald-700';
|
|
if (status === 'failed') return 'text-red-700';
|
|
return 'text-amber-700';
|
|
}
|
|
|
|
function formatDate(value) {
|
|
if (!value) return '-';
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return '-';
|
|
return new Intl.DateTimeFormat('hr-HR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
}).format(date);
|
|
}
|
|
|
|
export default function SyncLogPanel() {
|
|
const rows = useStore($syncLog);
|
|
const syncColumns = [
|
|
{ key: 'time', label: 'Vrijeme', className: 'px-4 py-2' },
|
|
{ key: 'status', label: 'Status', className: 'px-4 py-2' },
|
|
{ key: 'type', label: 'Tip', className: 'px-4 py-2' },
|
|
{ key: 'detail', label: 'Detalj', className: 'px-4 py-2' },
|
|
];
|
|
|
|
return (
|
|
<article className="overflow-hidden rounded-xl border border-border-hairline bg-canvas-elevated shadow-sm">
|
|
<div className="border-b border-border-hairline px-4 py-3">
|
|
<h3 className="font-semibold text-text-main">Status sinkronizacije</h3>
|
|
<p className="text-xs text-text-muted">Što je poslano, što je ostalo u redu čekanja i što nije uspjelo.</p>
|
|
</div>
|
|
|
|
<AnimatedDataTable
|
|
columns={syncColumns}
|
|
rows={rows}
|
|
rowKey={(item) => item.id}
|
|
emptyMessage="Još nema zapisa sinkronizacije."
|
|
wrapperClassName="max-h-72 overflow-auto"
|
|
renderRow={(item) => (
|
|
<>
|
|
<td className="px-4 py-2 text-text-muted">{formatDate(item.created_at)}</td>
|
|
<td className={`px-4 py-2 font-semibold ${rowStyle(item.status)}`}>{item.status}</td>
|
|
<td className="px-4 py-2 text-text-main">{item.entity}</td>
|
|
<td className="px-4 py-2 text-text-muted">{item.detail || '-'}</td>
|
|
</>
|
|
)}
|
|
/>
|
|
</article>
|
|
);
|
|
}
|