WebETA/src/views/HomeView.vue

<script setup>
  import segments from '../data/segments.json';
  import loadsType from '../data/loadsType.json';
  import BarChartStatistics from '../components/BarChartStatistics.vue';
  import DoughnutChartStatistics from '../components/DoughnutChartStatistics.vue';
  import { useLoadsStore } from '../stores/loads';
  import { onMounted, ref, watch } from 'vue';
  import Spiner from '../components/ui/Spiner.vue';
  import CardEmpty from '../components/CardEmpty.vue';
  import { useAuthStore } from '../stores/auth';
  import { storeToRefs } from 'pinia';


  const auth = useAuthStore();
  const { checking, user } = storeToRefs(auth);
  const loads = useLoadsStore();
  const loading = ref(false);
  const loadsData = ref([]);
  const segmentsData = ref([]);
  const cities = ref([]);
  const states = ref([]);
  const vehicles = ref([]);
  const nOfLoads = ref(0);

  onMounted(() => {
    if(user.value) {
      getData();
    }
  })

  watch(user, async() => {
    if(user.value) {
      getData();
    } 
  });

  const getData = async() => {
    loading.value = true;
    if(user.value?.permissions === "role_carrier") {
      await loads.getProposalCompanyAll();
    } else {
      await loads.getLoadsAll();
    }
    dataMap();
    loading.value = false;
  }


  const dataMap = () => {
    nOfLoads.value = loads.loadsDashboard.length;
    loads.loadsDashboard.map((e) => {
      if(e?.load_status) {
        loadsData.value.push(e.load_status);
      }
      if( e?.categories) {
        segmentsData.value.push(e?.categories[0].name)
      }

      // if( (user.value?.permissions === "role_carrier") &&  e?.load?.categories) {
      //   segmentsData.value.push(e?.load?.categories[0].name)
      // }

      if( e?.origin?.city) {
        cities.value.push(e?.origin.city)
      }
      if(e?.origin?.state){
        states.value.push(e?.origin.state)
      }
      if(e?.truck_type){
        vehicles.value.push(e?.truck_type)
      }
    });
  }
</script>

<template>
  <h1 class="title my-4">Dashboard Administrativo</h1>
  <div class="container-dashboard" v-if="nOfLoads > 0">
    <div class="card-fixed card-dashboard">
      <h3>Total de cargas este mes</h3>
      <div class="main-info">
        {{ nOfLoads }}
        <div class="indicator-text" style="color: green;">
          <i class="fa-solid fa-arrow-up"></i>
          <!-- <i class="fa-solid fa-arrow-down"></i> -->
          23%
        </div>
      </div>
    </div>
    <!-- <ChartLoad/> -->
    <div class="card-fixed card-dashboard">
      <h3>Cargas activas</h3>
      <div class="card-chart">
        <Spiner v-if="loading"/>
        <DoughnutChartStatistics
          v-else
          :data="loadsData"
          :data-model="loadsType"
          target-find="name"
          target-label="status"
        /> 
      </div>
    </div>
    <div class="card-fixed card-dashboard">
      <h3>Segmentos más usados</h3>
      <div class="card-chart">
        <Spiner v-if="loading"/>
        <DoughnutChartStatistics 
          v-else
          :data="segmentsData"
          :data-model="segments"
          target-find="name"
        />
      </div>
    </div>
    <div class="card-fixed card-dashboard">
      <h3>Estados más usados</h3>
      <div class="card-chart">
        <Spiner v-if="loading"/>
        <BarChartStatistics 
          v-else
          label="Estados"
          :data="states"
        />
      </div>
    </div>
    <div class="card-fixed card-dashboard">
      <h3>Ciudades más usadas</h3>
      <div class="card-chart">
        <Spiner v-if="loading"/>
        <BarChartStatistics 
          v-else
          label="Ciudades"
          :data="cities"
        />
      </div>
    </div>
    <div class="card-fixed card-dashboard">
      <h3>Tipo de transporte más usados</h3>
      <div class="card-chart">
        <Spiner v-if="loading"/>
        <BarChartStatistics 
          v-else
          label="Vehiculos"
          :data="vehicles"
        />
      </div>
    </div>
  </div>
  <div v-if="nOfLoads <= 0 && loading === false">
    <CardEmpty text="No hay suficientes datos para generar un analisis de cargas"/>
  </div>
</template>

<style scoped>
  .container-dashboard {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    /* gap: 1rem; */
  }

  .card-dashboard {
    width: 32%;
    /* margin: 8px 8px; */
    min-height: 300px;
    display: flex;
    flex-direction: column;
  }

  .card-dashboard-carrier {
    width: 48%;
    min-height: 300px;
    /* max-height: 500px; */
    display: flex;
    flex-direction: column;
  }

  .card-chart {
    width: 100%;
    /* max-height: 350px; */
    /* max-width: 333px; */
    display: flex;
    flex-direction: column;
  }

  .main-info{
    align-items: center;
    align-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto 0;
    padding: 0px;
    font-size: 7rem;
    font-weight: 900;
  }

  .indicator-text {
    font-size: 3rem;
  }
  .container-dashboard h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #323232;
  }

  @media (max-width: 1300px) {
    .card-dashboard {
      width: 48%;
    }
  }

  @media (max-width: 768px) {

    .container-dashboard {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      flex-wrap: nowrap;
    }
    .card-dashboard {
      width: 100%;
    }

    .card-dashboard-carrier {
      width: 100%;
    }
  }
</style>