florian.wilde/ProxLedger
1
0
Fork 0
Code Issues 1 Pull Requests Actions 2 Packages Projects Releases Wiki Activity

#002 Klickbarer Prototyp #2

New Issue
Closed
opened 2026-09-17 19:42:59 +00:00 by florian.wilde · 0 comments
florian.wilde commented 2026-09-17 19:42:59 +00:00
Owner
Copy Link
Copy Source

Ziel

Klickbarer UI-Prototyp der Seiten „Dashboard“, „Kunden-Detail“ und „Host-Detail“ mit realistischen Beispieldaten und ohne Backend, als Abstimmungsgrundlage für Look & Feel. Die Komponenten werden in den späteren Phasen weiterverwendet.

Aufgaben

  • Logo-Komponente (Standard, Sidebar-Variante, einfarbig, Favicon 32/16) + favicon.svg, favicon.ico, PNGs, apple-touch-icon
  • Theme: Farb-Tokens (abgedunkelte Info/Erfolg), Source Sans 3 (16 px), Monospace-Klasse mit Kopier-Button
  • Layout: Sidebar (250 px, einklappbar, Overlay mobil), Kopfleiste, Inhaltskopf mit Breadcrumb, Footer mit Version
  • Komponenten: SmallBox, InfoBox, Card, Badge, Callout, TodoList, ProgressBar, Tabs, CopyableCode
  • Beispieldaten (src/mock/): 4 Kunden, ~8 Hosts (PVE/PBS/PMG), Laufzeiten, Rechnungen, Alerts
  • Dashboard: 4 Small Boxes, Callout „Nicht zugeordnete Hosts“, Card „Subscriptions nach Ablauf“, Card „Aufgaben“, Card „Rechnungsstatus je Kunde“
  • Kunden-Detail: Info-Boxen (Hosts, Einkauf, Verkauf, Marge), Host-Tabelle, Laufzeiten-Tabelle, Summen pro Jahr, Ansprechpartner, Notizen
  • Host-Detail: Profil-Card + Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen
  • Warnglocke mit Dropdown, Strg+K-Suchdialog (clientseitig über Mock-Daten)
  • Dark-Mode-Umschalter (Grundfunktion)

Akzeptanzkriterien

  • Alle drei Seiten sind über Sidebar/Links erreichbar und klickbar
  • Suche nach pve1c-a6bd21fcb6 findet Host und Kunde
  • Mobil (375 px) benutzbar: Sidebar als Overlay, Tabellen scrollbar
  • Weiße Schrift auf Info/Erfolg erfüllt 4,5:1

Abhängigkeiten

#001

Notizen / Entscheidungen

  • Favicon-Dateien (favicon.ico, PNG-Größen, apple-touch-icon) fehlen noch; das Logo liegt als React-Komponente vor. Nachziehen in #007.
  • Screenshots des Prototyps liegen in docs/anleitung/bilder/ und dienen als Grundlage für #016.
  • Auf dem Dashboard zeigt die Spalte „Proxmox“ bewusst die Rechnung der Verlängerung (Laufzeit, die am nextduedate beginnt), nicht die der laufenden Periode.

Quelle: docs/issues/002-prototyp.md – dort wird dieses Issue gepflegt.

## Ziel Klickbarer UI-Prototyp der Seiten „Dashboard“, „Kunden-Detail“ und „Host-Detail“ mit realistischen Beispieldaten und ohne Backend, als Abstimmungsgrundlage für Look & Feel. Die Komponenten werden in den späteren Phasen weiterverwendet. ## Aufgaben - [x] Logo-Komponente (Standard, Sidebar-Variante, einfarbig, Favicon 32/16) + `favicon.svg`, `favicon.ico`, PNGs, `apple-touch-icon` - [x] Theme: Farb-Tokens (abgedunkelte Info/Erfolg), Source Sans 3 (16 px), Monospace-Klasse mit Kopier-Button - [x] Layout: Sidebar (250 px, einklappbar, Overlay mobil), Kopfleiste, Inhaltskopf mit Breadcrumb, Footer mit Version - [x] Komponenten: SmallBox, InfoBox, Card, Badge, Callout, TodoList, ProgressBar, Tabs, CopyableCode - [x] Beispieldaten (`src/mock/`): 4 Kunden, ~8 Hosts (PVE/PBS/PMG), Laufzeiten, Rechnungen, Alerts - [x] Dashboard: 4 Small Boxes, Callout „Nicht zugeordnete Hosts“, Card „Subscriptions nach Ablauf“, Card „Aufgaben“, Card „Rechnungsstatus je Kunde“ - [x] Kunden-Detail: Info-Boxen (Hosts, Einkauf, Verkauf, Marge), Host-Tabelle, Laufzeiten-Tabelle, Summen pro Jahr, Ansprechpartner, Notizen - [x] Host-Detail: Profil-Card + Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen - [x] Warnglocke mit Dropdown, Strg+K-Suchdialog (clientseitig über Mock-Daten) - [x] Dark-Mode-Umschalter (Grundfunktion) ## Akzeptanzkriterien - [x] Alle drei Seiten sind über Sidebar/Links erreichbar und klickbar - [x] Suche nach `pve1c-a6bd21fcb6` findet Host und Kunde - [x] Mobil (375 px) benutzbar: Sidebar als Overlay, Tabellen scrollbar - [x] Weiße Schrift auf Info/Erfolg erfüllt 4,5:1 ## Abhängigkeiten #001 ## Notizen / Entscheidungen - Favicon-Dateien (`favicon.ico`, PNG-Größen, `apple-touch-icon`) fehlen noch; das Logo liegt als React-Komponente vor. Nachziehen in #007. - Screenshots des Prototyps liegen in `docs/anleitung/bilder/` und dienen als Grundlage für #016. - Auf dem Dashboard zeigt die Spalte „Proxmox“ bewusst die Rechnung der Verlängerung (Laufzeit, die am `nextduedate` beginnt), nicht die der laufenden Periode. --- Quelle: `docs/issues/002-prototyp.md` – dort wird dieses Issue gepflegt.
florian.wilde added this to the v0.1.0 milestone 2026-09-17 19:42:59 +00:00
florian.wilde added the uiprototyp labels 2026-09-17 19:42:59 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agent
alerts
api
backend
buchhaltung
bug
chore
datenbank
deployment
docs
doku
export
feldtest
infrastruktur
prototyp
security
sicherheit
test
ui
No labels prototyp ui
Milestone
No items
No Milestone v0.1.0
Projects
Clear projects
No projects
Assignees
Clear assignees
florian.wilde (Florian Wilde)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: florian.wilde/ProxLedger#2