From d13aad95665e6fcff87eecbb392726ee313cafed Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Mon, 27 Sep 2021 21:56:04 +0800
Subject: [PATCH] container profile forms ui

---
 .../Containers/RescheduleContainerLogic.php   |   2 +-
 .../ContainerArrivalFormComponent.vue         |  54 ++
 .../ContainerDepatureFormComponent.vue        |  54 ++
 .../ContainerProfileSectionComponent.vue      | 568 +++++++++++-------
 .../elements/RescheduleDateFormComponent.vue  |  60 ++
 .../containerUnpackingFormContainer.vue       |  31 +
 6 files changed, 561 insertions(+), 208 deletions(-)
 create mode 100644 resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue
 create mode 100644 resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue
 create mode 100644 resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue
 create mode 100644 resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue

diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/RescheduleContainerLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/RescheduleContainerLogic.php
index e248281c..b3638b90 100644
--- a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/RescheduleContainerLogic.php
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/RescheduleContainerLogic.php
@@ -65,8 +65,8 @@ class RescheduleContainerLogic extends AbstractControllerLogic
             $this->updatesScheduleStatus->execute($old_sechedule, ApprovalStatus::REJECTED);
 
             $scheduleObject = new ScheduleObject(
-                Carbon::parse($request->input('eta')), 
                 Carbon::parse($request->input('etd')), 
+                Carbon::parse($request->input('eta')), 
                 ApprovalStatus::APPROVED
              );
             $schedule = $this->createsSchedule->execute($transport, $scheduleObject);
