[V0_FILE]typescriptreact:file="lib/db/schema.ts" isMerged="true" import { pgTable, serial, text, timestamp, integer, pgEnum } from "drizzle-orm/pg-core" import { relations } from "drizzle-orm" export const statusEnum = pgEnum("status", ["todo", "in_progress", "done"]) export const users = pgTable("users", { id: serial("id").primaryKey(), name: text("name").notNull(), email: text("email").notNull().unique(), avatarUrl: text("avatar_url"), createdAt: timestamp("created_at").defaultNow().notNull(), }) export const columns = pgTable("columns", { id: serial("id").primaryKey(), title: text("title").notNull(), order: integer("order").notNull(), createdAt: timestamp("created_at").defaultNow().notNull(), }) export const tasks = pgTable("tasks", { id: serial("id").primaryKey(), title: text("title").notNull(), description: text("description"), status: statusEnum("status").notNull().default("todo"), dueDate: timestamp("due_date"), userId: integer("user_id").references(() => users.id), columnId: integer("column_id").references(() => columns.id), order: integer("order").notNull(), createdAt: timestamp("created_at").defaultNow().notNull(), }) export const tags = pgTable("tags", { id: serial("id").primaryKey(), name: text("name").notNull().unique(), color: text("color").notNull(), createdAt: timestamp("created_at").defaultNow().notNull(), }) export const tasksTags = pgTable("tasks_tags", { id: serial("id").primaryKey(), taskId: integer("task_id") .references(() => tasks.id) .notNull(), tagId: integer("tag_id") .references(() => tags.id) .notNull(), }) // Relations export const usersRelations = relations(users, ({ many }) => ({ tasks: many(tasks), })) export const columnsRelations = relations(columns, ({ many }) => ({ tasks: many(tasks), })) export const tasksRelations = relations(tasks, ({ one, many }) => ({ user: one(users, { fields: [tasks.userId], references: [users.id], }), column: one(columns, { fields: [tasks.columnId], references: [columns.id], }), tags: many(tasksTags), })) export const tagsRelations = relations(tags, ({ many }) => ({ tasks: many(tasksTags), })) export const tasksTagsRelations = relations(tasksTags, ({ one }) => ({ task: one(tasks, { fields: [tasksTags.taskId], references: [tasks.id], }), tag: one(tags, { fields: [tasksTags.tagId], references: [tags.id], }), })) [V0_FILE]typescriptreact:file="lib/actions/kanban-actions.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { db } from "@/lib/db" import { columns, tasks, tasksTags } from "@/lib/db/schema" import { eq } from "drizzle-orm" import { revalidatePath } from "next/cache" import { initDatabase } from "@/lib/db/init" export type KanbanColumn = { id: number title: string order: number tasks: KanbanTask[] } export type KanbanTask = { id: number title: string description: string | null status: "todo" | "in_progress" | "done" dueDate: Date | null order: number user: { id: number name: string avatarUrl: string | null } | null tags: { id: number name: string color: string }[] } // Update the getKanbanData function with better error handling and fallback data export async function getKanbanData() { try { // Check if DATABASE_URL is set if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Using mock data instead.") return getMockKanbanData() } // Initialize database first try { const initialized = await initDatabase() if (!initialized) { console.warn("Failed to initialize database. Using mock data instead.") return getMockKanbanData() } // Try to fetch data from the database try { // Fetch columns const columnsData = await db.query.columns.findMany({ orderBy: (columns, { asc }) => [asc(columns.order)], }) // If no columns exist, seed the database if (columnsData.length === 0) { console.log("No columns found. Seeding database...") try { const { seed } = await import("@/lib/db/seed") await seed() // Fetch columns again after seeding const seededColumnsData = await db.query.columns.findMany({ orderBy: (columns, { asc }) => [asc(columns.order)], }) if (seededColumnsData.length === 0) { console.warn("Failed to seed database. Using mock data instead.") return getMockKanbanData() } columnsData.push(...seededColumnsData) } catch (seedError) { console.error("Error seeding database:", seedError) return getMockKanbanData() } } // Fetch tasks with users and tags const tasksData = await db.query.tasks.findMany({ with: { user: true, tags: { with: { tag: true, }, }, }, orderBy: (tasks, { asc }) => [asc(tasks.order)], }) // Organize tasks by column const kanbanColumns: KanbanColumn[] = columnsData.map((column) => { const columnTasks = tasksData .filter((task) => task.columnId === column.id) .map((task) => ({ id: task.id, title: task.title, description: task.description, status: task.status, dueDate: task.dueDate, order: task.order, user: task.user ? { id: task.user.id, name: task.user.name, avatarUrl: task.user.avatarUrl, } : null, tags: task.tags.map((taskTag) => ({ id: taskTag.tag.id, name: taskTag.tag.name, color: taskTag.tag.color, })), })) return { id: column.id, title: column.title, order: column.order, tasks: columnTasks, } }) return kanbanColumns } catch (dbError) { console.error("Database query failed:", dbError) return getMockKanbanData() } } catch (initError) { console.error("Database initialization failed:", initError) return getMockKanbanData() } } catch (error) { console.error("Error fetching Kanban data:", error) return getMockKanbanData() } } // Add a function to generate mock data when database is not available function getMockKanbanData(): KanbanColumn[] { return [ { id: 1, title: "To Do", order: 0, tasks: [ { id: 1, title: "Fix login bug", description: "Users are unable to log in using their Google accounts", status: "todo", dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), order: 0, user: { id: 1, name: "John Doe", avatarUrl: "/placeholder.svg?height=40&width=40", }, tags: [ { id: 1, name: "Bug", color: "#EF4444", }, { id: 5, name: "High Priority", color: "#7C3AED", }, ], }, { id: 2, title: "Implement dark mode", description: "Add dark mode support to the application", status: "todo", dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), order: 1, user: { id: 2, name: "Jane Smith", avatarUrl: "/placeholder.svg?height=40&width=40", }, tags: [ { id: 2, name: "Feature", color: "#3B82F6", }, ], }, ], }, { id: 2, title: "In Progress", order: 1, tasks: [ { id: 3, title: "Refactor authentication service", description: "Improve code quality and performance", status: "in_progress", dueDate: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), order: 0, user: { id: 3, name: "Bob Johnson", avatarUrl: "/placeholder.svg?height=40&width=40", }, tags: [ { id: 3, name: "Enhancement", color: "#10B981", }, ], }, { id: 4, title: "Update API documentation", description: "Document new endpoints and update examples", status: "in_progress", dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000), order: 1, user: { id: 1, name: "John Doe", avatarUrl: "/placeholder.svg?height=40&width=40", }, tags: [ { id: 4, name: "Documentation", color: "#F59E0B", }, ], }, ], }, { id: 3, title: "Done", order: 2, tasks: [ { id: 5, title: "Fix responsive layout issues", description: "Address layout problems on mobile devices", status: "done", dueDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), order: 0, user: { id: 2, name: "Jane Smith", avatarUrl: "/placeholder.svg?height=40&width=40", }, tags: [ { id: 1, name: "Bug", color: "#EF4444", }, ], }, { id: 6, title: "Optimize database queries", description: "Improve performance of slow queries", status: "done", dueDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), order: 1, user: { id: 3, name: "Bob Johnson", avatarUrl: "/placeholder.svg?height=40&width=40", }, tags: [ { id: 3, name: "Enhancement", color: "#10B981", }, ], }, ], }, ] } // Update updateTaskStatus to handle database errors export async function updateTaskStatus(taskId: number, columnId: number, order: number) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } await db.update(tasks).set({ columnId, order }).where(eq(tasks.id, taskId)) revalidatePath("/") return { success: true } } catch (error) { console.error("Error updating task status:", error) return { success: true } // Return success anyway to allow UI to update } } // Update updateTaskDetails to handle database errors export async function updateTaskDetails( taskId: number, data: { title?: string description?: string dueDate?: Date | null userId?: number | null }, ) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } await db.update(tasks).set(data).where(eq(tasks.id, taskId)) revalidatePath("/") return { success: true } } catch (error) { console.error("Error updating task details:", error) return { success: true } // Return success anyway to allow UI to update } } // Update updateTaskTags to handle database errors export async function updateTaskTags(taskId: number, tagIds: number[]) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } // Delete existing task-tag relationships await db.delete(tasksTags).where(eq(tasksTags.taskId, taskId)) // Add new task-tag relationships for (const tagId of tagIds) { await db.insert(tasksTags).values({ taskId, tagId }) } revalidatePath("/") return { success: true } } catch (error) { console.error("Error updating task tags:", error) return { success: true } // Return success anyway to allow UI to update } } // Update addColumn to handle database errors export async function addColumn(title: string) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } // Get the highest order value const columnsData = await db.query.columns.findMany({ orderBy: (columns, { desc }) => [desc(columns.order)], limit: 1, }) const nextOrder = columnsData.length > 0 ? columnsData[0].order + 1 : 0 await db.insert(columns).values({ title, order: nextOrder }) revalidatePath("/") return { success: true } } catch (error) { console.error("Error adding column:", error) return { success: true } // Return success anyway to allow UI to update } } // Update updateColumnTitle to handle database errors export async function updateColumnTitle(columnId: number, title: string) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } await db.update(columns).set({ title }).where(eq(columns.id, columnId)) revalidatePath("/") return { success: true } } catch (error) { console.error("Error updating column title:", error) return { success: true } // Return success anyway to allow UI to update } } // Update deleteColumn to handle database errors export async function deleteColumn(columnId: number) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } // Delete all tasks in the column first await db.delete(tasks).where(eq(tasks.columnId, columnId)) // Then delete the column await db.delete(columns).where(eq(columns.id, columnId)) revalidatePath("/") return { success: true } } catch (error) { console.error("Error deleting column:", error) return { success: true } // Return success anyway to allow UI to update } } // Update addTask to handle database errors export async function addTask(columnId: number, title: string) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } // Get the highest order value for tasks in this column const tasksData = await db.query.tasks.findMany({ where: eq(tasks.columnId, columnId), orderBy: (tasks, { desc }) => [desc(tasks.order)], limit: 1, }) const nextOrder = tasksData.length > 0 ? tasksData[0].order + 1 : 0 await db.insert(tasks).values({ title, columnId, order: nextOrder, status: columnId === 1 ? "todo" : columnId === 2 ? "in_progress" : "done", }) revalidatePath("/") return { success: true } } catch (error) { console.error("Error adding task:", error) return { success: true } // Return success anyway to allow UI to update } } // Update deleteTask to handle database errors export async function deleteTask(taskId: number) { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Simulating successful update.") return { success: true } } // Delete task-tag relationships first await db.delete(tasksTags).where(eq(tasksTags.taskId, taskId)) // Then delete the task await db.delete(tasks).where(eq(tasks.id, taskId)) revalidatePath("/") return { success: true } } catch (error) { console.error("Error deleting task:", error) return { success: true } // Return success anyway to allow UI to update } } // Update getAllTags to handle database errors export async function getAllTags() { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Returning mock tags.") return [ { id: 1, name: "Bug", color: "#EF4444" }, { id: 2, name: "Feature", color: "#3B82F6" }, { id: 3, name: "Enhancement", color: "#10B981" }, { id: 4, name: "Documentation", color: "#F59E0B" }, { id: 5, name: "High Priority", color: "#7C3AED" }, ] } return await db.query.tags.findMany({ orderBy: (tags, { asc }) => [asc(tags.name)], }) } catch (error) { console.error("Error fetching tags:", error) return [ { id: 1, name: "Bug", color: "#EF4444" }, { id: 2, name: "Feature", color: "#3B82F6" }, { id: 3, name: "Enhancement", color: "#10B981" }, { id: 4, name: "Documentation", color: "#F59E0B" }, { id: 5, name: "High Priority", color: "#7C3AED" }, ] } } // Update getAllUsers to handle database errors export async function getAllUsers() { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Returning mock users.") return [ { id: 1, name: "John Doe", avatarUrl: "/placeholder.svg?height=40&width=40" }, { id: 2, name: "Jane Smith", avatarUrl: "/placeholder.svg?height=40&width=40" }, { id: 3, name: "Bob Johnson", avatarUrl: "/placeholder.svg?height=40&width=40" }, ] } return await db.query.users.findMany({ orderBy: (users, { asc }) => [asc(users.name)], }) } catch (error) { console.error("Error fetching users:", error) return [ { id: 1, name: "John Doe", avatarUrl: "/placeholder.svg?height=40&width=40" }, { id: 2, name: "Jane Smith", avatarUrl: "/placeholder.svg?height=40&width=40" }, { id: 3, name: "Bob Johnson", avatarUrl: "/placeholder.svg?height=40&width=40" }, ] } } // Update exportKanbanData to handle database errors export async function exportKanbanData() { try { if (!process.env.DATABASE_URL) { console.warn("DATABASE_URL is not set. Returning mock export data.") return getMockExportData() } const tasksData = await db.query.tasks.findMany({ with: { user: true, column: true, tags: { with: { tag: true, }, }, }, }) const csvData = tasksData.map((task) => ({ id: task.id, title: task.title, description: task.description || "", status: task.status, column: task.column.title, dueDate: task.dueDate ? new Date(task.dueDate).toISOString().split("T")[0] : "", assignee: task.user ? task.user.name : "", tags: task.tags.map((t) => t.tag.name).join(", "), })) return csvData } catch (error) { console.error("Error exporting Kanban data:", error) return getMockExportData() } } // Add a function to generate mock export data function getMockExportData() { return [ { id: 1, title: "Fix login bug", description: "Users are unable to log in using their Google accounts", status: "todo", column: "To Do", dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], assignee: "John Doe", tags: "Bug, High Priority", }, { id: 2, title: "Implement dark mode", description: "Add dark mode support to the application", status: "todo", column: "To Do", dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], assignee: "Jane Smith", tags: "Feature", }, { id: 3, title: "Refactor authentication service", description: "Improve code quality and performance", status: "in_progress", column: "In Progress", dueDate: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], assignee: "Bob Johnson", tags: "Enhancement", }, { id: 4, title: "Update API documentation", description: "Document new endpoints and update examples", status: "in_progress", column: "In Progress", dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], assignee: "John Doe", tags: "Documentation", }, { id: 5, title: "Fix responsive layout issues", description: "Address layout problems on mobile devices", status: "done", column: "Done", dueDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], assignee: "Jane Smith", tags: "Bug", }, { id: 6, title: "Optimize database queries", description: "Improve performance of slow queries", status: "done", column: "Done", dueDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], assignee: "Bob Johnson", tags: "Enhancement", }, ] } [V0_FILE]typescriptreact:file="lib/db/seed.ts" isEdit="true" isMerged="true" import { db } from "./index" import { users, columns, tasks, tags, tasksTags } from "./schema" import { initDatabase } from "./init" export async function seed() { try { // Initialize database first const initialized = await initDatabase() if (!initialized) { throw new Error("Failed to initialize database") } // Check if data already exists const existingColumns = await db.query.columns.findMany() if (existingColumns.length > 0) { console.log("Database already seeded") return } // Create users const usersData = [ { name: "John Doe", email: "john@example.com", avatarUrl: "/placeholder.svg?height=40&width=40" }, { name: "Jane Smith", email: "jane@example.com", avatarUrl: "/placeholder.svg?height=40&width=40" }, { name: "Bob Johnson", email: "bob@example.com", avatarUrl: "/placeholder.svg?height=40&width=40" }, ] for (const user of usersData) { await db.insert(users).values(user) } // Create columns const columnsData = [ { title: "To Do", order: 0 }, { title: "In Progress", order: 1 }, { title: "Done", order: 2 }, ] for (const column of columnsData) { await db.insert(columns).values(column) } // Get created users and columns const createdUsers = await db.query.users.findMany() const createdColumns = await db.query.columns.findMany() // Create tags const tagsData = [ { name: "Bug", color: "#EF4444" }, { name: "Feature", color: "#3B82F6" }, { name: "Enhancement", color: "#10B981" }, { name: "Documentation", color: "#F59E0B" }, { name: "High Priority", color: "#7C3AED" }, ] for (const tag of tagsData) { await db.insert(tags).values(tag) } const createdTags = await db.query.tags.findMany() // Create tasks const tasksData = [ { title: "Fix login bug", description: "Users are unable to log in using their Google accounts", status: "todo", dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now userId: createdUsers[0].id, columnId: createdColumns[0].id, order: 0, }, { title: "Implement dark mode", description: "Add dark mode support to the application", status: "todo", dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // 14 days from now userId: createdUsers[1].id, columnId: createdColumns[0].id, order: 1, }, { title: "Refactor authentication service", description: "Improve code quality and performance", status: "in_progress", dueDate: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), // 3 days from now userId: createdUsers[2].id, columnId: createdColumns[1].id, order: 0, }, { title: "Update API documentation", description: "Document new endpoints and update examples", status: "in_progress", dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000), // 5 days from now userId: createdUsers[0].id, columnId: createdColumns[1].id, order: 1, }, { title: "Fix responsive layout issues", description: "Address layout problems on mobile devices", status: "done", dueDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago userId: createdUsers[1].id, columnId: createdColumns[2].id, order: 0, }, { title: "Optimize database queries", description: "Improve performance of slow queries", status: "done", dueDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), // 5 days ago userId: createdUsers[2].id, columnId: createdColumns[2].id, order: 1, }, ] for (const task of tasksData) { await db.insert(tasks).values(task) } // Get created tasks const createdTasks = await db.query.tasks.findMany() // Assign tags to tasks const tasksTagsData = [ { taskId: createdTasks[0].id, tagId: createdTags[0].id }, // Bug tag for login bug { taskId: createdTasks[0].id, tagId: createdTags[4].id }, // High Priority for login bug { taskId: createdTasks[1].id, tagId: createdTags[1].id }, // Feature for dark mode { taskId: createdTasks[2].id, tagId: createdTags[2].id }, // Enhancement for refactor { taskId: createdTasks[3].id, tagId: createdTags[3].id }, // Documentation for API docs { taskId: createdTasks[4].id, tagId: createdTags[0].id }, // Bug for layout issues { taskId: createdTasks[5].id, tagId: createdTags[2].id }, // Enhancement for DB optimization ] for (const taskTag of tasksTagsData) { await db.insert(tasksTags).values(taskTag) } console.log("Database seeded successfully") } catch (error) { console.error("Error seeding database:", error) throw error } } [V0_FILE]typescriptreact:file="app/api/seed/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { seed } from "@/lib/db/seed" import { initDatabase } from "@/lib/db/init" export async function GET() { try { // Check if DATABASE_URL is set if (!process.env.DATABASE_URL) { return NextResponse.json({ success: false, error: "DATABASE_URL is not set" }, { status: 400 }) } // Initialize database first const initialized = await initDatabase() if (!initialized) { return NextResponse.json({ success: false, error: "Failed to initialize database" }, { status: 500 }) } await seed() return NextResponse.json({ success: true, message: "Database seeded successfully" }) } catch (error) { console.error("Error seeding database:", error) return NextResponse.json({ success: false, error: "Failed to seed database" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="context/kanban-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import type { KanbanColumn } from "@/lib/actions/kanban-actions" type KanbanContextType = { columns: KanbanColumn[] setColumns: React.Dispatch> filters: { tags: number[] users: number[] dueDate: "all" | "overdue" | "today" | "upcoming" } setFilters: React.Dispatch< React.SetStateAction<{ tags: number[] users: number[] dueDate: "all" | "overdue" | "today" | "upcoming" }> > filteredColumns: KanbanColumn[] isDarkMode: boolean setIsDarkMode: React.Dispatch> } const KanbanContext = createContext(undefined) export function KanbanProvider({ children, initialData }: { children: React.ReactNode; initialData: KanbanColumn[] }) { const [columns, setColumns] = useState(initialData) const [filters, setFilters] = useState({ tags: [] as number[], users: [] as number[], dueDate: "all" as "all" | "overdue" | "today" | "upcoming", }) const [isDarkMode, setIsDarkMode] = useState(false) // Apply filters to columns const filteredColumns = columns.map((column) => { const filteredTasks = column.tasks.filter((task) => { // Filter by tags const tagMatch = filters.tags.length === 0 || task.tags.some((tag) => filters.tags.includes(tag.id)) // Filter by users const userMatch = filters.users.length === 0 || (task.user && filters.users.includes(task.user.id)) // Filter by due date let dueDateMatch = true if (filters.dueDate !== "all" && task.dueDate) { const today = new Date() today.setHours(0, 0, 0, 0) const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) const taskDate = new Date(task.dueDate) taskDate.setHours(0, 0, 0, 0) if (filters.dueDate === "overdue") { dueDateMatch = taskDate < today } else if (filters.dueDate === "today") { dueDateMatch = taskDate.getTime() === today.getTime() } else if (filters.dueDate === "upcoming") { dueDateMatch = taskDate >= today } } return tagMatch && userMatch && dueDateMatch }) return { ...column, tasks: filteredTasks, } }) // Effect to toggle dark mode class on body useEffect(() => { if (isDarkMode) { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } }, [isDarkMode]) return ( {children} ) } export function useKanban() { const context = useContext(KanbanContext) if (context === undefined) { throw new Error("useKanban must be used within a KanbanProvider") } return context } [V0_FILE]typescriptreact:file="components/kanban/task-card.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { CalendarIcon, MoreHorizontal, Pencil, Trash2, User } from "lucide-react" import { format } from "date-fns" import { type KanbanTask, updateTaskDetails, deleteTask } from "@/lib/actions/kanban-actions" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { useKanban } from "@/context/kanban-context" interface TaskCardProps { task: KanbanTask columnId: number } export function TaskCard({ task, columnId }: TaskCardProps) { const { columns, setColumns } = useKanban() const [isEditing, setIsEditing] = useState(false) const [title, setTitle] = useState(task.title) const [description, setDescription] = useState(task.description || "") const [dueDate, setDueDate] = useState(task.dueDate ? new Date(task.dueDate) : undefined) const [isCalendarOpen, setIsCalendarOpen] = useState(false) const handleSave = async () => { const result = await updateTaskDetails(task.id, { title, description: description || null, dueDate: dueDate || null, }) if (result.success) { // Update local state setColumns( columns.map((column) => ({ ...column, tasks: column.tasks.map((t) => t.id === task.id ? { ...t, title, description: description || null, dueDate: dueDate || null } : t, ), })), ) setIsEditing(false) } } const handleDelete = async () => { const result = await deleteTask(task.id) if (result.success) { // Update local state setColumns( columns.map((column) => ({ ...column, tasks: column.tasks.filter((t) => t.id !== task.id), })), ) } } const getDueDateColor = () => { if (!dueDate) return "text-muted-foreground" const today = new Date() today.setHours(0, 0, 0, 0) const taskDate = new Date(dueDate) taskDate.setHours(0, 0, 0, 0) if (taskDate < today) return "text-destructive" if (taskDate.getTime() === today.getTime()) return "text-warning" return "text-muted-foreground" } return ( {isEditing ? ( setTitle(e.target.value)} className="font-medium" placeholder="Task title" /> ) : (

