From 7beac90c05f5dbf363b67de450e9c8ca71dd5872 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Sat, 11 Jul 2026 13:52:35 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20mejora=20selector=20de=20productos=20co?=
 =?UTF-8?q?n=20autocomplete=20y=20est=C3=A9tica=20del=20modal=20en=20gesti?=
 =?UTF-8?q?=C3=B3n=20de=20im=C3=A1genes=20de=20cat=C3=A1logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CatalogueImagesManagement.vue | 38 +++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/CatalogueImagesManagement.vue b/src/components/CatalogueImagesManagement.vue
index f752ada..2542359 100644
--- a/src/components/CatalogueImagesManagement.vue
+++ b/src/components/CatalogueImagesManagement.vue
@@ -80,55 +80,67 @@
       </v-col>
     </v-row>
 
-    <v-dialog v-model="dialog.show" max-width="500" persistent>
-      <v-card>
-        <v-card-title>
+    <v-dialog v-model="dialog.show" max-width="520" persistent>
+      <v-card elevation="2" rounded="lg">
+        <v-card-title class="text-h6 font-weight-bold pa-6 pb-0">
+          <v-icon :icon="dialog.isEdit ? 'mdi-pencil' : 'mdi-plus-circle-outline'" class="mr-2" color="primary" />
           {{ dialog.isEdit ? 'Editar' : 'Agregar' }} Imagen de Catálogo
         </v-card-title>
-        <v-card-text>
+        <v-divider class="mt-3" />
+        <v-card-text class="pa-6">
           <v-form ref="formRef">
-            <v-select
+            <v-label class="font-weight-medium mb-1 d-block">Producto</v-label>
+            <v-autocomplete
               v-model="form.product"
               :items="productOptions"
-              label="Producto"
+              placeholder="Buscar producto…"
               :rules="[(v) => !!v || 'Seleccione un producto']"
               item-title="name"
               item-value="id"
               variant="outlined"
               :disabled="dialog.isEdit"
-              class="mb-3"
+              class="mb-5"
+              clearable
+              prepend-inner-icon="mdi-package-variant-closed"
+              density="comfortable"
             />
 
+            <v-label class="font-weight-medium mb-1 d-block">Imagen</v-label>
             <v-file-input
               ref="fileInputRef"
-              label="Imagen"
               accept="image/*"
               :rules="[(v) => !!v || 'Seleccione una imagen']"
               variant="outlined"
               prepend-icon="mdi-camera"
-              class="mb-3"
+              prepend-inner-icon="mdi-image-outline"
+              class="mb-5"
               @update:model-value="onFileSelected"
+              density="comfortable"
+              hide-details="auto"
             />
 
             <v-img
               v-if="form.preview"
               :src="form.preview"
-              max-height="200"
+              max-height="220"
               contain
-              class="mb-3 rounded"
+              class="rounded-lg border mt-2"
             />
           </v-form>
         </v-card-text>
-        <v-card-actions>
+        <v-divider />
+        <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="closeDialog">Cancelar</v-btn>
+          <v-btn variant="tonal" @click="closeDialog">Cancelar</v-btn>
           <v-btn
             color="primary"
             variant="elevated"
             :loading="submitting"
             :disabled="submitting"
             @click="submitForm"
+            class="ml-2"
           >
+            <v-icon start :icon="dialog.isEdit ? 'mdi-content-save' : 'mdi-upload'" />
             {{ dialog.isEdit ? 'Actualizar' : 'Agregar' }}
           </v-btn>
         </v-card-actions>
-- 
2.49.1