From d8a5945bce8e329e0db33245e9671124db6b5461 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Wed, 9 Apr 2025 10:37:30 +0200
Subject: [PATCH 1/2] refactor: refs #8833 streamline state color handling in
 Claim components

---
 src/pages/Claim/Card/ClaimDescriptor.vue | 16 +++-------------
 src/pages/Claim/Card/ClaimSummary.vue    | 12 +++---------
 src/pages/Claim/ClaimList.vue            | 11 ++++-------
 3 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 76ede81ed..a0ff401c6 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -28,14 +28,8 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
+function stateColor(entity) {
+    return entity?.claimState?.classColor || 'grey';
 }
 
 onMounted(async () => {
@@ -56,11 +50,7 @@ onMounted(async () => {
         <template #body="{ entity }">
             <VnLv v-if="entity.claimState" :label="t('claim.state')">
                 <template #value>
-                    <QBadge
-                        :color="stateColor(entity.claimState.code)"
-                        text-color="black"
-                        dense
-                    >
+                    <QBadge :color="stateColor(entity)" text-color="black" dense>
                         {{ entity.claimState.description }}
                     </QBadge>
                 </template>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 67d57004f..93f87df03 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -108,15 +108,9 @@ const markerLabels = [
     { value: 5, label: t('claim.person') },
 ];
 
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-
 function stateColor(code) {
-    return STATE_COLOR[code];
+    const claimState = claimStates.value.find((state) => state.code === code);
+    return claimState?.classColor || 'grey';
 }
 
 const developmentColumns = ref([
@@ -188,7 +182,7 @@ function claimUrl(section) {
 <template>
     <FetchData
         url="ClaimStates"
-        :filter="{ fields: ['id', 'description'] }"
+        :filter="{ fields: ['id', 'description', 'code', 'classColor'] }"
         @on-fetch="(data) => (claimStates = data)"
         auto-load
     />
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index e0d9928f9..d1d6e2a91 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -101,7 +101,10 @@ const columns = computed(() => [
         name: 'stateCode',
         chip: {
             condition: () => true,
-            color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
+            color: ({ stateCode }) => {
+                const state = states.value?.find(({ code }) => code === stateCode);
+                return state ? `bg-${state.classColor}` : 'bg-grey';
+            },
         },
         columnFilter: {
             name: 'claimStateFk',
@@ -131,12 +134,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-
-const STATE_COLOR = {
-    pending: 'bg-warning',
-    loses: 'bg-negative',
-    resolved: 'bg-positive',
-};
 </script>
 
 <template>

From 5c6e97b42a289514a10e91e1e31ff535c9a99dca Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Fri, 11 Apr 2025 10:44:57 +0200
Subject: [PATCH 2/2] feat: refs #8833 add neutral color variable and update
 state color handling in claim components

---
 src/css/quasar.variables.scss            | 4 ++++
 src/pages/Claim/Card/ClaimDescriptor.vue | 7 +++++--
 src/pages/Claim/Card/ClaimSummary.vue    | 2 +-
 src/pages/Claim/ClaimList.vue            | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 45d18af7e..c443c5826 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -18,6 +18,7 @@ $positive: #c8e484;
 $negative: #fb5252;
 $info: #84d0e2;
 $warning: #f4b974;
+$neutral: #b0b0b0;
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
 $alert: $negative;
@@ -51,3 +52,6 @@ $width-xl: 1600px;
 .bg-alert {
     background-color: $negative;
 }
+.bg-neutral {
+    background-color: $neutral;
+}
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index a0ff401c6..3728a18c0 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -29,7 +29,7 @@ const entityId = computed(() => {
 });
 
 function stateColor(entity) {
-    return entity?.claimState?.classColor || 'grey';
+    return entity?.claimState?.classColor;
 }
 
 onMounted(async () => {
@@ -50,7 +50,10 @@ onMounted(async () => {
         <template #body="{ entity }">
             <VnLv v-if="entity.claimState" :label="t('claim.state')">
                 <template #value>
-                    <QBadge :color="stateColor(entity)" text-color="black" dense>
+                    <QBadge
+                        :color="stateColor(entity)"
+                        style="color: var(--vn-black-text-color)"
+                    >
                         {{ entity.claimState.description }}
                     </QBadge>
                 </template>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 93f87df03..08df506d4 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -110,7 +110,7 @@ const markerLabels = [
 
 function stateColor(code) {
     const claimState = claimStates.value.find((state) => state.code === code);
-    return claimState?.classColor || 'grey';
+    return claimState?.classColor;
 }
 
 const developmentColumns = ref([
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index d1d6e2a91..d6a77bafe 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -103,7 +103,7 @@ const columns = computed(() => [
             condition: () => true,
             color: ({ stateCode }) => {
                 const state = states.value?.find(({ code }) => code === stateCode);
-                return state ? `bg-${state.classColor}` : 'bg-grey';
+                return `bg-${state.classColor}`;
             },
         },
         columnFilter: {