mirror of
https://github.com/escalante29/WealthySmart.git
synced 2026-07-17 17:08:47 +02:00
Add accounts expansion, analytics, exchange rates, API tokens, PWA support, and UI overhaul
All checks were successful
Deploy to VPS / deploy (push) Successful in 45s
All checks were successful
Deploy to VPS / deploy (push) Successful in 45s
- Expand Account model with account_type (pension, savings, liability, crypto), new banks/currencies (BTC, XMR, FCL, ROP, VOL, MEMP, MPAT, MORTGAGE), and next_payment field - Add exchange rate endpoint (BCCR integration), analytics endpoint, paste-import for transactions, and API token management - Add PWA manifest, service worker, and app icons - Redesign dashboard, transactions, transfers, and login pages with theme support - Add billing cycle selector, confirm dialog, and paste import modal components - One-time DB reset in deploy workflow for schema migration Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
273
frontend/src/pages/Analytics.tsx
Normal file
273
frontend/src/pages/Analytics.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
LineChart,
|
||||
Line,
|
||||
} from 'recharts';
|
||||
import { BarChart3 } from 'lucide-react';
|
||||
|
||||
import api from '../api';
|
||||
import BillingCycleSelector from '../components/BillingCycleSelector';
|
||||
import { useTheme } from '../ThemeContext';
|
||||
|
||||
interface CategorySpending {
|
||||
category_id: number | null;
|
||||
category_name: string;
|
||||
total: number;
|
||||
count: number;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
interface MonthlyTrend {
|
||||
year: number;
|
||||
month: number;
|
||||
label: string;
|
||||
total_crc: number;
|
||||
total_usd: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface DailySpending {
|
||||
date: string;
|
||||
total: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
const COLORS = [
|
||||
'#606C38', '#BC6C25', '#8b5cf6', '#DDA15E', '#ef4444',
|
||||
'#ec4899', '#283618', '#f97316', '#6366f1', '#8a9462',
|
||||
'#e879f9', '#c2c9a7', '#fb923c', '#a78bfa', '#7a8a4a',
|
||||
'#fbbf24',
|
||||
];
|
||||
|
||||
function formatCRC(value: number) {
|
||||
return `₡${Math.round(value).toLocaleString('es-CR')}`;
|
||||
}
|
||||
|
||||
export default function Analytics() {
|
||||
const { theme } = useTheme();
|
||||
const [cycle, setCycle] = useState<{ year: number; month: number } | null>(null);
|
||||
const [byCategory, setByCategory] = useState<CategorySpending[]>([]);
|
||||
const [trend, setTrend] = useState<MonthlyTrend[]>([]);
|
||||
const [daily, setDaily] = useState<DailySpending[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const params: Record<string, string> = {};
|
||||
if (cycle) {
|
||||
params.cycle_year = String(cycle.year);
|
||||
params.cycle_month = String(cycle.month);
|
||||
}
|
||||
|
||||
Promise.all([
|
||||
api.get('/analytics/by-category', { params }),
|
||||
api.get('/analytics/monthly-trend'),
|
||||
api.get('/analytics/daily-spending', { params }),
|
||||
])
|
||||
.then(([catRes, trendRes, dailyRes]) => {
|
||||
setByCategory(catRes.data);
|
||||
setTrend(trendRes.data);
|
||||
setDaily(dailyRes.data);
|
||||
})
|
||||
.catch(console.error);
|
||||
}, [cycle]);
|
||||
|
||||
const tooltipStyle = {
|
||||
background: theme === 'dark' ? '#1e293b' : '#FEFAE0',
|
||||
border: `1px solid ${theme === 'dark' ? '#334155' : 'rgba(96,108,56,0.25)'}`,
|
||||
borderRadius: '8px',
|
||||
fontSize: '12px',
|
||||
color: theme === 'dark' ? '#e2e8f0' : '#283618',
|
||||
};
|
||||
|
||||
const tickColor = theme === 'dark' ? '#64748b' : '#8a9462';
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart3 className="w-5 h-5 text-[#606C38] dark:text-[#7a8a4a]" />
|
||||
<h1 className="text-2xl font-bold">Analytics</h1>
|
||||
</div>
|
||||
<p className="text-sm text-text-muted mt-1">Spending breakdown and trends</p>
|
||||
</div>
|
||||
<BillingCycleSelector value={cycle} onChange={setCycle} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Spending by Category - Donut */}
|
||||
<div className="bg-surface-card border border-border rounded-xl p-5">
|
||||
<h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
|
||||
Spending by Category
|
||||
</h2>
|
||||
{byCategory.length === 0 ? (
|
||||
<div className="h-64 flex items-center justify-center text-text-faint text-sm">
|
||||
No data for this period
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center">
|
||||
<ResponsiveContainer width="100%" height={260}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={byCategory}
|
||||
dataKey="total"
|
||||
nameKey="category_name"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={60}
|
||||
outerRadius={100}
|
||||
paddingAngle={2}
|
||||
strokeWidth={0}
|
||||
>
|
||||
{byCategory.map((_, i) => (
|
||||
<Cell key={i} fill={COLORS[i % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
formatter={(value: any) => formatCRC(Number(value))}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1.5 mt-2 w-full max-w-md">
|
||||
{byCategory.slice(0, 10).map((cat, i) => (
|
||||
<div key={cat.category_name} className="flex items-center gap-2 text-xs">
|
||||
<div
|
||||
className="w-2.5 h-2.5 rounded-full flex-shrink-0"
|
||||
style={{ background: COLORS[i % COLORS.length] }}
|
||||
/>
|
||||
<span className="text-text-secondary truncate">{cat.category_name}</span>
|
||||
<span className="text-text-faint ml-auto">{cat.percentage}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Monthly Trend - Bar */}
|
||||
<div className="bg-surface-card border border-border rounded-xl p-5">
|
||||
<h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
|
||||
Monthly Spending (CRC)
|
||||
</h2>
|
||||
{trend.length === 0 ? (
|
||||
<div className="h-64 flex items-center justify-center text-text-faint text-sm">
|
||||
No data
|
||||
</div>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={trend}>
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tick={{ fill: tickColor, fontSize: 11 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: tickColor, fontSize: 11 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `₡${(v / 1000).toFixed(0)}k`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
formatter={(value: any) => formatCRC(Number(value))}
|
||||
/>
|
||||
<Bar dataKey="total_crc" fill="#606C38" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Daily Spending - Line */}
|
||||
<div className="bg-surface-card border border-border rounded-xl p-5 lg:col-span-2">
|
||||
<h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
|
||||
Daily Spending
|
||||
</h2>
|
||||
{daily.length === 0 ? (
|
||||
<div className="h-48 flex items-center justify-center text-text-faint text-sm">
|
||||
No data for this period
|
||||
</div>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height={240}>
|
||||
<LineChart data={daily}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: tickColor, fontSize: 10 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => {
|
||||
const d = new Date(v);
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`;
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: tickColor, fontSize: 11 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `₡${(v / 1000).toFixed(0)}k`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
formatter={(value: any) => formatCRC(Number(value))}
|
||||
labelFormatter={(label) => new Date(label).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="total"
|
||||
stroke="#BC6C25"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: '#BC6C25', r: 3 }}
|
||||
activeDot={{ r: 5 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top categories summary */}
|
||||
{byCategory.length > 0 && (
|
||||
<div className="bg-surface-card border border-border rounded-xl p-5">
|
||||
<h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
|
||||
Top Categories
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{byCategory.slice(0, 8).map((cat, i) => (
|
||||
<div key={cat.category_name} className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||
style={{ background: COLORS[i % COLORS.length] }}
|
||||
/>
|
||||
<span className="text-sm flex-1">{cat.category_name}</span>
|
||||
<span className="text-xs text-text-muted">{cat.count} txns</span>
|
||||
<span className="text-sm font-mono font-medium w-32 text-right">
|
||||
{formatCRC(cat.total)}
|
||||
</span>
|
||||
<div className="w-24 bg-surface-hover rounded-full h-1.5">
|
||||
<div
|
||||
className="h-1.5 rounded-full"
|
||||
style={{
|
||||
width: `${cat.percentage}%`,
|
||||
background: COLORS[i % COLORS.length],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user