Projekte anlegen und ein leerer Zustand, der fuehrt statt zu enttaeuschen

Rueckmeldung 22.08.2026 mit Bildschirmfoto aus dem eigenen Testzugang: "die seite soll jetzt schon bitte richtig krass sein und hoch profissionel, auch sehr detailliert." Zwei Luecken, beide geschlossen: 1) Projekte liessen sich nur ueber die Schnittstelle anlegen. Jetzt in der Verwaltung: pro Kunde ein "+ Projekt" mit Titel, Paket, Preis, Richttermin und naechstem Schritt. Bewusst als Einblendung direkt bei der Kundenzeile statt als eigene Seite -- man legt ein Projekt IMMER fuer einen bestimmten Kunden an, nie im luftleeren Raum. Der Kundenname steht deshalb gross im Formular, damit es nicht versehentlich dem Falschen angehaengt wird. Die 30 % Anzahlung wird beim Tippen live mitgerechnet. Sie wird zwar serverseitig berechnet, aber wer sie beim Eintippen sieht, merkt eine falsche Null sofort -- und nicht erst, wenn der Kunde ueberweisen soll. 2) Der leere Zustand im Portal war ein einziger Satz. Das ist eine verpasste Gelegenheit: Wer dort zum ersten Mal landet, hat gerade sein Passwort gesetzt und weiss noch nicht, was ihn erwartet -- genau dann entscheidet sich, ob die Seite souveraen wirkt oder unfertig. Jetzt zeigt er in vier Punkten, WAS gleich hier stehen wird (Projektstand, wer am Zug ist, Dateien und Nachrichten, Ideen jederzeit) und schliesst mit der Zusicherung, dass nichts zu tun ist. Fuenfsprachig. 45/45 Handy-Abnahme, i18n vollstaendig. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-22 21:40:27 +02:00
parent 74091590b8
commit 097e80b845
4 changed files with 228 additions and 1 deletions
@@ -917,3 +917,46 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
  .wd-karte { border: 1px solid #bbb; background: #fff; box-shadow: none; }
  .wd h1, .wd h2, .wd h3, .wd p, .wd li { color: #000 !important; }
 }
+
+/* ---------------------------------------------------------------------
+   18. LEERER ZUSTAND IM KUNDENPORTAL
+
+   Ein leerer Bereich mit einem einzigen Satz ist eine verpasste
+   Gelegenheit. Wer hier zum ersten Mal landet, hat gerade sein Passwort
+   gesetzt und weiß noch nicht, was ihn erwartet — genau dann entscheidet
+   sich, ob die Seite souverän wirkt oder unfertig.
+
+   Deshalb zeigt der leere Zustand, WAS gleich hier stehen wird, statt
+   nur festzustellen, dass gerade nichts da ist.
+   --------------------------------------------------------------------- */
+.po-leer { text-align: center; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem); }
+.po-leer-symbol { width: clamp(64px, 12vw, 92px); margin: 0 auto .9rem; position: relative; }
+.po-leer-symbol img { width: 100%; height: auto; opacity: .9; }
+.po-leer-symbol::before {
+  content: ""; position: absolute; inset: -24%; z-index: -1; border-radius: 50%;
+  background: radial-gradient(circle, rgba(127,208,232,.26), transparent 70%);
+  filter: blur(20px);
+}
+.po-leer h3 { margin-bottom: .3em; }
+.po-leer > p { max-width: 48ch; margin-left: auto; margin-right: auto; }
+
+.po-leer-liste {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem;
+  margin: 1.6rem 0 1.2rem; text-align: left;
+}
+@media (max-width: 640px) { .po-leer-liste { grid-template-columns: 1fr; } }
+.po-leer-punkt {
+  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
+  padding: .9rem 1rem; border-radius: 14px;
+  background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
+}
+.po-leer-nr {
+  width: 28px; height: 28px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-head); font-weight: 800; font-size: .85rem;
+  color: var(--wd-blau); background: rgba(127,208,232,.12);
+  border: 1px solid var(--wd-rand-stark);
+}
+.po-leer-punkt strong { display: block; color: var(--wd-text); font-size: .98rem; margin-bottom: .15rem; }
+.po-leer-punkt span { display: block; font-size: .88rem; color: var(--wd-text-soft); line-height: 1.5; }
+.po-leer-fuss { margin: 0; }
@@ -71,6 +71,54 @@ window.I18N_WD = {
    fr: "Ton projet apparaîtra ici dès sa création.",
    pt: "O teu projeto aparece aqui assim que for criado.",
  },
