From 2786aba3ef7831c0ce758df64b43e76c4dec319f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C3=85=E2=80=9A=20Miczek?= <rm@vicorda.dk>
Date: Mon, 19 Oct 2026 19:56:17 +0200
Subject: [PATCH] Add Pay again for unpaid orders and redesign admin modals.

Unpaid PayU confirmations can restart payment; initiate reuses the payment row. Admin modals now use the shared K-design shell.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/app/core/i18n/translations/cs.ts      |   4 +
 .../src/app/core/i18n/translations/de.ts      |   4 +
 .../src/app/core/i18n/translations/en.ts      |   4 +
 .../src/app/core/i18n/translations/pl.ts      |   4 +
 .../orders/order-detail-modal.component.html  | 591 +++++++++++-------
 .../orders/order-detail-modal.component.ts    |  35 ++
 .../orders/order-invoice-modal.component.html | 189 +++---
 .../products/group-form-modal.component.html  |  75 +--
 .../product-form-modal.component.html         |  26 +-
 src/admin/src/styles.css                      |   5 +
 src/admin/src/styles/admin-k.css              | 139 ++++
 .../Payments/Commands/PaymentCommands.cs      |  48 +-
 src/shop/src/app/core/i18n/translations/cs.ts |   6 +
 src/shop/src/app/core/i18n/translations/de.ts |   7 +
 src/shop/src/app/core/i18n/translations/en.ts |   6 +
 src/shop/src/app/core/i18n/translations/pl.ts |   6 +
 .../features/checkout/checkout.component.ts   |  57 ++
 .../order-confirmation.component.html         |  49 +-
 18 files changed, 876 insertions(+), 379 deletions(-)

