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,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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user