Boersenchecker UI
All checks were successful
Deploy / deploy-staging (push) Successful in 5s
Deploy / deploy-production (push) Has been skipped

This commit is contained in:
2026-04-23 00:01:20 +02:00
parent 2e39acbf03
commit 327f40adec
3 changed files with 526 additions and 294 deletions

View File

@@ -1,51 +1,215 @@
.bc-module-nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 1rem 0 1.15rem;
.bc-app {
--bc-accent: #5eead4;
--bc-accent-strong: #79d7ff;
--bc-ink: #09111f;
--bc-text: rgba(236, 245, 255, 0.96);
--bc-muted: rgba(203, 218, 234, 0.78);
--bc-line: rgba(148, 163, 184, 0.22);
--bc-panel: rgba(15, 23, 42, 0.68);
--bc-panel-soft: rgba(15, 23, 42, 0.52);
--bc-positive: #86efac;
--bc-negative: #fca5a5;
color: var(--bc-text);
}
.bc-module-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 18px;
border-radius: 16px;
text-decoration: none;
color: #09111f;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.9);
font-weight: 700;
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
.bc-grid-bg {
position: relative;
padding: 8px 0 32px;
}
.bc-module-tab:hover,
.bc-module-tab:focus-visible,
.bc-module-tab.is-active {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(0,0,0,0.14);
.bc-grid-bg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at top right, rgba(94, 234, 212, 0.16), transparent 28%),
radial-gradient(circle at bottom left, rgba(121, 215, 255, 0.14), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.bc-module-tab.is-active {
background: linear-gradient(135deg, #79d7ff, #5eead4);
border-color: rgba(94, 234, 212, 0.35);
.bc-shell {
position: relative;
display: grid;
gap: 18px;
}
.bc-module-tab:hover,
.bc-module-tab:focus-visible {
background: #ffffff;
.bc-stack {
display: grid;
gap: 18px;
}
.bc-hero {
display: grid;
gap: 18px;
padding: 28px;
border-radius: 28px;
background:
radial-gradient(circle at top right, rgba(71, 169, 255, 0.22), transparent 32%),
radial-gradient(circle at bottom left, rgba(81, 214, 141, 0.18), transparent 28%),
linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
radial-gradient(circle at top right, rgba(94, 234, 212, 0.18), transparent 28%),
radial-gradient(circle at bottom left, rgba(121, 215, 255, 0.14), transparent 32%),
linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.78));
border: 1px solid var(--bc-line);
box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22);
}
.bc-hero-top {
display: grid;
gap: 16px;
grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.7fr);
align-items: start;
}
.bc-hero-copy {
display: grid;
gap: 10px;
}
.bc-eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 8px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--bc-accent) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--bc-accent) 28%, transparent);
color: var(--bc-text);
font-size: 0.86rem;
font-weight: 700;
}
.bc-title {
margin: 0;
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1.05;
}
.bc-text {
color: var(--bc-muted);
margin: 0;
}
.bc-hero-controls {
display: grid;
gap: 12px;
justify-items: stretch;
}
.bc-form-card,
.bc-panel,
.bc-stat,
.bc-chart-card,
.bc-position-row {
border: 1px solid var(--bc-line);
border-radius: 22px;
background: var(--bc-panel);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.bc-form-card,
.bc-panel,
.bc-chart-card {
padding: 18px;
}
.bc-stat {
padding: 16px;
}
.bc-field-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bc-muted);
}
.bc-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.bc-button,
.bc-tabs a,
.bc-app button,
.bc-app input,
.bc-app select,
.bc-app textarea {
font: inherit;
}
.bc-button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 16px;
padding: 12px 16px;
cursor: pointer;
text-decoration: none;
transition: 160ms ease;
}
.bc-button:hover {
transform: translateY(-1px);
}
.bc-button--tab {
background: rgba(255, 255, 255, 0.92);
color: var(--bc-ink);
font-weight: 700;
}
.bc-button--tab-active {
background: linear-gradient(135deg, var(--bc-accent-strong), var(--bc-accent));
color: var(--bc-ink);
font-weight: 700;
}
.bc-button--primary {
background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-strong));
color: var(--bc-ink);
font-weight: 700;
}
.bc-button--secondary {
background: rgba(255, 255, 255, 0.92);
color: var(--bc-ink);
font-weight: 700;
}
.bc-button--ghost {
background: color-mix(in srgb, var(--bc-accent) 14%, transparent);
border-color: color-mix(in srgb, var(--bc-accent) 34%, transparent);
color: var(--bc-accent-strong);
font-weight: 700;
}
.bc-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.bc-alert {
padding: 16px 18px;
border-radius: 20px;
border: 1px solid transparent;
}
.bc-alert--error {
background: rgba(127, 29, 29, 0.28);
border-color: rgba(252, 165, 165, 0.24);
color: #fecaca;
}
.bc-alert--success {
background: rgba(6, 78, 59, 0.28);
border-color: rgba(134, 239, 172, 0.24);
color: #bbf7d0;
}
.bc-toolbar,
.bc-overview-grid,
.bc-card-grid {
display: grid;
gap: 14px;
@@ -55,37 +219,20 @@
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.bc-card-grid {
.bc-overview-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.bc-overview-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.bc-stat {
padding: 16px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
.bc-card-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.bc-stat-value {
margin-top: 6px;
font-size: 1.35rem;
margin-top: 8px;
font-size: 1.42rem;
font-weight: 700;
}
.bc-surface {
padding: 18px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.08);
}
.bc-chart-shell {
position: relative;
min-height: 360px;
@@ -100,11 +247,11 @@
.bc-chart-path {
fill: none;
stroke: #5eead4;
stroke: var(--bc-accent);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 12px 24px rgba(94, 234, 212, 0.25));
filter: drop-shadow(0 12px 24px rgba(94, 234, 212, 0.22));
}
.bc-chart-area {
@@ -116,17 +263,16 @@
stroke-dasharray: 4 6;
}
.bc-range-list,
.bc-inline-actions {
.bc-range-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.bc-range-button {
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
color: var(--text);
border: 1px solid color-mix(in srgb, var(--bc-accent) 26%, transparent);
background: color-mix(in srgb, var(--bc-accent) 8%, transparent);
color: var(--bc-text);
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
@@ -136,8 +282,8 @@
.bc-range-button:hover,
.bc-range-button[aria-pressed="true"] {
transform: translateY(-1px);
background: rgba(94, 234, 212, 0.12);
border-color: rgba(94, 234, 212, 0.45);
background: color-mix(in srgb, var(--bc-accent) 18%, transparent);
border-color: color-mix(in srgb, var(--bc-accent) 42%, transparent);
}
.bc-panel-fade {
@@ -151,18 +297,15 @@
.bc-position-list {
display: grid;
gap: 12px;
gap: 14px;
}
.bc-position-row {
display: grid;
grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(100px, .75fr));
gap: 12px;
grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(96px, .72fr));
gap: 14px;
align-items: center;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
padding: 16px 18px;
}
.bc-performance {
@@ -170,24 +313,81 @@
}
.bc-performance.is-positive {
color: #84f2b7;
color: var(--bc-positive);
}
.bc-performance.is-negative {
color: #ff9b8d;
color: var(--bc-negative);
}
.bc-pill-soft {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: var(--muted);
color: var(--bc-muted);
font-size: .85rem;
}
@media (max-width: 900px) {
.bc-table-shell {
overflow: auto;
border-radius: 18px;
border: 1px solid var(--bc-line);
}
.bc-table {
width: 100%;
border-collapse: collapse;
}
.bc-table th,
.bc-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.06);
vertical-align: top;
}
.bc-table thead {
background: rgba(255,255,255,0.04);
}
.bc-app .setup-field {
display: grid;
gap: 6px;
}
.bc-app input,
.bc-app select,
.bc-app textarea {
width: 100%;
border: 1px solid var(--bc-line);
border-radius: 14px;
padding: 10px 12px;
background: rgba(2, 6, 23, 0.42);
color: var(--bc-text);
}
.bc-app input::placeholder,
.bc-app textarea::placeholder {
color: rgba(203, 218, 234, 0.48);
}
.bc-app a {
color: inherit;
}
.bc-app .muted {
color: var(--bc-muted);
}
@media (max-width: 980px) {
.bc-hero-top {
grid-template-columns: 1fr;
}
.bc-position-row {
grid-template-columns: 1fr;
}

View File

@@ -1,29 +1,35 @@
<?php $ownerQuery = $isAdmin ? '?owner_sub=' . urlencode((string) $ownerSub) : ''; ?>
<div class="card">
<div class="bc-module-nav">
<a class="bc-module-tab" href="/module/boersenchecker">Ueberblick</a>
<a class="bc-module-tab is-active" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
<a class="bc-module-tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
<div class="bc-app">
<div class="bc-grid-bg">
<div class="bc-shell bc-stack">
<header class="bc-hero">
<div class="bc-hero-top">
<div class="bc-hero-copy">
<div class="bc-eyebrow">Boersenchecker Modul</div>
<h1 class="bc-title">Depotverwaltung</h1>
<p class="bc-text">Depots, Positionen und Kurs-Historien verwalten. Die Waehrungsumrechnung nutzt weiterhin die bestehende FX-Logik des Mining-Checkers.</p>
</div>
<div class="pill">Boersenchecker</div>
<h1 style="margin-top:.75rem;">Depotverwaltung</h1>
<p class="muted">
Depots, Positionen und manuelle Kursverlaeufe. Die Waehrungsumrechnung nutzt, sofern verfuegbar,
die bestehende FX-Logik des Mining-Checkers weiter.
</p>
<div class="bc-hero-controls">
<a class="bc-button bc-button--ghost" href="/">Zur Startseite</a>
<a class="bc-button bc-button--secondary" href="/modules/setup/boersenchecker">Setup</a>
</div>
</div>
<div class="bc-tabs">
<a class="bc-button bc-button--tab" href="/module/boersenchecker">Ueberblick</a>
<a class="bc-button bc-button--tab-active" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
<a class="bc-button bc-button--tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
</div>
</header>
<?php if ($error): ?>
<div class="card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
<?= e($error) ?>
</div>
<div class="bc-alert bc-alert--error"><?= e($error) ?></div>
<?php elseif ($notice): ?>
<div class="card" style="margin-top:1rem; border-color:var(--accent-2);">
<?= e($notice) ?>
</div>
<div class="bc-alert bc-alert--success"><?= e($notice) ?></div>
<?php endif; ?>
<?php if ($isAdmin): ?>
<div class="card" style="margin-top:1rem; background:var(--panel-2);">
<div class="bc-panel">
<strong>Benutzer-Scope</strong>
<form method="get" style="margin-top:.75rem; display:flex; gap:10px; flex-wrap:wrap; align-items:end;">
<label class="setup-field muted" style="margin:0; min-width:260px;">
@@ -36,13 +42,13 @@
<?php endforeach; ?>
</select>
</label>
<button class="cta-button" type="submit">Anzeigen</button>
<button class="bc-button bc-button--primary" type="submit">Anzeigen</button>
</form>
</div>
<?php endif; ?>
<div class="grid" style="margin-top:1rem;">
<div class="card" style="background:var(--panel-2);">
<div class="bc-panel">
<strong><?= $editPortfolio ? 'Depot bearbeiten' : 'Neues Depot' ?></strong>
<form method="post" style="margin-top:.75rem; display:grid; gap:10px;">
<input type="hidden" name="action" value="save_portfolio">
@@ -61,15 +67,15 @@
<textarea name="portfolio_notes" rows="3"><?= e((string) ($editPortfolio['notes'] ?? '')) ?></textarea>
</label>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="cta-button" type="submit">Depot speichern</button>
<button class="bc-button bc-button--primary" type="submit">Depot speichern</button>
<?php if ($editPortfolio): ?>
<a class="nav-link" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
<a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
<?php endif; ?>
</div>
</form>
</div>
<div class="card" style="background:var(--panel-2);">
<div class="bc-panel">
<strong>API / FX</strong>
<p class="muted" style="margin-top:.75rem;">
Die Umrechnung liest gespeicherte FX-Daten aus dem Mining-Checker. Eine Aktualisierung wird nur manuell
@@ -82,12 +88,12 @@
<form method="post">
<input type="hidden" name="action" value="refresh_fx">
<input type="hidden" name="owner_sub" value="<?= e((string) $ownerSub) ?>">
<button class="cta-button" type="submit">FX-Daten aktualisieren</button>
<button class="bc-button bc-button--primary" type="submit">FX-Daten aktualisieren</button>
</form>
<form method="post">
<input type="hidden" name="action" value="refresh_alpha_vantage_all">
<input type="hidden" name="owner_sub" value="<?= e((string) $ownerSub) ?>">
<button class="nav-link" type="submit">Alle API-Kurse abrufen</button>
<button class="bc-button bc-button--secondary" type="submit">Alle API-Kurse abrufen</button>
</form>
</div>
<div class="muted" style="margin-top:.75rem;">
@@ -102,7 +108,7 @@
</div>
</div>
<div class="card" style="margin-top:1rem; background:var(--panel-2);">
<div class="bc-panel" style="margin-top:1rem;">
<strong><?= $editPosition ? 'Position bearbeiten' : 'Neue Position' ?></strong>
<?php if ($portfolios === []): ?>
<div class="muted" style="margin-top:.75rem;">Bitte zuerst ein Depot anlegen.</div>
@@ -176,16 +182,16 @@
<textarea name="position_notes" rows="3"><?= e((string) ($editPosition['notes'] ?? '')) ?></textarea>
</label>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="cta-button" type="submit">Position speichern</button>
<button class="bc-button bc-button--primary" type="submit">Position speichern</button>
<?php if ($editPosition): ?>
<a class="nav-link" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
<a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung<?= e($ownerQuery) ?>">Abbrechen</a>
<?php endif; ?>
</div>
</form>
<?php endif; ?>
</div>
<div class="card" style="margin-top:1rem; background:var(--panel-2);">
<div class="bc-panel" style="margin-top:1rem;">
<strong>API-Symbol suchen</strong>
<p class="muted" style="margin-top:.75rem;">
Suche nach Firma oder Ticker ueber den Alpha-Vantage-`SYMBOL_SEARCH`-Endpoint und uebernimm einen Treffer direkt ins Positionsformular.
@@ -197,12 +203,12 @@
<span>Suchbegriff</span>
<input type="text" name="search_keywords" value="<?= e($symbolSearchKeywords) ?>" placeholder="z.B. Mercedes, AAPL, Allianz" required>
</label>
<button class="cta-button" type="submit">Suchen</button>
<button class="bc-button bc-button--primary" type="submit">Suchen</button>
</form>
<?php if ($symbolSearchResults !== []): ?>
<div style="overflow:auto; margin-top:1rem;">
<table style="width:100%; border-collapse:collapse;">
<div class="bc-table-shell" style="margin-top:1rem;">
<table class="bc-table">
<thead>
<tr style="text-align:left; border-bottom:1px solid var(--border);">
<th style="padding:8px;">Symbol</th>
@@ -224,7 +230,7 @@
<td style="padding:8px;"><?= e((string) ($result['currency'] ?? '')) ?></td>
<td style="padding:8px;"><?= e((string) ($result['match_score'] ?? '')) ?></td>
<td style="padding:8px;">
<a class="nav-link" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&symbol_candidate=<?= urlencode((string) ($result['symbol'] ?? '')) ?>&instrument_name_candidate=<?= urlencode((string) ($result['name'] ?? '')) ?>&market_candidate=<?= urlencode((string) ($result['region'] ?? '')) ?>&quote_currency_candidate=<?= urlencode((string) ($result['currency'] ?? '')) ?>">
<a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&symbol_candidate=<?= urlencode((string) ($result['symbol'] ?? '')) ?>&instrument_name_candidate=<?= urlencode((string) ($result['name'] ?? '')) ?>&market_candidate=<?= urlencode((string) ($result['region'] ?? '')) ?>&quote_currency_candidate=<?= urlencode((string) ($result['currency'] ?? '')) ?>">
In Formular uebernehmen
</a>
</td>
@@ -236,7 +242,7 @@
<?php endif; ?>
</div>
<div class="card" style="margin-top:1rem; background:var(--panel-2);">
<div class="bc-panel" style="margin-top:1rem;">
<strong>Manuellen Kurs erfassen</strong>
<?php if ($instrumentList === []): ?>
<div class="muted" style="margin-top:.75rem;">Sobald Positionen vorhanden sind, koennen hier Kurse mit Uhrzeit gespeichert werden.</div>
@@ -274,7 +280,7 @@
</label>
</div>
<div>
<button class="cta-button" type="submit">Kurs speichern</button>
<button class="bc-button bc-button--primary" type="submit">Kurs speichern</button>
</div>
</form>
<?php endif; ?>
@@ -416,14 +422,14 @@
<?php endif; ?>
</div>
<div class="card" style="margin-top:1rem;">
<div class="bc-panel" style="margin-top:1rem;">
<strong>Kursverlauf</strong>
<?php if ($instrumentList === []): ?>
<div class="muted" style="margin-top:.75rem;">Noch keine Kursdaten vorhanden.</div>
<?php else: ?>
<?php foreach ($instrumentList as $instrumentId => $instrument): ?>
<?php $history = array_slice($quoteHistory[$instrumentId] ?? [], 0, 10); ?>
<div class="card" style="margin-top:1rem; background:var(--panel-2);">
<div class="bc-panel" style="margin-top:1rem;">
<div style="display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;">
<div>
<strong><?= e((string) $instrument['name']) ?></strong>
@@ -431,13 +437,13 @@
<?= e((string) ($instrument['symbol'] ?: '-')) ?> · <?= e((string) ($instrument['isin'] ?: '-')) ?>
</div>
</div>
<a class="nav-link" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&instrument_id=<?= e((string) $instrumentId) ?>">Neuen Kurs erfassen</a>
<a class="bc-button bc-button--secondary" href="/module/boersenchecker/depotverwaltung?owner_sub=<?= urlencode((string) $ownerSub) ?>&instrument_id=<?= e((string) $instrumentId) ?>">Neuen Kurs erfassen</a>
</div>
<?php if ($history === []): ?>
<div class="muted" style="margin-top:.75rem;">Noch keine historischen Kurse vorhanden.</div>
<?php else: ?>
<div style="overflow:auto; margin-top:.75rem;">
<table style="width:100%; border-collapse:collapse;">
<div class="bc-table-shell" style="margin-top:.75rem;">
<table class="bc-table">
<thead>
<tr style="text-align:left; border-bottom:1px solid var(--border);">
<th style="padding:8px;">Zeitpunkt</th>
@@ -457,7 +463,7 @@
<input type="hidden" name="action" value="delete_quote">
<input type="hidden" name="owner_sub" value="<?= e((string) $ownerSub) ?>">
<input type="hidden" name="quote_id" value="<?= e((string) $quote['id']) ?>">
<button class="nav-link" type="submit">Loeschen</button>
<button class="bc-button bc-button--secondary" type="submit">Loeschen</button>
</form>
</td>
</tr>
@@ -470,4 +476,6 @@
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>

View File

@@ -1,9 +1,6 @@
<div class="card bc-hero" data-bc-home data-chart-endpoint="<?= e($chartEndpoint) ?>">
<div class="bc-module-nav">
<a class="bc-module-tab is-active" href="/module/boersenchecker">Ueberblick</a>
<a class="bc-module-tab" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
<a class="bc-module-tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
</div>
<div class="bc-app">
<div class="bc-grid-bg">
<div class="bc-shell bc-stack" data-bc-home data-chart-endpoint="<?= e($chartEndpoint) ?>">
<script type="application/json" data-bc-instruments-json><?= json_encode(array_map(static function (array $position): array {
return [
'instrument_id' => (int) ($position['instrument_id'] ?? 0),
@@ -12,24 +9,44 @@
'isin' => (string) ($position['isin'] ?? ''),
];
}, $positions), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?></script>
<div class="pill">Boersenchecker</div>
<h1 style="margin-top:.75rem;">Ueberblick</h1>
<p class="muted">Depotauswahl, Aktienauswahl und animierte Kurscharts auf Basis von Schlusskursen.</p>
<header class="bc-hero">
<div class="bc-hero-top">
<div class="bc-hero-copy">
<div class="bc-eyebrow">Boersenchecker Modul</div>
<h1 class="bc-title">Depot-Ueberblick</h1>
<p class="bc-text">Depots, Aktien und Kursverlaeufe in einer Oberflaeche. Die Navigation folgt jetzt dem gleichen sichtbaren Prinzip wie beim Mining-Checker.</p>
</div>
<div class="bc-hero-controls">
<a class="bc-button bc-button--ghost" href="/">Zur Startseite</a>
<div class="bc-form-card">
<div class="bc-field-label">Aktives Depot</div>
<div class="bc-text" style="margin-top:8px;"><?= $selectedPortfolioId > 0 && $portfolios !== [] ? e((string) (($portfolios[array_search($selectedPortfolioId, array_column($portfolios, 'id'), true)]['name'] ?? 'Auswahl aktiv'))) : 'Kein Depot ausgewaehlt' ?></div>
</div>
</div>
</div>
<div class="bc-tabs">
<a class="bc-button bc-button--tab-active" href="/module/boersenchecker">Ueberblick</a>
<a class="bc-button bc-button--tab" href="/module/boersenchecker/depotverwaltung">Depotverwaltung</a>
<a class="bc-button bc-button--tab" href="/module/boersenchecker/aktienverwaltung">Aktienverwaltung</a>
</div>
</header>
<?php if ($error): ?>
<div class="card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;"><?= e($error) ?></div>
<div class="bc-alert bc-alert--error"><?= e($error) ?></div>
<?php elseif ($notice): ?>
<div class="card" style="margin-top:1rem; border-color:var(--accent-2);"><?= e($notice) ?></div>
<div class="bc-alert bc-alert--success"><?= e($notice) ?></div>
<?php endif; ?>
<div class="bc-toolbar" style="margin-top:1rem;">
<form class="bc-surface" method="get">
<strong>Depot</strong>
<div class="bc-toolbar">
<form class="bc-panel" method="get">
<div class="bc-field-label">Depotauswahl</div>
<?php if ($portfolios === []): ?>
<div class="muted" style="margin-top:.75rem;">Keine Depots vorhanden.</div>
<div class="bc-text" style="margin-top:12px;">Keine Depots vorhanden.</div>
<?php else: ?>
<label class="setup-field muted" style="margin-top:.75rem;">
<span>Auswahl</span>
<label class="setup-field" style="margin-top:12px;">
<span class="bc-text">Depot</span>
<select name="portfolio_id" onchange="this.form.submit()">
<?php foreach ($portfolios as $portfolio): ?>
<option value="<?= e((string) $portfolio['id']) ?>" <?= (string) $selectedPortfolioId === (string) $portfolio['id'] ? 'selected' : '' ?>>
@@ -41,14 +58,14 @@
<?php endif; ?>
</form>
<form class="bc-surface" method="get">
<form class="bc-panel" method="get">
<input type="hidden" name="portfolio_id" value="<?= e((string) $selectedPortfolioId) ?>">
<strong>Aktie</strong>
<div class="bc-field-label">Aktienauswahl</div>
<?php if ($positions === []): ?>
<div class="muted" style="margin-top:.75rem;">Keine Aktien im ausgewaehlten Depot.</div>
<div class="bc-text" style="margin-top:12px;">Keine Aktien im ausgewaehlten Depot.</div>
<?php else: ?>
<label class="setup-field muted" style="margin-top:.75rem;">
<span>Auswahl</span>
<label class="setup-field" style="margin-top:12px;">
<span class="bc-text">Aktie</span>
<select name="instrument_id" data-bc-instrument>
<?php foreach ($positions as $position): ?>
<option value="<?= e((string) $position['instrument_id']) ?>" <?= (string) $selectedInstrumentId === (string) $position['instrument_id'] ? 'selected' : '' ?>>
@@ -60,72 +77,77 @@
<?php endif; ?>
</form>
<form class="bc-surface" method="post">
<form class="bc-panel" method="post">
<input type="hidden" name="action" value="refresh_current_quotes_home">
<input type="hidden" name="portfolio_id" value="<?= e((string) $selectedPortfolioId) ?>">
<strong>Aktuelle Kurse</strong>
<p class="muted" style="margin:.75rem 0 1rem;">Abruf der aktuellen Kurse fuer das gewaehlte Depot.</p>
<button class="cta-button" type="submit" <?= $selectedPortfolioId > 0 ? '' : 'disabled' ?>>Aktuelle Kurse abrufen</button>
<div class="bc-field-label">Marktdaten</div>
<p class="bc-text" style="margin-top:12px;">Aktuelle Kurse fuer das gewaehlte Depot ueber Alpha Vantage abrufen.</p>
<div class="bc-actions" style="margin-top:16px;">
<button class="bc-button bc-button--primary" type="submit" <?= $selectedPortfolioId > 0 ? '' : 'disabled' ?>>Aktuelle Kurse abrufen</button>
</div>
</form>
</div>
<div class="bc-overview-grid" style="margin-top:1rem;">
<div class="bc-overview-grid">
<div class="bc-stat">
<div class="muted">Positionen</div>
<div class="bc-field-label">Positionen</div>
<div class="bc-stat-value"><?= e((string) ($summary['positions'] ?? 0)) ?></div>
<div class="muted" style="margin-top:6px;">Aktien im aktuell gewaehlten Depot</div>
<div class="bc-text" style="margin-top:6px;">Aktien im aktuell gewaehlten Depot</div>
</div>
<div class="bc-stat">
<div class="muted">Investiert</div>
<div class="bc-field-label">Investiert</div>
<div class="bc-stat-value"><?= isset($summary['invested']) && $summary['invested'] !== null ? e(number_format((float) $summary['invested'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
<div class="muted" style="margin-top:6px;">Auf Berichtswahrung umgerechnet</div>
<div class="bc-text" style="margin-top:6px;">In Berichtswahrung bewertet</div>
</div>
<div class="bc-stat">
<div class="muted">Aktueller Wert</div>
<div class="bc-field-label">Aktueller Wert</div>
<div class="bc-stat-value"><?= isset($summary['current']) && $summary['current'] !== null ? e(number_format((float) $summary['current'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
<div class="muted" style="margin-top:6px;">Basierend auf letztem verfuegbarem Kurs</div>
<div class="bc-text" style="margin-top:6px;">Basierend auf dem letzten gespeicherten Kurs</div>
</div>
<div class="bc-stat">
<div class="muted">Performance</div>
<div class="bc-field-label">Performance</div>
<div class="bc-stat-value"><?= isset($summary['gain']) && $summary['gain'] !== null ? e(number_format((float) $summary['gain'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
<div class="muted" style="margin-top:6px;"><?= !empty($summary['best']['instrument_name']) ? 'Top: ' . e((string) $summary['best']['instrument_name']) : 'Noch keine Vergleichsdaten' ?></div>
<div class="bc-text" style="margin-top:6px;"><?= !empty($summary['best']['instrument_name']) ? 'Top-Wert: ' . e((string) $summary['best']['instrument_name']) : 'Noch keine Vergleichsdaten' ?></div>
</div>
</div>
<div class="bc-card-grid" style="margin-top:1rem;">
<div class="bc-surface">
<div class="muted">Bester Wert</div>
<div class="bc-card-grid">
<div class="bc-panel">
<div class="bc-field-label">Bester Wert</div>
<?php if (!empty($summary['best'])): ?>
<div class="bc-stat-value"><?= e((string) $summary['best']['instrument_name']) ?></div>
<div class="bc-pill-soft" style="margin-top:.75rem;"><?= e(number_format((float) ($summary['best']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
<div class="bc-pill-soft" style="margin-top:12px;"><?= e(number_format((float) ($summary['best']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
<?php else: ?>
<div class="muted" style="margin-top:.75rem;">Noch keine Performance verfuegbar.</div>
<div class="bc-text" style="margin-top:12px;">Noch keine Performance verfuegbar.</div>
<?php endif; ?>
</div>
<div class="bc-surface">
<div class="muted">Schwaechster Wert</div>
<div class="bc-panel">
<div class="bc-field-label">Schwaechster Wert</div>
<?php if (!empty($summary['worst'])): ?>
<div class="bc-stat-value"><?= e((string) $summary['worst']['instrument_name']) ?></div>
<div class="bc-pill-soft" style="margin-top:.75rem;"><?= e(number_format((float) ($summary['worst']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
<div class="bc-pill-soft" style="margin-top:12px;"><?= e(number_format((float) ($summary['worst']['gain_percent'] ?? 0), 2, ',', '.')) ?>%</div>
<?php else: ?>
<div class="muted" style="margin-top:.75rem;">Noch keine Performance verfuegbar.</div>
<div class="bc-text" style="margin-top:12px;">Noch keine Performance verfuegbar.</div>
<?php endif; ?>
</div>
<?php foreach (array_slice($positions, 0, 2) as $position): ?>
<div class="bc-stat">
<div class="muted"><?= e((string) $position['instrument_name']) ?></div>
<div class="bc-field-label"><?= e((string) $position['instrument_name']) ?></div>
<div class="bc-stat-value"><?= $position['latest_price'] !== null ? e(number_format((float) $position['latest_price'], 2, ',', '.')) . ' ' . e((string) $position['latest_currency']) : 'n/a' ?></div>
<div class="muted" style="margin-top:6px;"><?= e((string) ($position['latest_quoted_at'] ?: 'kein Kurs')) ?></div>
<div class="bc-text" style="margin-top:6px;"><?= e((string) ($position['latest_quoted_at'] ?: 'kein Kurs')) ?></div>
</div>
<?php endforeach; ?>
</div>
<div class="bc-surface" style="margin-top:1rem;">
<section class="bc-chart-card">
<div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;">
<div>
<strong data-bc-instrument-name><?= e((string) ($selectedInstrument['instrument_name'] ?? 'Keine Aktie ausgewaehlt')) ?></strong>
<div class="bc-field-label">Kursverlauf</div>
<div class="bc-stat-value" data-bc-instrument-name><?= e((string) ($selectedInstrument['instrument_name'] ?? 'Keine Aktie ausgewaehlt')) ?></div>
<?php if ($selectedInstrument): ?>
<div class="muted" data-bc-instrument-meta><?= e((string) ($selectedInstrument['symbol'] ?? '')) ?> · <?= e((string) ($selectedInstrument['isin'] ?? '-')) ?></div>
<div class="bc-text" data-bc-instrument-meta><?= e((string) ($selectedInstrument['symbol'] ?? '')) ?> · <?= e((string) ($selectedInstrument['isin'] ?? '-')) ?></div>
<?php endif; ?>
</div>
<div class="bc-range-list">
@@ -138,41 +160,41 @@
<button type="button" class="bc-range-button" data-range="5y" aria-pressed="false">5 Jahre</button>
</div>
</div>
<div class="muted" data-bc-chart-status style="margin-top:.75rem;">Chartdaten werden geladen...</div>
<div class="bc-stat-value" data-bc-chart-summary style="margin-top:.35rem;">-</div>
<div class="bc-chart-shell" data-bc-chart style="margin-top:1rem;"></div>
</div>
<div class="bc-text" data-bc-chart-status style="margin-top:12px;">Chartdaten werden geladen...</div>
<div class="bc-stat-value" data-bc-chart-summary style="margin-top:6px;">-</div>
<div class="bc-chart-shell" data-bc-chart style="margin-top:18px;"></div>
</section>
<div class="bc-surface" style="margin-top:1rem;">
<strong>Aktien im Depot</strong>
<section class="bc-panel">
<div class="bc-field-label">Aktien im Depot</div>
<?php if ($positions === []): ?>
<div class="muted" style="margin-top:.75rem;">Keine Aktien im ausgewaehlten Depot.</div>
<div class="bc-text" style="margin-top:12px;">Keine Aktien im ausgewaehlten Depot.</div>
<?php else: ?>
<div class="bc-position-list" style="margin-top:1rem;">
<div class="bc-position-list" style="margin-top:16px;">
<?php foreach ($positions as $position): ?>
<?php $gainClass = (($position['gain_report'] ?? 0) >= 0) ? 'is-positive' : 'is-negative'; ?>
<div class="bc-position-row">
<div>
<strong><?= e((string) $position['instrument_name']) ?></strong>
<div class="muted"><?= e((string) ($position['symbol'] ?? '')) ?> · <?= e((string) ($position['isin'] ?? '-')) ?></div>
<div class="bc-text" style="margin-top:4px;"><?= e((string) ($position['symbol'] ?? '')) ?> · <?= e((string) ($position['isin'] ?? '-')) ?></div>
<?php if (!empty($position['market'])): ?>
<div class="bc-pill-soft" style="margin-top:.55rem;"><?= e((string) $position['market']) ?></div>
<div class="bc-pill-soft" style="margin-top:10px;"><?= e((string) $position['market']) ?></div>
<?php endif; ?>
</div>
<div>
<div class="muted">Stueckzahl</div>
<div class="bc-field-label">Stueckzahl</div>
<div><?= e(number_format((float) $position['quantity'], 6, ',', '.')) ?></div>
</div>
<div>
<div class="muted">Kaufpreis</div>
<div class="bc-field-label">Kaufpreis</div>
<div><?= e(number_format((float) $position['purchase_price'], 2, ',', '.')) ?> <?= e((string) $position['purchase_currency']) ?></div>
</div>
<div>
<div class="muted">Letzter Kurs</div>
<div class="bc-field-label">Letzter Kurs</div>
<div><?= $position['latest_price'] !== null ? e(number_format((float) $position['latest_price'], 2, ',', '.')) . ' ' . e((string) $position['latest_currency']) : 'n/a' ?></div>
</div>
<div>
<div class="muted">Performance</div>
<div class="bc-field-label">Performance</div>
<div class="bc-performance <?= e($gainClass) ?>">
<?= isset($position['gain_report']) && $position['gain_report'] !== null ? e(number_format((float) $position['gain_report'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?>
</div>
@@ -181,5 +203,7 @@
<?php endforeach; ?>
</div>
<?php endif; ?>
</section>
</div>
</div>
</div>