{
  "id": "expense-log",
  "name": "Expense Log",
  "category": "finance",
  "tags": ["finance", "expenses", "budget", "tracker"],
  "description": "Log daily expenses with categories and view a running total breakdown.",
  "triggers": ["expense tracker", "spending log", "budget", "expenses"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function ExpenseLog() {\n  const [expenses, setExpenses] = React.useState([\n    { id: 1, name: 'Coffee', amount: 5.50, category: 'Food' },\n    { id: 2, name: 'Uber', amount: 12.30, category: 'Transport' },\n    { id: 3, name: 'Groceries', amount: 67.20, category: 'Food' }\n  ]);\n  const [name, setName] = React.useState('');\n  const [amount, setAmount] = React.useState('');\n  const [category, setCategory] = React.useState('Food');\n\n  const addExpense = () => {\n    if (!name || !amount) return;\n    setExpenses([...expenses, { id: Date.now(), name, amount: parseFloat(amount), category }]);\n    setName('');\n    setAmount('');\n  };\n\n  const total = expenses.reduce((s, e) => s + e.amount, 0);\n  const cats = [...new Set(expenses.map(e => e.category))];\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#ffffff', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column', color: '#1e293b' }}>\n      <h2 style={{ margin: '0 0 12px', fontSize: 18 }}>Expense Log</h2>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>\n        <input placeholder=\"Name\" value={name} onChange={e => setName(e.target.value)} style={{ flex: 1, padding: 8, borderRadius: 6, border: '1px solid #cbd5e1', fontSize: 13 }} />\n        <input placeholder=\"$\" type=\"number\" value={amount} onChange={e => setAmount(e.target.value)} style={{ width: 60, padding: 8, borderRadius: 6, border: '1px solid #cbd5e1', fontSize: 13 }} />\n        <select value={category} onChange={e => setCategory(e.target.value)} style={{ padding: 8, borderRadius: 6, border: '1px solid #cbd5e1', fontSize: 13 }}>\n          {cats.map(c => <option key={c}>{c}</option>)}\n          <option>Other</option>\n        </select>\n        <button onClick={addExpense} style={{ padding: '8px 12px', borderRadius: 6, border: 'none', background: '#2563eb', color: '#fff', fontSize: 13, cursor: 'pointer' }}>Add</button>\n      </div>\n      <div style={{ flex: 1, overflow: 'auto' }}>\n        {expenses.map(e => (\n          <div key={e.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px solid #e2e8f0', fontSize: 14 }}>\n            <span>{e.name} <span style={{ fontSize: 11, color: '#64748b', background: '#f1f5f9', padding: '2px 6px', borderRadius: 4 }}>{e.category}</span></span>\n            <span style={{ fontWeight: 600 }}>${e.amount.toFixed(2)}</span>\n          </div>\n        ))}\n      </div>\n      <div style={{ marginTop: 12, fontSize: 18, fontWeight: 700, textAlign: 'right' }}>Total: ${total.toFixed(2)}</div>\n    </div>\n  );\n}\nrender(<ExpenseLog/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_DEFAULT_CATEGORIES", "description": "Default expense categories as comma-separated list", "default": "Food, Transport, Utilities, Entertainment" }
  ]
}