add: company info & edit company view

src/assets/main.css

@@ -23,6 +23,12 @@ body {
     border-radius: 3rem !important;
 }
 
+/* Fuentes */
+    .font-bold {
+        font-weight: bold;
+    }
+/* *********** */
+
 .divider {
     display: block;
     height: 2px;

src/components/ui/EditCompanyModal.vue

@@ -0,0 +1,137 @@
+<script setup>
+    import { onMounted, reactive, ref } from 'vue';
+    import Spiner from '../ui/Spiner.vue';
+    import Cities from './Cities.vue';
+    import NotificationBadge from './NotificationBadge.vue';
+    import Segments from './Segments.vue';
+    import States from './States.vue';
+    import TruckTypes from './TruckTypes.vue';
+    import Custominput from './custominput.vue';
+    import { useCompanyStore } from '../../stores/company';
+
+    const companyStore = useCompanyStore()
+
+    console.log(companyStore.company?.categories);
+
+    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');
+        if(companyStore.company){
+			companyCategories.value = companyStore.company.categories.map(m =>{
+				return { name: m.name };
+			});
+		}
+        if(companyStore.company){
+			companyStates.value = companyStore.company.company_state.map(m =>{
+				return { state_name: m };
+			});
+		}
+        if(companyStore.company){
+			companyCity.value = companyStore.company.company_city.map(m =>{
+				return { city_name: m };
+			});
+		}
+        if(companyStore.company){
+			companyTruckType.value = companyStore.company.truck_type.map(m =>{
+				return { meta_value: m };
+			});
+		}
+    })
+    const company = reactive({
+        typeCompany: '',
+        // segments: [{
+        //     createdAt: "2022-08-25T05:14:35.906Z",
+        //     name:"AGRICOLA",
+        //     updatedAt: "2022-08-25T05:16:35.603Z",
+        //     __v: 0,
+        //     _id: "6307053bbf4a7b12a4dca8c9"
+        // }],
+        segments: companyCategories,
+        states: companyStates,
+        cities: companyCity,
+        truckTypes: companyTruckType,
+        description: companyStore.company?.company_description ?? '',
+    });
+
+    const handleSave = () => {
+
+    }
+
+</script>
+
+<template>
+   <div class="modal fade" id="editcompanymodal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="title mt-2 mb-3">Editar Empresa</h2>
+                <button type="button" class="close bg-white" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form @submit.prevent="handleSave" class="view-form">
+                    <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+                    <div class="mb-4 mt-3">
+                        <label class="custom-label">Segmento de la empresa</label>
+                        <Segments
+                            v-model="company.segments" 
+                            :multiple="true"
+                        />
+                    </div>
+                    <div class="mb-4">
+                        <label class="custom-label">Ubicaciones de carga por estado</label>
+                        <States
+                            v-model="company.states"
+                            :multiple="true"
+                        />
+                    </div>
+                    <div class="mb-4">
+                        <label class="custom-label">Ubicaciones de carga por municipio</label>
+                        <Cities 
+                            v-model="company.cities"
+                            :multiple="true"
+                        />
+                    </div>
+                    <div class="mb-4">
+                        <label class="custom-label">Tipo de transportes que utiliza</label>
+                        <TruckTypes 
+                            v-model="company.truckTypes"
+                            :multiple="true"
+                        />
+                    </div>
+                    <Custominput
+                        label="Descripción de la empresa:"
+                        type="text"
+                        name="description"
+                        :filled="false"
+                        v-model:field="company.description"
+                    />
+
+                    <input type="submit" value="Cuardar cambios" class="btn-primary-lg btn-lg-block my-4">
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-dark" data-dismiss="modal">Cerrar</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    /* .modal-width{
+        width: 1500px !important;
+    } */
+
+    .view-form {
+        padding: 1rem 4rem;
+    }
+</style>

src/composables/useCompanyProfile.js

