fix: issues ux

src/views/HomeView.vue

@@ -3,16 +3,80 @@
   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 { 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?.includes("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(user.value?.permissions?.includes("role_shipper") &&  e?.categories) {
+        segmentsData.value.push(e?.categories[0].name)
+      }
+      if(user.value?.permissions?.includes("role_shipper") && 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">
-    <div class="card-fixed card-dashboard">
+    <div class="card-fixed"
+      :class="[user?.permissions?.includes('role_shipper') ? 'card-dashboard' : 'card-dashboard-carrier']"
+      >
       <h3>Total de cargas este mes</h3>
       <div class="main-info">
-        35
+        {{ nOfLoads }}
         <div class="indicator-text" style="color: green;">
           <i class="fa-solid fa-arrow-up"></i>
           <!-- <i class="fa-solid fa-arrow-down"></i> -->
@@ -21,22 +85,30 @@
       </div>
     </div>
     <!-- <ChartLoad/> -->
-    <div class="card-fixed card-dashboard">
+    <div class="card-fixed"
+      :class="[user?.permissions?.includes('role_shipper') ? 'card-dashboard' : 'card-dashboard-carrier']"
+      >
       <h3>Cargas activas</h3>
       <div class="card-chart">
+        <Spiner v-if="loading"/>
         <DoughnutChartStatistics
-          :data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
+          v-else
+          :data="loadsData"
           :data-model="loadsType"
           target-find="name"
           target-label="status"
         /> 
       </div>
     </div>
-    <div class="card-fixed card-dashboard">
+    <div class="card-fixed"
+      :class="[user?.permissions?.includes('role_shipper') ? 'card-dashboard' : 'card-dashboard-carrier']"
+      v-if="user?.permissions?.includes('role_shipper')">
       <h3>Segmentos más usados</h3>
       <div class="card-chart">
+        <Spiner v-if="loading"/>
         <DoughnutChartStatistics 
-          :data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
+          v-else
+          :data="segmentsData"
           :data-model="segments"
           target-find="name"
         />
@@ -44,30 +116,42 @@
     </div>
   <!-- </div>
   <div class="container-dashboard"> -->
-    <div class="card-fixed card-dashboard">
+    <div class="card-fixed"
+      :class="[user?.permissions?.includes('role_shipper') ? 'card-dashboard' : 'card-dashboard-carrier']"
+      >
       <h3>Estados más usados</h3>
       <div class="card-chart">
+        <Spiner v-if="loading"/>
         <BarChartStatistics 
-          label="Ciuades"
-          :data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
+          v-else
+          label="Estados"
+          :data="states"
         />
       </div>
     </div>
-    <div class="card-fixed card-dashboard">
+    <div class="card-fixed"
+      :class="[user?.permissions?.includes('role_shipper') ? 'card-dashboard' : 'card-dashboard-carrier']"
+      v-if="user?.permissions?.includes('role_shipper')">
       <h3>Ciudades más usadas</h3>
       <div class="card-chart">
+        <Spiner v-if="loading"/>
         <BarChartStatistics 
-          label="Estados"
-          :data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
+          v-else
+          label="Ciudades"
+          :data="cities"
         />
       </div>
     </div>
-    <div class="card-fixed card-dashboard">
+    <div class="card-fixed"
+      :class="[user?.permissions?.includes('role_shipper') ? 'card-dashboard' : 'card-dashboard-carrier']"
+      >
       <h3>Tipo de transporte más usados</h3>
       <div class="card-chart">
+        <Spiner v-if="loading"/>
         <BarChartStatistics 
+          v-else
           label="Vehiculos"
-          :data="['FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'Auto']"
+          :data="vehicles"
         />
       </div>
     </div>
@@ -92,8 +176,17 @@
     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;
@@ -138,5 +231,9 @@
     .card-dashboard {
       width: 100%;
     }
+
+    .card-dashboard-carrier {
+      width: 100%;
+    }
   }
 </style>