add: translation budgets

src/views/CalculatorView.vue

@@ -7,6 +7,7 @@
     import CardEmpty from '../components/CardEmpty.vue';
     import CreateBudgetModal from '../components/CreateBudgetModal.vue';
     import Pagination from '../components/Pagination.vue';
+    import { useI18n } from 'vue-i18n';
 
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
@@ -19,6 +20,8 @@
     const printOpen = ref(false);
     const limit = 10;
 
+    const { t } = useI18n();
+
     onMounted(() => {
         getInitData();
     })
@@ -107,22 +110,23 @@
         @reset-budget="handleResetCurrentBudget"
     />
     <div>
-        <h2 class="title my-2">Calculadora</h2>
+        <h2 class="title my-2">{{t('calculator.title')}}</h2>
     </div>
     <div class="box-filters">
         <div class="box-search">
-            <input class="form-control custom-search" type="search" name="" placeholder="Buscar por cliente" id="" @:input="search()" v-model="query" aria-label="Search">
+            <input class="form-control custom-search" type="search" name="" :placeholder="t('calculator.querySearch')" id="" @:input="search()" v-model="query" aria-label="Search">
         </div>
         <button 
             class="btn btn-danger bg-dark" type="button" @click="clearFilter">
             <i class="fa-solid fa-arrow-rotate-right"></i>
-            <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
+            <span class="clear-sm"> Reset </span><span class="clear-md"> {{ t('labels.filters') }}</span>
         </button>
         <button
             class="btn-primary-sm radius-sm"
             data-toggle="modal" data-target="#budgetModal"
             @click="handleSetCurrentBudget({budget: null, print: false})"
-        ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span></button>
+            v-html="t('calculator.create')"
+        ></button>
     </div>
     <Spiner v-if="loading"/>
     <div v-else>
@@ -155,7 +159,7 @@
     }
 
     .box-search {
-        width: 60%;
+        flex: 1;
     }
     .custom-search {
         width: 100%;
@@ -163,9 +167,6 @@
     }
 
     @media (max-width: 1024px) {
-        .box-search {
-            width: 60%;
-        }
         .box-filters {
             gap: .4rem;
         }