23d20d0ac3
- Added conductorsExpanded state to manage the visibility of the conductors list in the scheduling component. - Updated color assignment logic for conductors to ensure consistent coloring based on their position in the array. - Modified spawnSingleRepetition function to accept an updated set of selected IDs for accurate stagger calculations. - Refactored soaking and airdrying data retrieval to map results from a unified experiment_phase_executions table, improving data consistency. - Enhanced UI for conductor selection, including a collapsible list and improved availability indicators.
1736 lines
94 KiB
TypeScript
1736 lines
94 KiB
TypeScript
import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
|
||
// @ts-ignore - react-big-calendar types not available
|
||
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
|
||
// @ts-ignore - react-big-calendar dragAndDrop types not available
|
||
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
|
||
import { DndProvider } from 'react-dnd'
|
||
import { HTML5Backend } from 'react-dnd-html5-backend'
|
||
import moment from 'moment'
|
||
import type { User, ExperimentPhase, Experiment, ExperimentRepetition, Soaking, Airdrying } from '../services/supabase'
|
||
import { availabilityManagement, userManagement, experimentPhaseManagement, experimentManagement, repetitionManagement, phaseManagement, supabase } from '../services/supabase'
|
||
import 'react-big-calendar/lib/css/react-big-calendar.css'
|
||
import './CalendarStyles.css'
|
||
|
||
// Type definitions for calendar events
|
||
interface CalendarEvent {
|
||
id: number | string
|
||
title: string
|
||
start: Date
|
||
end: Date
|
||
resource?: string
|
||
}
|
||
|
||
interface SchedulingProps {
|
||
user: User
|
||
currentRoute: string
|
||
}
|
||
|
||
type SchedulingView = 'main' | 'view-schedule' | 'indicate-availability' | 'schedule-experiment'
|
||
|
||
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 */}
|
||
<div
|
||
onClick={() => handleCardClick('view-schedule')}
|
||
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">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400">
|
||
Available
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||
View Complete Schedule
|
||
</h3>
|
||
|
||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
||
View the complete schedule of all upcoming experiment runs and their current status.
|
||
</p>
|
||
|
||
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||
<span>All experiments</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">View Schedule</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>
|
||
|
||
{/* Indicate Availability Card */}
|
||
<div
|
||
onClick={() => handleCardClick('indicate-availability')}
|
||
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-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400">
|
||
Active
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||
Indicate Your Availability
|
||
</h3>
|
||
|
||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
||
Set your availability preferences and time slots for upcoming experiment runs.
|
||
</p>
|
||
|
||
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||
<span>Personal settings</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">Set Availability</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>
|
||
|
||
{/* Schedule Experiment Card */}
|
||
<div
|
||
onClick={() => handleCardClick('schedule-experiment')}
|
||
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-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400">
|
||
Planning
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||
Schedule Experiment
|
||
</h3>
|
||
|
||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
||
Schedule specific experiment runs and assign team members to upcoming sessions.
|
||
</p>
|
||
|
||
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||
<span>Experiment planning</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">Schedule Now</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>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Placeholder components for the three scheduling features
|
||
function ViewSchedule({ user, onBack }: { user: User; onBack: () => void }) {
|
||
// User context available for future features
|
||
return (
|
||
<div className="p-6">
|
||
<div className="mb-6">
|
||
<button
|
||
onClick={onBack}
|
||
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>
|
||
Back to Scheduling
|
||
</button>
|
||
<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>
|
||
)
|
||
}
|
||
|
||
function IndicateAvailability({ user, onBack }: { user: User; onBack: () => void }) {
|
||
return (
|
||
<div className="p-6">
|
||
<div className="mb-6">
|
||
<button
|
||
onClick={onBack}
|
||
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>
|
||
Back to Scheduling
|
||
</button>
|
||
<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>
|
||
)
|
||
}
|
||
|
||
function ScheduleExperiment({ user, onBack }: { user: User; onBack: () => void }) {
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
const [conductors, setConductors] = useState<User[]>([])
|
||
const [conductorIdsWithFutureAvailability, setConductorIdsWithFutureAvailability] = useState<Set<string>>(new Set())
|
||
const [selectedConductorIds, setSelectedConductorIds] = useState<Set<string>>(new Set())
|
||
|
||
const [phases, setPhases] = useState<ExperimentPhase[]>([])
|
||
const [expandedPhaseIds, setExpandedPhaseIds] = useState<Set<string>>(new Set())
|
||
const [conductorsExpanded, setConductorsExpanded] = useState<boolean>(true)
|
||
const [experimentsByPhase, setExperimentsByPhase] = useState<Record<string, Experiment[]>>({})
|
||
const [repetitionsByExperiment, setRepetitionsByExperiment] = useState<Record<string, ExperimentRepetition[]>>({})
|
||
const [selectedRepetitionIds, setSelectedRepetitionIds] = useState<Set<string>>(new Set())
|
||
const [creatingRepetitionsFor, setCreatingRepetitionsFor] = useState<Set<string>>(new Set())
|
||
const [soakingByExperiment, setSoakingByExperiment] = useState<Record<string, Soaking | null>>({})
|
||
const [airdryingByExperiment, setAirdryingByExperiment] = useState<Record<string, Airdrying | null>>({})
|
||
|
||
// Calendar state for selected conductors' availability
|
||
const localizer = momentLocalizer(moment)
|
||
const DnDCalendar = withDragAndDrop(Calendar)
|
||
const [calendarView, setCalendarView] = useState(Views.WEEK)
|
||
const [currentDate, setCurrentDate] = useState(new Date())
|
||
const [availabilityEvents, setAvailabilityEvents] = useState<CalendarEvent[]>([])
|
||
|
||
// Color map per conductor for calendar events
|
||
const [conductorColorMap, setConductorColorMap] = useState<Record<string, string>>({})
|
||
const colorPalette = ['#2563eb', '#059669', '#d97706', '#7c3aed', '#dc2626', '#0ea5e9', '#16a34a', '#f59e0b', '#9333ea', '#ef4444']
|
||
|
||
// Repetition scheduling state
|
||
const [scheduledRepetitions, setScheduledRepetitions] = useState<Record<string, {
|
||
repetitionId: string
|
||
experimentId: string
|
||
soakingStart: Date | null
|
||
airdryingStart: Date | null
|
||
crackingStart: Date | null
|
||
}>>({})
|
||
|
||
// Track repetitions that have been dropped/moved and should show time points
|
||
const [repetitionsWithTimes, setRepetitionsWithTimes] = useState<Set<string>>(new Set())
|
||
// Track which repetitions are locked (prevent dragging)
|
||
const [lockedSchedules, setLockedSchedules] = useState<Set<string>>(new Set())
|
||
// Track which repetitions are currently being scheduled
|
||
const [schedulingRepetitions, setSchedulingRepetitions] = useState<Set<string>>(new Set())
|
||
|
||
// Visual style for repetition markers
|
||
const [markerStyle, setMarkerStyle] = useState<'circles' | 'dots' | 'icons' | 'lines'>('lines')
|
||
|
||
// Ref for calendar container to preserve scroll position
|
||
const calendarRef = useRef<HTMLDivElement>(null)
|
||
const scrollPositionRef = useRef<{ scrollTop: number; scrollLeft: number } | null>(null)
|
||
|
||
useEffect(() => {
|
||
const load = async () => {
|
||
try {
|
||
setLoading(true)
|
||
setError(null)
|
||
|
||
const [allUsers, allPhases] = await Promise.all([
|
||
userManagement.getAllUsers(),
|
||
experimentPhaseManagement.getAllExperimentPhases()
|
||
])
|
||
|
||
// Filter conductors
|
||
const conductorsOnly = allUsers.filter(u => u.roles.includes('conductor'))
|
||
setConductors(conductorsOnly)
|
||
|
||
// For each conductor, check if they have any availability in the future
|
||
const conductorIds = conductorsOnly.map(c => c.id)
|
||
setConductorIdsWithFutureAvailability(new Set(conductorIds))
|
||
|
||
setPhases(allPhases)
|
||
} catch (e: any) {
|
||
setError(e?.message || 'Failed to load scheduling data')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
load()
|
||
}, [])
|
||
|
||
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 => {
|
||
// If all available conductors are selected, deselect all
|
||
const allSelected = availableConductorIds.every(id => prev.has(id))
|
||
if (allSelected) {
|
||
return new Set()
|
||
} else {
|
||
// Select all available conductors
|
||
return new Set(availableConductorIds)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 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
|
||
// This ensures the same conductor always gets the same color, matching the checkbox list
|
||
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) => ({
|
||
id: r.id,
|
||
title: `${idToName[r.user_id] || 'Conductor'}`,
|
||
start: new Date(r.available_from),
|
||
end: new Date(r.available_to),
|
||
resource: r.user_id // Store conductor ID, not color
|
||
}))
|
||
|
||
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 togglePhaseExpand = async (phaseId: string) => {
|
||
setExpandedPhaseIds(prev => {
|
||
const next = new Set(prev)
|
||
if (next.has(phaseId)) next.delete(phaseId)
|
||
else next.add(phaseId)
|
||
return next
|
||
})
|
||
|
||
// Lazy-load experiments for this phase if not loaded
|
||
if (!experimentsByPhase[phaseId]) {
|
||
try {
|
||
const exps = await experimentManagement.getExperimentsByPhaseId(phaseId)
|
||
setExperimentsByPhase(prev => ({ ...prev, [phaseId]: exps }))
|
||
|
||
// For each experiment, load repetitions and phase data
|
||
const repsEntries = await Promise.all(
|
||
exps.map(async (exp) => {
|
||
const [reps, soaking, airdrying] = await Promise.all([
|
||
repetitionManagement.getExperimentRepetitions(exp.id),
|
||
phaseManagement.getSoakingByExperimentId(exp.id),
|
||
phaseManagement.getAirdryingByExperimentId(exp.id)
|
||
])
|
||
return [exp.id, reps, soaking, airdrying] as const
|
||
})
|
||
)
|
||
|
||
// Update repetitions
|
||
setRepetitionsByExperiment(prev => ({
|
||
...prev,
|
||
...Object.fromEntries(repsEntries.map(([id, reps]) => [id, reps]))
|
||
}))
|
||
|
||
// Update soaking data
|
||
setSoakingByExperiment(prev => ({
|
||
...prev,
|
||
...Object.fromEntries(repsEntries.map(([id, , soaking]) => [id, soaking]))
|
||
}))
|
||
|
||
// Update airdrying data
|
||
setAirdryingByExperiment(prev => ({
|
||
...prev,
|
||
...Object.fromEntries(repsEntries.map(([id, , , airdrying]) => [id, airdrying]))
|
||
}))
|
||
} catch (e: any) {
|
||
setError(e?.message || 'Failed to load experiments or repetitions')
|
||
}
|
||
}
|
||
}
|
||
|
||
const toggleRepetition = (repId: string) => {
|
||
setSelectedRepetitionIds(prev => {
|
||
const next = new Set(prev)
|
||
if (next.has(repId)) {
|
||
next.delete(repId)
|
||
// Remove from scheduled repetitions when unchecked
|
||
setScheduledRepetitions(prevScheduled => {
|
||
const newScheduled = { ...prevScheduled }
|
||
delete newScheduled[repId]
|
||
return newScheduled
|
||
})
|
||
// Clear all related state when unchecked
|
||
setRepetitionsWithTimes(prev => {
|
||
const next = new Set(prev)
|
||
next.delete(repId)
|
||
return next
|
||
})
|
||
setLockedSchedules(prev => {
|
||
const next = new Set(prev)
|
||
next.delete(repId)
|
||
return next
|
||
})
|
||
setSchedulingRepetitions(prev => {
|
||
const next = new Set(prev)
|
||
next.delete(repId)
|
||
return next
|
||
})
|
||
// Re-stagger remaining repetitions
|
||
const remainingIds = Array.from(next).filter(id => id !== repId)
|
||
if (remainingIds.length > 0) {
|
||
reStaggerRepetitions(remainingIds)
|
||
}
|
||
} else {
|
||
next.add(repId)
|
||
// Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
|
||
spawnSingleRepetition(repId, next)
|
||
// Re-stagger all existing repetitions to prevent overlap
|
||
reStaggerRepetitions([...next, repId])
|
||
}
|
||
return next
|
||
})
|
||
}
|
||
|
||
const toggleAllRepetitionsInPhase = (phaseId: string) => {
|
||
const experiments = experimentsByPhase[phaseId] || []
|
||
const allRepetitions = experiments.flatMap(exp => repetitionsByExperiment[exp.id] || [])
|
||
|
||
setSelectedRepetitionIds(prev => {
|
||
// Check if all repetitions in this phase are selected
|
||
const allSelected = allRepetitions.every(rep => prev.has(rep.id))
|
||
|
||
if (allSelected) {
|
||
// Deselect all repetitions in this phase
|
||
const next = new Set(prev)
|
||
allRepetitions.forEach(rep => {
|
||
next.delete(rep.id)
|
||
// Remove from scheduled repetitions
|
||
setScheduledRepetitions(prevScheduled => {
|
||
const newScheduled = { ...prevScheduled }
|
||
delete newScheduled[rep.id]
|
||
return newScheduled
|
||
})
|
||
})
|
||
return next
|
||
} else {
|
||
// Select all repetitions in this phase
|
||
const next = new Set(prev)
|
||
allRepetitions.forEach(rep => {
|
||
next.add(rep.id)
|
||
// Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
|
||
spawnSingleRepetition(rep.id, next)
|
||
})
|
||
return next
|
||
}
|
||
})
|
||
}
|
||
|
||
const createRepetitionsForExperiment = async (experimentId: string) => {
|
||
try {
|
||
setCreatingRepetitionsFor(prev => new Set(prev).add(experimentId))
|
||
setError(null)
|
||
|
||
// Create all repetitions for this experiment
|
||
const newRepetitions = await repetitionManagement.createAllRepetitions(experimentId)
|
||
|
||
// Update the repetitions state
|
||
setRepetitionsByExperiment(prev => ({
|
||
...prev,
|
||
[experimentId]: newRepetitions
|
||
}))
|
||
} catch (e: any) {
|
||
setError(e?.message || 'Failed to create repetitions')
|
||
} finally {
|
||
setCreatingRepetitionsFor(prev => {
|
||
const next = new Set(prev)
|
||
next.delete(experimentId)
|
||
return next
|
||
})
|
||
}
|
||
}
|
||
|
||
// Re-stagger all repetitions to prevent overlap
|
||
const reStaggerRepetitions = (repIds: string[]) => {
|
||
const tomorrow = new Date()
|
||
tomorrow.setDate(tomorrow.getDate() + 1)
|
||
tomorrow.setHours(9, 0, 0, 0)
|
||
|
||
setScheduledRepetitions(prev => {
|
||
const newScheduled = { ...prev }
|
||
|
||
repIds.forEach((repId, index) => {
|
||
if (newScheduled[repId]) {
|
||
const staggerMinutes = index * 15 // 15 minutes between each repetition
|
||
const baseTime = new Date(tomorrow.getTime() + (staggerMinutes * 60000))
|
||
|
||
// Find the experiment for this repetition
|
||
let experimentId = ''
|
||
for (const [expId, reps] of Object.entries(repetitionsByExperiment)) {
|
||
if (reps.find(r => r.id === repId)) {
|
||
experimentId = expId
|
||
break
|
||
}
|
||
}
|
||
|
||
if (experimentId) {
|
||
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
|
||
const soaking = soakingByExperiment[experimentId]
|
||
const airdrying = airdryingByExperiment[experimentId]
|
||
|
||
if (experiment && soaking && airdrying) {
|
||
const soakingStart = new Date(baseTime)
|
||
const airdryingStart = new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000))
|
||
const crackingStart = new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000))
|
||
|
||
newScheduled[repId] = {
|
||
...newScheduled[repId],
|
||
soakingStart,
|
||
airdryingStart,
|
||
crackingStart
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
return newScheduled
|
||
})
|
||
}
|
||
|
||
// Spawn a single repetition in calendar
|
||
const spawnSingleRepetition = (repId: string, updatedSelectedIds?: Set<string>) => {
|
||
const tomorrow = new Date()
|
||
tomorrow.setDate(tomorrow.getDate() + 1)
|
||
tomorrow.setHours(9, 0, 0, 0) // Default to 9 AM tomorrow
|
||
|
||
// Find the experiment for this repetition
|
||
let experimentId = ''
|
||
for (const [expId, reps] of Object.entries(repetitionsByExperiment)) {
|
||
if (reps.find(r => r.id === repId)) {
|
||
experimentId = expId
|
||
break
|
||
}
|
||
}
|
||
|
||
if (experimentId) {
|
||
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
|
||
const soaking = soakingByExperiment[experimentId]
|
||
const airdrying = airdryingByExperiment[experimentId]
|
||
|
||
if (experiment && soaking && airdrying) {
|
||
// Stagger the positioning to avoid overlap when multiple repetitions are selected
|
||
// Use the updated set if provided, otherwise use current state (may be stale)
|
||
const selectedReps = updatedSelectedIds ? Array.from(updatedSelectedIds) : Array.from(selectedRepetitionIds)
|
||
const repIndex = selectedReps.indexOf(repId)
|
||
// If repId not found in selectedReps, use the count of scheduled repetitions as fallback
|
||
const staggerMinutes = repIndex >= 0 ? repIndex * 15 : Object.keys(scheduledRepetitions).length * 15
|
||
|
||
const soakingStart = new Date(tomorrow.getTime() + (staggerMinutes * 60000))
|
||
const airdryingStart = new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000))
|
||
const crackingStart = new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000))
|
||
|
||
setScheduledRepetitions(prev => ({
|
||
...prev,
|
||
[repId]: {
|
||
repetitionId: repId,
|
||
experimentId,
|
||
soakingStart,
|
||
airdryingStart,
|
||
crackingStart
|
||
}
|
||
}))
|
||
}
|
||
}
|
||
}
|
||
|
||
// Update phase timing when a marker is moved
|
||
const updatePhaseTiming = (repId: string, phase: 'soaking' | 'airdrying' | 'cracking', newTime: Date) => {
|
||
setScheduledRepetitions(prev => {
|
||
const current = prev[repId]
|
||
if (!current) return prev
|
||
|
||
const experimentId = current.experimentId
|
||
const soaking = soakingByExperiment[experimentId]
|
||
const airdrying = airdryingByExperiment[experimentId]
|
||
|
||
if (!soaking || !airdrying) return prev
|
||
|
||
let newScheduled = { ...prev }
|
||
|
||
const clampToReasonableHours = (d: Date) => {
|
||
const min = new Date(d)
|
||
min.setHours(5, 0, 0, 0)
|
||
const max = new Date(d)
|
||
max.setHours(23, 0, 0, 0)
|
||
const t = d.getTime()
|
||
return new Date(Math.min(Math.max(t, min.getTime()), max.getTime()))
|
||
}
|
||
|
||
if (phase === 'soaking') {
|
||
const soakingStart = clampToReasonableHours(newTime)
|
||
const airdryingStart = clampToReasonableHours(new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000)))
|
||
const crackingStart = clampToReasonableHours(new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000)))
|
||
|
||
newScheduled[repId] = {
|
||
...current,
|
||
soakingStart,
|
||
airdryingStart,
|
||
crackingStart
|
||
}
|
||
} else if (phase === 'airdrying') {
|
||
const airdryingStart = clampToReasonableHours(newTime)
|
||
const soakingStart = clampToReasonableHours(new Date(airdryingStart.getTime() - (soaking.soaking_duration_minutes * 60000)))
|
||
const crackingStart = clampToReasonableHours(new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000)))
|
||
|
||
newScheduled[repId] = {
|
||
...current,
|
||
soakingStart,
|
||
airdryingStart,
|
||
crackingStart
|
||
}
|
||
} else if (phase === 'cracking') {
|
||
const crackingStart = clampToReasonableHours(newTime)
|
||
const airdryingStart = clampToReasonableHours(new Date(crackingStart.getTime() - (airdrying.duration_minutes * 60000)))
|
||
const soakingStart = clampToReasonableHours(new Date(airdryingStart.getTime() - (soaking.soaking_duration_minutes * 60000)))
|
||
|
||
newScheduled[repId] = {
|
||
...current,
|
||
soakingStart,
|
||
airdryingStart,
|
||
crackingStart
|
||
}
|
||
}
|
||
|
||
return newScheduled
|
||
})
|
||
}
|
||
|
||
// Generate calendar events for scheduled repetitions (memoized)
|
||
const generateRepetitionEvents = useCallback((): CalendarEvent[] => {
|
||
const events: CalendarEvent[] = []
|
||
|
||
Object.values(scheduledRepetitions).forEach(scheduled => {
|
||
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === scheduled.experimentId)
|
||
const repetition = repetitionsByExperiment[scheduled.experimentId]?.find(r => r.id === scheduled.repetitionId)
|
||
|
||
if (experiment && repetition && scheduled.soakingStart) {
|
||
// Soaking marker
|
||
events.push({
|
||
id: `${scheduled.repetitionId}-soaking`,
|
||
title: `💧 Soaking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
||
start: scheduled.soakingStart,
|
||
end: new Date(scheduled.soakingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
|
||
resource: 'soaking'
|
||
})
|
||
|
||
// Airdrying marker
|
||
if (scheduled.airdryingStart) {
|
||
events.push({
|
||
id: `${scheduled.repetitionId}-airdrying`,
|
||
title: `🌬️ Airdrying - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
||
start: scheduled.airdryingStart,
|
||
end: new Date(scheduled.airdryingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
|
||
resource: 'airdrying'
|
||
})
|
||
}
|
||
|
||
// Cracking marker
|
||
if (scheduled.crackingStart) {
|
||
events.push({
|
||
id: `${scheduled.repetitionId}-cracking`,
|
||
title: `⚡ Cracking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
|
||
start: scheduled.crackingStart,
|
||
end: new Date(scheduled.crackingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
|
||
resource: 'cracking'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
return events
|
||
}, [scheduledRepetitions, experimentsByPhase, repetitionsByExperiment])
|
||
|
||
// Memoize the calendar events to prevent unnecessary re-renders
|
||
const calendarEvents = useMemo(() => generateRepetitionEvents(), [generateRepetitionEvents])
|
||
|
||
// Functions to preserve and restore scroll position
|
||
const preserveScrollPosition = useCallback(() => {
|
||
if (calendarRef.current) {
|
||
const scrollContainer = calendarRef.current.querySelector('.rbc-time-content') as HTMLElement
|
||
if (scrollContainer) {
|
||
scrollPositionRef.current = {
|
||
scrollTop: scrollContainer.scrollTop,
|
||
scrollLeft: scrollContainer.scrollLeft
|
||
}
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
const restoreScrollPosition = useCallback(() => {
|
||
if (calendarRef.current && scrollPositionRef.current) {
|
||
const scrollContainer = calendarRef.current.querySelector('.rbc-time-content') as HTMLElement
|
||
if (scrollContainer) {
|
||
scrollContainer.scrollTop = scrollPositionRef.current.scrollTop
|
||
scrollContainer.scrollLeft = scrollPositionRef.current.scrollLeft
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
// Helper functions for scheduling
|
||
const formatTime = (date: Date | null) => {
|
||
if (!date) return 'Not set'
|
||
return moment(date).format('MMM D, h:mm A')
|
||
}
|
||
|
||
const toggleScheduleLock = (repId: string) => {
|
||
setLockedSchedules(prev => {
|
||
const next = new Set(prev)
|
||
if (next.has(repId)) {
|
||
next.delete(repId)
|
||
} else {
|
||
next.add(repId)
|
||
}
|
||
return next
|
||
})
|
||
}
|
||
|
||
const draggableAccessor = useCallback((event: any) => {
|
||
// Only make repetition markers draggable, not availability events
|
||
const resource = event.resource as string
|
||
if (resource === 'soaking' || resource === 'airdrying' || resource === 'cracking') {
|
||
// Check if the repetition is locked
|
||
const eventId = event.id as string
|
||
const repId = eventId.split('-')[0]
|
||
const isLocked = lockedSchedules.has(repId)
|
||
return !isLocked
|
||
}
|
||
return false
|
||
}, [lockedSchedules])
|
||
|
||
const eventPropGetter = useCallback((event: any) => {
|
||
const resource = event.resource as string
|
||
|
||
// Styling for repetition markers (foreground events)
|
||
if (resource === 'soaking' || resource === 'airdrying' || resource === 'cracking') {
|
||
const eventId = event.id as string
|
||
const repId = eventId.split('-')[0]
|
||
const isLocked = lockedSchedules.has(repId)
|
||
|
||
const colors = {
|
||
soaking: '#3b82f6', // blue
|
||
airdrying: '#10b981', // green
|
||
cracking: '#f59e0b' // orange
|
||
}
|
||
const color = colors[resource as keyof typeof colors] || '#6b7280'
|
||
|
||
return {
|
||
style: {
|
||
backgroundColor: isLocked ? '#9ca3af' : color, // gray if locked
|
||
borderColor: isLocked ? color : color, // border takes original color when locked
|
||
color: 'white',
|
||
borderRadius: '8px',
|
||
border: '2px solid',
|
||
height: '40px',
|
||
minHeight: '40px',
|
||
fontSize: '12px',
|
||
padding: '8px 12px',
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-start',
|
||
fontWeight: 'bold',
|
||
zIndex: 10,
|
||
position: 'relative',
|
||
lineHeight: '1.4',
|
||
textShadow: '1px 1px 2px rgba(0,0,0,0.7)',
|
||
gap: '8px',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
cursor: isLocked ? 'not-allowed' : 'grab',
|
||
boxShadow: isLocked ? '0 1px 2px rgba(0,0,0,0.1)' : '0 2px 4px rgba(0,0,0,0.2)',
|
||
transition: 'all 0.2s ease',
|
||
opacity: isLocked ? 0.7 : 1
|
||
}
|
||
}
|
||
}
|
||
|
||
// Default styling for other events
|
||
return {}
|
||
}, [lockedSchedules])
|
||
|
||
const scheduleRepetition = async (repId: string, experimentId: string) => {
|
||
setSchedulingRepetitions(prev => new Set(prev).add(repId))
|
||
|
||
try {
|
||
const scheduled = scheduledRepetitions[repId]
|
||
if (!scheduled) throw new Error('No scheduled times found')
|
||
|
||
const { soakingStart, airdryingStart, crackingStart } = scheduled
|
||
if (!soakingStart || !airdryingStart || !crackingStart) {
|
||
throw new Error('All time points must be set')
|
||
}
|
||
|
||
const soaking = soakingByExperiment[experimentId]
|
||
const airdrying = airdryingByExperiment[experimentId]
|
||
|
||
if (!soaking || !airdrying) throw new Error('Phase data not found')
|
||
|
||
// Update repetition scheduled_date (earliest time point)
|
||
await repetitionManagement.updateRepetition(repId, {
|
||
scheduled_date: soakingStart.toISOString()
|
||
})
|
||
|
||
// Create/update soaking record with repetition_id
|
||
await phaseManagement.createSoaking({
|
||
repetition_id: repId,
|
||
scheduled_start_time: soakingStart.toISOString(),
|
||
soaking_duration_minutes: soaking.soaking_duration_minutes
|
||
})
|
||
|
||
// Create/update airdrying record with repetition_id
|
||
await phaseManagement.createAirdrying({
|
||
repetition_id: repId,
|
||
scheduled_start_time: airdryingStart.toISOString(),
|
||
duration_minutes: airdrying.duration_minutes
|
||
})
|
||
|
||
// Create/update cracking record with repetition_id
|
||
// Note: cracking requires machine_type_id - need to get from experiment phase
|
||
const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
|
||
const phase = phases.find(p => p.id === experiment?.phase_id)
|
||
|
||
if (phase?.cracking_machine_type_id) {
|
||
await phaseManagement.createCracking({
|
||
repetition_id: repId,
|
||
machine_type_id: phase.cracking_machine_type_id,
|
||
scheduled_start_time: crackingStart.toISOString()
|
||
})
|
||
}
|
||
|
||
// Update local state to reflect scheduling
|
||
setRepetitionsByExperiment(prev => ({
|
||
...prev,
|
||
[experimentId]: prev[experimentId]?.map(r =>
|
||
r.id === repId
|
||
? { ...r, scheduled_date: soakingStart.toISOString() }
|
||
: r
|
||
) || []
|
||
}))
|
||
|
||
} catch (error: any) {
|
||
setError(error?.message || 'Failed to schedule repetition')
|
||
} finally {
|
||
setSchedulingRepetitions(prev => {
|
||
const next = new Set(prev)
|
||
next.delete(repId)
|
||
return next
|
||
})
|
||
}
|
||
}
|
||
|
||
// Restore scroll position after scheduledRepetitions changes
|
||
useEffect(() => {
|
||
if (scrollPositionRef.current) {
|
||
// Use a longer delay to ensure the calendar has fully re-rendered
|
||
const timeoutId = setTimeout(() => {
|
||
restoreScrollPosition()
|
||
}, 50)
|
||
|
||
return () => clearTimeout(timeoutId)
|
||
}
|
||
}, [scheduledRepetitions, restoreScrollPosition])
|
||
|
||
|
||
return (
|
||
<div className="h-full flex flex-col overflow-hidden -m-4 md:-m-6">
|
||
<div className="p-6 flex-shrink-0">
|
||
<button
|
||
onClick={onBack}
|
||
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>
|
||
Back to Scheduling
|
||
</button>
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||
Schedule Experiment
|
||
</h1>
|
||
<p className="text-gray-600 dark:text-gray-400">
|
||
Schedule specific experiment runs and assign team members to upcoming sessions.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="px-6 pb-6 flex-1 min-h-0 overflow-hidden">
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 h-full flex flex-col min-h-0 overflow-hidden">
|
||
{error && (
|
||
<div className="mb-4 text-sm text-red-600 dark:text-red-400">{error}</div>
|
||
)}
|
||
{loading ? (
|
||
<div className="text-center py-12">
|
||
<div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mb-4">
|
||
<svg className="w-8 h-8 text-purple-600 dark:text-purple-400 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 12a8 8 0 018-8" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Loading…</h3>
|
||
<p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">Fetching conductors, phases, and experiments.</p>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 flex-shrink-0">
|
||
{/* Left: Conductors with future availability */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Conductors</h2>
|
||
<span className="text-xs text-gray-500 dark:text-gray-400">Select to consider for scheduling</span>
|
||
</div>
|
||
<div className="border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-700">
|
||
{conductors.length === 0 ? (
|
||
<div className="p-4 text-sm text-gray-500 dark:text-gray-400">No conductors found.</div>
|
||
) : (
|
||
<div>
|
||
<button
|
||
className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
||
onClick={() => setConductorsExpanded(!conductorsExpanded)}
|
||
>
|
||
<span className="text-sm font-medium text-gray-900 dark:text-white">All Conductors</span>
|
||
<svg className={`w-4 h-4 text-gray-500 transition-transform ${conductorsExpanded ? '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>
|
||
</button>
|
||
{conductorsExpanded && (
|
||
<div className="bg-gray-50 dark:bg-gray-800/50 max-h-[420px] overflow-y-auto">
|
||
{/* Select All checkbox */}
|
||
<div className="p-3 border-b border-gray-200 dark:border-gray-600">
|
||
<label className="flex items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||
checked={conductors.filter(c => conductorIdsWithFutureAvailability.has(c.id)).every(c => selectedConductorIds.has(c.id)) && conductors.filter(c => conductorIdsWithFutureAvailability.has(c.id)).length > 0}
|
||
onChange={toggleAllConductors}
|
||
/>
|
||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Select All Available Conductors</span>
|
||
</label>
|
||
</div>
|
||
{/* Conductors list */}
|
||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||
{conductors.map((c, index) => {
|
||
const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email
|
||
const hasFuture = conductorIdsWithFutureAvailability.has(c.id)
|
||
const checked = selectedConductorIds.has(c.id)
|
||
// Use the same color mapping as the calendar (from conductorColorMap)
|
||
const conductorColor = checked ? (conductorColorMap[c.id] || colorPalette[index % colorPalette.length]) : null
|
||
|
||
return (
|
||
<label
|
||
key={c.id}
|
||
className={`flex items-center justify-between p-3 ${!hasFuture ? 'opacity-50' : ''} ${checked ? 'border-l-4' : ''} hover:bg-gray-100 dark:hover:bg-gray-700/30`}
|
||
style={checked && conductorColor ? { borderLeftColor: conductorColor + '60' } : {}}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<input
|
||
type="checkbox"
|
||
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||
checked={checked}
|
||
onChange={() => toggleConductor(c.id)}
|
||
disabled={!hasFuture}
|
||
/>
|
||
<div>
|
||
<div className="text-sm font-medium text-gray-900 dark:text-white">{name}</div>
|
||
<div className="text-xs text-gray-500 dark:text-gray-400">{c.email}</div>
|
||
</div>
|
||
</div>
|
||
<span className={`text-xs ${hasFuture ? 'text-green-600 dark:text-green-400' : 'text-gray-400'}`}>{hasFuture ? 'Available' : 'No availability'}</span>
|
||
</label>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: Phases -> Experiments -> Repetitions */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Experiment Phases</h2>
|
||
<span className="text-xs text-gray-500 dark:text-gray-400">Expand and select repetitions</span>
|
||
</div>
|
||
<div className="border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-700">
|
||
{phases.length === 0 && (
|
||
<div className="p-4 text-sm text-gray-500 dark:text-gray-400">No phases defined.</div>
|
||
)}
|
||
{phases.map(phase => {
|
||
const expanded = expandedPhaseIds.has(phase.id)
|
||
const experiments = experimentsByPhase[phase.id] || []
|
||
return (
|
||
<div key={phase.id}>
|
||
<button
|
||
className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
||
onClick={() => togglePhaseExpand(phase.id)}
|
||
>
|
||
<span className="text-sm font-medium text-gray-900 dark:text-white">{phase.name}</span>
|
||
<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>
|
||
</button>
|
||
{expanded && (
|
||
<div className="bg-gray-50 dark:bg-gray-800/50 max-h-96 overflow-y-auto">
|
||
{/* Select All checkbox for this phase */}
|
||
{experiments.length > 0 && (
|
||
<div className="p-3 border-b border-gray-200 dark:border-gray-600">
|
||
<label className="flex items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||
checked={experiments.flatMap(exp => repetitionsByExperiment[exp.id] || []).every(rep => selectedRepetitionIds.has(rep.id)) && experiments.flatMap(exp => repetitionsByExperiment[exp.id] || []).length > 0}
|
||
onChange={() => toggleAllRepetitionsInPhase(phase.id)}
|
||
/>
|
||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Select All Repetitions in {phase.name}</span>
|
||
</label>
|
||
</div>
|
||
)}
|
||
{experiments.length === 0 && (
|
||
<div className="p-3 text-xs text-gray-500 dark:text-gray-400">No experiments in this phase.</div>
|
||
)}
|
||
{experiments.map(exp => {
|
||
const reps = repetitionsByExperiment[exp.id] || []
|
||
const isCreating = creatingRepetitionsFor.has(exp.id)
|
||
const allRepsCreated = reps.length >= exp.reps_required
|
||
const soaking = soakingByExperiment[exp.id]
|
||
const airdrying = airdryingByExperiment[exp.id]
|
||
|
||
const getSoakDisplay = () => {
|
||
if (soaking) return `${soaking.soaking_duration_minutes}min`
|
||
return '—'
|
||
}
|
||
|
||
const getAirdryDisplay = () => {
|
||
if (airdrying) return `${airdrying.duration_minutes}min`
|
||
return '—'
|
||
}
|
||
|
||
return (
|
||
<div key={exp.id} className="border-t border-gray-200 dark:border-gray-700">
|
||
<div className="px-3 py-2 flex items-center justify-between">
|
||
<div className="text-sm text-gray-900 dark:text-white">
|
||
<span className="font-medium">Exp #{exp.experiment_number}</span>
|
||
<span className="mx-2 text-gray-400">•</span>
|
||
<span className="text-xs text-gray-600 dark:text-gray-300">Soak: {getSoakDisplay()}</span>
|
||
<span className="mx-2 text-gray-400">/</span>
|
||
<span className="text-xs text-gray-600 dark:text-gray-300">Air-dry: {getAirdryDisplay()}</span>
|
||
</div>
|
||
{!allRepsCreated && (
|
||
<button
|
||
onClick={() => createRepetitionsForExperiment(exp.id)}
|
||
disabled={isCreating}
|
||
className="text-xs bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white px-2 py-1 rounded transition-colors"
|
||
>
|
||
{isCreating ? 'Creating...' : 'Add Repetition'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="px-3 pb-2 space-y-2">
|
||
{reps.map(rep => {
|
||
const checked = selectedRepetitionIds.has(rep.id)
|
||
const hasTimes = repetitionsWithTimes.has(rep.id)
|
||
const scheduled = scheduledRepetitions[rep.id]
|
||
const isLocked = lockedSchedules.has(rep.id)
|
||
const isScheduling = schedulingRepetitions.has(rep.id)
|
||
|
||
return (
|
||
<div key={rep.id} className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-3">
|
||
{/* Checkbox row */}
|
||
<label className="flex items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||
checked={checked}
|
||
onChange={() => toggleRepetition(rep.id)}
|
||
/>
|
||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Rep {rep.repetition_number}</span>
|
||
</label>
|
||
|
||
{/* Time points (shown only if has been dropped/moved) */}
|
||
{hasTimes && scheduled && (
|
||
<div className="mt-2 ml-6 text-xs space-y-1">
|
||
<div className="flex items-center gap-2">
|
||
<span>💧</span>
|
||
<span>Soaking: {formatTime(scheduled.soakingStart)}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span>🌬️</span>
|
||
<span>Airdrying: {formatTime(scheduled.airdryingStart)}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span>⚡</span>
|
||
<span>Cracking: {formatTime(scheduled.crackingStart)}</span>
|
||
</div>
|
||
|
||
{/* Lock checkbox and Schedule button */}
|
||
<div className="flex items-center gap-3 mt-3 pt-2 border-t border-gray-200 dark:border-gray-600">
|
||
<label className="flex items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
className="h-3 w-3 text-blue-600 border-gray-300 rounded"
|
||
checked={isLocked}
|
||
onChange={() => toggleScheduleLock(rep.id)}
|
||
/>
|
||
<span className="text-xs text-gray-600 dark:text-gray-400">Lock</span>
|
||
</label>
|
||
<button
|
||
onClick={() => scheduleRepetition(rep.id, exp.id)}
|
||
disabled={isScheduling || !isLocked}
|
||
className="px-3 py-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
|
||
>
|
||
{isScheduling ? 'Scheduling...' : 'Schedule'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
{reps.length === 0 && !isCreating && (
|
||
<div className="text-xs text-gray-500 dark:text-gray-400 col-span-full">No repetitions created. Click "Create Reps" to generate them.</div>
|
||
)}
|
||
{isCreating && (
|
||
<div className="text-xs text-blue-600 dark:text-blue-400 col-span-full flex items-center gap-2">
|
||
<svg className="w-3 h-3 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 12a8 8 0 018-8" />
|
||
</svg>
|
||
Creating {exp.reps_required} repetitions...
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* Week Calendar for selected conductors' availability */}
|
||
<div className="mt-6 flex flex-col flex-1 min-h-0 overflow-hidden">
|
||
<div className="flex justify-between items-center mb-3 flex-shrink-0">
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Selected Conductors' Availability & Experiment Scheduling</h3>
|
||
<div className="flex gap-2 items-center">
|
||
{/* Day-by-day navigation buttons (only show in week view) */}
|
||
{calendarView === Views.WEEK && (
|
||
<div className="flex items-center gap-1 mr-2">
|
||
<button
|
||
onClick={() => {
|
||
const newDate = new Date(currentDate)
|
||
newDate.setDate(newDate.getDate() - 1)
|
||
setCurrentDate(newDate)
|
||
}}
|
||
className="px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded border border-gray-300 dark:border-gray-600"
|
||
title="Previous day"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
const newDate = new Date(currentDate)
|
||
newDate.setDate(newDate.getDate() + 1)
|
||
setCurrentDate(newDate)
|
||
}}
|
||
className="px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded border border-gray-300 dark:border-gray-600"
|
||
title="Next day"
|
||
>
|
||
<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>
|
||
</button>
|
||
<span className="text-xs text-gray-500 dark:text-gray-400 ml-1">Day</span>
|
||
</div>
|
||
)}
|
||
<span className="text-sm text-gray-600 dark:text-gray-400">Marker Style:</span>
|
||
<button
|
||
onClick={() => setMarkerStyle('lines')}
|
||
className={`px-3 py-1 text-xs rounded ${markerStyle === 'lines'
|
||
? 'bg-blue-500 text-white'
|
||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||
}`}
|
||
>
|
||
Lines
|
||
</button>
|
||
<button
|
||
onClick={() => setMarkerStyle('circles')}
|
||
className={`px-3 py-1 text-xs rounded ${markerStyle === 'circles'
|
||
? 'bg-blue-500 text-white'
|
||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||
}`}
|
||
>
|
||
Circles
|
||
</button>
|
||
<button
|
||
onClick={() => setMarkerStyle('dots')}
|
||
className={`px-3 py-1 text-xs rounded ${markerStyle === 'dots'
|
||
? 'bg-blue-500 text-white'
|
||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||
}`}
|
||
>
|
||
Dots
|
||
</button>
|
||
<button
|
||
onClick={() => setMarkerStyle('icons')}
|
||
className={`px-3 py-1 text-xs rounded ${markerStyle === 'icons'
|
||
? 'bg-blue-500 text-white'
|
||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||
}`}
|
||
>
|
||
Icons
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div ref={calendarRef} className="flex-1 min-h-0 border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden relative">
|
||
<DndProvider backend={HTML5Backend}>
|
||
<DnDCalendar
|
||
localizer={localizer}
|
||
events={calendarEvents}
|
||
backgroundEvents={availabilityEvents}
|
||
startAccessor="start"
|
||
endAccessor="end"
|
||
titleAccessor="title"
|
||
style={{ height: '100%' }}
|
||
view={calendarView}
|
||
onView={setCalendarView}
|
||
date={currentDate}
|
||
onNavigate={setCurrentDate}
|
||
views={[Views.WEEK, Views.DAY]}
|
||
dayLayoutAlgorithm="no-overlap"
|
||
draggableAccessor={draggableAccessor}
|
||
onEventDrop={({ event, start }: { event: any, start: Date }) => {
|
||
// Preserve scroll position before updating
|
||
preserveScrollPosition()
|
||
|
||
// Handle dragging repetition markers
|
||
const eventId = event.id as string
|
||
// Clamp to reasonable working hours (5AM to 11PM) to prevent extreme times
|
||
const clampToReasonableHours = (d: Date) => {
|
||
const min = new Date(d)
|
||
min.setHours(5, 0, 0, 0)
|
||
const max = new Date(d)
|
||
max.setHours(23, 0, 0, 0)
|
||
const t = d.getTime()
|
||
return new Date(Math.min(Math.max(t, min.getTime()), max.getTime()))
|
||
}
|
||
const clampedStart = clampToReasonableHours(start)
|
||
|
||
let repId = ''
|
||
if (eventId.includes('-soaking')) {
|
||
repId = eventId.replace('-soaking', '')
|
||
updatePhaseTiming(repId, 'soaking', clampedStart)
|
||
} else if (eventId.includes('-airdrying')) {
|
||
repId = eventId.replace('-airdrying', '')
|
||
updatePhaseTiming(repId, 'airdrying', clampedStart)
|
||
} else if (eventId.includes('-cracking')) {
|
||
repId = eventId.replace('-cracking', '')
|
||
updatePhaseTiming(repId, 'cracking', clampedStart)
|
||
}
|
||
|
||
// Add repetition to show time points
|
||
if (repId) {
|
||
setRepetitionsWithTimes(prev => new Set(prev).add(repId))
|
||
}
|
||
|
||
// Restore scroll position after a brief delay to allow for re-render
|
||
setTimeout(() => {
|
||
restoreScrollPosition()
|
||
}, 10)
|
||
}}
|
||
eventPropGetter={eventPropGetter}
|
||
backgroundEventPropGetter={(event: any) => {
|
||
// Styling for background events (conductor availability)
|
||
const conductorId = event.resource
|
||
const color = conductorColorMap[conductorId] || '#2563eb'
|
||
return {
|
||
style: {
|
||
backgroundColor: color + '40', // ~25% transparency for background
|
||
borderColor: color,
|
||
borderWidth: '1px',
|
||
borderStyle: 'solid',
|
||
color: 'transparent',
|
||
borderRadius: '4px',
|
||
opacity: 0.6,
|
||
height: 'auto',
|
||
minHeight: '20px',
|
||
fontSize: '0px',
|
||
padding: '0px',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap'
|
||
}
|
||
}
|
||
}}
|
||
popup
|
||
showMultiDayTimes
|
||
doShowMore={true}
|
||
step={30}
|
||
timeslots={2}
|
||
/>
|
||
</DndProvider>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Availability Calendar Component
|
||
function AvailabilityCalendar({ user }: { user: User }) {
|
||
// User context available for future features like saving preferences
|
||
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 && (
|
||
<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={handleCancelTimeSlot}
|
||
/>
|
||
<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={handleCancelTimeSlot}
|
||
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) => setNewTimeSlot({ ...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) => setNewTimeSlot({ ...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={handleCancelTimeSlot}
|
||
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={handleAddTimeSlot}
|
||
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>
|
||
)}
|
||
|
||
{/* Calendar */}
|
||
<div className="h-[600px]">
|
||
<Calendar
|
||
localizer={localizer}
|
||
events={events}
|
||
startAccessor="start"
|
||
endAccessor="end"
|
||
style={{ height: '100%' }}
|
||
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>
|
||
)
|
||
}
|
||
|