{label}

{value}

\n );\n}\n\nfunction useCategoryData(invoices) {\n return useMemo(() => {\n const map = {};\n invoices.forEach(inv => { map[inv.category] = (map[inv.category] || 0) + inv.amount; });\n return Object.entries(map).map(([name, value]) => ({ name, value: parseFloat(value.toFixed(2)) }));\n }, [invoices]);\n}\n\nfunction DashboardTab({ invoices, setInvoices }) {\n const [file, setFile] = useState(null);\n const [preview, setPreview] = useState(null);\n const [status, setStatus] = useState('idle');\n const [error, setError] = useState('');\n const [lastInvoice, setLastInvoice] = useState(null);\n\n useEffect(() => {\n if (!file) { setPreview(null); return; }\n const url = URL.createObjectURL(file);\n setPreview(url);\n return () => URL.revokeObjectURL(url);\n }, [file]);\n\n const total = useMemo(() => invoices.reduce((s, i) => s + i.amount, 0), [invoices]);\n const monthlyTotal = useMemo(() => {\n const now = new Date();\n return invoices\n .filter(i => { try { const d = new Date(i.date); return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear(); } catch { return false; } })\n .reduce((s, i) => s + i.amount, 0);\n }, [invoices]);\n const categoryData = useCategoryData(invoices);\n\n const handleUpload = async () => {\n if (!file || status !== 'idle') return;\n setError('');\n setLastInvoice(null);\n try {\n setStatus('uploading');\n const { resourceId, uploadUrl } = await resources.upload(file.name, file.type, file.size);\n await fetch(uploadUrl, { method: 'PUT', body: file, headers: { 'Content-Type': file.type } });\n const imageUrl = await resources.getUrl(resourceId);\n\n setStatus('extracting');\n const results = await execution.runNodesAndGetOutput(\n [\n {\n id: 'agent_1mww',\n config: {\n message: `Analyze this invoice image. Image URL: ${imageUrl}\\n\\nExtract the invoice data and return ONLY valid JSON (no markdown):\\n{\"vendor\":\"name\",\"date\":\"YYYY-MM-DD\",\"amount\":0.00,\"category\":\"Food|Transport|Office|Technology|Healthcare|Entertainment|Utilities|Other\",\"invoice_number\":\"\",\"description\":\"\",\"currency\":\"USD\"}`\n }\n },\n 'serverless-function_ce8c',\n 'sheets_va27',\n 'slack_scol',\n 'telegram_nd8t'\n ],\n ['serverless-function_ce8c']\n ).all();\n\n const raw = results['serverless-function_ce8c'];\n const data = (raw && raw.result) ? raw.result : (raw || {});\n if (!data.vendor && !data.amount) throw new Error('Could not extract invoice data — try a clearer photo');\n\n const inv = {\n date: data.date || new Date().toISOString().split('T')[0],\n vendor: data.vendor || 'Unknown',\n amount: parseFloat(data.amount) || 0,\n category: data.category || 'Other',\n invoice_number: data.invoice_number || '',\n description: data.description || ''\n };\n setLastInvoice(inv);\n setInvoices(prev => [...prev, inv]);\n setFile(null);\n setPreview(null);\n setStatus('done');\n setTimeout(() => setStatus('idle'), 3000);\n } catch (err) {\n setError(err.message || 'Failed to process invoice');\n setStatus('error');\n setTimeout(() => setStatus('idle'), 4000);\n }\n };\n\n const btnLabel = { idle: 'Upload & Extract', uploading: 'Uploading…', extracting: 'AI Extracting…', done: '✓ Saved!', error: 'Failed — retry' }[status];\n\n return (\n

Upload Invoice Photo

\n { setFile(e.target.files[0] || null); setError(''); }} className=\"bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-white text-sm\" />\n {preview && $\"Preview\"$ }\n {error &&

{error}

}\n {lastInvoice && status === 'done' && (\n

✓ Invoice saved

{lastInvoice.vendor} · ${lastInvoice.amount.toFixed(2)} · {lastInvoice.date}

\n )}\n \n

\n\n

\n \n \n \n \n

\n\n

Spending by Category

