From ea1a7f39f2c875b82a58daaca3b26cccfa630263 Mon Sep 17 00:00:00 2001
From: Experiments DB Dev <dev@experiments-db.local>
Date: Mon, 6 Jul 2026 15:48:02 -0400
Subject: [PATCH] feat(frontend): Export data button + modal on experiment page

---
 frontend/src/pages/ExperimentDetail.jsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/ExperimentDetail.jsx b/frontend/src/pages/ExperimentDetail.jsx
index c5c5246..fda7ab5 100644
--- a/frontend/src/pages/ExperimentDetail.jsx
+++ b/frontend/src/pages/ExperimentDetail.jsx
@@ -9,6 +9,7 @@ import TemplateEditor from '../components/TemplateEditor';
 import Alert from '../components/ui/Alert';
 import AuditLogSection from '../components/AuditLogSection';
 import ExperimentCalendar from '../components/ExperimentCalendar';
+import ExportDataModal from '../components/ExportDataModal';
 
 function AnimalCardList({ animals, subjectTemplate, onNavigate, onEdit }) {
   return (
@@ -62,6 +63,7 @@ export default function ExperimentDetail() {
   const [editAnimal, setEditAnimal] = useState(null);
   const [showTemplate, setShowTemplate] = useState(false);
   const [showSubjectTemplate, setShowSubjectTemplate] = useState(false);
+  const [showExport, setShowExport] = useState(false);
   const [subjectTemplate, setSubjectTemplate] = useState([]);
   const [dailyTemplate, setDailyTemplate] = useState([]);
   const [experimentStatuses, setExperimentStatuses] = useState([]);
@@ -201,7 +203,10 @@ export default function ExperimentDetail() {
             {animals.length} animal{animals.length !== 1 ? 's' : ''} enrolled
           </p>
         </div>
-        <Button onClick={() => setShowAddAnimal(true)}>+ Add Animal</Button>
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={() => setShowExport(true)}>Export data</Button>
+          <Button onClick={() => setShowAddAnimal(true)}>+ Add Animal</Button>
+        </div>
       </div>
 
       {successMsg && <Alert type="success" message={successMsg} />}
@@ -405,6 +410,16 @@ export default function ExperimentDetail() {
         <AnimalForm existing={editAnimal} experimentId={id} onSuccess={handleAnimalSaved} onCancel={() => setEditAnimal(null)} />
       </Modal>
 
+      <Modal isOpen={showExport} onClose={() => setShowExport(false)} title="Export data" size="md">
+        <ExportDataModal
+          experimentId={id}
+          experimentTitle={experiment.title}
+          dailyTemplate={dailyTemplate}
+          animals={animals}
+          onClose={() => setShowExport(false)}
+        />
+      </Modal>
+
     </div>
   );
 }