INIT

app.js

@@ -0,0 +1,699 @@
+"use strict";
+
+const API_URL = "https://brandize.app.n8n.cloud/webhook/bi-dashboard";
+const MONTHS = ["JAN", "FEB", "MÄR", "APR", "MAI", "JUN", "JUL", "AUG", "SEP", "OKT", "NOV", "DEZ"];
+const PALETTE = ["#4f46e5", "#0ea5e9", "#f59e0b", "#10b981", "#ec4899", "#8b5cf6", "#ef4444", "#14b8a6"];
+
+const els = {
+  month: document.getElementById("month-select"),
+  year: document.getElementById("year-select"),
+  refresh: document.getElementById("refresh-btn"),
+  download: document.getElementById("download-btn"),
+  // Amazon · Umsatz je Abgangsland
+  kpis: document.getElementById("kpis"),
+  chart: document.getElementById("chart"),
+  legend: document.getElementById("legend"),
+  table: document.querySelector("#data-table tbody"),
+  tablePeriod: document.getElementById("table-period"),
+  state: document.getElementById("state"),
+  // Amazon · VAT Summary
+  vatKpis: document.getElementById("vat-kpis"),
+  vatChart: document.getElementById("vat-chart"),
+  vatLegend: document.getElementById("vat-legend"),
+  vatTable: document.querySelector("#vat-table tbody"),
+  vatPeriod: document.getElementById("vat-period"),
+  vatState: document.getElementById("vat-state"),
+  // Auth
+  authOverlay: document.getElementById("auth-overlay"),
+  authForm: document.getElementById("auth-form"),
+  authUser: document.getElementById("auth-user"),
+  authPass: document.getElementById("auth-pass"),
+  authError: document.getElementById("auth-error"),
+  authCancel: document.getElementById("auth-cancel"),
+};
+
+// State for the currently displayed dashboard and its last loaded data.
+let currentView = "amazon-abgangsland";
+let lastData = null; // { abgangsland, vat }
+
+/* ---------- Auth (HTTP Basic) ---------- */
+
+const AUTH_KEY = "brandize-bi-auth";
+
+function getStoredAuth() {
+  try {
+    const raw = sessionStorage.getItem(AUTH_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+function setStoredAuth(user, pass) {
+  try {
+    sessionStorage.setItem(AUTH_KEY, JSON.stringify({ user, pass }));
+  } catch {
+    /* storage unavailable (e.g. file://) — keep in memory only */
+  }
+}
+
+function clearStoredAuth() {
+  try {
+    sessionStorage.removeItem(AUTH_KEY);
+  } catch {
+    /* ignore */
+  }
+}
+
+let auth = getStoredAuth();
+
+function base64(value) {
+  const bytes = new TextEncoder().encode(value);
+  let binary = "";
+  bytes.forEach((byte) => { binary += String.fromCharCode(byte); });
+  return btoa(binary);
+}
+
+function authHeader() {
+  return auth ? `Basic ${base64(`${auth.user}:${auth.pass}`)}` : null;
+}
+
+function showAuth(message) {
+  els.authError.textContent = message || "";
+  els.authError.classList.toggle("hidden", !message);
+  els.authOverlay.classList.remove("hidden");
+  els.authUser.focus();
+}
+
+function hideAuth() {
+  els.authOverlay.classList.add("hidden");
+}
+
+/* ---------- Period selector ---------- */
+
+function lastMonth() {
+  const now = new Date();
+  let year = now.getFullYear();
+  let month = now.getMonth() - 1; // 0-based, previous month
+  if (month < 0) {
+    month = 11;
+    year -= 1;
+  }
+  return { year, month };
+}
+
+function buildPeriodSelectors() {
+  const currentYear = new Date().getFullYear();
+  const { year: defYear, month: defMonth } = lastMonth();
+
+  MONTHS.forEach((label, index) => {
+    const opt = document.createElement("option");
+    opt.value = String(index);
+    opt.textContent = label;
+    els.month.appendChild(opt);
+  });
+
+  for (let y = currentYear - 2; y <= currentYear; y++) {
+    const opt = document.createElement("option");
+    opt.value = String(y);
+    opt.textContent = String(y);
+    els.year.appendChild(opt);
+  }
+
+  els.month.value = String(defMonth);
+  els.year.value = String(defYear);
+}
+
+function selectedPeriod() {
+  const month = MONTHS[Number(els.month.value)];
+  const year = els.year.value;
+  return `${year}-${month}`;
+}
+
+/* ---------- Formatting ---------- */
+
+function parseEuro(value) {
+  if (value == null) return 0;
+  const cleaned = String(value).replace(/[^\d.,-]/g, "").replace(/\./g, "").replace(",", ".");
+  const num = parseFloat(cleaned);
+  return Number.isFinite(num) ? num : 0;
+}
+
+function parseQuantity(value) {
+  if (value == null) return 0;
+  const digits = String(value).replace(/[^\d]/g, "");
+  return digits ? parseInt(digits, 10) : 0;
+}
+
+function formatEuro(value) {
+  return value.toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
+}
+
+function formatPercent(value) {
+  return value.toLocaleString("de-DE", { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + " %";
+}
+
+function formatQuantity(value) {
+  return value.toLocaleString("de-DE");
+}
+
+/* ---------- Data ---------- */
+
+function extractArray(payload, key) {
+  if (!payload || typeof payload !== "object") return [];
+  if (Array.isArray(payload[key])) return payload[key];
+  const match = Object.keys(payload).find((k) => k.toLowerCase() === key.toLowerCase());
+  return match && Array.isArray(payload[match]) ? payload[match] : [];
+}
+
+function normalizeAbgangsland(rows) {
+  const countries = [];
+  let total = null;
+
+  for (const row of rows) {
+    const bereich = row["Bereich"] ?? "";
+    const land = row["Abgangsland"] ?? "";
+    const brutto = parseEuro(row["Brutto (inkl. USt)"]);
+
+    if (bereich === "Gesamt" || land === "") {
+      total = (total || 0) + brutto;
+    } else {
+      countries.push({ bereich, land, brutto });
+    }
+  }
+
+  countries.sort((a, b) => b.brutto - a.brutto);
+  const sum = total != null ? total : countries.reduce((acc, c) => acc + c.brutto, 0);
+  return { countries, total: sum };
+}
+
+function normalizeVat(rows) {
+  const countries = rows.map((row) => ({
+    code: row["Country Code"] ?? "",
+    land: row["Land"] ?? "",
+    quantity: parseQuantity(row["Quantity"]),
+    grossTotal: parseEuro(row["Gross Sales (Total)"]),
+    grossNonOss: parseEuro(row["Gross Sales (Non-OSS)"]),
+    vatToRemit: parseEuro(row["VAT to Remit (Non-OSS)"]),
+    grossExclB2b: parseEuro(row["Gross Sales (Excl. B2B)"]),
+    intraSupply: parseEuro(row["Intra-community supply – Net sales"]),
+  }));
+
+  countries.sort((a, b) => b.grossTotal - a.grossTotal);
+
+  const totals = countries.reduce(
+    (acc, c) => {
+      acc.quantity += c.quantity;
+      acc.grossTotal += c.grossTotal;
+      acc.grossNonOss += c.grossNonOss;
+      acc.vatToRemit += c.vatToRemit;
+      acc.grossExclB2b += c.grossExclB2b;
+      acc.intraSupply += c.intraSupply;
+      return acc;
+    },
+    { quantity: 0, grossTotal: 0, grossNonOss: 0, vatToRemit: 0, grossExclB2b: 0, intraSupply: 0 }
+  );
+
+  return { countries, totals };
+}
+
+/* ---------- Rendering: Umsatz je Abgangsland ---------- */
+
+function colorFor(bereich, map) {
+  if (!map.has(bereich)) map.set(bereich, PALETTE[map.size % PALETTE.length]);
+  return map.get(bereich);
+}
+
+function renderAbgangslandKpis(data) {
+  const { countries, total } = data;
+  const top = countries[0];
+  const avg = countries.length ? total / countries.length : 0;
+
+  els.kpis.innerHTML = `
+    <div class="kpi primary">
+      <div class="kpi-label">Gesamtumsatz</div>
+      <div class="kpi-value">${formatEuro(total)}</div>
+      <div class="kpi-sub">Brutto inkl. USt</div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-label">Abgangsländer</div>
+      <div class="kpi-value">${countries.length}</div>
+      <div class="kpi-sub">mit Umsatz im Zeitraum</div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-label">Stärkstes Land</div>
+      <div class="kpi-value">${top ? top.land : "–"}</div>
+      <div class="kpi-sub">${top ? formatEuro(top.brutto) : "keine Daten"}</div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-label">Ø je Land</div>
+      <div class="kpi-value">${formatEuro(avg)}</div>
+      <div class="kpi-sub">Durchschnitt</div>
+    </div>`;
+}
+
+function renderAbgangslandChart(data) {
+  const { countries, total } = data;
+  const colorMap = new Map();
+  const max = countries.reduce((m, c) => Math.max(m, c.brutto), 0) || 1;
+
+  els.chart.innerHTML = "";
+  els.legend.innerHTML = "";
+
+  if (!countries.length) {
+    els.chart.innerHTML = '<p class="muted">Keine Daten für diesen Zeitraum.</p>';
+    return;
+  }
+
+  countries.forEach((c) => {
+    const color = colorFor(c.bereich, colorMap);
+    const pct = (c.brutto / max) * 100;
+    const share = total ? (c.brutto / total) * 100 : 0;
+
+    const row = document.createElement("div");
+    row.className = "bar-row";
+    row.innerHTML = `
+      <div class="bar-country">${c.land}</div>
+      <div class="bar-track">
+        <div class="bar-fill" style="background:${color}"></div>
+      </div>
+      <div class="bar-value">${formatEuro(c.brutto)} · ${formatPercent(share)}</div>`;
+    els.chart.appendChild(row);
+
+    const fill = row.querySelector(".bar-fill");
+    // Force a reflow so the width transition animates from 0 to the target.
+    fill.getBoundingClientRect();
+    fill.style.width = Math.max(pct, 6) + "%";
+    fill.classList.add("ready");
+  });
+
+  colorMap.forEach((color, bereich) => {
+    const item = document.createElement("div");
+    item.className = "legend-item";
+    item.innerHTML = `<span class="legend-dot" style="background:${color}"></span>${bereich}`;
+    els.legend.appendChild(item);
+  });
+}
+
+function renderAbgangslandTable(data) {
+  const { countries, total } = data;
+  els.table.innerHTML = "";
+
+  countries.forEach((c) => {
+    const share = total ? (c.brutto / total) * 100 : 0;
+    const tr = document.createElement("tr");
+    tr.innerHTML = `
+      <td><span class="pill">${c.bereich}</span></td>
+      <td>${c.land}</td>
+      <td class="num">${formatEuro(c.brutto)}</td>
+      <td class="num">
+        <span class="share">
+          <span class="share-bar"><i style="width:${share}%"></i></span>
+          ${formatPercent(share)}
+        </span>
+      </td>`;
+    els.table.appendChild(tr);
+  });
+
+  const tr = document.createElement("tr");
+  tr.className = "total";
+  tr.innerHTML = `
+    <td>Gesamt</td>
+    <td></td>
+    <td class="num">${formatEuro(total)}</td>
+    <td class="num">100,0 %</td>`;
+  els.table.appendChild(tr);
+}
+
+function renderAbgangsland(data) {
+  renderAbgangslandKpis(data);
+  renderAbgangslandChart(data);
+  renderAbgangslandTable(data);
+}
+
+/* ---------- Rendering: VAT Summary ---------- */
+
+function renderVatKpis(data) {
+  const { countries, totals } = data;
+
+  els.vatKpis.innerHTML = `
+    <div class="kpi primary">
+      <div class="kpi-label">Gross Sales (Total)</div>
+      <div class="kpi-value">${formatEuro(totals.grossTotal)}</div>
+      <div class="kpi-sub">Summe aller Länder</div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-label">VAT to Remit (Non-OSS)</div>
+      <div class="kpi-value">${formatEuro(totals.vatToRemit)}</div>
+      <div class="kpi-sub">abzuführende USt</div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-label">Länder</div>
+      <div class="kpi-value">${countries.length}</div>
+      <div class="kpi-sub">mit Umsatz im Zeitraum</div>
+    </div>
+    <div class="kpi">
+      <div class="kpi-label">Menge</div>
+      <div class="kpi-value">${formatQuantity(totals.quantity)}</div>
+      <div class="kpi-sub">Artikel gesamt</div>
+    </div>`;
+}
+
+function renderVatChart(data) {
+  const { countries, totals } = data;
+  const max = countries.reduce((m, c) => Math.max(m, c.grossTotal), 0) || 1;
+
+  els.vatChart.innerHTML = "";
+  els.vatLegend.innerHTML = "";
+
+  if (!countries.length) {
+    els.vatChart.innerHTML = '<p class="muted">Keine Daten für diesen Zeitraum.</p>';
+    return;
+  }
+
+  countries.forEach((c) => {
+    const pct = (c.grossTotal / max) * 100;
+    const share = totals.grossTotal ? (c.grossTotal / totals.grossTotal) * 100 : 0;
+
+    const row = document.createElement("div");
+    row.className = "bar-row";
+    row.innerHTML = `
+      <div class="bar-country">${c.code}</div>
+      <div class="bar-track">
+        <div class="bar-fill" style="background:var(--accent)"></div>
+      </div>
+      <div class="bar-value">${formatEuro(c.grossTotal)} · ${formatPercent(share)}</div>`;
+    els.vatChart.appendChild(row);
+
+    const fill = row.querySelector(".bar-fill");
+    fill.getBoundingClientRect();
+    fill.style.width = Math.max(pct, 6) + "%";
+    fill.classList.add("ready");
+  });
+}
+
+function renderVatTable(data) {
+  const { countries, totals } = data;
+  els.vatTable.innerHTML = "";
+
+  countries.forEach((c) => {
+    const tr = document.createElement("tr");
+    tr.innerHTML = `
+      <td><span class="pill">${c.code}</span> ${c.land}</td>
+      <td class="num">${formatQuantity(c.quantity)}</td>
+      <td class="num">${formatEuro(c.grossTotal)}</td>
+      <td class="num">${formatEuro(c.grossNonOss)}</td>
+      <td class="num">${formatEuro(c.vatToRemit)}</td>
+      <td class="num">${formatEuro(c.grossExclB2b)}</td>
+      <td class="num">${formatEuro(c.intraSupply)}</td>`;
+    els.vatTable.appendChild(tr);
+  });
+
+  const tr = document.createElement("tr");
+  tr.className = "total";
+  tr.innerHTML = `
+    <td>Gesamt</td>
+    <td class="num">${formatQuantity(totals.quantity)}</td>
+    <td class="num">${formatEuro(totals.grossTotal)}</td>
+    <td class="num">${formatEuro(totals.grossNonOss)}</td>
+    <td class="num">${formatEuro(totals.vatToRemit)}</td>
+    <td class="num">${formatEuro(totals.grossExclB2b)}</td>
+    <td class="num">${formatEuro(totals.intraSupply)}</td>`;
+  els.vatTable.appendChild(tr);
+}
+
+function renderVat(data) {
+  renderVatKpis(data);
+  renderVatChart(data);
+  renderVatTable(data);
+}
+
+/* ---------- Active view helpers ---------- */
+
+function viewEls() {
+  if (currentView === "amazon-abgangsland") {
+    return { kpis: els.kpis, chart: els.chart, legend: els.legend, table: els.table, state: els.state };
+  }
+  if (currentView === "amazon-vat-summary") {
+    return { kpis: els.vatKpis, chart: els.vatChart, legend: els.vatLegend, table: els.vatTable, state: els.vatState };
+  }
+  return null;
+}
+
+function renderActiveView() {
+  if (!lastData) return;
+  if (currentView === "amazon-abgangsland") {
+    renderAbgangsland(lastData.abgangsland);
+  } else if (currentView === "amazon-vat-summary") {
+    renderVat(lastData.vat);
+  }
+}
+
+/* ---------- Loading ---------- */
+
+function skeletonKpis() {
+  return Array.from({ length: 4 })
+    .map(() => '<div class="kpi"><div class="skeleton" style="height:60px"></div></div>')
+    .join("");
+}
+
+function skeletonBars() {
+  return Array.from({ length: 5 }).map(() => '<div class="skeleton"></div>').join("");
+}
+
+function showSkeleton() {
+  const v = viewEls();
+  if (!v) return;
+  v.state.classList.add("hidden");
+  v.kpis.innerHTML = skeletonKpis();
+  v.chart.innerHTML = skeletonBars();
+  v.legend.innerHTML = "";
+  v.table.innerHTML = "";
+}
+
+function showError(message) {
+  const v = viewEls();
+  if (!v) return;
+  v.state.className = "state error";
+  v.state.textContent = message;
+}
+
+function clearViews() {
+  const v = viewEls();
+  if (!v) return;
+  v.kpis.innerHTML = "";
+  v.chart.innerHTML = "";
+  v.legend.innerHTML = "";
+  v.table.innerHTML = "";
+}
+
+async function load() {
+  const period = selectedPeriod();
+  els.tablePeriod.textContent = period;
+  els.vatPeriod.textContent = period;
+  els.refresh.classList.add("spinning");
+  showSkeleton();
+
+  try {
+    const headers = { Accept: "application/json" };
+    const authorization = authHeader();
+    if (authorization) headers.Authorization = authorization;
+
+    const response = await fetch(`${API_URL}?month=${encodeURIComponent(period)}`, { headers });
+
+    // The webhook is protected with Basic Auth: ask for credentials when needed.
+    if (response.status === 401) {
+      lastData = null;
+      clearStoredAuth();
+      auth = null;
+      clearViews();
+      const v = viewEls();
+      if (v) v.state.className = "state hidden";
+      showAuth("Bitte Zugangsdaten eingeben.");
+      return;
+    }
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    lastData = {
+      abgangsland: normalizeAbgangsland(extractArray(payload, "Summe je Abgangsland")),
+      vat: normalizeVat(extractArray(payload, "VAT Summary")),
+    };
+
+    renderActiveView();
+
+    const v = viewEls();
+    if (v) {
+      v.state.className = "state hidden";
+      v.state.textContent = "";
+    }
+  } catch (error) {
+    lastData = null;
+    clearViews();
+    showError(`Daten konnten nicht geladen werden: ${error.message}`);
+  } finally {
+    els.refresh.classList.remove("spinning");
+    updateDownloadState();
+  }
+}
+
+/* ---------- CSV export ---------- */
+
+function csvEscape(value) {
+  return `"${String(value ?? "").replace(/"/g, '""')}"`;
+}
+
+function buildAbgangslandCsv(data) {
+  const lines = [["Bereich", "Abgangsland", "Brutto (inkl. USt)", "Anteil"].map(csvEscape).join(";")];
+
+  data.countries.forEach((c) => {
+    const share = data.total ? (c.brutto / data.total) * 100 : 0;
+    lines.push([c.bereich, c.land, formatEuro(c.brutto), formatPercent(share)].map(csvEscape).join(";"));
+  });
+
+  lines.push(["Gesamt", "", formatEuro(data.total), "100,0 %"].map(csvEscape).join(";"));
+  return lines.join("\r\n");
+}
+
+function buildVatCsv(data) {
+  const header = [
+    "Country Code", "Land", "Quantity", "Gross Sales (Total)", "Gross Sales (Non-OSS)",
+    "VAT to Remit (Non-OSS)", "Gross Sales (Excl. B2B)", "Intra-community supply – Net sales",
+  ];
+  const lines = [header.map(csvEscape).join(";")];
+
+  data.countries.forEach((c) => {
+    lines.push([
+      c.code, c.land, formatQuantity(c.quantity), formatEuro(c.grossTotal), formatEuro(c.grossNonOss),
+      formatEuro(c.vatToRemit), formatEuro(c.grossExclB2b), formatEuro(c.intraSupply),
+    ].map(csvEscape).join(";"));
+  });
+
+  const t = data.totals;
+  lines.push([
+    "Gesamt", "", formatQuantity(t.quantity), formatEuro(t.grossTotal), formatEuro(t.grossNonOss),
+    formatEuro(t.vatToRemit), formatEuro(t.grossExclB2b), formatEuro(t.intraSupply),
+  ].map(csvEscape).join(";"));
+
+  return lines.join("\r\n");
+}
+
+function downloadCsv() {
+  if (!lastData) return;
+
+  const period = selectedPeriod();
+  let csv;
+  let filename;
+
+  if (currentView === "amazon-abgangsland") {
+    csv = buildAbgangslandCsv(lastData.abgangsland);
+    filename = `umsatz-je-abgangsland_${period}.csv`;
+  } else if (currentView === "amazon-vat-summary") {
+    csv = buildVatCsv(lastData.vat);
+    filename = `vat-summary_${period}.csv`;
+  } else {
+    return;
+  }
+
+  // Prepend a BOM so Excel detects UTF-8 (umlauts in "EU-Marktplätze").
+  const blob = new Blob(["\uFEFF" + csv + "\r\n"], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}
+
+function updateDownloadState() {
+  const supported = currentView === "amazon-abgangsland" || currentView === "amazon-vat-summary";
+  els.download.disabled = !(lastData && supported);
+}
+
+/* ---------- Navigation ---------- */
+
+const VIEWS = {
+  "amazon-abgangsland": {
+    title: "Umsatz je Abgangsland",
+    subtitle: "Amazon · Brutto (inkl. USt)",
+  },
+  "amazon-vat-summary": {
+    title: "VAT Summary",
+    subtitle: "Amazon · USt-Übersicht je Land",
+  },
+  "odoo-dashboard": {
+    title: "ODOO Dashboard",
+    subtitle: "ODOO",
+  },
+};
+
+function setupMenu() {
+  // Main menu items toggle their submenu (all collapsed on load).
+  document.querySelectorAll("[data-toggle]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const group = button.closest("[data-group]");
+      const open = group.classList.toggle("open");
+      button.setAttribute("aria-expanded", String(open));
+    });
+  });
+
+  // Submenu items switch the visible view.
+  document.querySelectorAll(".submenu-item").forEach((item) => {
+    item.addEventListener("click", (event) => {
+      event.preventDefault();
+      showView(item.dataset.view);
+    });
+  });
+}
+
+function showView(name) {
+  const meta = VIEWS[name];
+  if (!meta) return;
+
+  document.querySelectorAll(".view").forEach((view) => view.classList.add("hidden"));
+  document.getElementById(`view-${name}`).classList.remove("hidden");
+
+  document.querySelectorAll(".submenu-item").forEach((item) => {
+    item.classList.toggle("is-active", item.dataset.view === name);
+  });
+
+  document.getElementById("view-title").textContent = meta.title;
+  document.getElementById("view-subtitle").textContent = meta.subtitle;
+
+  currentView = name;
+  renderActiveView();
+  updateDownloadState();
+}
+
+/* ---------- Init ---------- */
+
+function setupAuth() {
+  els.authForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const user = els.authUser.value.trim();
+    const pass = els.authPass.value;
+    if (!user) return;
+
+    auth = { user, pass };
+    setStoredAuth(user, pass);
+    hideAuth();
+    load();
+  });
+
+  els.authCancel.addEventListener("click", () => {
+    hideAuth();
+    showError("Anmeldung abgebrochen. Bitte erneut versuchen.");
+  });
+}
+
+buildPeriodSelectors();
+setupMenu();
+setupAuth();
+els.month.addEventListener("change", load);
+els.year.addEventListener("change", load);
+els.refresh.addEventListener("click", load);
+els.download.addEventListener("click", downloadCsv);
+load();