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

Merge pull request 'update' (#11) from implement-more-feeedback into main

Browse Source 
Reviewed-on: #11
This commit was merged in pull request #11.
This commit is contained in:
Joyce
2026-02-06 13:37:02 +00:00
parent 3b06ff7538 8ea2987e3e
commit b13d035404
6 changed files with 271 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ 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
@@ -70,37 +71,41 @@ 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"]
hours = list(range(0, 24)) slot_interval = settings.slot_interval_minutes
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 hours: for hour in range(24):
slot_start = week_start + timedelta(days=day_offset, hours=hour) for slot_idx in range(slots_per_hour):
slot_end = slot_start + timedelta(hours=1) minute = slot_idx * slot_interval
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,
"start_time": slot_start, "minute": minute,
"availability": availability, "start_time": slot_start,
"availableParticipants": available_participants, "availability": availability,
}) "availableParticipants": available_participants,
})
return slots return slots

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

@@ -5,6 +5,7 @@ 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,7 +61,8 @@ 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}" f"**Who:** {people}\n"
f"*Booked via [Meetly](https://meetly.app.monadical.io/)*"
) )
request = { request = {

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

@@ -12,7 +12,14 @@ 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 hours = Array.from({ length: 24 }, (_, i) => i); // 0-23 const SLOT_INTERVAL_MINUTES = 15;
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[] => {
@@ -46,11 +53,11 @@ const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
}); });
}; };
// Convert a date string and hour in a timezone to a UTC Date // Convert a date string, hour, and minute in a timezone to a UTC Date
const toUTCDate = (dateStr: string, hour: number, timezone: string): Date => { const toUTCDate = (dateStr: string, hour: number, minute: number, timezone: string): Date => {
// Create a date string that represents the given hour in the given timezone // Create a date string that represents the given time 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')}:00:00`; const localDateStr = `${dateStr}T${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}: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
@@ -111,29 +118,32 @@ const getTimezoneAbbrev = (timezone: string): string => {
} }
}; };
// Convert an hour from one timezone to another // Convert a time from one timezone to another
const convertHourBetweenTimezones = ( const convertTimeBetweenTimezones = (
hour: number, hour: number,
minute: number,
dateStr: string, dateStr: string,
fromTimezone: string, fromTimezone: string,
toTimezone: string toTimezone: string
): number => { ): { hour: number; minute: number } => {
try { try {
// Create a UTC date for the given hour in the source timezone // Create a UTC date for the given time in the source timezone
const utcDate = toUTCDate(dateStr, hour, fromTimezone); const utcDate = toUTCDate(dateStr, hour, minute, fromTimezone);
// Format the hour in the target timezone // Format the time in the target timezone
const targetHour = parseInt( const formatter = new Intl.DateTimeFormat('en-US', {
new Intl.DateTimeFormat('en-US', { timeZone: toTimezone,
timeZone: toTimezone, hour: 'numeric',
hour: 'numeric', minute: '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 targetHour; return { hour: targetHour, minute: targetMinute };
} catch { } catch {
return hour; return { hour, minute };
} }
}; };
@@ -216,24 +226,24 @@ export const AvailabilityHeatmap = ({
const timer = setTimeout(() => { const timer = setTimeout(() => {
if (!scrollContainerRef.current) return; if (!scrollContainerRef.current) return;
const rowHeight = 52; // h-12 (48px) + gap (4px) const rowHeight = 28; // h-6 (24px) + gap (4px)
const rowsAbove = 2; const rowsAbove = 4; // Show a few slots before current time
// Calculate which hour should be at the top // Calculate which slot should be at the top (multiply by slots per hour)
const targetHour = todayIndex >= 0 const targetHour = todayIndex >= 0
? Math.max(0, currentHour - rowsAbove) ? Math.max(0, currentHour - Math.floor(rowsAbove / SLOTS_PER_HOUR))
: 7; // Default to 7am for other weeks : 7; // Default to 7am for other weeks
scrollContainerRef.current.scrollTop = targetHour * rowHeight; scrollContainerRef.current.scrollTop = targetHour * SLOTS_PER_HOUR * 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 // Find a slot that matches the given display timezone date/hour/minute
const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => { const getSlot = (dateStr: string, hour: number, minute: number): TimeSlot | undefined => {
// Convert display timezone date/hour to UTC // Convert display timezone date/hour/minute to UTC
const targetUTC = toUTCDate(dateStr, hour, displayTimezone); const targetUTC = toUTCDate(dateStr, hour, minute, displayTimezone);
return slots.find((s) => { return slots.find((s) => {
const slotDate = new Date(s.start_time); const slotDate = new Date(s.start_time);
@@ -249,13 +259,13 @@ export const AvailabilityHeatmap = ({
return slot.availability; return slot.availability;
}; };
const formatHour = (hour: number) => { const formatTime = (hour: number, minute: number) => {
return `${hour.toString().padStart(2, '0')}:00`; return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
}; };
const isSlotTooSoon = (dateStr: string, hour: number) => { const isSlotTooSoon = (dateStr: string, hour: number, minute: number) => {
// Convert to UTC and compare with current time // Convert to UTC and compare with current time
const slotTimeUTC = toUTCDate(dateStr, hour, displayTimezone); const slotTimeUTC = toUTCDate(dateStr, hour, minute, 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;
@@ -271,11 +281,11 @@ export const AvailabilityHeatmap = ({
return `${format(monday)} – ${format(friday)}`; return `${format(monday)} – ${format(friday)}`;
}; };
// Format hour for display in popover (in the display timezone) // Format time for display in popover (in the display timezone)
const formatDisplayTime = (hour: number) => { const formatDisplayTime = (hour: number, minute: number) => {
// Create a date at that hour // Create a date at that time
const date = new Date(); const date = new Date();
date.setHours(hour, 0, 0, 0); date.setHours(hour, minute, 0, 0);
return new Intl.DateTimeFormat('en-US', { return new Intl.DateTimeFormat('en-US', {
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
@@ -398,144 +408,152 @@ 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"> ))}
{getTimezoneAbbrev(secondaryTimezone)} </div>
</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">
{hours.map((hour) => ( {timeSlots.map(({ hour, minute }) => (
<div <div
key={hour} key={`${hour}-${minute}`}
ref={todayIndex >= 0 && hour === currentHour ? currentHourRef : undefined} ref={todayIndex >= 0 && hour === currentHour && minute === 0 ? 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 && ( {todayIndex >= 0 && hour === currentHour && minute === 0 && (
<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" />
)} )}
{formatHour(hour)} {formatTime(hour, minute)}
</div> </div>
<div className="text-xs text-muted-foreground flex items-center justify-center"> )}
{formatHour(convertHourBetweenTimezones(hour, weekDates[0] || '', displayTimezone, secondaryTimezone))} {weekDates.map((dateStr, dayIndex) => {
</div> const slot = getSlot(dateStr, hour, minute);
</> const dayName = dayNames[dayIndex];
) : ( const tooSoon = isSlotTooSoon(dateStr, hour, minute);
<div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1"> if (!slot) return <div key={`${dateStr}-${hour}-${minute}`} className="h-6 bg-muted rounded" />;
{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);
return ( // Calculate end time for display
<Popover key={`${dateStr}-${hour}`}> const endMinute = minute + SLOT_INTERVAL_MINUTES;
<PopoverTrigger asChild> const endHour = hour + Math.floor(endMinute / 60);
<button const endMinuteNormalized = endMinute % 60;
className={cn(
"h-12 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", return (
tooSoon && "opacity-40 cursor-not-allowed", <Popover key={`${dateStr}-${hour}-${minute}`}>
!tooSoon && "hover:scale-105 hover:shadow-md", <PopoverTrigger asChild>
effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90", <button
effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90", className={cn(
effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90" "h-6 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",
</PopoverTrigger> effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
<PopoverContent className="w-64 p-4 animate-scale-in" align="center"> effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90",
<div className="space-y-3"> effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90"
<div className="font-semibold text-foreground"> )}
{dayName} {formatDisplayTime(hour)}–{formatDisplayTime(hour + 1)} />
</div> </PopoverTrigger>
{tooSoon && ( <PopoverContent className="w-64 p-4 animate-scale-in" align="center">
<div className="text-sm text-muted-foreground italic"> <div className="space-y-3">
This time slot has passed or is too soon to schedule <div className="font-semibold text-foreground">
{dayName} {formatDisplayTime(hour, minute)}–{formatDisplayTime(endHour, endMinuteNormalized)}
</div> </div>
)} {tooSoon && (
<div className="space-y-2"> <div className="text-sm text-muted-foreground italic">
{selectedParticipants.map((participant) => { This time slot has passed or is too soon to schedule
const isAvailable = slot.availableParticipants.includes(participant.name); </div>
)}
<div className="space-y-2">
{selectedParticipants.map((participant) => {
const isAvailable = slot.availableParticipants.includes(participant.name);
return ( return (
<div <div
key={participant.id} key={participant.id}
className="flex items-center gap-2 text-sm" className="flex items-center gap-2 text-sm"
> >
{isAvailable ? ( {isAvailable ? (
<Check className="w-4 h-4 text-availability-full" /> <Check className="w-4 h-4 text-availability-full" />
) : ( ) : (
<X className="w-4 h-4 text-destructive" /> <X className="w-4 h-4 text-destructive" />
)} )}
<span className={cn( <span className={cn(
isAvailable ? "text-foreground" : "text-muted-foreground" isAvailable ? "text-foreground" : "text-muted-foreground"
)}> )}>
{participant.name.split(' ')[0]} {participant.name.split(' ')[0]}
</span> </span>
</div> </div>
); );
})} })}
</div>
{effectiveAvailability !== 'none' && !tooSoon && (
<Button
variant="schedule"
className="w-full mt-2"
onClick={() => onSlotSelect(slot)}
>
Schedule
</Button>
)}
</div> </div>
{effectiveAvailability !== 'none' && !tooSoon && ( </PopoverContent>
<Button </Popover>
variant="schedule" );
className="w-full mt-2" })}
onClick={() => onSlotSelect(slot)} </div>
> ))}
Schedule </div>
</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,10 +12,19 @@ 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);
const WORKING_HOURS = Array.from({ length: WORKING_HOUR_END - WORKING_HOUR_START + 1 }, (_, i) => i + WORKING_HOUR_START); // Generate time slots with hour and minute
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) => {
@@ -88,21 +97,15 @@ export const AvailabilityHeatmapV2 = ({
secondaryTimezone = DEFAULT_TIMEZONE, secondaryTimezone = DEFAULT_TIMEZONE,
}: AvailabilityHeatmapV2Props) => { }: AvailabilityHeatmapV2Props) => {
const [showFullDay, setShowFullDay] = useState(false); const [showFullDay, setShowFullDay] = useState(false);
const activeHours = showFullDay ? ALL_HOURS : WORKING_HOURS; const activeSlots = showFullDay ? ALL_TIME_SLOTS : WORKING_TIME_SLOTS;
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 // Key: YYYY-MM-DD:Hour:Minute
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', {
@@ -111,22 +114,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) { if (year && month && day && hour && minute) {
// 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}`; const key = `${year}-${month}-${day}:${h}:${m}`;
map.set(key, slot); map.set(key, slot);
} }
}); });
@@ -144,12 +147,20 @@ 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) => { const getSlotForCell = (date: Date, hour: number, minute: number) => {
const key = `${formatDateKey(date)}:${hour}`; const key = `${formatDateKey(date)}:${hour}:${minute}`;
return slotsMap.get(key); return slotsMap.get(key);
}; };
const formatHour = (hour: number) => { const formatTime = (hour: number, minute: 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,
@@ -290,7 +301,7 @@ export const AvailabilityHeatmapV2 = ({
{/* Grid Body */} {/* Grid Body */}
<div className="relative"> <div className="relative">
{activeHours.map((hour) => { {activeSlots.map(({ hour, minute }) => {
const isNight = hour < 8 || hour >= 18; const isNight = hour < 8 || hour >= 18;
// Calculate secondary time // Calculate secondary time
@@ -298,40 +309,54 @@ 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} key={`${hour}-${minute}`}
className={cn( className={cn(
"grid group items-stretch transition-colors border-b border-border/30 last:border-0", "grid group items-stretch transition-colors 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-3 flex flex-col items-end justify-center gap-0.5", "text-xs text-muted-foreground font-medium text-right pr-4 py-2 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">
{isNight ? ( {minute === 0 ? (
<Moon className="w-3 h-3 text-slate-400/50" /> <div className="flex items-center gap-1.5 font-bold text-foreground/80">
{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>
) : ( ) : (
<Sun className="w-3 h-3 text-amber-500/50" /> <span className="text-[10px] opacity-0 group-hover:opacity-50 transition-opacity">
:{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">
{formatHour(secondaryHour)} {formatTime(secondaryHour, minute)}
</span> </span>
)} )}
</div> </div>
{/* Days */} {/* Days */}
{weekDates.map(date => { {weekDates.map(date => {
const slot = getSlotForCell(date, hour); const slot = getSlotForCell(date, hour, minute);
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
@@ -357,17 +382,17 @@ export const AvailabilityHeatmapV2 = ({
} }
return ( return (
<div key={date.toISOString()} className="p-1 h-[52px] border-r border-border/30 last:border-0"> <div key={`${date.toISOString()}-${minute}`} className="p-0.5 h-[32px] 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 && (isFull || isPartial) ? "scale-[0.98] hover:scale-100 hover:ring-2 ring-primary/20" : "" !tooSoon ? "scale-[0.98] hover:scale-105 hover:z-10 hover:shadow-lg 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-4 h-4 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />} {isFull && <Check className="w-3 h-3 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"}>
@@ -378,7 +403,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" />
{formatHour(hour)} - {formatHour(hour + 1)} {formatTime(hour, minute)} - {formatTime(endHour, endMinuteNormalized)}
</div> </div>
</div> </div>

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

@@ -11,6 +11,7 @@ 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[];