Trey t
264107e3bf
Layout & Navigation: - Tighten max-width to 6xl, adjust padding, add warm gradient overlay - Add icons to desktop nav links, responsive header height, stronger blur - Active pill highlight on mobile nav icons - Fix middleware blocking static assets (logo.png) behind auth Dashboard restructure: - Merge quick actions into hero area as inline pills - Rename "Coming Up" to "Needs Attention", exclude completed tasks - Promote task cards to #2 with richer card design (2-col grid, colored date badges) - Drop "Your Homes" to #3 with accent bars and larger icons Card redesigns: - Residence cards: accent bar, home icon, warm hover shadow - Contractor cards: letter avatar, text contact links, separator - Document cards: type-colored accent bar, restructured footer - Task cards: warm hover shadow - Empty states: larger icon container, gradient bg, rounded CTA Residence detail page: - Add full kanban board with drag-and-drop for task management - Add "Add Task" button pre-filling residence on task form - Replace broken Users stat with Overdue/Completed stats - Compute task summary from kanban columns (always accurate) Data accuracy fixes: - Fix getMyResidences() to fetch kanban data in parallel and compute real per-residence task counts instead of hardcoding zeros - Task form accepts defaultResidenceId prop for pre-filling - New task page reads residence_id from URL, redirects back after create Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Calendar, DollarSign } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useDataProvider } from "@/lib/demo/data-provider-context";
|
|
import type { TaskResponse } from "@/lib/api/tasks";
|
|
|
|
interface TaskCardProps {
|
|
task: TaskResponse;
|
|
isDragging?: boolean;
|
|
}
|
|
|
|
export function TaskCard({ task, isDragging }: TaskCardProps) {
|
|
const { basePath } = useDataProvider();
|
|
return (
|
|
<Link href={`${basePath}/tasks/${task.id}`}>
|
|
<div
|
|
className={cn(
|
|
"rounded-xl border bg-card p-3.5 space-y-2 transition-all duration-200 hover:shadow-[var(--shadow-warm-sm)] cursor-grab",
|
|
isDragging && "shadow-lg ring-2 ring-primary rotate-[1deg] scale-[1.02]"
|
|
)}
|
|
>
|
|
<div className="font-medium text-sm leading-snug line-clamp-2">
|
|
{task.title}
|
|
</div>
|
|
|
|
{task.residence_name && (
|
|
<p className="text-xs text-muted-foreground/70 truncate">
|
|
{task.residence_name}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{task.priority && (
|
|
<Badge variant="outline" className="text-xs px-1.5 py-0 rounded-md">
|
|
{task.priority.icon && (
|
|
<span className="mr-0.5">{task.priority.icon}</span>
|
|
)}
|
|
{task.priority.name}
|
|
</Badge>
|
|
)}
|
|
{task.category && (
|
|
<Badge variant="secondary" className="text-xs px-1.5 py-0 rounded-md">
|
|
{task.category.icon && (
|
|
<span className="mr-0.5">{task.category.icon}</span>
|
|
)}
|
|
{task.category.name}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 text-xs text-muted-foreground/70">
|
|
{task.due_date && (
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="size-3" aria-hidden="true" />
|
|
<span className="sr-only">Due date:</span>
|
|
{new Date(task.due_date).toLocaleDateString()}
|
|
</span>
|
|
)}
|
|
{task.estimated_cost != null && task.estimated_cost > 0 && (
|
|
<span className="flex items-center gap-1">
|
|
<DollarSign className="size-3" aria-hidden="true" />
|
|
<span className="sr-only">Estimated cost:</span>
|
|
{task.estimated_cost.toFixed(2)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|