import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; const STATUSES = ["Todo", "In Progress", "Done"]; const PRIORITIES = ["Low", "Medium", "High", "Critical"]; const MEMBERS = ["Alice", "Bob", "Carol", "Dave", "Unassigned"]; const STATUS_COLORS = { "Todo": "bg-[#e8e8e8] text-[#0f172a]", "In Progress": "bg-[#3b6fd4] text-white", "Done": "bg-[#4a9e6b] text-[#0f172a]", }; const PRIORITY_COLORS = { "Low": "bg-[#e8e8e8] text-[#555]", "Medium": "bg-[#d4a800] text-[#0f172a]", "High": "bg-[#c2410c] text-white", "Critical": "bg-[#7f1d1d] text-white", }; function Spinner() { return ( ); } export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("team-task-board-v1"); const { doc, merge, submit } = useDocument({ type: "task", title: "", assignee: "Unassigned", priority: "Medium", status: "Todo", createdAt: Date.now(), }); const { docs: tasks } = useLiveQuery("type", { key: "task", descending: true }); const [filterStatus, setFilterStatus] = useState("All"); const [filterAssignee, setFilterAssignee] = useState("All"); const [aiPrompt, setAiPrompt] = useState(""); const [isLoading, setIsLoading] = useState(false); const [showForm, setShowForm] = useState(false); const filteredTasks = tasks.filter(t => { if (filterStatus !== "All" && t.status !== filterStatus) return false; if (filterAssignee !== "All" && t.assignee !== filterAssignee) return false; return true; }); const handleSubmit = (e) => { e.preventDefault(); if (!doc.title.trim()) return; merge({ createdAt: Date.now() }); submit(); setShowForm(false); }; const cycleStatus = (task) => { const idx = STATUSES.indexOf(task.status); const next = STATUSES[(idx + 1) % STATUSES.length]; database.put({ ...task, status: next }); }; const deleteTask = (task) => { database.del(task._id); }; const handleAI = async () => { if (!aiPrompt.trim()) return; setIsLoading(true); try { const res = await callAI( `Generate 5 actionable team tasks for this project or goal: "${aiPrompt}". Each task should have a title, suggested assignee from [Alice, Bob, Carol, Dave], priority (Low/Medium/High/Critical), and status "Todo".`, { schema: { properties: { tasks: { type: "array", items: { type: "object", properties: { title: { type: "string" }, assignee: { type: "string" }, priority: { type: "string" }, status: { type: "string" }, }, }, }, }, }, } ); const data = JSON.parse(res); for (const t of data.tasks) { await database.put({ type: "task", title: t.title, assignee: MEMBERS.includes(t.assignee) ? t.assignee : "Unassigned", priority: PRIORITIES.includes(t.priority) ? t.priority : "Medium", status: "Todo", createdAt: Date.now(), }); } setAiPrompt(""); } finally { setIsLoading(false); } }; const statCounts = STATUSES.reduce((acc, s) => { acc[s] = tasks.filter(t => t.status === s).length; return acc; }, {}); const c = { bg: "bg-[#f5f3ee]", card: "bg-white border-[3px] border-[#0f172a]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", ink: "text-[#0f172a]", muted: "text-[#6b7280]", accent: "bg-[#c2410c]", yellow: "bg-[#d4a800]", green: "bg-[#4a9e6b]", blue: "bg-[#3b6fd4]", btnPrimary: "bg-[#c2410c] text-white border-[3px] border-[#0f172a] shadow-[4px_4px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 uppercase tracking-wider text-xs font-bold px-4 py-2 rounded-[4px]", btnSecondary: "bg-[#d4a800] text-[#0f172a] border-[3px] border-[#0f172a] shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[5px_5px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 uppercase tracking-wider text-xs font-bold px-4 py-2 rounded-[4px]", btnGhost: "bg-white text-[#0f172a] border-[3px] border-[#0f172a] hover:shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 uppercase tracking-wider text-xs font-bold px-4 py-2 rounded-[4px]", input: "w-full border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 text-sm font-medium bg-white focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_#0f172a] transition-all duration-150", label: "block text-[0.65rem] uppercase tracking-[0.15em] text-[#6b7280] mb-1 font-semibold", }; return (

{/* Ambient background */}

{/* Nav */} {/* Stat Row */}

{[ { label: "Todo", count: statCounts["Todo"], hdr: "bg-[#c2410c] text-white" }, { label: "In Progress", count: statCounts["In Progress"], hdr: "bg-[#3b6fd4] text-white" }, { label: "Done", count: statCounts["Done"], hdr: "bg-[#4a9e6b] text-[#0f172a]" }, ].map(s => (

{s.label}

{s.count} tasks

))}

{/* New Task Form */} {showForm && (

New Task

)} {/* AI Generator */}

AI Task Generator

setAiPrompt(e.target.value)} placeholder="Describe your project goal..." onKeyDown={e => e.key === "Enter" && !isLoading && handleAI()} />

{/* Filters */}

Status

{["All", ...STATUSES].map(s => ( ))}

Assignee

{["All", ...MEMBERS].map(m => ( ))}

{/* Task List */}

{["Task", "Assignee", "Priority", "Status", ""].map((h, i) => (

{h}

))}

{filteredTasks.length === 0 && (

No tasks yet — create one above.

)} {filteredTasks.map(task => (

{task.title}

{task.assignee}

{task.priority}

))}

); }