From 6a54ed3dbe794826215cb742186d3126afe7d400 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 2 Mar 2024 18:34:14 -0600
Subject: [PATCH] fix: issues ux

---
 src/assets/main.css                        |  12 ++
 src/components/CardLoad.vue                |   1 -
 src/components/DoughnutChartStatistics.vue |  15 ++-
 src/components/NavBar.vue                  |  26 ++++-
 src/components/Sidebar.vue                 |   6 +-
 src/lib/axios.js                           |  26 ++++-
 src/lib/axiosPublic.js                     |   9 ++
 src/services/auth.js                       |  16 ++-
 src/stores/auth.js                         |  20 ++--
 src/stores/company.js                      |   8 +-
 src/stores/loads.js                        |  33 ++++++
 src/stores/vehicles.js                     |   8 +-
 src/views/CalculatorView.vue               |   2 +-
 src/views/HomeView.vue                     | 125 ++++++++++++++++++---
 14 files changed, 252 insertions(+), 55 deletions(-)
 create mode 100644 src/lib/axiosPublic.js

diff --git a/src/assets/main.css b/src/assets/main.css
index 1d9bec4..6e35e2f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -85,6 +85,18 @@ body {
     font-weight: 700;
 }
 
+.btn-primary-nav {
+    background-color: #FBBA33;
+    padding: 8px 16px;
+    color: #323030;
+    font-size: 1.1rem;
+    border: none;
+    text-decoration: none;
+    text-align: center;
+    border-radius: 8px;
+    font-weight: 700;
+}
+
 .btn-primary-sm:hover {
     background-color: #e3a11e;
     transition: background-color 300ms ease;
diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue
index e0d8ce0..0761587 100644
--- a/src/components/CardLoad.vue
+++ b/src/components/CardLoad.vue
@@ -164,7 +164,6 @@
                 Evidencias
             </button>
             <button
-                v-if="load.load_status !== 'Delivered'"
                 class="btn-primary-sm"
                 data-toggle="modal" data-target="#formLoadModal"
                 @click="openEditModal"
diff --git a/src/components/DoughnutChartStatistics.vue b/src/components/DoughnutChartStatistics.vue
index cd9c259..3ab63f6 100644
--- a/src/components/DoughnutChartStatistics.vue
+++ b/src/components/DoughnutChartStatistics.vue
@@ -25,16 +25,16 @@
   onMounted(() => {
 
     props.data.forEach(item => {
-        const index = dataMap.value.findIndex((e) => e.label === item);
-
-        if(index === -1) {
+        const index = dataMap.value.findIndex((e) => e.name?.toUpperCase() === item?.toUpperCase());
+        if(index === -1) { // Lo agrega
             if(props.dataModel) {
-                const itemModel = props.dataModel.find((e) => e[props.targetFind] === item);
-                dataMap.value.push({
+                const itemModel = props.dataModel.find((e) => e[props.targetFind].toUpperCase() === item.toUpperCase());
+                const itemTem = {
                     label: (props.targetLabel) ? itemModel[props.targetLabel] : item,
                     data: 1,
                     ...itemModel
-                })
+                };
+                dataMap.value.push(itemTem)
             } else {
                 dataMap.value.push({
                     label: item,
@@ -42,11 +42,10 @@
                     color: 'green'
                 });
             }
-        } else {
+        } else { // Lo actualiza
             dataMap.value[index].data += 1;
         }
     });
-
     chartData.value = {
           labels: dataMap.value.map((e) => e.label),
           datasets: [{ 
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index f531475..71830e0 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -25,11 +25,11 @@
                     <RouterLink 
                         v-if="auth.user?.permissions.includes('role_carrier')"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'search-loads'}">Cargas</RouterLink>
+                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> Cargas</RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions.includes('role_carrier')"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'shippers'}">Embarcadores</RouterLink>
+                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> Embarcadores</RouterLink>
                 </div>
             </div>
     </nav>
@@ -40,17 +40,21 @@
         display: flex;
         flex-direction: row;
         justify-content: end;
+        align-items: center;
     }
 
     .custom-navbar {
         display: block;
         width: calc(100vw - 220px);
         background-color: #FFF;
+        padding: 16px 0px;
     }
 
     .nav-options {
-        margin-left: 32px;
         display: flex;
+        margin-left: 32px;
+        gap: 1rem;
+        margin-right: 32px;
     }
 
     .btn-menu {
@@ -59,8 +63,8 @@
 
     .nav-link{
         cursor: pointer;
-        color: #413f3c;
-        font-size: 1.2rem;
+        color: #FBBA33;
+        font-size: 1.3rem;
         margin-right: 1.2rem;
         font-weight: 500;
     }
@@ -83,6 +87,18 @@
 
     @media (max-width: 768px) {
 
+        .nav-options {
+            margin-left: 8px;
+            margin-right: 8px;
+            gap: 0.5rem;
+        }
+
+        .nav-link{
+            font-size: 1.1rem;
+            margin-right: 1.2rem;
+            font-weight: 500;
+        }
+
         .custom-navbar {
             width: 100vw !important;
         }
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 34a7705..796ad1f 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -22,7 +22,9 @@
     <nav id="sidebar">
         <div class="sidebar-header">
             <div class="logo">
-                <img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
+                <a href="https://etaviaporte.com/" target="_blank">
+                    <img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
+                </a>
             </div>
             <h2 class="my-4">COVO</h2>
             <p><i class="fa-solid fa-user"></i> <span class="ms-2">{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p>
@@ -84,7 +86,7 @@
                     <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-trucks' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class=""
-                        class="nav-link" :to="{name: 'published-trucks'}">Publicaciones</RouterLink>
+                        class="nav-link" :to="{name: 'published-trucks'}">Ofertas aceptadas</RouterLink>
                 </div>
             </li>
             <li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
diff --git a/src/lib/axios.js b/src/lib/axios.js
index 6eb493e..7c7ec53 100644
--- a/src/lib/axios.js
+++ b/src/lib/axios.js
@@ -1,12 +1,28 @@
 import axios from "axios";
 
 const baseUrl = import.meta.env.VITE_API_URL;
-const accessToken = localStorage.getItem('access');
+
 const api = axios.create({
-    baseURL: baseUrl,
-    headers: {
-        Authorization: 'Bearer ' + accessToken
-    },
+    baseURL: baseUrl
 });
 
+// Interceptar las solicitudes antes de enviarlas
+api.interceptors.request.use(
+    (config) => {
+        // Obtener el token de acceso actualizado del localStorage
+        const accessToken = localStorage.getItem('access');
+        
+        // Verificar si hay un token de acceso y agregarlo al encabezado de autorización
+        if (accessToken) {
+            config.headers.Authorization = `Bearer ${accessToken}`;
+        }
+        
+        return config;
+    },
+    (error) => {
+        // Manejar errores de solicitud
+        return Promise.reject(error);
+    }
+);
+
 export default api;
\ No newline at end of file
diff --git a/src/lib/axiosPublic.js b/src/lib/axiosPublic.js
new file mode 100644
index 0000000..bb7bf60
--- /dev/null
+++ b/src/lib/axiosPublic.js
@@ -0,0 +1,9 @@
+import axios from "axios";
+
+const baseUrl = import.meta.env.VITE_API_URL;
+
+const apiPublic = axios.create({
+    baseURL: baseUrl,
+});
+
+export default apiPublic;
\ No newline at end of file
diff --git a/src/services/auth.js b/src/services/auth.js
index dd938a7..0e470dd 100644
--- a/src/services/auth.js
+++ b/src/services/auth.js
@@ -1,12 +1,10 @@
-import api from "../lib/axios";
+import apiPublic from "../lib//axiosPublic";
 import {messagesError} from '../helpers/validations';
 
 export const login = async(body) => {
     try {
         const endpoint = "/v1/account/authorize";
-        const {data} = await api.post(endpoint, body);
-        console.log(data);
-        console.log(data.accessToken);
+        const {data} = await apiPublic.post(endpoint, body);
         if(data.accessToken !== null){
             if(data.user.job_role !== 'driver'){
                 //TODO: Guardar token y datos del usuario
@@ -37,7 +35,7 @@ export const renewToken = async() => {
     const session = localStorage.getItem('session');
     try {
         const endpoint = `/v1/account/authorize/${session}`;
-        const {data} = await api.get(endpoint);
+        const {data} = await apiPublic.get(endpoint);
         console.log(data);
         if(data.accessToken !== null){
             return {
@@ -63,7 +61,7 @@ export const renewToken = async() => {
 export const regiter = async(body) => {
     try {
         const endpoint = "/v1/account/signup";
-        const {data} = await api.post(endpoint, body);
+        const {data} = await apiPublic.post(endpoint, body);
         return {
             msg: 'success',
             data
@@ -79,7 +77,7 @@ export const regiter = async(body) => {
 export const regiterConfirm = async(body) => {
     try {
         const endpoint = "/v1/account/signup";
-        const {data} = await api.patch(endpoint, body);
+        const {data} = await apiPublic.patch(endpoint, body);
         return {
             msg: 'success',
             data
@@ -103,7 +101,7 @@ export const regiterConfirm = async(body) => {
 export const recoveryPassword = async(body) => {
     try {
         const endpoint = "/v1/account/recover";
-        const {data} = await api.post(endpoint, body);
+        const {data} = await apiPublic.post(endpoint, body);
         return {
             msg: 'success',
             data
@@ -120,7 +118,7 @@ export const recoveryPassword = async(body) => {
 export const recoveryPasswordConfirm = async(body) => {
     try {
         const endpoint = "/v1/account/recover";
-        const {data} = await api.patch(endpoint, body);
+        const {data} = await apiPublic.patch(endpoint, body);
         return {
             msg: 'success',
             data
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 40c8cbb..98eafd5 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -5,6 +5,7 @@ import { renewToken } from '../services/auth';
 import {useNotificationsStore} from './notifications';
 import {useCompanyStore} from './company';
 import { useLoadsStore } from "./loads";
+import { useVehiclesStore } from "./vehicles";
 
 export const useAuthStore = defineStore('auth', () => {
     
@@ -12,6 +13,7 @@ export const useAuthStore = defineStore('auth', () => {
     const noty = useNotificationsStore();
     const company = useCompanyStore();
     const loadStore = useLoadsStore();
+    const vehiclesStore = useVehiclesStore();
     const sesion = ref('')
     const checking = ref(false);
     const authStatus = ref('checking');
@@ -54,16 +56,20 @@ export const useAuthStore = defineStore('auth', () => {
     });
 
     const logout = () => {
-        console.log('logoo....');
-        sesion.value = '';
-        token.value = '';
-        company.clear();
-        localStorage.clear();
-        user.value = null;
-        console.log(company.company);
         localStorage.removeItem('access');
         localStorage.removeItem('id');
         localStorage.removeItem('session');
+
+        sesion.value = '';
+        token.value = '';
+        user.value = null;
+        checking.value = false;
+        authStatus.value = 'checking'
+
+        company.clear();
+        loadStore.clear();
+        vehiclesStore.clear();
+
         router.push({name: 'login'});
     }
 
diff --git a/src/stores/company.js b/src/stores/company.js
index ee85732..f7908b8 100644
--- a/src/stores/company.js
+++ b/src/stores/company.js
@@ -139,15 +139,19 @@ export const useCompanyStore = defineStore('company', () => {
     const clear = () => { //Cuando se cierra la sesion
         company.value = null;
         users.value = [];
+        drivers.value = [];
         usersTotal.value = 0;
         usersCurrentPage.value = 1;
-        drivers.value = [];
         budgets.value = [];
-        proposals.value = [];
+        budgetsTotal.value = 0;
+        budgetsCurrentPage.value = 1;
         locations.value = [];
         locationsLoads.value = [];
         locationsTotal.value = 0;
         locationsCurrentPage.value = 1;
+        proposals.value = [];
+        proposalsTotal.value = 0;
+        proposalsCurrentPage.value = 1;
         // companyid = null;
         loading.value = false;
     }
diff --git a/src/stores/loads.js b/src/stores/loads.js
index b532c1b..f7be2a4 100644
--- a/src/stores/loads.js
+++ b/src/stores/loads.js
@@ -6,6 +6,7 @@ export const useLoadsStore = defineStore('load', () => {
 
     const currentLoad = ref(null);
     const loads = ref([])
+    const loadsDashboard = ref([]);
     const loadsTotal = ref(0)
     const loadsCurrentPage = ref(1)
     const proposalsOfLoads = ref([]);
@@ -13,6 +14,32 @@ export const useLoadsStore = defineStore('load', () => {
     const openAttachmentsModal = ref(false);
     const openProposalsModal = ref(false);
 
+    const getLoadsAll = async(reload = false) => {
+        const companyid = localStorage.getItem('id');
+        if(loadsDashboard.value.length <= 0 || reload) {
+            try {
+                const endpoint = `/loads?company=${companyid}`;
+                const {data} = await api.get(endpoint);
+                loadsDashboard.value = data.data;
+            } catch (error) {
+                loadsDashboard.value = [];
+                console.log(error);
+            }
+        }
+    }
+
+    const getProposalCompanyAll = async(reload = false) => {
+        const companyId = localStorage.getItem('id');
+        try {
+            if(loadsDashboard.value.length <= 0 || reload) {
+                const endpoint = `/proposals?carrier=${companyId}`;
+                const {data} = await api.get(endpoint);
+                loadsDashboard.value = data.data.map( (e) => e.load);
+            }
+        } catch (error) {
+            loadsDashboard.value = [];
+        }
+    }
 
     const getCompanyLoads = async(filterQuery, reload = false) => {
         const companyid = localStorage.getItem('id');
@@ -123,6 +150,9 @@ export const useLoadsStore = defineStore('load', () => {
     const clear = () => {
         currentLoad.value = null;
         loads.value = [];
+        loadsDashboard.value = [];
+        loadsTotal.value = 0;
+        loadsCurrentPage.value = 1;
         proposalsOfLoads.value = [];
         openModalEdit.value = false;
         openAttachmentsModal.value = false;
@@ -137,6 +167,9 @@ export const useLoadsStore = defineStore('load', () => {
        openAttachmentsModal,
        getProposalsOfLoads,
        getCompanyLoads,
+       getLoadsAll,
+       getProposalCompanyAll,
+       loadsDashboard,
        deleteLoad,
        getLoad,
        saveLoad,
diff --git a/src/stores/vehicles.js b/src/stores/vehicles.js
index e4901b7..962a5b4 100644
--- a/src/stores/vehicles.js
+++ b/src/stores/vehicles.js
@@ -68,6 +68,11 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         }
     }
 
+    const clear = () => {
+        vehicles.value = [];
+        vehiclesTotal.value = 0;
+        vehiclesCurrentPage.value = 1;
+    }
 
 
    return {
@@ -77,6 +82,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         fetchVehicles,
         createVehicleCompany,
         updateVehicleCompany,
-        deleteVehicleCompany
+        deleteVehicleCompany,
+        clear
    }
 });
\ No newline at end of file
diff --git a/src/views/CalculatorView.vue b/src/views/CalculatorView.vue
index 69ec617..1df1416 100644
--- a/src/views/CalculatorView.vue
+++ b/src/views/CalculatorView.vue
@@ -6,7 +6,7 @@
     import CardBudget from '../components/CardBudget.vue';
     import CardEmpty from '../components/CardEmpty.vue';
     import CreateBudgetModal from '../components/CreateBudgetModal.vue';
-import Pagination from '../components/Pagination.vue';
+    import Pagination from '../components/Pagination.vue';
 
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 44bf5ca..c9f6d2a 100644
--- a/src/views/HomeView.vue
+++ b/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>