| import { TrendingUp, TrendingDown, Lock } from 'lucide-react'; |
| import { cn } from '../lib/utils'; |
| import { Influencer, PnLData } from '../types'; |
|
|
| interface PnLOverviewCardProps { |
| influencer: Influencer; |
| pnlData: PnLData; |
| onLockTerminal: () => void; |
| className?: string; |
| } |
|
|
| export const PnLOverviewCard = ({ influencer, pnlData, onLockTerminal, className }: PnLOverviewCardProps) => { |
| const isPositive = pnlData.totalUnrealizedPnl.dollars >= 0; |
|
|
| return ( |
| <div className={cn('glassmorphism rounded-xl p-6', className)}> |
| <div className="flex items-start justify-between mb-6"> |
| <div className="flex items-center gap-4"> |
| <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-xl font-bold text-white"> |
| {influencer.avatar} |
| </div> |
| <div> |
| <h2 className="text-2xl font-bold text-foreground">{influencer.name}</h2> |
| <p className="text-sm text-muted-foreground">{influencer.bio}</p> |
| <p className="text-xs text-muted-foreground mt-1">{influencer.socialLinks}</p> |
| </div> |
| </div> |
| |
| {influencer.isPrivate && ( |
| <button |
| onClick={onLockTerminal} |
| className="p-2 rounded-lg hover:bg-accent/50 transition-colors" |
| title="Lock Terminal" |
| > |
| <Lock className="w-5 h-5 text-muted-foreground" /> |
| </button> |
| )} |
| </div> |
| |
| <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
| <div className="bg-card/50 rounded-lg p-4"> |
| <p className="text-xs text-muted-foreground mb-1">Win Rate</p> |
| <p className="text-xl font-bold text-foreground">{influencer.stats.winRate}%</p> |
| </div> |
| <div className="bg-card/50 rounded-lg p-4"> |
| <p className="text-xs text-muted-foreground mb-1">Total P&L</p> |
| <p className="text-xl font-bold text-foreground">{influencer.stats.totalPnlPercent}%</p> |
| </div> |
| <div className="bg-card/50 rounded-lg p-4"> |
| <p className="text-xs text-muted-foreground mb-1">Active Positions</p> |
| <p className="text-xl font-bold text-foreground">{influencer.stats.activePositions}</p> |
| </div> |
| <div className="bg-card/50 rounded-lg p-4"> |
| <p className="text-xs text-muted-foreground mb-1">Net Worth</p> |
| <p className="text-xl font-bold text-foreground">{influencer.stats.netWorthAllocation}</p> |
| </div> |
| </div> |
| |
| <div className="bg-gradient-to-r from-card/50 to-card/30 rounded-lg p-6 border border-border"> |
| <p className="text-sm text-muted-foreground mb-2">Total Unrealized P&L</p> |
| <div className="flex items-center gap-3"> |
| {isPositive ? ( |
| <TrendingUp className="w-8 h-8 text-green-500" /> |
| ) : ( |
| <TrendingDown className="w-8 h-8 text-red-500" /> |
| )} |
| <div> |
| <p className={cn( |
| 'text-3xl font-bold', |
| isPositive ? 'text-green-500' : 'text-red-500' |
| )}> |
| ${Math.abs(pnlData.totalUnrealizedPnl.dollars).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} |
| </p> |
| <p className={cn( |
| 'text-sm font-medium', |
| isPositive ? 'text-green-500' : 'text-red-500' |
| )}> |
| {isPositive ? '+' : ''}{pnlData.totalUnrealizedPnl.percent.toFixed(2)}% |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| ); |
| }; |
|
|
