feat: UX

frontend/src/data/mockData.ts

@@ -0,0 +1,42 @@
+import { Participant, TimeSlot } from '@/types/calendar';
+
+export const mockParticipants: Participant[] = [
+  { id: '1', name: 'Ana Rodriguez', email: 'ana@monadical.com', connected: true },
+  { id: '2', name: 'Max Chen', email: 'max@monadical.com', connected: true },
+  { id: '3', name: 'Jordan Kim', email: 'jordan@monadical.com', connected: true },
+  { id: '4', name: 'Jose Garcia', email: 'jose@monadical.com', connected: false },
+  { id: '5', name: 'Sarah Wilson', email: 'sarah@monadical.com', connected: true },
+  { id: '6', name: 'David Park', email: 'david@monadical.com', connected: true },
+];
+
+export const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+export const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17];
+
+export const generateMockAvailability = (selectedParticipants: Participant[]): TimeSlot[] => {
+  const slots: TimeSlot[] = [];
+  
+  days.forEach(day => {
+    hours.forEach(hour => {
+      // Generate random availability based on participants
+      const availableParticipants = selectedParticipants.filter(() => Math.random() > 0.3);
+      
+      let availability: 'full' | 'partial' | 'none';
+      if (availableParticipants.length === selectedParticipants.length) {
+        availability = 'full';
+      } else if (availableParticipants.length > 0) {
+        availability = 'partial';
+      } else {
+        availability = 'none';
+      }
+      
+      slots.push({
+        day,
+        hour,
+        availability,
+        availableParticipants: availableParticipants.map(p => p.name),
+      });
+    });
+  });
+  
+  return slots;
+};