Add new asset and client management dialogs, update font dependencies, and enhance CSS styles
- Introduced AddAssetDialog, AddClientDialog, AddExpenseDialog, AddIncomeDialog, AddLiabilityDialog, and AddTransactionDialog components for improved asset and client management. - Added support for new font sources: 'Funnel Sans' and 'Inter'. - Updated CSS variables for better theming and adjusted font settings for improved readability. - Refactored main entry point to include new font imports and ensure consistent styling across the application.
This commit is contained in:
69
frontend-web/src/components/dialogs/AddAssetDialog.tsx
Normal file
69
frontend-web/src/components/dialogs/AddAssetDialog.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
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 {Button} from '@/components/ui/button';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import {Label} from '@/components/ui/label';
|
||||
import {useAppDispatch, addAsset} from '@/store';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const assetTypes = ['cash', 'investment', 'property', 'vehicle', 'other'] as const;
|
||||
|
||||
export default function AddAssetDialog({open, onOpenChange}: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const [form, setForm] = useState({name: '', type: '', value: ''});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
dispatch(addAsset({
|
||||
id: crypto.randomUUID(),
|
||||
name: form.name,
|
||||
type: form.type as typeof assetTypes[number],
|
||||
value: parseFloat(form.value) || 0,
|
||||
updatedAt: new Date().toISOString(),
|
||||
}));
|
||||
onOpenChange(false);
|
||||
setForm({name: '', type: '', value: ''});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="card-elevated sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Asset</DialogTitle>
|
||||
<DialogDescription>Add a new asset to track your net worth</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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 />
|
||||
</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>
|
||||
<SelectContent>
|
||||
{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 />
|
||||
</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>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
71
frontend-web/src/components/dialogs/AddClientDialog.tsx
Normal file
71
frontend-web/src/components/dialogs/AddClientDialog.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import {useState} from 'react';
|
||||
import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog';
|
||||
import {Button} from '@/components/ui/button';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import {Label} from '@/components/ui/label';
|
||||
import {useAppDispatch, addClient} from '@/store';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export default function AddClientDialog({open, onOpenChange}: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const [form, setForm] = useState({name: '', email: '', phone: '', company: '', address: ''});
|
||||
|
||||
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(),
|
||||
}));
|
||||
onOpenChange(false);
|
||||
setForm({name: '', email: '', phone: '', company: '', address: ''});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="card-elevated sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Client</DialogTitle>
|
||||
<DialogDescription>Add a new client for invoicing</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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 />
|
||||
</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 />
|
||||
</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" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone">Phone</Label>
|
||||
<Input id="phone" placeholder="555-0100" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} className="input-depth" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
89
frontend-web/src/components/dialogs/AddExpenseDialog.tsx
Normal file
89
frontend-web/src/components/dialogs/AddExpenseDialog.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
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 {Button} from '@/components/ui/button';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import {Label} from '@/components/ui/label';
|
||||
import {useAppDispatch, useAppSelector, addExpense} from '@/store';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const frequencies = ['weekly', 'biweekly', 'monthly', 'quarterly', 'yearly', 'once'] as const;
|
||||
|
||||
export default function AddExpenseDialog({open, onOpenChange}: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const {categories} = useAppSelector(state => state.cashflow);
|
||||
const [form, setForm] = useState({name: '', amount: '', frequency: '', category: '', isEssential: false});
|
||||
|
||||
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(),
|
||||
}));
|
||||
onOpenChange(false);
|
||||
setForm({name: '', amount: '', frequency: '', category: '', isEssential: false});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="card-elevated sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Expense</DialogTitle>
|
||||
<DialogDescription>Add a recurring expense</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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 />
|
||||
</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 />
|
||||
</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>
|
||||
<SelectContent>
|
||||
{frequencies.map(f => <SelectItem key={f} value={f} className="capitalize">{f}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<SelectContent>
|
||||
{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" />
|
||||
<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>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
84
frontend-web/src/components/dialogs/AddIncomeDialog.tsx
Normal file
84
frontend-web/src/components/dialogs/AddIncomeDialog.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
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 {Button} from '@/components/ui/button';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import {Label} from '@/components/ui/label';
|
||||
import {useAppDispatch, useAppSelector, addIncomeSource} from '@/store';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const frequencies = ['weekly', 'biweekly', 'monthly', 'quarterly', 'yearly', 'once'] as const;
|
||||
|
||||
export default function AddIncomeDialog({open, onOpenChange}: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const {categories} = useAppSelector(state => state.cashflow);
|
||||
const [form, setForm] = useState({name: '', amount: '', frequency: '', category: ''});
|
||||
|
||||
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(),
|
||||
}));
|
||||
onOpenChange(false);
|
||||
setForm({name: '', amount: '', frequency: '', category: ''});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="card-elevated sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Income Source</DialogTitle>
|
||||
<DialogDescription>Add a recurring income source</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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 />
|
||||
</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 />
|
||||
</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>
|
||||
<SelectContent>
|
||||
{frequencies.map(f => <SelectItem key={f} value={f} className="capitalize">{f}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<SelectContent>
|
||||
{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>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
69
frontend-web/src/components/dialogs/AddLiabilityDialog.tsx
Normal file
69
frontend-web/src/components/dialogs/AddLiabilityDialog.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
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 {Button} from '@/components/ui/button';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import {Label} from '@/components/ui/label';
|
||||
import {useAppDispatch, addLiability} from '@/store';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const liabilityTypes = ['credit_card', 'loan', 'mortgage', 'other'] as const;
|
||||
|
||||
export default function AddLiabilityDialog({open, onOpenChange}: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const [form, setForm] = useState({name: '', type: '', balance: ''});
|
||||
|
||||
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(),
|
||||
}));
|
||||
onOpenChange(false);
|
||||
setForm({name: '', type: '', balance: ''});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="card-elevated sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Liability</DialogTitle>
|
||||
<DialogDescription>Add a new liability to track</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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 />
|
||||
</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>
|
||||
<SelectContent>
|
||||
{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 />
|
||||
</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>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
87
frontend-web/src/components/dialogs/AddTransactionDialog.tsx
Normal file
87
frontend-web/src/components/dialogs/AddTransactionDialog.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
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 {Button} from '@/components/ui/button';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import {Label} from '@/components/ui/label';
|
||||
import {useAppDispatch, useAppSelector, addTransaction} from '@/store';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export default function AddTransactionDialog({open, onOpenChange}: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const {categories} = useAppSelector(state => state.cashflow);
|
||||
const [form, setForm] = useState({type: 'expense' as 'income' | 'expense', name: '', amount: '', category: '', date: new Date().toISOString().split('T')[0]});
|
||||
|
||||
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,
|
||||
}));
|
||||
onOpenChange(false);
|
||||
setForm({type: 'expense', name: '', amount: '', category: '', date: new Date().toISOString().split('T')[0]});
|
||||
};
|
||||
|
||||
const categoryList = form.type === 'income' ? categories.income : categories.expense;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="card-elevated sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Transaction</DialogTitle>
|
||||
<DialogDescription>Record a one-time transaction</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<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>
|
||||
<SelectContent>
|
||||
<SelectItem value="income">Income</SelectItem>
|
||||
<SelectItem value="expense">Expense</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</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 />
|
||||
</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 />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="date">Date</Label>
|
||||
<Input id="date" type="date" value={form.date} onChange={e => setForm({...form, date: e.target.value})} className="input-depth" required />
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<SelectContent>
|
||||
{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>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user