[V0_FILE]typescript:file="lib/types.ts" isEdit="true" isMerged="true" export type QuadrantType = | "urgent-important" | "not-urgent-important" | "urgent-not-important" | "not-urgent-not-important" export type Task = { id: string title: string description: string deadline?: Date createdAt: Date tags?: string[] } export type ViewMode = "grid" | "list" export type SortOption = "newest" | "oldest" | "deadline" | "alphabetical" export interface TaskFormValues { title: string description: string deadline?: Date tags?: string[] } [V0_FILE]typescriptreact:file="components/animated-gradient-background.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" interface AnimatedGradientBackgroundProps { isDarkMode: boolean className?: string } export default function AnimatedGradientBackground({ isDarkMode, className }: AnimatedGradientBackgroundProps) { const [mounted, setMounted] = useState(false) // Ensure hydration completes before animation starts useEffect(() => { setMounted(true) }, []) return (

{/* Animated gradient orbs */}

{/* Grid overlay */}

) } [V0_FILE]typescriptreact:file="components/app-header.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Moon, Sun, Menu, HelpCircle, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { cn } from "@/lib/utils" interface AppHeaderProps { isDarkMode: boolean setIsDarkMode: (value: boolean) => void searchQuery: string setSearchQuery: (value: string) => void showOnboarding: () => void totalTasks: number } export default function AppHeader({ isDarkMode, setIsDarkMode, searchQuery, setSearchQuery, showOnboarding, totalTasks, }: AppHeaderProps) { const [isScrolled, setIsScrolled] = useState(false) // Add scroll event listener useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) // Focus search input when pressing "/" useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ( e.key === "/" && document.activeElement instanceof HTMLInputElement === false && document.activeElement instanceof HTMLTextAreaElement === false ) { e.preventDefault() const searchInput = document.getElementById("search-input") if (searchInput) { searchInput.focus() } } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, []) return (

Eisenhower Matrix

{totalTasks} {totalTasks === 1 ? "task" : "tasks"} total

setSearchQuery(e.target.value)} className="pl-9 w-full" />

{isDarkMode ? "Dark mode" : "Light mode"} {isDarkMode ? ( ) : ( )}

setSearchQuery(e.target.value)} className="pl-9 w-full" />

Dark mode {isDarkMode ? ( ) : ( )}

{isDarkMode ? "Switch to light mode" : "Switch to dark mode"} Show help

) } [V0_FILE]typescriptreact:file="components/app-footer.tsx" isMerged="true" import { Github, Twitter } from "lucide-react" import { Button } from "@/components/ui/button" export default function AppFooter() { return ( ) } [V0_FILE]typescriptreact:file="components/keyboard-shortcuts.tsx" isMerged="true" "use client" import { useEffect } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Keyboard } from "lucide-react" interface KeyboardShortcutsProps { open: boolean onOpenChange: (open: boolean) => void onAddTask: () => void onToggleView: () => void onToggleDarkMode: () => void onShowHelp: () => void onSearch: () => void } export default function KeyboardShortcuts({ open, onOpenChange, onAddTask, onToggleView, onToggleDarkMode, onShowHelp, onSearch, }: KeyboardShortcutsProps) { useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Don't trigger shortcuts when typing in input fields if ( e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement ) { return } // Keyboard shortcuts switch (e.key.toLowerCase()) { case "n": if (!e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault() onAddTask() } break case "v": if (!e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault() onToggleView() } break case "d": if (!e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault() onToggleDarkMode() } break case "?": e.preventDefault() onOpenChange(!open) break case "/": e.preventDefault() onSearch() break case "h": if (!e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault() onShowHelp() } break } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [open, onOpenChange, onAddTask, onToggleView, onToggleDarkMode, onShowHelp, onSearch]) return ( ) } [V0_FILE]typescriptreact:file="components/tag-filter.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tag, X, Search } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { ScrollArea } from "@/components/ui/scroll-area" import { Input } from "@/components/ui/input" import { useTags } from "@/hooks/use-tags" import { useUIStore } from "@/lib/store/ui-store" import { useTaskStore } from "@/lib/store/task-store" export default function TagFilter() { const tasks = useTaskStore((state) => state.tasks) const selectedTags = useUIStore((state) => state.selectedTags) const toggleTag = useUIStore((state) => state.toggleTag) const clearSelectedTags = useUIStore((state) => state.clearSelectedTags) const [isOpen, setIsOpen] = useState(false) const [tagFilter, setTagFilter] = useState("") const { allTags, tagCounts } = useTags(tasks) // Filter tags based on search input const filteredTags = allTags.filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase())) if (allTags.length === 0) { return null } return (

Filter by tags

{selectedTags.length > 0 && ( )}

setTagFilter(e.target.value)} className="pl-8" />

