diff --git a/ui/src/components/ProjectProperties.tsx b/ui/src/components/ProjectProperties.tsx index 277ee687..ea95968e 100644 --- a/ui/src/components/ProjectProperties.tsx +++ b/ui/src/components/ProjectProperties.tsx @@ -3,11 +3,12 @@ import { Link } from "@/lib/router"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import type { Project } from "@paperclipai/shared"; import { StatusBadge } from "./StatusBadge"; -import { formatDate } from "../lib/utils"; +import { cn, formatDate } from "../lib/utils"; import { goalsApi } from "../api/goals"; import { projectsApi } from "../api/projects"; import { useCompany } from "../context/CompanyContext"; import { queryKeys } from "../lib/queryKeys"; +import { statusBadge, statusBadgeDefault } from "../lib/status-colors"; import { Separator } from "@/components/ui/separator"; import { Button } from "@/components/ui/button"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; @@ -15,6 +16,14 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip import { ExternalLink, Github, Plus, Trash2, X } from "lucide-react"; import { ChoosePathButton } from "./PathInstructionsModal"; +const PROJECT_STATUSES = [ + { value: "backlog", label: "Backlog" }, + { value: "planned", label: "Planned" }, + { value: "in_progress", label: "In Progress" }, + { value: "completed", label: "Completed" }, + { value: "cancelled", label: "Cancelled" }, +]; + interface ProjectPropertiesProps { project: Project; onUpdate?: (data: Record) => void; @@ -31,6 +40,42 @@ function PropertyRow({ label, children }: { label: string; children: React.React ); } +function ProjectStatusPicker({ status, onChange }: { status: string; onChange: (status: string) => void }) { + const [open, setOpen] = useState(false); + const colorClass = statusBadge[status] ?? statusBadgeDefault; + + return ( + + + + + + {PROJECT_STATUSES.map((s) => ( + + ))} + + + ); +} + export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps) { const { selectedCompanyId } = useCompany(); const queryClient = useQueryClient(); @@ -212,7 +257,14 @@ export function ProjectProperties({ project, onUpdate }: ProjectPropertiesProps)
- + {onUpdate ? ( + onUpdate({ status })} + /> + ) : ( + + )} {project.leadAgentId && (