559 lines
20 KiB
TypeScript
559 lines
20 KiB
TypeScript
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, useRef, useEffect } from 'react';
|
||
import { Check, X, Loader2, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
|
||
|
||
const DEFAULT_TIMEZONE = 'America/Toronto';
|
||
|
||
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
||
const hours = Array.from({ length: 24 }, (_, i) => i); // 0-23
|
||
|
||
// Get the dates for Mon-Fri of a week in a specific timezone, offset by N weeks
|
||
const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
|
||
// Get "now" in the target timezone
|
||
const now = new Date();
|
||
const formatter = new Intl.DateTimeFormat('en-CA', {
|
||
timeZone: timezone,
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
});
|
||
|
||
// Parse today's date in the target timezone
|
||
const todayStr = formatter.format(now);
|
||
const [year, month, day] = todayStr.split('-').map(Number);
|
||
|
||
// Calculate Monday of this week
|
||
const todayDate = new Date(year, month - 1, day);
|
||
const dayOfWeek = todayDate.getDay();
|
||
const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
|
||
|
||
const mondayDate = new Date(year, month - 1, day + daysToMonday + weekOffset * 7);
|
||
|
||
return dayNames.map((_, i) => {
|
||
const d = new Date(mondayDate);
|
||
d.setDate(mondayDate.getDate() + i);
|
||
const y = d.getFullYear();
|
||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||
const dd = String(d.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${dd}`;
|
||
});
|
||
};
|
||
|
||
// Convert a date string and hour in a timezone to a UTC Date
|
||
const toUTCDate = (dateStr: string, hour: number, timezone: string): Date => {
|
||
// Create a date string that represents the given hour in the given timezone
|
||
// Then parse it to get the UTC equivalent
|
||
const localDateStr = `${dateStr}T${String(hour).padStart(2, '0')}:00:00`;
|
||
|
||
// Use a trick: format in UTC then in target TZ to find the offset
|
||
const testDate = new Date(localDateStr + 'Z'); // Treat as UTC first
|
||
|
||
// Get what hour this would be in the target timezone
|
||
const tzHour = parseInt(
|
||
new Intl.DateTimeFormat('en-US', {
|
||
timeZone: timezone,
|
||
hour: 'numeric',
|
||
hour12: false,
|
||
}).format(testDate)
|
||
);
|
||
|
||
// Calculate offset in hours
|
||
const offset = tzHour - testDate.getUTCHours();
|
||
|
||
// Adjust: if we want `hour` in timezone, subtract the offset to get UTC
|
||
const utcDate = new Date(localDateStr + 'Z');
|
||
utcDate.setUTCHours(utcDate.getUTCHours() - offset);
|
||
|
||
return utcDate;
|
||
};
|
||
|
||
const MIN_WEEK_OFFSET = 0;
|
||
const DEFAULT_MAX_WEEK_OFFSET = 1;
|
||
const EXPANDED_MAX_WEEK_OFFSET = 4;
|
||
|
||
// Format timezone for display (e.g., "America/Toronto" -> "Toronto (EST)")
|
||
const formatTimezoneDisplay = (timezone: string): string => {
|
||
try {
|
||
const parts = timezone.split('/');
|
||
const city = parts[parts.length - 1].replace(/_/g, ' ');
|
||
const now = new Date();
|
||
const formatter = new Intl.DateTimeFormat('en-US', {
|
||
timeZone: timezone,
|
||
timeZoneName: 'short',
|
||
});
|
||
const formattedParts = formatter.formatToParts(now);
|
||
const tzAbbrev = formattedParts.find((p) => p.type === 'timeZoneName')?.value || '';
|
||
return `${city} (${tzAbbrev})`;
|
||
} catch {
|
||
return timezone;
|
||
}
|
||
};
|
||
|
||
// Get timezone abbreviation (e.g., "America/Toronto" -> "EST")
|
||
const getTimezoneAbbrev = (timezone: string): string => {
|
||
try {
|
||
const now = new Date();
|
||
const formatter = new Intl.DateTimeFormat('en-US', {
|
||
timeZone: timezone,
|
||
timeZoneName: 'short',
|
||
});
|
||
const parts = formatter.formatToParts(now);
|
||
return parts.find((p) => p.type === 'timeZoneName')?.value || '';
|
||
} catch {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
// Convert an hour from one timezone to another
|
||
const convertHourBetweenTimezones = (
|
||
hour: number,
|
||
dateStr: string,
|
||
fromTimezone: string,
|
||
toTimezone: string
|
||
): number => {
|
||
try {
|
||
// Create a UTC date for the given hour in the source timezone
|
||
const utcDate = toUTCDate(dateStr, hour, fromTimezone);
|
||
|
||
// Format the hour in the target timezone
|
||
const targetHour = parseInt(
|
||
new Intl.DateTimeFormat('en-US', {
|
||
timeZone: toTimezone,
|
||
hour: 'numeric',
|
||
hour12: false,
|
||
}).format(utcDate)
|
||
);
|
||
|
||
return targetHour;
|
||
} catch {
|
||
return hour;
|
||
}
|
||
};
|
||
|
||
interface AvailabilityHeatmapProps {
|
||
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 AvailabilityHeatmap = ({
|
||
slots,
|
||
selectedParticipants,
|
||
onSlotSelect,
|
||
showPartialAvailability = false,
|
||
isLoading = false,
|
||
weekOffset = 0,
|
||
onWeekOffsetChange,
|
||
displayTimezone = DEFAULT_TIMEZONE,
|
||
showSecondaryTimezone = false,
|
||
secondaryTimezone = DEFAULT_TIMEZONE,
|
||
}: AvailabilityHeatmapProps) => {
|
||
const [expanded, setExpanded] = useState(false);
|
||
const maxWeekOffset = expanded ? EXPANDED_MAX_WEEK_OFFSET : DEFAULT_MAX_WEEK_OFFSET;
|
||
const weekDates = getWeekDates(displayTimezone, weekOffset);
|
||
|
||
// Get current time info in display timezone
|
||
const getCurrentTimeInfo = () => {
|
||
const now = new Date();
|
||
const formatter = new Intl.DateTimeFormat('en-CA', {
|
||
timeZone: displayTimezone,
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
});
|
||
const hourFormatter = new Intl.DateTimeFormat('en-US', {
|
||
timeZone: displayTimezone,
|
||
hour: 'numeric',
|
||
hour12: false,
|
||
});
|
||
const todayStr = formatter.format(now);
|
||
const currentHour = parseInt(hourFormatter.format(now));
|
||
return { todayStr, currentHour };
|
||
};
|
||
|
||
const { todayStr, currentHour } = getCurrentTimeInfo();
|
||
const todayIndex = weekDates.indexOf(todayStr);
|
||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||
const currentHourRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Track scroll position for fade indicators
|
||
const [canScrollUp, setCanScrollUp] = useState(false);
|
||
const [canScrollDown, setCanScrollDown] = useState(true);
|
||
|
||
const handleScroll = () => {
|
||
if (!scrollContainerRef.current) return;
|
||
const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
|
||
setCanScrollUp(scrollTop > 10);
|
||
setCanScrollDown(scrollTop < scrollHeight - clientHeight - 10);
|
||
};
|
||
|
||
// Initialize scroll indicators after content loads
|
||
useEffect(() => {
|
||
const timer = setTimeout(handleScroll, 150);
|
||
return () => clearTimeout(timer);
|
||
}, [slots.length, selectedParticipants.length, isLoading]);
|
||
|
||
// Auto-scroll to position current hour as 3rd visible row
|
||
useEffect(() => {
|
||
// Only scroll when we have content to show
|
||
if (selectedParticipants.length === 0 || isLoading) return;
|
||
|
||
// Small delay to ensure DOM is ready after render
|
||
const timer = setTimeout(() => {
|
||
if (!scrollContainerRef.current) return;
|
||
|
||
const rowHeight = 52; // h-12 (48px) + gap (4px)
|
||
const rowsAbove = 2;
|
||
|
||
// Calculate which hour should be at the top
|
||
const targetHour = todayIndex >= 0
|
||
? Math.max(0, currentHour - rowsAbove)
|
||
: 7; // Default to 7am for other weeks
|
||
|
||
scrollContainerRef.current.scrollTop = targetHour * rowHeight;
|
||
}, 100);
|
||
|
||
return () => clearTimeout(timer);
|
||
}, [weekOffset, todayIndex, currentHour, selectedParticipants.length, isLoading, slots.length]);
|
||
|
||
// Find a slot that matches the given display timezone date/hour
|
||
const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => {
|
||
// Convert display timezone date/hour to UTC
|
||
const targetUTC = toUTCDate(dateStr, hour, displayTimezone);
|
||
|
||
return slots.find((s) => {
|
||
const slotDate = new Date(s.start_time);
|
||
// Compare UTC timestamps (with some tolerance for rounding)
|
||
return Math.abs(slotDate.getTime() - targetUTC.getTime()) < 60000; // 1 minute tolerance
|
||
});
|
||
};
|
||
|
||
const getEffectiveAvailability = (slot: TimeSlot) => {
|
||
if (slot.availability === 'partial' && !showPartialAvailability) {
|
||
return 'none';
|
||
}
|
||
return slot.availability;
|
||
};
|
||
|
||
const formatHour = (hour: number) => {
|
||
return `${hour.toString().padStart(2, '0')}:00`;
|
||
};
|
||
|
||
const isSlotTooSoon = (dateStr: string, hour: number) => {
|
||
// Convert to UTC and compare with current time
|
||
const slotTimeUTC = toUTCDate(dateStr, hour, displayTimezone);
|
||
const now = new Date();
|
||
const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
|
||
return slotTimeUTC < twoHoursFromNow;
|
||
};
|
||
|
||
const getWeekDateRange = () => {
|
||
if (weekDates.length < 5) return '';
|
||
const monday = new Date(weekDates[0] + 'T12:00:00Z');
|
||
const friday = new Date(weekDates[4] + 'T12:00:00Z');
|
||
|
||
const format = (d: Date) =>
|
||
d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' });
|
||
return `${format(monday)} – ${format(friday)}`;
|
||
};
|
||
|
||
// Format hour for display in popover (in the display timezone)
|
||
const formatDisplayTime = (hour: number) => {
|
||
// Create a date at that hour
|
||
const date = new Date();
|
||
date.setHours(hour, 0, 0, 0);
|
||
return new Intl.DateTimeFormat('en-US', {
|
||
hour: 'numeric',
|
||
minute: '2-digit',
|
||
hour12: true,
|
||
}).format(date);
|
||
};
|
||
|
||
if (selectedParticipants.length === 0) {
|
||
return (
|
||
<div className="bg-card rounded-xl shadow-card p-8 text-center animate-fade-in">
|
||
<div className="text-muted-foreground">
|
||
<p className="text-lg font-medium mb-2">Select participants to view availability</p>
|
||
<p className="text-sm">Add people from the search above to see their common free times</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="bg-card rounded-xl shadow-card p-8 text-center animate-fade-in">
|
||
<Loader2 className="w-8 h-8 mx-auto mb-4 animate-spin text-primary" />
|
||
<p className="text-muted-foreground">Loading availability...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="bg-card rounded-xl shadow-card p-6 animate-slide-up">
|
||
<div className="mb-6 flex justify-between items-start">
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-lg font-semibold text-foreground">
|
||
Common Availability — Week of {getWeekDateRange()}
|
||
</h3>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground mt-1">
|
||
{selectedParticipants.length} participant{selectedParticipants.length > 1 ? 's' : ''}: {selectedParticipants.map(p => p.name.split(' ')[0]).join(', ')}
|
||
<span className="mx-2">•</span>
|
||
<span className="text-primary font-medium">
|
||
{`Times in ${formatTimezoneDisplay(displayTimezone)}`}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
{onWeekOffsetChange && (
|
||
<div className="flex items-center gap-1">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8"
|
||
disabled={weekOffset <= MIN_WEEK_OFFSET}
|
||
onClick={() => onWeekOffsetChange(weekOffset - 1)}
|
||
>
|
||
<ChevronLeft className="w-4 h-4" />
|
||
</Button>
|
||
{weekOffset !== 0 && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-8 text-xs"
|
||
onClick={() => onWeekOffsetChange(0)}
|
||
>
|
||
This week
|
||
</Button>
|
||
)}
|
||
{weekOffset < maxWeekOffset ? (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8"
|
||
onClick={() => onWeekOffsetChange(weekOffset + 1)}
|
||
>
|
||
<ChevronRight className="w-4 h-4" />
|
||
</Button>
|
||
) : !expanded ? (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="h-8 text-xs gap-1"
|
||
onClick={() => setExpanded(true)}
|
||
>
|
||
<ChevronsRight className="w-3.5 h-3.5" />
|
||
Look further ahead
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8"
|
||
disabled
|
||
>
|
||
<ChevronRight className="w-4 h-4" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="relative">
|
||
{/* Scroll fade indicator - top */}
|
||
<div
|
||
className={cn(
|
||
"absolute top-0 left-0 right-0 h-8 bg-gradient-to-b from-card to-transparent z-20 pointer-events-none transition-opacity duration-200",
|
||
canScrollUp ? "opacity-100" : "opacity-0"
|
||
)}
|
||
/>
|
||
{/* Scroll fade indicator - bottom */}
|
||
<div
|
||
className={cn(
|
||
"absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-card via-card/80 to-transparent z-20 pointer-events-none transition-opacity duration-200 flex items-end justify-center pb-2",
|
||
canScrollDown ? "opacity-100" : "opacity-0"
|
||
)}
|
||
>
|
||
<span className="text-xs text-muted-foreground animate-pulse">↓ Scroll for more hours</span>
|
||
</div>
|
||
|
||
<div
|
||
className="overflow-x-auto overflow-y-auto max-h-[500px]"
|
||
ref={scrollContainerRef}
|
||
onScroll={handleScroll}
|
||
>
|
||
<div className="min-w-[600px]">
|
||
<div className={cn(
|
||
"grid gap-1 mb-2 sticky top-0 bg-card z-10",
|
||
showSecondaryTimezone
|
||
? "grid-cols-[50px_50px_repeat(5,1fr)]"
|
||
: "grid-cols-[60px_repeat(5,1fr)]"
|
||
)}>
|
||
{showSecondaryTimezone ? (
|
||
<>
|
||
<div className="text-center text-xs font-medium text-primary py-2">
|
||
{getTimezoneAbbrev(displayTimezone)}
|
||
</div>
|
||
<div className="text-center text-xs font-medium text-muted-foreground py-2">
|
||
{getTimezoneAbbrev(secondaryTimezone)}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
{dayNames.map((dayName, i) => (
|
||
<div
|
||
key={dayName}
|
||
className="text-center text-sm font-medium text-muted-foreground py-2"
|
||
>
|
||
<div>{dayName}</div>
|
||
<div className="text-xs opacity-70">
|
||
{weekDates[i]?.slice(5).replace('-', '/')}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
{hours.map((hour) => (
|
||
<div
|
||
key={hour}
|
||
ref={todayIndex >= 0 && hour === currentHour ? currentHourRef : undefined}
|
||
className={cn(
|
||
"grid gap-1",
|
||
showSecondaryTimezone
|
||
? "grid-cols-[50px_50px_repeat(5,1fr)]"
|
||
: "grid-cols-[60px_repeat(5,1fr)]"
|
||
)}
|
||
>
|
||
{showSecondaryTimezone ? (
|
||
<>
|
||
<div className="text-xs text-primary font-medium flex items-center justify-center gap-1">
|
||
{todayIndex >= 0 && hour === currentHour && (
|
||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||
)}
|
||
{formatHour(hour)}
|
||
</div>
|
||
<div className="text-xs text-muted-foreground flex items-center justify-center">
|
||
{formatHour(convertHourBetweenTimezones(hour, weekDates[0] || '', displayTimezone, secondaryTimezone))}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1">
|
||
{todayIndex >= 0 && hour === currentHour && (
|
||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||
)}
|
||
{formatHour(hour)}
|
||
</div>
|
||
)}
|
||
{weekDates.map((dateStr, dayIndex) => {
|
||
const slot = getSlot(dateStr, hour);
|
||
const dayName = dayNames[dayIndex];
|
||
const tooSoon = isSlotTooSoon(dateStr, hour);
|
||
if (!slot) return <div key={`${dateStr}-${hour}`} className="h-12 bg-muted rounded" />;
|
||
|
||
const effectiveAvailability = getEffectiveAvailability(slot);
|
||
|
||
return (
|
||
<Popover key={`${dateStr}-${hour}`}>
|
||
<PopoverTrigger asChild>
|
||
<button
|
||
className={cn(
|
||
"h-12 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||
tooSoon && "opacity-40 cursor-not-allowed",
|
||
!tooSoon && "hover:scale-105 hover:shadow-md",
|
||
effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
|
||
effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90",
|
||
effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90"
|
||
)}
|
||
/>
|
||
</PopoverTrigger>
|
||
<PopoverContent className="w-64 p-4 animate-scale-in" align="center">
|
||
<div className="space-y-3">
|
||
<div className="font-semibold text-foreground">
|
||
{dayName} {formatDisplayTime(hour)}–{formatDisplayTime(hour + 1)}
|
||
</div>
|
||
{tooSoon && (
|
||
<div className="text-sm text-muted-foreground italic">
|
||
This time slot has passed or is too soon to schedule
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
{selectedParticipants.map((participant) => {
|
||
const isAvailable = slot.availableParticipants.includes(participant.name);
|
||
|
||
return (
|
||
<div
|
||
key={participant.id}
|
||
className="flex items-center gap-2 text-sm"
|
||
>
|
||
{isAvailable ? (
|
||
<Check className="w-4 h-4 text-availability-full" />
|
||
) : (
|
||
<X className="w-4 h-4 text-destructive" />
|
||
)}
|
||
<span className={cn(
|
||
isAvailable ? "text-foreground" : "text-muted-foreground"
|
||
)}>
|
||
{participant.name.split(' ')[0]}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{effectiveAvailability !== 'none' && !tooSoon && (
|
||
<Button
|
||
variant="schedule"
|
||
className="w-full mt-2"
|
||
onClick={() => onSlotSelect(slot)}
|
||
>
|
||
Schedule
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
);
|
||
})}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-center gap-6 mt-6 pt-4 border-t border-border">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-4 h-4 rounded bg-availability-full"></div>
|
||
<span className="text-xs text-muted-foreground">All free</span>
|
||
</div>
|
||
{showPartialAvailability && (
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-4 h-4 rounded bg-availability-partial"></div>
|
||
<span className="text-xs text-muted-foreground">Partial</span>
|
||
</div>
|
||
)}
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-4 h-4 rounded bg-availability-none"></div>
|
||
<span className="text-xs text-muted-foreground">No overlap</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|