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,91 +2,102 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
+        <q-btn 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="">
-              <q-btn color="secondary" label="Login"/>
+            <router-link :to=" { name: 'login' } " class="">
+              <q-btn color="secondary" label="Login" />
             </router-link>
           </div>
         </div>
       </q-toolbar>
     </q-header>
 
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-    >
+    <q-drawer v-model=" leftDrawerOpen " show-if-above bordered>
       <q-list padding>
-        <router-link :to="{ name: 'home' }" class="nodec">
+        <router-link :to=" { name: 'home' } " class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
-              <q-icon name="inbox"/>
+              <q-icon name="inbox" />
             </q-item-section>
             <q-item-section>
               Home
             </q-item-section>
           </q-item>
         </router-link>
-        <router-link :to="{ name: 'today' }" class="nodec">
+        <router-link :to=" { name: 'today' } " class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
-              <q-icon name="inbox"/>
+              <q-icon name="inbox" />
             </q-item-section>
             <q-item-section>
               Todays Deliveries
             </q-item-section>
           </q-item>
         </router-link>
-        <router-link :to="{ name: 'tomorrow' }" class="nodec">
+        <router-link :to=" { name: 'tomorrow' } " class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
-              <q-icon name="drafts"/>
+              <q-icon name="drafts" />
             </q-item-section>
             <q-item-section>
               Tomorrow Deliveries
             </q-item-section>
           </q-item>
         </router-link>
-        <router-link :to="{ name: 'waiting' }" class="nodec">
+        <router-link :to=" { name: 'waiting' } " class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
-              <q-icon name="drafts"/>
+              <q-icon name="drafts" />
             </q-item-section>
             <q-item-section>
               Waiting Deliveries
             </q-item-section>
           </q-item>
         </router-link>
-        <router-link :to="{ name: 'stats' }" class="nodec">
+        <router-link :to=" { name: 'finished' } " class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
-              <q-icon name="star"/>
+              <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>
+              <q-icon name="star" />
             </q-item-section>
             <q-item-section>
               Stats
             </q-item-section>
           </q-item>
         </router-link>
-        <router-link :to="{ name: 'stats' }" class="nodec">
+        <router-link :to=" { name: 'stats' } " class="nodec">
           <q-item clickable v-ripple>
             <q-item-section avatar>
-              <q-icon name="send"/>
+              <q-icon name="send" />
             </q-item-section>
             <q-item-section>
               Automatics
@@ -100,13 +111,13 @@
     </q-drawer>
 
     <q-page-container>
-      <router-view/>
+      <router-view />
     </q-page-container>
   </q-layout>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 import authHeader from "../services/auth.header"
 import axios from "axios"
 
@@ -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,91 +1,73 @@
 <template>
   <q-page>
     <div class="q-pa-md">
-      <q-table
-        title="Todays Deliveries"
-        :rows="deliveries"
-        :columns="columns"
-        row-key="id"
-        :filter="filter"
-      >
+      <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">
+          <q-input dense debounce="300" v-model="filter" placeholder="Search">
             <template v-slot:append>
-              <q-icon name="search"/>
+              <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-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="name"
-              :props="props"
-            >
-              {{props.row.customer_name}}
+            <q-td key="id" :props="props">
+              {{ props.row.id }}
             </q-td>
 
-            <q-td
-              key="address"
-              :props="props"
-            >
-              {{props.row.customer_address}}
+            <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="town"
-              :props="props"
-            >
-              {{props.row.customer_town}}
+            <q-td key="name" :props="props">
+              {{ props.row.customer_name }}
             </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 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="automatic"