{filteredTags.length > 0 ? (

{filteredTags.map((tag) => (

toggleTag(tag)} /> {tag} ({tagCounts[tag]})

))}

) : (

No tags found

)} {selectedTags.length > 0 && (

{selectedTags.map((tag) => ( {tag} ))}

)}

) } [V0_FILE]typescriptreact:file="components/task-statistics.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts" import type { Task, QuadrantType } from "./eisenhower-matrix" interface TaskStatisticsProps { tasks: Record isDarkMode: boolean } export default function TaskStatistics({ tasks, isDarkMode }: TaskStatisticsProps) { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) return null const quadrantColors = { "urgent-important": "#ef4444", "not-urgent-important": "#3b82f6", "urgent-not-important": "#eab308", "not-urgent-not-important": "#6b7280", } const quadrantNames = { "urgent-important": "Do First", "not-urgent-important": "Schedule", "urgent-not-important": "Delegate", "not-urgent-not-important": "Eliminate", } const getQuadrantData = () => { return Object.entries(tasks).map(([quadrant, quadrantTasks]) => ({ name: quadrantNames[quadrant as QuadrantType], value: quadrantTasks.length, color: quadrantColors[quadrant as QuadrantType], })) } const getTagData = () => { const tagCounts: Record = {} Object.values(tasks).forEach((quadrantTasks) => { quadrantTasks.forEach((task) => { if (task.tags) { task.tags.forEach((tag) => { tagCounts[tag] = (tagCounts[tag] || 0) + 1 }) } }) }) return Object.entries(tagCounts) .map(([tag, count]) => ({ name: tag, value: count })) .sort((a, b) => b.value - a.value) .slice(0, 10) // Top 10 tags } const getDeadlineData = () => { const today = new Date() today.setHours(0, 0, 0, 0) const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) const nextWeek = new Date(today) nextWeek.setDate(nextWeek.getDate() + 7) let overdue = 0 let dueToday = 0 let dueTomorrow = 0 let dueThisWeek = 0 let dueLater = 0 let noDeadline = 0 Object.values(tasks).forEach((quadrantTasks) => { quadrantTasks.forEach((task) => { if (!task.deadline) { noDeadline++ } else { const deadlineDate = new Date(task.deadline) deadlineDate.setHours(0, 0, 0, 0) if (deadlineDate < today) { overdue++ } else if (deadlineDate.getTime() === today.getTime()) { dueToday++ } else if (deadlineDate.getTime() === tomorrow.getTime()) { dueTomorrow++ } else if (deadlineDate <= nextWeek) { dueThisWeek++ } else { dueLater++ } } }) }) return [ { name: "Overdue", value: overdue, color: "#ef4444" }, { name: "Due Today", value: dueToday, color: "#f97316" }, { name: "Due Tomorrow", value: dueTomorrow, color: "#eab308" }, { name: "Due This Week", value: dueThisWeek, color: "#3b82f6" }, { name: "Due Later", value: dueLater, color: "#10b981" }, { name: "No Deadline", value: noDeadline, color: "#6b7280" }, ] } const quadrantData = getQuadrantData() const tagData = getTagData() const deadlineData = getDeadlineData() const CustomTooltip = ({ active, payload }: any) => { if (active && payload && payload.length) { return (

{payload[0].name}

{`Tasks: ${payload[0].value}`}

) } return null } return ( Task Statistics Distribution Tags Deadlines

`${name} (${(percent * 100).toFixed(0)}%)`} labelLine={false} > {quadrantData.map((entry, index) => ( ))} } />

{tagData.length > 0 ? ( (value.length > 12 ? `${value.substring(0, 12)}...` : value)} /> } /> ) : (

No tags found in your tasks

)}

