Refactor: Global Theme System and Finance Modules Redesign

src/components/budget/AddExpenseForm.tsx

@@ -0,0 +1,57 @@
+
+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;