111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<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
|
|
:chart-id="`1`"
|
|
:color="`#39af77`"
|
|
:name="`Nuevas cooperativas`"
|
|
:values="companiesTimeline"
|
|
/>
|
|
<trend-stats
|
|
:chart-id="`2`"
|
|
:color="`red`"
|
|
:name="`Nuevos productos`"
|
|
:values="productsTimeline"
|
|
/>
|
|
<trend-stats
|
|
:chart-id="`3`"
|
|
:color="`purple`"
|
|
:name="`Nuevos usuarios`"
|
|
:values="usersTimeline"
|
|
/>
|
|
<trend-stats
|
|
:chart-id="`4`"
|
|
:color="`blue`"
|
|
:name="`Contactados`"
|
|
:values="contactTimeline"
|
|
/>
|
|
<trend-stats
|
|
:chart-id="`5`"
|
|
:color="`orange`"
|
|
:name="`Redirecciones a producto`"
|
|
:values="shoppingTimeline"
|
|
/>
|
|
</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 {
|
|
companiesCount: 0,
|
|
productsCount: 0,
|
|
companiesTimeline: [],
|
|
productsTimeline: [],
|
|
usersTimeline: [],
|
|
contactTimeline: [],
|
|
shoppingTimeline: [],
|
|
}
|
|
},
|
|
async created() {
|
|
const config = useRuntimeConfig()
|
|
try {
|
|
const stats = await $fetch('/admin_stats/', {
|
|
baseURL: config.public.baseURL,
|
|
method: 'GET',
|
|
headers: {
|
|
Authorization: `Bearer ${this.auth.access}`,
|
|
},
|
|
})
|
|
if (stats) {
|
|
this.companiesCount = stats.company_count
|
|
this.productsCount = stats.product_count
|
|
this.companiesTimeline = stats.companies_timeline
|
|
this.productsTimeline = stats.products_timeline
|
|
this.usersTimeline = stats.users_timeline
|
|
this.contactTimeline = stats.contact_timeline
|
|
this.shoppingTimeline = stats.shopping_timeline
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching admin stats:', error)
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.general-value {
|
|
font-size: 50px;
|
|
}
|
|
</style>
|