-              :props="props"
-            >
-              <span v-if="props.row.automatic== 0">No</span>
+            <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== 0">Cash</span>
-              <span v-if="props.row.payment == 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">YES</span>
+            <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="same_day"
-              :props="props"
-            >
-                <span v-if="props.row.same_day== 0"></span>
-              <span v-if="props.row.same_day == 1">YES</span>
+            <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>
@@ -96,7 +78,7 @@
 
 <script lang="ts">
 import axios from 'axios'
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 import authHeader from '../services/auth.header'
 
 export default defineComponent({
@@ -129,22 +111,17 @@ export default defineComponent({
       },
 
       columns: [
-        {
-          name: 'id',
-          required: true,
-          label: 'Deliver Id #',
-          align: 'left',
-          field: 'id',
-          sortable: true
-        },
-        { name: 'name', align: 'center', label: 'Name', field: 'name', sortable: true },
+        { 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: 'prime', label: 'Prime', field: 'prime' },
+        { name: 'same_day', label: 'Same Day', field: 'same_day' },
+        { name: 'dispatcher_notes', label: 'Notes', field: 'dispatcher_notes' },
 
       ]
     }
@@ -193,14 +170,9 @@ export default defineComponent({
         this.deliveries = response.data
       })
     },
-    onEdit (row: any) {
+    onEdit(row: any) {
       this.$router.push('delivery/' + row.id)
     }
   }
 })
 </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="row   text-h5">