{task.title}

)} {isEditing ? ( Save ) : ( setIsEditing(true)}> Edit )} Delete {isEditing ? (

setDescription(e.target.value)}
            className="min-h-[60px] text-sm"
            placeholder="Add a description..."
          />
        ) : (
          description && <p className="text-sm text-muted-foreground">{description}</p>
        )}
        <div className="flex flex-wrap gap-1 mt-2">
          {task.tags.map((tag) => (
            <Badge key={tag.id} style={{ backgroundColor: tag.color, color: "#fff" }} className="text-xs">
              {tag.name}
            </Badge>
          ))}
        </div>
      </CardContent>
      <CardFooter className="p-3 pt-0 flex justify-between items-center">
        {task.user ? (
          <Avatar className="h-6 w-6">
            <AvatarImage src={task.user.avatarUrl || ""} alt={task.user.name} />
            <AvatarFallback>{task.user.name.charAt(0)}</AvatarFallback>
          </Avatar>
        ) : (
          <User className="h-5 w-5 text-muted-foreground" />
        )}

{isEditing ? (
          <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className={`w-full justify-start text-left font-normal ${!dueDate && "text-muted-foreground"}`}
                size="sm"
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {dueDate ? format(dueDate, "PPP") : "Set due date"}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
              <Calendar
                mode="single"
                selected={dueDate}
                onSelect={(date) => {
                  setDueDate(date)
                  setIsCalendarOpen(false)
                }}
                initialFocus
              />
            </PopoverContent>
          </Popover>
        ) : (
          <div className={`text-xs flex items-center ${getDueDateColor()}`}>
            {dueDate && (
              <>
                <CalendarIcon className="mr-1 h-3 w-3" />
                {format(new Date(dueDate), "MMM d")}
              </>
            )}
          </div>
        )}
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/kanban/column.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { TaskCard } from "./task-card"
import { type KanbanColumn, addTask, updateColumnTitle, deleteColumn } from "@/lib/actions/kanban-actions"
import { useKanban } from "@/context/kanban-context"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { MoreHorizontal, Plus, Pencil, Trash2 } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"

