852 lines
31 KiB
TypeScript
852 lines
31 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import api from '@/services/api'
|
||
import dayjs from 'dayjs'
|
||
|
||
// Types for Calendar entities
|
||
type SlotType = 'work' | 'on_call' | 'entertainment' | 'system'
|
||
type EventType = 'job' | 'entertainment' | 'system_event'
|
||
type SlotStatus = 'not_started' | 'ongoing' | 'deferred' | 'skipped' | 'paused' | 'finished' | 'aborted'
|
||
|
||
interface TimeSlotResponse {
|
||
slot_id: string // real int id or "plan-{planId}-{date}" for virtual
|
||
date: string
|
||
slot_type: SlotType
|
||
estimated_duration: number
|
||
scheduled_at: string // HH:mm
|
||
started_at: string | null
|
||
attended: boolean
|
||
actual_duration: number | null
|
||
event_type: EventType | null
|
||
event_data: Record<string, any> | null
|
||
priority: number
|
||
status: SlotStatus
|
||
plan_id: number | null
|
||
is_virtual: boolean
|
||
created_at: string | null
|
||
updated_at: string | null
|
||
}
|
||
|
||
interface DayViewResponse {
|
||
date: string
|
||
user_id: number
|
||
slots: TimeSlotResponse[]
|
||
}
|
||
|
||
interface SchedulePlanResponse {
|
||
id: number
|
||
slot_type: SlotType
|
||
estimated_duration: number
|
||
event_type: string | null
|
||
event_data: Record<string, any> | null
|
||
at_time: string
|
||
on_day: string | null
|
||
on_week: number | null
|
||
on_month: string | null
|
||
is_active: boolean
|
||
created_at: string
|
||
updated_at: string | null
|
||
}
|
||
|
||
interface PlanListResponse {
|
||
plans: SchedulePlanResponse[]
|
||
}
|
||
|
||
type Weekday = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
|
||
type MonthName = 'jan' | 'feb' | 'mar' | 'apr' | 'may' | 'jun' | 'jul' | 'aug' | 'sep' | 'oct' | 'nov' | 'dec'
|
||
|
||
interface WorkloadWarning {
|
||
period: string
|
||
slot_type: string
|
||
current: number
|
||
minimum: number
|
||
message: string
|
||
}
|
||
|
||
interface ScheduleResponse {
|
||
slot: TimeSlotResponse
|
||
warnings: WorkloadWarning[]
|
||
}
|
||
|
||
const SLOT_TYPES: { value: SlotType; label: string }[] = [
|
||
{ value: 'work', label: 'Work' },
|
||
{ value: 'on_call', label: 'On Call' },
|
||
{ value: 'entertainment', label: 'Entertainment' },
|
||
{ value: 'system', label: 'System' },
|
||
]
|
||
|
||
const EVENT_TYPES: { value: EventType; label: string }[] = [
|
||
{ value: 'job', label: 'Job' },
|
||
{ value: 'entertainment', label: 'Entertainment' },
|
||
{ value: 'system_event', label: 'System Event' },
|
||
]
|
||
|
||
const WEEKDAYS: { value: Weekday; label: string }[] = [
|
||
{ value: 'sun', label: 'Sunday' },
|
||
{ value: 'mon', label: 'Monday' },
|
||
{ value: 'tue', label: 'Tuesday' },
|
||
{ value: 'wed', label: 'Wednesday' },
|
||
{ value: 'thu', label: 'Thursday' },
|
||
{ value: 'fri', label: 'Friday' },
|
||
{ value: 'sat', label: 'Saturday' },
|
||
]
|
||
|
||
const MONTHS: { value: MonthName; label: string }[] = [
|
||
{ value: 'jan', label: 'January' },
|
||
{ value: 'feb', label: 'February' },
|
||
{ value: 'mar', label: 'March' },
|
||
{ value: 'apr', label: 'April' },
|
||
{ value: 'may', label: 'May' },
|
||
{ value: 'jun', label: 'June' },
|
||
{ value: 'jul', label: 'July' },
|
||
{ value: 'aug', label: 'August' },
|
||
{ value: 'sep', label: 'September' },
|
||
{ value: 'oct', label: 'October' },
|
||
{ value: 'nov', label: 'November' },
|
||
{ value: 'dec', label: 'December' },
|
||
]
|
||
|
||
const SLOT_TYPE_ICONS: Record<string, string> = {
|
||
work: '💼',
|
||
on_call: '📞',
|
||
entertainment: '🎮',
|
||
system: '⚙️',
|
||
}
|
||
|
||
const STATUS_CLASSES: Record<string, string> = {
|
||
not_started: 'status-open',
|
||
ongoing: 'status-undergoing',
|
||
deferred: 'status-pending',
|
||
skipped: 'status-closed',
|
||
paused: 'status-pending',
|
||
finished: 'status-completed',
|
||
aborted: 'status-closed',
|
||
}
|
||
|
||
export default function CalendarPage() {
|
||
const [selectedDate, setSelectedDate] = useState(dayjs().format('YYYY-MM-DD'))
|
||
const [slots, setSlots] = useState<TimeSlotResponse[]>([])
|
||
const [plans, setPlans] = useState<SchedulePlanResponse[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [activeTab, setActiveTab] = useState<'daily' | 'plans'>('daily')
|
||
const [error, setError] = useState('')
|
||
|
||
// Create/Edit slot modal state
|
||
const [showSlotModal, setShowSlotModal] = useState(false)
|
||
const [editingSlot, setEditingSlot] = useState<TimeSlotResponse | null>(null)
|
||
const [slotForm, setSlotForm] = useState({
|
||
slot_type: 'work' as SlotType,
|
||
scheduled_at: '09:00',
|
||
estimated_duration: 25,
|
||
event_type: '' as string,
|
||
event_data_code: '',
|
||
event_data_event: '',
|
||
priority: 50,
|
||
})
|
||
const [slotSaving, setSlotSaving] = useState(false)
|
||
const [warnings, setWarnings] = useState<WorkloadWarning[]>([])
|
||
const [showPlanModal, setShowPlanModal] = useState(false)
|
||
const [editingPlan, setEditingPlan] = useState<SchedulePlanResponse | null>(null)
|
||
const [planSaving, setPlanSaving] = useState(false)
|
||
const [planForm, setPlanForm] = useState({
|
||
slot_type: 'work' as SlotType,
|
||
estimated_duration: 25,
|
||
at_time: '09:00',
|
||
on_day: '' as Weekday | '',
|
||
on_week: '' as string,
|
||
on_month: '' as MonthName | '',
|
||
event_type: '' as string,
|
||
event_data_code: '',
|
||
event_data_event: '',
|
||
})
|
||
|
||
const fetchSlots = async (date: string) => {
|
||
setLoading(true)
|
||
setError('')
|
||
try {
|
||
const { data } = await api.get<DayViewResponse>(`/calendar/day?date=${date}`)
|
||
setSlots(Array.isArray(data?.slots) ? data.slots : [])
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Failed to load calendar')
|
||
setSlots([])
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const fetchPlans = async () => {
|
||
try {
|
||
const { data } = await api.get<PlanListResponse>('/calendar/plans')
|
||
setPlans(Array.isArray(data?.plans) ? data.plans : [])
|
||
} catch (err: any) {
|
||
console.error('Failed to load plans:', err)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
fetchSlots(selectedDate)
|
||
fetchPlans()
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (activeTab === 'daily') {
|
||
fetchSlots(selectedDate)
|
||
}
|
||
}, [selectedDate])
|
||
|
||
const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
setSelectedDate(e.target.value)
|
||
}
|
||
|
||
const goToday = () => setSelectedDate(dayjs().format('YYYY-MM-DD'))
|
||
const goPrev = () => setSelectedDate(dayjs(selectedDate).subtract(1, 'day').format('YYYY-MM-DD'))
|
||
const goNext = () => setSelectedDate(dayjs(selectedDate).add(1, 'day').format('YYYY-MM-DD'))
|
||
|
||
const formatPlanSchedule = (plan: SchedulePlanResponse) => {
|
||
const parts: string[] = [`at ${plan.at_time}`]
|
||
if (plan.on_day) parts.push(`on ${plan.on_day}`)
|
||
if (plan.on_week) parts.push(`week ${plan.on_week}`)
|
||
if (plan.on_month) parts.push(`in ${plan.on_month}`)
|
||
return parts.join(' · ')
|
||
}
|
||
|
||
// --- Slot create/edit ---
|
||
const openCreateSlotModal = () => {
|
||
setEditingSlot(null)
|
||
setSlotForm({
|
||
slot_type: 'work',
|
||
scheduled_at: '09:00',
|
||
estimated_duration: 25,
|
||
event_type: '',
|
||
event_data_code: '',
|
||
event_data_event: '',
|
||
priority: 50,
|
||
})
|
||
setWarnings([])
|
||
setError('')
|
||
setShowSlotModal(true)
|
||
}
|
||
|
||
const openEditSlotModal = (slot: TimeSlotResponse) => {
|
||
setEditingSlot(slot)
|
||
setSlotForm({
|
||
slot_type: slot.slot_type,
|
||
scheduled_at: slot.scheduled_at,
|
||
estimated_duration: slot.estimated_duration,
|
||
event_type: slot.event_type || '',
|
||
event_data_code: slot.event_data?.code || '',
|
||
event_data_event: slot.event_data?.event || '',
|
||
priority: slot.priority,
|
||
})
|
||
setWarnings([])
|
||
setError('')
|
||
setShowSlotModal(true)
|
||
}
|
||
|
||
const buildEventData = () => {
|
||
if (!slotForm.event_type) return null
|
||
if (slotForm.event_type === 'job') {
|
||
return slotForm.event_data_code ? { type: 'Task', code: slotForm.event_data_code } : null
|
||
}
|
||
if (slotForm.event_type === 'system_event') {
|
||
return slotForm.event_data_event ? { event: slotForm.event_data_event } : null
|
||
}
|
||
return null
|
||
}
|
||
|
||
const buildPlanEventData = () => {
|
||
if (!planForm.event_type) return null
|
||
if (planForm.event_type === 'job') {
|
||
return planForm.event_data_code ? { type: 'Task', code: planForm.event_data_code } : null
|
||
}
|
||
if (planForm.event_type === 'system_event') {
|
||
return planForm.event_data_event ? { event: planForm.event_data_event } : null
|
||
}
|
||
return null
|
||
}
|
||
|
||
const openCreatePlanModal = () => {
|
||
setEditingPlan(null)
|
||
setPlanForm({
|
||
slot_type: 'work',
|
||
estimated_duration: 25,
|
||
at_time: '09:00',
|
||
on_day: '',
|
||
on_week: '',
|
||
on_month: '',
|
||
event_type: '',
|
||
event_data_code: '',
|
||
event_data_event: '',
|
||
})
|
||
setError('')
|
||
setShowPlanModal(true)
|
||
}
|
||
|
||
const openEditPlanModal = (plan: SchedulePlanResponse) => {
|
||
setEditingPlan(plan)
|
||
setPlanForm({
|
||
slot_type: plan.slot_type,
|
||
estimated_duration: plan.estimated_duration,
|
||
at_time: plan.at_time.slice(0, 5),
|
||
on_day: (plan.on_day?.toLowerCase() as Weekday | undefined) || '',
|
||
on_week: plan.on_week ? String(plan.on_week) : '',
|
||
on_month: (plan.on_month?.toLowerCase() as MonthName | undefined) || '',
|
||
event_type: plan.event_type || '',
|
||
event_data_code: plan.event_data?.code || '',
|
||
event_data_event: plan.event_data?.event || '',
|
||
})
|
||
setError('')
|
||
setShowPlanModal(true)
|
||
}
|
||
|
||
const handleSavePlan = async () => {
|
||
setPlanSaving(true)
|
||
setError('')
|
||
try {
|
||
const payload: any = {
|
||
slot_type: planForm.slot_type,
|
||
estimated_duration: planForm.estimated_duration,
|
||
at_time: planForm.at_time,
|
||
on_day: planForm.on_day || null,
|
||
on_week: planForm.on_week ? Number(planForm.on_week) : null,
|
||
on_month: planForm.on_month || null,
|
||
event_type: planForm.event_type || null,
|
||
event_data: buildPlanEventData(),
|
||
}
|
||
|
||
if (editingPlan) {
|
||
await api.patch(`/calendar/plans/${editingPlan.id}`, payload)
|
||
} else {
|
||
await api.post('/calendar/plans', payload)
|
||
}
|
||
|
||
setShowPlanModal(false)
|
||
fetchPlans()
|
||
if (activeTab === 'daily') {
|
||
fetchSlots(selectedDate)
|
||
}
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Save plan failed')
|
||
} finally {
|
||
setPlanSaving(false)
|
||
}
|
||
}
|
||
|
||
const handleSaveSlot = async () => {
|
||
setSlotSaving(true)
|
||
setError('')
|
||
setWarnings([])
|
||
try {
|
||
const payload: any = {
|
||
slot_type: slotForm.slot_type,
|
||
scheduled_at: slotForm.scheduled_at,
|
||
estimated_duration: slotForm.estimated_duration,
|
||
priority: slotForm.priority,
|
||
event_type: slotForm.event_type || null,
|
||
event_data: buildEventData(),
|
||
}
|
||
|
||
let response: any
|
||
if (editingSlot) {
|
||
// Edit existing slot
|
||
if (editingSlot.is_virtual) {
|
||
response = await api.patch(`/calendar/slots/virtual/${editingSlot.slot_id}`, payload)
|
||
} else if (editingSlot.slot_id) {
|
||
response = await api.patch(`/calendar/slots/${editingSlot.slot_id}`, payload)
|
||
} else {
|
||
throw new Error('Missing slot identifier for edit')
|
||
}
|
||
} else {
|
||
// Create new slot
|
||
payload.date = selectedDate
|
||
response = await api.post('/calendar/slots', payload)
|
||
}
|
||
|
||
// Check for warnings in response
|
||
if (response.data?.warnings && response.data.warnings.length > 0) {
|
||
setWarnings(response.data.warnings)
|
||
}
|
||
|
||
setShowSlotModal(false)
|
||
fetchSlots(selectedDate)
|
||
} catch (err: any) {
|
||
const detail = err.response?.data?.detail
|
||
if (typeof detail === 'string' && detail.toLowerCase().includes('overlap')) {
|
||
setError(`⚠️ Overlap conflict: ${detail}`)
|
||
} else if (detail && typeof detail === 'object') {
|
||
const message = typeof detail.message === 'string' ? detail.message : 'Save failed'
|
||
const conflicts = Array.isArray(detail.conflicts) ? detail.conflicts : []
|
||
if (conflicts.length > 0) {
|
||
const summary = conflicts
|
||
.map((conflict: any) => `${conflict.slot_type || 'slot'} at ${conflict.scheduled_at || 'unknown time'}`)
|
||
.join(', ')
|
||
setError(`⚠️ ${message}: ${summary}`)
|
||
} else {
|
||
setError(`⚠️ ${message}`)
|
||
}
|
||
} else {
|
||
setError(detail || 'Save failed')
|
||
}
|
||
} finally {
|
||
setSlotSaving(false)
|
||
}
|
||
}
|
||
|
||
// --- Slot cancel ---
|
||
const handleCancelSlot = async (slot: TimeSlotResponse) => {
|
||
if (!confirm(`Cancel this ${slot.slot_type} slot at ${slot.scheduled_at}?`)) return
|
||
setError('')
|
||
try {
|
||
if (slot.is_virtual) {
|
||
await api.post(`/calendar/slots/virtual/${slot.slot_id}/cancel`)
|
||
} else if (slot.slot_id) {
|
||
await api.post(`/calendar/slots/${slot.slot_id}/cancel`)
|
||
} else {
|
||
throw new Error('Missing slot identifier for cancel')
|
||
}
|
||
fetchSlots(selectedDate)
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Cancel failed')
|
||
}
|
||
}
|
||
|
||
// --- Plan cancel ---
|
||
const handleCancelPlan = async (plan: SchedulePlanResponse) => {
|
||
if (!confirm(`Cancel plan #${plan.id}? This won't affect past materialized slots.`)) return
|
||
setError('')
|
||
try {
|
||
await api.post(`/calendar/plans/${plan.id}/cancel`)
|
||
fetchPlans()
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Cancel plan failed')
|
||
}
|
||
}
|
||
|
||
// Check if a date is in the past
|
||
const isPastDate = dayjs(selectedDate).isBefore(dayjs().startOf('day'))
|
||
|
||
return (
|
||
<div className="calendar-page">
|
||
<div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
||
<h2>📅 Calendar</h2>
|
||
</div>
|
||
|
||
{/* Tab switcher */}
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
|
||
<button
|
||
className={activeTab === 'daily' ? 'btn-primary' : 'btn-secondary'}
|
||
onClick={() => setActiveTab('daily')}
|
||
>
|
||
Daily View
|
||
</button>
|
||
<button
|
||
className={activeTab === 'plans' ? 'btn-primary' : 'btn-secondary'}
|
||
onClick={() => setActiveTab('plans')}
|
||
>
|
||
Plans ({plans.length})
|
||
</button>
|
||
</div>
|
||
|
||
{error && <div className="error-message" style={{ color: 'var(--danger)', marginBottom: 12 }}>{error}</div>}
|
||
|
||
{/* Workload warnings banner */}
|
||
{warnings.length > 0 && (
|
||
<div style={{ background: 'var(--warning-bg, #fff3cd)', border: '1px solid var(--warning-border, #ffc107)', borderRadius: 8, padding: 12, marginBottom: 12 }}>
|
||
<strong>⚠️ Workload Warnings:</strong>
|
||
<ul style={{ margin: '4px 0 0 16px', padding: 0 }}>
|
||
{warnings.map((w, i) => (
|
||
<li key={i}>{w.message} ({w.period} {w.slot_type}: {w.current}/{w.minimum} min)</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'daily' && (
|
||
<>
|
||
{/* Date navigation */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
|
||
<button className="btn-secondary" onClick={goPrev}>◀</button>
|
||
<input
|
||
type="date"
|
||
value={selectedDate}
|
||
onChange={handleDateChange}
|
||
style={{ fontSize: '1rem', padding: '4px 8px' }}
|
||
/>
|
||
<button className="btn-secondary" onClick={goNext}>▶</button>
|
||
<button className="btn-transition" onClick={goToday}>Today</button>
|
||
{!isPastDate && (
|
||
<button className="btn-primary" onClick={openCreateSlotModal} style={{ marginLeft: 'auto' }}>+ New Slot</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Deferred slots notice */}
|
||
{slots.some(s => s.status === 'deferred') && (
|
||
<div style={{ background: 'var(--warning-bg, #fff3cd)', border: '1px solid var(--warning-border, #ffc107)', borderRadius: 8, padding: 10, marginBottom: 12, fontSize: '0.9rem' }}>
|
||
⏳ Some slots are <strong>deferred</strong> — they were postponed due to scheduling conflicts or agent unavailability.
|
||
</div>
|
||
)}
|
||
|
||
{/* Slot list */}
|
||
{loading ? (
|
||
<div className="loading">Loading...</div>
|
||
) : slots.length === 0 ? (
|
||
<div className="empty" style={{ padding: '40px 0', color: 'var(--text-secondary)', textAlign: 'center' }}>
|
||
No slots scheduled for {dayjs(selectedDate).format('MMMM D, YYYY')}.
|
||
</div>
|
||
) : (
|
||
<div className="milestone-grid">
|
||
{slots.map((slot) => (
|
||
<div
|
||
key={slot.slot_id}
|
||
className="milestone-card"
|
||
style={{ opacity: slot.is_virtual ? 0.8 : 1 }}
|
||
>
|
||
<div className="milestone-card-header" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||
<span style={{ fontSize: '1.2rem' }}>{SLOT_TYPE_ICONS[slot.slot_type] || '📋'}</span>
|
||
<span className="badge">{slot.slot_type.replace('_', ' ')}</span>
|
||
<span className={`badge ${STATUS_CLASSES[slot.status] || ''}`}>{slot.status.replace('_', ' ')}</span>
|
||
{slot.is_virtual && <span className="badge" style={{ background: 'var(--text-secondary)', color: 'white', fontSize: '0.7rem' }}>plan</span>}
|
||
<span style={{ marginLeft: 'auto', fontWeight: 600 }}>{slot.scheduled_at}</span>
|
||
</div>
|
||
<div style={{ marginTop: 8, display: 'flex', gap: 16, fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
|
||
<span>⏱ {slot.estimated_duration} min</span>
|
||
<span>⚡ Priority: {slot.priority}</span>
|
||
{slot.event_type && <span>📌 {slot.event_type.replace('_', ' ')}</span>}
|
||
</div>
|
||
{slot.event_data && slot.event_data.code && (
|
||
<div style={{ marginTop: 4, fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
|
||
🔗 {slot.event_data.code}
|
||
</div>
|
||
)}
|
||
{slot.event_data && slot.event_data.event && (
|
||
<div style={{ marginTop: 4, fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
|
||
📣 {slot.event_data.event}
|
||
</div>
|
||
)}
|
||
{/* Action buttons for non-past, modifiable slots */}
|
||
{!isPastDate && (slot.status === 'not_started' || slot.status === 'deferred') && (
|
||
<div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
|
||
<button
|
||
className="btn-transition"
|
||
style={{ padding: '4px 10px', fontSize: '0.8rem' }}
|
||
onClick={() => openEditSlotModal(slot)}
|
||
>
|
||
✏️ Edit
|
||
</button>
|
||
<button
|
||
className="btn-danger"
|
||
style={{ padding: '4px 10px', fontSize: '0.8rem' }}
|
||
onClick={() => handleCancelSlot(slot)}
|
||
>
|
||
❌ Cancel
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{activeTab === 'plans' && (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
|
||
<button className="btn-primary" onClick={openCreatePlanModal}>+ New Plan</button>
|
||
</div>
|
||
|
||
<div className="milestone-grid">
|
||
{plans.length === 0 ? (
|
||
<div className="empty" style={{ padding: '40px 0', color: 'var(--text-secondary)', textAlign: 'center' }}>
|
||
No schedule plans configured.
|
||
</div>
|
||
) : (
|
||
plans.map((plan) => (
|
||
<div key={plan.id} className="milestone-card">
|
||
<div className="milestone-card-header" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||
<span style={{ fontSize: '1.2rem' }}>{SLOT_TYPE_ICONS[plan.slot_type] || '📋'}</span>
|
||
<span className="badge">{plan.slot_type.replace('_', ' ')}</span>
|
||
{!plan.is_active && <span className="badge status-closed">inactive</span>}
|
||
<span style={{ marginLeft: 'auto', fontWeight: 600 }}>Plan #{plan.id}</span>
|
||
</div>
|
||
<div style={{ marginTop: 8, fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
|
||
<div>🔄 {formatPlanSchedule(plan)}</div>
|
||
<div>⏱ {plan.estimated_duration} min</div>
|
||
{plan.event_type && <div>📌 {plan.event_type.replace('_', ' ')}</div>}
|
||
</div>
|
||
{plan.is_active && (
|
||
<div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
|
||
<button
|
||
className="btn-transition"
|
||
style={{ padding: '4px 10px', fontSize: '0.8rem' }}
|
||
onClick={() => openEditPlanModal(plan)}
|
||
>
|
||
✏️ Edit Plan
|
||
</button>
|
||
<button
|
||
className="btn-danger"
|
||
style={{ padding: '4px 10px', fontSize: '0.8rem' }}
|
||
onClick={() => handleCancelPlan(plan)}
|
||
>
|
||
❌ Cancel Plan
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Create/Edit Slot Modal */}
|
||
{showSlotModal && (
|
||
<div className="modal-overlay" onClick={() => setShowSlotModal(false)}>
|
||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||
<h3>{editingSlot ? 'Edit Slot' : 'New Slot'}</h3>
|
||
<p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||
Date: <strong>{dayjs(selectedDate).format('MMMM D, YYYY')}</strong>
|
||
</p>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Slot Type</strong>
|
||
<select
|
||
value={slotForm.slot_type}
|
||
onChange={(e) => setSlotForm({ ...slotForm, slot_type: e.target.value as SlotType })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
{SLOT_TYPES.map((t) => (
|
||
<option key={t.value} value={t.value}>{t.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Scheduled At</strong>
|
||
<input
|
||
type="time"
|
||
value={slotForm.scheduled_at}
|
||
onChange={(e) => setSlotForm({ ...slotForm, scheduled_at: e.target.value })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Estimated Duration (minutes, 1–50)</strong>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={50}
|
||
value={slotForm.estimated_duration}
|
||
onChange={(e) => setSlotForm({ ...slotForm, estimated_duration: Number(e.target.value) })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Priority (0–99)</strong>
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
max={99}
|
||
value={slotForm.priority}
|
||
onChange={(e) => setSlotForm({ ...slotForm, priority: Number(e.target.value) })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Event Type</strong>
|
||
<select
|
||
value={slotForm.event_type}
|
||
onChange={(e) => setSlotForm({ ...slotForm, event_type: e.target.value })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
<option value="">None</option>
|
||
{EVENT_TYPES.map((t) => (
|
||
<option key={t.value} value={t.value}>{t.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
{slotForm.event_type === 'job' && (
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Job Code</strong>
|
||
<input
|
||
type="text"
|
||
value={slotForm.event_data_code}
|
||
onChange={(e) => setSlotForm({ ...slotForm, event_data_code: e.target.value })}
|
||
placeholder="e.g. TASK-42"
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
)}
|
||
|
||
{slotForm.event_type === 'system_event' && (
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>System Event</strong>
|
||
<select
|
||
value={slotForm.event_data_event}
|
||
onChange={(e) => setSlotForm({ ...slotForm, event_data_event: e.target.value })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
<option value="">Select event</option>
|
||
<option value="ScheduleToday">Schedule Today</option>
|
||
<option value="SummaryToday">Summary Today</option>
|
||
<option value="ScheduledGatewayRestart">Scheduled Gateway Restart</option>
|
||
</select>
|
||
</label>
|
||
)}
|
||
|
||
<div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
|
||
<button
|
||
className="btn-primary"
|
||
onClick={handleSaveSlot}
|
||
disabled={slotSaving}
|
||
>
|
||
{slotSaving ? 'Saving...' : 'Save'}
|
||
</button>
|
||
<button className="btn-back" onClick={() => setShowSlotModal(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showPlanModal && (
|
||
<div className="modal-overlay" onClick={() => setShowPlanModal(false)}>
|
||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||
<h3>{editingPlan ? 'Edit Plan' : 'New Plan'}</h3>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Slot Type</strong>
|
||
<select
|
||
value={planForm.slot_type}
|
||
onChange={(e) => setPlanForm({ ...planForm, slot_type: e.target.value as SlotType })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
{SLOT_TYPES.map((t) => (
|
||
<option key={t.value} value={t.value}>{t.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>At Time</strong>
|
||
<input
|
||
type="time"
|
||
value={planForm.at_time}
|
||
onChange={(e) => setPlanForm({ ...planForm, at_time: e.target.value })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Estimated Duration (minutes, 1–50)</strong>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={50}
|
||
value={planForm.estimated_duration}
|
||
onChange={(e) => setPlanForm({ ...planForm, estimated_duration: Number(e.target.value) })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>On Day (optional)</strong>
|
||
<select
|
||
value={planForm.on_day}
|
||
onChange={(e) => setPlanForm({ ...planForm, on_day: e.target.value as Weekday | '' })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
<option value="">Every day</option>
|
||
{WEEKDAYS.map((d) => (
|
||
<option key={d.value} value={d.value}>{d.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>On Week (optional)</strong>
|
||
<select
|
||
value={planForm.on_week}
|
||
onChange={(e) => setPlanForm({ ...planForm, on_week: e.target.value })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
<option value="">Every matching week</option>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
</select>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>On Month (optional)</strong>
|
||
<select
|
||
value={planForm.on_month}
|
||
onChange={(e) => setPlanForm({ ...planForm, on_month: e.target.value as MonthName | '' })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
<option value="">Every month</option>
|
||
{MONTHS.map((m) => (
|
||
<option key={m.value} value={m.value}>{m.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Event Type</strong>
|
||
<select
|
||
value={planForm.event_type}
|
||
onChange={(e) => setPlanForm({ ...planForm, event_type: e.target.value })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
<option value="">None</option>
|
||
{EVENT_TYPES.map((t) => (
|
||
<option key={t.value} value={t.value}>{t.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
{planForm.event_type === 'job' && (
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>Job Code</strong>
|
||
<input
|
||
type="text"
|
||
value={planForm.event_data_code}
|
||
onChange={(e) => setPlanForm({ ...planForm, event_data_code: e.target.value })}
|
||
placeholder="e.g. TASK-42"
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
/>
|
||
</label>
|
||
)}
|
||
|
||
{planForm.event_type === 'system_event' && (
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<strong>System Event</strong>
|
||
<select
|
||
value={planForm.event_data_event}
|
||
onChange={(e) => setPlanForm({ ...planForm, event_data_event: e.target.value })}
|
||
style={{ width: '100%', marginTop: 4 }}
|
||
>
|
||
<option value="">Select event</option>
|
||
<option value="ScheduleToday">Schedule Today</option>
|
||
<option value="SummaryToday">Summary Today</option>
|
||
<option value="ScheduledGatewayRestart">Scheduled Gateway Restart</option>
|
||
</select>
|
||
</label>
|
||
)}
|
||
|
||
<div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
|
||
<button className="btn-primary" onClick={handleSavePlan} disabled={planSaving}>
|
||
{planSaving ? 'Saving...' : 'Save Plan'}
|
||
</button>
|
||
<button className="btn-back" onClick={() => setShowPlanModal(false)}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|