feat: improve event logging UX

- Remove quick-template feature from dashboard
- Increase photo upload limit from 5MB to 30MB
- Add combined diaper toggle (wet + stool in one save) to event modal
- Show all event types in quick-add FAB and dashboard quick-log grid
- Add OTHER generic event type for freeform notes (schema + migration)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-18 22:01:05 +02:00
parent 2d0c44e21d
commit 6f2336ffae
7 changed files with 94 additions and 124 deletions
+5 -121
View File
@@ -9,7 +9,7 @@ import { useBaby } from "@/contexts/baby-context";
import { checkFeedAlert, getThresholds } from "@/lib/notifications";
import { format, isToday } from "date-fns";
import { fr } from "date-fns/locale";
import { AlertTriangle, Clock, CheckCircle2, Pin, PinOff, Pencil, Check, X, Plus, Trash2, FileText, ImageIcon } from "lucide-react";
import { AlertTriangle, Clock, CheckCircle2, Pin, PinOff, Pencil, Check, X, Plus, FileText, ImageIcon } from "lucide-react";
import { useSession } from "next-auth/react";
const QUICK_LOG_GROUPS: { label: string; types: EventType[] }[] = [
@@ -25,6 +25,10 @@ const QUICK_LOG_GROUPS: { label: string; types: EventType[] }[] = [
label: "Santé",
types: ["TEMPERATURE", "MEDICATION", "SYMPTOM"],
},
{
label: "Autre",
types: ["OTHER"],
},
];
interface Event {
@@ -37,12 +41,6 @@ interface Event {
user: { id: string; name: string };
}
interface EventTemplate {
id: string;
label: string;
type: EventType;
metadata?: Record<string, unknown> | null;
}
function getBabyAge(birthDate: string): string {
const birth = new Date(birthDate);
@@ -384,115 +382,6 @@ function PinnedNoteWidget() {
);
}
function TemplatesRow({ babyId, onSaved }: { babyId: string; onSaved: () => void }) {
const qc = useQueryClient();
const [activeTemplate, setActiveTemplate] = useState<EventTemplate | null>(null);
const [addingType, setAddingType] = useState<EventType | null>(null);
const [addLabel, setAddLabel] = useState("");
const [deletingId, setDeletingId] = useState<string | null>(null);
const { data: templates = [] } = useQuery<EventTemplate[]>({
queryKey: ["event-templates"],
queryFn: () => fetch("/api/event-templates").then((r) => r.json()),
});
async function deleteTemplate(id: string) {
setDeletingId(id);
await fetch(`/api/event-templates/${id}`, { method: "DELETE" });
qc.invalidateQueries({ queryKey: ["event-templates"] });
setDeletingId(null);
}
async function createTemplate(e: React.FormEvent) {
e.preventDefault();
if (!addingType || !addLabel.trim()) return;
await fetch("/api/event-templates", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ type: addingType, label: addLabel.trim() }),
});
qc.invalidateQueries({ queryKey: ["event-templates"] });
setAddingType(null);
setAddLabel("");
}
return (
<div>
<div className="flex items-center justify-between mb-3">
<h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Modèles rapides</h2>
<div className="relative">
<select
value=""
onChange={(e) => { if (e.target.value) { setAddingType(e.target.value as EventType); setAddLabel(""); } }}
className="text-xs text-indigo-600 dark:text-indigo-400 border-none bg-transparent appearance-none cursor-pointer focus:outline-none pr-1"
>
<option value="">+ Nouveau modèle</option>
{(Object.keys(EVENT_CONFIG) as EventType[]).map((t) => (
<option key={t} value={t}>{EVENT_CONFIG[t].label}</option>
))}
</select>
</div>
</div>
{addingType && (
<form onSubmit={createTemplate} className="flex gap-2 mb-3">
<div className={`w-8 h-8 rounded-lg ${EVENT_CONFIG[addingType].bgClass} flex items-center justify-center flex-shrink-0`}>
<EventIcon name={EVENT_CONFIG[addingType].icon} className={`w-4 h-4 ${EVENT_CONFIG[addingType].colorClass}`} />
</div>
<input
autoFocus
type="text"
value={addLabel}
onChange={(e) => setAddLabel(e.target.value)}
placeholder={`Nom du modèle (ex: Sieste midi)`}
className="flex-1 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-sm bg-white dark:bg-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
/>
<button type="submit" className="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-xs font-medium">OK</button>
<button type="button" onClick={() => setAddingType(null)} className="px-2 py-1.5 border border-slate-200 dark:border-slate-700 rounded-lg text-xs text-slate-500"></button>
</form>
)}
{templates.length > 0 && (
<div className="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
{templates.map((t) => {
const cfg = EVENT_CONFIG[t.type];
return (
<div key={t.id} className="flex-shrink-0 flex items-center gap-1 group">
<button
onClick={() => setActiveTemplate(t)}
className={`flex items-center gap-1.5 px-3 py-2 rounded-xl border text-xs font-medium transition active:scale-95 ${cfg.bgClass} border-transparent hover:border-slate-200 dark:hover:border-slate-600`}
>
<EventIcon name={cfg.icon} className={`w-3.5 h-3.5 ${cfg.colorClass}`} />
<span className="text-slate-700 dark:text-slate-200">{t.label}</span>
</button>
<button
onClick={() => deleteTemplate(t.id)}
disabled={deletingId === t.id}
className="w-5 h-5 flex items-center justify-center rounded text-slate-300 hover:text-red-400 dark:text-slate-600 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition"
>
<Trash2 className="w-3 h-3" />
</button>
</div>
);
})}
</div>
)}
{templates.length === 0 && !addingType && (
<p className="text-xs text-slate-400 dark:text-slate-500 italic">Aucun modèle. Créez-en un pour accélérer la saisie.</p>
)}
{activeTemplate && (
<EventModal
type={activeTemplate.type}
babyId={babyId}
onClose={() => setActiveTemplate(null)}
onSaved={() => { onSaved(); setActiveTemplate(null); }}
/>
)}
</div>
);
}
export default function DashboardPage() {
const qc = useQueryClient();
@@ -809,11 +698,6 @@ export default function DashboardPage() {
))}
</div>
{/* Event templates */}
<div className="mt-6 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
<TemplatesRow babyId={selectedBaby.id} onSaved={() => qc.invalidateQueries({ queryKey: ["events"] })} />
</div>
{/* Medication status */}
{medProfiles.length > 0 && (() => {
const activeMeds = medProfiles.filter((p) => lastIntakes[p.name]);