import React, { useState, useRef, useEffect } from "react"; import Chart from "chart.js"; const DEFAULT_CATEGORIES = [ { key: "food", label: "Food 🍽️", color: "#38b000" }, { key: "commute", label: "Commute 🚌", color: "#4361ee" }, { key: "shopping", label: "Shopping 🛍️", color: "#e85d04" }, { key: "coffee", label: "Coffee ☕", color: "#9d0208" }, { key: "entertainment", label: "Leisure 🎬", color: "#ffb700" }, { key: "other", label: "Other ✨", color: "#64748b" }, ]; function getToday() { // YYYY-MM-DD local date return new Date(Date.now() - new Date().getTimezoneOffset() * 60000) .toISOString() .slice(0, 10); } export default function App() { // Persist today's expenses using useSharedStorage so all apps share this log if needed const [date] = useState(getToday()); const STORAGE_KEY = `spends-${date}`; const [expenses, setExpenses] = useSharedStorage(STORAGE_KEY, []); const [inputAmt, setInputAmt] = useState(""); const [selectedCat, setSelectedCat] = useState(DEFAULT_CATEGORIES[0].key); // For Export const handleCopy = () => { const text = expenses.map(e => `${e.time} | ${e.category} | $${e.amount}`).join("\n"); navigator.clipboard.writeText(text); }; // Add New Expense const handleAdd = () => { const amt = parseFloat(inputAmt); if (!selectedCat || isNaN(amt) || amt <= 0) return; const now = new Date(); const hhmm = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); setExpenses(expenses => [ ...expenses, { id: Date.now() + Math.random(), category: selectedCat, amount: amt, time: hhmm, }, ]); setInputAmt(""); }; // Remove expense by id const handleRemove = id => setExpenses(expenses => expenses.filter(e => e.id !== id)); // Calculate summary data const categoryTotal = {}; DEFAULT_CATEGORIES.forEach(cat => (categoryTotal[cat.key] = 0)); for (const e of expenses) { if (categoryTotal.hasOwnProperty(e.category)) { categoryTotal[e.category] += e.amount; } } const pieData = DEFAULT_CATEGORIES.map(cat => categoryTotal[cat.key]); const barLabels = expenses.map(e => `${e.time}`); const barData = expenses.map(e => e.amount); const barColors = expenses.map(e => DEFAULT_CATEGORIES.find(c => c.key === e.category)?.color || "#888"); const totalSpend = expenses.reduce((sum, e) => sum + e.amount, 0); // Chart.js rendering const pieRef = useRef(null); const pieInst = useRef(null); const barRef = useRef(null); const barInst = useRef(null); useEffect(() => { if (!pieRef.current || typeof Chart === "undefined") return; if (pieInst.current) pieInst.current.destroy(); try { pieInst.current = new Chart(pieRef.current, { type: "pie", data: { labels: DEFAULT_CATEGORIES.map(c => c.label), datasets: [{ data: pieData, backgroundColor: DEFAULT_CATEGORIES.map(c => c.color) }], }, options: { plugins: { legend: { position: 'bottom', labels: { font: { family: 'Inter', size: 14 } } } }, animation: { animateScale: true }, }, }); } catch (e) {} return () => { pieInst.current && pieInst.current.destroy(); }; // eslint-disable-next-line }, [expenses]); useEffect(() => { if (!barRef.current || typeof Chart === "undefined") return; if (barInst.current) barInst.current.destroy(); try { barInst.current = new Chart(barRef.current, { type: "bar", data: { labels: barLabels, datasets: [ { label: "Amount", data: barData, backgroundColor: barColors, borderRadius: 8, }, ], }, options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { font: { family: "Inter", size: 14 } } } }, }, }); } catch (e) {} return () => { barInst.current && barInst.current.destroy(); }; // eslint-disable-next-line }, [expenses]); return (

Daily Spend Estimator

{date}

{/* Quick Add Panel */}

{DEFAULT_CATEGORIES.map(cat => ( ))}

{/* Visual Spend Overview */}

Spend Breakdown

Expense Timeline

{/* Quick Stats and Export */}

${totalSpend.toFixed(2)} Total spent today

{/* Expense List */}

{expenses.length === 0 ? (

💡

No spend added yet.
Use the buttons above to record your first expense!

) : (

{cat?.label.split(" ")[1]||"?"} {cat?.label.split(" ")[0]|| e.category} {e.time} ${e.amount.toFixed(2)}

)}

{/* Attribution & Help */}

); }