arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: translate remaining pantry UI (print button, manager, print page)

Browse Source 
pantry-page-header's Print button, the pantry-manager add/remove
form (item name, qty, unit, expiry badges), and the print/pantry
page (title, column headers, item count, empty state, footer) were
all hardcoded English.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-02 15:25:09 +02:00
parent eb424d8c04
commit 737d011c1b
5 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/meal-plan/pantry-manager.tsx
+12 -10
View File
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { Plus, Trash2, AlertTriangle } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
@@ -20,6 +21,7 @@ function daysUntilExpiry(dateStr: string): number {
}
export function PantryManager({ initialItems }: { initialItems: PantryItem[] }) {
const t = useTranslations("pantry");
const [items, setItems] = useState<PantryItem[]>(initialItems);
const [name, setName] = useState("");
const [quantity, setQuantity] = useState("");
@@ -41,7 +43,7 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
}),
});
if (!res.ok) { toast.error("Failed to add"); return; }
if (!res.ok) { toast.error(t("addFailed")); return; }
const { id } = await res.json() as { id: string };
setItems((prev) => [...prev, { id, rawName: name.trim(), quantity: quantity || null, unit: unit || null, expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null }]);
setName(""); setQuantity(""); setUnit(""); setExpiresAt("");
@@ -53,7 +55,7 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
async function remove(id: string) {
const res = await fetch(`/api/v1/pantry/${id}`, { method: "DELETE" });
if (res.ok) setItems((prev) => prev.filter((i) => i.id !== id));
else toast.error("Failed to remove");
else toast.error(t("removeFailed"));
}
const sorted = [...items].sort((a, b) => {
@@ -67,18 +69,18 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
<div className="space-y-6 max-w-2xl">
{/* Add form */}
<div className="flex gap-2 flex-wrap">
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Item name" className="flex-1 min-w-[160px]" onKeyDown={(e) => e.key === "Enter" && add()} />
<Input value={quantity} onChange={(e) => setQuantity(e.target.value)} placeholder="Qty" className="w-20" />
<Input value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="Unit" className="w-20" />
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("itemNamePlaceholder")} className="flex-1 min-w-[160px]" onKeyDown={(e) => e.key === "Enter" && add()} />
<Input value={quantity} onChange={(e) => setQuantity(e.target.value)} placeholder={t("qtyPlaceholder")} className="w-20" />
<Input value={unit} onChange={(e) => setUnit(e.target.value)} placeholder={t("unitPlaceholder")} className="w-20" />
<Input type="date" value={expiresAt} onChange={(e) => setExpiresAt(e.target.value)} className="w-36" />
<Button onClick={add} disabled={!name.trim() || adding} size="sm">
<Plus className="h-4 w-4" /> Add
<Plus className="h-4 w-4" /> {t("add")}
</Button>
</div>
{/* Item list */}
{items.length === 0 ? (
<p className="text-muted-foreground text-sm">No pantry items yet.</p>
<p className="text-muted-foreground text-sm">{t("empty")}</p>
) : (
<div className="rounded-xl border divide-y">
{sorted.map((item) => {
@@ -91,11 +93,11 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
<div className="flex items-center gap-2">
<span className="font-medium text-sm">{item.rawName}</span>
{item.quantity && <span className="text-xs text-muted-foreground">{item.quantity}{item.unit ? ` ${item.unit}` : ""}</span>}
{expired && <span className="text-xs text-destructive flex items-center gap-1"><AlertTriangle className="h-3 w-3" />Expired</span>}
{expiring && !expired && <span className="text-xs text-orange-500 flex items-center gap-1"><AlertTriangle className="h-3 w-3" />Expires in {days}d</span>}
{expired && <span className="text-xs text-destructive flex items-center gap-1"><AlertTriangle className="h-3 w-3" />{t("expired")}</span>}
{expiring && !expired && <span className="text-xs text-orange-500 flex items-center gap-1"><AlertTriangle className="h-3 w-3" />{t("expiresInDays", { days })}</span>}
</div>
{item.expiresAt && !expired && !expiring && (
<p className="text-xs text-muted-foreground">Expires {new Date(item.expiresAt).toLocaleDateString()}</p>
<p className="text-xs text-muted-foreground">{t("expiresOn", { date: new Date(item.expiresAt).toLocaleDateString() })}</p>
)}
</div>
<button onClick={() => remove(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">