Adds Z-Report feature with PDF generation and UI components

Introduces Z-Report page and related functionality for cash register reconciliation - Adds new Z-Report page template with comprehensive financial reporting - Updates reconciliation table with Z-Report download buttons - Implements print-optimized CSS for report styling - Adds TypeScript handler for Z-Report button interactions
2026-01-23 16:25:43 +01:00 · 2026-01-23 16:25:43 +01:00 · f3c54dde35
commit f3c54dde35
parent eaae745c42
6 changed files with 603 additions and 21 deletions
--- a/PlanTempus.Application/.claude/settings.local.json
+++ b/PlanTempus.Application/.claude/settings.local.json
@ -1,7 +1,8 @@
 {
  "permissions": {
    "allow": [
-      "WebSearch"
+      "WebSearch",
+      "Bash(npm run build:*)"
    ]
  }
 }
--- a/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
@ -62,11 +62,7 @@
        <swp-cash-row-detail data-for="043">
            <swp-row-detail-content>
                <swp-row-detail-actions>
-                    <swp-btn class="secondary">
-                        <i class="ph ph-file-csv"></i>
-                        <span localize="cash.table.downloadCsv">Download CSV</span>
-                    </swp-btn>
-                    <swp-btn class="secondary">
+                    <swp-btn class="secondary" data-zreport="043">
                        <i class="ph ph-file-pdf"></i>
                        <span localize="cash.table.downloadPdf">Download PDF</span>
                    </swp-btn>
@ -97,11 +93,7 @@
        <swp-cash-row-detail data-for="042">
            <swp-row-detail-content>
                <swp-row-detail-actions>
-                    <swp-btn class="secondary">
-                        <i class="ph ph-file-csv"></i>
-                        <span localize="cash.table.downloadCsv">Download CSV</span>
-                    </swp-btn>
-                    <swp-btn class="secondary">
+                    <swp-btn class="secondary" data-zreport="042">
                        <i class="ph ph-file-pdf"></i>
                        <span localize="cash.table.downloadPdf">Download PDF</span>
                    </swp-btn>
@ -132,11 +124,7 @@
        <swp-cash-row-detail data-for="041">
            <swp-row-detail-content>
                <swp-row-detail-actions>
-                    <swp-btn class="secondary">
-                        <i class="ph ph-file-csv"></i>
-                        <span localize="cash.table.downloadCsv">Download CSV</span>
-                    </swp-btn>
-                    <swp-btn class="secondary">
+                    <swp-btn class="secondary" data-zreport="041">
                        <i class="ph ph-file-pdf"></i>
                        <span localize="cash.table.downloadPdf">Download PDF</span>
                    </swp-btn>
@ -167,11 +155,7 @@
        <swp-cash-row-detail data-for="040">
            <swp-row-detail-content>
                <swp-row-detail-actions>
-                    <swp-btn class="secondary">
-                        <i class="ph ph-file-csv"></i>
-                        <span localize="cash.table.downloadCsv">Download CSV</span>
-                    </swp-btn>
-                    <swp-btn class="secondary">
+                    <swp-btn class="secondary" data-zreport="040">
                        <i class="ph ph-file-pdf"></i>
                        <span localize="cash.table.downloadPdf">Download PDF</span>
                    </swp-btn>
