247 lines
9.2 KiB
HTML
247 lines
9.2 KiB
HTML
<!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>
|