Commit changes before merging to main

camera-management-api/usda_vision_system/camera/recorder.py

@@ -459,6 +459,13 @@ class CameraRecorder:
         with self._lock:
             if self.recording:
                 self.logger.warning("Already recording!")
+                # #region agent log
+                import json
+                try:
+                    with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                        f.write(json.dumps({"location": "recorder.py:460", "message": "start_recording: already recording check", "data": {"camera": self.camera_config.name, "recording_flag": self.recording, "thread_alive": self._recording_thread.is_alive() if self._recording_thread else False}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "G"}) + "\n")
+                except: pass
+                # #endregion
                 return False
 
             # Check if streamer is active - if so, we can share frames without opening a new camera connection
@@ -503,6 +510,13 @@ class CameraRecorder:
 
                 # Update state
                 self.recording = True
+                # #region agent log
+                import json
+                try:
+                    with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                        f.write(json.dumps({"location": "recorder.py:505", "message": "start_recording: setting recording=True", "data": {"camera": self.camera_config.name, "filename": filename}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "A"}) + "\n")
+                except: pass
+                # #endregion
                 recording_id = self.state_manager.start_recording(self.camera_config.name, output_path)
 
                 # Publish event
@@ -567,6 +581,13 @@ class CameraRecorder:
             with self._lock:
                 # Update state
                 self.recording = False
+                # #region agent log
+                import json
+                try:
+                    with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                        f.write(json.dumps({"location": "recorder.py:569", "message": "stop_recording: setting recording=False", "data": {"camera": self.camera_config.name}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "F"}) + "\n")
+                except: pass
+                # #endregion
 
                 # Calculate duration and file size
                 duration = 0
@@ -620,9 +641,23 @@ class CameraRecorder:
                 while initial_frame is None and time.time() - timeout_start < 5.0:
                     if self._stop_recording_event.is_set():
                         self.logger.error("Stop event set before getting initial frame")
+                        # #region agent log
+                        import json
+                        try:
+                            with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                                f.write(json.dumps({"location": "recorder.py:623", "message": "Early return: stop event set", "data": {"camera": self.camera_config.name, "recording_flag": self.recording}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "A"}) + "\n")
+                        except: pass
+                        # #endregion
                         return
                     if not self.streamer.streaming:
                         self.logger.error("Streamer stopped before getting initial frame")
+                        # #region agent log
+                        import json
+                        try:
+                            with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                                f.write(json.dumps({"location": "recorder.py:625", "message": "Early return: streamer stopped", "data": {"camera": self.camera_config.name, "recording_flag": self.recording}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "B"}) + "\n")
+                        except: pass
+                        # #endregion
                         return
                     try:
                         initial_frame = self.streamer._recording_frame_queue.get(timeout=0.5)
@@ -632,11 +667,25 @@ class CameraRecorder:
                 
                 if initial_frame is None:
                     self.logger.error("Failed to get initial frame from streamer for video writer initialization")
+                    # #region agent log
+                    import json
+                    try:
+                        with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                            f.write(json.dumps({"location": "recorder.py:634", "message": "Early return: failed to get initial frame", "data": {"camera": self.camera_config.name, "recording_flag": self.recording}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "C"}) + "\n")
+                    except: pass
+                    # #endregion
                     return
             
             # Initialize video writer (with initial frame dimensions if using streamer frames)
             if not self._initialize_video_writer(use_streamer_frames=use_streamer_frames, initial_frame=initial_frame):
                 self.logger.error("Failed to initialize video writer")
+                # #region agent log
+                import json
+                try:
+                    with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                        f.write(json.dumps({"location": "recorder.py:640", "message": "Early return: failed to initialize video writer", "data": {"camera": self.camera_config.name, "recording_flag": self.recording}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "D"}) + "\n")
+                except: pass
+                # #endregion
                 return
 
             self.logger.info(f"Recording loop started (using {'streamer frames' if use_streamer_frames else 'direct capture'})")
@@ -734,8 +783,26 @@ class CameraRecorder:
         finally:
             self.logger.info("Cleaning up recording resources...")
             self._cleanup_recording()
