Changes

.npmrc

@@ -0,0 +1,5 @@
+# pnpm-related options
+shamefully-hoist=true
+strict-peer-dependencies=false
+# to get the latest compatible packages when creating the project https://github.com/pnpm/pnpm/issues/6463
+resolution-mode=highest

.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "vue.volar",
+    "wayou.vscode-todo-highlight"
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur",
+    "hookyqr.beautify",
+    "dbaeumer.jshint",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "vue"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[vue]": {
+    "editor.defaultFormatter": "Vue.volar"
+  }
+}

src/layouts/MainLayout.vue

@@ -2,21 +2,26 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
-        <q-btn
+        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
 
         <q-toolbar-title>
           Auburn Oil
         </q-toolbar-title>
         <div>
           <div v-if="user.user_id > 0">
-            Welcome {{ employee.employee_first_name }} {{ employee.employee_last_name }}
+            <q-btn-dropdown color="primary" :label="employee.employee_first_name  ">
+              <q-list>
+
+
+                <q-item clickable v-close-popup @click=" logout ">
+                  <q-item-section>
+                    <q-item-label>Logout</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+
+
           </div>
           <div v-else>
             <router-link :to=" { name: 'login' } " class="">
@@ -27,11 +32,7 @@
       </q-toolbar>
     </q-header>
 
-    <q-drawer
+    <q-drawer v-model=" leftDrawerOpen " show-if-above bordered>
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-    >
       <q-list padding>
         <router-link :to=" { name: 'home' } " class="nodec">
           <q-item clickable v-ripple>
@@ -73,6 +74,16 @@
             </q-item-section>
           </q-item>
         </router-link>
+        <router-link :to=" { name: 'finished' } " class="nodec">
+          <q-item clickable v-ripple>
+            <q-item-section avatar>
+              <q-icon name="drafts" />
+            </q-item-section>
+            <q-item-section>
+              Finished Deliveries
+            </q-item-section>
+          </q-item>
+        </router-link>
         <router-link :to=" { name: 'stats' } " class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
@@ -170,12 +181,13 @@ export default defineComponent({
             this.user = response.data.user
             this.getEmployee(this.user.user_id)
           } else {
+            this.$router.push({ name: "login" });
             this.user.user_id = 0
           }
         })
     },
     getEmployee(userid: any) {
-      const path = import.meta.env.VITE_BASE_URL + "/employee/" + userid
+      const path = import.meta.env.VITE_BASE_URL + "/employee/userid/" + userid
       axios({
         method: "get",
         url: path,
@@ -188,13 +200,17 @@ export default defineComponent({
             this.loaded = true
           }
         })
+    },
+    logout(){
+      localStorage.clear();
+      this.$router.push({ name: "login" });
+      
     }
   }
 })
 </script>
 
 <style>
-
 .nodec {
   text-decoration: none;
 }

src/pages/FinishedDelivery.vue