@@ -0,0 +1,34 @@
+import { ref } from "vue";
+import { getCompany } from "../services/company";
+import {useAuthStore} from '../stores/auth'
+import { useCompanyStore } from "../stores/company";
+
+
+export default function useCompany() {
+
+    const auth = useAuthStore();
+    const companyStore = useCompanyStore();
+
+    const loading = ref(false);
+    const company = ref(null);
+
+    const getCompanyData = async() => {
+        if(companyStore.company === null) {
+            loading.value = true;
+            const companyId = auth.user.company;
+            console.log(companyId)
+            const resp = await getCompany(companyId);
+            companyStore.company = resp;
+            company.value = resp;
+            loading.value = false;
+        } else {
+            company.value = companyStore.company;
+        }
+    }
+
+    return {
+        getCompanyData,
+        loading,
+        company
+    }
+}

src/helpers/type_company.js

@@ -0,0 +1,17 @@
+
+
+export const getTypeCompany = (value) => {
+    switch (value) {
+        case 'Shipper':
+            return 'Embarcador'
+        case 'Carrier':
+            return 'Transportista'
+        case 'Shipper-Broker':
+            return 'Embarcador Broker'
+        case 'Carrier-Broker':
+            return 'Transportista Broker'
+    
+        default:
+            return 'No definido';
+    }
+}

src/layouts/AdminLayout.vue

@@ -42,10 +42,18 @@
             <ul class="list-unstyled components">
                 <li :class="[route.name === 'home' ? 'bg-nav-active' : '']">
                     <div>
-                        <i class="fa-regular fa-building" :class="[route.name === 'home' ? 'router-link-active' : '']"></i>
+                        <i class="fa-solid fa-gauge-high" :class="[route.name === 'home' ? 'router-link-active' : '']"></i>
                         <RouterLink 
                             active-class="router-link-active"
-                            class="nav-link" :to="{name: 'home'}">Empresa</RouterLink>
+                            class="nav-link" :to="{name: 'home'}">Dashboard</RouterLink>
+                    </div>
+                </li>
+                <li :class="[route.name === 'company' ? 'bg-nav-active' : '']">
+                    <div>
+                        <i class="fa-regular fa-building" :class="[route.name === 'company' ? 'router-link-active' : '']"></i>
+                        <RouterLink 
+                            active-class="router-link-active"
+                            class="nav-link" :to="{name: 'company'}">Empresa</RouterLink>
                     </div>
                      <!-- <i class="fa-solid fa-chevron-right"></i> -->
                 </li>
@@ -58,6 +66,35 @@
                     </div>
                     <!-- <i class="fa-solid fa-chevron-right"></i> -->
                 </li>
+                <li :class="[route.name === 'locations' ? 'bg-nav-active' : '']">
+                    <div>
+                        <i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
+                        <RouterLink 
+                            active-class=""
+                            class="nav-link" :to="{name: 'locations'}">Ubicaciones</RouterLink>
+                    </div>
+                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
+                </li>
+                <li 
+                    v-if="auth.user?.permissions.includes('role_carrier')"
+                    :class="[route.name === 'vehicles' ? 'bg-nav-active' : '']">
+                    <div>
+                        <i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
+                        <RouterLink 
+                            active-class=""
+                            class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink>
+                    </div>
+                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
+                </li>
+                <li :class="[route.name === 'published' ? 'bg-nav-active' : '']">
+                    <div>
+                        <i class="fa-solid fa-bullhorn" :class="[route.name === 'published' ? 'router-link-active' : '']"></i>
+                        <RouterLink 
+                            active-class=""
+                            class="nav-link" :to="{name: 'published'}">Publicaciones</RouterLink>
+                    </div>
+                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
+                </li>
                 <li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
                     <div>
                         <i class="fa-regular fa-calendar" :class="[route.name === 'calendar' ? 'router-link-active' : '']"></i>
@@ -67,21 +104,23 @@
                     </div>
                     <!-- <i class="fa-solid fa-chevron-right"></i> -->
                 </li>
-                <li :class="[route.name === 'loads' ? 'bg-nav-active' : '']">
+                <li 
+                    v-if="auth.user?.permissions.includes('role_carrier')"
+                    :class="[route.name === 'calculator' ? 'bg-nav-active' : '']">
                     <div>
-                        <i class="fa-solid fa-box" :class="[route.name === 'loads' ? 'router-link-active' : '']"></i>
+                        <i class="fa-solid fa-calculator" :class="[route.name === 'calculator' ? 'router-link-active' : '']"></i>
                         <RouterLink 
                             active-class="router-link-active"