-            # Note: Don't set self.recording = False here - let stop_recording() handle it
+            # #region agent log
-            # to avoid race conditions where stop_recording thinks recording already stopped
+            import json
+            try:
+                with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                    f.write(json.dumps({"location": "recorder.py:734", "message": "Finally block: before setting recording flag", "data": {"camera": self.camera_config.name, "recording_flag_before": self.recording, "stop_event_set": self._stop_recording_event.is_set()}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "post-fix", "hypothesisId": "E"}) + "\n")
+            except: pass
+            # #endregion
+            # Reset recording flag if thread exits early (due to error) or if stop_recording wasn't called
+            # This prevents the flag from staying True when the thread exits early
+            # Using lock to ensure thread safety - if stop_recording() already set it to False, this is harmless
+            with self._lock:
+                if self.recording:
+                    self.logger.warning("Recording thread exited but flag was still True - resetting to False")
+                    self.recording = False
+            # #region agent log
+            try:
+                with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                    f.write(json.dumps({"location": "recorder.py:745", "message": "Finally block: after setting recording flag", "data": {"camera": self.camera_config.name, "recording_flag_after": self.recording}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "post-fix", "hypothesisId": "E"}) + "\n")
+            except: pass
+            # #endregion
 
     def _initialize_video_writer(self, use_streamer_frames: bool = False, initial_frame: Optional[np.ndarray] = None) -> bool:
         """Initialize OpenCV video writer
@@ -768,15 +835,27 @@ class CameraRecorder:
                             self.logger.info(f"Got frame dimensions from streamer's camera: {frame_size}")
                     except Exception as e:
                         self.logger.error(f"Failed to get frame dimensions from streamer camera: {e}")
-                        # Use camera config defaults as last resort
+                        # #region agent log
-                        camera_config = self.camera_config
+                        import json
-                        frame_size = (camera_config.resolution_width or 1280, camera_config.resolution_height or 1024)
+                        try:
-                        self.logger.warning(f"Using default frame size from config: {frame_size}")
+                            with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                                f.write(json.dumps({"location": "recorder.py:837", "message": "Fallback path triggered: failed to get dimensions from streamer camera", "data": {"camera": self.camera_config.name, "error": str(e)}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "A"}) + "\n")
+                        except: pass
+                        # #endregion
+                        # Use hardcoded defaults as last resort (CameraConfig doesn't have resolution_width/height fields)
+                        frame_size = (1280, 1024)
+                        self.logger.warning(f"Using hardcoded default frame size: {frame_size}")
                 else:
-                    # Use camera config defaults as last resort
+                    # #region agent log
-                    camera_config = self.camera_config
+                    import json
-                    frame_size = (camera_config.resolution_width or 1280, camera_config.resolution_height or 1024)
+                    try:
-                    self.logger.warning(f"Using default frame size from config: {frame_size}")
+                        with open('/home/alireza/Desktop/USDA-VISION/.cursor/debug.log', 'a') as f:
+                            f.write(json.dumps({"location": "recorder.py:842", "message": "Fallback path triggered: no camera handle available", "data": {"camera": self.camera_config.name, "use_streamer_frames": use_streamer_frames, "has_streamer": self.streamer is not None, "has_streamer_camera": self.streamer.hCamera is not None if self.streamer else False}, "timestamp": time.time(), "sessionId": "debug-session", "runId": "run1", "hypothesisId": "B"}) + "\n")
+                    except: pass
+                    # #endregion
+                    # Use hardcoded defaults as last resort (CameraConfig doesn't have resolution_width/height fields)
+                    frame_size = (1280, 1024)
+                    self.logger.warning(f"Using hardcoded default frame size: {frame_size}")
 
             # Set up video writer with configured codec
             fourcc = cv2.VideoWriter_fourcc(*self.camera_config.video_codec)

docs/UGA_SSO_Integration_Guide.md

@@ -0,0 +1,199 @@
+# UGA SSO Integration Guide
+
+## Overview
+
+The University of Georgia (UGA) uses **Central Authentication Service (CAS)** for Single Sign-On (SSO) authentication. This allows users to log in to multiple applications using their MyID and password, with optional two-factor authentication via ArchPass (powered by Duo).
+
+## Current Authentication System
+
+The dashboard currently uses **Supabase** for authentication with email/password login. The authentication is implemented in:
+- `management-dashboard-web-app/src/components/Login.tsx` - Login form component
+- `management-dashboard-web-app/src/lib/supabase.ts` - Supabase client and user management
+- `management-dashboard-web-app/src/App.tsx` - Authentication state management
+
+## UGA SSO Integration Process
+
+### Step 1: Submit SSO Integration Request
+
+**Action Required:** Submit the official UGA SSO Integration Request form to UGA's Enterprise Information Technology Services (EITS).
+
+**Resources:**
+- **SSO Integration Request Form:** https://eits.uga.edu/access_and_security/uga_sso/moving_to_uga_sso/sso_integration_request/
+- **UGA SSO Information Page:** https://eits.uga.edu/access_and_security/uga_sso/
+- **What is CAS?** https://eits.uga.edu/access_and_security/new_cas/what_is_cas/
+
+The integration request form collects essential information about your application and initiates the security review process.
+
+### Step 2: Security Review
+
+After submitting the request, UGA's **Office of Information Security** will contact you to:
+- Arrange security testing of your application
+- Ensure your application meets UGA's security standards
+- Provide guidance on security requirements
+
+**Note:** This is a mandatory step before your application can be integrated with UGA SSO.
+
+### Step 3: Technical Support
+
+For technical assistance during the integration process:
+- **Request UGA SSO Support:** Submit a request through EITS
+- **Community CAS Support:** Available on the UGA SSO page
+- **Developer Tools:** Additional resources available on the UGA SSO page
+
+## Technical Considerations
+
+### CAS Authentication Flow
+
+CAS (Central Authentication Service) typically follows this flow:
+1. User attempts to access the application
+2. Application redirects to CAS login page
+3. User authenticates with MyID and password
+4. CAS validates credentials (may require ArchPass/2FA)
+5. CAS redirects back to application with a service ticket
+6. Application validates ticket with CAS server
+7. Application creates session for authenticated user
+
+### Implementation Options
+
+#### Option 1: Backend Proxy Approach (Recommended)
+- Implement CAS authentication on the backend (API server)
+- Frontend redirects to backend CAS endpoint
+- Backend handles CAS ticket validation
+- Backend creates Supabase session or JWT token
+- Frontend receives authentication token
+
+**Pros:**
+- Keeps CAS credentials secure on backend
+- Can integrate with existing Supabase auth
+- Better security model
+
+#### Option 2: Frontend CAS Client Library
+- Use a JavaScript CAS client library in the React app
+- Handle CAS redirect flow in the browser
+- Exchange ticket for user information
+
+**Pros:**
+- Simpler initial implementation
+- Direct integration in frontend
+
+**Cons:**
+- Requires exposing CAS service URL
+- May need backend validation anyway
+
+### CAS Client Libraries
+
+For JavaScript/TypeScript implementations, consider:
+- **cas-client** (npm) - CAS client for Node.js
+- **passport-cas** - Passport.js strategy for CAS
+- Custom implementation using CAS REST API
+
+### Integration with Supabase
+
+You have several options for integrating CAS with your existing Supabase setup:
+
+1. **CAS → Supabase User Mapping:**
+   - After CAS authentication, create/update Supabase user
+   - Map CAS user attributes (email, MyID) to Supabase user
+   - Use Supabase session for application access
+
+2. **Hybrid Authentication:**
+   - Support both CAS (UGA users) and email/password (external users)
+   - Allow users to choose authentication method
+
+3. **CAS-Only Authentication:**
+   - Replace Supabase auth entirely with CAS
+   - Use CAS session management
+   - Store user data in Supabase but authenticate via CAS
+
+## Key Information Needed from UGA
+
+After submitting your integration request, you'll need to obtain:
+
+1. **CAS Server URL** - The UGA CAS server endpoint
+2. **Service URL** - Your application's callback URL
+3. **CAS Protocol Version** - Which CAS protocol version UGA uses (CAS 2.0, CAS 3.0, etc.)
+4. **User Attributes** - What user information is returned (email, MyID, name, etc.)
+5. **Certificate/Validation Method** - How to validate CAS tickets
+6. **Two-Factor Authentication Requirements** - Whether ArchPass is required
+
+## Two-Factor Authentication
+
+UGA uses **ArchPass** (powered by Duo) for two-factor authentication. Depending on your application's security requirements:
+- Users may be required to complete 2FA during login
+- This is typically handled automatically by the CAS server
+- No additional implementation needed on your end
+
+## Identity Federation
+
+UGA supports **Identity Federation**, which allows:
+- Users from other organizations to access your application
+- Collaborative research projects across institutions
+- Single set of credentials for multiple applications
+
+If you need federated identity support, mention this in your integration request.
+
+## Next Steps
+
+1. **Immediate Actions:**
+   - [ ] Submit the UGA SSO Integration Request form
+   - [ ] Prepare application information (description, URL, security details)
+   - [ ] Review current authentication implementation
+
+2. **While Waiting for Approval:**
+   - [ ] Research CAS client libraries for your tech stack
+   - [ ] Design integration architecture (backend vs frontend)
+   - [ ] Plan user data mapping (CAS attributes → Supabase users)
+   - [ ] Consider hybrid authentication approach
+
+3. **After Approval:**
+   - [ ] Obtain CAS server details from UGA EITS
+   - [ ] Implement CAS authentication flow
+   - [ ] Test with UGA test accounts
+   - [ ] Complete security review process
+   - [ ] Deploy to production
+
+## Resources
+
+### UGA Official Resources
+- **UGA SSO Main Page:** https://eits.uga.edu/access_and_security/uga_sso/
+- **SSO Integration Request:** https://eits.uga.edu/access_and_security/uga_sso/moving_to_uga_sso/sso_integration_request/
+- **What is CAS?** https://eits.uga.edu/access_and_security/new_cas/what_is_cas/
+- **Request UGA SSO Support:** Available through EITS portal
+
+### CAS Documentation
+- **Apereo CAS Documentation:** https://apereo.github.io/cas/
+- **CAS Protocol Specification:** https://apereo.github.io/cas/development/protocol/CAS-Protocol-Specification.html
+
+### Technical References
+- **CAS REST API:** For programmatic CAS integration
+- **CAS Client Libraries:** Search npm for "cas-client" or "passport-cas"
+- **Supabase Auth Documentation:** For integrating external auth providers
+
+## Questions to Ask UGA EITS
+
+When you receive contact from UGA's Office of Information Security, consider asking:
+
+1. What is the CAS server URL for production?
+2. What CAS protocol version should we use?
+3. What user attributes are available in the CAS response?
+4. Is ArchPass (2FA) required for our application?
+5. What is the expected service URL format?
+6. Are there any specific security requirements we should be aware of?
+7. Is there a test/staging CAS environment for development?
+8. What is the expected timeline for the integration process?
+
+## Notes
+
+- The integration process requires official approval from UGA EITS
+- Security review is mandatory and may take some time
+- You may need to modify your application's security configuration
+- Consider maintaining backward compatibility with existing users during transition
+- Document the integration process for future maintenance
+
+---
+
+**Last Updated:** Based on research conducted in 2024
+**Contact:** UGA EITS for official documentation and support
+
+
+

management-dashboard-web-app/supabase/migrations/00013_add_repetition_id_to_cracker_parameters.sql

@@ -39,3 +39,8 @@ ADD CONSTRAINT unique_meyer_cracker_parameters_per_repetition
 
 
 
+
+
+
+
+

management-dashboard-web-app/supabase/migrations/00014_experiments_with_reps_and_phases_view.sql

@@ -23,7 +23,7 @@ SELECT
     ep.has_airdrying,
     ep.has_cracking,
     ep.has_shelling,
-    ep.cracking_machine_type_id,
+    ep.cracking_machine_type_id as phase_cracking_machine_type_id,
     
     -- Repetition fields
     er.id as repetition_id,

scheduling-remote/REFACTORING_SUMMARY.md

@@ -0,0 +1,95 @@
+# Scheduling Component Refactoring Summary
+
+## Overview
+
+The `Scheduling.tsx` file (originally 1832 lines) has been refactored into a modular structure with reusable components, hooks, and better organization.
+
+## New Structure
+
+```
+scheduling-remote/src/components/
+├── Scheduling.tsx                          # Backward compatibility re-export
+└── scheduling/
+    ├── types.ts                            # Shared types and interfaces
+    ├── Scheduling.tsx                      # Main router component (~100 lines)
+    ├── AvailabilityCalendar.tsx            # Availability calendar component
+    ├── ui/                                 # Reusable UI components
+    │   ├── BackButton.tsx                 # Back navigation button
+    │   ├── SchedulingCard.tsx             # Card component for main view
+    │   ├── TimeSlotModal.tsx              # Modal for adding time slots
+    │   └── DropdownCurtain.tsx             # Reusable dropdown/accordion
+    ├── views/                              # Main view components
+    │   ├── ViewSchedule.tsx                # View schedule component
+    │   ├── IndicateAvailability.tsx        # Indicate availability view
+    │   └── ScheduleExperimentImpl.tsx      # Temporary wrapper (TODO: further refactor)
+    └── hooks/                              # Custom hooks
+        └── useConductors.ts                # Conductor management hook
+```
+
+## What Was Extracted
+
+### 1. **Shared Types** (`types.ts`)
+- `CalendarEvent` interface
+- `SchedulingProps` interface
+- `SchedulingView` type
+- `ScheduledRepetition` interface
+- Re-exports of service types
+
+### 2. **Reusable UI Components** (`ui/`)
+- **BackButton**: Consistent back navigation
+- **SchedulingCard**: Reusable card component for the main scheduling view
+- **TimeSlotModal**: Modal for adding/editing time slots
+- **DropdownCurtain**: Reusable accordion/dropdown component
+
+### 3. **View Components** (`views/`)
+- **ViewSchedule**: Complete schedule view (simplified, placeholder)
+- **IndicateAvailability**: Wrapper for availability calendar
+- **ScheduleExperimentImpl**: Temporary wrapper (original implementation still in old file)
+
+### 4. **Custom Hooks** (`hooks/`)
+- **useConductors**: Manages conductor data, selection, colors, and availability
+
+### 5. **Main Components**
+- **Scheduling.tsx**: Main router component (reduced from ~220 lines to ~100 lines)
+- **AvailabilityCalendar.tsx**: Extracted availability calendar (moved from inline component)
+
+## Benefits
+
+1. **Maintainability**: Each component has a single, clear responsibility
+2. **Reusability**: UI components can be reused across different views
+3. **Testability**: Smaller units are easier to test in isolation
+4. **Readability**: Easier to understand and navigate the codebase
+5. **Organization**: Clear separation of concerns
+
+## File Size Reduction
+
+- **Original Scheduling.tsx**: 1832 lines
+- **New main Scheduling.tsx**: ~100 lines (95% reduction)
+- **Total new structure**: Better organized across multiple focused files
+
+## Backward Compatibility
+
+The original `Scheduling.tsx` file is maintained for backward compatibility and re-exports the new modular component. The `ScheduleExperiment` function is still exported from the original file location.
+
+## TODO / Future Improvements
+
+1. **Further refactor ScheduleExperiment**:
+   - Extract into smaller subcomponents (ConductorPanel, ExperimentPhasePanel, etc.)
+   - Create additional hooks (useExperimentPhases, useScheduling, useCalendarEvents)
+   - Move implementation from old file to new structure
+
+2. **Additional reusable components**:
+   - Experiment item component
+   - Repetition item component
+   - Calendar controls component
+
+3. **Testing**:
+   - Add unit tests for extracted components
+   - Add integration tests for hooks
+
+## Migration Notes
+
+- All imports from `./components/Scheduling` continue to work
+- The new structure is in `./components/scheduling/`
+- No breaking changes to the public API
+

scheduling-remote/src/components/CalendarStyles.css

@@ -4,6 +4,9 @@
     background: white;
     border-radius: 8px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 /* Dark mode support */
@@ -65,6 +68,8 @@
 .rbc-month-view {
     border: 1px solid #e2e8f0;
     border-radius: 8px;
+    flex: 1;
+    min-height: 0;
 }
 
 .dark .rbc-month-view {
@@ -73,6 +78,8 @@
 
 .rbc-month-row {
     border-bottom: 1px solid #e2e8f0;
+    flex: 1;
+    min-height: 100px;
 }
 
 .dark .rbc-month-row {
@@ -87,6 +94,10 @@
 .rbc-time-view {
     border: 1px solid #e2e8f0;
     border-radius: 8px;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
 }
 
 .dark .rbc-time-view {
@@ -105,6 +116,9 @@
 
 .rbc-time-content {
     background: white;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
 }
 
 .dark .rbc-time-content {

scheduling-remote/src/components/scheduling/AvailabilityCalendar.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react'
+import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
+import moment from 'moment'
+import type { User, CalendarEvent } from './types'
+import { availabilityManagement } from '../../services/supabase'
+import { BackButton } from './ui/BackButton'
+import { TimeSlotModal } from './ui/TimeSlotModal'
+import 'react-big-calendar/lib/css/react-big-calendar.css'
+import '../CalendarStyles.css'
+
+interface AvailabilityCalendarProps {
+    user: User
+    onBack?: () => void
+}
+
+export function AvailabilityCalendar({ user, onBack }: AvailabilityCalendarProps) {
+    const localizer = momentLocalizer(moment)
+    const [events, setEvents] = useState<CalendarEvent[]>([])
+
+    const [selectedDate, setSelectedDate] = useState<Date | null>(null)
+    const [showTimeSlotForm, setShowTimeSlotForm] = useState(false)
+    const [newTimeSlot, setNewTimeSlot] = useState({
+        startTime: '09:00',
+        endTime: '17:00'
+    })
+    const [currentView, setCurrentView] = useState(Views.MONTH)
+    const [currentDate, setCurrentDate] = useState(new Date())
+
+    // Load availability from DB on mount
+    useEffect(() => {
+        const loadAvailability = async () => {
+            try {
+                const records = await availabilityManagement.getMyAvailability()
+                const mapped: CalendarEvent[] = records.map(r => ({
+                    id: r.id,
+                    title: 'Available',
+                    start: new Date(r.available_from),
+                    end: new Date(r.available_to),
+                    resource: 'available'
+                }))
+                setEvents(mapped)
+            } catch (e) {
+                console.error('Failed to load availability', e)
+            }
+        }
+        loadAvailability()
+    }, [])
+
+    const eventStyleGetter = (event: CalendarEvent) => {
+        return {
+            style: {
+                backgroundColor: '#10b981', // green-500 for available
+                borderColor: '#10b981',
+                color: 'white',
+                borderRadius: '4px',
+                border: 'none',
+                display: 'block'
+            }
+        }
+    }
+
+    const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
+        // Set the selected date and show the time slot form
+        setSelectedDate(start)
+        setShowTimeSlotForm(true)
+
+        // Pre-fill the form with the selected time range
+        const startTime = moment(start).format('HH:mm')
+        const endTime = moment(end).format('HH:mm')
+        setNewTimeSlot({
+            startTime,
+            endTime
+        })
+    }
+
+    const handleSelectEvent = async (event: CalendarEvent) => {
+        if (!window.confirm('Do you want to remove this availability?')) {
+            return
+        }
+        try {
+            if (typeof event.id === 'string') {
+                await availabilityManagement.deleteAvailability(event.id)
+            }
+            setEvents(events.filter(e => e.id !== event.id))
+        } catch (e: any) {
+            alert(e?.message || 'Failed to delete availability.')
+            console.error('Failed to delete availability', e)
+        }
+    }
+
+    const handleAddTimeSlot = async () => {
+        if (!selectedDate) return
+
+        const [startHour, startMinute] = newTimeSlot.startTime.split(':').map(Number)
+        const [endHour, endMinute] = newTimeSlot.endTime.split(':').map(Number)
+
+        const startDateTime = new Date(selectedDate)
+        startDateTime.setHours(startHour, startMinute, 0, 0)
+
+        const endDateTime = new Date(selectedDate)
+        endDateTime.setHours(endHour, endMinute, 0, 0)
+
+        // Check for overlapping events
+        const hasOverlap = events.some(event => {
+            const eventStart = new Date(event.start)
+            const eventEnd = new Date(event.end)
+            return (
+                eventStart.toDateString() === selectedDate.toDateString() &&
+                ((startDateTime >= eventStart && startDateTime < eventEnd) ||
+                    (endDateTime > eventStart && endDateTime <= eventEnd) ||
+                    (startDateTime <= eventStart && endDateTime >= eventEnd))
+            )
+        })
+
+        if (hasOverlap) {
+            alert('This time slot overlaps with an existing availability. Please choose a different time.')
+            return
+        }
+
+        try {
+            // Persist to DB first to get real ID and server validation
+            const created = await availabilityManagement.createAvailability({
+                available_from: startDateTime.toISOString(),
+                available_to: endDateTime.toISOString()
+            })
+
+            const newEvent: CalendarEvent = {
+                id: created.id,
+                title: 'Available',
+                start: new Date(created.available_from),
+                end: new Date(created.available_to),
+                resource: 'available'
+            }
+
+            setEvents([...events, newEvent])
+            setShowTimeSlotForm(false)
+            setSelectedDate(null)
+        } catch (e: any) {
+            alert(e?.message || 'Failed to save availability. Please try again.')
+            console.error('Failed to create availability', e)
+        }
+    }
+
+    const handleCancelTimeSlot = () => {
+        setShowTimeSlotForm(false)
+        setSelectedDate(null)
+    }
+
+    const getEventsForDate = (date: Date) => {
+        return events.filter(event => {
+            const eventDate = new Date(event.start)
+            return eventDate.toDateString() === date.toDateString()
+        })
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Calendar Header */}
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                    <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+                        Availability Calendar
+                    </h2>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Click and drag to add availability slots, or click on existing events to remove them. You can add multiple time slots per day.
+                    </p>
+                </div>
+
+                {/* Legend */}
+                <div className="flex items-center space-x-4 mt-4 sm:mt-0">
+                    <div className="flex items-center">
+                        <div className="w-3 h-3 bg-green-500 rounded mr-2"></div>
+                        <span className="text-sm text-gray-600 dark:text-gray-400">Available</span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Time Slot Form Modal */}
+            {showTimeSlotForm && selectedDate && (
+                <TimeSlotModal
+                    selectedDate={selectedDate}
+                    newTimeSlot={newTimeSlot}
+                    existingEvents={events}
+                    onTimeSlotChange={setNewTimeSlot}
+                    onAdd={handleAddTimeSlot}
+                    onCancel={handleCancelTimeSlot}
+                />
+            )}
+
+            {/* Calendar */}
+            <div className="h-[600px] flex flex-col">
+                <Calendar
+                    localizer={localizer}
+                    events={events}
+                    startAccessor="start"
+                    endAccessor="end"
+                    style={{ height: '100%', minHeight: '600px' }}
+                    view={currentView}
+                    onView={setCurrentView}
+                    date={currentDate}
+                    onNavigate={setCurrentDate}
+                    views={[Views.MONTH, Views.WEEK, Views.DAY]}
+                    selectable
+                    onSelectSlot={handleSelectSlot}
+                    onSelectEvent={handleSelectEvent}
+                    eventPropGetter={eventStyleGetter}
+                    popup
+                    showMultiDayTimes
+                    step={30}
+                    timeslots={2}
+                    min={new Date(2024, 0, 1, 6, 0)} // 6:00 AM
+                    max={new Date(2024, 0, 1, 22, 0)} // 10:00 PM
+                />
+            </div>
+        </div>
+    )
+}
+

scheduling-remote/src/components/scheduling/Scheduling.tsx

@@ -0,0 +1,120 @@
+import type { SchedulingProps, SchedulingView } from './types'
+import { ViewSchedule } from './views/ViewSchedule'
+import { IndicateAvailability } from './views/IndicateAvailability'
+import { SchedulingCard } from './ui/SchedulingCard'
+
+// Import the original ScheduleExperiment for now
+// TODO: Further refactor ScheduleExperiment into smaller components
+import { ScheduleExperiment } from '../Scheduling'
+
+export function Scheduling({ user, currentRoute }: SchedulingProps) {
+    // Extract current view from route
+    const getCurrentView = (): SchedulingView => {
+        if (currentRoute === '/scheduling') {
+            return 'main'
+        }
+        const match = currentRoute.match(/^\/scheduling\/(.+)$/)
+        if (match) {
+            const subRoute = match[1]
+            switch (subRoute) {
+                case 'view-schedule':
+                    return 'view-schedule'
+                case 'indicate-availability':
+                    return 'indicate-availability'
+                case 'schedule-experiment':
+                    return 'schedule-experiment'
+                default:
+                    return 'main'
+            }
+        }
+        return 'main'
+    }
+
+    const currentView = getCurrentView()
+
+    const handleCardClick = (view: SchedulingView) => {
+        const newPath = view === 'main' ? '/scheduling' : `/scheduling/${view}`
+        window.history.pushState({}, '', newPath)
+        // Trigger a popstate event to update the route
+        window.dispatchEvent(new PopStateEvent('popstate'))
+    }
+
+    const handleBackToMain = () => {
+        window.history.pushState({}, '', '/scheduling')
+        // Trigger a popstate event to update the route
+        window.dispatchEvent(new PopStateEvent('popstate'))
+    }
+
+    // Render different views based on currentView
+    if (currentView === 'view-schedule') {
+        return <ViewSchedule user={user} onBack={handleBackToMain} />
+    }
+
+    if (currentView === 'indicate-availability') {
+        return <IndicateAvailability user={user} onBack={handleBackToMain} />
+    }
+
+    if (currentView === 'schedule-experiment') {
+        return <ScheduleExperiment user={user} onBack={handleBackToMain} />
+    }
+
+    // Main view with cards
+    return (
+        <div className="p-6">
+            <div className="mb-6">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    Scheduling
+                </h1>
+                <p className="text-gray-600 dark:text-gray-400">
+                    This is the scheduling module of the dashboard. Here you can indicate your availability for upcoming experiment runs.
+                </p>
+            </div>
+
+            {/* Scheduling Cards Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {/* View Complete Schedule Card */}
+                <SchedulingCard
+                    title="View Complete Schedule"
+                    description="View the complete schedule of all upcoming experiment runs and their current status."
+                    icon={
+                        <svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                        </svg>
+                    }
+                    status={{ label: 'Available', color: 'green' }}
+                    footer={{ left: 'All experiments', right: 'View Schedule' }}
+                    onClick={() => handleCardClick('view-schedule')}
+                />
+
+                {/* Indicate Availability Card */}
+                <SchedulingCard
+                    title="Indicate Your Availability"
+                    description="Set your availability preferences and time slots for upcoming experiment runs."
+                    icon={
+                        <svg className="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    }
+                    status={{ label: 'Active', color: 'blue' }}
+                    footer={{ left: 'Personal settings', right: 'Set Availability' }}
+                    onClick={() => handleCardClick('indicate-availability')}
+                />
+
+                {/* Schedule Experiment Card */}
+                <SchedulingCard
+                    title="Schedule Experiment"
+                    description="Schedule specific experiment runs and assign team members to upcoming sessions."
+                    icon={
+                        <svg className="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                    }
+                    status={{ label: 'Planning', color: 'yellow' }}
+                    footer={{ left: 'Experiment planning', right: 'Schedule Now' }}
+                    onClick={() => handleCardClick('schedule-experiment')}
+                />
+            </div>
+        </div>
+    )
+}
+

scheduling-remote/src/components/scheduling/hooks/useConductors.ts

@@ -0,0 +1,123 @@
+import { useState, useEffect } from 'react'
+import type { User, CalendarEvent } from '../types'
+import { userManagement, supabase } from '../../../services/supabase'
+
+const colorPalette = ['#2563eb', '#059669', '#d97706', '#7c3aed', '#dc2626', '#0ea5e9', '#16a34a', '#f59e0b', '#9333ea', '#ef4444']
+
+export function useConductors() {
+    const [conductors, setConductors] = useState<User[]>([])
+    const [conductorIdsWithFutureAvailability, setConductorIdsWithFutureAvailability] = useState<Set<string>>(new Set())
+    const [selectedConductorIds, setSelectedConductorIds] = useState<Set<string>>(new Set())
+    const [availabilityEvents, setAvailabilityEvents] = useState<CalendarEvent[]>([])
+    const [conductorColorMap, setConductorColorMap] = useState<Record<string, string>>({})
+
+    useEffect(() => {
+        const loadConductors = async () => {
+            try {
+                const allUsers = await userManagement.getAllUsers()
+                const conductorsOnly = allUsers.filter(u => u.roles.includes('conductor'))
+                setConductors(conductorsOnly)
+                const conductorIds = conductorsOnly.map(c => c.id)
+                setConductorIdsWithFutureAvailability(new Set(conductorIds))
+            } catch (e) {
+                console.error('Failed to load conductors', e)
+            }
+        }
+        loadConductors()
+    }, [])
+
+    // Fetch availability for selected conductors and build calendar events
+    useEffect(() => {
+        const loadSelectedAvailability = async () => {
+            try {
+                const selectedIds = Array.from(selectedConductorIds)
+                if (selectedIds.length === 0) {
+                    setAvailabilityEvents([])
+                    return
+                }
+
+                // Assign consistent colors per conductor based on their position in the full conductors array
+                const newColorMap: Record<string, string> = {}
+                conductors.forEach((conductor, index) => {
+                    if (selectedIds.includes(conductor.id)) {
+                        newColorMap[conductor.id] = colorPalette[index % colorPalette.length]
+                    }
+                })
+                setConductorColorMap(newColorMap)
+
+                // Fetch availability for selected conductors in a single query
+                const { data, error } = await supabase
+                    .from('conductor_availability')
+                    .select('*')
+                    .in('user_id', selectedIds)
+                    .eq('status', 'active')
+                    .gt('available_to', new Date().toISOString())
+                    .order('available_from', { ascending: true })
+
+                if (error) throw error
+
+                // Map user_id -> display name
+                const idToName: Record<string, string> = {}
+                conductors.forEach(c => {
+                    const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email
+                    idToName[c.id] = name
+                })
+
+                const events: CalendarEvent[] = (data || []).map((r: any) => {
+                    const conductorId = r.user_id
+                    return {
+                        id: r.id,
+                        title: `${idToName[conductorId] || 'Conductor'}`,
+                        start: new Date(r.available_from),
+                        end: new Date(r.available_to),
+                        resource: conductorId
+                    }
+                })
+
+                setAvailabilityEvents(events)
+            } catch (e) {
+                // Fail silently for calendar, do not break main UI
+                setAvailabilityEvents([])
+            }
+        }
+
+        loadSelectedAvailability()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedConductorIds, conductors])
+
+    const toggleConductor = (id: string) => {
+        setSelectedConductorIds(prev => {
+            const next = new Set(prev)
+            if (next.has(id)) next.delete(id)
+            else next.add(id)
+            return next
+        })
+    }
+
+    const toggleAllConductors = () => {
+        const availableConductorIds = conductors
+            .filter(c => conductorIdsWithFutureAvailability.has(c.id))
+            .map(c => c.id)
+
+        setSelectedConductorIds(prev => {
+            const allSelected = availableConductorIds.every(id => prev.has(id))
+            if (allSelected) {
+                return new Set()
+            } else {
+                return new Set(availableConductorIds)
+            }
+        })
+    }
+
+    return {
+        conductors,
+        conductorIdsWithFutureAvailability,
+        selectedConductorIds,
+        availabilityEvents,
+        conductorColorMap,
+        colorPalette,
+        toggleConductor,
+        toggleAllConductors
+    }
+}
+

scheduling-remote/src/components/scheduling/types.ts

@@ -0,0 +1,29 @@
+import type { User, ExperimentPhase, Experiment, ExperimentRepetition, Soaking, Airdrying } from '../../services/supabase'
+
+// Type definitions for calendar events
+export interface CalendarEvent {
+    id: number | string
+    title: string
+    start: Date
+    end: Date
+    resource?: string
+}
+
+export interface SchedulingProps {
+    user: User
+    currentRoute: string
+}
+
+export type SchedulingView = 'main' | 'view-schedule' | 'indicate-availability' | 'schedule-experiment'
+
+export interface ScheduledRepetition {
+    repetitionId: string
+    experimentId: string
+    soakingStart: Date | null
+    airdryingStart: Date | null
+    crackingStart: Date | null
+}
+
+// Re-export types for convenience
+export type { User, ExperimentPhase, Experiment, ExperimentRepetition, Soaking, Airdrying }
+

scheduling-remote/src/components/scheduling/ui/BackButton.tsx

@@ -0,0 +1,19 @@
+interface BackButtonProps {
+    onClick: () => void
+    label?: string
+}
+
+export function BackButton({ onClick, label = 'Back to Scheduling' }: BackButtonProps) {
+    return (
+        <button
+            onClick={onClick}
+            className="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mb-4"
+        >
+            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            {label}
+        </button>
+    )
+}
+

scheduling-remote/src/components/scheduling/ui/DropdownCurtain.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+
+interface DropdownCurtainProps {
+    title: string
+    expanded: boolean
+    onToggle: () => void
+    children: ReactNode
+    headerAction?: ReactNode
+    className?: string
+}
+
+export function DropdownCurtain({ title, expanded, onToggle, children, headerAction, className = '' }: DropdownCurtainProps) {
+    return (
+        <div className={`border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-700 ${className}`}>
+            <button
+                className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                onClick={onToggle}
+            >
+                <span className="text-sm font-medium text-gray-900 dark:text-white">{title}</span>
+                <div className="flex items-center gap-2">
+                    {headerAction}
+                    <svg className={`w-4 h-4 text-gray-500 transition-transform ${expanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                </div>
+            </button>
+            {expanded && (
+                <div className="bg-gray-50 dark:bg-gray-800/50">
+                    {children}
+                </div>
+            )}
+        </div>
+    )
+}
+

scheduling-remote/src/components/scheduling/ui/SchedulingCard.tsx

@@ -0,0 +1,65 @@
+import type { SchedulingView } from '../types'
+
+interface SchedulingCardProps {
+    title: string
+    description: string
+    icon: React.ReactNode
+    status: {
+        label: string
+        color: 'green' | 'blue' | 'yellow'
+    }
+    footer: {
+        left: string
+        right: string
+    }
+    onClick: () => void
+}
+
+export function SchedulingCard({ title, description, icon, status, footer, onClick }: SchedulingCardProps) {
+    const statusColors = {
+        green: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400',
+        blue: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400',
+        yellow: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400',
+    }
+
+    return (
+        <div
+            onClick={onClick}
+            className="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-gray-200 dark:border-gray-700 hover:border-blue-300"
+        >
+            <div className="p-6">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center">
+                        <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
+                            {icon}
+                        </div>
+                    </div>
+                    <div className="text-right">
+                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColors[status.color]}`}>
+                            {status.label}
+                        </span>
+                    </div>
+                </div>
+
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                    {title}
+                </h3>
+
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
+                    {description}
+                </p>
+
+                <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
+                    <span>{footer.left}</span>
+                    <div className="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
+                        <span className="mr-1">{footer.right}</span>
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+

scheduling-remote/src/components/scheduling/ui/TimeSlotModal.tsx

@@ -0,0 +1,123 @@
+import moment from 'moment'
+import type { CalendarEvent } from '../types'
+
+interface TimeSlotModalProps {
+    selectedDate: Date
+    newTimeSlot: {
+        startTime: string
+        endTime: string
+    }
+    existingEvents: CalendarEvent[]
+    onTimeSlotChange: (timeSlot: { startTime: string; endTime: string }) => void
+    onAdd: () => void
+    onCancel: () => void
+}
+
+export function TimeSlotModal({
+    selectedDate,
+    newTimeSlot,
+    existingEvents,
+    onTimeSlotChange,
+    onAdd,
+    onCancel
+}: TimeSlotModalProps) {
+    const getEventsForDate = (date: Date) => {
+        return existingEvents.filter(event => {
+            const eventDate = new Date(event.start)
+            return eventDate.toDateString() === date.toDateString()
+        })
+    }
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
+            <div
+                className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
+                onClick={onCancel}
+            />
+            <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-md mx-auto p-4" onClick={(e) => e.stopPropagation()}>
+                {/* Close Button */}
+                <button
+                    onClick={onCancel}
+                    className="absolute right-3 top-3 z-999 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
+                >
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                </button>
+
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                    Add Availability for {moment(selectedDate).format('MMMM D, YYYY')}
+                </h3>
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Start Time
+                        </label>
+                        <input
+                            type="time"
+                            value={newTimeSlot.startTime}
+                            onChange={(e) => onTimeSlotChange({ ...newTimeSlot, startTime: e.target.value })}
+                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            End Time
+                        </label>
+                        <input
+                            type="time"
+                            value={newTimeSlot.endTime}
+                            onChange={(e) => onTimeSlotChange({ ...newTimeSlot, endTime: e.target.value })}
+                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+                        />
+                    </div>
+                </div>
+
+                {/* Show existing time slots for this date */}
+                {getEventsForDate(selectedDate).length > 0 && (
+                    <div className="mt-4">
+                        <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Existing time slots:
+                        </h4>
+                        <div className="space-y-1">
+                            {getEventsForDate(selectedDate).map(event => (
+                                <div key={event.id} className="text-sm text-gray-600 dark:text-gray-400">
+                                    {moment(event.start).format('HH:mm')} - {moment(event.end).format('HH:mm')} ({event.title})
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                <div className="flex justify-end space-x-3 mt-6">
+                    <button
+                        onClick={onCancel}
+                        className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={onAdd}
+                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                    >
+                        Add Time Slot
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
+

scheduling-remote/src/components/scheduling/views/IndicateAvailability.tsx

@@ -0,0 +1,29 @@
+import type { User } from '../types'
+import { BackButton } from '../ui/BackButton'
+import { AvailabilityCalendar } from '../AvailabilityCalendar'
+
+interface IndicateAvailabilityProps {
+    user: User
+    onBack: () => void
+}
+
+export function IndicateAvailability({ user, onBack }: IndicateAvailabilityProps) {
+    return (
+        <div className="p-6">
+            <div className="mb-6">
+                <BackButton onClick={onBack} />
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    Indicate Availability
+                </h1>
+                <p className="text-gray-600 dark:text-gray-400">
+                    Set your availability preferences and time slots for upcoming experiment runs.
+                </p>
+            </div>
+
+            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+                <AvailabilityCalendar user={user} />
+            </div>
+        </div>
+    )
+}
+

scheduling-remote/src/components/scheduling/views/ScheduleExperiment.tsx

@@ -0,0 +1,6 @@
+// This is a temporary wrapper that imports the original ScheduleExperiment logic
+// TODO: Further refactor this component into smaller subcomponents and hooks
+// For now, we're keeping the original implementation but moving it to its own file
+
+export { ScheduleExperiment } from './ScheduleExperimentImpl'
+

scheduling-remote/src/components/scheduling/views/ScheduleExperimentImpl.tsx

@@ -0,0 +1,9 @@
+// Temporary implementation - imports the original ScheduleExperiment from the old file
+// TODO: Further refactor this into smaller components and hooks
+// For now, we're keeping it in the original file but will move it here later
+
+import type { User } from '../types'
+
+// Re-export the original implementation from the old file location
+export { ScheduleExperiment } from '../../Scheduling'
+

scheduling-remote/src/components/scheduling/views/ViewSchedule.tsx

@@ -0,0 +1,41 @@
+import type { User } from '../types'
+import { BackButton } from '../ui/BackButton'
+
+interface ViewScheduleProps {
+    user: User
+    onBack: () => void
+}
+
+export function ViewSchedule({ user, onBack }: ViewScheduleProps) {
+    return (
+        <div className="p-6">
+            <div className="mb-6">
+                <BackButton onClick={onBack} />
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    Complete Schedule
+                </h1>
+                <p className="text-gray-600 dark:text-gray-400">
+                    View all scheduled experiment runs and their current status.
+                </p>
+            </div>
+
+            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+                <div className="text-center py-12">
+                    <div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center mb-4">
+                        <svg className="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                        </svg>
+                    </div>
+                    <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                        Complete Schedule View
+                    </h3>
+                    <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
+                        This view will show a comprehensive calendar and list of all scheduled experiment runs,
+                        including dates, times, assigned team members, and current status.
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+