feat(frontend): React UI — pages, forms, audit log section, Tailwind, Vite build

2026-04-15 13:18:31 -04:00
parent f1d2449808
commit c32a5d200d
22 changed files with 10356 additions and 0 deletions
@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react';
+import { auditLogsApi } from '../api/client';
+import { format } from 'date-fns';
+
+function DiffView({ changes }) {
+  const { before, after } = changes || {};
+  if (!before && after) {
+    return <span className="text-green-700 text-xs">Created: {JSON.stringify(after, null, 2)}</span>;
+  }
+  if (before && !after) {
+    return <span className="text-red-700 text-xs">Deleted record</span>;
+  }
+  if (before && after) {
+    const keys = Object.keys({ ...before, ...after }).filter(
+      (k) => JSON.stringify(before[k]) !== JSON.stringify(after[k])
+    );
+    if (keys.length === 0) return <span className="text-gray-400 text-xs">No field changes detected</span>;
+    return (
+      <dl className="text-xs space-y-1">
+        {keys.map((k) => (
+          <div key={k} className="grid grid-cols-3 gap-2">
+            <dt className="font-medium text-gray-600">{k}</dt>
+            <dd className="text-red-600 line-through col-span-1 truncate">{String(before[k] ?? '')}</dd>
+            <dd className="text-green-700 col-span-1 truncate">{String(after[k] ?? '')}</dd>
+          </div>
+        ))}
+      </dl>
+    );
+  }
+  return null;
+}
+
+const ACTION_BADGE = {
+  CREATE: 'bg-green-100 text-green-800',
+  UPDATE: 'bg-yellow-100 text-yellow-800',
+  DELETE: 'bg-red-100 text-red-800',
+};
+
+export default function AuditLogSection({ tableName, recordId }) {
+  const [logs, setLogs] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [expanded, setExpanded] = useState(null);
+
+  useEffect(() => {
+    setLoading(true);
+    auditLogsApi
+      .list({ tableName, recordId, limit: 50 })
+      .then(({ logs, total }) => {
+        setLogs(logs);
+        setTotal(total);
+      })
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [tableName, recordId]);
+
+  return (
+    <section aria-label="Modification History" className="mt-8">
+      <h3 className="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
+        <svg className="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        Modification History
+        {total > 0 && (
+          <span className="text-xs font-normal text-gray-500">({total} entries)</span>
+        )}
+      </h3>
+
+      {loading && <p className="text-sm text-gray-500">Loading history…</p>}
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {!loading && !error && logs.length === 0 && (
+        <p className="text-sm text-gray-400 italic">No modification history yet.</p>
+      )}
+
+      {logs.length > 0 && (
+        <div className="border border-gray-200 rounded-lg overflow-hidden divide-y divide-gray-100">
+          {logs.map((log) => (
+            <div key={log.id} className="bg-white">
+              <button
+                className="w-full text-left px-4 py-3 flex items-center gap-3 hover:bg-gray-50 transition-colors"
+                onClick={() => setExpanded(expanded === log.id ? null : log.id)}
+                aria-expanded={expanded === log.id}
+              >
+                <span className={`shrink-0 px-2 py-0.5 rounded text-xs font-semibold ${ACTION_BADGE[log.action] || 'bg-gray-100 text-gray-700'}`}>
+                  {log.action}
+                </span>
+                <span className="text-xs text-gray-500 shrink-0">
+                  {format(new Date(log.timestamp), 'yyyy-MM-dd HH:mm:ss')}
+                </span>
+                <span className="text-xs text-gray-400 truncate flex-1">
+                  {log.table_name} / {log.record_id}
+                </span>
+                <svg
+                  className={`w-4 h-4 text-gray-400 shrink-0 transition-transform ${expanded === log.id ? 'rotate-180' : ''}`}
+                  fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              {expanded === log.id && (
+                <div className="px-4 pb-3 bg-gray-50 border-t border-gray-100">
+                  <DiffView changes={log.changes} />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}