-                            class="nav-link" :to="{name: 'loads'}">Cargas</RouterLink>
+                            class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink>
                     </div>
                     <!-- <i class="fa-solid fa-chevron-right"></i> -->
                 </li>
-                <li :class="[route.name === 'vehicles' ? 'bg-nav-active' : '']">
+                <li :class="[route.name === 'reports' ? 'bg-nav-active' : '']">
                     <div>
-                        <i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
+                        <i class="fa-solid fa-chart-simple" :class="[route.name === 'reports' ? 'router-link-active' : '']"></i>
                         <RouterLink 
-                            active-class=""
+                            active-class="router-link-active"
-                            class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink>
+                            class="nav-link" :to="{name: 'reports'}">Reportes</RouterLink>
                     </div>
                     <!-- <i class="fa-solid fa-chevron-right"></i> -->
                 </li>
@@ -111,9 +150,11 @@
                         </button>
                         <div class="nav-options">
                             <RouterLink 
+                                v-if="auth.user?.permissions.includes('role_shipper')"
                                 active-class="router-link-active"
-                                class="nav-link" :to="{name: 'recovery'}">Embarques</RouterLink>
+                                class="nav-link" :to="{name: 'recovery'}">Transporte</RouterLink>
                             <RouterLink 
+                                v-if="auth.user?.permissions.includes('role_carrier')"
                                 active-class="router-link-active"
                                 class="nav-link" :to="{name: 'recovery'}">Cargas</RouterLink>
                         </div>
@@ -221,7 +262,8 @@
     }
 
     .view {
-        margin: 24px 16px;
+        margin: 24px 50px;
+        // width: calc(100vw - 260px);
     }
 
     .nav-items {
@@ -266,7 +308,7 @@
         // position: fixed;
         display: flex;
         flex-direction: column;
-        margin-top: 20px;
+        // margin-top: 8px;
         bottom: 10px;
         gap: 1rem;
         // background-color: red;
@@ -282,6 +324,12 @@
         opacity: 0.6;
     }
 
+    @media (max-width: 1400px) {
+        .view {
+            margin: 24px 24px;
+        }
+    }
+
     @media (max-width: 768px) {
 
         .custom-navbar {
@@ -301,5 +349,9 @@
         #sidebar.active {
             margin-left: 0;
         }
+
+        .view {
+            margin: 24px 12px;
+        }
     }
 </style>

src/router/index.js

@@ -1,5 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import AuthLayout from '../layouts/AuthLayout.vue'
+// import {useAuthStore} from '../stores/auth';
+
+// const authStore = useAuthStore();
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -25,8 +28,8 @@ const router = createRouter({
           component: () => import('../views/RecoveryPasswordView.vue'),
         },
         {
-          path: 'empresa',
+          path: 'registro-empresa',
-          name: 'company',
+          name: 'register-company',
           component: () => import('../views/CompleteRegisterView.vue')
         }
       ]
