[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Lovy-tech | Smart Glasses OS", description: "Advanced e-OS system for smart glasses with real-time performance tracking", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/create-event-modal.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { X, Clock, MapPin, Calendar, Users, Info } from "lucide-react" import { format, addDays, startOfWeek } from "date-fns" import { TimePicker } from "./time-picker" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface CreateEventModalProps { isOpen: boolean onClose: () => void onSave: (event: any) => void currentDate: Date } export default function CreateEventModal({ isOpen, onClose, onSave, currentDate }: CreateEventModalProps) { const [eventData, setEventData] = useState({ title: "", date: format(currentDate, "yyyy-MM-dd"), start_time: "09:00", end_time: "10:00", location: "", description: "", attendees: "", color: "bg-blue-500", organizer: "You", }) const handleChange = (e) => { const { name, value } = e.target setEventData((prev) => ({ ...prev, [name]: value })) } const handleTimeChange = (type: "start_time" | "end_time") => (value: string) => { setEventData((prev) => ({ ...prev, [type]: value })) } const handleSubmit = (e) => { e.preventDefault() // Ensure the date is in the correct format (YYYY-MM-DD) const processedEvent = { ...eventData, date: eventData.date, // Keep the date in YYYY-MM-DD format attendees: eventData.attendees .split(",") .map((attendee) => attendee.trim()) .filter(Boolean), } onSave(processedEvent) } const weekDays = Array.from({ length: 7 }, (_, i) => addDays(startOfWeek(currentDate), i)) const colorOptions = [ { value: "bg-blue-500", label: "Blue" }, { value: "bg-green-500", label: "Green" }, { value: "bg-purple-500", label: "Purple" }, { value: "bg-yellow-500", label: "Yellow" }, { value: "bg-indigo-500", label: "Indigo" }, { value: "bg-pink-500", label: "Pink" }, { value: "bg-teal-500", label: "Teal" }, { value: "bg-cyan-500", label: "Cyan" }, { value: "bg-red-400", label: "Red" }, { value: "bg-orange-400", label: "Orange" }, ] if (!isOpen) return null return (

Create New Event

{/* Title */}

Event Title

{/* Date Selection */}

Date

{/* Time Selection */}

Start Time

End Time

{/* Location */}

Location

{/* Description */}

Description

</div>

{/* Attendees */}
          <div>
            <label className="block text-sm font-medium mb-1 flex items-center">
              <Users className="h-4 w-4 mr-1" />
              Attendees
            </label>
            <input
              type="text"
              name="attendees"
              value={eventData.attendees}
              onChange={handleChange}
              className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Add attendees (comma separated)"
            />
          </div>

{/* Color Selection */}
          <div>
            <label className="block text-sm font-medium mb-2">Event Color</label>
            <div className="flex flex-wrap gap-2">
              {colorOptions.map((color) => (
                <button
                  key={color.value}
                  type="button"
                  className={`w-8 h-8 rounded-full ${color.value} border-2 ${
                    eventData.color === color.value ? "border-white" : "border-transparent"
                  }`}
                  onClick={() => setEventData((prev) => ({ ...prev, color: color.value }))}
                  aria-label={`Select ${color.label} color`}
                />
              ))}
            </div>
          </div>

{/* Action Buttons */}
          <div className="flex justify-end gap-3 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
            >
              Cancel
            </button>
            <button type="submit" className="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors">
              Create Event
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/ai-popup.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Sparkles, X, Pause } from "lucide-react"

interface AIPopupProps {
  onClose: () => void
}

