\n {/* Header */}\n

Financial Dashboard

Overview of your spending and income patterns

\n\n {/* Summary Cards */}\n

\n 💰\n

Total Income (30d)

\n {formatCurrency(analytics.summary.totalIncome)}\n

\n \n

\n 💸\n

Total Expenses (30d)

\n {formatCurrency(analytics.summary.totalExpenses)}\n

\n \n

= 0 \n ? 'bg-blue-50 border-blue-200' \n : 'bg-orange-50 border-orange-200'\n }`}>\n

\n \n {analytics.summary.netAmount >= 0 ? '📈' : '📉'}\n \n

= 0 ? 'text-blue-800' : 'text-orange-800'\n }`}>\n Net Amount (30d)\n

= 0 ? 'text-blue-900' : 'text-orange-900'\n }`}>\n {formatCurrency(analytics.summary.netAmount)}\n

\n \n

\n 📊\n

Avg Daily Spending

\n {formatCurrency(analytics.summary.avgDailySpending)}\n

\n\n {/* Charts Row */}\n

\n {/* Daily Spending Chart */}\n

Daily Spending (Last 30 Days)

\n {analytics.dailySpending.slice(0, 10).map((day, index) => {\n const maxAmount = Math.max(...analytics.dailySpending.map(d => d.total_expenses));\n const percentage = maxAmount > 0 ? (day.total_expenses / maxAmount) * 100 : 0;\n \n return (\n

\n {formatDate(day.date)}\n

\n \n {day.total_expenses > 0 && (\n \n {formatCurrency(day.total_expenses)}\n \n )}\n

\n );\n })}\n

\n\n {/* Top Categories */}\n

Top Spending Categories

\n {analytics.topCategories.map((category, index) => (\n

\n {index + 1}\n

{category.category}

\n {category.transaction_count} transaction{category.transaction_count !== 1 ? 's' : ''}\n

\n {formatCurrency(category.total_amount)}\n

\n {category.percentage.toFixed(1)}%\n

\n ))}\n

\n\n {/* Monthly Overview */}\n

Monthly Overview

\n \n \n \n \n \n \n \n \n \n \n \n {analytics.monthlySpending.map((month) => (\n \n \n \n \n \n \n \n ))}\n \n

Month	Income	Expenses	Net	Transactions
\n {formatMonth(month.month)}\n	\n {formatCurrency(month.total_income)}\n	\n {formatCurrency(month.total_expenses)}\n	= 0 ? 'text-blue-600' : 'text-orange-600'\n }`}>\n {formatCurrency(month.net_amount)}\n	\n {month.transaction_count}\n

\n\n {/* Recent Transactions */}\n

Recent Transactions

\n {analytics.recentTransactions.map((transaction) => (\n

\n \n

{transaction.description}

\n {transaction.category} • {formatDate(transaction.date)}\n

\n {transaction.type === 'income' ? '+' : '-'}{formatCurrency(transaction.amount)}\n

\n ))}\n

\n \n );\n}","deleted","label",[171,172,154],"frontend","components","permalink","https://www.val.town/x/Dev_J/F_manager/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]