`${name} (${(percent * 100).toFixed(0)}%)`} labelLine={false} > {deadlineData.map((entry, index) => ( ))} } />

) } [V0_FILE]typescriptreact:file="components/quick-add-task.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { PlusCircle } from "lucide-react" import type { QuadrantType } from "./eisenhower-matrix" interface QuickAddTaskProps { onAddTask: (title: string, quadrant: QuadrantType) => void } export default function QuickAddTask({ onAddTask }: QuickAddTaskProps) { const [open, setOpen] = useState(false) const [title, setTitle] = useState("") const [quadrant, setQuadrant] = useState("urgent-important") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (title.trim()) { onAddTask(title.trim(), quadrant) setTitle("") setOpen(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/focus-mode.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { X, Focus } from "lucide-react" import type { QuadrantType } from "./eisenhower-matrix" import MatrixQuadrant from "./matrix-quadrant" interface FocusModeProps { tasks: Record onAddTask: (quadrant: QuadrantType) => void onEditTask: (task: any, quadrant: QuadrantType) => void onDeleteTask: (taskId: string, quadrant: QuadrantType) => void } export default function FocusMode({ tasks, onAddTask, onEditTask, onDeleteTask }: FocusModeProps) { const [open, setOpen] = useState(false) const [activeQuadrant, setActiveQuadrant] = useState("urgent-important") const quadrantInfo = { "urgent-important": { title: "Do First", description: "Urgent & Important", color: "bg-red-500/20 border-red-500", iconColor: "text-red-500", tips: [ "Do these tasks as soon as possible", "These are critical activities", "They require immediate attention", "Often these are crises or deadlines", ], }, "not-urgent-important": { title: "Schedule", description: "Not Urgent & Important", color: "bg-blue-500/20 border-blue-500", iconColor: "text-blue-500", tips: [ "Schedule time to do these tasks", "These contribute to long-term goals", "Plan ahead to prevent these becoming urgent", "Focus on these for personal growth", ], }, "urgent-not-important": { title: "Delegate", description: "Urgent & Not Important", color: "bg-yellow-500/20 border-yellow-500", iconColor: "text-yellow-500", tips: [ "Delegate these tasks if possible", "These are interruptions and distractions", "Minimize time spent on these", "Can you automate or simplify these?", ], }, "not-urgent-not-important": { title: "Eliminate", description: "Not Urgent & Not Important", color: "bg-gray-500/20 border-gray-500", iconColor: "text-gray-500", tips: [ "Eliminate these tasks when possible", "These are time-wasters", "Say no to these activities", "Be mindful of how much time you spend here", ], }, } return ( <> ) } [V0_FILE]typescriptreact:file="components/import-export.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Alert, AlertDescription } from "@/components/ui/alert" import { Download, Upload, Copy, Check, AlertCircle } from "lucide-react" import type { Task, QuadrantType } from "./eisenhower-matrix" interface ImportExportProps { tasks: Record onImport: (tasks: Record) => void } export default function ImportExport({ tasks, onImport }: ImportExportProps) { const [open, setOpen] = useState(false) const [importData, setImportData] = useState("") const [copied, setCopied] = useState(false) const [importError, setImportError] = useState(null) const [importSuccess, setImportSuccess] = useState(false) const handleExport = () => { // Convert dates to ISO strings for export const exportTasks = Object.entries(tasks).reduce( (acc, [quadrant, quadrantTasks]) => { acc[quadrant] = quadrantTasks.map((task) => ({ ...task, deadline: task.deadline ? task.deadline.toISOString() : undefined, createdAt: task.createdAt.toISOString(), })) return acc }, {} as Record, ) return JSON.stringify(exportTasks, null, 2) } const handleCopyToClipboard = () => { navigator.clipboard.writeText(handleExport()) setCopied(true) setTimeout(() => setCopied(false), 2000) } const handleDownload = () => { const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(handleExport()) const downloadAnchorNode = document.createElement("a") downloadAnchorNode.setAttribute("href", dataStr) downloadAnchorNode.setAttribute("download", "eisenhower-matrix-tasks.json") document.body.appendChild(downloadAnchorNode) downloadAnchorNode.click() downloadAnchorNode.remove() } const handleImport = () => { try { setImportError(null) setImportSuccess(false) if (!importData.trim()) { setImportError("Please enter data to import") return } const parsedData = JSON.parse(importData) // Validate structure if (!parsedData || typeof parsedData !== "object") { setImportError("Invalid data format") return } const validQuadrants: QuadrantType[] = [ "urgent-important", "not-urgent-important", "urgent-not-important", "not-urgent-not-important", ] // Check if all required quadrants exist for (const quadrant of validQuadrants) { if (!parsedData[quadrant] || !Array.isArray(parsedData[quadrant])) { setImportError(`Missing or invalid quadrant: ${quadrant}`) return } } // Convert the imported data to the correct format with Date objects const importedTasks = Object.entries(parsedData).reduce( (acc, [quadrant, quadrantTasks]) => { if (validQuadrants.includes(quadrant as QuadrantType)) { acc[quadrant as QuadrantType] = (quadrantTasks as any[]).map((task) => ({ ...task, deadline: task.deadline ? new Date(task.deadline) : undefined, createdAt: new Date(task.createdAt), tags: task.tags || [], })) } return acc }, {} as Record, ) onImport(importedTasks) setImportSuccess(true) setImportData("") } catch (error) { setImportError("Invalid JSON format. Please check your data.") } } return ( <>

Eisenhower Matrix

Filter by tags

Quick Add Task

Tips for {info.title}

About

About