[V0_FILE]typescriptreact:file="postcss.config.js" isMerged="true" module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]typescriptreact:file="README.md" isMerged="true" # EduFlow - AI-Driven Student Time Management EduFlow is an MVP for an AI-driven student time-management application. It features automatically imported tasks, a prioritized To-Do list, and a weekly/monthly calendar view. ## Features - **To-Do List**: View and manage tasks sorted by due date with priority indicators - **Weekly Calendar**: Visual representation of classes, exams, and study sessions - **Responsive Design**: Works on both desktop and mobile devices ## Getting Started ### Prerequisites - Node.js 18.x or later ### Installation 1. Clone the repository \`\`\`bash git clone https://github.com/yourusername/eduflow.git cd eduflow \`\`\` 2. Install dependencies \`\`\`bash npm install \`\`\` 3. Run the development server \`\`\`bash npm run dev \`\`\` 4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application ## Deployment Push to Vercel for automatic deployment: 1. Connect your GitHub repository to Vercel 2. Vercel will automatically detect the Next.js project and deploy it 3. Your application will be available at your Vercel deployment URL ## Tech Stack - Next.js 14 - React - Tailwind CSS - TypeScript [V0_FILE]typescriptreact:file="vercel.json" isMerged="true" { "framework": "nextjs" } [V0_FILE]typescriptreact:file="components/EmailNotification.tsx" isMerged="true" "use client" import { useState } from "react" import { format } from "date-fns" import { X, FileText, ChevronDown, ChevronUp } from "lucide-react" type EmailNotificationProps = { onClose: () => void } export default function EmailNotification({ onClose }: EmailNotificationProps) { const [expanded, setExpanded] = useState(false) const toggleExpanded = () => { setExpanded(!expanded) } return (

New Email

Mansour Al-Sulaiman

mmalsulaiman@KSU.EDU.SA

{format(new Date("2025-04-24T12:33:00"), "MMM d, h:mm a")}

Tutorial#6_CEN453_S2_1446...

363 KB

{expanded ? : }