@@ -42,11 +45,36 @@ const router = createRouter({
           name: 'home',
           component: () => import('../views/HomeView.vue'),
         },
+        {
+          path: 'empresa',
+          name: 'company',
+          component: () => import('../views/MyCompanyView.vue'),
+        },
+        {
+          path: 'ubicaciones',
+          name: 'locations',
+          component: () => import('../views/LocationsView.vue'),
+        },
+        {
+          path: 'publicaciones',
+          name: 'published',
+          component: () => import('../views/PublishedView.vue'),
+        },
         {
           path: 'usuarios',
           name: 'users',
           component: () => import('../views/UsersView.vue'),
         },
+        {
+          path: 'calculadora',
+          name: 'calculator',
+          component: () => import('../views/CalculatorView.vue'),
+        },
+        {
+          path: 'reportes',
+          name: 'reports',
+          component: () => import('../views/ReportsView.vue'),
+        },
         {
           path: 'calendario',
           name: 'calendar',
@@ -70,24 +98,14 @@ const router = createRouter({
 router.beforeEach( async(to, from, next) => {
   const requiresAuth = to.matched.some(url => url.meta.requiresAuth)
   const session = localStorage.getItem('session');
-  // console.log('--------------- SE EJECUTA -----------------');
+  console.log('Se ejecuta router');
-  // console.log(session);
-  // console.log('--------------- FIN -----------------');
   if(requiresAuth) {
     //Comprobamos si el usuario esta authenticado
     if(session) {
-      // try {
+      // if(!authStore.user) {
-      //   const resp = await renewToken();
+      //   await authStore.checkSession();
-      //   if(resp.msg == 'success') {
-      //     next();
-      //   } else {
-      //     next({name: 'login'})
-      //   }
-      // } catch (error) {
-      //   console.log(error);
-      //   next({name: 'login'})
-      // }
         next();
+      // }
     } else {
       next({name: 'login'})
     }

src/services/auth.js

@@ -3,7 +3,7 @@ import {messagesError} from '../helpers/validations';
 
 export const login = async(body) => {
     try {
-        const endpoint = "/account/authorize";
+        const endpoint = "/v1/account/authorize";
         const {data} = await api.post(endpoint, body);
         console.log(data);
         console.log(data.accessToken);
@@ -36,7 +36,7 @@ export const login = async(body) => {
 export const renewToken = async() => {
     const session = localStorage.getItem('session');
     try {
-        const endpoint = `/account/authorize/${session}`;
+        const endpoint = `/v1/account/authorize/${session}`;
         const {data} = await api.get(endpoint);
         console.log(data.user);
         if(data.accessToken !== null){
@@ -62,7 +62,7 @@ export const renewToken = async() => {
 
 export const regiter = async(body) => {
     try {
-        const endpoint = "/account/signup";
+        const endpoint = "/v1/account/signup";
         const {data} = await api.post(endpoint, body);
         return {
             msg: 'success',
@@ -78,7 +78,7 @@ export const regiter = async(body) => {
 
 export const regiterConfirm = async(body) => {
     try {
-        const endpoint = "/account/signup";
+        const endpoint = "/v1/account/signup";
         const {data} = await api.patch(endpoint, body);
         return {
             msg: 'success',
@@ -102,7 +102,7 @@ export const regiterConfirm = async(body) => {
 
 export const recoveryPassword = async(body) => {
     try {
-        const endpoint = "/account/recover";
+        const endpoint = "/v1/account/recover";
         const {data} = await api.post(endpoint, body);
         return {
             msg: 'success',
@@ -119,7 +119,7 @@ export const recoveryPassword = async(body) => {
 
 export const recoveryPasswordConfirm = async(body) => {
     try {
-        const endpoint = "/account/recover";
+        const endpoint = "/v1/account/recover";
         const {data} = await api.patch(endpoint, body);
         return {
             msg: 'success',

src/services/company.js

@@ -0,0 +1,13 @@
+import api from "../lib/axios";
+
+
+export const getCompany = async(companyId) => {
+    try {
+        const endpoint = `/companies/${companyId}`;
+        const {data} = await api.get(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}

src/services/public.js

@@ -2,7 +2,7 @@ import api from "../lib/axios";
 
 export const getLoadDirectories = async(filterStr) => {
     try {
-        const endpoint = `/public-loads${filterStr}`;
+        const endpoint = `/v1/public-loads${filterStr}`;
         const {data} = await api.get(endpoint);
         return data.data;
     } catch (error) {
@@ -13,7 +13,7 @@ export const getLoadDirectories = async(filterStr) => {
 
 export const getVehicleDirectories = async(filter) => {
     try {
-        const endpoint = `/public-vehicles/published${filter}`;
+        const endpoint = `/v1/public-vehicles/published${filter}`;
         const {data} = await api.get(endpoint);
         return data.data;
     } catch (error) {
@@ -25,7 +25,7 @@ export const getVehicleDirectories = async(filter) => {
 export const getFreeVehicles = async() => {
     try {
         // console.log(process.env.API_URL + "/vehicles/?status=Free&updatedAt[$gt]=" + moment.utc(lasthour).valueOf());
-        const endpoint = `/public-vehicles/location`;
+        const endpoint = `/v1/public-vehicles/location`;
         console.log({endpoint});
         const {data} = await api.get(endpoint);
         return data.data;
@@ -50,7 +50,7 @@ export const getNews = async() => {
 
 export const getCompanies = async(filter) => {
     try {
-        const endpoint = `/public-companies/${filter}`;
+        const endpoint = `/v1/public-companies/${filter}`;
         console.log(endpoint);
         const {data} = await api.get(endpoint);
         return data.data;
@@ -62,7 +62,7 @@ export const getCompanies = async(filter) => {
 
 export const getUsersCompany = async(filter) => {
     try {
-        const endpoint = `/users?${filter}`;
+        const endpoint = `/v1/users?${filter}`;
         // console.log({endpoint});
         const {data} = await api.get(endpoint);
         // console.log(data);
@@ -86,7 +86,7 @@ export const getSettingsQuery = async(filter) => {
 
 export const searchcategories = async(query) => {
     try {
-        const endpoint = "/product-categories/find?regex=" + query;
+        const endpoint = "/v1/product-categories/find?regex=" + query;
         const {data} = await api.get(endpoint);
         return data.data;
     } catch (error) {
@@ -97,7 +97,7 @@ export const searchcategories = async(query) => {
 
 export const searchstates = async(query) => {
     try {
-        const endpoint = "/states/find?regex=" + query;
+        const endpoint = "/v1/states/find?regex=" + query;
         const {data} = await api.get(endpoint);
         return data.data;
     } catch (error) {

src/stores/auth.js

@@ -3,13 +3,16 @@ import { ref, onMounted } from "vue";
 import { useRouter } from 'vue-router';
 import { renewToken } from '../services/auth';
 import {useNotificationsStore} from './notifications';
+import {useCompanyStore} from './company';
 
 export const useAuthStore = defineStore('auth', () => {
     
     const router = useRouter();
     const noty = useNotificationsStore();
+    const company = useCompanyStore();
     const sesion = ref('')
     const checking = ref(false);
+    const authStatus = ref('checking');
     const token = ref('')
     const user = ref(null)
 
@@ -20,14 +23,15 @@ export const useAuthStore = defineStore('auth', () => {
 
     const checkSession = async() => {
         const session = localStorage.getItem('session');
+        authStatus.value = 'checking';
         if(session) {
             checking.value = true;
             const resp = await renewToken();
             if(resp.msg === 'success') {
-                localStorage.setItem('session', resp.data.session_token);
+                user.value = resp.data.user;
                 sesion.value = resp.data.session_token;
                 token.value = resp.data.accessToken;
-                user.value = resp.data.user;
+                localStorage.setItem('session', resp.data.session_token);
                 checking.value = false;
             } else {
                 noty.show = true;
@@ -37,11 +41,19 @@ export const useAuthStore = defineStore('auth', () => {
                 router.push({name: 'login'});
             }
         }
+        authStatus.value = 'completed';
     }
 
+    const authenticationPromise = new Promise((resolve) => {
+      onMounted(() => {
+        resolve('success');
+      });
+    });
+
     const logout = () => {
         
         localStorage.removeItem('session');
+        company.clear();
         router.push({name: 'login'});
         sesion.value = '';
         token.value = '';
@@ -53,6 +65,9 @@ export const useAuthStore = defineStore('auth', () => {
         logout,
         token,
         user,
-        checking
+        checking,
+        authStatus,
+        checkSession,
+        authenticationPromise
     }
 });

src/stores/company.js

@@ -0,0 +1,38 @@
+import { defineStore } from "pinia";
+import { ref, watch, onMounted } from "vue";
+import { useAuthStore } from "./auth";
+import { getCompany } from "../services/company";
+
+export const useCompanyStore = defineStore('company', () => {
+
+    const auth = useAuthStore();
+    const company = ref(null)
+    const loading = ref(false);
+
+    const getCompanyData = async() => {
+        loading.value = true;
+        if(!company.value) {
+            console.log('Se ejecuta');
+            loading.value = true;
+            const companyId = auth.user?.company;
+            console.log({companyId});
+            const resp = await getCompany(companyId);
+            console.log(resp);
+            company.value = resp;
+        }
+        loading.value = false;
+    }
+
+    const clear = () => {
+        company.value = null;
+        loading.value = false;
+    }
+
+
+   return {
+        company,
+        loading,
+        getCompanyData,
+        clear
+   }
+});

src/views/CalculatorView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Calculadora</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/CompleteRegisterView.vue

@@ -1,7 +1,7 @@
 <script setup>
     import { reactive, ref } from 'vue';
     import CustomRadioInput from '../components/ui/CustomRadioInput.vue';
-    import Custominput from '../components/ui/CustomInput.vue'
+    import Custominput from '../components/ui/CustomInput.vue';
     import Segments from '../components/ui/Segments.vue';
     import States from '../components/ui/States.vue';
     import Cities from '../components/ui/Cities.vue';

src/views/LocationsView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Ubicaciones</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/LoginView.vue

@@ -10,8 +10,8 @@
 
 
     const form = reactive({
-        email: 'julio_alex@etaviaporte.com',
+        email: 'alexandrous.dev@gmail.com',
-        password: 'Password1',
+        password: 'Password0',
     });
 
     const router = useRouter();
@@ -48,7 +48,7 @@
                         user: resp.data.user,
                     })
                 } else {
-                    router.push({name: 'company'});
+                    router.push({name: 'register-company'});
                 }
             } else {
                 msgError.value = resp.msg;

src/views/MyCompanyView.vue

@@ -0,0 +1,118 @@
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import {useCompanyStore} from '../stores/company';
+    import {useAuthStore} from '../stores/auth';
+    import Spiner from '../components/ui/Spiner.vue';
+    import {getTypeCompany} from '../helpers/type_company'
+    import {getDateMonthDay} from '../helpers/date_formats'
+    import EditCompanyModal from '../components/ui/EditCompanyModal.vue';
+
+    const auth = useAuthStore()
+    const company = useCompanyStore();
+
+    onMounted(() => {
+        getInitialData()
+    });
+
+    const getInitialData = async() => {
+        await auth.authenticationPromise;
+        await company.getCompanyData();
+    }
+
+
+</script>
+
+<template>
+    <EditCompanyModal v-if="company.loading === false"/>
+    <div>
+        <h2 class="title my-5">Mi empresa</h2>
+        <div class="card-info">
+            <Spiner v-if="company.loading"/>
+            <div v-else class="view">
+                <div class="header-info">
+                    <h2>{{ company.company?.company_name }}</h2>
+                    <button
+                        class="btn-primary-sm"
+                        data-toggle="modal" data-target="#editcompanymodal"
+                    ><i class="fa-solid fa-pen-to-square"></i> Editar empresa</button>
+                </div>
+                <div class="divider mb-4"></div>
+                <div class="row">
+                    <div class="col-sm-12 col-md-6 col-lg-6">
+                        <div class="item-company">
+                            <span class="font-weight-bold">RFC: </span>
+                            {{company.company?.rfc}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Tipo de empresa: </span>
+                            {{getTypeCompany(company.company?.company_type[0])}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Código: </span>
+                            {{company.company?.company_code}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Empresa miembro desde: </span>
+                            {{getDateMonthDay(company.company?.createAt)}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Afiliación: </span>
+                            {{ company.company?.membership }}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-6 col-lg-6">
+                        <div class="item-company">
+                            <span class="font-weight-bold">Segmento de empresa: </span>
+                            {{company.company?._categories}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Ubicación de carga por estado: </span>
+                            {{company.company?._company_state}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Ubicación de carga por municipio: </span>
+                            {{company.company?._company_city}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">ETransportes utilizados: </span>
+                            {{company.company?._truck_types}}
+                        </div>
+                        <div class="item-company">
+                            <span class="font-weight-bold">Información general de la empresa: </span>
+                            {{ company.company?.company_description }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .header-info {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+    }
+
+    .header-info h2 {
+        font-size: 1.6rem;
+        font-weight: 700;
+    }
+    .view {
+        width: 100%;
+    }
+
+    .item-company {
+        margin-bottom: 8px;
+        font-size: 1.2rem;
+        color: #323030;
+        /* font-weight: bold; */
+    }
+
+    .item-company span {
+        font-weight: bold;
+    }
+</style>

src/views/PublishedView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Mis publicaciones</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/ReportsView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Reportes</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>