"use client"; import { assets, COLORS, formatCurrency, formatPercent, getPerformanceColor, historicalData, } from "@/data/portfolio-analyzer"; import { AnimatePresence, motion } from "framer-motion"; import { AlertTriangle, ArrowDownRight, ArrowUpRight, Briefcase, ChevronDown, ChevronUp, Download, Filter, LineChartIcon, PieChartIcon, RefreshCw, TrendingUp, } from "lucide-react"; import { useState } from "react"; import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts"; const PortfolioAnalyzer = () => { const [view, setView] = useState< "overview" | "allocation" | "performance" | "risk" >("overview"); const [timeframe, setTimeframe] = useState< "day" | "week" | "month" | "year" | "total" >("total"); const [sortBy, setSortBy] = useState<"name" | "value" | "performance">( "value", ); const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc"); const [isLoading, setIsLoading] = useState(false); // Calculate portfolio metrics const totalValue = assets.reduce((sum, asset) => sum + asset.value, 0); const totalCost = assets.reduce((sum, asset) => sum + asset.costBasis, 0); const totalGain = totalValue - totalCost; const totalGainPercent = (totalGain / totalCost) * 100; // Calculate performance for the selected timeframe const performanceByTimeframe = assets.map((asset) => ({ name: asset.ticker, value: asset.performance[timeframe], })); // Calculate allocation by type const allocationByType = assets.reduce( (acc, asset) => { const existingType = acc.find((item) => item.type === asset.type); if (existingType) { existingType.value += asset.value; } else { acc.push({ type: asset.type, value: asset.value }); } return acc; }, [] as { type: string; value: number }[], ); // Calculate allocation percentages allocationByType.forEach((item) => { item.value = (item.value / totalValue) * 100; }); // Calculate allocation by sector const allocationBySector = assets.reduce( (acc, asset) => { if (!asset.sector) return acc; const existingSector = acc.find((item) => item.sector === asset.sector); if (existingSector) { existingSector.value += asset.value; } else { acc.push({ sector: asset.sector, value: asset.value }); } return acc; }, [] as { sector: string; value: number }[], ); // Calculate sector percentages allocationBySector.forEach((item) => { item.value = (item.value / totalValue) * 100; }); // Sort assets const sortedAssets = [...assets].sort((a, b) => { let comparison = 0; if (sortBy === "name") { comparison = a.name.localeCompare(b.name); } else if (sortBy === "value") { comparison = a.value - b.value; } else if (sortBy === "performance") { comparison = a.performance[timeframe] - b.performance[timeframe]; } return sortDirection === "asc" ? comparison : -comparison; }); // Handle refresh const handleRefresh = () => { setIsLoading(true); // Simulate API call setTimeout(() => { setIsLoading(false); console.log("Data refreshed..."); }, 1000); }; // Handle sort const handleSort = (column: "name" | "value" | "performance") => { if (sortBy === column) { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortBy(column); setSortDirection("desc"); } }; // Handle filter const handleFilter = () => { console.log( `Filtering data by ${{ timeframe, sortBy, sortDirection, }}...`, ); }; // Handle export const handleExport = () => { console.log("Exporting data..."); }; return (

{/* Header */}

Portfolio Analyzer

Analyze and track your investment portfolio

Refresh Filter Export

{/* Portfolio Summary */}

Total Value

{formatCurrency(totalValue)}

Total Gain/Loss

{formatCurrency(totalGain)} ({formatPercent(totalGainPercent)})

Asset Count

{assets.length}

Last Updated

{new Date().toLocaleDateString()}{" "} {new Date().toLocaleTimeString()}

{/* View Tabs */}

setView("overview")} > Overview setView("allocation")} > Allocation setView("performance")} > Performance setView("risk")} > Risk Analysis {/* Timeframe selector */}

{/* Content */}

{/* Overview View */} {view === "overview" && ( {/* Portfolio Value Chart */}

Portfolio Value Over Time

new Date(value).toLocaleDateString("en-US", { month: "short", }) } /> `$${(value / 1000).toFixed(0)}k` } /> [ formatCurrency(value as number), "Value", ]} labelFormatter={(label) => new Date(label).toLocaleDateString() } />

{/* Assets Table */}

Assets

{sortedAssets.map((asset) => ( ))}

