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

80
src/components/credit/CreditSummaryCards.tsx Normal file
View File

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