--- a/PlanTempus.Application/Features/CashRegister/Pages/ZReport.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Pages/ZReport.cshtml
@ -0,0 +1,173 @@
+@page "/kasse/z-rapport/{id}"
+@model PlanTempus.Application.Features.CashRegister.Pages.ZReportModel
+@{
+    Layout = null;
+}
+<!DOCTYPE html>
+<html lang="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Z-Rapport Z-@Model.ReportId - Salon OS</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@@2.1.2/src/regular/style.css" />
+    <link rel="stylesheet" href="~/css/design-tokens.css">
+    <link rel="stylesheet" href="~/css/print.css">
+</head>
+<body>
+    <swp-z-report>
+        <!-- Print Actions (hidden when printing) -->
+        <swp-z-actions class="no-print">
+            <swp-btn class="primary" onclick="window.print()">
+                <i class="ph ph-printer"></i>
+                <span>Print / Gem som PDF</span>
+            </swp-btn>
+            <swp-btn class="secondary" onclick="window.close()">
+                <i class="ph ph-x"></i>
+                <span>Luk</span>
+            </swp-btn>
+        </swp-z-actions>
+
+        <!-- Report Header -->
+        <swp-z-header>
+            <swp-z-company>
+                <swp-z-company-name>Salon Harmoni</swp-z-company-name>
+                <swp-z-company-address>Nørregade 42, 8000 Aarhus C</swp-z-company-address>
+                <swp-z-company-cvr>CVR: 12345678</swp-z-company-cvr>
+            </swp-z-company>
+            <swp-z-title>
+                <swp-z-title-label>Z-Rapport</swp-z-title-label>
+                <swp-z-id>Z-@Model.ReportId</swp-z-id>
+            </swp-z-title>
+        </swp-z-header>
+
+        <!-- Period + Revenue Row -->
+        <swp-z-row-grid>
+            <swp-z-section>
+                <swp-z-section-title>Periode</swp-z-section-title>
+                <swp-z-section-content>
+                    <swp-z-row>
+                        <swp-z-label>Fra</swp-z-label>
+                        <swp-z-value>28. dec 2025 kl. 18:00</swp-z-value>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>Til</swp-z-label>
+                        <swp-z-value>29. dec 2025 kl. 17:45</swp-z-value>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>Kassepunkt</swp-z-label>
+                        <swp-z-value>Kasse 1 - Reception</swp-z-value>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>Åbnet af</swp-z-label>
+                        <swp-z-value>Anna Jensen</swp-z-value>
+                    </swp-z-row>
+                </swp-z-section-content>
+            </swp-z-section>
+
+            <swp-z-section>
+                <swp-z-section-title>Omsætning</swp-z-section-title>
+                <swp-z-section-content>
+                    <swp-z-row>
+                        <swp-z-label>Kortbetalinger</swp-z-label>
+                        <swp-z-amount>12.875,50 kr</swp-z-amount>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>MobilePay / Online</swp-z-label>
+                        <swp-z-amount>2.450,00 kr</swp-z-amount>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>Kontantsalg</swp-z-label>
+                        <swp-z-amount>3.540,00 kr</swp-z-amount>
+                    </swp-z-row>
+                    <swp-z-row class="total">
+                        <swp-z-label>Total omsætning</swp-z-label>
+                        <swp-z-amount>18.865,50 kr</swp-z-amount>
+                    </swp-z-row>
+                    <swp-z-row class="muted">
+                        <swp-z-label>Heraf moms (25%)</swp-z-label>
+                        <swp-z-amount>3.773,10 kr</swp-z-amount>
+                    </swp-z-row>
+                </swp-z-section-content>
+            </swp-z-section>
+        </swp-z-row-grid>
+
+        <!-- Cash Section -->
+        <swp-z-section>
+            <swp-z-section-title>Kontanter</swp-z-section-title>
+            <swp-z-section-content>
+                <swp-z-row>
+                    <swp-z-label>Startbeholdning</swp-z-label>
+                    <swp-z-amount>2.000,00 kr</swp-z-amount>
+                </swp-z-row>
+                <swp-z-row>
+                    <swp-z-label>+ Kontantsalg</swp-z-label>
+                    <swp-z-amount>3.540,00 kr</swp-z-amount>
+                </swp-z-row>
+                <swp-z-row>
+                    <swp-z-label>- Udbetalinger / Bilag</swp-z-label>
+                    <swp-z-amount>320,00 kr</swp-z-amount>
+                </swp-z-row>
+                <swp-z-row>
+                    <swp-z-label>- Udtaget til bank</swp-z-label>
+                    <swp-z-amount>2.000,00 kr</swp-z-amount>
+                </swp-z-row>
+                <swp-z-divider></swp-z-divider>
+                <swp-z-row>
+                    <swp-z-label>Forventet beholdning</swp-z-label>
+                    <swp-z-amount>3.220,00 kr</swp-z-amount>
+                </swp-z-row>
+                <swp-z-row>
+                    <swp-z-label>Optalt beholdning</swp-z-label>
+                    <swp-z-amount>3.195,00 kr</swp-z-amount>
+                </swp-z-row>
+                <swp-z-row class="difference negative">
+                    <swp-z-label>Kassedifference</swp-z-label>
+                    <swp-z-amount>-25,00 kr</swp-z-amount>
+                </swp-z-row>
+            </swp-z-section-content>
+        </swp-z-section>
+
+        <!-- Note + Approval Row -->
+        <swp-z-row-grid>
+            <swp-z-section>
+                <swp-z-section-title>Note</swp-z-section-title>
+                <swp-z-section-content>
+                    <swp-z-note>Difference skyldes vekslepenge givet forkert.</swp-z-note>
+                </swp-z-section-content>
+            </swp-z-section>
+
+            <swp-z-section>
+                <swp-z-section-title>Godkendelse</swp-z-section-title>
+                <swp-z-section-content>
+                    <swp-z-row>
+                        <swp-z-label>Status</swp-z-label>
+                        <swp-z-value class="approved">
+                            <i class="ph ph-check-circle"></i>
+                            Godkendt
+                        </swp-z-value>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>Afsluttet af</swp-z-label>
+                        <swp-z-value>Anna Jensen</swp-z-value>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>Godkendt af</swp-z-label>
+                        <swp-z-value>Karina Knudsen</swp-z-value>
+                    </swp-z-row>
+                    <swp-z-row>
+                        <swp-z-label>Tidspunkt</swp-z-label>
+                        <swp-z-value>29. dec 2025 kl. 17:52</swp-z-value>
+                    </swp-z-row>
+                </swp-z-section-content>
+            </swp-z-section>
+        </swp-z-row-grid>
+
+        <!-- Footer -->
+        <swp-z-footer>
+            <swp-z-generated>Genereret: 29. december 2025 kl. 17:55</swp-z-generated>
+            <swp-z-ref>Afstemnings-ID: KA-2025-12-29</swp-z-ref>
+        </swp-z-footer>
+    </swp-z-report>
+</body>
+</html>
--- a/PlanTempus.Application/Features/CashRegister/Pages/ZReport.cshtml.cs
+++ b/PlanTempus.Application/Features/CashRegister/Pages/ZReport.cshtml.cs
@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace PlanTempus.Application.Features.CashRegister.Pages;
+
+public class ZReportModel : PageModel
+{
+    public string ReportId { get; set; } = string.Empty;
+
+    public void OnGet(string id)
+    {
+        ReportId = id ?? string.Empty;
+    }
+}
--- a/PlanTempus.Application/wwwroot/css/print.css
+++ b/PlanTempus.Application/wwwroot/css/print.css
@ -0,0 +1,391 @@
+/**
+ * Print Styles - Z-Rapport
+ *
+ * Print-optimeret layout der matcher app'ens design system.
+ * Genbruger tokens fra design-tokens.css.
+ */
+
+/* ===========================================
+   BASE STYLES
+   =========================================== */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background: var(--color-background);
+}
+
+/* ===========================================
+   Z-RAPPORT CONTAINER
+   =========================================== */
+swp-z-report {
+  display: block;
+  max-width: 700px;
+  margin: 0 auto;
+  padding: var(--spacing-16);
+  background: var(--color-surface);
+}
+
+/* ===========================================
+   PRINT ACTIONS (Screen only)
+   =========================================== */
+swp-z-actions {
+  display: flex;
+  gap: var(--spacing-6);
+  justify-content: center;
+  margin-bottom: var(--spacing-16);
+  padding-bottom: var(--spacing-12);
+  border-bottom: 1px dashed var(--color-border);
+}
+
+swp-z-actions swp-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-6) var(--spacing-12);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family);
+  border: none;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+swp-z-actions swp-btn.primary {
+  background: var(--color-teal);
+  color: #fff;
+}
+
+swp-z-actions swp-btn.primary:hover {
+  filter: brightness(0.95);
+}
+
+swp-z-actions swp-btn.secondary {
+  background: var(--color-background);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+swp-z-actions swp-btn.secondary:hover {
+  background: var(--color-background-hover);
+}
+
+/* ===========================================
+   REPORT HEADER
+   =========================================== */
+swp-z-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-z-company {
+  display: block;
+}
+
+swp-z-company-name {
+  display: block;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  margin-bottom: var(--spacing-1);
+}
+
+swp-z-company-address,
+swp-z-company-cvr {
+  display: block;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+}
+
+/* ===========================================
+   REPORT TITLE
+   =========================================== */
+swp-z-title {
+  display: block;
+  text-align: right;
+}
+
+swp-z-title-label {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+swp-z-id {
+  display: block;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-mono);
+  color: var(--color-text);
+}
+
+/* ===========================================
+   ROW GRID (Side-by-side sections)
+   =========================================== */
+swp-z-row-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-8);
+  margin-bottom: var(--spacing-12);
+  margin-top: 20px;
+}
+
+swp-z-row-grid swp-z-section {
+  margin-bottom: 0;
+}
+
+swp-z-row-grid swp-z-label,
+swp-z-row-grid swp-z-value,
+swp-z-row-grid swp-z-amount,
+swp-z-row-grid swp-z-note {
+  font-size: var(--font-size-sm);
+}
+
+swp-z-row-grid swp-z-row.total swp-z-label,
+swp-z-row-grid swp-z-row.total swp-z-amount {
+  font-size: var(--font-size-sm);
+}
+
+swp-z-row-grid swp-z-value.approved {
+  font-size: var(--font-size-xs);
+}
+
+/* ===========================================
+   SECTIONS
+   =========================================== */
+swp-z-section {
+  display: block;
+  background: var(--color-background-alt);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-8);
+  margin-bottom: var(--spacing-8);
+}
+
+swp-z-section:last-of-type {
+  margin-bottom: 0;
+}
+
+swp-z-section-title {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-6);
+  padding-bottom: var(--spacing-3);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-z-section-content {
+  display: block;
+}
+
+/* ===========================================
+   ROWS
+   =========================================== */
+swp-z-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--spacing-3) 0;
+}
+
+swp-z-row.total {
+  font-weight: var(--font-weight-semibold);
+  padding-top: var(--spacing-6);
+  margin-top: var(--spacing-4);
+  border-top: 2px solid var(--color-border);
+}
+
+swp-z-row.muted {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+swp-z-row.difference {
+  font-weight: var(--font-weight-semibold);
+  padding: var(--spacing-6);
+  margin-top: var(--spacing-4);
+  border-radius: var(--radius-md);
+}
+
+swp-z-row.difference.negative {
+  background: var(--bg-red-subtle);
+}
+
+swp-z-row.difference.negative swp-z-amount {
+  color: var(--color-red);
+}
+
+swp-z-row.difference.positive {
+  background: var(--bg-green-subtle);
+}
+
+swp-z-row.difference.positive swp-z-amount {
+  color: var(--color-green);
+}
+
+swp-z-row.difference.neutral {
+  background: var(--bg-teal-subtle);
+}
+
+swp-z-row.difference.neutral swp-z-amount {
+  color: var(--color-teal);
+}
+
+swp-z-label {
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+}
+
+swp-z-value {
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+}
+
+swp-z-value.approved {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-4);
+  background: var(--bg-green-strong);
+  color: var(--color-green);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-pill);
+}
+
+swp-z-amount {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-base);
+  text-align: right;
+  color: var(--color-text);
+}
+
+/* ===========================================
+   DIVIDER
+   =========================================== */
+swp-z-divider {
+  display: block;
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--spacing-6) 0;
+}
+
+/* ===========================================
+   NOTE
+   =========================================== */
+swp-z-note {
+  display: block;
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  font-style: italic;
+  padding: var(--spacing-4) 0;
+}
+
+swp-z-note.empty {
+  color: var(--color-text-muted);
+}
+
+/* ===========================================
+   FOOTER
+   =========================================== */
+swp-z-footer {
+  display: block;
+  text-align: center;
+  padding-top: var(--spacing-12);
+  margin-top: var(--spacing-12);
+  border-top: 1px solid var(--color-border);
+}
+
+swp-z-generated,
+swp-z-ref {
+  display: block;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+swp-z-ref {
+  font-family: var(--font-mono);
+  margin-top: var(--spacing-2);
+}
+
+/* ===========================================
+   PRINT STYLES
+   =========================================== */
+@media print {
+  @page {
+    size: A4;
+    margin: 15mm;
+  }
+
+  body {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    background: #fff;
+  }
+
+  .no-print,
+  swp-z-actions {
+    display: none !important;
+  }
+
+  swp-z-report {
+    padding: 0;
+    max-width: none;
+    box-shadow: none;
+  }
+
+  /* Ensure colors print */
+  swp-z-section {
+    background: #fafafa !important;
+  }
+
+  swp-z-row.difference.negative {
+    background: #ffebee !important;
+  }
+
+  swp-z-row.difference.negative swp-z-amount {
+    color: #e53935 !important;
+  }
+
+  swp-z-row.difference.positive {
+    background: #e8f5e9 !important;
+  }
+
+  swp-z-row.difference.positive swp-z-amount {
+    color: #43a047 !important;
+  }
+
+  swp-z-value.approved {
+    background: #c8e6c9 !important;
+    color: #2e7d32 !important;
+  }
+}
+
+/* ===========================================
+   SCREEN PREVIEW
+   =========================================== */
+@media screen {
+  body {
+    padding: var(--spacing-16);
+  }
+
+  swp-z-report {
+    box-shadow: var(--shadow-lg);
+    border-radius: var(--radius-xl);
+  }
+}
--- a/PlanTempus.Application/wwwroot/ts/modules/cash.ts
+++ b/PlanTempus.Application/wwwroot/ts/modules/cash.ts
@ -18,6 +18,7 @@ export class CashController {
    this.setupDateFilters();
    this.setupRowToggle();
    this.setupDraftRowClick();
+    this.setupZReportButtons();
  }

  /**
@ -384,4 +385,23 @@ export class CashController {
      this.switchToTab('afstemning');
    });
  }
+
+  /**
+   * Setup Z-report PDF download buttons
+   */
+  private setupZReportButtons(): void {
+    const buttons = document.querySelectorAll<HTMLElement>('[data-zreport]');
+
+    buttons.forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const reportId = btn.dataset.zreport;
+        if (reportId) {
+          window.open(`/kasse/z-rapport/${reportId}`, '_blank');
+        }
+      });
+    });
+  }
 }