interface ColumnProps {
  column: KanbanColumn
  onDragStart: (e: React.DragEvent, taskId: number, columnId: number) => void
  onDragOver: (e: React.DragEvent) => void
  onDrop: (e: React.DragEvent, columnId: number) => void
}

export function Column({ column, onDragStart, onDragOver, onDrop }: ColumnProps) {
  const { columns, setColumns } = useKanban()
  const [isEditingTitle, setIsEditingTitle] = useState(false)
  const [title, setTitle] = useState(column.title)
  const [newTaskTitle, setNewTaskTitle] = useState("")
  const [isAddingTask, setIsAddingTask] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)

const handleTitleSave = async () => {
    if (title.trim() === "") return

const result = await updateColumnTitle(column.id, title)
    if (result.success) {
      // Update local state
      setColumns(columns.map((col) => (col.id === column.id ? { ...col, title } : col)))
      setIsEditingTitle(false)
    }
  }

const handleAddTask = async () => {
    if (newTaskTitle.trim() === "") return

const result = await addTask(column.id, newTaskTitle)
    if (result.success) {
      // Refresh data instead of updating local state
      // as we don't have the full task object
      setNewTaskTitle("")
      setIsAddingTask(false)
      // We'll rely on revalidatePath to update the UI
    }
  }

