Verwaltung: Aufgabenlisten abhaken und Postfach

Schritt 3 von 4 zu den zwei Wuenschen vom 22.08.2026. Die Datenbank und
die Server-Routen standen schon; das hier ist die Seite, auf der ICH
arbeite. Was hier passiert, sieht der Kunde unmittelbar in seinem Portal
(Schritt 4).

ZWEI NEUE REITER

"Projekte" -- bisher gab es Projekte nur als Zahl neben dem Kunden
("3 Proj."), man konnte kein einzelnes oeffnen. Man denkt aber in
Projekten, nicht in Kunden. Neuer Endpunkt projekteListe liefert die
flache Liste samt Aufgabenzahlen; die einzeln nachzufragen haette bei
zwanzig Projekten einundzwanzig Anfragen bedeutet.

"Postfach" -- mit Abzeichen fuer Ungelesenes. Steht nichts an, ist das
Abzeichen GANZ weg statt eine 0 zu zeigen: Eine Null, die man taeglich
sieht, wird zu Rauschen, und irgendwann uebersieht man auch die 3.

Die Reiterumschaltung war vorher ein Ja/Nein zwischen zwei Ansichten. Mit
vier Reitern haette jede neue Ansicht eine weitere "hidden = ..."-Zeile
gebraucht -- und beim naechsten Reiter vergisst man eine, dann liegen zwei
Ansichten uebereinander. Jetzt eine Zuordnung Reiter -> Kasten, die sich
selbst aufraeumt.

AUFGABENLISTE

Vier Abschnitte in den vier Prozessfarben -- dieselben wie im Portal und
auf der Ablaufseite. Das ist der Punkt: Eine Farbe bedeutet ueberall
dasselbe, sonst waere sie Deko.

Ein Klick aufs Kaestchen schaltet weiter: offen -> in Arbeit -> erledigt.
Drei Zustaende ueber einen Knopf statt eines Auswahlfeldes -- beim
Abarbeiten einer Liste zaehlt jeder gesparte Klick.

Punkte, die auf den KUNDEN warten, sind golden hinterlegt und tragen eine
Marke. Ohne diese Unterscheidung liest man die Liste als reinen
Fortschrittsbericht und uebersieht, dass man selbst gar nicht am Zug ist.
Der goldene Grund verschwindet, sobald der Punkt erledigt ist -- er
braucht dann keine Aufmerksamkeit mehr.

Abhaken faerbt die Zeile sofort um, ohne auf den Server zu warten. Bei
zehn Punkten hintereinander waere ein Neuaufbau nach jedem Klick zaeh, und
man verliert die Stelle. Geht es schief, wird die Liste neu geholt und der
Zustand ist wieder ehrlich.

POSTFACH

Links Verlaeufe, rechts das Gespraech. Nicht aus Nachahmung, sondern weil
man ein Gespraech abarbeitet und nicht eine Zeile: Man will sehen, was
vorher besprochen wurde, waehrend man antwortet. Kunde links, eigene
Nachrichten rechts -- man erkennt den Absender an der Seite, bevor man den
Namen liest.

Der Schalter "Nur interne Notiz" faerbt das ganze Schreibfeld um. Ein
Haekchen allein uebersieht man, und eine interne Bemerkung, die beim
Kunden landet, ist der peinlichste Fehler, den dieses System machen kann.
Interne Notizen im Verlauf sind gestrichelt umrandet und golden -- sie
duerfen nicht wie etwas Gesendetes aussehen.

Strg+Enter sendet, Enter allein nicht: In einem mehrzeiligen Feld will man
Absaetze machen koennen, ohne dass die halbe Nachricht rausgeht.

EIN FEHLER, DEN DIE TESTS NICHT GEFUNDEN HABEN

Der erste Lauf meldete 37 von 37 gruen -- und jede Aufgabenzeile war
sichtbar falsch herum gebaut: Kaestchen, dann die kleinen Knoepfe, Titel
ganz rechts. Aufgefallen ist es erst am Screenshot.

Ursache: Das Raster platziert zuerst alle Elemente mit FESTGELEGTER Zeile
und erst danach die freien. Kaestchen und Knopfgruppe hatten beide
"grid-row: 1 / span 2" und wurden deshalb zusammen nach vorne gesetzt; der
Titel landete als letzter in der dritten Spalte. Jetzt bekommt jedes Kind
Zeile UND Spalte ausdruecklich.

