413 lines
16 KiB
HTML
413 lines
16 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" />
|
||
<!-- PivotTable.js experiment (needs jQuery UI styles) -->
|
||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pivottable@2.23.0/dist/pivot.min.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-rechnungen">
|
||
ODOO Rechnungen pro Monat
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gesamt -->
|
||
<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="#4f46e5" />
|
||
<text x="24" y="32" text-anchor="middle" font-size="24" font-weight="700"
|
||
fill="#ffffff" font-family="Arial, sans-serif">Σ</text>
|
||
</svg>
|
||
</span>
|
||
<span class="menu-name">Gesamt</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="gesamt-rechnungen-pivot">
|
||
Alle Rechnungen pro Monat
|
||
</a>
|
||
<a class="submenu-item" href="#" data-view="schweiz-quartal">
|
||
Quartal Schweiz
|
||
</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="quarter-select" aria-label="Quartal" class="hidden">
|
||
<option value="1">Q1</option>
|
||
<option value="2">Q2</option>
|
||
<option value="3">Q3</option>
|
||
<option value="4">Q4</option>
|
||
</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 · Rechnungen pro Monat -->
|
||
<main id="view-odoo-rechnungen" class="view hidden">
|
||
<section class="kpis" id="odoo-kpis"></section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head">
|
||
<h2>Gesamtpreis brutto je Rechnungsland</h2>
|
||
<div class="legend" id="odoo-legend"></div>
|
||
</div>
|
||
<div class="chart" id="odoo-chart"></div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head">
|
||
<h2>Pivot — Summe Gesamtpreis brutto</h2>
|
||
<div class="panel-head-actions">
|
||
<span class="muted" id="odoo-period"></span>
|
||
<label class="field">
|
||
<span class="field-label">Vorlage</span>
|
||
<select id="odoo-pivot-preset" aria-label="Pivot-Vorlage">
|
||
<option value="standard">Standard</option>
|
||
<option value="zahlart">Zahlart</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="table-filters">
|
||
<label class="field">
|
||
<span class="field-label">Tag</span>
|
||
<input id="odoo-filter-tag" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Bestellnummer</span>
|
||
<input id="odoo-filter-bestellnummer" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Lieferland</span>
|
||
<input id="odoo-filter-lieferland" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Rechnungsnummer</span>
|
||
<input id="odoo-filter-rechnungsnummer" type="text" />
|
||
</label>
|
||
</div>
|
||
<div id="odoo-pivot"></div>
|
||
</section>
|
||
|
||
<div class="state" id="odoo-state"></div>
|
||
</main>
|
||
|
||
<!-- View: Gesamt · Alle Rechnungen pro Monat -->
|
||
<main id="view-gesamt-rechnungen-pivot" class="view hidden">
|
||
<section class="kpis" id="pivot-kpis"></section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head">
|
||
<h2>Pivot — Summe Gesamtpreis brutto</h2>
|
||
<div class="panel-head-actions">
|
||
<span class="muted" id="pivot-period"></span>
|
||
<label class="field">
|
||
<span class="field-label">Vorlage</span>
|
||
<select id="pivot-preset" aria-label="Pivot-Vorlage">
|
||
<option value="standard">Standard</option>
|
||
<option value="rechnungsland">Rechnungsland (Spalten)</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="table-filters">
|
||
<label class="field">
|
||
<span class="field-label">Quelle</span>
|
||
<input id="pivot-filter-quelle" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Tag</span>
|
||
<input id="pivot-filter-tag" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Bestellnummer</span>
|
||
<input id="pivot-filter-bestellnummer" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Lieferland</span>
|
||
<input id="pivot-filter-lieferland" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Rechnungsnummer</span>
|
||
<input id="pivot-filter-rechnungsnummer" type="text" />
|
||
</label>
|
||
</div>
|
||
<div id="pivot"></div>
|
||
</section>
|
||
|
||
<div class="state" id="pivot-state"></div>
|
||
</main>
|
||
|
||
<!-- View: Schweiz · Quartal Schweiz (AMAZON + ODOO, Lieferung in die CH) -->
|
||
<main id="view-schweiz-quartal" class="view hidden">
|
||
<section class="kpis" id="ch-kpis"></section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head">
|
||
<h2>Pivot — Quartal Schweiz (Summe Gesamtpreis brutto)</h2>
|
||
<div class="panel-head-actions">
|
||
<span class="muted" id="ch-period"></span>
|
||
<label class="field">
|
||
<span class="field-label">Vorlage</span>
|
||
<select id="ch-pivot-preset" aria-label="Pivot-Vorlage">
|
||
<option value="standard">Standard</option>
|
||
<option value="rechnungsland">Rechnungsland (Spalten)</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="table-filters">
|
||
<label class="field">
|
||
<span class="field-label">Quelle</span>
|
||
<input id="ch-filter-quelle" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Tag</span>
|
||
<input id="ch-filter-tag" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Bestellnummer</span>
|
||
<input id="ch-filter-bestellnummer" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Lieferland</span>
|
||
<input id="ch-filter-lieferland" type="text" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">Rechnungsnummer</span>
|
||
<input id="ch-filter-rechnungsnummer" type="text" />
|
||
</label>
|
||
</div>
|
||
<div id="ch-pivot"></div>
|
||
</section>
|
||
|
||
<div class="state" id="ch-state"></div>
|
||
</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>
|
||
|
||
<!-- PivotTable.js experiment — requires jQuery + jQuery UI -->
|
||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/pivottable@2.23.0/dist/pivot.min.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|