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,157 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { experimentsApi, animalsApi } from '../api/client';
+import Button from '../components/ui/Button';
+import Modal from '../components/ui/Modal';
+import ConfirmDialog from '../components/ui/ConfirmDialog';
+import AnimalForm from '../components/AnimalForm';
+import Alert from '../components/ui/Alert';
+import AuditLogSection from '../components/AuditLogSection';
+
+export default function ExperimentDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const [experiment, setExperiment] = useState(null);
+  const [animals, setAnimals] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [successMsg, setSuccessMsg] = useState(null);
+
+  const [showAddAnimal, setShowAddAnimal] = useState(false);
+  const [editAnimal, setEditAnimal] = useState(null);
+  const [deleteAnimal, setDeleteAnimal] = useState(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+
+  async function load() {
+    setLoading(true);
+    setError(null);
+    try {
+      const [exp, anims] = await Promise.all([
+        experimentsApi.get(id),
+        animalsApi.list(id),
+      ]);
+      setExperiment(exp);
+      setAnimals(anims);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, [id]);
+
+  function flash(msg) {
+    setSuccessMsg(msg);
+    setTimeout(() => setSuccessMsg(null), 3000);
+  }
+
+  function handleAnimalSaved(animal) {
+    setShowAddAnimal(false);
+    setEditAnimal(null);
+    load();
+    flash(editAnimal ? `Animal "${animal.animal_name}" updated.` : `Animal "${animal.animal_name}" added.`);
+  }
+
+  async function handleDeleteAnimal() {
+    setDeleteLoading(true);
+    try {
+      await animalsApi.delete(deleteAnimal.id);
+      setDeleteAnimal(null);
+      load();
+      flash('Animal removed.');
+    } catch (err) {
+      setError(err.message);
+      setDeleteAnimal(null);
+    } finally {
+      setDeleteLoading(false);
+    }
+  }
+
+  if (loading) return <div className="max-w-5xl mx-auto px-4 py-8 text-gray-400">Loading…</div>;
+  if (error) return (
+    <div className="max-w-5xl mx-auto px-4 py-8">
+      <Alert type="error" message={error} />
+      <Button variant="secondary" className="mt-4" onClick={() => navigate('/')}>← Back</Button>
+    </div>
+  );
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-8">
+      {/* Breadcrumb */}
+      <nav className="text-sm text-gray-500 mb-4">
+        <Link to="/" className="hover:text-blue-600">Experiments</Link>
+        <span className="mx-2">/</span>
+        <span className="text-gray-900 font-medium">{experiment.title}</span>
+      </nav>
+
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{experiment.title}</h1>
+          <p className="text-sm text-gray-500 mt-0.5">
+            {animals.length} animal{animals.length !== 1 ? 's' : ''} enrolled
+          </p>
+        </div>
+        <Button onClick={() => setShowAddAnimal(true)}>+ Add Animal</Button>
+      </div>
+
+      {successMsg && <Alert type="success" message={successMsg} />}
+      {error && <Alert type="error" message={error} onDismiss={() => setError(null)} />}
+
+      {animals.length === 0 ? (
+        <div className="text-center py-16 border-2 border-dashed border-gray-200 rounded-xl">
+          <p className="text-gray-400 mb-3">No animals enrolled in this experiment yet.</p>
+          <Button onClick={() => setShowAddAnimal(true)}>+ Add First Animal</Button>
+        </div>
+      ) : (
+        <div className="grid gap-3">
+          {animals.map((animal) => (
+            <div
+              key={animal.id}
+              className="bg-white border border-gray-200 rounded-xl p-4 flex items-center justify-between hover:border-blue-300 hover:shadow-sm transition-all cursor-pointer group"
+              onClick={() => navigate(`/animals/${animal.id}`)}
+            >
+              <div>
+                <div className="font-semibold text-gray-900 group-hover:text-blue-700 transition-colors">
+                  {animal.animal_name}
+                </div>
+                <div className="text-sm text-gray-500">
+                  ID: {animal.animal_id_string} · {animal._count?.daily_statuses ?? 0} daily status entries
+                </div>
+              </div>
+              <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
+                <Button size="sm" variant="secondary" onClick={() => setEditAnimal(animal)}>Edit</Button>
+                <Button size="sm" variant="danger" onClick={() => setDeleteAnimal(animal)}>Remove</Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <AuditLogSection tableName="animals" recordId={undefined} />
+
+      <Modal isOpen={showAddAnimal} onClose={() => setShowAddAnimal(false)} title="Add Animal">
+        <AnimalForm experimentId={id} onSuccess={handleAnimalSaved} onCancel={() => setShowAddAnimal(false)} />
+      </Modal>
+
+      <Modal isOpen={!!editAnimal} onClose={() => setEditAnimal(null)} title="Edit Animal">
+        <AnimalForm
+          existing={editAnimal}
+          experimentId={id}
+          onSuccess={handleAnimalSaved}
+          onCancel={() => setEditAnimal(null)}
+        />
+      </Modal>
+
+      <ConfirmDialog
+        isOpen={!!deleteAnimal}
+        onClose={() => setDeleteAnimal(null)}
+        onConfirm={handleDeleteAnimal}
+        loading={deleteLoading}
+        title="Remove Animal"
+        message={`Remove "${deleteAnimal?.animal_name}" and all its daily statuses from this experiment?`}
+      />
+    </div>
+  );
+}