@@ -0,0 +1,178 @@
+<template>
+  <q-page>
+    <div class="q-pa-md">
+      <q-table title="Todays Deliveries" :rows="deliveries" :columns="columns" row-key="id" :filter="filter"
+        v-model="filter">
+        <template v-slot:top-right>
+          <q-input dense debounce="300" v-model="filter" placeholder="Search">
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="pointer q-hoverable" @click="onEdit(props.row)">
+
+            <q-td key="id" :props="props">
+              {{ props.row.id }}
+            </q-td>
+
+            <q-td key="delivery_status" :props="props">
+              <span v-if="props.row.delivery_status == 0" class="text-green-6">Waiting</span>
+              <span v-if="props.row.delivery_status == 1" class="text-grey-9">Delivered</span>
+              <span v-if="props.row.delivery_status == 2" class="text-green-6">Out For Delivery</span>
+              <span v-if="props.row.delivery_status == 3" class="text-red">Cancelled</span>
+              <span v-if="props.row.delivery_status == 4" class="text-red-14">Partial Delivery</span>
+              <span v-if="props.row.delivery_status == 5" class="text-red-14">Issue</span>
+              <span v-if="props.row.delivery_status == 10" class="text-grey-9">Finalized</span>
+            </q-td>
+
+            <q-td key="name" :props="props">
+              {{ props.row.customer_name }}
+            </q-td>
+
+            <q-td key="address" :props="props">
+              {{ props.row.customer_address }}
+            </q-td>
+
+            <q-td key="town" :props="props">
+              {{ props.row.customer_town }}
+            </q-td>
+
+            <q-td key="gallons_ordered" :props="props">
+              <span v-if="props.row.customer_asked_for_fill == 0"> {{ props.row.gallons_ordered }}</span>
+              <span v-if="props.row.customer_asked_for_fill == 1"> Fill</span>
+            </q-td>
+
+            <q-td key="automatic" :props="props">
+              <span v-if="props.row.automatic == 0">No</span>
+              <span v-if="props.row.automatic == 1">Yes</span>
+            </q-td>
+
+            <q-td key="payment" :props="props">
+              <span v-if="props.row.payment_type == 0">Cash COD</span>
+              <span v-if="props.row.payment_type == 1">Credit</span>
+            </q-td>
+
+            <q-td key="prime" :props="props">
+              <span v-if="props.row.prime == 0"></span>
+              <span v-if="props.row.prime == 1" class="text-red-14">YES</span>
+            </q-td>
+
+            <q-td key="same_day" :props="props">
+              <span v-if="props.row.same_day == 0"></span>
+              <span v-if="props.row.same_day == 1" class="text-red-14">YES</span>
+            </q-td>
+
+
+            <q-td key="dispatcher_notes" :props="props">
+              {{ props.row.dispatcher_notes }}
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </div>
+  </q-page>
+</template>
+
+
+<script lang="ts">
+import axios from 'axios'
+import { defineComponent } from 'vue'
+import authHeader from '../services/auth.header'
+
+export default defineComponent({
+  name: 'FinishedDelivery',
+
+  data() {
+    return {
+      token: null,
+      deliveries: [],
+      user: {
+        user_id: 0,
+        user_name: ''
+      },
+      filter: '',
+      employee: {
+        id: '',
+        user_id: '',
+        employee_last_name: "",
+        employee_first_name: "",
+        employee_town: "",
+        employee_address: "",
+        employee_apt: "",
+        employee_zip: "",
+        employee_birthday: "",
+        employee_phone_number: "",
+        employee_start_date: "",
+        employee_end_date: "",
+        employee_type: '',
+        employee_state: ''
+      },
+
+      columns: [
+        { name: 'id', required: true, label: 'Id', field: 'id', sortable: true },
+        { name: 'delivery_status', required: true, label: 'Status', field: 'delivery_status', sortable: true },
+        { name: 'customer_name', required: true, align: 'center', label: 'Name', field: 'customer_name', sortable: true },
+        { name: 'address', label: 'Address', field: 'address' },
+        { name: 'town', label: 'Town', field: 'town', sortable: true },
+        { name: 'gallons_ordered', label: 'Gallons', field: 'gallons_ordered' },
+        { name: 'automatic', label: 'Automatic', field: 'automatic', sortable: true },
+        { name: 'payment', label: 'Payment', field: 'payment' },
+        { name: 'prime', label: 'Prime', field: 'prime' },
+        { name: 'same_day', label: 'Same Day', field: 'same_day' },
+        { name: 'dispatcher_notes', label: 'Notes', field: 'dispatcher_notes' },
+
+      ]
+    }
+  },
+  mounted() {
+    this.userStatus()
+  },
+  methods: {
+
+    userStatus() {
+      const 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
+            this.get_employee()
+          }
+        })
+    },
+    get_employee() {
+      const path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader()
+      })
+        .then((response: any) => {
+          this.employee = response.data
+          this.get_oil_orders()
+        })
+    },
+    get_oil_orders() {
+      const path = import.meta.env.VITE_BASE_URL + '/deliverystatus/delivered'
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader()
+      }).then((response: any) => {
+        this.deliveries = response.data
+      })
+    },
+    onEdit(row: any) {
+      this.$router.push('delivery/' + row.id)
+    }
+  }
+})
+</script>

