admin/cooperativas page and functionality

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>