[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { PlusCircle } from "lucide-react" import TaskList from "@/components/task-list" import { redirect } from "next/navigation" import { createServerComponentClient } from "@supabase/auth-helpers-nextjs" import { cookies } from "next/headers" export default async function Home() { const supabase = createServerComponentClient({ cookies }) const { data: { session }, } = await supabase.auth.getSession() if (!session) { redirect("/login") } const { data: tasks } = await supabase .from("tasks") .select("*") .eq("user_id", session.user.id) .order("created_at", { ascending: false }) return (

Task Management

Your Tasks Manage your tasks and stay organized

{tasks?.length || 0} tasks total

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Github } from "lucide-react" import { createClientComponentClient } from "@supabase/auth-helpers-nextjs" import { useRouter } from "next/navigation" import { useState } from "react" export default function Login() { const router = useRouter() const supabase = createClientComponentClient() const [loading, setLoading] = useState(false) const handleGithubLogin = async () => { try { setLoading(true) await supabase.auth.signInWithOAuth({ provider: "github", options: { redirectTo: `${window.location.origin}/auth/callback`, }, }) } catch (error) { console.error("Error logging in:", error) } finally { setLoading(false) } } return (

Welcome back Sign in to your account to continue

By signing in, you agree to our Terms of Service and Privacy Policy.

) } [V0_FILE]typescriptreact:file="app/auth/callback/route.ts" isMerged="true" import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs" import { cookies } from "next/headers" import { NextResponse } from "next/server" export async function GET(request: Request) { const requestUrl = new URL(request.url) const code = requestUrl.searchParams.get("code") if (code) { const supabase = createRouteHandlerClient({ cookies }) await supabase.auth.exchangeCodeForSession(code) } // URL to redirect to after sign in process completes return NextResponse.redirect(requestUrl.origin) } [V0_FILE]typescriptreact:file="app/tasks/new/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { CalendarIcon } from "lucide-react" import { useState } from "react" import { createClientComponentClient } from "@supabase/auth-helpers-nextjs" import { useRouter } from "next/navigation" import { cn } from "@/lib/utils" export default function NewTask() { const router = useRouter() const supabase = createClientComponentClient() const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [dueDate, setDueDate] = useState(undefined) const [loading, setLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!title) return try { setLoading(true) const { data: { user }, } = await supabase.auth.getUser() if (!user) { router.push("/login") return } const { error } = await supabase.from("tasks").insert({ title, description, due_date: dueDate?.toISOString(), user_id: user.id, status: "pending", }) if (error) throw error router.push("/") router.refresh() } catch (error) { console.error("Error creating task:", error) } finally { setLoading(false) } } return (

Create New Task Add a new task to your list

Task Title setTitle(e.target.value)} required />

Description

setDescription(e.target.value)}
                rows={4}
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="dueDate" className="text-sm font-medium">
                Due Date
              </label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn("w-full justify-start text-left font-normal", !dueDate && "text-muted-foreground")}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {dueDate ? format(dueDate, "PPP") : "Select a date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                  <Calendar mode="single" selected={dueDate} onSelect={setDueDate} initialFocus />
                </PopoverContent>
              </Popover>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" type="button" onClick={() => router.back()}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !title}>
              {loading ? "Creating..." : "Create Task"}
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/task-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Calendar, Trash2, Edit } from "lucide-react"
import { format } from "date-fns"
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import { useRouter } from "next/navigation"
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"

interface Task {
  id: string
  title: string
  description: string
  due_date: string | null
  status: string
  user_id: string
}

