Verwaltung: Auswertung erst per Klick einblenden, direkt unter den Kisten
Bestseller/Herkunft/Stammkundschaft nahmen bisher immer Platz auf der Seite ein, auch ohne Bestellungen zum Auswerten. Jetzt standardmäßig eingeklappt hinter einem "📊 Auswertung anzeigen"-Knopf direkt unter der Bestellstatus-/Kennzahlen-Kiste — ein Klick blendet alle drei Auswertungs-Kisten sofort an genau dieser Stelle ein (vor der Bestellliste), erneuter Klick klappt sie wieder ein. Mit echtem Klick-Test verifiziert. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
35ddc5cda8
commit
989006b6a6
@@ -137,6 +137,64 @@ const lang: Locale = "de";
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Auswertung (Bestseller/Herkunft/Stammkundschaft) ist standardmäßig eingeklappt und
|
||||||
|
erscheint per Klick sofort hier, direkt unter den beiden Kisten oben — statt immer
|
||||||
|
Platz auf der Seite zu belegen, bevor man überhaupt Bestellungen zum Auswerten hat. */}
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<button type="button" class="btn btn-outline verwaltung-auswertung-toggle" id="verwaltung-auswertung-toggle" aria-expanded="false" aria-controls="verwaltung-auswertung-wrapper">
|
||||||
|
<span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="verwaltung-auswertung-wrapper" hidden>
|
||||||
|
<div class="verwaltung-box" style="--box-color: #e3b23c;">
|
||||||
|
<div class="verwaltung-box-head">
|
||||||
|
<span class="verwaltung-box-icon" aria-hidden="true">🏆</span>
|
||||||
|
<h2>Bestseller je Kategorie</h2>
|
||||||
|
</div>
|
||||||
|
<div class="verwaltung-box-body">
|
||||||
|
<div class="verwaltung-box-empty" id="verwaltung-kat-empty" style="display:none;">
|
||||||
|
<span class="verwaltung-box-empty-icon" aria-hidden="true">🧶</span>
|
||||||
|
<p>Noch keine ausgewerteten Verkäufe.</p>
|
||||||
|
<p class="small">Hier siehst du bald, welche Produkte je Kategorie am besten laufen (stornierte Bestellungen zählen nicht mit).</p>
|
||||||
|
</div>
|
||||||
|
<div class="verwaltung-auswertung-grid" id="verwaltung-kat-grid"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="verwaltung-box" style="--box-color: #6ecb8f;">
|
||||||
|
<div class="verwaltung-box-head">
|
||||||
|
<span class="verwaltung-box-icon" aria-hidden="true">🌍</span>
|
||||||
|
<h2>Herkunft der Bestellungen</h2>
|
||||||
|
</div>
|
||||||
|
<div class="verwaltung-box-body">
|
||||||
|
<div class="verwaltung-box-empty" id="verwaltung-land-empty" style="display:none;">
|
||||||
|
<span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
|
||||||
|
<p>Noch keine Bestellungen.</p>
|
||||||
|
<p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
|
||||||
|
</div>
|
||||||
|
<div class="verwaltung-bar-list" id="verwaltung-land-list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="verwaltung-box" style="--box-color: var(--c-sale);">
|
||||||
|
<div class="verwaltung-box-head">
|
||||||
|
<span class="verwaltung-box-icon" aria-hidden="true">👑</span>
|
||||||
|
<h2>Stammkundschaft</h2>
|
||||||
|
</div>
|
||||||
|
<div class="verwaltung-box-body">
|
||||||
|
<div class="verwaltung-box-empty" id="verwaltung-kunden-empty" style="display:none;">
|
||||||
|
<span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
|
||||||
|
<p>Noch keine wiederkehrende Kundschaft.</p>
|
||||||
|
<p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
|
||||||
|
</div>
|
||||||
|
<div class="verwaltung-bar-list" id="verwaltung-kunden-list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="section-tight">
|
<section class="section-tight">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="verwaltung-box" style="--box-color: var(--c-accent);">
|
<div class="verwaltung-box" style="--box-color: var(--c-accent);">
|
||||||
@@ -188,62 +246,6 @@ const lang: Locale = "de";
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section-tight" id="verwaltung-auswertung-section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="verwaltung-box" style="--box-color: #e3b23c;">
|
|
||||||
<div class="verwaltung-box-head">
|
|
||||||
<span class="verwaltung-box-icon" aria-hidden="true">🏆</span>
|
|
||||||
<h2>Bestseller je Kategorie</h2>
|
|
||||||
</div>
|
|
||||||
<div class="verwaltung-box-body">
|
|
||||||
<div class="verwaltung-box-empty" id="verwaltung-kat-empty" style="display:none;">
|
|
||||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">🧶</span>
|
|
||||||
<p>Noch keine ausgewerteten Verkäufe.</p>
|
|
||||||
<p class="small">Hier siehst du bald, welche Produkte je Kategorie am besten laufen (stornierte Bestellungen zählen nicht mit).</p>
|
|
||||||
</div>
|
|
||||||
<div class="verwaltung-auswertung-grid" id="verwaltung-kat-grid"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section-tight">
|
|
||||||
<div class="container">
|
|
||||||
<div class="verwaltung-box" style="--box-color: #6ecb8f;">
|
|
||||||
<div class="verwaltung-box-head">
|
|
||||||
<span class="verwaltung-box-icon" aria-hidden="true">🌍</span>
|
|
||||||
<h2>Herkunft der Bestellungen</h2>
|
|
||||||
</div>
|
|
||||||
<div class="verwaltung-box-body">
|
|
||||||
<div class="verwaltung-box-empty" id="verwaltung-land-empty" style="display:none;">
|
|
||||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
|
|
||||||
<p>Noch keine Bestellungen.</p>
|
|
||||||
<p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
|
|
||||||
</div>
|
|
||||||
<div class="verwaltung-bar-list" id="verwaltung-land-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section-tight">
|
|
||||||
<div class="container">
|
|
||||||
<div class="verwaltung-box" style="--box-color: var(--c-sale);">
|
|
||||||
<div class="verwaltung-box-head">
|
|
||||||
<span class="verwaltung-box-icon" aria-hidden="true">👑</span>
|
|
||||||
<h2>Stammkundschaft</h2>
|
|
||||||
</div>
|
|
||||||
<div class="verwaltung-box-body">
|
|
||||||
<div class="verwaltung-box-empty" id="verwaltung-kunden-empty" style="display:none;">
|
|
||||||
<span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
|
|
||||||
<p>Noch keine wiederkehrende Kundschaft.</p>
|
|
||||||
<p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
|
|
||||||
</div>
|
|
||||||
<div class="verwaltung-bar-list" id="verwaltung-kunden-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
@@ -724,6 +726,26 @@ const lang: Locale = "de";
|
|||||||
document.getElementById("verwaltung-new-refresh-btn")?.addEventListener("click", ladeUndRendere);
|
document.getElementById("verwaltung-new-refresh-btn")?.addEventListener("click", ladeUndRendere);
|
||||||
document.getElementById("verwaltung-retry-btn")?.addEventListener("click", ladeUndRendere);
|
document.getElementById("verwaltung-retry-btn")?.addEventListener("click", ladeUndRendere);
|
||||||
|
|
||||||
|
// ── Auswertung (Bestseller/Herkunft/Stammkundschaft): standardmäßig eingeklappt, erscheint
|
||||||
|
// per Klick sofort unter der Bestellstatus-/Kennzahlen-Kiste. ──
|
||||||
|
const auswertungToggleBtn = document.getElementById("verwaltung-auswertung-toggle");
|
||||||
|
const auswertungWrapper = document.getElementById("verwaltung-auswertung-wrapper");
|
||||||
|
auswertungToggleBtn?.addEventListener("click", () => {
|
||||||
|
const eingeklappt = auswertungWrapper.hasAttribute("hidden");
|
||||||
|
if (eingeklappt) {
|
||||||
|
auswertungWrapper.removeAttribute("hidden");
|
||||||
|
auswertungToggleBtn.setAttribute("aria-expanded", "true");
|
||||||
|
auswertungToggleBtn.classList.add("is-open");
|
||||||
|
auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung ausblenden <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
|
||||||
|
auswertungWrapper.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
} else {
|
||||||
|
auswertungWrapper.setAttribute("hidden", "");
|
||||||
|
auswertungToggleBtn.setAttribute("aria-expanded", "false");
|
||||||
|
auswertungToggleBtn.classList.remove("is-open");
|
||||||
|
auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// ── CSV-Export: exportiert genau die aktuell sichtbare (gefilterte) Liste — für die
|
// ── CSV-Export: exportiert genau die aktuell sichtbare (gefilterte) Liste — für die
|
||||||
// Buchhaltung/Steuer, komplett clientseitig, keine Serverkosten. ──
|
// Buchhaltung/Steuer, komplett clientseitig, keine Serverkosten. ──
|
||||||
document.getElementById("verwaltung-csv-btn").addEventListener("click", () => {
|
document.getElementById("verwaltung-csv-btn").addEventListener("click", () => {
|
||||||
|
|||||||
@@ -2937,6 +2937,22 @@ a:focus-visible, button:focus-visible {
|
|||||||
.verwaltung-box-empty p { margin: 0; }
|
.verwaltung-box-empty p { margin: 0; }
|
||||||
.verwaltung-box-empty p:first-of-type { color: var(--c-text); font-weight: 600; font-size: 1.02rem; }
|
.verwaltung-box-empty p:first-of-type { color: var(--c-text); font-weight: 600; font-size: 1.02rem; }
|
||||||
|
|
||||||
|
/* Ein-/Ausklapp-Knopf für die Auswertung — steht direkt unter der Bestellstatus-/Kennzahlen-
|
||||||
|
Kiste, die Auswertungs-Kisten selbst bleiben bis zum Klick unsichtbar (siehe [hidden] auf
|
||||||
|
#verwaltung-auswertung-wrapper), damit sie nicht permanent Platz beanspruchen. */
|
||||||
|
.verwaltung-auswertung-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
border-color: color-mix(in srgb, #e3b23c 45%, transparent);
|
||||||
|
color: var(--c-text);
|
||||||
|
}
|
||||||
|
.verwaltung-auswertung-toggle:hover { border-color: #e3b23c; background: color-mix(in srgb, #e3b23c 12%, transparent); }
|
||||||
|
.verwaltung-toggle-chevron { transition: transform 0.2s var(--ease); }
|
||||||
|
.verwaltung-auswertung-toggle.is-open .verwaltung-toggle-chevron { transform: rotate(180deg); }
|
||||||
|
#verwaltung-auswertung-wrapper { margin-top: 1rem; }
|
||||||
|
#verwaltung-auswertung-wrapper[hidden] { display: none; }
|
||||||
|
|
||||||
/* Hero-Kopf: dieselbe "besondere" Formsprache wie die anderen Premium-Karten der Seite
|
/* Hero-Kopf: dieselbe "besondere" Formsprache wie die anderen Premium-Karten der Seite
|
||||||
(wanderndes Verlaufslicht + pulsierender Rand + Funkeln), passend zu einer Seite, die "alles
|
(wanderndes Verlaufslicht + pulsierender Rand + Funkeln), passend zu einer Seite, die "alles
|
||||||
übertrifft" — nur dezenter/edler gehalten, weil es ein Arbeits-Dashboard ist, kein Verkaufs-
|
übertrifft" — nur dezenter/edler gehalten, weil es ein Arbeits-Dashboard ist, kein Verkaufs-
|
||||||
|
|||||||
Reference in New Issue
Block a user