nikdoof/leggen
1
1
Fork 0
mirror of https://github.com/elisiariocouto/leggen.git synced 2025-12-18 06:59:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): Complete shadcn/ui migration with dark mode support and analytics updates.

Browse Source 
- Convert all analytics components to use shadcn Card and semantic colors
- Update RawTransactionModal with proper shadcn styling and theme support
- Fix all remaining hardcoded colors to use CSS variables (bg-card, text-foreground, etc.)
- Ensure consistent theming across light/dark modes for all components
- Add custom tooltips with semantic colors for chart components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Elisiário Couto
2025-09-15 01:30:34 +01:00
parent eb27f19196
commit 66db34c712
44 changed files with 1790 additions and 1295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/routes/analytics.tsx
View File

@@ -14,13 +14,14 @@ import BalanceChart from "../components/analytics/BalanceChart";
import TransactionDistribution from "../components/analytics/TransactionDistribution";
import MonthlyTrends from "../components/analytics/MonthlyTrends";
import TimePeriodFilter from "../components/analytics/TimePeriodFilter";
import { Card, CardContent } from "../components/ui/card";
import type { TimePeriod } from "../lib/timePeriods";
import { TIME_PERIODS } from "../lib/timePeriods";
function AnalyticsDashboard() {
// Default to Last 365 days
const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>(
TIME_PERIODS.find((p) => p.value === "365d") || TIME_PERIODS[3]
TIME_PERIODS.find((p) => p.value === "365d") || TIME_PERIODS[3],
);
// Fetch analytics data
@@ -45,15 +46,15 @@ function AnalyticsDashboard() {
return (
<div className="p-6">
<div className="animate-pulse">
<div className="h-8 bg-gray-200 rounded w-48 mb-6"></div>
<div className="h-8 bg-muted rounded w-48 mb-6"></div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-32 bg-gray-200 rounded"></div>
<div key={i} className="h-32 bg-muted rounded"></div>
))}
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="h-96 bg-gray-200 rounded"></div>
<div className="h-96 bg-gray-200 rounded"></div>
<div className="h-96 bg-muted rounded"></div>
<div className="h-96 bg-muted rounded"></div>
</div>
</div>
</div>
@@ -63,11 +64,14 @@ function AnalyticsDashboard() {
return (
<div className="p-6 space-y-8">
{/* Time Period Filter */}
<TimePeriodFilter
selectedPeriod={selectedPeriod}
onPeriodChange={setSelectedPeriod}
className="bg-white rounded-lg shadow p-4 border border-gray-200"
/>
<Card>
<CardContent className="p-4">
<TimePeriodFilter
selectedPeriod={selectedPeriod}
onPeriodChange={setSelectedPeriod}
/>
</CardContent>
</Card>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -101,7 +105,9 @@ function AnalyticsDashboard() {
subtitle="Income minus expenses"
icon={CreditCard}
className={
(stats?.net_change || 0) >= 0 ? "border-green-200" : "border-red-200"
(stats?.net_change || 0) >= 0
? "border-green-200"
: "border-red-200"
}
/>
<StatCard
@@ -120,18 +126,24 @@ function AnalyticsDashboard() {
{/* Charts */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="bg-white rounded-lg shadow p-6 border border-gray-200">
<BalanceChart data={balances || []} accounts={accounts || []} />
</div>
<div className="bg-white rounded-lg shadow p-6 border border-gray-200">
<TransactionDistribution accounts={accounts || []} />
</div>
<Card>
<CardContent className="p-6">
<BalanceChart data={balances || []} accounts={accounts || []} />
</CardContent>
</Card>
<Card>
<CardContent className="p-6">
<TransactionDistribution accounts={accounts || []} />
</CardContent>
</Card>
</div>
{/* Monthly Trends */}
<div className="bg-white rounded-lg shadow p-6 border border-gray-200">
<MonthlyTrends days={selectedPeriod.days} />
</div>
<Card>
<CardContent className="p-6">
<MonthlyTrends days={selectedPeriod.days} />
</CardContent>
</Card>
</div>
);
}