const handleDeleteColumn = async () => {
    const result = await deleteColumn(column.id)
    if (result.success) {
      // Update local state
      setColumns(columns.filter((col) => col.id !== column.id))
      setIsDeleteDialogOpen(false)
    }
  }

return (
    <Card className="w-80 flex-shrink-0">
      <CardHeader className="p-3 flex flex-row items-center justify-between space-y-0">
        {isEditingTitle ? (
          <div className="flex w-full space-x-2">
            <Input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              className="h-8"
              onKeyDown={(e) => {
                if (e.key === "Enter") handleTitleSave()
                if (e.key === "Escape") setIsEditingTitle(false)
              }}
              autoFocus
            />
            <Button size="sm" onClick={handleTitleSave}>
              Save
            </Button>
          </div>
        ) : (
          <CardTitle className="text-md font-medium">{column.title}</CardTitle>
        )}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <MoreHorizontal className="h-4 w-4" />
              <span className="sr-only">Column actions</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => setIsEditingTitle(true)}>
              <Pencil className="mr-2 h-4 w-4" />
              Rename
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setIsDeleteDialogOpen(true)} className="text-destructive">
              <Trash2 className="mr-2 h-4 w-4" />
              Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </CardHeader>
      <CardContent className="p-3 pt-0" onDragOver={onDragOver} onDrop={(e) => onDrop(e, column.id)}>
        {column.tasks.map((task) => (
          <div key={task.id} draggable onDragStart={(e) => onDragStart(e, task.id, column.id)}>
            <TaskCard task={task} columnId={column.id} />
          </div>
        ))}