export default function AIPopup({ onClose }: AIPopupProps) {
  const [typedText, setTypedText] = useState("")
  const [isPlaying, setIsPlaying] = useState(false)

useEffect(() => {
    const text =
      "Looks like you don't have that many meetings today. Shall I play some Hans Zimmer essentials to help you get into your Flow State?"
    let i = 0
    const typingInterval = setInterval(() => {
      if (i < text.length) {
        setTypedText((prev) => prev + text.charAt(i))
        i++
      } else {
        clearInterval(typingInterval)
      }
    }, 50)

return () => clearInterval(typingInterval)
  }, [])

const togglePlay = () => {
    setIsPlaying(!isPlaying)
    // Here you would typically also control the actual audio playback
  }

return (
    <div className="fixed bottom-8 right-8 z-20">
      <div className="w-[450px] relative bg-gradient-to-br from-blue-400/30 via-blue-500/30 to-blue-600/30 backdrop-blur-lg p-6 rounded-2xl shadow-xl border border-blue-300/30 text-white">
        <button onClick={onClose} className="absolute top-2 right-2 text-white/70 hover:text-white transition-colors">
          <X className="h-5 w-5" />
        </button>
        <div className="flex gap-3">
          <div className="flex-shrink-0">
            <Sparkles className="h-5 w-5 text-blue-300" />
          </div>
          <div className="min-h-[80px]">
            <p className="text-base font-light">{typedText}</p>
          </div>
        </div>
        <div className="mt-6 flex gap-3">
          <button
            onClick={togglePlay}
            className="flex-1 py-2.5 bg-white/10 hover:bg-white/20 rounded-xl text-sm transition-colors font-medium"
          >
            Yes
          </button>
          <button
            onClick={onClose}
            className="flex-1 py-2.5 bg-white/10 hover:bg-white/20 rounded-xl text-sm transition-colors font-medium"
          >
            No
          </button>
        </div>
        {isPlaying && (
          <div className="mt-4 flex items-center justify-between">
            <button
              className="flex items-center justify-center gap-2 rounded-xl bg-white/10 px-4 py-2.5 text-white text-sm hover:bg-white/20 transition-colors"
              onClick={togglePlay}
            >
              <Pause className="h-4 w-4" />
              <span>Pause Hans Zimmer</span>
            </button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/time-picker.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface TimePickerProps {
  value: string
  onChange: (value: string) => void
}

export function TimePicker({ value, onChange }: TimePickerProps) {
  const times = React.useMemo(() => {
    const result = []
    for (let i = 0; i < 24; i++) {
      for (let j = 0; j < 60; j += 30) {
        const hour = i.toString().padStart(2, "0")
        const minute = j.toString().padStart(2, "0")
        result.push(`${hour}:${minute}`)
      }
    }
    return result
  }, [])

return (
    <Select value={value} onValueChange={onChange}>
      <SelectTrigger className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
        <SelectValue placeholder="Select time" />
      </SelectTrigger>
      <SelectContent className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-lg text-white">
        {times.map((time) => (
          <SelectItem key={time} value={time} className="hover:bg-white/20">
            {time}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}
[V0_FILE]typescriptreact:file="app/components/event-card.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Clock, MapPin, Calendar, Users, User, FileText, Edit2, Trash2, X, Save } from "lucide-react"
import { format } from "date-fns"
import { formatTime } from "../utils/format-time"

interface EventCardProps {
  event: any
  onClose: () => void
  onDelete: (eventId: string) => void
  onUpdate: (updatedEvent: any) => void
}

export default function EventCard({ event, onClose, onDelete, onUpdate }: EventCardProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [editedEvent, setEditedEvent] = useState(event)

// Calculate hasChanges directly in the render function instead of using an effect
  const hasChanges = JSON.stringify(event) !== JSON.stringify(editedEvent)

if (!event) return null

const handleDelete = () => {
    if (window.confirm("Are you sure you want to delete this event?")) {
      onDelete(event.id)
    }
  }

const handleEdit = () => {
    setIsEditing(true)
  }

const handleSave = () => {
    onUpdate(editedEvent)
    setIsEditing(false)
  }

const handleCancel = () => {
    setEditedEvent(event)
    setIsEditing(false)
  }

const handleChange = (e) => {
    const { name, value } = e.target
    setEditedEvent((prev) => ({ ...prev, [name]: value }))
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden flex flex-col">
        <div className={`${event.color} p-6 text-white`}>
          <div className="flex justify-between items-start">
            {isEditing ? (
              <input
                type="text"
                name="title"
                value={editedEvent.title}
                onChange={handleChange}
                className="text-2xl font-bold bg-transparent border-b border-white w-full"
              />
            ) : (
              <h3 className="text-2xl font-bold">{event.title}</h3>
            )}
            <div className="flex gap-2">
              {!isEditing && (
                <button
                  onClick={handleEdit}
                  className="text-white hover:text-blue-200 transition-colors"
                  aria-label="Edit event"
                >
                  <Edit2 className="h-5 w-5" />
                </button>
              )}
              <button
                onClick={handleDelete}
                className="text-white hover:text-red-200 transition-colors"
                aria-label="Delete event"
              >
                <Trash2 className="h-5 w-5" />
              </button>
              <button onClick={onClose} className="text-white hover:text-gray-200 transition-colors" aria-label="Close">
                <X className="h-5 w-5" />
              </button>
            </div>
          </div>
        </div>
        <div className="p-6 space-y-4 flex-grow overflow-y-auto">
          <div className="flex items-center gap-4">
            <Clock className="h-5 w-5 text-gray-400 flex-shrink-0" />
            {isEditing ? (
              <>
                <input
                  type="time"
                  name="start_time"
                  value={editedEvent.start_time}
                  onChange={handleChange}
                  className="border rounded px-2 py-1 flex-1"
                />
                <input
                  type="time"
                  name="end_time"
                  value={editedEvent.end_time}
                  onChange={handleChange}
                  className="border rounded px-2 py-1 flex-1"
                />
              </>
            ) : (
              <span className="text-gray-600">{`${formatTime(event.start_time)} - ${formatTime(event.end_time)}`}</span>
            )}
          </div>
          <div className="flex items-center gap-4">
            <MapPin className="h-5 w-5 text-gray-400 flex-shrink-0" />
            {isEditing ? (
              <input
                type="text"
                name="location"
                value={editedEvent.location}
                onChange={handleChange}
                className="border rounded px-2 py-1 w-full"
                placeholder="Add location"
              />
            ) : (
              <span className="text-gray-600">{event.location || "No location specified"}</span>
            )}
          </div>
          <div className="flex items-center gap-4">
            <Calendar className="h-5 w-5 text-gray-400 flex-shrink-0" />
            {isEditing ? (
              <input
                type="date"
                name="date"
                value={editedEvent.date}
                onChange={handleChange}
                className="border rounded px-2 py-1"
              />
            ) : (
              <span className="text-gray-600">{format(new Date(event.date), "MM/dd/yyyy")}</span>
            )}
          </div>
          <div className="flex items-start gap-4">
            <Users className="h-5 w-5 text-gray-400 mt-1 flex-shrink-0" />
            <div className="flex-1">
              <strong className="text-gray-700">Attendees:</strong>
              {isEditing ? (
                <input
                  type="text"
                  name="attendees"
                  value={editedEvent.attendees.join(", ")}
                  onChange={(e) => setEditedEvent((prev) => ({ ...prev, attendees: e.target.value.split(", ") }))}
                  className="border rounded px-2 py-1 w-full mt-1"
                  placeholder="Add attendees (comma separated)"
                />
              ) : (
                <p className="text-gray-600">{event.attendees.join(", ") || "No attendees"}</p>
              )}
            </div>
          </div>
          <div className="flex items-center gap-4">
            <User className="h-5 w-5 text-gray-400 flex-shrink-0" />
            <span className="text-gray-600">
              <strong className="text-gray-700">Organizer:</strong> {event.organizer}
            </span>
          </div>
          <div className="flex items-start gap-4">
            <FileText className="h-5 w-5 text-gray-400 mt-1 flex-shrink-0" />
            <div className="flex-1">
              <strong className="text-gray-700">Description:</strong>
              {isEditing ? (
                <textarea
                  name="description"
                  value={editedEvent.description}
                  onChange={handleChange}
                  className="border rounded px-2 py-1 w-full h-20 resize-none mt-1"
                  placeholder="Add description"
                />
              ) : (
                <p className="text-gray-600">{event.description || "No description"}</p>
              )}
            </div>
          </div>
        </div>
        {isEditing && (
          <div className="p-4 bg-gray-100 flex justify-end space-x-2">
            <button
              onClick={handleCancel}
              className="px-4 py-2 rounded bg-gray-300 text-gray-700 hover:bg-gray-400 transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={handleSave}
              className={`px-4 py-2 rounded flex items-center gap-2 transition-colors
                ${
                  hasChanges
                    ? "bg-blue-500 text-white hover:bg-blue-600"
                    : "bg-gray-300 text-gray-500 cursor-not-allowed"
                }`}
              disabled={!hasChanges}
            >
              <Save className="h-4 w-4" />
              Save Changes
            </button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/dnd-provider.tsx" isMerged="true"
"use client"

import type React from "react"

import { DndProvider } from "react-dnd"
import { HTML5Backend } from "react-dnd-html5-backend"
import { TouchBackend } from "react-dnd-touch-backend"
import { useEffect, useState } from "react"

interface DndProviderWrapperProps {
  children: React.ReactNode
}

export default function DndProviderWrapper({ children }: DndProviderWrapperProps) {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.matchMedia("(max-width: 768px)").matches)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)

return () => {
      window.removeEventListener("resize", checkMobile)
    }
  }, [])

// Use TouchBackend for mobile devices and HTML5Backend for desktop
  const backend = isMobile ? TouchBackend : HTML5Backend

return <DndProvider backend={backend}>{children}</DndProvider>
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import Image from "next/image"
import AppContainer from "./components/app-container"
import { createClient } from "@supabase/supabase-js"

export const dynamic = "force-dynamic"

// Initialize Supabase client with service role key for server-side operations
const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)

// This is a Server Component
export default async function Home() {
  // Fetch events from Supabase
  const { data: events, error } = await supabase.from("events").select("*").order("start_time", { ascending: true })

if (error) {
    console.error("Error fetching events:", error)
  }

return (
    <div className="relative min-h-screen w-full overflow-hidden">
      {/* Background Image */}
      <Image
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2070&auto=format&fit=crop"
        alt="Beautiful mountain landscape"
        fill
        className="object-cover"
        priority
      />

<AppContainer initialEvents={events || []} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  // Sample calendar days for the week view
  const weekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]

// Time slots for skeleton
  const timeSlots = Array.from({ length: 5 }, (_, i) => i)

return (
    <div className="relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-blue-900/40 to-indigo-900/40">
      {/* Animated gradient background */}
      <div className="absolute inset-0 bg-grid-slate-200/50 opacity-10"></div>

{/* Header skeleton */}
      <header className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-8 py-6">
        <div className="flex items-center gap-4">
          <div className="h-6 w-6 rounded-md bg-white/20 animate-pulse"></div>
          <div className="h-8 w-32 rounded-md bg-white/20 animate-pulse"></div>
        </div>

{/* Main Content */}
      <main className="relative h-screen w-full pt-20 flex">
        {/* Sidebar skeleton */}
        <div className="w-64 h-full bg-white/10 backdrop-blur-lg p-4 border-r border-white/20 rounded-tr-3xl">
          <div className="h-12 w-full rounded-full bg-blue-500/50 mb-6 animate-pulse"></div>

{/* Mini calendar skeleton */}
          <div className="mb-6">
            <div className="flex items-center justify-between mb-4">
              <div className="h-6 w-24 rounded-md bg-white/20 animate-pulse"></div>
              <div className="flex gap-1">
                <div className="h-6 w-6 rounded-full bg-white/20 animate-pulse"></div>
                <div className="h-6 w-6 rounded-full bg-white/20 animate-pulse"></div>
              </div>
            </div>

<div className="grid grid-cols-7 gap-1 text-center">
              {weekDays.map((_, i) => (
                <div key={i} className="h-4 rounded-md bg-white/20 animate-pulse"></div>
              ))}

{Array.from({ length: 28 }).map((_, i) => (
                <div
                  key={i}
                  className="h-7 w-7 rounded-full bg-white/20 animate-pulse"
                  style={{ animationDelay: `${i * 0.05}s` }}
                ></div>
              ))}
            </div>
          </div>
        </div>

{/* Calendar View skeleton */}
        <div className="flex-1 flex flex-col">
          {/* Calendar Controls skeleton */}
          <div className="flex items-center justify-between p-4 border-b border-white/20">
            <div className="flex items-center gap-4">
              <div className="h-10 w-20 rounded-md bg-blue-500/50 animate-pulse"></div>
              <div className="flex">
                <div className="h-9 w-9 rounded-l-md bg-white/20 animate-pulse"></div>
                <div className="h-9 w-9 rounded-r-md bg-white/20 animate-pulse"></div>
              </div>
              <div className="h-8 w-32 rounded-md bg-white/20 animate-pulse"></div>
            </div>

{/* Week View skeleton */}
          <div className="flex-1 overflow-auto p-4">
            <div className="bg-white/20 backdrop-blur-lg rounded-xl border border-white/20 shadow-xl h-full">
              {/* Week Header skeleton */}
              <div className="grid grid-cols-8 border-b border-white/20">
                <div className="p-2"></div>
                {weekDays.map((_, i) => (
                  <div key={i} className="p-2 text-center border-l border-white/20">
                    <div className="h-4 w-12 mx-auto rounded-md bg-white/20 animate-pulse"></div>
                    <div className="h-8 w-8 mx-auto mt-1 rounded-full bg-white/20 animate-pulse"></div>
                  </div>
                ))}
              </div>

{/* Time Grid skeleton */}
              <div className="grid grid-cols-8">
                {/* Time Labels */}
                <div>
                  {timeSlots.map((_, i) => (
                    <div key={i} className="h-20 border-b border-white/10 pr-2 flex items-center justify-end">
                      <div className="h-4 w-12 rounded-md bg-white/20 animate-pulse"></div>
                    </div>
                  ))}
                </div>

{/* Days Columns with event skeletons */}
                {Array.from({ length: 7 }).map((_, dayIndex) => (
                  <div key={dayIndex} className="border-l border-white/20 relative">
                    {timeSlots.map((_, timeIndex) => (
                      <div key={timeIndex} className="h-20 border-b border-white/10"></div>
                    ))}

{/* Random event skeletons */}
                    {dayIndex % 2 === 0 && (
                      <div
                        className="absolute rounded-md bg-blue-500/40 animate-pulse"
                        style={{
                          top: "20px",
                          left: "4px",
                          right: "4px",
                          height: "60px",
                          animationDelay: `${dayIndex * 0.1}s`,
                        }}
                      ></div>
                    )}

{dayIndex % 3 === 0 && (
                      <div
                        className="absolute rounded-md bg-purple-500/40 animate-pulse"
                        style={{
                          top: "100px",
                          left: "4px",
                          right: "4px",
                          height: "40px",
                          animationDelay: `${dayIndex * 0.15}s`,
                        }}
                      ></div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </main>

{/* Loading indicator */}
      <div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2 animate-pulse">
        <div className="h-4 w-4 rounded-full bg-white animate-pulse"></div>
        <span>Loading your calendar...</span>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/utils/event-names.ts" isMerged="true"
// Array of funny placeholder event names
export const funnyEventNames = [
  "Meeting About Meetings",
  "Pretend to Work Session",
  "Staring at Screen Time",
  "Coffee Appreciation Hour",
  "Existential Crisis Planning",
  "Procrastination Workshop",
  "Zoom Call That Could've Been an Email",
  "Pretending to Listen Session",
  "Nodding and Smiling Practice",
  "Strategic Daydreaming",
  "Keyboard Warrior Training",
  "Professional Cat Video Research",
  "Deadline Panic Preparation",
  "Email Avalanche Management",
  "Spontaneous Nap Opportunity",
  "Snack Optimization Workshop",
  "Staring Out Window Meditation",
  "Pretending to Be Busy Hour",
  "Thinking About Lunch Planning",
  "Spreadsheet Admiration Time",
]

// Function to get a random event name
export function getRandomEventName(): string {
  const randomIndex = Math.floor(Math.random() * funnyEventNames.length)
  return funnyEventNames[randomIndex]
}

// Function to generate a random color from our predefined set
export function getRandomEventColor(): string {
  const colors = [
    "bg-blue-500",
    "bg-green-500",
    "bg-purple-500",
    "bg-yellow-500",
    "bg-indigo-500",
    "bg-pink-500",
    "bg-teal-500",
    "bg-cyan-500",
    "bg-red-400",
    "bg-orange-400",
  ]
  const randomIndex = Math.floor(Math.random() * colors.length)
  return colors[randomIndex]
}
[V0_FILE]typescript:file="app/utils/format-time.ts" isMerged="true"
// Format time from 24-hour format (HH:MM) to 12-hour format with AM/PM
export function formatTime(time: string): string {
  if (!time) return ""

const [hourStr, minuteStr] = time.split(":")
  const hour = Number.parseInt(hourStr, 10)
  const minute = minuteStr || "00"

const period = hour >= 12 ? "PM" : "AM"
  const displayHour = hour % 12 || 12 // Convert 0 to 12 for 12 AM

return `${displayHour}:${minute} ${period}`
}
[V0_FILE]typescriptreact:file="app/components/week-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useRef } from "react"
import { format, addDays, startOfWeek, isSameDay } from "date-fns"
import { X } from "lucide-react"
import { useDrag, useDrop } from "react-dnd"
import { getRandomEventName, getRandomEventColor } from "../utils/event-names"
import { formatTime } from "../utils/format-time"

// Define the drag item types
const ItemTypes = {
  EVENT: "event",
}

interface WeekViewProps {
  events: any[]
  currentDate: Date
  onEventClick: (event: any) => void
  onDeleteEvent: (eventId: string) => void
  onUpdateEvent?: (updatedEvent: any) => void
  onCreateEvent?: (event: any) => void
}

// Draggable Event Component
function DraggableEvent({ event, style, onEventClick, onDeleteEvent, onUpdateEvent }) {
  const ref = useRef(null)

const [{ isDragging }, drag] = useDrag(() => ({
    type: ItemTypes.EVENT,
    item: { id: event.id, originalEvent: event },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }))

const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    onDeleteEvent(event.id)
  }

// Apply the drag ref to our element
  drag(ref)

return (
    <div
      ref={ref}
      className={`absolute ${event.color} rounded-md p-2 text-white text-xs shadow-md cursor-move transition-all duration-200 ease-in-out hover:translate-y-[-2px] hover:shadow-lg group overflow-hidden`}
      style={{
        ...style,
        left: "4px",
        right: "4px",
        opacity: isDragging ? 0.5 : 1,
      }}
      onClick={() => onEventClick(event)}
    >
      <div className="font-medium line-clamp-2">{event.title}</div>
      <div className="opacity-80 text-[10px] mt-1 truncate">
        {`${formatTime(event.start_time)} - ${formatTime(event.end_time)}`}
      </div>
      <button
        className="absolute top-1 right-1 bg-red-500 rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
        onClick={handleDeleteClick}
      >
        <X className="h-3 w-3 text-white" />
      </button>
    </div>
  )
}

// Droppable Time Slot Component
function DroppableTimeSlot({ day, hour, children, onDrop, onDoubleClick }) {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: ItemTypes.EVENT,
    drop: (item: { id: string; originalEvent: any }) => {
      onDrop(item.originalEvent, day, hour)
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }))

return (
    <div
      ref={drop}
      className={`h-20 border-b border-white/10 relative ${isOver ? "bg-white/10" : ""} hover:bg-white/5 cursor-pointer transition-colors duration-150`}
      onDoubleClick={() => onDoubleClick(day, hour)}
      title="Double-click to create event"
    >
      {children}
    </div>
  )
}

// Helper function to get day of week name
function getDayOfWeek(dayIndex) {
  const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
  return days[dayIndex]
}

export default function WeekView({
  events,
  currentDate,
  onEventClick,
  onDeleteEvent,
  onUpdateEvent,
  onCreateEvent,
}: WeekViewProps) {
  const weekDays = Array.from({ length: 7 }, (_, i) => addDays(startOfWeek(currentDate), i))
  const timeSlots = Array.from({ length: 9 }, (_, i) => i + 8) // 8 AM to 4 PM

const calculateEventStyle = (start_time, end_time) => {
    if (!start_time || !end_time) {
      console.error("Invalid start_time or end_time:", start_time, end_time)
      return { top: "0px", height: "0px" }
    }
    const start = Number.parseInt(start_time.split(":")[0]) + Number.parseInt(start_time.split(":")[1]) / 60
    const end = Number.parseInt(end_time.split(":")[0]) + Number.parseInt(end_time.split(":")[1]) / 60
    const top = (start - 8) * 80 // 80px per hour
    const height = (end - start) * 80
    return { top: `${top}px`, height: `${height}px` }
  }

const handleEventDrop = (originalEvent, day, hour) => {
    if (!onUpdateEvent) return

console.log("--- Event Drop Debug ---")
    console.log("Original Event:", originalEvent)
    console.log("Original Date:", originalEvent.date)
    console.log("Drop Target Day (raw):", day)

// Format the date using local date components to ensure consistency
    const year = day.getFullYear()
    const month = String(day.getMonth() + 1).padStart(2, "0") // +1 because months are 0-indexed
    const date = String(day.getDate()).padStart(2, "0")
    const formattedDate = `${year}-${month}-${date}`

console.log("Formatted Target Date (using local components):", formattedDate)
    console.log("Hour:", hour)

// Calculate the new time based on the drop position
    const [startHour, startMinute] = originalEvent.start_time.split(":").map(Number)
    const [endHour, endMinute] = originalEvent.end_time.split(":").map(Number)

// Calculate the event duration in minutes
    const startMinutes = startHour * 60 + startMinute
    const endMinutes = endHour * 60 + endMinute
    const durationMinutes = endMinutes - startMinutes

// Calculate the new start time in minutes
    const newStartHour = hour
    const newStartMinute = startMinute
    const newStartMinutes = newStartHour * 60 + newStartMinute
    const newEndMinutes = newStartMinutes + durationMinutes

// Convert back to HH:MM format
    const newStartTime = `${String(newStartHour).padStart(2, "0")}:${String(newStartMinute).padStart(2, "0")}`
    const newEndHour = Math.floor(newEndMinutes / 60)
    const newEndMinute = newEndMinutes % 60
    const newEndTime = `${String(newEndHour).padStart(2, "0")}:${String(newEndMinute).padStart(2, "0")}`

// Create the updated event
    const updatedEvent = {
      ...originalEvent,
      date: formattedDate,
      start_time: newStartTime,
      end_time: newEndTime,
    }

console.log("Updated Event:", updatedEvent)
    console.log("------------------------")

// Update the database
    onUpdateEvent(updatedEvent)
  }

const handleDoubleClick = (day, hour) => {
    if (!onCreateEvent) return

// Format the date
    const year = day.getFullYear()
    const month = String(day.getMonth() + 1).padStart(2, "0")
    const date = String(day.getDate()).padStart(2, "0")
    const formattedDate = `${year}-${month}-${date}`

// Calculate end time (1 hour after start)
    const endHour = hour + 1
    const startTime = `${String(hour).padStart(2, "0")}:00`
    const endTime = `${String(endHour).padStart(2, "0")}:00`

// Create a new event with random funny name
    const newEvent = {
      title: getRandomEventName(),
      date: formattedDate,
      start_time: startTime,
      end_time: endTime,
      location: "",
      description: "Double-clicked to create this event",
      attendees: [],
      color: getRandomEventColor(),
      organizer: "You",
    }

console.log("Creating new event:", newEvent)
    onCreateEvent(newEvent)
  }

return (
    <div>
      {/* Week Header */}
      <div className="grid grid-cols-8 border-b border-white/20">
        <div className="p-2 text-center text-white/50 text-xs"></div>
        {weekDays.map((day, i) => (
          <div key={i} className="p-2 text-center border-l border-white/20">
            <div className="text-xs text-white/70 font-medium">{format(day, "EEE")}</div>
            <div className="h-10 flex items-center justify-center">
              <div
                className={`text-lg font-medium text-white w-10 h-10 flex items-center justify-center
                  ${isSameDay(day, new Date()) ? "bg-blue-500 rounded-full" : ""}`}
              >
                {format(day, "d")}
              </div>
            </div>
          </div>
        ))}
      </div>

{/* Time Grid */}
      <div className="grid grid-cols-8">
        {/* Time Labels */}
        <div className="text-white/70">
          {timeSlots.map((time, i) => (
            <div key={i} className="h-20 border-b border-white/10 pr-2 text-right text-xs">
              {time > 12 ? `${time - 12} PM` : `${time} AM`}
            </div>
          ))}
        </div>

{/* Days Columns */}
        {weekDays.map((day, dayIndex) => (
          <div key={dayIndex} className="border-l border-white/20 relative">
            {timeSlots.map((time, timeIndex) => (
              <DroppableTimeSlot
                key={timeIndex}
                day={day}
                hour={time}
                onDrop={handleEventDrop}
                onDoubleClick={handleDoubleClick}
              />
            ))}

{/* Events */}
            {events
              .filter((event) => {
                try {
                  // Parse the event date
                  const [eventYear, eventMonth, eventDay] = event.date.split("-").map(Number)

// Create a date object from the event date for direct comparison
                  // Note: months are 0-indexed in JavaScript Date objects
                  const eventDate = new Date(eventYear, eventMonth - 1, eventDay)

// Compare with the day in the column using local date components
                  return (
                    day.getFullYear() === eventDate.getFullYear() &&
                    day.getMonth() === eventDate.getMonth() &&
                    day.getDate() === eventDate.getDate()
                  )
                } catch (e) {
                  console.error("Error comparing dates:", e)
                  return false
                }
              })
              .map((event) => {
                const eventStyle = calculateEventStyle(event.start_time, event.end_time)

return (
                  <DraggableEvent
                    key={event.id}
                    event={event}
                    style={eventStyle}
                    onEventClick={onEventClick}
                    onDeleteEvent={onDeleteEvent}
                    onUpdateEvent={onUpdateEvent}
                  />
                )
              })}
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/day-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useRef } from "react"
import { isSameDay, format } from "date-fns"
import { X } from "lucide-react"
import { useDrag, useDrop } from "react-dnd"
import { getRandomEventName, getRandomEventColor } from "../utils/event-names"
import { formatTime } from "../utils/format-time"

// Define the drag item types
const ItemTypes = {
  EVENT: "event",
}

interface DayViewProps {
  events: any[]
  currentDate: Date
  onEventClick: (event: any) => void
  onDeleteEvent: (eventId: string) => void
  onUpdateEvent?: (updatedEvent: any) => void
  onCreateEvent?: (event: any) => void
}

// Draggable Event Component
function DraggableEvent({ event, style, onEventClick, onDeleteEvent }) {
  const ref = useRef(null)

const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    onDeleteEvent(event.id)
  }

// Apply the drag ref to our element
  drag(ref)

return (
    <div
      ref={ref}
      className={`absolute ${event.color} rounded-md p-2 text-white text-xs shadow-md cursor-move transition-all duration-200 ease-in-out hover:translate-y-[-2px] hover:shadow-lg group left-0 right-0 mx-1 overflow-hidden`}
      style={{
        ...style,
        opacity: isDragging ? 0.5 : 1,
      }}
      onClick={() => onEventClick(event)}
    >
      <div className="font-medium line-clamp-2">{event.title}</div>
      <div className="opacity-80 text-[10px] mt-1 truncate">
        {`${formatTime(event.start_time)} - ${formatTime(event.end_time)}`}
      </div>
      <button
        className="absolute top-1 right-1 bg-red-500 rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
        onClick={handleDeleteClick}
      >
        <X className="h-3 w-3 text-white" />
      </button>
    </div>
  )
}

// Droppable Time Slot Component
function DroppableTimeSlot({ hour, children, onDrop, onDoubleClick }) {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: ItemTypes.EVENT,
    drop: (item: { id: string; originalEvent: any }) => {
      onDrop(item.originalEvent, hour)
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }))

return (
    <div
      ref={drop}
      className={`h-[60px] border-b border-white/10 relative ${isOver ? "bg-white/10" : ""} hover:bg-white/5 cursor-pointer transition-colors duration-150`}
      onDoubleClick={() => onDoubleClick(hour)}
      title="Double-click to create event"
    >
      {children}
    </div>
  )
}

export default function DayView({
  events,
  currentDate,
  onEventClick,
  onDeleteEvent,
  onUpdateEvent,
  onCreateEvent,
}: DayViewProps) {
  const timeSlots = Array.from({ length: 24 }, (_, i) => i)

const calculateEventStyle = (start_time, end_time) => {
    const start = Number.parseInt(start_time.split(":")[0]) + Number.parseInt(start_time.split(":")[1]) / 60
    const end = Number.parseInt(end_time.split(":")[0]) + Number.parseInt(end_time.split(":")[1]) / 60
    const top = start * 60 // 60px per hour
    const height = (end - start) * 60
    return { top: `${top}px`, height: `${height}px` }
  }

const handleEventDrop = (originalEvent, hour) => {
    if (!onUpdateEvent) return

console.log("--- Day View Event Drop Debug ---")
    console.log("Original Event:", originalEvent)
    console.log("Original Date:", originalEvent.date)

// Format the date using the current date's local components
    const year = currentDate.getFullYear()
    const month = String(currentDate.getMonth() + 1).padStart(2, "0") // +1 because months are 0-indexed
    const date = String(currentDate.getDate()).padStart(2, "0")
    const formattedDate = `${year}-${month}-${date}`

console.log("Formatted Target Date:", formattedDate)
    console.log("Hour:", hour)

// Calculate the event duration in minutes
    const startMinutes = startHour * 60 + startMinute
    const endMinutes = endHour * 60 + endMinute
    const durationMinutes = endMinutes - startMinutes

// Create the updated event - use the formatted date from the current date
    const updatedEvent = {
      ...originalEvent,
      date: formattedDate,
      start_time: newStartTime,
      end_time: newEndTime,
    }

console.log("Updated Event:", updatedEvent)
    console.log("------------------------")

// Update the database
    onUpdateEvent(updatedEvent)
  }

const handleDoubleClick = (hour) => {
    if (!onCreateEvent) return

// Format the date
    const year = currentDate.getFullYear()
    const month = String(currentDate.getMonth() + 1).padStart(2, "0")
    const date = String(currentDate.getDate()).padStart(2, "0")
    const formattedDate = `${year}-${month}-${date}`

// Calculate end time (1 hour after start)
    const endHour = hour + 1
    const startTime = `${String(hour).padStart(2, "0")}:00`
    const endTime = `${String(endHour).padStart(2, "0")}:00`

console.log("Creating new event:", newEvent)
    onCreateEvent(newEvent)
  }

const dayEvents = events.filter((event) => {
    try {
      // Parse the event date
      const [eventYear, eventMonth, eventDay] = event.date.split("-").map(Number)

// Create a date object from the event date for direct comparison
      // Note: months are 0-indexed in JavaScript Date objects
      const eventDate = new Date(eventYear, eventMonth - 1, eventDay)

// Compare with the current date using local date components
      return (
        currentDate.getFullYear() === eventDate.getFullYear() &&
        currentDate.getMonth() === eventDate.getMonth() &&
        currentDate.getDate() === eventDate.getDate()
      )
    } catch (e) {
      console.error("Error comparing dates:", e)
      return false
    }
  })

return (
    <div className="flex flex-col h-full">
      <div className="flex-shrink-0 p-2 text-center border-b border-white/20">
        <div className="text-xs text-white/70 font-medium">{format(currentDate, "EEEE")}</div>
        <div className="h-10 flex items-center justify-center">
          <div
            className={`text-lg font-medium text-white w-10 h-10 flex items-center justify-center
                ${isSameDay(currentDate, new Date()) ? "bg-blue-500 rounded-full" : ""}`}
          >
            {format(currentDate, "d")}
          </div>
        </div>
      </div>
      <div className="flex-grow overflow-auto">
        <div className="grid grid-cols-[100px_1fr] h-[1440px]">
          {/* Time Labels */}
          <div className="text-white/70">
            {timeSlots.map((time) => (
              <div key={time} className="h-[60px] border-b border-white/10 pr-2 text-right text-xs">
                {time === 0 ? "12 AM" : time < 12 ? `${time} AM` : time === 12 ? "12 PM" : `${time - 12} PM`}
              </div>
            ))}
          </div>
          {/* Events */}
          <div className="relative border-l border-white/20">
            {timeSlots.map((time) => (
              <DroppableTimeSlot key={time} hour={time} onDrop={handleEventDrop} onDoubleClick={handleDoubleClick} />
            ))}
            {dayEvents.map((event) => {
              const eventStyle = calculateEventStyle(event.start_time, event.end_time)

return (
                <DraggableEvent
                  key={event.id}
                  event={event}
                  style={eventStyle}
                  onEventClick={onEventClick}
                  onDeleteEvent={onDeleteEvent}
                />
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/month-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay } from "date-fns"
import { X } from "lucide-react"
import { formatTime } from "../utils/format-time"

interface MonthViewProps {
  events: any[]
  currentDate: Date
  onEventClick: (event: any) => void
  onDeleteEvent: (eventId: string) => void
}

export default function MonthView({ events, currentDate, onEventClick, onDeleteEvent }: MonthViewProps) {
  const monthStart = startOfMonth(currentDate)
  const monthEnd = endOfMonth(currentDate)
  const monthDays = eachDayOfInterval({ start: monthStart, end: monthEnd })

const handleDeleteClick = (e: React.MouseEvent, eventId: string) => {
    e.stopPropagation()
    onDeleteEvent(eventId)
  }

return (
    <div className="grid grid-cols-7 gap-1 p-2">
      {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
        <div key={day} className="text-center text-white/70 font-medium py-2">
          {day}
        </div>
      ))}
      {monthDays.map((day, index) => (
        <div
          key={index}
          className={`min-h-[100px] p-1 border border-white/10 rounded ${
            isSameMonth(day, currentDate) ? "bg-white/10" : "bg-white/5"
          }`}
        >
          <div className="h-10 flex items-center justify-end">
            <div
              className={`text-sm font-medium text-white w-8 h-8 flex items-center justify-center
                ${isSameDay(day, new Date()) ? "bg-blue-500 rounded-full" : ""}`}
            >
              {format(day, "d")}
            </div>
          </div>
          <div className="mt-1 space-y-1">
            {events
              .filter((event) => {
                try {
                  // Parse the event date
                  const [eventYear, eventMonth, eventDay] = event.date.split("-").map(Number)

// Compare with the day in the grid using local date components
                  return (
                    day.getFullYear() === eventDate.getFullYear() &&
                    day.getMonth() === eventDate.getMonth() &&
                    day.getDate() === eventDate.getDate()
                  )
                } catch (e) {
                  console.error("Error comparing dates:", e)
                  return false
                }
              })
              .map((event) => (
                <div
                  key={event.id}
                  className={`${event.color} rounded p-1 text-white text-xs cursor-pointer group relative overflow-hidden`}
                  onClick={() => onEventClick(event)}
                >
                  <div className="font-medium line-clamp-2">{event.title}</div>
                  <div className="opacity-80 text-[9px] truncate">{`${formatTime(event.start_time)}`}</div>
                  <button
                    className="absolute top-0 right-0 bg-red-500 rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                    onClick={(e) => handleDeleteClick(e, event.id)}
                  >
                    <X className="h-2 w-2 text-white" />
                  </button>
                </div>
              ))}
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]javascript:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "fade-in": {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "fade-in": "fade-in 0.5s ease-out forwards",
      },
    },
  },
  plugins: [
    require("tailwindcss-animate"),
    require("@tailwindcss/line-clamp"), // For Tailwind CSS v2 or v3.0-v3.2
  ],
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}

@layer utilities {
  .bg-grid-slate-200\/50 {
    background-image: linear-gradient(currentColor 1px, transparent 1px),
      linear-gradient(to right, currentColor 1px, transparent 1px);
    background-size: 20px 20px;
  }

/* Ensure line-clamp works properly */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.react-draggable {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[V0_FILE]typescriptreact:file="app/hooks/use-mobile.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

export function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.matchMedia("(max-width: 768px)").matches)
    }

// Initial check
    checkMobile()

// Add event listener for window resize
    window.addEventListener("resize", checkMobile)

// Clean up
    return () => window.removeEventListener("resize", checkMobile)
  }, [])

return isMobile
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true"
"use client"

import * as React from "react"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/app/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { TooltipProvider } from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === "function" ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

// This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open],
  )

// Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
        event.preventDefault()
        toggleSidebar()
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContext>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  )

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className)}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
})
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
    return (
      <div
        className={cn("flex h-full w-[--sidebar-width] flex-col bg-transparent text-white", className)}
        ref={ref}
        {...props}
      >
        {children}
      </div>
    )
  }

if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-mobile="true"
          className="w-[--sidebar-width] bg-transparent p-0 text-white [&>button]:hidden"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

return (
    <div
      ref={ref}
      className="group peer hidden md:block text-white"
      data-state={state}
      data-collapsible={state === "collapsed" ? collapsible : ""}
      data-variant={variant}
      data-side={side}
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        className={cn(
          "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
          "group-data-[collapsible=offcanvas]:w-0",
          "group-data-[side=right]:rotate-180",
          variant === "floating" || variant === "inset"
            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
        )}
      />
      <div
        className={cn(
          "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
          side === "left"
            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
          // Adjust the padding for floating and inset variants.
          variant === "floating" || variant === "inset"
            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
          className,
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          className="flex h-full w-full flex-col bg-white/10 backdrop-blur-lg shadow-xl border-r border-white/20 rounded-tr-3xl group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
        >
          {children}
        </div>
      </div>
    </div>
  )
})
Sidebar.displayName = "Sidebar"

const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
  ({ className, onClick, ...props }, ref) => {
    const { toggleSidebar } = useSidebar()

return (
      <Button
        ref={ref}
        data-sidebar="trigger"
        variant="ghost"
        size="icon"
        className={cn("h-7 w-7", className)}
        onClick={(event) => {
          onClick?.(event)
          toggleSidebar()
        }}
        {...props}
      >
        <PanelLeft />
        <span className="sr-only">Toggle Sidebar</span>
      </Button>
    )
  },
)
SidebarTrigger.displayName = "SidebarTrigger"

const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
  return <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props} />
})
SidebarHeader.displayName = "SidebarHeader"

const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className,
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = "SidebarContent"

export { Sidebar, SidebarContent, SidebarHeader, SidebarProvider, SidebarTrigger, useSidebar }
[V0_FILE]typescriptreact:file="app/components/sidebar.tsx" isEdit="true" isMerged="true"
"use client"
import { ChevronLeft, ChevronRight, Plus } from "lucide-react"
import { useState } from "react"
import {
  format,
  addMonths,
  subMonths,
  startOfMonth,
  endOfMonth,
  eachDayOfInterval,
  isSameMonth,
  isSameDay,
} from "date-fns"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
import CreateEventModal from "./create-event-modal"
import { Sidebar, SidebarContent, SidebarHeader } from "@/components/ui/sidebar"

interface SidebarProps {
  currentDate: Date
  onDateChange: (date: Date) => void
  onCreateEvent: (event: any) => void
}

export default function CalendarSidebar({ currentDate, onDateChange, onCreateEvent }: SidebarProps) {
  const [currentMonth, setCurrentMonth] = useState(startOfMonth(currentDate))
  const [isDialogOpen, setIsDialogOpen] = useState(false)

// This effect can be removed and replaced with a derived value
  const monthStart = startOfMonth(currentDate)

// Update currentMonth when currentDate changes
  if (currentMonth.getMonth() !== monthStart.getMonth() || currentMonth.getFullYear() !== monthStart.getFullYear()) {
    setCurrentMonth(monthStart)
  }

const days = eachDayOfInterval({
    start: startOfMonth(currentMonth),
    end: endOfMonth(currentMonth),
  })

const prevMonth = () => setCurrentMonth(subMonths(currentMonth, 1))
  const nextMonth = () => setCurrentMonth(addMonths(currentMonth, 1))

const handleDateClick = (day: Date) => {
    onDateChange(day)
  }

const handleCreateEvent = (event: any) => {
    onCreateEvent(event)
    setIsDialogOpen(false)
  }

return (
    <Sidebar className="w-64 h-full bg-white/10 backdrop-blur-lg shadow-xl border-r border-white/20 rounded-tr-3xl">
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <SidebarHeader className="p-4">
          <DialogTrigger asChild>
            <button className="mb-6 flex items-center justify-center gap-2 rounded-full bg-blue-500 px-4 py-3 text-white w-full transition-colors duration-200 hover:bg-blue-600">
              <Plus className="h-5 w-5" />
              <span>Create</span>
            </button>
          </DialogTrigger>
        </SidebarHeader>

<SidebarContent className="p-4">
          {/* Mini Calendar */}
          <div className="mb-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-white font-medium">{format(currentMonth, "MMMM yyyy")}</h3>
              <div className="flex gap-1">
                <button className="p-1 rounded-full hover:bg-white/20" onClick={prevMonth}>
                  <ChevronLeft className="h-4 w-4 text-white" />
                </button>
                <button className="p-1 rounded-full hover:bg-white/20" onClick={nextMonth}>
                  <ChevronRight className="h-4 w-4 text-white" />
                </button>
              </div>
            </div>

<div className="grid grid-cols-7 gap-1 text-center">
              {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
                <div key={i} className="text-xs text-white/70 font-medium py-1">
                  {day}
                </div>
              ))}

{days.map((day, i) => (
                <button
                  key={i}
                  onClick={() => handleDateClick(day)}
                  className={`text-xs rounded-full w-7 h-7 flex items-center justify-center 
                    ${!isSameMonth(day, currentMonth) ? "text-white/30" : "text-white"}
                    ${isSameDay(day, currentDate) ? "bg-blue-500" : "hover:bg-white/20"}
                  `}
                >
                  {format(day, "d")}
                </button>
              ))}
            </div>
          </div>

{/* New position for the big plus button */}
          <DialogTrigger asChild>
            <button className="mt-6 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4 text-white w-14 h-14 self-start">
              <Plus className="h-6 w-6" />
            </button>
          </DialogTrigger>
        </SidebarContent>

<DialogContent className="p-0 bg-transparent border-none">
          <CreateEventModal
            isOpen={isDialogOpen}
            onClose={() => setIsDialogOpen(false)}
            onSave={handleCreateEvent}
            currentDate={currentDate}
          />
        </DialogContent>
      </Dialog>
    </Sidebar>
  )
}
[V0_FILE]typescriptreact:file="app/actions/event-actions.ts" isEdit="true" isMerged="true"
"use server"

import { createClient } from "@supabase/supabase-js"

const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)

export async function createEvent(eventData) {
  try {
    const { data, error } = await supabase.from("events").insert([eventData]).select()

if (error) {
      return { success: false, error: error.message }
    }

return { success: true, data: data[0] }
  } catch (error) {
    console.error("Error creating event:", error)
    return { success: false, error: "Failed to create event" }
  }
}

export async function updateEvent(eventId, eventData) {
  try {
    const { data, error } = await supabase.from("events").update(eventData).eq("id", eventId).select()

if (error) {
      return { success: false, error: error.message }
    }

return { success: true, data: data[0] }
  } catch (error) {
    console.error("Error updating event:", error)
    return { success: false, error: "Failed to update event" }
  }
}

export async function deleteEvent(eventId) {
  try {
    const { error } = await supabase.from("events").delete().eq("id", eventId)

if (error) {
      return { success: false, error: error.message }
    }

return { success: true }
  } catch (error) {
    console.error("Error deleting event:", error)
    return { success: false, error: "Failed to delete event" }
  }
}
[V0_FILE]typescriptreact:file="app/actions/ai-actions.ts" isEdit="true" isMerged="true"
"use server"

import { generateText } from "ai"
import { xai } from "@ai-sdk/xai"
import { createClient } from "@supabase/supabase-js"

const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)

