diff --git a/frontend/src/components/AvailabilityHeatmapV2.tsx b/frontend/src/components/AvailabilityHeatmapV2.tsx new file mode 100644 index 0000000..9638307 --- /dev/null +++ b/frontend/src/components/AvailabilityHeatmapV2.tsx @@ -0,0 +1,431 @@ +import { TimeSlot, Participant } from '@/types/calendar'; +import { cn } from '@/lib/utils'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@/components/ui/popover'; +import { Button } from '@/components/ui/button'; +import { useState, useMemo, useRef, useEffect } from 'react'; +import { Check, X, Loader2, ChevronLeft, ChevronRight, ChevronsRight, Clock, Calendar as CalendarIcon, Sun, Moon, Users } from 'lucide-react'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; + +const DEFAULT_TIMEZONE = 'America/Toronto'; +const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; +const WORKING_HOUR_START = 8; // 8 AM +const WORKING_HOUR_END = 18; // 6 PM +const ALL_HOURS = Array.from({ length: 24 }, (_, i) => i); +const WORKING_HOURS = Array.from({ length: WORKING_HOUR_END - WORKING_HOUR_START + 1 }, (_, i) => i + WORKING_HOUR_START); + +// Helper to check if a slot is in the past or too close (2h buffer) +const isSlotTooSoon = (slotDate: number) => { + const now = Date.now(); + const twoHoursFromNow = now + 2 * 60 * 60 * 1000; + return slotDate < twoHoursFromNow; +}; + +// Reuse previous timezone helpers or simplify +const getWeekDates = (timezone: string, weekOffset: number = 0): Date[] => { + const now = new Date(); + const formatter = new Intl.DateTimeFormat('en-CA', { + timeZone: timezone, + year: 'numeric', + month: '2-digit', + day: '2-digit', + }); + + const todayStr = formatter.format(now); + const [year, month, day] = todayStr.split('-').map(Number); + + const todayDate = new Date(year, month - 1, day); + const dayOfWeek = todayDate.getDay(); + // If Sunday (0), go back 6 days to Monday. If Mon (1), go back 0. If Sat (6), go back 5. + // Actually standard logic: Mon=1...Sun=7. + // Let's assume standard ISO week start (Mon) + const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; + const mondayDate = new Date(year, month - 1, day + daysToMonday + weekOffset * 7); + + return Array.from({ length: 5 }, (_, i) => { + const d = new Date(mondayDate); + d.setDate(mondayDate.getDate() + i); + return d; + }); +}; + +const formatTimezoneDisplay = (timezone: string): string => { + try { + const parts = timezone.split('/'); + const city = parts[parts.length - 1].replace(/_/g, ' '); + return city; + } catch { + return timezone; + } +}; + +interface AvailabilityHeatmapV2Props { + slots: TimeSlot[]; + selectedParticipants: Participant[]; + onSlotSelect: (slot: TimeSlot) => void; + showPartialAvailability?: boolean; + isLoading?: boolean; + weekOffset?: number; + onWeekOffsetChange?: (offset: number) => void; + displayTimezone?: string; + showSecondaryTimezone?: boolean; + secondaryTimezone?: string; +} + +export const AvailabilityHeatmapV2 = ({ + slots, + selectedParticipants, + onSlotSelect, + showPartialAvailability = false, + isLoading = false, + weekOffset = 0, + onWeekOffsetChange, + displayTimezone = DEFAULT_TIMEZONE, + showSecondaryTimezone = false, + secondaryTimezone = DEFAULT_TIMEZONE, +}: AvailabilityHeatmapV2Props) => { + const [showFullDay, setShowFullDay] = useState(false); + const activeHours = showFullDay ? ALL_HOURS : WORKING_HOURS; + + const weekDates = useMemo(() => getWeekDates(displayTimezone, weekOffset), [displayTimezone, weekOffset]); + + // Pre-compute slots lookup map for O(1) access + // Key: YYYY-MM-DD:Hour + const slotsMap = useMemo(() => { + const map = new Map(); + slots.forEach(slot => { + // Assuming slot.start_time is ISO string. + // We need to match it to our grid's local time logic. + // This part is "flaky" in the original. + // The slot comes with a specific absolute time. + // We want to place it in the intersection of "Day (in DisplayTZ)" and "Hour (in DisplayTZ)". + + const d = new Date(slot.start_time); + // Format to DisplayTZ to find coordinate + const formatter = new Intl.DateTimeFormat('en-CA', { + timeZone: displayTimezone, + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: 'numeric', + hour12: false + }); + // "2023-10-25, 14" + const parts = formatter.formatToParts(d); + const year = parts.find(p => p.type === 'year')?.value; + const month = parts.find(p => p.type === 'month')?.value; + const day = parts.find(p => p.type === 'day')?.value; + const hour = parts.find(p => p.type === 'hour')?.value; + + if (year && month && day && hour) { + // Hour in 24h format might be "24" in some locales? No `hour12: false` gives 0-23 usually. + // But Intl sometimes returns "24"? No, 0-23. + let h = parseInt(hour, 10); + if (h === 24) h = 0; // Just in case + + const key = `${year}-${month}-${day}:${h}`; + map.set(key, slot); + } + }); + return map; + }, [slots, displayTimezone]); + + const formatDateKey = (date: Date) => { + const y = date.getFullYear(); + const m = String(date.getMonth() + 1).padStart(2, '0'); + const d = String(date.getDate()).padStart(2, '0'); + return `${y}-${m}-${d}`; + }; + + const formatDisplayDate = (date: Date) => { + return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); + }; + + const getSlotForCell = (date: Date, hour: number) => { + const key = `${formatDateKey(date)}:${hour}`; + return slotsMap.get(key); + }; + + const formatHour = (hour: number) => { + return new Date(0, 0, 0, hour).toLocaleTimeString('en-US', { + hour: 'numeric', + hour12: true, + }); + }; + + if (selectedParticipants.length === 0) { + return ( +
+ +

No participants selected

+

+ Select team members from the list above to compare calendars and find the perfect meeting time. +

+
+ ); + } + + return ( +
+ {/* Controls Bar */} +
+
+
+ +
+ + {weekDates[0]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} + {' - '} + {weekDates[4]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} + + + {weekOffset === 0 ? "This Week" : weekOffset === 1 ? "Next Week" : `${weekOffset} weeks out`} + +
+ +
+ +
+ +
+ + {formatTimezoneDisplay(displayTimezone)} +
+
+ +
+ +
+
+ + {/* Main Grid Card */} +
+ {isLoading && ( +
+ +
+ )} + +
+
+ {/* Grid Header */} +
+
+ TIME +
+ {weekDates.map(date => { + const isToday = new Date().toDateString() === date.toDateString(); + return ( +
+
{date.toLocaleDateString('en-US', { weekday: 'short' })}
+
+ {date.getDate()} +
+
+ ); + })} +
+ + {/* Grid Body */} +
+ {activeHours.map((hour) => { + const isNight = hour < 8 || hour >= 18; + return ( +
+ {/* Time Label - Sticky Left */} +
+ {isNight ? ( + + ) : ( + + )} + {formatHour(hour)} +
+ + {/* Days */} + {weekDates.map(date => { + const slot = getSlotForCell(date, hour); + const tooSoon = slot ? isSlotTooSoon(new Date(slot.start_time).getTime()) : true; + + // Availability logic + const availability = slot?.availability || 'none'; + const isNone = availability === 'none'; + const isPartial = availability === 'partial' && showPartialAvailability; + const isFull = availability === 'full'; + const isPartialHidden = availability === 'partial' && !showPartialAvailability; + + // Styling + let bgClass = ""; // Default transparent + if (!slot) bgClass = "bg-muted/10 pattern-diagonal-lines opacity-50"; + else if (isFull) bgClass = "bg-emerald-500/90 hover:bg-emerald-600 shadow-sm"; + else if (isPartial) bgClass = "bg-amber-400/80 hover:bg-amber-500 shadow-sm"; + else if (isNone || isPartialHidden) bgClass = "bg-transparent hover:bg-muted/20"; + + if (tooSoon && slot) bgClass = cn(bgClass, "opacity-30 cursor-not-allowed pattern-diagonal-lines"); + + return ( +
+ {slot ? ( + + +
+ {/* Mini Indicators for color-blind accessibility or density */} + {isFull && } +
+ + +
+

+ + {formatDisplayDate(date)} +

+
+ + {formatHour(hour)} - {formatHour(hour + 1)} +
+
+ +
+
+ {selectedParticipants.map(participant => { + const isAvailable = slot.availableParticipants.includes(participant.name); + return ( +
+
+
+ + {participant.name} + +
+ {isAvailable ? ( + + ) : ( + Busy + )} +
+ ); + })} +
+ + {(!isNone && !tooSoon) && ( + + )} +
+ + + ) : ( + // Placeholder for missing slots +
+ )} +
+ ); + })} +
+ ); + })} +
+
+
+ + {/* Legend */} +
+
+
+ All Available +
+ {showPartialAvailability && ( +
+
+ Partial Match +
+ )} +
+
+ Busy / No Match +
+
+
+ Past / Too Soon +
+
+
+
+ ); +}; + +function UsersPlaceholder() { + return ( +
+
+ +
+
+ +
+
+ ); +} + +// Importing Users icon since it was missing in imports diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 7aa9bb2..a612a69 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,7 +1,27 @@ -import { Calendar } from 'lucide-react'; +import { Calendar, Moon, Sun } from 'lucide-react'; import { getAvatarColor } from '@/lib/utils'; +import { useState, useEffect } from 'react'; +import { Button } from './ui/button'; export const Header = () => { + const [theme, setTheme] = useState<'light' | 'dark'>(() => { + if (typeof window !== 'undefined') { + return localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'; + } + return 'light'; + }); + + useEffect(() => { + const root = window.document.documentElement; + root.classList.remove('light', 'dark'); + root.classList.add(theme); + localStorage.setItem('theme', theme); + }, [theme]); + + const toggleTheme = () => { + setTheme(prev => prev === 'light' ? 'dark' : 'light'); + }; + return (
@@ -14,7 +34,15 @@ export const Header = () => {

Calendar Coordination

-
+
+
{isDropdownOpen && filteredParticipants.length > 0 && ( -
+
{filteredParticipants.map((participant, index) => (