diff --git a/Dockerfile b/Dockerfile
index e62299c..4be3467 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:latest
+FROM node:20.11.1
 
 ENV VITE_BASE_URL="http://localhost:9510"
 ENV VITE_AUTO_URL="http://localhost:9514"
diff --git a/Dockerfile.prod b/Dockerfile.prod
index b930d71..9562825 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -2,6 +2,8 @@
 
 FROM node:20.11.1 AS builder
 
+ENV TZ="America/New_York"
+
 ENV VITE_BASE_URL="http://192.168.1.204:9510"
 ENV VITE_PRINT_URL="http://192.168.1.204:9512"
 ENV VITE_MONEY_URL="http://192.168.1.204:9513"
diff --git a/src/assets/main.css b/src/assets/main.css
deleted file mode 100755
index 30e3dd3..0000000
--- a/src/assets/main.css
+++ /dev/null
@@ -1,17 +0,0 @@
-select {
-    -webkit-appearance: listbox !important
-}
-input[type=file]::-webkit-file-upload-button,
-input[type=file]::file-selector-button {
-    /*@apply text-white bg-gray-700 hover:bg-gray-600  rounded-md font-bold text-sm cursor-pointer border-0 py-2.5 pl-4 pr-4;*/
-}
-.wrapper {
-    min-height: calc(100vh - 558px);
-    margin-top: 20px;
-}
-
-.WrapperPlain {
-    min-height: calc(100vh - 75px);
-    margin-top: 20px;
-}
-
diff --git a/src/layouts/sidebar/sidebar.vue b/src/layouts/sidebar/sidebar.vue
index 5817725..0a1be9f 100755
--- a/src/layouts/sidebar/sidebar.vue
+++ b/src/layouts/sidebar/sidebar.vue
@@ -61,6 +61,17 @@
           <router-link :to="{ name: 'deliveryIssue' }">
             <div class=" hover:underline py-1">Issue Tickets</div>
           </router-link>
+          <router-link :to="{ name: 'deliveryPending' }">
+            <div class=" hover:underline py-1" v-if="pending_count > 0">
+              <div class="flex gap-5">
+                <div class="">Pending Payment  </div>
+                <div class="text-orange-600"> ({{ pending_count }})</div>
+              </div>
+            </div>
+            <div class=" hover:underline py-1" v-else>Pending Payment  </div>
+          </router-link>
+
+
           <router-link :to="{ name: 'deliveryFinalized' }">
             <div class=" hover:underline py-1">Finalized Tickets</div>
           </router-link>
