From a3da672ed636ccd55fdb13a0c05f55a27304d74e Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 3 Feb 2024 17:17:15 -0600
Subject: [PATCH] faqs in admin

---
 src/components/BarChartStatistics.vue      |  29 ++---
 src/components/DoughnutChartStatistics.vue |  27 +----
 src/components/Sidebar.vue                 |   2 +-
 src/views/HomeView.vue                     | 133 +++++++++------------
 4 files changed, 74 insertions(+), 117 deletions(-)

diff --git a/src/components/BarChartStatistics.vue b/src/components/BarChartStatistics.vue
index 7058c86..2e587a4 100644
--- a/src/components/BarChartStatistics.vue
+++ b/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),
@@ -67,33 +68,19 @@
 
   
     const chartOptions = {
-        responsive: true,
-        
+      responsive: true,  
     }
 </script>
 
 <template>
-    <div class="card-chart">
-      <Bar
-        :id=id
-        v-if="chartData"
-        :options="chartOptions"
-        :data="chartData"
-      />
-    </div>
+    <Bar
+      :id=id
+      v-if="chartData"
+      :options="chartOptions"
+      :data="chartData"
+    />
 </template>
 
 <style scoped>
 
-  .card-chart {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  @media (max-width: 768px) {
-    .card-dashboard {
-      width: 100%;
-    }
-  }
 </style>
\ No newline at end of file
diff --git a/src/components/DoughnutChartStatistics.vue b/src/components/DoughnutChartStatistics.vue
index 85fd2fd..cd9c259 100644
--- a/src/components/DoughnutChartStatistics.vue
+++ b/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>
+    <Doughnut
+      id="my-chart-statictics"
+      v-if="chartData"
+      :options="chartOptions"
+      :data="chartData"
+    />
 </template>
 
 <style scoped>
 
-  .card-chart {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  @media (max-width: 768px) {
-    .card-dashboard {
-      width: 100%;
-    }
-  }
 </style>
\ No newline at end of file
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 450804b..efb7448 100644
--- a/src/components/Sidebar.vue
+++ b/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"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index d43eee8..44bf5ca 100644
--- a/src/views/HomeView.vue
+++ b/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,44 +22,54 @@
     </div>
     <!-- <ChartLoad/> -->
     <div class="card-fixed card-dashboard">
-      <h3>Segmentos más usados</h3>
-      <DoughnutChartStatistics
-        :data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
-        :data-model="loadsType"
-        target-find="name"
-        target-label="status"
-      /> 
+      <h3>Cargas activas</h3>
+      <div class="card-chart">
+        <DoughnutChartStatistics
+          :data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
+          :data-model="loadsType"
+          target-find="name"
+          target-label="status"
+        /> 
+      </div>
     </div>
     <div class="card-fixed card-dashboard">
       <h3>Segmentos más usados</h3>
-      <DoughnutChartStatistics 
-        :data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
-        :data-model="segments"
-        target-find="name"
-      />
+      <div class="card-chart">
+        <DoughnutChartStatistics 
+          :data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
+          :data-model="segments"
+          target-find="name"
+        />
+      </div>
     </div>
-  </div>
-  <div class="container-dashboard">
+  <!-- </div>
+  <div class="container-dashboard"> -->
     <div class="card-fixed card-dashboard">
       <h3>Estados más usados</h3>
-      <BarChartStatistics 
-        label="Ciuades"
-        :data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
-      />
+      <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>
-      <BarChartStatistics 
-        label="Estados"
-        :data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
-      />
+      <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>
-      <BarChartStatistics 
-        label="Vehiculos"
-        :data="['FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'Auto']"
-      />
+      <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>
@@ -68,44 +79,24 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    gap: 1rem;
-    flex-wrap: nowrap;
-  }
-
-  .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;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    /* gap: 1rem; */
   }
 
   .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;
-    justify-content: space-around;
-  }
-
-  .small {
-    font-size: 1rem;
-    color: grey;
-    font-weight: 300;
+    flex-direction: column;
   }
 
   .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 {
-    font-size: 1.3rem;
-    font-weight: 500;
+  @media (max-width: 1300px) {
+    .card-dashboard {
+      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>