export async function chatWithCalendar(message: string) {
  try {
    // Verify that the API key is available
    if (!process.env.XAI_API_KEY) {
      return {
        success: false,
        text: "The xAI API key is not configured. Please make sure the xAI integration is properly set up in your Vercel project.",
      }
    }

// Fetch all events from the database
    const { data: events, error } = await supabase.from("events").select("*").order("date", { ascending: true })

if (error) {
      throw new Error(`Error fetching events: ${error.message}`)
    }

// Create a context with the events data
    const eventsContext = events
      .map((event) => {
        return `Event: ${event.title}
Date: ${event.date}
Time: ${event.start_time} - ${event.end_time}
Location: ${event.location || "No location specified"}
Description: ${event.description || "No description"}
Attendees: ${event.attendees?.join(", ") || "None"}`
      })
      .join("\n\n")

// Generate a response using Grok
    const { text } = await generateText({
      model: xai("grok-2-1212"), // Updated to use the correct model name
      prompt: message,
      system: `You are a helpful AI assistant for a calendar app. You have access to the user's calendar events and can answer questions about their schedule.
      
Here are the current events in the calendar:

${eventsContext}

Answer questions about these events, such as when events are scheduled, who is attending, or if there are conflicts. 
If asked about a specific day, focus on events for that day. 
If the user asks to create, modify, or delete events, explain that you can only provide information about existing events.
Keep your responses concise and focused on the calendar information.`,
    })

return { success: true, text }
  } catch (error) {
    console.error("Error in chatWithCalendar:", error)
    return {
      success: false,
      text: "Sorry, I encountered an error while processing your request. Please try again later.",
    }
  }
}
[V0_FILE]typescriptreact:file="app/components/ai-chat.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Send, Sparkles, Bot } from "lucide-react"
import { chatWithCalendar } from "../actions/ai-actions"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