@@ -107,16 +118,30 @@ export default defineComponent({
     this.getTodayCount();
     this.getTommorrowCount();
     this.getWaitingCount();
+    this.getPendingCount();
+    this.updatestatus();
   },
   data() {
     return {
       waiting_count: 0,
       today_count: 0,
       tommorrow_count: 0,
+      pending_count: 0,
     };
   },
 
   methods: {
+    updatestatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        if (response.data.update)
+          console.log("ok")
+      })
+    },
     getTodayCount() {
       let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/today';
       axios({
@@ -139,6 +164,17 @@ export default defineComponent({
 
       })
     },
+    getPendingCount() {
+      let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/pending';
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.pending_count = response.data.count
+
+      })
+    },
     getWaitingCount() {
       let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/waiting';
       axios({
diff --git a/src/main.ts b/src/main.ts
index 3254c8b..02455e1 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,16 +1,13 @@
 import { createApp } from 'vue';
 import './assets/tailwind.css'
-import './assets/main.css'
 import App from './App.vue';
 import router from './router';
 import Notifications from '@kyvg/vue3-notification';
 import Pagination from 'v-pagination-3';
 import { createPinia } from 'pinia';
-import { PDFPlugin } from 'vue3-pdfmake';
 
 const app = createApp(App)
     app.use(createPinia())
     app.use(router)
-    app.use(PDFPlugin)
     .component('pagination', Pagination);
     app.use(Notifications).mount('#app')
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index b356b15..6df560a 100755
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -155,6 +155,7 @@ export default defineComponent({
         })
 
     },
+
     totalgallonsweek() {
       let path = import.meta.env.VITE_BASE_URL + '/stats/gallons/week';
       axios({
diff --git a/src/pages/card/home.vue b/src/pages/card/home.vue
index 7a17be2..0fc7537 100755
--- a/src/pages/card/home.vue
+++ b/src/pages/card/home.vue
@@ -66,11 +66,11 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
+
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="10" :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
+     
 
     </div>
   </div>
diff --git a/src/pages/customer/home.vue b/src/pages/customer/home.vue
index f418cbf..8de77f7 100755
--- a/src/pages/customer/home.vue
+++ b/src/pages/customer/home.vue
@@ -29,7 +29,7 @@
             <div class="col-span-12 font-bold text-xl">Quick Tips</div>
             <div class="col-span-3 py-2">  @ = last name search</div>
             <div class="col-span-3 py-2">  ! = address</div>
-            <div class="col-span-3 py-2">  # = phone number</div>
+          
             <div class="col-span-3 py-2">  $ = account number</div>
           </div>
         </div>
@@ -48,7 +48,8 @@
           </thead>
           <tbody>
             <!-- row 1 -->
-            <tr v-for="person in customers" :key="person['id']">
+          
+            <tr v-for="person in customers" :key="person['id']" >
               <td>
                 <router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }">{{ person['account_number'] }}
                 </router-link>
@@ -65,7 +66,7 @@
               </td>
               <td>{{ person['customer_phone_number'] }}</td>
 
-              <td class="flex gap-5">
+              <td class="flex gap-5 ">
                 <router-link :to="{ name: 'deliveryCreate', params: { id: person['id'] } }"
                   class="btn-sm btn bg-orange-600 text-white">
                   Create Delivery
@@ -86,12 +87,14 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
+   <div class="mt-10">
+        <pagination @paginate="getPage" :records="customer_count" v-model="page" :per-page="10" :options="options">
         </pagination>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
 
+        <div class="flex justify-center mb-10"> {{ customer_count }} items Found</div>
+ 
+     
+      </div>
     </div>
   </div>
 
diff --git a/src/pages/customer/profile/home.vue b/src/pages/customer/profile/home.vue
index 4c44767..b958a33 100755
--- a/src/pages/customer/profile/home.vue
+++ b/src/pages/customer/profile/home.vue
@@ -252,7 +252,23 @@
                             {{ card.card_number }}
                           </div>
                           <div class="flex p-1 pl-4">
-                            {{ card.expiration_month }}/ {{ card.expiration_year }}
+                          <div v-if="card.expiration_month == 1">01</div>
+                          <div v-if="card.expiration_month == 2">02</div>
+                          <div v-if="card.expiration_month == 3">03</div>
+                          <div v-if="card.expiration_month == 4">04</div>
+                          <div v-if="card.expiration_month == 5">05</div>
+                          <div v-if="card.expiration_month == 6">06</div>
+                          <div v-if="card.expiration_month == 7">07</div>
+                          <div v-if="card.expiration_month == 8">08</div>
+                          <div v-if="card.expiration_month == 9">09</div>
+                          <div v-if="card.expiration_month == 10">10</div>
+                          <div v-if="card.expiration_month == 11">11</div>
+                          <div v-if="card.expiration_month == 12">12</div>
+           
+                            <div class=" pl-1 pr-1">/ </div>
+                            
+                            <div class=""> {{ card.expiration_year }} </div>
+                           
                           </div>
                           <div class="flex p-1 pl-4">
                             {{ card.zip_code }}
@@ -281,11 +297,30 @@
                             {{ card.card_number }}
                           </div>
                           <div class="flex p-1 pl-4">
-                            {{ card.expiration_month }}/ {{ card.expiration_year }}
+                          <div v-if="card.expiration_month == 1">01</div>
+                          <div v-if="card.expiration_month == 2">02</div>
+                          <div v-if="card.expiration_month == 3">03</div>
+                          <div v-if="card.expiration_month == 4">04</div>
+                          <div v-if="card.expiration_month == 5">05</div>
+                          <div v-if="card.expiration_month == 6">06</div>
+                          <div v-if="card.expiration_month == 7">07</div>
+                          <div v-if="card.expiration_month == 8">08</div>
+                          <div v-if="card.expiration_month == 9">09</div>
+                          <div v-if="card.expiration_month == 10">10</div>
+                          <div v-if="card.expiration_month == 11">11</div>
+                          <div v-if="card.expiration_month == 12">12</div>
+           
+                            <div class=" pl-1 pr-1">/ </div>
+                            
+                            <div class=""> {{ card.expiration_year }} </div>
+                           
                           </div>
                           <div class="flex p-1 pl-4">
                             {{ card.zip_code }}
                           </div>
+                          <div class="flex p-1 pl-4">
+                            {{ card.security_number }}
+                          </div>
                           <div class="flex justify-between">
                             <a @click.prevent="editCard(card.id)"
                               class="cursor-pointer underline hover:text-blue-300">Edit
@@ -398,9 +433,12 @@
                       <td>{{ oil['customer_town'] }}</td>
                       <td>{{ oil['customer_name'] }}</td>
                       <td>{{ oil['customer_address'] }}</td>
-                      <td>
-
-                        {{ oil['gallons_delivered'] }}
+                      <td v-if="oil['delivery_status'] != 10">
+                        <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
+                        <div v-else> {{ oil['gallons_ordered'] }}</div>
+                      </td>
+                      <td v-else>
+                        {{oil['gallons_delivered']}}
                       </td>
                       <td>{{ oil['expected_delivery_date'] }}</td>
 
@@ -497,11 +535,12 @@ export default defineComponent({
           name_on_card: '',
           main_card: false,
           card_number: '',
-          expiration_month: '',
+          expiration_month: 0,
           type_of_card: '',
           last_four_digits: '',
           expiration_year: '',
           zip_code: '',
+          security_number: '',
 
         }
       ],
@@ -682,6 +721,7 @@ export default defineComponent({
       }).then((response: any) => {
 
         this.customer_last_delivery = response.data.date
+        console.log(response.data)
       })
     },
     getCustomerStats(userid: any) {
diff --git a/src/pages/delivery/create.vue b/src/pages/delivery/create.vue
index 8ca7993..78258d5 100755
--- a/src/pages/delivery/create.vue
+++ b/src/pages/delivery/create.vue
@@ -87,9 +87,6 @@
               Create Delivery
             </div>
 
-
-
-
             <form class="col-span-12 rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
               @submit.prevent="onSubmit">
 
@@ -206,6 +203,13 @@
                 </select>
               </div>
 
+              <div class="mb-4">
+                <label class="block text-white text-sm font-bold mb-2">Dispatcher Note on Ticket</label>
+                <textarea v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken" rows="4"
+                class="textarea block p-2.5 w-full input-bordered " id="description" type="text" placeholder="Notes on ticket" />
+              </div>
+
+
 
               <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
                 <button class="btn-sm btn bg-orange-600 text-white">
diff --git a/src/pages/delivery/edit.vue b/src/pages/delivery/edit.vue
index 2f86c64..d5db497 100755
--- a/src/pages/delivery/edit.vue
+++ b/src/pages/delivery/edit.vue
@@ -129,11 +129,27 @@
         </div>
       </div>
       <div class="col-span-1">
+
+        
         <form class="rounded-md px-8 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
+
+          <div class="col-span-12 mb-4">
+            <label class="block text-white text-sm font-bold mb-2">Gallons Ordered</label>
+            <input v-model="CreateOilOrderForm.basicInfo.gallons_ordered"
+              :disabled="CreateOilOrderForm.basicInfo.customer_asked_for_fill"
+              class="input input-bordered input-sm w-full max-w-xs" id="title" type="text" placeholder="# gallons" />
+            <span v-if="v$.CreateOilOrderForm.basicInfo.gallons_ordered.$error" class="text-red-600 text-center">
+              {{ v$.CreateOilOrderForm.basicInfo.gallons_ordered.$errors[0].$message }}
+            </span>
+          </div>
+
+
+
           <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
             <label class="block text-white text-sm font-bold cursor-pointer label">Cash</label>
             <input v-model="CreateOilOrderForm.basicInfo.cash" class="checkbox checkbox-xs" id="cash" type="checkbox" />
           </div>
+          
           <div v-if="userCards.length > 0">
           <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
             <label class="block text-white text-sm font-bold cursor-pointer label">Credit </label>
@@ -175,9 +191,6 @@
 
 
 
-
-
-
           <div class="flex-1 mb-4">
             <label class="block text-white text-sm font-bold mb-2">Delivery Status</label>
             <select class="select select-bordered select-sm w-full max-w-xs" aria-label="Default select example"
@@ -196,15 +209,7 @@
             <input v-model="CreateOilOrderForm.basicInfo.customer_asked_for_fill" class="checkbox checkbox-xs" id="fill"
               type="checkbox" />
           </div>
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Gallons Ordered</label>
-            <input v-model="CreateOilOrderForm.basicInfo.gallons_ordered"
-              :disabled="CreateOilOrderForm.basicInfo.customer_asked_for_fill"
-              class="input input-bordered input-sm w-full max-w-xs" id="title" type="text" placeholder="# gallons" />
-            <span v-if="v$.CreateOilOrderForm.basicInfo.gallons_ordered.$error" class="text-red-600 text-center">
-              {{ v$.CreateOilOrderForm.basicInfo.gallons_ordered.$errors[0].$message }}
-            </span>
-          </div>
+         
           <div class="mb-4">
             <label class="block text-white text-sm font-bold mb-2">Delivery Created </label>
             <input v-model="CreateOilOrderForm.basicInfo.created_delivery_date"
@@ -223,12 +228,7 @@
           </div>
 
 
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold cursor-pointer label">Delivery Notes</label>
-            <textarea class="textarea textarea-bordered h-24 w-full"
-              placeholder="Describe any thing given from the customer .."
-              v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken"></textarea>
-          </div>
+
           <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
             <label class="block text-white text-sm font-bold cursor-pointer label">Prime</label>
             <input v-model="CreateOilOrderForm.basicInfo.prime" class="checkbox checkbox-xs" id="prime"
@@ -265,6 +265,11 @@
             </select>
           </div>
 
+          <div class="mb-4">
+                <label class="block text-white text-sm font-bold mb-2">Dispatcher Note on Ticket</label>
+                <textarea v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken" rows="4"
+                class="textarea block p-2.5 w-full input-bordered " id="description" type="text" placeholder="Notes on ticket" />
+              </div>
 
           <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
             <button class="btn btn-accent btn-sm">
@@ -464,11 +469,12 @@ export default defineComponent({
       })
         .then((response: any) => {
           if (response.data) {
+            console.log( response.data.delivery.delivery_dispatcher_notes)
             this.CreateOilOrderForm.basicInfo.gallons_ordered = response.data.delivery.delivery_gallons_ordered;
             this.CreateOilOrderForm.basicInfo.customer_asked_for_fill = response.data.delivery.delivery_asked_for_fill;
             this.CreateOilOrderForm.basicInfo.expected_delivery_date = response.data.delivery.delivery_expected_delivery_date;
             this.CreateOilOrderForm.basicInfo.created_delivery_date = response.data.delivery.when_ordered;
-            this.CreateOilOrderForm.basicInfo.dispatcher_notes_taken = response.data.delivery.delivery_dispatcher_notes;
+            this.CreateOilOrderForm.basicInfo.dispatcher_notes_taken = response.data.delivery.dispatcher_notes_taken;
             this.CreateOilOrderForm.basicInfo.prime = response.data.delivery.delivery_prime;
             this.CreateOilOrderForm.basicInfo.emergency = response.data.delivery.delivery_emergency;
             this.CreateOilOrderForm.basicInfo.same_day = response.data.delivery.delivery_same_day;
@@ -619,6 +625,7 @@ export default defineComponent({
       })
         .then((response: any) => {
           if (response.data.ok) {
+            this.updatestatus()
             this.$router.push({ name: "deliveryOrder", params: { id: this.deliveryOrder.id } });
           }
           if (response.data.error) {
@@ -645,9 +652,21 @@ export default defineComponent({
         promo_id: this.CreateOilOrderForm.basicInfo.promo_id,
         credit_card_id: this.CreateOilOrderForm.basicInfo.userCards,
       };
+   
       this.editOilOrder(payload);
+      
+    },
+    updatestatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        if (response.data.update)
+          console.log("ok")
+      })
     },
-
     getDeliveryStatusList() {
       let path = import.meta.env.VITE_BASE_URL + "/query/deliverystatus";
       axios({
diff --git a/src/pages/delivery/home.vue b/src/pages/delivery/home.vue
index f48adbe..98c5570 100755
--- a/src/pages/delivery/home.vue
+++ b/src/pages/delivery/home.vue
@@ -58,8 +58,8 @@
                 <td>{{ oil['id'] }} </td>
                 <router-link :to="{ name: 'customerProfile', params: { id: oil['id'] } }">
                   <td>
-                     <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
-                    </td>
+                    <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
+                  </td>
                 </router-link>
                 <td>
                   <div v-if="oil['delivery_status'] == 0">Waiting</div>
@@ -84,22 +84,22 @@
                 </td>
 
                 <td>
-                <div v-if="oil['prime'] == 0">No</div>
-                <div v-else class="text-red-600">Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['same_day'] == 0">No</div>
-                <div v-else class="text-red-600">Yes</div>
-              </td>
-              <td>
-                <div v-if="oil['emergency'] == 0">No</div>
-                <div v-else class="text-red-600">Yes</div>
-              </td>
-             
+                  <div v-if="oil['prime'] == 0">No</div>
+                  <div v-else class="text-red-600">Yes</div>
+                </td>
+                <td>
+                  <div v-if="oil['same_day'] == 0">No</div>
+                  <div v-else class="text-red-600">Yes</div>
+                </td>
+                <td>
+                  <div v-if="oil['emergency'] == 0">No</div>
+                  <div v-else class="text-red-600">Yes</div>
+                </td>
+
 
 
                 <td>
-  
+
                   <div v-if="oil['payment_type'] == 0">Cash</div>
                   <div v-else-if="oil['payment_type'] == 1">CC</div>
                   <div v-else-if="oil['payment_type'] == 2">Cash/CC</div>
@@ -112,32 +112,32 @@
 
 
 
-                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">View Delivery</button>
-                </router-link>
-                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                  <button class="btn btn-secondary btn-sm">Edit Delivery</button>
-                </router-link>
+                  <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
+                    <button class="btn btn-secondary btn-sm">View Delivery</button>
+                  </router-link>
+                  <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
+                    <button class="btn btn-secondary btn-sm">Edit Delivery</button>
+                  </router-link>
 
-                  <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }" v-if="oil['delivery_status'] != 10">
+                  <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }"
+                    v-if="oil['delivery_status'] != 10">
                     <button class="btn btn-secondary btn-sm">Finalize</button>
                   </router-link>
-    
+
                   <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                  <button class="btn btn-success btn-sm">
-                    Print Ticket
-                  </button>
-                </router-link>
+                    <button class="btn btn-success btn-sm">
+                      Print Ticket
+                    </button>
+                  </router-link>
                 </td>
               </tr>
             </tbody>
           </table>
-          <div class="flex justify-center" v-if="recordsLength > 1">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
-        </pagination>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
         </div>
+          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="25" :options="options" class="mt-10">
+          </pagination>
+          <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+     
       </div>
     </div>
   </div>
@@ -186,9 +186,9 @@ export default defineComponent({
     this.userStatus()
   },
   mounted() {
-    this.getPage(this.page)
-    this.today_delivery_count()
-    this.today_delivery_delivered()
+    this.getPage(this.page);
+    this.today_delivery_count();
+    this.today_delivery_delivered();
   },
   methods: {
     getPage: function (page: any) {
@@ -196,6 +196,7 @@ export default defineComponent({
       this.deliveries = [];
       this.get_oil_orders(page)
     },
+
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({
@@ -221,7 +222,7 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.deliveries = response.data
-        
+
       })
     },
 
diff --git a/src/pages/delivery/routes.ts b/src/pages/delivery/routes.ts
index 0873560..a9ff80d 100755
--- a/src/pages/delivery/routes.ts
+++ b/src/pages/delivery/routes.ts
@@ -4,7 +4,7 @@ import DeliveryEdit from './edit.vue';
 import DeliveryOrder from './view.vue';
 import deliveryTicketsMissing from './update_tickets/missing_data_home.vue';
 import finalizeTicket from './update_tickets/finalize_ticket.vue';
-
+import deliveryPending from './viewstatus/pending.vue';
 import deliveryCancelled from './viewstatus/cancelled.vue';
 import deliveryIssue from './viewstatus/issue.vue';
 import deliveryDelivered from './viewstatus/delivered.vue';
@@ -19,7 +19,11 @@ const deliveryRoutes = [
         name: 'delivery',
         component: DeliveryHome,
     },
-
+    {
+        path: '/delivery/pending',
+        name: 'deliveryPending',
+        component: deliveryPending,
+    },
     {
         path: '/delivery/create/:id',
         name: 'deliveryCreate',
diff --git a/src/pages/delivery/view.vue b/src/pages/delivery/view.vue
index bbdb959..0d1dad3 100755
--- a/src/pages/delivery/view.vue
+++ b/src/pages/delivery/view.vue
@@ -165,7 +165,19 @@
                 Same Day: No
               </div>
             </div>
+
+
+
+
           </div>
+          <div class="col-span-12 font-bold">
+           Dispatcher Notes
+          </div>
+          <div class="grid grid-cols-12 p-5">
+            <div class="col-span-12 text-gray-500">
+              {{ deliveryOrder.dispatcher_notes }}
+            </div>
+            </div>
         </div>
 
 
@@ -330,7 +342,6 @@
               </div>
             </div>
           </div>
-        </div>
 
         <div class="col-span-12 " v-if="deliveryOrder.id">
           <router-link :to="{ name: 'customerProfile', params: { id: deliveryOrder['customer_id'] } }">
@@ -350,6 +361,8 @@
             <button class="btn btn-success btn-sm">Print Ticket</button>
           </router-link>
         </div>
+        </div>
+
 
       </div>
     </div>
diff --git a/src/pages/delivery/viewstatus/cancelled.vue b/src/pages/delivery/viewstatus/cancelled.vue
index a68448a..81b986d 100755
--- a/src/pages/delivery/viewstatus/cancelled.vue
+++ b/src/pages/delivery/viewstatus/cancelled.vue
@@ -43,16 +43,18 @@
               <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
             </td>
               </router-link>
-            <td>
-              <div v-if="oil['delivery_status'] == 0">Waiting</div>
-              <div v-else-if="oil['delivery_status'] == 1">delivered</div>
-              <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-              <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
-              <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-              <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-               <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
-              <div v-else></div>
-            </td>
+              <td>
+                <div v-if="oil['delivery_status'] == 0">Waiting</div>
+                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
+                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
+                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
+                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
+                <div v-else></div>
+
+              
+              </td>
 
             <td>{{ oil['customer_town'] }}</td>
             <td>{{ oil['customer_address'] }}</td>
@@ -87,12 +89,12 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage"
-                    :options="options">
+   
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
+                    :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
+      
     </div>
   </div>
 
diff --git a/src/pages/delivery/viewstatus/delivered.vue b/src/pages/delivery/viewstatus/delivered.vue
index 452e55d..eac57b5 100755
--- a/src/pages/delivery/viewstatus/delivered.vue
+++ b/src/pages/delivery/viewstatus/delivered.vue
@@ -43,16 +43,18 @@
                <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
               </td>
               </router-link>
-            <td>
-              <div v-if="oil['delivery_status'] == 0">Waiting</div>
-              <div v-else-if="oil['delivery_status'] == 1">delivered</div>
-              <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-              <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
-              <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-              <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-               <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
-              <div v-else></div>
-            </td>
+              <td>
+                <div v-if="oil['delivery_status'] == 0">Waiting</div>
+                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
+                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
+                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
+                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
+                <div v-else></div>
+
+              
+              </td>
             <td>{{ oil['customer_town'] }}</td>
             <td>{{ oil['customer_address'] }}</td>
             <td>
@@ -82,12 +84,10 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage"
-                    :options="options">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
+                    :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
     </div>
   </div>
 
diff --git a/src/pages/delivery/viewstatus/finalized.vue b/src/pages/delivery/viewstatus/finalized.vue
index 3eb9c53..688ee94 100644
--- a/src/pages/delivery/viewstatus/finalized.vue
+++ b/src/pages/delivery/viewstatus/finalized.vue
@@ -47,13 +47,15 @@
               </router-link>
               <td>
                 <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">delivered</div>
+                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
                 <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
+                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
                 <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
                 <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-                 <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
+                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
                 <div v-else></div>
+
+              
               </td>
               <td>{{ oil['customer_town'] }}</td>
               <td>{{ oil['customer_address'] }}</td>
@@ -93,12 +95,10 @@
             </tbody>
           </table>
         </div>
-        <div class="flex justify-center" v-if="recordsLength > 9">
-          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage"
-                      :options="options">
+          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
+                      :options="options" class="mt-10">
           </pagination>
           <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-        </div>
       </div>
     </div>
   
@@ -152,6 +152,7 @@
         this.deliveries = [];
         this.get_oil_orders(page)
       },
+
       userStatus() {
         let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
         axios({
diff --git a/src/pages/delivery/viewstatus/issue.vue b/src/pages/delivery/viewstatus/issue.vue
index 55e3d33..04f3970 100755
--- a/src/pages/delivery/viewstatus/issue.vue
+++ b/src/pages/delivery/viewstatus/issue.vue
@@ -44,16 +44,18 @@
                    <div class="hover:text-accent">{{ oil['customer_name'] }} </div> 
                   </td>
               </router-link>
-            <td>
-              <div v-if="oil['delivery_status'] == 0">Waiting</div>
-              <div v-else-if="oil['delivery_status'] == 1">delivered</div>
-              <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-              <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
-              <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
-              <div v-else-if="oil['delivery_status'] == 5">Issue</div>
-               <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
-              <div v-else></div>
-            </td>
+              <td>
+                <div v-if="oil['delivery_status'] == 0">Waiting</div>
+                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
+                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
+                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
+                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
+                <div v-else></div>
+
+              
+              </td>
 
             <td>{{ oil['customer_town'] }}</td>
             <td>{{ oil['customer_address'] }}</td>
@@ -94,12 +96,10 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage"
-                    :options="options">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
+                    :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
     </div>
   </div>
 
diff --git a/src/pages/delivery/viewstatus/pending.vue b/src/pages/delivery/viewstatus/pending.vue
new file mode 100644
index 0000000..04629ca
--- /dev/null
+++ b/src/pages/delivery/viewstatus/pending.vue
@@ -0,0 +1,240 @@
+<template>
+    <Header />
+    <div class="flex">
+      <div class="">
+        <SideBar />
+      </div>
+      <div class=" w-full px-10 ">
+        <div class="text-sm breadcrumbs  pb-10">
+          <ul>
+            <li>
+              <router-link :to="{ name: 'home' }">
+                Home
+              </router-link>
+            </li>
+          </ul>
+        </div>
+  
+        <div class="flex start pb-10 text-2xl">Pending Payment Deliveries </div>
+        <div class="flex justify-end pb-5">
+  
+        </div>
+  
+        <div class="overflow-x-auto">
+          <table class="table">
+            <!-- head -->
+            <thead class=" bg-neutral">
+              <tr>
+                <th>Id</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Town</th>
+                <th>Address</th>
+                <th>Gallons</th>
+                <th>Date</th>
+                <th>Auto</th>
+                <th>Prime</th>
+                <th>Same Day</th>
+                <th>Emergency</th>
+                <th>Payment</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody class="bg-neutral">
+              <!-- row 1 -->
+  
+              <tr v-for="oil in deliveries" :key="oil['id']">
+             
+                <td>{{ oil['id'] }} </td>
+                <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
+                  <td>
+                    <div class="hover:text-accent">{{ oil['customer_name'] }} </div>
+                  </td>
+                </router-link> 
+                <td>
+                <div v-if="oil['delivery_status'] == 0">Waiting</div>
+                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
+                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
+                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
+                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
+                <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
+                <div v-else></div>
+
+              
+              </td>
+  
+                <td>{{ oil['customer_town'] }}</td>
+                <td>{{ oil['customer_address'] }}</td>
+                <td>
+                  <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
+                  <div v-else> {{ oil['gallons_ordered'] }}</div>
+                </td>
+                <td>{{ oil['expected_delivery_date'] }}</td>
+                <td>
+                  <div v-if="oil['automatic'] == 0">No</div>
+                  <div v-else>Yes</div>
+                </td>
+                <td>
+                  <div v-if="oil['prime'] == 0">No</div>
+                  <div v-else class="text-red-600">Yes</div>
+                </td>
+                <td>
+                  <div v-if="oil['same_day'] == 0">No</div>
+                  <div v-else class="text-red-600">Yes</div>
+                </td>
+                <td>
+                  <div v-if="oil['emergency'] == 0">No</div>
+                  <div v-else class="text-red-600">Yes</div>
+                </td>
+                <td>
+   
+                  <div v-if="oil['payment_type'] == 0">Cash</div>
+                  <div v-else-if="oil['payment_type'] == 1">CC</div>
+                  <div v-else-if="oil['payment_type'] == 2">Cash/CC</div>
+                  <div v-else-if="oil['payment_type'] == 3">Check</div>
+                  <div v-else-if="oil['payment_type'] == 4">Other</div>
+  
+                  <div v-else></div>
+  
+                </td>
+                <td class="flex gap-2">
+  
+                  <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
+                    <button class="btn btn-secondary btn-sm">View Delivery</button>
+                  </router-link>
+                  <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
+                    <button class="btn btn-secondary btn-sm">Edit Delivery</button>
+                  </router-link>
+  
+                    <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
+                      <button class="btn btn-secondary btn-sm">Finalize</button>
+                    </router-link>
+                    <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
+                    <button class="btn btn-success btn-sm">
+                      Print Ticket
+                    </button>
+                  </router-link>
+                  <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
+                    Delete
+                  </button> -->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+  
+        </div>
+          <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
+          </pagination>
+          <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+      </div>
+    </div>
+  
+    <Footer />
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent } from 'vue'
+  import axios from 'axios'
+  import authHeader from '../../../services/auth.header'
+  import Header from '../../../layouts/headers/headerauth.vue'
+  import PaginationComp from '../../../components/pagination.vue'
+  import SideBar from '../../../layouts/sidebar/sidebar.vue'
+  import Footer from '../../../layouts/footers/footer.vue'
+  import { notify } from "@kyvg/vue3-notification";
+  
+  export default defineComponent({
+    name: 'deliveryPending',
+  
+    components: {
+      Header,
+      SideBar,
+      Footer,
+    },
+  
+    data() {
+      return {
+        token: null,
+        user: null,
+        deliveries: [],
+        page: 1,
+        perPage: 50,
+        recordsLength: 0,
+        options: {
+          edgeNavigation: false,
+          format: false,
+          template: PaginationComp
+        }
+      }
+    },
+    created() {
+      this.userStatus()
+    },
+    mounted() {
+      this.getPage(this.page)
+    },
+    methods: {
+      getPage: function (page: any) {
+        this.deliveries = [];
+        this.get_oil_orders(page)
+      },
+      userStatus() {
+        let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+        axios({
+          method: 'get',
+          url: path,
+          withCredentials: true,
+          headers: authHeader(),
+        })
+          .then((response: any) => {
+            if (response.data.ok) {
+              this.user = response.data.user;
+            }
+          })
+          .catch(() => {
+            this.user = null
+          })
+      },
+
+  
+      get_oil_orders(page: any) {
+        let path = import.meta.env.VITE_BASE_URL + '/delivery/pending/' + page;
+        axios({
+          method: 'get',
+          url: path,
+          headers: authHeader(),
+        }).then((response: any) => {
+          this.deliveries = response.data
+        })
+      },
+  
+      deleteCall(delivery_id: any) {
+        let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
+        axios({
+          method: 'delete',
+          url: path,
+          headers: authHeader(),
+        }).then((response: any) => {
+          if (response.data.ok) {
+            notify({
+              title: "Success",
+              text: "deleted delivery",
+              type: "success",
+            });
+            this.getPage(this.page)
+          } else {
+            notify({
+              title: "Failure",
+              text: "error deleting delivery",
+              type: "success",
+            });
+          }
+        })
+      },
+  
+
+    },
+  })
+  </script>
+  
+  <style scoped></style>
\ No newline at end of file
diff --git a/src/pages/delivery/viewstatus/todaysdeliveries.vue b/src/pages/delivery/viewstatus/todaysdeliveries.vue
index 35a13ed..058bfa2 100755
--- a/src/pages/delivery/viewstatus/todaysdeliveries.vue
+++ b/src/pages/delivery/viewstatus/todaysdeliveries.vue
@@ -53,13 +53,15 @@
               </router-link> 
               <td>
                 <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">delivered</div>
+                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
                 <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
+                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
                 <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
                 <div v-else-if="oil['delivery_status'] == 5">Issue</div>
                 <div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
                 <div v-else></div>
+
+              
               </td>
 
               <td>{{ oil['customer_town'] }}</td>
@@ -122,11 +124,9 @@
         </table>
 
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
     </div>
   </div>
 
@@ -169,7 +169,6 @@ export default defineComponent({
   },
   created() {
     this.userStatus()
-    this.updatestatus();
   },
   mounted() {
     this.getPage(this.page)
@@ -196,18 +195,7 @@ export default defineComponent({
           this.user = null
         })
     },
-    updatestatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus/outfordelivery';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        if (response.data.update)
-          console.log("success")
-        else { }
-      })
-    },
+
 
     get_oil_orders(page: any) {
       let path = import.meta.env.VITE_BASE_URL + '/delivery/outfordelivery/' + page;
diff --git a/src/pages/delivery/viewstatus/tommorrow.vue b/src/pages/delivery/viewstatus/tommorrow.vue
index b8a7b79..a4cfd38 100644
--- a/src/pages/delivery/viewstatus/tommorrow.vue
+++ b/src/pages/delivery/viewstatus/tommorrow.vue
@@ -50,9 +50,9 @@
               </router-link>
               <td>
                 <div v-if="oil['delivery_status'] == 0">Waiting</div>
-                <div v-else-if="oil['delivery_status'] == 1">delivered</div>
+                <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
                 <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
-                <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
+                <div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
                 <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
                 <div v-else-if="oil['delivery_status'] == 5">Issue</div>
                 <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
@@ -99,11 +99,9 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
     </div>
   </div>
 
@@ -155,6 +153,7 @@ export default defineComponent({
       this.deliveries = [];
       this.get_oil_orders(page)
     },
+
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({
diff --git a/src/pages/delivery/viewstatus/waiting.vue b/src/pages/delivery/viewstatus/waiting.vue
index c02dc87..b5741b5 100755
--- a/src/pages/delivery/viewstatus/waiting.vue
+++ b/src/pages/delivery/viewstatus/waiting.vue
@@ -102,11 +102,9 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
     </div>
   </div>
 
@@ -160,6 +158,7 @@ export default defineComponent({
       this.deliveries = [];
       this.get_oil_orders(page)
     },
+
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({
diff --git a/src/pages/employee/home.vue b/src/pages/employee/home.vue
index ea95af6..108a77c 100755
--- a/src/pages/employee/home.vue
+++ b/src/pages/employee/home.vue
@@ -73,11 +73,9 @@
           </tbody>
         </table>
       </div>
-      <div class="flex justify-center" v-if="recordsLength > 9">
-        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
+        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
         </pagination>
         <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </div>
     </div>
   </div>
   <Footer />
diff --git a/src/pages/ticket/ticket.vue b/src/pages/ticket/ticket.vue
index 63b2fe8..132e785 100644
--- a/src/pages/ticket/ticket.vue
+++ b/src/pages/ticket/ticket.vue
@@ -28,8 +28,10 @@
                     </div>
                 </div>
 
-                <div class="grid grid-cols-12 pl-6 pb-10 ">
-                    <div class="col-span-12 ">{{ delivery.dispatcher_notes }}</div>
+                <div class="grid grid-cols-12 pl-6 pb-10 gap-10 ">
+                  
+                    <div class="col-span-8">
+                        <div class="grid grid-cols-12">
                     <div class="col-span-12 ">{{ customer_description.description }}</div>
                     <div class="col-span-12 " v-if="delivery.promo_id !== null">Promo: {{ promo.text_on_ticket }}</div>
                     <div class="col-span-12 "></div>
@@ -46,6 +48,14 @@
                     <div class="col-span-12  " v-if="delivery.customer_asked_for_fill == 0">
                         {{ delivery.gallons_ordered }}</div>
                     <div class="col-span-12 " v-else>Fill</div>
+                    </div>
+                </div>
+                <div class="col-span-4 border-2">
+                    <div class="grid grid-cols-12">
+                        <div class="col-span-12 p-2">{{ delivery.dispatcher_notes }}</div>
+                    </div>
+
+                </div>
                 </div>