58 lines
2.8 KiB
TypeScript
58 lines
2.8 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';
|
||
|
|
|
||
|
|
const AddExpenseForm: React.FC = () => {
|
||
|
|
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">
|
||
|
|
Add Expense
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</GlassCard>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AddExpenseForm;
|