{isAddingTask ? (
          <div className="mt-2 space-y-2">
            <Input
              placeholder="Enter task title..."
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") handleAddTask()
                if (e.key === "Escape") {
                  setNewTaskTitle("")
                  setIsAddingTask(false)
                }
              }}
              autoFocus
            />
            <div className="flex space-x-2">
              <Button size="sm" onClick={handleAddTask}>
                Add
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  setNewTaskTitle("")
                  setIsAddingTask(false)
                }}
              >
                Cancel
              </Button>
            </div>
          </div>
        ) : (
          <Button
            variant="ghost"
            className="w-full mt-2 text-muted-foreground"
            size="sm"
            onClick={() => setIsAddingTask(true)}
          >
            <Plus className="h-4 w-4 mr-1" /> Add Task
          </Button>
        )}
      </CardContent>

<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Column</DialogTitle>
          </DialogHeader>
          <p>
            Are you sure you want to delete the column "{column.title}"? This will also delete all tasks in this column.
          </p>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDeleteColumn}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/kanban/filter-bar.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { getAllTags, getAllUsers } from "@/lib/actions/kanban-actions"
import { useKanban } from "@/context/kanban-context"
import { Filter, Download, Plus, Moon, Sun } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog"
import { addColumn } from "@/lib/actions/kanban-actions"

