From 9ed40354675c61b4fae9fb033a2b5eb3860b97c3 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Wed, 30 Jul 2025 21:33:21 -0600
Subject: [PATCH] fix: date local

---
 src/components/CardLoad.vue                   |  6 ++---
 src/components/CardVehicle.vue                |  4 ++--
 src/helpers/date_formats.js                   | 23 +++++++++++++++++++
 src/views/CalendarView.vue                    | 10 ++++----
 src/views/loads/modals/FormLoadModal.vue      | 14 ++++-------
 .../vehicles/modals/StatusVehicleModal.vue    |  8 ++-----
 6 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue
index 9c8fd54..a0827d1 100644
--- a/src/components/CardLoad.vue
+++ b/src/components/CardLoad.vue
@@ -1,5 +1,5 @@
 <script setup>
-    import { getDateOnly } from '../helpers/date_formats';
+    import { getDayMonthYear } from '../helpers/date_formats';
     import { getStatusPublished } from '../helpers/status';
     import { getStatusLoad } from '../helpers/status';
     import { useLoadsStore } from '../stores/loads';
@@ -169,12 +169,12 @@
             <div class="col-lg-4 col-sm-12">
                 <p><span>{{t('loads.truckType')}}: </span> {{ load.truck_type }}</p>
                 <p><span>{{t('loads.weight')}}: </span> {{ load.weight }} KG</p>
-                <p><span>{{t('loads.dateLoad')}}: </span> {{ getDateOnly(load.est_loading_date) }}</p>
+                <p><span>{{t('loads.dateLoad')}}: </span> {{ getDayMonthYear(load.est_loading_date) }}</p>
             </div>
             <div class="col-lg-4 col-sm-12">
                 <p><span>{{t('loads.product')}}: </span> {{ load?.product?.name }}</p>
                 <p><span>{{t('loads.cost')}}: </span> {{ load.actual_cost }}</p>
-                <p><span>{{t('loads.dateDownload')}}: </span> {{getDateOnly(load.est_unloading_date)  }}</p>
+                <p><span>{{t('loads.dateDownload')}}: </span> {{getDayMonthYear(load.est_unloading_date)  }}</p>
             </div>
             <div class="col-lg-4 col-sm-12">
                 <p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
diff --git a/src/components/CardVehicle.vue b/src/components/CardVehicle.vue
index b3e989d..04753f6 100644
--- a/src/components/CardVehicle.vue
+++ b/src/components/CardVehicle.vue
@@ -1,6 +1,6 @@
 <script setup>
     import Swal from 'sweetalert2';
-    import { getDateOnly } from '../helpers/date_formats';
+    import { getDayMonthYear } from '../helpers/date_formats';
     import { useVehiclesStore } from '../stores/vehicles';
     import { useAuthStore } from '../stores/auth';
     import { useI18n } from 'vue-i18n';
@@ -112,7 +112,7 @@
                         </i>
                     </span>
                 </p>
-                <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateOnly(vehicle.available_date) }}</span></p>
+                <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDayMonthYear(vehicle.available_date) }}</span></p>
                 <p v-if="vehicle.active_load && !readOnly">
                     {{ t('loads.loadCode') }}: 
                     <span
diff --git a/src/helpers/date_formats.js b/src/helpers/date_formats.js
index 29c77e1..0bc5eea 100644
--- a/src/helpers/date_formats.js
+++ b/src/helpers/date_formats.js
@@ -101,6 +101,29 @@ export const getDateOnly = (value) => {
   return dateFormat;
 }
 
+export const getDateToLocal = (value) => {
+  if (!value) return 'Fecha inválida';
+  const date = new Date(value);
+  return date.toLocaleDateString('es-MX', {
+    timeZone: 'America/Mexico_City',
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  });
+};
+
+export const getDateTimeFormat = (value, hour) => {
+
+  const year = value.substring(0, 4);
+  const month = value.substring(5, 7);
+  const day = value.substring(8, 10);
+
+  // Crear la cadena de fecha formateada
+  const dateFormat = `${year}-${month}-${day} 0${hour}:00`;
+
+  return dateFormat;
+}
+
 export const formatOnlyDate = (date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0'); // Agregar cero si es necesario
diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
index e674602..410faa9 100644
--- a/src/views/CalendarView.vue
+++ b/src/views/CalendarView.vue
@@ -1,7 +1,7 @@
 <script setup>
     import { Qalendar } from 'qalendar';
     import {eventStatusLoad} from '../helpers/status';
-    import {getDateTime, formatOnlyDate} from '../helpers/date_formats';
+    import {getDateTimeFormat, formatOnlyDate} from '../helpers/date_formats';
     import { onMounted, ref } from 'vue';
     import { useI18n } from 'vue-i18n';
     import useCalendar from '../composables/useCalendar';
@@ -64,7 +64,7 @@ import { useAuthStore } from '../stores/auth';
       },
       defaultMode: 'month',
       isSilent: true,
