{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":522,"_117":523},2632.1597278814006,-2053.459641545609,{"_14":57,"_95":525,"_99":526,"_113":533},"conditional",{"_295":527,"_166":528,"_103":528,"_300":386,"_529":530,"_531":532},"Only send weekly report to Slack if credentials are configured","Slack Configured?","input_data","{{vars.Slack-Cred}}","condition_operator","is_not_empty",{"_115":534,"_117":535},1350.8883789099887,-2166.4179838484606,{"_14":65,"_95":525,"_99":537,"_113":541},{"_295":538,"_166":539,"_103":539,"_300":386,"_529":540,"_531":532},"Only send weekly report to Telegram if credentials are configured","Telegram Configured?","{{vars.Telegram-Cred}}",{"_115":542,"_117":543},1346.7352600449788,-1951.6240756395946,{"_14":78,"_95":525,"_99":545,"_113":547},{"_295":546,"_166":528,"_103":528,"_300":386,"_529":530,"_531":532},"Only send invoice notification to Slack if credentials are configured",{"_115":548,"_117":549},1175.7210779126726,-1502.0674656646263,{"_14":84,"_95":525,"_99":551,"_113":553},{"_295":552,"_166":539,"_103":539,"_300":386,"_529":540,"_531":532},"Only send invoice notification to Telegram if credentials are configured",{"_115":554,"_117":555},1176.4401944462295,-1278.8057393894098,{"_14":90,"_95":557,"_99":558,"_113":559},"trigger-run",{},{"_115":560,"_117":561},422.9170127989014,-2065.7253321748067,"interface",{"_564":565,"_576":577},"layout",[566],{"_567":568,"_569":508,"_570":571,"_115":158,"_117":158,"_572":573,"_574":575},"h",4,"i","w",6,"minH",2,"minW",3,"tabOrder",[],"variables",{"_285":233,"_225":233,"_342":580,"_273":581,"_197":581,"_270":582,"_179":582,"_276":583,"_279":584,"_202":583,"_207":584,"_340":585,"_586":183,"_288":159,"_282":587,"_212":587},"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",{"_590":591,"_596":597,"_598":599,"_604":27},"viewport",{"_115":592,"_117":593,"_594":595},113.96724943411583,925.5511447948156,"zoom",0.4771787347083067,"activeTab","canvas","flowHelperView",{"_111":600,"_596":99,"_601":183,"_602":159,"_603":7},529,"isExpanded","searchQuery","isFullScreen","selectedNodeId","owner_name","Sanskar Pandey","template_slug","automated-financial-tracker","isEmbed","autoFork","initialView","actionData","errors"]