faqs in admin

src/components/BarChartStatistics.vue

@@ -53,6 +53,7 @@
 
     chartData.value = {
       labels: dataMap.value.map((e) => (e.label.length > 12) ? e.label.substring(0, 11) : e.label),
+      position: 'bottom',
       datasets: [{ 
         label: props.label,
         data: dataMap.value.map((e) => e.data),
@@ -68,32 +69,18 @@
   
     const chartOptions = {
       responsive: true,  
-        
     }
 </script>
 
 <template>
-    <div class="card-chart">
     <Bar
       :id=id
       v-if="chartData"
       :options="chartOptions"
       :data="chartData"
     />
-    </div>
 </template>
 
 <style scoped>
 
-  .card-chart {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  @media (max-width: 768px) {
-    .card-dashboard {
-      width: 100%;
-    }
-  }
 </style>

src/components/DoughnutChartStatistics.vue

@@ -26,7 +26,6 @@
 
     props.data.forEach(item => {
         const index = dataMap.value.findIndex((e) => e.label === item);
-        console.log(index);
 
         if(index === -1) {
             if(props.dataModel) {
@@ -48,7 +47,6 @@
         }
     });
 
-    console.log(dataMap.value)
     chartData.value = {
           labels: dataMap.value.map((e) => e.label),
           datasets: [{ 
@@ -66,27 +64,14 @@
 </script>
 
 <template>
-    <div class="card-chart">
     <Doughnut
       id="my-chart-statictics"
       v-if="chartData"
       :options="chartOptions"
       :data="chartData"
     />
-    </div>
 </template>
 
 <style scoped>
 
-  .card-chart {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  @media (max-width: 768px) {
-    .card-dashboard {
-      width: 100%;
-    }
-  }
 </style>

src/components/Sidebar.vue

@@ -118,7 +118,7 @@
             <div class="divider"></div>
             <RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">Aviso de privaciadad</RouterLink>
             <RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">Términos y condiciones</RouterLink>
-            <a class="link-eta" href="">FAQS</a>
+            <RouterLink class="link-eta" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink>
             <div class="d-flex align-items-center">
                 <i class="fa-solid fa-right-from-bracket"></i>
                 <a @click="handleLogout"

src/views/HomeView.vue

@@ -7,12 +7,13 @@
 </script>
 
 <template>
+  <h1 class="title my-4">Dashboard Administrativo</h1>
   <div class="container-dashboard">
     <div class="card-fixed card-dashboard">
       <h3>Total de cargas este mes</h3>
       <div class="main-info">
         35
-        <div class="process-load text-center" style="color: green;">
+        <div class="indicator-text" style="color: green;">
           <i class="fa-solid fa-arrow-up"></i>
           <!-- <i class="fa-solid fa-arrow-down"></i> -->
           23%
@@ -21,7 +22,8 @@
     </div>
     <!-- <ChartLoad/> -->
     <div class="card-fixed card-dashboard">
-      <h3>Segmentos más usados</h3>
+      <h3>Cargas activas</h3>
+      <div class="card-chart">
         <DoughnutChartStatistics
           :data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
           :data-model="loadsType"
@@ -29,8 +31,10 @@
           target-label="status"
         /> 
       </div>
+    </div>
     <div class="card-fixed card-dashboard">
       <h3>Segmentos más usados</h3>
+      <div class="card-chart">
         <DoughnutChartStatistics 
           :data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
           :data-model="segments"
@@ -38,29 +42,36 @@
         />
       </div>
     </div>
-  <div class="container-dashboard">
+  <!-- </div>
+  <div class="container-dashboard"> -->
     <div class="card-fixed card-dashboard">
       <h3>Estados más usados</h3>
+      <div class="card-chart">
         <BarChartStatistics 
           label="Ciuades"
           :data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
         />
       </div>
+    </div>
     <div class="card-fixed card-dashboard">
       <h3>Ciudades más usadas</h3>
+      <div class="card-chart">
         <BarChartStatistics 
           label="Estados"
           :data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
         />
       </div>
+    </div>
     <div class="card-fixed card-dashboard">
       <h3>Tipo de transporte más usados</h3>
+      <div class="card-chart">
         <BarChartStatistics 
           label="Vehiculos"
           :data="['FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'Auto']"
         />
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
@@ -68,44 +79,24 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    gap: 1rem;
+    justify-content: space-between;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
-  }
+    /* gap: 1rem; */
-
-  .total-loads {
-    min-width: 300px;
-  }
-
-  .process-load {
-    margin-bottom: 1rem;
-    font-size: 1.2rem;
-  }
-
-  .process-load span {
-    margin-left: 1rem;
-    margin-right: 1rem;
-    font-size: 1.4rem;
-    font-weight: 900;
-    margin-top: 0px;
   }
 
   .card-dashboard {
-    width: 33%;
+    width: 32%;
+    /* margin: 8px 8px; */
     min-height: 300px;
     display: flex;
     flex-direction: column;
   }
 
-  .card-loads {
+  .card-chart {
+    width: 100%;
+    /* max-width: 333px; */
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    justify-content: space-around;
-  }
-
-  .small {
-    font-size: 1rem;
-    color: grey;
-    font-weight: 300;
   }
 
   .main-info{
@@ -116,19 +107,24 @@
     justify-content: center;
     margin: auto 0;
     padding: 0px;
-    font-size: 5rem;
+    font-size: 7rem;
     font-weight: 900;
   }
 
+  .indicator-text {
+    font-size: 3rem;
+  }
   .container-dashboard h3 {
     font-size: 1.2rem;
-    font-weight: 400;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
     color: #323232;
   }
 
-  ol li {
+  @media (max-width: 1300px) {
-    font-size: 1.3rem;
+    .card-dashboard {
-    font-weight: 500;
+      width: 48%;
+    }
   }
 
   @media (max-width: 768px) {
@@ -136,22 +132,11 @@
     .container-dashboard {
       width: 100%;
       flex-direction: column;
+      justify-content: center;
+      flex-wrap: nowrap;
     }
     .card-dashboard {
       width: 100%;
     }
-
-    .process-load {
-      margin-bottom: 0.5rem;
-      font-size: 1rem;
-    }
-
-    .process-load span {
-      margin-left: 1rem;
-      margin-right: 1rem;
-      font-size: 1.2rem;
-      font-weight: 700;
-      margin-top: 0px;
-    }
   }
 </style>