{
  "id": "agent-bookkeeper",
  "name": "Bookkeeper Agent",
  "category": "agents",
  "tags": ["finance", "accounting", "bookkeeping", "expenses"],
  "description": "Finance tracker with transaction categorization and monthly summary.",
  "triggers": ["bookkeeper", "accounting", "expenses", "finance"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const AgentBookkeeper = () => {\n  const [transactions, setTransactions] = React.useState([\n    { id: 1, date: '2024-01-15', desc: 'Office supplies', amount: -124.50, category: 'expense' },\n    { id: 2, date: '2024-01-14', desc: 'Client payment', amount: 2500.00, category: 'revenue' },\n    { id: 3, date: '2024-01-12', desc: 'Software subscription', amount: -49.99, category: 'expense' },\n    { id: 4, date: '2024-01-10', desc: 'Consulting fee', amount: 1800.00, category: 'revenue' },\n    { id: 5, date: '2024-01-08', desc: 'Utilities', amount: -210.30, category: 'expense' }\n  ]);\n  const [form, setForm] = React.useState({ desc: '', amount: '', category: 'expense' });\n  const [filter, setFilter] = React.useState('all');\n\n  const addTransaction = () => {\n    if (!form.desc || !form.amount) return;\n    const amt = form.category === 'expense' ? -Math.abs(Number(form.amount)) : Math.abs(Number(form.amount));\n    setTransactions([{ id: Date.now(), date: new Date().toISOString().slice(0, 10), desc: form.desc, amount: amt, category: form.category }, ...transactions]);\n    setForm({ desc: '', amount: '', category: 'expense' });\n  };\n\n  const revenue = transactions.filter(t => t.amount > 0).reduce((a, b) => a + b.amount, 0);\n  const expenses = transactions.filter(t => t.amount < 0).reduce((a, b) => a + b.amount, 0);\n  const net = revenue + expenses;\n\n  const filtered = filter === 'all' ? transactions : transactions.filter(t => t.category === filter);\n\n  const catColors = { revenue: '#16a34a', expense: '#dc2626' };\n\n  return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', overflow: 'auto' } },\n    React.createElement('h3', { style: { margin: 0, fontSize: '16px', fontWeight: 600, color: '#111827' } }, 'Bookkeeper'),\n    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '8px' } },\n      React.createElement('div', { style: { background: '#f0fdf4', borderRadius: '8px', padding: '12px', textAlign: 'center' } },\n        React.createElement('div', { style: { fontSize: '11px', color: '#16a34a', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Revenue'),\n        React.createElement('div', { style: { fontSize: '18px', fontWeight: 700, color: '#16a34a' } }, '+', revenue.toFixed(2))\n      ),\n      React.createElement('div', { style: { background: '#fef2f2', borderRadius: '8px', padding: '12px', textAlign: 'center' } },\n        React.createElement('div', { style: { fontSize: '11px', color: '#dc2626', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Expenses'),\n        React.createElement('div', { style: { fontSize: '18px', fontWeight: 700, color: '#dc2626' } }, expenses.toFixed(2))\n      ),\n      React.createElement('div', { style: { background: net >= 0 ? '#f0fdf4' : '#fef2f2', borderRadius: '8px', padding: '12px', textAlign: 'center' } },\n        React.createElement('div', { style: { fontSize: '11px', color: net >= 0 ? '#16a34a' : '#dc2626', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Net'),\n        React.createElement('div', { style: { fontSize: '18px', fontWeight: 700, color: net >= 0 ? '#16a34a' : '#dc2626' } }, net.toFixed(2))\n      )\n    ),\n    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' } },\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Add Transaction'),\n        React.createElement('input', { value: form.desc, onChange: e => setForm({ ...form, desc: e.target.value }), placeholder: 'Description', style: { fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } }),\n        React.createElement('input', { type: 'number', value: form.amount, onChange: e => setForm({ ...form, amount: e.target.value }), placeholder: 'Amount', style: { fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } }),\n        React.createElement('select', { value: form.category, onChange: e => setForm({ ...form, category: e.target.value }), style: { fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } },\n          React.createElement('option', { value: 'revenue' }, 'Revenue'),\n          React.createElement('option', { value: 'expense' }, 'Expense')\n        ),\n        React.createElement('button', { onClick: addTransaction, style: { fontSize: '12px', padding: '8px', borderRadius: '4px', border: 'none', background: '#2563eb', color: '#fff', cursor: 'pointer', fontWeight: 600 } }, 'Add')\n      ),\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' } },\n        React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n          React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Transactions'),\n          React.createElement('select', { value: filter, onChange: e => setFilter(e.target.value), style: { fontSize: '11px', padding: '4px', borderRadius: '4px', border: '1px solid #d1d5db' } },\n            React.createElement('option', { value: 'all' }, 'All'),\n            React.createElement('option', { value: 'revenue' }, 'Revenue'),\n            React.createElement('option', { value: 'expense' }, 'Expense')\n          )\n        ),\n        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '6px', overflow: 'auto' } },\n          filtered.map(t => React.createElement('div', { key: t.id, style: { background: '#fff', borderRadius: '6px', padding: '8px', border: '1px solid #e5e7eb', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n            React.createElement('div', null,\n              React.createElement('div', { style: { fontWeight: 600, fontSize: '12px', color: '#111827' } }, t.desc),\n              React.createElement('div', { style: { fontSize: '11px', color: '#9ca3af' } }, t.date, ' ', React.createElement('span', { style: { color: catColors[t.category], fontWeight: 600, textTransform: 'uppercase', fontSize: '10px' } }, t.category))\n            ),\n            React.createElement('span', { style: { fontSize: '13px', fontWeight: 700, color: t.amount > 0 ? '#16a34a' : '#dc2626' } }, t.amount > 0 ? '+' : '', t.amount.toFixed(2))\n          ))\n        )\n      )\n    )\n  );\n};\nrender(<AgentBookkeeper/>);",
  "placeholders": [{ "name": "REPLACE_WITH_CURRENCY", "description": "Currency symbol for transactions", "default": "$" }]
}