This commit is contained in:
oliver committed 2026-10-09 15:01:40 -03:00
commit 1ea3de74f2
10 files changed
+1825

No files matched your search

+246
View File
@@ -0,0 +1,246 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Brandize · BI Dashboard</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="layout">
<!-- ================= Sidebar ================= -->
<aside class="sidebar">
<div class="sidebar-brand">
<div class="brand-mark">B</div>
<div class="brand-text">
<strong>Brandize</strong>
<span>BI Dashboard</span>
</div>
</div>
<nav class="menu">
<!-- Amazon -->
<div class="menu-group" data-group>
<button class="menu-main" type="button" data-toggle aria-expanded="false">
<span class="menu-logo">
<svg viewBox="0 0 48 48" aria-hidden="true">
<rect width="48" height="48" rx="12" fill="#232f3e" />
<text x="24" y="25" text-anchor="middle" font-size="17" font-weight="700"
fill="#ffffff" font-family="Arial, sans-serif">a</text>
<path d="M13 30c5.5 3.6 16.5 3.6 22 0" fill="none" stroke="#ff9900"
stroke-width="3" stroke-linecap="round" />
<path d="M32.5 28.2l4.2 1.6-3.1 3.1z" fill="#ff9900" />
</svg>
</span>
<span class="menu-name">Amazon</span>
<svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div class="submenu">
<a class="submenu-item is-active" href="#" data-view="amazon-abgangsland">
Umsatz je Abgangsland
</a>
<a class="submenu-item" href="#" data-view="amazon-vat-summary">
VAT Summary
</a>
</div>
</div>
<!-- ODOO -->
<div class="menu-group" data-group>
<button class="menu-main" type="button" data-toggle aria-expanded="false">
<span class="menu-logo">
<svg viewBox="0 0 48 48" aria-hidden="true">
<rect width="48" height="48" rx="12" fill="#714B67" />
<text x="24" y="30" text-anchor="middle" font-size="14" font-weight="700"
fill="#ffffff" font-family="Arial, sans-serif">odoo</text>
</svg>
</span>
<span class="menu-name">ODOO</span>
<svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div class="submenu">
<a class="submenu-item" href="#" data-view="odoo-dashboard">
Dashboard
</a>
</div>
</div>
</nav>
</aside>
<!-- ================= Main ================= -->
<div class="main">
<header class="topbar">
<div class="page-title">
<h1 id="view-title">Umsatz je Abgangsland</h1>
<p id="view-subtitle">Amazon · Brutto (inkl. USt)</p>
</div>
<button id="download-btn" class="download" type="button"
title="Daten als CSV herunterladen">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path d="M12 3v10m0 0l-4-4m4 4l4-4M5 17v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>CSV</span>
</button>
</header>
<!-- Shared filter: applies to every dashboard -->
<div class="filterbar" id="filterbar">
<div class="filter-head">
<svg class="filter-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 5h18l-7 8v5l-4 2v-7L3 5Z" fill="none" stroke="currentColor"
stroke-width="2" stroke-linejoin="round" />
</svg>
<span class="filter-title">Filter</span>
<span class="filter-hint">gilt für alle Dashboards</span>
</div>
<div class="filter-fields">
<label class="field">
<span class="field-label">Zeitraum</span>
<div class="period">
<select id="month-select" aria-label="Monat"></select>
<select id="year-select" aria-label="Jahr"></select>
</div>
</label>
<button id="refresh-btn" class="refresh" type="button" title="Neu laden">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path d="M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z"/>
</svg>
</button>
</div>
</div>
<!-- View: Amazon · Umsatz je Abgangsland -->
<main id="view-amazon-abgangsland" class="view">
<section class="kpis" id="kpis"></section>
<section class="panel">
<div class="panel-head">
<h2>Umsatz je Abgangsland</h2>
<div class="legend" id="legend"></div>
</div>
<div class="chart" id="chart"></div>
</section>
<section class="panel">
<div class="panel-head">
<h2>Details</h2>
<span class="muted" id="table-period"></span>
</div>
<div class="table-wrap">
<table id="data-table">
<thead>
<tr>
<th>Bereich</th>
<th>Abgangsland</th>
<th class="num">Brutto (inkl. USt)</th>
<th class="num">Anteil</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</section>
<div class="state" id="state"></div>
</main>
<!-- View: Amazon · VAT Summary -->
<main id="view-amazon-vat-summary" class="view hidden">
<section class="kpis" id="vat-kpis"></section>
<section class="panel">
<div class="panel-head">
<h2>Gross Sales (Total) je Land</h2>
<div class="legend" id="vat-legend"></div>
</div>
<div class="chart" id="vat-chart"></div>
</section>
<section class="panel">
<div class="panel-head">
<h2>Details</h2>
<span class="muted" id="vat-period"></span>
</div>
<div class="table-wrap">
<table id="vat-table">
<thead>
<tr>
<th>Land</th>
<th class="num">Menge</th>
<th class="num">Gross Sales (Total)</th>
<th class="num">Gross Sales (Non-OSS)</th>
<th class="num">VAT to Remit (Non-OSS)</th>
<th class="num">Gross Sales (Excl. B2B)</th>
<th class="num">Intra-community supply – Net sales</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</section>
<div class="state" id="vat-state"></div>
</main>
<!-- View: ODOO · Dashboard (placeholder) -->
<main id="view-odoo-dashboard" class="view hidden">
<section class="panel placeholder">
<div class="placeholder-icon">
<svg viewBox="0 0 48 48" aria-hidden="true">
<rect width="48" height="48" rx="12" fill="#714B67" />
<text x="24" y="30" text-anchor="middle" font-size="14" font-weight="700"
fill="#ffffff" font-family="Arial, sans-serif">odoo</text>
</svg>
</div>
<h2>ODOO Dashboard</h2>
<p class="muted">Dieses Dashboard folgt in Kürze.</p>
</section>
</main>
</div>
</div>
<!-- ================= Auth prompt ================= -->
<div class="auth-overlay hidden" id="auth-overlay">
<form class="auth-card" id="auth-form">
<div class="auth-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<rect x="4" y="10" width="16" height="10" rx="2" fill="none"
stroke="currentColor" stroke-width="2" />
<path d="M8 10V7a4 4 0 0 1 8 0v3" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" />
</svg>
</div>
<h2>Anmeldung erforderlich</h2>
<p class="muted">Der Webhook ist mit Basic Auth geschützt. Bitte Zugangsdaten eingeben.</p>
<label class="auth-field">
<span>Benutzername</span>
<input id="auth-user" type="text" autocomplete="username" required />
</label>
<label class="auth-field">
<span>Passwort</span>
<input id="auth-pass" type="password" autocomplete="current-password" required />
</label>
<p class="auth-error hidden" id="auth-error"></p>
<div class="auth-actions">
<button type="button" class="btn-ghost" id="auth-cancel">Abbrechen</button>
<button type="submit" class="btn-primary">Anmelden</button>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>