80 lines
3.6 KiB
TypeScript
80 lines
3.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { GlassCard } from '@/components/ui/GlassCard';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { DirhamIcon } from '@/components/ui/custom-icons';
|
|
|
|
import { toast } from 'sonner';
|
|
|
|
const AddExpenseForm: React.FC = () => {
|
|
const handleAddExpense = () => {
|
|
const amount = (document.getElementById('amount') as HTMLInputElement).value;
|
|
const desc = (document.getElementById('desc') as HTMLInputElement).value;
|
|
const category = (document.getElementById('category') as HTMLButtonElement | null)?.innerText || "Category";
|
|
|
|
if (!amount || !desc) {
|
|
toast.error("Please fill in amount and description");
|
|
return;
|
|
}
|
|
|
|
toast.success(`Expense Added: AED ${amount} to ${category}`);
|
|
|
|
// Clear
|
|
(document.getElementById('amount') as HTMLInputElement).value = '';
|
|
(document.getElementById('desc') as HTMLInputElement).value = '';
|
|
};
|
|
|
|
return (
|
|
<div className="flex justify-center items-center h-[400px]">
|
|
<GlassCard className="p-8 w-full max-w-md">
|
|
<h3 className="text-xl font-bold text-slate-800 mb-6 text-center">Add New Expense</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="amount" className="text-slate-600">Amount (AED)</Label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
|
|
<DirhamIcon className="w-4 h-4 text-slate-400" />
|
|
</div>
|
|
<Input id="amount" placeholder="0.00" className="pl-9 bg-white/50 border-slate-200" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="category" className="text-slate-600">Category</Label>
|
|
<Select>
|
|
<SelectTrigger id="category" className="bg-white/50 border-slate-200">
|
|
<SelectValue placeholder="Select Category" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="food">Food & Dining</SelectItem>
|
|
<SelectItem value="transport">Transportation</SelectItem>
|
|
<SelectItem value="shopping">Shopping</SelectItem>
|
|
<SelectItem value="entertainment">Entertainment</SelectItem>
|
|
<SelectItem value="utilities">Utilities</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="desc" className="text-slate-600">Description</Label>
|
|
<Input id="desc" placeholder="e.g. Grocery shopping" className="bg-white/50 border-slate-200" />
|
|
</div>
|
|
|
|
<Button
|
|
className="w-full mt-4 bg-slate-900 text-white hover:bg-slate-800 shadow-md"
|
|
onClick={handleAddExpense}
|
|
>
|
|
Add Expense
|
|
</Button>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddExpenseForm;
|