architecture-referencelisted

# Portfolio Buddy 2 - Architecture Reference ## Component Hierarchy ``` App.tsx (351 lines) ├── Header │ └── App title and branding ├── UploadSection │ ├── File upload to Supabase │ ├── CSV parsing and validation │ └── Error handling ├── ErrorList │ └── Display parsing/validation errors ├── UploadedFilesList │ └── List of successfully uploaded files ├── AnalyticsControls │ ├── Toggle Metrics view │ ├── Toggle Portfolio view │ └── Toggle Correlation view ├── PortfolioSection (591 lines - NEEDS REFACTOR!) │ ├── usePortfolio hook (date filtering) │ ├── useContractMultipliers hook │ ├── Chart.js equity curves │ ├── Portfolio statistics │ ├── ContractInput components │ ├── MasterContractControl │ └── MetricsTable integration ├── CorrelationSection │ ├── CorrelationHeatmap (Chart.js) │ ├── Spearman correlation │ └── Pearson correlation ├── MetricsTable (242 lines) │ ├── useMetrics hook │ ├── useSorting hook (advanced multi-column) │ ├── SortableHeader components │ └── Selection state management └── SessionComplete └── Completion UI/messaging ``` ## Key Hooks ### useMetrics **Location**: [src/hooks/useMetrics.ts](src/hooks/useMetrics.ts) **Purpose**: Calculate trading metrics from uploaded portfolio data **Features**: - Calculates Sharpe Ratio, Sortino Ratio, Max Drawdown, CAGR, Win Rate, etc. - Memoized calculations for performance - Handles empty/invalid data gracefully **Usage**: ```typescript const { metrics, isCalculating }