From 69e0848a039674f232d631a4a9348dfdad275c94 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 20 Jul 2024 14:45:51 -0600
Subject: [PATCH] add: translation budgets

---
 src/components/CardBudget.vue        | 53 +++++++++--------
 src/components/CreateBudgetModal.vue | 85 +++++++++++++++-------------
 src/i18n/en.js                       | 49 +++++++++++++++-
 src/i18n/es.js                       | 50 +++++++++++++++-
 src/views/CalculatorView.vue         | 17 +++---
 5 files changed, 179 insertions(+), 75 deletions(-)

diff --git a/src/components/CardBudget.vue b/src/components/CardBudget.vue
index 945e239..5e70d02 100644
--- a/src/components/CardBudget.vue
+++ b/src/components/CardBudget.vue
@@ -1,6 +1,7 @@
 <script setup>
     import Swal from 'sweetalert2';
     import { useCompanyStore } from '../stores/company';
+    import { useI18n } from 'vue-i18n';
 
     const props = defineProps({
         budget: {
@@ -13,20 +14,22 @@
 
     const companyStore = useCompanyStore();
 
+    const { t } = useI18n();
+
     const handleDeleteBudget = async() => {
         Swal.fire({
-            title: 'Eliminar Presupuesto!',
-            text: '¿Estás seguro de eliminar este presupuesto?',
+            title: t('calculator.titleDel'),
+            text: t('calculator.textDel'),
             icon: 'warning',
             showCancelButton: true,
             cancelButtonColor: "#d33",
-            confirmButtonText: 'Eliminar',
-            cancelButtonText: 'Cancelar',
+            confirmButtonText: t('buttons.delete'),
+            cancelButtonText: t('buttons.cancel'),
         }).then(async(result) => {
             if(result.isConfirmed) {
                 Swal.fire({
-                    title: 'Por favor espere!',
-                    html: 'Eliminando presupuesto...',// add html attribute if you want or remove
+                    title: t('messages.loading'),
+                    html:  t('calculator.loadingDel'),// add html attribute if you want or remove
                     allowOutsideClick: false,
                     didOpen: () => {
                         Swal.showLoading()
@@ -36,14 +39,14 @@
                 Swal.close();
                 if(resp !== null) {
                     Swal.fire({
-                        title: "Presupuesto eliminado!",
-                        text: "Tu presupuesto ha sido eliminado exitosamente.",
+                        title: t('calculator.msgTitleDel'),
+                        text: t('calculator.msgDel'),
                         icon: "success"
                     });
                 } else {
                     Swal.fire({
-                        title: "No eliminado!",
-                        text: "Tu presupuesto no se pudo eliminar, intente más tarde.",
+                        title: t('calculator.msgTitleNotDel'),
+                        text: t('calculator.msgNotDel'),
                         icon: "error"
                     });
                 }
@@ -59,21 +62,21 @@
         <div>
             <div class="row">
                 <div class="col-lg-6 col-md-6 col-sm-12">
-                    <p><span>Cliente:</span> {{budget.client}}</p>
-                    <p v-if="budget.material"><span>Material:</span> {{budget.material.name}}</p>
-                    <p><span>Origen:</span> {{budget.origin}}</p>
-                    <p><span>Destino:</span> {{budget.destination}}</p>
-                    <p><span>Tipo de camión:</span> {{budget.truck_type}}</p>
-                    <p><span>Total KM recorridos:</span> {{budget.total_km_travel}}</p> 
+                    <p><span>{{ t('calculator.client') }}:</span> {{budget.client}}</p>
+                    <p v-if="budget.material"><span>{{ t('loads.product') }}:</span> {{budget.material.name}}</p>
+                    <p><span>{{ t('loads.origin') }}:</span> {{budget.origin}}</p>
+                    <p><span>{{ t('loads.destination') }}:</span> {{budget.destination}}</p>
+                    <p><span>{{ t('loads.truckType') }}:</span> {{budget.truck_type}}</p>
+                    <p><span>{{ t('calculator.totalkm') }}:</span> {{budget.total_km_travel}}</p> 
                 </div>
                 <div class="col-lg-6 col-md-6 col-sm-12">
-                    <p><span>Total Litros De Diesel Consumidos: </span> {{parseFloat( budget.total_fuel_consumed).toFixed(2)}}</p>
-                    <p><span>Total Costo Del Diesel:</span> {{"$" + parseFloat( budget.total_cost_fuel).toFixed(2)}}</p> 
-                    <p><span>Total Antes De Iva:</span> ${{budget.total_before_tax}}</p>
-                    <p><span>Total Utilidad Por Kilometro:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
-                    <p><span>Total Utilidad:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
+                    <p><span>{{ t('calculator.totallt') }}: </span> {{parseFloat( budget.total_fuel_consumed).toFixed(2)}}</p>
+                    <p><span>{{ t('calculator.totalcostDiesel') }}:</span> {{"$" + parseFloat( budget.total_cost_fuel).toFixed(2)}}</p> 
+                    <p><span>{{ t('calculator.totalBeforeIva') }}:</span> ${{budget.total_before_tax}}</p>
+                    <p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
+                    <p><span>{{ t('calculator.totalUtity') }}:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
                     <!-- <p>{{ $t('CALCULATOR.PROFIT_PERCENTAGE') }}: {{budget.profit_percentage}}%</p>  -->
-                    <p><span>Porcentaje De Utilidad:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
+                    <p><span>{{ t('calculator.percentUtility') }}:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
                     
                 </div>
             </div>
@@ -83,14 +86,14 @@
                 class="btn btn-danger radius-sm"
                 @click="handleDeleteBudget"
             >
-                <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
+                <i class="fa-solid fa-trash" /> <span class="clear-xsm">{{ t('buttons.delete') }}</span>
             </button>
             <button 
                 class="btn-primary-sm radius-sm"
                 @click="$emit('set-budget', {budget: budget, print: false})"
                 data-toggle="modal" data-target="#budgetModal"
             >
-                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
+                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">{{ t('buttons.edit') }}</span>
             </button>
             <button 
                 type="button"  
@@ -98,7 +101,7 @@
                 @click="$emit('set-budget', {budget: budget, print: true})"
                 data-toggle="modal" data-target="#budgetModal"
             >   
-                <i class="fa-solid fa-print" /> <span class="clear-xsm">Imprimir</span>
+                <i class="fa-solid fa-print" /> <span class="clear-xsm">{{ t('calculator.print') }}</span>
             </button>
         </div>
     </div>
diff --git a/src/components/CreateBudgetModal.vue b/src/components/CreateBudgetModal.vue
index efcdca6..24d3229 100644
--- a/src/components/CreateBudgetModal.vue
+++ b/src/components/CreateBudgetModal.vue
@@ -9,6 +9,8 @@
     import Spiner from './ui/Spiner.vue';
     import Cities from './ui/Cities.vue';
     import html2pdf from 'html2pdf.js';
+    import { useI18n } from 'vue-i18n';
+
 
     const props = defineProps({
         budget: {
@@ -27,6 +29,8 @@
 
     const loading = ref(false);
 
+    const { t } = useI18n();
+
     onMounted(() => {
         console.log(props.budget);
         if(props.budget) {
@@ -197,7 +201,7 @@
         }
 
         let result = 'error';
-        let action = 'Creado';
+        let action = t('calculator.msgCreate');
         loading.value = true;
 
         const localData = {
@@ -206,17 +210,17 @@
 
         if(props.budget !== null) { // update
             result = await companyStore.updateBudgetCompany(props.budget._id, budgetData, localData);
-            action = 'actualizado';
+            action = t('calculator.msgUpdate');
         } else { // create
             result = await companyStore.createBudgetCompany(budgetData);
-            action = 'agregado';
+            action = t('calculator.msgCreate');
         }
 
         loading.value = false;
         if(result === 'success') {
             document.getElementById('btnClosebudgetModal').click();
             Swal.fire({
-                title: `<strong>Presupuesto ${action} con éxito!</strong>`,
+                title: action,
                 icon: 'success'
             })
         } else {
@@ -229,7 +233,7 @@
 
     const validations = () => {
         errors.value = {
-            client: budgetForm.client?.length < 2 ? 'Ingrese nombre del cliente' : null,
+            client: budgetForm.client?.length < 2 ? t('errors.customer') : null,
         };
     }
 
@@ -253,7 +257,8 @@
         <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">Calculadora</h2> 
+                    <!-- <h2 class="title mt-2 mb-3">Calculadora</h2>  -->
+                     <div></div>
                     <button 
                         id="btnClosebudgetModal" 
                         type="button" 
@@ -267,16 +272,16 @@
                         <form action="" @submit.prevent="saveBudget" autocomplete="off" method="post" ref="pdfContent">
                                 <div class="calculator-card">
                                     <div class="calculator-card__title">
-                                        <h2>CALCULADOR DE TARIFAS</h2>   
+                                        <h2>{{ t('calculator.titleDoc') }}</h2>   
                                         <img src="/images/logo-eta.png" alt="Eta viaporte" width="110">             
                                     </div>
                                     <div class="calculator-card__subtitle">
-                                        <h4>DATOS DE CARGA</h4>
+                                        <h4>{{ t('calculator.loadData') }}</h4>
                                     </div>
                                     <div class="calculator-card__body">
                                         <div class="calculator-card__loads_data">
                                             <CustomInput
-                                                label="CLIENTE*"
+                                                :label="t('calculator.client') + '*'"
                                                 type="text"
                                                 :filled="false"
                                                 name="client"
@@ -285,35 +290,35 @@
                                                 :readonly="isPrint"
                                             />
                                             <div class="mb-4 mt-3">
-                                                <label class="custom-label">MATERIAL</label>
+                                                <label class="custom-label">{{ t('loads.product') }}</label>
                                                 <Products
                                                     v-model="budgetForm.budgetproduct" 
                                                     :disabled="isPrint"
                                                 />
                                             </div>
                                             <div class="mb-4 mt-3">
-                                                <label class="custom-label">ORIGEN</label>
+                                                <label class="custom-label">{{ t('loads.origin') }}</label>
                                                 <Cities
                                                     v-model="budgetForm.origin" 
                                                     :disabled="isPrint"
                                                 />
                                             </div>
                                             <div class="mb-4 mt-3">
-                                                <label class="custom-label">DESTINO</label>
+                                                <label class="custom-label">{{ t('loads.destination') }}</label>
                                                 <Cities
                                                     v-model="budgetForm.destination" 
                                                     :disabled="isPrint"
                                                 />
                                             </div>
                                             <div class="mb-4 mt-3">
-                                                <label class="custom-label">TIPO DE CAMIÓN</label>
+                                                <label class="custom-label">{{ t('loads.truckType') }}</label>
                                                 <TruckTypes
                                                     v-model="budgetForm.budgetTrucktypes" 
                                                     :disabled="isPrint"
                                                 />
                                             </div>
                                             <CustomInput
-                                                label="TONELADAS"
+                                                :label="t('labels.tons')"
                                                 type="number"
                                                 :filled="false"
                                                 name="num_tons"
@@ -321,7 +326,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="PRECIO POR TONELADA"
+                                                :label="t('labels.priceTons')"
                                                 type="number"
                                                 :filled="false"
                                                 name="price_per_ton"
@@ -331,12 +336,12 @@
                                         </div>         
                                     </div>
                                     <div class="calculator-card__subtitle">
-                                        <h4>TARIFA / KILOMETRAJE</h4>
+                                        <h4>{{ t('calculator.ratekm') }}</h4>
                                     </div>
                                     <div class="calculator-card__body">
                                         <div class="calculator-card__loads_data">
                                             <CustomInput
-                                                label="TONELAJE APROXIMADO DE CARGA"
+                                                :label="t('labels.tonLoad')"
                                                 type="number"
                                                 :filled="false"
                                                 name="tonnage"
@@ -344,7 +349,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="PRECIO POR TONELADA"
+                                                :label="t('labels.priceTons')"
                                                 type="number"
                                                 :filled="false"
                                                 name="price_per_ton"
@@ -352,7 +357,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="ORIGEN DEL CAMION AL ORIGEN DE CARGA(KM)"
+                                                :label="t('labels.originTruckKm1')"
                                                 type="number"
                                                 :filled="false"
                                                 name="pickup_distance"
@@ -360,7 +365,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="ORIGEN DE CARGA A DESTINO DE DESCARGA(KM)"
+                                                :label="t('labels.originTruckKm2')"
                                                 type="number"
                                                 :filled="false"
                                                 name="delivery_distance"
@@ -368,7 +373,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="DESTINO DE DESCARGA AL PATIO-BASE (KM)"
+                                                :label="t('labels.destinationTruck1')"
                                                 type="number"
                                                 :filled="false"
                                                 name="warehouse_distance"
@@ -377,7 +382,7 @@
                                             />
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                    <h6>TOTAL KM RECORRIDOS</h6>
+                                                    <h6>{{ t('calculator.totalkm').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalTravel }}
@@ -386,12 +391,12 @@
                                         </div>         
                                     </div>
                                     <div class="calculator-card__subtitle">
-                                        <h4>COSTOS DIRECTOS CAMION</h4>
+                                        <h4>{{ t('calculator.costTruck') }}</h4>
                                     </div>
                                     <div class="calculator-card__body">
                                         <div class="calculator-card__loads_data">
                                             <CustomInput
-                                                label="RENDIMIENTO CAMION - LITROS POR KILOMETRO RECORRIDO"
+                                                :label="t('calculator.truckCost1')"
                                                 type="number"
                                                 :filled="false"
                                                 name="cost_per_liter"
@@ -399,7 +404,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="PRECIO DEL DIESEL POR LITRO"
+                                                :label="t('calculator.truckCost2')"
                                                 type="number"
                                                 :filled="false"
                                                 name="fuel_price_per_liter"
@@ -407,7 +412,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="OTROS GASTOS"
+                                                :label="t('calculator.otherSpends')"
                                                 type="number"
                                                 :filled="false"
                                                 name="other_fuel_expenses"
@@ -416,7 +421,7 @@
                                             />
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                <h6>TOTAL LITROS DE DIESEL CONSUMIDOS</h6>
+                                                <h6>{{ t('calculator.totallt').toLocaleUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalFuel }}
@@ -424,7 +429,7 @@
                                             </div>
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                    <h6>TOTAL COSTO DEL DIESEL</h6>
+                                                    <h6>{{ t('calculator.truckCost4').toLocaleUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalFuelCost }}
@@ -433,12 +438,12 @@
                                         </div>         
                                     </div>
                                     <div class="calculator-card__subtitle">
-                                        <h4>SUELDO OPERADOR</h4>
+                                        <h4>{{ t('calculator.operatorSalary') }}</h4>
                                     </div>
                                     <div class="calculator-card__body">
                                         <div class="calculator-card__loads_data">
                                             <CustomInput
-                                                label="GASTOS ADMINISTRATIVOS"
+                                                :label="t('calculator.salaryAdmin')"
                                                 type="number"
                                                 :filled="false"
                                                 name="driver_salary"
@@ -446,7 +451,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="CASETAS"
+                                                :label="t('calculator.stands')"
                                                 type="number"
                                                 :filled="false"
                                                 name="accomadation_allowance"
@@ -454,7 +459,7 @@
                                                 :readonly="isPrint"
                                             />
                                             <CustomInput
-                                                label="OTROS GASTOS"
+                                                :label="t('calculator.otherSpends')"
                                                 type="number"
                                                 :filled="false"
                                                 name="other_administrative_expenses"
@@ -463,7 +468,7 @@
                                             />
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                    <h6>GASTOS ADMINISTRATIVOS TOTALES</h6>
+                                                    <h6>{{ t('calculator.spendsAdminTotal').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalAdminExpenses }}
@@ -472,13 +477,13 @@
                                         </div>         
                                     </div>
                                     <div class="calculator-card__subtitle">
-                                        <h4>UTILIDAD / PERDIDA</h4>
+                                        <h4>{{ t('calculator.utilityLoss') }}</h4>
                                     </div>
                                     <div class="calculator-card__body">
                                         <div class="calculator-card__loads_data">
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                    <h6>TOTAL ANTES DE IVA</h6>
+                                                    <h6>{{ t('calculator.totalBeforeIva').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalBeforeTax }}
@@ -486,7 +491,7 @@
                                             </div>
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                    <h6>TOTAL UTILIDAD POR KILOMETRO</h6>
+                                                    <h6>{{ t('calculator.totalUtityByKm').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalUtilityPerKm }}
@@ -494,7 +499,7 @@
                                             </div>
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                    <h6>TOTAL UTILIDAD</h6>
+                                                    <h6>{{ t('calculator.totalUtity').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalProfit }}
@@ -502,7 +507,7 @@
                                             </div>
                                             <div class="calculator-card__totals">
                                                 <div>
-                                                    <h6>PORCENTAJE DE UTILIDAD</h6>
+                                                    <h6>{{ t('calculator.percentUtility').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
                                                     {{ totalPercentage }}
@@ -513,7 +518,7 @@
                                 </div>
                                 <div class="mt-4 text-center" v-if="!isPrint">
                                     <Spiner v-if="loading"/>
-                                    <button v-else class="btn-primary-sm radius-sm" type="submit">Guardar</button>
+                                    <button v-else class="btn-primary-sm radius-sm" type="submit">{{ t('buttons.save') }}</button>
                                 </div> 
                             </form>
                             <div class="mt-4 text-center" v-if="isPrint">
@@ -521,7 +526,7 @@
                                     class="btn-primary-sm radius-sm" 
                                     @click="downloadPdf"
                                     type="button">
-                                    Descargar
+                                    {{ t('buttons.download') }}
                                 </button>
                             </div> 
                         </div>
diff --git a/src/i18n/en.js b/src/i18n/en.js
index a03b80d..5c5f00f 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -58,6 +58,12 @@ const en = {
         operator: 'Operator',
         vehicle: 'Vehicle',
         comment: 'Comment',
+        tons: "Tons",
+        priceTons: "Price per ton",
+        tonLoad: "Approximate load tonnage",
+        originTruckKm1: "Truck origin to load origin(KM)",
+        originTruckKm2: "Loading origin to unloading destination(KM)",
+        destinationTruck1: "Unloading destination to base-yard(KM)",
     },
     buttons: {
         enter: "Enter here",
@@ -84,7 +90,8 @@ const en = {
         confirm: 'Confirm',
         search: 'Search',
         profile: 'View profile',
-        send: 'Send'
+        send: 'Send',
+        download: 'Download'
     },
     errors: {
         required: 'Field is required',
@@ -120,6 +127,7 @@ const en = {
         map: 'Could not be loaded',
         vehicle: 'Select a vehicle',
         comment: 'Add comment',
+        customer: 'Enter customer name'
     },
     messages: {
         sendCode: 'We send you a code to the email, entered!',
@@ -396,6 +404,45 @@ const en = {
         searchShipper: "Search by shipper",
         empty: 'No uploads published'
     },
+    calculator: {
+        title: 'Budget calculator',
+        querySearch: 'Search by customer',
+        empty: 'There are no records',
+        create: '<i class="fa-solid fa-plus"></i> <span class="clear-sm"> Create</span><span class="clear-md"> budget</span>',
+        client: 'Customer',
+        totalkm: 'Total km traveled',
+        totallt: 'Total liters of diesel consumed',
+        totalcostDiesel: 'Total diesel cost',
+        totalBeforeIva: 'Total before VAT',
+        totalUtityByKm: 'Total utility per km',
+        totalUtity: 'Total Utility',
+        percentUtility: 'Utility Percentage',
+        print: 'Print',
+
+        titleDoc: 'RATE CALCULATOR',
+        loadData: 'LOAD DATA',
+        ratekm: 'RATE / MILEAGE',
+        costTruck: 'DIRECT TRUCK COSTS',
+        operatorSalary: 'OPERATOR SALARY',
+        utilityLoss: 'UTILITY / LOSS',
+
+        titleDel: 'Delete Budget!',
+        textDel: 'Are you sure you want to delete this budget?',
+        loadingDel: 'Deleting budget...',
+        msgTitleDel: 'Budget Deleted!',
+        msgDel: 'Your budget has been successfully deleted.',
+        msgTitleNotDel: 'Not Deleted!',
+        msgNotDel: 'Your budget could not be deleted, please try again later.',
+        truckCost1: "Truck performance - Liters per kilometer traveled",
+        truckCost2: "Diesel price per liter",
+        otherSpends: "Other expenses",
+        truckCost4: "Total diesel cost",
+        salaryAdmin: "Administrative expenses",
+        stands: "Toll booths",
+        spendsAdminTotal: "Total administrative expenses",
+        msgUpdate: "<strong>Budget successfully updated!</strong>",
+        msgCreate: "<strong>Budget successfully created!</strong>",
+    },
     calendar: {
         title: 'Calendar',
         helpText: 'Load status indicators',
diff --git a/src/i18n/es.js b/src/i18n/es.js
index 7c7ab21..ead9a18 100644
--- a/src/i18n/es.js
+++ b/src/i18n/es.js
@@ -60,6 +60,12 @@ const es = {
         operator: 'Operador',
         vehicle: 'Vehiculo',
         comment: 'Comentario',
+        tons: "Toneladas",
+        priceTons: "Precio por toneladas",
+        tonLoad: "Tonelaje aproximado de carga",
+        originTruckKm1: "Origen del camión al origin de carga(KM)",
+        originTruckKm2: "Origen de carga a destino de descarga(KM)",
+        destinationTruck1: "Destino de descarga al patio-base(KM)"
     },
     buttons: {
         enter: "Ingresa aqui",
@@ -87,6 +93,7 @@ const es = {
         search: 'Buscar',
         profile: 'Ver perfil',
         send: 'Enviar',
+        download: 'Descargar'
     },
     errors: {
         required: 'Campo es requerido',
@@ -122,6 +129,7 @@ const es = {
         map: "No se pudo cargar mapa",
         vehicle: 'Selecciona un vehiculo',
         comment: 'Agrega comentario',
+        customer: 'Ingrese nombre del cliente'
     },
     messages: {
         sendCode: 'Te enviamos un código al correo, ingresado!',
@@ -397,12 +405,52 @@ const es = {
     carriers: {
         title: 'Directorio de <span class="title-main">Transportistas</span>',
         searchByCarrier: 'Buscar por transportista',
-        empty: 'No hay registros'
+        empty: 'No hay registros',
     },
     shippers: {
         searchShipper: "Buscar por embarcador",
         empty: 'No hay cargas publicadas'
     },
+    calculator: {
+        title: 'Calculator de presupuesto',
+        querySearch: 'Buscar por cliente',
+        empty: 'No hay registros',
+        create: '<i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span>',
+        client: 'Cliente',
+        totalkm: 'Total km recorridos',
+        totallt: 'Total litros de diesel consumidos',
+        totalcostDiesel: 'Costo total del diesel',
+        totalBeforeIva: 'Total antes de IVA',
+        totalUtityByKm: 'Utilidad total por km',
+        totalUtity: 'Utilidad total',
+        percentUtility: 'Porcentaje de utilidad',
+        print: 'Imprimir',
+
+        titleDoc: 'CALCULADORA DE TARIFAS',
+        loadData: 'DATOS DE CARGA',
+        ratekm: 'TARIFA / KILOMETRAJE',
+        costTruck: 'COSTOS DIRECTOS CAMION',
+        operatorSalary: 'SUELDO OPERADOR',
+        utilityLoss: 'UTILIDAD / PERDIDA',
+
+        titleDel: '¡Eliminar Presupuesto!',
+        textDel: '¿Estás seguro de eliminar este presupuesto?',
+        loadingDel: 'Eliminando presupuesto...',
+        msgTitleDel: 'Presupuesto eliminada!',
+        msgDel: 'Tu presupuesto ha sido eliminado exitosamente.',
+        msgTitleNotDel: 'No eliminado!',
+        msgNotDel: 'Tu presupuesto no se pudo eliminar, intente más tarde.',
+        truckCost1: "Rendimiento camión - Litros por kilometro recorrido",
+        truckCost2: "Precio del diesel por litro",
+        otherSpends: "Otros gastos",
+        truckCost4: "Total costo del diesel",
+        salaryAdmin: "Gastas administrativos",
+        stands: "Casetas",
+        spendsAdminTotal: "Gastos administrativos totales",
+        msgUpdate: "<strong>Presupuesto actualizado con éxito!</strong>",
+        msgCreate: "<strong>Presupuesto creado con éxito!</strong>",
+        
+    },
     calendar: {
         title: 'Calendario',
         helpText: 'Indicadores de estado de la carga',
diff --git a/src/views/CalculatorView.vue b/src/views/CalculatorView.vue
index 05a48db..6fadffe 100644
--- a/src/views/CalculatorView.vue
+++ b/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;
         }