- {STATUSES.map(status => (
+ {statusesWithMeta.map(status => (
t.status === status.key)}
allTasks={allTasks}
projectId={projectId}
onUpdate={loadTasks}
onDrop={handleDrop}
onDragOver={handleDragOver}
+ expandedCards={expandedCards}
+ setExpandedCards={setExpandedCards}
+ projectStatuses={statuses}
/>
))}
diff --git a/frontend/src/components/ProjectSettings.jsx b/frontend/src/components/ProjectSettings.jsx
new file mode 100644
index 0000000..ac03370
--- /dev/null
+++ b/frontend/src/components/ProjectSettings.jsx
@@ -0,0 +1,298 @@
+import { useState, useEffect } from 'react'
+import { X, GripVertical, Plus, Trash2, Check, AlertTriangle } from 'lucide-react'
+import { updateProject, getProjectTasks } from '../utils/api'
+
+function ProjectSettings({ project, onClose, onUpdate }) {
+ const [statuses, setStatuses] = useState(project.statuses || [])
+ const [editingIndex, setEditingIndex] = useState(null)
+ const [editingValue, setEditingValue] = useState('')
+ const [draggedIndex, setDraggedIndex] = useState(null)
+ const [error, setError] = useState('')
+ const [taskCounts, setTaskCounts] = useState({})
+ const [deleteWarning, setDeleteWarning] = useState(null)
+
+ useEffect(() => {
+ loadTaskCounts()
+ }, [])
+
+ const loadTaskCounts = async () => {
+ try {
+ const tasks = await getProjectTasks(project.id)
+ const counts = {}
+ statuses.forEach(status => {
+ counts[status] = tasks.filter(t => t.status === status).length
+ })
+ setTaskCounts(counts)
+ } catch (err) {
+ console.error('Failed to load task counts:', err)
+ }
+ }
+
+ const handleDragStart = (index) => {
+ setDraggedIndex(index)
+ }
+
+ const handleDragOver = (e, index) => {
+ e.preventDefault()
+ if (draggedIndex === null || draggedIndex === index) return
+
+ const newStatuses = [...statuses]
+ const draggedItem = newStatuses[draggedIndex]
+ newStatuses.splice(draggedIndex, 1)
+ newStatuses.splice(index, 0, draggedItem)
+
+ setStatuses(newStatuses)
+ setDraggedIndex(index)
+ }
+
+ const handleDragEnd = () => {
+ setDraggedIndex(null)
+ }
+
+ const handleAddStatus = () => {
+ const newStatus = `new_status_${Date.now()}`
+ setStatuses([...statuses, newStatus])
+ setEditingIndex(statuses.length)
+ setEditingValue(newStatus)
+ }
+
+ const handleStartEdit = (index) => {
+ setEditingIndex(index)
+ setEditingValue(statuses[index])
+ }
+
+ const handleSaveEdit = () => {
+ if (!editingValue.trim()) {
+ setError('Status name cannot be empty')
+ return
+ }
+
+ const trimmedValue = editingValue.trim().toLowerCase().replace(/\s+/g, '_')
+
+ if (statuses.some((s, i) => i !== editingIndex && s === trimmedValue)) {
+ setError('Status name already exists')
+ return
+ }
+
+ const newStatuses = [...statuses]
+ newStatuses[editingIndex] = trimmedValue
+ setStatuses(newStatuses)
+ setEditingIndex(null)
+ setError('')
+ }
+
+ const handleCancelEdit = () => {
+ // If it's a new status that was never saved, remove it
+ if (statuses[editingIndex].startsWith('new_status_')) {
+ const newStatuses = statuses.filter((_, i) => i !== editingIndex)
+ setStatuses(newStatuses)
+ }
+ setEditingIndex(null)
+ setError('')
+ }
+
+ const handleDeleteStatus = (index) => {
+ const statusToDelete = statuses[index]
+ const taskCount = taskCounts[statusToDelete] || 0
+
+ if (taskCount > 0) {
+ setDeleteWarning({ index, status: statusToDelete, count: taskCount })
+ return
+ }
+
+ if (statuses.length === 1) {
+ setError('Cannot delete the last status')
+ return
+ }
+
+ const newStatuses = statuses.filter((_, i) => i !== index)
+ setStatuses(newStatuses)
+ }
+
+ const handleSave = async () => {
+ if (statuses.length === 0) {
+ setError('Project must have at least one status')
+ return
+ }
+
+ if (editingIndex !== null) {
+ setError('Please save or cancel the status you are editing')
+ return
+ }
+
+ try {
+ await updateProject(project.id, { statuses })
+ onUpdate()
+ onClose()
+ } catch (err) {
+ setError(err.message)
+ }
+ }
+
+ return (
+
+ )
+}
+
+export default ProjectSettings
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
new file mode 100644
index 0000000..74714ce
--- /dev/null
+++ b/frontend/src/components/SearchBar.jsx
@@ -0,0 +1,263 @@
+import { useState, useEffect, useRef } from 'react'
+import { Search, X, Flag } from 'lucide-react'
+import { searchTasks, getProjects } from '../utils/api'
+import { formatTime } from '../utils/format'
+import { useNavigate } from 'react-router-dom'
+
+const FLAG_COLORS = {
+ red: 'text-red-500',
+ orange: 'text-orange-500',
+ yellow: 'text-yellow-500',
+ green: 'text-green-500',
+ blue: 'text-blue-500',
+ purple: 'text-purple-500',
+ pink: 'text-pink-500'
+}
+
+function SearchBar() {
+ const [query, setQuery] = useState('')
+ const [results, setResults] = useState([])
+ const [projects, setProjects] = useState([])
+ const [selectedProjects, setSelectedProjects] = useState([])
+ const [isSearching, setIsSearching] = useState(false)
+ const [showResults, setShowResults] = useState(false)
+ const [showProjectFilter, setShowProjectFilter] = useState(false)
+ const searchRef = useRef(null)
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ loadProjects()
+ }, [])
+
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (searchRef.current && !searchRef.current.contains(event.target)) {
+ setShowResults(false)
+ setShowProjectFilter(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [])
+
+ const loadProjects = async () => {
+ try {
+ const data = await getProjects()
+ setProjects(data)
+ } catch (err) {
+ console.error('Failed to load projects:', err)
+ }
+ }
+
+ const handleSearch = async (searchQuery) => {
+ if (!searchQuery.trim()) {
+ setResults([])
+ setShowResults(false)
+ return
+ }
+
+ setIsSearching(true)
+ try {
+ const projectIds = selectedProjects.length > 0 ? selectedProjects : null
+ const data = await searchTasks(searchQuery, projectIds)
+ setResults(data)
+ setShowResults(true)
+ } catch (err) {
+ console.error('Search failed:', err)
+ setResults([])
+ } finally {
+ setIsSearching(false)
+ }
+ }
+
+ const handleQueryChange = (e) => {
+ const newQuery = e.target.value
+ setQuery(newQuery)
+ }
+
+ // Debounced search effect
+ useEffect(() => {
+ if (!query.trim()) {
+ setResults([])
+ setShowResults(false)
+ return
+ }
+
+ const debounceMs = parseInt(import.meta.env.VITE_SEARCH_DEBOUNCE_MS || '300')
+ const timeoutId = setTimeout(() => {
+ handleSearch(query)
+ }, debounceMs)
+
+ return () => clearTimeout(timeoutId)
+ }, [query, selectedProjects])
+
+ const toggleProjectFilter = (projectId) => {
+ setSelectedProjects(prev => {
+ if (prev.includes(projectId)) {
+ return prev.filter(id => id !== projectId)
+ } else {
+ return [...prev, projectId]
+ }
+ })
+ }
+
+ const handleTaskClick = (task) => {
+ navigate(`/project/${task.project_id}`)
+ setShowResults(false)
+ setQuery('')
+ }
+
+ const clearSearch = () => {
+ setQuery('')
+ setResults([])
+ setShowResults(false)
+ }
+
+ return (
+
+ )
+}
+
+export default SearchBar
diff --git a/frontend/src/components/TaskForm.jsx b/frontend/src/components/TaskForm.jsx
new file mode 100644
index 0000000..1efb441
--- /dev/null
+++ b/frontend/src/components/TaskForm.jsx
@@ -0,0 +1,182 @@
+import { useState } from 'react'
+import { Flag } from 'lucide-react'
+
+const FLAG_COLORS = [
+ { name: null, label: 'None', color: 'bg-gray-700' },
+ { name: 'red', label: 'Red', color: 'bg-red-500' },
+ { name: 'orange', label: 'Orange', color: 'bg-orange-500' },
+ { name: 'yellow', label: 'Yellow', color: 'bg-yellow-500' },
+ { name: 'green', label: 'Green', color: 'bg-green-500' },
+ { name: 'blue', label: 'Blue', color: 'bg-blue-500' },
+ { name: 'purple', label: 'Purple', color: 'bg-purple-500' },
+ { name: 'pink', label: 'Pink', color: 'bg-pink-500' }
+]
+
+// Helper to format status label
+const formatStatusLabel = (status) => {
+ return status.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
+function TaskForm({ onSubmit, onCancel, submitLabel = "Add", projectStatuses = null, defaultStatus = "backlog" }) {
+ const [title, setTitle] = useState('')
+ const [description, setDescription] = useState('')
+ const [tags, setTags] = useState('')
+ const [hours, setHours] = useState('')
+ const [minutes, setMinutes] = useState('')
+ const [flagColor, setFlagColor] = useState(null)
+ const [status, setStatus] = useState(defaultStatus)
+
+ // Use provided statuses or fall back to defaults
+ const statuses = projectStatuses || ['backlog', 'in_progress', 'on_hold', 'done']
+
+ const handleSubmit = (e) => {
+ e.preventDefault()
+ if (!title.trim()) return
+
+ // Convert hours and minutes to total minutes
+ const totalMinutes = (parseInt(hours) || 0) * 60 + (parseInt(minutes) || 0)
+
+ // Parse tags
+ const tagList = tags
+ ? tags.split(',').map(t => t.trim()).filter(t => t.length > 0)
+ : null
+
+ const taskData = {
+ title: title.trim(),
+ description: description.trim() || null,
+ tags: tagList && tagList.length > 0 ? tagList : null,
+ estimated_minutes: totalMinutes > 0 ? totalMinutes : null,
+ flag_color: flagColor,
+ status: status
+ }
+
+ onSubmit(taskData)
+ }
+
+ return (
+