techniker-me/personal-finance
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ran prettier

Browse Source
This commit is contained in:
Alexander Zinn
2025-12-07 12:19:38 -05:00
parent a62782a58f
commit 9d493ba82f
38 changed files with 934 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend-web/src/components/AddAccountDialog.tsx
View File

@@ -1,19 +1,6 @@
import {useState} from 'react';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog';
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
@@ -38,7 +25,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
interestRate: '',
minimumPayment: '',
dueDay: '',
notes: '',
notes: ''
});
const handleSubmit = (e: React.FormEvent) => {
@@ -58,7 +45,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
dueDay: parseInt(formData.dueDay) || 1,
notes: formData.notes || undefined,
createdAt: now,
updatedAt: now,
updatedAt: now
};
dispatch(addAccount(account));
@@ -73,7 +60,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
interestRate: '',
minimumPayment: '',
dueDay: '',
notes: '',
notes: ''
});
};
@@ -86,9 +73,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
<DialogContent className="card-elevated max-h-[90vh] overflow-y-auto sm:max-w-lg">
<DialogHeader>
<DialogTitle>Add Debt Account</DialogTitle>
<DialogDescription>
Add a new debt account to track your payoff progress
</DialogDescription>
<DialogDescription>Add a new debt account to track your payoff progress</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit}>
<div className="grid gap-4 py-4">
@@ -106,11 +91,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
<div className="grid gap-2">
<Label htmlFor="category">Category</Label>
<Select
value={formData.categoryId}
onValueChange={value => updateField('categoryId', value)}
required
>
<Select value={formData.categoryId} onValueChange={value => updateField('categoryId', value)} required>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select a category" />
</SelectTrigger>
@@ -236,4 +217,3 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
</Dialog>
);
}

8
frontend-web/src/components/ErrorBoundary.tsx
View File

@@ -47,14 +47,10 @@ export class ErrorBoundary extends Component<Props, State> {
<CardTitle className="text-red-400">Something went wrong</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground">
An unexpected error occurred. Please try refreshing the page.
</p>
<p className="text-sm text-muted-foreground">An unexpected error occurred. Please try refreshing the page.</p>
{import.meta.env.DEV && this.state.error && (
<div className="p-3 bg-destructive/10 rounded-md">
<p className="text-xs font-mono text-destructive break-all">
{this.state.error.message}
</p>
<p className="text-xs font-mono text-destructive break-all">{this.state.error.message}</p>
</div>
)}
<div className="flex gap-2">

13
frontend-web/src/components/Layout.tsx
View File

@@ -6,7 +6,7 @@ const navItems = [
{to: '/cashflow', label: 'Cashflow', icon: ArrowLeftRight},
{to: '/debts', label: 'Debts', icon: CreditCard},
{to: '/invoices', label: 'Invoices', icon: FileText},
{to: '/clients', label: 'Clients', icon: Users},
{to: '/clients', label: 'Clients', icon: Users}
];
export default function Layout() {
@@ -27,16 +27,11 @@ export default function Layout() {
to={item.to}
className={({isActive}) =>
`flex h-9 items-center gap-3 rounded-lg px-2.5 transition-colors ${
isActive
? 'bg-accent text-foreground'
: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
isActive ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
}`
}
>
}>
<item.icon className="h-[18px] w-[18px] shrink-0" />
<span className="text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
{item.label}
</span>
<span className="text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">{item.label}</span>
</NavLink>
))}
</nav>

56
frontend-web/src/components/dialogs/AddAssetDialog.tsx
View File

