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,50 @@
+import React from 'react';
+import { Routes, Route, Link, useLocation } from 'react-router-dom';
+import Dashboard from './pages/Dashboard';
+import ExperimentDetail from './pages/ExperimentDetail';
+import AnimalDetail from './pages/AnimalDetail';
+
+function Navbar() {
+  return (
+    <header className="bg-white border-b border-gray-200 sticky top-0 z-40">
+      <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
+        <Link to="/" className="flex items-center gap-2 font-bold text-gray-900 hover:text-blue-700 transition-colors">
+          <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+          </svg>
+          Animal Experiments DB
+        </Link>
+        <nav className="text-sm text-gray-500">
+          <Link to="/" className="hover:text-blue-600 transition-colors">Dashboard</Link>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+function NotFound() {
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-20 text-center">
+      <h1 className="text-4xl font-bold text-gray-300 mb-4">404</h1>
+      <p className="text-gray-500 mb-6">Page not found.</p>
+      <Link to="/" className="text-blue-600 hover:underline">← Return to Dashboard</Link>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+      <main>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/experiments/:id" element={<ExperimentDetail />} />
+          <Route path="/animals/:id" element={<AnimalDetail />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}