{expanded && (

To:

محمد العوني المطيري ID 439101050;

محمد المسفر ID 439101490;

+11 others

)}

) } [V0_FILE]typescriptreact:file="components/EmailNotificationWrapper.tsx" isMerged="true" "use client" import { useState } from "react" import EmailNotification from "./EmailNotification" export default function EmailNotificationWrapper() { const [showEmailNotification, setShowEmailNotification] = useState(true) if (!showEmailNotification) { return null } return setShowEmailNotification(false)} /> } [V0_FILE]typescriptreact:file="components/BlackboardNotification.tsx" isMerged="true" "use client" import { X, FileText, Download } from "lucide-react" type BlackboardNotificationProps = { onClose: () => void } export default function BlackboardNotification({ onClose }: BlackboardNotificationProps) { return (

Blackboard Assignment

CSC311: Upload Assignment: HW5

Due: Tuesday, May 6, 2025 at 11:59:00 PM AST

HW5.docx

Assignment Information:

Points Possible: 2

Course: CSC311 - DESIGN & ANALYSIS OF ALGORITHEMS

) } [V0_FILE]typescriptreact:file="components/BlackboardNotificationWrapper.tsx" isMerged="true" "use client" import { useState } from "react" import BlackboardNotification from "./BlackboardNotification" export default function BlackboardNotificationWrapper() { const [showNotification, setShowNotification] = useState(true) if (!showNotification) { return null } return setShowNotification(false)} /> } [V0_FILE]typescriptreact:file="app/api/calendar/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" export async function GET() { // Updated calendar events data with final exams and new tutorial session const events = [ // Regular classes and study sessions { id: "a", title: "CS311 Lecture", start: "2025-04-28T08:00:00", end: "2025-04-28T09:50:00", type: "class" }, { id: "b", title: "Study Session: HW4", start: "2025-04-28T10:00:00", end: "2025-04-28T11:00:00", type: "study" }, { id: "c", title: "CEN310 Lab", start: "2025-04-28T13:00:00", end: "2025-04-28T14:50:00", type: "class" }, { id: "d", title: "MATH240 Lecture", start: "2025-04-29T09:00:00", end: "2025-04-29T10:50:00", type: "class" }, { id: "e", title: "ENG101 Workshop", start: "2025-04-29T13:00:00", end: "2025-04-29T14:30:00", type: "class" }, { id: "f", title: "PHYS202 Study Group", start: "2025-04-30T15:00:00", end: "2025-04-30T17:00:00", type: "study" }, // New tutorial session from the email { id: "tutorial6", title: "CEN453 Tutorial #6", start: "2025-04-24T12:30:00", end: "2025-04-24T14:00:00", type: "class", }, // Work on tutorial assignment { id: "tutorial6work", title: "Work on CEN453 Tutorial #6", start: "2025-04-26T10:00:00", end: "2025-04-26T12:00:00", type: "study", }, // Blackboard assignment work session { id: "hw5work", title: "Work on CSC311 HW5", start: "2025-05-04T14:00:00", end: "2025-05-04T16:00:00", type: "study", }, // Final Exams (converted from Hijri to Gregorian approximate dates for 2025) { id: "exam1", title: "CENX 490 Final Exam", start: "2025-05-20T08:00:00", end: "2025-05-20T11:00:00", type: "exam", }, { id: "exam2", title: "CSC 311 Final Exam", start: "2025-05-15T08:00:00", end: "2025-05-15T11:00:00", type: "exam", }, { id: "exam3", title: "CENX 441 Final Exam", start: "2025-05-30T08:00:00", end: "2025-05-30T11:00:00", type: "exam", }, { id: "exam4", title: "EE 310 Final Exam", start: "2025-05-20T13:00:00", end: "2025-05-20T16:00:00", type: "exam" }, { id: "exam5", title: "IC 100 Final Exam", start: "2025-05-13T13:00:00", end: "2025-05-13T16:00:00", type: "exam" }, { id: "exam6", title: "CENX 453 Final Exam", start: "2025-05-22T08:00:00", end: "2025-05-22T11:00:00", type: "exam", }, // Study sessions for final exams { id: "study1", title: "CENX 490 Study", start: "2025-05-18T14:00:00", end: "2025-05-18T17:00:00", type: "study" }, { id: "study2", title: "CSC 311 Study", start: "2025-05-13T14:00:00", end: "2025-05-13T17:00:00", type: "study" }, { id: "study3", title: "CENX 441 Study", start: "2025-05-28T14:00:00", end: "2025-05-28T17:00:00", type: "study" }, { id: "study4", title: "EE 310 Study", start: "2025-05-18T09:00:00", end: "2025-05-18T12:00:00", type: "study" }, { id: "study5", title: "IC 100 Study", start: "2025-05-11T14:00:00", end: "2025-05-11T17:00:00", type: "study" }, { id: "study6", title: "CENX 453 Study", start: "2025-05-20T14:00:00", end: "2025-05-20T17:00:00", type: "study" }, ] return NextResponse.json(events) } [V0_FILE]typescriptreact:file="components/TaskNotificationManager.tsx" isMerged="true" "use client" import { useState } from "react" import TaskNotification from "./TaskNotification" type Task = { id: string title: string description?: string due: string priority: string completed: boolean course?: string source?: string points?: number isNew?: boolean } export default function TaskNotificationManager() { const [notifications, setNotifications] = useState([]) const addNotification = (task: Task) => { setNotifications((prev) => [...prev, task]) } const removeNotification = (taskId: string) => { setNotifications((prev) => prev.filter((task) => task.id !== taskId)) } return ( <> {notifications.map((task, index) => (

removeNotification(task.id)} />

))} ) } [V0_FILE]typescriptreact:file="app/api/tasks/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" export async function GET() { // Get current date for deadline notifications const now = new Date() const tomorrow = new Date(now) tomorrow.setDate(tomorrow.getDate() + 1) // Format dates for comparison const urgentDate = tomorrow.toISOString().split("T")[0] // Updated tasks data with descriptions and source information const tasks = [ // Regular assignments { id: "1", title: "CS311 HW4", description: "Complete exercises 4.1-4.5 on algorithm complexity analysis. Submit PDF with solutions.", due: "2025-05-01T23:59:00Z", priority: "High", completed: false, course: "CS311", }, { id: "2", title: "CEN310 Final Project", description: "Complete the software engineering project documentation including UML diagrams and test cases.", due: "2025-05-10T13:00:00Z", priority: "Medium", completed: false, course: "CEN310", }, { id: "3", title: "MATH240 Problem Set", description: "Solve problems 3.12-3.20 on differential equations and submit your work.", due: "2025-04-30T23:59:00Z", // Urgent task for deadline notification priority: "High", completed: false, course: "MATH240", }, { id: "4", title: "ENG101 Essay Draft", description: "Write a 1000-word draft on the assigned topic. Include at least 5 academic sources.", due: "2025-05-05T23:59:00Z", priority: "Low", completed: false, course: "ENG101", }, { id: "5", title: "PHYS202 Lab Report", description: "Complete the lab report for Experiment 3: Electromagnetic Induction. Include all measurements and analysis.", due: "2025-05-03T23:59:00Z", priority: "Medium", completed: false, course: "PHYS202", }, // New Blackboard assignment { id: "blackboard1", title: "Upload Assignment: HW5", description: "Complete HW5 for CSC311 Design & Analysis of Algorithms. Download the assignment document from Blackboard and submit your solutions.", due: "2025-05-06T23:59:00Z", priority: "High", completed: false, course: "CSC311", source: "Blackboard", points: 2, isNew: true, }, // Email task { id: "tutorial6", title: "Tutorial #6 Assignment", description: "Complete the tutorial assignment for CEN453 Digital Control & Robotics. Refer to the attached document from Dr. Mansour Al-Sulaiman.", due: "2025-04-30T23:59:00Z", // Urgent task for deadline notification priority: "High", completed: false, course: "CEN453", source: "Outlook", isNew: true, }, // Final exam preparation tasks { id: "exam1", title: "Prepare for CENX 490 Final", description: "Review all lecture notes, practice problems, and textbook chapters for the Engineering Design & Project Management final exam.", due: "2025-05-19T23:59:00Z", priority: "High", completed: false, course: "CENX490", }, { id: "exam2", title: "Prepare for CSC 311 Final", description: "Study algorithm design techniques, complexity analysis, and all topics covered in class. Complete practice exams.", due: "2025-05-14T23:59:00Z", priority: "High", completed: false, course: "CSC311", }, { id: "exam3", title: "Prepare for CENX 441 Final", description: "Review networking protocols, architecture models, and security concepts for the Computer Networks final exam.", due: "2025-05-29T23:59:00Z", priority: "High", completed: false, course: "CENX441", }, { id: "exam4", title: "Prepare for EE 310 Final", description: "Study semiconductor physics, circuit analysis, and device characteristics for the Microelectronic Devices and Circuits exam.", due: "2025-05-19T23:59:00Z", priority: "High", completed: false, course: "EE310", }, { id: "exam5", title: "Prepare for IC 100 Final", description: "Review all course materials on the Prophet's biography, key events, and historical context.", due: "2025-05-12T23:59:00Z", priority: "High", completed: false, course: "IC100", }, { id: "exam6", title: "Prepare for CENX 453 Final", description: "Study control systems theory, robotics principles, and programming concepts for the Digital Control & Robotics exam.", due: "2025-05-21T23:59:00Z", priority: "High", completed: false, course: "CENX453", }, // Study material preparation tasks { id: "study1", title: "Create CENX 490 Study Guide", description: "Compile key concepts, formulas, and examples from Engineering Design & Project Management into a comprehensive study guide.", due: "2025-05-15T23:59:00Z", priority: "Medium", completed: false, course: "CENX490", }, { id: "study2", title: "Review CSC 311 Algorithms", description: "Practice implementing and analyzing key algorithms covered in the course: sorting, searching, graph algorithms, and dynamic programming.", due: "2025-05-10T23:59:00Z", priority: "Medium", completed: false, course: "CSC311", }, { id: "study3", title: "Practice CENX 441 Network Problems", description: "Work through practice problems on network design, routing protocols, and performance analysis.", due: "2025-05-25T23:59:00Z", priority: "Medium", completed: false, course: "CENX441", }, { id: "study4", title: "Solve EE 310 Practice Problems", description: "Complete the practice problem set on semiconductor devices, amplifier circuits, and digital electronics.", due: "2025-05-15T23:59:00Z", priority: "Medium", completed: false, course: "EE310", }, { id: "study5", title: "Summarize IC 100 Key Topics", description: "Create summary notes on the main events and teachings from the Prophet's biography course.", due: "2025-05-08T23:59:00Z", priority: "Medium", completed: false, course: "IC100", }, { id: "study6", title: "Review CENX 453 Robotics Concepts", description: "Review control theory, robotics kinematics, and programming concepts from the Digital Control & Robotics course.", due: "2025-05-18T23:59:00Z", priority: "Medium", completed: false, course: "CENX453", }, ] return NextResponse.json(tasks) } [V0_FILE]typescriptreact:file="components/DeadlineNotificationManager.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import DeadlineNotification from "./DeadlineNotification" type Task = { id: string title: string description?: string due: string priority: string completed: boolean course?: string source?: string points?: number isNew?: boolean } type DeadlineNotificationManagerProps = { tasks: Task[] } export default function DeadlineNotificationManager({ tasks }: DeadlineNotificationManagerProps) { const [notifications, setNotifications] = useState([]) const [currentNotification, setCurrentNotification] = useState(null) const processedTasksRef = useRef>(new Set()) useEffect(() => { // Check for tasks with deadlines within 3 days const now = new Date() const threeDaysFromNow = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000) const urgentTasks = tasks.filter((task) => { if (task.completed) return false const dueDate = new Date(task.due) return dueDate > now && dueDate <= threeDaysFromNow && !processedTasksRef.current.has(`deadline-${task.id}`) }) if (urgentTasks.length > 0) { // Add urgent tasks to notifications queue setNotifications((prev) => [...prev, ...urgentTasks]) // Mark these tasks as processed urgentTasks.forEach((task) => { processedTasksRef.current.add(`deadline-${task.id}`) }) } }, [tasks]) // Show one notification at a time useEffect(() => { if (notifications.length > 0 && !currentNotification) { setCurrentNotification(notifications[0]) setNotifications((prev) => prev.slice(1)) } }, [notifications, currentNotification]) const removeNotification = () => { setCurrentNotification(null) } if (!currentNotification) return null return } [V0_FILE]typescriptreact:file="components/TaskNotificationManagerWrapper.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import TaskNotification from "./TaskNotification" type Task = { id: string title: string description?: string due: string priority: string completed: boolean course?: string source?: string points?: number isNew?: boolean } type TaskNotificationManagerWrapperProps = { tasks: Task[] } export default function TaskNotificationManagerWrapper({ tasks }: TaskNotificationManagerWrapperProps) { const [notifications, setNotifications] = useState([]) const [currentNotification, setCurrentNotification] = useState(null) const processedTasksRef = useRef>(new Set()) useEffect(() => { // Find new tasks that haven't been processed yet const newTasks = tasks.filter((task) => task.isNew && !processedTasksRef.current.has(task.id)) if (newTasks.length > 0) { // Add new tasks to notifications queue setNotifications((prev) => [...prev, ...newTasks]) // Mark these tasks as processed newTasks.forEach((task) => { processedTasksRef.current.add(task.id) }) } }, [tasks]) // Show one notification at a time useEffect(() => { if (notifications.length > 0 && !currentNotification) { setCurrentNotification(notifications[0]) setNotifications((prev) => prev.slice(1)) } }, [notifications, currentNotification]) const removeNotification = () => { setCurrentNotification(null) } if (!currentNotification) return null return } [V0_FILE]typescriptreact:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" import type { Database } from "@/types/supabase" export function createServerSupabaseClient() { const cookieStore = cookies() return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { get(name: string) { return cookieStore.get(name)?.value }, set(name: string, value: string, options: any) { cookieStore.set({ name, value, ...options }) }, remove(name: string, options: any) { cookieStore.set({ name, value: "", ...options }) }, }, }, ) } [V0_FILE]typescriptreact:file="types/supabase.ts" isMerged="true" export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[] export interface Database { public: { Tables: { profiles: { Row: { id: string full_name: string | null student_id: string | null program: string | null email: string | null avatar_url: string | null created_at: string updated_at: string } Insert: { id: string full_name?: string | null student_id?: string | null program?: string | null email?: string | null avatar_url?: string | null created_at?: string updated_at?: string } Update: { id?: string full_name?: string | null student_id?: string | null program?: string | null email?: string | null avatar_url?: string | null created_at?: string updated_at?: string } } courses: { Row: { id: string code: string name: string description: string | null color: string | null created_at: string updated_at: string } Insert: { id?: string code: string name: string description?: string | null color?: string | null created_at?: string updated_at?: string } Update: { id?: string code?: string name?: string description?: string | null color?: string | null created_at?: string updated_at?: string } } user_courses: { Row: { user_id: string course_id: string created_at: string } Insert: { user_id: string course_id: string created_at?: string } Update: { user_id?: string course_id?: string created_at?: string } } tasks: { Row: { id: string user_id: string course_id: string | null title: string description: string | null due_date: string priority: string | null completed: boolean source: string | null points: number | null is_new: boolean created_at: string updated_at: string } Insert: { id?: string user_id: string course_id?: string | null title: string description?: string | null due_date: string priority?: string | null completed?: boolean source?: string | null points?: number | null is_new?: boolean created_at?: string updated_at?: string } Update: { id?: string user_id?: string course_id?: string | null title?: string description?: string | null due_date?: string priority?: string | null completed?: boolean source?: string | null points?: number | null is_new?: boolean created_at?: string updated_at?: string } } events: { Row: { id: string user_id: string course_id: string | null title: string start_time: string end_time: string type: string | null location: string | null description: string | null created_at: string updated_at: string } Insert: { id?: string user_id: string course_id?: string | null title: string start_time: string end_time: string type?: string | null location?: string | null description?: string | null created_at?: string updated_at?: string } Update: { id?: string user_id?: string course_id?: string | null title?: string start_time?: string end_time?: string type?: string | null location?: string | null description?: string | null created_at?: string updated_at?: string } } notifications: { Row: { id: string user_id: string title: string message: string related_task_id: string | null related_event_id: string | null is_read: boolean created_at: string } Insert: { id?: string user_id: string title: string message: string related_task_id?: string | null related_event_id?: string | null is_read?: boolean created_at?: string } Update: { id?: string user_id?: string title?: string message?: string related_task_id?: string | null related_event_id?: string | null is_read?: boolean created_at?: string } } } } } [V0_FILE]typescriptreact:file="components/auth/AuthForm.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { supabase } from "@/lib/supabase/client" import { useRouter } from "next/navigation" export default function AuthForm() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [fullName, setFullName] = useState("") const [studentId, setStudentId] = useState("") const [program, setProgram] = useState("") const [isSignUp, setIsSignUp] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError(null) try { if (isSignUp) { // Sign up const { data, error: signUpError } = await supabase.auth.signUp({ email, password, options: { data: { full_name: fullName, }, }, }) if (signUpError) throw signUpError if (data.user) { // Create profile const { error: profileError } = await supabase.from("profiles").insert({ id: data.user.id, full_name: fullName, student_id: studentId, program: program, email: email, }) if (profileError) throw profileError } } else { // Sign in const { error: signInError } = await supabase.auth.signInWithPassword({ email, password, }) if (signInError) throw signInError } // Redirect to home page router.push("/") router.refresh() } catch (error: any) { setError(error.message || "An error occurred") } finally { setLoading(false) } } return (

{isSignUp ? "Create Account" : "Sign In"}

{error &&

{error}

}

{isSignUp && ( <>

Full Name setFullName(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md" required={isSignUp} />

Student ID setStudentId(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md" required={isSignUp} />

Program setProgram(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md" required={isSignUp} />

)}

Email setEmail(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md" required />

Password setPassword(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md" required />

) } [V0_FILE]typescriptreact:file="components/auth/AuthProvider.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import type { Session, User } from "@supabase/supabase-js" import { supabase } from "@/lib/supabase/client" import { useRouter } from "next/navigation" type AuthContextType = { user: User | null session: Session | null loading: boolean signOut: () => Promise } const AuthContext = createContext({ user: null, session: null, loading: true, signOut: async () => {}, }) export const useAuth = () => useContext(AuthContext) export default function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [session, setSession] = useState(null) const [loading, setLoading] = useState(true) const router = useRouter() useEffect(() => { async function getSession() { setLoading(true) const { data: { session }, } = await supabase.auth.getSession() setSession(session) setUser(session?.user ?? null) setLoading(false) } getSession() const { data: { subscription }, } = supabase.auth.onAuthStateChange((_event, session) => { setSession(session) setUser(session?.user ?? null) setLoading(false) }) return () => { subscription.unsubscribe() } }, []) const signOut = async () => { await supabase.auth.signOut() router.push("/auth") router.refresh() } const value = { user, session, loading, signOut, } return {children} } [V0_FILE]typescriptreact:file="middleware.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" export async function middleware(req: NextRequest) { // Simply pass through all requests without authentication checks return NextResponse.next() } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"], } [V0_FILE]typescriptreact:file="lib/supabase/client.ts" isEdit="true" isMerged="true" import { createClient } from "@supabase/supabase-js" import type { Database } from "@/types/supabase" // Create a single supabase client for the browser const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! export const supabase = createClient(supabaseUrl, supabaseAnonKey) // Create a function to get a default user ID for demo purposes export async function getDefaultUserId(): Promise { // Try to get from localStorage first if (typeof window !== "undefined") { const storedId = localStorage.getItem("eduflow_default_user_id") if (storedId) return storedId } // Create a default user ID const defaultId = "00000000-0000-0000-0000-000000000000" // Store it in localStorage if available if (typeof window !== "undefined") { localStorage.setItem("eduflow_default_user_id", defaultId) } return defaultId } [V0_FILE]typescriptreact:file="lib/api/tasks.ts" isEdit="true" isMerged="true" import { supabase, getDefaultUserId } from "@/lib/supabase/client" import type { Database } from "@/types/supabase" export type Task = Database["public"]["Tables"]["tasks"]["Row"] export type NewTask = Omit< Database["public"]["Tables"]["tasks"]["Insert"], "id" | "user_id" | "created_at" | "updated_at" > // Get all tasks for the default user export async function getTasks() { const userId = await getDefaultUserId() const { data, error } = await supabase .from("tasks") .select("*, courses(*)") .eq("user_id", userId) .order("due_date", { ascending: true }) if (error) throw error return data } // Get tasks due today export async function getTasksDueToday() { const userId = await getDefaultUserId() const today = new Date() today.setHours(0, 0, 0, 0) const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) const { data, error } = await supabase .from("tasks") .select("*, courses(*)") .eq("user_id", userId) .gte("due_date", today.toISOString()) .lt("due_date", tomorrow.toISOString()) .eq("completed", false) if (error) throw error return data } // Create a new task export async function createTask(task: NewTask) { const userId = await getDefaultUserId() const { data, error } = await supabase .from("tasks") .insert({ ...task, user_id: userId, }) .select() if (error) throw error return data[0] } // Update a task export async function updateTask(id: string, updates: Partial) { const userId = await getDefaultUserId() const { data, error } = await supabase.from("tasks").update(updates).eq("id", id).eq("user_id", userId).select() if (error) throw error return data[0] } // Delete a task export async function deleteTask(id: string) { const userId = await getDefaultUserId() const { error } = await supabase.from("tasks").delete().eq("id", id).eq("user_id", userId) if (error) throw error return true } // Toggle task completion export async function toggleTaskCompletion(id: string, completed: boolean) { return updateTask(id, { completed }) } [V0_FILE]typescriptreact:file="lib/api/events.ts" isEdit="true" isMerged="true" import { supabase, getDefaultUserId } from "@/lib/supabase/client" import type { Database } from "@/types/supabase" export type Event = Database["public"]["Tables"]["events"]["Row"] export type NewEvent = Omit< Database["public"]["Tables"]["events"]["Insert"], "id" | "user_id" | "created_at" | "updated_at" > // Get all events for the default user export async function getEvents() { const userId = await getDefaultUserId() const { data, error } = await supabase .from("events") .select("*, courses(*)") .eq("user_id", userId) .order("start_time", { ascending: true }) if (error) throw error return data } // Get events for a specific date range export async function getEventsInRange(startDate: Date, endDate: Date) { const userId = await getDefaultUserId() const { data, error } = await supabase .from("events") .select("*, courses(*)") .eq("user_id", userId) .gte("start_time", startDate.toISOString()) .lte("end_time", endDate.toISOString()) .order("start_time", { ascending: true }) if (error) throw error return data } // Create a new event export async function createEvent(event: NewEvent) { const userId = await getDefaultUserId() const { data, error } = await supabase .from("events") .insert({ ...event, user_id: userId, }) .select() if (error) throw error return data[0] } // Update an event export async function updateEvent(id: string, updates: Partial) { const userId = await getDefaultUserId() const { data, error } = await supabase.from("events").update(updates).eq("id", id).eq("user_id", userId).select() if (error) throw error return data[0] } // Delete an event export async function deleteEvent(id: string) { const userId = await getDefaultUserId() const { error } = await supabase.from("events").delete().eq("id", id).eq("user_id", userId) if (error) throw error return true } [V0_FILE]typescriptreact:file="lib/api/courses.ts" isEdit="true" isMerged="true" import { supabase, getDefaultUserId } from "@/lib/supabase/client" import type { Database } from "@/types/supabase" export type Course = Database["public"]["Tables"]["courses"]["Row"] export type NewCourse = Omit // Get all courses export async function getCourses() { const { data, error } = await supabase.from("courses").select("*").order("code", { ascending: true }) if (error) throw error return data } // Get courses for the default user export async function getUserCourses() { const userId = await getDefaultUserId() const { data, error } = await supabase.from("user_courses").select("courses(*)").eq("user_id", userId) if (error) throw error return data.map((item) => item.courses) } // Create a new course export async function createCourse(course: NewCourse) { const { data, error } = await supabase.from("courses").insert(course).select() if (error) throw error return data[0] } // Enroll in a course export async function enrollInCourse(courseId: string) { const userId = await getDefaultUserId() const { error } = await supabase.from("user_courses").insert({ user_id: userId, course_id: courseId, }) if (error) throw error return true } // Unenroll from a course export async function unenrollFromCourse(courseId: string) { const userId = await getDefaultUserId() const { error } = await supabase.from("user_courses").delete().eq("user_id", userId).eq("course_id", courseId) if (error) throw error return true } [V0_FILE]typescriptreact:file="lib/api/profile.ts" isEdit="true" isMerged="true" import { supabase, getDefaultUserId } from "@/lib/supabase/client" import type { Database } from "@/types/supabase" export type Profile = Database["public"]["Tables"]["profiles"]["Row"] // Get the default user's profile export async function getProfile() { const userId = await getDefaultUserId() const { data, error } = await supabase.from("profiles").select("*").eq("id", userId).single() if (error) { // If profile doesn't exist, return a default profile return { id: userId, full_name: "Demo Student", student_id: "123456789", program: "Computer Science", email: "demo@example.com", avatar_url: null, created_at: new Date().toISOString(), updated_at: new Date().toISOString(), } } return data } // Update the default user's profile export async function updateProfile(updates: Partial) { const userId = await getDefaultUserId() // Check if profile exists const { data: existingProfile } = await supabase.from("profiles").select("*").eq("id", userId).single() if (!existingProfile) { // Create profile if it doesn't exist const { data, error } = await supabase .from("profiles") .insert({ id: userId, ...updates, }) .select() if (error) throw error return data[0] } else { // Update existing profile const { data, error } = await supabase.from("profiles").update(updates).eq("id", userId).select() if (error) throw error return data[0] } } // Upload avatar image export async function uploadAvatar(file: File) { const userId = await getDefaultUserId() const fileExt = file.name.split(".").pop() const fileName = `${userId}-${Math.random()}.${fileExt}` const filePath = `avatars/${fileName}` const { error: uploadError } = await supabase.storage.from("avatars").upload(filePath, file) if (uploadError) throw uploadError const { data: { publicUrl }, } = supabase.storage.from("avatars").getPublicUrl(filePath) // Update profile with new avatar URL const { data, error } = await supabase.from("profiles").update({ avatar_url: publicUrl }).eq("id", userId).select() if (error) throw error return data[0] } [V0_FILE]typescriptreact:file="lib/api/notifications.ts" isEdit="true" isMerged="true" import { supabase, getDefaultUserId } from "@/lib/supabase/client" import type { Database } from "@/types/supabase" export type Notification = Database["public"]["Tables"]["notifications"]["Row"] export type NewNotification = Omit< Database["public"]["Tables"]["notifications"]["Insert"], "id" | "user_id" | "created_at" > // Get all notifications for the default user export async function getNotifications() { const userId = await getDefaultUserId() const { data, error } = await supabase .from("notifications") .select("*") .eq("user_id", userId) .order("created_at", { ascending: false }) if (error) throw error return data } // Get unread notifications for the default user export async function getUnreadNotifications() { const userId = await getDefaultUserId() const { data, error } = await supabase .from("notifications") .select("*") .eq("user_id", userId) .eq("is_read", false) .order("created_at", { ascending: false }) if (error) throw error return data } // Create a new notification export async function createNotification(notification: NewNotification) { const userId = await getDefaultUserId() const { data, error } = await supabase .from("notifications") .insert({ ...notification, user_id: userId, }) .select() if (error) throw error return data[0] } // Mark a notification as read export async function markNotificationAsRead(id: string) { const userId = await getDefaultUserId() const { data, error } = await supabase .from("notifications") .update({ is_read: true }) .eq("id", id) .eq("user_id", userId) .select() if (error) throw error return data[0] } // Mark all notifications as read export async function markAllNotificationsAsRead() { const userId = await getDefaultUserId() const { error } = await supabase .from("notifications") .update({ is_read: true }) .eq("user_id", userId) .eq("is_read", false) if (error) throw error return true } [V0_FILE]typescriptreact:file="components/TaskNotification.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, Bell } from "lucide-react" type Task = { id: string title: string description?: string due: string priority: string completed: boolean course?: string source?: string points?: number isNew?: boolean } type TaskNotificationProps = { task: Task onClose: () => void } export default function TaskNotification({ task, onClose }: TaskNotificationProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { // Animate in setTimeout(() => setIsVisible(true), 100) // Auto-dismiss after 5 seconds const timer = setTimeout(() => { setIsVisible(false) setTimeout(onClose, 300) // Wait for animation to complete }, 5000) return () => clearTimeout(timer) }, [onClose]) return (

New Task

{task.title}

Task has been added

) } [V0_FILE]typescriptreact:file="components/DeadlineNotification.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, Clock, AlertCircle } from "lucide-react" import { formatDistanceToNow } from "date-fns" type Task = { id: string title: string description?: string due: string priority: string completed: boolean course?: string source?: string points?: number isNew?: boolean } type DeadlineNotificationProps = { task: Task onClose: () => void } export default function DeadlineNotification({ task, onClose }: DeadlineNotificationProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { // Animate in setTimeout(() => setIsVisible(true), 100) // Auto-dismiss after 7 seconds const timer = setTimeout(() => { setIsVisible(false) setTimeout(onClose, 300) // Wait for animation to complete }, 7000) return () => clearTimeout(timer) }, [onClose]) const timeRemaining = formatDistanceToNow(new Date(task.due), { addSuffix: true }) return (

Deadline Alert

{task.title}

Due {timeRemaining}

{task.course && (

{task.course}

)}

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "eduflow", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "14.0.4", "react": "18.2.0", "react-dom": "18.2.0", "date-fns": "^2.30.0", "lucide-react": "^0.294.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20.10.4", "@types/react": "^18.2.42", "@types/react-dom": "^18.2.17", "autoprefixer": "^10.4.16", "eslint": "^8.55.0", "eslint-config-next": "14.0.4", "postcss": "^8.4.32", "tailwindcss": "^3.3.6", "typescript": "^5.3.3" }, "project": { "framework": "nextjs" } } [V0_FILE]typescriptreact:file="components/AddTaskForm.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { X } from "lucide-react" import { createTask, getCourses, type Course } from "@/lib/data/mockData" type AddTaskFormProps = { onAddTask: (task: any) => void onClose: () => void } export default function AddTaskForm({ onAddTask, onClose }: AddTaskFormProps) { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [dueDate, setDueDate] = useState("") const [dueTime, setDueTime] = useState("23:59") const [priority, setPriority] = useState("Medium") const [courseId, setCourseId] = useState("") const [courses, setCourses] = useState([]) const [loading, setLoading] = useState(false) useEffect(() => { async function loadCourses() { try { const coursesData = await getCourses() setCourses(coursesData) } catch (error) { console.error("Error loading courses:", error) } } loadCourses() }, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { // Combine date and time const due = new Date(`${dueDate}T${dueTime}:00`) const newTask = { title, description, due_date: due.toISOString(), priority, course_id: courseId || null, source: "Manual", completed: false, } const createdTask = await createTask(newTask) onAddTask(createdTask) onClose() } catch (error) { console.error("Error creating task:", error) } finally { setLoading(false) } } return (

Add New Task

Title * setTitle(e.target.value)} className="w-full px-3 py-2 border border-primary-light rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" required />

Description

