From d2f6f4e8a11ec8614dee8f45ded91062c6a3dcc5 Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Tue, 12 Nov 2024 17:45:01 +0800
Subject: [PATCH] Laravel Vapor - YD API integration code rewrite to fix
 eta/etd

---
 .../orders/elements/PackageComponent.vue        | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/resources/assets/vue/components/orders/elements/PackageComponent.vue b/resources/assets/vue/components/orders/elements/PackageComponent.vue
index 66caba50..579ad87e 100644
--- a/resources/assets/vue/components/orders/elements/PackageComponent.vue
+++ b/resources/assets/vue/components/orders/elements/PackageComponent.vue
@@ -153,11 +153,11 @@
                                                 <div class="col">
                                                     <div class="row no-margin">
                                                         <div class="col-auto">
-                                                            <small class="fs-10 all-caps muted">Etd</small>
+                                                            <small class="fs-10 all-caps muted date-width">Etd</small>
                                                             <h6 class="no-margin small">{{schedule.etd}}</h6>
                                                         </div>
                                                         <div class="col-auto">
-                                                            <small class="fs-10 all-caps muted">Eta</small>
+                                                            <small class="fs-10 all-caps muted date-width">Eta</small>
                                                             <h6 class="no-margin small">{{schedule.eta}}</h6>
                                                         </div>
                                                     </div>
@@ -167,15 +167,15 @@
                                                 <div class="col">
                                                     <div class="row no-margin">
                                                         <div class="col-auto" v-if="!item.container.transport.schedule_history.length">
-                                                            <small class="fs-10 all-caps muted">Etd</small>
+                                                            <small class="fs-10 all-caps muted date-width">Etd</small>
                                                             <h6 class="no-margin small">{{item.container ? item.container.transport.current_schedule.etd : 'n/a'}}</h6>
                                                         </div>
                                                         <div class="col-auto" v-else-if="item.container.transport.schedule_history.length > 0 && item.container && item.container.transport.current_schedule.etd !== item.container.transport.schedule_history[0].etd">
-                                                            <small class="fs-10 all-caps muted">Rescheduled Etd</small>
+                                                            <small class="fs-10 all-caps muted date-width">Rescheduled Etd</small>
                                                             <h6 class="no-margin small">{{item.container ? item.container.transport.current_schedule.etd : 'n/a'}}</h6>
                                                         </div>
                                                         <div class="col-auto">
-                                                            <small class="fs-10 all-caps muted">{{!item.container.transport.schedule_history.length ? 'Eta' : 'Rescheduled Eta' }}</small>
+                                                            <small class="fs-10 all-caps muted date-width">{{!item.container.transport.schedule_history.length ? 'Eta' : 'Rescheduled Eta' }}</small>
                                                             <h6 class="no-margin small">{{item.container ? item.container.transport.current_schedule.eta : 'n/a'}}</h6>
                                                         </div>
                                                     </div>
@@ -224,3 +224,10 @@
         mixins: [componentHandler]
     }
 </script>
+<style scoped>
+    .date-width {
+        display: inline-block;
+        width: 50px;
+        text-align: left;
+    }
+</style>