Executive Code: Buy-side Equity Research Analyst Code
Copy and paste into Anthropic’s Claude and ask Claude to analyze a company using the code.
Buy-side Code
import React, { useState } from 'react';
import {
Brain, Building2, TrendingUp, Shield, DollarSign, Target,
BarChart3, Activity, Users, AlertTriangle, Award, FileText,
Play, CheckCircle, Clock, Search, Download, Layers,
Database, Globe, Zap, Eye, Calculator, Edit, Save,
ExternalLink, ArrowRight, Info, RefreshCw, AlertCircle,
TrendingDown, BookOpen, Settings, Star, HelpCircle, Copy, Home
} from 'lucide-react';
import {
RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar,
ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid,
Tooltip, BarChart, Bar, Cell, PieChart, Pie, Legend, Area, AreaChart,
ComposedChart
} from 'recharts';
const EliteBuySideAnalysis = () => {
const [step, setStep] = useState('input');
const [showDataSources, setShowDataSources] = useState(true);
const [copiedField, setCopiedField] = useState(null);
// Data Source Definitions
const dataSources = {
company: {
name: { source: "Yahoo Finance", url: "finance.yahoo.com", path: "Search ticker → Company Profile" },
ticker: { source: "Yahoo Finance", url: "finance.yahoo.com", path: "Main page header" },
industry: { source: "Yahoo Finance", url: "finance.yahoo.com", path: "Profile → Industry" },
companyType: { source: "Manual", url: "N/A", path: "Select based on business model" },
sector: { source: "Yahoo Finance", url: "finance.yahoo.com", path: "Profile → Sector" },
founded: { source: "Wikipedia", url: "wikipedia.org", path: "Search company → Founded date" },
employees: { source: "Yahoo Finance", url: "finance.yahoo.com", path: "Profile → Full Time Employees" },
ceo: { source: "Yahoo Finance", url: "finance.yahoo.com", path: "Profile → Key Executives" },
headquarters: { source: "Yahoo Finance", url: "finance.yahoo.com", path: "Profile → Address" }
},
incomeStatement: {
revenue: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → Total Revenue",
altSource: "SEC EDGAR",
altUrl: "sec.gov/edgar → 10-K → Income Statement"
},
grossProfit: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → Gross Profit"
},
operatingIncome: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → Operating Income"
},
ebitda: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → EBITDA (may need to calculate)",
calculation: "Operating Income + Depreciation + Amortization"
},
ebit: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → EBIT or Operating Income"
},
netIncome: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → Net Income"
},
interestExpense: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → Interest Expense"
},
taxExpense: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/financials",
path: "Financials → Tax Provision"
}
},
balanceSheet: {
totalAssets: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/balance-sheet",
path: "Balance Sheet → Total Assets"
},
currentAssets: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/balance-sheet",
path: "Balance Sheet → Total Current Assets"
},
cash: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/balance-sheet",
path: "Balance Sheet → Cash And Cash Equivalents"
},
totalDebt: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/balance-sheet",
path: "Short Term Debt + Long Term Debt",
calculation: "Add Short Term + Long Term Debt"
},
shareholdersEquity: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/balance-sheet",
path: "Balance Sheet → Total Stockholders' Equity"
}
},
cashFlow: {
operatingCashFlow: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/cash-flow",
path: "Cash Flow → Operating Cash Flow"
},
capex: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/cash-flow",
path: "Cash Flow → Capital Expenditures (shown as negative)"
},
fcf: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/cash-flow",
path: "Cash Flow → Free Cash Flow",
calculation: "Operating Cash Flow - CapEx"
}
},
market: {
beta: {
source: "Yahoo Finance",
url: "finance.yahoo.com/quote/[TICKER]/key-statistics",
path: "Statistics → Beta (5Y Monthly)"
},
riskFreeRate: {
source: "US Treasury",
url: "treasury.gov/resource-center/data-chart-center/interest-rates",
path: "10-Year Treasury Yield"
},
marketRiskPremium: {
source: "Damodaran",
url: "pages.stern.nyu.edu/~adamodar/",
path: "Data → Risk Premiums → Current US"
}
}
};
const [company, setCompany] = useState({
name: 'Microsoft Corporation',
ticker: 'MSFT',
industry: 'Enterprise Software & Cloud Services',
sector: 'Technology'
});
const [financialData, setFinancialData] = useState({
revenue: '245100',
grossProfit: '169426',
operatingIncome: '109433',
ebitda: '128928',
netIncome: '88100',
totalAssets: '411976',
currentAssets: '184257',
cash: '75531',
totalLiabilities: '198298',
currentLiabilities: '104149',
totalDebt: '97787',
shareholdersEquity: '213678',
operatingCashFlow: '118516',
capex: '44477',
fcf: '74039',
shares: '7430',
stockPrice: '430'
});
const [marketData, setMarketData] = useState({
beta: '0.93',
riskFreeRate: '4.5',
marketRiskPremium: '6.5',
terminalGrowth: '2.5'
});
const [calculated, setCalculated] = useState(null);
const [activeTab, setActiveTab] = useState('overview');
const copyToClipboard = (text, field) => {
navigator.clipboard.writeText(text);
setCopiedField(field);
setTimeout(() => setCopiedField(null), 2000);
};
const getDataSource = (section, field) => {
return dataSources[section]?.[field] || null;
};
const DataSourceTooltip = ({ section, field }) => {
const source = getDataSource(section, field);
if (!source) return null;
const [showTooltip, setShowTooltip] = useState(false);
return (
<div className="relative inline-block ml-2">
<button
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
className="text-blue-500 hover:text-blue-700"
>
<HelpCircle className="w-4 h-4" />
</button>
{showTooltip && (
<div className="absolute z-50 w-80 p-4 bg-white border-2 border-blue-300 rounded-lg shadow-xl bottom-full left-0 mb-2">
<div className="text-sm">
<div className="font-bold text-gray-800 mb-2">Data Source</div>
<div className="space-y-2">
<div>
<span className="font-semibold">Primary:</span> {source.source}
</div>
<div className="flex items-center gap-2">
<span className="font-semibold">URL:</span>
<code className="bg-gray-100 px-2 py-1 rounded text-xs flex-1">{source.url}</code>
<button
onClick={() => copyToClipboard(source.url, field)}
className="text-blue-500 hover:text-blue-700"
>
{copiedField === field ? <CheckCircle className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<div>
<span className="font-semibold">Path:</span> {source.path}
</div>
{source.calculation && (
<div className="pt-2 border-t">
<span className="font-semibold">Calculation:</span>
<div className="bg-yellow-50 p-2 rounded mt-1 text-xs font-mono">
{source.calculation}
</div>
</div>
)}
</div>
</div>
</div>
)}
</div>
);
};
const calculateMetrics = () => {
const f = financialData;
const m = marketData;
const revenue = parseFloat(f.revenue) || 0;
const grossProfit = parseFloat(f.grossProfit) || 0;
const operatingIncome = parseFloat(f.operatingIncome) || 0;
const ebitda = parseFloat(f.ebitda) || 0;
const netIncome = parseFloat(f.netIncome) || 0;
const totalAssets = parseFloat(f.totalAssets) || 0;
const currentAssets = parseFloat(f.currentAssets) || 0;
const cash = parseFloat(f.cash) || 0;
const totalLiabilities = parseFloat(f.totalLiabilities) || 0;
const currentLiabilities = parseFloat(f.currentLiabilities) || 0;
const totalDebt = parseFloat(f.totalDebt) || 0;
const shareholdersEquity = parseFloat(f.shareholdersEquity) || totalAssets - totalLiabilities;
const operatingCashFlow = parseFloat(f.operatingCashFlow) || 0;
const capex = parseFloat(f.capex) || 0;
const fcf = parseFloat(f.fcf) || operatingCashFlow - capex;
const shares = parseFloat(f.shares) || 0;
const stockPrice = parseFloat(f.stockPrice) || 0;
const beta = parseFloat(m.beta) || 1.0;
const riskFree = parseFloat(m.riskFreeRate) || 4.5;
const marketRiskPremium = parseFloat(m.marketRiskPremium) || 6.5;
const terminalGrowth = parseFloat(m.terminalGrowth) || 2.5;
const marketCap = shares * stockPrice;
const enterpriseValue = marketCap + totalDebt - cash;
const grossMargin = revenue > 0 ? (grossProfit / revenue) * 100 : 0;
const operatingMargin = revenue > 0 ? (operatingIncome / revenue) * 100 : 0;
const netMargin = revenue > 0 ? (netIncome / revenue) * 100 : 0;
const roa = totalAssets > 0 ? (netIncome / totalAssets) * 100 : 0;
const roe = shareholdersEquity > 0 ? (netIncome / shareholdersEquity) * 100 : 0;
const fcfMargin = revenue > 0 ? (fcf / revenue) * 100 : 0;
const fcfYield = marketCap > 0 ? (fcf / marketCap) * 100 : 0;
const debtToEquity = shareholdersEquity > 0 ? totalDebt / shareholdersEquity : 0;
const currentRatio = currentLiabilities > 0 ? currentAssets / currentLiabilities : 0;
const eps = shares > 0 ? netIncome / shares : 0;
const peRatio = eps > 0 ? stockPrice / eps : 0;
const evEbitda = ebitda > 0 ? enterpriseValue / ebitda : 0;
const costOfEquity = (riskFree + beta * marketRiskPremium) / 100;
const costOfDebt = 0.05;
const taxRate = 0.21;
const afterTaxCostOfDebt = costOfDebt * (1 - taxRate);
const E = marketCap;
const D = totalDebt;
const V = E + D;
const wacc = V > 0 ? (E/V) * costOfEquity + (D/V) * afterTaxCostOfDebt : costOfEquity;
const fcfGrowth = 0.10;
const fcfProjections = [];
let projectedFcf = fcf;
for (let i = 1; i <= 10; i++) {
const growth = i <= 5 ? 0.10 : 0.05;
projectedFcf = projectedFcf * (1 + growth);
fcfProjections.push({
year: i,
fcf: projectedFcf,
presentValue: projectedFcf / Math.pow(1 + wacc, i)
});
}
const pvFcf = fcfProjections.reduce((sum, proj) => sum + proj.presentValue, 0);
const terminalFcf = fcfProjections[9].fcf * (1 + terminalGrowth / 100);
const terminalValue = (wacc - terminalGrowth / 100) > 0 ?
terminalFcf / (wacc - terminalGrowth / 100) : 0;
const pvTerminalValue = terminalValue / Math.pow(1 + wacc, 10);
const dcfEnterpriseValue = pvFcf + pvTerminalValue;
const dcfEquityValue = dcfEnterpriseValue - totalDebt + cash;
const dcfValuePerShare = shares > 0 ? dcfEquityValue / shares : 0;
const dcfUpside = stockPrice > 0 ? ((dcfValuePerShare - stockPrice) / stockPrice) * 100 : 0;
const recommendation = dcfUpside > 30 ? 'STRONG BUY' :
dcfUpside > 20 ? 'BUY' :
dcfUpside > 10 ? 'ACCUMULATE' :
dcfUpside > 0 ? 'HOLD' :
dcfUpside > -15 ? 'REDUCE' : 'SELL';
return {
valuation: {
marketCap, enterpriseValue,
peRatio, evEbitda,
dcf: {
wacc: wacc * 100,
fcfProjections,
terminalValue,
pvTerminalValue,
pvFcf,
impliedValue: dcfEquityValue,
valuePerShare: dcfValuePerShare,
upside: dcfUpside,
currentPrice: stockPrice
}
},
profitability: {
grossMargin, operatingMargin, netMargin,
roa, roe,
fcfMargin, fcfYield
},
leverage: {
debtToEquity, currentRatio
},
recommendation: {
action: recommendation,
targetPrice: dcfValuePerShare,
currentPrice: stockPrice,
upside: dcfUpside
}
};
};
const handleCalculate = () => {
if (!company.name || !financialData.revenue) {
alert('Please enter at least Company Name and Revenue');
return;
}
const results = calculateMetrics();
setCalculated(results);
setStep('report');
};
const handleDataInput = (section, field, value) => {
if (section === 'company') {
setCompany({ ...company, [field]: value });
} else if (section === 'financial') {
setFinancialData({ ...financialData, [field]: value });
} else if (section === 'market') {
setMarketData({ ...marketData, [field]: value });
}
};
const DataSourcePanel = () => (
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-6 border-2 border-blue-300">
<div className="flex justify-between items-center mb-4">
<h3 className="font-bold text-gray-800 flex items-center gap-2">
<Database className="w-5 h-5 text-blue-600" />
Free Data Sources - Click Any Field for Instructions
</h3>
<button
onClick={() => setShowDataSources(!showDataSources)}
className="px-4 py-2 bg-white rounded-lg shadow hover:shadow-md flex items-center gap-2 text-sm"
>
<Info className="w-4 h-4" />
{showDataSources ? 'Hide' : 'Show'} Sources
</button>
</div>
{showDataSources && (
<>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
<div className="p-3 rounded-lg bg-white border-2 border-green-400 shadow">
<Star className="w-6 h-6 text-yellow-500 mx-auto mb-1" />
<div className="text-xs font-semibold text-center">Yahoo Finance</div>
<div className="text-xs text-gray-600 text-center">Primary Source</div>
</div>
<div className="p-3 rounded-lg bg-white border-2 border-purple-400 shadow">
<Award className="w-6 h-6 text-purple-600 mx-auto mb-1" />
<div className="text-xs font-semibold text-center">SEC EDGAR</div>
<div className="text-xs text-gray-600 text-center">Official Filings</div>
</div>
<div className="p-3 rounded-lg bg-white border-2 border-blue-400 shadow">
<Shield className="w-6 h-6 text-blue-600 mx-auto mb-1" />
<div className="text-xs font-semibold text-center">Damodaran</div>
<div className="text-xs text-gray-600 text-center">Industry Data</div>
</div>
<div className="p-3 rounded-lg bg-white border-2 border-orange-400 shadow">
<TrendingUp className="w-6 h-6 text-orange-600 mx-auto mb-1" />
<div className="text-xs font-semibold text-center">US Treasury</div>
<div className="text-xs text-gray-600 text-center">Risk-Free Rate</div>
</div>
</div>
<div className="bg-white rounded-lg p-4 mb-4">
<h4 className="font-semibold text-sm mb-2 flex items-center gap-2">
<Globe className="w-4 h-4" />
Quick Access Links
</h4>
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
{[
{ name: 'Yahoo Finance', url: 'https://finance.yahoo.com' },
{ name: 'SEC EDGAR', url: 'https://www.sec.gov/edgar' },
{ name: 'Damodaran Data', url: 'https://pages.stern.nyu.edu/~adamodar/' },
{ name: 'US Treasury Rates', url: 'https://home.treasury.gov/resource-center/data-chart-center/interest-rates' }
].map(link => (
<button
key={link.name}
onClick={() => copyToClipboard(link.url, link.name)}
className="flex items-center justify-between px-3 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-xs"
>
<span>{link.name}</span>
{copiedField === link.name ? (
<CheckCircle className="w-3 h-3 text-green-600" />
) : (
<ExternalLink className="w-3 h-3 text-blue-600" />
)}
</button>
))}
</div>
</div>
</>
)}
</div>
);
const InputForm = () => (
<div className="space-y-6">
<DataSourcePanel />
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<Building2 className="w-6 h-6 text-blue-600" />
Company Information
</h3>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{Object.keys(company).map(key => (
<div key={key}>
<label className="block text-sm font-medium text-gray-700 mb-2 capitalize flex items-center">
{key.replace(/([A-Z])/g, ' $1').trim()}
<DataSourceTooltip section="company" field={key} />
</label>
<input
type="text"
value={company[key]}
onChange={(e) => handleDataInput('company', key, e.target.value)}
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
/>
</div>
))}
</div>
</div>
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<DollarSign className="w-6 h-6 text-green-600" />
Financial Data (in millions, except per-share)
</h3>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{Object.keys(financialData).map(key => (
<div key={key}>
<label className="block text-xs font-medium text-gray-600 mb-1 capitalize flex items-center">
{key.replace(/([A-Z])/g, ' $1').trim()}
<DataSourceTooltip section={
['revenue', 'grossProfit', 'operatingIncome', 'ebitda', 'netIncome'].includes(key) ? 'incomeStatement' :
['totalAssets', 'currentAssets', 'cash', 'totalDebt', 'shareholdersEquity', 'totalLiabilities', 'currentLiabilities'].includes(key) ? 'balanceSheet' :
['operatingCashFlow', 'capex', 'fcf'].includes(key) ? 'cashFlow' : 'market'
} field={key} />
</label>
<input
type="number"
value={financialData[key]}
onChange={(e) => handleDataInput('financial', key, e.target.value)}
className="w-full px-3 py-2 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500"
/>
</div>
))}
</div>
</div>
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<BarChart3 className="w-6 h-6 text-purple-600" />
Market Data
</h3>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{Object.keys(marketData).map(key => (
<div key={key}>
<label className="block text-xs font-medium text-gray-600 mb-1 capitalize flex items-center">
{key.replace(/([A-Z])/g, ' $1').trim()}
<DataSourceTooltip section="market" field={key} />
</label>
<input
type="number"
step="0.1"
value={marketData[key]}
onChange={(e) => handleDataInput('market', key, e.target.value)}
className="w-full px-3 py-2 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500"
/>
</div>
))}
</div>
</div>
<div className="flex justify-center gap-4">
<button
onClick={handleCalculate}
className="px-10 py-4 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 text-white rounded-xl font-bold text-lg hover:shadow-2xl transform hover:scale-105 transition flex items-center gap-3"
>
<Brain className="w-6 h-6" />
Run Elite Analysis
</button>
</div>
</div>
);
const ReportView = () => {
if (!calculated) return null;
const getRecommendationColor = (action) => {
switch(action) {
case 'STRONG BUY': return 'bg-green-600';
case 'BUY': return 'bg-green-500';
case 'ACCUMULATE': return 'bg-blue-500';
case 'HOLD': return 'bg-yellow-500';
case 'REDUCE': return 'bg-orange-500';
case 'SELL': return 'bg-red-600';
default: return 'bg-gray-500';
}
};
const formatNumber = (num, decimals = 2) => {
if (num === null || num === undefined) return 'N/A';
return num.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
};
const formatCurrency = (num) => {
if (num === null || num === undefined) return 'N/A';
return `$${formatNumber(num, 2)}`;
};
return (
<div className="space-y-6">
<div className="flex justify-between items-center">
<button
onClick={() => setStep('input')}
className="px-6 py-3 bg-white text-gray-800 rounded-xl font-bold hover:shadow-lg flex items-center gap-2"
>
<Home className="w-5 h-5" />
Back to Input
</button>
<div className={`px-8 py-4 ${getRecommendationColor(calculated.recommendation.action)} text-white rounded-xl font-bold text-2xl shadow-lg`}>
{calculated.recommendation.action}
</div>
</div>
<div className="bg-white rounded-xl shadow-lg p-8">
<h2 className="text-3xl font-bold text-gray-800 mb-6 flex items-center gap-3">
<Building2 className="w-8 h-8 text-blue-600" />
{company.name} ({company.ticker})
</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<div className="text-center p-6 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl">
<div className="text-sm text-gray-600 mb-2">Current Price</div>
<div className="text-3xl font-bold text-blue-600">
{formatCurrency(calculated.recommendation.currentPrice)}
</div>
</div>
<div className="text-center p-6 bg-gradient-to-br from-green-50 to-green-100 rounded-xl">
<div className="text-sm text-gray-600 mb-2">Target Price</div>
<div className="text-3xl font-bold text-green-600">
{formatCurrency(calculated.recommendation.targetPrice)}
</div>
</div>
<div className="text-center p-6 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl">
<div className="text-sm text-gray-600 mb-2">Upside</div>
<div className={`text-3xl font-bold ${calculated.recommendation.upside > 0 ? 'text-green-600' : 'text-red-600'}`}>
{formatNumber(calculated.recommendation.upside, 1)}%
</div>
</div>
<div className="text-center p-6 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-xl">
<div className="text-sm text-gray-600 mb-2">Market Cap</div>
<div className="text-2xl font-bold text-indigo-600">
${formatNumber(calculated.valuation.marketCap / 1000, 1)}B
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<Target className="w-6 h-6 text-purple-600" />
Valuation Multiples
</h3>
<div className="space-y-3">
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">P/E Ratio</span>
<span className="font-bold text-lg">{formatNumber(calculated.valuation.peRatio, 1)}x</span>
</div>
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">EV/EBITDA</span>
<span className="font-bold text-lg">{formatNumber(calculated.valuation.evEbitda, 1)}x</span>
</div>
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">Enterprise Value</span>
<span className="font-bold text-lg">${formatNumber(calculated.valuation.enterpriseValue / 1000, 1)}B</span>
</div>
</div>
</div>
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<TrendingUp className="w-6 h-6 text-green-600" />
Profitability Metrics
</h3>
<div className="space-y-3">
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">Gross Margin</span>
<span className="font-bold text-lg">{formatNumber(calculated.profitability.grossMargin, 1)}%</span>
</div>
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">Operating Margin</span>
<span className="font-bold text-lg">{formatNumber(calculated.profitability.operatingMargin, 1)}%</span>
</div>
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">Net Margin</span>
<span className="font-bold text-lg">{formatNumber(calculated.profitability.netMargin, 1)}%</span>
</div>
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">ROE</span>
<span className="font-bold text-lg">{formatNumber(calculated.profitability.roe, 1)}%</span>
</div>
<div className="flex justify-between items-center py-2">
<span className="text-gray-600">ROA</span>
<span className="font-bold text-lg">{formatNumber(calculated.profitability.roa, 1)}%</span>
</div>
</div>
</div>
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<Activity className="w-6 h-6 text-blue-600" />
Cash Flow Analysis
</h3>
<div className="space-y-3">
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">FCF Margin</span>
<span className="font-bold text-lg">{formatNumber(calculated.profitability.fcfMargin, 1)}%</span>
</div>
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">FCF Yield</span>
<span className="font-bold text-lg">{formatNumber(calculated.profitability.fcfYield, 1)}%</span>
</div>
</div>
</div>
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<Shield className="w-6 h-6 text-indigo-600" />
Financial Health
</h3>
<div className="space-y-3">
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">Debt/Equity</span>
<span className="font-bold text-lg">{formatNumber(calculated.leverage.debtToEquity, 2)}x</span>
</div>
<div className="flex justify-between items-center py-2 border-b">
<span className="text-gray-600">Current Ratio</span>
<span className="font-bold text-lg">{formatNumber(calculated.leverage.currentRatio, 2)}x</span>
</div>
</div>
</div>
</div>
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
<Calculator className="w-6 h-6 text-purple-600" />
DCF Valuation Analysis
</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div className="p-4 bg-blue-50 rounded-lg">
<div className="text-sm text-gray-600 mb-1">WACC</div>
<div className="text-2xl font-bold text-blue-600">{formatNumber(calculated.valuation.dcf.wacc, 2)}%</div>
</div>
<div className="p-4 bg-green-50 rounded-lg">
<div className="text-sm text-gray-600 mb-1">PV of FCF</div>
<div className="text-2xl font-bold text-green-600">${formatNumber(calculated.valuation.dcf.pvFcf / 1000, 1)}B</div>
</div>
<div className="p-4 bg-purple-50 rounded-lg">
<div className="text-sm text-gray-600 mb-1">Terminal Value (PV)</div>
<div className="text-2xl font-bold text-purple-600">${formatNumber(calculated.valuation.dcf.pvTerminalValue / 1000, 1)}B</div>
</div>
</div>
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={calculated.valuation.dcf.fcfProjections}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="year" label={{ value: 'Year', position: 'insideBottom', offset: -5 }} />
<YAxis label={{ value: 'FCF ($M)', angle: -90, position: 'insideLeft' }} />
<Tooltip formatter={(value) => formatCurrency(value)} />
<Legend />
<Bar dataKey="fcf" fill="#8b5cf6" name="Projected FCF" />
<Bar dataKey="presentValue" fill="#10b981" name="Present Value" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
);
};
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-indigo-900 p-6">
<div className="max-w-7xl mx-auto">
<div className="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 mb-8">
<div className="flex items-center gap-4">
<div className="p-4 bg-gradient-to-br from-blue-500 via-purple-600 to-indigo-600 rounded-2xl">
<Brain className="w-12 h-12 text-white" />
</div>
<div>
<h1 className="text-5xl font-bold text-white mb-2">Elite Buy-Side Analysis Platform</h1>
<p className="text-xl text-blue-200">
Professional Financial Analysis with Integrated Data Sources
</p>
</div>
</div>
</div>
{step === 'input' && <InputForm />}
{step === 'report' && <ReportView />}
</div>
</div>
);
};
export default EliteBuySideAnalysis;