src/pages/TodayDelivery.vue

@@ -1,13 +1,8 @@
 <template>
   <q-page>
     <div class="q-pa-md">
-      <q-table
+      <q-table title="Todays Deliveries" :rows="deliveries" :columns="columns" row-key="id" :filter="filter"
-        title="Todays Deliveries"
+        v-model="filter">
-        :rows="deliveries"
-        :columns="columns"
-        row-key="id"
-        :filter="filter"
-      >
         <template v-slot:top-right>
           <q-input dense debounce="300" v-model="filter" placeholder="Search">
             <template v-slot:append>
@@ -18,74 +13,61 @@
         <template v-slot:body="props">
           <q-tr :props="props" class="pointer q-hoverable" @click="onEdit(props.row)">
 
-            <q-td
+            <q-td key="id" :props="props">
-              key="id"
-              :props="props"
-            >
               {{ props.row.id }}
             </q-td>
-            <q-td
+
-              key="name"
+            <q-td key="delivery_status" :props="props">
-              :props="props"
+              <span v-if="props.row.delivery_status == 0" class="text-green-6">Waiting</span>
-            >
+              <span v-if="props.row.delivery_status == 1" class="text-grey-9">Delivered</span>
+              <span v-if="props.row.delivery_status == 2" class="text-green-6">Out For Delivery</span>
+              <span v-if="props.row.delivery_status == 3" class="text-red">Cancelled</span>
+              <span v-if="props.row.delivery_status == 4" class="text-red-14">Partial Delivery</span>
+              <span v-if="props.row.delivery_status == 5" class="text-red-14">Issue</span>
+              <span v-if="props.row.delivery_status == 10" class="text-grey-9">Finalized</span>
+            </q-td>
+
+            <q-td key="name" :props="props">
               {{ props.row.customer_name }}
             </q-td>
 
-            <q-td
+            <q-td key="address" :props="props">
-              key="address"
-              :props="props"
-            >
               {{ props.row.customer_address }}
             </q-td>
 
-            <q-td
+            <q-td key="town" :props="props">
-              key="town"
-              :props="props"
-            >
               {{ props.row.customer_town }}
             </q-td>
 
-            <q-td
+            <q-td key="gallons_ordered" :props="props">
-              key="gallons_ordered"
-              :props="props"
-            >
               <span v-if="props.row.customer_asked_for_fill == 0"> {{ props.row.gallons_ordered }}</span>
               <span v-if="props.row.customer_asked_for_fill == 1"> Fill</span>
             </q-td>
 
-
+            <q-td key="automatic" :props="props">
-            <q-td
-              key="automatic"
-              :props="props"
-            >
               <span v-if="props.row.automatic == 0">No</span>
               <span v-if="props.row.automatic == 1">Yes</span>
             </q-td>
 
-            <q-td
+            <q-td key="payment" :props="props">
-              key="payment"
+              <span v-if="props.row.payment_type == 0">Cash COD</span>
-              :props="props"
+              <span v-if="props.row.payment_type == 1">Credit</span>
-            >
-              <span v-if="props.row.payment== 0">Cash</span>
-              <span v-if="props.row.payment == 1">Credit</span>
             </q-td>
-            <q-td
+
-              key="prime"
+            <q-td key="prime" :props="props">
-              :props="props"
-            >
               <span v-if="props.row.prime == 0"></span>
-              <span v-if="props.row.prime == 1">YES</span>
+              <span v-if="props.row.prime == 1" class="text-red-14">YES</span>
             </q-td>
 
-            <q-td
+            <q-td key="same_day" :props="props">
-              key="same_day"
-              :props="props"
-            >
               <span v-if="props.row.same_day == 0"></span>
-              <span v-if="props.row.same_day == 1">YES</span>
+              <span v-if="props.row.same_day == 1" class="text-red-14">YES</span>
             </q-td>
 
 
+            <q-td key="dispatcher_notes" :props="props">
+              {{ props.row.dispatcher_notes }}
+            </q-td>
           </q-tr>
         </template>
       </q-table>
