admin/import page and functionality

pages/admin/importar.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="container">
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+    </BModal>
     <div class="row">
       <div class="col-10"></div>
       <h1 class="title">Importar productos desde CSV</h1>
@@ -17,22 +24,32 @@
         />
       </div>
       <p v-if="error" class="error">{{ error }}</p>
-      <SubmitButton text="Importar"></SubmitButton>
+      <SubmitButton text="Importar" />
     </form>
   </div>
 </template>
 
 <script>
+import { useAuthStore } from '@/stores/auth'
 export default {
-  layout: 'admin',
+  setup() {
-  middleware: 'auth',
+    definePageMeta({
-  meta: {
+      layout: 'admin',
-    auth: { authority: 'SITE_ADMIN' },
+      middleware: 'auth',
+      auth: { authority: 'SITE_ADMIN' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
   },
   data() {
     return {
       file: null,
       error: null,
+      modalText: '',
+      modalColor: '',
+      activeModal: false
     }
   },
 
@@ -46,15 +63,22 @@ export default {
       this.error = null
       const formData = new FormData()
       formData.append('csv_file', this.file)
-
+      //TODO: Review functionality
       try {
-        await this.$api.post('/load_coops/', formData, {
+        await $fetch('/load_coops/',{
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: formData,
           headers: {
-            'Content-Type': 'multipart/form-data',
+            Authorization: `Bearer ${this.auth.access}`,
           },
         })
-      } catch {
+        this.modalText = 'Productos importados correctamente'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch (error) {
         this.error = 'Ha habido un error'
+        console.error('Error importing products:', error)
       }
     },
   },