Refactor: Global Theme System and Finance Modules Redesign

2026-02-16 00:09:52 +05:30
parent 58fe801eab
commit 557accf0c2
51 changed files with 3076 additions and 1147 deletions
--- a/src/components/budget/BudgetCategoryGrid.tsx
+++ b/src/components/budget/BudgetCategoryGrid.tsx
@@ -0,0 +1,68 @@
+
+import React from 'react';
+import { GlassCard } from '@/components/ui/GlassCard';
+import { formatAmount } from '@/lib/utils';
+import { DirhamIcon } from '@/components/ui/custom-icons';
+import { Badge } from '@/components/ui/badge';
+import { Utensils, Car, ShoppingBag, Clapperboard, HeartPulse, Home } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+const BudgetCategoryGrid: React.FC = () => {
+
+    const categories = [
+        { name: 'Food & Dining', spent: 1250, limit: 3000, icon: Utensils, color: 'bg-green-500', iconBg: 'bg-green-100 text-green-600' },
+        { name: 'Transportation', spent: 950, limit: 1000, icon: Car, color: 'bg-orange-500', iconBg: 'bg-orange-100 text-orange-600' },
+        { name: 'Shopping', spent: 2200, limit: 2000, icon: ShoppingBag, color: 'bg-red-500', iconBg: 'bg-red-100 text-red-600' },
+        { name: 'Entertainment', spent: 800, limit: 1500, icon: Clapperboard, color: 'bg-purple-500', iconBg: 'bg-purple-100 text-purple-600' },
+        { name: 'Healthcare', spent: 300, limit: 1000, icon: HeartPulse, color: 'bg-blue-500', iconBg: 'bg-blue-100 text-blue-600' },
+        { name: 'Housing', spent: 6500, limit: 7000, icon: Home, color: 'bg-indigo-500', iconBg: 'bg-indigo-100 text-indigo-600' },
+    ];
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {categories.map((cat, index) => {
+                const percentage = Math.min((cat.spent / cat.limit) * 100, 100);
+                const remaining = cat.limit - cat.spent;
+                const isOverGroups = cat.spent > cat.limit;
+
+                return (
+                    <GlassCard key={index} className="p-6 relative overflow-hidden group" hoverEffect>
+                        <div className="flex justify-between items-start mb-4">
+                            <div className={`p-3 rounded-xl ${cat.iconBg}`}>
+                                <cat.icon className="w-6 h-6" />
+                            </div>
+                            <Badge variant="outline" className={isOverGroups ? "bg-red-50 text-red-600 border-red-200" : "bg-green-50 text-green-600 border-green-200"}>
+                                {isOverGroups ? "Over Budget" : "Active"}
+                            </Badge>
+                        </div>
+
+                        <h3 className="text-lg font-bold text-slate-800 mb-1">{cat.name}</h3>
+                        <div className={`text-sm font-medium mb-4 ${remaining < 0 ? 'text-red-500' : 'text-slate-500'}`}>
+                            {remaining < 0 ? (
+                                <span className="flex items-center gap-1">Over by <DirhamIcon className="w-3 h-3" /> {formatAmount(Math.abs(remaining))}</span>
+                            ) : (
+                                <span className="flex items-center gap-1"><DirhamIcon className="w-3 h-3" /> {formatAmount(remaining)} left</span>
+                            )}
+                        </div>
+
+                        <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden mb-2">
+                            <motion.div
+                                initial={{ width: 0 }}
+                                animate={{ width: `${percentage}%` }}
+                                transition={{ duration: 1 }}
+                                className={`h-full ${cat.color}`}
+                            />
+                        </div>
+
+                        <div className="flex justify-between text-xs text-slate-400">
+                            <span className="flex items-center gap-0.5"><DirhamIcon className="w-3 h-3" /> {formatAmount(cat.spent)}</span>
+                            <span className="flex items-center gap-0.5"><DirhamIcon className="w-3 h-3" /> {formatAmount(cat.limit)}</span>
+                        </div>
+                    </GlassCard>
+                );
+            })}
+        </div>
+    );
+};
+
+export default BudgetCategoryGrid;