#49 feat: recuadro informativo de productos en el mapa de provenance sin desplazar posiciones

src/components/provenance/ProvenanceRelationModal.vue

@@ -4,7 +4,7 @@
     :model-value="visible"
     @update:model-value="onUpdateVisible"
   >
-    <v-card v-if="relation">
+    <v-card v-if="relation || product">
       <v-card-title class="d-flex align-center">
         <v-icon class="mr-2" color="teal" icon="mdi-package-variant" />
         <span class="font-weight-bold">{{ productName }}</span>
@@ -17,6 +17,20 @@
           class="provenance-image rounded-lg border mb-3"
           :src="productImage"
         >
+        <div
+          v-if="!hasLocation"
+          class="d-flex align-start mb-3"
+        >
+          <v-icon class="mr-3" color="grey" icon="mdi-map-marker-off" />
+          <div>
+            <div class="text-subtitle-2 font-weight-bold">
+              Geolocalización
+            </div>
+            <div class="text-body-1">
+              {{ locationNote }}
+            </div>
+          </div>
+        </div>
         <div
           v-for="row in rows"
           :key="row.kind"
@@ -78,6 +92,11 @@
 
   const productName = computed(() => props.product?.name || 'Producto')
   const productImage = computed(() => props.product?.catalogue_images?.[0] || null)
+  const hasLocation = computed(() => !!(props.relation?.municipality || props.relation?.department))
+  const locationNote = computed(() => {
+    if (props.relation) return 'Aún sin geolocalización registrada.'
+    return 'Aún no se ha vinculado un proveedor a este producto.'
+  })
 
   function entityDetails (kind, entity) {
     const details = []