mirror of
https://github.com/escalante29/WealthySmart.git
synced 2026-05-19 08:48:48 +02:00
Drop legacy pages, contexts, and dashboard widgets
Removes Dashboard / Transactions / Transfers pages, the section configuration UI, the legacy useSettings hook, and the standalone PrivacyContext/ThemeContext modules. Privacy/theme contexts now live under src/contexts/ and the API helper / push-notifications module move under src/lib/. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
@@ -1,27 +0,0 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
const PrivacyContext = createContext<{
|
||||
privacyMode: boolean;
|
||||
togglePrivacy: () => void;
|
||||
}>({ privacyMode: false, togglePrivacy: () => {} });
|
||||
|
||||
export function PrivacyProvider({ children }: { children: React.ReactNode }) {
|
||||
const [privacyMode, setPrivacyMode] = useState<boolean>(() => {
|
||||
return localStorage.getItem('privacyMode') === 'true';
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle('privacy', privacyMode);
|
||||
localStorage.setItem('privacyMode', String(privacyMode));
|
||||
}, [privacyMode]);
|
||||
|
||||
const togglePrivacy = () => setPrivacyMode((p) => !p);
|
||||
|
||||
return (
|
||||
<PrivacyContext.Provider value={{ privacyMode, togglePrivacy }}>
|
||||
{children}
|
||||
</PrivacyContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const usePrivacy = () => useContext(PrivacyContext);
|
||||
@@ -1,31 +0,0 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
|
||||
const ThemeContext = createContext<{
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
}>({ theme: 'dark', toggleTheme: () => {} });
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [theme, setTheme] = useState<Theme>(() => {
|
||||
const saved = localStorage.getItem('theme') as Theme;
|
||||
if (saved) return saved;
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle('dark', theme === 'dark');
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useTheme = () => useContext(ThemeContext);
|
||||
@@ -1,76 +0,0 @@
|
||||
import { Settings } from 'lucide-react';
|
||||
import type { SectionSettings } from '../api';
|
||||
import { formatAmount } from '@/lib/format';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
AccordionContent,
|
||||
} from '@/components/ui/accordion';
|
||||
import { getColorClasses } from '@/lib/colors';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface Props {
|
||||
sectionId: string;
|
||||
settings: SectionSettings;
|
||||
total?: number;
|
||||
totalCurrency?: string;
|
||||
onToggleExpanded: (expanded: boolean) => void;
|
||||
onOpenConfig: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DashboardSection({
|
||||
sectionId,
|
||||
settings,
|
||||
total,
|
||||
totalCurrency,
|
||||
onToggleExpanded,
|
||||
onOpenConfig,
|
||||
children,
|
||||
}: Props) {
|
||||
const colors = getColorClasses(settings.color);
|
||||
|
||||
return (
|
||||
<Card className={cn('relative overflow-hidden border-l-4', colors.borderLeft)}>
|
||||
{/* Settings icon — outside accordion trigger to avoid button-in-button */}
|
||||
<button
|
||||
onClick={onOpenConfig}
|
||||
className="absolute top-2.5 right-3 z-10 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
|
||||
title="Section settings"
|
||||
aria-label="Section settings"
|
||||
>
|
||||
<Settings className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
|
||||
<Accordion
|
||||
value={settings.expanded ? [sectionId] : []}
|
||||
onValueChange={(value: string[]) => onToggleExpanded(value.includes(sectionId))}
|
||||
>
|
||||
<AccordionItem value={sectionId} className="border-none">
|
||||
<AccordionTrigger
|
||||
className="px-4 py-3 hover:no-underline cursor-pointer"
|
||||
aria-label={`Expand ${settings.label}`}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full pr-8">
|
||||
<span className="text-sm font-semibold text-foreground">
|
||||
{settings.label}
|
||||
</span>
|
||||
{total != null && totalCurrency && (
|
||||
<span data-sensitive className="text-sm font-bold font-mono text-foreground">
|
||||
{formatAmount(total, totalCurrency)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="divide-y divide-border mx-4 mb-4 rounded-lg overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,137 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import type { SectionSettings } from '../api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { COLOR_OPTIONS, getColorClasses } from '@/lib/colors';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface Props {
|
||||
sectionId: string;
|
||||
settings: SectionSettings;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSave: (sectionId: string, updated: Partial<SectionSettings>) => void;
|
||||
}
|
||||
|
||||
function ColorSwatch({ color }: { color: string }) {
|
||||
const classes = getColorClasses(color);
|
||||
return (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className={cn('w-3 h-3 rounded-full', classes.bg, classes.ring, 'ring-1')} />
|
||||
{color}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SectionConfigDialog({ sectionId, settings, open, onOpenChange, onSave }: Props) {
|
||||
const [label, setLabel] = useState(settings.label);
|
||||
const [color, setColor] = useState(settings.color);
|
||||
const [cardColor, setCardColor] = useState(settings.cardColor);
|
||||
const [visible, setVisible] = useState(settings.visible);
|
||||
const [order, setOrder] = useState(String(settings.order));
|
||||
|
||||
const handleSave = () => {
|
||||
onSave(sectionId, {
|
||||
label,
|
||||
color,
|
||||
cardColor,
|
||||
visible,
|
||||
order: parseInt(order) || 0,
|
||||
});
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Configure Section</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Label</Label>
|
||||
<Input value={label} onChange={(e) => setLabel(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Section Color</Label>
|
||||
<Select value={color} onValueChange={setColor}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{COLOR_OPTIONS.map((c) => (
|
||||
<SelectItem key={c} value={c}>
|
||||
<ColorSwatch color={c} />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Card Color</Label>
|
||||
<Select value={cardColor} onValueChange={setCardColor}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{COLOR_OPTIONS.map((c) => (
|
||||
<SelectItem key={c} value={c}>
|
||||
<ColorSwatch color={c} />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Label htmlFor={`visible-${sectionId}`}>Visible</Label>
|
||||
<input
|
||||
id={`visible-${sectionId}`}
|
||||
type="checkbox"
|
||||
checked={visible}
|
||||
onChange={(e) => setVisible(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-input accent-primary cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Order</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
max="10"
|
||||
value={order}
|
||||
onChange={(e) => setOrder(e.target.value)}
|
||||
className="w-20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave}>Save</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
31
frontend/src/contexts/privacy-context.tsx
Normal file
31
frontend/src/contexts/privacy-context.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
|
||||
|
||||
const PrivacyContext = createContext<{
|
||||
privacyMode: boolean;
|
||||
togglePrivacy: () => void;
|
||||
}>({ privacyMode: false, togglePrivacy: () => {} });
|
||||
|
||||
export function PrivacyProvider({ children }: { children: ReactNode }) {
|
||||
const [privacyMode, setPrivacyMode] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setPrivacyMode(localStorage.getItem("privacyMode") === "true");
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle("privacy", privacyMode);
|
||||
localStorage.setItem("privacyMode", String(privacyMode));
|
||||
}, [privacyMode]);
|
||||
|
||||
const togglePrivacy = () => setPrivacyMode((p) => !p);
|
||||
|
||||
return (
|
||||
<PrivacyContext.Provider value={{ privacyMode, togglePrivacy }}>
|
||||
{children}
|
||||
</PrivacyContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const usePrivacy = () => useContext(PrivacyContext);
|
||||
40
frontend/src/contexts/theme-context.tsx
Normal file
40
frontend/src/contexts/theme-context.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
|
||||
|
||||
type Theme = "light" | "dark";
|
||||
|
||||
const ThemeContext = createContext<{
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
}>({ theme: "dark", toggleTheme: () => {} });
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [theme, setTheme] = useState<Theme>("dark");
|
||||
|
||||
// Initialize once on mount (localStorage + prefers-color-scheme).
|
||||
useEffect(() => {
|
||||
const saved = localStorage.getItem("theme") as Theme | null;
|
||||
const initial: Theme = saved
|
||||
? saved
|
||||
: window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
setTheme(initial);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle("dark", theme === "dark");
|
||||
localStorage.setItem("theme", theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useTheme = () => useContext(ThemeContext);
|
||||
@@ -1,55 +0,0 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
getSettings,
|
||||
updateSettings,
|
||||
type UserSettingsData,
|
||||
type SectionSettings,
|
||||
} from '../api';
|
||||
|
||||
const DEFAULT_SETTINGS: UserSettingsData = {
|
||||
dashboard: {
|
||||
sections: {
|
||||
crc_accounts: { label: 'CRC Accounts', color: 'primary', cardColor: 'primary', visible: true, order: 0, expanded: false },
|
||||
usd_accounts: { label: 'USD Accounts', color: 'chart-1', cardColor: 'chart-1', visible: true, order: 1, expanded: false },
|
||||
pension: { label: 'Pension', color: 'chart-2', cardColor: 'chart-2', visible: true, order: 2, expanded: false },
|
||||
savings: { label: 'Savings', color: 'chart-3', cardColor: 'chart-3', visible: true, order: 3, expanded: false },
|
||||
liabilities: { label: 'Liabilities', color: 'destructive', cardColor: 'destructive', visible: true, order: 4, expanded: false },
|
||||
crypto: { label: 'Crypto', color: 'chart-4', cardColor: 'chart-4', visible: true, order: 5, expanded: false },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function useSettings() {
|
||||
const [settings, setSettings] = useState<UserSettingsData>(DEFAULT_SETTINGS);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
getSettings()
|
||||
.then((r) => setSettings(r.data.data))
|
||||
.catch(() => {}) // use defaults on error
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const patchSection = useCallback(
|
||||
async (sectionId: string, partial: Partial<SectionSettings>) => {
|
||||
setSettings((prev) => {
|
||||
const updated = {
|
||||
...prev,
|
||||
dashboard: {
|
||||
...prev.dashboard,
|
||||
sections: {
|
||||
...prev.dashboard.sections,
|
||||
[sectionId]: { ...prev.dashboard.sections[sectionId], ...partial },
|
||||
},
|
||||
},
|
||||
};
|
||||
// Fire-and-forget save
|
||||
updateSettings(updated).catch(console.error);
|
||||
return updated;
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return { settings, loading, patchSection };
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
const BASE_URL = import.meta.env.VITE_API_URL || '/api/v1';
|
||||
const BASE_URL = "/api/v1";
|
||||
|
||||
class ApiError extends Error {
|
||||
response: { status: number; data: unknown };
|
||||
@@ -12,7 +12,12 @@ interface RequestConfig {
|
||||
params?: Record<string, string | number | boolean | undefined>;
|
||||
}
|
||||
|
||||
async function request<T>(method: string, url: string, body?: unknown, config?: RequestConfig): Promise<{ data: T }> {
|
||||
async function request<T>(
|
||||
method: string,
|
||||
url: string,
|
||||
body?: unknown,
|
||||
config?: RequestConfig,
|
||||
): Promise<{ data: T }> {
|
||||
let fullUrl = `${BASE_URL}${url}`;
|
||||
|
||||
if (config?.params) {
|
||||
@@ -25,28 +30,32 @@ async function request<T>(method: string, url: string, body?: unknown, config?:
|
||||
}
|
||||
|
||||
const headers: Record<string, string> = {};
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) headers['Authorization'] = `Bearer ${token}`;
|
||||
|
||||
let fetchBody: BodyInit | undefined;
|
||||
if (body instanceof FormData || body instanceof URLSearchParams) {
|
||||
fetchBody = body;
|
||||
} else if (body !== undefined) {
|
||||
headers['Content-Type'] = 'application/json';
|
||||
headers["Content-Type"] = "application/json";
|
||||
fetchBody = JSON.stringify(body);
|
||||
}
|
||||
|
||||
const res = await fetch(fullUrl, { method, headers, body: fetchBody });
|
||||
const res = await fetch(fullUrl, {
|
||||
method,
|
||||
headers,
|
||||
body: fetchBody,
|
||||
credentials: "same-origin",
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
localStorage.removeItem('token');
|
||||
window.location.href = '/login';
|
||||
await fetch("/api/auth/logout", { method: "POST" }).catch(() => {});
|
||||
if (typeof window !== "undefined") window.location.replace("/login");
|
||||
throw new ApiError(401, null);
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
let data: unknown = null;
|
||||
try { data = await res.json(); } catch {}
|
||||
try {
|
||||
data = await res.json();
|
||||
} catch {}
|
||||
throw new ApiError(res.status, data);
|
||||
}
|
||||
|
||||
@@ -57,33 +66,47 @@ async function request<T>(method: string, url: string, body?: unknown, config?:
|
||||
}
|
||||
|
||||
const api = {
|
||||
get<T = any>(url: string, config?: RequestConfig) {
|
||||
return request<T>('GET', url, undefined, config);
|
||||
get<T = unknown>(url: string, config?: RequestConfig) {
|
||||
return request<T>("GET", url, undefined, config);
|
||||
},
|
||||
post<T = any>(url: string, body?: unknown, config?: RequestConfig) {
|
||||
return request<T>('POST', url, body, config);
|
||||
post<T = unknown>(url: string, body?: unknown, config?: RequestConfig) {
|
||||
return request<T>("POST", url, body, config);
|
||||
},
|
||||
patch<T = any>(url: string, body?: unknown, config?: RequestConfig) {
|
||||
return request<T>('PATCH', url, body, config);
|
||||
patch<T = unknown>(url: string, body?: unknown, config?: RequestConfig) {
|
||||
return request<T>("PATCH", url, body, config);
|
||||
},
|
||||
put<T = any>(url: string, body?: unknown, config?: RequestConfig) {
|
||||
return request<T>('PUT', url, body, config);
|
||||
put<T = unknown>(url: string, body?: unknown, config?: RequestConfig) {
|
||||
return request<T>("PUT", url, body, config);
|
||||
},
|
||||
delete<T = any>(url: string, config?: RequestConfig) {
|
||||
return request<T>('DELETE', url, undefined, config);
|
||||
delete<T = unknown>(url: string, config?: RequestConfig) {
|
||||
return request<T>("DELETE", url, undefined, config);
|
||||
},
|
||||
};
|
||||
|
||||
export default api;
|
||||
|
||||
export async function login(username: string, password: string) {
|
||||
const form = new URLSearchParams();
|
||||
form.append('username', username);
|
||||
form.append('password', password);
|
||||
const { data } = await api.post('/auth/login', form);
|
||||
localStorage.setItem('token', data.access_token);
|
||||
return data;
|
||||
const res = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username, password }),
|
||||
credentials: "same-origin",
|
||||
});
|
||||
if (!res.ok) {
|
||||
let data: unknown = null;
|
||||
try {
|
||||
data = await res.json();
|
||||
} catch {}
|
||||
throw new ApiError(res.status, data);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function logout() {
|
||||
await fetch("/api/auth/logout", { method: "POST", credentials: "same-origin" });
|
||||
}
|
||||
|
||||
// ─── Types ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface Account {
|
||||
id: number;
|
||||
@@ -109,34 +132,6 @@ export interface ImportResult {
|
||||
errors: string[];
|
||||
}
|
||||
|
||||
// --- User Settings ---
|
||||
|
||||
export interface SectionSettings {
|
||||
label: string;
|
||||
color: string;
|
||||
cardColor: string;
|
||||
visible: boolean;
|
||||
order: number;
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
export interface DashboardSettings {
|
||||
sections: Record<string, SectionSettings>;
|
||||
}
|
||||
|
||||
export interface UserSettingsData {
|
||||
dashboard: DashboardSettings;
|
||||
}
|
||||
|
||||
export interface UserSettingsResponse {
|
||||
key: string;
|
||||
data: UserSettingsData;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export const getSettings = () => api.get<UserSettingsResponse>('/settings/');
|
||||
export const updateSettings = (data: UserSettingsData) => api.patch<UserSettingsResponse>('/settings/', { data });
|
||||
|
||||
export interface Transaction {
|
||||
id: number;
|
||||
amount: number;
|
||||
@@ -160,8 +155,13 @@ export interface Transaction {
|
||||
|
||||
// --- Budget / Recurring Items ---
|
||||
|
||||
export type RecurringItemType = 'INCOME' | 'EXPENSE';
|
||||
export type RecurringFrequency = 'WEEKLY' | 'MONTHLY' | 'QUARTERLY' | 'BIANNUAL' | 'YEARLY';
|
||||
export type RecurringItemType = "INCOME" | "EXPENSE";
|
||||
export type RecurringFrequency =
|
||||
| "WEEKLY"
|
||||
| "MONTHLY"
|
||||
| "QUARTERLY"
|
||||
| "BIANNUAL"
|
||||
| "YEARLY";
|
||||
|
||||
export interface RecurringItem {
|
||||
id: number;
|
||||
@@ -295,19 +295,22 @@ export interface SavingsAccrualUpdate {
|
||||
}
|
||||
|
||||
export const getSavingsAccruals = () =>
|
||||
api.get<SavingsAccrual[]>('/savings-accrual/');
|
||||
api.get<SavingsAccrual[]>("/savings-accrual/");
|
||||
export const createSavingsAccrual = (data: SavingsAccrualCreate) =>
|
||||
api.post<SavingsAccrual>('/savings-accrual/', data);
|
||||
api.post<SavingsAccrual>("/savings-accrual/", data);
|
||||
export const updateSavingsAccrual = (id: number, data: SavingsAccrualUpdate) =>
|
||||
api.patch<SavingsAccrual>(`/savings-accrual/${id}`, data);
|
||||
export const deleteSavingsAccrual = (id: number) =>
|
||||
api.delete(`/savings-accrual/${id}`);
|
||||
|
||||
// Budget API functions
|
||||
export const getRecurringItems = (params?: { item_type?: string; is_active?: boolean }) =>
|
||||
api.get<RecurringItem[]>('/budget/recurring', { params });
|
||||
// --- Budget ---
|
||||
|
||||
export const getRecurringItems = (params?: {
|
||||
item_type?: string;
|
||||
is_active?: boolean;
|
||||
}) => api.get<RecurringItem[]>("/budget/recurring", { params });
|
||||
export const createRecurringItem = (data: RecurringItemCreate) =>
|
||||
api.post<RecurringItem>('/budget/recurring', data);
|
||||
api.post<RecurringItem>("/budget/recurring", data);
|
||||
export const updateRecurringItem = (id: number, data: RecurringItemUpdate) =>
|
||||
api.patch<RecurringItem>(`/budget/recurring/${id}`, data);
|
||||
export const deleteRecurringItem = (id: number) =>
|
||||
@@ -316,7 +319,11 @@ export const getYearlyProjection = (year: number) =>
|
||||
api.get<YearlyProjection>(`/budget/projection/${year}`);
|
||||
export const getMonthlyDetail = (year: number, month: number) =>
|
||||
api.get<MonthlyDetail>(`/budget/month/${year}/${month}`);
|
||||
export const upsertBalanceOverride = (year: number, month: number, override_balance: number) =>
|
||||
export const upsertBalanceOverride = (
|
||||
year: number,
|
||||
month: number,
|
||||
override_balance: number,
|
||||
) =>
|
||||
api.put(`/budget/balance-override/${year}/${month}`, { override_balance });
|
||||
export const deleteBalanceOverride = (year: number, month: number) =>
|
||||
api.delete(`/budget/balance-override/${year}/${month}`);
|
||||
@@ -330,9 +337,9 @@ export interface SalariosSummary {
|
||||
}
|
||||
|
||||
export const getSalarios = (params?: { limit?: number; offset?: number }) =>
|
||||
api.get<Transaction[]>('/salarios/', { params });
|
||||
api.get<Transaction[]>("/salarios/", { params });
|
||||
export const getSalariosSummary = () =>
|
||||
api.get<SalariosSummary>('/salarios/summary');
|
||||
api.get<SalariosSummary>("/salarios/summary");
|
||||
|
||||
// --- Pensions ---
|
||||
|
||||
@@ -380,18 +387,16 @@ export interface PensionManualEntry {
|
||||
|
||||
export const uploadPensionPDFs = (files: File[]) => {
|
||||
const form = new FormData();
|
||||
files.forEach((f) => form.append('files', f));
|
||||
return api.post<PensionUploadResult>('/pensions/upload', form);
|
||||
files.forEach((f) => form.append("files", f));
|
||||
return api.post<PensionUploadResult>("/pensions/upload", form);
|
||||
};
|
||||
|
||||
export const getPensionSnapshots = () =>
|
||||
api.get<PensionSnapshot[]>('/pensions/snapshots');
|
||||
|
||||
api.get<PensionSnapshot[]>("/pensions/snapshots");
|
||||
export const getPensionFundSummary = () =>
|
||||
api.get<PensionSnapshot[]>('/pensions/fund-summary');
|
||||
|
||||
api.get<PensionSnapshot[]>("/pensions/fund-summary");
|
||||
export const submitPensionManualEntries = (entries: PensionManualEntry[]) =>
|
||||
api.post<PensionUploadResult>('/pensions/manual', { entries });
|
||||
api.post<PensionUploadResult>("/pensions/manual", { entries });
|
||||
|
||||
// --- Municipal Receipts ---
|
||||
|
||||
@@ -448,17 +453,18 @@ export interface MunicipalReceiptUploadResult {
|
||||
|
||||
export const uploadMunicipalReceipt = (file: File) => {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
return api.post<MunicipalReceiptUploadResult>('/municipal-receipts/upload', form);
|
||||
form.append("file", file);
|
||||
return api.post<MunicipalReceiptUploadResult>(
|
||||
"/municipal-receipts/upload",
|
||||
form,
|
||||
);
|
||||
};
|
||||
|
||||
export const getMunicipalReceipts = () =>
|
||||
api.get<MunicipalReceipt[]>('/municipal-receipts/');
|
||||
|
||||
api.get<MunicipalReceipt[]>("/municipal-receipts/");
|
||||
export const getMunicipalReceiptDetail = (id: number) =>
|
||||
api.get<MunicipalReceiptDetail>(`/municipal-receipts/${id}`);
|
||||
|
||||
export const getWaterConsumption = (months?: number) =>
|
||||
api.get<WaterMeterReading[]>('/municipal-receipts/water-consumption', {
|
||||
api.get<WaterMeterReading[]>("/municipal-receipts/water-consumption", {
|
||||
params: months ? { months } : undefined,
|
||||
});
|
||||
@@ -1,376 +0,0 @@
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
ArrowRight,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
RefreshCw,
|
||||
CreditCard,
|
||||
Pencil,
|
||||
Check,
|
||||
X,
|
||||
BellRing,
|
||||
Landmark,
|
||||
} from 'lucide-react';
|
||||
|
||||
import api, { type Account, type Transaction } from '../api';
|
||||
import { useSettings } from '@/hooks/useSettings';
|
||||
import { formatAmount, formatDate, formatLocalDatetime } from '@/lib/format';
|
||||
import DashboardSection from '@/components/DashboardSection';
|
||||
import SectionConfigDialog from '@/components/SectionConfigDialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// --- Section definitions ---
|
||||
|
||||
interface SectionDef {
|
||||
filterFn: (a: Account) => boolean;
|
||||
totalCurrency: string; // empty string = no total
|
||||
}
|
||||
|
||||
const SECTION_DEFS: Record<string, SectionDef> = {
|
||||
crc_accounts: { filterFn: (a) => a.account_type === 'BANK' && a.currency === 'CRC', totalCurrency: 'CRC' },
|
||||
usd_accounts: { filterFn: (a) => a.account_type === 'BANK' && a.currency === 'USD', totalCurrency: 'USD' },
|
||||
pension: { filterFn: (a) => a.account_type === 'PENSION', totalCurrency: 'CRC' },
|
||||
savings: { filterFn: (a) => a.account_type === 'SAVINGS', totalCurrency: 'CRC' },
|
||||
liabilities: { filterFn: (a) => a.account_type === 'LIABILITY', totalCurrency: '' },
|
||||
crypto: { filterFn: (a) => a.account_type === 'CRYPTO', totalCurrency: '' },
|
||||
};
|
||||
|
||||
const BANK_ORDER = ['BAC', 'BCR', 'DAVIVIENDA'];
|
||||
|
||||
// --- AccountRow ---
|
||||
|
||||
interface AccountRowProps {
|
||||
account: Account;
|
||||
editingId: number | null;
|
||||
editValue: string;
|
||||
setEditValue: (v: string) => void;
|
||||
startEditing: (a: Account) => void;
|
||||
saveBalance: (id: number) => void;
|
||||
cancelEditing: () => void;
|
||||
}
|
||||
|
||||
function AccountRow({
|
||||
account,
|
||||
editingId,
|
||||
editValue,
|
||||
setEditValue,
|
||||
startEditing,
|
||||
saveBalance,
|
||||
cancelEditing,
|
||||
}: AccountRowProps) {
|
||||
const isLiability = account.account_type === 'LIABILITY';
|
||||
const isCrypto = account.account_type === 'CRYPTO';
|
||||
const label = isCrypto ? account.label : (account.bank === 'DAVIVIENDA' ? 'DAV' : account.bank);
|
||||
const isEditing = editingId === account.id;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between px-3 py-2.5 hover:bg-muted/30 transition-colors group">
|
||||
<span className="text-sm font-medium text-muted-foreground">{label}</span>
|
||||
|
||||
{isEditing ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') saveBalance(account.id);
|
||||
if (e.key === 'Escape') cancelEditing();
|
||||
}}
|
||||
autoFocus
|
||||
className="text-sm font-bold font-mono tracking-tight h-auto py-1 w-40"
|
||||
/>
|
||||
<Button variant="ghost" size="icon-xs" onClick={() => saveBalance(account.id)} title="Save" aria-label="Save balance">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-xs" onClick={cancelEditing} title="Cancel" aria-label="Cancel editing">
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span data-sensitive className={cn('text-lg font-bold font-mono tracking-tight', isLiability && 'text-destructive')}>
|
||||
{formatAmount(account.balance, account.currency)}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => startEditing(account)}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
title="Edit balance"
|
||||
aria-label="Edit balance"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
{isLiability && account.next_payment != null && (
|
||||
<span data-sensitive className="text-xs font-mono text-destructive/60 ml-2">
|
||||
Next: {formatAmount(account.next_payment, account.currency)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Dashboard ---
|
||||
|
||||
export default function Dashboard() {
|
||||
const [accounts, setAccounts] = useState<Account[]>([]);
|
||||
const [recent, setRecent] = useState<Transaction[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [editValue, setEditValue] = useState('');
|
||||
const [exchangeRate, setExchangeRate] = useState<{ buy_rate: number; sell_rate: number } | null>(null);
|
||||
const [configSection, setConfigSection] = useState<string | null>(null);
|
||||
const [testingPush, setTestingPush] = useState(false);
|
||||
|
||||
const { settings, patchSection } = useSettings();
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [accRes, txRes] = await Promise.all([
|
||||
api.get('/accounts/'),
|
||||
api.get('/transactions/recent?limit=5'),
|
||||
]);
|
||||
setAccounts(accRes.data);
|
||||
setRecent(txRes.data);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
api.get('/exchange-rate/').then((r) => setExchangeRate(r.data)).catch(() => {});
|
||||
};
|
||||
|
||||
useEffect(() => { fetchData(); }, []);
|
||||
|
||||
const startEditing = (account: Account) => {
|
||||
setEditingId(account.id);
|
||||
setEditValue(String(account.balance));
|
||||
};
|
||||
const cancelEditing = () => { setEditingId(null); setEditValue(''); };
|
||||
const saveBalance = async (accountId: number) => {
|
||||
const parsed = parseFloat(editValue);
|
||||
if (isNaN(parsed)) return cancelEditing();
|
||||
try {
|
||||
await api.patch(`/accounts/${accountId}`, { balance: parsed });
|
||||
setEditingId(null);
|
||||
setEditValue('');
|
||||
fetchData();
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const rowProps = { editingId, editValue, setEditValue, startEditing, saveBalance, cancelEditing };
|
||||
|
||||
// Sort sections by order, filter by visible
|
||||
const sortedSections = useMemo(() => {
|
||||
const sections = settings.dashboard.sections;
|
||||
return Object.entries(sections)
|
||||
.filter(([, s]) => s.visible)
|
||||
.sort(([, a], [, b]) => a.order - b.order);
|
||||
}, [settings]);
|
||||
|
||||
// Net worth calculation
|
||||
const netWorthBreakdown = useMemo(() => {
|
||||
if (accounts.length === 0) return null;
|
||||
let assets = 0;
|
||||
let liabilities = 0;
|
||||
for (const a of accounts) {
|
||||
const isLiability = a.account_type === 'LIABILITY';
|
||||
let crcValue = 0;
|
||||
if (a.currency === 'USD') {
|
||||
crcValue = Math.abs(a.balance) * (exchangeRate?.sell_rate ?? 0);
|
||||
} else if (a.currency === 'CRC') {
|
||||
crcValue = Math.abs(a.balance);
|
||||
}
|
||||
if (isLiability) {
|
||||
liabilities += crcValue;
|
||||
} else {
|
||||
assets += crcValue;
|
||||
}
|
||||
}
|
||||
return { assets, liabilities, net: assets - liabilities };
|
||||
}, [accounts, exchangeRate]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold font-heading">Dashboard</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">Financial overview</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={fetchData} title="Refresh" aria-label="Refresh">
|
||||
<RefreshCw className={cn('w-4 h-4', loading && 'animate-spin')} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Net Worth */}
|
||||
{netWorthBreakdown != null && (
|
||||
<Card>
|
||||
<CardContent className="px-4 py-3">
|
||||
<div className="flex items-center justify-between text-sm font-mono text-muted-foreground">
|
||||
<span>Net <span data-sensitive className="text-foreground font-bold">{netWorthBreakdown.net < 0 ? '-' : ''}{formatAmount(netWorthBreakdown.net, 'CRC')}</span></span>
|
||||
<div className="flex gap-4">
|
||||
<span>Assets <span data-sensitive className="text-foreground">{formatAmount(netWorthBreakdown.assets, 'CRC')}</span></span>
|
||||
<span>Liabilities <span data-sensitive className="text-foreground">{formatAmount(netWorthBreakdown.liabilities, 'CRC')}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Account sections */}
|
||||
{sortedSections.map(([sectionId, sectionSettings]) => {
|
||||
const def = SECTION_DEFS[sectionId];
|
||||
if (!def) return null;
|
||||
let accts = accounts.filter(def.filterFn);
|
||||
if (accts.length === 0) return null;
|
||||
|
||||
// Sort bank accounts by bank order
|
||||
if (sectionId === 'crc_accounts' || sectionId === 'usd_accounts') {
|
||||
accts = accts.sort((a, b) => BANK_ORDER.indexOf(a.bank) - BANK_ORDER.indexOf(b.bank));
|
||||
}
|
||||
|
||||
const total = accts.reduce((s, a) => s + a.balance, 0);
|
||||
|
||||
return (
|
||||
<DashboardSection
|
||||
key={sectionId}
|
||||
sectionId={sectionId}
|
||||
settings={sectionSettings}
|
||||
total={def.totalCurrency ? total : undefined}
|
||||
totalCurrency={def.totalCurrency || undefined}
|
||||
onToggleExpanded={(expanded) => patchSection(sectionId, { expanded })}
|
||||
onOpenConfig={() => setConfigSection(sectionId)}
|
||||
>
|
||||
{accts.map((a) => (
|
||||
<AccountRow key={a.id} account={a} {...rowProps} />
|
||||
))}
|
||||
</DashboardSection>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Exchange rate */}
|
||||
{exchangeRate && (
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">USD/CRC Exchange Rate</span>
|
||||
<div className="flex items-baseline gap-3 mt-1">
|
||||
<span data-sensitive className="text-lg font-bold font-mono">Buy: ₡{exchangeRate.buy_rate.toFixed(2)}</span>
|
||||
<span data-sensitive className="text-lg font-bold font-mono text-muted-foreground">Sell: ₡{exchangeRate.sell_rate.toFixed(2)}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Recent transactions */}
|
||||
<Card>
|
||||
<CardHeader className="border-b flex-row items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<CreditCard className="w-4 h-4 text-muted-foreground" />
|
||||
<CardTitle className="text-sm">Recent Charges</CardTitle>
|
||||
</div>
|
||||
<Link
|
||||
to="/transactions"
|
||||
className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
|
||||
>
|
||||
View all
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{recent.length === 0 && !loading ? (
|
||||
<div className="px-5 py-12 text-center text-muted-foreground text-sm">No transactions yet. Add your first one!</div>
|
||||
) : (
|
||||
<div className="divide-y divide-border">
|
||||
{recent.map((tx) => (
|
||||
<div key={tx.id} className="flex items-center justify-between px-5 py-3.5 hover:bg-muted/50 transition-colors">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center shrink-0',
|
||||
tx.transaction_type === 'COMPRA' ? 'bg-destructive/10 text-destructive' : 'bg-primary/10 text-primary'
|
||||
)}>
|
||||
{tx.transaction_type === 'DEPOSITO' ? <Landmark className="w-4 h-4" /> : tx.transaction_type === 'DEVOLUCION' ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate">{tx.merchant}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatDate(tx.date)}
|
||||
{tx.category && <span className="ml-2 text-muted-foreground/60">{tx.category.name}</span>}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span data-sensitive className={cn(
|
||||
'font-mono text-sm font-medium shrink-0 ml-4',
|
||||
tx.transaction_type !== 'COMPRA' && 'text-primary'
|
||||
)}>
|
||||
{tx.transaction_type === 'COMPRA' ? '-' : '+'}{formatAmount(tx.amount, tx.currency)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Test push notification */}
|
||||
<Card className="border-dashed border-yellow-500/50">
|
||||
<CardContent className="p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Test Push Notification</p>
|
||||
<p className="text-xs text-muted-foreground">Creates a mock transaction to trigger a push notification</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={testingPush}
|
||||
onClick={async () => {
|
||||
setTestingPush(true);
|
||||
try {
|
||||
const merchants = ['Walmart', 'AutoMercado', 'Uber Eats', 'Amazon', 'PriceSmart'];
|
||||
const amounts = [4500, 12350, 8900, 25000, 67800];
|
||||
const i = Math.floor(Math.random() * merchants.length);
|
||||
await api.post('/transactions/', {
|
||||
merchant: merchants[i],
|
||||
amount: amounts[i],
|
||||
currency: 'CRC',
|
||||
date: formatLocalDatetime(new Date()),
|
||||
bank: 'BAC',
|
||||
source: 'CREDIT_CARD',
|
||||
transaction_type: 'COMPRA',
|
||||
reference: `test-push-${Date.now()}`,
|
||||
notes: '[TEST] Push notification test — safe to delete',
|
||||
});
|
||||
fetchData();
|
||||
} catch (e) {
|
||||
console.error('Test push failed:', e);
|
||||
} finally {
|
||||
setTestingPush(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<BellRing className="w-4 h-4 mr-2" />
|
||||
{testingPush ? 'Sending...' : 'Send test'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Section config dialog */}
|
||||
{configSection && settings.dashboard.sections[configSection] && (
|
||||
<SectionConfigDialog
|
||||
sectionId={configSection}
|
||||
settings={settings.dashboard.sections[configSection]}
|
||||
open={!!configSection}
|
||||
onOpenChange={(open) => { if (!open) setConfigSection(null); }}
|
||||
onSave={(id, partial) => patchSection(id, partial)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { Plus, ClipboardPaste } from 'lucide-react';
|
||||
|
||||
import api, { type Transaction, type Category } from '../api';
|
||||
import PasteImportModal from '../components/PasteImportModal';
|
||||
import BillingCycleSelector from '../components/BillingCycleSelector';
|
||||
import TransactionList from '../components/TransactionList';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
function formatAmount(amount: number, currency: string) {
|
||||
const abs = Math.abs(amount);
|
||||
if (currency === 'USD') {
|
||||
return `$${abs.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||
}
|
||||
return `₡${abs.toLocaleString('es-CR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||
}
|
||||
|
||||
export default function Transactions() {
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
const [categoryFilter, setCategoryFilter] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [importOpen, setImportOpen] = useState(false);
|
||||
const [cycle, setCycle] = useState<{ year: number; month: number } | null>(null);
|
||||
|
||||
const fetchTransactions = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: Record<string, string> = { source: 'CREDIT_CARD', limit: '200' };
|
||||
if (search) params.search = search;
|
||||
if (categoryFilter) params.category_id = categoryFilter;
|
||||
if (cycle) {
|
||||
params.cycle_year = String(cycle.year);
|
||||
params.cycle_month = String(cycle.month);
|
||||
}
|
||||
const { data } = await api.get('/transactions/', { params });
|
||||
setTransactions(data);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [search, categoryFilter, cycle]);
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/categories/').then((r) => setCategories(r.data));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(fetchTransactions, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [fetchTransactions]);
|
||||
|
||||
const totalCRC = transactions
|
||||
.filter((tx) => tx.currency === 'CRC')
|
||||
.reduce((sum, tx) => sum + (tx.transaction_type === 'DEVOLUCION' ? -tx.amount : tx.amount), 0);
|
||||
const totalUSD = transactions
|
||||
.filter((tx) => tx.currency === 'USD')
|
||||
.reduce((sum, tx) => sum + (tx.transaction_type === 'DEVOLUCION' ? -tx.amount : tx.amount), 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold font-heading">Credit Card Transactions</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{transactions.length} transactions
|
||||
{totalCRC !== 0 && (
|
||||
<> · <span data-sensitive className="font-mono text-foreground">{formatAmount(totalCRC, 'CRC')}</span></>
|
||||
)}
|
||||
{totalUSD !== 0 && (
|
||||
<> · <span data-sensitive className="font-mono text-foreground">{formatAmount(totalUSD, 'USD')}</span></>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => setImportOpen(true)}>
|
||||
<ClipboardPaste className="w-4 h-4" />
|
||||
Import
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Billing cycle */}
|
||||
<BillingCycleSelector value={cycle} onChange={setCycle} />
|
||||
|
||||
{/* Category filter */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Select
|
||||
value={categoryFilter || 'all'}
|
||||
onValueChange={(v) => setCategoryFilter(v === 'all' ? '' : v)}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Categories</SelectItem>
|
||||
{categories.map((c) => (
|
||||
<SelectItem key={c.id} value={String(c.id)}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<TransactionList
|
||||
transactions={transactions}
|
||||
loading={loading}
|
||||
source="CREDIT_CARD"
|
||||
search={search}
|
||||
onSearchChange={setSearch}
|
||||
onRefresh={fetchTransactions}
|
||||
showCategory
|
||||
/>
|
||||
|
||||
{importOpen && (
|
||||
<PasteImportModal
|
||||
onClose={() => setImportOpen(false)}
|
||||
onImported={fetchTransactions}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { ArrowLeftRight } from 'lucide-react';
|
||||
|
||||
import api, { type Transaction } from '../api';
|
||||
import TransactionList from '../components/TransactionList';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
|
||||
type SourceTab = 'CASH' | 'TRANSFER';
|
||||
|
||||
export default function Transfers() {
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
const [sourceTab, setSourceTab] = useState<SourceTab>('CASH');
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchTransactions = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: Record<string, string> = { source: sourceTab, limit: '200' };
|
||||
if (search) params.search = search;
|
||||
const { data } = await api.get('/transactions/', { params });
|
||||
setTransactions(data);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [search, sourceTab]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(fetchTransactions, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [fetchTransactions]);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold font-heading">Cash & Transfers</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Track non-credit-card expenses
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs value={sourceTab} onValueChange={(v) => setSourceTab(v as SourceTab)}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="CASH">Cash</TabsTrigger>
|
||||
<TabsTrigger value="TRANSFER">Transfers</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value={sourceTab} className="mt-5 space-y-5">
|
||||
<TransactionList
|
||||
transactions={transactions}
|
||||
loading={loading}
|
||||
source={sourceTab}
|
||||
search={search}
|
||||
onSearchChange={setSearch}
|
||||
onRefresh={fetchTransactions}
|
||||
showCategory={false}
|
||||
addLabel={sourceTab === 'CASH' ? 'Add Cash Expense' : 'Add Transfer'}
|
||||
emptyIcon={<ArrowLeftRight className="w-8 h-8 mx-auto mb-3 text-muted-foreground/50" />}
|
||||
emptyMessage={`No ${sourceTab.toLowerCase()} transactions yet`}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user