import React, { useState, useRef } from "react"; import dayjs from "dayjs"; const colorForDays = days => { if (days < 0) return "bg-red-100 border-red-400"; if (days === 0) return "bg-red-200 border-red-500"; if (days <= 2) return "bg-orange-200 border-orange-400"; if (days <= 7) return "bg-yellow-100 border-yellow-400"; return "bg-green-50 border-green-300"; }; const labelForDays = days => { if (days < 0) return "Expired"; if (days === 0) return "Expires Today"; if (days === 1) return "Tomorrow"; if (days <= 7) return `${days} days`; return `In ${days} days`; }; const sortByExpiry = items => [...items].sort((a, b) => dayjs(a.expiry).diff(dayjs(b.expiry))); export default function App() { const [items, setItems] = useSharedStorage("grocery-expiry-items-v2", []); const [showForm, setShowForm] = useState(false); const [editing, setEditing] = useState(null); // id or null const [scanning, setScanning] = useState(false); const [form, setForm] = useState({ name: "", expiry: "", notes: "", reminder: "" }); const fileInputRef = useRef(); const today = dayjs().format("YYYY-MM-DD"); // Notification handler const { send, connected } = useNotification(); // Photo reference for item identification function handleScan(e) { setScanning(true); const file = e.target.files?.[0]; if (!file) { setScanning(false); return; } setForm(f => ({ ...f, name: "" })); setShowForm(true); setScanning(false); } function openAddForm() { setEditing(null); setForm({ name: "", expiry: today, notes: "", reminder: "" }); setShowForm(true); } function openEditForm(item) { setEditing(item.id); setForm({ name: item.name, expiry: item.expiry, notes: item.notes || "", reminder: item.reminder || "", }); setShowForm(true); } function handleFormChange(e) { const { name, value } = e.target; setForm(f => ({ ...f, [name]: value })); } async function handleFormSubmit(e) { e.preventDefault(); if (!form.name.trim() || !form.expiry) return; const id = editing ?? Date.now().toString(); const item = { id, name: form.name.trim(), expiry: form.expiry, added: editing ? items.find(i=>i.id===id)?.added : dayjs().toISOString(), notes: form.notes, reminder: form.reminder, }; setItems(prev => { let next = prev.filter(i => i.id !== id); next.push(item); return next; }); if (form.reminder && connected) { const daysTo = dayjs(form.expiry).diff(dayjs(), "day"); if (daysTo >= 0) await send( `⏰ Grocery Reminder: '${form.name}' expires on ${dayjs(form.expiry).format("MMM D")} (${labelForDays(daysTo)}).\n${form.notes ? "\nNote: " + form.notes : ""}` ); } setShowForm(false); setEditing(null); setForm({ name: "", expiry: today, notes: "", reminder: "" }); } function handleDelete(id) { if (!window.confirm("Delete this item?")) return; setItems(prev => prev.filter(i => i.id !== id)); } function upcomingLabel(item) { const days = dayjs(item.expiry).diff(dayjs(), "day"); return labelForDays(days); } function upcomingColor(item) { const days = dayjs(item.expiry).diff(dayjs(), "day"); return colorForDays(days); } // For dashboard: stats const soon = items.filter(i => dayjs(i.expiry).diff(dayjs(),"day") <= 2 && dayjs(i.expiry).diff(dayjs(),"day") >= 0); const expired = items.filter(i => dayjs(i.expiry).diff(dayjs(),"day") < 0); const fresh = items.filter(i => dayjs(i.expiry).diff(dayjs(),"day") > 7); return (

🧊

Grocery Expiry Tracker

{expired.length} Expired

{soon.length} Expiring Soon

{fresh.length} Fresh (>7d)

{items.length} Total

{/* List */}

{items.length === 0 ? (

🛒

No groceries tracked yet.

Add your food items here to avoid waste!

) : (

{sortByExpiry(items).map(item => { const days = dayjs(item.expiry).diff(dayjs(), "day"); return (

{item.name} {upcomingLabel(item)}

Expires {dayjs(item.expiry).format('MMM D, YYYY')}

{item.notes &&

📝 {item.notes}

}

); })}

)}

{/* Modal Form */} {showForm && (

{editing ? "Edit Item" : "Add Grocery Item"}

Item Name Expiration Date Notes (optional)

<div className="flex gap-2 mb-4 items-center">
              <input
                type="checkbox"
                name="reminder"
                className="accent-[var(--ds-primary)] mr-2"
                checked={!!form.reminder}
                onChange={e => setForm(f => ({ ...f, reminder: e.target.checked ? 1 : "" }))}
                disabled={!connected}
                id="reminderChk"
              />
              <label htmlFor="reminderChk" className="text-sm">
                Messenger Reminder {connected ? null : <span className="text-gray-400 ml-1">(connect Telegram/Discord to enable)</span>}
              </label>
            </div>
            <button
              type="submit"
              className="w-full py-2 rounded-md bg-[var(--ds-primary)] text-white font-semibold mt-2 hover:bg-blue-700 transition-all text-base"
            >{editing ? "Save" : "Add"}</button>
          </form>
        </div>
      )}

{/* Animations */}
      <style>{`
        .animate-fade-in { animation: fadein .2s; }
        @keyframes fadein { from { opacity: 0; } to { opacity:1; } }
        .animate-slide-in { animation: slidein .24s cubic-bezier(.72,1.4,.28,1); }
        @keyframes slidein { from { opacity:0; transform: translateY(48px) scale(.98);} to { opacity:1; transform: none; } }
      `}</style>
    </div>
  );
}
</article></body></html>