Post 5: das Projektmanagement, vier Bildschirme einer Pipeline

Nummer 4 im Redaktionsplan, erscheint Fr 21.08. Carousel, fuenf Slides,
Theme modern, Variante hell, Punktgrund. Stichwort des Plans: "Der
Ueberblick, den jeder Betrieb vermisst."

DER BEITRAG
Das Demo-Projekt haelt fuer die Pipeline vier eigene Bildschirme bereit --
Schablone, Board, Liste, Detail. Jeder bekommt eine Slide, dazu die Karte
aus der Naehe:

  1  Von der Anfrage bis zur Abnahme.  4A  das Board, drei Phasen
  2  Alles Wichtige auf einer Karte.   4A  eine Karte gross
  3  Vom Verkauf in die Abwicklung.    4B  das Projekt in der Abwicklung
  4  Board oder Liste.                 4C  dieselben Projekte als Tabelle
  5  Du bestimmst, was draufsteht.     3   der Feldeditor

ES SIND ZWEI PIPELINES, NICHT EINE
Das ist die Pointe und der Grund fuer Slide 3. Das Board gehoert zu
"Vertrieb: Anlagen-Verkauf", das Projekt in der Detailansicht liegt in
"Auftragsabwicklung SHK", und ein Knopf in der Kopfzeile schiebt es von
der einen in die andere. Beide Namen stehen woertlich in
PipelineBoardInteractive.tsx und S02PipelinesDetailansicht.tsx.

Warum das eine Software sein kann, beantwortet Slide 5: die Felder
haengen an der Pipeline, nicht am Programm. Siebzehn Feldtypen und drei
Stufen unter "Pflicht ab Board-Spalte", im Screen offen auf "Aufmass
erledigt". Ein SHK-Betrieb legt sich das an, ein anderer etwas anderes.

EINE RICHTIGSTELLUNG
Ein Zwischenstand behauptete, die Detailansicht sei nur ein Entwurfs-PNG.
Geprueft worden waren die Beschriftungen aus 07_Screen-4b_Karten-Detail.png
-- KUNDENDATEN, OBJEKTDATEN, Wahrscheinlichkeit, Heizlast, Lead-Quelle --
und die kommen im Code wirklich nirgends vor. Daraus wurde der falsche
Schluss gezogen, es gebe den Bildschirm nicht.

Es gibt ihn: app/(screens)/4b/ rendert S02PipelinesDetailansicht.tsx, 3150
Zeilen, mit den Rubriken GRUNDDATEN, PLANUNG & VERANTWORTLICHE,
PROJEKTKONTAKTDATEN, KONTAKTE, FIRMENDATEN, ANSPRECHPARTNER,
PROJEKTADRESSE und ZUSATZADRESSEN. Das PNG ist ein aelterer Entwurf
desselben Bildschirms, nicht sein Beleg. Die Abwesenheit einer
Zeichenkette beweist die Abwesenheit eines Bildschirms nicht.

DIE KARTE KOMMT AUS DEM CODE, NICHT AUS DEM SCREENSHOT
Der erste Anlauf war von assets/screens/pipelines.png abgemalt und lag an
drei Stellen daneben, von denen im Bild keine zu erkennen war:
Prioritaet, Balken und Kuerzel stehen als Gruppe rechts und haengen ueber
die Kante des Fusses (absolute -bottom-4 right-2), im Fuss steht ueber
dem Termin die Zeitspanne des Projekts, und die Balken sitzen in einem
eigenen umrandeten Kasten. Erst ProjectCard.tsx hat das gezeigt. Die
Karte ist jetzt Klasse fuer Klasse daraus nachgebaut, 320 breit wie w-80,
Titel auf hoechstens zwei Zeilen wie line-clamp-2.

Anders als bei Post 4 wird nichts umgefaerbt. Eine Pipeline lebt davon,
dass man das Gewerk an der Farbe erkennt, ohne zu lesen, und dass der
Fuss sich mit der Prioritaet faerbt. Zuordnung aus CATEGORY_TONES, Toene
aus ui/theme.css, Kuerzelfarbe aus avatarColor je Projekt.

ALLE ZAHLEN SIND GERECHNET
Anzahl und Summe je Spalte kommen aus denselben 41 Datensaetzen wie die
Karten: Angebot 189.800, Auftrag 224.800, In Ausfuehrung 352.300 Euro.
Wer eine aendert, muss die andere mitziehen.