setDescription(e.target.value)}
              rows={3}
              className="w-full px-3 py-2 border border-primary-light rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
            />
          </div>

<div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="dueDate" className="block text-sm font-medium text-secondary-dark mb-1">
                Due Date *
              </label>
              <input
                type="date"
                id="dueDate"
                value={dueDate}
                onChange={(e) => setDueDate(e.target.value)}
                className="w-full px-3 py-2 border border-primary-light rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                required
              />
            </div>

<div>
              <label htmlFor="dueTime" className="block text-sm font-medium text-secondary-dark mb-1">
                Due Time
              </label>
              <input
                type="time"
                id="dueTime"
                value={dueTime}
                onChange={(e) => setDueTime(e.target.value)}
                className="w-full px-3 py-2 border border-primary-light rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              />
            </div>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="priority" className="block text-sm font-medium text-secondary-dark mb-1">
                Priority
              </label>
              <select
                id="priority"
                value={priority}
                onChange={(e) => setPriority(e.target.value)}
                className="w-full px-3 py-2 border border-primary-light rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              >
                <option value="High">High</option>
                <option value="Medium">Medium</option>
                <option value="Low">Low</option>
              </select>
            </div>

<div>
              <label htmlFor="course" className="block text-sm font-medium text-secondary-dark mb-1">
                Course
              </label>
              <select
                id="course"
                value={courseId}
                onChange={(e) => setCourseId(e.target.value)}
                className="w-full px-3 py-2 border border-primary-light rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              >
                <option value="">Select a course</option>
                {courses.map((course) => (
                  <option key={course.id} value={course.id}>
                    {course.code} - {course.name}
                  </option>
                ))}
              </select>
            </div>
          </div>

<div className="flex justify-end pt-2">
            <button
              type="button"
              onClick={onClose}
              className="mr-2 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="px-4 py-2 text-sm font-medium text-white bg-primary border border-transparent rounded-md hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50"
            >
              {loading ? "Adding..." : "Add Task"}
            </button>
          </div>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/GamificationSystem.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Trophy, Star, Award, TrendingUp, Target } from "lucide-react"

type GamificationProps = {
  userId: string
}

export type Achievement = {
  id: string
  title: string
  description: string
  icon: string
  unlocked: boolean
  progress?: number
  maxProgress?: number
}

export type Level = {
  level: number
  title: string
  pointsRequired: number
  pointsToNext: number
}

