feat: garden care tracking - logs, schedules, reminders (task 73)
- logCare/deleteCareLog actions with schedule update and reminder wiring - upsertCareSchedule/deleteCareSchedule/toggleCareSchedule actions - updateScheduleAfterCare helper cancels old reminder, schedules new one - getCareLogs/getCareSchedules/getOverduePlants/getCareDueSoon queries - CareLogForm, CareScheduleEditor, CareHistoryList components - Plant detail Care tab wired up with schedule editor + log form + history - Log plant care quick-add added to garden manifest
This commit is contained in:
ginnoir
@@ -0,0 +1,45 @@
|
||||
import type { CareLogDto } from "../server/queries";
|
||||
|
||||
const CARE_ICONS: Record<string, string> = {
|
||||
watering: "💧",
|
||||
fertilizing: "🌱",
|
||||
repotting: "🪴",
|
||||
pruning: "✂️",
|
||||
"pest-control": "🐛",
|
||||
other: "📋",
|
||||
};
|
||||
|
||||
function timeAgo(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
if (days === 0) return "Today";
|
||||
if (days === 1) return "Yesterday";
|
||||
return `${days} days ago`;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
logs: CareLogDto[];
|
||||
};
|
||||
|
||||
export function CareHistoryList({ logs }: Props) {
|
||||
if (logs.length === 0) {
|
||||
return <p className="text-sm text-[var(--ink-mute)]">No care events logged yet.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="flex flex-col gap-2">
|
||||
{logs.map((log) => (
|
||||
<li key={log.id} className="flex gap-3 items-start text-sm">
|
||||
<span className="text-lg leading-none mt-0.5" aria-hidden>
|
||||
{CARE_ICONS[log.careType] ?? "📋"}
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="font-medium capitalize">{log.careType}</span>
|
||||
<span className="text-xs text-[var(--ink-mute)]">{timeAgo(log.performedAt)}</span>
|
||||
{log.notes && <p className="text-xs text-[var(--ink-mute)]">{log.notes}</p>}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { logCare } from "../server/actions";
|
||||
|
||||
const CARE_TYPES = ["watering", "fertilizing", "repotting", "pruning", "pest-control", "other"];
|
||||
|
||||
type Props = {
|
||||
plantId: string;
|
||||
defaultCareType?: string;
|
||||
onSuccess?: () => void;
|
||||
};
|
||||
|
||||
export function CareLogForm({ plantId, defaultCareType = "watering", onSuccess }: Props) {
|
||||
const [careType, setCareType] = useState(defaultCareType);
|
||||
const [notes, setNotes] = useState("");
|
||||
const [performedAt, setPerformedAt] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await logCare({
|
||||
plantId,
|
||||
careType,
|
||||
notes: notes || null,
|
||||
performedAt: performedAt || undefined,
|
||||
});
|
||||
setNotes("");
|
||||
setPerformedAt("");
|
||||
onSuccess?.();
|
||||
} catch {
|
||||
setError("Failed to log care. Please try again.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="care-type" className="text-sm font-medium">
|
||||
Care type
|
||||
</label>
|
||||
<select
|
||||
id="care-type"
|
||||
value={careType}
|
||||
onChange={(e) => setCareType(e.target.value)}
|
||||
className="input input-sm"
|
||||
required
|
||||
>
|
||||
{CARE_TYPES.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t.charAt(0).toUpperCase() + t.slice(1).replace("-", " ")}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="performed-at" className="text-sm font-medium">
|
||||
Date & time (optional — defaults to now)
|
||||
</label>
|
||||
<input
|
||||
id="performed-at"
|
||||
type="datetime-local"
|
||||
value={performedAt}
|
||||
onChange={(e) => setPerformedAt(e.target.value)}
|
||||
className="input input-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="care-notes" className="text-sm font-medium">
|
||||
Notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
id="care-notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
rows={2}
|
||||
maxLength={2000}
|
||||
className="input input-sm resize-none"
|
||||
placeholder="Any observations…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red-500">{error}</p>}
|
||||
|
||||
<button type="submit" className="btn btn-primary btn-sm self-start" disabled={isPending}>
|
||||
{isPending ? "Logging…" : "Log care"}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { deleteCareSchedule, toggleCareSchedule, upsertCareSchedule } from "../server/actions";
|
||||
import type { CareScheduleDto } from "../server/queries";
|
||||
|
||||
const CARE_TYPES = ["watering", "fertilizing", "repotting", "pruning", "pest-control", "other"];
|
||||
|
||||
type Props = {
|
||||
plantId: string;
|
||||
schedules: CareScheduleDto[];
|
||||
};
|
||||
|
||||
function daysLabel(n: number | null): string {
|
||||
if (n === null) return "No due date";
|
||||
if (n < 0) return `${Math.abs(n)} day${Math.abs(n) !== 1 ? "s" : ""} overdue`;
|
||||
if (n === 0) return "Due today";
|
||||
return `Due in ${n} day${n !== 1 ? "s" : ""}`;
|
||||
}
|
||||
|
||||
export function CareScheduleEditor({ plantId, schedules }: Props) {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [careType, setCareType] = useState("watering");
|
||||
const [intervalDays, setIntervalDays] = useState("7");
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
function handleAddSchedule(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
const days = parseInt(intervalDays, 10);
|
||||
if (isNaN(days) || days < 1 || days > 365) {
|
||||
setFormError("Interval must be between 1 and 365 days.");
|
||||
return;
|
||||
}
|
||||
setFormError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await upsertCareSchedule({ plantId, careType, intervalDays: days });
|
||||
setShowForm(false);
|
||||
setCareType("watering");
|
||||
setIntervalDays("7");
|
||||
router.refresh();
|
||||
} catch {
|
||||
setFormError("Failed to save schedule.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
startTransition(async () => {
|
||||
await deleteCareSchedule({ id });
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
function handleToggle(id: string, enabled: boolean) {
|
||||
startTransition(async () => {
|
||||
await toggleCareSchedule({ id, enabled });
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-semibold text-[var(--ink-mute)] uppercase tracking-wide">
|
||||
Schedules
|
||||
</p>
|
||||
<button
|
||||
className="btn btn-ghost btn-xs"
|
||||
onClick={() => setShowForm((v) => !v)}
|
||||
disabled={isPending}
|
||||
>
|
||||
{showForm ? "Cancel" : "Add schedule"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<form
|
||||
onSubmit={handleAddSchedule}
|
||||
className="flex flex-col gap-2 p-3 bg-[var(--surface-2)] rounded-lg"
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<label htmlFor="sched-care-type" className="text-xs font-medium">
|
||||
Care type
|
||||
</label>
|
||||
<select
|
||||
id="sched-care-type"
|
||||
value={careType}
|
||||
onChange={(e) => setCareType(e.target.value)}
|
||||
className="input input-xs"
|
||||
>
|
||||
{CARE_TYPES.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t.charAt(0).toUpperCase() + t.slice(1).replace("-", " ")}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 w-28">
|
||||
<label htmlFor="sched-interval" className="text-xs font-medium">
|
||||
Interval (days)
|
||||
</label>
|
||||
<input
|
||||
id="sched-interval"
|
||||
type="number"
|
||||
min={1}
|
||||
max={365}
|
||||
value={intervalDays}
|
||||
onChange={(e) => setIntervalDays(e.target.value)}
|
||||
className="input input-xs"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{formError && <p className="text-xs text-red-500">{formError}</p>}
|
||||
<button type="submit" className="btn btn-primary btn-xs self-start" disabled={isPending}>
|
||||
{isPending ? "Saving…" : "Add"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{schedules.length === 0 && !showForm && (
|
||||
<p className="text-sm text-[var(--ink-mute)]">No schedules yet.</p>
|
||||
)}
|
||||
|
||||
{schedules.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className={`flex items-center justify-between gap-2 p-2 rounded-lg border ${
|
||||
s.isOverdue
|
||||
? "border-red-300 bg-red-50 dark:bg-red-950/20"
|
||||
: "border-[var(--ink-faint)]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-sm font-medium capitalize">{s.careType}</span>
|
||||
<span className="text-xs text-[var(--ink-mute)]">
|
||||
Every {s.intervalDays} days · {daysLabel(s.daysUntilDue)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => handleToggle(s.id, !s.enabled)}
|
||||
disabled={isPending}
|
||||
title={s.enabled ? "Disable" : "Enable"}
|
||||
className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${
|
||||
s.enabled
|
||||
? "border-green-400 text-green-700 dark:text-green-400"
|
||||
: "border-[var(--ink-faint)] text-[var(--ink-mute)]"
|
||||
}`}
|
||||
>
|
||||
{s.enabled ? "Active" : "Paused"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(s.id)}
|
||||
disabled={isPending}
|
||||
title="Delete schedule"
|
||||
className="text-[var(--ink-mute)] hover:text-red-500 text-xs"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,11 +4,18 @@ import { useState, useTransition } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { deletePlant, addPlantImage, removePlantImage, setPrimaryImage } from "../server/actions";
|
||||
import type { PlantDetailDto } from "../server/queries";
|
||||
import type { CareLogDto, CareScheduleDto, PlantDetailDto } from "../server/queries";
|
||||
import { CareHistoryList } from "./care-history-list";
|
||||
import { CareLogForm } from "./care-log-form";
|
||||
import { CareScheduleEditor } from "./care-schedule-editor";
|
||||
|
||||
type Tab = "info" | "gallery" | "care";
|
||||
|
||||
type Props = { plant: PlantDetailDto };
|
||||
type Props = {
|
||||
plant: PlantDetailDto;
|
||||
careLogs: CareLogDto[];
|
||||
careSchedules: CareScheduleDto[];
|
||||
};
|
||||
|
||||
function InfoRow({
|
||||
label,
|
||||
@@ -34,7 +41,7 @@ function healthBadgeClass(status: string): string {
|
||||
return "badge-warning";
|
||||
}
|
||||
|
||||
export function PlantDetail({ plant }: Props) {
|
||||
export function PlantDetail({ plant, careLogs, careSchedules }: Props) {
|
||||
const [tab, setTab] = useState<Tab>("info");
|
||||
const [confirming, setConfirming] = useState(false);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
@@ -252,7 +259,21 @@ export function PlantDetail({ plant }: Props) {
|
||||
|
||||
{/* Care */}
|
||||
{tab === "care" && (
|
||||
<p className="text-sm text-[var(--ink-mute)]">Care tracking coming soon.</p>
|
||||
<div className="flex flex-col gap-6">
|
||||
<CareScheduleEditor plantId={plant.id} schedules={careSchedules} />
|
||||
<div className="border-t border-[var(--ink-faint)] pt-4">
|
||||
<p className="text-sm font-semibold text-[var(--ink-mute)] uppercase tracking-wide mb-3">
|
||||
Log care
|
||||
</p>
|
||||
<CareLogForm plantId={plant.id} onSuccess={() => router.refresh()} />
|
||||
</div>
|
||||
<div className="border-t border-[var(--ink-faint)] pt-4">
|
||||
<p className="text-sm font-semibold text-[var(--ink-mute)] uppercase tracking-wide mb-3">
|
||||
History
|
||||
</p>
|
||||
<CareHistoryList logs={careLogs} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user