93 lines
4.3 KiB
TypeScript
93 lines
4.3 KiB
TypeScript
|
|
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;
|