update company & crud budgets

src/views/CalculatorView.vue

@@ -13,6 +13,8 @@
     const loading = ref(false);
     const filterQuery = ref([]);
     const query = ref('');
+    const currentBudget = ref(null);
+    const openModal = ref(false);
 
     onMounted(() => {
         getInitData();
@@ -57,10 +59,25 @@
             query.value = '';
         }
     }
+
+    const handleSetCurrentBudget = (budget) => {
+        openModal.value = true;
+        currentBudget.value = budget;
+    }
+
+    const handleResetCurrentBudget = () => {
+        openModal.value = false;
+        currentBudget.value = null;
+    }
+
 </script>
 
 <template>
-    <CreateBudgetModal/>
+    <CreateBudgetModal
+        v-if="openModal === true"
+        :budget="currentBudget"
+        @reset-budget="handleResetCurrentBudget"
+    />
     <div>
         <h2 class="title my-2">Calculadora</h2>
     </div>
@@ -76,7 +93,7 @@
         <button
             class="btn-primary-sm radius-sm"
             data-toggle="modal" data-target="#budgetModal"
-            @click=""
+            @click="handleSetCurrentBudget(null)"
         ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span></button>
     </div>
     <Spiner v-if="loading"/>
@@ -85,6 +102,7 @@
             v-if="companyStore.budgets.length > 0"
             v-for="budget in companyStore.budgets"
             :budget="budget"
+            @set-budget="handleSetCurrentBudget(budget)"
         />
         <CardEmpty 
             v-else 

src/views/CalendarView.vue

@@ -72,7 +72,17 @@
 
 <template>
     <div>
-        <h2 class="title">Calendario</h2>
+        <h2 class="title mb-4">Calendario</h2>
+        <div class="box-indicators">
+            <h2>Indicadores de estado de la carga</h2>
+            <div class="indicators">
+                <i class="fa-solid fa-circle" style="color: yellow"></i> Publicado
+                <i class="fa-solid fa-circle" style="color: green"></i> Cargando
+                <i class="fa-solid fa-circle" style="color: red"></i> En transito
+                <i class="fa-solid fa-circle" style="color: blue"></i> Descargando
+                <i class="fa-solid fa-circle" style="color: blue"></i> Entregado
+            </div>
+        </div>
         <div class="calendar">
         <!-- <div class="calendar is-light-mode"> -->
             <Qalendar
@@ -111,7 +121,7 @@
 
 <style lang="scss" scoped>
     .calendar {
-        height: calc(100vh - 150px);
+        height: calc(100vh - 220px);
     }
 
     .tracking-icon {
@@ -152,4 +162,33 @@
         font-weight: 700;
     }
 
+    .box-indicators {
+        display: flex;
+        justify-content: end;
+        flex-direction: column;
+        padding: 12px 10px;
+    }
+    
+    .box-indicators h2 {
+        display: flex;
+        justify-content: end;
+        font-weight: 600;
+        font-size: 1.2rem;
+    }
+
+    .indicators {
+        display: flex;
+        justify-content: end;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    @media (max-width: 768px) {
+        .calendar {
+            height: calc(100vh - 280px);
+        }
+    }
+
 </style>

src/views/MyCompanyView.vue

@@ -63,19 +63,19 @@
                     <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}}
+                            {{company.company?.categories.map((e) => e.name).join(', ')}}
                         </div>
                         <div class="item-company">
                             <span class="font-weight-bold">Ubicación de carga por estado: </span>
-                            {{company.company?._company_state}}
+                            {{company.company?.company_state.map((e) => e).join(', ')}}
                         </div>
                         <div class="item-company">
                             <span class="font-weight-bold">Ubicación de carga por municipio: </span>
-                            {{company.company?._company_city}}
+                            {{company.company?.company_city.map((e) => e).join(', ')}}
                         </div>
                         <div class="item-company">
-                            <span class="font-weight-bold">ETransportes utilizados: </span>
-                            {{company.company?._truck_types}}
+                            <span class="font-weight-bold">Transportes utilizados: </span>
+                            {{company.company?.truck_type.map((e) => e).join(', ')}}
                         </div>
                         <div class="item-company">
                             <span class="font-weight-bold">Información general de la empresa: </span>