export default function TaskList({ tasks: initialTasks }: { tasks: Task[] }) {
  const router = useRouter()
  const supabase = createClientComponentClient()
  const [tasks, setTasks] = useState<Task[]>(initialTasks)

const handleStatusChange = async (taskId: string, completed: boolean) => {
    try {
      const { error } = await supabase
        .from("tasks")
        .update({ status: completed ? "completed" : "pending" })
        .eq("id", taskId)

if (error) throw error

setTasks(
        tasks.map((task) => (task.id === taskId ? { ...task, status: completed ? "completed" : "pending" } : task)),
      )
    } catch (error) {
      console.error("Error updating task:", error)
    }
  }

const handleDelete = async (taskId: string) => {
    try {
      const { error } = await supabase.from("tasks").delete().eq("id", taskId)

if (error) throw error

setTasks(tasks.filter((task) => task.id !== taskId))
      router.refresh()
    } catch (error) {
      console.error("Error deleting task:", error)
    }
  }

const onDragEnd = async (result: any) => {
    if (!result.destination) return

const items = Array.from(tasks)
    const [reorderedItem] = items.splice(result.source.index, 1)
    items.splice(result.destination.index, 0, reorderedItem)

setTasks(items)

// Here you could update the order in the database if needed
  }

if (tasks.length === 0) {
    return (
      <div className="text-center py-6">
        <p className="text-muted-foreground">No tasks yet. Create your first task!</p>
      </div>
    )
  }

return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="tasks">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-4">
            {tasks.map((task, index) => (
              <Draggable key={task.id} draggableId={task.id} index={index}>
                {(provided) => (
                  <Card
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    className="transition-all hover:shadow-md"
                  >
                    <CardContent className="p-4">
                      <div className="flex items-start gap-3">
                        <Checkbox
                          id={`task-${task.id}`}
                          checked={task.status === "completed"}
                          onCheckedChange={(checked) => handleStatusChange(task.id, checked as boolean)}
                          className="mt-1"
                        />
                        <div className="flex-1">
                          <label
                            htmlFor={`task-${task.id}`}
                            className={`font-medium ${
                              task.status === "completed" ? "line-through text-muted-foreground" : ""
                            }`}
                          >
                            {task.title}
                          </label>
                          {task.description && <p className="mt-1 text-sm text-muted-foreground">{task.description}</p>}
                          {task.due_date && (
                            <div className="flex items-center mt-2 text-xs text-muted-foreground">
                              <Calendar className="mr-1 h-3 w-3" />
                              <span>Due: {format(new Date(task.due_date), "PPP")}</span>
                            </div>
                          )}
                        </div>
                      </div>
                    </CardContent>
                    <CardFooter className="p-2 flex justify-end gap-2 border-t">
                      <Button variant="ghost" size="sm" onClick={() => router.push(`/tasks/${task.id}/edit`)}>
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Edit</span>
                      </Button>
                      <Button variant="ghost" size="sm" onClick={() => handleDelete(task.id)}>
                        <Trash2 className="h-4 w-4" />
                        <span className="sr-only">Delete</span>
                      </Button>
                    </CardFooter>
                  </Card>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  )
}

[V0_FILE]typescriptreact:file="app/tasks/[id]/edit/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"
import { useEffect, useState } from "react"
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import { useRouter } from "next/navigation"
import { cn } from "@/lib/utils"

export default function EditTask({ params }: { params: { id: string } }) {
  const router = useRouter()
  const supabase = createClientComponentClient()
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [dueDate, setDueDate] = useState<Date | undefined>(undefined)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)

useEffect(() => {
    const fetchTask = async () => {
      try {
        const {
          data: { user },
        } = await supabase.auth.getUser()

if (!user) {
          router.push("/login")
          return
        }

const { data: task, error } = await supabase
          .from("tasks")
          .select("*")
          .eq("id", params.id)
          .eq("user_id", user.id)
          .single()

if (error || !task) {
          console.error("Error fetching task:", error)
          router.push("/")
          return
        }

setTitle(task.title)
        setDescription(task.description || "")
        setDueDate(task.due_date ? new Date(task.due_date) : undefined)
      } catch (error) {
        console.error("Error:", error)
      } finally {
        setLoading(false)
      }
    }

fetchTask()
  }, [params.id, router, supabase])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!title) return

try {
      setSaving(true)

const { error } = await supabase
        .from("tasks")
        .update({
          title,
          description,
          due_date: dueDate?.toISOString(),
        })
        .eq("id", params.id)

if (error) throw error

router.push("/")
      router.refresh()
    } catch (error) {
      console.error("Error updating task:", error)
    } finally {
      setSaving(false)
    }
  }

if (loading) {
    return (
      <div className="container mx-auto py-6 px-4 md:px-6">
        <Card className="max-w-2xl mx-auto">
          <CardContent className="p-6">
            <div className="flex items-center justify-center h-40">
              <p>Loading task...</p>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="container mx-auto py-6 px-4 md:px-6">
      <Card className="max-w-2xl mx-auto">
        <CardHeader>
          <CardTitle>Edit Task</CardTitle>
          <CardDescription>Update your task details</CardDescription>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="title" className="text-sm font-medium">
                Task Title
              </label>
              <Input
                id="title"
                placeholder="Enter task title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="description" className="text-sm font-medium">
                Description
              </label>
              <Textarea
                id="description"
                placeholder="Enter task description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={4}
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="dueDate" className="text-sm font-medium">
                Due Date
              </label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn("w-full justify-start text-left font-normal", !dueDate && "text-muted-foreground")}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {dueDate ? format(dueDate, "PPP") : "Select a date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                  <Calendar mode="single" selected={dueDate} onSelect={setDueDate} initialFocus />
                </PopoverContent>
              </Popover>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" type="button" onClick={() => router.back()}>
              Cancel
            </Button>
            <Button type="submit" disabled={saving || !title}>
              {saving ? "Saving..." : "Save Changes"}
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/middleware.ts" isMerged="true"
import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient({ req, res })

const {
    data: { session },
  } = await supabase.auth.getSession()

// If user is not signed in and the current path is not /login,
  // redirect the user to /login
  if (!session && req.nextUrl.pathname !== "/login") {
    const redirectUrl = req.nextUrl.clone()
    redirectUrl.pathname = "/login"
    return NextResponse.redirect(redirectUrl)
  }

// If user is signed in and the current path is /login,
  // redirect the user to /
  if (session && req.nextUrl.pathname === "/login") {
    const redirectUrl = req.nextUrl.clone()
    redirectUrl.pathname = "/"
    return NextResponse.redirect(redirectUrl)
  }

return res
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|auth/callback).*)"],
}

[V0_FILE]typescriptreact:file="app/api/send-reminders/route.ts" isEdit="true" isMerged="true"
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"
import { Resend } from "resend"

// Initialize Resend with your API key
const resend = new Resend(process.env.RESEND_API_KEY)

export async function GET(request: Request) {
  try {
    const supabase = createRouteHandlerClient({ cookies })

// Get tomorrow's date
    const tomorrow = new Date()
    tomorrow.setDate(tomorrow.getDate() + 1)
    tomorrow.setHours(0, 0, 0, 0)

const endOfTomorrow = new Date(tomorrow)
    endOfTomorrow.setHours(23, 59, 59, 999)

// Find tasks due tomorrow
    const { data: tasks, error } = await supabase
      .from("tasks")
      .select("*, profiles(email)")
      .eq("status", "pending")
      .gte("due_date", tomorrow.toISOString())
      .lte("due_date", endOfTomorrow.toISOString())

if (error) {
      throw error
    }

// Send email reminders
    const emailPromises = tasks.map(async (task) => {
      // Send to the specified email address
      return resend.emails.send({
        from: "notifications@yourdomain.com",
        to: "rriovld@gmail.com", // Using the specified email address
        subject: `Reminder: Task "${task.title}" is due tomorrow`,
        html: `
          <h1>Task Reminder</h1>
          <p>Your task "${task.title}" is due tomorrow.</p>
          <p>Description: ${task.description || "No description"}</p>
          <p>Due date: ${new Date(task.due_date).toLocaleDateString()}</p>
          <p>Log in to your account to view or update this task.</p>
        `,
      })
    })

await Promise.all(emailPromises.filter(Boolean))

return NextResponse.json({
      success: true,
      message: `Sent ${tasks.length} reminders`,
    })
  } catch (error) {
    console.error("Error sending reminders:", error)
    return NextResponse.json({ error: "Failed to send reminders" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="components/tag-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Check, Plus, X } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

interface TagSelectorProps {
  selectedTags: string[]
  onChange: (tags: string[]) => void
  availableTags?: string[]
}

export function TagSelector({
  selectedTags = [],
  onChange,
  availableTags = ["Work", "Personal", "Urgent", "Low Priority"],
}: TagSelectorProps) {
  const [tags, setTags] = useState<string[]>(availableTags)
  const [newTag, setNewTag] = useState("")

const handleAddTag = () => {
    if (newTag.trim() && !tags.includes(newTag.trim())) {
      const updatedTags = [...tags, newTag.trim()]
      setTags(updatedTags)
      setNewTag("")
    }
  }

const toggleTag = (tag: string) => {
    const updatedSelection = selectedTags.includes(tag) ? selectedTags.filter((t) => t !== tag) : [...selectedTags, tag]

onChange(updatedSelection)
  }

return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-2">
        {selectedTags.map((tag) => (
          <Badge key={tag} variant="secondary" className="flex items-center gap-1">
            {tag}
            <X className="h-3 w-3 cursor-pointer" onClick={() => toggleTag(tag)} />
          </Badge>
        ))}
      </div>

<Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" size="sm" className="h-8 gap-1">
            <Plus className="h-3.5 w-3.5" />
            Add Tag
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-60 p-0" align="start">
          <div className="p-3 border-b">
            <div className="flex items-center gap-2">
              <Input
                value={newTag}
                onChange={(e) => setNewTag(e.target.value)}
                placeholder="Add new tag"
                className="h-8 flex-1"
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault()
                    handleAddTag()
                  }
                }}
              />
              <Button variant="ghost" size="sm" onClick={handleAddTag} disabled={!newTag.trim()}>
                <Plus className="h-4 w-4" />
              </Button>
            </div>
          </div>
          <div className="max-h-60 overflow-auto p-1">
            {tags.map((tag) => (
              <div
                key={tag}
                className="flex items-center justify-between px-3 py-2 text-sm rounded-sm hover:bg-muted cursor-pointer"
                onClick={() => toggleTag(tag)}
              >
                {tag}
                {selectedTags.includes(tag) && <Check className="h-4 w-4" />}
              </div>
            ))}
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useEffect, useState } from "react"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()
  const [mounted, setMounted] = useState(false)

// Avoid hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return null
  }

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import { ThemeProvider } from "@/components/theme-provider"
import "./globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"

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

export const metadata: Metadata = {
  title: "Notion-like Task Manager",
  description: "A minimalist task management application",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/task-filter.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search } from "lucide-react"

interface TaskFilterProps {
  onFilterChange: (filters: {
    search: string
    status: string
    sortBy: string
  }) => void
}

export function TaskFilter({ onFilterChange }: TaskFilterProps) {
  const [search, setSearch] = useState("")
  const [status, setStatus] = useState("all")
  const [sortBy, setSortBy] = useState("dueDate")

const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
    onFilterChange({ search: e.target.value, status, sortBy })
  }

const handleStatusChange = (value: string) => {
    setStatus(value)
    onFilterChange({ search, status: value, sortBy })
  }

const handleSortChange = (value: string) => {
    setSortBy(value)
    onFilterChange({ search, status, sortBy: value })
  }

return (
    <div className="flex flex-col md:flex-row gap-4 mb-6">
      <div className="relative flex-1">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input placeholder="Search tasks..." value={search} onChange={handleSearchChange} className="pl-8" />
      </div>
      <div className="flex gap-2">
        <Select value={status} onValueChange={handleStatusChange}>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder="Status" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All</SelectItem>
            <SelectItem value="pending">Pending</SelectItem>
            <SelectItem value="completed">Completed</SelectItem>
          </SelectContent>
        </Select>
        <Select value={sortBy} onValueChange={handleSortChange}>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder="Sort by" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="dueDate">Due Date</SelectItem>
            <SelectItem value="createdAt">Created Date</SelectItem>
            <SelectItem value="title">Title</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}
</article></body></html>