81 lines
4.0 KiB
TypeScript
81 lines
4.0 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 { ShieldCheck, Calendar, CreditCard, Percent } from 'lucide-react';
|
|
|
|
const CreditSummaryCards: React.FC = () => {
|
|
// Hardcoded target values
|
|
const data = {
|
|
score: 785,
|
|
balance: 23700,
|
|
utilization: 12,
|
|
minPayment: 850
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
{/* Credit Score */}
|
|
<GlassCard className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<p className="text-sm font-medium text-slate-500">Credit Score</p>
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-400 to-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-200">
|
|
<ShieldCheck className="w-5 h-5 text-white" />
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold text-slate-900">{data.score}</p>
|
|
<p className="text-xs text-green-600 font-medium mt-2">Excellent • Top 15%</p>
|
|
</GlassCard>
|
|
|
|
{/* Total Balance */}
|
|
<GlassCard className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<p className="text-sm font-medium text-slate-500">Total Balance</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">
|
|
<CreditCard 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.balance)}</p>
|
|
</div>
|
|
<div className="flex items-center mt-2">
|
|
<span className="text-xs text-red-500 font-medium">+ AED 1,200 from last month</span>
|
|
</div>
|
|
</GlassCard>
|
|
|
|
{/* Utilization */}
|
|
<GlassCard className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<p className="text-sm font-medium text-slate-500">Utilization</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">
|
|
<Percent className="w-5 h-5 text-white" />
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold text-slate-900">{data.utilization}%</p>
|
|
<div className="w-full bg-slate-100 rounded-full h-1.5 mt-3 overflow-hidden">
|
|
<div className="h-full bg-green-500" style={{ width: `${data.utilization}%` }}></div>
|
|
</div>
|
|
</GlassCard>
|
|
|
|
{/* Min Payment */}
|
|
<GlassCard className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<p className="text-sm font-medium text-slate-500">Min Payment Due</p>
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-lg shadow-orange-200">
|
|
<Calendar 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.minPayment)}</p>
|
|
</div>
|
|
<p className="text-xs text-orange-600 font-medium mt-2">Due in 3 days</p>
|
|
</GlassCard>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreditSummaryCards;
|