interface Message {
  role: "user" | "assistant"
  content: string
}

export default function AIChat() {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      role: "assistant",
      content:
        "Hi! I can help you with your calendar. Ask me about your schedule, events, or any calendar-related questions.",
    },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Scroll to bottom of messages
  useEffect(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
    }
  }, [messages])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return

// Add user message
    const userMessage = { role: "user" as const, content: input }
    setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

try {
      // Get AI response
      const response = await chatWithCalendar(input)

setMessages((prev) => [
        ...prev,
        {
          role: "assistant",
          content: response.text,
        },
      ])
    } catch (error) {
      console.error("Error getting AI response:", error)
      setMessages((prev) => [
        ...prev,
        {
          role: "assistant",
          content: "Sorry, I encountered an error. Please try again later.",
        },
      ])
    } finally {
      setIsLoading(false)
    }
  }

return (
    <>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogTrigger asChild>
          <Button
            className="fixed bottom-6 right-6 rounded-full p-4 bg-blue-500 hover:bg-blue-600 shadow-lg"
            size="icon"
          >
            <Bot className="h-6 w-6" />
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px] bg-gradient-to-br from-blue-900/80 via-indigo-900/80 to-purple-900/80 backdrop-blur-lg border border-white/20 text-white">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Sparkles className="h-5 w-5 text-blue-300" />
              Calendar Assistant
            </DialogTitle>
          </DialogHeader>