export default function GamificationSystem({ userId }: GamificationProps) {
  const [points, setPoints] = useState(0)
  const [level, setLevel] = useState<Level>({
    level: 1,
    title: "Freshman",
    pointsRequired: 0,
    pointsToNext: 100,
  })
  const [streak, setStreak] = useState(0)
  const [achievements, setAchievements] = useState<Achievement[]>([
    {
      id: "first-task",
      title: "First Steps",
      description: "Complete your first task",
      icon: "trophy",
      unlocked: false,
    },
    {
      id: "streak-3",
      title: "Consistent Learner",
      description: "Maintain a 3-day streak",
      icon: "trending-up",
      unlocked: false,
      progress: 0,
      maxProgress: 3,
    },
    {
      id: "tasks-10",
      title: "Task Master",
      description: "Complete 10 tasks",
      icon: "target",
      unlocked: false,
      progress: 0,
      maxProgress: 10,
    },
    {
      id: "all-subjects",
      title: "Well Rounded",
      description: "Complete tasks from all subjects",
      icon: "award",
      unlocked: false,
      progress: 0,
      maxProgress: 6,
    },
  ])
  const [showAnimation, setShowAnimation] = useState(false)
  const [animationText, setAnimationText] = useState("")

// Mock function to load user gamification data
  useEffect(() => {
    // In a real app, this would fetch from an API
    const mockUserData = {
      points: 75,
      streak: 2,
      achievements: [
        {
          id: "first-task",
          unlocked: true,
        },
        {
          id: "streak-3",
          progress: 2,
        },
        {
          id: "tasks-10",
          progress: 7,
        },
        {
          id: "all-subjects",
          progress: 4,
        },
      ],
    }

// Update state with mock data
    setPoints(mockUserData.points)
    setStreak(mockUserData.streak)

// Calculate level based on points
    const newLevel = calculateLevel(mockUserData.points)
    setLevel(newLevel)

// Update achievements
    setAchievements((prev) =>
      prev.map((achievement) => {
        const mockAchievement = mockUserData.achievements.find((a) => a.id === achievement.id)
        if (mockAchievement) {
          return {
            ...achievement,
            unlocked: mockAchievement.unlocked || false,
            progress: mockAchievement.progress || achievement.progress,
          }
        }
        return achievement
      }),
    )
  }, [userId])

// Calculate level based on points
  const calculateLevel = (points: number): Level => {
    const levels = [
      { level: 1, title: "Freshman", pointsRequired: 0, pointsToNext: 100 },
      { level: 2, title: "Sophomore", pointsRequired: 100, pointsToNext: 150 },
      { level: 3, title: "Junior", pointsRequired: 250, pointsToNext: 250 },
      { level: 4, title: "Senior", pointsRequired: 500, pointsToNext: 500 },
      { level: 5, title: "Graduate", pointsRequired: 1000, pointsToNext: 1000 },
      { level: 6, title: "Master", pointsRequired: 2000, pointsToNext: 1000 },
      { level: 7, title: "PhD", pointsRequired: 3000, pointsToNext: 2000 },
      { level: 8, title: "Professor", pointsRequired: 5000, pointsToNext: 5000 },
      { level: 9, title: "Dean", pointsRequired: 10000, pointsToNext: 0 },
    ]

for (let i = 0; i < levels.length; i++) {
      if (points < levels[i].pointsRequired) {
        return levels[i - 1]
      }
    }
    return levels[levels.length - 1]
  }

// Function to show point animation
  const showPointAnimation = (amount: number) => {
    setAnimationText(`+${amount} XP`)
    setShowAnimation(true)
    setTimeout(() => setShowAnimation(false), 2000)
  }

// Render icon based on string name
  const renderIcon = (iconName: string) => {
    switch (iconName) {
      case "trophy":
        return <Trophy size={18} />
      case "star":
        return <Star size={18} />
      case "award":
        return <Award size={18} />
      case "trending-up":
        return <TrendingUp size={18} />
      case "target":
        return <Target size={18} />
      default:
        return <Trophy size={18} />
    }
  }

return (
    <div className="bg-white rounded-lg shadow-sm p-4 mb-4">
      {/* Points and Level */}
      <div className="flex justify-between items-center mb-4">
        <div>
          <h3 className="text-sm font-semibold text-secondary-dark">Level {level.level}</h3>
          <p className="text-xs text-gray-500">{level.title}</p>
        </div>
        <div className="text-right">
          <p className="text-sm font-bold text-primary">{points} XP</p>
          {level.pointsToNext > 0 && (
            <p className="text-xs text-gray-500">
              {level.pointsToNext - (points - level.pointsRequired)} XP to next level
            </p>
          )}
        </div>
      </div>

{/* Progress Bar */}
      <div className="w-full bg-gray-200 rounded-full h-2 mb-4">
        <div
          className="bg-primary h-2 rounded-full"
          style={{
            width: `${level.pointsToNext > 0 ? ((points - level.pointsRequired) / level.pointsToNext) * 100 : 100}%`,
          }}
        ></div>
      </div>

{/* Streak */}
      <div className="flex items-center mb-4">
        <div className="flex items-center bg-amber-100 text-amber-800 px-2 py-1 rounded-full">
          <Star size={14} className="mr-1" />
          <span className="text-xs font-medium">{streak} Day Streak</span>
        </div>
      </div>

{/* Recent Achievements */}
      <h3 className="text-sm font-semibold text-secondary-dark mb-2">Achievements</h3>
      <div className="space-y-2">
        {achievements.map((achievement) => (
          <div
            key={achievement.id}
            className={`flex items-center p-2 rounded-lg ${achievement.unlocked ? "bg-green-50" : "bg-gray-50"}`}
          >
            <div
              className={`w-8 h-8 rounded-full flex items-center justify-center mr-2 ${
                achievement.unlocked ? "bg-green-500 text-white" : "bg-gray-300 text-gray-600"
              }`}
            >
              {renderIcon(achievement.icon)}
            </div>
            <div className="flex-1">
              <p className="text-xs font-medium">{achievement.title}</p>
              <p className="text-xs text-gray-500">{achievement.description}</p>
              {achievement.progress !== undefined && achievement.maxProgress !== undefined && (
                <div className="w-full bg-gray-200 rounded-full h-1 mt-1">
                  <div
                    className="bg-primary h-1 rounded-full"
                    style={{
                      width: `${(achievement.progress / achievement.maxProgress) * 100}%`,
                    }}
                  ></div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

{/* Point Animation */}
      {showAnimation && (
        <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 animate-bounce">
          <div className="bg-primary text-white px-4 py-2 rounded-full text-lg font-bold">{animationText}</div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/gamification/AchievementsSection.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Trophy, Star, Award, TrendingUp, Target } from "lucide-react"

type AchievementsSectionProps = {
  userId: string
}

export type Achievement = {
  id: string
  title: string
  description: string
  icon: string
  unlocked: boolean
  progress?: number
  maxProgress?: number
  dateUnlocked?: string
}

export default function AchievementsSection({ userId }: AchievementsSectionProps) {
  const [achievements, setAchievements] = useState<Achievement[]>([
    {
      id: "first-task",
      title: "First Steps",
      description: "Complete your first task",
      icon: "trophy",
      unlocked: true,
      dateUnlocked: "2025-04-20T10:30:00Z",
    },
    {
      id: "streak-3",
      title: "Consistent Learner",
      description: "Maintain a 3-day streak",
      icon: "trending-up",
      unlocked: true,
      dateUnlocked: "2025-04-22T15:45:00Z",
    },
    {
      id: "tasks-10",
      title: "Task Master",
      description: "Complete 10 tasks",
      icon: "target",
      unlocked: false,
      progress: 7,
      maxProgress: 10,
    },
    {
      id: "all-subjects",
      title: "Well Rounded",
      description: "Complete tasks from all subjects",
      icon: "award",
      unlocked: false,
      progress: 4,
      maxProgress: 6,
    },
    {
      id: "early-bird",
      title: "Early Bird",
      description: "Complete 5 tasks before their due date",
      icon: "star",
      unlocked: false,
      progress: 3,
      maxProgress: 5,
    },
    {
      id: "focus-master",
      title: "Focus Master",
      description: "Complete 10 focus sessions",
      icon: "target",
      unlocked: false,
      progress: 2,
      maxProgress: 10,
    },
  ])

// Format date
  const formatDate = (dateString?: string) => {
    if (!dateString) return ""
    return new Date(dateString).toLocaleDateString()
  }

// Group achievements by unlocked status
  const unlockedAchievements = achievements.filter((a) => a.unlocked)
  const inProgressAchievements = achievements.filter((a) => !a.unlocked)

return (
    <div className="space-y-4">
      {/* Unlocked Achievements */}
      <div>
        <h3 className="text-sm font-medium text-gray-600 mb-2">Unlocked ({unlockedAchievements.length})</h3>
        <div className="grid grid-cols-3 gap-2">
          {unlockedAchievements.map((achievement) => (
            <div key={achievement.id} className="bg-white rounded-lg p-3 border border-green-200 shadow-sm">
              <div className="flex flex-col items-center">
                <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-2">
                  {renderIcon(achievement.icon)}
                </div>
                <p className="text-xs font-medium text-center">{achievement.title}</p>
                <p className="text-[10px] text-gray-500 mt-1">{formatDate(achievement.dateUnlocked)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* In Progress Achievements */}
      <div>
        <h3 className="text-sm font-medium text-gray-600 mb-2">In Progress ({inProgressAchievements.length})</h3>
        <div className="space-y-2">
          {inProgressAchievements.map((achievement) => (
            <div key={achievement.id} className="bg-white rounded-lg p-3 border border-gray-200 shadow-sm">
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                  {renderIcon(achievement.icon)}
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium">{achievement.title}</p>
                  <p className="text-xs text-gray-500">{achievement.description}</p>

{achievement.progress !== undefined && achievement.maxProgress !== undefined && (
                    <div className="mt-1">
                      <div className="flex justify-between text-xs mb-1">
                        <span className="text-gray-500">
                          {achievement.progress}/{achievement.maxProgress}
                        </span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div
                          className="bg-primary h-1.5 rounded-full"
                          style={{ width: `${(achievement.progress / achievement.maxProgress) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
    "app/**/*.{ts,tsx}",
    "components/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "#008dc3", // Bright blue
          dark: "#007388", // Darker teal
          light: "#bff5ff", // Light cyan
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "#007388", // Darker teal
          foreground: "#ffffff",
        },
        success: {
          DEFAULT: "#01c200", // Bright green
          foreground: "#ffffff",
        },
        warning: {
          DEFAULT: "#ff3a00", // Bright orange/red
          foreground: "#ffffff",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "#bff5ff", // Light cyan
          foreground: "#007388", // Darker teal
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        priority: {
          high: "#ff3a00", // Bright orange/red
          medium: "#008dc3", // Bright blue
          low: "#01c200", // Bright green
        },
        event: {
          class: "#bff5ff", // Light cyan
          exam: "#ff3a00", // Bright orange/red
          study: "#01c200", // Bright green
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]typescriptreact:file="components/DayCalendarView.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { format, addDays, isSameDay } from "date-fns"
import { MoreVertical, Video, FileText } from "lucide-react"
import type { Event } from "@/lib/data/mockData"

type DayCalendarViewProps = {
  events: Event[]
  initialDate?: Date
}

export default function DayCalendarView({ events, initialDate = new Date() }: DayCalendarViewProps) {
  const [selectedDate, setSelectedDate] = useState(initialDate)
  const [dayEvents, setDayEvents] = useState<Event[]>([])

// Generate week days
  const weekDays = Array.from({ length: 7 }, (_, i) => {
    const date = addDays(new Date(selectedDate), i - 3) // Start 3 days before selected date
    return {
      date,
      dayName: format(date, "EEE"),
      dayNumber: format(date, "d"),
      isSelected: isSameDay(date, selectedDate),
    }
  })

// Filter events for the selected day
  useEffect(() => {
    const filteredEvents = events.filter((event) => {
      const eventDate = new Date(event.start)
      return isSameDay(eventDate, selectedDate)
    })

// Sort by start time
    filteredEvents.sort((a, b) => {
      return new Date(a.start).getTime() - new Date(b.start).getTime()
    })

setDayEvents(filteredEvents)
  }, [events, selectedDate])

// Select a day
  const selectDay = (date: Date) => {
    setSelectedDate(date)
  }

// Get event type icon
  const getEventIcon = (event: Event) => {
    switch (event.type.toLowerCase()) {
      case "class":
        return <Video size={16} className="text-gray-600" />
      case "exam":
        return <FileText size={16} className="text-gray-600" />
      default:
        return null
    }
  }

// Get event color
  const getEventColor = (event: Event) => {
    if (event.courses?.color) {
      return event.courses.color
    }

switch (event.type.toLowerCase()) {
      case "class":
        return "#7c3aed" // Purple for class
      case "exam":
        return "#ef4444" // Red for exam
      case "study":
        return "#10b981" // Green for study
      default:
        return "#e5e7eb" // Gray for default
    }
  }

// Get event background color with opacity
  const getEventBgColor = (event: Event) => {
    const color = getEventColor(event)
    // Convert hex to RGB and add opacity
    if (color.startsWith("#")) {
      const r = Number.parseInt(color.slice(1, 3), 16)
      const g = Number.parseInt(color.slice(3, 5), 16)
      const b = Number.parseInt(color.slice(5, 7), 16)
      return `rgba(${r}, ${g}, ${b}, 0.15)`
    }
    return color
  }

return (
    <div className="bg-white rounded-lg shadow h-full flex flex-col">
      {/* Header */}
      <div className="p-4 border-b border-gray-200">
        <div>
          <h2 className="text-lg text-gray-500 font-normal">{format(selectedDate, "d MMMM")}</h2>
          <h1 className="text-2xl font-bold text-black">Today</h1>
        </div>
      </div>

{/* Week days */}
      <div className="flex justify-between px-4 py-3 border-b border-gray-200">
        {weekDays.map((day) => (
          <button
            key={day.dayName + day.dayNumber}
            className={`flex flex-col items-center ${day.isSelected ? "text-green-500" : "text-gray-700"}`}
            onClick={() => selectDay(day.date)}
          >
            <span className="text-xs">{day.dayName}</span>
            <span className={`text-lg font-medium ${day.isSelected ? "border-b-2 border-green-500" : ""}`}>
              {day.dayNumber}
            </span>
          </button>
        ))}
      </div>

{/* Events */}
      <div className="flex-1 overflow-y-auto p-4">
        {dayEvents.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-gray-500">
            <p>No events scheduled for today</p>
            <button className="mt-2 text-primary">+ Add Event</button>
          </div>
        ) : (
          <div className="relative">
            {/* Time line */}
            <div className="absolute left-16 top-0 bottom-0 w-px bg-gray-200"></div>

{dayEvents.map((event, index) => {
              const startTime = new Date(event.start)
              const endTime = new Date(event.end)
              const duration = (endTime.getTime() - startTime.getTime()) / (1000 * 60) // duration in minutes

return (
                <div key={event.id} className="mb-8 relative">
                  {/* Time marker */}
                  <div className="absolute left-14 top-4 w-4 h-4 rounded-full bg-indigo-100 border-2 border-indigo-400"></div>

{/* Time */}
                  <div className="absolute left-0 top-3 text-gray-500 text-sm font-medium">
                    {format(startTime, "H:mm")}
                  </div>

{/* End time (small) */}
                  <div className="absolute left-0 top-8 text-xs text-gray-400">{format(endTime, "H:mm")}</div>

{/* Event card */}
                  <div
                    className="ml-20 rounded-lg p-4 shadow-sm"
                    style={{
                      backgroundColor: getEventBgColor(event),
                      borderLeft: `4px solid ${getEventColor(event)}`,
                    }}
                  >
                    <div className="flex justify-between items-start">
                      <h3 className="font-medium text-lg text-black">{event.title}</h3>
                      <button className="text-gray-400 hover:text-gray-600">
                        <MoreVertical size={16} />
                      </button>
                    </div>

{event.description && <p className="text-gray-600 text-sm mt-1">{event.description}</p>}

<div className="mt-3 flex items-center space-x-3">
                      {event.courses?.code && (
                        <div className="flex items-center">
                          <div className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-2">
                            {getEventIcon(event)}
                          </div>
                          <span className="text-xs text-gray-600">{event.courses.code}</span>
                        </div>
                      )}

{event.location && (
                        <div className="flex items-center text-xs text-gray-600">
                          <Video size={14} className="mr-1" />
                          <span>{event.location}</span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/page.tsx" isEdit="true" isMerged="true"
import AuthForm from "@/components/auth/AuthForm"
import Image from "next/image"
import Link from "next/link"

export default function AuthPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/10 to-blue-100 px-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <Link href="/landing" className="inline-block">
            <div className="flex items-center justify-center">
              <Image
                src="/images/eduflow-logo.png"
                alt="EduFlow Logo"
                width={80}
                height={80}
                className="mb-2 animate-float"
              />
            </div>
            <h1 className="text-3xl font-bold text-gradient">EduFlow</h1>
            <p className="text-gray-600">Student Time Management</p>
          </Link>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-blue-lg">
          <AuthForm />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/landing/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { ArrowRight, Clock, Calendar, CheckSquare } from "lucide-react"

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary to-blue-400">
      {/* Header */}
      <header className="container mx-auto px-4 py-6 flex justify-between items-center">
        <div className="flex items-center">
          <Image
            src="/images/eduflow-logo.png"
            alt="EduFlow Logo"
            width={50}
            height={50}
            className="mr-2 animate-float"
          />
          <h1 className="text-2xl font-bold text-white">EduFlow</h1>
        </div>
        <div className="space-x-4">
          <Link href="/auth" className="text-white hover:text-blue-100">
            Login
          </Link>
          <Link
            href="/auth"
            className="bg-white text-primary px-4 py-2 rounded-full font-medium hover:bg-blue-50 transition-colors btn-hover-effect"
          >
            Sign Up
          </Link>
        </div>
      </header>

{/* Hero Section */}
      <section className="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center">
        <div className="md:w-1/2 mb-10 md:mb-0">
          <h2 className="text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
            AI-Driven Student Time Management
          </h2>
          <p className="text-xl text-blue-100 mb-8">
            Automatically organize your academic life with smart scheduling, task prioritization, and productivity
            insights.
          </p>
          <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <Link
              href="/auth"
              className="bg-white text-primary px-6 py-3 rounded-full font-medium text-center hover:bg-blue-50 transition-colors flex items-center justify-center btn-hover-effect"
            >
              Get Started <ArrowRight size={18} className="ml-2" />
            </Link>
            <Link
              href="/"
              className="bg-transparent border-2 border-white text-white px-6 py-3 rounded-full font-medium text-center hover:bg-white/10 transition-colors"
            >
              View Demo
            </Link>
          </div>
        </div>
        <div className="md:w-1/2 flex justify-center">
          <div className="relative w-[280px] h-[560px] bg-white rounded-[40px] overflow-hidden shadow-2xl border-8 border-white">
            <div className="absolute top-0 left-0 right-0 h-6 bg-black rounded-t-[32px]"></div>
            <Image src="/images/eduflow-logo.png" alt="EduFlow App" fill className="object-cover" />
          </div>
        </div>
      </section>

{/* Features Section */}
      <section className="bg-white py-16 md:py-24">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gradient mb-12">
            Features that make student life easier
          </h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl shadow-blue hover-card">
              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
                <Clock className="text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-2 text-gray-800">Smart Scheduling</h3>
              <p className="text-gray-600">
                Automatically organize your classes, study sessions, and assignments with AI-powered scheduling.
              </p>
            </div>

<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl shadow-blue hover-card">
              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
                <CheckSquare className="text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-2 text-gray-800">Task Prioritization</h3>
              <p className="text-gray-600">
                Never miss a deadline with intelligent task prioritization based on due dates and importance.
              </p>
            </div>

<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl shadow-blue hover-card">
              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
                <Calendar className="text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-2 text-gray-800">Calendar Integration</h3>
              <p className="text-gray-600">
                Sync with your university calendar and automatically import classes and exams.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 md:py-24 bg-gradient-to-r from-primary to-blue-400">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Ready to transform your academic life?</h2>
          <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
            Join thousands of students who are already using EduFlow to manage their time effectively and achieve better
            results.
          </p>
          <Link
            href="/auth"
            className="bg-white text-primary px-8 py-4 rounded-full font-medium text-lg hover:bg-blue-50 transition-colors inline-block btn-hover-effect"
          >
            Get Started for Free
          </Link>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between">
            <div className="mb-8 md:mb-0">
              <div className="flex items-center">
                <Image src="/images/eduflow-logo.png" alt="EduFlow Logo" width={40} height={40} className="mr-2" />
                <h3 className="text-xl font-bold">EduFlow</h3>
              </div>
              <p className="mt-4 text-gray-400 max-w-xs">
                AI-powered student time management platform for better academic performance.
              </p>
            </div>

<div className="grid grid-cols-2 md:grid-cols-3 gap-8">
              <div>
                <h4 className="text-lg font-semibold mb-4">Product</h4>
                <ul className="space-y-2">
                  <li>
                    <a href="#" className="text-gray-400 hover:text-white transition-colors">
                      Features
                    </a>
                  </li>
                  <li>
                    <a href="#" className="text-gray-400 hover:text-white transition-colors">
                      Pricing
                    </a>
                  </li>
                </ul>
              </div>

<div>
                <h4 className="text-lg font-semibold mb-4">Legal</h4>
                <ul className="space-y-2">
                  <li>
                    <a href="#" className="text-gray-400 hover:text-white transition-colors">
                      Privacy
                    </a>
                  </li>
                  <li>
                    <a href="#" className="text-gray-400 hover:text-white transition-colors">
                      Terms
                    </a>
                  </li>
                  <li>
                    <a href="#" className="text-gray-400 hover:text-white transition-colors">
                      Security
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

<div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400">© 2025 EduFlow. All rights reserved.</p>
            <div className="flex space-x-4 mt-4 md:mt-0">
              <a href="#" className="text-gray-400 hover:text-white transition-colors">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path
                    fillRule="evenodd"
                    d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                    clipRule="evenodd"
                  ></path>
                </svg>
              </a>
              <a href="#" className="text-gray-400 hover:text-white transition-colors">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]plaintext:file="public/images/eduflow-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/eduflow1_00000-yhPKYeaSpjeI8Og2woR1uqd1quF6r7.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import App from "./app"

export default function Home() {
  return <App />
}
[V0_FILE]typescriptreact:file="components/gamification/ProductivityMeter.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useMemo, useState } from "react"
import type { Task } from "@/lib/data/mockData"

type ProductivityMeterProps = {
  tasks: Task[]
}

export default function ProductivityMeter({ tasks }: ProductivityMeterProps) {
  const [timePeriod, setTimePeriod] = useState<"day" | "week" | "month">("week")

const handleTimePeriodChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setTimePeriod(e.target.value as "day" | "week" | "month")
  }

const { totalTasks, upcoming, completed } = useMemo(() => {
    const now = new Date()

// Filter tasks based on time period
    const filteredTasks = tasks.filter((task) => {
      const dueDate = new Date(task.due_date)
      const diffTime = dueDate.getTime() - now.getTime()
      const diffDays = diffTime / (1000 * 60 * 60 * 24)

switch (timePeriod) {
        case "day":
          return diffDays >= 0 && diffDays < 1
        case "week":
          return diffDays >= 0 && diffDays < 7
        case "month":
          return diffDays >= 0 && diffDays < 30
        default:
          return true
      }
    })

const upcoming = filteredTasks.filter((task) => {
      const dueDate = new Date(task.due_date)
      return !task.completed && dueDate > now
    })

const completed = filteredTasks.filter((task) => task.completed)

return {
      totalTasks: filteredTasks.length,
      upcoming: upcoming.length,
      completed: completed.length,
    }
  }, [tasks, timePeriod])

// Calculate percentages for the circle segments
  const upcomingPercentage = totalTasks > 0 ? (upcoming / totalTasks) * 100 : 0
  const completedPercentage = totalTasks > 0 ? (completed / totalTasks) * 100 : 0

// Calculate stroke-dasharray and stroke-dashoffset for each segment
  const circumference = 2 * Math.PI * 45 // 45 is the radius

const upcomingDashArray = (upcomingPercentage / 100) * circumference
  const completedDashArray = (completedPercentage / 100) * circumference

const upcomingDashOffset = 0
  const completedDashOffset = upcomingDashArray

return (
    <div className="bg-white rounded-lg p-4 shadow-blue animated-border">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold text-gradient">Activity</h2>
        <select
          value={timePeriod}
          onChange={handleTimePeriodChange}
          className="text-sm text-gray-500 border border-gray-200 rounded-md px-2 py-1 bg-white shadow-sm focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none"
        >
          <option value="day">Today</option>
          <option value="week">This Week</option>
          <option value="month">This Month</option>
        </select>
      </div>

<div className="flex items-center justify-between">
        <div className="relative w-32 h-32 animate-pulse-slow">
          {/* SVG Circle Chart */}
          <svg className="w-full h-full" viewBox="0 0 100 100">
            {/* Background circle */}
            <circle cx="50" cy="50" r="45" fill="none" className="stroke-gray-200" strokeWidth="10" />

{/* Completed segment - Green */}
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="#4ade80"
              strokeWidth="10"
              strokeDasharray={`${completedDashArray} ${circumference - completedDashArray}`}
              strokeDashoffset={-completedDashOffset}
              transform="rotate(-90 50 50)"
              className="transition-all duration-1000 ease-out"
              style={{ strokeDasharray: `${completedDashArray} ${circumference}` }}
            >
              <animate
                attributeName="stroke-dasharray"
                from="0 283"
                to={`${completedDashArray} ${circumference}`}
                dur="1s"
                fill="freeze"
              />
            </circle>

{/* Upcoming segment - Blue */}
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="#60a5fa"
              strokeWidth="10"
              strokeDasharray={`${upcomingDashArray} ${circumference - upcomingDashArray}`}
              strokeDashoffset={-upcomingDashOffset}
              transform="rotate(-90 50 50)"
              className="transition-all duration-1000 ease-out"
              style={{ strokeDasharray: `${upcomingDashArray} ${circumference}` }}
            >
              <animate
                attributeName="stroke-dasharray"
                from="0 283"
                to={`${upcomingDashArray} ${circumference}`}
                dur="1s"
                fill="freeze"
              />
            </circle>

{/* Center text */}
            <text x="50" y="45" textAnchor="middle" fontSize="24" fontWeight="bold" className="fill-gray-800">
              {totalTasks}
            </text>
            <text x="50" y="65" textAnchor="middle" fontSize="12" className="fill-gray-600">
              Total Tasks
            </text>
          </svg>
        </div>

<div className="flex-1 ml-6">
          <ul className="space-y-3">
            <li className="flex items-center">
              <span className="w-3 h-3 rounded-full bg-blue-400 mr-2"></span>
              <span className="text-sm font-medium">{upcoming} Upcoming</span>
            </li>
            <li className="flex items-center">
              <span className="w-3 h-3 rounded-full bg-green-400 mr-2"></span>
              <span className="text-sm font-medium">{completed} Completed</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/HomePage.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { format } from "date-fns"
import { Bell, ChevronRight } from "lucide-react"
import {
  getTasksDueToday,
  getUnreadNotifications,
  markNotificationAsRead,
  getProfile,
  getTasks,
} from "@/lib/data/mockData"
import type { Task, Notification, Profile } from "@/lib/data/mockData"
import ProductivityMeter from "./gamification/ProductivityMeter"
import Image from "next/image"

export default function HomePage() {
  const [profile, setProfile] = useState<Profile | null>(null)
  const [todayTasks, setTodayTasks] = useState<Task[]>([])
  const [allTasks, setAllTasks] = useState<Task[]>([])
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadData() {
      try {
        const [profileData, tasksData, allTasksData, notificationsData] = await Promise.all([
          getProfile(),
          getTasksDueToday(),
          getTasks(),
          getUnreadNotifications(),
        ])

setProfile(profileData)
        setTodayTasks(tasksData)
        setAllTasks(allTasksData)
        setNotifications(notificationsData.slice(0, 5))
      } catch (error) {
        console.error("Error loading home data:", error)
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [])

// Format time ago
  const formatTimeAgo = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()
    const diffSec = Math.floor(diffMs / 1000)
    const diffMin = Math.floor(diffSec / 60)
    const diffHour = Math.floor(diffMin / 60)
    const diffDay = Math.floor(diffHour / 24)

if (diffDay > 0) {
      return `${diffDay}d ago`
    } else if (diffHour > 0) {
      return `${diffHour}h ago`
    } else if (diffMin > 0) {
      return `${diffMin}m ago`
    } else {
      return "Just now"
    }
  }

const handleNotificationClick = async (id: string) => {
    try {
      await markNotificationAsRead(id)
      setNotifications(notifications.filter((n) => n.id !== id))
    } catch (error) {
      console.error("Error marking notification as read:", error)
    }
  }

if (loading) {
    return (
      <div className="h-full flex flex-col items-center justify-center">
        <Image
          src="/images/eduflow-logo.png"
          alt="EduFlow Logo"
          width={80}
          height={80}
          className="animate-float mb-4"
        />
        <div className="w-16 h-1 bg-gray-200 rounded-full overflow-hidden">
          <div className="h-full bg-primary shimmer" style={{ width: "100%" }}></div>
        </div>
      </div>
    )
  }

return (
    <div className="h-full overflow-y-auto pb-16">
      {/* Header */}
      <div className="mb-4">
        <h1 className="text-2xl font-bold text-gradient">Hello, {profile?.full_name || "Student"}</h1>
        <p className="text-gray-500">{format(new Date(), "EEEE, MMMM d, yyyy")}</p>
      </div>

{/* Today's Tasks Summary */}
      <div className="gradient-bg rounded-xl p-4 mb-4 flex items-center justify-between text-white shadow-blue-lg animated-border">
        <div>
          <h2 className="text-lg font-semibold">Today's Tasks</h2>
          <p className="text-3xl font-bold mt-1">{todayTasks.length}</p>
          <p className="text-sm text-primary-light mt-1">
            {todayTasks.length === 0
              ? "No tasks due today"
              : todayTasks.length === 1
                ? "1 task due today"
                : `${todayTasks.length} tasks due today`}
          </p>
        </div>
      </div>

{/* Productivity Meter */}
      <div className="mb-6">
        <ProductivityMeter tasks={allTasks} />
      </div>

{/* Recent Notifications */}
      <div className="mb-6">
        <div className="flex justify-between items-center mb-3">
          <h2 className="text-lg font-semibold text-gradient">Recent Notifications</h2>
          <button className="text-primary text-sm flex items-center btn-touch-effect px-2 py-1 rounded-full">
            View all <ChevronRight size={16} />
          </button>
        </div>
        <div className="space-y-3">
          {notifications.length === 0 ? (
            <div className="bg-white rounded-lg p-3 border border-gray-200 shadow-sm text-center text-gray-500">
              No new notifications
            </div>
          ) : (
            notifications.map((notification) => (
              <div
                key={notification.id}
                className="bg-white rounded-lg p-3 border border-primary-light shadow-blue card-hover ripple"
                onClick={() => handleNotificationClick(notification.id)}
              >
                <div className="flex justify-between">
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2">
                      <Bell size={16} className="text-primary" />
                    </div>
                    <p className="font-medium text-sm">{notification.title}</p>
                  </div>
                  <span className="text-xs text-gray-500">{formatTimeAgo(notification.created_at)}</span>
                </div>
                <p className="text-xs text-gray-600 mt-1 ml-10">{notification.message}</p>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import "./globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

// Update the viewport meta tag to better handle iPhone dimensions
export const metadata: Metadata = {
  title: "EduFlow - Student Time Management",
  description: "AI-driven student time management application",
  viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover",
  icons: {
    icon: "/images/eduflow-logo.png",
    apple: "/images/eduflow-logo.png",
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/TabBar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Home, Calendar, CheckSquare, User } from "lucide-react"

type TabBarProps = {
  activeTab: string
  onTabChange: (tab: string) => void
}

export default function TabBar({ activeTab, onTabChange }: TabBarProps) {
  const tabs = [
    { id: "home", label: "Home", icon: Home },
    { id: "calendar", label: "Calendar", icon: Calendar },
    { id: "tasks", label: "Tasks", icon: CheckSquare },
    { id: "profile", label: "Profile", icon: User },
  ]

return (
    <div className="fixed bottom-0 left-0 right-0 bg-primary flex justify-around items-center h-16 safe-bottom max-w-[390px] mx-auto shadow-lg rounded-t-xl">
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id
        const Icon = tab.icon
        return (
          <button
            key={tab.id}
            className={`flex flex-col items-center justify-center w-full h-full relative ripple ${
              isActive ? "text-white" : "text-white/70"
            }`}
            onClick={() => onTabChange(tab.id)}
          >
            <div
              className={`p-1.5 rounded-full transition-all duration-300 ${isActive ? "bg-white/20 scale-110" : ""}`}
            >
              <Icon size={20} className={isActive ? "text-white" : "text-white/70"} />
            </div>
            <span className="text-xs mt-1">{tab.label}</span>
            {isActive && (
              <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-12 h-1 bg-white rounded-t-full" />
            )}
          </button>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ProfilePage.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { User, Mail, Book, Bell, ChevronRight, Camera, Award, BookOpen } from "lucide-react"
import { getProfile, updateProfile, uploadAvatar, getUserCourses, type Profile, type Course } from "@/lib/data/mockData"
import AchievementsSection from "./gamification/AchievementsSection"
import CourseDetailsPage from "./CourseDetailsPage"

export default function ProfilePage() {
  const [profile, setProfile] = useState<Profile | null>(null)
  const [courses, setCourses] = useState<Course[]>([])
  const [loading, setLoading] = useState(true)
  const [isEditing, setIsEditing] = useState(false)
  const [selectedCourse, setSelectedCourse] = useState<Course | null>(null)
  const [formData, setFormData] = useState({
    full_name: "Yazan Hussain",
    student_id: "443105631",
    program: "Computer Engineering",
    email: "443105631@student.ksu.edu.sa",
  })

useEffect(() => {
    async function loadProfile() {
      try {
        const [profileData, coursesData] = await Promise.all([getProfile(), getUserCourses()])
        setProfile(profileData)
        setCourses(coursesData)
        setFormData({
          full_name: profileData.full_name || "",
          student_id: profileData.student_id || "",
          program: profileData.program || "",
          email: profileData.email || "",
        })
      } catch (error) {
        console.error("Error loading profile:", error)
      } finally {
        setLoading(false)
      }
    }

loadProfile()
  }, [])

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

const handleSaveProfile = async () => {
    try {
      const updatedProfile = await updateProfile({
        full_name: formData.full_name,
        student_id: formData.student_id,
        program: formData.program,
        email: formData.email,
      })
      setProfile(updatedProfile)
      setIsEditing(false)
    } catch (error) {
      console.error("Error updating profile:", error)
    }
  }

const handleCancelEdit = () => {
    setIsEditing(false)
    if (profile) {
      setFormData({
        full_name: profile.full_name || "",
        student_id: profile.student_id || "",
        program: profile.program || "",
        email: profile.email || "",
      })
    }
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || e.target.files.length === 0) return

try {
      const file = e.target.files[0]
      const updatedProfile = await uploadAvatar(file)
      setProfile(updatedProfile)
    } catch (error) {
      console.error("Error uploading avatar:", error)
    }
  }

const handleCourseClick = (course: Course) => {
    setSelectedCourse(course)
  }

const handleBackFromCourse = () => {
    setSelectedCourse(null)
  }

if (selectedCourse) {
    return <CourseDetailsPage course={selectedCourse} onBack={handleBackFromCourse} />
  }

if (loading) {
    return <div className="h-full flex items-center justify-center">Loading profile...</div>
  }

return (
    <div className="h-full overflow-y-auto pb-20">
      {/* Profile Header */}
      <div className="flex items-center mb-6 bg-white p-4 rounded-lg shadow-sm">
        <div className="relative">
          <div className="w-16 h-16 rounded-full bg-primary-light flex items-center justify-center mr-4 overflow-hidden">
            {profile?.avatar_url ? (
              <img
                src={profile.avatar_url || "/placeholder.svg"}
                alt="Profile"
                className="w-full h-full object-cover"
              />
            ) : (
              <User size={32} className="text-primary" />
            )}
          </div>
          <label
            htmlFor="avatar-upload"
            className="absolute bottom-0 right-3 bg-primary rounded-full p-1 cursor-pointer"
          >
            <Camera size={14} className="text-white" />
            <input id="avatar-upload" type="file" accept="image/*" className="hidden" onChange={handleAvatarUpload} />
          </label>
        </div>
        {isEditing ? (
          <div className="flex-1">
            <input
              type="text"
              name="full_name"
              value={formData.full_name}
              onChange={handleInputChange}
              className="w-full text-xl font-bold mb-1 border-b border-primary-light focus:outline-none focus:border-primary"
              placeholder="Full Name"
            />
            <input
              type="text"
              name="program"
              value={formData.program}
              onChange={handleInputChange}
              className="w-full text-gray-500 mb-1 border-b border-primary-light focus:outline-none focus:border-primary"
              placeholder="Program"
            />
            <input
              type="text"
              name="student_id"
              value={formData.student_id}
              onChange={handleInputChange}
              className="w-full text-xs text-gray-500 border-b border-primary-light focus:outline-none focus:border-primary"
              placeholder="Student ID"
            />
            <div className="flex space-x-2 mt-2">
              <button onClick={handleSaveProfile} className="px-3 py-1 bg-primary text-white text-xs rounded-full">
                Save
              </button>
              <button onClick={handleCancelEdit} className="px-3 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">
                Cancel
              </button>
            </div>
          </div>
        ) : (
          <div>
            <div className="flex items-center">
              <h1 className="text-xl font-bold text-secondary-dark">{profile?.full_name || "Student Name"}</h1>
              <button onClick={handleEditProfile} className="ml-2 text-xs text-primary hover:underline">
                Edit
              </button>
            </div>
            <p className="text-gray-500">{profile?.program || "Program"}</p>
            <p className="text-xs text-gray-500">ID: {profile?.student_id || "Student ID"}</p>
          </div>
        )}
      </div>

{/* Achievements Section */}
      <div className="mb-6">
        <div className="flex items-center mb-3">
          <Award size={18} className="text-primary mr-2" />
          <h2 className="text-lg font-semibold text-secondary-dark">Achievements</h2>
        </div>
        <AchievementsSection userId={profile?.id || "default"} />
      </div>

{/* My Courses */}
      <div className="mb-6">
        <div className="flex items-center mb-3">
          <BookOpen size={18} className="text-primary mr-2" />
          <h2 className="text-lg font-semibold text-secondary-dark">My Courses</h2>
        </div>
        <div className="space-y-3">
          {courses.length === 0 ? (
            <div className="bg-white rounded-lg p-3 border border-gray-200 shadow-sm text-center text-gray-500">
              No courses enrolled
            </div>
          ) : (
            courses.map((course) => (
              <div
                key={course.id}
                className="bg-white rounded-lg p-3 border border-primary-light shadow-sm card-hover ripple"
                onClick={() => handleCourseClick(course)}
              >
                <div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <div
                      className="w-10 h-10 rounded-lg flex items-center justify-center mr-3"
                      style={{ backgroundColor: course.color || "#008dc3" }}
                    >
                      <BookOpen size={20} className="text-white" />
                    </div>
                    <div>
                      <p className="font-medium text-secondary-dark">{course.code}</p>
                      <p className="text-xs text-gray-500">{course.name}</p>
                    </div>
                  </div>
                  <ChevronRight size={16} className="text-primary" />
                </div>
              </div>
            ))
          )}
        </div>
      </div>

{/* Account Settings */}
      <div className="mb-6">
        <h2 className="text-lg font-semibold text-secondary-dark mb-3">Account</h2>
        <div className="bg-white rounded-lg overflow-hidden border border-primary-light shadow-sm">
          <div className="flex items-center justify-between p-4 border-b border-primary-light">
            <div className="flex items-center">
              <Mail size={18} className="text-primary mr-3" />
              <div>
                <p className="font-medium text-sm text-secondary-dark">Email</p>
                <p className="text-xs text-gray-500">{profile?.email || "email@example.com"}</p>
              </div>
            </div>
            <ChevronRight size={18} className="text-primary" />
          </div>
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center">
              <Book size={18} className="text-primary mr-3" />
              <div>
                <p className="font-medium text-sm text-secondary-dark">Academic Information</p>
                <p className="text-xs text-gray-500">GPA: 4.89 | Credits: 120</p>
              </div>
            </div>
            <ChevronRight size={18} className="text-primary" />
          </div>
        </div>
      </div>

{/* App Settings */}
      <div className="mb-6">
        <h2 className="text-lg font-semibold text-secondary-dark mb-3">Settings</h2>
        <div className="bg-white rounded-lg overflow-hidden border border-primary-light shadow-sm">
          <div className="flex items-center justify-between p-4 border-b border-primary-light">
            <div className="flex items-center">
              <Bell size={18} className="text-primary mr-3" />
              <p className="font-medium text-sm text-secondary-dark">Notifications</p>
            </div>
            <ChevronRight size={18} className="text-primary" />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/CourseDetailsPage.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronLeft, Calendar, CheckSquare } from "lucide-react"
import { getTasks, getEvents, type Task, type Event, type Course } from "@/lib/data/mockData"
import { format } from "date-fns"

type CourseDetailsPageProps = {
  course: Course
  onBack: () => void
}

export default function CourseDetailsPage({ course, onBack }: CourseDetailsPageProps) {
  const [tasks, setTasks] = useState<Task[]>([])
  const [events, setEvents] = useState<Event[]>([])
  const [activeTab, setActiveTab] = useState<"tasks" | "events">("tasks")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadData() {
      try {
        const [tasksData, eventsData] = await Promise.all([getTasks(), getEvents()])

// Filter tasks and events for this course
        const courseTasks = tasksData.filter((task) => task.course_id === course.id)
        const courseEvents = eventsData.filter((event) => event.course_id === course.id)

setTasks(courseTasks)
        setEvents(courseEvents)
      } catch (error) {
        console.error("Error loading course data:", error)
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [course.id])

const getPriorityColor = (priority: string | null) => {
    if (!priority) return "bg-gray-400"

switch (priority.toLowerCase()) {
      case "high":
        return "bg-priority-high"
      case "medium":
        return "bg-priority-medium"
      case "low":
        return "bg-priority-low"
      default:
        return "bg-gray-400"
    }
  }

const getEventTypeColor = (type: string) => {
    switch (type.toLowerCase()) {
      case "class":
        return "bg-event-class"
      case "exam":
        return "bg-event-exam"
      case "study":
        return "bg-event-study"
      default:
        return "bg-gray-200"
    }
  }

return (
    <div className="h-full flex flex-col pt-14 pb-4 bg-gray-50">
      {/* Header */}
      <div className="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200 px-4 py-3 flex items-center safe-top max-w-[390px] mx-auto shadow-md">
        <button onClick={onBack} className="p-2 rounded-md mr-2" aria-label="Go back">
          <ChevronLeft size={24} />
        </button>
        <div>
          <h1 className="text-xl font-bold" style={{ color: course.color || "#008dc3" }}>
            {course.code}
          </h1>
          <p className="text-sm text-gray-500">{course.name}</p>
        </div>
      </div>

{/* Tabs */}
      <div className="flex border-b mb-4 bg-white">
        <button
          className={`flex-1 py-2 px-4 text-center ${
            activeTab === "tasks" ? "border-b-2 border-primary text-primary font-medium" : "text-gray-500"
          }`}
          onClick={() => setActiveTab("tasks")}
        >
          <div className="flex items-center justify-center">
            <CheckSquare size={16} className="mr-1" />
            Tasks
          </div>
        </button>
        <button
          className={`flex-1 py-2 px-4 text-center ${
            activeTab === "events" ? "border-b-2 border-primary text-primary font-medium" : "text-gray-500"
          }`}
          onClick={() => setActiveTab("events")}
        >
          <div className="flex items-center justify-center">
            <Calendar size={16} className="mr-1" />
            Events
          </div>
        </button>
      </div>

{/* Content */}
      <div className="flex-1 overflow-y-auto px-4">
        {loading ? (
          <div className="flex justify-center items-center h-full">
            <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
          </div>
        ) : activeTab === "tasks" ? (
          <div className="space-y-3">
            {tasks.length === 0 ? (
              <div className="text-center text-gray-500 py-8">No tasks for this course</div>
            ) : (
              tasks.map((task) => (
                <div key={task.id} className="bg-white p-3 rounded-lg shadow-sm border border-gray-200">
                  <div className="flex justify-between items-start">
                    <div>
                      <h3 className={`font-medium ${task.completed ? "line-through text-gray-400" : ""}`}>
                        {task.title}
                      </h3>
                      <p className="text-xs text-gray-500 mt-1">
                        Due: {format(new Date(task.due_date), "MMM d, yyyy")}
                      </p>
                    </div>
                    <span
                      className={`px-2 py-0.5 text-xs font-semibold rounded-full text-white ${getPriorityColor(task.priority)}`}
                    >
                      {task.priority}
                    </span>
                  </div>
                  {task.description && (
                    <p className="text-sm text-gray-600 mt-2 border-t border-gray-100 pt-2">{task.description}</p>
                  )}
                </div>
              ))
            )}
          </div>
        ) : (
          <div className="space-y-3">
            {events.length === 0 ? (
              <div className="text-center text-gray-500 py-8">No events for this course</div>
            ) : (
              events.map((event) => (
                <div key={event.id} className="bg-white p-3 rounded-lg shadow-sm border border-gray-200">
                  <div className="flex items-start">
                    <div className={`w-2 h-full self-stretch rounded-full mr-3 ${getEventTypeColor(event.type)}`}></div>
                    <div className="flex-1">
                      <h3 className="font-medium">{event.title}</h3>
                      <p className="text-xs text-gray-500 mt-1">
                        {format(new Date(event.start), "MMM d, h:mm a")} - {format(new Date(event.end), "h:mm a")}
                      </p>
                      <div className="flex items-center mt-1">
                        <span className="text-xs bg-gray-100 px-2 py-0.5 rounded-full text-gray-600 capitalize">
                          {event.type}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { getTasks, getEvents } from "@/lib/data/mockData"
import MobileLayout from "@/components/MobileLayout"
import TabBar from "@/components/TabBar"
import HomePage from "@/components/HomePage"
import TaskList from "@/components/TaskList"
import CalendarGrid from "@/components/CalendarGrid"
import ProfilePage from "@/components/ProfilePage"
import SplashScreen from "@/components/SplashScreen"

export default function App() {
  const [activeTab, setActiveTab] = useState("home")
  const [tasks, setTasks] = useState([])
  const [events, setEvents] = useState([])
  const [loading, setLoading] = useState(true)
  const [showSplash, setShowSplash] = useState(true)

useEffect(() => {
    async function loadData() {
      try {
        const [tasksData, eventsData] = await Promise.all([getTasks(), getEvents()])
        setTasks(tasksData)
        setEvents(eventsData)
      } catch (error) {
        console.error("Error loading data:", error)
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [])

const handleSplashComplete = () => {
    setShowSplash(false)
  }

// Main content based on active tab
  const renderMainContent = () => {
    switch (activeTab) {
      case "home":
        return <HomePage />
      case "calendar":
        return <CalendarGrid events={events} />
      case "tasks":
        return <TaskList initialTasks={tasks} />
      case "profile":
        return <ProfilePage />
      default:
        return <HomePage />
    }
  }

// Sidebar content (task list)
  const sidebarContent = <TaskList initialTasks={tasks} />

if (showSplash) {
    return (
      <div className="h-screen flex justify-center">
        <div className="w-full max-w-[390px] relative">
          <SplashScreen onComplete={handleSplashComplete} />
        </div>
      </div>
    )
  }

return (
    <div className="h-screen flex justify-center bg-gray-50">
      <div className="w-full max-w-[390px] relative">
        <MobileLayout sidebarContent={sidebarContent} mainContent={renderMainContent()} />
        <TabBar activeTab={activeTab} onTabChange={setActiveTab} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/MobileLayout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import Image from "next/image"
import { useState, useEffect } from "react"
import { X } from "lucide-react"

type MobileLayoutProps = {
  sidebarContent: React.ReactNode
  mainContent: React.ReactNode
}

export default function MobileLayout({ sidebarContent, mainContent }: MobileLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false)

// Close sidebar when clicking outside on mobile
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const sidebar = document.getElementById("sidebar")
      const toggleButton = document.getElementById("sidebar-toggle")

if (
        sidebarOpen &&
        sidebar &&
        !sidebar.contains(event.target as Node) &&
        toggleButton &&
        !toggleButton.contains(event.target as Node)
      ) {
        setSidebarOpen(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [sidebarOpen])

// Prevent body scrolling when sidebar is open
  useEffect(() => {
    if (sidebarOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

return () => {
      document.body.style.overflow = "auto"
    }
  }, [sidebarOpen])

return (
    <div className="relative h-full w-full">
      {/* Main Content */}
      <div className="w-full h-full">
        {/* Header with toggle button */}
        <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-center safe-top w-full max-w-[390px] mx-auto shadow-md">
          <div className="flex items-center">
            <Image src="/images/eduflow-logo.png" alt="EduFlow Logo" width={36} height={36} className="mr-2" />
            <h1 className="text-xl font-bold text-gradient">EduFlow</h1>
          </div>
        </header>

{/* Main content area */}
        <main className="pt-14 pb-4 px-4 h-full safe-bottom bg-gray-50">{mainContent}</main>
      </div>

{/* Sidebar Overlay */}
      {sidebarOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-30 transition-opacity duration-300" aria-hidden="true" />
      )}

{/* Sidebar */}
      <aside
        id="sidebar"
        className={`fixed top-0 left-0 bottom-0 w-[280px] bg-white z-40 transform transition-transform duration-300 ease-in-out ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        } overflow-hidden flex flex-col safe-top safe-bottom shadow-xl`}
      >
        <div className="p-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-primary to-blue-400">
          <div className="flex items-center">
            <Image src="/images/eduflow-logo.png" alt="EduFlow Logo" width={40} height={40} className="mr-2" />
            <h2 className="text-lg font-semibold text-white">Tasks</h2>
          </div>
          <button
            onClick={() => setSidebarOpen(false)}
            className="p-1 rounded-md hover:bg-white/10 text-white"
            aria-label="Close sidebar"
          >
            <X size={20} />
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-4">{sidebarContent}</div>
      </aside>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/SwipeableLayout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import Image from "next/image"
import { useState, useRef } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

type SwipeableLayoutProps = {
  pages: React.ReactNode[]
  titles: string[]
}

export default function SwipeableLayout({ pages, titles }: SwipeableLayoutProps) {
  const [currentPage, setCurrentPage] = useState(0)
  const touchStartX = useRef<number | null>(null)
  const touchEndX = useRef<number | null>(null)
  const containerRef = useRef<HTMLDivElement>(null)

// Handle touch events for swiping
  const handleTouchStart = (e: React.TouchEvent) => {
    touchStartX.current = e.touches[0].clientX
  }

const handleTouchMove = (e: React.TouchEvent) => {
    touchEndX.current = e.touches[0].clientX
  }

const handleTouchEnd = () => {
    if (!touchStartX.current || !touchEndX.current) return

const diff = touchStartX.current - touchEndX.current
    const threshold = 75 // Minimum swipe distance

if (diff > threshold) {
      // Swiped left, go to next page
      if (currentPage < pages.length - 1) {
        setCurrentPage(currentPage + 1)
      }
    } else if (diff < -threshold) {
      // Swiped right, go to previous page
      if (currentPage > 0) {
        setCurrentPage(currentPage - 1)
      }
    }

// Reset touch coordinates
    touchStartX.current = null
    touchEndX.current = null
  }

// Navigate to specific page
  const goToPage = (pageIndex: number) => {
    setCurrentPage(pageIndex)
  }

// Navigate to previous page
  const goToPrevPage = () => {
    if (currentPage > 0) {
      setCurrentPage(currentPage - 1)
    }
  }

// Navigate to next page
  const goToNextPage = () => {
    if (currentPage < pages.length - 1) {
      setCurrentPage(currentPage + 1)
    }
  }

return (
    <div className="h-full flex flex-col w-full">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between safe-top w-full max-w-[390px] mx-auto shadow-md">
        <button
          onClick={goToPrevPage}
          className={`p-2 rounded-md ${currentPage === 0 ? "invisible" : "visible"}`}
          aria-label="Previous page"
        >
          <ChevronLeft size={24} />
        </button>
        <div className="flex items-center">
          <Image src="/images/eduflow-logo.png" alt="EduFlow Logo" width={36} height={36} className="mr-2" />
          <h1 className="text-xl font-bold text-gradient">{titles[currentPage]}</h1>
        </div>
        <button
          onClick={goToNextPage}
          className={`p-2 rounded-md ${currentPage === pages.length - 1 ? "invisible" : "visible"}`}
          aria-label="Next page"
        >
          <ChevronRight size={24} />
        </button>
      </header>

{/* Content */}
      <div
        ref={containerRef}
        className="flex-1 overflow-hidden pt-14 bg-gray-50"
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        <div
          className="flex h-full transition-transform duration-300 ease-in-out"
          style={{ transform: `translateX(-${currentPage * 100}%)` }}
        >
          {pages.map((page, index) => (
            <div key={index} className="min-w-full h-full px-4 pb-4">
              {page}
            </div>
          ))}
        </div>
      </div>

{/* Page indicator */}
      <div className="fixed bottom-4 left-0 right-0 flex justify-center space-x-2 z-10">
        {pages.map((_, index) => (
          <button
            key={index}
            onClick={() => goToPage(index)}
            className={`w-2 h-2 rounded-full ${
              currentPage === index ? "bg-primary" : "bg-gray-300"
            } transition-colors duration-200`}
            aria-label={`Go to page ${index + 1}`}
          />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 255, 255, 255;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 196 100% 38%;
    --primary-foreground: 0 0% 98%;
    --secondary: 191 100% 27%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 190 100% 87%;
    --accent-foreground: 191 100% 27%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 196 100% 38%;
    --chart-1: 196 100% 38%;
    --chart-2: 191 100% 27%;
    --chart-3: 190 100% 87%;
    --chart-4: 120 99% 38%;
    --chart-5: 14 100% 50%;
    --radius: 0.75rem;
    --sidebar-background: 190 100% 97%;
    --sidebar-foreground: 191 100% 27%;
    --sidebar-primary: 196 100% 38%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 190 100% 87%;
    --sidebar-accent-foreground: 191 100% 27%;
    --sidebar-border: 190 100% 87%;
    --sidebar-ring: 196 100% 38%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .iphone-height {
    height: 100vh; /* Fallback */
    height: -webkit-fill-available;
  }
  .iphone-screen {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
  }
}

/* Custom styles for the app */
.gradient-bg {
  background: linear-gradient(135deg, #008dc3 0%, #007388 100%);
}

.accent-gradient-bg {
  background: linear-gradient(135deg, #bff5ff 0%, #ffffff 100%);
}

.card-hover {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 115, 136, 0.1), 0 4px 6px -2px rgba(0, 115, 136, 0.05);
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #008dc3;
  transition: all 0.3s ease;
}

/* Enhanced UI styles */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-pulse-slow {
  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.shadow-blue {
  box-shadow: 0 4px 14px 0 rgba(0, 141, 195, 0.2);
}

.shadow-blue-lg {
  box-shadow: 0 10px 25px -5px rgba(0, 141, 195, 0.3), 0 8px 10px -6px rgba(0, 141, 195, 0.2);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #008dc3 0%, #007388 100%);
}

/* Card with hover effect */
.hover-card {
  transition: all 0.3s ease;
}

.hover-card:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 141, 195, 0.3);
}

/* Animated border */
.animated-border {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

.animated-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #008dc3, #00c2ff, #007388, #008dc3);
  background-size: 400% 400%;
  z-index: -1;
  border-radius: 0.6rem;
  animation: border-animation 6s ease infinite;
}

@keyframes border-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Button touch effect */
.btn-touch-effect {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-touch-effect:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* Ripple effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

@keyframes rise-and-fade {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translateY(-40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.8);
  }
}

.rise-and-fade {
  animation: rise-and-fade 1.5s ease-out forwards;
}
[V0_FILE]typescriptreact:file="components/TaskList.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { format } from "date-fns"
import { FileText, Mail, ChevronDown, ChevronUp, GraduationCapIcon as Graduation, Plus } from "lucide-react"
import AddTaskForm from "./AddTaskForm"
import { toggleTaskCompletion, type Task } from "@/lib/data/mockData"

type TaskListProps = {
  initialTasks: Task[]
  onNewTaskNotification?: (task: Task) => void
}

type SortOption = "priority" | "deadline" | "course"

// Define the Course type
type Course = {
  code: string
  color: string
}

type EmojiAnimation = {
  id: string
  x: number
  y: number
}

export default function TaskList({ initialTasks, onNewTaskNotification }: TaskListProps) {
  const [tasks, setTasks] = useState<Task[]>(initialTasks)
  const [sortBy, setSortBy] = useState<SortOption>("deadline")
  const [expandedTasks, setExpandedTasks] = useState<Record<string, boolean>>({})
  const [showAddTaskForm, setShowAddTaskForm] = useState(false)
  const [emojiAnimations, setEmojiAnimations] = useState<EmojiAnimation[]>([])

useEffect(() => {
    // Check for new tasks and trigger notifications
    const newTasks = initialTasks.filter((task) => task.is_new)
    if (newTasks.length > 0 && onNewTaskNotification) {
      newTasks.forEach((task) => {
        onNewTaskNotification(task)
      })
    }

setTasks(initialTasks)
  }, [initialTasks, onNewTaskNotification])

const handleToggleTaskCompletion = async (id: string, completed: boolean, event: React.MouseEvent) => {
    try {
      await toggleTaskCompletion(id, !completed)
      setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !completed } : task)))

// Show emoji animation when completing a task
      if (!completed) {
        // Get the position of the click to place the emoji
        const rect = (event.target as HTMLElement).getBoundingClientRect()
        const x = rect.left
        const y = rect.top

// Create a new emoji animation
        const newAnimation = {
          id: `emoji-${Date.now()}`,
          x,
          y,
        }

setEmojiAnimations((prev) => [...prev, newAnimation])

// Remove the animation after it completes
        setTimeout(() => {
          setEmojiAnimations((prev) => prev.filter((animation) => animation.id !== newAnimation.id))
        }, 1500)
      }
    } catch (error) {
      console.error("Error toggling task completion:", error)
    }
  }

const toggleTaskExpanded = (id: string) => {
    setExpandedTasks((prev) => ({
      ...prev,
      [id]: !prev[id],
    }))
  }

const handleAddTask = (newTask: Omit<Task, "id" | "completed" | "is_new">) => {
    const task: Task = {
      ...newTask,
      id: `manual-${Date.now()}`,
      completed: false,
      is_new: true,
    }

setTasks((prev) => [...prev, task])

if (onNewTaskNotification) {
      onNewTaskNotification(task)
    }
  }

// Sort tasks based on selected option
  const sortTasks = (tasks: Task[], sortOption: SortOption) => {
    const sortedTasks = [...tasks]

// First sort by the selected option
    const sortedByOption = sortedTasks.sort((a, b) => {
      // First check completion status to move completed tasks to the end
      if (a.completed !== b.completed) {
        return a.completed ? 1 : -1
      }

// Then sort by the selected option
      switch (sortOption) {
        case "priority":
          const priorityOrder = { High: 1, Medium: 2, Low: 3 }
          const aPriority = priorityOrder[a.priority as keyof typeof priorityOrder] || 4
          const bPriority = priorityOrder[b.priority as keyof typeof priorityOrder] || 4
          return aPriority - bPriority
        case "deadline":
          return new Date(a.due_date).getTime() - new Date(b.due_date).getTime()
        case "course":
          const aCourse = a.courses?.code || ""
          const bCourse = b.courses?.code || ""
          return aCourse.localeCompare(bCourse)
        default:
          return 0
      }
    })

return sortedByOption
  }

const getPriorityColor = (priority: string | null) => {
    if (!priority) return "bg-gray-400"

const getSourceIcon = (source?: string | null) => {
    if (!source) return null

switch (source.toLowerCase()) {
      case "blackboard":
        return <FileText size={16} className="text-gray-800" />
      case "email":
      case "outlook":
        return <Mail size={16} className="text-gray-600" />
      case "edugate":
        return <Graduation size={16} className="text-gray-700" />
      default:
        return null
    }
  }

const getCourseColor = (course?: Course | null) => {
    if (!course || !course.color) return "text-gray-600 border-gray-300"
    return `text-[${course.color}] border-[${course.color}]`
  }

const getFormattedDescription = (task: Task) => {
    let description = task.description || ""
    if (task.points) {
      description = `Worth ${task.points} points. ${description}`
    }
    return description
  }

return (
    <div className="h-full flex flex-col">
      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center space-x-2">
          <button
            onClick={() => setShowAddTaskForm(true)}
            className="flex items-center text-xs bg-primary text-white px-3 py-1.5 rounded-full hover:bg-primary-dark transition-colors shadow-sm"
          >
            <Plus size={14} className="mr-1" />
            Add Task
          </button>
        </div>
        <select
          value={sortBy}
          onChange={(e) => setSortBy(e.target.value as SortOption)}
          className="text-xs border rounded-full px-3 py-1.5 border-primary-light text-secondary-dark focus:outline-none focus:ring-1 focus:ring-primary"
        >
          <option value="deadline">Due Date</option>
          <option value="priority">Priority</option>
          <option value="course">Course</option>
        </select>
      </div>

{showAddTaskForm && (
        <div className="mb-4">
          <AddTaskForm onAddTask={handleAddTask} onClose={() => setShowAddTaskForm(false)} />
        </div>
      )}

<div className="flex-1 overflow-y-auto">
        <ul className="space-y-3 pb-16">
          {sortTasks(tasks, sortBy).map((task) => (
            <li
              key={task.id}
              className={`flex flex-col p-3 border rounded-lg ${task.completed ? "bg-gray-50" : "bg-white"} ${
                task.is_new ? "ring-2 ring-primary-light" : ""
              } shadow-sm card-hover`}
            >
              <div className="flex items-center">
                <input
                  type="checkbox"
                  checked={task.completed}
                  onChange={(e) => handleToggleTaskCompletion(task.id, task.completed, e)}
                  className="h-4 w-4 mr-2 rounded border-gray-300 text-primary focus:ring-primary"
                />
                <div className="flex-1">
                  <div className="flex items-center gap-1">
                    {getSourceIcon(task.source)}
                    <p
                      className={`font-medium text-sm ${task.completed ? "line-through text-gray-400" : "text-secondary-dark"}`}
                    >
                      {task.title}
                    </p>
                    {task.is_new && (
                      <span className="text-xs bg-primary-light px-1.5 py-0.5 rounded-full text-secondary-dark ml-1">
                        New
                      </span>
                    )}
                  </div>
                  <p className="text-xs text-gray-500">Due: {format(new Date(task.due_date), "MMM d")}</p>
                </div>
                <div className="flex flex-col items-end gap-2">
                  <span
                    className={`px-2 py-0.5 text-xs font-semibold rounded-full text-white ${getPriorityColor(task.priority)}`}
                  >
                    {task.priority}
                  </span>
                  {task.courses && (
                    <span
                      className="text-xs px-2 py-0.5 border rounded-full"
                      style={{
                        color: task.courses.color || "#666",
                        borderColor: task.courses.color || "#ddd",
                      }}
                    >
                      {task.courses.code}
                    </span>
                  )}
                </div>
                <button
                  onClick={() => toggleTaskExpanded(task.id)}
                  className="ml-2 text-primary hover:text-primary-dark"
                >
                  {expandedTasks[task.id] ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                </button>
              </div>

{/* Description section (expandable) */}
              {expandedTasks[task.id] && (
                <div className="mt-2 ml-6 pl-2 border-l-2 border-primary-light">
                  <p className="text-xs text-gray-600">{getFormattedDescription(task)}</p>
                </div>
              )}
            </li>
          ))}
        </ul>
      </div>

{/* Emoji Animations */}
      {emojiAnimations.map((animation) => (
        <div
          key={animation.id}
          className="fixed z-50 pointer-events-none"
          style={{
            left: `${animation.x}px`,
            top: `${animation.y}px`,
          }}
        >
          <div className="text-4xl rise-and-fade">👏</div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/SplashScreen.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"

type SplashScreenProps = {
  onComplete: () => void
  duration?: number
}

export default function SplashScreen({ onComplete, duration = 2500 }: SplashScreenProps) {
  const [progress, setProgress] = useState(0)

useEffect(() => {
    const startTime = Date.now()
    const endTime = startTime + duration

const updateProgress = () => {
      const now = Date.now()
      const elapsed = now - startTime
      const newProgress = Math.min(elapsed / duration, 1)
      setProgress(newProgress)

if (now < endTime) {
        requestAnimationFrame(updateProgress)
      } else {
        onComplete()
      }
    }

const animationId = requestAnimationFrame(updateProgress)
    return () => cancelAnimationFrame(animationId)
  }, [duration, onComplete])

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="bg-white w-full max-w-[390px] h-[85vh] flex flex-col items-center justify-center rounded-3xl shadow-lg overflow-hidden">
        <div className="animate-float">
          <Image src="/images/eduflow-logo.png" alt="EduFlow Logo" width={120} height={120} priority />
        </div>
        <h1 className="mt-6 text-3xl font-bold text-gradient">EduFlow</h1>
        <p className="mt-2 text-gray-500">Student Time Management</p>

{/* Progress bar */}
        <div className="mt-8 h-1 w-48 rounded-full bg-gray-200">
          <div
            className="h-full rounded-full bg-primary transition-all duration-300 ease-out"
            style={{ width: `${progress * 100}%` }}
          />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/CalendarGrid.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import {
  format,
  parseISO,
  addDays,
  startOfWeek,
  startOfMonth,
  isSameMonth,
  addMonths,
  isSameWeek,
  isToday,
} from "date-fns"
import { ChevronLeft, ChevronRight, CalendarIcon } from "lucide-react"
import DayCalendarView from "./DayCalendarView"

type Event = {
  id: string
  title: string
  start: string
  end: string
  type: string
  courses?: {
    color: string | null
    code?: string | null
  } | null
}

type CalendarGridProps = {
  events: Event[]
}

type CalendarView = "daily" | "weekly" | "monthly"

export default function CalendarGrid({ events }: CalendarGridProps) {
  const [currentDate, setCurrentDate] = useState(new Date("2025-05-15")) // Set to May 2025 to show exam period
  const [view, setView] = useState<CalendarView>("monthly") // Default to monthly view
  const [hoveredEvent, setHoveredEvent] = useState<Event | null>(null)
  const [hoverPosition, setHoverPosition] = useState({ x: 0, y: 0 })

// Get background color based on event type and course color
  const getEventColor = (event: Event) => {
    // If the event has a course with a color, use that color
    if (event.courses?.color) {
      return `bg-[${event.courses.color}] text-white`
    }

// Otherwise, use the default colors based on event type
    switch (event.type.toLowerCase()) {
      case "class":
        return "bg-blue-500 text-white"
      case "exam":
        return "bg-red-400 text-white"
      case "study":
        return "bg-green-400 text-gray-800"
      default:
        return "bg-gray-200"
    }
  }

// Navigate to previous period
  const navigatePrevious = () => {
    if (view === "daily") {
      setCurrentDate(addDays(currentDate, -1))
    } else if (view === "weekly") {
      setCurrentDate(addDays(currentDate, -7))
    } else {
      setCurrentDate(addMonths(currentDate, -1))
    }
  }

// Navigate to next period
  const navigateNext = () => {
    if (view === "daily") {
      setCurrentDate(addDays(currentDate, 1))
    } else if (view === "weekly") {
      setCurrentDate(addDays(currentDate, 7))
    } else {
      setCurrentDate(addMonths(currentDate, 1))
    }
  }

// Navigate to today
  const navigateToday = () => {
    setCurrentDate(new Date())
  }

// Render the appropriate calendar view
  const renderCalendarView = () => {
    switch (view) {
      case "daily":
        return renderDailyView()
      case "weekly":
        return renderWeeklyView()
      case "monthly":
        return renderMonthlyView()
      default:
        return renderWeeklyView()
    }
  }

const handleEventMouseEnter = (event: Event, e: React.MouseEvent) => {
    setHoveredEvent(event)
    setHoverPosition({ x: e.clientX, y: e.clientY })
  }

const handleEventMouseLeave = () => {
    setHoveredEvent(null)
  }

// Daily view renderer
  const renderDailyView = () => {
    return <DayCalendarView events={events} initialDate={currentDate} />
  }

// Helper function to get default color based on event type
  const getDefaultColor = (type: string) => {
    switch (type.toLowerCase()) {
      case "class":
        return "#008dc3" // Primary blue
      case "exam":
        return "#ff3a00" // Warning orange/red
      case "study":
        return "#01c200" // Success green
      default:
        return "#cccccc"
    }
  }

// Helper function to get text color
  const getTextColor = (type: string, courseColor: string | null) => {
    if (courseColor) {
      // For custom course colors, always use white text
      return "#ffffff"
    }

switch (type.toLowerCase()) {
      case "study":
        return "#333333" // Dark text for light green background
      default:
        return "#ffffff" // White text for other backgrounds
    }
  }

// Weekly view renderer - Improved with vertical timings and horizontal days
  const renderWeeklyView = () => {
    // Get current week's Sunday as the start date
    const startDate = startOfWeek(currentDate)

// Generate days of the week (Sun-Sat)
    const weekDays = Array.from({ length: 7 }, (_, i) => {
      const date = addDays(startDate, i)
      return {
        date,
        dayName: format(date, "EEE").toUpperCase(),
        dayNumber: format(date, "d"),
        isToday: isToday(date),
      }
    })

// Generate time slots (8:00 - 18:00)
    const timeSlots = Array.from({ length: 11 }, (_, i) => {
      const hour = i + 8
      return {
        hour,
        label: format(new Date().setHours(hour, 0, 0, 0), "h a"),
      }
    })

// Filter events for the current week
    const weekEvents = events.filter((event) => {
      const eventDate = parseISO(event.start)
      return isSameWeek(eventDate, currentDate)
    })

// Group events by day and hour
    const eventsByDayAndHour: Record<string, Event[]> = {}
    weekEvents.forEach((event) => {
      const eventDate = parseISO(event.start)
      const dayIndex = eventDate.getDay() // 0 for Sunday, 6 for Saturday
      const hour = eventDate.getHours()
      const key = `${dayIndex}-${hour}`

if (!eventsByDayAndHour[key]) {
        eventsByDayAndHour[key] = []
      }
      eventsByDayAndHour[key].push(event)
    })

return (
      <div className="h-[calc(100vh-140px)] overflow-auto">
        <div className="text-center font-medium border-b p-2 bg-gray-50">
          {format(startDate, "MMM d")} - {format(addDays(startDate, 6), "MMM d")}
        </div>

<div className="flex flex-col">
          {/* Day headers */}
          <div className="flex border-b sticky top-0 bg-white z-10">
            <div className="w-16 p-2 text-xs text-gray-500 flex-shrink-0 border-r">Time</div>
            {weekDays.map((day) => (
              <div key={day.dayName} className="flex-1 p-2 text-center border-r">
                <div className="text-xs text-gray-500">{day.dayName}</div>
                <div
                  className={`text-lg font-medium ${
                    day.isToday
                      ? "rounded-full bg-primary text-white w-8 h-8 flex items-center justify-center mx-auto"
                      : ""
                  }`}
                >
                  {day.dayNumber}
                </div>
              </div>
            ))}
          </div>

{/* Time slots and events */}
          {timeSlots.map((slot) => (
            <div key={slot.hour} className="flex border-b min-h-16">
              <div className="w-16 p-2 text-xs text-gray-500 flex-shrink-0 flex items-center justify-center border-r">
                {slot.label}
              </div>

{/* Day columns */}
              {weekDays.map((day, dayIndex) => {
                const key = `${dayIndex}-${slot.hour}`
                const cellEvents = eventsByDayAndHour[key] || []

return (
                  <div key={`${dayIndex}-${slot.hour}`} className="flex-1 border-r relative min-h-16">
                    {cellEvents.map((event) => {
                      const startTime = parseISO(event.start)
                      const endTime = parseISO(event.end)

// Calculate position within the hour
                      const minuteOffset = startTime.getMinutes() / 60
                      const topOffset = minuteOffset * 100

// Calculate duration in hours
                      const durationHours = (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60)

return (
                        <div
                          key={event.id}
                          className="absolute left-0 right-0 mx-1 rounded overflow-visible shadow-sm p-2 transition-transform duration-200 hover:scale-105 hover:z-20 cursor-pointer"
                          style={{
                            top: `${topOffset}%`,
                            height: `${Math.min(durationHours * 100, 95)}%`,
                            minHeight: "24px", // Ensure minimum height for visibility
                            zIndex: 5,
                            backgroundColor: event.courses?.color || getDefaultColor(event.type),
                            color: getTextColor(event.type, event.courses?.color),
                          }}
                          onMouseEnter={(e) => handleEventMouseEnter(event, e)}
                          onMouseLeave={handleEventMouseLeave}
                        >
                          <div className="font-medium text-xs truncate">{event.title}</div>
                          <div className="text-xs truncate">
                            {format(startTime, "h:mm")} – {format(endTime, "h:mm")}
                          </div>
                          {event.courses?.code && (
                            <div className="text-xs mt-1 font-semibold truncate">{event.courses.code}</div>
                          )}
                        </div>
                      )
                    })}
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </div>
    )
  }

// Monthly view renderer
  const renderMonthlyView = () => {
    // Get first day of the month
    const firstDayOfMonth = startOfMonth(currentDate)

// Get the first day of the first week (might be in previous month)
    const startDate = startOfWeek(firstDayOfMonth, { weekStartsOn: 0 }) // Sunday start

// Generate 6 weeks (42 days) to ensure we cover the month
    const days = Array.from({ length: 42 }, (_, i) => {
      const date = addDays(startDate, i)
      return {
        date,
        dayNumber: format(date, "d"),
        isCurrentMonth: isSameMonth(date, currentDate),
        isToday: isToday(date),
      }
    })

// Filter events for the visible dates
    const visibleEvents = events.filter((event) => {
      const eventDate = parseISO(event.start)
      return eventDate >= startDate && eventDate <= addDays(startDate, 41)
    })

// Group events by date
    const eventsByDate: Record<string, Event[]> = {}
    visibleEvents.forEach((event) => {
      const dateKey = format(parseISO(event.start), "yyyy-MM-dd")
      if (!eventsByDate[dateKey]) {
        eventsByDate[dateKey] = []
      }
      eventsByDate[dateKey].push(event)
    })

return (
      <div className="h-[calc(100vh-140px)]">
        <div className="text-center font-medium border-b p-2 bg-gray-50">{format(currentDate, "MMMM yyyy")}</div>

<div className="grid grid-cols-7 h-[calc(100%-40px)]">
          {/* Day headers */}
          {["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map((day) => (
            <div key={day} className="text-center font-medium p-1 border-b text-xs text-gray-500">
              {day}
            </div>
          ))}

{/* Calendar days */}
          {days.map((day, index) => {
            const dateKey = format(day.date, "yyyy-MM-dd")
            const dayEvents = eventsByDate[dateKey] || []

return (
              <div
                key={index}
                className={`border p-1 overflow-hidden ${
                  day.isCurrentMonth ? "bg-white" : "bg-gray-50 text-gray-400"
                } ${day.isToday ? "bg-blue-50" : ""}`}
              >
                <div
                  className={`text-right ${
                    day.isToday
                      ? "bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center ml-auto"
                      : ""
                  }`}
                >
                  {day.dayNumber}
                </div>

{/* Show events */}
                <div className="mt-1 space-y-1">
                  {dayEvents.slice(0, 3).map((event) => (
                    <div
                      key={event.id}
                      className="text-xs truncate rounded px-2 py-1 mb-1 transition-transform duration-200 hover:scale-105 hover:z-10 cursor-pointer"
                      style={{
                        backgroundColor: event.courses?.color || getDefaultColor(event.type),
                        color: getTextColor(event.type, event.courses?.color),
                      }}
                      onMouseEnter={(e) => handleEventMouseEnter(event, e)}
                      onMouseLeave={handleEventMouseLeave}
                    >
                      <div className="flex justify-between">
                        <span>{format(parseISO(event.start), "h:mm")}</span>
                        {event.courses?.code && <span className="font-bold">{event.courses.code}</span>}
                      </div>
                      <div>{event.title}</div>
                    </div>
                  ))}

{dayEvents.length > 3 && (
                    <div className="text-[10px] text-gray-500 font-medium">+{dayEvents.length - 3} more</div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

// Event popup on hover
  const renderEventPopup = () => {
    if (!hoveredEvent) return null

const startTime = parseISO(hoveredEvent.start)
    const endTime = parseISO(hoveredEvent.end)

return (
      <div
        className="fixed z-50 bg-white rounded-lg shadow-lg border border-gray-200 p-3 max-w-xs"
        style={{
          left: `${hoverPosition.x + 10}px`,
          top: `${hoverPosition.y + 10}px`,
        }}
      >
        <h4 className="font-medium text-sm">{hoveredEvent.title}</h4>
        <p className="text-xs text-gray-500 mt-1">
          {format(startTime, "MMM d, h:mm a")} - {format(endTime, "h:mm a")}
        </p>
        {hoveredEvent.courses?.code && (
          <span
            className="inline-block mt-1 text-xs px-2 py-0.5 rounded-full"
            style={{
              backgroundColor: hoveredEvent.courses.color || getDefaultColor(hoveredEvent.type),
              color: "#ffffff",
            }}
          >
            {hoveredEvent.courses.code}
          </span>
        )}
      </div>
    )
  }

return (
    <div className="bg-white rounded-lg shadow h-full flex flex-col">
      <div className="flex justify-between items-center mb-2 px-1">
        <div className="flex items-center space-x-1">
          <button onClick={navigatePrevious} className="p-1 rounded hover:bg-gray-100" aria-label="Previous">
            <ChevronLeft size={18} />
          </button>
          <button onClick={navigateToday} className="p-1 rounded hover:bg-gray-100" aria-label="Today">
            <CalendarIcon size={18} />
          </button>
          <button onClick={navigateNext} className="p-1 rounded hover:bg-gray-100" aria-label="Next">
            <ChevronRight size={18} />
          </button>
        </div>

<div className="flex items-center space-x-1">
          <button
            onClick={() => setView("daily")}
            className={`px-2 py-1 rounded text-xs ${view === "daily" ? "bg-primary text-white" : "bg-gray-200"}`}
          >
            Day
          </button>
          <button
            onClick={() => setView("weekly")}
            className={`px-2 py-1 rounded text-xs ${view === "weekly" ? "bg-primary text-white" : "bg-gray-200"}`}
          >
            Week
          </button>
          <button
            onClick={() => setView("monthly")}
            className={`px-2 py-1 rounded text-xs ${view === "monthly" ? "bg-primary text-white" : "bg-gray-200"}`}
          >
            Month
          </button>
        </div>
      </div>

<div className="flex-grow overflow-auto">{renderCalendarView()}</div>
      {hoveredEvent && renderEventPopup()}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/data/mockData.ts" isEdit="true" isQuickEdit="true"
// Types
export type Task = {
  id: string
  title: string
  description: string | null
  due_date: string
  priority: string | null
  completed: boolean
  course_id: string | null
  source: string | null
  points: number | null
  is_new: boolean
  courses?: Course | null
}

export type Event = {
  id: string
  title: string
  start: string
  end: string
  type: string
  location?: string
  description?: string
  course_id?: string
  courses?: Course | null
}

export type Course = {
  id: string
  code: string
  name: string
  description: string | null
  color: string | null
}

export type Profile = {
  id: string
  full_name: string | null
  student_id: string | null
  program: string | null
  email: string | null
  avatar_url: string | null
}

export type Notification = {
  id: string
  title: string
  message: string
  related_task_id: string | null
  related_event_id: string | null
  is_read: boolean
  created_at: string
}

// Mock data with unique colors for each course
const mockCourses: Course[] = [
  {
    id: "1",
    code: "CSC311",
    name: "Design & Analysis of Algorithms",
    description: "Study of algorithm design techniques and analysis of algorithm efficiency",
    color: "#008dc3", // Primary blue
  },
  {
    id: "6",
    code: "CENX453",
    name: "Digital Control & Robotics",
    description: "Introduction to digital control systems and robotics",
    color: "#007388", // Secondary teal
  },
  {
    id: "7",
    code: "CENX490",
    name: "Engineering Design & Project Management",
    description: "Capstone design project and project management principles",
    color: "#01c200", // Success green
  },
  {
    id: "8",
    code: "CENX441",
    name: "Computer Networks",
    description: "Fundamentals of computer networking and protocols",
    color: "#ff3a00", // Warning orange/red
  },
  {
    id: "9",
    code: "EE310",
    name: "Microelectronic Devices and Circuits",
    description: "Study of semiconductor devices and circuit design",
    color: "#9c27b0", // Purple
  },
  {
    id: "10",
    code: "IC100",
    name: "Prophet's Biography",
    description: "Study of the Prophet's life and teachings",
    color: "#ff9800", // Orange
  },
]

const mockTasks: Task[] = [
  {
    id: "1",
    title: "CSC311 HW4",
    description: "Complete exercises 4.1-4.5 on algorithm complexity analysis. Submit PDF with solutions.",
    due_date: "2025-05-01T23:59:00Z",
    priority: "High",
    completed: false,
    course_id: "1",
    source: "Blackboard",
    points: 10,
    is_new: false,
    courses: mockCourses[0],
  },
  {
    id: "tutorial6",
    title: "Tutorial #6 Assignment",
    description:
      "Complete the tutorial assignment for CEN453 Digital Control & Robotics. Refer to the attached document from Dr. Mansour Al-Sulaiman.",
    due_date: "2025-04-30T23:59:00Z",
    priority: "High",
    completed: false,
    course_id: "6",
    source: "Outlook",
    points: 15,
    is_new: true,
    courses: mockCourses[1],
  },
  {
    id: "exam1",
    title: "Prepare for CENX 490 Final",
    description:
      "Review all lecture notes, practice problems, and textbook chapters for the Engineering Design & Project Management final exam. Worth 30% of final grade.",
    due_date: "2025-05-19T23:59:00Z",
    priority: "High",
    completed: false,
    course_id: "7",
    source: null,
    points: 30,
    is_new: false,
    courses: mockCourses[2],
  },
  {
    id: "exam2",
    title: "Prepare for CSC 311 Final",
    description:
      "Study algorithm design techniques, complexity analysis, and all topics covered in class. Complete practice exams. Final exam worth 40% of grade.",
    due_date: "2025-05-14T23:59:00Z",
    priority: "High",
    completed: false,
    course_id: "1",
    source: null,
    points: 40,
    is_new: false,
    courses: mockCourses[0],
  },
  {
    id: "exam3",
    title: "Prepare for CENX 441 Final",
    description:
      "Review networking protocols, architecture models, and security concepts for the Computer Networks final exam. Worth 35% of final grade.",
    due_date: "2025-05-29T23:59:00Z",
    priority: "High",
    completed: false,
    course_id: "8",
    source: null,
    points: 35,
    is_new: false,
    courses: mockCourses[3],
  },
  {
    id: "exam4",
    title: "Prepare for EE 310 Final",
    description:
      "Study semiconductor physics, circuit analysis, and device characteristics for the Microelectronic Devices and Circuits exam. Worth 45% of final grade.",
    due_date: "2025-05-19T23:59:00Z",
    priority: "High",
    completed: false,
    course_id: "9",
    source: null,
    points: 45,
    is_new: false,
    courses: mockCourses[4],
  },
  {
    id: "exam5",
    title: "Prepare for IC 100 Final",
    description:
      "Review all course materials on the Prophet's biography, key events, and historical context. Worth 25% of final grade.",
    due_date: "2025-05-12T23:59:00Z",
    priority: "Medium",
    completed: false,
    course_id: "10",
    source: null,
    points: 25,
    is_new: false,
    courses: mockCourses[5],
  },
  {
    id: "cenx453-project",
    title: "CENX453 Project (Build a Robot)",
    description: "Complete the robot building project for Digital Control & Robotics course.",
    due_date: "2025-05-03T23:59:00Z",
    priority: "Medium",
    completed: false,
    course_id: "6", // CENX453 course ID
    source: "Manual",
    points: 25,
    is_new: true,
    courses: mockCourses[1], // CENX453 course
  },
  {
    id: "ic100-hw",
    title: "IC100 HW (Finish Chapter 7,8,9,10)",
    description: "Complete homework assignments covering chapters 7, 8, 9, and 10 for Prophet's Biography course.",
    due_date: "2025-05-05T23:59:00Z",
    priority: "Medium",
    completed: false,
    course_id: "10", // IC100 course ID
    source: "Manual",
    points: 15,
    is_new: true,
    courses: mockCourses[5], // IC100 course
  },
  {
    id: "cenx490-project",
    title: "CENX490 Project (Report on Engineering Design)",
    description:
      "Complete the engineering design report on the topic of Knee Brace for the Engineering Design & Project Management course.",
    due_date: "2025-05-25T23:59:00Z",
    priority: "Medium",
    completed: false,
    course_id: "7", // CENX490 course ID
    source: "Manual",
    points: 30,
    is_new: true,
    courses: mockCourses[2], // CENX490 course
  },
]

const mockEvents: Event[] = [
  {
    id: "a",
    title: "CSC311 Lecture",
    start: "2025-04-28T08:00:00",
    end: "2025-04-28T09:50:00",
    type: "class",
    course_id: "1",
    courses: mockCourses[0],
  },
  {
    id: "b",
    title: "Study Session: HW4",
    start: "2025-04-28T10:00:00",
    end: "2025-04-28T11:00:00",
    type: "study",
    course_id: "1",
    courses: mockCourses[0],
  },
  {
    id: "tutorial6",
    title: "CEN453 Tutorial #6",
    start: "2025-04-24T12:30:00",
    end: "2025-04-24T14:00:00",
    type: "class",
    course_id: "6",
    courses: mockCourses[1],
  },
  {
    id: "exam1",
    title: "CENX 490 Final Exam",
    start: "2025-05-20T08:00:00",
    end: "2025-05-20T11:00:00",
    type: "exam",
    course_id: "7",
    courses: mockCourses[2],
  },
  {
    id: "exam2",
    title: "CSC 311 Final Exam",
    start: "2025-05-15T08:00:00",
    end: "2025-05-15T11:00:00",
    type: "exam",
    course_id: "1",
    courses: mockCourses[0],
  },
  {
    id: "exam3",
    title: "CENX 441 Final Exam",
    start: "2025-05-30T08:00:00",
    end: "2025-05-30T11:00:00",
    type: "exam",
    course_id: "8",
    courses: mockCourses[3],
  },
  {
    id: "exam4",
    title: "EE 310 Final Exam",
    start: "2025-05-20T13:00:00",
    end: "2025-05-20T16:00:00",
    type: "exam",
    course_id: "9",
    courses: mockCourses[4],
  },
  {
    id: "exam5",
    title: "IC 100 Final Exam",
    start: "2025-05-13T13:00:00",
    end: "2025-05-13T16:00:00",
    type: "exam",
    course_id: "10",
    courses: mockCourses[5],
  },
  {
    id: "study1",
    title: "CENX 490 Study",
    start: "2025-05-18T14:00:00",
    end: "2025-05-18T17:00:00",
    type: "study",
    course_id: "7",
    courses: mockCourses[2],
  },
  {
    id: "study2",
    title: "CSC 311 Study",
    start: "2025-05-13T14:00:00",
    end: "2025-05-13T17:00:00",
    type: "study",
    course_id: "1",
    courses: mockCourses[0],
  },
  {
    id: "cenx453-project-work",
    title: "Work on CENX453 Robot Project",
    start: "2025-05-01T15:00:00",
    end: "2025-05-01T17:00:00",
    type: "study",
    course_id: "6",
    courses: mockCourses[1],
  },
  {
    id: "ic100-hw-work",
    title: "IC100 Homework Session",
    start: "2025-05-03T10:00:00",
    end: "2025-05-03T12:00:00",
    type: "study",
    course_id: "10",
    courses: mockCourses[5],
  },
  {
    id: "cenx490-project-work1",
    title: "CENX490 Knee Brace Research",
    start: "2025-05-20T13:00:00",
    end: "2025-05-20T15:00:00",
    type: "study",
    course_id: "7",
    courses: mockCourses[2],
  },
  {
    id: "cenx490-project-work2",
    title: "CENX490 Project Report Writing",
    start: "2025-05-23T14:00:00",
    end: "2025-05-23T17:00:00",
    type: "study",
    course_id: "7",
    courses: mockCourses[2],
  },
  {
    id: "csc311-hw4-work",
    title: "Work on CSC311 HW4",
    start: "2025-04-29T16:00:00",
    end: "2025-04-29T18:00:00",
    type: "study",
    course_id: "1",
    courses: mockCourses[0],
  },
  {
    id: "tutorial6-assignment-work",
    title: "Work on Tutorial #6 Assignment",
    start: "2025-04-28T15:00:00",
    end: "2025-04-28T17:00:00",
    type: "study",
    course_id: "6",
    courses: mockCourses[1],
  },
  {
    id: "cenx441-study-session",
    title: "CENX441 Networks Study Session",
    start: "2025-05-27T14:00:00",
    end: "2025-05-27T16:00:00",
    type: "study",
    course_id: "8",
    courses: mockCourses[3],
  },
  {
    id: "ee310-circuit-analysis",
    title: "EE310 Circuit Analysis Practice",
    start: "2025-05-17T10:00:00",
    end: "2025-05-17T12:00:00",
    type: "study",
    course_id: "9",
    courses: mockCourses[4],
  },
  {
    id: "ic100-review-session",
    title: "IC100 Review Session",
    start: "2025-05-10T13:00:00",
    end: "2025-05-10T15:00:00",
    type: "study",
    course_id: "10",
    courses: mockCourses[5],
  },
]

const mockNotifications: Notification[] = [
  {
    id: "1",
    title: "New Assignment Posted",
    message: "CSC311: HW5 has been posted. Due on May 6, 2025.",
    related_task_id: "1",
    related_event_id: null,
    is_read: false,
    created_at: new Date(Date.now() - 1000 * 60 * 30).toISOString(), // 30 minutes ago
  },
  {
    id: "2",
    title: "Upcoming Deadline",
    message: "Tutorial #6 Assignment is due soon!",
    related_task_id: "tutorial6",
    related_event_id: null,
    is_read: false,
    created_at: new Date(Date.now() - 1000 * 60 * 120).toISOString(), // 2 hours ago
  },
  {
    id: "3",
    title: "New Email from Professor",
    message: "Dr. Mansour Al-Sulaiman has sent you an email about Tutorial #6.",
    related_task_id: "tutorial6",
    related_event_id: null,
    is_read: false,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 5).toISOString(), // 5 hours ago
  },
  {
    id: "4",
    title: "Class Reminder",
    message: "CSC311 Lecture starts in 30 minutes.",
    related_task_id: null,
    related_event_id: "a",
    is_read: true,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(), // 1 day ago
  },
  {
    id: "5",
    title: "Grade Posted",
    message: "Your grade for CS311 Quiz 2 has been posted.",
    related_task_id: null,
    related_event_id: null,
    is_read: true,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(), // 2 days ago
  },
]

const mockProfile: Profile = {
  id: "user1",
  full_name: "Yazan Hussain",
  student_id: "443105631",
  program: "Computer Engineering",
  email: "443105631@student.ksu.edu.sa",
  avatar_url: null,
}

// Helper function to generate a unique ID
export function generateId(): string {
  return Math.random().toString(36).substring(2, 15)
}

// Mock API functions
export async function getTasks(): Promise<Task[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockTasks)
    }, 500)
  })
}

export async function getTasksDueToday(): Promise<Task[]> {
  return new Promise((resolve) => {
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    const tomorrow = new Date(today)
    tomorrow.setDate(tomorrow.getDate() + 1)

const dueTodayTasks = mockTasks.filter((task) => {
      const dueDate = new Date(task.due_date)
      return dueDate >= today && dueDate < tomorrow && !task.completed
    })

setTimeout(() => {
      resolve(dueTodayTasks)
    }, 500)
  })
}

// Update the auto priority calculation to be based on 60% deadline and 40% difficulty

// Add a function to calculate priority based on deadline and difficulty
export function calculatePriority(dueDate: string, difficulty = 3): string {
  const now = new Date()
  const due = new Date(dueDate)
  const diffTime = due.getTime() - now.getTime()
  const diffDays = diffTime / (1000 * 60 * 60 * 24)

// Calculate deadline score (0-10)
  // 0 days = 10, 7+ days = 0
  const deadlineScore = Math.max(0, Math.min(10, 10 - diffDays))

// Difficulty is assumed to be 1-5
  // Convert to 0-10 scale
  const difficultyScore = (difficulty - 1) * 2.5

// Calculate weighted score (60% deadline, 40% difficulty)
  const priorityScore = deadlineScore * 0.6 + difficultyScore * 0.4

// Convert score to priority level
  if (priorityScore >= 7) {
    return "High"
  } else if (priorityScore >= 4) {
    return "Medium"
  } else {
    return "Low"
  }
}

// Update the createTask function to use the new priority calculation
export async function createTask(task: Omit<Task, "id" | "is_new">): Promise<Task> {
  return new Promise((resolve) => {
    // If priority is not specified, calculate it
    if (!task.priority) {
      // Default difficulty is 3 (medium)
      const difficulty = 3
      task.priority = calculatePriority(task.due_date, difficulty)
    }

const newTask: Task = {
      ...task,
      id: generateId(),
      is_new: true,
    }

mockTasks.push(newTask)

setTimeout(() => {
      resolve(newTask)
    }, 500)
  })
}

export async function updateTask(id: string, updates: Partial<Task>): Promise<Task> {
  return new Promise((resolve, reject) => {
    const taskIndex = mockTasks.findIndex((task) => task.id === id)

if (taskIndex === -1) {
      reject(new Error("Task not found"))
      return
    }

mockTasks[taskIndex] = { ...mockTasks[taskIndex], ...updates }

setTimeout(() => {
      resolve(mockTasks[taskIndex])
    }, 500)
  })
}

export async function deleteTask(id: string): Promise<boolean> {
  return new Promise((resolve) => {
    const taskIndex = mockTasks.findIndex((task) => task.id === id)

if (taskIndex !== -1) {
      mockTasks.splice(taskIndex, 1)
    }

setTimeout(() => {
      resolve(true)
    }, 500)
  })
}

export async function toggleTaskCompletion(id: string, completed: boolean): Promise<Task> {
  return updateTask(id, { completed })
}

export async function getEvents(): Promise<Event[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockEvents)
    }, 500)
  })
}

export async function getEventsInRange(startDate: Date, endDate: Date): Promise<Event[]> {
  return new Promise((resolve) => {
    const eventsInRange = mockEvents.filter((event) => {
      const eventStart = new Date(event.start)
      const eventEnd = new Date(event.end)
      return eventStart >= startDate && eventEnd <= endDate
    })

setTimeout(() => {
      resolve(eventsInRange)
    }, 500)
  })
}

export async function getCourses(): Promise<Course[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockCourses)
    }, 500)
  })
}

export async function getUserCourses(): Promise<Course[]> {
  return getCourses()
}

export async function getProfile(): Promise<Profile> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockProfile)
    }, 500)
  })
}

export async function updateProfile(updates: Partial<Profile>): Promise<Profile> {
  return new Promise((resolve) => {
    Object.assign(mockProfile, updates)

setTimeout(() => {
      resolve(mockProfile)
    }, 500)
  })
}

export async function uploadAvatar(file: File): Promise<Profile> {
  return new Promise((resolve) => {
    // In a real app, we would upload the file to a server
    // For now, we'll just create a fake URL
    const fakeUrl = URL.createObjectURL(file)
    mockProfile.avatar_url = fakeUrl

setTimeout(() => {
      resolve(mockProfile)
    }, 1000)
  })
}

export async function getNotifications(): Promise<Notification[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockNotifications)
    }, 500)
  })
}

export async function getUnreadNotifications(): Promise<Notification[]> {
  return new Promise((resolve) => {
    const unreadNotifications = mockNotifications.filter((notification) => !notification.is_read)

setTimeout(() => {
      resolve(unreadNotifications)
    }, 500)
  })
}

export async function markNotificationAsRead(id: string): Promise<Notification> {
  return new Promise((resolve, reject) => {
    const notificationIndex = mockNotifications.findIndex((notification) => notification.id === id)

if (notificationIndex === -1) {
      reject(new Error("Notification not found"))
      return
    }

mockNotifications[notificationIndex].is_read = true

setTimeout(() => {
      resolve(mockNotifications[notificationIndex])
    }, 500)
  })
}

export async function markAllNotificationsAsRead(): Promise<boolean> {
  return new Promise((resolve) => {
    mockNotifications.forEach((notification) => {
      notification.is_read = true
    })

setTimeout(() => {
      resolve(true)
    }, 500)
  })
}</article></body></html>