From b32cc48fd9a76776e9d9a460810ebdf1e4e552fc Mon Sep 17 00:00:00 2001
From: Nino Righi <n.righi@paragon-data.de>
Date: Thu, 20 Nov 2025 16:58:02 +0000
Subject: [PATCH] Merged PR 2036: feature(libs-icons,
 crm-customer-card-transactions): Added Refresh Icon, Adde...

feature(libs-icons, crm-customer-card-transactions): Added Refresh Icon, Added Spacer to Transaction Layout, Added Refresh CTA Styling

Ref: #5493
---
 .../crm-feature-customer-card-transactions.component.css  | 8 ++++++--
 .../crm-feature-customer-card-transactions.component.html | 6 ++++--
 .../crm-feature-customer-card-transactions.component.ts   | 8 ++++++--
 libs/icons/src/lib/icons.ts                               | 4 ++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.css b/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.css
index f150986a0..91eeff1ef 100644
--- a/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.css
+++ b/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.css
@@ -6,7 +6,7 @@
 
 /* Header Row */
 .cdk-header-row {
-  background-color: #CED4DA;
+  background-color: #ced4da;
   height: 48px;
   display: table-row;
 }
@@ -17,7 +17,7 @@
   font-weight: 700;
   color: #212529;
   padding: 16px 8px;