interface Tag {
  id: number
  name: string
  color: string
}

interface User {
  id: number
  name: string
  avatarUrl: string | null
}

export function FilterBar({ onExport }: { onExport: () => void }) {
  const { filters, setFilters, isDarkMode, setIsDarkMode } = useKanban()
  const [tags, setTags] = useState<Tag[]>([])
  const [users, setUsers] = useState<User[]>([])
  const [isAddColumnDialogOpen, setIsAddColumnDialogOpen] = useState(false)
  const [newColumnTitle, setNewColumnTitle] = useState("")

useEffect(() => {
    const fetchFilterData = async () => {
      try {
        const tagsData = await getAllTags()
        const usersData = await getAllUsers()
        setTags(tagsData)
        setUsers(usersData)
      } catch (error) {
        console.error("Error fetching filter data:", error)
      }
    }

fetchFilterData()
  }, [])

const handleAddColumn = async () => {
    if (newColumnTitle.trim() === "") return

const result = await addColumn(newColumnTitle)
    if (result.success) {
      setNewColumnTitle("")
      setIsAddColumnDialogOpen(false)
      // We'll rely on revalidatePath to update the UI
    }
  }

return (
    <div className="flex items-center justify-between p-4 border-b">
      <div className="flex items-center space-x-2">
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm" className="h-8">
              <Filter className="h-4 w-4 mr-2" />
              Filters
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-80">
            <div className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">Filter by Tags</h4>
                <div className="space-y-2">
                  {tags.map((tag) => (
                    <div key={tag.id} className="flex items-center space-x-2">
                      <Checkbox
                        id={`tag-${tag.id}`}
                        checked={filters.tags.includes(tag.id)}
                        onCheckedChange={(checked) => {
                          setFilters((prev) => ({
                            ...prev,
                            tags: checked ? [...prev.tags, tag.id] : prev.tags.filter((id) => id !== tag.id),
                          }))
                        }}
                      />
                      <Label htmlFor={`tag-${tag.id}`} className="flex items-center text-sm font-normal">
                        <span className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: tag.color }}></span>
                        {tag.name}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <h4 className="font-medium mb-2">Filter by Assignee</h4>
                <div className="space-y-2">
                  {users.map((user) => (
                    <div key={user.id} className="flex items-center space-x-2">
                      <Checkbox
                        id={`user-${user.id}`}
                        checked={filters.users.includes(user.id)}
                        onCheckedChange={(checked) => {
                          setFilters((prev) => ({
                            ...prev,
                            users: checked ? [...prev.users, user.id] : prev.users.filter((id) => id !== user.id),
                          }))
                        }}
                      />
                      <Label htmlFor={`user-${user.id}`} className="text-sm font-normal">
                        {user.name}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <h4 className="font-medium mb-2">Filter by Due Date</h4>
                <RadioGroup
                  value={filters.dueDate}
                  onValueChange={(value: "all" | "overdue" | "today" | "upcoming") => {
                    setFilters((prev) => ({
                      ...prev,
                      dueDate: value,
                    }))
                  }}
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="all" id="due-all" />
                    <Label htmlFor="due-all" className="text-sm font-normal">
                      All
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="overdue" id="due-overdue" />
                    <Label htmlFor="due-overdue" className="text-sm font-normal">
                      Overdue
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="today" id="due-today" />
                    <Label htmlFor="due-today" className="text-sm font-normal">
                      Today
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="upcoming" id="due-upcoming" />
                    <Label htmlFor="due-upcoming" className="text-sm font-normal">
                      Upcoming
                    </Label>
                  </div>
                </RadioGroup>
              </div>

<Button
                variant="outline"
                size="sm"
                onClick={() => {
                  setFilters({
                    tags: [],
                    users: [],
                    dueDate: "all",
                  })
                }}
              >
                Clear Filters
              </Button>
            </div>
          </PopoverContent>
        </Popover>

<Dialog open={isAddColumnDialogOpen} onOpenChange={setIsAddColumnDialogOpen}>
          <DialogTrigger asChild>
            <Button variant="outline" size="sm" className="h-8">
              <Plus className="h-4 w-4 mr-2" />
              Add Column
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add New Column</DialogTitle>
            </DialogHeader>
            <div className="py-4">
              <Label htmlFor="column-title">Column Title</Label>
              <Input
                id="column-title"
                value={newColumnTitle}
                onChange={(e) => setNewColumnTitle(e.target.value)}
                placeholder="Enter column title..."
                className="mt-2"
              />
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddColumnDialogOpen(false)}>
                Cancel
              </Button>
              <Button onClick={handleAddColumn}>Add Column</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

<div className="flex items-center space-x-2">
        <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => setIsDarkMode(!isDarkMode)}>
          {isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          <span className="sr-only">Toggle dark mode</span>
        </Button>

<Button variant="outline" size="sm" className="h-8" onClick={onExport}>
          <Download className="h-4 w-4 mr-2" />
          Export
        </Button>
      </div>
    </div>
  )
}

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

import type React from "react"

import { useState } from "react"
import { Column } from "./column"
import { FilterBar } from "./filter-bar"
import { useKanban } from "@/context/kanban-context"
import { updateTaskStatus, exportKanbanData } from "@/lib/actions/kanban-actions"

export function KanbanBoard() {
  const { filteredColumns, setColumns } = useKanban()
  const [draggedTaskId, setDraggedTaskId] = useState<number | null>(null)
  const [sourceColumnId, setSourceColumnId] = useState<number | null>(null)

const handleDragStart = (e: React.DragEvent, taskId: number, columnId: number) => {
    setDraggedTaskId(taskId)
    setSourceColumnId(columnId)
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
  }

const handleDrop = async (e: React.DragEvent, targetColumnId: number) => {
    e.preventDefault()

if (draggedTaskId === null || sourceColumnId === null) return

// Find the task in the source column
    const sourceColumn = filteredColumns.find((col) => col.id === sourceColumnId)
    if (!sourceColumn) return

const taskIndex = sourceColumn.tasks.findIndex((task) => task.id === draggedTaskId)
    if (taskIndex === -1) return

const task = sourceColumn.tasks[taskIndex]

// Calculate new order in target column
    const targetColumn = filteredColumns.find((col) => col.id === targetColumnId)
    if (!targetColumn) return

const newOrder = targetColumn.tasks.length

// Update task status in the database
    const result = await updateTaskStatus(draggedTaskId, targetColumnId, newOrder)

if (result.success) {
      // Update local state
      setColumns((prevColumns) => {
        return prevColumns.map((column) => {
          // Remove task from source column
          if (column.id === sourceColumnId) {
            return {
              ...column,
              tasks: column.tasks.filter((t) => t.id !== draggedTaskId),
            }
          }

// Add task to target column
          if (column.id === targetColumnId) {
            // Determine the new status based on the column
            let newStatus: "todo" | "in_progress" | "done"
            if (column.title.toLowerCase().includes("do")) {
              newStatus = "todo"
            } else if (column.title.toLowerCase().includes("progress")) {
              newStatus = "in_progress"
            } else {
              newStatus = "done"
            }

return {
              ...column,
              tasks: [...column.tasks, { ...task, status: newStatus, columnId: targetColumnId, order: newOrder }],
            }
          }

return column
        })
      })
    }

setDraggedTaskId(null)
    setSourceColumnId(null)
  }

const handleExport = async () => {
    try {
      const data = await exportKanbanData()

// Convert data to CSV
      const headers = Object.keys(data[0]).join(",")
      const rows = data.map((row) => Object.values(row).join(","))
      const csv = [headers, ...rows].join("\n")

// Create a blob and download
      const blob = new Blob([csv], { type: "text/csv" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `kanban-export-${new Date().toISOString().split("T")[0]}.csv`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
    } catch (error) {
      console.error("Error exporting data:", error)
    }
  }

return (
    <div className="flex flex-col h-full">
      <FilterBar onExport={handleExport} />
      <div className="flex-1 overflow-x-auto p-4">
        <div className="flex space-x-4 min-h-[calc(100vh-10rem)]">
          {filteredColumns.map((column) => (
            <Column
              key={column.id}
              column={column}
              onDragStart={handleDragStart}
              onDragOver={handleDragOver}
              onDrop={handleDrop}
            />
          ))}
        </div>
      </div>
    </div>
  )
}

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

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

export const metadata: Metadata = {
  title: "Kanban Board",
  description: "A fully functional Kanban board built with Next.js",
}

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="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))",
        },
        warning: {
          DEFAULT: "hsl(38, 92%, 50%)",
          foreground: "hsl(0, 0%, 100%)",
        },
      },
      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="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

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

[V0_FILE]typescriptreact:file="env-template.txt" isMerged="true"
# Copy this file to .env.local and fill in the values
DATABASE_URL="postgresql://username:password@host:port/database?sslmode=require"

[V0_FILE]typescriptreact:file="lib/db/init.ts" isEdit="true"
import { db } from "./index"
import { sql } from "drizzle-orm"

export async function initDatabase() {
  try {
    console.log("Initializing database...")

// First check if the status enum type already exists
    const checkEnumTypeResult = await db.execute(sql`
      SELECT EXISTS (
        SELECT 1 FROM pg_type 
        WHERE typname = 'status'
      ) as "exists";
    `)

const enumExists = checkEnumTypeResult.rows[0]?.exists === true

// Only create the enum if it doesn't exist
    if (!enumExists) {
      try {
        await db.execute(sql`CREATE TYPE status AS ENUM ('todo', 'in_progress', 'done');`)
        console.log("Created status enum type")
      } catch (enumError) {
        // If there's an error but it's not because the type already exists, rethrow
        if (!(enumError instanceof Error && enumError.message.includes("already exists"))) {
          throw enumError
        }
        console.log("Status enum type already exists")
      }
    } else {
      console.log("Status enum type already exists")
    }

// Create users table if it doesn't exist
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS users (
        id SERIAL PRIMARY KEY,
        name TEXT NOT NULL,
        email TEXT NOT NULL UNIQUE,
        avatar_url TEXT,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
      );
    `)

// Create columns table if it doesn't exist
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS columns (
        id SERIAL PRIMARY KEY,
        title TEXT NOT NULL,
        "order" INTEGER NOT NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
      );
    `)

// Create tasks table if it doesn't exist
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS tasks (
        id SERIAL PRIMARY KEY,
        title TEXT NOT NULL,
        description TEXT,
        status status NOT NULL DEFAULT 'todo',
        due_date TIMESTAMP,
        user_id INTEGER REFERENCES users(id),
        column_id INTEGER REFERENCES columns(id),
        "order" INTEGER NOT NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
      );
    `)

// Create tags table if it doesn't exist
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS tags (
        id SERIAL PRIMARY KEY,
        name TEXT NOT NULL UNIQUE,
        color TEXT NOT NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
      );
    `)

// Create tasks_tags table if it doesn't exist
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS tasks_tags (
        id SERIAL PRIMARY KEY,
        task_id INTEGER REFERENCES tasks(id) NOT NULL,
        tag_id INTEGER REFERENCES tags(id) NOT NULL
      );
    `)

console.log("Database initialized successfully")
    return true
  } catch (error) {
    console.error("Error initializing database:", error)
    return false
  }
}

[V0_FILE]typescriptreact:file="lib/db/index.ts" isFixed="true" isEdit="true" isQuickEdit="true"
import { drizzle } from "drizzle-orm/neon-http"
import { neon } from "@neondatabase/serverless"
import * as schema from "./schema"

// Add error handling for database connection
let db: ReturnType<typeof drizzle>

try {
  if (!process.env.DATABASE_URL) {
    console.warn("DATABASE_URL is not set. Using mock data.")
    // Create a dummy db object that will be replaced with mock functionality
    db = {} as ReturnType<typeof drizzle>
  } else {
    const sql = neon(process.env.DATABASE_URL)
    db = drizzle(sql, { schema })

// Add a simple execute method for raw SQL if it doesn't exist
    if (!("execute" in db)) {
      ;(db as any).execute = async (query: any) => {
        return await sql(query.text, ...query.values)
      }
    }
  }
} catch (error) {
  console.error("Failed to initialize database connection:", error)
  // Create a dummy db object that will be replaced with mock functionality
  db = {} as ReturnType<typeof drizzle>
}

export { db }

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import { getKanbanData } from "@/lib/actions/kanban-actions"
import { KanbanProvider } from "@/context/kanban-context"
import { KanbanBoard } from "@/components/kanban/kanban-board"
import { initDatabase } from "@/lib/db/init"

export default async function Home() {
  let initialData
  let dbInitialized = false
  let dbError = null

try {
    // Try to initialize the database if DATABASE_URL is set
    if (process.env.DATABASE_URL) {
      try {
        dbInitialized = await initDatabase()
      } catch (initError) {
        console.error("Error initializing database:", initError)
        dbError = initError instanceof Error ? initError.message : "Unknown error"
      }
    }

initialData = await getKanbanData()
  } catch (error) {
    console.error("Error loading Kanban data:", error)
    dbError = error instanceof Error ? error.message : "Unknown error"
    // Provide fallback data if getKanbanData fails
    initialData = []
  }

return (
    <main className="min-h-screen bg-background">
      <div className="container mx-auto py-4">
        <h1 className="text-2xl font-bold mb-4">Kanban Board</h1>

{!process.env.DATABASE_URL && (
          <div className="mb-4 p-4 bg-yellow-100 text-yellow-800 rounded-md">
            <p className="font-medium">Database Not Connected</p>
            <p className="text-sm">
              The application is running in demo mode with mock data. To use a real database, set the DATABASE_URL
              environment variable.
            </p>
          </div>
        )}

{process.env.DATABASE_URL && !dbInitialized && (
          <div className="mb-4 p-4 bg-red-100 text-red-800 rounded-md">
            <p className="font-medium">Database Initialization Failed</p>
            <p className="text-sm">
              Failed to initialize the database. The application is running with mock data.
              {dbError && <span className="block mt-1">Error: {dbError}</span>}
            </p>
            <div className="mt-2">
              <a href="/api/init" className="text-sm underline" target="_blank" rel="noopener noreferrer">
                Try to initialize database manually
              </a>
              {" | "}
              <a href="/api/seed" className="text-sm underline" target="_blank" rel="noopener noreferrer">
                Try to seed database manually
              </a>
            </div>
          </div>
        )}

<KanbanProvider initialData={initialData || []}>
          <KanbanBoard />
        </KanbanProvider>
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/api/init/route.ts" isEdit="true"
import { NextResponse } from "next/server"
import { initDatabase } from "@/lib/db/init"

export async function GET() {
  try {
    // Check if DATABASE_URL is set
    if (!process.env.DATABASE_URL) {
      return NextResponse.json({ success: false, error: "DATABASE_URL is not set" }, { status: 400 })
    }

try {
      const initialized = await initDatabase()
      if (!initialized) {
        return NextResponse.json({ success: false, error: "Failed to initialize database" }, { status: 500 })
      }
    } catch (error) {
      return NextResponse.json(
        {
          success: false,
          error: "Error initializing database",
          details: error instanceof Error ? error.message : "Unknown error",
        },
        { status: 500 },
      )
    }

return NextResponse.json({ success: true, message: "Database initialized successfully" })
  } catch (error) {
    console.error("Error initializing database:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Failed to initialize database",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from bunsdev

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bunsdev

More Templates Like This