feat(frontend): React UI — pages, forms, audit log section, Tailwind, Vite build
This commit is contained in:
Experiments DB Dev
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
// Response interceptor — normalize errors
|
||||
api.interceptors.response.use(
|
||||
(res) => res,
|
||||
(err) => {
|
||||
const message =
|
||||
err.response?.data?.error ||
|
||||
err.response?.data?.message ||
|
||||
err.message ||
|
||||
'An unexpected error occurred';
|
||||
const details = err.response?.data?.details || null;
|
||||
return Promise.reject({ message, details, status: err.response?.status });
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
|
||||
// ── Experiments ────────────────────────────────────────────────────────────────
|
||||
export const experimentsApi = {
|
||||
list: () => api.get('/experiments').then((r) => r.data),
|
||||
get: (id) => api.get(`/experiments/${id}`).then((r) => r.data),
|
||||
create: (data) => api.post('/experiments', data).then((r) => r.data),
|
||||
update: (id, data) => api.put(`/experiments/${id}`, data).then((r) => r.data),
|
||||
delete: (id) => api.delete(`/experiments/${id}`),
|
||||
};
|
||||
|
||||
// ── Animals ───────────────────────────────────────────────────────────────────
|
||||
export const animalsApi = {
|
||||
list: (experimentId) =>
|
||||
api.get('/animals', { params: { experimentId } }).then((r) => r.data),
|
||||
get: (id) => api.get(`/animals/${id}`).then((r) => r.data),
|
||||
create: (data) => api.post('/animals', data).then((r) => r.data),
|
||||
update: (id, data) => api.put(`/animals/${id}`, data).then((r) => r.data),
|
||||
delete: (id) => api.delete(`/animals/${id}`),
|
||||
};
|
||||
|
||||
// ── Daily Statuses ─────────────────────────────────────────────────────────────
|
||||
export const dailyStatusesApi = {
|
||||
list: (animalId) =>
|
||||
api.get('/daily-statuses', { params: { animalId } }).then((r) => r.data),
|
||||
get: (id) => api.get(`/daily-statuses/${id}`).then((r) => r.data),
|
||||
create: (data) => api.post('/daily-statuses', data).then((r) => r.data),
|
||||
update: (id, data) => api.put(`/daily-statuses/${id}`, data).then((r) => r.data),
|
||||
delete: (id) => api.delete(`/daily-statuses/${id}`),
|
||||
};
|
||||
|
||||
// ── Audit Logs ────────────────────────────────────────────────────────────────
|
||||
export const auditLogsApi = {
|
||||
list: (params) => api.get('/audit-logs', { params }).then((r) => r.data),
|
||||
};
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Button from './ui/Button';
|
||||
import FormField, { Input } from './ui/FormField';
|
||||
import Alert from './ui/Alert';
|
||||
import { animalsApi } from '../api/client';
|
||||
|
||||
export default function AnimalForm({ existing, experimentId, onSuccess, onCancel }) {
|
||||
const [fields, setFields] = useState({
|
||||
animal_id_string: existing?.animal_id_string ?? '',
|
||||
animal_name: existing?.animal_name ?? '',
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const [apiError, setApiError] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setFields({
|
||||
animal_id_string: existing?.animal_id_string ?? '',
|
||||
animal_name: existing?.animal_name ?? '',
|
||||
});
|
||||
setErrors({});
|
||||
setApiError(null);
|
||||
}, [existing]);
|
||||
|
||||
const set = (k) => (e) => setFields((f) => ({ ...f, [k]: e.target.value }));
|
||||
|
||||
function validate() {
|
||||
const e = {};
|
||||
if (!fields.animal_id_string.trim()) e.animal_id_string = 'Animal ID is required';
|
||||
if (!fields.animal_name.trim()) e.animal_name = 'Animal name is required';
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
setLoading(true);
|
||||
setApiError(null);
|
||||
try {
|
||||
const payload = {
|
||||
animal_id_string: fields.animal_id_string.trim(),
|
||||
animal_name: fields.animal_name.trim(),
|
||||
};
|
||||
const result = existing
|
||||
? await animalsApi.update(existing.id, payload)
|
||||
: await animalsApi.create({ ...payload, experiment_id: experimentId });
|
||||
onSuccess(result);
|
||||
} catch (err) {
|
||||
setApiError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} noValidate className="space-y-4">
|
||||
{apiError && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={apiError.message}
|
||||
details={apiError.details}
|
||||
onDismiss={() => setApiError(null)}
|
||||
/>
|
||||
)}
|
||||
<FormField label="Animal ID" name="animal_id_string" error={errors.animal_id_string} required>
|
||||
<Input
|
||||
name="animal_id_string"
|
||||
value={fields.animal_id_string}
|
||||
onChange={set('animal_id_string')}
|
||||
placeholder="e.g. M-001"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Animal Name" name="animal_name" error={errors.animal_name} required>
|
||||
<Input
|
||||
name="animal_name"
|
||||
value={fields.animal_name}
|
||||
onChange={set('animal_name')}
|
||||
placeholder="e.g. Whiskers"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<Button variant="secondary" type="button" onClick={onCancel} disabled={loading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" loading={loading}>
|
||||
{existing ? 'Save Changes' : 'Add Animal'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import Button from './ui/Button';
|
||||
import FormField, { Input, Textarea } from './ui/FormField';
|
||||
import Alert from './ui/Alert';
|
||||
import { dailyStatusesApi } from '../api/client';
|
||||
|
||||
export default function DailyStatusForm({ existing, animalId, onSuccess, onCancel }) {
|
||||
const today = format(new Date(), 'yyyy-MM-dd');
|
||||
const [fields, setFields] = useState({
|
||||
date: existing ? format(new Date(existing.date), 'yyyy-MM-dd') : today,
|
||||
experiment_description: existing?.experiment_description ?? '',
|
||||
vitals: existing?.vitals ?? '',
|
||||
treatment: existing?.treatment ?? '',
|
||||
notes: existing?.notes ?? '',
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const [apiError, setApiError] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setFields({
|
||||
date: existing ? format(new Date(existing.date), 'yyyy-MM-dd') : today,
|
||||
experiment_description: existing?.experiment_description ?? '',
|
||||
vitals: existing?.vitals ?? '',
|
||||
treatment: existing?.treatment ?? '',
|
||||
notes: existing?.notes ?? '',
|
||||
});
|
||||
setErrors({});
|
||||
setApiError(null);
|
||||
}, [existing]);
|
||||
|
||||
const set = (k) => (e) => setFields((f) => ({ ...f, [k]: e.target.value }));
|
||||
|
||||
function validate() {
|
||||
const e = {};
|
||||
if (!fields.date) {
|
||||
e.date = 'Date is required';
|
||||
} else if (!/^\d{4}-\d{2}-\d{2}$/.test(fields.date)) {
|
||||
e.date = 'Date must be in YYYY-MM-DD format';
|
||||
} else {
|
||||
const d = new Date(fields.date);
|
||||
if (isNaN(d.getTime())) e.date = 'Invalid date';
|
||||
}
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
setLoading(true);
|
||||
setApiError(null);
|
||||
try {
|
||||
const payload = {
|
||||
date: fields.date,
|
||||
experiment_description: fields.experiment_description || null,
|
||||
vitals: fields.vitals || null,
|
||||
treatment: fields.treatment || null,
|
||||
notes: fields.notes || null,
|
||||
};
|
||||
const result = existing
|
||||
? await dailyStatusesApi.update(existing.id, payload)
|
||||
: await dailyStatusesApi.create({ ...payload, animal_id: animalId });
|
||||
onSuccess(result);
|
||||
} catch (err) {
|
||||
setApiError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} noValidate className="space-y-4">
|
||||
{apiError && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={apiError.message}
|
||||
details={apiError.details}
|
||||
onDismiss={() => setApiError(null)}
|
||||
/>
|
||||
)}
|
||||
<FormField label="Date" name="date" error={errors.date} required>
|
||||
<Input
|
||||
type="date"
|
||||
name="date"
|
||||
value={fields.date}
|
||||
onChange={set('date')}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Experiment Description" name="experiment_description">
|
||||
<Textarea
|
||||
name="experiment_description"
|
||||
value={fields.experiment_description}
|
||||
onChange={set('experiment_description')}
|
||||
placeholder="Describe the experimental conditions…"
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Vitals" name="vitals">
|
||||
<Input
|
||||
name="vitals"
|
||||
value={fields.vitals}
|
||||
onChange={set('vitals')}
|
||||
placeholder="e.g. HR 72bpm, Temp 37.2°C, Weight 280g"
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Treatment" name="treatment">
|
||||
<Input
|
||||
name="treatment"
|
||||
value={fields.treatment}
|
||||
onChange={set('treatment')}
|
||||
placeholder="e.g. Drug X — 10mg/kg oral"
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Notes" name="notes">
|
||||
<Textarea
|
||||
name="notes"
|
||||
value={fields.notes}
|
||||
onChange={set('notes')}
|
||||
placeholder="Any additional observations…"
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<Button variant="secondary" type="button" onClick={onCancel} disabled={loading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" loading={loading}>
|
||||
{existing ? 'Save Changes' : 'Log Status'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Button from './ui/Button';
|
||||
import FormField, { Input } from './ui/FormField';
|
||||
import Alert from './ui/Alert';
|
||||
import { experimentsApi } from '../api/client';
|
||||
|
||||
export default function ExperimentForm({ existing, onSuccess, onCancel }) {
|
||||
const [title, setTitle] = useState(existing?.title ?? '');
|
||||
const [errors, setErrors] = useState({});
|
||||
const [apiError, setApiError] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(existing?.title ?? '');
|
||||
setErrors({});
|
||||
setApiError(null);
|
||||
}, [existing]);
|
||||
|
||||
function validate() {
|
||||
const e = {};
|
||||
if (!title.trim()) e.title = 'Title is required';
|
||||
else if (title.trim().length > 255) e.title = 'Title must be 255 characters or fewer';
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
setLoading(true);
|
||||
setApiError(null);
|
||||
try {
|
||||
const result = existing
|
||||
? await experimentsApi.update(existing.id, { title: title.trim() })
|
||||
: await experimentsApi.create({ title: title.trim() });
|
||||
onSuccess(result);
|
||||
} catch (err) {
|
||||
setApiError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} noValidate className="space-y-4">
|
||||
{apiError && (
|
||||
<Alert
|
||||
type="error"
|
||||
message={apiError.message}
|
||||
details={apiError.details}
|
||||
onDismiss={() => setApiError(null)}
|
||||
/>
|
||||
)}
|
||||
<FormField label="Experiment Title" name="title" error={errors.title} required>
|
||||
<Input
|
||||
name="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="e.g. Drug Efficacy Study – Q3"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<Button variant="secondary" type="button" onClick={onCancel} disabled={loading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" loading={loading}>
|
||||
{existing ? 'Save Changes' : 'Create Experiment'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
const styles = {
|
||||
error: 'bg-red-50 border-red-200 text-red-800',
|
||||
success: 'bg-green-50 border-green-200 text-green-800',
|
||||
warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
|
||||
info: 'bg-blue-50 border-blue-200 text-blue-800',
|
||||
};
|
||||
|
||||
export default function Alert({ type = 'error', message, details, onDismiss }) {
|
||||
if (!message) return null;
|
||||
return (
|
||||
<div role="alert" className={`rounded-md border px-4 py-3 text-sm ${styles[type]}`}>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">{message}</p>
|
||||
{details && (
|
||||
<ul className="mt-1 list-disc list-inside space-y-0.5 text-xs opacity-80">
|
||||
{details.map((d, i) => (
|
||||
<li key={i}>{d.field ? `${d.field}: ${d.message}` : d.message}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{onDismiss && (
|
||||
<button onClick={onDismiss} className="shrink-0 opacity-60 hover:opacity-100" aria-label="Dismiss">
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-blue-600 hover:bg-blue-700 text-white border-transparent',
|
||||
secondary: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300',
|
||||
danger: 'bg-red-600 hover:bg-red-700 text-white border-transparent',
|
||||
ghost: 'bg-transparent hover:bg-gray-100 text-gray-600 border-transparent',
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: 'px-3 py-1.5 text-sm',
|
||||
md: 'px-4 py-2 text-sm',
|
||||
lg: 'px-6 py-3 text-base',
|
||||
};
|
||||
|
||||
export default function Button({
|
||||
children,
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
disabled = false,
|
||||
loading = false,
|
||||
onClick,
|
||||
type = 'button',
|
||||
className = '',
|
||||
...rest
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
disabled={disabled || loading}
|
||||
onClick={onClick}
|
||||
className={`
|
||||
inline-flex items-center gap-1.5 rounded-md border font-medium
|
||||
transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
${variants[variant]} ${sizes[size]} ${className}
|
||||
`}
|
||||
{...rest}
|
||||
>
|
||||
{loading && (
|
||||
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
|
||||
</svg>
|
||||
)}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import Modal from './Modal';
|
||||
import Button from './Button';
|
||||
|
||||
export default function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, loading }) {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
|
||||
<p className="text-sm text-gray-600 mb-6">{message}</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="secondary" onClick={onClose} disabled={loading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="danger" onClick={onConfirm} loading={loading}>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function FormField({ label, name, error, required, children }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor={name} className="text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1" aria-hidden="true">*</span>}
|
||||
</label>
|
||||
{children}
|
||||
{error && (
|
||||
<p role="alert" className="text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Input({ id, name, type = 'text', value, onChange, placeholder, required, disabled, className = '', ...rest }) {
|
||||
return (
|
||||
<input
|
||||
id={id || name}
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
w-full rounded-md border border-gray-300 px-3 py-2 text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
||||
disabled:bg-gray-100 disabled:cursor-not-allowed
|
||||
${className}
|
||||
`}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Textarea({ id, name, value, onChange, placeholder, rows = 3, disabled, className = '' }) {
|
||||
return (
|
||||
<textarea
|
||||
id={id || name}
|
||||
name={name}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
rows={rows}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
w-full rounded-md border border-gray-300 px-3 py-2 text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
||||
disabled:bg-gray-100 disabled:cursor-not-allowed resize-y
|
||||
${className}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default function Modal({ isOpen, onClose, title, children, size = 'md' }) {
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handleKey = (e) => { if (e.key === 'Escape') onClose(); };
|
||||
document.addEventListener('keydown', handleKey);
|
||||
return () => document.removeEventListener('keydown', handleKey);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const widths = { sm: 'max-w-md', md: 'max-w-lg', lg: 'max-w-2xl', xl: 'max-w-4xl' };
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
<div className={`bg-white rounded-xl shadow-2xl w-full mx-4 ${widths[size]} max-h-[90vh] flex flex-col`}>
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
||||
<h2 id="modal-title" className="text-lg font-semibold text-gray-900">{title}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 rounded p-1 transition-colors"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 overflow-y-auto flex-1">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-900 antialiased;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,175 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { animalsApi, dailyStatusesApi } from '../api/client';
|
||||
import { format } from 'date-fns';
|
||||
import Button from '../components/ui/Button';
|
||||
import Modal from '../components/ui/Modal';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import DailyStatusForm from '../components/DailyStatusForm';
|
||||
import Alert from '../components/ui/Alert';
|
||||
import AuditLogSection from '../components/AuditLogSection';
|
||||
|
||||
export default function AnimalDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [animal, setAnimal] = useState(null);
|
||||
const [statuses, setStatuses] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [successMsg, setSuccessMsg] = useState(null);
|
||||
|
||||
const [showAddStatus, setShowAddStatus] = useState(false);
|
||||
const [editStatus, setEditStatus] = useState(null);
|
||||
const [deleteStatus, setDeleteStatus] = useState(null);
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [animalData, statusData] = await Promise.all([
|
||||
animalsApi.get(id),
|
||||
dailyStatusesApi.list(id),
|
||||
]);
|
||||
setAnimal(animalData);
|
||||
setStatuses(statusData);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { load(); }, [id]);
|
||||
|
||||
function flash(msg) {
|
||||
setSuccessMsg(msg);
|
||||
setTimeout(() => setSuccessMsg(null), 3000);
|
||||
}
|
||||
|
||||
function handleStatusSaved() {
|
||||
setShowAddStatus(false);
|
||||
setEditStatus(null);
|
||||
load();
|
||||
flash(editStatus ? 'Daily status updated.' : 'Daily status logged.');
|
||||
}
|
||||
|
||||
async function handleDeleteStatus() {
|
||||
setDeleteLoading(true);
|
||||
try {
|
||||
await dailyStatusesApi.delete(deleteStatus.id);
|
||||
setDeleteStatus(null);
|
||||
load();
|
||||
flash('Daily status removed.');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setDeleteStatus(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(-1)}>← 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>
|
||||
<Link to={`/experiments/${animal.experiment_id}`} className="hover:text-blue-600">
|
||||
Experiment
|
||||
</Link>
|
||||
<span className="mx-2">/</span>
|
||||
<span className="text-gray-900 font-medium">{animal.animal_name}</span>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">{animal.animal_name}</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">
|
||||
ID: <span className="font-mono">{animal.animal_id_string}</span>
|
||||
{' · '}
|
||||
{statuses.length} daily status {statuses.length !== 1 ? 'entries' : 'entry'}
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowAddStatus(true)}>+ Log Daily Status</Button>
|
||||
</div>
|
||||
|
||||
{successMsg && <Alert type="success" message={successMsg} />}
|
||||
{error && <Alert type="error" message={error} onDismiss={() => setError(null)} />}
|
||||
|
||||
{statuses.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 daily statuses logged yet.</p>
|
||||
<Button onClick={() => setShowAddStatus(true)}>+ Log First Status</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{statuses.map((s) => (
|
||||
<div key={s.id} className="bg-white border border-gray-200 rounded-xl p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="font-semibold text-gray-900">
|
||||
{format(new Date(s.date), 'MMMM d, yyyy')}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="secondary" onClick={() => setEditStatus(s)}>Edit</Button>
|
||||
<Button size="sm" variant="danger" onClick={() => setDeleteStatus(s)}>Delete</Button>
|
||||
</div>
|
||||
</div>
|
||||
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-sm">
|
||||
{[
|
||||
['Experiment Description', s.experiment_description],
|
||||
['Vitals', s.vitals],
|
||||
['Treatment', s.treatment],
|
||||
['Notes', s.notes],
|
||||
]
|
||||
.filter(([, v]) => v)
|
||||
.map(([label, value]) => (
|
||||
<div key={label} className="flex flex-col">
|
||||
<dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">{label}</dt>
|
||||
<dd className="text-gray-800 mt-0.5 whitespace-pre-wrap">{value}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
{!s.experiment_description && !s.vitals && !s.treatment && !s.notes && (
|
||||
<p className="text-sm text-gray-400 italic">No details recorded for this date.</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AuditLogSection tableName="daily_statuses" recordId={undefined} />
|
||||
|
||||
<Modal isOpen={showAddStatus} onClose={() => setShowAddStatus(false)} title="Log Daily Status" size="lg">
|
||||
<DailyStatusForm animalId={id} onSuccess={handleStatusSaved} onCancel={() => setShowAddStatus(false)} />
|
||||
</Modal>
|
||||
|
||||
<Modal isOpen={!!editStatus} onClose={() => setEditStatus(null)} title="Edit Daily Status" size="lg">
|
||||
<DailyStatusForm
|
||||
existing={editStatus}
|
||||
animalId={id}
|
||||
onSuccess={handleStatusSaved}
|
||||
onCancel={() => setEditStatus(null)}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={!!deleteStatus}
|
||||
onClose={() => setDeleteStatus(null)}
|
||||
onConfirm={handleDeleteStatus}
|
||||
loading={deleteLoading}
|
||||
title="Delete Daily Status"
|
||||
message={`Delete the status entry for ${deleteStatus ? format(new Date(deleteStatus.date), 'MMMM d, yyyy') : ''}?`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { experimentsApi } from '../api/client';
|
||||
import Button from '../components/ui/Button';
|
||||
import Modal from '../components/ui/Modal';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import ExperimentForm from '../components/ExperimentForm';
|
||||
import Alert from '../components/ui/Alert';
|
||||
import { format } from 'date-fns';
|
||||
import AuditLogSection from '../components/AuditLogSection';
|
||||
|
||||
export default function Dashboard() {
|
||||
const navigate = useNavigate();
|
||||
const [experiments, setExperiments] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState(null);
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
const [successMsg, setSuccessMsg] = useState(null);
|
||||
|
||||
async function loadExperiments() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await experimentsApi.list();
|
||||
setExperiments(data);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { loadExperiments(); }, []);
|
||||
|
||||
function flash(msg) {
|
||||
setSuccessMsg(msg);
|
||||
setTimeout(() => setSuccessMsg(null), 3000);
|
||||
}
|
||||
|
||||
function handleCreated(exp) {
|
||||
setShowCreateModal(false);
|
||||
loadExperiments();
|
||||
flash(`Experiment "${exp.title}" created.`);
|
||||
}
|
||||
|
||||
function handleUpdated(exp) {
|
||||
setEditTarget(null);
|
||||
loadExperiments();
|
||||
flash(`Experiment "${exp.title}" updated.`);
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
setDeleteLoading(true);
|
||||
try {
|
||||
await experimentsApi.delete(deleteTarget.id);
|
||||
setDeleteTarget(null);
|
||||
loadExperiments();
|
||||
flash('Experiment deleted.');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setDeleteTarget(null);
|
||||
} finally {
|
||||
setDeleteLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Experiments</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">Manage all animal experimental studies</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateModal(true)}>
|
||||
+ New Experiment
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{successMsg && <Alert type="success" message={successMsg} className="mb-4" />}
|
||||
{error && <Alert type="error" message={error} onDismiss={() => setError(null)} />}
|
||||
|
||||
{loading && (
|
||||
<div className="text-center py-16 text-gray-400">Loading experiments…</div>
|
||||
)}
|
||||
|
||||
{!loading && experiments.length === 0 && (
|
||||
<div className="text-center py-20 border-2 border-dashed border-gray-200 rounded-xl">
|
||||
<p className="text-gray-400 text-lg mb-2">No experiments yet</p>
|
||||
<p className="text-gray-400 text-sm mb-4">Create your first experiment to get started.</p>
|
||||
<Button onClick={() => setShowCreateModal(true)}>+ New Experiment</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && experiments.length > 0 && (
|
||||
<div className="grid gap-4">
|
||||
{experiments.map((exp) => (
|
||||
<div
|
||||
key={exp.id}
|
||||
className="bg-white border border-gray-200 rounded-xl p-5 flex items-center justify-between hover:border-blue-300 hover:shadow-sm transition-all cursor-pointer group"
|
||||
onClick={() => navigate(`/experiments/${exp.id}`)}
|
||||
>
|
||||
<div>
|
||||
<h2 className="font-semibold text-gray-900 group-hover:text-blue-700 transition-colors">
|
||||
{exp.title}
|
||||
</h2>
|
||||
<div className="text-sm text-gray-500 mt-0.5 flex gap-4">
|
||||
<span>{exp._count?.animals ?? 0} animal{exp._count?.animals !== 1 ? 's' : ''}</span>
|
||||
<span>Created {format(new Date(exp.created_at), 'MMM d, yyyy')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => setEditTarget(exp)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
onClick={() => setDeleteTarget(exp)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AuditLogSection tableName="experiments" />
|
||||
|
||||
{/* Create modal */}
|
||||
<Modal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} title="New Experiment">
|
||||
<ExperimentForm onSuccess={handleCreated} onCancel={() => setShowCreateModal(false)} />
|
||||
</Modal>
|
||||
|
||||
{/* Edit modal */}
|
||||
<Modal isOpen={!!editTarget} onClose={() => setEditTarget(null)} title="Edit Experiment">
|
||||
<ExperimentForm
|
||||
existing={editTarget}
|
||||
onSuccess={handleUpdated}
|
||||
onCancel={() => setEditTarget(null)}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
{/* Delete confirmation */}
|
||||
<ConfirmDialog
|
||||
isOpen={!!deleteTarget}
|
||||
onClose={() => setDeleteTarget(null)}
|
||||
onConfirm={handleDelete}
|
||||
loading={deleteLoading}
|
||||
title="Delete Experiment"
|
||||
message={`Are you sure you want to delete "${deleteTarget?.title}"? All associated animals and daily statuses will be permanently removed.`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user