diff --git a/src/admin/src/app/core/i18n/translations/cs.ts b/src/admin/src/app/core/i18n/translations/cs.ts
index 6a4b87f..138b802 100644
--- a/src/admin/src/app/core/i18n/translations/cs.ts
+++ b/src/admin/src/app/core/i18n/translations/cs.ts
@@ -223,6 +223,10 @@ export const CS_TRANSLATIONS: TranslationMap = {
   'orders.prev': 'Předchozí',
   'orders.next': 'Další',
   'orders.detail': 'Detail objednávky',
+  'orders.lines': 'Položky',
+  'orders.customerShipping': 'Zákazník a doručení',
+  'orders.guestCustomer': 'Host',
+  'orders.updateStatus': 'Uložit stav',
   'orders.shipping': 'Doručení',
   'orders.shipment': 'Zásilka',
   'orders.tracking': 'Sledovací číslo',
diff --git a/src/admin/src/app/core/i18n/translations/de.ts b/src/admin/src/app/core/i18n/translations/de.ts
index 88957b7..1be0193 100644
--- a/src/admin/src/app/core/i18n/translations/de.ts
+++ b/src/admin/src/app/core/i18n/translations/de.ts
@@ -223,6 +223,10 @@ export const DE_TRANSLATIONS: TranslationMap = {
   'orders.prev': 'Zurück',
   'orders.next': 'Weiter',
   'orders.detail': 'Bestelldetails',
+  'orders.lines': 'Positionen',
+  'orders.customerShipping': 'Kunde & Versand',
+  'orders.guestCustomer': 'Gastkunde',
+  'orders.updateStatus': 'Status aktualisieren',
   'orders.shipping': 'Versand',
   'orders.shipment': 'Sendung',
   'orders.tracking': 'Sendungsnummer',
diff --git a/src/admin/src/app/core/i18n/translations/en.ts b/src/admin/src/app/core/i18n/translations/en.ts
index f72a8e1..2bc1670 100644
--- a/src/admin/src/app/core/i18n/translations/en.ts
+++ b/src/admin/src/app/core/i18n/translations/en.ts
@@ -221,6 +221,10 @@ export const EN_TRANSLATIONS: TranslationMap = {
   'orders.prev': 'Previous',
   'orders.next': 'Next',
   'orders.detail': 'Order details',
+  'orders.lines': 'Line items',
+  'orders.customerShipping': 'Customer & shipping',
+  'orders.guestCustomer': 'Guest customer',
+  'orders.updateStatus': 'Update status',
   'orders.shipping': 'Shipping',
   'orders.shipment': 'Shipment',
   'orders.tracking': 'Tracking number',
diff --git a/src/admin/src/app/core/i18n/translations/pl.ts b/src/admin/src/app/core/i18n/translations/pl.ts
index 0391e7f..019d1e0 100644
--- a/src/admin/src/app/core/i18n/translations/pl.ts
+++ b/src/admin/src/app/core/i18n/translations/pl.ts
@@ -221,6 +221,10 @@ export const PL_TRANSLATIONS: TranslationMap = {
   'orders.prev': 'Poprzednia',
   'orders.next': 'Następna',
   'orders.detail': 'Szczegóły zamówienia',
+  'orders.lines': 'Pozycje',
+  'orders.customerShipping': 'Klient i dostawa',
+  'orders.guestCustomer': 'Gość',
+  'orders.updateStatus': 'Zapisz status',
   'orders.shipping': 'Dostawa',
   'orders.shipment': 'Przesyłka',
   'orders.tracking': 'Numer śledzenia',
diff --git a/src/admin/src/app/features/orders/order-detail-modal.component.html b/src/admin/src/app/features/orders/order-detail-modal.component.html
index 1b654f8..2e3d19d 100644
--- a/src/admin/src/app/features/orders/order-detail-modal.component.html
+++ b/src/admin/src/app/features/orders/order-detail-modal.component.html
@@ -1,115 +1,72 @@
 @if (open()) {
   <div
-    class="admin-modal fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4"
+    class="admin-modal"
     role="dialog"
     aria-modal="true"
     (click)="handleBackdrop($event)"
   >
     <div
-      class="admin-modal__panel my-4 w-full max-w-2xl bg-white shadow-lg"
+      class="admin-modal__panel admin-modal__panel--xl"
       (click)="$event.stopPropagation()"
     >
-      <div class="flex items-center justify-between border-b border-iled-grey-light px-6 py-4">
-        <div>
-          <h2 class="text-lg font-bold">
-            {{ 'orders.detail' | translate }}
+      <div class="admin-modal__head">
+        <div style="min-width: 0">
+          <h1>
             @if (detail(); as d) {
-              <span class="font-normal text-iled-grey-dark">#{{ d.orderNumber }}</span>
+              #{{ d.orderNumber }}
+            } @else {
+              {{ 'orders.detail' | translate }}
             }
-          </h2>
+          </h1>
           @if (detail(); as d) {
-            <div style="margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px">
+            <p class="page-purpose" style="margin: 0">
+              {{ d.createdAt | date: 'yyyy-MM-dd HH:mm' }}
+              @if (d.paymentProvider) {
+                · {{ d.paymentProvider }}
+              }
+            </p>
+            <div class="admin-modal__meta">
+              <span class="badge" [class]="statusBadgeClass(d.status)">
+                {{ 'orders.status.' + d.status | translate }}
+              </span>
+              @if (d.paymentStatus) {
+                <span class="badge" [class]="paymentBadgeClass(d.paymentStatus)">
+                  {{ 'orders.paymentStatus.' + d.paymentStatus | translate }}
+                </span>
+              }
               <app-order-channel-icons
                 [source]="d.source"
                 [shippingCarrier]="d.shippingCarrier"
                 [shippingServiceType]="d.shippingServiceType"
                 [showLabels]="true"
-                [iconSize]="15"
+                [iconSize]="14"
               />
               @if (d.externalOrderId) {
-                <span class="cell-muted text-xs font-mono">
+                <span class="cell-muted" style="font-family: ui-monospace, monospace; font-size: 12px">
                   {{ d.externalOrderId }}
                 </span>
               }
             </div>
           }
         </div>
-        <button
-          type="button"
-          class="text-iled-grey-dark hover:text-iled-black"
-          (click)="handleClose()"
-        >
-          ✕
-        </button>
-      </div>
-
-      @if (loading()) {
-        <div class="px-6 py-6">
-          <app-admin-skeleton variant="detail" [rows]="4" />
-        </div>
-      } @else if (detail(); as d) {
-        <div class="max-h-[70vh] space-y-5 overflow-y-auto px-6 py-4 text-sm">
-          <div class="grid gap-4 sm:grid-cols-2">
-            <div>
-              <h3 class="mb-2 font-semibold">{{ 'orders.customer' | translate }}</h3>
-              <p>{{ d.customerFirstName }} {{ d.customerLastName }}</p>
-              <p class="text-iled-grey-dark">{{ d.customerEmail }}</p>
-              <p class="text-iled-grey-dark">{{ d.customerPhone }}</p>
-            </div>
-            <div>
-              <h3 class="mb-2 font-semibold">{{ 'orders.shipping' | translate }}</h3>
-              <p class="font-medium">
-                {{ 'orders.carrier.' + d.shippingCarrier | translate }}
-                @if (d.shippingServiceType === 'parcelLocker') {
-                  ({{ 'orders.service.parcelLocker' | translate }})
-                }
-              </p>
-              @if (d.parcelPointName) {
-                <p>{{ d.parcelPointName }}</p>
-                <p class="text-iled-grey-dark">{{ d.parcelPointAddress }}</p>
-              } @else {
-                <p>{{ d.shippingStreet }}</p>
-                <p>{{ d.shippingPostalCode }} {{ d.shippingCity }}</p>
-                <p>{{ d.shippingCountry }}</p>
-              }
-            </div>
-          </div>
-
-          <div class="rounded border border-iled-grey-light bg-iled-bg p-4">
-            <h3 class="mb-3 font-semibold">{{ 'orders.shipment' | translate }}</h3>
-            @if (d.shipment; as s) {
-              <div class="space-y-1 text-sm">
-                <p>
-                  <span class="text-iled-grey-dark">{{ 'orders.tracking' | translate }}:</span>
-                  <span class="ml-1 font-mono font-medium">{{ s.trackingNumber || '—' }}</span>
-                </p>
-                <p>
-                  <span class="text-iled-grey-dark">{{ 'orders.status' | translate }}:</span>
-                  <span class="ml-1">{{ 'orders.shipmentStatus.' + s.status | translate }}</span>
-                </p>
-                @if (s.errorMessage) {
-                  <p class="text-sm" style="color: var(--danger)">{{ s.errorMessage }}</p>
-                }
-                @if (s.labelRelativePath) {
-                  <a
-                    [href]="labelUrl(s)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="mt-2 inline-flex btn btn-secondary btn-sm"
-                  >
-                    {{ 'orders.downloadLabel' | translate }}
-                  </a>
-                } @else if (canGenerateLabel(d)) {
-                  <button
-                    type="button"
-                    class="btn btn-primary btn-sm mt-16"
-                    [disabled]="generatingLabel()"
-                    (click)="handleGenerateLabel()"
-                  >
-                    {{ 'orders.generateLabel' | translate }}
-                  </button>
-                }
-              </div>
+        <div class="page-actions">
+          @if (detail(); as d) {
+            <button
+              type="button"
+              class="btn btn-secondary"
+              (click)="handleInvoice()"
+            >
+              {{ 'orders.invoice' | translate }}
+            </button>
+            @if (d.shipment?.labelRelativePath) {
+              <a
+                [href]="labelUrl(d.shipment!)"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="btn btn-secondary"
+              >
+                {{ 'orders.downloadLabel' | translate }}
+              </a>
             } @else if (canGenerateLabel(d)) {
               <button
                 type="button"
@@ -119,172 +76,324 @@
               >
                 {{ 'orders.generateLabel' | translate }}
               </button>
-            } @else {
-              <p class="text-sm text-iled-grey-dark">{{ 'orders.labelNotAvailable' | translate }}</p>
             }
-          </div>
+          }
+          <button
+            type="button"
+            class="admin-modal__close"
+            (click)="handleClose()"
+            [attr.aria-label]="'common.close' | translate"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
 
-          <div class="flex flex-wrap gap-4">
-            <div>
-              <span class="text-iled-grey-dark">{{ 'orders.status' | translate }}:</span>
-              <span class="ml-1 font-medium">{{ 'orders.status.' + d.status | translate }}</span>
-            </div>
-            <div>
-              <span class="text-iled-grey-dark">{{ 'orders.payment' | translate }}:</span>
-              @if (d.paymentStatus) {
-                <span class="ml-1 font-medium">
-                  {{ 'orders.paymentStatus.' + d.paymentStatus | translate }}
-                </span>
-              } @else {
-                <span class="ml-1">—</span>
-              }
-            </div>
-            @if (d.paymentProvider) {
-              <div>
-                <span class="text-iled-grey-dark">{{ 'orders.provider' | translate }}:</span>
-                <span class="ml-1">{{ d.paymentProvider }}</span>
+      @if (loading()) {
+        <div class="admin-modal__body">
+          <app-admin-skeleton variant="detail" [rows]="5" />
+        </div>
+      } @else if (detail(); as d) {
+        <div class="admin-modal__body">
+          <div class="split">
+            <div class="stack" style="gap: 16px">
+              <div class="card">
+                <div class="card-head">
+                  <h2>{{ 'orders.lines' | translate }}</h2>
+                </div>
+                <div class="table-wrap">
+                  <table class="data">
+                    <thead>
+                      <tr>
+                        <th>{{ 'products.name' | translate }}</th>
+                        <th>{{ 'orders.qty' | translate }}</th>
+                        <th>{{ 'products.price' | translate }}</th>
+                        @if (canPick()) {
+                          <th>{{ 'orders.pickFrom' | translate }}</th>
+                          <th></th>
+                        }
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (line of d.lines; track line.id) {
+                        <tr [class.is-collected]="line.isCollected">
+                          <td>
+                            <div class="row-product">
+                              <div>
+                                <div class="cell-strong">{{ line.productName }}</div>
+                                <div class="cell-muted">
+                                  {{ line.sku }}
+                                  @if (line.variantColor) {
+                                    · {{ line.variantColor }}
+                                  }
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                          <td>{{ line.quantity }}</td>
+                          <td class="cell-strong">
+                            {{ line.lineTotal | i18nCurrency }}
+                          </td>
+                          @if (canPick()) {
+                            <td>
+                              @if (!line.isCollected) {
+                                <select
+                                  class="select"
+                                  style="height: 32px; min-width: 140px"
+                                  [value]="getWarehouse(line.id)"
+                                  (change)="
+                                    setWarehouse(
+                                      line.id,
+                                      $any($event.target).value
+                                    )
+                                  "
+                                >
+                                  <option value="">
+                                    {{ 'orders.selectWarehouse' | translate }}
+                                  </option>
+                                  @for (
+                                    ws of line.warehouseStock;
+                                    track ws.warehouseId
+                                  ) {
+                                    <option [value]="ws.warehouseId">
+                                      {{ ws.warehouseName }} ({{ ws.quantity }})
+                                    </option>
+                                  }
+                                </select>
+                              } @else if (line.pickedFromWarehouseName) {
+                                <span class="cell-muted">
+                                  {{ line.pickedFromWarehouseName }}
+                                  ({{ line.pickedFromWarehouseCode }})
+                                </span>
+                              }
+                            </td>
+                            <td>
+                              @if (line.isCollected) {
+                                <span class="badge badge-success">
+                                  {{ 'orders.collected' | translate }}
+                                </span>
+                              } @else {
+                                <button
+                                  type="button"
+                                  class="btn btn-secondary btn-sm"
+                                  [disabled]="!canCollectLine(line) || collecting()"
+                                  (click)="handleCollectLine(line)"
+                                >
+                                  {{ 'orders.markCollected' | translate }}
+                                </button>
+                              }
+                            </td>
+                          }
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </div>
+                <div class="totals">
+                  <div class="totals__row">
+                    <span>{{ 'orders.subtotal' | translate }}</span>
+                    <span>{{ d.subtotal | i18nCurrency }}</span>
+                  </div>
+                  <div class="totals__row">
+                    <span>{{ 'orders.delivery' | translate }}</span>
+                    <span>{{ d.deliveryCost | i18nCurrency }}</span>
+                  </div>
+                  @if (d.discountAmount > 0) {
+                    <div class="totals__row">
+                      <span>{{ 'orders.discount' | translate }}</span>
+                      <span>-{{ d.discountAmount | i18nCurrency }}</span>
+                    </div>
+                  }
+                  <div class="totals__row">
+                    <span>{{ 'orders.vat' | translate }}</span>
+                    <span>{{ d.vatAmount | i18nCurrency }}</span>
+                  </div>
+                  <div class="totals__row totals__row--total">
+                    <span>{{ 'orders.total' | translate }}</span>
+                    <span>{{ d.total | i18nCurrency }}</span>
+                  </div>
+                </div>
               </div>
-            }
-          </div>
 
-          <div class="flex flex-wrap items-end gap-3">
-            <div>
-              <label class="mb-1 block text-xs font-medium text-iled-grey-dark">
-                {{ 'orders.changeStatus' | translate }}
-              </label>
-              <select
-                [(ngModel)]="selectedStatus"
-                name="orderStatus"
-                class="border border-iled-grey-light px-3 py-2 text-sm"
-              >
-                @for (s of statuses; track s) {
-                  <option [ngValue]="s">{{ 'orders.status.' + s | translate }}</option>
-                }
-              </select>
-            </div>
-            <button
-              type="button"
-              class="bg-iled-black px-4 py-2 text-sm font-semibold text-white"
-              (click)="handleSaveStatus()"
-            >
-              {{ 'products.save' | translate }}
-            </button>
-            <button
-              type="button"
-              class="border border-iled-grey-light px-4 py-2 text-sm"
-              (click)="handleInvoice()"
-            >
-              {{ 'orders.invoice' | translate }}
-            </button>
-          </div>
-
-          <table class="w-full text-left text-sm">
-            <thead class="border-b border-iled-grey-light bg-iled-bg">
-              <tr>
-                <th class="px-3 py-2">{{ 'products.name' | translate }}</th>
-                <th class="px-3 py-2">SKU</th>
-                <th class="px-3 py-2">{{ 'orders.qty' | translate }}</th>
-                <th class="px-3 py-2">{{ 'products.price' | translate }}</th>
-                @if (canPick()) {
-                  <th class="px-3 py-2">{{ 'orders.pickFrom' | translate }}</th>
-                  <th class="px-3 py-2">{{ 'orders.status' | translate }}</th>
-                }
-              </tr>
-            </thead>
-            <tbody>
-              @for (line of d.lines; track line.id) {
-                <tr class="border-b border-iled-grey-light" [class.bg-green-50]="line.isCollected">
-                  <td class="px-3 py-2">
-                    <div>{{ line.productName }}</div>
-                    <div class="text-xs text-iled-grey-dark">{{ line.variantColor }}</div>
-                  </td>
-                  <td class="px-3 py-2 font-mono text-xs">{{ line.sku }}</td>
-                  <td class="px-3 py-2">{{ line.quantity }}</td>
-                  <td class="px-3 py-2">{{ line.lineTotal | i18nCurrency }}</td>
-                  @if (canPick()) {
-                    <td class="px-3 py-2">
-                      @if (!line.isCollected) {
+              @if (canPick() && pendingCount(d) > 0) {
+                <div class="card">
+                  <div class="card-head">
+                    <h2>{{ 'orders.orderWarehouse' | translate }}</h2>
+                  </div>
+                  <div class="card-pad">
+                    <div class="flex items-end gap-8" style="flex-wrap: wrap">
+                      <div class="field" style="flex: 1; min-width: 180px">
+                        <label for="order-wh">
+                          {{ 'orders.orderWarehouse' | translate }}
+                        </label>
                         <select
-                          class="border border-iled-grey-light px-2 py-1 text-xs"
-                          [value]="getWarehouse(line.id)"
-                          (change)="setWarehouse(line.id, $any($event.target).value)"
+                          id="order-wh"
+                          class="select"
+                          [ngModel]="orderWarehouse"
+                          name="orderWarehouse"
+                          (ngModelChange)="setOrderWarehouse($event)"
                         >
-                          <option value="">{{ 'orders.selectWarehouse' | translate }}</option>
-                          @for (ws of line.warehouseStock; track ws.warehouseId) {
-                            <option [value]="ws.warehouseId">
-                              {{ ws.warehouseName }} ({{ ws.quantity }})
+                          <option value="">
+                            {{ 'orders.selectWarehouse' | translate }}
+                          </option>
+                          @for (ws of warehouseOptions(d); track ws.warehouseId) {
+                            <option [ngValue]="ws.warehouseId">
+                              {{ ws.warehouseName }} ({{ ws.warehouseCode }})
                             </option>
                           }
                         </select>
-                      } @else if (line.pickedFromWarehouseName) {
-                        <span class="text-xs">
-                          {{ line.pickedFromWarehouseName }}
-                          ({{ line.pickedFromWarehouseCode }})
-                        </span>
-                      }
-                    </td>
-                    <td class="px-3 py-2">
-                      @if (line.isCollected) {
-                        <span class="rounded bg-green-100 px-2 py-0.5 text-xs text-green-800">
-                          {{ 'orders.collected' | translate }}
-                        </span>
-                      } @else {
-                        <button
-                          type="button"
-                          class="bg-iled-black px-2 py-1 text-xs text-white disabled:opacity-40"
-                          [disabled]="!canCollectLine(line) || collecting()"
-                          (click)="handleCollectLine(line)"
-                        >
-                          {{ 'orders.markCollected' | translate }}
-                        </button>
-                      }
-                    </td>
-                  }
-                </tr>
+                      </div>
+                      <button
+                        type="button"
+                        class="btn btn-primary"
+                        [disabled]="!canCollectAll(d) || collecting()"
+                        (click)="handleCollectOrder()"
+                      >
+                        {{ 'orders.collectOrder' | translate }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
               }
-            </tbody>
-          </table>
-
-          @if (canPick() && pendingCount(d) > 0) {
-            <div class="flex flex-wrap items-end gap-3 rounded border border-iled-grey-light bg-iled-bg p-4">
-              <div>
-                <label class="mb-1 block text-xs font-medium text-iled-grey-dark">
-                  {{ 'orders.orderWarehouse' | translate }}
-                </label>
-                <select
-                  class="border border-iled-grey-light px-3 py-2 text-sm"
-                  [ngModel]="orderWarehouse"
-                  name="orderWarehouse"
-                  (ngModelChange)="setOrderWarehouse($event)"
-                >
-                  <option value="">{{ 'orders.selectWarehouse' | translate }}</option>
-                  @for (ws of warehouseOptions(d); track ws.warehouseId) {
-                    <option [ngValue]="ws.warehouseId">
-                      {{ ws.warehouseName }} ({{ ws.warehouseCode }})
-                    </option>
-                  }
-                </select>
-              </div>
-              <button
-                type="button"
-                class="bg-iled-primary px-4 py-2 text-sm font-semibold text-iled-black disabled:opacity-40"
-                [disabled]="!canCollectAll(d) || collecting()"
-                (click)="handleCollectOrder()"
-              >
-                {{ 'orders.collectOrder' | translate }}
-              </button>
             </div>
-          }
 
-          <div class="space-y-1 text-right">
-            <div>{{ 'orders.subtotal' | translate }}: {{ d.subtotal | i18nCurrency }}</div>
-            <div>{{ 'orders.delivery' | translate }}: {{ d.deliveryCost | i18nCurrency }}</div>
-            @if (d.discountAmount > 0) {
-              <div>{{ 'orders.discount' | translate }}: -{{ d.discountAmount | i18nCurrency }}</div>
-            }
-            <div>{{ 'orders.vat' | translate }}: {{ d.vatAmount | i18nCurrency }}</div>
-            <div class="text-lg font-bold">
-              {{ 'orders.total' | translate }}: {{ d.total | i18nCurrency }}
+            <div class="stack" style="gap: 16px">
+              <div class="card">
+                <div class="card-head">
+                  <h2>{{ 'orders.status' | translate }}</h2>
+                </div>
+                <div class="card-pad stack" style="gap: 12px">
+                  <div class="field">
+                    <label for="order-status">
+                      {{ 'orders.changeStatus' | translate }}
+                    </label>
+                    <select
+                      id="order-status"
+                      class="select"
+                      [(ngModel)]="selectedStatus"
+                      name="orderStatus"
+                    >
+                      @for (s of statuses; track s) {
+                        <option [ngValue]="s">
+                          {{ 'orders.status.' + s | translate }}
+                        </option>
+                      }
+                    </select>
+                  </div>
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    (click)="handleSaveStatus()"
+                  >
+                    {{ 'orders.updateStatus' | translate }}
+                  </button>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card-head">
+                  <h2>{{ 'orders.customerShipping' | translate }}</h2>
+                </div>
+                <div class="section-block">
+                  <div class="cell-strong">
+                    @if (d.customerFirstName || d.customerLastName) {
+                      {{ d.customerFirstName }} {{ d.customerLastName }}
+                    } @else {
+                      {{ 'orders.guestCustomer' | translate }}
+                    }
+                  </div>
+                  @if (d.customerEmail) {
+                    <div class="cell-muted">{{ d.customerEmail }}</div>
+                  }
+                  @if (d.customerPhone) {
+                    <div class="cell-muted">{{ d.customerPhone }}</div>
+                  }
+                </div>
+                <div class="section-block">
+                  <h3>{{ 'orders.shipping' | translate }}</h3>
+                  <div class="flex items-center gap-8" style="margin-bottom: 8px">
+                    <app-order-channel-icons
+                      [source]="d.source"
+                      [shippingCarrier]="d.shippingCarrier"
+                      [shippingServiceType]="d.shippingServiceType"
+                      [showDelivery]="true"
+                      [showLabels]="false"
+                      [iconSize]="14"
+                    />
+                    <span class="cell-strong">
+                      {{ 'orders.carrier.' + d.shippingCarrier | translate }}
+                      ·
+                      {{ 'orders.service.' + d.shippingServiceType | translate }}
+                    </span>
+                  </div>
+                  @if (d.parcelPointName) {
+                    <div>{{ d.parcelPointName }}</div>
+                    <div class="cell-muted">{{ d.parcelPointAddress }}</div>
+                  } @else {
+                    <div>{{ d.shippingStreet }}</div>
+                    <div class="cell-muted">
+                      {{ d.shippingPostalCode }} {{ d.shippingCity }}
+                    </div>
+                    <div class="cell-muted">{{ d.shippingCountry }}</div>
+                  }
+                </div>
+                <div class="section-block">
+                  <h3>{{ 'orders.shipment' | translate }}</h3>
+                  @if (d.shipment; as s) {
+                    <div class="stack" style="gap: 6px">
+                      <div>
+                        <span class="cell-muted">{{ 'orders.tracking' | translate }}:</span>
+                        <span class="cell-strong" style="margin-left: 6px; font-family: ui-monospace, monospace">
+                          {{ s.trackingNumber || '—' }}
+                        </span>
+                      </div>
+                      <div>
+                        <span class="cell-muted">{{ 'orders.status' | translate }}:</span>
+                        <span style="margin-left: 6px">
+                          {{ 'orders.shipmentStatus.' + s.status | translate }}
+                        </span>
+                      </div>
+                      @if (s.errorMessage) {
+                        <p class="form-error" style="margin: 0">{{ s.errorMessage }}</p>
+                      }
+                      <div class="flex gap-8" style="margin-top: 8px; flex-wrap: wrap">
+                        @if (s.labelRelativePath) {
+                          <a
+                            [href]="labelUrl(s)"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="btn btn-secondary btn-sm"
+                          >
+                            {{ 'orders.downloadLabel' | translate }}
+                          </a>
+                        } @else if (canGenerateLabel(d)) {
+                          <button
+                            type="button"
+                            class="btn btn-primary btn-sm"
+                            [disabled]="generatingLabel()"
+                            (click)="handleGenerateLabel()"
+                          >
+                            {{ 'orders.generateLabel' | translate }}
+                          </button>
+                        }
+                      </div>
+                    </div>
+                  } @else if (canGenerateLabel(d)) {
+                    <button
+                      type="button"
+                      class="btn btn-primary btn-sm"
+                      [disabled]="generatingLabel()"
+                      (click)="handleGenerateLabel()"
+                    >
+                      {{ 'orders.generateLabel' | translate }}
+                    </button>
+                  } @else {
+                    <div class="cell-muted">
+                      {{ 'orders.labelNotAvailable' | translate }}
+                    </div>
+                  }
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/admin/src/app/features/orders/order-detail-modal.component.ts b/src/admin/src/app/features/orders/order-detail-modal.component.ts
index 9d0997a..fd6eb5a 100644
--- a/src/admin/src/app/features/orders/order-detail-modal.component.ts
+++ b/src/admin/src/app/features/orders/order-detail-modal.component.ts
@@ -1,3 +1,4 @@
+import { DatePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -21,6 +22,7 @@ import {
   AdminOrderDetailLine,
   ORDER_STATUSES,
   OrderStatus,
+  PaymentStatus,
   ShipmentInfo,
 } from './order.models';
 import {
@@ -37,6 +39,7 @@ import {
   selector: 'app-order-detail-modal',
   standalone: true,
   imports: [
+    DatePipe,
     FormsModule,
     TranslatePipe,
     I18nCurrencyPipe,
@@ -299,6 +302,38 @@ export class OrderDetailModalComponent {
     });
   }
 
+  statusBadgeClass(status: OrderStatus): string {
+    switch (status) {
+      case 'paid':
+      case 'delivered':
+        return 'badge-success';
+      case 'processing':
+      case 'shipped':
+        return 'badge-info';
+      case 'pendingPayment':
+        return 'badge-warning';
+      case 'cancelled':
+      case 'refunded':
+        return 'badge-danger';
+      default:
+        return 'badge-neutral';
+    }
+  }
+
+  paymentBadgeClass(status: PaymentStatus | string): string {
+    switch (status) {
+      case 'completed':
+        return 'badge-success';
+      case 'pending':
+        return 'badge-warning';
+      case 'failed':
+      case 'refunded':
+        return 'badge-danger';
+      default:
+        return 'badge-neutral';
+    }
+  }
+
   #toPickLine(detail: AdminOrderDetail, line: AdminOrderDetailLine) {
     return {
       orderLineId: line.id,
diff --git a/src/admin/src/app/features/orders/order-invoice-modal.component.html b/src/admin/src/app/features/orders/order-invoice-modal.component.html
index 1e3ee1e..a2a9e70 100644
--- a/src/admin/src/app/features/orders/order-invoice-modal.component.html
+++ b/src/admin/src/app/features/orders/order-invoice-modal.component.html
@@ -1,106 +1,139 @@
 @if (open()) {
   <div
-    class="admin-modal invoice-backdrop fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 print:relative print:inset-auto print:block print:bg-white print:p-0"
+    class="admin-modal invoice-backdrop"
     role="dialog"
     aria-modal="true"
     (click)="handleBackdrop($event)"
   >
     <div
       id="invoice-print-area"
-      class="admin-modal__panel invoice-panel my-4 w-full max-w-2xl bg-white p-8 shadow-lg print:my-0 print:max-w-none print:shadow-none"
+      class="admin-modal__panel admin-modal__panel--lg invoice-panel"
       (click)="$event.stopPropagation()"
     >
-      <div class="mb-6 flex items-start justify-between print:hidden">
-        <h2 class="text-lg font-bold">{{ 'orders.invoice' | translate }}</h2>
-        <div class="flex gap-2">
+      <div class="admin-modal__head print:hidden">
+        <div>
+          <h2>{{ 'orders.invoice' | translate }}</h2>
+          @if (invoice(); as inv) {
+            <p class="page-purpose" style="margin: 0">
+              {{ inv.invoiceNumber }}
+              · {{ inv.issueDate | date: 'yyyy-MM-dd' }}
+            </p>
+          }
+        </div>
+        <div class="page-actions">
           <button
             type="button"
-            class="bg-iled-primary px-4 py-2 text-sm font-semibold"
+            class="btn btn-primary"
             (click)="handlePrint()"
           >
             {{ 'orders.print' | translate }}
           </button>
-          <button type="button" class="px-3 text-iled-grey-dark" (click)="handleClose()">
+          <button
+            type="button"
+            class="admin-modal__close"
+            (click)="handleClose()"
+            [attr.aria-label]="'common.close' | translate"
+          >
             ✕
           </button>
         </div>
       </div>
 
-      @if (loading()) {
-        <app-admin-skeleton variant="detail" [rows]="5" />
-      } @else if (invoice(); as inv) {
-        <header class="mb-8 border-b border-iled-grey-light pb-6">
-          <h1 class="text-2xl font-bold">{{ 'orders.invoice' | translate }}</h1>
-          <p class="mt-1 text-sm text-iled-grey-dark">{{ inv.invoiceNumber }}</p>
-          <p class="text-sm text-iled-grey-dark">
-            {{ 'orders.issueDate' | translate }}:
-            {{ inv.issueDate | date: 'yyyy-MM-dd' }}
-          </p>
-        </header>
+      <div class="admin-modal__body">
+        @if (loading()) {
+          <app-admin-skeleton variant="detail" [rows]="5" />
+        } @else if (invoice(); as inv) {
+          <header class="section-block" style="padding-top: 0">
+            <h1 style="margin: 0 0 6px; font-size: 22px">
+              {{ 'orders.invoice' | translate }}
+            </h1>
+            <div class="cell-muted">{{ inv.invoiceNumber }}</div>
+            <div class="cell-muted">
+              {{ 'orders.issueDate' | translate }}:
+              {{ inv.issueDate | date: 'yyyy-MM-dd' }}
+            </div>
+          </header>
 
-        <div class="mb-8 grid gap-6 sm:grid-cols-2 text-sm">
-          <div>
-            <h3 class="mb-2 font-semibold uppercase text-iled-grey-dark">
-              {{ 'orders.seller' | translate }}
-            </h3>
-            <p class="font-medium">{{ inv.sellerName }}</p>
-            <p>{{ inv.sellerAddress }}</p>
-            <p>NIP: {{ inv.sellerTaxId }}</p>
+          <div class="grid grid-2" style="margin: 8px 0 20px">
+            <div class="section-block" style="border: 0; padding: 0">
+              <h3>{{ 'orders.seller' | translate }}</h3>
+              <div class="cell-strong">{{ inv.sellerName }}</div>
+              <div class="cell-muted">{{ inv.sellerAddress }}</div>
+              <div class="cell-muted">NIP: {{ inv.sellerTaxId }}</div>
+            </div>
+            <div class="section-block" style="border: 0; padding: 0">
+              <h3>{{ 'orders.buyer' | translate }}</h3>
+              <div class="cell-strong">{{ inv.buyerName }}</div>
+              <div class="cell-muted">{{ inv.buyerEmail }}</div>
+              <div class="cell-muted">{{ inv.buyerAddress }}</div>
+            </div>
           </div>
-          <div>
-            <h3 class="mb-2 font-semibold uppercase text-iled-grey-dark">
-              {{ 'orders.buyer' | translate }}
-            </h3>
-            <p class="font-medium">{{ inv.buyerName }}</p>
-            <p>{{ inv.buyerEmail }}</p>
-            <p>{{ inv.buyerAddress }}</p>
-          </div>
-        </div>
 
-        <table class="mb-6 w-full text-left text-sm">
-          <thead class="border-b-2 border-iled-black">
-            <tr>
-              <th class="py-2">{{ 'products.name' | translate }}</th>
-              <th class="py-2">{{ 'orders.qty' | translate }}</th>
-              <th class="py-2 text-right">{{ 'products.price' | translate }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (line of inv.lines; track line.sku) {
-              <tr class="border-b border-iled-grey-light">
-                <td class="py-2">
-                  {{ line.productName }}
-                  <span class="text-iled-grey-dark">({{ line.variantColor }})</span>
-                </td>
-                <td class="py-2">{{ line.quantity }}</td>
-                <td class="py-2 text-right">{{ line.lineTotal | i18nCurrency }}</td>
-              </tr>
+          <div class="card" style="box-shadow: none">
+            <div class="table-wrap">
+              <table class="data">
+                <thead>
+                  <tr>
+                    <th>{{ 'products.name' | translate }}</th>
+                    <th>{{ 'orders.qty' | translate }}</th>
+                    <th style="text-align: right">
+                      {{ 'products.price' | translate }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (line of inv.lines; track line.sku) {
+                    <tr>
+                      <td>
+                        <div class="cell-strong">{{ line.productName }}</div>
+                        <div class="cell-muted">{{ line.variantColor }}</div>
+                      </td>
+                      <td>{{ line.quantity }}</td>
+                      <td style="text-align: right" class="cell-strong">
+                        {{ line.lineTotal | i18nCurrency }}
+                      </td>
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+            <div class="totals">
+              <div class="totals__row">
+                <span>{{ 'orders.subtotal' | translate }}</span>
+                <span>{{ inv.subtotal | i18nCurrency }}</span>
+              </div>
+              <div class="totals__row">
+                <span>{{ 'orders.delivery' | translate }}</span>
+                <span>{{ inv.deliveryCost | i18nCurrency }}</span>
+              </div>
+              @if (inv.discountAmount > 0) {
+                <div class="totals__row">
+                  <span>{{ 'orders.discount' | translate }}</span>
+                  <span>-{{ inv.discountAmount | i18nCurrency }}</span>
+                </div>
+              }
+              <div class="totals__row">
+                <span>{{ 'orders.vat' | translate }}</span>
+                <span>{{ inv.vatAmount | i18nCurrency }}</span>
+              </div>
+              <div class="totals__row totals__row--total">
+                <span>{{ 'orders.total' | translate }}</span>
+                <span>{{ inv.total | i18nCurrency }}</span>
+              </div>
+            </div>
+          </div>
+
+          <p class="cell-muted" style="margin: 16px 0 0; font-size: 12px">
+            {{ 'orders.payment' | translate }}:
+            @if (inv.paymentStatus) {
+              {{ 'orders.paymentStatus.' + inv.paymentStatus | translate }}
+            } @else {
+              —
             }
-          </tbody>
-        </table>
-
-        <div class="space-y-1 text-right text-sm">
-          <div>{{ 'orders.subtotal' | translate }}: {{ inv.subtotal | i18nCurrency }}</div>
-          <div>{{ 'orders.delivery' | translate }}: {{ inv.deliveryCost | i18nCurrency }}</div>
-          @if (inv.discountAmount > 0) {
-            <div>{{ 'orders.discount' | translate }}: -{{ inv.discountAmount | i18nCurrency }}</div>
-          }
-          <div>{{ 'orders.vat' | translate }}: {{ inv.vatAmount | i18nCurrency }}</div>
-          <div class="text-lg font-bold">
-            {{ 'orders.total' | translate }}: {{ inv.total | i18nCurrency }}
-          </div>
-        </div>
-
-        <p class="mt-6 text-xs text-iled-grey-dark">
-          {{ 'orders.payment' | translate }}:
-          @if (inv.paymentStatus) {
-            {{ 'orders.paymentStatus.' + inv.paymentStatus | translate }}
-          } @else {
-            —
-          }
-          · {{ 'orders.orderRef' | translate }}: {{ inv.orderNumber }}
-        </p>
-      }
+            · {{ 'orders.orderRef' | translate }}: {{ inv.orderNumber }}
+          </p>
+        }
+      </div>
     </div>
   </div>
 }
diff --git a/src/admin/src/app/features/products/group-form-modal.component.html b/src/admin/src/app/features/products/group-form-modal.component.html
index 98f6871..4ae941e 100644
--- a/src/admin/src/app/features/products/group-form-modal.component.html
+++ b/src/admin/src/app/features/products/group-form-modal.component.html
@@ -1,86 +1,91 @@
 @if (open()) {
   <div
-    class="admin-modal fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4"
+    class="admin-modal"
     role="dialog"
     aria-modal="true"
     (click)="handleBackdrop($event)"
   >
     <form
-      class="admin-modal__panel my-4 w-full max-w-lg bg-white shadow-lg"
+      class="admin-modal__panel admin-modal__panel--sm"
       (ngSubmit)="handleSubmit($event)"
       (click)="$event.stopPropagation()"
     >
-      <div class="flex items-center justify-between border-b border-iled-grey-light px-6 py-4">
-        <h2 class="text-lg font-bold">
-          @if (mode() === 'create') {
-            {{ 'groups.add' | translate }}
-          } @else {
-            {{ 'groups.edit' | translate }}
-          }
-        </h2>
+      <div class="admin-modal__head">
+        <div>
+          <h2>
+            @if (mode() === 'create') {
+              {{ 'groups.add' | translate }}
+            } @else {
+              {{ 'groups.edit' | translate }}
+            }
+          </h2>
+        </div>
         <button
           type="button"
-          class="text-iled-grey-dark hover:text-iled-black"
+          class="admin-modal__close"
           (click)="handleClose()"
-          aria-label="{{ 'products.close' | translate }}"
+          [attr.aria-label]="'common.close' | translate"
         >
           ✕
         </button>
       </div>
 
-      <div class="space-y-4 px-6 py-4">
+      <div class="admin-modal__body stack" style="gap: 14px">
         @if (error()) {
-          <p class="text-sm text-red-600">{{ error() | translate }}</p>
+          <p class="form-error" style="margin: 0">{{ error() | translate }}</p>
         }
 
-        <div class="grid gap-3 sm:grid-cols-2">
+        <div class="grid grid-2">
           @for (locale of locales; track locale.key) {
-            <div>
-              <label class="mb-1 block text-xs font-medium text-iled-grey-dark">
+            <div class="field">
+              <label [for]="'group-name-' + locale.key">
                 {{ 'groups.name' | translate }} ({{ locale.label }})
               </label>
               <input
+                [id]="'group-name-' + locale.key"
+                class="input"
                 [(ngModel)]="names[locale.key]"
                 [name]="'group-name-' + locale.key"
-                class="w-full border border-iled-grey-light px-3 py-2 text-sm"
               />
             </div>
           }
         </div>
 
-        <div class="grid gap-3 sm:grid-cols-2">
-          <div>
-            <label class="mb-1 block text-xs font-medium text-iled-grey-dark">
-              {{ 'groups.code' | translate }}
-            </label>
+        <div class="grid grid-2">
+          <div class="field">
+            <label for="group-code">{{ 'groups.code' | translate }}</label>
             <input
+              id="group-code"
+              class="input"
               [(ngModel)]="code"
               name="groupCode"
               [readonly]="mode() === 'edit'"
-              [class.bg-iled-bg]="mode() === 'edit'"
-              class="w-full border border-iled-grey-light px-3 py-2 text-sm uppercase"
+              style="text-transform: uppercase"
+              [style.background]="
+                mode() === 'edit' ? 'var(--surface-muted)' : null
+              "
             />
           </div>
-          <div>
-            <label class="mb-1 block text-xs font-medium text-iled-grey-dark">
-              {{ 'groups.sortOrder' | translate }}
-            </label>
+          <div class="field">
+            <label for="group-sort">{{ 'groups.sortOrder' | translate }}</label>
             <input
+              id="group-sort"
+              class="input"
               [(ngModel)]="sortOrder"
               name="groupSortOrder"
               type="number"
               min="1"
-              class="w-full border border-iled-grey-light px-3 py-2 text-sm"
             />
           </div>
         </div>
       </div>
 
-      <div class="flex justify-between border-t border-iled-grey-light px-6 py-4">
+      <div class="admin-modal__foot">
         @if (mode() === 'edit') {
           <button
             type="button"
-            class="text-sm text-red-600 hover:underline"
+            class="btn btn-ghost"
+            style="color: var(--danger)"
             (click)="handleDelete()"
           >
             {{ 'groups.delete' | translate }}
@@ -88,15 +93,15 @@
         } @else {
           <span></span>
         }
-        <div class="flex gap-2">
+        <div class="page-actions">
           <button
             type="button"
-            class="border border-iled-grey-light px-5 py-2 text-sm"
+            class="btn btn-secondary"
             (click)="handleClose()"
           >
             {{ 'products.cancel' | translate }}
           </button>
-          <button type="submit" class="bg-iled-primary px-5 py-2 text-sm font-semibold">
+          <button type="submit" class="btn btn-primary">
             {{ 'products.save' | translate }}
           </button>
         </div>
diff --git a/src/admin/src/app/features/products/product-form-modal.component.html b/src/admin/src/app/features/products/product-form-modal.component.html
index 680527e..3031938 100644
--- a/src/admin/src/app/features/products/product-form-modal.component.html
+++ b/src/admin/src/app/features/products/product-form-modal.component.html
@@ -1,25 +1,25 @@
 @if (open()) {
   <div
-    class="admin-modal fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4"
+    class="admin-modal"
     role="dialog"
     aria-modal="true"
     (click)="handleBackdrop($event)"
   >
     <form
-      class="admin-modal__panel my-4 w-full max-w-4xl overflow-hidden rounded-[var(--radius-lg)] bg-[var(--surface)] shadow-[var(--shadow-md)]"
+      class="admin-modal__panel admin-modal__panel--xl"
       (ngSubmit)="handleSubmit($event)"
       (click)="$event.stopPropagation()"
     >
-      <div class="page-header" style="padding: 20px 24px 12px; margin: 0; border-bottom: 1px solid var(--border)">
+      <div class="admin-modal__head">
         <div>
-          <h1 style="font-size: 1.25rem; margin: 0">
+          <h1>
             @if (mode() === 'create') {
               {{ 'products.add' | translate }}
             } @else {
               {{ 'products.editTitle' | translate }}
             }
           </h1>
-          <p class="page-purpose" style="margin: 4px 0 0">
+          <p class="page-purpose" style="margin: 0">
             @if (mode() === 'edit' && names.pl) {
               {{ names.pl }}
               @if (productCode) {
@@ -41,20 +41,28 @@
           <button type="submit" class="btn btn-primary">
             {{ 'products.saveProduct' | translate }}
           </button>
+          <button
+            type="button"
+            class="admin-modal__close"
+            (click)="handleClose()"
+            [attr.aria-label]="'common.close' | translate"
+          >
+            ✕
+          </button>
         </div>
       </div>
 
       @if (loading()) {
-        <div class="card-pad">
+        <div class="admin-modal__body">
           <app-admin-skeleton variant="form" [rows]="6" />
         </div>
       } @else {
-        <div style="padding: 0 24px">
+        <div class="admin-modal__body" style="padding-top: 8px">
           @if (error()) {
-            <p class="form-error" style="margin: 12px 0 0">{{ error() | translate }}</p>
+            <p class="form-error" style="margin: 0 0 12px">{{ error() | translate }}</p>
           }
 
-          <div class="tabs" role="tablist" style="margin-top: 8px">
+          <div class="tabs" role="tablist">
             <button
               type="button"
               class="tab"
diff --git a/src/admin/src/styles.css b/src/admin/src/styles.css
index ff41aee..d6dd984 100644
--- a/src/admin/src/styles.css
+++ b/src/admin/src/styles.css
@@ -55,4 +55,9 @@
   .invoice-backdrop {
     background: white !important;
   }
+
+  .admin-modal__head.print\:hidden,
+  .print\:hidden {
+    display: none !important;
+  }
 }
diff --git a/src/admin/src/styles/admin-k.css b/src/admin/src/styles/admin-k.css
index bafad39..42f41d4 100644
--- a/src/admin/src/styles/admin-k.css
+++ b/src/admin/src/styles/admin-k.css
@@ -824,6 +824,10 @@ table.data tbody tr:hover {
   background: var(--surface-muted);
 }
 
+table.data tbody tr.is-collected {
+  background: color-mix(in srgb, var(--success-soft) 55%, transparent);
+}
+
 table.data tbody tr.is-selected {
   background: var(--accent-soft);
 }
@@ -1535,10 +1539,145 @@ table.data tbody tr.is-selected {
 }
 
 /* ——— Modal shells ——— */
+.admin-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 24px 16px;
+  background: rgba(17, 24, 39, 0.48);
+}
+
 .admin-modal__panel {
+  width: 100%;
+  max-width: 720px;
+  margin: 12px 0 32px;
   border-radius: var(--radius-lg);
   background: var(--surface);
   box-shadow: var(--shadow-md);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.admin-modal__panel--lg {
+  max-width: 920px;
+}
+
+.admin-modal__panel--xl {
+  max-width: 1100px;
+}
+
+.admin-modal__panel--sm {
+  max-width: 520px;
+}
+
+.admin-modal__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--surface-muted) 65%, transparent) 0%,
+    var(--surface) 100%
+  );
+}
+
+.admin-modal__head h1,
+.admin-modal__head h2 {
+  margin: 0 0 4px;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+}
+
+.admin-modal__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.admin-modal__body {
+  padding: 20px 24px 24px;
+  max-height: min(72vh, 820px);
+  overflow-y: auto;
+}
+
+.admin-modal__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 14px 24px;
+  border-top: 1px solid var(--border);
+  background: var(--surface-muted);
+}
+
+.admin-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.admin-modal__close:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+  background: var(--surface-muted);
+}
+
+.admin-modal .split {
+  gap: 16px;
+}
+
+.admin-modal .card {
+  box-shadow: none;
+}
+
+.admin-modal .totals {
+  display: grid;
+  gap: 8px;
+  padding: 16px 20px;
+}
+
+.admin-modal .totals__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  font-size: 13.5px;
+  color: var(--text-secondary);
+}
+
+.admin-modal .totals__row--total {
+  margin-top: 4px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.admin-modal .row-product {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
 }
 
 /* ——— Premium motion ——— */
diff --git a/src/backend/src/iLED.Application/Payments/Commands/PaymentCommands.cs b/src/backend/src/iLED.Application/Payments/Commands/PaymentCommands.cs
index 98e8637..eaebfce 100644
--- a/src/backend/src/iLED.Application/Payments/Commands/PaymentCommands.cs
+++ b/src/backend/src/iLED.Application/Payments/Commands/PaymentCommands.cs
@@ -28,6 +28,22 @@ public sealed class InitiatePaymentCommandHandler(
         var order = await orderService.GetOrderAsync(
             request.OrderId, cancellationToken);
 
+        if (order.Status != Domain.Enums.OrderStatus.PendingPayment)
+        {
+            return new PaymentResultDto(
+                false,
+                null,
+                "Payment can only be started for unpaid orders.");
+        }
+
+        if (order.PaymentMethod != Domain.Enums.PaymentMethod.PayU)
+        {
+            return new PaymentResultDto(
+                false,
+                null,
+                "Only PayU orders can be paid online.");
+        }
+
         var settings = await integrationSettings.GetAsync(cancellationToken);
         var shopBase = configuration["Seo:ShopBaseUrl"] ?? "http://localhost:4200";
         var notifyUrl = settings.PayUNotifyUrl
@@ -52,14 +68,32 @@ public sealed class InitiatePaymentCommandHandler(
             return new PaymentResultDto(false, null, result.ErrorMessage);
         }
 
-        var payment = new Domain.Payments.Payment
+        var payment = await db.Payments
+            .FirstOrDefaultAsync(
+                p => p.OrderId == order.Id,
+                cancellationToken);
+
+        if (payment is null)
         {
-            OrderId = order.Id,
-            ExternalId = result.ExternalId ?? string.Empty,
-            Amount = order.Total,
-            RedirectUrl = result.RedirectUrl,
-        };
-        db.Add(payment);
+            payment = new Domain.Payments.Payment
+            {
+                OrderId = order.Id,
+                ExternalId = result.ExternalId ?? string.Empty,
+                Amount = order.Total,
+                RedirectUrl = result.RedirectUrl,
+                Status = Domain.Enums.PaymentStatus.Pending,
+            };
+            db.Add(payment);
+        }
+        else
+        {
+            payment.ExternalId = result.ExternalId ?? payment.ExternalId;
+            payment.Amount = order.Total;
+            payment.RedirectUrl = result.RedirectUrl;
+            payment.Status = Domain.Enums.PaymentStatus.Pending;
+            payment.UpdatedAt = DateTime.UtcNow;
+        }
+
         await db.SaveChangesAsync(cancellationToken);
 
         return new PaymentResultDto(true, result.RedirectUrl, null);
diff --git a/src/shop/src/app/core/i18n/translations/cs.ts b/src/shop/src/app/core/i18n/translations/cs.ts
index 60dd4ef..361e8f9 100644
--- a/src/shop/src/app/core/i18n/translations/cs.ts
+++ b/src/shop/src/app/core/i18n/translations/cs.ts
@@ -271,6 +271,12 @@ export const CS_TRANSLATIONS: TranslationMap = {
   'checkout.payWithPayU': 'Zaplatit přes PayU',
   'checkout.orderError': 'Objednávku se nepodařilo vytvořit.',
   'checkout.thankYou': 'Děkujeme za objednávku!',
+  'checkout.paymentPendingTitle': 'Platba nebyla dokončena',
+  'checkout.paymentPendingBody':
+    'Objednávka je rezervovaná, ale platba neproběhla. Můžete to zkusit znovu.',
+  'checkout.payAgain': 'Zaplatit znovu',
+  'checkout.payingAgain': 'Přesměrování…',
+  'checkout.payAgainError': 'Platbu se nepodařilo spustit. Zkuste to znovu.',
   'checkout.orderNumber': 'Číslo objednávky:',
   'checkout.status': 'Stav:',
   'checkout.status.PendingPayment': 'Čeká na platbu',
diff --git a/src/shop/src/app/core/i18n/translations/de.ts b/src/shop/src/app/core/i18n/translations/de.ts
index 7bd31b4..6260096 100644
--- a/src/shop/src/app/core/i18n/translations/de.ts
+++ b/src/shop/src/app/core/i18n/translations/de.ts
@@ -271,6 +271,13 @@ export const DE_TRANSLATIONS: TranslationMap = {
   'checkout.payWithPayU': 'Mit PayU bezahlen',
   'checkout.orderError': 'Bestellung fehlgeschlagen.',
   'checkout.thankYou': 'Vielen Dank für Ihre Bestellung!',
+  'checkout.paymentPendingTitle': 'Zahlung nicht abgeschlossen',
+  'checkout.paymentPendingBody':
+    'Ihre Bestellung ist reserviert, aber die Zahlung ist fehlgeschlagen. Sie können es erneut versuchen.',
+  'checkout.payAgain': 'Erneut zahlen',
+  'checkout.payingAgain': 'Weiterleitung…',
+  'checkout.payAgainError':
+    'Zahlung konnte nicht gestartet werden. Bitte erneut versuchen.',
   'checkout.orderNumber': 'Bestellnummer:',
   'checkout.status': 'Status:',
   'checkout.status.PendingPayment': 'Zahlung ausstehend',
diff --git a/src/shop/src/app/core/i18n/translations/en.ts b/src/shop/src/app/core/i18n/translations/en.ts
index 06c6f5c..2c7abb7 100644
--- a/src/shop/src/app/core/i18n/translations/en.ts
+++ b/src/shop/src/app/core/i18n/translations/en.ts
@@ -271,6 +271,12 @@ export const EN_TRANSLATIONS: TranslationMap = {
   'checkout.payWithPayU': 'Pay with PayU',
   'checkout.orderError': 'Order placement failed.',
   'checkout.thankYou': 'Thank you for your order!',
+  'checkout.paymentPendingTitle': 'Payment not completed',
+  'checkout.paymentPendingBody':
+    'Your order is reserved, but payment did not go through. You can try again.',
+  'checkout.payAgain': 'Pay again',
+  'checkout.payingAgain': 'Redirecting…',
+  'checkout.payAgainError': 'Could not start payment. Please try again.',
   'checkout.orderNumber': 'Order number:',
   'checkout.status': 'Status:',
   'checkout.status.PendingPayment': 'Pending payment',
diff --git a/src/shop/src/app/core/i18n/translations/pl.ts b/src/shop/src/app/core/i18n/translations/pl.ts
index 38bbbbc..d1f093a 100644
--- a/src/shop/src/app/core/i18n/translations/pl.ts
+++ b/src/shop/src/app/core/i18n/translations/pl.ts
@@ -271,6 +271,12 @@ export const PL_TRANSLATIONS: TranslationMap = {
   'checkout.payWithPayU': 'Zapłać przez PayU',
   'checkout.orderError': 'Błąd składania zamówienia.',
   'checkout.thankYou': 'Dziękujemy za zamówienie!',
+  'checkout.paymentPendingTitle': 'Płatność nie została dokończona',
+  'checkout.paymentPendingBody':
+    'Zamówienie jest zarezerwowane, ale płatność nie przeszła. Możesz spróbować ponownie.',
+  'checkout.payAgain': 'Zapłać ponownie',
+  'checkout.payingAgain': 'Przekierowanie…',
+  'checkout.payAgainError': 'Nie udało się uruchomić płatności. Spróbuj ponownie.',
   'checkout.orderNumber': 'Numer zamówienia:',
   'checkout.status': 'Status:',
   'checkout.status.PendingPayment': 'Oczekuje na płatność',
diff --git a/src/shop/src/app/features/checkout/checkout.component.ts b/src/shop/src/app/features/checkout/checkout.component.ts
index 026debb..53b720a 100644
--- a/src/shop/src/app/features/checkout/checkout.component.ts
+++ b/src/shop/src/app/features/checkout/checkout.component.ts
@@ -351,10 +351,13 @@ export class CheckoutComponent implements OnInit {
 export class OrderConfirmationComponent implements OnInit {
   readonly #orders = inject(OrderService);
   readonly #route = inject(ActivatedRoute);
+  readonly #router = inject(Router);
   readonly #i18n = inject(I18nService);
 
   readonly order = signal<OrderDto | null>(null);
   readonly syncing = signal(false);
+  readonly paying = signal(false);
+  readonly payError = signal('');
 
   ngOnInit(): void {
     this.#route.paramMap.subscribe((params) => {
@@ -365,8 +368,43 @@ export class OrderConfirmationComponent implements OnInit {
     });
   }
 
+  needsPayment(order: OrderDto): boolean {
+    return (
+      order.paymentMethod === 'PayU' &&
+      order.status === 'PendingPayment'
+    );
+  }
+
+  handlePayAgain(): void {
+    const order = this.order();
+    if (!order || this.paying()) {
+      return;
+    }
+
+    this.paying.set(true);
+    this.payError.set('');
+    this.#orders.initiatePayment(order.id).subscribe({
+      next: (pay) => {
+        this.paying.set(false);
+        if (pay.success && pay.redirectUrl) {
+          this.#goToPayment(pay.redirectUrl, order.id);
+          return;
+        }
+
+        this.payError.set(
+          pay.errorMessage || this.#i18n.t('checkout.payAgainError'),
+        );
+      },
+      error: () => {
+        this.paying.set(false);
+        this.payError.set(this.#i18n.t('checkout.payAgainError'));
+      },
+    });
+  }
+
   async #loadAndSync(orderId: string): Promise<void> {
     this.syncing.set(true);
+    this.payError.set('');
     try {
       // PayU continueUrl lands here before/without webhook — pull status.
       for (let attempt = 0; attempt < 4; attempt++) {
@@ -392,6 +430,25 @@ export class OrderConfirmationComponent implements OnInit {
     }
   }
 
+  /** Internal sandbox paths stay same-origin; live PayU uses absolute URL. */
+  #goToPayment(redirectUrl: string, orderId: string): void {
+    if (
+      redirectUrl.startsWith('/') ||
+      redirectUrl.includes('/checkout/payu-sandbox/')
+    ) {
+      try {
+        const url = new URL(redirectUrl, window.location.origin);
+        void this.#router.navigateByUrl(url.pathname + url.search);
+        return;
+      } catch {
+        void this.#router.navigate(['/order', orderId]);
+        return;
+      }
+    }
+
+    window.location.href = redirectUrl;
+  }
+
   paymentHint(method: string): string {
     const key = `checkout.paymentHint.${enumKey(method)}`;
     const translated = this.#i18n.t(key);
diff --git a/src/shop/src/app/features/checkout/order-confirmation.component.html b/src/shop/src/app/features/checkout/order-confirmation.component.html
index 8ad8986..68d74bc 100644
--- a/src/shop/src/app/features/checkout/order-confirmation.component.html
+++ b/src/shop/src/app/features/checkout/order-confirmation.component.html
@@ -4,9 +4,19 @@
       <p class="text-iled-grey-dark">{{ 'common.loading' | translate }}</p>
     }
     @if (order(); as o) {
-      <h1 class="mb-4 text-3xl font-bold">
-        {{ 'checkout.thankYou' | translate }}
-      </h1>
+      @if (needsPayment(o)) {
+        <h1 class="mb-4 text-3xl font-bold">
+          {{ 'checkout.paymentPendingTitle' | translate }}
+        </h1>
+        <p class="mb-6 text-iled-grey-dark">
+          {{ 'checkout.paymentPendingBody' | translate }}
+        </p>
+      } @else {
+        <h1 class="mb-4 text-3xl font-bold">
+          {{ 'checkout.thankYou' | translate }}
+        </h1>
+      }
+
       <p class="mb-2">
         {{ 'checkout.orderNumber' | translate }}
         <strong>{{ o.orderNumber }}</strong>
@@ -35,12 +45,33 @@
         </p>
       }
       <p class="mb-8 text-xl font-bold">{{ o.total | i18nCurrency }}</p>
-      <a
-        routerLink="/"
-        class="inline-flex bg-iled-black px-8 py-3 font-medium text-white"
-      >
-        {{ 'checkout.backToShop' | translate }}
-      </a>
+
+      @if (payError()) {
+        <p class="mb-4 text-sm text-red-700">{{ payError() }}</p>
+      }
+
+      <div class="flex flex-wrap items-center justify-center gap-3">
+        @if (needsPayment(o)) {
+          <button
+            type="button"
+            class="inline-flex bg-iled-primary px-8 py-3 font-semibold text-iled-black disabled:opacity-50"
+            [disabled]="paying()"
+            (click)="handlePayAgain()"
+          >
+            @if (paying()) {
+              {{ 'checkout.payingAgain' | translate }}
+            } @else {
+              {{ 'checkout.payAgain' | translate }}
+            }
+          </button>
+        }
+        <a
+          routerLink="/"
+          class="inline-flex border border-iled-grey-light bg-white px-8 py-3 font-medium text-iled-black"
+        >
+          {{ 'checkout.backToShop' | translate }}
+        </a>
+      </div>
     }
   </div>
 </app-shell>