admin/shimmer-finance-ai-companion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Global Theme System and Finance Modules Redesign

Browse Source
This commit is contained in:
CycroftX
2026-02-16 00:09:52 +05:30
parent 58fe801eab
commit 557accf0c2
51 changed files with 3076 additions and 1147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/budget/BudgetSummaryCards.tsx Normal file
View File

@@ -0,0 +1,92 @@
import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import {
Wallet,
ShoppingBag,
TrendingDown,
PiggyBank
} from 'lucide-react';
const BudgetSummaryCards: React.FC = () => {
// Hardcoded design values
const data = {
income: 17500,
spent: 9600,
budget: 15000,
savingsRate: 24
};
const remaining = data.budget - data.spent;
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
{/* Total Income */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Total Income</p>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg shadow-green-200">
<Wallet className="w-5 h-5 text-white" />
</div>
</div>
<div className="flex items-center gap-1">
<DirhamIcon className="w-6 h-6 text-slate-900" />
<p className="text-2xl font-bold text-slate-900">{formatAmount(data.income)}</p>
</div>
<p className="text-xs text-slate-400 mt-2">Monthly inflow</p>
</GlassCard>
{/* Total Spent */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Total Spent</p>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center shadow-lg shadow-red-200">
<ShoppingBag className="w-5 h-5 text-white" />
</div>
</div>
<div className="flex items-center gap-1">
<DirhamIcon className="w-6 h-6 text-slate-900" />
<p className="text-2xl font-bold text-slate-900">{formatAmount(data.spent)}</p>
</div>
<p className="text-xs text-slate-400 mt-2">
{(data.spent / data.income * 100).toFixed(1)}% of income
</p>
</GlassCard>
{/* Budget Remaining */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Budget Remaining</p>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-200">
<TrendingDown className="w-5 h-5 text-white" />
</div>
</div>
<div className="flex items-center gap-1">
<DirhamIcon className="w-6 h-6 text-slate-900" />
<p className="text-2xl font-bold text-slate-900">{formatAmount(remaining)}</p>
</div>
<div className="w-full bg-slate-100 rounded-full h-1.5 mt-3 overflow-hidden">
<div className="h-full bg-blue-500" style={{ width: `${(remaining / data.budget) * 100}%` }}></div>
</div>
</GlassCard>
{/* Savings Rate */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Savings Rate</p>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg shadow-purple-200">
<PiggyBank className="w-5 h-5 text-white" />
</div>
</div>
<p className="text-2xl font-bold text-slate-900">{data.savingsRate}%</p>
<p className="text-xs text-green-600 font-medium mt-2 bg-green-50 inline-block px-2 py-0.5 rounded-full">
+2% from last month
</p>
</GlassCard>
</div>
);
};
export default BudgetSummaryCards;