feat: full backend (untested)

frontend/src/components/AvailabilityHeatmap.tsx

@@ -1,5 +1,4 @@
 import { TimeSlot, Participant } from '@/types/calendar';
-import { days, hours } from '@/data/mockData';
 import { cn } from '@/lib/utils';
 import {
   Popover,
@@ -7,13 +6,17 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
-import { Check, X } from 'lucide-react';
+import { Check, X, Loader2 } from 'lucide-react';
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17];
 
 interface AvailabilityHeatmapProps {
   slots: TimeSlot[];
   selectedParticipants: Participant[];
   onSlotSelect: (slot: TimeSlot) => void;
   showPartialAvailability?: boolean;
+  isLoading?: boolean;
 }
 
 export const AvailabilityHeatmap = ({
@@ -21,6 +24,7 @@ export const AvailabilityHeatmap = ({
   selectedParticipants,
   onSlotSelect,
   showPartialAvailability = false,
+  isLoading = false,
 }: AvailabilityHeatmapProps) => {
   const getSlot = (day: string, hour: number) => {
     return slots.find((s) => s.day === day && s.hour === hour);
@@ -59,6 +63,15 @@ export const AvailabilityHeatmap = ({
     );
   }
 
+  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">
@@ -72,7 +85,6 @@ export const AvailabilityHeatmap = ({
 
       <div className="overflow-x-auto">
         <div className="min-w-[600px]">
-          {/* Header */}
           <div className="grid grid-cols-[60px_repeat(5,1fr)] gap-1 mb-2">
             <div></div>
             {days.map((day) => (
@@ -85,7 +97,6 @@ export const AvailabilityHeatmap = ({
             ))}
           </div>
 
-          {/* Grid */}
           <div className="space-y-1">
             {hours.map((hour) => (
               <div key={hour} className="grid grid-cols-[60px_repeat(5,1fr)] gap-1">
@@ -157,7 +168,6 @@ export const AvailabilityHeatmap = ({
         </div>
       </div>
 
-      {/* Legend */}
       <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>