\n {categoryData.length > 0 ? (\n \n \n \n {categoryData.map((_, i) => )}\n \n [`$${parseFloat(v).toFixed(2)}`, 'Spending']} contentStyle={{ backgroundColor: '#18181b', borderColor: '#3f3f46', fontSize: 12 }} />\n \n \n \n ) :

No data yet

}\n

Recent Invoices (Last 10)

\n {invoices.length > 0 ? (\n \n \n \n \n `$${v}`} />\n [`$${parseFloat(v).toFixed(2)}`, 'Amount']} contentStyle={{ backgroundColor: '#18181b', borderColor: '#3f3f46', fontSize: 12 }} />\n \n \n \n ) :

No invoices yet

}\n

\n\n

Invoice History

\n \n \n \n {['Date', 'Vendor', 'Amount', 'Category', 'Invoice #', 'Description'].map(h => (\n \n ))}\n \n \n \n {[...invoices].reverse().map((inv, i) => (\n \n \n \n \n \n \n \n \n ))}\n {invoices.length === 0 && (\n \n )}\n \n

{h}
{inv.date}	{inv.vendor}	${inv.amount.toFixed(2)}	{inv.category}	{inv.invoice_number \|\| '-'}	{inv.description \|\| '-'}
No invoices yet — upload your first invoice above

