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

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>