WO BEWUSST ABGEWICHEN WIRD
- Slide 1 zeigt zwei bis drei Karten je Spalte, der Kopf zaehlt weiter
  vier. So ist es im Werkzeug auch, eine Spalte zeigt, was aufs Bild
  passt. Gleich hohe Saeulen sahen aus wie eine Tabelle.
- Slide 4 zeigt vier von neun Tabellenspalten und sieben von elf Zeilen.
  Die Spalte Sachbearbeiter ist entfallen, damit "Auftragswert gesperrt"
  ungekuerzt hineinpasst -- der Wortlaut ist der Grund, warum die Spalte
  ueberhaupt auf der Slide steht.
- Slide 3 stellt die Rubriken untereinander statt nebeneinander, und zwei
  fehlen: PDS-INTEGRATION, weil der Beitrag sich an Betriebe allgemein
  richtet und nicht an die mit diesem einen Branchenprogramm, und
  "ADRESSDATEN . TEST A (ZUSATZADRESSEN AN)", weil das ein Arbeitstitel
  aus der Entwicklung ist und kein Bildschirmtext.
- Ein "Kalender" im Umschalter stand kurz drin und ist raus: die
  ToggleGroup des Boards kennt board und list, mehr nicht.

DIE MASSSTAEBE SIND ABGESTIMMT
Slide 1, 3, 4 und 5 zeigen ihre Schrift zwischen 16 und 23 px. Slide 2 ist
als Nahaufnahme gedacht und liegt bei 47. Vorher stand sie auf 59 bis 73,
und eine einzelne Karte wirkte damit groesser als das ganze Board davor.

Der Kopfbereich ueber dem Board -- Seitentitel, Umschalter, Filterleiste --
ist wieder entfallen. Im Profilraster ist die Slide eine Kachel von rund
150 px, dort liest niemand eine Bedienoberflaeche. Wie die Pipeline heisst,
sagt Slide 3; dass es eine Liste gibt, sagt Slide 4.

EIN PRUEFSKRIPT HAT DEN PROJEKTSTAND VERSTELLT
export.mjs schaltet die Slides mit der Pfeiltaste weiter. Die Seite startet
aber im Bearbeiten-Modus, und dort verschieben Pfeiltasten das gewaehlte
Element statt die Slide zu wechseln. Jeder Prueflauf hat die Zeichnungen
geschoben und das in state/post5.json geschrieben: zuletzt vis dx 3 dy -69
auf Slide 1 und auf Slide 2 ein size 762, das die im Code eingestellten 720
ueberschrieb. Die Karte, ueber deren Groesse zwei Runden lang geredet wurde,
war beim Messen also gar nicht die aus dem Code.

Gemerkt an Messwerten, die im Code nirgends standen -- 89 px Rand rechts bei
eingestellten 92, 177 px unten bei eingestellten 120. Zahlen, die man sich
nicht erklaeren kann, sind ein Befund und keine Messungenauigkeit. Der Stand
ist bereinigt, das Skript verlaesst vor dem Blaettern den Bearbeiten-Modus
und schreibt die Datei am Ende zurueck.

NEBENBEI
- Plaettchenbreiten werden gemessen statt geschaetzt. Zeichenzahl mal
  0,52 em stimmt fuer "Heizung" und geht bei "Waermepumpe" daneben, das
  Wort stand ueber dem Rand. Ein Canvas misst dieselbe Schrift, die das
  SVG spaeter zeichnet; aus derselben Messung kommt der Titelumbruch.
- Die Ueberschrift von Slide 1 steht auf denselben Werten wie die von
  post4.html, nachgemessen: 76 px, Gewicht 800, -2,432 px Sperrung,
  zentriert, Oberkante 95, Blockhoehe 158, Versatz dy 3.
- Die Projektliste steht siebenmal im Repo, einmal je Post-Seite plus
  uebersicht.html, dort zusaetzlich in PROJEKTE. Post 5 ist ueberall
  eingetragen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

README.md

@@ -25,6 +25,7 @@ Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog.
 | Post 2 · Alternative | `post2-alt.html` | Derselbe Beitrag im Theme `modern` | |
 | Post 3 · Verbinden statt ersetzen | `post3.html` | Einzelbild, Theme `modern`, erscheint 17.08. | |
 | Post 4 · Workflow-Engine | `post4.html` | Carousel, 4 Slides, Theme `modern`, erscheint 19.08. | [`POST-4.md`](./POST-4.md) |