+  /* --- Leerer Zustand: fuehrt, statt zu enttaeuschen --- */
+  po_leer_h3: {
+    de: "Gleich geht es los",
+    "de-CH": "Glii gohts los",
+    en: "It starts soon",
+    fr: "Ça commence bientôt",
+    pt: "Está quase a começar",
+  },
+  po_leer_1: { de: "Projektstand", "de-CH": "Projektstand", en: "Project status", fr: "État du projet", pt: "Estado do projeto" },
+  po_leer_1t: {
+    de: "Eine Leiste zeigt dir jederzeit, in welcher Phase dein Projekt gerade ist — vom Briefing bis zur Übergabe.",
+    "de-CH": "E Leischte zeigt dir jederziit, i welere Phase dis Projekt grad isch — vom Briefing bis zur Übergab.",
+    en: "A bar shows you at any time which phase your project is in — from briefing to handover.",
+    fr: "Une barre t'indique à tout moment la phase de ton projet — du briefing à la remise.",
+    pt: "Uma barra mostra-te a qualquer momento em que fase está o teu projeto — do briefing à entrega.",
+  },
+  po_leer_2: { de: "Wer gerade dran ist", "de-CH": "Wär grad dra isch", en: "Whose turn it is", fr: "À qui le tour", pt: "De quem é a vez" },
+  po_leer_2t: {
+    de: "Du siehst sofort, ob gerade auf dich gewartet wird oder ob Dogfather am Zug ist. Kein Nachfragen nötig.",
+    "de-CH": "Du gsehsch sofort, ob grad uf dich gwartet wird oder ob dr Dogfather am Zug isch. Kes Nachefroge nötig.",
+    en: "You see immediately whether we are waiting for you or Dogfather is working on it. No need to ask.",
+    fr: "Tu vois immédiatement si l'on t'attend ou si Dogfather s'en occupe. Pas besoin de demander.",
+    pt: "Vês logo se estamos à tua espera ou se o Dogfather está a tratar. Sem precisares de perguntar.",
+  },
+  po_leer_3: { de: "Dateien und Nachrichten", "de-CH": "Datei und Nachrichte", en: "Files and messages", fr: "Fichiers et messages", pt: "Ficheiros e mensagens" },
+  po_leer_3t: {
+    de: "Angebote, Entwürfe und Freigaben liegen hier gebündelt — nichts geht in E-Mails unter.",
+    "de-CH": "Aagebot, Entwürf und Freigabe liged do bündlet — nüt goht i E-Mails under.",
+    en: "Quotes, drafts and approvals are kept together here — nothing gets lost in e-mails.",
+    fr: "Devis, maquettes et validations sont regroupés ici — rien ne se perd dans les e-mails.",
+    pt: "Orçamentos, esboços e aprovações ficam reunidos aqui — nada se perde em e-mails.",
+  },
+  po_leer_4: { de: "Ideen jederzeit", "de-CH": "Ideä jederziit", en: "Ideas anytime", fr: "Des idées à tout moment", pt: "Ideias a qualquer momento" },
+  po_leer_4t: {
+    de: "Fällt dir später etwas ein, trägst du es hier ein. Du bekommst Aufwand und Preis genannt und entscheidest in Ruhe.",
+    "de-CH": "Fallt dir spöter öppis ii, treisch es do ii. Du überchunnsch Ufwand und Priis gnennt und entscheidsch i Rueh.",
+    en: "If something occurs to you later, note it here. You get effort and price quoted and decide at your own pace.",
+    fr: "Si une idée te vient plus tard, note-la ici. Tu reçois l'effort et le prix, et tu décides tranquillement.",
+    pt: "Se te ocorrer algo mais tarde, aponta aqui. Recebes esforço e preço e decides com calma.",
+  },
+  po_leer_fuss: {
+    de: "Sobald dein Projekt angelegt ist, erscheint es automatisch hier — du musst nichts tun.",
+    "de-CH": "Sobald dis Projekt aagleit isch, erschiint es automatisch do — du muesch nüt mache.",
+    en: "As soon as your project is created it appears here automatically — you do not have to do anything.",
+    fr: "Dès que ton projet est créé, il apparaît ici automatiquement — tu n'as rien à faire.",
+    pt: "Assim que o teu projeto for criado, aparece aqui automaticamente — não tens de fazer nada.",
+  },
+
  po_betreuung: { de: "Laufende Betreuung", "de-CH": "Laufendi Betreuig", en: "Ongoing support", fr: "Suivi en cours", pt: "Acompanhamento em curso" },
  po_offene_zahlungen: { de: "Offene Zahlungen", "de-CH": "Offni Zahlige", en: "Open payments", fr: "Paiements en attente", pt: "Pagamentos em aberto" },
  po_jetzt_bezahlen: { de: "Jetzt bezahlen", "de-CH": "Jetzt zahle", en: "Pay now", fr: "Payer maintenant", pt: "Pagar agora" },