handleSort("name")} > Asset {sortBy === "name" && (sortDirection === "asc" ? ( ) : ( ))}	handleSort("value")} > Value {sortBy === "value" && (sortDirection === "asc" ? ( ) : ( ))}	Allocation	handleSort("performance")} > Performance ({timeframe}) {sortBy === "performance" && (sortDirection === "asc" ? ( ) : ( ))}	Type
{asset.name} {asset.ticker}	{formatCurrency(asset.value)} {asset.quantity} units	{asset.allocation.toFixed(2)}%	{formatPercent(asset.performance[timeframe])} {asset.performance[timeframe] > 0 ? ( ) : asset.performance[timeframe] < 0 ? ( ) : null}	{asset.type.toUpperCase()}

)} {/* Allocation View */} {view === "allocation" && ( {/* Asset Type Allocation */}

Allocation by Asset Type

`${type}: ${value.toFixed(1)}%` } > {allocationByType.map((entry, index) => ( ))} [ `${value.toFixed(2)}%`, "Allocation", ]} contentStyle={{ backgroundColor: "#1F2937", borderColor: "#374151", borderRadius: "0.5rem", color: "#ccc", }} /> value.charAt(0).toUpperCase() + value.slice(1) } />

{/* Sector Allocation */}

Allocation by Sector

`${value}%`} /> [ `${value.toFixed(2)}%`, "Allocation", ]} contentStyle={{ backgroundColor: "#1F2937", borderColor: "#374151", borderRadius: "0.5rem", color: "#ccc", }} /> {allocationBySector.map((entry, index) => ( ))}

{/* Individual Asset Allocation */}

Individual Asset Allocation

({ name: asset.ticker, value: asset.allocation, }))} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > `${value}%`} /> [ `${value.toFixed(2)}%`, "Allocation", ]} contentStyle={{ backgroundColor: "#1F2937", borderColor: "#374151", borderRadius: "0.5rem", color: "#ccc", }} /> {assets.map((entry, index) => ( ))}

)} {/* Performance View */} {view === "performance" && ( {/* Performance Chart */}

Asset Performance ({timeframe})

`${value}%`} /> [ `${value.toFixed(2)}%`, "Performance", ]} contentStyle={{ backgroundColor: "#1F2937", borderColor: "#374151", borderRadius: "0.5rem", color: "#ccc", }} /> {performanceByTimeframe.map((entry, index) => ( = 0 ? "#10B981" : "#EF4444"} /> ))}

{/* Performance Comparison */}

Performance Comparison

Best Performers

{[...assets] .sort( (a, b) => b.performance[timeframe] - a.performance[timeframe], ) .slice(0, 3) .map((asset) => (

{asset.ticker}

{asset.type}

{formatPercent(asset.performance[timeframe])}

))}

Worst Performers

{[...assets] .sort( (a, b) => a.performance[timeframe] - b.performance[timeframe], ) .slice(0, 3) .map((asset) => (

{asset.ticker}

{asset.type}

{formatPercent(asset.performance[timeframe])} {asset.performance[timeframe] < 0 ? ( ) : ( )}

))}

)} {/* Risk Analysis View */} {view === "risk" && ( {/* Risk Distribution */}

Risk Distribution

a.risk === "low") .reduce((sum, a) => sum + a.value, 0) / totalValue) * 100, }, { name: "Medium Risk", value: (assets .filter((a) => a.risk === "medium") .reduce((sum, a) => sum + a.value, 0) / totalValue) * 100, }, { name: "High Risk", value: (assets .filter((a) => a.risk === "high") .reduce((sum, a) => sum + a.value, 0) / totalValue) * 100, }, ]} cx="50%" cy="50%" labelLine={false} outerRadius={100} fill="#8884d8" dataKey="value" label={({ name, value }) => `${name}: ${value.toFixed(1)}%` } > {/* Low Risk - Green */} {/* Medium Risk - Yellow */} {/* High Risk - Red */} [ `${value.toFixed(2)}%`, "Allocation", ]} contentStyle={{ backgroundColor: "#1F2937", borderColor: "#374151", borderRadius: "0.5rem", color: "#ccc", }} />

{/* Risk vs Return */}

Risk vs Return

({ name: asset.ticker, return: asset.performance[timeframe], risk: asset.risk === "low" ? 1 : asset.risk === "medium" ? 2 : 3, value: asset.value, }))} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} > `${value}%`} /> value === 1 ? "Low" : value === 2 ? "Medium" : "High" } /> { if (name === "return") return [`${value.toFixed(2)}%`, "Return"]; if (name === "risk") return [ value === 1 ? "Low" : value === 2 ? "Medium" : "High", "Risk", ]; return [value, name]; }} /> {assets.map((entry, index) => ( ))}

)}

); }; export default PortfolioAnalyzer;

Portfolio Analyzer

NFT Rarity Analyzer

Market Sentiment Analyzer

Analytics Heatmap Table

Portfolio Analyzer

NFT Rarity Analyzer

Market Sentiment Analyzer

Analytics Heatmap Table