monadical/common-availability
14
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: monadical:implement-more-feeedback
Branches Tags
monadical:main monadical:fix-selected-timezone monadical:implement-more-feeedback monadical:more-improvements-autofocus monadical:implement-feedback monadical:implement-authentication monadical:fix-timezone-issue monadical:cleanup-and-test
..
compare: monadical:3b06ff7538e96ad7eca2b1eb071f0c49db595b69
Branches Tags
monadical:main monadical:fix-selected-timezone monadical:implement-more-feeedback monadical:more-improvements-autofocus monadical:implement-feedback monadical:implement-authentication monadical:fix-timezone-issue monadical:cleanup-and-test

5 Commits
implement- ... 3b06ff7538

Author SHA1 Message Date
Joyce
3b06ff7538 Merge pull request 'update' (#10) from implement-more-feeedback into main 
Reviewed-on: #10
 2026-02-06 02:04:26 +00:00
Joyce
cba2ec2720 Merge pull request 'update' (#9) from implement-more-feeedback into main 
Reviewed-on: #9
 2026-02-06 01:36:02 +00:00
Joyce
541a1945e9 Merge pull request 'update' (#8) from implement-more-feeedback into main 
Reviewed-on: #8
 2026-02-05 22:20:12 +00:00
Joyce
125ecfaa5b Merge pull request 'update' (#7) from implement-more-feeedback into main 
Reviewed-on: #7
 2026-02-05 22:09:23 +00:00
Joyce
942a7d3c3a Merge pull request 'update' (#6) from implement-more-feeedback into main 
Reviewed-on: #6
 2026-02-05 18:48:36 +00:00
6 changed files with 222 additions and 273 deletions
Expand all files Collapse all files

55
backend/src/app/availability_service.py
View File

@@ -4,7 +4,6 @@ from uuid import UUID
from sqlalchemy import select from sqlalchemy import select
from sqlalchemy.ext.asyncio import AsyncSession from sqlalchemy.ext.asyncio import AsyncSession
from app.config import settings
from app.models import BusyBlock, Participant from app.models import BusyBlock, Participant
@@ -71,41 +70,37 @@ async def calculate_availability(
participants = {p.id: p for p in participants_result.scalars().all()} participants = {p.id: p for p in participants_result.scalars().all()}
days = ["Mon", "Tue", "Wed", "Thu", "Fri"] days = ["Mon", "Tue", "Wed", "Thu", "Fri"]
slot_interval = settings.slot_interval_minutes hours = list(range(0, 24))
slots_per_hour = 60 // slot_interval
slots = [] slots = []
for day_offset, day_name in enumerate(days): for day_offset, day_name in enumerate(days):
for hour in range(24): for hour in hours:
for slot_idx in range(slots_per_hour): slot_start = week_start + timedelta(days=day_offset, hours=hour)
minute = slot_idx * slot_interval slot_end = slot_start + timedelta(hours=1)
slot_start = week_start + timedelta(days=day_offset, hours=hour, minutes=minute)
slot_end = slot_start + timedelta(minutes=slot_interval)
available_participants = [] available_participants = []
for pid in participant_ids: for pid in participant_ids:
if is_participant_free(busy_map.get(pid, []), slot_start, slot_end): if is_participant_free(busy_map.get(pid, []), slot_start, slot_end):
participant = participants.get(pid) participant = participants.get(pid)
if participant: if participant:
available_participants.append(participant.name) available_participants.append(participant.name)
total = len(participant_ids) total = len(participant_ids)
available_count = len(available_participants) available_count = len(available_participants)
if available_count == total: if available_count == total:
availability = "full" availability = "full"
elif available_count > 0: elif available_count > 0:
availability = "partial" availability = "partial"
else: else:
availability = "none" availability = "none"
slots.append({ slots.append({
"day": slot_start.strftime("%Y-%m-%d"), "day": slot_start.strftime("%Y-%m-%d"),
"hour": hour, "hour": hour,
"minute": minute, "start_time": slot_start,
"start_time": slot_start, "availability": availability,
"availability": availability, "availableParticipants": available_participants,
"availableParticipants": available_participants, })
})
return slots return slots

1
backend/src/app/config.py
View File

@@ -5,7 +5,6 @@ class Settings(BaseSettings):
database_url: str = "postgresql+asyncpg://postgres:postgres@db:5432/availability" database_url: str = "postgresql+asyncpg://postgres:postgres@db:5432/availability"
sync_database_url: str = "postgresql://postgres:postgres@db:5432/availability" sync_database_url: str = "postgresql://postgres:postgres@db:5432/availability"
ics_refresh_interval_minutes: int = 15 ics_refresh_interval_minutes: int = 15
slot_interval_minutes: int = 15 # Time slot granularity (15, 30, or 60)
# SMTP Settings # SMTP Settings
smtp_host: str | None = None smtp_host: str | None = None

3
backend/src/app/zulip_service.py
View File

@@ -61,8 +61,7 @@ def send_zulip_notification(
f"📅 **Meeting Scheduled**\n" f"📅 **Meeting Scheduled**\n"
f"**What:** {title}\n" f"**What:** {title}\n"
f"**When:** {zulip_time}\n" f"**When:** {zulip_time}\n"
f"**Who:** {people}\n" f"**Who:** {people}"
f"*Booked via [Meetly](https://meetly.app.monadical.io/)*"
) )
request = { request = {

346
frontend/src/components/AvailabilityHeatmap.tsx
View File

@@ -12,14 +12,7 @@ import { Check, X, Loader2, ChevronLeft, ChevronRight, ChevronsRight } from 'luc
const DEFAULT_TIMEZONE = 'America/Toronto'; const DEFAULT_TIMEZONE = 'America/Toronto';
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const SLOT_INTERVAL_MINUTES = 15; const hours = Array.from({ length: 24 }, (_, i) => i); // 0-23
const SLOTS_PER_HOUR = 60 / SLOT_INTERVAL_MINUTES;
// Generate time slots: [{hour: 0, minute: 0}, {hour: 0, minute: 30}, {hour: 1, minute: 0}, ...]
const timeSlots = Array.from({ length: 24 * SLOTS_PER_HOUR }, (_, i) => ({
hour: Math.floor(i / SLOTS_PER_HOUR),
minute: (i % SLOTS_PER_HOUR) * SLOT_INTERVAL_MINUTES,
}));
// Get the dates for Mon-Fri of a week in a specific timezone, offset by N weeks // 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[] => { const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
@@ -53,11 +46,11 @@ const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
}); });
}; };
// Convert a date string, hour, and minute in a timezone to a UTC Date // Convert a date string and hour in a timezone to a UTC Date
const toUTCDate = (dateStr: string, hour: number, minute: number, timezone: string): Date => { const toUTCDate = (dateStr: string, hour: number, timezone: string): Date => {
// Create a date string that represents the given time in the given timezone // Create a date string that represents the given hour in the given timezone
// Then parse it to get the UTC equivalent // Then parse it to get the UTC equivalent
const localDateStr = `${dateStr}T${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`; 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 // Use a trick: format in UTC then in target TZ to find the offset
const testDate = new Date(localDateStr + 'Z'); // Treat as UTC first const testDate = new Date(localDateStr + 'Z'); // Treat as UTC first
@@ -118,32 +111,29 @@ const getTimezoneAbbrev = (timezone: string): string => {
} }
}; };
// Convert a time from one timezone to another // Convert an hour from one timezone to another
const convertTimeBetweenTimezones = ( const convertHourBetweenTimezones = (
hour: number, hour: number,
minute: number,
dateStr: string, dateStr: string,
fromTimezone: string, fromTimezone: string,
toTimezone: string toTimezone: string
): { hour: number; minute: number } => { ): number => {
try { try {
// Create a UTC date for the given time in the source timezone // Create a UTC date for the given hour in the source timezone
const utcDate = toUTCDate(dateStr, hour, minute, fromTimezone); const utcDate = toUTCDate(dateStr, hour, fromTimezone);
// Format the time in the target timezone // Format the hour in the target timezone
const formatter = new Intl.DateTimeFormat('en-US', { const targetHour = parseInt(
timeZone: toTimezone, new Intl.DateTimeFormat('en-US', {
hour: 'numeric', timeZone: toTimezone,
minute: 'numeric', hour: 'numeric',
hour12: false, hour12: false,
}); }).format(utcDate)
const parts = formatter.formatToParts(utcDate); );
const targetHour = parseInt(parts.find(p => p.type === 'hour')?.value || '0');
const targetMinute = parseInt(parts.find(p => p.type === 'minute')?.value || '0');
return { hour: targetHour, minute: targetMinute }; return targetHour;
} catch { } catch {
return { hour, minute }; return hour;
} }
}; };
@@ -226,24 +216,24 @@ export const AvailabilityHeatmap = ({
const timer = setTimeout(() => { const timer = setTimeout(() => {
if (!scrollContainerRef.current) return; if (!scrollContainerRef.current) return;
const rowHeight = 28; // h-6 (24px) + gap (4px) const rowHeight = 52; // h-12 (48px) + gap (4px)
const rowsAbove = 4; // Show a few slots before current time const rowsAbove = 2;
// Calculate which slot should be at the top (multiply by slots per hour) // Calculate which hour should be at the top
const targetHour = todayIndex >= 0 const targetHour = todayIndex >= 0
? Math.max(0, currentHour - Math.floor(rowsAbove / SLOTS_PER_HOUR)) ? Math.max(0, currentHour - rowsAbove)
: 7; // Default to 7am for other weeks : 7; // Default to 7am for other weeks
scrollContainerRef.current.scrollTop = targetHour * SLOTS_PER_HOUR * rowHeight; scrollContainerRef.current.scrollTop = targetHour * rowHeight;
}, 100); }, 100);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [weekOffset, todayIndex, currentHour, selectedParticipants.length, isLoading, slots.length]); }, [weekOffset, todayIndex, currentHour, selectedParticipants.length, isLoading, slots.length]);
// Find a slot that matches the given display timezone date/hour/minute // Find a slot that matches the given display timezone date/hour
const getSlot = (dateStr: string, hour: number, minute: number): TimeSlot | undefined => { const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => {
// Convert display timezone date/hour/minute to UTC // Convert display timezone date/hour to UTC
const targetUTC = toUTCDate(dateStr, hour, minute, displayTimezone); const targetUTC = toUTCDate(dateStr, hour, displayTimezone);
return slots.find((s) => { return slots.find((s) => {
const slotDate = new Date(s.start_time); const slotDate = new Date(s.start_time);
@@ -259,13 +249,13 @@ export const AvailabilityHeatmap = ({
return slot.availability; return slot.availability;
}; };
const formatTime = (hour: number, minute: number) => { const formatHour = (hour: number) => {
return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`; return `${hour.toString().padStart(2, '0')}:00`;
}; };
const isSlotTooSoon = (dateStr: string, hour: number, minute: number) => { const isSlotTooSoon = (dateStr: string, hour: number) => {
// Convert to UTC and compare with current time // Convert to UTC and compare with current time
const slotTimeUTC = toUTCDate(dateStr, hour, minute, displayTimezone); const slotTimeUTC = toUTCDate(dateStr, hour, displayTimezone);
const now = new Date(); const now = new Date();
const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000); const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
return slotTimeUTC < twoHoursFromNow; return slotTimeUTC < twoHoursFromNow;
@@ -281,11 +271,11 @@ export const AvailabilityHeatmap = ({
return `${format(monday)} – ${format(friday)}`; return `${format(monday)} – ${format(friday)}`;
}; };
// Format time for display in popover (in the display timezone) // Format hour for display in popover (in the display timezone)
const formatDisplayTime = (hour: number, minute: number) => { const formatDisplayTime = (hour: number) => {
// Create a date at that time // Create a date at that hour
const date = new Date(); const date = new Date();
date.setHours(hour, minute, 0, 0); date.setHours(hour, 0, 0, 0);
return new Intl.DateTimeFormat('en-US', { return new Intl.DateTimeFormat('en-US', {
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
@@ -408,152 +398,144 @@ export const AvailabilityHeatmap = ({
onScroll={handleScroll} onScroll={handleScroll}
> >
<div className="min-w-[600px]"> <div className="min-w-[600px]">
<div className={cn( <div className={cn(
"grid gap-1 mb-2 sticky top-0 bg-card z-10", "grid gap-1 mb-2 sticky top-0 bg-card z-10",
showSecondaryTimezone showSecondaryTimezone
? "grid-cols-[50px_50px_repeat(5,1fr)]" ? "grid-cols-[50px_50px_repeat(5,1fr)]"
: "grid-cols-[60px_repeat(5,1fr)]" : "grid-cols-[60px_repeat(5,1fr)]"
)}> )}>
{showSecondaryTimezone ? ( {showSecondaryTimezone ? (
<> <>
<div className="text-center text-xs font-medium text-primary py-2"> <div className="text-center text-xs font-medium text-primary py-2">
{getTimezoneAbbrev(displayTimezone)} {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="text-center text-xs font-medium text-muted-foreground py-2">
</div> {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"> <div className="space-y-1">
{timeSlots.map(({ hour, minute }) => ( {hours.map((hour) => (
<div <div
key={`${hour}-${minute}`} key={hour}
ref={todayIndex >= 0 && hour === currentHour && minute === 0 ? currentHourRef : undefined} ref={todayIndex >= 0 && hour === currentHour ? currentHourRef : undefined}
className={cn( className={cn(
"grid gap-1", "grid gap-1",
showSecondaryTimezone showSecondaryTimezone
? "grid-cols-[50px_50px_repeat(5,1fr)]" ? "grid-cols-[50px_50px_repeat(5,1fr)]"
: "grid-cols-[60px_repeat(5,1fr)]" : "grid-cols-[60px_repeat(5,1fr)]"
)} )}
> >
{showSecondaryTimezone ? ( {showSecondaryTimezone ? (
<> <>
<div className="text-xs text-primary font-medium flex items-center justify-center gap-1"> <div className="text-xs text-primary font-medium flex items-center justify-center gap-1">
{todayIndex >= 0 && hour === currentHour && minute === 0 && ( {todayIndex >= 0 && hour === currentHour && (
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
)}
{formatTime(hour, minute)}
</div>
<div className="text-xs text-muted-foreground flex items-center justify-center">
{(() => {
const converted = convertTimeBetweenTimezones(hour, minute, weekDates[0] || '', displayTimezone, secondaryTimezone);
return formatTime(converted.hour, converted.minute);
})()}
</div>
</>
) : (
<div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1">
{todayIndex >= 0 && hour === currentHour && minute === 0 && (
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" /> <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
)} )}
{formatTime(hour, minute)} {formatHour(hour)}
</div> </div>
)} <div className="text-xs text-muted-foreground flex items-center justify-center">
{weekDates.map((dateStr, dayIndex) => { {formatHour(convertHourBetweenTimezones(hour, weekDates[0] || '', displayTimezone, secondaryTimezone))}
const slot = getSlot(dateStr, hour, minute); </div>
const dayName = dayNames[dayIndex]; </>
const tooSoon = isSlotTooSoon(dateStr, hour, minute); ) : (
if (!slot) return <div key={`${dateStr}-${hour}-${minute}`} className="h-6 bg-muted rounded" />; <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); const effectiveAvailability = getEffectiveAvailability(slot);
// Calculate end time for display return (
const endMinute = minute + SLOT_INTERVAL_MINUTES; <Popover key={`${dateStr}-${hour}`}>
const endHour = hour + Math.floor(endMinute / 60); <PopoverTrigger asChild>
const endMinuteNormalized = endMinute % 60; <button
className={cn(
return ( "h-12 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
<Popover key={`${dateStr}-${hour}-${minute}`}> tooSoon && "opacity-40 cursor-not-allowed",
<PopoverTrigger asChild> !tooSoon && "hover:scale-105 hover:shadow-md",
<button effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
className={cn( effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90",
"h-6 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90"
tooSoon && "opacity-40 cursor-not-allowed", )}
!tooSoon && "hover:scale-105 hover:shadow-md", />
effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90", </PopoverTrigger>
effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90", <PopoverContent className="w-64 p-4 animate-scale-in" align="center">
effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90" <div className="space-y-3">
)} <div className="font-semibold text-foreground">
/> {dayName} {formatDisplayTime(hour)}–{formatDisplayTime(hour + 1)}
</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, minute)}–{formatDisplayTime(endHour, endMinuteNormalized)}
</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> </div>
</PopoverContent> {tooSoon && (
</Popover> <div className="text-sm text-muted-foreground italic">
); This time slot has passed or is too soon to schedule
})} </div>
</div> )}
))} <div className="space-y-2">
</div> {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> </div>
</div>
<div className="flex items-center justify-center gap-6 mt-6 pt-4 border-t border-border"> <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="flex items-center gap-2">

89
frontend/src/components/AvailabilityHeatmapV2.tsx
View File

@@ -12,19 +12,10 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
const DEFAULT_TIMEZONE = 'America/Toronto'; const DEFAULT_TIMEZONE = 'America/Toronto';
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const SLOT_INTERVAL_MINUTES = 15;
const SLOTS_PER_HOUR = 60 / SLOT_INTERVAL_MINUTES;
const WORKING_HOUR_START = 8; // 8 AM const WORKING_HOUR_START = 8; // 8 AM
const WORKING_HOUR_END = 18; // 6 PM const WORKING_HOUR_END = 18; // 6 PM
const ALL_HOURS = Array.from({ length: 24 }, (_, i) => i);
// Generate time slots with hour and minute const WORKING_HOURS = Array.from({ length: WORKING_HOUR_END - WORKING_HOUR_START + 1 }, (_, i) => i + WORKING_HOUR_START);
const ALL_TIME_SLOTS = Array.from({ length: 24 * SLOTS_PER_HOUR }, (_, i) => ({
hour: Math.floor(i / SLOTS_PER_HOUR),
minute: (i % SLOTS_PER_HOUR) * SLOT_INTERVAL_MINUTES,
}));
const WORKING_TIME_SLOTS = ALL_TIME_SLOTS.filter(
slot => slot.hour >= WORKING_HOUR_START && slot.hour < WORKING_HOUR_END
);
// Helper to check if a slot is in the past or too close (2h buffer) // Helper to check if a slot is in the past or too close (2h buffer)
const isSlotTooSoon = (slotDate: number) => { const isSlotTooSoon = (slotDate: number) => {
@@ -97,15 +88,21 @@ export const AvailabilityHeatmapV2 = ({
secondaryTimezone = DEFAULT_TIMEZONE, secondaryTimezone = DEFAULT_TIMEZONE,
}: AvailabilityHeatmapV2Props) => { }: AvailabilityHeatmapV2Props) => {
const [showFullDay, setShowFullDay] = useState(false); const [showFullDay, setShowFullDay] = useState(false);
const activeSlots = showFullDay ? ALL_TIME_SLOTS : WORKING_TIME_SLOTS; const activeHours = showFullDay ? ALL_HOURS : WORKING_HOURS;
const weekDates = useMemo(() => getWeekDates(displayTimezone, weekOffset), [displayTimezone, weekOffset]); const weekDates = useMemo(() => getWeekDates(displayTimezone, weekOffset), [displayTimezone, weekOffset]);
// Pre-compute slots lookup map for O(1) access // Pre-compute slots lookup map for O(1) access
// Key: YYYY-MM-DD:Hour:Minute // Key: YYYY-MM-DD:Hour
const slotsMap = useMemo(() => { const slotsMap = useMemo(() => {
const map = new Map<string, TimeSlot>(); const map = new Map<string, TimeSlot>();
slots.forEach(slot => { 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); const d = new Date(slot.start_time);
// Format to DisplayTZ to find coordinate // Format to DisplayTZ to find coordinate
const formatter = new Intl.DateTimeFormat('en-CA', { const formatter = new Intl.DateTimeFormat('en-CA', {
@@ -114,22 +111,22 @@ export const AvailabilityHeatmapV2 = ({
month: '2-digit', month: '2-digit',
day: '2-digit', day: '2-digit',
hour: 'numeric', hour: 'numeric',
minute: 'numeric',
hour12: false hour12: false
}); });
// "2023-10-25, 14"
const parts = formatter.formatToParts(d); const parts = formatter.formatToParts(d);
const year = parts.find(p => p.type === 'year')?.value; const year = parts.find(p => p.type === 'year')?.value;
const month = parts.find(p => p.type === 'month')?.value; const month = parts.find(p => p.type === 'month')?.value;
const day = parts.find(p => p.type === 'day')?.value; const day = parts.find(p => p.type === 'day')?.value;
const hour = parts.find(p => p.type === 'hour')?.value; const hour = parts.find(p => p.type === 'hour')?.value;
const minute = parts.find(p => p.type === 'minute')?.value;
if (year && month && day && hour && minute) { 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); let h = parseInt(hour, 10);
let m = parseInt(minute, 10);
if (h === 24) h = 0; // Just in case if (h === 24) h = 0; // Just in case
const key = `${year}-${month}-${day}:${h}:${m}`; const key = `${year}-${month}-${day}:${h}`;
map.set(key, slot); map.set(key, slot);
} }
}); });
@@ -147,20 +144,12 @@ export const AvailabilityHeatmapV2 = ({
return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
}; };
const getSlotForCell = (date: Date, hour: number, minute: number) => { const getSlotForCell = (date: Date, hour: number) => {
const key = `${formatDateKey(date)}:${hour}:${minute}`; const key = `${formatDateKey(date)}:${hour}`;
return slotsMap.get(key); return slotsMap.get(key);
}; };
const formatTime = (hour: number, minute: number) => { const formatHour = (hour: number) => {
return new Date(0, 0, 0, hour, minute).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit',
hour12: true,
});
};
const formatHourOnly = (hour: number) => {
return new Date(0, 0, 0, hour).toLocaleTimeString('en-US', { return new Date(0, 0, 0, hour).toLocaleTimeString('en-US', {
hour: 'numeric', hour: 'numeric',
hour12: true, hour12: true,
@@ -301,7 +290,7 @@ export const AvailabilityHeatmapV2 = ({
{/* Grid Body */} {/* Grid Body */}
<div className="relative"> <div className="relative">
{activeSlots.map(({ hour, minute }) => { {activeHours.map((hour) => {
const isNight = hour < 8 || hour >= 18; const isNight = hour < 8 || hour >= 18;
// Calculate secondary time // Calculate secondary time
@@ -309,54 +298,40 @@ export const AvailabilityHeatmapV2 = ({
if (secondaryHour >= 24) secondaryHour -= 24; if (secondaryHour >= 24) secondaryHour -= 24;
if (secondaryHour < 0) secondaryHour += 24; if (secondaryHour < 0) secondaryHour += 24;
// Calculate end time for display
const endMinute = minute + SLOT_INTERVAL_MINUTES;
const endHour = hour + Math.floor(endMinute / 60);
const endMinuteNormalized = endMinute % 60;
return ( return (
<div <div
key={`${hour}-${minute}`} key={hour}
className={cn( className={cn(
"grid group items-stretch transition-colors border-border/30 last:border-0", "grid group items-stretch transition-colors border-b border-border/30 last:border-0",
isNight ? "bg-muted/30" : "bg-card", isNight ? "bg-muted/30" : "bg-card",
minute === 0 ? "border-t border-border" : "border-t border-border/10",
"hover:bg-muted/10" "hover:bg-muted/10"
)} )}
style={{ gridTemplateColumns: `${timeColWidth} repeat(5, 1fr)` }} style={{ gridTemplateColumns: `${timeColWidth} repeat(5, 1fr)` }}
> >
{/* Time Label - Sticky Left */} {/* Time Label - Sticky Left */}
<div className={cn( <div className={cn(
"text-xs text-muted-foreground font-medium text-right pr-4 py-2 flex flex-col items-end justify-center gap-0.5", "text-xs text-muted-foreground font-medium text-right pr-4 py-3 flex flex-col items-end justify-center gap-0.5",
"sticky left-0 z-20 border-r border-border/50", "sticky left-0 z-20 border-r border-border/50",
isNight ? "bg-muted/30 backdrop-blur-md" : "bg-card" isNight ? "bg-muted/30 backdrop-blur-md" : "bg-card"
)}> )}>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
{minute === 0 ? ( {isNight ? (
<div className="flex items-center gap-1.5 font-bold text-foreground/80"> <Moon className="w-3 h-3 text-slate-400/50" />
{isNight ? (
<Moon className="w-3 h-3 text-slate-400/50" />
) : (
<Sun className="w-3 h-3 text-amber-500/50" />
)}
<span>{formatTime(hour, minute)}</span>
</div>
) : ( ) : (
<span className="text-[10px] opacity-0 group-hover:opacity-50 transition-opacity"> <Sun className="w-3 h-3 text-amber-500/50" />
:{minute.toString().padStart(2, '0')}
</span>
)} )}
<span>{formatHour(hour)}</span>
</div> </div>
{showSecondaryTimezone && ( {showSecondaryTimezone && (
<span className="text-[10px] text-muted-foreground/60 font-mono"> <span className="text-[10px] text-muted-foreground/60 font-mono">
{formatTime(secondaryHour, minute)} {formatHour(secondaryHour)}
</span> </span>
)} )}
</div> </div>
{/* Days */} {/* Days */}
{weekDates.map(date => { {weekDates.map(date => {
const slot = getSlotForCell(date, hour, minute); const slot = getSlotForCell(date, hour);
const tooSoon = slot ? isSlotTooSoon(new Date(slot.start_time).getTime()) : true; const tooSoon = slot ? isSlotTooSoon(new Date(slot.start_time).getTime()) : true;
// Availability logic // Availability logic
@@ -382,17 +357,17 @@ export const AvailabilityHeatmapV2 = ({
} }
return ( return (
<div key={`${date.toISOString()}-${minute}`} className="p-0.5 h-[32px] border-r border-border/30 last:border-0"> <div key={date.toISOString()} className="p-1 h-[52px] border-r border-border/30 last:border-0">
{slot ? ( {slot ? (
<Popover> <Popover>
<PopoverTrigger asChild disabled={tooSoon}> <PopoverTrigger asChild disabled={tooSoon}>
<div className={cn( <div className={cn(
"w-full h-full rounded-md transition-all duration-200 cursor-pointer flex items-center justify-center group/cell relative overflow-hidden", "w-full h-full rounded-md transition-all duration-200 cursor-pointer flex items-center justify-center group/cell relative overflow-hidden",
bgClass, bgClass,
!tooSoon ? "scale-[0.98] hover:scale-105 hover:z-10 hover:shadow-lg hover:ring-2 ring-primary/20" : "" !tooSoon && (isFull || isPartial) ? "scale-[0.98] hover:scale-100 hover:ring-2 ring-primary/20" : ""
)}> )}>
{/* Mini Indicators for color-blind accessibility or density */} {/* Mini Indicators for color-blind accessibility or density */}
{isFull && <Check className="w-3 h-3 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />} {isFull && <Check className="w-4 h-4 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align={hour >= 12 ? "end" : "start"}> <PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align={hour >= 12 ? "end" : "start"}>
@@ -403,7 +378,7 @@ export const AvailabilityHeatmapV2 = ({
</h4> </h4>
<div className="text-sm text-muted-foreground mt-1 flex items-center gap-2"> <div className="text-sm text-muted-foreground mt-1 flex items-center gap-2">
<Clock className="w-4 h-4" /> <Clock className="w-4 h-4" />
{formatTime(hour, minute)} - {formatTime(endHour, endMinuteNormalized)} {formatHour(hour)} - {formatHour(hour + 1)}
</div> </div>
</div> </div>

1
frontend/src/types/calendar.ts
View File

@@ -11,7 +11,6 @@ export interface Participant {
export interface TimeSlot { export interface TimeSlot {
day: string; day: string;
hour: number; hour: number;
minute: number;
start_time: string; start_time: string;
availability: 'full' | 'partial' | 'none'; availability: 'full' | 'partial' | 'none';
availableParticipants: string[]; availableParticipants: string[];