feat: permanent calendar below analytics, editable day modal, per-subject bar chart

frontend/src/pages/ExperimentDetail.jsx

@@ -269,7 +269,7 @@ export default function ExperimentDetail() {
           <div className="flex items-center gap-3 mb-3 flex-wrap">
             {/* Mode toggle */}
             <div className="flex rounded border border-gray-200 overflow-hidden text-xs">
-              {[['list', 'List'], ['group', 'Group'], ['calendar', 'Calendar']].map(([mode, label]) => (
+              {[['list', 'List'], ['group', 'Group']].map(([mode, label]) => (
                 <button key={mode} type="button" onClick={() => updateDisplayMode(mode)}
                   className={`px-3 py-1 border-l border-gray-200 first:border-l-0 transition-colors
                     ${displayMode === mode ? 'bg-gray-700 text-white' : 'bg-white text-gray-500 hover:bg-gray-50'}`}>
@@ -357,14 +357,6 @@ export default function ExperimentDetail() {
             );
           })}
 
-          {displayMode === 'calendar' && (
-            <ExperimentCalendar
-              experimentId={id}
-              template={dailyTemplate}
-              allStatuses={experimentStatuses}
-              animals={animals}
-            />
-          )}
         </>
       )}
 
@@ -375,6 +367,23 @@ export default function ExperimentDetail() {
         dailyTemplate={dailyTemplate}
       />
 
+      {animals.length > 0 && (
+        <ExperimentCalendar
+          experimentId={id}
+          template={dailyTemplate}
+          allStatuses={experimentStatuses}
+          animals={animals}
+          onStatusChange={(updated) => {
+            setExperimentStatuses((prev) =>
+              prev.map((s) => (s.id === updated.id ? updated : s))
+            );
+          }}
+          onStatusCreate={(created) => {
+            setExperimentStatuses((prev) => [...prev, created]);
+          }}
+        />
+      )}
+
       <AuditLogSection tableName="animals" limit={5} />
 
       {/* Template editor modal */}