add: view users of company

src/components/CardUser.vue

@@ -0,0 +1,119 @@
+<script setup>
+import Swal from 'sweetalert2';
+import { getDateMonthDay } from '../helpers/date_formats';
+
+    defineProps({
+        user: {
+            type: Object,
+            required: true
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+        
+    })
+
+    const handleDelete = () => {
+        Swal.fire({
+            title: 'Eliminación de usuario!',
+            text: '¿Estás seguro de eliminar este usuario?',
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonText: 'Eliminar',
+            cancelButtonText: 'Cancelar',
+        }).then(async(result) => {
+            if(result.isConfirmed) {
+                Swal.fire({
+                    title: 'Por favor espere!',
+                    html: 'Elimininando usuario...',// add html attribute if you want or remove
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading()
+                    },
+                });
+                let resp = 'success';
+
+                setTimeout(() => {
+                    Swal.close()
+                    if(resp !== null) {
+                        Swal.fire({
+                            title: "Usuario eliminado!",
+                            text: "El usuario ha sido eliminado exitosamente.",
+                            icon: "success"
+                        });
+                    } else {
+                        Swal.fire({
+                            title: "No eliminado!",
+                            text: "El usuario no se pudo eliminar, intente más tarde.",
+                            icon: "error"
+                        });
+                    }
+                }, 5000)
+                // const resp = await companyStore.deleteBudgetCompany(props.budget._id);
+            }
+
+        });
+    }
+</script>
+
+<template>
+    <div class="card-fixed flex-column">
+        <div class="row">
+            <div class="col-lg-6 col-sm-12">
+                <p><span>Nombre de usuario:</span> {{user.name}}</p>
+                <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
+                <p><span>Teléfono 1: </span>{{user.phone}}</p>
+                <p><span>Teléfono 2: </span>{{user.phone2}}</p>
+                <p><span>Email: </span>{{user.email}}</p>
+            </div>
+            <div class="col-lg-6 col-sm-12">
+                <p><span>Segmento: </span>{{user._categories}}</p>
+                <p><span>Locaciones de carga por municipio: </span>{{user._user_city}}</p>
+                <p><span>Locaciones de carga por estado: </span>{{user._user_state}}</p>
+                <p v-if="user.company.truck_type"><span>Tipos de transporte que utiliza: </span> {{user._truck_types}}</p>
+                <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
+                <p><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
+            </div>
+        </div>
+        <div class="btn-row" v-if="readonly === false">
+            <button
+                class="btn-primary-sm radius-sm"
+                data-toggle="modal" 
+                data-target="#editcompanymodal"
+            ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
+            <button
+                class="btn btn-dark radius-sm"
+                @click="handleDelete"
+            ><i class="fa-solid fa-trash"></i> Eliminar</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+     p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+    }
+    
+    p span {
+        font-weight: 700;
+    }
+
+    @media (max-width: 768px) {
+
+        p {
+            font-size: 0.9rem;
+            font-weight: 400;
+            color: #323032;
+        }
+        p span {
+            font-weight: 700;
+        }
+    }
+</style>

src/components/Sidebar.vue

@@ -7,13 +7,14 @@
     const auth = useAuthStore();
 
    const handleLogout = () => {
-        auth.$patch({
-            sesion: '',
-            token: '',
-            user: {},
-        });
-        localStorage.removeItem('session');
-        router.push({name: 'login'});
+        // auth.$patch({
+        //     sesion: '',
+        //     token: '',
+        //     user: {},
+        // });
+        // localStorage.removeItem('session');
+        // router.push({name: 'login'});
+        auth.logout();
    }
 </script>
 

src/components/ui/EditCompanyModal.vue

@@ -17,19 +17,13 @@
 
     const loading = ref(false);
     const msgError = ref('');
-    const msgSuccess = ref('');
     const companyCategories = ref([]);
     const companyStates = ref([]);
     const companyCity = ref([]);
     const companyTruckType = ref([]);
 
     onMounted(() => {
-        console.log('EditCompanyModal');
-        console.log(companyStore.company)
         if(companyStore.company){
-			// companyCategories.value = companyStore.company.categories.map(m =>{
-			// 	return { name: m.name };
-			// });
 			companyCategories.value = companyStore.company.categories;
 		}
         if(companyStore.company){