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};