Die eigentliche Lehre steckt im Test: Alle 37 Pruefungen betrafen
Bestandteile (Farben, Anzahl, Durchgestrichenes), keine einzige die
ANORDNUNG. Wer eine Anordnung baut, muss die Anordnung pruefen. Drei neue
Pruefungen vergleichen jetzt die tatsaechlichen Bildschirmpositionen --
und sie wurden gegengeprueft: Mit dem alten Zustand schlagen sie fehl,
mit dem neuen nicht. Ein Test, der nie fehlschlaegt, ist wertlos.

GEPRUEFT: 43 Pruefungen, Computer und Handy, alle bestanden. Darunter:
alle Touch-Ziele mindestens 24 px, interne Notiz sieht anders aus als eine
gesendete, Verlauf springt ans Ende, keine Fehler im Protokoll.

Versionsstempel und Cache-Name auf v4.

Co-Authored-By: Claude Opus 5 <[email protected]>

pruef-verwaltung.mjs

@@ -0,0 +1,256 @@
+/* Prüft die neuen Bereiche der Verwaltung: Projekte mit Aufgabenliste
+   und das Postfach. Wieder mit abgefangenen Netzanfragen, aber mit
+   Daten, die den heiklen Faellen entsprechen:
+
+     - ein Punkt, der auf den KUNDEN wartet (muss auffallen)
+     - ein Punkt "nicht enthalten" (muss als solcher erkennbar sein)
+     - eine INTERNE Notiz im Postfach (darf nicht wie eine gesendete
+       Nachricht aussehen)
+*/
+import { chromium } from "playwright";
+import { createServer } from "node:http";
+import { readFileSync, existsSync } from "node:fs";
+import { join, extname } from "node:path";
+
+const W = process.cwd();
+const T = { ".html": "text/html", ".css": "text/css", ".js": "text/javascript",
+  ".png": "image/png", ".jpg": "image/jpeg", ".svg": "image/svg+xml",
+  ".webp": "image/webp", ".ico": "image/x-icon", ".json": "application/json" };
+const srv = createServer((q, r) => {
+  const p = join(W, decodeURIComponent(q.url.split("?")[0]));
+  if (existsSync(p) && !p.endsWith("/")) {
+    r.writeHead(200, { "content-type": T[extname(p)] || "text/plain" });
+    return r.end(readFileSync(p));
+  }
+  r.writeHead(404).end("");
+});
+await new Promise((r) => srv.listen(4325, r));
+
+const PROJEKT = {
+  id: "p1", nummer: "P-0001", titel: "Website für Musterbau", paket: "website",
+  status: "design", kunde_id: "k1", kunde_name: "Anna Muster", kunde_firma: "Musterbau",
+  preis_cent: 180000, waehrung: "EUR", richttermin: null, archiviert: 0,
+  anzahlung_bezahlt: 1, rest_bezahlt: 0, erstellt_am: new Date().toISOString(),
+  aufg_gesamt: 6, aufg_erledigt: 2, aufg_kunde: 2, ungelesen: 1,
+};
+
+const AUFGABEN = [
+  { id: "a1", titel: "Briefing-Gespräch führen", beschreibung: "Ziel und Umfang klären.",
+    kategorie: "start", status: "erledigt", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 10 },
+  { id: "a2", titel: "Texte und Bilder zusammenstellen", beschreibung: "Lieber früh als vollständig.",
+    kategorie: "start", status: "offen", wer_dran: "kunde", nicht_enthalten: 0, hinweis: null, reihenfolge: 20 },
+  { id: "a3", titel: "Entwurf der Startseite", beschreibung: null,
+    kategorie: "gestaltung", status: "erledigt", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 110 },
+  { id: "a4", titel: "Entwurf ansehen und Rückmeldung geben", beschreibung: null,
+    kategorie: "gestaltung", status: "offen", wer_dran: "kunde", nicht_enthalten: 0, hinweis: null, reihenfolge: 130 },
+  { id: "a5", titel: "Alle Unterseiten bauen", beschreibung: null,
+    kategorie: "umsetzung", status: "in_arbeit", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 210 },
+  { id: "a6", titel: "Mehrsprachigkeit", beschreibung: null,
+    kategorie: "umsetzung", status: "offen", wer_dran: "dogfather", nicht_enthalten: 1,
+    hinweis: "Nicht im Paket enthalten — auf Wunsch als Zusatz.", reihenfolge: 260 },
+  { id: "a7", titel: "Seite live schalten", beschreibung: null,
+    kategorie: "abschluss", status: "offen", wer_dran: "dogfather", nicht_enthalten: 0, hinweis: null, reihenfolge: 860 },
+];
+
+const FORTSCHRITT = {
+  gesamt: 6, erledigt: 2, inArbeit: 1, beimKunden: 2, prozent: 33,
+  jeKategorie: {
+    start: { gesamt: 2, erledigt: 1, inArbeit: 0 },
+    gestaltung: { gesamt: 2, erledigt: 1, inArbeit: 0 },
+    umsetzung: { gesamt: 1, erledigt: 0, inArbeit: 1 },
+    abschluss: { gesamt: 1, erledigt: 0, inArbeit: 0 },
+  },
+};
+
+const VERLAUF = [
+  { id: "n1", autor: "kunde", text: "Hallo! Können wir das Logo noch etwas grösser machen?",
+    intern: 0, projekt_titel: null, erstellt_am: new Date(Date.now() - 7200000).toISOString() },
+  { id: "n2", autor: "dogfather", text: "Klar, mache ich heute noch.",
+    intern: 0, projekt_titel: "Website für Musterbau", erstellt_am: new Date(Date.now() - 3600000).toISOString() },
+  { id: "n3", autor: "dogfather", text: "Nicht vergessen: Rechnung erst nach Abnahme.",
+    intern: 1, projekt_titel: null, erstellt_am: new Date(Date.now() - 1800000).toISOString() },
+];
+
+const ergebnisse = [];
+function pruefe(name, ok, zusatz) {
+  ergebnisse.push({ name, ok });
+  console.log((ok ? "  ok   " : "  FEHL ") + name + (zusatz ? "  -> " + zusatz : ""));
+}
+
+const browser = await chromium.launch();
+
+for (const [wo, breite, hoehe] of [["Computer", 1440, 950], ["Handy", 390, 844]]) {
+  const seite = await browser.newPage({ viewport: { width: breite, height: hoehe } });
+  const fehlerImProtokoll = [];
+  seite.on("pageerror", (e) => fehlerImProtokoll.push(e.message));
+
+  // NUR die API abfangen. Ein Muster, das den ganzen Ordner /webdesign
+  // umfasst, trifft auch die Seite SELBST -- dann bekommt der Browser
+  // statt der HTML-Datei ein JSON serviert. Genau das ist beim ersten
+  // Lauf passiert: Die Seite blieb leer, und der Test meldete
+  // "Abzeichen fehlt" statt "Seite gar nicht geladen".
+  // (Und der Hinweis steht in Zeilenkommentaren, weil das Glob-Muster
+  //  ein Sternchen-Schrägstrich enthält und einen Blockkommentar
+  //  vorzeitig beenden würde -- auch das ist hier schon passiert.)
+  await seite.route("**/webdesign/admin/**", (route) => {
+    const u = route.request().url();
+    if (u.includes("/admin/projekte/p1/aufgaben")) {
+      return route.fulfill({ json: { ok: true, projekt: PROJEKT, aufgaben: AUFGABEN, fortschritt: FORTSCHRITT } });
+    }
+    if (u.includes("/admin/projekte")) return route.fulfill({ json: { ok: true, projekte: [PROJEKT] } });
+    if (u.includes("/admin/postfach-zaehler")) return route.fulfill({ json: { ok: true, ungelesen: 1 } });
+    if (u.includes("/admin/postfach/k1")) {
+      return route.fulfill({ json: { ok: true,
+        kunde: { id: "k1", name: "Anna Muster", email: "[email protected]", sprache: "de" },
+        nachrichten: VERLAUF, projekte: [{ id: "p1", titel: "Website für Musterbau" }] } });
+    }
+    if (u.includes("/admin/postfach")) {
+      return route.fulfill({ json: { ok: true, ungelesen: 1, verlaeufe: [{
+        kunde_id: "k1", name: "Anna Muster", firma: "Musterbau", email: "[email protected]",
+        anzahl: 3, ungelesen: 1, letzte: new Date(Date.now() - 1800000).toISOString(),
+        letzter_text: "Nicht vergessen: Rechnung erst nach Abnahme.", letzter_autor: "dogfather" }] } });
+    }
+    if (u.includes("/admin/anfragen")) return route.fulfill({ json: { ok: true, anfragen: [] } });
+    if (u.includes("/admin/kunden")) return route.fulfill({ json: { ok: true, kunden: [] } });
+    return route.fulfill({ json: { ok: true } });
+  });
+  await seite.route("**/auth/**", (r) => r.fulfill({ json: { ok: true, user: { name: "Test" } } }));
+  await seite.addInitScript(() => {
+    sessionStorage.setItem("wd-vw-token", "t");
+    sessionStorage.setItem("wd-sitzung-aktiv", "1");
+  });
+
+  await seite.goto("http://127.0.0.1:4325/webdesign/verwaltung.html");
+  await seite.waitForTimeout(900);
+  console.log("\n=== " + wo + " ===");
+
+  // Abzeichen am Reiter
+  const abz = await seite.locator("#vw-pf-zaehler").innerText().catch(() => "");
+  const abzSichtbar = await seite.locator("#vw-pf-zaehler").isVisible().catch(() => false);
+  pruefe(wo + ": Postfach-Abzeichen zeigt die ungelesene Nachricht", abzSichtbar && abz === "1", abz);
+
+  // ---- Projekte ----
+  await seite.click('[data-tab="projekte"]');
+  await seite.waitForTimeout(500);
+  pruefe(wo + ": Projektliste zeigt das Projekt", await seite.locator("[data-projekt]").count() === 1);
+  pruefe(wo + ": „wartet auf Kunde“ ist sichtbar", await seite.locator(".vw-wartet").count() === 1);
+
+  await seite.click("[data-projekt]");
+  await seite.waitForTimeout(600);
+
+  const m = await seite.evaluate(() => {
+    const gruppen = Array.from(document.querySelectorAll(".vw-aufg-gruppe")).map((g) => g.dataset.k);
+    const farben = Array.from(document.querySelectorAll(".vw-aufg-gruppe")).map((g) =>
+      getComputedStyle(g.querySelector(".vw-aufg-kopf")).color);
+    const balken = Array.from(document.querySelectorAll(".vw-fs-teil > i")).map((i) =>
+      getComputedStyle(i).backgroundColor);
+    const zeile = document.querySelector('[data-aufgabe="a2"]');
+    const normal = document.querySelector('[data-aufgabe="a5"]');
+    return {
+      gruppen, farben, balkenFarben: [...new Set(balken)].length,
+      kundenZeileAnders: zeile && normal
+        ? getComputedStyle(zeile).backgroundColor !== getComputedStyle(normal).backgroundColor : false,
+      nichtEnthalten: document.querySelectorAll(".vw-aufg-nicht").length,
+      haken: document.querySelectorAll(".vw-aufg-haken").length,
+      erledigtDurchgestrichen: getComputedStyle(
+        document.querySelector('[data-aufgabe="a1"] .vw-aufg-titel')).textDecorationLine,
+      blickFelder: document.querySelectorAll(".vw-blick-feld").length,
+
+      /* Die REIHENFOLGE im Bild, nicht im Quelltext.
+
+         Diese Pruefung fehlte im ersten Anlauf, und deshalb meldete der
+         Test 37 von 37 gruen, waehrend jede Zeile sichtbar falsch herum
+         gebaut war: Kaestchen, dann die kleinen Knoepfe, und der Titel
+         ganz rechts. Alle inhaltlichen Pruefungen (Farben, Anzahl,
+         Durchgestrichenes) trafen zu -- keine einzige schaute darauf, WO
+         die Dinge liegen. Aufgefallen ist es erst am Screenshot.
+
+         Lehre: Wer eine Anordnung baut, muss die Anordnung pruefen, nicht
+         nur ihre Bestandteile. */
+      anordnung: (() => {
+        const z = document.querySelector('[data-aufgabe="a2"]');
+        if (!z) return null;
+        const k = z.querySelector(".vw-aufg-haken").getBoundingClientRect();
+        const t = z.querySelector(".vw-aufg-titel").getBoundingClientRect();
+        const r = z.querySelector(".vw-aufg-rechts").getBoundingClientRect();
+        const b = z.querySelector(".vw-aufg-text");
+        return {
+          reihenfolgeStimmt: k.right <= t.left + 1 && t.right <= r.left + 1,
+          textUnterTitel: b ? b.getBoundingClientRect().top >= t.bottom - 2 : true,
+          textNichtUnterKaestchen: b ? b.getBoundingClientRect().left >= k.right - 1 : true,
+        };
+      })(),
+    };
+  });
+
+  pruefe(wo + ": alle vier Abschnitte erscheinen", m.gruppen.join(",") === "start,gestaltung,umsetzung,abschluss", m.gruppen.join(","));
+  pruefe(wo + ": jeder Abschnitt hat eine EIGENE Farbe", new Set(m.farben).size === 4, m.farben.join(" | "));
+  pruefe(wo + ": Punkt für den Kunden hebt sich ab", m.kundenZeileAnders);
+  pruefe(wo + ": „nicht enthalten“ ist gekennzeichnet", m.nichtEnthalten === 1);
+  pruefe(wo + ": jeder Punkt hat ein Kästchen zum Abhaken", m.haken === 7, "n=" + m.haken);
+  pruefe(wo + ": Erledigtes ist durchgestrichen", m.erledigtDurchgestrichen.includes("line-through"), m.erledigtDurchgestrichen);
+  pruefe(wo + ": Zusammenfassung mit vier Zahlen", m.blickFelder === 4);
+  pruefe(wo + ": Kästchen — Titel — Knöpfe stehen in dieser Reihenfolge", m.anordnung?.reihenfolgeStimmt);
+  pruefe(wo + ": die Erklärung steht UNTER dem Titel", m.anordnung?.textUnterTitel);
+  pruefe(wo + ": die Erklärung ist am Titel ausgerichtet, nicht am Rand", m.anordnung?.textNichtUnterKaestchen);
+
+  // Touch-Ziele auf dem Handy
+  if (breite < 900) {
+    const zuKlein = await seite.evaluate(() =>
+      Array.from(document.querySelectorAll(".vw-aufg-haken, .vw-mini"))
+        .filter((b) => { const r = b.getBoundingClientRect(); return r.width < 24 || r.height < 24; }).length);
+    pruefe(wo + ": alle Knöpfe sind gross genug zum Antippen", zuKlein === 0, "zu klein: " + zuKlein);
+  }
+
+  await seite.screenshot({ path: `pruef-aufgaben-${wo.toLowerCase()}.png` });
+  await seite.keyboard.press("Escape");
+  await seite.waitForTimeout(300);
+
+  // ---- Postfach ----
+  await seite.click('[data-tab="postfach"]');
+  await seite.waitForTimeout(500);
+  pruefe(wo + ": Postfach zeigt den Verlauf", await seite.locator("[data-verlauf]").count() === 1);
+
+  await seite.click("[data-verlauf]");
+  await seite.waitForTimeout(600);
+
+  const pf = await seite.evaluate(() => {
+    const intern = document.querySelector(".vw-blase--intern");
+    const wir = document.querySelector(".vw-blase--wir");
+    const kunde = document.querySelector(".vw-blase--kunde");
+    const lauf = document.getElementById("vw-blasen");
+    return {
+      anzahl: document.querySelectorAll(".vw-blase").length,
+      internDa: !!intern,
+      internAnders: intern && wir
+        ? getComputedStyle(intern).borderStyle !== getComputedStyle(wir).borderStyle : false,
+      kundeLinks: kunde && wir
+        ? kunde.getBoundingClientRect().left < wir.getBoundingClientRect().left : false,
+      amEnde: lauf ? lauf.scrollTop + lauf.clientHeight >= lauf.scrollHeight - 5 : false,
+      schalterDa: !!document.getElementById("vw-pf-intern"),
+    };
+  });
+  pruefe(wo + ": alle drei Nachrichten erscheinen", pf.anzahl === 3, "n=" + pf.anzahl);
+  pruefe(wo + ": die interne Notiz ist da", pf.internDa);
+  pruefe(wo + ": interne Notiz sieht ANDERS aus als eine gesendete", pf.internAnders);
+  pruefe(wo + ": Kunde links, eigene Nachrichten rechts", pf.kundeLinks);
+  pruefe(wo + ": Verlauf springt ans Ende", pf.amEnde);
+
+  // Der Schalter muss das Schreibfeld sichtbar umfaerben
+  const vorher = await seite.evaluate(() => getComputedStyle(document.getElementById("vw-schreibfeld")).borderColor);
+  await seite.check("#vw-pf-intern");
+  await seite.waitForTimeout(250);
+  const nachher = await seite.evaluate(() => getComputedStyle(document.getElementById("vw-schreibfeld")).borderColor);
+  pruefe(wo + ": „interne Notiz“ färbt das Schreibfeld sichtbar um", vorher !== nachher, vorher + " -> " + nachher);
+
+  pruefe(wo + ": keine Fehler im Protokoll", fehlerImProtokoll.length === 0, fehlerImProtokoll.join(" | "));
+
+  await seite.screenshot({ path: `pruef-postfach-${wo.toLowerCase()}.png` });
+  await seite.close();
+}
+
+await browser.close();
+srv.close();
+const fehler = ergebnisse.filter((e) => !e.ok).length;
+console.log(`\n===== ${ergebnisse.length - fehler} bestanden, ${fehler} fehlgeschlagen =====`);
+process.exitCode = fehler ? 1 : 0;