firebase-os 1.1.4 → 1.1.6

package/src/templates/TemplateCalendar.tsx

@@ -0,0 +1,848 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowLeft, ChevronLeft, ChevronRight, Calendar as CalendarIcon, Clock, Plus, LayoutList, X, Trash, Edit2, Mail, Loader2, Check, Bot } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Button } from '../components/Button';
+import { Input } from '../components/Input';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { DashboardNav } from '../components/DashboardNav';
+import { useState, useEffect } from 'react';
+import { useAuth } from '../lib/AuthContext';
+import { db, auth } from '../lib/firebase';
+import { collection, addDoc, onSnapshot, query, where, orderBy, doc, deleteDoc, updateDoc, setDoc, serverTimestamp, getDocs, getDoc } from 'firebase/firestore';
+import { privateCalendarPrompt, adminCalendarPrompt, publicCalendarPrompt } from '../prompts';
+import { onAuthStateChanged } from 'firebase/auth';
+
+type CalendarMode = 'public' | 'private' | 'shared' | 'admin_only';
+
+interface CalEvent {
+  id: string;
+  dateStr: string;
+  title: string;
+  description?: string;
+  time: string;
+  duration?: string;
+  color?: string;
+  uid?: string;
+  creatorEmail?: string;
+  creatorName?: string;
+  creatorAvatar?: string;
+  customFields?: Record<string, string>;
+}
+
+interface ModalData {
+  id?: string;
+  uid?: string;
+  dateStr: string;
+  title: string;
+  description: string;
+  time: string;
+  duration: string;
+  color: string;
+  guestEmail: string;
+  customFields: Record<string, string>;
+}
+
+const pastelColors = [
+  { text: 'text-red-400',      bgCircle: 'bg-red-400',      bgCard: 'bg-red-500/[0.08]',      borderCard: 'border-red-500/30',      bgLight: 'bg-red-500/15',    bgHover: 'hover:bg-red-500',    bgAlt: 'bg-red-500/[0.04]',    name: 'Red' },
+  { text: 'text-orange-400',   bgCircle: 'bg-orange-400',   bgCard: 'bg-orange-500/[0.08]',   borderCard: 'border-orange-500/30',   bgLight: 'bg-orange-500/15', bgHover: 'hover:bg-orange-500', bgAlt: 'bg-orange-500/[0.04]', name: 'Orange' },
+  { text: 'text-yellow-400',   bgCircle: 'bg-yellow-400',   bgCard: 'bg-yellow-500/[0.08]',   borderCard: 'border-yellow-500/30',   bgLight: 'bg-yellow-500/15', bgHover: 'hover:bg-yellow-500', bgAlt: 'bg-yellow-500/[0.04]', name: 'Yellow' },
+  { text: 'text-green-400',    bgCircle: 'bg-green-400',    bgCard: 'bg-green-500/[0.08]',    borderCard: 'border-green-500/30',    bgLight: 'bg-green-500/15',  bgHover: 'hover:bg-green-500',  bgAlt: 'bg-green-500/[0.04]',  name: 'Green' },
+  { text: 'text-blue-400',     bgCircle: 'bg-blue-400',     bgCard: 'bg-blue-500/[0.08]',     borderCard: 'border-blue-500/30',     bgLight: 'bg-blue-500/15',   bgHover: 'hover:bg-blue-500',   bgAlt: 'bg-blue-500/[0.04]',   name: 'Blue' },
+  { text: 'text-accent',       bgCircle: 'bg-accent',       bgCard: 'bg-accent/[0.08]',       borderCard: 'border-accent/30',       bgLight: 'bg-accent/15',     bgHover: 'hover:bg-accent',     bgAlt: 'bg-accent/[0.04]',     name: 'Purple' },
+  { text: 'text-pink-400',     bgCircle: 'bg-pink-400',     bgCard: 'bg-pink-500/[0.08]',     borderCard: 'border-pink-500/30',     bgLight: 'bg-pink-500/15',   bgHover: 'hover:bg-pink-500',   bgAlt: 'bg-pink-500/[0.04]',   name: 'Pink' },
+  { text: 'text-foreground/60',bgCircle: 'bg-foreground/30',bgCard: 'bg-foreground/[0.04]',   borderCard: 'border-[var(--panel-border)]/50', bgLight: 'bg-foreground/15', bgHover: 'hover:bg-foreground/30', bgAlt: 'bg-foreground/[0.02]', name: 'Default' },
+];
+
+export interface CalendarProps {
+  title?: string;
+  subtitle?: string;
+  backUrl?: string;
+  eventsCollection?: string;
+  defaultTimeFormat?: string;
+  config?: any;
+}
+
+const BLANK_MODAL: ModalData = { dateStr: '', title: '', description: '', time: '12:00', duration: '60', color: '', guestEmail: '', customFields: {} };
+
+export function TemplateCalendar({
+  title = 'Calendar View',
+  subtitle = '/templates/calendar',
+  backUrl = '/templates',
+  eventsCollection = 'pub_events',
+  defaultTimeFormat = '12h',
+  config,
+}: CalendarProps) {
+
+  // ── Tab mode detection ─────────────────────────────────────────────────────
+  const isTabMode = !!(config?.isPrivate || config?.isAdmin || config?.isShared);
+  const isAdmin = config?.isAdmin;
+  const isShared = config?.isShared;
+  const isPrivate = config?.isPrivate && !isAdmin && !isShared;
+
+  // Config-driven settings (with sensible defaults for standalone page mode)
+  const showButton = config?.showButton !== false;
+  const buttonText = config?.buttonText || '+';
+  const buttonStyle = config?.buttonStyle || 'primary';
+  const showViewsButton = config?.showViewsButton !== false;
+  const viewsButtonStyle = config?.viewsButtonStyle || 'secondary';
+  const showPrompt = config?.showPrompt !== false;
+  const defaultView = config?.defaultView || 'calendar';
+  const customFieldsDef: string[] = config?.customFields || [];
+
+  // ── Mode detection from collection prefix ──────────────────────────────────
+  const mode: CalendarMode = eventsCollection.startsWith('user_') ? 'private'
+    : eventsCollection.startsWith('mem_')   ? 'shared'
+    : eventsCollection.startsWith('admin_') ? 'admin_only'
+    : 'public';
+
+  // ── State ──────────────────────────────────────────────────────────────────
+  const [view, setView] = useState<'month' | 'list'>(() => {
+    try {
+      const saved = localStorage.getItem(`cal_view_${eventsCollection}`);
+      if (saved === 'list' || saved === 'month') return saved as 'month' | 'list';
+    } catch {}
+    return defaultView === 'board' ? 'list' : 'month';
+  });
+  const [availableForms, setAvailableForms] = useState<string[]>([]);
+  const [events, setEvents] = useState<CalEvent[]>([]);
+  const [showModal, setShowModal] = useState(false);
+  const [viewingEvent, setViewingEvent] = useState<CalEvent | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [confirmDeleteEvent, setConfirmDeleteEvent] = useState<CalEvent | null>(null);
+  const [modalData, setModalData] = useState<ModalData>(BLANK_MODAL);
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [copied, setCopied] = useState(false);
+
+  // Auth
+  const [currentUser, setCurrentUser] = useState<any>(null);
+  const [userProfile, setUserProfile] = useState<any>(null);
+  const [authReady, setAuthReady] = useState(false);
+
+  // 12/24h toggle
+  const [use24Hour, setUse24Hour] = useState(() => {
+    try { return localStorage.getItem('calendar_use_24h') === 'true'; } catch { return defaultTimeFormat === '24h'; }
+  });
+  const handleToggle24Hour = () => {
+    const next = !use24Hour;
+    setUse24Hour(next);
+    try { localStorage.setItem('calendar_use_24h', String(next)); } catch {}
+  };
+
+  useEffect(() => {
+    try { localStorage.setItem(`cal_view_${eventsCollection}`, view); } catch {}
+    
+    // Fetch forms only for relevant modes
+    if (mode === 'public' || mode === 'private') {
+      getDocs(collection(db, 'sys_forms')).then(snap => {
+         const type = mode === 'public' ? 'public' : 'private';
+         setAvailableForms(snap.docs.filter(d => d.data().formType === type).map(doc => doc.id));
+      });
+    } else {
+      setAvailableForms([]);
+    }
+  }, [view, eventsCollection, mode]);
+
+  // Save preferred view
+  const handleToggleView = () => {
+    const next = view === 'month' ? 'list' : 'month';
+    setView(next);
+    try { localStorage.setItem(`cal_view_${eventsCollection}`, next); } catch {}
+  };
+
+  // Session-remembered email for public mode
+  const getRememberedEmail = () => { try { return sessionStorage.getItem('cal_guest_email') || ''; } catch { return ''; } };
+  const rememberEmail = (e: string) => { try { sessionStorage.setItem('cal_guest_email', e); } catch {} };
+
+  // ── Auth listener ──────────────────────────────────────────────────────────
+  useEffect(() => {
+    const unsub = onAuthStateChanged(auth, async (user) => {
+      setCurrentUser(user);
+      if (user && mode === 'admin_only') {
+        try {
+          const snap = await getDoc(doc(db, 'user_profiles', user.uid));
+          if (snap.exists()) setUserProfile(snap.data());
+        } catch {}
+      }
+      setAuthReady(true);
+    });
+    return unsub;
+  }, [mode]);
+
+  // ── Events subscription ────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!authReady) return;
+    if (mode !== 'public' && !currentUser) { setEvents([]); return; }
+
+    const q = (mode === 'private' && currentUser)
+      ? query(collection(db, eventsCollection), where('uid', '==', currentUser.uid))
+      : collection(db, eventsCollection);
+
+    const unsub = onSnapshot(q as any, (snap: any) => {
+      const fetched: CalEvent[] = [];
+      snap.forEach((d: any) => fetched.push({ id: d.id, ...d.data() } as CalEvent));
+      setEvents(fetched);
+    }, (err: any) => console.error('Calendar events:', err));
+
+    return () => unsub();
+  }, [eventsCollection, mode, currentUser?.uid, authReady]);
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+  const isOwner = (ev: CalEvent) => !!currentUser && currentUser.uid === ev.uid;
+
+  // Show edit/delete: private = always (personal cal), shared/admin = owner only, public = never
+  const canActOn = (ev: CalEvent) => {
+    if (mode === 'public') return false;
+    if (mode === 'private') return !!currentUser;
+    return isOwner(ev);
+  };
+
+  const formatTime = (t: string) => {
+    if (!t) return '';
+    if (use24Hour) return t;
+    const [h, m] = t.split(':');
+    let hInt = parseInt(h, 10);
+    const ampm = hInt >= 12 ? 'PM' : 'AM';
+    hInt = hInt % 12 || 12;
+    return `${hInt}:${m} ${ampm}`;
+  };
+
+  const formatDuration = (s?: string) => {
+    if (!s) return '60m';
+    const m = parseInt(s, 10);
+    if (isNaN(m)) return s;
+    if (m >= 60) return m % 60 === 0 ? `${m / 60}h` : `${Math.floor(m / 60)}h ${m % 60}m`;
+    return `${m}m`;
+  };
+
+  const to12hParts = (t: string) => {
+    const [hRaw, mRaw] = (t || '12:00').split(':');
+    let h = parseInt(hRaw, 10) || 0;
+    const m = parseInt(mRaw, 10) || 0;
+    const ampm = h >= 12 ? 'PM' : 'AM';
+    h = h % 12 || 12;
+    return { h, m, ampm };
+  };
+
+  const from12hParts = (h: number, m: number, ampm: string) => {
+    let h24 = h % 12;
+    if (ampm === 'PM') h24 += 12;
+    return `${h24.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+  };
+
+  const getLocalStr = (d: Date) => {
+    const off = d.getTimezoneOffset() * 60000;
+    return new Date(d.getTime() - off).toISOString().split('T')[0];
+  };
+
+  const getTodayStr = () => getLocalStr(new Date());
+
+  // ── Calendar grid ──────────────────────────────────────────────────────────
+  const monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+  const monthEnd   = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+  const startDOW   = monthStart.getDay();
+  const daysInMon  = monthEnd.getDate();
+  const days       = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
+  const dates      = Array.from({ length: 42 }, (_, i) => {
+    const n = i - startDOW + 1;
+    const d = new Date(currentDate.getFullYear(), currentDate.getMonth(), n);
+    return { day: d.getDate(), dateStr: getLocalStr(d), isCurrentMonth: n > 0 && n <= daysInMon };
+  });
+
+  const handlePrev = () => setCurrentDate(view === 'month'
+    ? new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)
+    : new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - 1));
+
+  const handleNext = () => setCurrentDate(view === 'month'
+    ? new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)
+    : new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1));
+
+  // ── Add / Edit ─────────────────────────────────────────────────────────────
+  const promptAddEvent = (dateStr?: string) => {
+    if (mode !== 'public' && !currentUser) return;
+    const tmrw = new Date(); tmrw.setDate(tmrw.getDate() + 1);
+    const h = new Date().getHours().toString().padStart(2, '0');
+    setModalData({ ...BLANK_MODAL, dateStr: dateStr || getLocalStr(tmrw), time: `${h}:00`, guestEmail: mode === 'public' ? getRememberedEmail() : '', customFields: {} });
+    setShowModal(true);
+  };
+
+  const promptEditEvent = (ev: CalEvent) => {
+    let t = ev.time;
+    if (t) { const [hh, mm] = t.split(':'); if (hh && mm) t = `${hh.padStart(2,'0')}:${mm}`; }
+    setModalData({ id: ev.id, uid: ev.uid, dateStr: ev.dateStr, title: ev.title, description: ev.description || '', time: t || '12:00', duration: ev.duration || '60', color: ev.color || '', guestEmail: ev.creatorEmail || '', customFields: ev.customFields || {} });
+    setShowModal(true);
+  };
+
+  const handleSaveEvent = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!modalData.title.trim()) return;
+    setIsSaving(true);
+    try {
+      const payload: any = {
+        dateStr: modalData.dateStr,
+        title: modalData.title.trim(),
+        description: modalData.description.trim(),
+        time: modalData.time,
+        duration: modalData.duration || '60',
+      };
+      if (modalData.color) payload.color = modalData.color;
+
+      // Save custom fields
+      if (customFieldsDef.length > 0) {
+        payload.customFields = modalData.customFields;
+      }
+
+      // Creator fields — only on new events
+      if (!modalData.id) {
+        if (mode === 'public') {
+          const email = modalData.guestEmail.trim();
+          payload.creatorEmail = email;
+          rememberEmail(email);
+        } else if (mode === 'private' || mode === 'shared') {
+          payload.uid = currentUser?.uid;
+          payload.creatorEmail  = currentUser?.email        || '';
+          payload.creatorName   = currentUser?.displayName  || '';
+          payload.creatorAvatar = currentUser?.photoURL     || '';
+        } else if (mode === 'admin_only') {
+          payload.uid = currentUser?.uid;
+          payload.creatorEmail  = userProfile?.email       || currentUser?.email        || '';
+          payload.creatorName   = userProfile?.displayName || userProfile?.name         || '';
+          payload.creatorAvatar = userProfile?.avatar      || userProfile?.avatarUrl   || currentUser?.photoURL     || '';
+        }
+      }
+
+      if (modalData.id) {
+        await setDoc(doc(db, eventsCollection, modalData.id), payload, { merge: true });
+        if (viewingEvent?.id === modalData.id) setViewingEvent({ ...viewingEvent, ...payload } as CalEvent);
+      } else {
+        await setDoc(doc(db, eventsCollection, `ev_${Date.now()}`), payload, { merge: true });
+      }
+      setShowModal(false);
+    } catch (err) { console.error(err); }
+    setIsSaving(false);
+  };
+
+  const handleDeleteEvent = async () => {
+    if (!confirmDeleteEvent) return;
+    setIsDeleting(true);
+    try {
+      await deleteDoc(doc(db, eventsCollection, confirmDeleteEvent.id));
+      if (viewingEvent?.id === confirmDeleteEvent.id) setViewingEvent(null);
+      setConfirmDeleteEvent(null);
+      setShowModal(false);
+    } catch {}
+    setIsDeleting(false);
+  };
+
+  // Creator avatar block shown inside the view modal
+  const renderCreator = (ev: CalEvent) => {
+    if (mode === 'private') return null;
+    if (!ev.creatorEmail && !ev.creatorName) return null;
+    const letter = (ev.creatorName || ev.creatorEmail || '?').charAt(0).toUpperCase();
+    const col = pastelColors.find(c => c.text === ev.color);
+    return (
+      <div className="flex items-center gap-3 mt-4 p-3 rounded-xl bg-foreground/[0.03] border border-[var(--panel-border)]/50">
+        {ev.creatorAvatar
+          ? <img src={ev.creatorAvatar} alt="" className="w-8 h-8 rounded-full object-cover shrink-0" />
+          : <div className={`w-8 h-8 rounded-full ${col?.bgCircle || 'bg-accent'} flex items-center justify-center text-[13px] font-extrabold text-white shrink-0`}>{letter}</div>
+        }
+        <div className="flex flex-col min-w-0">
+          {ev.creatorName  && <span className="text-[13px] font-bold text-foreground/90 truncate">{ev.creatorName}</span>}
+          {ev.creatorEmail && <span className="text-[12px] text-foreground/50 truncate">{ev.creatorEmail}</span>}
+        </div>
+      </div>
+    );
+  };
+
+  // Creator badge for card (compact) — shared/admin only
+  const renderCardCreator = (ev: CalEvent) => {
+    if (mode === 'private' || mode === 'public') return null;
+    if (!ev.creatorName && !ev.creatorEmail) return null;
+    const name = ev.creatorName || ev.creatorEmail?.split('@')[0] || '';
+    const initials = name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2);
+    return (
+      <div className="flex items-center gap-2 mt-2 pt-2 border-t border-[var(--panel-border)]/30">
+        {ev.creatorAvatar ? (
+          <img src={ev.creatorAvatar} alt="" className="w-5 h-5 rounded-full object-cover shrink-0" />
+        ) : (
+          <div className="w-5 h-5 rounded-full bg-accent/15 text-accent flex items-center justify-center text-[8px] font-extrabold shrink-0">
+            {initials}
+          </div>
+        )}
+        <div className="flex items-center gap-1 min-w-0 flex-1">
+          <span className="text-[11px] font-semibold text-foreground/40 truncate">{name}</span>
+          {ev.creatorEmail && <span className="text-[10px] text-foreground/25 truncate">· {ev.creatorEmail}</span>}
+        </div>
+      </div>
+    );
+  };
+
+  // Prompt text
+  const getPrompt = () => {
+    if (mode === 'admin_only') return adminCalendarPrompt(config, title, eventsCollection, availableForms);
+    if (mode === 'private') return privateCalendarPrompt(config, title, eventsCollection, availableForms);
+    return publicCalendarPrompt(config, title, eventsCollection, availableForms);
+  };
+  const promptText = getPrompt();
+
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(promptText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // ── Auth guard (non-public modes) ─────────────────────────────────────────
+  if (authReady && mode !== 'public' && !currentUser) {
+    return (
+      <main className="flex-1 w-full flex items-center justify-center min-h-screen p-8">
+        <div className="text-center glass-panel border border-[var(--panel-border)] rounded-3xl p-12 max-w-sm w-full">
+          <div className="w-16 h-16 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center mx-auto mb-4">
+            <Mail className="w-7 h-7 text-accent" />
+          </div>
+          <h2 className="text-2xl font-extrabold mb-2">Sign in required</h2>
+          <p className="text-foreground/50 text-[14px] mb-6">You need to be signed in to access this calendar.</p>
+          <Link to="/login" className="inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl btn-primary font-bold text-[14px] w-full">Sign In</Link>
+        </div>
+      </main>
+    );
+  }
+
+  if (!authReady && mode !== 'public') {
+    return (
+      <main className="flex-1 w-full flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-accent" />
+      </main>
+    );
+  }
+
+  const canAdd = (mode === 'public' || !!currentUser) && showButton;
+
+  // ── Shared calendar toolbar (inside container) ─────────────────────────────
+  const CalendarToolbar = () => (
+    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-6 md:px-8 md:py-6 border-b border-[var(--panel-border)]/50 bg-background/50 shrink-0">
+      <div className="flex-1 min-w-0">
+        <h2 className="text-xl font-extrabold text-foreground tracking-tight truncate">
+          {config?.tabTitle || config?.tabName || title}
+        </h2>
+        <p className="text-[13px] font-medium text-foreground/50 mt-1">
+          {events.length} {events.length === 1 ? 'event' : 'events'} · {view === 'month' ? 'Month' : 'Board'} View
+        </p>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {/* Prompt Copy */}
+        {showPrompt && (
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={handleCopyPrompt}
+            title={copied ? 'Copied!' : 'Copy Developer Prompt'}
+            className={`w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer ${copied ? 'bg-emerald-500/10 text-emerald-500' : 'btn-secondary'}`}
+          >
+            {copied ? <Check className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
+          </motion.button>
+        )}
+        {/* 12h/24h toggle */}
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={handleToggle24Hour}
+          className="w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer btn-secondary text-[12px] font-extrabold"
+        >
+          {use24Hour ? '24h' : '12h'}
+        </motion.button>
+        {/* View toggle */}
+        {showViewsButton && (
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={handleToggleView}
+            title={view === 'month' ? 'Switch to Board' : 'Switch to Calendar'}
+            className={`w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer ${viewsButtonStyle === 'primary' ? 'btn-primary' : 'btn-secondary'}`}
+          >
+            {view === 'month' ? <LayoutList className="w-4 h-4" /> : <CalendarIcon className="w-4 h-4" />}
+          </motion.button>
+        )}
+        {/* Add event */}
+        {canAdd && (
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => promptAddEvent()}
+            className={`h-10 flex items-center justify-center gap-2 rounded-xl transition-all duration-300 cursor-pointer ${buttonText === '+' ? 'w-10' : 'px-5'} ${buttonStyle === 'primary' ? 'btn-primary' : 'btn-secondary'}`}
+          >
+            {buttonText === '+' ? <Plus className="w-4 h-4" /> : <span className="text-[13px] font-bold">{buttonText}</span>}
+          </motion.button>
+        )}
+      </div>
+    </div>
+  );
+
+  // ── Month/list internal toolbar ────────────────────────────────────────────
+  const MonthToolbar = () => (
+    <div className="p-4 md:p-6 border-b border-[var(--panel-border)]/50 flex items-center justify-between bg-foreground/[0.01]">
+      <h3 className="text-xl font-extrabold tracking-tight ml-2">
+        {view === 'month'
+          ? currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })
+          : currentDate.toLocaleString('default', { month: 'long', day: 'numeric', year: 'numeric' })}
+      </h3>
+      <div className="flex items-center gap-1">
+        <button onClick={() => setCurrentDate(new Date())} className="px-4 py-2 text-[13px] font-bold border border-[var(--panel-border)] rounded-xl mr-2 hover:bg-foreground/5 transition-colors">Today</button>
+        <button onClick={handlePrev} className="p-2 rounded-xl text-foreground/50 hover:text-foreground hover:bg-foreground/5 transition-colors border border-transparent hover:border-[var(--panel-border)]"><ChevronLeft className="w-5 h-5" /></button>
+        <button onClick={handleNext} className="p-2 rounded-xl text-foreground/50 hover:text-foreground hover:bg-foreground/5 transition-colors border border-transparent hover:border-[var(--panel-border)]"><ChevronRight className="w-5 h-5" /></button>
+      </div>
+    </div>
+  );
+
+  // ── Calendar Content (shared between tab and standalone) ───────────────────
+  const CalendarContent = () => (
+    <>
+      {MonthToolbar()}
+      {view === 'month' ? (
+        <div className="overflow-x-auto w-full flex-1">
+          <div className="min-w-[800px] h-full flex flex-col">
+            <div className="grid grid-cols-7 border-b border-[var(--panel-border)]/50 bg-foreground/[0.02]">
+              {days.map(d => <div key={d} className="py-3 text-center text-[12px] font-bold uppercase tracking-wider text-foreground/40">{d}</div>)}
+            </div>
+            <div className="grid grid-cols-7 auto-rows-auto bg-[var(--panel-border)] gap-[1px] relative flex-1">
+              {dates.map((dateObj, idx) => {
+                const isToday = dateObj.dateStr === getTodayStr();
+                const dayEvents = events.filter(e => e.dateStr === dateObj.dateStr);
+                return (
+                  <div
+                    key={idx}
+                    onClick={() => dateObj.isCurrentMonth && canAdd && promptAddEvent(dateObj.dateStr)}
+                    className={`min-h-[140px] p-2 bg-[var(--panel-bg)] flex flex-col relative group
+                      ${!dateObj.isCurrentMonth ? 'opacity-30 bg-background/50 pointer-events-none' : canAdd ? 'hover:bg-foreground/[0.03] transition-colors cursor-cell' : ''}`}
+                  >
+                    <div className="flex justify-between items-start mb-2 shrink-0">
+                      <span className={`w-8 h-8 rounded-full flex items-center justify-center text-[14px] font-bold ${isToday ? 'bg-accent text-white shadow-lg shadow-accent/20' : 'text-foreground/70 group-hover:text-foreground'}`}>
+                        {dateObj.day}
+                      </span>
+                    </div>
+                    <div className="flex flex-col gap-1.5 flex-1 w-full relative z-10 pb-1">
+                      {dayEvents.map(ev => {
+                        const col = pastelColors.find(c => c.text === ev.color);
+                        const showEdit = canActOn(ev);
+                        return (
+                          <div key={ev.id} className={`px-2 py-1.5 rounded-lg border transition-colors shadow-sm cursor-pointer group/ev relative ${col ? col.bgCard + ' ' + col.borderCard : 'bg-accent/20 border-accent/30 hover:bg-accent/40'}`} onClick={e => { e.stopPropagation(); setViewingEvent(ev); }}>
+                            <p className={`text-[12px] font-bold truncate leading-tight ${showEdit ? 'pr-5' : ''} ${col ? col.text : 'text-foreground'}`}>{ev.title}</p>
+                            <p className="text-[10px] text-foreground/70 mt-0.5">{formatTime(ev.time)}</p>
+                            {showEdit && (
+                              <button onClick={e => { e.stopPropagation(); promptEditEvent(ev); }} className="absolute top-1 right-1 opacity-0 group-hover/ev:opacity-100 p-1 text-foreground/60 hover:bg-foreground/10 hover:text-foreground transition-all rounded">
+                                <Edit2 className="w-3 h-3" />
+                              </button>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <style>{`
+              .styled-scrollbars::-webkit-scrollbar{width:4px}
+              .styled-scrollbars::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent-color) 30%,transparent);border-radius:4px}
+              input[type="time"]::-webkit-calendar-picker-indicator{display:none!important}
+              input[type="date"]{color-scheme:dark}
+              input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.5;transition:opacity .2s}
+              input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
+            `}</style>
+          </div>
+        </div>
+      ) : (
+        /* Board/List view */
+        <div className="flex flex-col p-4 md:p-8 overflow-y-auto w-full flex-1 gap-4">
+          {events
+            .filter(e => e.dateStr === getLocalStr(currentDate))
+            .sort((a, b) => a.time.localeCompare(b.time))
+            .map(ev => {
+              const evDate = new Date(ev.dateStr + 'T12:00:00');
+              const col = pastelColors.find(c => c.text === ev.color);
+              const showActions = canActOn(ev);
+              return (
+                <div key={ev.id} onClick={() => setViewingEvent(ev)} className={`p-4 rounded-2xl border flex flex-col cursor-pointer transition-colors group ${col ? col.bgCard + ' ' + col.borderCard + ' hover:brightness-110' : 'bg-foreground/[0.01] border-[var(--panel-border)]/70 hover:border-accent/40 hover:bg-foreground/[0.02]'}`}>
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-3 shrink-0">
+                      <div className={`w-11 h-11 md:w-12 md:h-12 rounded-xl flex flex-col items-center justify-center border transition-colors shadow-sm ${col ? col.bgCard + ' ' + col.borderCard : 'bg-foreground/5 border-[var(--panel-border)] group-hover:bg-accent/10 group-hover:border-accent/30'}`}>
+                        <span className={`text-[10px] font-bold uppercase leading-none mb-0.5 ${col ? col.text : 'text-foreground/40 group-hover:text-accent/60'}`}>{evDate.toLocaleString('default', { month: 'short' })}</span>
+                        <span className={`text-[18px] font-black leading-none ${col ? col.text : 'group-hover:text-accent'}`}>{evDate.getDate()}</span>
+                      </div>
+                      <div className="h-6 w-px bg-[var(--panel-border)] hidden sm:block group-hover:bg-accent/30 transition-colors" />
+                    </div>
+                    <div className="flex flex-col gap-1 min-w-0 flex-1">
+                      <h4 className={`text-[15px] md:text-[16px] font-extrabold tracking-tight truncate ${col ? col.text : 'text-foreground group-hover:text-accent'}`}>{ev.title}</h4>
+                      <div className="flex items-center gap-3 text-[12px] text-foreground/50 font-medium">
+                        <span>{formatTime(ev.time)}</span>
+                        <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{formatDuration(ev.duration)}</span>
+                      </div>
+                    </div>
+                    {showActions && (
+                      <div className="ml-auto pl-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button onClick={e => { e.stopPropagation(); promptEditEvent(ev); }} className="p-2.5 rounded-xl text-foreground/50 hover:bg-foreground/10 hover:text-foreground transition-colors"><Edit2 className="w-4 h-4" /></button>
+                        <button onClick={e => { e.stopPropagation(); setConfirmDeleteEvent(ev); }} className="p-2.5 rounded-xl text-foreground/30 hover:bg-red-500/10 hover:text-red-500 transition-colors"><Trash className="w-4 h-4" /></button>
+                      </div>
+                    )}
+                  </div>
+                  {/* Creator badge for shared/admin */}
+                  {isTabMode && renderCardCreator(ev)}
+                </div>
+              );
+            })}
+          {events.filter(e => e.dateStr === getLocalStr(currentDate)).length === 0 && (
+            <div className="p-12 text-center text-foreground/40 font-medium">No events scheduled for this day.</div>
+          )}
+        </div>
+      )}
+    </>
+  );
+
+  // ── Modals (shared) ────────────────────────────────────────────────────────
+  const Modals = () => (
+    <AnimatePresence>
+      {/* View event modal */}
+      {viewingEvent && (
+        <div key="view-modal" className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+          <motion.div onClick={() => setViewingEvent(null)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-background/80 backdrop-blur-xl cursor-pointer" />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 10 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 10 }}
+            className={`w-full max-w-[500px] p-6 sm:p-8 rounded-3xl glass-panel border shadow-2xl relative z-10 ${pastelColors.find(c => c.text === viewingEvent.color)?.bgCard || 'bg-background'} ${pastelColors.find(c => c.text === viewingEvent.color)?.borderCard || 'border-[var(--panel-border)]'}`}
+          >
+            <div className="absolute top-4 right-4 flex items-center gap-1 bg-background/50 backdrop-blur-3xl p-1 rounded-2xl border border-[var(--panel-border)]/50 shadow-sm z-50">
+              {canActOn(viewingEvent) && (
+                <>
+                  <button onClick={() => { setViewingEvent(null); promptEditEvent(viewingEvent); }} className="p-2 rounded-xl text-foreground/50 hover:bg-foreground/10 hover:text-foreground transition-all" title="Edit"><Edit2 className="w-4 h-4" /></button>
+                  <button onClick={() => { setConfirmDeleteEvent(viewingEvent); setViewingEvent(null); }} className="p-2 rounded-xl text-foreground/50 hover:bg-red-500/10 hover:text-red-500 transition-all" title="Delete"><Trash className="w-4 h-4" /></button>
+                  <div className="w-px h-6 bg-[var(--panel-border)]/50 mx-1" />
+                </>
+              )}
+              <button onClick={() => setViewingEvent(null)} className="p-2 rounded-xl text-foreground/40 hover:bg-foreground/10 hover:text-foreground transition-all"><X className="w-5 h-5" /></button>
+            </div>
+
+            <div className="mb-6 pr-32">
+              <div className="flex items-center gap-2 mb-3">
+                <span className={`w-2.5 h-2.5 rounded-full ${pastelColors.find(c => c.text === viewingEvent.color)?.bgCircle || 'bg-accent'}`} />
+                <span className={`text-[11px] font-bold tracking-[0.2em] uppercase ${pastelColors.find(c => c.text === viewingEvent.color)?.text || 'text-accent'}`}>Event Details</span>
+              </div>
+              <h3 className={`text-3xl font-black mb-3 tracking-tight leading-tight break-words ${pastelColors.find(c => c.text === viewingEvent.color)?.text || 'text-foreground'}`}>{viewingEvent.title}</h3>
+              <div className="flex flex-col gap-2 mt-4">
+                <div className="flex items-center gap-2.5 text-[14px] text-foreground/70 font-medium">
+                  <div className="w-8 h-8 rounded-full bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0"><CalendarIcon className="w-4 h-4 text-foreground/50" /></div>
+                  {new Date(viewingEvent.dateStr + 'T12:00:00').toLocaleDateString('default', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
+                </div>
+                <div className="flex items-center gap-2.5 text-[14px] text-foreground/70 font-medium">
+                  <div className="w-8 h-8 rounded-full bg-foreground/5 border border-[var(--panel-border)] flex items-center justify-center shrink-0"><Clock className="w-4 h-4 text-foreground/50" /></div>
+                  {formatTime(viewingEvent.time)} <span className="text-foreground/40 text-[12px] ml-1">({formatDuration(viewingEvent.duration)})</span>
+                </div>
+              </div>
+              {renderCreator(viewingEvent)}
+            </div>
+
+            <div className="w-full h-px bg-gradient-to-r from-[var(--panel-border)]/0 via-[var(--panel-border)] to-[var(--panel-border)]/0 mb-6" />
+
+            {viewingEvent.description ? (
+              <div className="bg-foreground/[0.02] border border-[var(--panel-border)]/50 rounded-2xl py-3 px-4 mb-4 w-full overflow-hidden">
+                <div className="text-[14px] text-foreground/80 font-medium whitespace-pre-wrap leading-tight break-words">{viewingEvent.description}</div>
+              </div>
+            ) : (
+              <div className="p-4 mb-4 rounded-2xl border border-dashed border-[var(--panel-border)] bg-foreground/[0.01] text-center">
+                <p className="text-[12px] font-medium text-foreground/40">No description provided for this event.</p>
+              </div>
+            )}
+
+            {/* Custom fields */}
+            {viewingEvent.customFields && Object.entries(viewingEvent.customFields).filter(([, v]) => v).length > 0 && (
+              <div className="flex flex-col gap-2 mb-2">
+                {Object.entries(viewingEvent.customFields).filter(([, v]) => v).map(([key, value]) => (
+                  <div key={key} className="flex items-start gap-2 text-[13px]">
+                    <span className="font-bold text-foreground/50 capitalize shrink-0">{key}:</span>
+                    <span className="text-foreground/80 font-medium break-words min-w-0">{value}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+
+      {/* Add / Edit modal */}
+      {showModal && (
+        <div key="edit-modal" className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+          <motion.div onClick={() => setShowModal(false)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-background/80 backdrop-blur-xl cursor-pointer" />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 10 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 10 }}
+            className="w-full max-w-[500px] p-6 sm:p-8 rounded-3xl glass-panel border border-[var(--panel-border)] shadow-2xl relative z-10 max-h-[90vh] overflow-y-auto styled-scrollbars"
+          >
+            <div className="absolute top-4 right-4 flex items-center gap-1">
+              {modalData.id && canActOn({ uid: modalData.uid } as CalEvent) && (
+                <button onClick={() => { setShowModal(false); setConfirmDeleteEvent({ id: modalData.id!, ...modalData } as any); }} className="p-2 rounded-xl text-foreground/30 hover:bg-red-500/10 hover:text-red-500 transition-all"><Trash className="w-4 h-4" /></button>
+              )}
+              <button onClick={() => setShowModal(false)} className="p-2 rounded-xl text-foreground/40 hover:bg-foreground/10 hover:text-foreground transition-all"><X className="w-5 h-5" /></button>
+            </div>
+
+            <div className="mb-6 pr-12">
+              <h3 className="text-2xl font-extrabold mb-1 tracking-tight">{modalData.id ? 'Edit Event' : 'Add Event'}</h3>
+              <p className="text-[14px] text-foreground/50">{modalData.id ? 'Modify your scheduled calendar block.' : 'Schedule a new calendar block.'}</p>
+            </div>
+
+            <form onSubmit={handleSaveEvent} className="space-y-4">
+              {mode === 'public' && !modalData.id && (
+                <Input label="Your Email" type="email" value={modalData.guestEmail} onChange={e => setModalData({ ...modalData, guestEmail: e.target.value })} placeholder="you@example.com" required />
+              )}
+
+              <Input label="Event Title" value={modalData.title} onChange={e => setModalData({ ...modalData, title: e.target.value })} placeholder="e.g. Design Sync" required />
+
+              <div className="flex flex-col w-full relative">
+                <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">Description</label>
+                <textarea value={modalData.description} onChange={e => setModalData({ ...modalData, description: e.target.value })} placeholder="e.g. Discussing the new features..." className="block min-h-[80px] w-full rounded-xl text-[15px] text-foreground px-4 py-3 transition-all duration-300 placeholder:text-foreground/40 focus:outline-none focus:border-accent glow-focus glass-panel styled-scrollbars resize-none" />
+              </div>
+
+              {/* Custom fields */}
+              {customFieldsDef.map(fieldName => (
+                <Input
+                  key={fieldName}
+                  label={fieldName}
+                  value={modalData.customFields[fieldName] || ''}
+                  onChange={e => setModalData({ ...modalData, customFields: { ...modalData.customFields, [fieldName]: e.target.value } })}
+                  placeholder={`Enter ${fieldName.toLowerCase()}...`}
+                />
+              ))}
+
+              <style>{`
+                input[type="date"]::-webkit-calendar-picker-indicator{background:transparent;bottom:0;color:transparent;cursor:pointer;height:auto;left:0;position:absolute;right:0;top:0;width:auto;z-index:10}
+                input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
+                input[type="number"]{-moz-appearance:textfield}
+              `}</style>
+
+              <div className="relative group/date flex flex-col w-full">
+                <Input type="date" label="Date" required value={modalData.dateStr} onChange={e => setModalData({ ...modalData, dateStr: e.target.value })} className="pr-10" />
+                <div className="absolute right-4 bottom-4 pointer-events-none group-focus-within/date:text-accent text-foreground/40 transition-colors"><CalendarIcon className="w-4 h-4" /></div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                {use24Hour ? (
+                  <Input type="time" label="Time" value={modalData.time} onChange={e => setModalData({ ...modalData, time: e.target.value })} required />
+                ) : (() => {
+                  const { h, m, ampm } = to12hParts(modalData.time);
+                  return (
+                    <div className="flex flex-col w-full">
+                      <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">Time</label>
+                      <div className="flex items-center h-12 glass-panel border border-[var(--panel-border)] rounded-xl px-3 gap-1 focus-within:border-accent transition-colors">
+                        <input type="number" min={1} max={12} value={h} onChange={e => setModalData({ ...modalData, time: from12hParts(Math.min(12, Math.max(1, parseInt(e.target.value) || 12)), m, ampm) })} className="w-8 text-center bg-transparent focus:outline-none text-foreground font-bold text-[15px] [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" />
+                        <span className="text-foreground/40 font-bold text-[15px] select-none">:</span>
+                        <input type="number" min={0} max={59} value={m.toString().padStart(2,'0')} onChange={e => setModalData({ ...modalData, time: from12hParts(h, Math.min(59, Math.max(0, parseInt(e.target.value) || 0)), ampm) })} className="w-8 text-center bg-transparent focus:outline-none text-foreground font-bold text-[15px] [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" />
+                        <button type="button" onClick={() => setModalData({ ...modalData, time: from12hParts(h, m, ampm === 'AM' ? 'PM' : 'AM') })} className="ml-auto px-2 py-0.5 rounded-md bg-accent/10 text-accent text-[11px] font-extrabold uppercase tracking-wider hover:bg-accent/20 transition-colors shrink-0">{ampm}</button>
+                      </div>
+                    </div>
+                  );
+                })()}
+                <Input type="number" min="1" max="1440" label="Duration (min)" value={modalData.duration} onChange={e => setModalData({ ...modalData, duration: e.target.value })} placeholder="60" required />
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <label className="text-[11px] font-bold text-foreground/50 uppercase tracking-widest mt-1">Event Color</label>
+                <div className="flex gap-2 items-center relative z-10 w-full h-[46px]">
+                  {pastelColors.map(c => (
+                    <button key={c.name} type="button" onClick={() => setModalData({ ...modalData, color: modalData.color === c.text ? '' : c.text })} className={`w-6 h-6 rounded-full shrink-0 ${c.bgCircle} hover:scale-110 transition-transform flex items-center justify-center border border-[var(--panel-border)]`}>
+                      {modalData.color === c.text && <div className="w-2.5 h-2.5 rounded-full bg-background" />}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="pt-2">
+                <Button type="submit" isLoading={isSaving} className="w-full py-3">{modalData.id ? 'Save Changes' : 'Create Event'}</Button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
+
+      <ConfirmModal
+        isOpen={!!confirmDeleteEvent}
+        title="Confirm Deletion"
+        message={<>Are you entirely sure you wish to delete <strong>{confirmDeleteEvent?.title}</strong>? This action is permanent.</>}
+        onConfirm={handleDeleteEvent}
+        onCancel={() => { setConfirmDeleteEvent(null); }}
+        isProcessing={isDeleting}
+        confirmText="Yes, Delete"
+      />
+    </AnimatePresence>
+  );
+
+  // ── TAB MODE rendering (admin/shared/private) ─────────────────────────────
+  if (isTabMode) {
+    return (
+      <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-6 flex items-center justify-between">
+          <div>
+            <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+              {config?.tabTitle || config?.tabName || title}
+            </h1>
+            {subtitle && (
+              <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+                <span className="w-8 h-[1px] bg-foreground/10" />{subtitle}
+              </div>
+            )}
+          </div>
+        </motion.div>
+
+        <div className="flex flex-col gap-6 flex-1 pb-16">
+          <DashboardNav />
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="flex flex-col glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl bg-background"
+          >
+            {CalendarToolbar()}
+            {CalendarContent()}
+          </motion.div>
+        </div>
+
+        {Modals()}
+      </main>
+    );
+  }
+
+  // ── STANDALONE PAGE rendering (public / templates preview) ─────────────────
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-4">
+        <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">{title}</h1>
+        {subtitle && (
+          <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+            <span className="w-8 h-[1px] bg-foreground/10" />{subtitle}
+          </div>
+        )}
+      </motion.div>
+
+      <div className="flex justify-between items-center mb-6 border-b border-[var(--panel-border)] pb-6 relative z-20">
+        {backUrl
+          ? <Link to={backUrl} className="px-5 py-2 border border-[var(--panel-border)] rounded-xl text-[13px] font-bold hover:bg-foreground/5 transition-all flex items-center gap-2"><ArrowLeft className="w-4 h-4" /> Go Back</Link>
+          : <div />}
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={handleToggle24Hour} className="px-3 h-10 text-[12px] font-bold rounded-xl flex items-center justify-center border-[var(--panel-border)] border shrink-0 hover:bg-foreground/5 shadow-sm text-foreground/70">
+            {use24Hour ? '24h' : '12h'}
+          </Button>
+          <Button variant="secondary" onClick={handleToggleView} className="w-10 h-10 p-0 text-[14px] font-bold rounded-xl flex items-center justify-center border-[var(--panel-border)] border shrink-0">
+            {view === 'month' ? <LayoutList className="w-4 h-4 text-foreground/70" /> : <CalendarIcon className="w-4 h-4 text-foreground/70" />}
+          </Button>
+          {canAdd && (
+            <Button onClick={() => promptAddEvent()} className="px-6 py-2.5 text-[14px] font-bold rounded-xl shadow-lg flex items-center gap-2">
+              <Plus className="w-4 h-4" /> Event
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden shadow-2xl relative flex flex-col flex-1">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent/5 blur-[120px] rounded-full pointer-events-none -z-10" />
+        {CalendarContent()}
+      </motion.div>
+
+      {Modals()}
+    </main>
+  );
+}