@@ -45,13 +45,15 @@ export default function AddAssetDialog({open, onOpenChange}: Props) {
const valueNum = validatePositiveNumber(form.value);
if (valueNum === null) return;
dispatch(addAsset({
id: crypto.randomUUID(),
name: sanitizeString(form.name),
type: form.type as typeof assetTypes[number],
value: valueNum,
updatedAt: new Date().toISOString(),
}));
dispatch(
addAsset({
id: crypto.randomUUID(),
name: sanitizeString(form.name),
type: form.type as (typeof assetTypes)[number],
value: valueNum,
updatedAt: new Date().toISOString()
})
);
onOpenChange(false);
setForm({name: '', type: '', value: ''});
setErrors({name: '', value: ''});
@@ -68,31 +70,57 @@ export default function AddAssetDialog({open, onOpenChange}: Props) {
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="e.g., Chase Savings" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
<Input
id="name"
placeholder="e.g., Chase Savings"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
className="input-depth"
required
/>
{errors.name && <p className="text-xs text-red-400">{errors.name}</p>}
</div>
<div className="grid gap-2">
<Label>Type</Label>
<Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
{assetTypes.map(t => <SelectItem key={t} value={t} className="capitalize">{t}</SelectItem>)}
{assetTypes.map(t => (
<SelectItem key={t} value={t} className="capitalize">
{t}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid gap-2">
<Label htmlFor="value">Value</Label>
<Input id="value" type="number" step="0.01" min="0" placeholder="0.00" value={form.value} onChange={e => setForm({...form, value: e.target.value})} className="input-depth" required />
<Input
id="value"
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={form.value}
onChange={e => setForm({...form, value: e.target.value})}
className="input-depth"
required
/>
{errors.value && <p className="text-xs text-red-400">{errors.value}</p>}
</div>
</div>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="submit" disabled={!form.name || !form.type || !form.value}>Add Asset</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!form.name || !form.type || !form.value}>
Add Asset
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

64
frontend-web/src/components/dialogs/AddClientDialog.tsx
View File

@@ -16,15 +16,17 @@ export default function AddClientDialog({open, onOpenChange}: Props) {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
dispatch(addClient({
id: crypto.randomUUID(),
name: form.name,
email: form.email,
phone: form.phone || undefined,
company: form.company || undefined,
address: form.address || undefined,
createdAt: new Date().toISOString(),
}));
dispatch(
addClient({
id: crypto.randomUUID(),
name: form.name,
email: form.email,
phone: form.phone || undefined,
company: form.company || undefined,
address: form.address || undefined,
createdAt: new Date().toISOString()
})
);
onOpenChange(false);
setForm({name: '', email: '', phone: '', company: '', address: ''});
};
@@ -40,15 +42,36 @@ export default function AddClientDialog({open, onOpenChange}: Props) {
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Name *</Label>
<Input id="name" placeholder="John Doe" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
<Input
id="name"
placeholder="John Doe"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="email">Email *</Label>
<Input id="email" type="email" placeholder="john@example.com" value={form.email} onChange={e => setForm({...form, email: e.target.value})} className="input-depth" required />
<Input
id="email"
type="email"
placeholder="john@example.com"
value={form.email}
onChange={e => setForm({...form, email: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="company">Company</Label>
<Input id="company" placeholder="Acme Inc" value={form.company} onChange={e => setForm({...form, company: e.target.value})} className="input-depth" />
<Input
id="company"
placeholder="Acme Inc"
value={form.company}
onChange={e => setForm({...form, company: e.target.value})}
className="input-depth"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="phone">Phone</Label>
@@ -56,16 +79,25 @@ export default function AddClientDialog({open, onOpenChange}: Props) {
</div>
<div className="grid gap-2">
<Label htmlFor="address">Address</Label>
<Input id="address" placeholder="123 Main St" value={form.address} onChange={e => setForm({...form, address: e.target.value})} className="input-depth" />
<Input
id="address"
placeholder="123 Main St"
value={form.address}
onChange={e => setForm({...form, address: e.target.value})}
className="input-depth"
/>
</div>
</div>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="submit" disabled={!form.name || !form.email}>Add Client</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!form.name || !form.email}>
Add Client
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

81
frontend-web/src/components/dialogs/AddExpenseDialog.tsx
View File

@@ -20,17 +20,19 @@ export default function AddExpenseDialog({open, onOpenChange}: Props) {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
dispatch(addExpense({
id: crypto.randomUUID(),
name: form.name,
amount: parseFloat(form.amount) || 0,
frequency: form.frequency as typeof frequencies[number],
category: form.category,
nextDate: new Date().toISOString().split('T')[0],
isActive: true,
isEssential: form.isEssential,
createdAt: new Date().toISOString(),
}));
dispatch(
addExpense({
id: crypto.randomUUID(),
name: form.name,
amount: parseFloat(form.amount) || 0,
frequency: form.frequency as (typeof frequencies)[number],
category: form.category,
nextDate: new Date().toISOString().split('T')[0],
isActive: true,
isEssential: form.isEssential,
createdAt: new Date().toISOString()
})
);
onOpenChange(false);
setForm({name: '', amount: '', frequency: '', category: '', isEssential: false});
};
@@ -46,19 +48,42 @@ export default function AddExpenseDialog({open, onOpenChange}: Props) {
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="e.g., Netflix" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
<Input
id="name"
placeholder="e.g., Netflix"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="amount">Amount</Label>
<Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
<Input
id="amount"
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={form.amount}
onChange={e => setForm({...form, amount: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid gap-2">
<Label>Frequency</Label>
<Select value={form.frequency} onValueChange={v => setForm({...form, frequency: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
{frequencies.map(f => <SelectItem key={f} value={f} className="capitalize">{f}</SelectItem>)}
{frequencies.map(f => (
<SelectItem key={f} value={f} className="capitalize">
{f}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
@@ -66,24 +91,38 @@ export default function AddExpenseDialog({open, onOpenChange}: Props) {
<div className="grid gap-2">
<Label>Category</Label>
<Select value={form.category} onValueChange={v => setForm({...form, category: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select category" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select category" />
</SelectTrigger>
<SelectContent>
{categories.expense.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
{categories.expense.map(c => (
<SelectItem key={c} value={c}>
{c}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<label className="flex items-center gap-2 cursor-pointer">
<input type="checkbox" checked={form.isEssential} onChange={e => setForm({...form, isEssential: e.target.checked})} className="rounded border-border" />
<input
type="checkbox"
checked={form.isEssential}
onChange={e => setForm({...form, isEssential: e.target.checked})}
className="rounded border-border"
/>
<span className="text-sm">Essential expense (rent, utilities, etc.)</span>
</label>
</div>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>Add Expense</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>
Add Expense
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

72
frontend-web/src/components/dialogs/AddIncomeDialog.tsx
View File

@@ -20,16 +20,18 @@ export default function AddIncomeDialog({open, onOpenChange}: Props) {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
dispatch(addIncomeSource({
id: crypto.randomUUID(),
name: form.name,
amount: parseFloat(form.amount) || 0,
frequency: form.frequency as typeof frequencies[number],
category: form.category,
nextDate: new Date().toISOString().split('T')[0],
isActive: true,
createdAt: new Date().toISOString(),
}));
dispatch(
addIncomeSource({
id: crypto.randomUUID(),
name: form.name,
amount: parseFloat(form.amount) || 0,
frequency: form.frequency as (typeof frequencies)[number],
category: form.category,
nextDate: new Date().toISOString().split('T')[0],
isActive: true,
createdAt: new Date().toISOString()
})
);
onOpenChange(false);
setForm({name: '', amount: '', frequency: '', category: ''});
};
@@ -45,19 +47,42 @@ export default function AddIncomeDialog({open, onOpenChange}: Props) {
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="e.g., Salary" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
<Input
id="name"
placeholder="e.g., Salary"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="amount">Amount</Label>
<Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
<Input
id="amount"
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={form.amount}
onChange={e => setForm({...form, amount: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid gap-2">
<Label>Frequency</Label>
<Select value={form.frequency} onValueChange={v => setForm({...form, frequency: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
{frequencies.map(f => <SelectItem key={f} value={f} className="capitalize">{f}</SelectItem>)}
{frequencies.map(f => (
<SelectItem key={f} value={f} className="capitalize">
{f}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
@@ -65,20 +90,29 @@ export default function AddIncomeDialog({open, onOpenChange}: Props) {
<div className="grid gap-2">
<Label>Category</Label>
<Select value={form.category} onValueChange={v => setForm({...form, category: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select category" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select category" />
</SelectTrigger>
<SelectContent>
{categories.income.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
{categories.income.map(c => (
<SelectItem key={c} value={c}>
{c}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>Add Income</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>
Add Income
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

93
frontend-web/src/components/dialogs/AddInvoiceDialog.tsx
View File

@@ -18,7 +18,7 @@ export default function AddInvoiceDialog({open, onOpenChange}: Props) {
clientId: '',
description: '',
amount: '',
dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
});
const handleSubmit = (e: React.FormEvent) => {
@@ -26,27 +26,31 @@ export default function AddInvoiceDialog({open, onOpenChange}: Props) {
const now = new Date().toISOString();
const invoiceNumber = `INV-${new Date().getFullYear()}-${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`;
const amount = parseFloat(form.amount) || 0;
dispatch(addInvoice({
id: crypto.randomUUID(),
invoiceNumber,
clientId: form.clientId,
status: 'draft',
issueDate: now.split('T')[0],
dueDate: form.dueDate,
lineItems: [{
dispatch(
addInvoice({
id: crypto.randomUUID(),
description: form.description,
quantity: 1,
unitPrice: amount,
invoiceNumber,
clientId: form.clientId,
status: 'draft',
issueDate: now.split('T')[0],
dueDate: form.dueDate,
lineItems: [
{
id: crypto.randomUUID(),
description: form.description,
quantity: 1,
unitPrice: amount,
total: amount
}
],
subtotal: amount,
tax: 0,
total: amount,
}],
subtotal: amount,
tax: 0,
total: amount,
createdAt: now,
updatedAt: now,
}));
createdAt: now,
updatedAt: now
})
);
onOpenChange(false);
setForm({clientId: '', description: '', amount: '', dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]});
};
@@ -63,34 +67,67 @@ export default function AddInvoiceDialog({open, onOpenChange}: Props) {
<div className="grid gap-2">
<Label>Client</Label>
<Select value={form.clientId} onValueChange={v => setForm({...form, clientId: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select client" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select client" />
</SelectTrigger>
<SelectContent>
{clients.map(c => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
{clients.map(c => (
<SelectItem key={c.id} value={c.id}>
{c.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid gap-2">
<Label htmlFor="description">Description</Label>
<Input id="description" placeholder="e.g., Web Development Services" value={form.description} onChange={e => setForm({...form, description: e.target.value})} className="input-depth" required />
<Input
id="description"
placeholder="e.g., Web Development Services"
value={form.description}
onChange={e => setForm({...form, description: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="amount">Amount</Label>
<Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
<Input
id="amount"
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={form.amount}
onChange={e => setForm({...form, amount: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="dueDate">Due Date</Label>
<Input id="dueDate" type="date" value={form.dueDate} onChange={e => setForm({...form, dueDate: e.target.value})} className="input-depth" required />
<Input
id="dueDate"
type="date"
value={form.dueDate}
onChange={e => setForm({...form, dueDate: e.target.value})}
className="input-depth"
required
/>
</div>
</div>
</div>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="submit" disabled={!form.clientId || !form.description || !form.amount}>Create Invoice</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!form.clientId || !form.description || !form.amount}>
Create Invoice
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

56
frontend-web/src/components/dialogs/AddLiabilityDialog.tsx
View File

@@ -19,13 +19,15 @@ export default function AddLiabilityDialog({open, onOpenChange}: Props) {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
dispatch(addLiability({
id: crypto.randomUUID(),
name: form.name,
type: form.type as typeof liabilityTypes[number],
balance: parseFloat(form.balance) || 0,
updatedAt: new Date().toISOString(),
}));
dispatch(
addLiability({
id: crypto.randomUUID(),
name: form.name,
type: form.type as (typeof liabilityTypes)[number],
balance: parseFloat(form.balance) || 0,
updatedAt: new Date().toISOString()
})
);
onOpenChange(false);
setForm({name: '', type: '', balance: ''});
};
@@ -41,29 +43,55 @@ export default function AddLiabilityDialog({open, onOpenChange}: Props) {
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="e.g., Car Loan" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
<Input
id="name"
placeholder="e.g., Car Loan"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid gap-2">
<Label>Type</Label>
<Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
{liabilityTypes.map(t => <SelectItem key={t} value={t} className="capitalize">{t.replace('_', ' ')}</SelectItem>)}
{liabilityTypes.map(t => (
<SelectItem key={t} value={t} className="capitalize">
{t.replace('_', ' ')}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid gap-2">
<Label htmlFor="balance">Balance</Label>
<Input id="balance" type="number" step="0.01" min="0" placeholder="0.00" value={form.balance} onChange={e => setForm({...form, balance: e.target.value})} className="input-depth" required />
<Input
id="balance"
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={form.balance}
onChange={e => setForm({...form, balance: e.target.value})}
className="input-depth"
required
/>
</div>
</div>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="submit" disabled={!form.name || !form.type || !form.balance}>Add Liability</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!form.name || !form.type || !form.balance}>
Add Liability
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

62
frontend-web/src/components/dialogs/AddTransactionDialog.tsx
View File

@@ -18,14 +18,16 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
dispatch(addTransaction({
id: crypto.randomUUID(),
type: form.type,
name: form.name,
amount: parseFloat(form.amount) || 0,
category: form.category,
date: form.date,
}));
dispatch(
addTransaction({
id: crypto.randomUUID(),
type: form.type,
name: form.name,
amount: parseFloat(form.amount) || 0,
category: form.category,
date: form.date
})
);
onOpenChange(false);
setForm({type: 'expense', name: '', amount: '', category: '', date: new Date().toISOString().split('T')[0]});
};
@@ -44,7 +46,9 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
<div className="grid gap-2">
<Label>Type</Label>
<Select value={form.type} onValueChange={v => setForm({...form, type: v as 'income' | 'expense', category: ''})}>
<SelectTrigger className="input-depth"><SelectValue /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="income">Income</SelectItem>
<SelectItem value="expense">Expense</SelectItem>
@@ -53,12 +57,29 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
</div>
<div className="grid gap-2">
<Label htmlFor="name">Description</Label>
<Input id="name" placeholder="e.g., Groceries" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
<Input
id="name"
placeholder="e.g., Groceries"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="amount">Amount</Label>
<Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
<Input
id="amount"
type="number"
step="0.01"
min="0"
placeholder="0.00"
value={form.amount}
onChange={e => setForm({...form, amount: e.target.value})}
className="input-depth"
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="date">Date</Label>
@@ -68,20 +89,29 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
<div className="grid gap-2">
<Label>Category</Label>
<Select value={form.category} onValueChange={v => setForm({...form, category: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select category" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select category" />
</SelectTrigger>
<SelectContent>
{categoryList.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
{categoryList.map(c => (
<SelectItem key={c} value={c}>
{c}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="submit" disabled={!form.name || !form.amount || !form.category}>Add Transaction</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={!form.name || !form.amount || !form.category}>
Add Transaction
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

32
frontend-web/src/components/dialogs/EditAssetDialog.tsx
View File

@@ -25,7 +25,7 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
setForm({
name: asset.name,
type: asset.type,
value: asset.value.toString(),
value: asset.value.toString()
});
setErrors({name: '', value: ''});
}
@@ -57,13 +57,15 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
const valueNum = validatePositiveNumber(form.value);
if (valueNum === null) return;
dispatch(updateAsset({
id: asset.id,
name: form.name.trim(),
type: form.type as typeof assetTypes[number],
value: valueNum,
updatedAt: new Date().toISOString(),
}));
dispatch(
updateAsset({
id: asset.id,
name: form.name.trim(),
type: form.type as (typeof assetTypes)[number],
value: valueNum,
updatedAt: new Date().toISOString()
})
);
onOpenChange(false);
};
@@ -101,9 +103,15 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
<div className="grid gap-2">
<Label>Type</Label>
<Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
{assetTypes.map(t => <SelectItem key={t} value={t} className="capitalize">{t}</SelectItem>)}
{assetTypes.map(t => (
<SelectItem key={t} value={t} className="capitalize">
{t}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
@@ -128,7 +136,9 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
Delete
</Button>
<div className="flex gap-2">
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit">Save Changes</Button>
</div>
</DialogFooter>

67
frontend-web/src/components/dialogs/EditClientDialog.tsx
View File

@@ -20,7 +20,7 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
phone: '',
company: '',
address: '',
notes: '',
notes: ''
});
const [errors, setErrors] = useState({name: '', email: '', phone: ''});
@@ -32,7 +32,7 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
phone: client.phone || '',
company: client.company || '',
address: client.address || '',
notes: client.notes || '',
notes: client.notes || ''
});
setErrors({name: '', email: '', phone: ''});
}
@@ -65,16 +65,18 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
e.preventDefault();
if (!client || !validate()) return;
dispatch(updateClient({
id: client.id,
name: sanitizeString(form.name),
email: sanitizeString(form.email),
phone: form.phone ? sanitizeString(form.phone) : undefined,
company: form.company ? sanitizeString(form.company) : undefined,
address: form.address ? sanitizeString(form.address) : undefined,
notes: form.notes ? sanitizeString(form.notes) : undefined,
createdAt: client.createdAt,
}));
dispatch(
updateClient({
id: client.id,
name: sanitizeString(form.name),
email: sanitizeString(form.email),
phone: form.phone ? sanitizeString(form.phone) : undefined,
company: form.company ? sanitizeString(form.company) : undefined,
address: form.address ? sanitizeString(form.address) : undefined,
notes: form.notes ? sanitizeString(form.notes) : undefined,
createdAt: client.createdAt
})
);
onOpenChange(false);
};
@@ -99,13 +101,7 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
<div className="grid gap-4 py-4 max-h-[60vh] overflow-y-auto">
<div className="grid gap-2">
<Label htmlFor="edit-name">Name *</Label>
<Input
id="edit-name"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
className="input-depth"
required
/>
<Input id="edit-name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
{errors.name && <p className="text-xs text-red-400">{errors.name}</p>}
</div>
<div className="grid gap-2">
@@ -122,41 +118,20 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
</div>
<div className="grid gap-2">
<Label htmlFor="edit-phone">Phone</Label>
<Input
id="edit-phone"
type="tel"
value={form.phone}
onChange={e => setForm({...form, phone: e.target.value})}
className="input-depth"
/>
<Input id="edit-phone" type="tel" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} className="input-depth" />
{errors.phone && <p className="text-xs text-red-400">{errors.phone}</p>}
</div>
<div className="grid gap-2">
<Label htmlFor="edit-company">Company</Label>
<Input
id="edit-company"
value={form.company}
onChange={e => setForm({...form, company: e.target.value})}
className="input-depth"
/>
<Input id="edit-company" value={form.company} onChange={e => setForm({...form, company: e.target.value})} className="input-depth" />
</div>
<div className="grid gap-2">
<Label htmlFor="edit-address">Address</Label>
<Input
id="edit-address"
value={form.address}
onChange={e => setForm({...form, address: e.target.value})}
className="input-depth"
/>
<Input id="edit-address" value={form.address} onChange={e => setForm({...form, address: e.target.value})} className="input-depth" />
</div>
<div className="grid gap-2">
<Label htmlFor="edit-notes">Notes</Label>
<Input
id="edit-notes"
value={form.notes}
onChange={e => setForm({...form, notes: e.target.value})}
className="input-depth"
/>
<Input id="edit-notes" value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} className="input-depth" />
</div>
</div>
<DialogFooter className="flex justify-between sm:justify-between">
@@ -164,7 +139,9 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
Delete
</Button>
<div className="flex gap-2">
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit">Save Changes</Button>
</div>
</DialogFooter>

26
frontend-web/src/components/dialogs/EditLiabilityDialog.tsx
View File

@@ -25,7 +25,7 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
setForm({
name: liability.name,
type: liability.type,
balance: liability.balance.toString(),
balance: liability.balance.toString()
});
setErrors({name: '', balance: ''});
}
@@ -57,13 +57,15 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
const balanceNum = validatePositiveNumber(form.balance);
if (balanceNum === null) return;
dispatch(updateLiability({
id: liability.id,
name: form.name.trim(),
type: form.type as typeof liabilityTypes[number],
balance: balanceNum,
updatedAt: new Date().toISOString(),
}));
dispatch(
updateLiability({
id: liability.id,
name: form.name.trim(),
type: form.type as (typeof liabilityTypes)[number],
balance: balanceNum,
updatedAt: new Date().toISOString()
})
);
onOpenChange(false);
};
@@ -101,7 +103,9 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
<div className="grid gap-2">
<Label>Type</Label>
<Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
<SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
<SelectTrigger className="input-depth">
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
{liabilityTypes.map(t => (
<SelectItem key={t} value={t} className="capitalize">
@@ -132,7 +136,9 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
Delete
</Button>
<div className="flex gap-2">
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit">Save Changes</Button>
</div>
</DialogFooter>

14
frontend-web/src/components/dialogs/InvoiceDetailsDialog.tsx
View File

@@ -18,7 +18,7 @@ const statusColors: Record<Invoice['status'], string> = {
sent: 'text-blue-400',
paid: 'text-green-400',
overdue: 'text-red-400',
cancelled: 'text-gray-500',
cancelled: 'text-gray-500'
};
export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clients}: Props) {
@@ -57,9 +57,7 @@ export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clien
<DialogHeader>
<DialogTitle className="flex items-center justify-between">
<span>Invoice {invoice.invoiceNumber}</span>
<span className={`text-sm font-normal capitalize ${statusColors[invoice.status]}`}>
{invoice.status}
</span>
<span className={`text-sm font-normal capitalize ${statusColors[invoice.status]}`}>{invoice.status}</span>
</DialogTitle>
<DialogDescription>View invoice details and update status</DialogDescription>
</DialogHeader>
@@ -124,7 +122,7 @@ export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clien
{/* Status Update */}
<div>
<p className="text-xs text-muted-foreground mb-2">Update Status</p>
<Select value={selectedStatus} onValueChange={(v) => setSelectedStatus(v as Invoice['status'])}>
<Select value={selectedStatus} onValueChange={v => setSelectedStatus(v as Invoice['status'])}>
<SelectTrigger className="input-depth">
<SelectValue />
</SelectTrigger>
@@ -147,11 +145,7 @@ export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clien
<Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
Close
</Button>
<Button
type="button"
onClick={handleStatusChange}
disabled={selectedStatus === invoice.status}
>
<Button type="button" onClick={handleStatusChange} disabled={selectedStatus === invoice.status}>
Update Status
</Button>
</div>

61
frontend-web/src/components/ui/button.tsx
View File

@@ -1,40 +1,37 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import * as React from 'react';
import {Slot} from '@radix-ui/react-slot';
import {cva, type VariantProps} from 'class-variance-authority';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-sm": "size-8",
"icon-lg": "size-10",
},
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: 'size-9',
'icon-sm': 'size-8',
'icon-lg': 'size-10'
}
},
defaultVariants: {
variant: "default",
size: "default",
},
variant: 'default',
size: 'default'
}
}
)
);
function Button({
className,
@@ -42,19 +39,13 @@ function Button({
size,
asChild = false,
...props
}: React.ComponentProps<"button"> &
}: React.ComponentProps<'button'> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : 'button';
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
return <Comp data-slot="button" className={cn(buttonVariants({variant, size, className}))} {...props} />;
}
export { Button, buttonVariants }
export {Button, buttonVariants};

86
frontend-web/src/components/ui/card.tsx
View File

@@ -1,92 +1,42 @@
import * as React from "react"
import * as React from 'react';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className
)}
{...props}
/>
)
function Card({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="card" className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)} {...props} />;
}
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardHeader({className, ...props}: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
className
)}
{...props}
/>
)
);
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold", className)}
{...props}
/>
)
function CardTitle({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />;
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
function CardDescription({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...props}
/>
)
function CardAction({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="card-action" className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...props} />;
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
{...props}
/>
)
function CardContent({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
{...props}
/>
)
function CardFooter({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="card-footer" className={cn('flex items-center px-6 [.border-t]:pt-6', className)} {...props} />;
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
}
export {Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent};

115
frontend-web/src/components/ui/dialog.tsx
View File

@@ -1,47 +1,36 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import {XIcon} from 'lucide-react';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
function Dialog({...props}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
function DialogTrigger({...props}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
function DialogPortal({...props}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
function DialogClose({...props}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
}
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
function DialogOverlay({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
className
)}
{...props}
/>
)
);
}
function DialogContent({
@@ -50,7 +39,7 @@ function DialogContent({
showCloseButton = true,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean
showCloseButton?: boolean;
}) {
return (
<DialogPortal data-slot="dialog-portal">
@@ -58,84 +47,38 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
className
)}
{...props}
>
{...props}>
{children}
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
)
);
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
function DialogHeader({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="dialog-header" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />;
}
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
{...props}
/>
)
function DialogFooter({className, ...props}: React.ComponentProps<'div'>) {
return <div data-slot="dialog-footer" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />;
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
)
function DialogTitle({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return <DialogPrimitive.Title data-slot="dialog-title" className={cn('text-lg leading-none font-semibold', className)} {...props} />;
}
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
function DialogDescription({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return <DialogPrimitive.Description data-slot="dialog-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
}
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
}
export {Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger};

16
frontend-web/src/components/ui/input.tsx
View File

@@ -1,21 +1,21 @@
import * as React from "react"
import * as React from 'react';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
function Input({className, type, ...props}: React.ComponentProps<'input'>) {
return (
<input
type={type}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
className
)}
{...props}
/>
)
);
}
export { Input }
export {Input};

17
frontend-web/src/components/ui/label.tsx
View File

@@ -1,22 +1,19 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
function Label({className, ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className
)}
{...props}
/>
)
);
}
export { Label }
export {Label};

143
frontend-web/src/components/ui/select.tsx
View File

@@ -1,36 +1,30 @@
"use client"
'use client';
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import * as React from 'react';
import * as SelectPrimitive from '@radix-ui/react-select';
import {CheckIcon, ChevronDownIcon, ChevronUpIcon} from 'lucide-react';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
function Select({
...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />
function Select({...props}: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />;
}
function SelectGroup({
...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
return <SelectPrimitive.Group data-slot="select-group" {...props} />
function SelectGroup({...props}: React.ComponentProps<typeof SelectPrimitive.Group>) {
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}
function SelectValue({
...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />
function SelectValue({...props}: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}
function SelectTrigger({
className,
size = "default",
size = 'default',
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
size?: "sm" | "default"
size?: 'sm' | 'default';
}) {
return (
<SelectPrimitive.Trigger
@@ -40,71 +34,45 @@ function SelectTrigger({
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
{...props}>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDownIcon className="size-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
)
);
}
function SelectContent({
className,
children,
position = "popper",
align = "center",
...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
function SelectContent({className, children, position = 'popper', align = 'center', ...props}: React.ComponentProps<typeof SelectPrimitive.Content>) {
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
data-slot="select-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className
)}
position={position}
align={align}
{...props}
>
{...props}>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
)}
>
className={cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1')}>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
)
);
}
function SelectLabel({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
return (
<SelectPrimitive.Label
data-slot="select-label"
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
{...props}
/>
)
function SelectLabel({className, ...props}: React.ComponentProps<typeof SelectPrimitive.Label>) {
return <SelectPrimitive.Label data-slot="select-label" className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)} {...props} />;
}
function SelectItem({
className,
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
function SelectItem({className, children, ...props}: React.ComponentProps<typeof SelectPrimitive.Item>) {
return (
<SelectPrimitive.Item
data-slot="select-item"
@@ -112,8 +80,7 @@ function SelectItem({
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
)}
{...props}
>
{...props}>
<span className="absolute right-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
@@ -121,67 +88,33 @@ function SelectItem({
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
)
);
}
function SelectSeparator({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
{...props}
/>
)
function SelectSeparator({className, ...props}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
return <SelectPrimitive.Separator data-slot="select-separator" className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)} {...props} />;
}
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
function SelectScrollUpButton({className, ...props}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
className={cn('flex cursor-default items-center justify-center py-1', className)}
{...props}>
<ChevronUpIcon className="size-4" />
</SelectPrimitive.ScrollUpButton>
)
);
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
function SelectScrollDownButton({className, ...props}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
return (
<SelectPrimitive.ScrollDownButton
data-slot="select-scroll-down-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
className={cn('flex cursor-default items-center justify-center py-1', className)}
{...props}>
<ChevronDownIcon className="size-4" />
</SelectPrimitive.ScrollDownButton>
)
);
}
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
}
export {Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue};

19
frontend-web/src/components/ui/separator.tsx
View File

@@ -1,26 +1,21 @@
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import * as React from 'react';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
function Separator({className, orientation = 'horizontal', decorative = true, ...props}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
className
)}
{...props}
/>
)
);
}
export { Separator }
export {Separator};

49
frontend-web/src/components/ui/tooltip.tsx
View File

@@ -1,61 +1,42 @@
"use client"
'use client';
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { cn } from "@/lib/utils"
import {cn} from '@/lib/utils';
function TooltipProvider({
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
function TooltipProvider({delayDuration = 0, ...props}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
}
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
function Tooltip({...props}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
</TooltipProvider>
)
);
}
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
function TooltipTrigger({...props}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}
function TooltipContent({
className,
sideOffset = 0,
children,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
function TooltipContent({className, sideOffset = 0, children, ...props}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
className
)}
{...props}
>
{...props}>
{children}
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)
);
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
export {Tooltip, TooltipTrigger, TooltipContent, TooltipProvider};

1
frontend-web/src/fonts.d.ts vendored
View File

@@ -2,4 +2,3 @@ declare module '@fontsource-variable/geist';
declare module '@fontsource-variable/oxanium';
declare module '@fontsource-variable/funnel-sans';
declare module '@fontsource-variable/inter';

9
frontend-web/src/index.css
View File

@@ -1,5 +1,5 @@
@import 'tailwindcss';
@import "tw-animate-css";
@import 'tw-animate-css';
@custom-variant dark (&:is(.dark *));
@@ -124,7 +124,12 @@
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Funnel Sans Variable', system-ui, sans-serif;
letter-spacing: -0.02em;
}

2
frontend-web/src/lib/formatters.ts
View File

@@ -6,7 +6,7 @@ export const formatCurrency = (value: number, options?: {maximumFractionDigits?:
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: options?.maximumFractionDigits ?? 0,
maximumFractionDigits: options?.maximumFractionDigits ?? 0
}).format(value);
};

6
frontend-web/src/lib/utils.ts
View File

@@ -1,6 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
import {clsx, type ClassValue} from 'clsx';
import {twMerge} from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs));
}

89
frontend-web/src/pages/CashflowPage.tsx
View File

@@ -14,12 +14,18 @@ export default function CashflowPage() {
const getMonthlyAmount = (amount: number, frequency: string) => {
switch (frequency) {
case 'weekly': return amount * 4.33;
case 'biweekly': return amount * 2.17;
case 'monthly': return amount;
case 'quarterly': return amount / 3;
case 'yearly': return amount / 12;
default: return 0;
case 'weekly':
return amount * 4.33;
case 'biweekly':
return amount * 2.17;
case 'monthly':
return amount;
case 'quarterly':
return amount / 3;
case 'yearly':
return amount / 12;
default:
return 0;
}
};
@@ -30,11 +36,16 @@ export default function CashflowPage() {
const fmt = (value: number) => new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0}).format(value);
const expensesByCategory = expenses.filter(e => e.isActive).reduce((acc, e) => {
const monthly = getMonthlyAmount(e.amount, e.frequency);
acc[e.category] = (acc[e.category] || 0) + monthly;
return acc;
}, {} as Record<string, number>);
const expensesByCategory = expenses
.filter(e => e.isActive)
.reduce(
(acc, e) => {
const monthly = getMonthlyAmount(e.amount, e.frequency);
acc[e.category] = (acc[e.category] || 0) + monthly;
return acc;
},
{} as Record<string, number>
);
const sortedCategories = Object.entries(expensesByCategory).sort((a, b) => b[1] - a[1]);
const topExpenses = expenses.filter(e => e.isActive).sort((a, b) => getMonthlyAmount(b.amount, b.frequency) - getMonthlyAmount(a.amount, a.frequency));
@@ -46,15 +57,29 @@ export default function CashflowPage() {
<div className="flex items-center gap-6">
<h1 className="text-lg font-semibold">Cashflow</h1>
<div className="flex gap-4 text-sm">
<div><span className="text-muted-foreground">Income</span> <span className="font-medium text-green-400">{fmt(monthlyIncome)}</span></div>
<div><span className="text-muted-foreground">Expenses</span> <span className="font-medium">{fmt(monthlyExpenses)}</span></div>
<div><span className="text-muted-foreground">Net</span> <span className={`font-semibold ${monthlySavings >= 0 ? 'text-green-400' : 'text-red-400'}`}>{fmt(monthlySavings)}</span></div>
<div><span className="text-muted-foreground">Savings</span> <span className={`font-medium ${savingsRate >= 20 ? 'text-green-400' : ''}`}>{savingsRate.toFixed(0)}%</span></div>
<div>
<span className="text-muted-foreground">Income</span> <span className="font-medium text-green-400">{fmt(monthlyIncome)}</span>
</div>
<div>
<span className="text-muted-foreground">Expenses</span> <span className="font-medium">{fmt(monthlyExpenses)}</span>
</div>
<div>
<span className="text-muted-foreground">Net</span>{' '}
<span className={`font-semibold ${monthlySavings >= 0 ? 'text-green-400' : 'text-red-400'}`}>{fmt(monthlySavings)}</span>
</div>
<div>
<span className="text-muted-foreground">Savings</span>{' '}
<span className={`font-medium ${savingsRate >= 20 ? 'text-green-400' : ''}`}>{savingsRate.toFixed(0)}%</span>
</div>
</div>
</div>
<div className="flex gap-2">
<Button variant="secondary" size="sm" onClick={() => setIncomeDialogOpen(true)}>Add Income</Button>
<Button size="sm" onClick={() => setExpenseDialogOpen(true)}>Add Expense</Button>
<Button variant="secondary" size="sm" onClick={() => setIncomeDialogOpen(true)}>
Add Income
</Button>
<Button size="sm" onClick={() => setExpenseDialogOpen(true)}>
Add Expense
</Button>
</div>
</div>
@@ -66,15 +91,17 @@ export default function CashflowPage() {
</CardHeader>
<CardContent className="p-3 pt-0">
<div className="space-y-3">
{incomeSources.filter(i => i.isActive).map(income => (
<div key={income.id} className="flex justify-between items-baseline">
<div>
<p className="text-sm font-medium">{income.name}</p>
<p className="text-xs text-muted-foreground">{income.frequency}</p>
{incomeSources
.filter(i => i.isActive)
.map(income => (
<div key={income.id} className="flex justify-between items-baseline">
<div>
<p className="text-sm font-medium">{income.name}</p>
<p className="text-xs text-muted-foreground">{income.frequency}</p>
</div>
<p className="text-sm font-medium tabular-nums">{fmt(income.amount)}</p>
</div>
<p className="text-sm font-medium tabular-nums">{fmt(income.amount)}</p>
</div>
))}
))}
</div>
</CardContent>
</Card>
@@ -106,7 +133,9 @@ export default function CashflowPage() {
<Card className="card-elevated col-span-4">
<CardHeader className="flex flex-row items-center justify-between p-3 pb-2">
<CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Recent Activity</CardTitle>
<Button variant="ghost" size="sm" className="h-5 px-2 text-xs" onClick={() => setTransactionDialogOpen(true)}>+</Button>
<Button variant="ghost" size="sm" className="h-5 px-2 text-xs" onClick={() => setTransactionDialogOpen(true)}>
+
</Button>
</CardHeader>
<CardContent className="p-3 pt-0">
<div className="space-y-2">
@@ -117,7 +146,8 @@ export default function CashflowPage() {
<p className="text-xs text-muted-foreground">{tx.date}</p>
</div>
<span className={`text-sm font-medium tabular-nums ${tx.type === 'income' ? 'text-green-400' : ''}`}>
{tx.type === 'income' ? '+' : '−'}{fmt(tx.amount)}
{tx.type === 'income' ? '+' : '−'}
{fmt(tx.amount)}
</span>
</div>
))}
@@ -168,7 +198,10 @@ export default function CashflowPage() {
<span className={`font-medium ${savingsRate >= 20 ? 'text-green-400' : ''}`}>{savingsRate.toFixed(1)}%</span>
</div>
<div className="h-2 rounded-full bg-foreground/10 overflow-hidden">
<div className={`h-full rounded-full ${savingsRate >= 20 ? 'bg-green-400/50' : 'bg-foreground/30'}`} style={{width: `${Math.min(savingsRate, 100)}%`}} />
<div
className={`h-full rounded-full ${savingsRate >= 20 ? 'bg-green-400/50' : 'bg-foreground/30'}`}
style={{width: `${Math.min(savingsRate, 100)}%`}}
/>
</div>
</div>
</CardContent>

28
frontend-web/src/pages/ClientsPage.tsx
View File

@@ -34,12 +34,20 @@ export default function ClientsPage() {
<div className="flex items-center gap-6">
<h1 className="text-lg font-semibold">Clients</h1>
<div className="flex gap-4 text-sm">
<div><span className="text-muted-foreground">Total Clients</span> <span className="font-medium">{clients.length}</span></div>
<div><span className="text-muted-foreground">Total Billed</span> <span className="font-medium">{formatCurrency(totalBilled)}</span></div>
<div><span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span></div>
<div>
<span className="text-muted-foreground">Total Clients</span> <span className="font-medium">{clients.length}</span>
</div>
<div>
<span className="text-muted-foreground">Total Billed</span> <span className="font-medium">{formatCurrency(totalBilled)}</span>
</div>
<div>
<span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span>
</div>
</div>
</div>
<Button size="sm" onClick={() => setDialogOpen(true)}>Add Client</Button>
<Button size="sm" onClick={() => setDialogOpen(true)}>
Add Client
</Button>
</div>
{/* Clients Grid */}
@@ -47,20 +55,14 @@ export default function ClientsPage() {
{clients.map(client => {
const stats = getClientStats(client.id);
return (
<Card
key={client.id}
className="card-elevated cursor-pointer hover:bg-accent/30 transition-colors"
onClick={() => handleEditClient(client)}
>
<Card key={client.id} className="card-elevated cursor-pointer hover:bg-accent/30 transition-colors" onClick={() => handleEditClient(client)}>
<CardContent className="p-4">
<div className="flex justify-between items-start mb-2">
<div>
<p className="font-medium">{client.name}</p>
<p className="text-xs text-muted-foreground">{client.company || client.email}</p>
</div>
{stats.outstanding > 0 && (
<span className="text-xs text-yellow-400">{formatCurrency(stats.outstanding)} due</span>
)}
{stats.outstanding > 0 && <span className="text-xs text-yellow-400">{formatCurrency(stats.outstanding)} due</span>}
</div>
<div className="flex gap-4 text-sm">
<div>
@@ -76,7 +78,7 @@ export default function ClientsPage() {
</Card>
);
})}
{/* Add client card */}
<Card className="card-elevated border-dashed cursor-pointer hover:bg-accent/50 transition-colors" onClick={() => setDialogOpen(true)}>
<CardContent className="p-4 flex items-center justify-center h-full min-h-[100px]">

31
frontend-web/src/pages/DebtsPage.tsx
View File

@@ -22,7 +22,8 @@ export default function DebtsPage() {
const getCategoryById = (id: string) => categories.find(c => c.id === id);
const getAccountsByCategory = (categoryId: string) => accounts.filter(a => a.categoryId === categoryId);
const getCategoryTotal = (categoryId: string) => getAccountsByCategory(categoryId).reduce((sum, a) => sum + a.currentBalance, 0);
const getProgress = (account: DebtAccount) => account.originalBalance > 0 ? ((account.originalBalance - account.currentBalance) / account.originalBalance) * 100 : 0;
const getProgress = (account: DebtAccount) =>
account.originalBalance > 0 ? ((account.originalBalance - account.currentBalance) / account.originalBalance) * 100 : 0;
const categoriesWithDebt = categories.filter(c => getCategoryTotal(c.id) > 0);
@@ -33,9 +34,15 @@ export default function DebtsPage() {
<div className="flex items-center gap-6">
<h1 className="text-lg font-semibold">Debts</h1>
<div className="flex gap-4 text-sm">
<div><span className="text-muted-foreground">Total</span> <span className="font-medium">{fmt(totalDebt)}</span></div>
<div><span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{fmt(totalPaidDown)}</span></div>
<div><span className="text-muted-foreground">Monthly</span> <span className="font-medium">{fmt(totalMinPayment)}</span></div>
<div>
<span className="text-muted-foreground">Total</span> <span className="font-medium">{fmt(totalDebt)}</span>
</div>
<div>
<span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{fmt(totalPaidDown)}</span>
</div>
<div>
<span className="text-muted-foreground">Monthly</span> <span className="font-medium">{fmt(totalMinPayment)}</span>
</div>
<div className="flex items-center gap-1.5">
<div className="h-1.5 w-16 rounded-full bg-secondary overflow-hidden">
<div className="h-full bg-green-400/60" style={{width: `${overallProgress}%`}} />
@@ -46,10 +53,16 @@ export default function DebtsPage() {
</div>
<div className="flex gap-2">
<div className="flex gap-0.5 rounded bg-secondary p-0.5">
<button onClick={() => setViewMode('category')} className={`px-2 py-1 text-xs rounded ${viewMode === 'category' ? 'bg-background' : ''}`}>Category</button>
<button onClick={() => setViewMode('account')} className={`px-2 py-1 text-xs rounded ${viewMode === 'account' ? 'bg-background' : ''}`}>Account</button>
<button onClick={() => setViewMode('category')} className={`px-2 py-1 text-xs rounded ${viewMode === 'category' ? 'bg-background' : ''}`}>
Category
</button>
<button onClick={() => setViewMode('account')} className={`px-2 py-1 text-xs rounded ${viewMode === 'account' ? 'bg-background' : ''}`}>
Account
</button>
</div>
<Button size="sm" onClick={() => setAddDialogOpen(true)}>Add Account</Button>
<Button size="sm" onClick={() => setAddDialogOpen(true)}>
Add Account
</Button>
</div>
</div>
@@ -107,7 +120,9 @@ export default function DebtsPage() {
<div className="flex justify-between items-start mb-2">
<div>
<p className="font-medium">{account.name}</p>
<p className="text-xs text-muted-foreground">{account.institution} · {category?.name}</p>
<p className="text-xs text-muted-foreground">
{account.institution} · {category?.name}
</p>
</div>
<span className="text-xs text-muted-foreground">{account.interestRate}%</span>
</div>

43
frontend-web/src/pages/InvoicesPage.tsx
View File

@@ -25,7 +25,7 @@ export default function InvoicesPage() {
overdue: invoices.filter(i => i.status === 'overdue'),
sent: invoices.filter(i => i.status === 'sent'),
draft: invoices.filter(i => i.status === 'draft'),
paid: invoices.filter(i => i.status === 'paid').slice(0, 5),
paid: invoices.filter(i => i.status === 'paid').slice(0, 5)
};
const handleViewInvoice = (invoice: Invoice) => {
@@ -40,14 +40,26 @@ export default function InvoicesPage() {
<div className="flex items-center gap-6">
<h1 className="text-lg font-semibold">Invoices</h1>
<div className="flex gap-4 text-sm">
<div><span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span></div>
<div><span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{formatCurrency(totalPaid)}</span></div>
{overdueCount > 0 && <div><span className="text-red-400 font-medium">{overdueCount} overdue</span></div>}
<div>
<span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span>
</div>
<div>
<span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{formatCurrency(totalPaid)}</span>
</div>
{overdueCount > 0 && (
<div>
<span className="text-red-400 font-medium">{overdueCount} overdue</span>
</div>
)}
</div>
</div>
<div className="flex gap-2">
<Button variant="secondary" size="sm" onClick={() => setClientDialogOpen(true)}>Add Client</Button>
<Button size="sm" onClick={() => setInvoiceDialogOpen(true)}>New Invoice</Button>
<Button variant="secondary" size="sm" onClick={() => setClientDialogOpen(true)}>
Add Client
</Button>
<Button size="sm" onClick={() => setInvoiceDialogOpen(true)}>
New Invoice
</Button>
</div>
</div>
@@ -66,8 +78,7 @@ export default function InvoicesPage() {
<div
key={inv.id}
className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
onClick={() => handleViewInvoice(inv)}
>
onClick={() => handleViewInvoice(inv)}>
<div className="flex justify-between">
<span className="font-medium">{inv.invoiceNumber}</span>
<span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -94,8 +105,7 @@ export default function InvoicesPage() {
<div
key={inv.id}
className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
onClick={() => handleViewInvoice(inv)}
>
onClick={() => handleViewInvoice(inv)}>
<div className="flex justify-between">
<span className="font-medium">{inv.invoiceNumber}</span>
<span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -125,8 +135,7 @@ export default function InvoicesPage() {
<div
key={inv.id}
className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
onClick={() => handleViewInvoice(inv)}
>
onClick={() => handleViewInvoice(inv)}>
<div className="flex justify-between">
<span className="font-medium">{inv.invoiceNumber}</span>
<span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -153,8 +162,7 @@ export default function InvoicesPage() {
<div
key={inv.id}
className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
onClick={() => handleViewInvoice(inv)}
>
onClick={() => handleViewInvoice(inv)}>
<div className="flex justify-between">
<span className="font-medium">{inv.invoiceNumber}</span>
<span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -170,12 +178,7 @@ export default function InvoicesPage() {
<AddClientDialog open={clientDialogOpen} onOpenChange={setClientDialogOpen} />
<AddInvoiceDialog open={invoiceDialogOpen} onOpenChange={setInvoiceDialogOpen} />
<InvoiceDetailsDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
invoice={selectedInvoice}
clients={clients}
/>
<InvoiceDetailsDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen} invoice={selectedInvoice} clients={clients} />
</div>
);
}

50
frontend-web/src/pages/NetWorthPage.tsx
View File

@@ -23,7 +23,7 @@ export default function NetWorthPage() {
const chartData = snapshots.map(s => ({
month: format(new Date(s.date), 'MMM'),
netWorth: s.netWorth,
netWorth: s.netWorth
}));
const totalAssets = assets.reduce((sum, a) => sum + a.value, 0);
@@ -39,7 +39,7 @@ export default function NetWorthPage() {
date: new Date().toISOString().split('T')[0],
totalAssets,
totalLiabilities,
netWorth,
netWorth
};
dispatch(addSnapshot(snapshot));
};
@@ -61,12 +61,20 @@ export default function NetWorthPage() {
<div className="flex items-center gap-6">
<h1 className="text-lg font-semibold">Net Worth</h1>
<div className="flex gap-4 text-sm">
<div><span className="text-muted-foreground">Assets</span> <span className="font-medium">{formatCurrency(totalAssets)}</span></div>
<div><span className="text-muted-foreground">Liabilities</span> <span className="font-medium">{formatCurrency(totalLiabilities)}</span></div>
<div><span className="text-muted-foreground">Net</span> <span className="font-semibold text-base">{formatCurrency(netWorth)}</span></div>
<div>
<span className="text-muted-foreground">Assets</span> <span className="font-medium">{formatCurrency(totalAssets)}</span>
</div>
<div>
<span className="text-muted-foreground">Liabilities</span> <span className="font-medium">{formatCurrency(totalLiabilities)}</span>
</div>
<div>
<span className="text-muted-foreground">Net</span> <span className="font-semibold text-base">{formatCurrency(netWorth)}</span>
</div>
</div>
</div>
<Button size="sm" onClick={handleRecordSnapshot}>Record Snapshot</Button>
<Button size="sm" onClick={handleRecordSnapshot}>
Record Snapshot
</Button>
</div>
<div className="grid grid-cols-3 gap-4">
@@ -83,7 +91,14 @@ export default function NetWorthPage() {
</linearGradient>
</defs>
<XAxis dataKey="month" stroke="oklch(0.5 0 0)" tick={{fill: 'oklch(0.5 0 0)', fontSize: 10}} axisLine={false} tickLine={false} />
<YAxis stroke="oklch(0.5 0 0)" tick={{fill: 'oklch(0.5 0 0)', fontSize: 10}} tickFormatter={v => `$${v / 1000}k`} axisLine={false} tickLine={false} width={45} />
<YAxis
stroke="oklch(0.5 0 0)"
tick={{fill: 'oklch(0.5 0 0)', fontSize: 10}}
tickFormatter={v => `$${v / 1000}k`}
axisLine={false}
tickLine={false}
width={45}
/>
<Tooltip
contentStyle={{background: 'oklch(0.28 0.01 260)', border: '1px solid oklch(1 0 0 / 0.1)', borderRadius: '6px', fontSize: 12}}
labelStyle={{color: 'oklch(0.9 0 0)'}}
@@ -102,16 +117,15 @@ export default function NetWorthPage() {
<CardContent className="p-3">
<p className="text-xs text-muted-foreground mb-1">Monthly Change</p>
<p className={`text-lg font-semibold ${monthlyChange >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{monthlyChange >= 0 ? '+' : ''}{formatCurrency(monthlyChange)}
{monthlyChange >= 0 ? '+' : ''}
{formatCurrency(monthlyChange)}
</p>
</CardContent>
</Card>
<Card className="card-elevated">
<CardContent className="p-3">
<p className="text-xs text-muted-foreground mb-1">YTD Growth</p>
<p className={`text-lg font-semibold ${ytdGrowth >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{formatPercentage(ytdGrowth)}
</p>
<p className={`text-lg font-semibold ${ytdGrowth >= 0 ? 'text-green-400' : 'text-red-400'}`}>{formatPercentage(ytdGrowth)}</p>
</CardContent>
</Card>
<Card className="card-elevated">
@@ -126,7 +140,9 @@ export default function NetWorthPage() {
<Card className="card-elevated">
<CardHeader className="flex flex-row items-center justify-between p-3 pb-2">
<CardTitle className="text-sm font-medium">Assets</CardTitle>
<Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setAssetDialogOpen(true)}>+ Add</Button>
<Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setAssetDialogOpen(true)}>
+ Add
</Button>
</CardHeader>
<CardContent className="p-3 pt-0">
<div className="space-y-1.5 max-h-[180px] overflow-y-auto">
@@ -134,8 +150,7 @@ export default function NetWorthPage() {
<div
key={asset.id}
className="flex justify-between text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
onClick={() => handleEditAsset(asset)}
>
onClick={() => handleEditAsset(asset)}>
<div>
<span>{asset.name}</span>
<span className="ml-1.5 text-xs text-muted-foreground capitalize">{asset.type}</span>
@@ -151,7 +166,9 @@ export default function NetWorthPage() {
<Card className="card-elevated">
<CardHeader className="flex flex-row items-center justify-between p-3 pb-2">
<CardTitle className="text-sm font-medium">Liabilities</CardTitle>
<Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setLiabilityDialogOpen(true)}>+ Add</Button>
<Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setLiabilityDialogOpen(true)}>
+ Add
</Button>
</CardHeader>
<CardContent className="p-3 pt-0">
<div className="space-y-1.5 max-h-[180px] overflow-y-auto">
@@ -159,8 +176,7 @@ export default function NetWorthPage() {
<div
key={liability.id}
className="flex justify-between text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
onClick={() => handleEditLiability(liability)}
>
onClick={() => handleEditLiability(liability)}>
<div>
<span>{liability.name}</span>
<span className="ml-1.5 text-xs text-muted-foreground capitalize">{liability.type.replace('_', ' ')}</span>

8
frontend-web/src/store/index.ts
View File

@@ -20,7 +20,7 @@ export {
updateLiability,
removeLiability,
addSnapshot,
setSnapshots,
setSnapshots
} from './slices/netWorthSlice';
export type {Asset, Liability, NetWorthSnapshot, NetWorthState} from './slices/netWorthSlice';
@@ -38,7 +38,7 @@ export {
setAccounts,
addPayment,
removePayment,
setPayments,
setPayments
} from './slices/debtsSlice';
export type {DebtCategory, DebtAccount, DebtPayment, DebtsState} from './slices/debtsSlice';
@@ -54,7 +54,7 @@ export {
updateInvoice,
removeInvoice,
setInvoices,
updateInvoiceStatus,
updateInvoiceStatus
} from './slices/invoicesSlice';
export type {Client, Invoice, InvoiceLineItem, InvoicesState} from './slices/invoicesSlice';
@@ -69,6 +69,6 @@ export {
updateExpense,
removeExpense,
addTransaction,
removeTransaction,
removeTransaction
} from './slices/cashflowSlice';
export type {IncomeSource, Expense, Transaction, CashflowState} from './slices/cashflowSlice';

155
frontend-web/src/store/slices/cashflowSlice.ts
View File

@@ -44,27 +44,145 @@ export interface CashflowState {
const defaultCategories = {
income: ['Salary', 'Freelance', 'Investments', 'Rental', 'Side Business', 'Other'],
expense: ['Housing', 'Utilities', 'Transportation', 'Food', 'Insurance', 'Healthcare', 'Subscriptions', 'Entertainment', 'Shopping', 'Savings', 'Other'],
expense: ['Housing', 'Utilities', 'Transportation', 'Food', 'Insurance', 'Healthcare', 'Subscriptions', 'Entertainment', 'Shopping', 'Savings', 'Other']
};
// Mock data
const mockIncomeSources: IncomeSource[] = [
{id: 'i1', name: 'Software Engineer Salary', amount: 8500, frequency: 'monthly', category: 'Salary', nextDate: '2024-12-15', isActive: true, createdAt: '2024-01-01'},
{
id: 'i1',
name: 'Software Engineer Salary',
amount: 8500,
frequency: 'monthly',
category: 'Salary',
nextDate: '2024-12-15',
isActive: true,
createdAt: '2024-01-01'
},
{id: 'i2', name: 'Consulting', amount: 2000, frequency: 'monthly', category: 'Freelance', nextDate: '2024-12-20', isActive: true, createdAt: '2024-03-01'},
{id: 'i3', name: 'Dividend Income', amount: 450, frequency: 'quarterly', category: 'Investments', nextDate: '2024-12-31', isActive: true, createdAt: '2024-01-01'},
{
id: 'i3',
name: 'Dividend Income',
amount: 450,
frequency: 'quarterly',
category: 'Investments',
nextDate: '2024-12-31',
isActive: true,
createdAt: '2024-01-01'
}
];
const mockExpenses: Expense[] = [
{id: 'e1', name: 'Mortgage', amount: 2200, frequency: 'monthly', category: 'Housing', nextDate: '2024-12-01', isActive: true, isEssential: true, createdAt: '2024-01-01'},
{id: 'e2', name: 'Car Payment', amount: 450, frequency: 'monthly', category: 'Transportation', nextDate: '2024-12-05', isActive: true, isEssential: true, createdAt: '2024-01-01'},
{id: 'e3', name: 'Car Insurance', amount: 180, frequency: 'monthly', category: 'Insurance', nextDate: '2024-12-10', isActive: true, isEssential: true, createdAt: '2024-01-01'},
{id: 'e4', name: 'Utilities', amount: 250, frequency: 'monthly', category: 'Utilities', nextDate: '2024-12-15', isActive: true, isEssential: true, createdAt: '2024-01-01'},
{id: 'e5', name: 'Groceries', amount: 600, frequency: 'monthly', category: 'Food', nextDate: '2024-12-01', isActive: true, isEssential: true, createdAt: '2024-01-01'},
{id: 'e6', name: 'Gym Membership', amount: 50, frequency: 'monthly', category: 'Healthcare', nextDate: '2024-12-01', isActive: true, isEssential: false, createdAt: '2024-01-01'},
{id: 'e7', name: 'Netflix', amount: 15, frequency: 'monthly', category: 'Subscriptions', nextDate: '2024-12-08', isActive: true, isEssential: false, createdAt: '2024-01-01'},
{id: 'e8', name: 'Spotify', amount: 12, frequency: 'monthly', category: 'Subscriptions', nextDate: '2024-12-12', isActive: true, isEssential: false, createdAt: '2024-01-01'},
{id: 'e9', name: 'Health Insurance', amount: 350, frequency: 'monthly', category: 'Insurance', nextDate: '2024-12-01', isActive: true, isEssential: true, createdAt: '2024-01-01'},
{id: 'e10', name: '401k Contribution', amount: 1500, frequency: 'monthly', category: 'Savings', nextDate: '2024-12-15', isActive: true, isEssential: true, createdAt: '2024-01-01'},
{
id: 'e1',
name: 'Mortgage',
amount: 2200,
frequency: 'monthly',
category: 'Housing',
nextDate: '2024-12-01',
isActive: true,
isEssential: true,
createdAt: '2024-01-01'
},
{
id: 'e2',
name: 'Car Payment',
amount: 450,
frequency: 'monthly',
category: 'Transportation',
nextDate: '2024-12-05',
isActive: true,
isEssential: true,
createdAt: '2024-01-01'
},
{
id: 'e3',
name: 'Car Insurance',
amount: 180,
frequency: 'monthly',
category: 'Insurance',
nextDate: '2024-12-10',
isActive: true,
isEssential: true,
createdAt: '2024-01-01'
},
{
id: 'e4',
name: 'Utilities',
amount: 250,
frequency: 'monthly',
category: 'Utilities',
nextDate: '2024-12-15',
isActive: true,
isEssential: true,
createdAt: '2024-01-01'
},
{
id: 'e5',
name: 'Groceries',
amount: 600,
frequency: 'monthly',
category: 'Food',
nextDate: '2024-12-01',
isActive: true,
isEssential: true,
createdAt: '2024-01-01'
},
{
id: 'e6',
name: 'Gym Membership',
amount: 50,
frequency: 'monthly',
category: 'Healthcare',
nextDate: '2024-12-01',
isActive: true,
isEssential: false,
createdAt: '2024-01-01'
},
{
id: 'e7',
name: 'Netflix',
amount: 15,
frequency: 'monthly',
category: 'Subscriptions',
nextDate: '2024-12-08',
isActive: true,
isEssential: false,
createdAt: '2024-01-01'
},
{
id: 'e8',
name: 'Spotify',
amount: 12,
frequency: 'monthly',
category: 'Subscriptions',
nextDate: '2024-12-12',
isActive: true,
isEssential: false,
createdAt: '2024-01-01'
},
{
id: 'e9',
name: 'Health Insurance',
amount: 350,
frequency: 'monthly',
category: 'Insurance',
nextDate: '2024-12-01',
isActive: true,
isEssential: true,
createdAt: '2024-01-01'
},
{
id: 'e10',
name: '401k Contribution',
amount: 1500,
frequency: 'monthly',
category: 'Savings',
nextDate: '2024-12-15',
isActive: true,
isEssential: true,
createdAt: '2024-01-01'
}
];
const mockTransactions: Transaction[] = [
@@ -73,7 +191,7 @@ const mockTransactions: Transaction[] = [
{id: 't3', type: 'expense', name: 'Groceries', amount: 145, category: 'Food', date: '2024-11-28'},
{id: 't4', type: 'expense', name: 'Gas', amount: 55, category: 'Transportation', date: '2024-11-25'},
{id: 't5', type: 'income', name: 'Consulting Payment', amount: 2000, category: 'Freelance', date: '2024-11-20'},
{id: 't6', type: 'expense', name: 'Restaurant', amount: 85, category: 'Food', date: '2024-11-22'},
{id: 't6', type: 'expense', name: 'Restaurant', amount: 85, category: 'Food', date: '2024-11-22'}
];
const initialState: CashflowState = {
@@ -82,7 +200,7 @@ const initialState: CashflowState = {
transactions: mockTransactions,
categories: defaultCategories,
isLoading: false,
error: null,
error: null
};
const cashflowSlice = createSlice({
@@ -123,8 +241,8 @@ const cashflowSlice = createSlice({
},
removeTransaction: (state, action: PayloadAction<string>) => {
state.transactions = state.transactions.filter(t => t.id !== action.payload);
},
},
}
}
});
export const {
@@ -137,8 +255,7 @@ export const {
updateExpense,
removeExpense,
addTransaction,
removeTransaction,
removeTransaction
} = cashflowSlice.actions;
export default cashflowSlice.reducer;

26
frontend-web/src/store/slices/debtsSlice.ts
View File

@@ -47,7 +47,7 @@ const defaultCategories: DebtCategory[] = [
{id: 'student-loans', name: 'Student Loans', color: '#6b7280', createdAt: new Date().toISOString()},
{id: 'mortgage', name: 'Mortgage', color: '#6b7280', createdAt: new Date().toISOString()},
{id: 'medical', name: 'Medical', color: '#6b7280', createdAt: new Date().toISOString()},
{id: 'other', name: 'Other', color: '#6b7280', createdAt: new Date().toISOString()},
{id: 'other', name: 'Other', color: '#6b7280', createdAt: new Date().toISOString()}
];
// Mock data for development
@@ -64,7 +64,7 @@ const mockAccounts: DebtAccount[] = [
minimumPayment: 95,
dueDay: 15,
createdAt: '2024-01-15',
updatedAt: '2024-12-01',
updatedAt: '2024-12-01'
},
{
id: 'cc2',
@@ -78,7 +78,7 @@ const mockAccounts: DebtAccount[] = [
minimumPayment: 55,
dueDay: 22,
createdAt: '2024-02-10',
updatedAt: '2024-12-01',
updatedAt: '2024-12-01'
},
{
id: 'cc3',
@@ -92,7 +92,7 @@ const mockAccounts: DebtAccount[] = [
minimumPayment: 35,
dueDay: 8,
createdAt: '2024-03-05',
updatedAt: '2024-12-01',
updatedAt: '2024-12-01'
},
{
id: 'al1',
@@ -106,7 +106,7 @@ const mockAccounts: DebtAccount[] = [
minimumPayment: 650,
dueDay: 1,
createdAt: '2021-06-15',
updatedAt: '2024-12-01',
updatedAt: '2024-12-01'
},
{
id: 'sl1',
@@ -119,7 +119,7 @@ const mockAccounts: DebtAccount[] = [
minimumPayment: 320,
dueDay: 25,
createdAt: '2018-09-01',
updatedAt: '2024-12-01',
updatedAt: '2024-12-01'
},
{
id: 'pl1',
@@ -133,15 +133,15 @@ const mockAccounts: DebtAccount[] = [
minimumPayment: 285,
dueDay: 12,
createdAt: '2023-08-20',
updatedAt: '2024-12-01',
},
updatedAt: '2024-12-01'
}
];
const mockPayments: DebtPayment[] = [
{id: 'p1', accountId: 'cc1', amount: 500, date: '2024-11-15', note: 'Extra payment'},
{id: 'p2', accountId: 'cc2', amount: 200, date: '2024-11-22'},
{id: 'p3', accountId: 'al1', amount: 650, date: '2024-12-01'},
{id: 'p4', accountId: 'sl1', amount: 320, date: '2024-11-25'},
{id: 'p4', accountId: 'sl1', amount: 320, date: '2024-11-25'}
];
const initialState: DebtsState = {
@@ -149,7 +149,7 @@ const initialState: DebtsState = {
accounts: mockAccounts,
payments: mockPayments,
isLoading: false,
error: null,
error: null
};
const debtsSlice = createSlice({
@@ -219,8 +219,8 @@ const debtsSlice = createSlice({
},
setPayments: (state, action: PayloadAction<DebtPayment[]>) => {
state.payments = action.payload;
},
},
}
}
});
export const {
@@ -236,7 +236,7 @@ export const {
setAccounts,
addPayment,
removePayment,
setPayments,
setPayments
} = debtsSlice.actions;
export default debtsSlice.reducer;

50
frontend-web/src/store/slices/invoicesSlice.ts
View File

@@ -51,7 +51,7 @@ const mockClients: Client[] = [
phone: '555-0100',
company: 'Acme Corporation',
address: '123 Business Ave, Suite 400, San Francisco, CA 94102',
createdAt: '2024-01-10',
createdAt: '2024-01-10'
},
{
id: 'c2',
@@ -60,14 +60,14 @@ const mockClients: Client[] = [
phone: '555-0200',
company: 'TechStart Inc',
address: '456 Innovation Blvd, Austin, TX 78701',
createdAt: '2024-02-15',
createdAt: '2024-02-15'
},
{
id: 'c3',
name: 'Sarah Mitchell',
email: 'sarah@mitchell.design',
company: 'Mitchell Design Studio',
createdAt: '2024-03-22',
createdAt: '2024-03-22'
},
{
id: 'c4',
@@ -76,8 +76,8 @@ const mockClients: Client[] = [
phone: '555-0400',
company: 'Global Media LLC',
address: '789 Media Row, New York, NY 10001',
createdAt: '2024-04-08',
},
createdAt: '2024-04-08'
}
];
const mockInvoices: Invoice[] = [
@@ -90,13 +90,13 @@ const mockInvoices: Invoice[] = [
dueDate: '2024-10-31',
lineItems: [
{id: 'li1', description: 'Web Development - October', quantity: 80, unitPrice: 150, total: 12000},
{id: 'li2', description: 'Hosting & Maintenance', quantity: 1, unitPrice: 500, total: 500},
{id: 'li2', description: 'Hosting & Maintenance', quantity: 1, unitPrice: 500, total: 500}
],
subtotal: 12500,
tax: 0,
total: 12500,
createdAt: '2024-10-01',
updatedAt: '2024-10-15',
updatedAt: '2024-10-15'
},
{
id: 'inv2',
@@ -105,14 +105,12 @@ const mockInvoices: Invoice[] = [
status: 'paid',
issueDate: '2024-10-15',
dueDate: '2024-11-14',
lineItems: [
{id: 'li3', description: 'Mobile App Development', quantity: 120, unitPrice: 175, total: 21000},
],
lineItems: [{id: 'li3', description: 'Mobile App Development', quantity: 120, unitPrice: 175, total: 21000}],
subtotal: 21000,
tax: 0,
total: 21000,
createdAt: '2024-10-15',
updatedAt: '2024-11-10',
updatedAt: '2024-11-10'
},
{
id: 'inv3',
@@ -123,13 +121,13 @@ const mockInvoices: Invoice[] = [
dueDate: '2024-12-01',
lineItems: [
{id: 'li4', description: 'Web Development - November', quantity: 60, unitPrice: 150, total: 9000},
{id: 'li5', description: 'API Integration', quantity: 20, unitPrice: 175, total: 3500},
{id: 'li5', description: 'API Integration', quantity: 20, unitPrice: 175, total: 3500}
],
subtotal: 12500,
tax: 0,
total: 12500,
createdAt: '2024-11-01',
updatedAt: '2024-11-01',
updatedAt: '2024-11-01'
},
{
id: 'inv4',
@@ -138,14 +136,12 @@ const mockInvoices: Invoice[] = [
status: 'overdue',
issueDate: '2024-10-20',
dueDate: '2024-11-20',
lineItems: [
{id: 'li6', description: 'Brand Identity Design', quantity: 1, unitPrice: 4500, total: 4500},
],
lineItems: [{id: 'li6', description: 'Brand Identity Design', quantity: 1, unitPrice: 4500, total: 4500}],
subtotal: 4500,
tax: 0,
total: 4500,
createdAt: '2024-10-20',
updatedAt: '2024-10-20',
updatedAt: '2024-10-20'
},
{
id: 'inv5',
@@ -156,21 +152,21 @@ const mockInvoices: Invoice[] = [
dueDate: '2024-12-31',
lineItems: [
{id: 'li7', description: 'Video Production', quantity: 5, unitPrice: 2000, total: 10000},
{id: 'li8', description: 'Motion Graphics', quantity: 10, unitPrice: 500, total: 5000},
{id: 'li8', description: 'Motion Graphics', quantity: 10, unitPrice: 500, total: 5000}
],
subtotal: 15000,
tax: 0,
total: 15000,
createdAt: '2024-12-01',
updatedAt: '2024-12-01',
},
updatedAt: '2024-12-01'
}
];
const initialState: InvoicesState = {
clients: mockClients,
invoices: mockInvoices,
isLoading: false,
error: null,
error: null
};
const invoicesSlice = createSlice({
@@ -211,17 +207,14 @@ const invoicesSlice = createSlice({
setInvoices: (state, action: PayloadAction<Invoice[]>) => {
state.invoices = action.payload;
},
updateInvoiceStatus: (
state,
action: PayloadAction<{id: string; status: Invoice['status']}>
) => {
updateInvoiceStatus: (state, action: PayloadAction<{id: string; status: Invoice['status']}>) => {
const invoice = state.invoices.find(i => i.id === action.payload.id);
if (invoice) {
invoice.status = action.payload.status;
invoice.updatedAt = new Date().toISOString();
}
},
},
}
}
});
export const {
@@ -235,8 +228,7 @@ export const {
updateInvoice,
removeInvoice,
setInvoices,
updateInvoiceStatus,
updateInvoiceStatus
} = invoicesSlice.actions;
export default invoicesSlice.reducer;

27
frontend-web/src/store/slices/netWorthSlice.ts
View File

@@ -39,13 +39,13 @@ const mockAssets: Asset[] = [
{id: 'a3', name: 'Fidelity 401k', type: 'investment', value: 145000, updatedAt: '2024-12-01'},
{id: 'a4', name: 'Vanguard Brokerage', type: 'investment', value: 52000, updatedAt: '2024-12-01'},
{id: 'a5', name: 'Primary Residence', type: 'property', value: 425000, updatedAt: '2024-12-01'},
{id: 'a6', name: '2021 Tesla Model 3', type: 'vehicle', value: 28000, updatedAt: '2024-12-01'},
{id: 'a6', name: '2021 Tesla Model 3', type: 'vehicle', value: 28000, updatedAt: '2024-12-01'}
];
const mockLiabilities: Liability[] = [
{id: 'l1', name: 'Mortgage', type: 'mortgage', balance: 320000, updatedAt: '2024-12-01'},
{id: 'l2', name: 'Auto Loan', type: 'loan', balance: 15000, updatedAt: '2024-12-01'},
{id: 'l3', name: 'Student Loans', type: 'loan', balance: 28000, updatedAt: '2024-12-01'},
{id: 'l3', name: 'Student Loans', type: 'loan', balance: 28000, updatedAt: '2024-12-01'}
];
const mockSnapshots: NetWorthSnapshot[] = [
@@ -54,7 +54,7 @@ const mockSnapshots: NetWorthSnapshot[] = [
{id: 's3', date: '2024-09-01', totalAssets: 680000, totalLiabilities: 370000, netWorth: 310000},
{id: 's4', date: '2024-10-01', totalAssets: 685000, totalLiabilities: 368000, netWorth: 317000},
{id: 's5', date: '2024-11-01', totalAssets: 692000, totalLiabilities: 365000, netWorth: 327000},
{id: 's6', date: '2024-12-01', totalAssets: 697500, totalLiabilities: 363000, netWorth: 334500},
{id: 's6', date: '2024-12-01', totalAssets: 697500, totalLiabilities: 363000, netWorth: 334500}
];
const initialState: NetWorthState = {
@@ -62,7 +62,7 @@ const initialState: NetWorthState = {
liabilities: mockLiabilities,
snapshots: mockSnapshots,
isLoading: false,
error: null,
error: null
};
const netWorthSlice = createSlice({
@@ -100,22 +100,11 @@ const netWorthSlice = createSlice({
},
setSnapshots: (state, action: PayloadAction<NetWorthSnapshot[]>) => {
state.snapshots = action.payload;
},
},
}
}
});
export const {
setLoading,
setError,
addAsset,
updateAsset,
removeAsset,
addLiability,
updateLiability,
removeLiability,
addSnapshot,
setSnapshots,
} = netWorthSlice.actions;
export const {setLoading, setError, addAsset, updateAsset, removeAsset, addLiability, updateLiability, removeLiability, addSnapshot, setSnapshots} =
netWorthSlice.actions;
export default netWorthSlice.reducer;

4
frontend-web/src/store/store.ts
View File

@@ -11,8 +11,8 @@ export const store = configureStore({
netWorth: netWorthReducer,
debts: debtsReducer,
invoices: invoicesReducer,
cashflow: cashflowReducer,
},
cashflow: cashflowReducer
}
});
export type RootState = ReturnType<typeof store.getState>;