@@ -129,15 +111,9 @@ export default defineComponent({
       },
 
       columns: [
-        {
+        { name: 'id', required: true, label: 'Id', field: 'id', sortable: true },
-          name: 'id',
+        { name: 'delivery_status', required: true, label: 'Status', field: 'delivery_status', sortable: true },
-          required: true,
+        { name: 'customer_name', required: true, align: 'center', label: 'Name', field: 'customer_name', sortable: true },
-          label: 'Deliver Id #',
-          align: 'left',
-          field: 'id',
-          sortable: true
-        },
-        { name: 'name', align: 'center', label: 'Name', field: 'name', sortable: true },
         { name: 'address', label: 'Address', field: 'address' },
         { name: 'town', label: 'Town', field: 'town', sortable: true },
         { name: 'gallons_ordered', label: 'Gallons', field: 'gallons_ordered' },
@@ -145,6 +121,7 @@ export default defineComponent({
         { name: 'payment', label: 'Payment', field: 'payment' },
         { name: 'prime', label: 'Prime', field: 'prime' },
         { name: 'same_day', label: 'Same Day', field: 'same_day' },
+        { name: 'dispatcher_notes', label: 'Notes', field: 'dispatcher_notes' },
 
       ]
     }
@@ -199,8 +176,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="sass">
-.my-sticky-header-table
- .q-table tbody td
-   font-size: 20px
-</style>

src/pages/TomorrowDelivery.vue

@@ -1,13 +1,81 @@
 <template>
   <q-page>
-    <div class="q-pa-md breakpoints">
+    <div class="q-pa-md">
-      <div class="row   text-h5">
+      <q-table title="Todays Deliveries" :rows="deliveries" :columns="columns" row-key="id" :filter="filter"
-{{ deliveries }}
+        v-model="filter">
-      </div>
+        <template v-slot:top-right>
+          <q-input dense debounce="300" v-model="filter" placeholder="Search">
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="pointer q-hoverable" @click="onEdit(props.row)">
+
+            <q-td key="id" :props="props">
+              {{ props.row.id }}
+            </q-td>
+
+            <q-td key="delivery_status" :props="props">
+              <span v-if="props.row.delivery_status == 0" class="text-green-6">Waiting</span>
+              <span v-if="props.row.delivery_status == 1" class="text-grey-9">Delivered</span>
+              <span v-if="props.row.delivery_status == 2" class="text-green-6">Out For Delivery</span>
+              <span v-if="props.row.delivery_status == 3" class="text-red">Cancelled</span>
+              <span v-if="props.row.delivery_status == 4" class="text-red-14">Partial Delivery</span>
+              <span v-if="props.row.delivery_status == 5" class="text-red-14">Issue</span>
+              <span v-if="props.row.delivery_status == 10" class="text-grey-9">Finalized</span>
+            </q-td>
+
+            <q-td key="name" :props="props">
+              {{ props.row.customer_name }}
+            </q-td>
+
+            <q-td key="address" :props="props">
+              {{ props.row.customer_address }}
+            </q-td>
+
+            <q-td key="town" :props="props">
+              {{ props.row.customer_town }}
+            </q-td>
+
+            <q-td key="gallons_ordered" :props="props">
+              <span v-if="props.row.customer_asked_for_fill == 0"> {{ props.row.gallons_ordered }}</span>
+              <span v-if="props.row.customer_asked_for_fill == 1"> Fill</span>
+            </q-td>
+
+            <q-td key="automatic" :props="props">
+              <span v-if="props.row.automatic == 0">No</span>
+              <span v-if="props.row.automatic == 1">Yes</span>
+            </q-td>
+
+            <q-td key="payment" :props="props">
+              <span v-if="props.row.payment_type == 0">Cash COD</span>
+              <span v-if="props.row.payment_type == 1">Credit</span>
+            </q-td>
+
+            <q-td key="prime" :props="props">
+              <span v-if="props.row.prime == 0"></span>
+              <span v-if="props.row.prime == 1" class="text-red-14">YES</span>
+            </q-td>
+
+            <q-td key="same_day" :props="props">
+              <span v-if="props.row.same_day == 0"></span>
+              <span v-if="props.row.same_day == 1" class="text-red-14">YES</span>
+            </q-td>
+
+
+            <q-td key="dispatcher_notes" :props="props">
+              {{ props.row.dispatcher_notes }}
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
     </div>
   </q-page>
 </template>
 
+
 <script lang="ts">
 import axios from 'axios'
 import { defineComponent } from 'vue'
@@ -24,6 +92,7 @@ export default defineComponent({
         user_id: 0,
         user_name: ''
       },
+      filter: '',
       employee: {
         id: '',
         user_id: '',
@@ -39,13 +108,29 @@ export default defineComponent({
         employee_end_date: "",
         employee_type: '',
         employee_state: ''
-      }
+      },
+
+      columns: [
+        { name: 'id', required: true, label: 'Id', field: 'id', sortable: true },
+        { name: 'delivery_status', required: true, label: 'Status', field: 'delivery_status', sortable: true },
+        { name: 'customer_name', required: true, align: 'center', label: 'Name', field: 'customer_name', sortable: true },
+        { name: 'address', label: 'Address', field: 'address' },
+        { name: 'town', label: 'Town', field: 'town', sortable: true },
+        { name: 'gallons_ordered', label: 'Gallons', field: 'gallons_ordered' },
+        { name: 'automatic', label: 'Automatic', field: 'automatic', sortable: true },
+        { name: 'payment', label: 'Payment', field: 'payment' },
+        { name: 'prime', label: 'Prime', field: 'prime' },
+        { name: 'same_day', label: 'Same Day', field: 'same_day' },
+        { name: 'dispatcher_notes', label: 'Notes', field: 'dispatcher_notes' },
+
+      ]
     }
   },
   mounted() {
     this.userStatus()
   },
   methods: {
+
     userStatus() {
       const path = import.meta.env.VITE_BASE_URL + '/auth/whoami'
       axios({
@@ -84,15 +169,10 @@ export default defineComponent({
       }).then((response: any) => {
         this.deliveries = response.data
       })
+    },
+    onEdit(row: any) {
+      this.$router.push('delivery/' + row.id)
     }
   }
 })
 </script>
-
-<style lang="sass">
-.breakpoints
-  .row > div
-    padding: 10px 15px
-  .row + .row
-    margin-top: 1rem
-</style>

src/pages/WaitingDelivery.vue

@@ -1,13 +1,81 @@
 <template>
   <q-page>
-    <div class="q-pa-md breakpoints">
+    <div class="q-pa-md">
-      <div class="row   text-h5">
+      <q-table title="Todays Deliveries" :rows="deliveries" :columns="columns" row-key="id" :filter="filter"
-{{ deliveries }}
+        v-model="filter">
-      </div>
+        <template v-slot:top-right>
+          <q-input dense debounce="300" v-model="filter" placeholder="Search">
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="pointer q-hoverable" @click="onEdit(props.row)">
+
+            <q-td key="id" :props="props">
+              {{ props.row.id }}
+            </q-td>
+
+            <q-td key="delivery_status" :props="props">
+              <span v-if="props.row.delivery_status == 0" class="text-green-6">Waiting</span>
+              <span v-if="props.row.delivery_status == 1" class="text-grey-9">Delivered</span>
+              <span v-if="props.row.delivery_status == 2" class="text-green-6">Out For Delivery</span>
+              <span v-if="props.row.delivery_status == 3" class="text-red">Cancelled</span>
+              <span v-if="props.row.delivery_status == 4" class="text-red-14">Partial Delivery</span>
+              <span v-if="props.row.delivery_status == 5" class="text-red-14">Issue</span>
+              <span v-if="props.row.delivery_status == 10" class="text-grey-9">Finalized</span>
+            </q-td>
+
+            <q-td key="name" :props="props">
+              {{ props.row.customer_name }}
+            </q-td>
+
+            <q-td key="address" :props="props">
+              {{ props.row.customer_address }}
+            </q-td>
+
+            <q-td key="town" :props="props">
+              {{ props.row.customer_town }}
+            </q-td>
+
+            <q-td key="gallons_ordered" :props="props">
+              <span v-if="props.row.customer_asked_for_fill == 0"> {{ props.row.gallons_ordered }}</span>
+              <span v-if="props.row.customer_asked_for_fill == 1"> Fill</span>
+            </q-td>
+
+            <q-td key="automatic" :props="props">
+              <span v-if="props.row.automatic == 0">No</span>
+              <span v-if="props.row.automatic == 1">Yes</span>
+            </q-td>
+
+            <q-td key="payment" :props="props">
+              <span v-if="props.row.payment_type == 0">Cash COD</span>
+              <span v-if="props.row.payment_type == 1">Credit</span>
+            </q-td>
+
+            <q-td key="prime" :props="props">
+              <span v-if="props.row.prime == 0"></span>
+              <span v-if="props.row.prime == 1" class="text-red-14">YES</span>
+            </q-td>
+
+            <q-td key="same_day" :props="props">
+              <span v-if="props.row.same_day == 0"></span>
+              <span v-if="props.row.same_day == 1" class="text-red-14">YES</span>
+            </q-td>
+
+
+            <q-td key="dispatcher_notes" :props="props">
+              {{ props.row.dispatcher_notes }}
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
     </div>
   </q-page>
 </template>
 
+
 <script lang="ts">
 import axios from 'axios'
 import { defineComponent } from 'vue'
@@ -24,6 +92,7 @@ export default defineComponent({
         user_id: 0,
         user_name: ''
       },
+      filter: '',
       employee: {
         id: '',
         user_id: '',
@@ -39,13 +108,29 @@ export default defineComponent({
         employee_end_date: "",
         employee_type: '',
         employee_state: ''
-      }
+      },
+
+      columns: [
+        { name: 'id', required: true, label: 'Id', field: 'id', sortable: true },
+        { name: 'delivery_status', required: true, label: 'Status', field: 'delivery_status', sortable: true },
+        { name: 'customer_name', required: true, align: 'center', label: 'Name', field: 'customer_name', sortable: true },
+        { name: 'address', label: 'Address', field: 'address' },
+        { name: 'town', label: 'Town', field: 'town', sortable: true },
+        { name: 'gallons_ordered', label: 'Gallons', field: 'gallons_ordered' },
+        { name: 'automatic', label: 'Automatic', field: 'automatic', sortable: true },
+        { name: 'payment', label: 'Payment', field: 'payment' },
+        { name: 'prime', label: 'Prime', field: 'prime' },
+        { name: 'same_day', label: 'Same Day', field: 'same_day' },
+        { name: 'dispatcher_notes', label: 'Notes', field: 'dispatcher_notes' },
+
+      ]
     }
   },
   mounted() {
     this.userStatus()
   },
   methods: {
+
     userStatus() {
       const path = import.meta.env.VITE_BASE_URL + '/auth/whoami'
       axios({
@@ -84,15 +169,10 @@ export default defineComponent({
       }).then((response: any) => {
         this.deliveries = response.data
       })
+    },
+    onEdit(row: any) {
+      this.$router.push('delivery/' + row.id)
     }
   }
 })
 </script>
-
-<style lang="sass">
-.breakpoints
-  .row > div
-    padding: 10px 15px
-  .row + .row
-    margin-top: 1rem
-</style>

src/pages/delivery/ViewDelivery.vue

@@ -1,11 +1,17 @@
 <template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-banner class="bg-accent text-white" v-if="deliveryOrder.same_day == 1">
+      Same day customer
+
+    </q-banner>
+    <q-banner inline-actions class="text-white bg-red" v-if="deliveryOrder.prime == 1">
+      This customer needs a prime
+    </q-banner>
+  </div>
   <div class="q-page q-pa-lg">
     <div class="row">
       <div class="col-3 bg-neutral p-5">
-        <img src="../../assets/user_placeholder.png"
+        <img src="../../assets/user_placeholder.png" alt="Drone Image" width="250" height="250" />
-             alt="Drone Image"
-             width="250"
-             height="250"/>
       </div>
       <div class="col-3 bg-neutral p-5 ">
         <div class="row">
@@ -63,7 +69,6 @@
         </div>
       </div>
 
-
       <div class="col-3 bg-neutral p-5 ">
         <div class="row">
           <div class="col-4">Gallons Ordered</div>
@@ -74,25 +79,37 @@
             <div v-else>
               {{ deliveryOrder.gallons_ordered }}
             </div>
-
           </div>
           <div class="col-4">Payment Type</div>
           <div class="col-8">
             <div v-if="deliveryOrder.payment_type == 0">Cash</div>
             <div v-if="deliveryOrder.payment_type == 1">Credit</div>
-
           </div>
           <div class="col-4">Expected Delivery</div>
           <div class="col-8">{{ deliveryOrder.expected_delivery_date }}</div>
           <div class="col-4">Prime</div>
           <div class="col-8">
             <div v-if="deliveryOrder.prime == 0">no</div>
-              <div v-if="deliveryOrder.prime == 1">Yes</div>
+            <div v-if="deliveryOrder.prime == 1" class="text-negative text-bold">Yes</div>
           </div>
           <div class="col-4">Same Day</div>
           <div class="col-8">
             <div v-if="deliveryOrder.same_day == 0">no</div>
-              <div v-if="deliveryOrder.same_day == 1">YES</div>
+            <div v-if="deliveryOrder.same_day == 1" class="text-negative text-bold">YES</div>
+          </div>
+          <div class="col-4">Driver:</div>
+          <div class="col-8">
+            {{ deliveryOrder.driver_first_name }} {{ deliveryOrder.driver_last_name }}
+          </div>
+          <div class="col-4">Status:</div>
+          <div class="col-8">
+            <span v-if="deliveryOrder.delivery_status == 0">Waiting</span>
+            <span v-if="deliveryOrder.delivery_status == 1" class="text-red">Delivered</span>
+            <span v-if="deliveryOrder.delivery_status == 2">Out For Delivery</span>
+            <span v-if="deliveryOrder.delivery_status == 3" class="text-red">Cancelled</span>
+            <span v-if="deliveryOrder.delivery_status == 4">Partial Delivery</span>
+            <span v-if="deliveryOrder.delivery_status == 5" class="text-red">Issue</span>
+            <span v-if="deliveryOrder.delivery_status == 10">Finalized</span>
           </div>
         </div>
       </div>
@@ -104,54 +121,27 @@
 
 
   <div class="q-pa-md 	full-width row wrap justify-center items-start content-start">
-    <q-form
+    <q-form @submit="onSubmit" class="q-gutter-md">
-      @submit="onSubmit"
-      class="q-gutter-md"
-    >
       <div>
-          <q-select
+        <q-select v-model="CreateOilOrderForm.basicInfo.driver" option-label="employee_last_name" option-value="id"
-            v-model="CreateOilOrderForm.basicInfo.driver"
+          :options="truckDriversList" label="Driver" emit-value />
-            option-label="employee_last_name"
-            option-value="id"
-            :options="truckDriversList"
-            label="Driver"
-            emit-value
-
-          />
       </div>
       <div>
-      <q-input
+        <q-input filled step="any" type="number" v-model="CreateOilOrderForm.basicInfo.gallons_delivered"
-        filled
+          label="Gallons Delivered" />
-        type="number"
-        v-model="CreateOilOrderForm.basicInfo.gallons_delivered"
-        label="Gallons Delivered"
-      />
       </div>
       <div>
-      <q-input
+        <q-input filled step="any" type="number" v-model="CreateOilOrderForm.basicInfo.cash_amount"
-        filled
+          label="Cash Received" lazy-rules />
-        type="number"
-        v-model="CreateOilOrderForm.basicInfo.cash_amount"
-        label="Cash Received"
-        lazy-rules
-      />
       </div>
       <div>
-      <q-checkbox
+        <q-checkbox v-model="CreateOilOrderForm.basicInfo.customer_filled" left-label label="Filled" />
-        v-model="CreateOilOrderForm.basicInfo.customer_filled"
-        left-label
-        label="Filled"
-      />
       </div>
       <div>
-      <q-checkbox
+        <q-checkbox v-model="CreateOilOrderForm.basicInfo.prime" left-label label="Primed" />
-        v-model="CreateOilOrderForm.basicInfo.prime"
-        left-label
-        label="Primed"
-      />
       </div>
       <div>
-      <q-btn label="Submit" type="submit" color="primary"/>
+        <q-btn label="Enter" type="submit" color="primary" />
       </div>
     </q-form>
 
@@ -167,7 +157,6 @@ import { Notify } from 'quasar'
 export default defineComponent({
   name: 'ViewDelivery',
 
-
   data() {
     return {
 
@@ -351,15 +340,16 @@ export default defineComponent({
     },
 
 
-    editOilOrder(payload: {
+    UpdateOilOrder(payload: {
       gallons_delivered: string,
       customer_filled: boolean,
       prime: boolean,
       cash_amount: number,
+      driver_employee_id: string,
     }) {
-      let path = import.meta.env.VITE_BASE_URL + "/delivery/edit/" + this.deliveryOrder.id;
+      let path = import.meta.env.VITE_BASE_URL + "/deliverydata/driver/finalize/" + this.deliveryOrder.id;
       axios({
-        method: "post",
+        method: "put",
         url: path,
         data: payload,
         withCredentials: true,
@@ -367,10 +357,19 @@ export default defineComponent({
       })
         .then((response: any) => {
           if (response.data.ok) {
+            Notify.create({
+              message: 'Delivered',
+              type: 'negative',
+              position: 'top'
+            })
             this.$router.push({ name: "delivery" });
           }
-            if (response.data.error) {
+          else {
-              this.$router.push("/");
+            Notify.create({
+              message: 'Form Error',
+              type: 'negative',
+              position: 'top'
+            })
           }
         })
     },
@@ -389,16 +388,37 @@ export default defineComponent({
     },
 
     onSubmit() {
+      if (this.deliveryOrder.payment_type == 0) {
+        if (this.CreateOilOrderForm.basicInfo.cash_amount > 0) {
           let payload = {
             gallons_delivered: this.CreateOilOrderForm.basicInfo.gallons_delivered,
             customer_filled: this.CreateOilOrderForm.basicInfo.customer_filled,
             prime: this.CreateOilOrderForm.basicInfo.prime,
             cash_amount: this.CreateOilOrderForm.basicInfo.cash_amount,
+            driver_employee_id: this.CreateOilOrderForm.basicInfo.driver,
             
           };
-      this.editOilOrder(payload);
+          this.UpdateOilOrder(payload);
+        }
+        else {
+          Notify.create({
+            message: 'Cash Delivery must have $$$ amount',
+            type: 'negative',
+            position: 'top'
+          })
+        }
+      }
+      else {
+        let payload = {
+          gallons_delivered: this.CreateOilOrderForm.basicInfo.gallons_delivered,
+          customer_filled: this.CreateOilOrderForm.basicInfo.customer_filled,
+          prime: this.CreateOilOrderForm.basicInfo.prime,
+          cash_amount: this.CreateOilOrderForm.basicInfo.cash_amount,
+        }
+        this.UpdateOilOrder(payload);
+      };
+
     },
   },
 })
 </script>
-

src/router/routes.ts

@@ -10,6 +10,7 @@ const routes: RouteRecordRaw[] = [
        { path: '/tomorrow',  name: 'tomorrow',  component: () => import('pages/TomorrowDelivery.vue') },
        { path: '/waiting',   name: 'waiting',     component: () => import('pages/WaitingDelivery.vue') },
        { path: '/automatic', name: 'automatic', component: () => import('pages/Automatics.vue') },
+       { path: '/finished',  name: 'finished', component: () => import('pages/FinishedDelivery.vue') },
        { path: '/stats',     name: 'stats',     component: () => import('pages/DriverStats.vue') },
        { path: '/delivery/:id',  name: 'viewdelivery', component: () => import('pages/delivery/ViewDelivery.vue') }
     ]