-  background-color: #CED4DA;
+  background-color: #ced4da;
 }
 
 .cdk-header-cell:first-child {
@@ -50,3 +50,7 @@
 .cdk-cell:last-child {
   padding-right: 24px;
 }
+
+.transparent-icon-button {
+  @apply text-isa-neutral-900 bg-transparent hover:bg-transparent disabled:bg-transparent disabled:hover:bg-transparent;
+}
diff --git a/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.html b/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.html
index 6789622d7..80bd39f4c 100644
--- a/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.html
+++ b/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.html
@@ -1,13 +1,14 @@
 <div class="flex flex-col gap-[24px] px-4">
   @if (transactions()?.length) {
-    <div class="flex flex-row gap-4 items-center">
+    <div class="flex flex-row items-center">
       <h2 class="isa-text-body-1-bold text-isa-neutral-900">
         Letzte Transaktionen des Kunden
       </h2>
 
       <ui-icon-button
+        class="transparent-icon-button"
         (click)="refresh()"
-        name="isaActionSearch"
+        name="isaActionRefresh"
         color="tertiary"
         [pending]="isLoading()"
         [disabled]="isLoading()"
@@ -18,6 +19,7 @@
 
   @if (isLoading()) {
     <div class="text-isa-neutral-500 text-sm">Lade Transaktionen...</div>
+    <div class="h-[100rem]"></div>
   } @else if (error()) {
     <div class="text-isa-accent-red text-sm">
       Fehler beim Laden der Transaktionen
diff --git a/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.ts b/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.ts
index 50bb06589..19c5ab9d1 100644
--- a/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.ts
+++ b/libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.ts
@@ -12,7 +12,7 @@ import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import {
   isaActionPolygonUp,
   isaActionPolygonDown,
-  isaActionSearch,
+  isaActionRefresh,
 } from '@isa/icons';
 import { logger } from '@isa/core/logging';
 import { EmptyStateComponent } from '@isa/ui/empty-state';
@@ -31,7 +31,11 @@ import { IconButtonComponent } from '@isa/ui/buttons';
     IconButtonComponent,
   ],
   providers: [
-    provideIcons({ isaActionPolygonUp, isaActionPolygonDown, isaActionSearch }),
+    provideIcons({
+      isaActionPolygonUp,
+      isaActionPolygonDown,
+      isaActionRefresh,
+    }),
   ],
   templateUrl: './crm-feature-customer-card-transactions.component.html',
   styleUrl: './crm-feature-customer-card-transactions.component.css',
diff --git a/libs/icons/src/lib/icons.ts b/libs/icons/src/lib/icons.ts
index a6a914757..1dbc59052 100644
--- a/libs/icons/src/lib/icons.ts
+++ b/libs/icons/src/lib/icons.ts
@@ -36,6 +36,9 @@ export const isaActionFilter =
 export const isaActionSort =
   '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">  <path d="M7 4V20M7 20L3 16M7 20L11 16M17 20V4M17 4L13 8M17 4L21 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 
+export const isaActionRefresh =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M20.453 12.893C20.1752 15.5029 18.6964 17.9487 16.2494 19.3614C12.1839 21.7086 6.98539 20.3157 4.63818 16.2502L4.38818 15.8172M3.54613 11.107C3.82393 8.49711 5.30272 6.05138 7.74971 4.63862C11.8152 2.29141 17.0137 3.68434 19.3609 7.74983L19.6109 8.18285M3.49316 18.0661L4.22521 15.334L6.95727 16.0661M17.0424 7.93401L19.7744 8.66606L20.5065 5.93401" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
 export const isaActionSearch =
   '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">  <path fill-rule="evenodd" clip-rule="evenodd" d="M11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.8859 18 14.5977 17.2542 15.8564 16.0414C15.8827 16.0072 15.9115 15.9742 15.9429 15.9429C15.9742 15.9115 16.0072 15.8827 16.0414 15.8564C17.2542 14.5977 18 12.8859 18 11C18 7.13401 14.866 4 11 4ZM18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177Z" fill="currentColor"/></svg>';
 
@@ -44,6 +47,7 @@ export const isaActionPrinter =
 
 export const isaActionScanner =
   '<svg width="24" height="24" viewBox="0 0 6 6" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M4.802,3.842l0,0.181c0.002,0.266 0.006,0.414 -0.053,0.529c-0.046,0.09 -0.119,0.164 -0.209,0.21c-0,-0 -0,-0 -0,-0c-0.132,0.067 -0.306,0.052 -0.65,0.052l-0.004,0.004l-0.002,-0l0.004,-0.004l-0.071,0.001l-0.002,0c-0.044,0.005 -0.078,0.019 -0.106,0.039c-0.065,0.043 -0.107,0.117 -0.107,0.2c-0,-0 0.021,0.24 0.241,0.24l0.047,-0c0.462,-0 0.691,-0.015 0.868,-0.105c0.18,-0.092 0.327,-0.239 0.419,-0.419c0,-0 0,-0 0,-0c0.09,-0.177 0.105,-0.406 0.105,-0.868l-0,-0.047c-0,-0.119 -0.016,-0.149 -0.079,-0.198c-0.063,-0.048 -0.078,-0.043 -0.161,-0.043c-0.129,-0 -0.233,0.101 -0.24,0.228Zm-2.872,0.949l-0.182,0c-0.266,0.002 -0.413,0.006 -0.528,-0.053c-0.091,-0.046 -0.164,-0.12 -0.21,-0.21c0,-0 0,-0 0,-0c-0.067,-0.132 -0.052,-0.306 -0.052,-0.65l-0.004,-0.004l0,-0.001l0.004,0.004l-0.001,-0.072l0,-0.002c-0.004,-0.043 -0.019,-0.078 -0.038,-0.106c-0.043,-0.065 -0.117,-0.107 -0.2,-0.107c-0,-0 -0.24,0.021 -0.241,0.241l0,0.046c0,0.462 0.015,0.692 0.104,0.868c0.092,0.181 0.239,0.328 0.419,0.42c0,0 0,0 0,0c0.177,0.09 0.406,0.105 0.868,0.106l0.047,-0c0.119,-0 0.15,-0.016 0.198,-0.079c0.049,-0.063 0.043,-0.078 0.043,-0.161c0.001,-0.128 -0.1,-0.233 -0.227,-0.24Zm1.434,-2.425l-0,1.02c-0,0.133 0.107,0.24 0.24,0.24c0.132,0 0.24,-0.107 0.24,-0.24l-0,-1.02c-0,-0.132 -0.108,-0.24 -0.24,-0.24c-0.133,0 -0.24,0.108 -0.24,0.24Zm0.72,0l-0,1.02c-0,0.133 0.107,0.24 0.24,0.24c0.132,0 0.24,-0.107 0.24,-0.24l-0,-1.02c-0,-0.132 -0.108,-0.24 -0.24,-0.24c-0.133,0 -0.24,0.108 -0.24,0.24Zm-2.16,0l-0,1.02c-0,0.133 0.107,0.24 0.24,0.24c0.132,0 0.24,-0.107 0.24,-0.24l-0,-1.02c-0,-0.132 -0.108,-0.24 -0.24,-0.24c-0.133,0 -0.24,0.108 -0.24,0.24Zm0.72,0l-0,1.02c-0,0.133 0.107,0.24 0.24,0.24c0.132,0 0.24,-0.107 0.24,-0.24l-0,-1.02c-0,-0.132 -0.108,-0.24 -0.24,-0.24c-0.133,0 -0.24,0.108 -0.24,0.24Zm-1.44,0l-0,1.02c-0,0.133 0.107,0.24 0.24,0.24c0.132,0 0.24,-0.107 0.24,-0.24l-0,-1.02c-0,-0.132 -0.108,-0.24 -0.24,-0.24c-0.133,0 -0.24,0.108 -0.24,0.24Zm2.728,-1.883l-0.089,0c-0.119,0 -0.149,0.016 -0.198,0.079c-0.049,0.064 -0.043,0.078 -0.043,0.161c-0,0.129 0.101,0.234 0.228,0.24l0.181,-0l0.179,-0.001c0.159,0.001 0.263,0.01 0.35,0.054c0.09,0.046 0.164,0.119 0.21,0.209c-0,0 -0,0 -0,0c0.067,0.132 0.052,0.306 0.052,0.65l0.004,0.005l-0,0.001l-0.004,-0.004l0.001,0.071l0,0.002c0.005,0.044 0.019,0.078 0.039,0.106c0.043,0.065 0.116,0.107 0.2,0.107l0.001,0c0.014,-0.001 0.239,-0.028 0.239,-0.241l-0,-0.047c-0,-0.462 -0.015,-0.691 -0.105,-0.867c-0.092,-0.181 -0.239,-0.328 -0.419,-0.42c-0,0 -0,0 -0,0c-0.171,-0.087 -0.392,-0.104 -0.826,-0.105Zm-2.971,1.446l-0,-0.182c-0.002,-0.266 -0.006,-0.413 0.053,-0.528c0.046,-0.091 0.119,-0.164 0.21,-0.21c-0,-0 -0,-0 -0,-0c0.131,-0.067 0.305,-0.052 0.649,-0.052l0.005,-0.005l0.001,0.001l-0.004,0.004l0.071,-0.002l0.002,0c0.044,-0.004 0.078,-0.019 0.106,-0.039c0.065,-0.043 0.107,-0.116 0.107,-0.199c0,-0 -0.021,-0.24 -0.241,-0.24l-0.047,-0c-0.462,-0 -0.691,0.014 -0.867,0.104c-0.181,0.092 -0.328,0.239 -0.42,0.42c0,-0 0,-0 0,-0c-0.09,0.176 -0.105,0.406 -0.105,0.868l0,0.046c0,0.119 0.016,0.15 0.079,0.198c0.064,0.049 0.078,0.044 0.161,0.044c0.129,-0 0.234,-0.101 0.24,-0.228Z"/></svg>';
+
 export const isaActionEdit =
   '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1,0,0,1,0.835859,1.16414)"><g><path d="M15.293,1.293L2.087,14.499C1.72,14.866 1.545,15.055 1.406,15.267C1.257,15.492 1.139,15.737 1.056,15.994C0.978,16.235 0.939,16.49 0.882,17.005L0.506,20.39C0.473,20.691 0.578,20.992 0.793,21.207C1.008,21.422 1.308,21.527 1.61,21.494L4.995,21.118C5.51,21.061 5.765,21.022 6.006,20.944C6.263,20.861 6.508,20.743 6.733,20.594L6.734,20.594C6.945,20.455 7.135,20.28 7.501,19.913L20.707,6.707C22.202,5.212 22.202,2.788 20.707,1.293C19.212,-0.202 16.788,-0.202 15.293,1.293ZM13,6.414L15.586,9L6.087,18.499C5.864,18.721 5.76,18.84 5.632,18.925C5.557,18.974 5.476,19.013 5.39,19.041C5.244,19.088 5.086,19.095 4.774,19.13L2.632,19.368L2.87,17.226C2.905,16.914 2.912,16.756 2.959,16.61C2.987,16.524 3.026,16.443 3.076,16.368C3.16,16.239 3.279,16.136 3.501,15.913L13,6.414ZM17,7.586L14.414,5L16.707,2.707C17.421,1.993 18.579,1.993 19.293,2.707C20.007,3.421 20.007,4.579 19.293,5.293L17,7.586Z"/></g></g></svg>';