-    //   showCurrentTime: true, // Display a line indicating the current time 
+    //   showCurrentTime: false, // Display a line indicating the current time 
     }
 
     onMounted( async() => {
@@ -119,8 +119,8 @@ import { useAuthStore } from '../stores/auth';
         events.value = [];
         loads.value.forEach((e) => {
             const indicator = eventStatusLoad(e.load_status);
-            const dateStart = getDateTime(e.est_loading_date, 0);
-            const dateEnd = getDateTime(e.est_loading_date, 1);
+            const dateStart = getDateTimeFormat(e.est_loading_date, 0);
+            const dateEnd = getDateTimeFormat(e.est_loading_date, 1);
             events.value.push({
                 id: e._id,
                 title: e.shipment_code.toUpperCase(),
@@ -128,7 +128,7 @@ import { useAuthStore } from '../stores/auth';
                 start: e.est_loading_date,
                 end: e.est_unloading_date,
                 description: indicator.load_status,
-                colorScheme: e.load_status.toLowerCase(),
+                colorScheme: e.load_status?.toLowerCase(),
                 color: indicator.color,
                 time: {
                     start: dateStart,
diff --git a/src/views/loads/modals/FormLoadModal.vue b/src/views/loads/modals/FormLoadModal.vue
index 06a2706..6b832bd 100644
--- a/src/views/loads/modals/FormLoadModal.vue
+++ b/src/views/loads/modals/FormLoadModal.vue
@@ -14,7 +14,7 @@
     import { useCompanyStore } from '../../../stores/company';
     import { useI18n } from 'vue-i18n';
     import { computed } from 'vue';
-    import {getDateTime } from '../../../helpers/date_formats';
+    import {getDateToLocal } from '../../../helpers/date_formats';
     import { validateEmail } from '../../../helpers/validations';
     import AddressPreview from '../../../components/AddressPreview.vue';
 
@@ -80,8 +80,8 @@
         getLocations('loading');
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
         if(loadStore.currentLoad){
-            const dateStart = getDateTime(loadStore.currentLoad.est_loading_date, 0);
-            const dateEnd = getDateTime(loadStore.currentLoad.est_unloading_date, 0);
+            const dateStart = loadStore.currentLoad.est_loading_date;
+            const dateEnd = loadStore.currentLoad.est_unloading_date;
             formLoad.price = loadStore.currentLoad.actual_cost;
 			formLoad.segment = loadStore.currentLoad.categories?.length <= 0 ? [] : loadStore.currentLoad.categories.map(m =>{
 				return m;
@@ -219,12 +219,8 @@
     });
 
     const setLoadData = () => {
-        const currentDate = new Date();
-        const hours = currentDate.getHours().toString().padStart(2, '0');
-        const minutes = currentDate.getMinutes().toString().padStart(2, '0');
-        const seconds = currentDate.getSeconds().toString().padStart(2, '0');
-        const startDate = formLoad.dateLoad === "" ? null : new Date(`${formLoad.dateLoad}T${hours}:${minutes}:${seconds}`).toISOString();
-        const endDate = formLoad.dateDownload === "" ? null : new Date(`${formLoad.dateDownload}T${hours}:${minutes}:${seconds}`).toISOString();
+        const startDate = formLoad.dateLoad === "" ? null : formLoad.dateLoad;
+        const endDate = formLoad.dateDownload === "" ? null : formLoad.dateDownload;
         let loadData = {
 			actual_cost: formLoad.price,
 			truck_type: formLoad.truckType?.meta_value || null,
diff --git a/src/views/vehicles/modals/StatusVehicleModal.vue b/src/views/vehicles/modals/StatusVehicleModal.vue
index 7a829ad..8a07bb2 100644
--- a/src/views/vehicles/modals/StatusVehicleModal.vue
+++ b/src/views/vehicles/modals/StatusVehicleModal.vue
@@ -26,7 +26,7 @@
         
         const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
         const [availableCityName = '', availableStateName = ''] = props.vehicle.available_in?.split(';') || [];
-        const date = getDateTime( props.vehicle?.available_date || new Date(), 0);
+        const date = props.vehicle?.available_date || getDateTime(new Date(), 0);
         formAvailiable.destinoCity = destinoCityName ? { city_name: destinoCityName } : '';
         formAvailiable.destinoState = destinoStateName ? { state_name: destinoStateName } : '';
         formAvailiable.availableCity = availableCityName ? { city_name: availableCityName } : '';
@@ -55,15 +55,11 @@
 
     const handleSetStatusVehicle = async() => {
         let vehicleData;
-        const currentDate = new Date();
-        const hours = currentDate.getHours().toString().padStart(2, '0');
-        const minutes = currentDate.getMinutes().toString().padStart(2, '0');
-        const seconds = currentDate.getSeconds().toString().padStart(2, '0');
         if(statusSelected.value === 'Availiable') {
             validations();
             if(errors.value.availableCity || errors.value.availableState || errors.value.destinoCity || errors.value.destinoState ) return;
             vehicleData = {
-				available_date : new Date(`${formAvailiable.available_date}T${hours}:${minutes}:${seconds}`).toISOString(),
+				available_date : new Date(`${formAvailiable.available_date}`).toISOString(),
                 destino: formAvailiable.destinoCity.city_name + ';' + formAvailiable.destinoState.state_name,
                 available_in: formAvailiable.availableCity.city_name + ';' + formAvailiable.availableState.state_name,
                 is_available : true