prvi kod za live uporabu

2026-07-09 21:21:17 +02:00
parent 857bb65d52
commit 5d39e048ba
239 changed files with 25151 additions and 0 deletions
--- a/frontend/src/components/dashboard/SyncLogPanel.jsx
+++ b/frontend/src/components/dashboard/SyncLogPanel.jsx
@@ -0,0 +1,57 @@
+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>
+    );
+}