<div className="flex flex-col h-[400px]">
            <div className="flex-1 overflow-y-auto p-4 space-y-4">
              {messages.map((message, index) => (
                <div key={index} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[80%] rounded-lg px-4 py-2 ${
                      message.role === "user" ? "bg-blue-500 text-white" : "bg-white/10 text-white"
                    }`}
                  >
                    {message.content}
                  </div>
                </div>
              ))}
              {isLoading && (
                <div className="flex justify-start">
                  <div className="max-w-[80%] rounded-lg px-4 py-2 bg-white/10 text-white">
                    <div className="flex space-x-2">
                      <div
                        className="h-2 w-2 rounded-full bg-blue-300 animate-bounce"
                        style={{ animationDelay: "0ms" }}
                      ></div>
                      <div
                        className="h-2 w-2 rounded-full bg-blue-300 animate-bounce"
                        style={{ animationDelay: "150ms" }}
                      ></div>
                      <div
                        className="h-2 w-2 rounded-full bg-blue-300 animate-bounce"
                        style={{ animationDelay: "300ms" }}
                      ></div>
                    </div>
                  </div>
                </div>
              )}
              <div ref={messagesEndRef} />
            </div>

<form onSubmit={handleSubmit} className="border-t border-white/20 p-4">
              <div className="flex gap-2">
                <input
                  type="text"
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  placeholder="Ask about your calendar..."
                  className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  disabled={isLoading}
                />
                <Button type="submit" size="icon" disabled={isLoading} className="bg-blue-500 hover:bg-blue-600">
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </form>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/header.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import { Search, Calendar } from "lucide-react"
import Fuse from "fuse.js"
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar"

interface HeaderProps {
  events: any[]
  onEventSelect: (event: any) => void
}

export default function Header({ events, onEventSelect }: HeaderProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [searchResults, setSearchResults] = useState([])
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const searchRef = useRef(null)
  const { state } = useSidebar()

const fuse = new Fuse(events, {
    keys: ["title"],
    threshold: 0.3,
  })

// Use a click handler instead of an effect
  const handleClickOutside = (event) => {
    if (searchRef.current && !searchRef.current.contains(event.target)) {
      setIsDropdownOpen(false)
    }
  }

// Add event listener directly in JSX
  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [])

const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const term = e.target.value
    setSearchTerm(term)

if (term) {
      const results = fuse.search(term)
      setSearchResults(results.map((result) => result.item))
      setIsDropdownOpen(true)
    } else {
      setSearchResults([])
      setIsDropdownOpen(false)
    }
  }

const handleEventClick = (event) => {
    onEventSelect(event)
    setSearchTerm("")
    setIsDropdownOpen(false)
  }

return (
    <header className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-8 py-6">
      <div className={`flex items-center gap-4 transition-all duration-300 ${state === "expanded" ? "ml-64" : "ml-0"}`}>
        <SidebarTrigger className="text-white" />
        <span className="text-2xl font-semibold text-white drop-shadow-lg">Calendar</span>
      </div>

<div className="flex items-center gap-4">
        <div className="relative" ref={searchRef}>
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/70" />
          <input
            type="text"
            placeholder="Search events"
            value={searchTerm}
            onChange={handleSearchChange}
            className="rounded-full bg-white/10 backdrop-blur-sm pl-10 pr-4 py-2 text-white placeholder:text-white/70 border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30 w-64"
          />
          {isDropdownOpen && searchResults.length > 0 && (
            <div className="absolute top-full left-0 right-0 mt-2 bg-white/10 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden">
              {searchResults.map((event) => (
                <div
                  key={event.id}
                  className="px-4 py-2 hover:bg-white/20 cursor-pointer flex items-center gap-2"
                  onClick={() => handleEventClick(event)}
                >
                  <Calendar className="h-4 w-4 text-white/70" />
                  <span className="text-white truncate">{event.title}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/components/calendar-view.tsx" isEdit="true"
"use client"

import { useState, useMemo } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { format, addDays, startOfWeek } from "date-fns"
import WeekView from "./week-view"
import DayView from "./day-view"
import MonthView from "./month-view"
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar"

interface CalendarViewProps {
  events: any[]
  currentDate: Date
  onDateChange: (date: Date) => void
  onTodayClick: () => void
  onEventClick: (event: any) => void
  onCreateEvent: () => void
  onDeleteEvent: (eventId: string) => void
  onUpdateEvent: (updatedEvent: any) => void
}

export default function CalendarView({
  events,
  currentDate,
  onDateChange,
  onTodayClick,
  onEventClick,
  onCreateEvent,
  onDeleteEvent,
  onUpdateEvent,
}: CalendarViewProps) {
  const [currentView, setCurrentView] = useState("week")
  const { state } = useSidebar()

const handlePrev = () => {
    switch (currentView) {
      case "day":
        onDateChange(addDays(currentDate, -1))
        break
      case "week":
        onDateChange(addDays(currentDate, -7))
        break
      case "month":
        onDateChange(addDays(currentDate, -30)) // Approximate, not exact
        break
    }
  }

const handleNext = () => {
    switch (currentView) {
      case "day":
        onDateChange(addDays(currentDate, 1))
        break
      case "week":
        onDateChange(addDays(currentDate, 7))
        break
      case "month":
        onDateChange(addDays(currentDate, 30)) // Approximate, not exact
        break
    }
  }

const viewTitle = useMemo(() => {
    switch (currentView) {
      case "day":
        return format(currentDate, "MMMM d, yyyy")
      case "week":
        const weekStart = startOfWeek(currentDate)
        const weekEnd = addDays(weekStart, 6)
        return `${format(weekStart, "MMMM d")} - ${format(weekEnd, "MMMM d, yyyy")}`
      case "month":
        return format(currentDate, "MMMM yyyy")
    }
  }, [currentDate, currentView])

return (
    <div className={`flex-1 flex flex-col transition-all duration-300 ${state === "collapsed" ? "ml-0" : ""}`}>
      {/* Calendar Controls */}
      <div className="flex items-center justify-between p-4 border-b border-white/20">
        <div className="flex items-center gap-4">
          <SidebarTrigger className="md:hidden text-white" />
          <button
            className="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 transition-colors"
            onClick={onTodayClick}
          >
            Today
          </button>
          <div className="flex">
            <button className="p-2 text-white hover:bg-white/10 rounded-l-md" onClick={handlePrev}>
              <ChevronLeft className="h-5 w-5" />
            </button>
            <button className="p-2 text-white hover:bg-white/10 rounded-r-md" onClick={handleNext}>
              <ChevronRight className="h-5 w-5" />
            </button>
          </div>
          <h2 className="text-xl font-semibold text-white">{viewTitle}</h2>
        </div>

<div className="flex items-center gap-2 rounded-md p-1">
          <button
            onClick={() => setCurrentView("day")}
            className={`px-3 py-1 rounded ${currentView === "day" ? "bg-white/20" : ""} text-white text-sm`}
          >
            Day
          </button>
          <button
            onClick={() => setCurrentView("week")}
            className={`px-3 py-1 rounded ${currentView === "week" ? "bg-white/20" : ""} text-white text-sm`}
          >
            Week
          </button>
          <button
            onClick={() => setCurrentView("month")}
            className={`px-3 py-1 rounded ${currentView === "month" ? "bg-white/20" : ""} text-white text-sm`}
          >
            Month
          </button>
        </div>
      </div>

{/* Calendar View */}
      <div className="flex-1 overflow-auto p-4">
        <div className="bg-white/20 backdrop-blur-lg rounded-xl border border-white/20 shadow-xl h-full">
          {currentView === "day" && (
            <DayView
              events={events}
              currentDate={currentDate}
              onEventClick={onEventClick}
              onDeleteEvent={onDeleteEvent}
              onUpdateEvent={onUpdateEvent}
            />
          )}
          {currentView === "week" && (
            <WeekView
              events={events}
              currentDate={currentDate}
              onEventClick={onEventClick}
              onDeleteEvent={onDeleteEvent}
              onUpdateEvent={onUpdateEvent}
            />
          )}
          {currentView === "month" && (
            <MonthView
              events={events}
              currentDate={currentDate}
              onEventClick={onEventClick}
              onDeleteEvent={onDeleteEvent}
            />
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/app-container.tsx" isEdit="true"
"use client"

import { useState, useMemo } from "react"
import { createClient } from "@supabase/supabase-js"
import CreateEventModal from "./create-event-modal"
import EventCard from "./event-card"
import CalendarView from "./calendar-view"
import Sidebar from "./sidebar"
import Header from "./header"
import AIChat from "./ai-chat"
import Fuse from "fuse.js"
import DndProviderWrapper from "./dnd-provider"
import { SidebarProvider } from "@/components/ui/sidebar"

const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)

interface AppContainerProps {
  initialEvents: any[]
}

export default function AppContainer({ initialEvents }: AppContainerProps) {
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [selectedEvent, setSelectedEvent] = useState(null)
  const [events, setEvents] = useState(initialEvents)
  const [currentDate, setCurrentDate] = useState(new Date())
  const [searchTerm, setSearchTerm] = useState("")
  const [pendingUpdates, setPendingUpdates] = useState<Record<string, any>>({})

const handleEventSelect = (event) => {
    setSelectedEvent(event)
    // You might want to change the current date to the event's date
    setCurrentDate(new Date(event.date))
  }

const fuse = useMemo(
    () =>
      new Fuse(events, {
        keys: ["title"],
        threshold: 0.3,
      }),
    [events],
  )

const filteredEvents = useMemo(() => {
    if (!searchTerm) return events
    return fuse.search(searchTerm).map((result) => result.item)
  }, [fuse, searchTerm, events])

const handleSearch = (term: string) => {
    setSearchTerm(term)
  }

const handleEventClick = (event) => {
    setSelectedEvent(event)
  }

const handleAddEvent = async (newEvent) => {
    const { data, error } = await supabase.from("events").insert([newEvent]).select()

if (error) {
      console.error("Error adding event:", error)
      alert("Failed to add the event. Please try again.")
    } else if (data) {
      setEvents((prevEvents) => [...prevEvents, data[0]])
      setIsCreateModalOpen(false)
    }
  }

const handleUpdateEvent = async (updatedEvent) => {
    // Store the original event for rollback if needed
    const originalEvent = events.find((e) => e.id === updatedEvent.id)

// Optimistically update the UI
    setEvents((prevEvents) => prevEvents.map((event) => (event.id === updatedEvent.id ? updatedEvent : event)))

// Track this update as pending
    setPendingUpdates((prev) => ({
      ...prev,
      [updatedEvent.id]: originalEvent,
    }))

// Update the database
    const { data, error } = await supabase.from("events").update(updatedEvent).eq("id", updatedEvent.id).select()

if (error) {
      console.error("Error updating event:", error)
      alert("Failed to update the event. Rolling back changes.")

// Rollback the UI change
      setEvents((prevEvents) => prevEvents.map((event) => (event.id === updatedEvent.id ? originalEvent : event)))
    } else if (data) {
      // Update succeeded, remove from pending updates
      setPendingUpdates((prev) => {
        const newPending = { ...prev }
        delete newPending[updatedEvent.id]
        return newPending
      })

// If this was the selected event, update the selected event too
      if (selectedEvent && selectedEvent.id === updatedEvent.id) {
        setSelectedEvent(data[0])
      }
    }
  }

const handleDeleteEvent = async (eventId: string) => {
    const { error } = await supabase.from("events").delete().eq("id", eventId)

if (error) {
      console.error("Error deleting event:", error)
      alert("Failed to delete the event. Please try again.")
    } else {
      setEvents((prevEvents) => prevEvents.filter((event) => event.id !== eventId))
      setSelectedEvent(null)
    }
  }

const handleDateChange = (newDate: Date) => {
    setCurrentDate(newDate)
  }

return (
    <div className="relative min-h-screen w-full overflow-hidden">
      <DndProviderWrapper>
        <SidebarProvider>
          <Header events={events} onEventSelect={handleEventSelect} />

<div className="flex-1 animate-fade-in" style={{ animationDelay: "0.6s" }}>
              <CalendarView
                events={filteredEvents}
                currentDate={currentDate}
                onDateChange={handleDateChange}
                onTodayClick={() => setCurrentDate(new Date())}
                onEventClick={handleEventClick}
                onCreateEvent={() => setIsCreateModalOpen(true)}
                onDeleteEvent={handleDeleteEvent}
                onUpdateEvent={handleUpdateEvent}
              />
            </div>

{selectedEvent && (
              <EventCard
                event={selectedEvent}
                onClose={() => setSelectedEvent(null)}
                onDelete={handleDeleteEvent}
                onUpdate={handleUpdateEvent}
              />
            )}

<CreateEventModal
              isOpen={isCreateModalOpen}
              onClose={() => setIsCreateModalOpen(false)}
              onSave={handleAddEvent}
              currentDate={currentDate}
            />

{/* AI Chat Component */}
            <AIChat />
          </main>
        </SidebarProvider>
      </DndProviderWrapper>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from aryamank

More Templates Like This

About

Tags

Share

About

Tags

Share

More from aryamank

More Templates Like This