-{{ deliveries }}
-      </div>
+    <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'
@@ -16,7 +84,7 @@ import authHeader from '../services/auth.header'
 export default defineComponent({
   name: 'TommorrowDelivery',
 
-  data () {
+  data() {
     return {
       token: null,
       deliveries: [],
@@ -24,6 +92,7 @@ export default defineComponent({
         user_id: 0,
         user_name: ''
       },
+      filter: '',
       employee: {
         id: '',
         user_id: '',
@@ -39,14 +108,30 @@ 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 () {
+  mounted() {
     this.userStatus()
   },
   methods: {
-    userStatus () {
+
+    userStatus() {
       const path = import.meta.env.VITE_BASE_URL + '/auth/whoami'
       axios({
         method: 'get',
@@ -61,7 +146,7 @@ export default defineComponent({
           }
         })
     },
-    get_employee () {
+    get_employee() {
       const path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id
       axios({
         method: "get",
@@ -74,7 +159,7 @@ export default defineComponent({
           this.get_oil_orders()
         })
     },
-    get_oil_orders () {
+    get_oil_orders() {
       const path = import.meta.env.VITE_BASE_URL + '/deliverystatus/tommorrow/driver/' + this.employee.id
       axios({
         method: 'get',
@@ -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="row   text-h5">
-{{ deliveries }}
-      </div>
+    <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'
@@ -16,7 +84,7 @@ import authHeader from '../services/auth.header'
 export default defineComponent({
   name: 'WaitingDelivery',
 
-  data () {
+  data() {
     return {
       token: null,
       deliveries: [],
@@ -24,6 +92,7 @@ export default defineComponent({
         user_id: 0,
         user_name: ''
       },
+      filter: '',
       employee: {
         id: '',
         user_id: '',
@@ -39,14 +108,30 @@ 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 () {
+  mounted() {
     this.userStatus()
   },
   methods: {
-    userStatus () {
+
+    userStatus() {
       const path = import.meta.env.VITE_BASE_URL + '/auth/whoami'
       axios({
         method: 'get',
@@ -61,7 +146,7 @@ export default defineComponent({
           }
         })
     },
-    get_employee () {
+    get_employee() {
       const path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id
       axios({
         method: "get",
@@ -74,7 +159,7 @@ export default defineComponent({
           this.get_oil_orders()
         })
     },
-    get_oil_orders () {
+    get_oil_orders() {
       const path = import.meta.env.VITE_BASE_URL + '/deliverystatus/waiting/driver/' + this.employee.id
       axios({
         method: 'get',
@@ -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"
-             alt="Drone Image"
-             width="250"
-             height="250"/>
+        <img src="../../assets/user_placeholder.png" alt="Drone Image" width="250" height="250" />
       </div>
       <div class="col-3 bg-neutral p-5 ">
         <div class="row">
@@ -63,37 +69,48 @@
         </div>
       </div>
 
-
       <div class="col-3 bg-neutral p-5 ">
         <div class="row">
-            <div class="col-4">Gallons Ordered</div>
-            <div class="col-8">
-              <div v-if="deliveryOrder.customer_asked_for_fill == 1">
-                Fill
-              </div>
-              <div v-else>
-                {{ deliveryOrder.gallons_ordered }}
-              </div>
-
+          <div class="col-4">Gallons Ordered</div>
+          <div class="col-8">
+            <div v-if="deliveryOrder.customer_asked_for_fill == 1">
+              Fill
             </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>
-           <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-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" 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" 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>
     </div>
@@ -103,56 +120,29 @@
   </div>
 
 
-  <div class="q-pa-md 	full-width row wrap justify-center items-start content-start" >
-    <q-form
-      @submit="onSubmit"
-      class="q-gutter-md"
-    >
-        <div>
-          <q-select
-            v-model="CreateOilOrderForm.basicInfo.driver"
-            option-label="employee_last_name"
-            option-value="id"
-            :options="truckDriversList"
-            label="Driver"
-            emit-value
-
-          />
-               </div>
-        <div>
-      <q-input
-        filled
-        type="number"
-        v-model="CreateOilOrderForm.basicInfo.gallons_delivered"
-        label="Gallons Delivered"
-      />
+  <div class="q-pa-md 	full-width row wrap justify-center items-start content-start">
+    <q-form @submit="onSubmit" class="q-gutter-md">
+      <div>
+        <q-select v-model="CreateOilOrderForm.basicInfo.driver" option-label="employee_last_name" option-value="id"
+          :options="truckDriversList" label="Driver" emit-value />
       </div>
       <div>
-      <q-input
-        filled
-        type="number"
-        v-model="CreateOilOrderForm.basicInfo.cash_amount"
-        label="Cash Received"
-        lazy-rules
-      />
-        </div>
-        <div>
-      <q-checkbox
-        v-model="CreateOilOrderForm.basicInfo.customer_filled"
-        left-label
-        label="Filled"
-      />
-          </div>
-        <div>
-      <q-checkbox
-        v-model="CreateOilOrderForm.basicInfo.prime"
-        left-label
-        label="Primed"
-      />
-          </div>
-    <div>
-      <q-btn label="Submit" type="submit" color="primary"/>
-  </div>
+        <q-input filled step="any" type="number" v-model="CreateOilOrderForm.basicInfo.gallons_delivered"
+          label="Gallons Delivered" />
+      </div>
+      <div>
+        <q-input filled step="any" type="number" v-model="CreateOilOrderForm.basicInfo.cash_amount"
+          label="Cash Received" lazy-rules />
+      </div>
+      <div>
+        <q-checkbox v-model="CreateOilOrderForm.basicInfo.customer_filled" left-label label="Filled" />
+      </div>
+      <div>
+        <q-checkbox v-model="CreateOilOrderForm.basicInfo.prime" left-label label="Primed" />
+      </div>
+      <div>
+        <q-btn label="Enter" type="submit" color="primary" />
+      </div>
     </q-form>
 
   </div>
@@ -167,7 +157,6 @@ import { Notify } from 'quasar'
 export default defineComponent({
   name: 'ViewDelivery',
 
-
   data() {
     return {
 
@@ -268,14 +257,14 @@ export default defineComponent({
         withCredentials: true,
         headers: authHeader(),
       })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.user = response.data.user;
-            }
-          })
-          .catch(() => {
-            this.user = null
-          })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+          }
+        })
+        .catch(() => {
+          this.user = null
+        })
     },
     getDriversList() {
       let path = import.meta.env.VITE_BASE_URL + "/employee/drivers";
@@ -283,13 +272,13 @@ export default defineComponent({
         method: "get",
         url: path,
         withCredentials: true,
-         headers: authHeader(),
+        headers: authHeader(),
       })
-          .then((response: any) => {
-            this.truckDriversList = response.data;
-          })
-          .catch(() => {
-          });
+        .then((response: any) => {
+          this.truckDriversList = response.data;
+        })
+        .catch(() => {
+        });
     },
 
     getDeliveryOrder(delivery_id: any) {
@@ -300,21 +289,21 @@ export default defineComponent({
         withCredentials: true,
         headers: authHeader(),
       })
-          .then((response: any) => {
-            if (response.data) {
+        .then((response: any) => {
+          if (response.data) {
 
-              if (response.data.delivery.delivery_asked_for_fill == 0){
-                this.CreateOilOrderForm.basicInfo.gallons_delivered = response.data.delivery.delivery_gallons_ordered
-              }
-              this.CreateOilOrderForm.basicInfo.cash_amount = response.data.delivery.cash_amount;
-              if (response.data.delivery.delivery_prime == 0){
-               this.CreateOilOrderForm.basicInfo.prime = false;
-              }
-              else {
-                this.CreateOilOrderForm.basicInfo.prime = true;
-              }
+            if (response.data.delivery.delivery_asked_for_fill == 0) {
+              this.CreateOilOrderForm.basicInfo.gallons_delivered = response.data.delivery.delivery_gallons_ordered
             }
-          })
+            this.CreateOilOrderForm.basicInfo.cash_amount = response.data.delivery.cash_amount;
+            if (response.data.delivery.delivery_prime == 0) {
+              this.CreateOilOrderForm.basicInfo.prime = false;
+            }
+            else {
+              this.CreateOilOrderForm.basicInfo.prime = true;
+            }
+          }
+        })
     },
     getDeliveryForm(delivery_id: any) {
       let path = import.meta.env.VITE_BASE_URL + "/delivery/order/" + delivery_id;
@@ -324,12 +313,12 @@ export default defineComponent({
         withCredentials: true,
         headers: authHeader(),
       })
-          .then((response: any) => {
-            if (response.data) {
-              this.deliveryOrder = response.data
-              this.getCustomer(this.deliveryOrder.customer_id)
-            }
-          })
+        .then((response: any) => {
+          if (response.data) {
+            this.deliveryOrder = response.data
+            this.getCustomer(this.deliveryOrder.customer_id)
+          }
+        })
     },
     getCustomer(user_id: any) {
       let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
@@ -338,41 +327,51 @@ export default defineComponent({
         url: path,
         withCredentials: true,
       })
-          .then((response: any) => {
-            this.customer = response.data;
+        .then((response: any) => {
+          this.customer = response.data;
+        })
+        .catch(() => {
+          Notify.create({
+            message: 'Could not find customer',
+            type: 'negative',
+            position: 'top'
           })
-          .catch(() => {
-            Notify.create({
-                    message: 'Could not find customer',
-                    type: 'negative',
-                    position: 'top'
-                  })
-          });
+        });
     },
 
 
-    editOilOrder(payload: {
-        gallons_delivered: string,
-        customer_filled: boolean,
-        prime: boolean,
-        cash_amount: number,
+    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,
         headers: authHeader(),
       })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.$router.push({name: "delivery"});
-            }
-            if (response.data.error) {
-              this.$router.push("/");
-            }
-          })
+        .then((response: any) => {
+          if (response.data.ok) {
+            Notify.create({
+              message: 'Delivered',
+              type: 'negative',
+              position: 'top'
+            })
+            this.$router.push({ name: "delivery" });
+          }
+          else {
+            Notify.create({
+              message: 'Form Error',
+              type: 'negative',
+              position: 'top'
+            })
+          }
+        })
     },
     getDeliveryStatusList() {
       let path = import.meta.env.VITE_BASE_URL + "/query/deliverystatus";
@@ -381,24 +380,45 @@ export default defineComponent({
         url: path,
         withCredentials: true,
       })
-          .then((response: any) => {
-            this.deliveryStatus = response.data;
-          })
-          .catch(() => {
-          });
+        .then((response: any) => {
+          this.deliveryStatus = response.data;
+        })
+        .catch(() => {
+        });
     },
 
     onSubmit() {
-      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,
-
+      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.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);
       };
-      this.editOilOrder(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') }
     ]