@@ -214,11 +234,11 @@ export function Experiments() {
Experiment Parameters
- Schedule Status
+ Repetitions Status
|
{canManageExperiments && (
- Scheduled Date/Time
+ Manage Repetitions
|
)}
@@ -258,30 +278,76 @@ export function Experiments() {
|
-
- {experiment.schedule_status}
-
+ {(() => {
+ const repetitions = experimentRepetitions[experiment.id] || []
+ const summary = getRepetitionStatusSummary(repetitions)
+ return (
+
+
+ {summary.total} total • {summary.scheduled} scheduled • {summary.pending} pending
+
+
+ {summary.scheduled > 0 && (
+
+ {summary.scheduled} scheduled
+
+ )}
+ {summary.pending > 0 && (
+
+ {summary.pending} pending
+
+ )}
+
+ |
{canManageExperiments && (
-
-
- {experiment.scheduled_date && (
-
- {new Date(experiment.scheduled_date).toLocaleString()}
-
- )}
+
+ {(() => {
+ const repetitions = experimentRepetitions[experiment.id] || []
+ return repetitions.map((repetition) => (
+
+ Rep #{repetition.repetition_number}
+
+
+ {repetition.schedule_status === 'pending schedule' ? 'Pending' : repetition.schedule_status}
+
+
+
+
+ ))
+ })()}
+ {(() => {
+ const repetitions = experimentRepetitions[experiment.id] || []
+ const missingReps = experiment.reps_required - repetitions.length
+ if (missingReps > 0) {
+ return (
+
+ )
+ }
+ return null
+ })()}
|
)}
@@ -292,8 +358,8 @@ export function Experiments() {
{experiment.completion_status ? 'Completed' : 'In Progress'}
@@ -340,11 +406,9 @@ export function Experiments() {
No experiments found
- {filterStatus === 'all'
- ? 'Get started by creating your first experiment.'
- : `No experiments with status "${filterStatus}".`}
+ Get started by creating your first experiment.
- {canManageExperiments && filterStatus === 'all' && (
+ {canManageExperiments && (
)}
- {/* Schedule Modal */}
- {showScheduleModal && schedulingExperiment && (
- setShowScheduleModal(false)}
- onScheduleUpdated={handleScheduleUpdated}
+ {/* Repetition Schedule Modal */}
+ {showRepetitionScheduleModal && schedulingRepetition && (
+ setShowRepetitionScheduleModal(false)}
+ onScheduleUpdated={handleRepetitionScheduleUpdated}
/>
)}
diff --git a/src/components/PhaseDataEntry.tsx b/src/components/PhaseDataEntry.tsx
index 1cebbfb..7782f64 100644
--- a/src/components/PhaseDataEntry.tsx
+++ b/src/components/PhaseDataEntry.tsx
@@ -1,31 +1,62 @@
import { useState, useEffect, useCallback } from 'react'
-import { dataEntryManagement, type Experiment, type ExperimentDataEntry, type ExperimentPhase, type ExperimentPhaseData } from '../lib/supabase'
+import { phaseDraftManagement, type Experiment, type ExperimentPhaseDraft, type ExperimentPhase, type ExperimentPhaseData, type ExperimentRepetition, type User } from '../lib/supabase'
+import { PhaseDraftManager } from './PhaseDraftManager'
interface PhaseDataEntryProps {
experiment: Experiment
- dataEntry: ExperimentDataEntry
+ repetition: ExperimentRepetition
phase: ExperimentPhase
+ currentUser: User
onBack: () => void
onDataSaved: () => void
}
-export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSaved }: PhaseDataEntryProps) {
+export function PhaseDataEntry({ experiment, repetition, phase, currentUser, onBack, onDataSaved }: PhaseDataEntryProps) {
+ const [selectedDraft, setSelectedDraft] = useState(null)
const [phaseData, setPhaseData] = useState>({})
const [diameterMeasurements, setDiameterMeasurements] = useState(Array(10).fill(0))
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [error, setError] = useState(null)
const [lastSaved, setLastSaved] = useState(null)
+ const [showDraftManager, setShowDraftManager] = useState(false)
// Auto-save interval (30 seconds)
const AUTO_SAVE_INTERVAL = 30000
- const loadPhaseData = useCallback(async () => {
+ useEffect(() => {
+ loadUserDrafts()
+ }, [repetition.id, phase])
+
+ const loadUserDrafts = async () => {
try {
setLoading(true)
setError(null)
- const existingData = await dataEntryManagement.getPhaseData(dataEntry.id, phase)
+ const drafts = await phaseDraftManagement.getUserPhaseDraftsForPhase(repetition.id, phase)
+
+ // Auto-select the most recent draft or show draft manager if none exist
+ if (drafts.length > 0) {
+ const mostRecentDraft = drafts[0] // Already sorted by created_at desc
+ setSelectedDraft(mostRecentDraft)
+ await loadPhaseDataForDraft(mostRecentDraft)
+ } else {
+ setShowDraftManager(true)
+ }
+ } catch (err: unknown) {
+ const errorMessage = err instanceof Error ? err.message : 'Failed to load drafts'
+ setError(errorMessage)
+ console.error('Load drafts error:', err)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const loadPhaseDataForDraft = async (draft: ExperimentPhaseDraft) => {
+ try {
+ setError(null)
+
+ const existingData = await phaseDraftManagement.getPhaseDataForDraft(draft.id)
if (existingData) {
setPhaseData(existingData)
@@ -43,33 +74,32 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
} else {
// Initialize empty phase data
setPhaseData({
- data_entry_id: dataEntry.id,
+ phase_draft_id: draft.id,
phase_name: phase
})
+ setDiameterMeasurements(Array(10).fill(0))
}
} catch (err: unknown) {
const errorMessage = err instanceof Error ? err.message : 'Failed to load phase data'
setError(errorMessage)
console.error('Load phase data error:', err)
- } finally {
- setLoading(false)
}
- }, [dataEntry.id, phase])
+ }
const autoSave = useCallback(async () => {
- if (dataEntry.status === 'submitted') return // Don't auto-save submitted entries
+ if (!selectedDraft || selectedDraft.status === 'submitted') return // Don't auto-save submitted drafts
try {
- await dataEntryManagement.autoSaveDraft(dataEntry.id, phase, phaseData)
+ await phaseDraftManagement.autoSaveDraft(selectedDraft.id, phaseData)
// Save diameter measurements if this is air-drying phase and we have measurements
if (phase === 'air-drying' && phaseData.id && diameterMeasurements.some(m => m > 0)) {
const validMeasurements = diameterMeasurements.filter(m => m > 0)
if (validMeasurements.length > 0) {
- await dataEntryManagement.saveDiameterMeasurements(phaseData.id, diameterMeasurements)
+ await phaseDraftManagement.saveDiameterMeasurements(phaseData.id, diameterMeasurements)
// Update average diameter
- const avgDiameter = dataEntryManagement.calculateAverageDiameter(validMeasurements)
+ const avgDiameter = phaseDraftManagement.calculateAverageDiameter(validMeasurements)
setPhaseData(prev => ({ ...prev, avg_pecan_diameter_in: avgDiameter }))
}
}
@@ -78,22 +108,18 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
} catch (error) {
console.warn('Auto-save failed:', error)
}
- }, [dataEntry.id, dataEntry.status, phase, phaseData, diameterMeasurements])
-
- useEffect(() => {
- loadPhaseData()
- }, [loadPhaseData])
+ }, [selectedDraft, phase, phaseData, diameterMeasurements])
// Auto-save effect
useEffect(() => {
- if (!loading && phaseData.id) {
+ if (!loading && selectedDraft && phaseData.phase_draft_id) {
const interval = setInterval(() => {
autoSave()
}, AUTO_SAVE_INTERVAL)
return () => clearInterval(interval)
}
- }, [phaseData, diameterMeasurements, loading, autoSave])
+ }, [phaseData, diameterMeasurements, loading, autoSave, selectedDraft])
const handleInputChange = (field: string, value: unknown) => {
setPhaseData(prev => ({
@@ -110,23 +136,25 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
// Calculate and update average
const validMeasurements = newMeasurements.filter(m => m > 0)
if (validMeasurements.length > 0) {
- const avgDiameter = dataEntryManagement.calculateAverageDiameter(validMeasurements)
+ const avgDiameter = phaseDraftManagement.calculateAverageDiameter(validMeasurements)
handleInputChange('avg_pecan_diameter_in', avgDiameter)
}
}
const handleSave = async () => {
+ if (!selectedDraft) return
+
try {
setSaving(true)
setError(null)
// Save phase data
- const savedData = await dataEntryManagement.upsertPhaseData(dataEntry.id, phase, phaseData)
+ const savedData = await phaseDraftManagement.upsertPhaseData(selectedDraft.id, phaseData)
setPhaseData(savedData)
// Save diameter measurements if this is air-drying phase
if (phase === 'air-drying' && diameterMeasurements.some(m => m > 0)) {
- await dataEntryManagement.saveDiameterMeasurements(savedData.id, diameterMeasurements)
+ await phaseDraftManagement.saveDiameterMeasurements(savedData.id, diameterMeasurements)
}
setLastSaved(new Date())
@@ -140,6 +168,20 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
}
}
+ const handleSelectDraft = (draft: ExperimentPhaseDraft) => {
+ setSelectedDraft(draft)
+ setShowDraftManager(false)
+ loadPhaseDataForDraft(draft)
+ }
+
+ const isFieldDisabled = () => {
+ const isAdmin = currentUser.roles.includes('admin')
+ return !selectedDraft ||
+ selectedDraft.status === 'submitted' ||
+ selectedDraft.status === 'withdrawn' ||
+ (repetition.is_locked && !isAdmin)
+ }
+
const getPhaseTitle = () => {
switch (phase) {
case 'pre-soaking': return 'Pre-Soaking Phase'
@@ -181,6 +223,17 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
return (
+ {/* Draft Manager Modal */}
+ {showDraftManager && (
+ setShowDraftManager(false)}
+ />
+ )}
+
{/* Header */}
@@ -195,8 +248,32 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
Back to Phases
{getPhaseTitle()}
+ {selectedDraft && (
+
+
+ Draft: {selectedDraft.draft_name || `Draft ${selectedDraft.id.slice(-8)}`}
+
+
+ {selectedDraft.status}
+
+ {repetition.is_locked && (
+
+ 🔒 Locked
+
+ )}
+
+ )}
+
{lastSaved && (
Last saved: {lastSaved.toLocaleTimeString()}
@@ -204,7 +281,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
)}
)}
- {dataEntry.status === 'submitted' && (
+ {selectedDraft?.status === 'submitted' && (
- This entry has been submitted and is read-only. Create a new draft to make changes.
+ This draft has been submitted and is read-only. Create a new draft to make changes.
+
+
+ )}
+
+ {selectedDraft?.status === 'withdrawn' && (
+
+
+ This draft has been withdrawn. Create a new draft to make changes.
+
+
+ )}
+
+ {repetition.is_locked && !currentUser.roles.includes('admin') && (
+
+
+ This repetition has been locked by an admin. No changes can be made to drafts.
+
+
+ )}
+
+ {repetition.is_locked && currentUser.roles.includes('admin') && (
+
+
+ 🔒 This repetition is locked, but you can still make changes as an admin.
+
+
+ )}
+
+ {!selectedDraft && (
+
+
+ No draft selected. Use "Manage Drafts" to create or select a draft for this phase.
)}
@@ -246,7 +355,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('batch_initial_weight_lbs', parseFloat(e.target.value) || null)}
className="max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -263,7 +372,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('initial_shell_moisture_pct', parseFloat(e.target.value) || null)}
className="max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.0"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
Automatically calculated from individual measurements above
@@ -464,7 +573,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
value={phaseData.cracking_start_time ? new Date(phaseData.cracking_start_time).toISOString().slice(0, 16) : ''}
onChange={(e) => handleInputChange('cracking_start_time', e.target.value ? new Date(e.target.value).toISOString() : null)}
className="max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -536,7 +645,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
value={phaseData.shelling_start_time ? new Date(phaseData.shelling_start_time).toISOString().slice(0, 16) : ''}
onChange={(e) => handleInputChange('shelling_start_time', e.target.value ? new Date(e.target.value).toISOString() : null)}
className="max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -557,7 +666,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_1_weight_lbs', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -572,7 +681,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_2_weight_lbs', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -587,7 +696,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_3_weight_lbs', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -602,7 +711,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('discharge_bin_weight_lbs', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -624,7 +733,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_1_full_yield_oz', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -639,7 +748,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_2_full_yield_oz', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -654,7 +763,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_3_full_yield_oz', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -676,7 +785,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_1_half_yield_oz', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -691,7 +800,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_2_half_yield_oz', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
@@ -706,7 +815,7 @@ export function PhaseDataEntry({ experiment, dataEntry, phase, onBack, onDataSav
onChange={(e) => handleInputChange('bin_3_half_yield_oz', parseFloat(e.target.value) || null)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00"
- disabled={dataEntry.status === 'submitted'}
+ disabled={isFieldDisabled()}
/>
diff --git a/src/components/PhaseDraftManager.tsx b/src/components/PhaseDraftManager.tsx
new file mode 100644
index 0000000..abec894
--- /dev/null
+++ b/src/components/PhaseDraftManager.tsx
@@ -0,0 +1,276 @@
+import { useState, useEffect } from 'react'
+import { phaseDraftManagement, type ExperimentPhaseDraft, type ExperimentPhase, type User, type ExperimentRepetition } from '../lib/supabase'
+
+interface PhaseDraftManagerProps {
+ repetition: ExperimentRepetition
+ phase: ExperimentPhase
+ currentUser: User
+ onSelectDraft: (draft: ExperimentPhaseDraft) => void
+ onClose: () => void
+}
+
+export function PhaseDraftManager({ repetition, phase, currentUser, onSelectDraft, onClose }: PhaseDraftManagerProps) {
+ const [drafts, setDrafts] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [creating, setCreating] = useState(false)
+ const [newDraftName, setNewDraftName] = useState('')
+
+ useEffect(() => {
+ loadDrafts()
+ }, [repetition.id, phase])
+
+ const loadDrafts = async () => {
+ try {
+ setLoading(true)
+ setError(null)
+ const userDrafts = await phaseDraftManagement.getUserPhaseDraftsForPhase(repetition.id, phase)
+ setDrafts(userDrafts)
+ } catch (err: any) {
+ setError(err.message || 'Failed to load drafts')
+ console.error('Load drafts error:', err)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleCreateDraft = async () => {
+ try {
+ setCreating(true)
+ setError(null)
+
+ const newDraft = await phaseDraftManagement.createPhaseDraft({
+ experiment_id: repetition.experiment_id,
+ repetition_id: repetition.id,
+ phase_name: phase,
+ draft_name: newDraftName || undefined,
+ status: 'draft'
+ })
+
+ setDrafts(prev => [newDraft, ...prev])
+ setNewDraftName('')
+ onSelectDraft(newDraft)
+ } catch (err: any) {
+ setError(err.message || 'Failed to create draft')
+ } finally {
+ setCreating(false)
+ }
+ }
+
+ const handleDeleteDraft = async (draftId: string) => {
+ if (!confirm('Are you sure you want to delete this draft? This action cannot be undone.')) {
+ return
+ }
+
+ try {
+ await phaseDraftManagement.deletePhaseDraft(draftId)
+ setDrafts(prev => prev.filter(draft => draft.id !== draftId))
+ } catch (err: any) {
+ setError(err.message || 'Failed to delete draft')
+ }
+ }
+
+ const handleSubmitDraft = async (draftId: string) => {
+ if (!confirm('Are you sure you want to submit this draft? Once submitted, it can only be withdrawn by you or locked by an admin.')) {
+ return
+ }
+
+ try {
+ const submittedDraft = await phaseDraftManagement.submitPhaseDraft(draftId)
+ setDrafts(prev => prev.map(draft =>
+ draft.id === draftId ? submittedDraft : draft
+ ))
+ } catch (err: any) {
+ setError(err.message || 'Failed to submit draft')
+ }
+ }
+
+ const handleWithdrawDraft = async (draftId: string) => {
+ if (!confirm('Are you sure you want to withdraw this submitted draft? It will be marked as withdrawn.')) {
+ return
+ }
+
+ try {
+ const withdrawnDraft = await phaseDraftManagement.withdrawPhaseDraft(draftId)
+ setDrafts(prev => prev.map(draft =>
+ draft.id === draftId ? withdrawnDraft : draft
+ ))
+ } catch (err: any) {
+ setError(err.message || 'Failed to withdraw draft')
+ }
+ }
+
+ const getStatusBadge = (status: string) => {
+ switch (status) {
+ case 'draft':
+ return Draft
+ case 'submitted':
+ return Submitted
+ case 'withdrawn':
+ return Withdrawn
+ default:
+ return {status}
+ }
+ }
+
+ const canDeleteDraft = (draft: ExperimentPhaseDraft) => {
+ return draft.status === 'draft' && (!repetition.is_locked || currentUser.roles.includes('admin'))
+ }
+
+ const canSubmitDraft = (draft: ExperimentPhaseDraft) => {
+ return draft.status === 'draft' && (!repetition.is_locked || currentUser.roles.includes('admin'))
+ }
+
+ const canWithdrawDraft = (draft: ExperimentPhaseDraft) => {
+ return draft.status === 'submitted' && (!repetition.is_locked || currentUser.roles.includes('admin'))
+ }
+
+ const canCreateDraft = () => {
+ return !repetition.is_locked || currentUser.roles.includes('admin')
+ }
+
+ const formatPhaseTitle = (phase: string) => {
+ return phase.split('-').map(word =>
+ word.charAt(0).toUpperCase() + word.slice(1)
+ ).join(' ')
+ }
+
+ return (
+
+
+
+
+
+ {formatPhaseTitle(phase)} Phase Drafts
+
+
+ Repetition {repetition.repetition_number}
+ {repetition.is_locked && (
+
+ 🔒 Locked
+
+ )}
+
+
+
+
+
+
+ {error && (
+
+ )}
+
+ {/* Create New Draft */}
+
+ Create New Draft
+
+ setNewDraftName(e.target.value)}
+ className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ disabled={creating || repetition.is_locked}
+ />
+
+
+ {repetition.is_locked && !currentUser.roles.includes('admin') && (
+
+ Cannot create new drafts: repetition is locked by admin
+
+ )}
+
+
+ {/* Drafts List */}
+
+ {loading ? (
+
+ ) : drafts.length === 0 ? (
+
+ No drafts found for this phase
+ Create a new draft to get started
+
+ ) : (
+ drafts.map((draft) => (
+
+
+
+
+
+ {draft.draft_name || `Draft ${draft.id.slice(-8)}`}
+
+ {getStatusBadge(draft.status)}
+
+
+ Created: {new Date(draft.created_at).toLocaleString()}
+ Updated: {new Date(draft.updated_at).toLocaleString()}
+ {draft.submitted_at && (
+ Submitted: {new Date(draft.submitted_at).toLocaleString()}
+ )}
+ {draft.withdrawn_at && (
+ Withdrawn: {new Date(draft.withdrawn_at).toLocaleString()}
+ )}
+
+
+
+
+
+ {canSubmitDraft(draft) && (
+
+ )}
+
+ {canWithdrawDraft(draft) && (
+
+ )}
+
+ {canDeleteDraft(draft) && (
+
+ )}
+
+
+
+ ))
+ )}
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+
+ Experiment #{experiment.experiment_number} - Repetition #{repetition.repetition_number}
+
+
+ Soaking: {experiment.soaking_duration_hr}h • Air Drying: {experiment.air_drying_time_min}min
+ Frequency: {experiment.plate_contact_frequency_hz}Hz • Throughput: {experiment.throughput_rate_pecans_sec}/sec
+ {repetition.scheduled_date && (
+ Scheduled: {new Date(repetition.scheduled_date).toLocaleString()}
+ )}
+
+
+
+
+ {/* No additional controls needed - phase-specific draft management is handled within each phase */}
+
+
+
+ {/* Admin Controls */}
+
+
+ {/* Main Content */}
+ {selectedPhase ? (
+ {
+ // Data is automatically saved in the new phase-specific system
+ }}
+ />
+ ) : (
+
+ )}
+
+ Admin Controls
+
+ {error && (
+
+ )}
+
+
+
+
+ Repetition Status:
+ {repetition.is_locked ? (
+
+ 🔒 Locked
+
+ ) : (
+
+ 🔓 Unlocked
+
+ )}
+
+
+ {repetition.is_locked && repetition.locked_at && (
+
+ Locked: {new Date(repetition.locked_at).toLocaleString()}
+
+ )}
+
+
+
+ {repetition.is_locked ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {repetition.is_locked ? (
+
+ When locked, users cannot create new drafts, delete existing drafts, or withdraw submitted drafts.
+ Only admins can modify the lock status.
+
+ ) : (
+
+ When unlocked, users can freely create, edit, delete, submit, and withdraw drafts.
+ Lock this repetition to prevent further changes to submitted data.
+
+ )}
+
+
+
+ Select Phase
+
+ Choose a phase to enter or view data. Each phase can have multiple drafts.
+
+ {repetition.is_locked && (
+
+
+ 🔒 This repetition is locked by an admin
+
+
+ You can view existing data but cannot create new drafts or modify existing ones.
+
+
+ )}
+
+
+
+ {phases.map((phase) => {
+ const status = getPhaseStatus(phase.name)
+ const draftCount = getDraftCount(phase.name)
+
+ return (
+ onPhaseSelect(phase.name)}
+ className="bg-white rounded-lg shadow-md border border-gray-200 p-6 cursor-pointer hover:shadow-lg hover:border-blue-300 transition-all duration-200"
+ >
+
+
+
+ {phase.icon}
+
+
+ {phase.title}
+ {phase.description}
+
+
+ {getStatusBadge(status)}
+
+
+
+
+ {draftCount === 0 ? 'No drafts' : `${draftCount} draft${draftCount === 1 ? '' : 's'}`}
+
+
+
+
+ {draftCount > 0 && (
+
+
+ {phaseDrafts[phase.name].slice(0, 3).map((draft, index) => (
+
+ {draft.draft_name || `Draft ${index + 1}`}
+
+ ))}
+ {draftCount > 3 && (
+
+ +{draftCount - 3} more
+
+ )}
+
+
+ )}
+
+ )
+ })}
+
+
+
+ {/* Header */}
+
+
+ Schedule Repetition
+
+
+
+
+
+ {/* Experiment and Repetition Info */}
+
+
+ Experiment #{experiment.experiment_number} - Repetition #{repetition.repetition_number}
+
+
+ {experiment.reps_required} reps required • {experiment.soaking_duration_hr}h soaking
+
+
+
+ {/* Error Message */}
+ {error && (
+
+ )}
+
+ {/* Current Schedule (if exists) */}
+ {isScheduled && (
+
+ Currently Scheduled
+
+ {new Date(repetition.scheduled_date!).toLocaleString()}
+
+
+ )}
+
+ {/* Schedule Form */}
+
+
+
+
{!isCollapsed && (
- RBAC System
+ Pecan Experiments
Admin Dashboard
)}
diff --git a/src/components/TopNavbar.tsx b/src/components/TopNavbar.tsx
index 1fe5e4b..fb68153 100644
--- a/src/components/TopNavbar.tsx
+++ b/src/components/TopNavbar.tsx
@@ -22,6 +22,8 @@ export function TopNavbar({ user, onLogout, currentView = 'dashboard' }: TopNavb
return 'Analytics'
case 'data-entry':
return 'Data Entry'
+ case 'vision-system':
+ return 'Vision System'
default:
return 'Dashboard'
}
diff --git a/src/components/VisionSystem.tsx b/src/components/VisionSystem.tsx
new file mode 100644
index 0000000..78aefb0
--- /dev/null
+++ b/src/components/VisionSystem.tsx
@@ -0,0 +1,735 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import {
+ visionApi,
+ type SystemStatus,
+ type CameraStatus,
+ type MachineStatus,
+ type StorageStats,
+ type RecordingInfo,
+ type MqttStatus,
+ type MqttEventsResponse,
+ type MqttEvent,
+ formatBytes,
+ formatDuration,
+ formatUptime
+} from '../lib/visionApi'
+
+export function VisionSystem() {
+ const [systemStatus, setSystemStatus] = useState (null)
+ const [storageStats, setStorageStats] = useState(null)
+ const [recordings, setRecordings] = useState>({})
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [refreshing, setRefreshing] = useState(false)
+ const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(true)
+ const [refreshInterval, setRefreshInterval] = useState(5000) // 5 seconds default
+ const [lastUpdateTime, setLastUpdateTime] = useState(null)
+ const [mqttStatus, setMqttStatus] = useState(null)
+ const [mqttEvents, setMqttEvents] = useState([])
+
+ const intervalRef = useRef(null)
+
+ const clearAutoRefresh = useCallback(() => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current)
+ intervalRef.current = null
+ }
+ }, [])
+
+ const startAutoRefresh = useCallback(() => {
+ clearAutoRefresh()
+ if (autoRefreshEnabled && refreshInterval > 0) {
+ intervalRef.current = setInterval(fetchData, refreshInterval)
+ }
+ }, [autoRefreshEnabled, refreshInterval])
+
+ useEffect(() => {
+ fetchData()
+ startAutoRefresh()
+ return clearAutoRefresh
+ }, [startAutoRefresh])
+
+ useEffect(() => {
+ startAutoRefresh()
+ }, [autoRefreshEnabled, refreshInterval, startAutoRefresh])
+
+ const fetchData = useCallback(async (showRefreshIndicator = true) => {
+ try {
+ setError(null)
+ if (!systemStatus) {
+ setLoading(true)
+ } else if (showRefreshIndicator) {
+ setRefreshing(true)
+ }
+
+ const [statusData, storageData, recordingsData, mqttStatusData, mqttEventsData] = await Promise.all([
+ visionApi.getSystemStatus(),
+ visionApi.getStorageStats(),
+ visionApi.getRecordings(),
+ visionApi.getMqttStatus().catch(err => {
+ console.warn('Failed to fetch MQTT status:', err)
+ return null
+ }),
+ visionApi.getMqttEvents(10).catch(err => {
+ console.warn('Failed to fetch MQTT events:', err)
+ return { events: [], total_events: 0, last_updated: '' }
+ })
+ ])
+
+ // If cameras don't have device_info, try to fetch individual camera status
+ if (statusData.cameras) {
+ const camerasNeedingInfo = Object.entries(statusData.cameras)
+ .filter(([_, camera]) => !camera.device_info?.friendly_name)
+ .map(([cameraName, _]) => cameraName)
+
+ if (camerasNeedingInfo.length > 0) {
+ console.log('Fetching individual camera info for:', camerasNeedingInfo)
+ try {
+ const individualCameraData = await Promise.all(
+ camerasNeedingInfo.map(cameraName =>
+ visionApi.getCameraStatus(cameraName).catch(err => {
+ console.warn(`Failed to get individual status for ${cameraName}:`, err)
+ return null
+ })
+ )
+ )
+
+ // Merge the individual camera data back into statusData
+ camerasNeedingInfo.forEach((cameraName, index) => {
+ const individualData = individualCameraData[index]
+ if (individualData && individualData.device_info) {
+ statusData.cameras[cameraName] = {
+ ...statusData.cameras[cameraName],
+ device_info: individualData.device_info
+ }
+ }
+ })
+ } catch (err) {
+ console.warn('Failed to fetch individual camera data:', err)
+ }
+ }
+ }
+
+ // Only update state if data has actually changed to prevent unnecessary re-renders
+ setSystemStatus(prevStatus => {
+ if (JSON.stringify(prevStatus) !== JSON.stringify(statusData)) {
+ return statusData
+ }
+ return prevStatus
+ })
+
+ setStorageStats(prevStats => {
+ if (JSON.stringify(prevStats) !== JSON.stringify(storageData)) {
+ return storageData
+ }
+ return prevStats
+ })
+
+ setRecordings(prevRecordings => {
+ if (JSON.stringify(prevRecordings) !== JSON.stringify(recordingsData)) {
+ return recordingsData
+ }
+ return prevRecordings
+ })
+
+ setLastUpdateTime(new Date())
+
+ // Update MQTT status and events
+ if (mqttStatusData) {
+ setMqttStatus(mqttStatusData)
+ }
+
+ if (mqttEventsData && mqttEventsData.events) {
+ setMqttEvents(mqttEventsData.events)
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to fetch vision system data')
+ console.error('Vision system fetch error:', err)
+ // Don't disable auto-refresh on errors, just log them
+ } finally {
+ setLoading(false)
+ setRefreshing(false)
+ }
+ }, [systemStatus])
+
+ const getStatusColor = (status: string, isRecording: boolean = false) => {
+ // If camera is recording, always show red regardless of status
+ if (isRecording) {
+ return 'text-red-600 bg-red-100'
+ }
+
+ switch (status.toLowerCase()) {
+ case 'available':
+ case 'connected':
+ case 'healthy':
+ case 'on':
+ return 'text-green-600 bg-green-100'
+ case 'disconnected':
+ case 'off':
+ case 'failed':
+ return 'text-red-600 bg-red-100'
+ case 'error':
+ case 'warning':
+ case 'degraded':
+ return 'text-yellow-600 bg-yellow-100'
+ default:
+ return 'text-yellow-600 bg-yellow-100'
+ }
+ }
+
+ const getMachineStateColor = (state: string) => {
+ switch (state.toLowerCase()) {
+ case 'on':
+ case 'running':
+ return 'text-green-600 bg-green-100'
+ case 'off':
+ case 'stopped':
+ return 'text-gray-600 bg-gray-100'
+ default:
+ return 'text-yellow-600 bg-yellow-100'
+ }
+ }
+
+ if (loading) {
+ return (
+
+
+
+
+ Loading vision system data...
+
+
+
+
+
+
+
+ Error loading vision system
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+ Vision System
+ Monitor cameras, machines, and recording status
+ {lastUpdateTime && (
+
+ Last updated: {lastUpdateTime.toLocaleTimeString()}
+ {autoRefreshEnabled && !refreshing && (
+
+ Auto-refresh: {refreshInterval / 1000}s
+
+ )}
+
+ )}
+
+
+ {/* Auto-refresh controls */}
+
+
+ {autoRefreshEnabled && (
+
+ )}
+
+
+ {/* Refresh indicator and button */}
+
+ {refreshing && (
+
+ )}
+
+
+
+
+
+ {/* System Overview */}
+ {systemStatus && (
+
+
+
+
+
+
+ {systemStatus.system_started ? 'Online' : 'Offline'}
+
+
+
+
+ System Status
+
+ Uptime: {formatUptime(systemStatus.uptime_seconds)}
+
+
+
+
+
+
+
+
+
+
+
+ {systemStatus.mqtt_connected ? 'Connected' : 'Disconnected'}
+
+
+ {systemStatus.mqtt_connected && (
+
+ )}
+
+ {mqttStatus && (
+
+ {mqttStatus.message_count} messages
+ {mqttStatus.error_count} errors
+
+ )}
+
+
+ MQTT
+
+ {mqttStatus ? (
+
+ Broker: {mqttStatus.broker_host}:{mqttStatus.broker_port}
+ Last message: {new Date(mqttStatus.last_message_time).toLocaleTimeString()}
+
+ ) : (
+ Last message: {new Date(systemStatus.last_mqtt_message).toLocaleTimeString()}
+ )}
+
+
+
+ {/* MQTT Events History */}
+ {mqttEvents.length > 0 && (
+
+
+ Recent Events
+ {mqttEvents.length} events
+
+
+ {mqttEvents.map((event, index) => (
+
+
+
+ {new Date(event.timestamp).toLocaleTimeString().slice(-8, -3)}
+
+
+ {event.machine_name.replace('_', ' ')}
+
+
+ {event.payload}
+
+
+ #{event.message_number}
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {systemStatus.active_recordings}
+
+
+
+
+ Active Recordings
+
+ Total: {systemStatus.total_recordings}
+
+
+
+
+
+
+
+
+
+
+ {Object.keys(systemStatus.cameras).length}
+
+
+
+
+ Cameras
+
+ Machines: {Object.keys(systemStatus.machines).length}
+
+
+
+
+
+ )}
+
+
+
+ {/* Cameras Status */}
+ {systemStatus && (
+
+
+ Cameras
+
+ Current status of all cameras in the system
+
+
+
+
+ {Object.entries(systemStatus.cameras).map(([cameraName, camera]) => {
+ // Debug logging to see what data we're getting
+ console.log(`Camera ${cameraName} data:`, JSON.stringify(camera, null, 2))
+
+ const friendlyName = camera.device_info?.friendly_name
+ const hasDeviceInfo = !!camera.device_info
+ const hasSerial = !!camera.device_info?.serial_number
+
+ return (
+
+
+
+
+ {friendlyName ? (
+
+ {friendlyName}
+ ({cameraName})
+
+ {cameraName}
+
+ {hasDeviceInfo ? 'Device info available but no friendly name' : 'No device info available'}
+
+
+
+
+ {camera.is_recording ? 'Recording' : camera.status}
+
+
+
+
+
+ Recording:
+
+ {camera.is_recording ? 'Yes' : 'No'}
+
+
+
+ {camera.device_info?.serial_number && (
+
+ Serial:
+ {camera.device_info.serial_number}
+
+ )}
+
+ {/* Debug info - remove this after fixing */}
+
+ Debug Info:
+
+ Has device_info: {hasDeviceInfo ? 'Yes' : 'No'}
+ Has friendly_name: {friendlyName ? 'Yes' : 'No'}
+ Has serial: {hasSerial ? 'Yes' : 'No'}
+ Last error: {camera.last_error || 'None'}
+ {camera.device_info && (
+
+ Raw device_info: {JSON.stringify(camera.device_info)}
+
+ )}
+
+
+
+
+ Last checked:
+ {new Date(camera.last_checked).toLocaleTimeString()}
+
+
+ {camera.current_recording_file && (
+
+ Recording file:
+ {camera.current_recording_file}
+
+ )}
+
+
+ )
+ })}
+
+
+
+ )}
+
+ {/* Machines Status */}
+ {systemStatus && Object.keys(systemStatus.machines).length > 0 && (
+
+
+ Machines
+
+ Current status of all machines in the system
+
+
+
+
+ {Object.entries(systemStatus.machines).map(([machineName, machine]) => (
+
+
+
+ {machineName.replace(/_/g, ' ')}
+
+
+ {machine.state}
+
+
+
+
+
+ Last updated:
+ {new Date(machine.last_updated).toLocaleTimeString()}
+
+
+ {machine.last_message && (
+
+ Last message:
+ {machine.last_message}
+
+ )}
+
+ {machine.mqtt_topic && (
+
+ MQTT topic:
+ {machine.mqtt_topic}
+
+ )}
+
+
+ ))}
+
+
+
+ )}
+
+ {/* Storage Statistics */}
+ {storageStats && (
+
+
+ Storage
+
+ Storage usage and file statistics
+
+
+
+
+
+ {storageStats.total_files}
+ Total Files
+
+
+ {formatBytes(storageStats.total_size_bytes)}
+ Total Size
+
+
+ {formatBytes(storageStats.disk_usage.free)}
+ Free Space
+
+
+
+ {/* Disk Usage Bar */}
+
+
+ Disk Usage
+ {Math.round((storageStats.disk_usage.used / storageStats.disk_usage.total) * 100)}% used
+
+
+
+ {formatBytes(storageStats.disk_usage.used)} used
+ {formatBytes(storageStats.disk_usage.total)} total
+
+
+
+ {/* Per-Camera Statistics */}
+ {Object.keys(storageStats.cameras).length > 0 && (
+
+ Files by Camera
+
+ {Object.entries(storageStats.cameras).map(([cameraName, stats]) => {
+ // Find the corresponding camera to get friendly name
+ const camera = systemStatus?.cameras[cameraName]
+ const displayName = camera?.device_info?.friendly_name || cameraName
+
+ return (
+
+
+ {camera?.device_info?.friendly_name ? (
+ <>
+ {displayName}
+ ({cameraName})
+
+ ) : (
+ cameraName
+ )}
+
+
+
+ Files:
+ {stats.file_count}
+
+
+ Size:
+ {formatBytes(stats.total_size_bytes)}
+
+
+
+ )
+ })}
+
+
+ )}
+
+
+ )}
+
+ {/* Recent Recordings */}
+ {Object.keys(recordings).length > 0 && (
+
+
+ Recent Recordings
+
+ Latest recording sessions
+
+
+
+
+
+
+
+ |
+ Camera
+ |
+
+ Filename
+ |
+
+ Status
+ |
+
+ Duration
+ |
+
+ Size
+ |
+
+ Started
+ |
+
+
+
+ {Object.entries(recordings).slice(0, 10).map(([recordingId, recording]) => {
+ // Find the corresponding camera to get friendly name
+ const camera = systemStatus?.cameras[recording.camera_name]
+ const displayName = camera?.device_info?.friendly_name || recording.camera_name
+
+ return (
+
+
+ {camera?.device_info?.friendly_name ? (
+
+ {displayName}
+ ({recording.camera_name})
+ |
+
+ {recording.filename}
+ |
+
+
+ {recording.state}
+
+ |
+
+ {recording.duration_seconds ? formatDuration(recording.duration_seconds) : '-'}
+ |
+
+ {recording.file_size_bytes ? formatBytes(recording.file_size_bytes) : '-'}
+ |
+
+ {new Date(recording.start_time).toLocaleString()}
+ |
+
+ )
+ })}
+
+
+
+
+
+ )}
+ |