Analytics

Insights into your spending patterns

\n \n {/* Period Selector */}\n

\n {(['weekly', 'monthly', 'yearly'] as const).map((p) => (\n setPeriod(p)}\n className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${\n period === p\n ? 'bg-white text-blue-600 shadow-sm'\n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n {p.charAt(0).toUpperCase() + p.slice(1)}\n \n ))}\n

\n\n {/* Summary Stats */}\n {categoryData.length > 0 && (\n

Total Spent

\n {formatCurrency(categoryData.reduce((sum, item) => sum + item.spent, 0))}\n

💸

\n\n

Total Budget

\n {formatCurrency(categoryData.reduce((sum, item) => sum + item.budget, 0))}\n

🎯

\n\n

\n Spending by Category ({period})\n

\n )}\n\n {/* Monthly Trends Chart */}\n {trendsData.length > 0 && (\n

\n Monthly Trends\n

\n )}\n

\n\n {/* Category Details */}\n {categoryData.length > 0 && (\n

Category Breakdown

\n {categoryData.map((item, index) => (\n

{item.category}

\n {item.budget > 0 ? `${item.percentage.toFixed(1)}% of budget` : 'No budget set'}\n

{formatCurrency(item.spent)}

\n {item.budget > 0 && (\n

of {formatCurrency(item.budget)}

\n )}\n

\n ))}\n

\n )}\n\n {/* Empty State */}\n {categoryData.length === 0 && trendsData.length === 0 && (\n

📊

No Data Available

\n Start adding transactions to see your spending analytics.\n

\n \n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/beekay/support_case/code/frontend/components/Analytics.tsx","extension","actionData","errors"]