mirror of
https://github.com/escalante29/WealthySmart.git
synced 2026-07-17 18:28:46 +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:
54
frontend/src/components/BillingCycleSelector.tsx
Normal file
54
frontend/src/components/BillingCycleSelector.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Calendar, ChevronDown } from 'lucide-react';
|
||||
import api from '../api';
|
||||
|
||||
export interface CycleOption {
|
||||
year: number;
|
||||
month: number;
|
||||
label: string;
|
||||
count: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
value: { year: number; month: number } | null;
|
||||
onChange: (cycle: { year: number; month: number } | null) => void;
|
||||
}
|
||||
|
||||
export default function BillingCycleSelector({ value, onChange }: Props) {
|
||||
const [cycles, setCycles] = useState<CycleOption[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/transactions/cycles').then((r) => setCycles(r.data));
|
||||
}, []);
|
||||
|
||||
const selectedKey = value ? `${value.year}-${value.month}` : '';
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4 text-text-muted" />
|
||||
<div className="relative">
|
||||
<select
|
||||
value={selectedKey}
|
||||
onChange={(e) => {
|
||||
if (!e.target.value) {
|
||||
onChange(null);
|
||||
} else {
|
||||
const [y, m] = e.target.value.split('-').map(Number);
|
||||
onChange({ year: y, month: m });
|
||||
}
|
||||
}}
|
||||
className="appearance-none bg-input-bg border border-border rounded-lg pl-3 pr-9 py-2 text-sm text-text-primary focus:outline-none focus:border-[#606C38]/50 transition-colors"
|
||||
>
|
||||
<option value="">All time</option>
|
||||
{cycles.map((c) => (
|
||||
<option key={`${c.year}-${c.month}`} value={`${c.year}-${c.month}`}>
|
||||
{c.label} ({c.count})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user