diff --git a/resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue b/resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue
new file mode 100644
index 00000000..2ad3b233
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="absolute" style="right: -25px; top: -10px;">
+                <div class="icon-thumbnail btn-rounded icon-25 bg-master fs-12"><i class="fa fa-times text-white fs-12"></i></div>
+            </div>
+            <div class="row m-auto" style="width: 300px;">
+                <div class="col text-center">
+                    <p :class="[{'hide': expanded}]">Are you sure this container has arrived the Destination Port today?</p>
+                    <p :class="[{'hide': !expanded}]">Plese select the actual date of arrival for this container.</p>
+                </div>
+            </div>
+            <div class="row m-t-20" :class="[{'hide': !expanded}]">
+                <div class="col">
+                    <div class="row m-auto mt-10 mb-10">
+                        <div class="col">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.eta">
+                                <label class="text-primary">Date of Arrival </label>
+                                <date-picker-component :parameters="parameters" :value="'eta'"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-15">
+                <div class="col">
+                    <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.update_dispatch_date', data.id), 'put', section, true, true)">Confirm</div>
+                    <p class="text-right small-text m-b-0" @click="expanded = !expanded" >Choose another Date</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                parameters: {
+                    eta: new Date().toJSON().slice(0,10).replace(/-/g,'/'), 
+                },
+                expanded: false,
+            };
+        },
+        validations: {
+            parameters: {
+                eta: { required },
+            }
+        },  
+        mixins: [modalFormHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue b/resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue
new file mode 100644
index 00000000..5b05bd24
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="absolute" style="right: -25px; top: -10px;">
+                <div class="icon-thumbnail btn-rounded icon-25 bg-master fs-12"><i class="fa fa-times text-white fs-12"></i></div>
+            </div>
+            <div class="row m-auto" style="width: 300px;">
+                <div class="col text-center">
+                    <p :class="[{'hide': expanded}]">Are you sure the container has depart from the origin port today?</p>
+                    <p :class="[{'hide': !expanded}]">Plese select the actual date of departure for this container.</p>
+                </div>
+            </div>
+            <div class="row m-t-20" :class="[{'hide': !expanded}]">
+                <div class="col">
+                    <div class="row m-auto mt-10 mb-10">
+                        <div class="col">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.etd">
+                                <label class="text-primary">Date of Departure</label>
+                                <date-picker-component :parameters="parameters" :value="'etd'"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-15">
+                <div class="col">
+                    <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.update_drop_date', data.id), 'put', section, true, true)">Confirm</div>
+                    <p class="text-right small-text m-b-0" @click="expanded = !expanded" >Choose another Date</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                parameters: {
+                    etd: new Date().toJSON().slice(0,10).replace(/-/g,'/'), 
+                },
+                expanded: false,
+            };
+        },
+        validations: {
+            parameters: {
+                etd: { required },
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
index b63f317c..b3a1b289 100644
--- a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
@@ -1,132 +1,167 @@
-<template>
-<div class="row">
-    <div class="col">
-        <div class="row align-items-center">
-            <div class="col bg-master-light rounded padding-20 m-l-10 m-r-10">
-                <div class="row d-flex justify-content-between align-items-center">
-                    <div class="col-auto">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="bold m-b-0">{{container.container_reference}}</h5>
-                                <p>{{container.container_number}}</p>
+<style scoped>
+    .batteryContainer {
+      display: -webkit-box;
+      display: -moz-box;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    
+    .batteryOuter {
+      border-radius: 3px;
+      border: 1px solid #444;
+      width: 25px;
+      height: 9px;
+    }
+    
+    .batteryBump {
+      border-radius: 2px;
+      background-color: #444;
+      margin: 2px;
+      width: 1px;
+      height: 3px;
+    }
+    
+    #batteryLevel {
+      border-radius: 2px;
+      background-color: #73AD21;
+      width: 18px;
+      height: 7px;
+    }
+    
+    .percentageContainer{
+        width: 100px;
+        height: 100px;
+        border: 1px solid #444;
+        position: relative;
+    }
+    .percentageInner{
+        position: absolute;
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        background: #73AD21;
+        margin: 1px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        bottom: 0;
+    }
+    .percentageInnerText{
+        position: absolute;
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        margin: 1px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    </style>
+    <template>
+    <div class="row">
+        <div class="col">
+            <div class="row align-items-center">
+                <div class="col bg-master-light rounded padding-20 m-l-10 m-r-10">
+                    <div class="row d-flex justify-content-between align-items-center">
+                        <div class="col-auto">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="bold m-b-0">{{container.container_reference}}</h5>
+                                    <p>{{container.container_number}}</p>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <p class="m-t-0">Container Type: {{container.container_type}}</p>
+                                </div>
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col">
-                                <p class="m-t-0">Container Type: {{container.container_type}}</p>
+                         <div class="col-auto">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-b-0 large-text normal l-20">ETD</h5>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                     <div class="col-auto">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-b-0 large-text normal l-20">ETD</h5>
+                        <div class="col-auto">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-b-0 large-text normal l-20">ETA</h5>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
+                                </div>
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
+                        <div class="col-auto">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-t-0 large-text">SHANGHAI, CHINA</h5>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="col-auto">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-b-0 large-text normal l-20">ETA</h5>
+                        <div class="col-auto">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-b-0 large-text normal l-20">Destination port</h5>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-t-0 large-text">PORT KLANG NORTH PORT, MALAYSIA</h5>
+                                </div>
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
+                        <div class="col-auto p-r-50">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-b-0 large-text normal l-20">Status</h5>
+                                </div>
                             </div>
-                        </div>
-                    </div>
-                    <div class="col-auto">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-t-0 large-text">SHANGHAI, CHINA</h5>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-auto">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-b-0 large-text normal l-20">Destination port</h5>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-t-0 large-text">PORT KLANG NORTH PORT, MALAYSIA</h5>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-auto p-r-50">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-b-0 large-text normal l-20">Status</h5>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-t-0 large-text">{{container.status}}</h5>
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-t-0 large-text">{{container.status}}</h5>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="row m-t-20">
-            <div class="col bg-master-light rounded m-l-10 m-r-10">
-                <div class="row align-items-center p-t-10 p-b-10 padding-10">
-                    <div class="col-auto">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="bold m-b-0">Package List</h5>
-                                <p>(Total 77 Package in this container)</p>
-                            </div>
-                        </div>
-                    </div>
-                     <div class="col-auto">
-                        <p class="m-b-0">{{ containerFilledPercentage }}%</p>
-                    </div>
-                        <div class="batteryContainer">
-                            <div class="batteryOuter">
-                                <div id="batteryLevel" :style="{ width: svgLenght + 'px' }"></div>
-                            </div>
-                            <div class="batteryBump"></div>
-                        </div>
-                    <div class="col">
-                        <div class="btn btn-default">
-                            Add Package
-                        </div>
-                        <div class="btn btn-default">
-                            Export List
-                        </div>
-                        <div class="btn btn-default">
-                            Print Custom
-                        </div>
-                    </div>
-                    <div class="col-auto p-r-30">
-                        <h5 class="m-b-0 large-text normal l-20">Custom Declaration Status</h5>
-                        <h5 class="m-t-0 text-right">__</h5>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col padding-20 p-l-40 p-r-50">
-                        <div class="row" v-for="packingList in container.packing_lists">
-                            <div class="col">
-                                <div class="row">
-                                    <div class="col">
-                                        <div class="row b-a b-grey bg-master-lightest rounded align-items-center m-b-15 p-t-10 p-b-10" v-for="package_item in packingList.packages">
-                                            <div class="col">{{package_item.description}}</div>
-                                            <div class="col">Quantity: {{package_item.quantity}}</div>
-                                            <div class="col">cbm:{{ package_item.cbm }}</div>
-                                            <div class="col">Remark</div>
+    
+            <div class="row m-t-10 m-b-50">
+                <div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <div class="row h-100">
+                                <div class="col">
+                                    <h5 class="m-b-5 large-text bold l-20">Tracking:</h5>
+                                    <div class="row h-100 p-l-10 p-r-10">
+                                        <div class="col rounded bg-master-lighter padding-15">
+                                            <li class="m-t-10">
+                                                <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal" data-type="rescheduleDate">Reschedule Date form</a>
+                                            </li>
+                                            <li class="m-t-10">
+                                                <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal" data-type="containerDepature">Container Departure</a>
+                                            </li>
+                                            <li class="m-t-10">
+                                                <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal" data-type="containerArrival">Arrival Date</a>
+                                            </li>
+                                            <li class="m-t-10">
+                                                <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal" data-type="containerUnpacking">Date of Unpacking</a>
+                                            </li>
                                         </div>
                                     </div>
                                 </div>
@@ -135,48 +170,175 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="row m-t-10">
-            <div class="col">
-                <div class="row">
-                    <div class="col" style="height: 300px;">
-                        <div class="row h-100">
-                            <div class="col">
-                                <h5 class="m-b-5 large-text bold l-20">Timeline:</h5>
-                                <div class="row h-100 p-l-10 p-r-10">
-                                    <div class="col rounded bg-master-lighter padding-15">
-                                        Timeline
-                                    </div>
-                                </div>
+
+            <!-- <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="confirmStatus">
+                <div class="row" style="width: 400px; margin: auto;">
+                    <div class="col bg-white padding-40 b-rad-lg">
+                        <div class="absolute" style="right: -25px; top: -10px;">
+                            <div class="icon-thumbnail btn-rounded icon-25 bg-master fs-12"><i class="fa fa-times text-white fs-12"></i></div>
+                        </div>
+                        <div class="row m-auto" style="width: 300px;">
+                            <div class="col text-center">
+                                <p>Plese upload required documents eg bill of lading, license, etc. before send container to port of loading</p>
                             </div>
                         </div>
-                    </div>
-                    <div class="col">
-                        <div class="row">
-                            <div class="col">
-                                <h5 class="m-b-5 large-text bold l-20">Comments:</h5>
-                                <div class="row p-l-10 p-r-10">
-                                    <div class="col rounded bg-master-lighter padding-15">
-                                        Comments
+                        <div class="row m-auto mt-10">
+                            <div class="col b-a b-rad-lg">
+                                <div class="row justify-content-center align-items-center">
+                                    <div class="col-auto padding-40">
+                                        <div class="row justify-content-center align-items-center">
+                                            <div class="col-auto">
+                                                <i class="fa fa-upload fs-50 m-t-10 text-master-lighter"></i>
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col">
+                                                <p>Drag and drop here</p>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="row m-t-15">
                             <div class="col">
-                                <div class="row p-l-10 p-r-10">
-                                    <div class="col">
-                                        <h5 class="m-b-5 large-text bold l-20">Related documents:</h5>
-                                    </div>
-                                    <div class="co-auto">
-                                        <div class="btn justify-content bg-master-light">
-                                            <i class="fa fa-upload m-r-10" ></i>Upload Documents    
+                                <div class="btn btn-complete w-100 btn-lg">Browse</div>
+                            </div>
+                            <div class="col">
+                                <div class="btn btn-primary w-100 btn-lg">Next</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </modal-component> -->
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="rescheduleDate">
+                <reschedule-date-form-component :section="section" :data="container"></reschedule-date-form-component>
+            </modal-component>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="containerDepature">
+                <container-depature-form-component :section="section" :data="container"></container-depature-form-component>
+            </modal-component>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="containerArrival">
+                <container-arrival-form-component :section="section" :data="container"></container-arrival-form-component>
+            </modal-component>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="containerUnpacking">
+                <container-unpacking-form-container :section="section" :data="container"></container-unpacking-form-container>
+            </modal-component>
+    
+            <div class="row m-t-20">
+                <div class="col bg-master-light rounded m-l-10 m-r-10">
+                    <div class="row align-items-center p-t-10 p-b-10 padding-10">
+                        <div class="col-auto">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="bold m-b-0">Package List</h5>
+                                    <p>(Total 77 Package in this container)</p>
+                                </div>
+                            </div>
+                        </div>
+                         <div class="col-auto">
+                            <p class="m-b-0">{{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%</p>
+                        </div>
+                            <div class="batteryContainer">
+                                <div class="batteryOuter">
+                                    <div id="batteryLevel" :style="{ width: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
+                                </div>
+                                <div class="batteryBump"></div>
+                            </div>
+                        <div class="col">
+                            <div class="btn btn-default">
+                                Add Package
+                            </div>
+                            <div class="btn btn-default">
+                                Export List
+                            </div>
+                            <div class="btn btn-default">
+                                Print Custom
+                            </div>
+                        </div>
+                        <div class="col-auto p-r-30">
+                            <h5 class="m-b-0 large-text normal l-20">Custom Declaration Status</h5>
+                            <h5 class="m-t-0 text-right">__</h5>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="percentageContainer">
+                                <div class="percentageInner" :style="{ height: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
+                                <div class="percentageInnerText">
+                                     {{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col padding-20 p-l-40 p-r-50">
+                            <!-- table -->
+                            <div class="row" v-for="packingList in container.packing_lists">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row b-a b-grey bg-master-lightest rounded align-items-center m-b-15 p-t-10 p-b-10" v-for="package_item in packingList.packages">
+                                                <div class="col">{{package_item.description}}</div>
+                                                <div class="col">Quantity: {{package_item.quantity}}</div>
+                                                <div class="col">cbm:{{ package_item.cbm }}</div>
+                                                <div class="col">Remark</div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="row p-l-10 p-r-10">
-                                    <div class="col rounded bg-master-lighter padding-15">
-                                        documents
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-10">
+                <div class="col">
+                    <div class="row">
+                        <div class="col" style="height: 300px;">
+                            <div class="row h-100">
+                                <div class="col">
+                                    <h5 class="m-b-5 large-text bold l-20">Timeline:</h5>
+                                    <div class="row h-100 p-l-10 p-r-10">
+                                        <div class="col rounded bg-master-lighter padding-15">
+                                            Timeline
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="m-b-5 large-text bold l-20">Comments:</h5>
+                                    <div class="row p-l-10 p-r-10">
+                                        <div class="col rounded bg-master-lighter padding-15">
+                                            Comments
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row m-t-15">
+                                <div class="col">
+                                    <div class="row p-l-10 p-r-10">
+                                        <div class="col">
+                                            <h5 class="m-b-5 large-text bold l-20">Related documents:</h5>
+                                        </div>
+                                        <div class="co-auto">
+                                            <div class="btn justify-content bg-master-light">
+                                                <i class="fa fa-upload m-r-10" ></i>Upload Documents    
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row p-l-10 p-r-10">
+                                        <div class="col rounded bg-master-lighter padding-15">
+                                            documents
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -186,70 +348,62 @@
             </div>
         </div>
     </div>
-</div>
-</template>
-<script>
-    export default {
-        props: {
-            id: {
-                type: Number,
-                required: true,
-            }  
-        },
-        data(){
-            return {
-                section: 'containerPofileSection',
-                isLoading: true,
-                container: null,
-                expanded: false,
-                totalCBM: 6,
-                CBMcapacity: 30,
-                svgLenght: 0,
-                svgLenghtSquare: 0,
-                confirmLanding: false,
-            }
-        },
-        computed: {
-            pendingQueue () {   
-                return this.$store.getters.isInCompleteQueue(this.section);
+    </template>
+    <script>
+import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
+        export default {
+  components: { RescheduleDateFormComponent },
+            props: {
+                id: {
+                    type: Number,
+                    required: true,
+                }  
             },
-            containerFilledPercentage() {
-                this.svgLenght = this.totalCBM / this.CBMcapacity * 25;
-                this.svgLenghtSquare = this.totalCBM / this.CBMcapacity * 100 -2;
-                return this.totalCBM / this.CBMcapacity * 100;
-            }
-            // totalCbm () {
-            //     let totalCbm = 0;
-                
-            //     return this.container.packing_lists.map(function(packing_list){
-            //         totalCbm += packing_list.packages.reduce((total, obj) => obj.quantity + total, 0);
-            //     })
-            // }
-        },
-        watch: {
-            pendingQueue(inComplete){
-                if(inComplete){
-                    this.fetchCompany();
+            data(){
+                return {
+                    section: 'containerPofileSection',
+                    isLoading: true,
+                    container: null,
+                    expanded: false,
+                    totalCBM: 6,
+                    CBMcapacity: 30,
+                    svgLenght: 0,
+                    svgLenghtSquare: 0,
+                    confirmLanding: false,
+                }
+            },
+            computed: {
+                pendingQueue () {   
+                    return this.$store.getters.isInCompleteQueue(this.section);
+                },
+                loadedCBM() {
+                    return (Math.ceil((this.container.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.cbm + total, 0), 0)) * 1000) / 1000).toFixed(3)
+                }
+            },
+            watch: {
+                pendingQueue(inComplete){
+                    if(inComplete){
+                        this.fetchCompany();
+                    }
+                }
+            },
+            created(){
+                this.$store.dispatch('updateListQueue', {'name': this.section});
+            },
+            methods: {
+                fetchCompany(){
+                    this.isLoading = true;
+                    this.submit(route('api.packing_list.container.show', this.id), 'get', this.section, false, false)
+                },
+                successHandler(response){
+                    this.$store.dispatch('completeList', {'name': this.section, 'data': []});
+                    this.isLoading = false;
+                    this.container = response.payload.data;
+                },
+                confirmStatus(){
+                    this.confirmLanding = true;
+                    console.log(this.confirmLanding);
                 }
             }
-        },
-        created(){
-            this.$store.dispatch('updateListQueue', {'name': this.section});
-        },
-        methods: {
-            fetchCompany(){
-                this.isLoading = true;
-                this.submit(route('api.packing_list.container.show', this.id), 'get', this.section, false, false)
-            },
-            successHandler(response){
-                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
-                this.isLoading = false;
-                this.container = response.payload.data;
-            },
-            confirmStatus(){
-                this.confirmLanding = true;
-                console.log(this.confirmLanding);
-            }
         }
-    }
-</script>
\ No newline at end of file
+    </script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue b/resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue
new file mode 100644
index 00000000..12e37ee6
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="absolute" style="right: -25px; top: -10px;">
+                <div class="icon-thumbnail btn-rounded icon-25 bg-master fs-12" data-bs-dismiss="modal" aria-label="Close"><i class="fa fa-times text-white fs-12"></i></div>
+            </div>
+            <div class="row m-b-10">
+                <div class="col text-center">
+                    <p>Plese set the approximate dates of below.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="row m-auto mt-10 mb-10">
+                        <div class="col">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.etd">
+                                <label class="text-primary">Etd</label>
+                                <date-picker-component :parameters="parameters" :value="'etd'"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.eta">
+                                <label class="text-primary">Eta</label>
+                                <date-picker-component :parameters="parameters" :value="'eta'"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-15 m-l-20 m-r-20">
+                <div class="col">
+                    <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.reschedule', data.id), 'put', section, true, true)">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                parameters: {
+                    etd: this.etd, 
+                    eta: this.eta, 
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                etd: { required },
+                eta: { required },
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue b/resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue
new file mode 100644
index 00000000..4587a7fd
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="absolute" style="right: -25px; top: -10px;">
+                <div class="icon-thumbnail btn-rounded icon-25 bg-master fs-12"><i class="fa fa-times text-white fs-12"></i></div>
+            </div>
+            <div class="row m-auto" style="width: 300px;">
+                <div class="col text-center">
+                    <p>Are you sure this container has been unpacked today?</p>
+                </div>
+            </div>
+            <div class="row m-t-15">
+                <div class="col">
+                    <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.complete', data.id), 'put', section, true, true)">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+
+    export default {
+        data() {
+            return {
+                expanded: false,
+            };
+        },
+        mixins: [modalFormHandler]
+    }
+</script>
\ No newline at end of file