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

97
src/components/portfolio/PortfolioSummaryCards.tsx Normal file
View File

@@ -0,0 +1,97 @@
import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import {
TrendingUp,
BarChart3,
ArrowUpRight,
Coins,
Library
} from 'lucide-react';
interface PortfolioSummaryCardsProps {
overview: {
totalValue: number;
totalInvested: number;
totalGains: number;
gainPercentage: number;
dayChange: number;
dayChangePercent: number;
};
holdingsCount: number;
}
const PortfolioSummaryCards: React.FC<PortfolioSummaryCardsProps> = ({ overview, holdingsCount }) => {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
{/* Total Value */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Total Value</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">
<BarChart3 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(overview.totalValue)}</p>
</div>
<div className="flex items-center mt-2">
<TrendingUp className="w-4 h-4 text-green-500 mr-1" />
<span className="text-sm text-green-600 font-medium">+{overview.gainPercentage}%</span>
</div>
</GlassCard>
{/* Today's Change */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Today's Change</p>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-cyan-600 flex items-center justify-center shadow-lg shadow-cyan-200">
<Coins 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(overview.dayChange)}</p>
</div>
<div className="flex items-center mt-2">
<ArrowUpRight className="w-4 h-4 text-green-500 mr-1" />
<span className="text-sm text-green-600 font-medium">+{overview.dayChangePercent}%</span>
</div>
</GlassCard>
{/* Holdings Count */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Holdings</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">
<Library className="w-5 h-5 text-white" />
</div>
</div>
<p className="text-2xl font-bold text-slate-900">{holdingsCount}</p>
<p className="text-sm text-slate-500 mt-2">Active Positions</p>
</GlassCard>
{/* Performance / Total Gains */}
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-medium text-slate-500">Total Gains</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">
<TrendingUp 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(overview.totalGains)}</p>
</div>
<div className="flex items-center gap-1 text-xs text-slate-400 mt-2">
vs <DirhamIcon className="w-3 h-3" /> {formatAmount(overview.totalInvested)} invested
</div>
</GlassCard>
</div>
);
};
export default PortfolioSummaryCards;