\n );\n}\n\nfunction ReportTab({ invoices }) {\n const total = useMemo(() => invoices.reduce((s, i) => s + i.amount, 0), [invoices]);\n const count = invoices.length;\n const categoryData = useCategoryData(invoices);\n\n const vendorData = useMemo(() => {\n const map = {};\n invoices.forEach(i => { map[i.vendor] = (map[i.vendor] || 0) + i.amount; });\n return Object.entries(map).map(([name, value]) => ({ name, value: parseFloat(value.toFixed(2)) })).sort((a, b) => b.value - a.value).slice(0, 8);\n }, [invoices]);\n\n const monthlyData = useMemo(() => {\n const map = {};\n invoices.forEach(i => {\n try {\n const d = new Date(i.date);\n const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;\n map[key] = (map[key] || 0) + i.amount;\n } catch {}\n });\n return Object.entries(map).sort().slice(-6).map(([name, value]) => ({ name, value: parseFloat(value.toFixed(2)) }));\n }, [invoices]);\n\n return (\n

📊 Spending Report

Generated {new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

\n\n

\n \n \n 0 ? (total / count).toFixed(2) : '0.00'}`} accent=\"text-blue-400\" />\n \n

\n\n

Monthly Spending Trend

\n {monthlyData.length > 0 ? (\n \n \n \n \n `$${v}`} />\n [`$${parseFloat(v).toFixed(2)}`, 'Spending']} contentStyle={{ backgroundColor: '#18181b', borderColor: '#3f3f46', fontSize: 12 }} />\n \n \n \n ) :

No data yet

}\n

Top Vendors

\n {vendorData.length > 0 ? (\n \n \n \n `$${v}`} />\n \n [`$${parseFloat(v).toFixed(2)}`, 'Spending']} contentStyle={{ backgroundColor: '#18181b', borderColor: '#3f3f46', fontSize: 12 }} />\n \n \n \n ) :

No data yet

}\n

\n\n

Category Breakdown

\n {categoryData.length > 0 ? (\n

\n {[...categoryData].sort((a, b) => b.value - a.value).map(({ name, value }, i) => (\n

{name}

${value.toFixed(2)}

\n ))}\n

\n ) :

No data yet

}\n

\n\n

All Invoices

\n \n \n \n {['Date', 'Vendor', 'Category', 'Amount'].map(h => (\n \n ))}\n \n \n \n {invoices.length === 0 ? (\n \n ) : (\n [...invoices].reverse().map((inv, i) => (\n \n \n \n \n \n \n ))\n )}\n \n

{h}
No invoices recorded yet
{inv.date}	{inv.vendor}	{inv.category}	${inv.amount.toFixed(2)}

\n );\n}\n\nfunction App() {\n const [tab, setTab] = useState('interface-html-react_jqsj');\n const [invoices, setInvoices] = useState([]);\n\n useEffect(() => {\n execution.runNodesAndGetOutput(['sheets_h3wv'], ['sheets_h3wv']).all()\n .then(results => {\n const out = results['sheets_h3wv'];\n if (out && Array.isArray(out.values) && out.values.length > 1) {\n const rows = out.values.slice(1).filter(r => r.length >= 2);\n setInvoices(rows.map(r => ({\n date: r[0] || '',\n vendor: r[1] || '',\n amount: parseFloat(r[2]) || 0,\n category: r[3] || 'Other',\n invoice_number: r[4] || '',\n description: r[5] || ''\n })));\n }\n })\n .catch(() => {});\n }, []);\n\n return (\n

\n {[{ key: 'interface-html-react_jqsj', label: '📸 Dashboard' }, { key: 'report', label: '📊 Weekly Report' }].map(({ key, label }) => (\n setTab(key)}\n className={`px-5 py-2.5 text-sm font-medium transition-colors border-b-2 ${\n tab === key ? 'text-emerald-400 border-emerald-400' : 'text-zinc-400 border-transparent hover:text-zinc-200'\n }`}\n >\n {label}\n \n ))}\n

\n {tab === 'interface-html-react_jqsj'\n ? \n : \n }\n

\n );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render();",[],"Tabbed fullscreen interface for invoice upload and financial analytics.",1026,{"_115":513,"_117":514},2435.61372175572,-2056.5897367692824,{"_14":57,"_95":516,"_99":517,"_113":524},"conditional",{"_285":518,"_156":519,"_103":519,"_290":377,"_520":521,"_522":523},"Only send weekly report to Slack if credentials are configured","Slack Configured?","input_data","{{vars.Slack-Cred}}","condition_operator","is_not_empty",{"_115":525,"_117":526},1350.8883789099887,-2166.4179838484606,{"_14":65,"_95":516,"_99":528,"_113":532},{"_285":529,"_156":530,"_103":530,"_290":377,"_520":531,"_522":523},"Only send weekly report to Telegram if credentials are configured","Telegram Configured?","{{vars.Telegram-Cred}}",{"_115":533,"_117":534},1346.7352600449788,-1951.6240756395946,{"_14":78,"_95":516,"_99":536,"_113":538},{"_285":537,"_156":519,"_103":519,"_290":377,"_520":521,"_522":523},"Only send invoice notification to Slack if credentials are configured",{"_115":539,"_117":540},1175.7210779126726,-1502.0674656646263,{"_14":84,"_95":516,"_99":542,"_113":544},{"_285":543,"_156":530,"_103":530,"_290":377,"_520":531,"_522":523},"Only send invoice notification to Telegram if credentials are configured",{"_115":545,"_117":546},1176.4401944462295,-1278.8057393894098,{"_14":90,"_95":548,"_99":549,"_113":550},"trigger-run",{},{"_115":551,"_117":552},422.9170127989014,-2065.7253321748067,"interface",{"_555":556,"_568":569},"layout",[557],{"_558":559,"_560":499,"_561":562,"_115":563,"_117":563,"_564":565,"_566":567},"h",4,"i","w",6,0,"minH",2,"minW",3,"tabOrder",[],"variables",{"_275":223,"_215":223,"_333":572,"_263":573,"_187":573,"_260":574,"_169":574,"_266":575,"_269":576,"_192":575,"_197":576,"_331":577,"_578":173,"_278":322,"_272":579,"_202":579},"Sheet1","29ead309-1bc8-4b8c-be24-7c84791423be","60029323-3050-428c-ba24-58c6381b6b32","#test","497df227-433b-4fca-9b2f-d5f4bd4b6704","1UK-8w2c1cd6c4nFxbwisWTBgAKXc-sW4el99aKhGt3I","setup_completed","-1003859068504","display_metadata",{"_582":583,"_588":589,"_590":591,"_596":-5},"viewport",{"_115":584,"_117":585,"_586":587},534.6840155738638,442.1204567884254,"zoom",0.1878047386180656,"activeTab","canvas","flowHelperView",{"_111":592,"_588":99,"_593":173,"_594":322,"_595":7},383,"isExpanded","searchQuery","isFullScreen","selectedNodeId","owner_name","Sanskar Pandey","template_slug","automated-financial-tracker","isEmbed","autoFork","initialView","actionData","errors"]