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:cba2ec2720ba193d0a58be132e85c33561043aaa
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

4 Commits
implement- ... cba2ec2720

Author SHA1 Message Date
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
8 changed files with 233 additions and 305 deletions
Expand all files Collapse all files

13
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,16 +70,13 @@ 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:
@@ -102,7 +98,6 @@ async def calculate_availability(
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,

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 = {

114
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(
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 { 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',
@@ -440,10 +430,10 @@ export const AvailabilityHeatmap = ({
</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
@@ -454,45 +444,37 @@ export const AvailabilityHeatmap = ({
{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" /> <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"> <div className="text-xs text-muted-foreground flex items-center justify-center">
{(() => { {formatHour(convertHourBetweenTimezones(hour, weekDates[0] || '', displayTimezone, secondaryTimezone))}
const converted = convertTimeBetweenTimezones(hour, minute, weekDates[0] || '', displayTimezone, secondaryTimezone);
return formatTime(converted.hour, converted.minute);
})()}
</div> </div>
</> </>
) : ( ) : (
<div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1"> <div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1">
{todayIndex >= 0 && hour === currentHour && minute === 0 && ( {todayIndex >= 0 && hour === currentHour && (
<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>
)} )}
{weekDates.map((dateStr, dayIndex) => { {weekDates.map((dateStr, dayIndex) => {
const slot = getSlot(dateStr, hour, minute); const slot = getSlot(dateStr, hour);
const dayName = dayNames[dayIndex]; const dayName = dayNames[dayIndex];
const tooSoon = isSlotTooSoon(dateStr, hour, minute); const tooSoon = isSlotTooSoon(dateStr, hour);
if (!slot) return <div key={`${dateStr}-${hour}-${minute}`} className="h-6 bg-muted rounded" />; 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
const endMinute = minute + SLOT_INTERVAL_MINUTES;
const endHour = hour + Math.floor(endMinute / 60);
const endMinuteNormalized = endMinute % 60;
return ( return (
<Popover key={`${dateStr}-${hour}-${minute}`}> <Popover key={`${dateStr}-${hour}`}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
className={cn( className={cn(
"h-6 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "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 && "opacity-40 cursor-not-allowed",
!tooSoon && "hover:scale-105 hover:shadow-md", !tooSoon && "hover:scale-105 hover:shadow-md",
effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90", effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
@@ -504,7 +486,7 @@ export const AvailabilityHeatmap = ({
<PopoverContent className="w-64 p-4 animate-scale-in" align="center"> <PopoverContent className="w-64 p-4 animate-scale-in" align="center">
<div className="space-y-3"> <div className="space-y-3">
<div className="font-semibold text-foreground"> <div className="font-semibold text-foreground">
{dayName} {formatDisplayTime(hour, minute)}–{formatDisplayTime(endHour, endMinuteNormalized)} {dayName} {formatDisplayTime(hour)}–{formatDisplayTime(hour + 1)}
</div> </div>
{tooSoon && ( {tooSoon && (
<div className="text-sm text-muted-foreground italic"> <div className="text-sm text-muted-foreground italic">

105
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 ? (
<div className="flex items-center gap-1.5 font-bold text-foreground/80">
{isNight ? ( {isNight ? (
<Moon className="w-3 h-3 text-slate-400/50" /> <Moon className="w-3 h-3 text-slate-400/50" />
) : ( ) : (
<Sun className="w-3 h-3 text-amber-500/50" /> <Sun className="w-3 h-3 text-amber-500/50" />
)} )}
<span>{formatTime(hour, minute)}</span> <span>{formatHour(hour)}</span>
</div>
) : (
<span className="text-[10px] opacity-0 group-hover:opacity-50 transition-opacity">
:{minute.toString().padStart(2, '0')}
</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
@@ -368,34 +343,28 @@ export const AvailabilityHeatmapV2 = ({
// Styling // Styling
let bgClass = ""; // Default transparent 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 (!slot) { if (tooSoon && slot) bgClass = cn(bgClass, "opacity-30 cursor-not-allowed pattern-diagonal-lines");
bgClass = "bg-muted/10 pattern-diagonal-lines opacity-50";
} else if (tooSoon) {
bgClass = "bg-muted/20 pattern-diagonal-lines cursor-not-allowed border border-border/10";
} 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-muted/50 hover:bg-muted/70 border border-border/20";
}
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="start">
<div className="p-4 bg-muted/30 border-b border-border/50"> <div className="p-4 bg-muted/30 border-b border-border/50">
<h4 className="font-semibold text-base flex items-center gap-2"> <h4 className="font-semibold text-base flex items-center gap-2">
<CalendarIcon className="w-4 h-4 text-muted-foreground" /> <CalendarIcon className="w-4 h-4 text-muted-foreground" />
@@ -403,7 +372,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>
@@ -470,11 +439,11 @@ export const AvailabilityHeatmapV2 = ({
</div> </div>
)} )}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-3 h-3 rounded bg-muted/50 border border-border/20"></div> <div className="w-3 h-3 rounded border border-slate-300 bg-slate-100 dark:bg-slate-800 dark:border-slate-700"></div>
<span className="text-muted-foreground">Busy / No Match</span> <span className="text-muted-foreground">Busy / No Match</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-3 h-3 rounded bg-muted/20 pattern-diagonal-lines border border-border/10"></div> <div className="w-3 h-3 rounded bg-muted/30 pattern-diagonal-lines ring-1 ring-border/50"></div>
<span className="text-muted-foreground">Past / Too Soon</span> <span className="text-muted-foreground">Past / Too Soon</span>
</div> </div>
</div> </div>

12
frontend/src/index.css
View File

@@ -233,15 +233,3 @@
0%, 100% { opacity: 1; } 0%, 100% { opacity: 1; }
50% { opacity: 0.7; } 50% { opacity: 0.7; }
} }
.pattern-diagonal-lines {
background-image: repeating-linear-gradient(
45deg,
currentColor,
currentColor 1px,
transparent 1px,
transparent 10px
);
background-size: 10px 10px;
opacity: 0.1;
}

9
frontend/src/pages/Index.tsx
View File

@@ -392,16 +392,13 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
)} )}
</div> </div>
<div className="border-t border-border pt-4 mt-8"> <div className="border-t border-border pt-4">
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3 block">
Danger Zone
</Label>
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button <Button
variant="outline" variant="destructive"
size="sm" size="sm"
className="text-destructive hover:text-destructive-foreground hover:bg-destructive border-destructive/30" className="w-full"
> >
Clear All Bookings Clear All Bookings
</Button> </Button>

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[];