@@ -168,7 +168,30 @@

      html += "<h2>" + s(window.WD.t("po_projekte")) + "</h2>";
      if (!d.projekte.length) {
-        html += '<p class="wd-leise">' + s(window.WD.t("po_keine_projekte")) + "</p>";
+        /* Ein leerer Bereich mit einem Satz ist eine verpasste Gelegenheit.
+           Wer hier zum ersten Mal landet, hat gerade sein Passwort gesetzt
+           und weiss noch nicht, was ihn erwartet. Statt "hier ist nichts"
+           zeigt der leere Zustand deshalb, WAS gleich hier stehen wird --
+           und was als Naechstes passiert. Das nimmt die Unsicherheit,
+           statt sie zu erzeugen. */
+        html += '<div class="wd-karte po-leer">' +
+          '<div class="po-leer-symbol" aria-hidden="true">' +
+            '<img src="/assets/img/logo-dogfather-transparent.png" alt="" width="472" height="476" />' +
+          "</div>" +
+          "<h3>" + s(window.WD.t("po_leer_h3")) + "</h3>" +
+          '<p class="wd-leise">' + s(window.WD.t("po_keine_projekte")) + "</p>" +
+          '<div class="po-leer-liste">' +
+            [["po_leer_1", "po_leer_1t"], ["po_leer_2", "po_leer_2t"],
+             ["po_leer_3", "po_leer_3t"], ["po_leer_4", "po_leer_4t"]]
+              .map(function (paar, i) {
+                return '<div class="po-leer-punkt">' +
+                  '<span class="po-leer-nr">' + (i + 1) + "</span>" +
+                  "<div><strong>" + s(window.WD.t(paar[0])) + "</strong>" +
+                  "<span>" + s(window.WD.t(paar[1])) + "</span></div></div>";
+              }).join("") +
+          "</div>" +
+          '<p class="wd-klein wd-leise po-leer-fuss">' + s(window.WD.t("po_leer_fuss")) + "</p>" +
+          "</div>";
      } else {
        html += d.projekte.map(function (p) {
          return '<button type="button" class="wd-karte po-projekt" data-projekt="' + s(p.id) + '">' +
@@ -707,6 +707,8 @@
              (k.letzter_login ? "zuletzt " + window.WD.datum(k.letzter_login) : "noch nie angemeldet") +
            "</span>" +
            '<span style="display:block;margin-top:.5rem">' +
+              '<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" data-projekt-fuer="' + s(k.id) +
+                '" data-projekt-name="' + s(k.name) + '">+ Projekt</button> ' +
              '<button type="button" class="wd-btn wd-btn--still wd-btn--klein" data-neuer-link="' + s(k.id) + '">Neuer Link</button> ' +
              '<button type="button" class="wd-btn wd-btn--still wd-btn--klein" data-schalten="' + s(k.id) +
                '" data-frei="' + (k.freigeschaltet ? "0" : "1") + '">' +
@@ -715,6 +717,12 @@
          "</span></div>";
      }).join("");

+      ziel.querySelectorAll("[data-projekt-fuer]").forEach(function (b) {
+        b.addEventListener("click", function () {
+          zeigeProjektFormular(b.dataset.projektFuer, b.dataset.projektName);
+        });
+      });
+
      ziel.querySelectorAll("[data-neuer-link]").forEach(function (b) {
        b.addEventListener("click", async function () {
          window.WD.knopfSperren(b, true, "…");
@@ -828,6 +836,111 @@
    }
  }

+
+  /* -----------------------------------------------------------------
+     PROJEKT ANLEGEN
+
+     Bewusst als Einblendung direkt bei der Kundenzeile statt als eigene
+     Seite: man legt ein Projekt IMMER fuer einen bestimmten Kunden an,
+     nie im luftleeren Raum. Der Kundenname steht deshalb gross im
+     Formular -- so kann man es nicht versehentlich dem Falschen anhaengen.
+     ----------------------------------------------------------------- */
+  function zeigeProjektFormular(kundeId, kundeName) {
+    var box = document.getElementById("vw-link-box");
+    box.hidden = false;
+    box.innerHTML =
+      '<div class="wd-karte" style="cursor:default;display:block">' +
+        '<h3 style="margin:0 0 .2rem">Neues Projekt</h3>' +
+        '<p class="wd-klein" style="color:var(--wd-blau);margin:0 0 1rem">für ' + s(kundeName) + '</p>' +
+        '<div class="wd-grid wd-grid--2">' +
+          '<div class="wd-feld" id="vw-feld-ptitel">' +
+            '<label for="vw-ptitel">Projekttitel<span class="wd-pflicht">*</span></label>' +
+            '<input type="text" id="vw-ptitel" placeholder="z. B. Website Handwerksbetrieb Meier" />' +
+            '<p class="wd-feld-fehler"></p>' +
+          '</div>' +
+          '<div class="wd-feld">' +
+            '<label for="vw-ppaket">Paket</label>' +
+            '<select id="vw-ppaket">' +
+              '<option value="onepager">Onepager — ab 300 €</option>' +
+              '<option value="website" selected>Professionelle Website — ab 500 €</option>' +
+              '<option value="shop">Shop &amp; umfangreiche Website — ab 1.000 €</option>' +
+              '<option value="verwaltung">Buchhaltungs- &amp; Steuerverwaltung — ab 1.500 €</option>' +
+              '<option value="betreuung">Laufende Betreuung — ab 49 €/Monat</option>' +
+            '</select>' +
+          '</div>' +
+          '<div class="wd-feld">' +
+            '<label for="vw-ppreis">Gesamtpreis in Euro</label>' +
+            '<input type="number" id="vw-ppreis" min="0" step="1" placeholder="1500" inputmode="numeric" />' +
+            '<span class="wd-feld-hilfe" id="vw-panzahlung">Die 30 % Anzahlung wird daraus automatisch berechnet.</span>' +
+          '</div>' +
+          '<div class="wd-feld">' +
+            '<label for="vw-ptermin">Richttermin <span class="wd-leise">optional</span></label>' +
+            '<input type="text" id="vw-ptermin" placeholder="z. B. Mitte Oktober" />' +
+          '</div>' +
+        '</div>' +
+        '<div class="wd-feld">' +
+          '<label for="vw-pschritt">Nächster Schritt <span class="wd-leise">sieht der Kunde sofort</span></label>' +
+          '<input type="text" id="vw-pschritt" placeholder="z. B. Briefing-Termin vereinbaren" />' +
+        '</div>' +
+        '<div class="wd-btn-reihe">' +
+          '<button type="button" class="wd-btn wd-btn--haupt" id="vw-projekt-speichern">Projekt anlegen</button>' +
+          '<button type="button" class="wd-btn wd-btn--still" id="vw-projekt-abbrechen">Abbrechen</button>' +
+        '</div>' +
+      '</div>';
+    box.scrollIntoView({ behavior: "smooth", block: "center" });
+    setTimeout(function () { document.getElementById("vw-ptitel").focus(); }, 100);
+
+    /* Die Anzahlung live mitrechnen. Sie wird zwar serverseitig berechnet,
+       aber wer sie beim Eintippen sieht, merkt eine falsche Null sofort --
+       und nicht erst, wenn der Kunde den Betrag ueberweisen soll. */
+    var preisFeld = document.getElementById("vw-ppreis");
+    preisFeld.addEventListener("input", function () {
+      var wert = Number(preisFeld.value);
+      document.getElementById("vw-panzahlung").textContent =
+        Number.isFinite(wert) && wert > 0
+          ? "30 % Anzahlung: " + (Math.round(wert * 100 * 0.3) / 100).toFixed(2).replace(".", ",") + " €"
+          : "Die 30 % Anzahlung wird daraus automatisch berechnet.";
+    });
+
+    document.getElementById("vw-projekt-abbrechen").addEventListener("click", function () {
+      box.hidden = true; box.innerHTML = "";
+    });
+
+    document.getElementById("vw-projekt-speichern").addEventListener("click", async function (e) {
+      var titel = document.getElementById("vw-ptitel").value.trim();
+      var feld = document.getElementById("vw-feld-ptitel");
+      feld.classList.remove("wd-feld--fehler");
+      if (!titel) {
+        feld.classList.add("wd-feld--fehler");
+        feld.querySelector(".wd-feld-fehler").textContent = "Bitte einen Projekttitel angeben.";
+        return;
+      }
+      window.WD.knopfSperren(e.target, true, "Wird angelegt…");
+      try {
+        var r = await api("/webdesign/admin/projekte", {
+          method: "POST",
+          body: {
+            kundeId: kundeId,
+            titel: titel,
+            paket: document.getElementById("vw-ppaket").value,
+            preisEuro: Number(document.getElementById("vw-ppreis").value) || undefined,
+            richttermin: document.getElementById("vw-ptermin").value.trim(),
+            naechsterSchritt: document.getElementById("vw-pschritt").value.trim(),
+          },
+        });
+        box.innerHTML = '<div class="vw-link-anzeige">' +
+          '<p class="wd-hinweis-titel">Projekt ' + s(r.nummer) + ' angelegt</p>' +
+          '<p class="wd-klein" style="margin:0">' +
+          (r.anzahlungText ? "Anzahlung 30 %: <strong>" + s(r.anzahlungText) + "</strong>. " : "") +
+          'Der Kunde sieht es ab sofort in seinem Projektraum.</p></div>';
+        ladeKunden();
+      } catch (f) {
+        window.WD.knopfSperren(e.target, false);
+        window.WD.meldung(meldung, f.message, "fehler");
+      }
+    });
+  }
+
  /* ---------------- Start ----------------

     Reihenfolge bewusst so: