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

fix(ui): Zugang zur Laufzeit auf dem Telefon (#039)

Browse Source 
Im Reiter Rechnungen der Host-Detailansicht war die Laufzeit nie verlinkt,
und in der Rechnungsliste ist diese Spalte erst ab 992 px sichtbar. Auf dem
Telefon fuehrte damit kein Weg zu den Rechnungsformularen.

Die Laufzeit ist jetzt ein Link und zugleich Ueberschrift der Karte; in der
Liste bleibt sie auf dem Telefon sichtbar und entfaellt nur zwischen 768 und
992 px. Dafuer braucht es eine eigene Klasse: Bootstraps d-*-Hilfsklassen
setzen display mit !important und ueberschreiben das Kartenlayout.

Nebenbefund: Auch dieser Reiter rechnete den Einkauf ohne Rabatt - dritte
Stelle nach #037 und #038.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
florian.wilde
2026-10-03 17:08:54 +02:00
co-authored by Claude Opus 5
parent e570d30019
commit 335fc47496
16 changed files with 81 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(dashboard)/hosts/[id]/page.tsx
+16 -9
View File
@@ -346,7 +346,7 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
icon: "bi-receipt",
inhalt: (
<div className="table-responsive">
<table className="table table-striped align-middle mb-0">
<table className="table table-striped align-middle mb-0 pl-karten-tabelle">
<thead>
<tr>
<th scope="col">Laufzeit</th>
@@ -359,21 +359,28 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
</thead>
<tbody>
{host.laufzeiten.map((laufzeit) => {
// Nach Abzug des Rabatts – das ist, was tatsächlich gezahlt wird (#037).
const einkauf = laufzeit.proxmoxPosition
? Number(laufzeit.proxmoxPosition.nettoBetrag)
? Number(laufzeit.proxmoxPosition.nettoBetrag) -
Number(laufzeit.proxmoxPosition.rabatt ?? 0)
: null;
const verkauf = laufzeit.kundenPosition
? Number(laufzeit.kundenPosition.nettoBetrag)
: null;
return (
<tr key={laufzeit.id}>
<td>
{formatDatum(laufzeit.start)} – {formatDatum(laufzeit.ende)}
<td className="pl-karten-kopf">
<Link
href={`/rechnungen/${laufzeit.id}`}
className="fw-semibold text-decoration-none"
>
{formatDatum(laufzeit.start)} – {formatDatum(laufzeit.ende)}
</Link>
{laufzeit.status === "VORSCHLAG" ? (
<span className="badge pl-bg-info ms-2">Vorschlag</span>
) : null}
</td>
<td>
<td data-label="Proxmox-Rechnung">
<CopyableCode wert={laufzeit.proxmoxPosition?.rechnung.nummer ?? null} />
<div>
<EinkaufBadge
@@ -385,8 +392,8 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
/>
</div>
</td>
<td>{formatEuro(einkauf)}</td>
<td>
<td data-label="Einkauf">{formatEuro(einkauf)}</td>
<td data-label="Kundenrechnung">
<CopyableCode wert={laufzeit.kundenPosition?.rechnung.nummer ?? null} />
<div>
<VerkaufBadge
@@ -395,8 +402,8 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
/>
</div>
</td>
<td>{formatEuro(verkauf)}</td>
<td>
<td data-label="Verkauf">{formatEuro(verkauf)}</td>
<td data-label="Marge">
{einkauf !== null && verkauf !== null
? formatEuro(verkauf - einkauf)
: "–"}
src/app/(dashboard)/rechnungen/page.tsx
+2 -2
View File
@@ -204,7 +204,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
<th scope="col" className="d-none d-md-table-cell">
Host
</th>
<th scope="col" className="d-none d-lg-table-cell">
<th scope="col" className="pl-spalte-laufzeit">
Laufzeit
</th>
<th scope="col">Proxmox-Rechnung</th>
@@ -254,7 +254,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
{zeile.hostname}
</Link>
</td>
<td className="d-none d-lg-table-cell" data-label="Laufzeit">
<td className="pl-spalte-laufzeit" data-label="Laufzeit">
<Link href={`/rechnungen/${zeile.id}`} className="text-decoration-none">
{formatDatum(zeile.start)} – {formatDatum(zeile.ende)}
</Link>
src/app/globals.css
+12
View File
@@ -401,6 +401,18 @@ body {
max-width: calc(100vw - 1rem);
}
/*
* Die Laufzeit-Spalte ist auf dem Telefon der einzige Weg zu den Rechnungsformularen, deshalb
* bleibt sie dort sichtbar. Zwischen 768 und 992 px ist die Tabelle am engsten – dort entfällt sie.
* Bewusst eine eigene Klasse statt der Bootstrap-Hilfsklassen: deren `display: … !important`
* überschreibt das Kartenlayout (#039).
*/
@media (min-width: 768px) and (max-width: 991.98px) {
.pl-spalte-laufzeit {
display: none;
}
}
/* ---------- Mobil ---------- */
@media (max-width: 575.98px) {