+| Post 5 · Projektmanagement | `post5.html` | Carousel, 5 Slides, Theme `modern`, erscheint 21.08. | [`POST-5.md`](./POST-5.md) |
 
 **Alle Streifen nebeneinander** zeigt `uebersicht.html`, erreichbar über
 *Projekt → Alle Projekte im Streifen*. Die Seite baut die Slides nicht selbst
@@ -171,6 +172,45 @@ dritte Stellung unter *Versuch → Punkte* und ist die Voreinstellung dieses
 Projekts. Warum das Theme `modern` hier von seinem ruhigen Grund abweicht, steht
 im CSS bei `.layer-raster`.
 
+**Post 5 zeigt die Pipeline von vier Seiten.** Das Demo-Projekt hat dafür vier
+Bildschirme — Schablone, Board, Liste, Detail — und jeder bekommt eine Slide,
+dazu die Karte aus der Nähe. Anders als bei Post 4 wird **nichts umgefärbt**:
+eine Pipeline lebt davon, dass man das Gewerk an der Farbe erkennt, ohne zu
+lesen, und dass der Fuß einer Karte sich mit ihrer Priorität färbt. Die
+Zuordnung Gewerk zu Ton ist `CATEGORY_TONES`, die Plättchenfarben sind
+`ui/theme.css`.
+
+| Slide | Screen | Was sie leistet |
+|---|---|---|
+| 1 | 4A | das Board selbst, drei Phasen mit Anzahl, Summe und Karten |
+| 2 | 4A | eine Karte groß |
+| 3 | 4B | „Vom Verkauf in die Abwicklung": dasselbe Projekt in `Auftragsabwicklung SHK`, mit dem Knopf für den Pipelinewechsel |
+| 4 | 4C | dieselben Projekte als Tabelle |
+| 5 | 3 | der Feldeditor, offen auf „Aufmaß erledigt" |
+
+**Es sind zwei Pipelines, nicht eine.** Das Board gehört zu
+`Vertrieb: Anlagen-Verkauf`, das Projekt in der Detailansicht liegt in
+`Auftragsabwicklung SHK`, und ein Knopf schiebt es von der einen in die andere.
+Das ist der Unterschied zwischen Vertriebs- und Abwicklungs-Projektmanagement,
+und Slide 3 ist deshalb die Pointe des Beitrags. Möglich ist beides in einer
+Software, weil die Felder an der Pipeline hängen und nicht am Programm — das
+zeigt Slide 5.
+
+**Alle Zahlen sind gerechnet, keine ist gesetzt.** Anzahl und Summe je Spalte
+kommen aus denselben Datensätzen wie die Karten.
+
+**Die Karte ist aus dem Code nachgebaut, nicht aus dem Screenshot.** Der erste
+Anlauf war von `assets/screens/pipelines.png` abgemalt und lag an drei Stellen
+daneben, die im Bild nicht zu erkennen waren. Der Rest steht in
+[`POST-5.md`](./POST-5.md) §7.
+
+> **Eine Richtigstellung.** Ein früherer Stand behauptete hier, die
+> Detailansicht sei nur ein Entwurfs-PNG. Falsch: geprüft worden waren die
+> Beschriftungen des Bildes `07_Screen-4b_Karten-Detail.png`, und die kommen im
+> Code wirklich nicht vor — den Bildschirm gibt es trotzdem, unter
+> `app/(screens)/4b/`, nur anders beschriftet. Die Abwesenheit einer
+> Zeichenkette beweist die Abwesenheit eines Bildschirms nicht.
+
 Die vierzehn Partner-Marken liegen unter `assets/partner/` und sind, wie alles
 andere hier, aus der Website **gespiegelt statt verlinkt**. Sechs davon sind
 PNG und damit dieselbe Wette wie ein Screenshot (§7 in `rules.md`), deshalb
@@ -251,6 +291,7 @@ Server nicht läuft. Wer den Stand ändert, muss also committen und pushen —
 sonst sieht ihn niemand sonst. Gibt es die Datei noch nicht, wird der Stand
 aus dem Browser einmalig hineingeschrieben.
 
+
 ## Bedienung
 
 | Taste | Wirkung |