From 0a271ea4697b3eecb13bc84fa35a4431349c1b98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 21 Aug 2025 14:21:18 +0200
Subject: [PATCH] admin/cooperativas page and functionality

---
 pages/admin/cooperativas.vue | 180 +++++++++++++++++++++++++++++++++++
 pages/admin/estadisticas.vue |  80 ++++++++++++++++
 pages/admin/importar.vue     |  90 ++++++++++++++++++
 pages/admin/index.vue        |  29 ++++++
 4 files changed, 379 insertions(+)
 create mode 100644 pages/admin/cooperativas.vue
 create mode 100644 pages/admin/estadisticas.vue
 create mode 100644 pages/admin/importar.vue
 create mode 100644 pages/admin/index.vue

diff --git a/pages/admin/cooperativas.vue b/pages/admin/cooperativas.vue
new file mode 100644
index 0000000..faefddf
--- /dev/null
+++ b/pages/admin/cooperativas.vue
@@ -0,0 +1,180 @@
+<template>
+  <div v-if="!loading" 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">
+        <h1 class="title">Administrar cooperativas</h1>
+      </div>
+    </div>
+    <template v-if="companies">
+      <v-data-table
+        v-model="selectedItemsIndexes"
+        show-select
+        :single-select="false"
+        :headers="headers"
+        :search="search"
+        :items="companies"
+        :loading="loading"
+        loading-text="Cargando cooperativas..."
+      >
+        <template #top>
+          <v-toolbar flat color="white">
+            <!-- Search -->
+            <v-text-field
+              v-model="search"
+              append-icon="mdi-magnify"
+              label="Buscar cooperativa"
+              single-line
+              hide-details
+            />
+            <!-- . Search -->
+          </v-toolbar>
+        </template>
+        <template #[`item.company_name`]="item">
+          <a :href="`/c/${item.item.id}`" target="_blank" class="mr-2">
+            {{ item.item.company_name }}
+          </a>
+        </template>
+        <template #[`item.is_validated`]="item">
+          <v-icon v-if="item.item.is_validated" small class="mr-2 validated">
+            mdi-check
+          </v-icon>
+          <v-icon v-else small class="mr-2 not-validated"> mdi-close </v-icon>
+        </template>
+      </v-data-table>
+    </template>
+    <div>
+      <button class="submit-btn" @click="validateCompanies">Validar</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'admin',
+      middleware: 'auth',
+      auth: { authority: 'SITE_ADMIN' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+  data() {
+    return {
+      search: '',
+      companies: [],
+      selectedItemsIndexes: [],
+      loading: true,
+      headers: [
+        { text: 'Nombre', value: 'company_name' },
+        { text: 'C.I.F', value: 'cif' },
+        { text: 'Ciudad', value: 'city' },
+        { text: 'Email', value: 'email' },
+        { text: 'Validada', value: 'is_validated' },
+      ],
+      modalText: '',
+      modalColor: '',
+      activeModal: false
+    }
+  },
+
+  computed: {
+    selectedItems() {
+      const itemsArr = []
+      this.selectedItemsIndexes.forEach(index => {
+        this.companies.forEach(item => {
+          if (item.id === index) {
+            itemsArr.push(item)
+          }
+        })
+      })
+      return itemsArr
+    }
+  },
+
+  async mounted() {
+    try{
+      const config = useRuntimeConfig()
+      const data = await $fetch('admin_companies/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`
+        }
+      })
+      this.companies = data
+      this.loading = false
+    } catch (error) {
+      console.error('Error fetching companies:', error)
+      this.loading = false
+    }
+  },
+
+  methods: {
+    async validateCompanies() {
+      const config = useRuntimeConfig()
+      try {
+        await this.selectedItems.forEach(async (item) => {
+          await $fetch(`admin_companies/${item.id}/`, {
+            baseURL: config.public.baseURL,
+            method: 'PATCH',
+            body: {
+              is_validated: true,
+            },
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`
+            },
+          })
+          const index = this.companies.indexOf(item)
+          this.companies[index].is_validated = true
+          this.selectedItemsIndexes = []
+          this.modalText = 'Los productos han sido eliminados correctamente.'
+          this.modalColor = 'success'
+          this.activeModal = true
+        })
+      } catch (error) {
+        console.error('Error validating companies:', error)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 2.5rem;
+}
+
+.submit-btn {
+  background-color: $color-orange;
+  color: $color-light;
+  border: none;
+  border-radius: 5px;
+  text-transform: uppercase;
+  padding: 10px 15px;
+  margin-top: 15px;
+}
+
+.validated {
+  color: green;
+}
+.not-validated {
+  color: red;
+}
+</style>
diff --git a/pages/admin/estadisticas.vue b/pages/admin/estadisticas.vue
new file mode 100644
index 0000000..c4b69f9
--- /dev/null
+++ b/pages/admin/estadisticas.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="container">
+    <div class="row general">
+      <div class="text-center col-6">
+        <h2>Cooperativas</h2>
+        <p class="general-value">
+          <strong>{{ companiesCount }}</strong>
+        </p>
+      </div>
+      <div class="text-center col-6">
+        <h2>Productos</h2>
+        <p class="general-value">
+          <strong>{{ productsCount }}</strong>
+        </p>
+      </div>
+    </div>
+    <hr />
+    <trend-stats
+      :color="`#39af77`"
+      :name="`Nuevas cooperativas`"
+      :values="companiesTimeline"
+    />
+    <trend-stats
+      :color="`red`"
+      :name="`Nuevos productos`"
+      :values="productsTimeline"
+    />
+    <trend-stats
+      :color="`purple`"
+      :name="`Nuevos usuarios`"
+      :values="usersTimeline"
+    />
+    <trend-stats
+      :color="`blue`"
+      :name="`Contactados`"
+      :values="contactTimeline"
+    />
+    <trend-stats
+      :color="`orange`"
+      :name="`Redirecciones a producto`"
+      :values="shoppingTimeline"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'admin',
+  middleware: 'auth',
+  meta: {
+    auth: { authority: 'SITE_ADMIN' },
+  },
+  async asyncData(context) {
+    const { data } = await context.$api.get(`/admin_stats/`)
+    const companiesCount = data.company_count
+    const productsCount = data.product_count
+    const companiesTimeline = data.companies_timeline
+    const productsTimeline = data.products_timeline
+    const usersTimeline = data.users_timeline
+    const contactTimeline = data.contact_timeline
+    const shoppingTimeline = data.shopping_timeline
+
+    return {
+      companiesCount,
+      productsCount,
+      companiesTimeline,
+      productsTimeline,
+      usersTimeline,
+      contactTimeline,
+      shoppingTimeline,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.general-value {
+  font-size: 50px;
+}
+</style>
diff --git a/pages/admin/importar.vue b/pages/admin/importar.vue
new file mode 100644
index 0000000..7a60c20
--- /dev/null
+++ b/pages/admin/importar.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-10"></div>
+      <h1 class="title">Importar productos desde CSV</h1>
+    </div>
+    <form @submit.prevent="submitFile">
+      <div class="cont-col">
+        <label for="file"> Archivo .csv</label>
+        <input
+          id="file"
+          type="file"
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+          placeholder="Elige un archivo"
+          required
+          @change="handleFile"
+        />
+      </div>
+      <p v-if="error" class="error">{{ error }}</p>
+      <SubmitButton text="Importar"></SubmitButton>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'admin',
+  middleware: 'auth',
+  meta: {
+    auth: { authority: 'SITE_ADMIN' },
+  },
+  data() {
+    return {
+      file: null,
+      error: null,
+    }
+  },
+
+  methods: {
+    async handleFile(e) {
+      const selectedFile = await e.target.files[0]
+      this.file = selectedFile
+    },
+
+    async submitFile() {
+      this.error = null
+      const formData = new FormData()
+      formData.append('csv_file', this.file)
+
+      try {
+        await this.$api.post('/load_coops/', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+      } catch {
+        this.error = 'Ha habido un error'
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 2.5rem;
+}
+.cont-col {
+  margin: 15px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  text-align: left;
+  color: $color-navy;
+  font-weight: $bold;
+  font-size: $xs;
+}
+
+.error {
+  color: $color-error;
+}
+</style>
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
new file mode 100644
index 0000000..78b124d
--- /dev/null
+++ b/pages/admin/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <BContainer class="admin-dashboard">
+    <h1>Panel de Administración</h1>
+    <p>Bienvenido al panel de administración. Aquí puedes gestionar la configuración del sitio y los permisos de los usuarios.</p>
+  </BContainer>
+</template>
+
+<script>
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'admin',
+      middleware: 'auth',
+      auth: { authority: 'SITE_ADMIN' },
+    })
+  }
+}
+</script>
+
+<style>
+.admin-dashboard {
+  padding: 20px;
+}
+
+.admin-dashboard h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file