Trey t
5a50d77515
Adds sharing (residence share codes, join, user management, .casera file export/import), subscription status with feature comparison, notification preferences with bell icon, profile settings (edit info, change password, theme picker, delete account), onboarding wizard with create/join paths, enhanced dashboard with stats cards, Recharts completion chart, recent activity feed, and task report PDF download. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2489 lines
79 KiB
Markdown
2489 lines
79 KiB
Markdown
# Phase 2 — Core CRUD Implementation Plan
|
|
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
|
|
**Goal:** Build full CRUD for all 4 domains (Residences, Tasks, Contractors, Documents) with kanban board, form validation, file uploads, and proper cache invalidation.
|
|
|
|
**Architecture:** Each domain is independent and can be built in parallel by separate agents. A shared foundation layer (reusable UI components + mutation hooks) is built first, then 4 domain agents run concurrently. Each agent produces a self-contained feature that compiles and renders independently.
|
|
|
|
**Tech Stack:** Next.js 16 (App Router), TanStack Query v5, React Hook Form + Zod 4, shadcn/ui + Radix, Tailwind CSS 4, @dnd-kit (tasks kanban), Lucide icons.
|
|
|
|
---
|
|
|
|
## Execution Strategy: 6 Tasks, 4 Run in Parallel
|
|
|
|
```
|
|
Task 1: Shared Foundation (sequential — all domains depend on this)
|
|
↓
|
|
Task 2: Residences CRUD ─┐
|
|
Task 3: Tasks CRUD+Kanban ─┤ ← 4 parallel agents
|
|
Task 4: Contractors CRUD ─┤
|
|
Task 5: Documents CRUD ─┘
|
|
↓
|
|
Task 6: Integration + Verification (sequential — cross-domain wiring)
|
|
```
|
|
|
|
**Verification gate between layers:** Each task has a `npm run build` check. No task is complete until it compiles without errors.
|
|
|
|
---
|
|
|
|
## Task 1: Shared Foundation
|
|
|
|
**Files:**
|
|
- Create: `src/components/shared/page-header.tsx`
|
|
- Create: `src/components/shared/empty-state.tsx`
|
|
- Create: `src/components/shared/loading-skeleton.tsx`
|
|
- Create: `src/components/shared/error-banner.tsx`
|
|
- Create: `src/components/shared/confirm-dialog.tsx`
|
|
- Create: `src/components/shared/form-field.tsx`
|
|
- Create: `src/components/shared/lookup-select.tsx`
|
|
- Create: `src/components/shared/file-upload.tsx`
|
|
- Create: `src/components/shared/date-picker.tsx`
|
|
- Create: `src/components/shared/currency-input.tsx`
|
|
- Create: `src/components/shared/star-rating.tsx`
|
|
- Create: `src/components/ui/dialog.tsx` (add via shadcn)
|
|
- Create: `src/components/ui/select.tsx` (add via shadcn)
|
|
- Create: `src/components/ui/textarea.tsx` (add via shadcn)
|
|
- Create: `src/components/ui/tabs.tsx` (add via shadcn)
|
|
- Create: `src/components/ui/skeleton.tsx` (add via shadcn)
|
|
- Create: `src/components/ui/tooltip.tsx` (add via shadcn)
|
|
- Create: `src/components/ui/popover.tsx` (add via shadcn)
|
|
- Create: `src/components/ui/calendar.tsx` (add via shadcn)
|
|
- Create: `src/lib/hooks/use-contractors.ts`
|
|
- Create: `src/lib/hooks/use-documents.ts`
|
|
- Modify: `src/lib/hooks/index.ts` (add new hook exports)
|
|
|
|
### Step 1: Install missing shadcn components and @dnd-kit
|
|
|
|
```bash
|
|
cd myCribAPI-Web
|
|
npx shadcn@latest add dialog select textarea tabs skeleton tooltip popover calendar
|
|
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities date-fns
|
|
```
|
|
|
|
### Step 2: Create PageHeader component
|
|
|
|
```tsx
|
|
// src/components/shared/page-header.tsx
|
|
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Plus } from "lucide-react";
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
description?: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
actionLabel,
|
|
onAction,
|
|
children,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">{title}</h1>
|
|
{description && (
|
|
<p className="text-muted-foreground mt-1">{description}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{children}
|
|
{actionLabel && onAction && (
|
|
<Button onClick={onAction}>
|
|
<Plus className="size-4 mr-2" />
|
|
{actionLabel}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 3: Create EmptyState component
|
|
|
|
```tsx
|
|
// src/components/shared/empty-state.tsx
|
|
import { Button } from "@/components/ui/button";
|
|
import { LucideIcon, Plus } from "lucide-react";
|
|
|
|
interface EmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
}
|
|
|
|
export function EmptyState({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
actionLabel,
|
|
onAction,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
|
<div className="rounded-full bg-muted p-4 mb-4">
|
|
<Icon className="size-8 text-muted-foreground" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold">{title}</h3>
|
|
<p className="text-muted-foreground mt-1 max-w-sm">{description}</p>
|
|
{actionLabel && onAction && (
|
|
<Button onClick={onAction} className="mt-4">
|
|
<Plus className="size-4 mr-2" />
|
|
{actionLabel}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 4: Create LoadingSkeleton component
|
|
|
|
```tsx
|
|
// src/components/shared/loading-skeleton.tsx
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
interface LoadingSkeletonProps {
|
|
variant: "card-grid" | "list" | "detail" | "kanban";
|
|
count?: number;
|
|
}
|
|
|
|
export function LoadingSkeleton({ variant, count = 4 }: LoadingSkeletonProps) {
|
|
if (variant === "card-grid") {
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div key={i} className="rounded-lg border p-4 space-y-3">
|
|
<Skeleton className="h-5 w-3/4" />
|
|
<Skeleton className="h-4 w-1/2" />
|
|
<div className="flex gap-2 pt-2">
|
|
<Skeleton className="h-6 w-16 rounded-full" />
|
|
<Skeleton className="h-6 w-16 rounded-full" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (variant === "list") {
|
|
return (
|
|
<div className="space-y-3">
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div key={i} className="flex items-center gap-4 rounded-lg border p-4">
|
|
<Skeleton className="size-10 rounded-full" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-1/3" />
|
|
<Skeleton className="h-3 w-1/2" />
|
|
</div>
|
|
<Skeleton className="h-8 w-20" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (variant === "detail") {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Skeleton className="h-8 w-1/3" />
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="space-y-2">
|
|
<Skeleton className="h-3 w-20" />
|
|
<Skeleton className="h-5 w-full" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// kanban
|
|
return (
|
|
<div className="flex gap-4 overflow-x-auto pb-4">
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div key={i} className="min-w-[280px] rounded-lg border p-4 space-y-3">
|
|
<Skeleton className="h-5 w-24" />
|
|
<Skeleton className="h-24 w-full rounded-md" />
|
|
<Skeleton className="h-24 w-full rounded-md" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 5: Create ErrorBanner component
|
|
|
|
```tsx
|
|
// src/components/shared/error-banner.tsx
|
|
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { AlertTriangle } from "lucide-react";
|
|
|
|
interface ErrorBannerProps {
|
|
message?: string;
|
|
onRetry?: () => void;
|
|
}
|
|
|
|
export function ErrorBanner({
|
|
message = "Something went wrong. Please try again.",
|
|
onRetry,
|
|
}: ErrorBannerProps) {
|
|
return (
|
|
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 flex items-center gap-3">
|
|
<AlertTriangle className="size-5 text-destructive shrink-0" />
|
|
<p className="text-sm text-destructive flex-1">{message}</p>
|
|
{onRetry && (
|
|
<Button variant="outline" size="sm" onClick={onRetry}>
|
|
Retry
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 6: Create ConfirmDialog component
|
|
|
|
```tsx
|
|
// src/components/shared/confirm-dialog.tsx
|
|
"use client";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface ConfirmDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title: string;
|
|
description: string;
|
|
confirmLabel?: string;
|
|
variant?: "default" | "destructive";
|
|
loading?: boolean;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
description,
|
|
confirmLabel = "Confirm",
|
|
variant = "default",
|
|
loading = false,
|
|
onConfirm,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogDescription>{description}</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
|
|
Cancel
|
|
</Button>
|
|
<Button variant={variant} onClick={onConfirm} disabled={loading}>
|
|
{loading ? "..." : confirmLabel}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 7: Create FormField wrapper
|
|
|
|
```tsx
|
|
// src/components/shared/form-field.tsx
|
|
import { Label } from "@/components/ui/label";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FormFieldProps {
|
|
label: string;
|
|
htmlFor: string;
|
|
error?: string;
|
|
required?: boolean;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function FormField({
|
|
label,
|
|
htmlFor,
|
|
error,
|
|
required,
|
|
className,
|
|
children,
|
|
}: FormFieldProps) {
|
|
return (
|
|
<div className={cn("space-y-2", className)}>
|
|
<Label htmlFor={htmlFor}>
|
|
{label}
|
|
{required && <span className="text-destructive ml-1">*</span>}
|
|
</Label>
|
|
{children}
|
|
{error && <p className="text-sm text-destructive">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 8: Create LookupSelect component
|
|
|
|
```tsx
|
|
// src/components/shared/lookup-select.tsx
|
|
"use client";
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
|
|
interface LookupItem {
|
|
id: number;
|
|
name: string;
|
|
icon?: string;
|
|
}
|
|
|
|
interface LookupSelectProps {
|
|
items: LookupItem[];
|
|
value?: number;
|
|
onValueChange: (value: number | undefined) => void;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function LookupSelect({
|
|
items,
|
|
value,
|
|
onValueChange,
|
|
placeholder = "Select...",
|
|
disabled,
|
|
}: LookupSelectProps) {
|
|
return (
|
|
<Select
|
|
value={value != null ? String(value) : undefined}
|
|
onValueChange={(v) => onValueChange(v ? Number(v) : undefined)}
|
|
disabled={disabled}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={placeholder} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{items.map((item) => (
|
|
<SelectItem key={item.id} value={String(item.id)}>
|
|
{item.icon && <span className="mr-2">{item.icon}</span>}
|
|
{item.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 9: Create FileUpload component
|
|
|
|
```tsx
|
|
// src/components/shared/file-upload.tsx
|
|
"use client";
|
|
|
|
import { useCallback, useRef, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Upload, X, FileIcon } from "lucide-react";
|
|
|
|
interface FileUploadProps {
|
|
accept?: string;
|
|
multiple?: boolean;
|
|
maxSizeMB?: number;
|
|
files: File[];
|
|
onChange: (files: File[]) => void;
|
|
label?: string;
|
|
}
|
|
|
|
export function FileUpload({
|
|
accept = "image/*",
|
|
multiple = false,
|
|
maxSizeMB = 10,
|
|
files,
|
|
onChange,
|
|
label = "Upload files",
|
|
}: FileUploadProps) {
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const [error, setError] = useState<string>();
|
|
|
|
const handleFiles = useCallback(
|
|
(fileList: FileList) => {
|
|
setError(undefined);
|
|
const newFiles = Array.from(fileList);
|
|
const oversized = newFiles.find(
|
|
(f) => f.size > maxSizeMB * 1024 * 1024
|
|
);
|
|
if (oversized) {
|
|
setError(`File "${oversized.name}" exceeds ${maxSizeMB}MB limit`);
|
|
return;
|
|
}
|
|
onChange(multiple ? [...files, ...newFiles] : newFiles.slice(0, 1));
|
|
},
|
|
[files, maxSizeMB, multiple, onChange]
|
|
);
|
|
|
|
const removeFile = (index: number) => {
|
|
onChange(files.filter((_, i) => i !== index));
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div
|
|
className="border-2 border-dashed rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors"
|
|
onClick={() => inputRef.current?.click()}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
if (e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
|
|
}}
|
|
>
|
|
<Upload className="size-8 mx-auto text-muted-foreground mb-2" />
|
|
<p className="text-sm text-muted-foreground">{label}</p>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Drag & drop or click to browse (max {maxSizeMB}MB)
|
|
</p>
|
|
</div>
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept={accept}
|
|
multiple={multiple}
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
if (e.target.files?.length) handleFiles(e.target.files);
|
|
e.target.value = "";
|
|
}}
|
|
/>
|
|
{error && <p className="text-sm text-destructive">{error}</p>}
|
|
{files.length > 0 && (
|
|
<ul className="space-y-1">
|
|
{files.map((file, i) => (
|
|
<li key={i} className="flex items-center gap-2 text-sm rounded border p-2">
|
|
<FileIcon className="size-4 text-muted-foreground shrink-0" />
|
|
<span className="flex-1 truncate">{file.name}</span>
|
|
<span className="text-muted-foreground text-xs">
|
|
{(file.size / 1024).toFixed(0)}KB
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-6"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
removeFile(i);
|
|
}}
|
|
>
|
|
<X className="size-3" />
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 10: Create CurrencyInput component
|
|
|
|
```tsx
|
|
// src/components/shared/currency-input.tsx
|
|
"use client";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
import { forwardRef } from "react";
|
|
|
|
interface CurrencyInputProps
|
|
extends Omit<React.ComponentProps<typeof Input>, "value" | "onChange"> {
|
|
value?: number;
|
|
onChange: (value: number | undefined) => void;
|
|
}
|
|
|
|
export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
|
|
function CurrencyInput({ value, onChange, ...props }, ref) {
|
|
return (
|
|
<div className="relative">
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm">
|
|
$
|
|
</span>
|
|
<Input
|
|
ref={ref}
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
className="pl-7"
|
|
value={value ?? ""}
|
|
onChange={(e) => {
|
|
const v = e.target.value;
|
|
onChange(v === "" ? undefined : Number(v));
|
|
}}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
```
|
|
|
|
### Step 11: Create StarRating component
|
|
|
|
```tsx
|
|
// src/components/shared/star-rating.tsx
|
|
"use client";
|
|
|
|
import { Star } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface StarRatingProps {
|
|
value: number;
|
|
onChange?: (value: number) => void;
|
|
readonly?: boolean;
|
|
size?: "sm" | "md";
|
|
}
|
|
|
|
export function StarRating({
|
|
value,
|
|
onChange,
|
|
readonly = false,
|
|
size = "md",
|
|
}: StarRatingProps) {
|
|
const starSize = size === "sm" ? "size-4" : "size-5";
|
|
|
|
return (
|
|
<div className="flex gap-1">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<button
|
|
key={star}
|
|
type="button"
|
|
disabled={readonly}
|
|
className={cn(
|
|
"transition-colors",
|
|
!readonly && "cursor-pointer hover:text-yellow-400"
|
|
)}
|
|
onClick={() => onChange?.(star === value ? 0 : star)}
|
|
>
|
|
<Star
|
|
className={cn(
|
|
starSize,
|
|
star <= value
|
|
? "fill-yellow-400 text-yellow-400"
|
|
: "text-muted-foreground"
|
|
)}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 12: Create contractor and document query hooks
|
|
|
|
```typescript
|
|
// src/lib/hooks/use-contractors.ts
|
|
"use client";
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import * as contractorsApi from '@/lib/api/contractors';
|
|
|
|
export function useContractors() {
|
|
return useQuery({
|
|
queryKey: ['contractors'],
|
|
queryFn: () => contractorsApi.listContractors(),
|
|
});
|
|
}
|
|
|
|
export function useContractor(id: number) {
|
|
return useQuery({
|
|
queryKey: ['contractors', id],
|
|
queryFn: () => contractorsApi.getContractor(id),
|
|
enabled: !!id,
|
|
});
|
|
}
|
|
|
|
export function useContractorTasks(id: number) {
|
|
return useQuery({
|
|
queryKey: ['contractors', id, 'tasks'],
|
|
queryFn: () => contractorsApi.getContractorTasks(id),
|
|
enabled: !!id,
|
|
});
|
|
}
|
|
```
|
|
|
|
```typescript
|
|
// src/lib/hooks/use-documents.ts
|
|
"use client";
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import * as documentsApi from '@/lib/api/documents';
|
|
import type { DocumentListParams } from '@/lib/api/documents';
|
|
|
|
export function useDocuments(params?: DocumentListParams) {
|
|
return useQuery({
|
|
queryKey: ['documents', params],
|
|
queryFn: () => documentsApi.listDocuments(params),
|
|
});
|
|
}
|
|
|
|
export function useWarranties() {
|
|
return useQuery({
|
|
queryKey: ['documents', 'warranties'],
|
|
queryFn: () => documentsApi.listWarranties(),
|
|
});
|
|
}
|
|
|
|
export function useDocument(id: number) {
|
|
return useQuery({
|
|
queryKey: ['documents', id],
|
|
queryFn: () => documentsApi.getDocument(id),
|
|
enabled: !!id,
|
|
});
|
|
}
|
|
```
|
|
|
|
### Step 13: Update hooks barrel export
|
|
|
|
```typescript
|
|
// src/lib/hooks/index.ts
|
|
export * from './use-lookups';
|
|
export * from './use-auth';
|
|
export * from './use-residences';
|
|
export * from './use-tasks';
|
|
export * from './use-contractors';
|
|
export * from './use-documents';
|
|
```
|
|
|
|
### Step 14: Verify build
|
|
|
|
```bash
|
|
cd myCribAPI-Web && npm run build
|
|
```
|
|
|
|
Expected: Build succeeds with no type errors.
|
|
|
|
### Step 15: Commit
|
|
|
|
```bash
|
|
git add src/components/shared/ src/components/ui/ src/lib/hooks/use-contractors.ts src/lib/hooks/use-documents.ts src/lib/hooks/index.ts package.json package-lock.json
|
|
git commit -m "feat: add shared foundation components for Phase 2 CRUD
|
|
|
|
Shared components: PageHeader, EmptyState, LoadingSkeleton, ErrorBanner,
|
|
ConfirmDialog, FormField, LookupSelect, FileUpload, CurrencyInput, StarRating.
|
|
|
|
shadcn additions: dialog, select, textarea, tabs, skeleton, tooltip,
|
|
popover, calendar.
|
|
|
|
New hooks: useContractors, useDocuments with TanStack Query.
|
|
New deps: @dnd-kit/core, @dnd-kit/sortable, date-fns."
|
|
```
|
|
|
|
---
|
|
|
|
## Task 2: Residences CRUD (Parallel Agent 1)
|
|
|
|
**Depends on:** Task 1 (shared foundation)
|
|
|
|
**Files:**
|
|
- Create: `src/app/app/residences/page.tsx` (overwrite stub)
|
|
- Create: `src/app/app/residences/new/page.tsx`
|
|
- Create: `src/app/app/residences/[id]/page.tsx`
|
|
- Create: `src/app/app/residences/[id]/edit/page.tsx`
|
|
- Create: `src/components/residences/residence-card.tsx`
|
|
- Create: `src/components/residences/residence-form.tsx`
|
|
- Create: `src/components/residences/residence-summary.tsx`
|
|
- Modify: `src/lib/hooks/use-residences.ts` (add mutation hooks)
|
|
|
|
### Step 1: Add mutation hooks to use-residences.ts
|
|
|
|
Modify `src/lib/hooks/use-residences.ts`:
|
|
|
|
```typescript
|
|
"use client";
|
|
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import * as residencesApi from '@/lib/api/residences';
|
|
import type { CreateResidenceRequest, UpdateResidenceRequest } from '@/lib/api/residences';
|
|
|
|
export function useResidences() {
|
|
return useQuery({
|
|
queryKey: ['residences'],
|
|
queryFn: () => residencesApi.getMyResidences(),
|
|
});
|
|
}
|
|
|
|
export function useResidence(id: number) {
|
|
return useQuery({
|
|
queryKey: ['residences', id],
|
|
queryFn: () => residencesApi.getResidence(id),
|
|
enabled: !!id,
|
|
});
|
|
}
|
|
|
|
export function useCreateResidence() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (data: CreateResidenceRequest) => residencesApi.createResidence(data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['residences'] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useUpdateResidence(id: number) {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (data: UpdateResidenceRequest) => residencesApi.updateResidence(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['residences'] });
|
|
queryClient.invalidateQueries({ queryKey: ['residences', id] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useDeleteResidence() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => residencesApi.deleteResidence(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['residences'] });
|
|
},
|
|
});
|
|
}
|
|
```
|
|
|
|
### Step 2: Create ResidenceCard component
|
|
|
|
```tsx
|
|
// src/components/residences/residence-card.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Home, MapPin } from "lucide-react";
|
|
import type { MyResidenceResponse } from "@/lib/api/residences";
|
|
|
|
interface ResidenceCardProps {
|
|
data: MyResidenceResponse;
|
|
}
|
|
|
|
export function ResidenceCard({ data }: ResidenceCardProps) {
|
|
const { residence, task_summary } = data;
|
|
|
|
return (
|
|
<Link href={`/app/residences/${residence.id}`}>
|
|
<Card className="hover:shadow-md transition-shadow cursor-pointer h-full">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-start justify-between">
|
|
<CardTitle className="text-lg">{residence.name}</CardTitle>
|
|
<Home className="size-5 text-muted-foreground shrink-0" />
|
|
</div>
|
|
{residence.street_address && (
|
|
<p className="text-sm text-muted-foreground flex items-center gap-1">
|
|
<MapPin className="size-3" />
|
|
{residence.street_address}
|
|
{residence.city && `, ${residence.city}`}
|
|
</p>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-2">
|
|
{task_summary.overdue > 0 && (
|
|
<Badge variant="destructive">{task_summary.overdue} overdue</Badge>
|
|
)}
|
|
{task_summary.due_soon > 0 && (
|
|
<Badge variant="secondary">{task_summary.due_soon} due soon</Badge>
|
|
)}
|
|
<Badge variant="outline">{task_summary.total} total tasks</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 3: Create ResidenceForm component
|
|
|
|
```tsx
|
|
// src/components/residences/residence-form.tsx
|
|
"use client";
|
|
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { FormField } from "@/components/shared/form-field";
|
|
import { LookupSelect } from "@/components/shared/lookup-select";
|
|
import { useResidenceTypes } from "@/lib/hooks/use-lookups";
|
|
import type { ResidenceResponse } from "@/lib/api/residences";
|
|
|
|
const residenceSchema = z.object({
|
|
name: z.string().min(1, "Name is required"),
|
|
property_type_id: z.number().optional(),
|
|
street_address: z.string().optional(),
|
|
apartment_unit: z.string().optional(),
|
|
city: z.string().optional(),
|
|
state_province: z.string().optional(),
|
|
postal_code: z.string().optional(),
|
|
country: z.string().optional(),
|
|
bedrooms: z.number().min(0).optional(),
|
|
bathrooms: z.number().min(0).optional(),
|
|
square_footage: z.number().min(0).optional(),
|
|
year_built: z.number().min(1800).max(2100).optional(),
|
|
description: z.string().optional(),
|
|
});
|
|
|
|
type ResidenceFormData = z.infer<typeof residenceSchema>;
|
|
|
|
interface ResidenceFormProps {
|
|
residence?: ResidenceResponse;
|
|
onSubmit: (data: ResidenceFormData) => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function ResidenceForm({ residence, onSubmit, loading }: ResidenceFormProps) {
|
|
const { data: residenceTypes } = useResidenceTypes();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm<ResidenceFormData>({
|
|
resolver: zodResolver(residenceSchema),
|
|
defaultValues: residence
|
|
? {
|
|
name: residence.name,
|
|
property_type_id: residence.property_type_id ?? undefined,
|
|
street_address: residence.street_address || undefined,
|
|
apartment_unit: residence.apartment_unit || undefined,
|
|
city: residence.city || undefined,
|
|
state_province: residence.state_province || undefined,
|
|
postal_code: residence.postal_code || undefined,
|
|
country: residence.country || undefined,
|
|
bedrooms: residence.bedrooms ?? undefined,
|
|
bathrooms: residence.bathrooms ?? undefined,
|
|
square_footage: residence.square_footage ?? undefined,
|
|
year_built: residence.year_built ?? undefined,
|
|
description: residence.description || undefined,
|
|
}
|
|
: {},
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 max-w-2xl">
|
|
<FormField label="Name" htmlFor="name" error={errors.name?.message} required>
|
|
<Input id="name" {...register("name")} placeholder="My Home" />
|
|
</FormField>
|
|
|
|
<FormField label="Property Type" htmlFor="property_type_id" error={errors.property_type_id?.message}>
|
|
<LookupSelect
|
|
items={residenceTypes}
|
|
value={watch("property_type_id")}
|
|
onValueChange={(v) => setValue("property_type_id", v)}
|
|
placeholder="Select type..."
|
|
/>
|
|
</FormField>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<FormField label="Street Address" htmlFor="street_address">
|
|
<Input id="street_address" {...register("street_address")} />
|
|
</FormField>
|
|
<FormField label="Apt / Unit" htmlFor="apartment_unit">
|
|
<Input id="apartment_unit" {...register("apartment_unit")} />
|
|
</FormField>
|
|
<FormField label="City" htmlFor="city">
|
|
<Input id="city" {...register("city")} />
|
|
</FormField>
|
|
<FormField label="State / Province" htmlFor="state_province">
|
|
<Input id="state_province" {...register("state_province")} />
|
|
</FormField>
|
|
<FormField label="Postal Code" htmlFor="postal_code">
|
|
<Input id="postal_code" {...register("postal_code")} />
|
|
</FormField>
|
|
<FormField label="Country" htmlFor="country">
|
|
<Input id="country" {...register("country")} />
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
<FormField label="Bedrooms" htmlFor="bedrooms">
|
|
<Input id="bedrooms" type="number" min={0} {...register("bedrooms", { valueAsNumber: true })} />
|
|
</FormField>
|
|
<FormField label="Bathrooms" htmlFor="bathrooms">
|
|
<Input id="bathrooms" type="number" min={0} step={0.5} {...register("bathrooms", { valueAsNumber: true })} />
|
|
</FormField>
|
|
<FormField label="Sq Ft" htmlFor="square_footage">
|
|
<Input id="square_footage" type="number" min={0} {...register("square_footage", { valueAsNumber: true })} />
|
|
</FormField>
|
|
<FormField label="Year Built" htmlFor="year_built">
|
|
<Input id="year_built" type="number" min={1800} max={2100} {...register("year_built", { valueAsNumber: true })} />
|
|
</FormField>
|
|
</div>
|
|
|
|
<FormField label="Description" htmlFor="description">
|
|
<Textarea id="description" rows={3} {...register("description")} />
|
|
</FormField>
|
|
|
|
<div className="flex gap-3">
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? "Saving..." : residence ? "Update Residence" : "Create Residence"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 4: Create ResidenceSummary component
|
|
|
|
```tsx
|
|
// src/components/residences/residence-summary.tsx
|
|
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ClipboardList, Wrench, FileText, Users } from "lucide-react";
|
|
import type { ResidenceResponse, TaskSummary } from "@/lib/api/residences";
|
|
|
|
interface ResidenceSummaryProps {
|
|
residence: ResidenceResponse;
|
|
taskSummary?: TaskSummary;
|
|
}
|
|
|
|
export function ResidenceSummary({ residence, taskSummary }: ResidenceSummaryProps) {
|
|
const stats = [
|
|
{ label: "Total Tasks", value: taskSummary?.total ?? 0, icon: ClipboardList },
|
|
{ label: "In Progress", value: taskSummary?.in_progress ?? 0, icon: Wrench },
|
|
{ label: "Users", value: residence.user_count, icon: Users },
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
{stats.map((stat) => (
|
|
<Card key={stat.label}>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<stat.icon className="size-4" />
|
|
{stat.label}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-2xl font-bold">{stat.value}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 5: Build Residences List page
|
|
|
|
```tsx
|
|
// src/app/app/residences/page.tsx (overwrite stub)
|
|
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useResidences } from "@/lib/hooks/use-residences";
|
|
import { PageHeader } from "@/components/shared/page-header";
|
|
import { EmptyState } from "@/components/shared/empty-state";
|
|
import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
|
|
import { ErrorBanner } from "@/components/shared/error-banner";
|
|
import { ResidenceCard } from "@/components/residences/residence-card";
|
|
import { Home } from "lucide-react";
|
|
|
|
export default function ResidencesPage() {
|
|
const router = useRouter();
|
|
const { data, isLoading, error, refetch } = useResidences();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="Residences"
|
|
description="Manage your properties"
|
|
actionLabel="Add Residence"
|
|
onAction={() => router.push("/app/residences/new")}
|
|
/>
|
|
|
|
{isLoading && <LoadingSkeleton variant="card-grid" />}
|
|
{error && <ErrorBanner message={error.message} onRetry={() => refetch()} />}
|
|
|
|
{data && data.length === 0 && (
|
|
<EmptyState
|
|
icon={Home}
|
|
title="No residences yet"
|
|
description="Add your first property to start tracking tasks, contractors, and documents."
|
|
actionLabel="Add Residence"
|
|
onAction={() => router.push("/app/residences/new")}
|
|
/>
|
|
)}
|
|
|
|
{data && data.length > 0 && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{data.map((item) => (
|
|
<ResidenceCard key={item.residence.id} data={item} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 6: Build Create Residence page
|
|
|
|
```tsx
|
|
// src/app/app/residences/new/page.tsx
|
|
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useCreateResidence } from "@/lib/hooks/use-residences";
|
|
import { PageHeader } from "@/components/shared/page-header";
|
|
import { ResidenceForm } from "@/components/residences/residence-form";
|
|
|
|
export default function CreateResidencePage() {
|
|
const router = useRouter();
|
|
const createMutation = useCreateResidence();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title="New Residence" />
|
|
<ResidenceForm
|
|
loading={createMutation.isPending}
|
|
onSubmit={(data) => {
|
|
createMutation.mutate(data, {
|
|
onSuccess: (res) => router.push(`/app/residences/${res.id}`),
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 7: Build Residence Detail page
|
|
|
|
```tsx
|
|
// src/app/app/residences/[id]/page.tsx
|
|
"use client";
|
|
|
|
import { use } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useResidence, useDeleteResidence } from "@/lib/hooks/use-residences";
|
|
import { useResidences } from "@/lib/hooks/use-residences";
|
|
import { PageHeader } from "@/components/shared/page-header";
|
|
import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
|
|
import { ErrorBanner } from "@/components/shared/error-banner";
|
|
import { ResidenceSummary } from "@/components/residences/residence-summary";
|
|
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Pencil, Trash2, MapPin } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
export default function ResidenceDetailPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const { id } = use(params);
|
|
const residenceId = Number(id);
|
|
const router = useRouter();
|
|
const { data: residence, isLoading, error, refetch } = useResidence(residenceId);
|
|
const { data: residences } = useResidences();
|
|
const deleteMutation = useDeleteResidence();
|
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
|
|
|
const taskSummary = residences?.find(
|
|
(r) => r.residence.id === residenceId
|
|
)?.task_summary;
|
|
|
|
if (isLoading) return <LoadingSkeleton variant="detail" />;
|
|
if (error) return <ErrorBanner message={error.message} onRetry={() => refetch()} />;
|
|
if (!residence) return null;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title={residence.name}>
|
|
<Button variant="outline" onClick={() => router.push(`/app/residences/${residenceId}/edit`)}>
|
|
<Pencil className="size-4 mr-2" /> Edit
|
|
</Button>
|
|
{residence.is_owner && (
|
|
<Button variant="destructive" onClick={() => setDeleteOpen(true)}>
|
|
<Trash2 className="size-4 mr-2" /> Delete
|
|
</Button>
|
|
)}
|
|
</PageHeader>
|
|
|
|
{residence.street_address && (
|
|
<p className="text-muted-foreground flex items-center gap-1">
|
|
<MapPin className="size-4" />
|
|
{[residence.street_address, residence.city, residence.state_province, residence.postal_code]
|
|
.filter(Boolean)
|
|
.join(", ")}
|
|
</p>
|
|
)}
|
|
|
|
<ResidenceSummary residence={residence} taskSummary={taskSummary} />
|
|
|
|
{residence.description && (
|
|
<Card>
|
|
<CardHeader><CardTitle className="text-sm">Description</CardTitle></CardHeader>
|
|
<CardContent><p className="text-sm">{residence.description}</p></CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
|
|
{residence.bedrooms != null && (
|
|
<div><span className="text-muted-foreground">Bedrooms</span><p className="font-medium">{residence.bedrooms}</p></div>
|
|
)}
|
|
{residence.bathrooms != null && (
|
|
<div><span className="text-muted-foreground">Bathrooms</span><p className="font-medium">{residence.bathrooms}</p></div>
|
|
)}
|
|
{residence.square_footage != null && (
|
|
<div><span className="text-muted-foreground">Sq Ft</span><p className="font-medium">{residence.square_footage.toLocaleString()}</p></div>
|
|
)}
|
|
{residence.year_built != null && (
|
|
<div><span className="text-muted-foreground">Year Built</span><p className="font-medium">{residence.year_built}</p></div>
|
|
)}
|
|
</div>
|
|
|
|
<ConfirmDialog
|
|
open={deleteOpen}
|
|
onOpenChange={setDeleteOpen}
|
|
title="Delete Residence"
|
|
description={`Are you sure you want to delete "${residence.name}"? This cannot be undone.`}
|
|
confirmLabel="Delete"
|
|
variant="destructive"
|
|
loading={deleteMutation.isPending}
|
|
onConfirm={() => {
|
|
deleteMutation.mutate(residenceId, {
|
|
onSuccess: () => router.push("/app/residences"),
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 8: Build Edit Residence page
|
|
|
|
```tsx
|
|
// src/app/app/residences/[id]/edit/page.tsx
|
|
"use client";
|
|
|
|
import { use } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useResidence, useUpdateResidence } from "@/lib/hooks/use-residences";
|
|
import { PageHeader } from "@/components/shared/page-header";
|
|
import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
|
|
import { ErrorBanner } from "@/components/shared/error-banner";
|
|
import { ResidenceForm } from "@/components/residences/residence-form";
|
|
|
|
export default function EditResidencePage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const { id } = use(params);
|
|
const residenceId = Number(id);
|
|
const router = useRouter();
|
|
const { data: residence, isLoading, error, refetch } = useResidence(residenceId);
|
|
const updateMutation = useUpdateResidence(residenceId);
|
|
|
|
if (isLoading) return <LoadingSkeleton variant="detail" />;
|
|
if (error) return <ErrorBanner message={error.message} onRetry={() => refetch()} />;
|
|
if (!residence) return null;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title={`Edit ${residence.name}`} />
|
|
<ResidenceForm
|
|
residence={residence}
|
|
loading={updateMutation.isPending}
|
|
onSubmit={(data) => {
|
|
updateMutation.mutate(data, {
|
|
onSuccess: () => router.push(`/app/residences/${residenceId}`),
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 9: Verify build
|
|
|
|
```bash
|
|
cd myCribAPI-Web && npm run build
|
|
```
|
|
|
|
Expected: Build succeeds. All 4 residence routes render.
|
|
|
|
### Step 10: Commit
|
|
|
|
```bash
|
|
git add src/app/app/residences/ src/components/residences/ src/lib/hooks/use-residences.ts
|
|
git commit -m "feat: add Residences CRUD — list, detail, create, edit, delete"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 3: Tasks CRUD + Kanban Board (Parallel Agent 2)
|
|
|
|
**Depends on:** Task 1 (shared foundation)
|
|
|
|
**Files:**
|
|
- Create: `src/app/app/tasks/page.tsx` (overwrite stub)
|
|
- Create: `src/app/app/tasks/new/page.tsx`
|
|
- Create: `src/app/app/tasks/[id]/page.tsx`
|
|
- Create: `src/app/app/tasks/[id]/edit/page.tsx`
|
|
- Create: `src/app/app/tasks/[id]/complete/page.tsx`
|
|
- Create: `src/components/tasks/kanban-board.tsx`
|
|
- Create: `src/components/tasks/kanban-column.tsx`
|
|
- Create: `src/components/tasks/task-card.tsx`
|
|
- Create: `src/components/tasks/task-form.tsx`
|
|
- Create: `src/components/tasks/task-completion-form.tsx`
|
|
- Create: `src/components/tasks/task-actions-menu.tsx`
|
|
- Create: `src/components/tasks/template-search.tsx`
|
|
- Modify: `src/lib/hooks/use-tasks.ts` (add mutation hooks)
|
|
|
|
### Step 1: Add mutation hooks to use-tasks.ts
|
|
|
|
Modify `src/lib/hooks/use-tasks.ts`:
|
|
|
|
```typescript
|
|
"use client";
|
|
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import * as tasksApi from '@/lib/api/tasks';
|
|
import type { CreateTaskRequest, UpdateTaskRequest, CreateCompletionRequest } from '@/lib/api/tasks';
|
|
|
|
export function useTasks() {
|
|
return useQuery({
|
|
queryKey: ['tasks'],
|
|
queryFn: () => tasksApi.listTasks(),
|
|
});
|
|
}
|
|
|
|
export function useTasksByResidence(residenceId: number) {
|
|
return useQuery({
|
|
queryKey: ['tasks', 'by-residence', residenceId],
|
|
queryFn: () => tasksApi.getTasksByResidence(residenceId),
|
|
enabled: !!residenceId,
|
|
});
|
|
}
|
|
|
|
export function useTask(id: number) {
|
|
return useQuery({
|
|
queryKey: ['tasks', id],
|
|
queryFn: () => tasksApi.getTask(id),
|
|
enabled: !!id,
|
|
});
|
|
}
|
|
|
|
export function useTaskCompletions(taskId: number) {
|
|
return useQuery({
|
|
queryKey: ['tasks', taskId, 'completions'],
|
|
queryFn: () => tasksApi.getTaskCompletions(taskId),
|
|
enabled: !!taskId,
|
|
});
|
|
}
|
|
|
|
export function useCreateTask() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (data: CreateTaskRequest) => tasksApi.createTask(data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
queryClient.invalidateQueries({ queryKey: ['residences'] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useUpdateTask(id: number) {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (data: UpdateTaskRequest) => tasksApi.updateTask(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
queryClient.invalidateQueries({ queryKey: ['tasks', id] });
|
|
queryClient.invalidateQueries({ queryKey: ['residences'] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useDeleteTask() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => tasksApi.deleteTask(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
queryClient.invalidateQueries({ queryKey: ['residences'] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useMarkInProgress() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => tasksApi.markInProgress(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useCancelTask() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => tasksApi.cancelTask(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useArchiveTask() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => tasksApi.archiveTask(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useCreateCompletion() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: ({ data, images }: { data: { task_id: number; notes?: string; actual_cost?: number; completed_at?: string }; images: File[] }) =>
|
|
images.length > 0
|
|
? tasksApi.createCompletionWithImages(data, images)
|
|
: tasksApi.createCompletion(data as CreateCompletionRequest),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
|
queryClient.invalidateQueries({ queryKey: ['residences'] });
|
|
},
|
|
});
|
|
}
|
|
```
|
|
|
|
### Step 2: Create TaskCard component
|
|
|
|
```tsx
|
|
// src/components/tasks/task-card.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Calendar, DollarSign } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { TaskResponse } from "@/lib/api/tasks";
|
|
|
|
interface TaskCardProps {
|
|
task: TaskResponse;
|
|
isDragging?: boolean;
|
|
}
|
|
|
|
export function TaskCard({ task, isDragging }: TaskCardProps) {
|
|
return (
|
|
<Link href={`/app/tasks/${task.id}`}>
|
|
<Card className={cn(
|
|
"hover:shadow-md transition-shadow cursor-pointer",
|
|
isDragging && "shadow-lg ring-2 ring-primary"
|
|
)}>
|
|
<CardContent className="p-3 space-y-2">
|
|
<p className="font-medium text-sm leading-tight">{task.title}</p>
|
|
<p className="text-xs text-muted-foreground">{task.residence_name}</p>
|
|
<div className="flex flex-wrap gap-1">
|
|
{task.priority && (
|
|
<Badge variant="outline" className="text-xs">
|
|
{task.priority.icon} {task.priority.name}
|
|
</Badge>
|
|
)}
|
|
{task.category && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{task.category.icon} {task.category.name}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
|
{task.due_date && (
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="size-3" />
|
|
{new Date(task.due_date).toLocaleDateString()}
|
|
</span>
|
|
)}
|
|
{task.estimated_cost != null && (
|
|
<span className="flex items-center gap-1">
|
|
<DollarSign className="size-3" />
|
|
${task.estimated_cost}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 3: Create KanbanColumn component
|
|
|
|
```tsx
|
|
// src/components/tasks/kanban-column.tsx
|
|
"use client";
|
|
|
|
import { useDroppable } from "@dnd-kit/core";
|
|
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
import { useSortable } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { TaskCard } from "./task-card";
|
|
import { cn } from "@/lib/utils";
|
|
import type { KanbanColumn as KanbanColumnType } from "@/lib/api/tasks";
|
|
|
|
const columnColors: Record<string, string> = {
|
|
overdue: "bg-red-500",
|
|
due_today: "bg-orange-500",
|
|
due_soon: "bg-yellow-500",
|
|
upcoming: "bg-blue-500",
|
|
in_progress: "bg-green-500",
|
|
completed: "bg-gray-400",
|
|
};
|
|
|
|
interface SortableTaskProps {
|
|
task: { id: number; [key: string]: unknown };
|
|
}
|
|
|
|
function SortableTask({ task }: SortableTaskProps) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
id: `task-${task.id}`,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
};
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style} {...attributes} {...listeners}>
|
|
<TaskCard task={task as never} isDragging={isDragging} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface KanbanColumnProps {
|
|
column: KanbanColumnType;
|
|
}
|
|
|
|
export function KanbanColumn({ column }: KanbanColumnProps) {
|
|
const { setNodeRef, isOver } = useDroppable({
|
|
id: column.name,
|
|
});
|
|
|
|
const colorClass = columnColors[column.name] ?? "bg-gray-400";
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className={cn(
|
|
"min-w-[280px] max-w-[320px] flex-shrink-0 rounded-lg border bg-card p-3",
|
|
isOver && "ring-2 ring-primary/50"
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className={cn("size-2.5 rounded-full", colorClass)} />
|
|
<h3 className="font-semibold text-sm">{column.display_name}</h3>
|
|
<Badge variant="secondary" className="text-xs ml-auto">
|
|
{column.count}
|
|
</Badge>
|
|
</div>
|
|
|
|
<SortableContext
|
|
items={column.tasks.map((t) => `task-${t.id}`)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
<div className="space-y-2 min-h-[100px]">
|
|
{column.tasks.map((task) => (
|
|
<SortableTask key={task.id} task={task} />
|
|
))}
|
|
</div>
|
|
</SortableContext>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 4: Create KanbanBoard component
|
|
|
|
```tsx
|
|
// src/components/tasks/kanban-board.tsx
|
|
"use client";
|
|
|
|
import { useCallback } from "react";
|
|
import {
|
|
DndContext,
|
|
DragEndEvent,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
closestCorners,
|
|
} from "@dnd-kit/core";
|
|
import { KanbanColumn } from "./kanban-column";
|
|
import { useMarkInProgress } from "@/lib/hooks/use-tasks";
|
|
import { useRouter } from "next/navigation";
|
|
import type { KanbanResponse } from "@/lib/api/tasks";
|
|
|
|
interface KanbanBoardProps {
|
|
data: KanbanResponse;
|
|
}
|
|
|
|
export function KanbanBoard({ data }: KanbanBoardProps) {
|
|
const router = useRouter();
|
|
const markInProgress = useMarkInProgress();
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
|
|
);
|
|
|
|
const handleDragEnd = useCallback(
|
|
(event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (!over) return;
|
|
|
|
const taskId = Number(String(active.id).replace("task-", ""));
|
|
const targetColumn = String(over.id);
|
|
|
|
if (targetColumn === "in_progress") {
|
|
markInProgress.mutate(taskId);
|
|
} else if (targetColumn === "completed") {
|
|
router.push(`/app/tasks/${taskId}/complete`);
|
|
}
|
|
},
|
|
[markInProgress, router]
|
|
);
|
|
|
|
return (
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCorners}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
<div className="flex gap-4 overflow-x-auto pb-4">
|
|
{data.columns.map((column) => (
|
|
<KanbanColumn key={column.name} column={column} />
|
|
))}
|
|
</div>
|
|
</DndContext>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 5: Create TaskActionsMenu component
|
|
|
|
```tsx
|
|
// src/components/tasks/task-actions-menu.tsx
|
|
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { MoreHorizontal, CheckCircle, Play, XCircle, Archive, Undo, Pencil, Trash2 } from "lucide-react";
|
|
import { useCancelTask, useArchiveTask, useMarkInProgress, useDeleteTask } from "@/lib/hooks/use-tasks";
|
|
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
|
|
import { useState } from "react";
|
|
import type { TaskResponse } from "@/lib/api/tasks";
|
|
|
|
interface TaskActionsMenuProps {
|
|
task: TaskResponse;
|
|
}
|
|
|
|
export function TaskActionsMenu({ task }: TaskActionsMenuProps) {
|
|
const router = useRouter();
|
|
const cancelMutation = useCancelTask();
|
|
const archiveMutation = useArchiveTask();
|
|
const markInProgressMutation = useMarkInProgress();
|
|
const deleteMutation = useDeleteTask();
|
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon"><MoreHorizontal className="size-4" /></Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => router.push(`/app/tasks/${task.id}/complete`)}>
|
|
<CheckCircle className="size-4 mr-2" /> Complete
|
|
</DropdownMenuItem>
|
|
{!task.in_progress && (
|
|
<DropdownMenuItem onClick={() => markInProgressMutation.mutate(task.id)}>
|
|
<Play className="size-4 mr-2" /> Mark In Progress
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuItem onClick={() => router.push(`/app/tasks/${task.id}/edit`)}>
|
|
<Pencil className="size-4 mr-2" /> Edit
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
{!task.is_cancelled && (
|
|
<DropdownMenuItem onClick={() => cancelMutation.mutate(task.id)}>
|
|
<XCircle className="size-4 mr-2" /> Cancel
|
|
</DropdownMenuItem>
|
|
)}
|
|
{!task.is_archived && (
|
|
<DropdownMenuItem onClick={() => archiveMutation.mutate(task.id)}>
|
|
<Archive className="size-4 mr-2" /> Archive
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="text-destructive" onClick={() => setDeleteOpen(true)}>
|
|
<Trash2 className="size-4 mr-2" /> Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<ConfirmDialog
|
|
open={deleteOpen}
|
|
onOpenChange={setDeleteOpen}
|
|
title="Delete Task"
|
|
description={`Delete "${task.title}"? This cannot be undone.`}
|
|
confirmLabel="Delete"
|
|
variant="destructive"
|
|
loading={deleteMutation.isPending}
|
|
onConfirm={() => {
|
|
deleteMutation.mutate(task.id, {
|
|
onSuccess: () => router.push("/app/tasks"),
|
|
});
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 6: Create TemplateSearch component
|
|
|
|
```tsx
|
|
// src/components/tasks/template-search.tsx
|
|
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Input } from "@/components/ui/input";
|
|
import { searchTaskTemplates } from "@/lib/api/lookups";
|
|
import { Search } from "lucide-react";
|
|
import type { TaskTemplateResponse } from "@/lib/api/lookups";
|
|
|
|
interface TemplateSearchProps {
|
|
onSelect: (template: TaskTemplateResponse) => void;
|
|
onTitleChange: (title: string) => void;
|
|
}
|
|
|
|
export function TemplateSearch({ onSelect, onTitleChange }: TemplateSearchProps) {
|
|
const [query, setQuery] = useState("");
|
|
const [showResults, setShowResults] = useState(false);
|
|
|
|
const { data: results } = useQuery({
|
|
queryKey: ["task-templates", "search", query],
|
|
queryFn: () => searchTaskTemplates(query),
|
|
enabled: query.length >= 2,
|
|
});
|
|
|
|
useEffect(() => {
|
|
onTitleChange(query);
|
|
}, [query, onTitleChange]);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Type a task name or search templates..."
|
|
value={query}
|
|
onChange={(e) => {
|
|
setQuery(e.target.value);
|
|
setShowResults(true);
|
|
}}
|
|
onFocus={() => setShowResults(true)}
|
|
onBlur={() => setTimeout(() => setShowResults(false), 200)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
{showResults && results && results.length > 0 && (
|
|
<div className="absolute top-full left-0 right-0 z-50 mt-1 rounded-md border bg-popover p-1 shadow-md max-h-60 overflow-y-auto">
|
|
{results.map((template) => (
|
|
<button
|
|
key={template.id}
|
|
type="button"
|
|
className="w-full text-left rounded px-3 py-2 text-sm hover:bg-accent"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
setQuery(template.title);
|
|
setShowResults(false);
|
|
onSelect(template);
|
|
}}
|
|
>
|
|
<p className="font-medium">{template.title}</p>
|
|
{template.description && (
|
|
<p className="text-xs text-muted-foreground truncate">{template.description}</p>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 7: Create TaskForm component
|
|
|
|
```tsx
|
|
// src/components/tasks/task-form.tsx
|
|
"use client";
|
|
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { FormField } from "@/components/shared/form-field";
|
|
import { LookupSelect } from "@/components/shared/lookup-select";
|
|
import { CurrencyInput } from "@/components/shared/currency-input";
|
|
import { TemplateSearch } from "./template-search";
|
|
import { useResidences } from "@/lib/hooks/use-residences";
|
|
import { useTaskCategories, useTaskPriorities, useTaskFrequencies } from "@/lib/hooks/use-lookups";
|
|
import { useContractors } from "@/lib/hooks/use-contractors";
|
|
import type { TaskResponse } from "@/lib/api/tasks";
|
|
|
|
const taskSchema = z.object({
|
|
title: z.string().min(1, "Title is required"),
|
|
residence_id: z.number({ required_error: "Residence is required" }).min(1, "Residence is required"),
|
|
description: z.string().optional(),
|
|
category_id: z.number().optional(),
|
|
priority_id: z.number().optional(),
|
|
frequency_id: z.number().optional(),
|
|
due_date: z.string().optional(),
|
|
estimated_cost: z.number().optional(),
|
|
contractor_id: z.number().optional(),
|
|
});
|
|
|
|
type TaskFormData = z.infer<typeof taskSchema>;
|
|
|
|
interface TaskFormProps {
|
|
task?: TaskResponse;
|
|
defaultResidenceId?: number;
|
|
onSubmit: (data: TaskFormData) => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function TaskForm({ task, defaultResidenceId, onSubmit, loading }: TaskFormProps) {
|
|
const { data: residences } = useResidences();
|
|
const { data: categories } = useTaskCategories();
|
|
const { data: priorities } = useTaskPriorities();
|
|
const { data: frequencies } = useTaskFrequencies();
|
|
const { data: contractors } = useContractors();
|
|
|
|
const residenceItems = (residences ?? []).map((r) => ({
|
|
id: r.residence.id,
|
|
name: r.residence.name,
|
|
}));
|
|
|
|
const contractorItems = (contractors ?? []).map((c) => ({
|
|
id: c.id,
|
|
name: c.name,
|
|
}));
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm<TaskFormData>({
|
|
resolver: zodResolver(taskSchema),
|
|
defaultValues: task
|
|
? {
|
|
title: task.title,
|
|
residence_id: task.residence_id,
|
|
description: task.description || undefined,
|
|
category_id: task.category_id ?? undefined,
|
|
priority_id: task.priority_id ?? undefined,
|
|
frequency_id: task.frequency_id ?? undefined,
|
|
due_date: task.due_date ?? undefined,
|
|
estimated_cost: task.estimated_cost ?? undefined,
|
|
contractor_id: task.contractor_id ?? undefined,
|
|
}
|
|
: { residence_id: defaultResidenceId },
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 max-w-2xl">
|
|
<FormField label="Title" htmlFor="title" error={errors.title?.message} required>
|
|
{task ? (
|
|
<Input id="title" {...register("title")} />
|
|
) : (
|
|
<TemplateSearch
|
|
onTitleChange={(title) => setValue("title", title)}
|
|
onSelect={(template) => {
|
|
setValue("title", template.title);
|
|
if (template.category_id) setValue("category_id", template.category_id);
|
|
if (template.priority_id) setValue("priority_id", template.priority_id);
|
|
if (template.frequency_id) setValue("frequency_id", template.frequency_id);
|
|
if (template.estimated_cost) setValue("estimated_cost", template.estimated_cost);
|
|
}}
|
|
/>
|
|
)}
|
|
</FormField>
|
|
|
|
<FormField label="Residence" htmlFor="residence_id" error={errors.residence_id?.message} required>
|
|
<LookupSelect
|
|
items={residenceItems}
|
|
value={watch("residence_id")}
|
|
onValueChange={(v) => setValue("residence_id", v!)}
|
|
placeholder="Select residence..."
|
|
/>
|
|
</FormField>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<FormField label="Category" htmlFor="category_id">
|
|
<LookupSelect items={categories} value={watch("category_id")} onValueChange={(v) => setValue("category_id", v)} placeholder="Select..." />
|
|
</FormField>
|
|
<FormField label="Priority" htmlFor="priority_id">
|
|
<LookupSelect items={priorities} value={watch("priority_id")} onValueChange={(v) => setValue("priority_id", v)} placeholder="Select..." />
|
|
</FormField>
|
|
<FormField label="Frequency" htmlFor="frequency_id">
|
|
<LookupSelect items={frequencies} value={watch("frequency_id")} onValueChange={(v) => setValue("frequency_id", v)} placeholder="Select..." />
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<FormField label="Due Date" htmlFor="due_date">
|
|
<Input id="due_date" type="date" {...register("due_date")} />
|
|
</FormField>
|
|
<FormField label="Estimated Cost" htmlFor="estimated_cost">
|
|
<CurrencyInput value={watch("estimated_cost")} onChange={(v) => setValue("estimated_cost", v)} />
|
|
</FormField>
|
|
</div>
|
|
|
|
<FormField label="Contractor" htmlFor="contractor_id">
|
|
<LookupSelect items={contractorItems} value={watch("contractor_id")} onValueChange={(v) => setValue("contractor_id", v)} placeholder="Select contractor..." />
|
|
</FormField>
|
|
|
|
<FormField label="Notes" htmlFor="description">
|
|
<Textarea id="description" rows={3} {...register("description")} />
|
|
</FormField>
|
|
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? "Saving..." : task ? "Update Task" : "Create Task"}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 8: Create TaskCompletionForm component
|
|
|
|
```tsx
|
|
// src/components/tasks/task-completion-form.tsx
|
|
"use client";
|
|
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { FormField } from "@/components/shared/form-field";
|
|
import { CurrencyInput } from "@/components/shared/currency-input";
|
|
import { StarRating } from "@/components/shared/star-rating";
|
|
import { FileUpload } from "@/components/shared/file-upload";
|
|
|
|
const completionSchema = z.object({
|
|
completed_at: z.string().optional(),
|
|
actual_cost: z.number().optional(),
|
|
notes: z.string().optional(),
|
|
rating: z.number().min(0).max(5).optional(),
|
|
});
|
|
|
|
type CompletionFormData = z.infer<typeof completionSchema>;
|
|
|
|
interface TaskCompletionFormProps {
|
|
taskId: number;
|
|
onSubmit: (data: CompletionFormData, images: File[]) => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function TaskCompletionForm({ taskId, onSubmit, loading }: TaskCompletionFormProps) {
|
|
const [images, setImages] = useState<File[]>([]);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm<CompletionFormData>({
|
|
resolver: zodResolver(completionSchema),
|
|
defaultValues: {
|
|
completed_at: new Date().toISOString().slice(0, 16),
|
|
rating: 0,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit((data) => onSubmit(data, images))} className="space-y-6 max-w-2xl">
|
|
<FormField label="Completed At" htmlFor="completed_at">
|
|
<Input id="completed_at" type="datetime-local" {...register("completed_at")} />
|
|
</FormField>
|
|
|
|
<FormField label="Actual Cost" htmlFor="actual_cost">
|
|
<CurrencyInput value={watch("actual_cost")} onChange={(v) => setValue("actual_cost", v)} />
|
|
</FormField>
|
|
|
|
<FormField label="Rating" htmlFor="rating">
|
|
<StarRating value={watch("rating") ?? 0} onChange={(v) => setValue("rating", v)} />
|
|
</FormField>
|
|
|
|
<FormField label="Notes" htmlFor="notes">
|
|
<Textarea id="notes" rows={3} {...register("notes")} placeholder="How did it go?" />
|
|
</FormField>
|
|
|
|
<FormField label="Photos" htmlFor="photos">
|
|
<FileUpload
|
|
accept="image/*"
|
|
multiple
|
|
files={images}
|
|
onChange={setImages}
|
|
label="Upload completion photos"
|
|
/>
|
|
</FormField>
|
|
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? "Completing..." : "Complete Task"}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 9: Build Tasks Kanban page
|
|
|
|
```tsx
|
|
// src/app/app/tasks/page.tsx (overwrite stub)
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTasks } from "@/lib/hooks/use-tasks";
|
|
import { useResidences } from "@/lib/hooks/use-residences";
|
|
import { PageHeader } from "@/components/shared/page-header";
|
|
import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
|
|
import { ErrorBanner } from "@/components/shared/error-banner";
|
|
import { EmptyState } from "@/components/shared/empty-state";
|
|
import { KanbanBoard } from "@/components/tasks/kanban-board";
|
|
import { LookupSelect } from "@/components/shared/lookup-select";
|
|
import { ClipboardList } from "lucide-react";
|
|
import { useTasksByResidence } from "@/lib/hooks/use-tasks";
|
|
|
|
export default function TasksPage() {
|
|
const router = useRouter();
|
|
const [residenceFilter, setResidenceFilter] = useState<number>();
|
|
const { data: residences } = useResidences();
|
|
|
|
const allTasks = useTasks();
|
|
const filteredTasks = useTasksByResidence(residenceFilter!);
|
|
|
|
const activeQuery = residenceFilter ? filteredTasks : allTasks;
|
|
const { data, isLoading, error, refetch } = activeQuery;
|
|
|
|
const residenceItems = (residences ?? []).map((r) => ({
|
|
id: r.residence.id,
|
|
name: r.residence.name,
|
|
}));
|
|
|
|
const isEmpty = data?.columns.every((c) => c.tasks.length === 0);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="Tasks"
|
|
description="Manage and track your home tasks"
|
|
actionLabel="New Task"
|
|
onAction={() => router.push("/app/tasks/new")}
|
|
>
|
|
<div className="w-48">
|
|
<LookupSelect
|
|
items={residenceItems}
|
|
value={residenceFilter}
|
|
onValueChange={setResidenceFilter}
|
|
placeholder="All residences"
|
|
/>
|
|
</div>
|
|
</PageHeader>
|
|
|
|
{isLoading && <LoadingSkeleton variant="kanban" count={6} />}
|
|
{error && <ErrorBanner message={error.message} onRetry={() => refetch()} />}
|
|
|
|
{data && isEmpty && (
|
|
<EmptyState
|
|
icon={ClipboardList}
|
|
title="No tasks yet"
|
|
description="Create your first task to start tracking maintenance."
|
|
actionLabel="New Task"
|
|
onAction={() => router.push("/app/tasks/new")}
|
|
/>
|
|
)}
|
|
|
|
{data && !isEmpty && <KanbanBoard data={data} />}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 10: Build Create, Detail, Edit, Complete task pages
|
|
|
|
Create these 4 pages following the same patterns as Residences (Steps 6-8 in Task 2). Each page:
|
|
|
|
- `src/app/app/tasks/new/page.tsx` — `useCreateTask()` + `TaskForm`
|
|
- `src/app/app/tasks/[id]/page.tsx` — `useTask(id)` + detail layout + `TaskActionsMenu` + completion history
|
|
- `src/app/app/tasks/[id]/edit/page.tsx` — `useUpdateTask(id)` + `TaskForm` pre-filled
|
|
- `src/app/app/tasks/[id]/complete/page.tsx` — `useCreateCompletion()` + `TaskCompletionForm`
|
|
|
|
**Key code for task detail page (src/app/app/tasks/[id]/page.tsx):**
|
|
|
|
```tsx
|
|
"use client";
|
|
|
|
import { use } from "react";
|
|
import { useTask, useTaskCompletions } from "@/lib/hooks/use-tasks";
|
|
import { PageHeader } from "@/components/shared/page-header";
|
|
import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
|
|
import { ErrorBanner } from "@/components/shared/error-banner";
|
|
import { TaskActionsMenu } from "@/components/tasks/task-actions-menu";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { StarRating } from "@/components/shared/star-rating";
|
|
import { Calendar, DollarSign, RotateCcw, User } from "lucide-react";
|
|
|
|
export default function TaskDetailPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const { id } = use(params);
|
|
const taskId = Number(id);
|
|
const { data: task, isLoading, error, refetch } = useTask(taskId);
|
|
const { data: completions } = useTaskCompletions(taskId);
|
|
|
|
if (isLoading) return <LoadingSkeleton variant="detail" />;
|
|
if (error) return <ErrorBanner message={error.message} onRetry={() => refetch()} />;
|
|
if (!task) return null;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title={task.title}>
|
|
<TaskActionsMenu task={task} />
|
|
</PageHeader>
|
|
|
|
<p className="text-muted-foreground">{task.residence_name}</p>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{task.priority && <Badge variant="outline">{task.priority.icon} {task.priority.name}</Badge>}
|
|
{task.category && <Badge variant="secondary">{task.category.icon} {task.category.name}</Badge>}
|
|
{task.frequency && <Badge variant="secondary"><RotateCcw className="size-3 mr-1" />{task.frequency.name}</Badge>}
|
|
{task.in_progress && <Badge className="bg-green-500">In Progress</Badge>}
|
|
{task.is_cancelled && <Badge variant="destructive">Cancelled</Badge>}
|
|
{task.is_archived && <Badge variant="secondary">Archived</Badge>}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
|
|
{task.due_date && (
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="size-4 text-muted-foreground" />
|
|
<div><span className="text-muted-foreground">Due</span><p className="font-medium">{new Date(task.due_date).toLocaleDateString()}</p></div>
|
|
</div>
|
|
)}
|
|
{task.estimated_cost != null && (
|
|
<div className="flex items-center gap-2">
|
|
<DollarSign className="size-4 text-muted-foreground" />
|
|
<div><span className="text-muted-foreground">Est. Cost</span><p className="font-medium">${task.estimated_cost}</p></div>
|
|
</div>
|
|
)}
|
|
{task.contractor && (
|
|
<div className="flex items-center gap-2">
|
|
<User className="size-4 text-muted-foreground" />
|
|
<div><span className="text-muted-foreground">Contractor</span><p className="font-medium">{task.contractor.name}</p></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{task.description && (
|
|
<Card>
|
|
<CardHeader><CardTitle className="text-sm">Notes</CardTitle></CardHeader>
|
|
<CardContent><p className="text-sm whitespace-pre-wrap">{task.description}</p></CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{completions && completions.length > 0 && (
|
|
<Card>
|
|
<CardHeader><CardTitle className="text-sm">Completion History ({completions.length})</CardTitle></CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{completions.map((c) => (
|
|
<div key={c.id} className="border-b last:border-0 pb-3 last:pb-0">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm font-medium">{new Date(c.completed_at).toLocaleDateString()}</p>
|
|
{c.rating != null && c.rating > 0 && <StarRating value={c.rating} readonly size="sm" />}
|
|
</div>
|
|
{c.notes && <p className="text-sm text-muted-foreground mt-1">{c.notes}</p>}
|
|
{c.actual_cost != null && <p className="text-xs text-muted-foreground">Cost: ${c.actual_cost}</p>}
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 11: Verify build
|
|
|
|
```bash
|
|
cd myCribAPI-Web && npm run build
|
|
```
|
|
|
|
### Step 12: Commit
|
|
|
|
```bash
|
|
git add src/app/app/tasks/ src/components/tasks/ src/lib/hooks/use-tasks.ts
|
|
git commit -m "feat: add Tasks CRUD with kanban board, completion form, and template search"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 4: Contractors CRUD (Parallel Agent 3)
|
|
|
|
**Depends on:** Task 1 (shared foundation)
|
|
|
|
**Files:**
|
|
- Create: `src/app/app/contractors/page.tsx` (overwrite stub)
|
|
- Create: `src/app/app/contractors/new/page.tsx`
|
|
- Create: `src/app/app/contractors/[id]/page.tsx`
|
|
- Create: `src/app/app/contractors/[id]/edit/page.tsx`
|
|
- Create: `src/components/contractors/contractor-card.tsx`
|
|
- Create: `src/components/contractors/contractor-form.tsx`
|
|
- Create: `src/components/contractors/contractor-filters.tsx`
|
|
- Modify: `src/lib/hooks/use-contractors.ts` (add mutation hooks)
|
|
|
|
### Step 1: Add mutation hooks to use-contractors.ts
|
|
|
|
Add to `src/lib/hooks/use-contractors.ts`:
|
|
|
|
```typescript
|
|
// Add these imports and hooks after the existing query hooks:
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import type { CreateContractorRequest, UpdateContractorRequest } from '@/lib/api/contractors';
|
|
|
|
export function useCreateContractor() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (data: CreateContractorRequest) => contractorsApi.createContractor(data),
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['contractors'] }); },
|
|
});
|
|
}
|
|
|
|
export function useUpdateContractor(id: number) {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (data: UpdateContractorRequest) => contractorsApi.updateContractor(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['contractors'] });
|
|
queryClient.invalidateQueries({ queryKey: ['contractors', id] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useDeleteContractor() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => contractorsApi.deleteContractor(id),
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['contractors'] }); },
|
|
});
|
|
}
|
|
|
|
export function useToggleFavorite() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => contractorsApi.toggleFavorite(id),
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['contractors'] }); },
|
|
});
|
|
}
|
|
```
|
|
|
|
### Step 2-8: Build ContractorCard, ContractorForm, ContractorFilters, and 4 pages
|
|
|
|
Follow the same patterns as Residences (Task 2). Key differences:
|
|
|
|
- **ContractorCard**: Shows name, company, specialties as badges, phone/email quick actions, favorite star toggle
|
|
- **ContractorFilters**: Search input + specialty dropdown + favorite-only toggle
|
|
- **ContractorForm**: Fields: name (required), company, phone, email, residence (required), specialty (multi-select from lookups), notes, is_favorite toggle
|
|
- **List page**: Client-side filtering via search + specialty + favorite
|
|
- **Detail page**: Contact info with `tel:` and `mailto:` links, linked tasks list, favorite toggle, edit/delete
|
|
|
|
### Step 9: Verify build
|
|
|
|
```bash
|
|
cd myCribAPI-Web && npm run build
|
|
```
|
|
|
|
### Step 10: Commit
|
|
|
|
```bash
|
|
git add src/app/app/contractors/ src/components/contractors/ src/lib/hooks/use-contractors.ts
|
|
git commit -m "feat: add Contractors CRUD — list with search/filter, detail, create, edit, delete, favorites"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 5: Documents CRUD (Parallel Agent 4)
|
|
|
|
**Depends on:** Task 1 (shared foundation)
|
|
|
|
**Files:**
|
|
- Create: `src/app/app/documents/page.tsx` (overwrite stub)
|
|
- Create: `src/app/app/documents/new/page.tsx`
|
|
- Create: `src/app/app/documents/[id]/page.tsx`
|
|
- Create: `src/app/app/documents/[id]/edit/page.tsx`
|
|
- Create: `src/components/documents/document-card.tsx`
|
|
- Create: `src/components/documents/document-form.tsx`
|
|
- Create: `src/components/documents/warranty-status.tsx`
|
|
- Create: `src/components/documents/image-gallery.tsx`
|
|
- Modify: `src/lib/hooks/use-documents.ts` (add mutation hooks)
|
|
|
|
### Step 1: Add mutation hooks to use-documents.ts
|
|
|
|
Add to `src/lib/hooks/use-documents.ts`:
|
|
|
|
```typescript
|
|
// Add these imports and hooks after existing query hooks:
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import type { CreateDocumentRequest, UpdateDocumentRequest } from '@/lib/api/documents';
|
|
|
|
export function useCreateDocument() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: ({ data, file }: { data: CreateDocumentRequest; file?: File }) =>
|
|
file
|
|
? documentsApi.createDocumentWithFile(data, file)
|
|
: documentsApi.createDocument(data),
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['documents'] }); },
|
|
});
|
|
}
|
|
|
|
export function useUpdateDocument(id: number) {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (data: UpdateDocumentRequest) => documentsApi.updateDocument(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['documents'] });
|
|
queryClient.invalidateQueries({ queryKey: ['documents', id] });
|
|
},
|
|
});
|
|
}
|
|
|
|
export function useDeleteDocument() {
|
|
const queryClient = useQueryClient();
|
|
return useMutation({
|
|
mutationFn: (id: number) => documentsApi.deleteDocument(id),
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['documents'] }); },
|
|
});
|
|
}
|
|
```
|
|
|
|
### Step 2-8: Build DocumentCard, DocumentForm, WarrantyStatus, ImageGallery, and 4 pages
|
|
|
|
Key differences from other domains:
|
|
|
|
- **List page**: Tabbed view using shadcn `Tabs` — "Documents" tab and "Warranties" tab. Warranties tab uses `useWarranties()`, documents tab uses `useDocuments()`
|
|
- **WarrantyStatus component**: Shows active/expired/expiring-soon badge based on `expiry_date`. Color-coded: green (active), red (expired), yellow (expiring within 30 days)
|
|
- **DocumentForm**: Conditional warranty fields (purchase_date, expiry_date, purchase_price, vendor, serial_number, model_number) shown when `document_type === 'warranty'` or `is_warranty` toggle is on
|
|
- **ImageGallery**: Grid of document images with lightbox click-to-enlarge. Uses `image_url` from `DocumentImageResponse[]`
|
|
- **File upload**: Uses `FileUpload` shared component. On create, passes file to `createDocumentWithFile`
|
|
- **Detail page**: File preview/download button, image gallery, warranty info card if applicable
|
|
|
|
### Step 9: Verify build
|
|
|
|
```bash
|
|
cd myCribAPI-Web && npm run build
|
|
```
|
|
|
|
### Step 10: Commit
|
|
|
|
```bash
|
|
git add src/app/app/documents/ src/components/documents/ src/lib/hooks/use-documents.ts
|
|
git commit -m "feat: add Documents CRUD — tabbed list, warranty tracking, file upload, image gallery"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 6: Integration + Verification
|
|
|
|
**Depends on:** Tasks 2, 3, 4, 5 (all domain CRUDs)
|
|
|
|
**Files:**
|
|
- Modify: `src/app/app/page.tsx` (home dashboard)
|
|
|
|
### Step 1: Build Home Dashboard
|
|
|
|
Replace the stub at `src/app/app/page.tsx` with a dashboard that shows:
|
|
- Residence count + overdue task count (from `useResidences()` aggregated)
|
|
- Quick links to each domain
|
|
- Recent activity summary
|
|
|
|
```tsx
|
|
// src/app/app/page.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useResidences } from "@/lib/hooks/use-residences";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Home, ClipboardList, Wrench, FileText, AlertTriangle, Clock } from "lucide-react";
|
|
|
|
export default function DashboardPage() {
|
|
const { data: residences } = useResidences();
|
|
|
|
const totalResidences = residences?.length ?? 0;
|
|
const totalOverdue = residences?.reduce((sum, r) => sum + r.task_summary.overdue, 0) ?? 0;
|
|
const totalDueSoon = residences?.reduce((sum, r) => sum + r.task_summary.due_soon, 0) ?? 0;
|
|
const totalTasks = residences?.reduce((sum, r) => sum + r.task_summary.total, 0) ?? 0;
|
|
|
|
const stats = [
|
|
{ label: "Residences", value: totalResidences, icon: Home, href: "/app/residences", color: "text-blue-500" },
|
|
{ label: "Total Tasks", value: totalTasks, icon: ClipboardList, href: "/app/tasks", color: "text-green-500" },
|
|
{ label: "Overdue", value: totalOverdue, icon: AlertTriangle, href: "/app/tasks", color: "text-red-500" },
|
|
{ label: "Due Soon", value: totalDueSoon, icon: Clock, href: "/app/tasks", color: "text-yellow-500" },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
|
|
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{stats.map((stat) => (
|
|
<Link key={stat.label} href={stat.href}>
|
|
<Card className="hover:shadow-md transition-shadow cursor-pointer">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<stat.icon className={`size-4 ${stat.color}`} />
|
|
{stat.label}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-2xl font-bold">{stat.value}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Step 2: Full build verification
|
|
|
|
```bash
|
|
cd myCribAPI-Web && npm run build
|
|
```
|
|
|
|
Expected: Build succeeds. All routes compile. No type errors.
|
|
|
|
### Step 3: Manual smoke test checklist
|
|
|
|
Run `npm run dev` and verify:
|
|
|
|
- [ ] `/app` — Dashboard shows stats cards
|
|
- [ ] `/app/residences` — List renders (or empty state)
|
|
- [ ] `/app/residences/new` — Form renders, validation works
|
|
- [ ] `/app/tasks` — Kanban board renders with columns
|
|
- [ ] `/app/tasks/new` — Template search autocompletes, form validates
|
|
- [ ] `/app/contractors` — List with search/filter renders
|
|
- [ ] `/app/contractors/new` — Form renders with specialty select
|
|
- [ ] `/app/documents` — Tabbed view renders (Documents + Warranties tabs)
|
|
- [ ] `/app/documents/new` — Form shows warranty fields conditionally
|
|
|
|
### Step 4: Final commit
|
|
|
|
```bash
|
|
git add src/app/app/page.tsx
|
|
git commit -m "feat: add home dashboard with summary stats
|
|
|
|
Completes Phase 2 — Core CRUD for all 4 domains."
|
|
```
|
|
|
|
---
|
|
|
|
## Deliverables Checklist
|
|
|
|
At the end of Phase 2, verify:
|
|
|
|
- [ ] **Residences**: list (grid cards), detail, create/edit form, delete with confirmation
|
|
- [ ] **Tasks**: kanban board (drag-and-drop columns), create/edit form, task actions (complete, cancel, archive, in-progress)
|
|
- [ ] **Task completion**: form with file upload (photos), completion history with ratings
|
|
- [ ] **Task templates**: autocomplete search in task title field
|
|
- [ ] **Contractors**: list (search, filter by favorite/specialty), detail (quick actions), create/edit form, delete
|
|
- [ ] **Documents**: tabbed view (warranties/documents), detail, create/edit form (type-specific warranty fields), file upload
|
|
- [ ] **All forms**: validated with Zod schemas
|
|
- [ ] **Cache invalidation**: mutations invalidate relevant queries (including cross-domain: task mutations invalidate residence summaries)
|
|
- [ ] **Loading/error/empty states**: every list and detail page handles all 3 states
|
|
- [ ] **Build passes**: `npm run build` exits 0
|