194 lines
8.2 KiB
HTML
194 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Atlas AI Wealth</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand"><span class="accent">Atlas</span> AI Wealth</div>
|
||
<nav class="nav" id="nav">
|
||
<button data-route="dashboard" class="active">Dashboard</button>
|
||
<button data-route="portfolio">Portfolio</button>
|
||
<button data-route="transactions">Transactions</button>
|
||
<button data-route="cashflow">Cash Flow</button>
|
||
<button data-route="upload">Upload</button>
|
||
</nav>
|
||
<div class="user">demo@atlas.local</div>
|
||
</header>
|
||
|
||
<main id="view"></main>
|
||
|
||
<!-- Templates -->
|
||
<template id="tpl-dashboard">
|
||
<section>
|
||
<div class="row spread">
|
||
<h1>Dashboard</h1>
|
||
<div class="muted mono">Wealth OS — institutional view</div>
|
||
</div>
|
||
<div class="kpi-grid">
|
||
<div class="card kpi"><div class="kpi-label">Net Worth</div><div class="kpi-value" data-k="netWorth"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Portfolio Value</div><div class="kpi-value" data-k="portfolioValue"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Cash</div><div class="kpi-value" data-k="cash"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Performance YTD</div><div class="kpi-value accent" data-k="ytd"></div></div>
|
||
</div>
|
||
<div class="kpi-grid kpi-3">
|
||
<div class="card kpi"><div class="kpi-label">Spending MTD</div><div class="kpi-value" data-k="spendMtd"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Spending YTD</div><div class="kpi-value" data-k="spendYtd"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Passive Income YTD</div><div class="kpi-value accent" data-k="passive"></div></div>
|
||
</div>
|
||
<div class="grid-2-1">
|
||
<div class="card">
|
||
<div class="kpi-label">Top Positions</div>
|
||
<table class="data">
|
||
<thead><tr>
|
||
<th>Asset</th><th class="r">Qty</th><th class="r">Avg Cost</th>
|
||
<th class="r">Price</th><th class="r">Market Value</th><th class="r">PnL</th>
|
||
</tr></thead>
|
||
<tbody id="top-positions"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<div class="kpi-label">AI Copilot</div>
|
||
<div class="copilot">
|
||
<div class="row">
|
||
<input id="copilot-input" placeholder="Спроси про портфель, расходы, риски…" />
|
||
<button id="copilot-ask" class="btn-primary">Ask</button>
|
||
</div>
|
||
<div class="chips" id="copilot-suggest"></div>
|
||
<div id="copilot-answer" class="answer"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="tpl-portfolio">
|
||
<section>
|
||
<h1>Portfolio</h1>
|
||
<div class="kpi-grid">
|
||
<div class="card kpi"><div class="kpi-label">Market Value</div><div class="kpi-value" data-k="mv"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Cost Basis</div><div class="kpi-value" data-k="cost"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Unrealized PnL</div><div class="kpi-value accent" data-k="upnl"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Realized PnL</div><div class="kpi-value accent" data-k="rpnl"></div></div>
|
||
</div>
|
||
<div class="kpi-grid kpi-3">
|
||
<div class="card kpi"><div class="kpi-label">TWR YTD</div><div class="kpi-value" data-k="twrYtd"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">TWR Since Inception</div><div class="kpi-value" data-k="twr"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">IRR Since Inception</div><div class="kpi-value" data-k="irr"></div></div>
|
||
</div>
|
||
<div class="kpi-grid kpi-3">
|
||
<div class="card kpi"><div class="kpi-label">Volatility (ann.)</div><div class="kpi-value" data-k="vol"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Sharpe</div><div class="kpi-value" data-k="sharpe"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Max Drawdown</div><div class="kpi-value warn" data-k="dd"></div></div>
|
||
</div>
|
||
<div class="grid-2-1">
|
||
<div class="card">
|
||
<div class="kpi-label">Holdings</div>
|
||
<table class="data">
|
||
<thead><tr>
|
||
<th>Asset</th><th>Sector</th><th class="r">Qty</th><th class="r">Avg Cost</th>
|
||
<th class="r">Price</th><th class="r">Market Value</th><th class="r">PnL</th>
|
||
</tr></thead>
|
||
<tbody id="holdings"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<div class="kpi-label">Allocation</div>
|
||
<div id="alloc-bar" class="alloc-bar"></div>
|
||
<div id="alloc-legend" class="alloc-legend"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="tpl-transactions">
|
||
<section>
|
||
<h1>Transactions</h1>
|
||
<div class="card row gap">
|
||
<input id="tx-search" placeholder="Поиск по описанию…" />
|
||
<select id="tx-type">
|
||
<option value="">All types</option>
|
||
</select>
|
||
</div>
|
||
<div class="card overflow">
|
||
<table class="data">
|
||
<thead><tr>
|
||
<th>Date</th><th>Type</th><th>Asset</th>
|
||
<th class="r">Qty</th><th class="r">Amount</th>
|
||
<th>Category</th><th>Description</th>
|
||
</tr></thead>
|
||
<tbody id="tx-rows"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="tpl-cashflow">
|
||
<section>
|
||
<h1>Cash Flow</h1>
|
||
<div class="kpi-grid kpi-3">
|
||
<div class="card kpi"><div class="kpi-label">Inflows</div><div class="kpi-value accent" data-k="in"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Outflows</div><div class="kpi-value danger" data-k="out"></div></div>
|
||
<div class="card kpi"><div class="kpi-label">Net</div><div class="kpi-value" data-k="net"></div></div>
|
||
</div>
|
||
<div class="grid-1-1">
|
||
<div class="card">
|
||
<div class="kpi-label">Spending by Category</div>
|
||
<div id="spend-bars"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="kpi-label">Dividends & Coupons by Asset</div>
|
||
<div id="div-bars"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="kpi-label">Monthly Cash Flow</div>
|
||
<div id="monthly-chart" class="chart"></div>
|
||
<div class="legend">
|
||
<span><i class="dot accent"></i>Inflow</span>
|
||
<span><i class="dot danger"></i>Outflow</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="tpl-upload">
|
||
<section>
|
||
<h1>Upload Statement</h1>
|
||
<div class="card stack">
|
||
<div class="kpi-label">Брокерский отчет / банковская выписка</div>
|
||
<input type="file" id="file-input" accept=".xlsx,.csv,.pdf" />
|
||
<p class="muted small">
|
||
MVP-демо: реальный парсинг XLSX/CSV/PDF реализован в backend (FastAPI).
|
||
Здесь кликни <strong>«Load sample data»</strong> чтобы загрузить готовый
|
||
мок-портфель (Interactive Brokers, 27 транзакций 2024–2026).
|
||
</p>
|
||
<div class="row gap">
|
||
<button class="btn-primary" id="btn-load-sample">Load sample data</button>
|
||
<button class="btn-ghost" id="btn-reset">Reset data</button>
|
||
</div>
|
||
<div id="upload-result"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="kpi-label">Supported (TRD §7)</div>
|
||
<ul class="bullets">
|
||
<li>XLSX (multi-sheet, custom broker formats, inconsistent headers)</li>
|
||
<li>CSV</li>
|
||
<li>PDF statements (Phase 2)</li>
|
||
</ul>
|
||
<div class="kpi-label">Auto-detected brokers</div>
|
||
<ul class="bullets">
|
||
<li>Interactive Brokers · Freedom · Halyk Finance · Binance · Kaspi · Charles Schwab</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script src="data.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|