changes untested

package.json

@@ -14,6 +14,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.7.0",
     "axios": "^1.6.2",
+    "moment": "^2.30.1",
     "pinia": "^2.1.7",
     "v-pagination-3": "^0.1.7",
     "vue": "^3.3.11",

src/layouts/headers/headerauth.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="navbar bg-base-100">
+  <div class="navbar bg-primary">
     <div class="basis-1/4 md:basis-1/4">
       <router-link :to="{ name: 'home' }">
         Auburn Oil
@@ -12,12 +12,12 @@
 
     <div class="basis-1/2 md:basis-1/4 justify-end gap-5">
       <router-link :to="{ name: 'customerCreate' }">
-        <button class="btn">Create Customer</button>
+        <button class="btn btn-accent">Create Customer</button>
       </router-link>
 
       <div v-if="employee.id">
         <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }">
-          <button class="btn">{{ user.user_name }}</button>
+          <button class="btn btn-accent">{{ user.user_name }}</button>
         </router-link>
       </div>
     </div>
@@ -72,19 +72,18 @@ export default defineComponent({
         employee_state: '',
       },
       loaded: false,
-      searchTerm: '',
+      searchTerm: "",
       customers: [],
       type_of_search: 0,
     };
   },
   watch: {
-    searchTerm() {
+    searchTerm(this:any) {
       this.performSearch();
     },
   },
   methods: {
-    performSearch: debounce(async function () {
-      console.log(this.searchTerm)
+    performSearch: debounce(async function (this:any) {
       if (this.searchTerm === "") {
         this.customers = [];
         return;

src/layouts/headers/headernoauth.vue

@@ -12,10 +12,10 @@
 
     <div class="basis-1/2 md:basis-1/4 justify-end gap-5">
                 <router-link :to="{ name: 'login' }">
-                  <button class="btn">Login</button>
+                  <button class="btn btn-primary">Login</button>
                 </router-link>
                       <router-link :to="{ name: 'register' }">
-                  <button class="btn">Register</button>
+                  <button class="btn btn-primary">Register</button>
                 </router-link>
     </div>
   </div>

src/layouts/headers/search.vue

@@ -47,7 +47,6 @@ const getSearchUrl = () => {
 };
 
 const performSearch = debounce(async () => {
-  console.log("searching")
   if (searchTerm.value === "") {
     customers.value = [];
     return;

src/layouts/sidebar/sidebar.vue

@@ -8,14 +8,17 @@
     <div class="drawer-side">
       <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
 
-      <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
+      <ul class="menu p-4 w-80 min-h-full bg-base-100 text-base-content">
 
         <!-- Sidebar content here -->
+        <li>
         <router-link :to="{ name: 'home' }">
           <div class=" hover:underline py-1 px-5 font-bold">Home</div>
         </router-link>
+         </li>
 
         <div class="font-bold text-lg text-gray-500 pt-5">Customer</div>
+        
         <li>
           <router-link :to="{ name: 'customer' }">
             <div class=" hover:underline py-1">All Customers</div>
@@ -24,38 +27,33 @@
             <div class=" hover:underline py-1">Create Customer</div>
           </router-link>
         </li>
-
         <div class="font-bold text-lg text-gray-500 pt-5">Delivery</div>
         <li>
-          <router-link :to="{ name: 'delivery' }">
-            <div class=" hover:underline py-1">Waiting Deliveries</div>
-          </router-link>
           <router-link :to="{ name: 'deliveryOutForDelivery' }">
-            <div class=" hover:underline py-1">Out for Delivery</div>
+            <div class=" hover:underline py-1">Todays Deliveries</div>
           </router-link>
-          <router-link :to="{ name: 'deliveryDelivered' }">
-            <div class=" hover:underline py-1">Delivered Tickets</div>
+          <router-link :to="{ name: 'deliveryTommorrow' }">
+            <div class=" hover:underline py-1">Tommorrow Deliveries</div>
           </router-link>
-         
-        </li>
-
-
-        <div class="font-bold text-lg text-gray-500 pt-5">Service</div>
-        <li>
-          <router-link :to="{ name: 'service' }">
-            <div class=" hover:underline py-1">Service</div>
+          <router-link :to="{ name: 'deliveryWaiting' }">
+            <div class=" hover:underline py-1">Waiting Deliverys</div>
+          </router-link>
+          <router-link :to="{ name: 'deliveryDelivered'}">
+            <div class=" hover:underline py-1">Delivered Payment </div>
+          </router-link>
+          <router-link :to="{ name: 'deliveryIssue' }">
+            <div class=" hover:underline py-1">Issue Tickets</div>
+          </router-link>
+          <router-link :to="{ name: 'deliveryFinalized' }">
+            <div class=" hover:underline py-1">Finished Tickets</div>
           </router-link>
         </li>
-
-
         <div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
         <li>
           <router-link :to="{ name: 'auto' }">
             <div class=" hover:underline py-1">Automatics</div>
           </router-link>
         </li>
-
-
         <div class="font-bold text-lg text-gray-500 pt-5">Employees</div>
         <li>
           <router-link :to="{ name: 'employee' }">
@@ -63,18 +61,13 @@
           </router-link>
         </li>
 
-
         <div class="font-bold text-lg text-gray-500 pt-5">Admin</div>
         <li>
           <router-link :to="{ name: 'oilprice' }">
             <div class=" hover:underline py-1">Oil Pricing</div>
           </router-link>
         </li>
-        <li>
-          <router-link :to="{ name: 'serviceprice' }">
-            <div class=" hover:underline py-1">Service Pricing</div>
-          </router-link>
-        </li>
+      
       </ul>
 
 

src/pages/Index.vue

@@ -22,7 +22,7 @@
           <div class="grid grid-cols-12 p-5">
             <div class="col-span-12 font-bold text-xl">Todays stats</div>
             <div class="col-span-6 py-2"> Total Deliveries: {{delivery_count}}</div>
-            <div class="col-span-6 py-2"> Total Service Calls: {{service_count}}</div>
+          
           </div>
         </div>
         <div class="col-span-6 bg-neutral"  >
@@ -34,15 +34,7 @@
           </div>
         </div>
         <div class="col-span-6 bg-neutral"  >
-          <div class="grid grid-cols-12 p-5 ">
-            <div class="col-span-12 font-bold text-xl">Todays Service Price</div>
-            <div class="col-span-12 py-2"> Price / hour: ${{price_hourly}}</div>
-            <div class="col-span-12 py-2"> Emergency Fee: ${{emergency_fee}}</div>
-            <div class="col-span-12 py-2"> Emergency Price / hour: ${{emergency_rate}}</div>
-
-            <div class="col-span-12 py-2"> Cleaning ${{cleaning}}</div>
-             <div class="col-span-12 py-2"> Out of Oil: ${{out_of_oil}}</div>
-          </div>
+          
         </div>
       </div>
     </div>
@@ -72,17 +64,10 @@ export default defineComponent({
     return {
       token: null,
       delivery_count: 0,
-      service_count: 0,
       today_oil_price: '',
-
       same_day: '',
-      price_hourly: '',
-      emergency_fee: '',
-      emergency_rate: '',
       prime: '',
-      cleaning: '',
       out_of_oil: '',
-
       user: {
         user_id: 0,
         user_name: '',
@@ -111,9 +96,8 @@ export default defineComponent({
   created() {
     this.userStatus()
     this.today_delivery_count()
-    this.today_service_count()
     this.today_price_oil()
-    this.today_price_service()
+
   },
   methods: {
     userStatus() {
@@ -164,18 +148,7 @@ export default defineComponent({
             this.delivery_count = response.data.data;
           })
     },
-    today_service_count() {
-      let path = import.meta.env.VITE_BASE_URL + '/stats/service/count/today'
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            this.service_count = response.data.data;
-          })
-    },
+
     today_price_oil() {
       let path = import.meta.env.VITE_BASE_URL + '/info/price/oil'
       axios({
@@ -188,25 +161,7 @@ export default defineComponent({
             this.today_oil_price = response.data.price;
           })
     },
-      today_price_service() {
-      let path = import.meta.env.VITE_BASE_URL + '/info/price/service'
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            console.log(response.data)
-            this.same_day = response.data.same_day;
-            this.price_hourly = response.data.price_hourly;
-            this.emergency_fee = response.data.emergency_fee;
-            this.emergency_rate = response.data.emergency_rate;
-            this.prime = response.data.prime;
-            this.cleaning = response.data.cleaning;
-            this.out_of_oil = response.data.out_of_oil;
-          })
-    },
+     
   },
 })
 </script>

src/pages/admin/oilprice.vue

@@ -85,7 +85,7 @@
   import {notify} from "@kyvg/vue3-notification";
 
   export default defineComponent({
-    name: 'ServicePrice',
+    name: 'OilPrice',
 
     components: {
       Header,

src/pages/admin/routes.ts

@@ -1,7 +1,6 @@
 
 
 import OilPrice from '../admin/oilprice.vue';
-import ServicePrice from "./serviceprice.vue";
 
 const adminRoutes = [
     {
@@ -9,11 +8,7 @@ const adminRoutes = [
         name: 'oilprice',
         component: OilPrice,
     },
-    {
-        path: '/serviceprice',
-        name: 'serviceprice',
-        component: ServicePrice,
-    },
+
 
 ]
 

src/pages/admin/serviceprice.vue

@@ -1,226 +0,0 @@
-<template>
-  <Header/>
-  <div class="flex">
-    <div class="">
-      <SideBar/>
-    </div>
-    <div class=" w-full px-10">
-      <div class="text-sm breadcrumbs">
-        <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
-        </ul>
-      </div>
-
-      <div class="grid grid-cols-1 rounded-md p-6 ">
-        <div class="text-[24px]">
-          Change Pricing
-        </div>
-        <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full"
-              enctype="multipart/form-data"
-              @submit.prevent="onSubmit">
-
-          <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">Hourly Service Rate</label>
-            <input v-model="CreateServiceForm.basicInfo.price_service_hour"
-                   class="input input-bordered w-full max-w-xs"
-                   id="title" type="text" placeholder="Hourly Rate"/>
-          </div>
-
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Hourly Emergency Service Rate</label>
-            <input v-model="CreateServiceForm.basicInfo.price_emergency_service_hour"
-                   class="input input-bordered w-full max-w-xs"
-                   id="title" type="text" placeholder="Emergency Rate"/>
-          </div>
-
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Emergency Fee </label>
-            <input v-model="CreateServiceForm.basicInfo.price_emergency_call"
-                   class="input input-bordered w-full max-w-xs"
-                   id="title" type="text" placeholder="After hour/ same day Fee"/>
-          </div>
-
-
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Out of Oil Price</label>
-            <input v-model="CreateServiceForm.basicInfo.price_out_of_oil"
-                   class="input input-bordered w-full max-w-xs"
-                   id="title" type="text" placeholder="Out of oil price"/>
-          </div>
-
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Prime Price</label>
-            <input v-model="CreateServiceForm.basicInfo.price_prime"
-                   class="input input-bordered w-full max-w-xs"
-                   id="prime" type="text" placeholder="Price Prime"/>
-          </div>
-
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Price Cleaning</label>
-            <input v-model="CreateServiceForm.basicInfo.price_cleaning"
-                   class="input input-bordered w-full max-w-xs"
-                   id="prime" type="text" placeholder="Price Cleaning"/>
-          </div>
-
-
-          <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-            <button
-                class="btn">
-              Create Price
-            </button>
-          </div>
-        </form>
-      </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 SideBar from '../../layouts/sidebar/sidebar.vue'
-import Footer from '../../layouts/footers/footer.vue'
-import useValidate from "@vuelidate/core";
-import {notify} from "@kyvg/vue3-notification";
-
-export default defineComponent({
-  name: 'ServicePrice',
-
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
-
-  data() {
-    return {
-      v$: useValidate(),
-      user: null,
-
-      CreateServiceForm: {
-        basicInfo: {
-          price_service_hour: '',
-          price_emergency_service_hour: '',
-          price_emergency_call: '',
-          price_out_of_oil: '',
-          price_prime: '',
-          price_cleaning: '',
-        },
-      },
-    }
-  },
-  created() {
-    this.userStatus()
-  },
-  watch: {
-    $route() {
-    },
-  },
-  mounted() {
-    this.getCurrentPrices()
-  },
-  methods: {
-    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
-          })
-    },
-    getCurrentPrices() {
-      let path = import.meta.env.VITE_BASE_URL + "/admin/service/get";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data) {
-              this.CreateServiceForm.basicInfo.price_service_hour = response.data.price_service_hour;
-              this.CreateServiceForm.basicInfo.price_emergency_service_hour = response.data.price_emergency_service_hour;
-              this.CreateServiceForm.basicInfo.price_emergency_call = response.data.price_emergency_call;
-              this.CreateServiceForm.basicInfo.price_out_of_oil = response.data.price_out_of_oil;
-              this.CreateServiceForm.basicInfo.price_prime = response.data.price_prime;
-              this.CreateServiceForm.basicInfo.price_cleaning = response.data.price_cleaning;
-            }
-          })
-    },
-    CreatePricing(payload: {
-      price_service_hour: string;
-      price_emergency_service_hour: string;
-      price_emergency_call: string;
-      price_out_of_oil: string;
-      price_prime: string;
-      price_cleaning: string;
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/admin/service/create";
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data.ok) {
-
-              notify({
-                title: "update",
-                text: "Prices have been updated!",
-                type: "success",
-              });
-              this.$router.push({name: "serviceprice"});
-            }
-            if (response.data.error) {
-              notify({
-                title: "update",
-                text: "error updating prices :(",
-                type: "success",
-              });
-              this.$router.push("/");
-            }
-          })
-    },
-    onSubmit() {
-      let payload = {
-        price_service_hour: this.CreateServiceForm.basicInfo.price_service_hour,
-        price_emergency_service_hour: this.CreateServiceForm.basicInfo.price_emergency_service_hour,
-        price_emergency_call: this.CreateServiceForm.basicInfo.price_emergency_call,
-        price_out_of_oil: this.CreateServiceForm.basicInfo.price_out_of_oil,
-        price_prime: this.CreateServiceForm.basicInfo.price_prime,
-        price_cleaning: this.CreateServiceForm.basicInfo.price_cleaning,
-      };
-      this.CreatePricing(payload);
-    },
-  },
-})
-</script>
-
-<style scoped>
-
-</style>

src/pages/auth/register.vue

@@ -135,7 +135,6 @@ export default defineComponent({
         withCredentials: true,
       })
           .then((response:any) => {
-            console.log(response.data)
             if (response.data.error) {
               notify({
                 title: "Authorization",

src/pages/card/editcard.vue

@@ -352,8 +352,6 @@
         })
             .then((response: any) => {
               if (response.data.ok) {
-                console.log(response.data)
-                console.log(this.user.id)
                 this.$router.push({name: "customerProfile", params: { id: this.card.user_id }});
               }
               if (response.data.error) {

src/pages/card/home.vue

@@ -131,7 +131,6 @@ export default defineComponent({
   methods: {
     getPage: function (page: any) {
       // we simulate an api call that fetch the records from a backend
-      console.log("here")
       this.get_all_cards(page)
     },
     userStatus() {
@@ -179,7 +178,6 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.cards = response.data
-        console.log(response.data)
       })
     },
 

src/pages/customer/home.vue

@@ -52,14 +52,10 @@
             <td>{{ person['customer_phone_number'] }}</td>
 
             <td class="flex gap-5">
-
               <router-link :to="{ name: 'deliveryCreate', params: { id: person['id'] } }" class="cursor-pointer underline hover:text-blue-300">
                 Oil
               </router-link>
-              <router-link :to="{ name: 'serviceCreate', params: { id: person['id'] } }" class="cursor-pointer underline hover:text-blue-300">
-                Service
-              </router-link>
-
+             
               <router-link :to="{ name: 'customerEdit', params: { id: person['id'] } }" class="cursor-pointer underline hover:text-blue-300">
                 Edit
               </router-link>
@@ -69,8 +65,6 @@
               <a @click.prevent="deleteCustomer(person['id'])" class="cursor-pointer underline hover:text-blue-300">
               Delete
               </a>
-
-
             </td>
           </tr>
           </tbody>

src/pages/customer/profile/home.vue

@@ -19,7 +19,7 @@
             </router-link>
           </li>
         </ul>
-        <div class=" w-full mt-10" v-if="customer !== null">
+        <div class="w-full mt-10" v-if="customer !== null">
 
           <div class="grid grid-cols-12 gap-5">
             <div class="col-span-4 bg-neutral p-5 ">
@@ -37,12 +37,7 @@
                       Create Delivery
                     </router-link>
                   </div>
-                  <div class="btn">
-                    <router-link :to="{ name: 'serviceCreate', params: { id:  customer.id } }"
-                                 class="cursor-pointer underline hover:text-blue-300">
-                      Create Service
-                    </router-link>
-                  </div>
+               
                   <div class="btn">
                     <router-link :to="{ name: 'customerEdit', params: { id: customer.id } }" class="">
                       Edit Customer
@@ -100,7 +95,6 @@
               </div>
             </div>
 
-
             <div class="col-span-12 bg-neutral p-5">
               <div class="grid grid-cols-12">
                 <div class="col-span-12 font-bold flex text-2xl">
@@ -117,21 +111,9 @@
                   <div class="col-span-12 py-2">
                     Last Delivery: 0
                   </div>
-
-                </div>
-                <div class="col-span-6">
-                  <div class="col-span-12 py-2 font-bold">Service</div>
-                  <div class="col-span-12 py-2">
-                    Total Service Calls: 0
-                  </div>
-                  <div class="col-span-12 py-2">
-                    Last Service Call: 0
-                  </div>
                 </div>
               </div>
             </div>
-
-
             <div class="col-span-12 bg-neutral p-5">
               <div class="grid grid-cols-12">
                 <div class="col-span-6 font-bold flex text-2xl">
@@ -170,10 +152,14 @@
                         </div>
                         <div class="flex justify-between">
 
-                          <a @click.prevent="editCard(card.id)" class="cursor-pointer underline hover:text-blue-300">Edit
-                            Card</a>
-                          <a @click.prevent="removeCard(card.id)" class="cursor-pointer underline hover:text-blue-300">Remove
-                            Card</a>
+                          <a @click.prevent="editCard(card.id)" 
+                          class="cursor-pointer underline hover:text-blue-300">
+                          Edit Card
+                        </a>
+                          <a @click.prevent="removeCard(card.id)"
+                           class="cursor-pointer underline hover:text-blue-300">
+                           RemoveCard
+                          </a>
                         </div>
                       </div>
                     </div>
@@ -251,13 +237,10 @@
                         <td>{{ oil['customer_town'] }}</td>
                         <td>{{ oil['customer_name'] }}</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>
@@ -271,7 +254,6 @@
                           <div v-if="oil['same_day'] == 0">No</div>
                           <div v-else>Yes</div>
                         </td>
-
                         <td class="flex gap-5">
                           <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
                             <button class="btn">Edit</button>
@@ -281,67 +263,6 @@
                       </tbody>
                     </table>
                   </div>
-                  <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Service"/>
-                  <div role="tabpanel" class="tab-content pt-10">
-                    <table class="table">
-                      <!-- head -->
-                      <thead>
-                      <tr>
-                        <th>Customer Name</th>
-                        <th>Status</th>
-                        <th>Service Type</th>
-                        <th>Scheduled Date</th>
-                        <th>Tech Name</th>
-
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <!-- row 1 -->
-                      <tr v-for="service in service_orders" :key="service['id']">
-
-                        <td>
-                          {{ service['customer_first_name'] }} {{ service['customer_last_name'] }}
-                        </td>
-                        <td>
-                          <div v-if="service['status'] == 0">Waiting/not paid</div>
-                          <div v-else-if="service['status'] == 1">Paid /waiting</div>
-                          <div v-else-if="service['status'] == 2">Scheduled Today</div>
-                          <div v-else-if="service['status'] == 3">Completed/Unpaid</div>
-                          <div v-else-if="service['status'] == 4">Completed/Paid</div>
-
-                          <div v-else></div>
-                        </td>
-                        <td>
-                          <div v-if="service['service_type'] == 0">General</div>
-                          <div v-else-if="service['service_type'] == 1">Cleaning / Tuneup</div>
-                          <div v-else-if="service['service_type'] == 2">No Heat</div>
-                          <div v-else-if="service['service_type'] == 3">Install</div>
-                          <div v-else-if="service['service_type'] == 4">Call Back</div>
-                          <div v-else-if="service['service_type'] == 5">Quote</div>
-                          <div v-else-if="service['service_type'] == 6">Emergency</div>
-                          <div v-else></div>
-                        </td>
-                        <td>{{ service['scheduled_date'] }}</td>
-                        <td>
-                          <div v-if="service['payment_type'] == 0">Cash C.O.D</div>
-                          <div v-else-if="service['payment_type'] == 1">Credit</div>
-                          <div v-else-if="service['payment_type'] == 2">Stripe</div>
-                          <div v-else-if="service['payment_type'] == 3">Cash/Credit</div>
-
-                          <div v-else></div>
-                        </td>
-                        <td>
-                          {{ service['tech_first_name'] }} {{ service['tech_last_name'] }}
-                        </td>
-                        <td class="flex gap-5">
-                          <router-link :to="{ name: 'serviceEdit', params: { id: service['id'] } }">
-                            <button class="btn">Edit</button>
-                          </router-link>
-                        </td>
-                      </tr>
-                      </tbody>
-                    </table>
-                  </div>
                 </div>
               </div>
             </div>
@@ -405,7 +326,6 @@ export default defineComponent({
         account_number: '',
       },
       deliveries: [],
-      service_orders: [],
       delivery_page: 1,
       delivery_perPage: 50,
       delivery_recordsLength: 0,
@@ -414,16 +334,6 @@ export default defineComponent({
         delivery_format: false,
         delivery_template: PaginationComp
       },
-
-      service_page: 1,
-      service_perPage: 50,
-      service_recordsLength: 0,
-      service_options: {
-        service_edgeNavigation: false,
-        service_format: false,
-        service_template: PaginationComp
-      }
-
     }
   },
   created() {
@@ -433,7 +343,6 @@ export default defineComponent({
   },
   mounted() {
     this.getCustomer(this.$route.params.id)
-    this.getCustomerService(this.$route.params.id, this.service_page)
     this.getCustomerDelivery(this.$route.params.id, this.delivery_page)
 
   },
@@ -502,17 +411,6 @@ export default defineComponent({
       })
     },
 
-    getCustomerService(userid: any, service_page: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/service/customer/' + userid + '/' + service_page;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.service_orders = response.data
-      })
-    },
-
     getCustomerDelivery(userid: any, delivery_page: any) {
       let path = import.meta.env.VITE_BASE_URL + '/delivery/customer/' + userid + '/' + delivery_page;
       axios({
@@ -528,7 +426,6 @@ export default defineComponent({
       this.$router.push({name: "cardedit", params: {id: card_id}});
     },
 
-
     removeCard(card_id: any) {
       let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
       axios({

src/pages/delivery/create.vue

@@ -347,7 +347,6 @@ export default defineComponent({
         headers: authHeader(),
       })
           .then((response: any) => {
-            console.log(response.data)
             if (response.data.ok) {
               this.$router.push({name: "payOil", params: {id: response.data.delivery_id}});
             }

src/pages/delivery/edit.vue

@@ -461,7 +461,6 @@ export default defineComponent({
       })
           .then((response: any) => {
             this.customer = response.data;
-            console.log(this.deliveryOrder.payment_card_id)
             this.getPaymentCards(this.deliveryOrder.customer_id);
             if (this.deliveryOrder.payment_type == 1 ) {
               this.getPaymentCard(this.deliveryOrder.payment_card_id)

src/pages/delivery/home.vue

@@ -74,12 +74,12 @@
 
             <td class="flex gap-5">
               <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                <button class="btn">View</button>
+                <button class="btn btn-primary">View</button>
               </router-link>
               <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                <button class="btn">Edit</button>
+                <button class="btn btn-primary">Edit</button>
               </router-link>
-              <button @click.prevent="deleteCall(oil['id'])" class="btn">Delete</button>
+              <button @click.prevent="deleteCall(oil['id'])" class="btn btn-primary">Delete</button>
             </td>
           </tr>
           </tbody>

src/pages/delivery/routes.ts

@@ -10,6 +10,8 @@ import deliveryIssue from './viewstatus/issue.vue';
 import deliveryDelivered from './viewstatus/delivered.vue';
 import deliveryOutForDelivery from './viewstatus/out_for_delivery.vue';
 import deliveryWaiting from './viewstatus/waiting.vue';
+import deliveryFinalized from './viewstatus/finalized.vue'
+import deliveryTommorrow from './viewstatus/tommorrow.vue'
 
 const deliveryRoutes = [
     {
@@ -62,12 +64,22 @@ const deliveryRoutes = [
         path: '/delivery/outfordelivery',
         name: 'deliveryOutForDelivery',
         component: deliveryOutForDelivery,
+    },
+    {
+        path: '/delivery/tommorrow',
+        name: 'deliveryTommorrow',
+        component: deliveryTommorrow,
     },
         {
         path: '/delivery/waiting',
         name: 'deliveryWaiting',
         component: deliveryWaiting,
     },
+    {
+        path: '/delivery/finalized',
+        name: 'deliveryFinalized',
+        component: deliveryFinalized,
+    },
 ]
 
 export default deliveryRoutes

src/pages/delivery/view.vue

@@ -32,6 +32,9 @@
             </div>
             <div class="col-span-6 bg-neutral p-5">
               <div class="grid grid-cols-12">
+                <div class="col-span-12 font-bold flex mb-10 ">
+                {{ customer.account_number }}
+                </div>
                 <div class="col-span-12 font-bold flex">
                   {{ customer.customer_first_name }}
                   {{ customer.customer_last_name }}
@@ -114,10 +117,10 @@
             When Called
           </div>
           <div class="col-span-12 ">
-            {{ deliveryOrder.when_ordered }}
+            {{ format_date(deliveryOrder.when_ordered) }}
           </div>
           <div class="col-span-12 font-bold mt-10">
-            Driver Name
+            <!-- Driver Name -->
           </div>
           <div class="col-span-12 ">
             {{ deliveryOrder.driver_first_name }} {{ deliveryOrder.driver_last_name }}
@@ -245,7 +248,7 @@ import SideBar from '../../layouts/sidebar/sidebar.vue'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
 import {notify} from "@kyvg/vue3-notification"
-
+import moment from 'moment';
 
 export default defineComponent({
   name: 'deliveryOrder',
@@ -280,6 +283,7 @@ export default defineComponent({
       },
 
       customer: {
+        account_number: '',
         id: 0,
         user_id: 0,
         customer_first_name: '',
@@ -349,6 +353,12 @@ export default defineComponent({
   },
 
   methods: {
+    format_date(value: string){
+         if (value) {
+           return moment(String(value)).format('LLLL')
+          }
+      },
+
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({

src/pages/delivery/viewstatus/cancelled.vue

@@ -20,7 +20,7 @@
       </div>
 
       <div class="overflow-x-auto">
-        <div class="flex start">Oil Deliveries</div>
+        <div class="flex start">Cancelled Deliveries</div>
         <table class="table">
           <!-- head -->
           <thead>

src/pages/delivery/viewstatus/delivered.vue

@@ -20,7 +20,7 @@
       </div>
 
       <div class="overflow-x-auto">
-        <div class="flex start">Oil Deliveries</div>
+        <div class="flex start">Delivered Deliveries</div>
         <table class="table">
           <!-- head -->
           <thead>
@@ -28,7 +28,6 @@
             <th>Name</th>
             <th>Status</th>
             <th>Town</th>
-
             <th>Address</th>
             <th>Gallons</th>
             <th>Date</th>
@@ -52,7 +51,6 @@
                <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
               <div v-else></div>
             </td>
-
             <td>{{ oil['customer_town'] }}</td>
             <td>{{ oil['customer_address'] }}</td>
             <td>

src/pages/delivery/viewstatus/finalized.vue

@@ -0,0 +1,204 @@
+<template>
+    <Header/>
+    <div class="flex">
+      <div class="">
+        <SideBar/>
+      </div>
+      <div class=" w-full px-10 ">
+        <div class="text-sm breadcrumbs">
+          <ul>
+            <li>
+              <router-link :to="{ name: 'home' }">
+                Home
+              </router-link>
+            </li>
+  
+          </ul>
+        </div>
+        <div class="flex justify-end">
+  
+        </div>
+  
+        <div class="overflow-x-auto">
+          <div class="flex start">Finalized Deliveries</div>
+          <table class="table">
+            <!-- head -->
+            <thead>
+            <tr>
+              <th>Name</th>
+              <th>Status</th>
+              <th>Town</th>
+              <th>Address</th>
+              <th>Gallons</th>
+              <th>Date</th>
+              <th>Automatic</th>
+              <th>Prime</th>
+              <th>Same Day</th>
+            </tr>
+            </thead>
+            <tbody>
+            <!-- row 1 -->
+            <tr v-for="oil in deliveries" :key="oil['id']">    <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
+              <td>{{ oil['customer_name'] }} </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>{{ 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>Yes</div>
+              </td>
+              <td>
+                <div v-if="oil['same_day'] == 0">No</div>
+                <div v-else>Yes</div>
+              </td>
+  
+              <td class="flex gap-5">
+                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
+                  <button class="btn">View</button>
+                </router-link>
+                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
+                  <button class="btn">Edit</button>
+                </router-link>
+                <button @click.prevent="deleteCall(oil['id'])" class="btn">Delete</button>
+              </td>
+            </tr>
+            </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>
+          <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+        </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: 'deliveryFinalized',
+  
+    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) {
+        // we simulate an api call that fetch the records from a backend
+        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/finalized/' + 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 oil order",
+              type: "success",
+            });
+            this.getPage(this.page)
+          } else {
+            notify({
+              title: "Failure",
+              text: "error deleting oil order",
+              type: "success",
+            });
+          }
+        })
+      },
+    },
+  })
+  </script>
+  
+  <style scoped>
+  
+  </style>

src/pages/delivery/viewstatus/issue.vue

@@ -20,7 +20,7 @@
       </div>
 
       <div class="overflow-x-auto">
-        <div class="flex start">Oil Deliveries</div>
+        <div class="flex start">Issue with Delivery</div>
         <table class="table">
           <!-- head -->
           <thead>

src/pages/delivery/viewstatus/out_for_delivery.vue

@@ -20,7 +20,7 @@
       </div>
 
       <div class="overflow-x-auto">
-        <div class="flex start">Oil Deliveries</div>
+        <div class="flex start">Out for Delivery </div>
         <table class="table">
           <!-- head -->
           <thead>
@@ -28,7 +28,6 @@
             <th>Name</th>
             <th>Status</th>
             <th>Town</th>
-
             <th>Address</th>
             <th>Gallons</th>
             <th>Date</th>

src/pages/delivery/viewstatus/tommorrow.vue

@@ -0,0 +1,204 @@
+<template>
+    <Header/>
+    <div class="flex">
+      <div class="">
+        <SideBar/>
+      </div>
+      <div class=" w-full px-10 ">
+        <div class="text-sm breadcrumbs">
+          <ul>
+            <li>
+              <router-link :to="{ name: 'home' }">
+                Home
+              </router-link>
+            </li>
+  
+          </ul>
+        </div>
+        <div class="flex justify-end">
+  
+        </div>
+  
+        <div class="overflow-x-auto">
+          <div class="flex start">Tommorrows Deliveries </div>
+          <table class="table">
+            <!-- head -->
+            <thead>
+            <tr>
+              <th>Name</th>
+              <th>Status</th>
+              <th>Town</th>
+              <th>Address</th>
+              <th>Gallons</th>
+              <th>Date</th>
+              <th>Automatic</th>
+              <th>Prime</th>
+              <th>Same Day</th>
+            </tr>
+            </thead>
+            <tbody>
+            <!-- row 1 -->
+            <tr v-for="oil in deliveries" :key="oil['id']">  
+                <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
+              <td>{{ oil['customer_name'] }} </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>{{ 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>Yes</div>
+              </td>
+              <td>
+                <div v-if="oil['same_day'] == 0">No</div>
+                <div v-else>Yes</div>
+              </td>
+  
+              <td class="flex gap-5">
+                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
+                  <button class="btn">View</button>
+                </router-link>
+                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
+                  <button class="btn">Edit</button>
+                </router-link>
+                <button @click.prevent="deleteCall(oil['id'])" class="btn">Delete</button>
+              </td>
+            </tr>
+            </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>
+          <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
+        </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: 'deliveryOutForDelivery',
+  
+    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) {
+        // we simulate an api call that fetch the records from a backend
+        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/outfordelivery/' + 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 oil order",
+              type: "success",
+            });
+            this.getPage(this.page)
+          } else {
+            notify({
+              title: "Failure",
+              text: "error deleting oil order",
+              type: "success",
+            });
+          }
+        })
+      },
+    },
+  })
+  </script>
+  
+  <style scoped>
+  
+  </style>

src/pages/delivery/viewstatus/waiting.vue

@@ -20,7 +20,7 @@
       </div>
 
       <div class="overflow-x-auto">
-        <div class="flex start">Oil Deliveries</div>
+        <div class="flex start">Waiting Deliveries</div>
         <table class="table">
           <!-- head -->
           <thead>

src/pages/employee/profile/home.vue

@@ -105,41 +105,6 @@
                     Total Prime: 0
                   </div>
                 </div>
-                <div class="col-span-6">
-                  <div class="col-span-12 py-2">
-                    Total Service Calls: 0
-                  </div>
-                  <div class="col-span-12 py-2">
-                    Last Service Call: 0
-                  </div>
-                </div>
-              </div>
-            </div>
-
-              <div class="col-span-12 bg-neutral p-5 mt-5">
-              <div class="grid grid-cols-12">
-                <div class="col-span-12 font-bold flex text-2xl">
-                  Service
-                </div>
-                <div class="col-span-6">
-                  <div class="col-span-12 py-2">
-                    Total Deliverys Done: 0
-                  </div>
-                  <div class="col-span-12 py-2">
-                    Total Gallons Delivered: 0
-                  </div>
-                  <div class="col-span-12 py-2">
-                    Total Prime: 0
-                  </div>
-                </div>
-                <div class="col-span-6">
-                  <div class="col-span-12 py-2">
-                    Total Service Calls: 0
-                  </div>
-                  <div class="col-span-12 py-2">
-                    Last Service Call: 0
-                  </div>
-                </div>
               </div>
             </div>
           </div>

src/pages/pay/cancel.vue

@@ -147,7 +147,6 @@ export default defineComponent({
       })
         .then((result) => result.json())
         .then((data) => {
-          console.log(data);
           // Redirect to Stripe Checkout
           return this.stripe.redirectToCheckout({ sessionId: data.sessionId });
         })

src/pages/pay/pay_service.vue

@@ -284,7 +284,7 @@ export default defineComponent({
   },
   mounted() {
 
-    this.getServicePrices();
+
     // this.getStripePublishableKey();
 
   },
@@ -326,25 +326,6 @@ export default defineComponent({
           });
     },
 
-    getServicePrices() {
-      let path = import.meta.env.VITE_BASE_URL + "/admin/service/get";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.service_prices = response.data;
-
-          })
-          .catch(() => {
-            notify({
-              title: "Error",
-              text: "Could not get service order",
-              type: "error",
-            });
-          });
-    },
 
     getServiceOrderNotes(service_id: any) {
       let path = import.meta.env.VITE_BASE_URL + "/service/call/notes" + service_id;

src/pages/service/create.vue

@@ -1,401 +0,0 @@
-<template>
-  <Header />
-  <div class="flex">
-    <div class="">
-      <SideBar />
-    </div>
-    <div class=" w-full px-10">
-      <div class="text-sm breadcrumbs">
-        <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
-        </ul>
-      </div>
-
-
-      <div class="grid grid-cols-1 rounded-md p-6 ">
-        <div class="grid grid-cols-12">
-        <div class="col-span-6 bg-neutral p-5">
-              <div class="grid grid-cols-12">
-                     <div class="col-span-12 font-bold flex pb-5 text-lg">{{customer.account_number}}</div>
-                <div class="col-span-12 font-bold flex">
-                  {{ customer.customer_first_name }}
-                  {{ customer.customer_last_name }}
-                </div>
-                <div class="col-span-12 font-bold flex">
-                  <div class="pr-2">
-                    {{ customer.customer_town }},
-                  </div>
-                  <div class="pr-2">
-                    <div v-if="customer.customer_state == 0">Massachusetts</div>
-                    <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                    <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                    <div v-else-if="customer.customer_state == 3">Maine</div>
-                    <div v-else-if="customer.customer_state == 4">Vermont</div>
-                    <div v-else-if="customer.customer_state == 5">Maine</div>
-                    <div v-else-if="customer.customer_state == 6">New York</div>
-                    <div v-else>Unknown state</div>
-                  </div>
-                  <div class="pr-2">
-                    {{ customer.customer_zip }}
-                  </div>
-                </div>
-
-                <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
-                  {{ customer.customer_apt }}
-                </div>
-                <div class="col-span-12 font-bold flex">
-                  <div v-if="customer.customer_home_type == 0">Residential</div>
-                  <div v-else-if="customer.customer_home_type == 1">apartment</div>
-                  <div v-else-if="customer.customer_home_type == 2">condo</div>
-                  <div v-else-if="customer.customer_home_type == 3">commercial</div>
-                  <div v-else-if="customer.customer_home_type == 4">business</div>
-                  <div v-else-if="customer.customer_home_type == 5">construction</div>
-                  <div v-else-if="customer.customer_home_type == 6">container</div>
-                </div>
-                <div class="col-span-12 font-bold flex">
-                  {{ customer.customer_phone_number }}
-                </div>
-              </div>
-            </div>
-          </div>
-        <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
-
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
-
-            <div class="flex-1 mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Service Category</label>
-              <select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
-                id="customer_state" v-model="CreateServiceOrderForm.basicInfo.type_of_service">
-                <option class="text-white" v-for="(cat, index) in serviceList" :key="index" :value="cat['value']">
-                  {{ cat['text'] }}
-                </option>
-              </select>
-              <span v-if="v$.CreateServiceOrderForm.basicInfo.type_of_service.$error" class="text-red-600 text-center">
-                {{ v$.CreateServiceOrderForm.basicInfo.type_of_service.$errors[0].$message }}
-              </span>
-            </div>
-
-            <label class="form-control w-full max-w-xs">
-              <div class="label">
-                <span class="label-text">Subject</span>
-              </div>
-              <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs"
-                v-model="CreateServiceOrderForm.basicInfo.dispatcher_subject_taken" />
-            </label>
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.dispatcher_subject_taken.$error"
-              class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.dispatcher_subject_taken.$errors[0].$message }}
-            </span>
-          </div>
-
-
-          <div class="mb-4">
-            <label class="form-control">
-              <div class="label">
-                <span class="label-text">What is the issue</span>
-              </div>
-              <textarea class="textarea textarea-bordered h-24" placeholder="Describe the issue for the service tech .."
-                v-model="CreateServiceOrderForm.basicInfo.dispatcher_notes_taken"></textarea>
-            </label>
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.dispatcher_notes_taken.$error"
-              class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.dispatcher_notes_taken.$errors[0].$message }}
-            </span>
-          </div>
-
-
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Expected Service Date </label>
-            <input v-model="CreateServiceOrderForm.basicInfo.date_scheduled" class="input input-bordered w-full max-w-xs"
-              id="title" type="date" min="2023-01-01" max="2030-01-01" />
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.date_scheduled.$error" class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.date_scheduled.$errors[0].$message }}
-            </span>
-          </div>
-
-          <div class="flex-1 mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Service Tech</label>
-            <select class="select select-bordered w-full max-w-xs" aria-label="Default select example" id="customer_state"
-              v-model="CreateServiceOrderForm.basicInfo.service_tech">
-              <option class="text-white" v-for="(tech, index) in serviceTechsList" :key="index" :value="tech['id']">
-                 {{ tech['employee_first_name'] }}  {{ tech['employee_last_name'] }}
-              </option>
-            </select>
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.service_tech.$error" class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.service_tech.$errors[0].$message }}
-            </span>
-          </div>
-
-
-            <div class="bg-neutral">
-
-            <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="CreateServiceOrderForm.basicInfo.cash"
-                     class="checkbox"
-                     id="cash"
-                     type="checkbox"/>
-            </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">Credit </label>
-              <input v-model="CreateServiceOrderForm.basicInfo.credit"
-                     class="checkbox"
-                     id="Credit"
-                     type="checkbox"/>
-            </div>
-
-            <div class="flex-1 mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Customer Cards Payment</label>
-              <select
-                  class="select select-bordered w-full max-w-xs"
-                  aria-label="Default select example" id="userCards"
-                  v-model="CreateServiceOrderForm.basicInfo.userCards">
-                <option class="text-white" v-for="(card, index) in userCards"
-                        :key="index"
-                        :value="card['id']">
-                  {{ card['type_of_card'] }} {{ card['card_number'] }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-
-          <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-            <button class="btn">
-              Create Service Call
-            </button>
-          </div>
-        </form>
-      </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 SideBar from '../../layouts/sidebar/sidebar.vue'
-import Footer from '../../layouts/footers/footer.vue'
-import useValidate from "@vuelidate/core";
-import {notify} from "@kyvg/vue3-notification"
-import {minLength, required} from "@vuelidate/validators";
-
-
-export default defineComponent({
-  name: 'ServiceCreate',
-
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
-
-  data() {
-    return {
-      v$: useValidate(),
-      user:  {
-        id: 0,
-        user_id: 0,
-      },
-      serviceList: [],
-      serviceTechsList: [],
-      userCards: [],
-      service_id: 0,
-      CreateServiceOrderForm: {
-        basicInfo: {
-          type_of_service: '',
-          dispatcher_notes_taken: '',
-          dispatcher_subject_taken: '',
-          date_scheduled: '',
-          service_tech: '',
-          userCards: [],
-          credit: false,
-          cash: false,
-          credit_card_id: 0,
-        },
-      },
-      customer: {
-        id: 0,
-        user_id: 0,
-        customer_first_name: '',
-        customer_last_name: '',
-        customer_town: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_home_type: 0,
-        customer_phone_number: '',
-        account_number: '',
-      },
-    }
-  },
-  validations() {
-    return {
-      CreateServiceOrderForm: {
-        basicInfo: {
-          type_of_service: {required},
-          dispatcher_notes_taken: {required, minLength: minLength(10)},
-          dispatcher_subject_taken: {required, minLength: minLength(10)},
-          date_scheduled: {required},
-          service_tech: {required},
-        },
-      },
-    };
-  },
-  created() {
-    this.userStatus()
-    this.getServiceTypeList()
-    this.getServiceTechsList()
-  },
-  watch: {
-    $route() {
-      this.getCustomer(this.$route.params.id);
-       this.getPaymentCards(this.$route.params.id);
-    },
-  },
-  mounted() {
-    this.getCustomer(this.$route.params.id)
-         this.getPaymentCards(this.$route.params.id);
-  },
-  methods: {
-    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;
-            }
-          })
-
-    },
-    getCustomer(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.customer = response.data;
-            console.log(this.customer)
-
-          })
-          .catch(() => {
-            notify({
-              title: "Error",
-              text: "Could not find customer",
-              type: "error",
-            });
-          });
-    },
-    getPaymentCards(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/cards/"+ user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.userCards = response.data;
-          })
-          .catch(() => {
-          });
-    },
-    CreateServiceOrder(payload: {
-      dispatcher_notes_taken: string,
-      dispatcher_subject_taken: string,
-      date_scheduled: string,
-      type_of_service: string,
-      dispatcher_id: number,
-      cash: boolean,
-      credit: boolean,
-      credit_card_id: any,
-      service_tech_employee_id: string,
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/service/create/" + this.customer.id;
-      axios({
-        method: "post",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.service_id = response.data.service_id
-              this.$router.push({name: "payService", params: { id: this.service_id }});
-            }
-            if (response.data.error) {
-            }
-          })
-    },
-    onSubmit() {
-      let payload = {
-        dispatcher_notes_taken: this.CreateServiceOrderForm.basicInfo.dispatcher_notes_taken,
-        dispatcher_subject_taken: this.CreateServiceOrderForm.basicInfo.dispatcher_subject_taken,
-        date_scheduled: this.CreateServiceOrderForm.basicInfo.date_scheduled,
-        type_of_service: this.CreateServiceOrderForm.basicInfo.type_of_service,
-        dispatcher_id: this.user.user_id,
-        cash: this.CreateServiceOrderForm.basicInfo.cash,
-        credit: this.CreateServiceOrderForm.basicInfo.credit,
-        credit_card_id: this.CreateServiceOrderForm.basicInfo.userCards,
-        service_tech_employee_id: this.CreateServiceOrderForm.basicInfo.service_tech,
-      };
-      this.CreateServiceOrder(payload);
-    },
-
-    getServiceTypeList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/servicetype";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-         headers: authHeader(),
-      })
-          .then((response: any) => {
-            this.serviceList = response.data;
-          })
-          .catch(() => {});
-    },
-
-
-    getServiceTechsList() {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/techs";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-         headers: authHeader(),
-      })
-          .then((response: any) => {
-            this.serviceTechsList = response.data;
-          })
-          .catch(() => {
-          });
-    },
-
-
-  },
-})
-</script>
-
-<style scoped></style>

src/pages/service/edit.vue

@@ -1,501 +0,0 @@
-<template>
-  <Header/>
-
-  <div class="flex">
-    <div class="">
-      <SideBar/>
-    </div>
-    <div class=" w-full px-10">
-      <div class="text-sm breadcrumbs">
-        <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'customer' }">
-              Customers
-            </router-link>
-          </li>
-        </ul>
-      </div>
-
-      <div class="grid grid-cols-1 rounded-md p-6 ">
-        <div class="text-[24px]">Edit Service Call
-        </div>
-        <div class="grid grid-cols-12">
-          <div class="col-span-6 bg-neutral p-5">
-            <div class="grid grid-cols-12">
-              <div class="col-span-12 font-bold flex">
-                {{ customer.customer_first_name }}
-                {{ customer.customer_last_name }}
-              </div>
-              <div class="col-span-12
-
-
-              font-bold flex">
-                <div class="pr-2">
-                  {{ customer.customer_town }},
-                </div>
-                <div class="pr-2">
-                  <div v-if="customer.customer_state == 0">Massachusetts</div>
-                  <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                  <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                  <div v-else-if="customer.customer_state == 3">Maine</div>
-                  <div v-else-if="customer.customer_state == 4">Vermont</div>
-                  <div v-else-if="customer.customer_state == 5">Maine</div>
-                  <div v-else-if="customer.customer_state == 6">New York</div>
-                  <div v-else>Unknown state</div>
-                </div>
-                <div class="pr-2">
-                  {{ customer.customer_zip }}
-                </div>
-              </div>
-
-              <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
-                {{ customer.customer_apt }}
-              </div>
-              <div class="col-span-12 font-bold flex">
-                <div v-if="customer.customer_home_type == 0">Residential</div>
-                <div v-else-if="customer.customer_home_type == 1">apartment</div>
-                <div v-else-if="customer.customer_home_type == 2">condo</div>
-                <div v-else-if="customer.customer_home_type == 3">commercial</div>
-                <div v-else-if="customer.customer_home_type == 4">business</div>
-                <div v-else-if="customer.customer_home_type == 5">construction</div>
-                <div v-else-if="customer.customer_home_type == 6">container</div>
-              </div>
-              <div class="col-span-12 font-bold flex">
-                {{ customer.customer_phone_number }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">
-               <div class="bg-neutral">
-
-            <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="CreateServiceOrderForm.basicInfo.cash"
-                     class="checkbox"
-                     id="cash"
-                     type="checkbox"/>
-            </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">Credit </label>
-              <input v-model="CreateServiceOrderForm.basicInfo.card"
-                     class="checkbox"
-                     id="Credit"
-                     type="checkbox"/>
-            </div>
-
-            <div class="flex-1 mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Customer Cards Payment</label>
-              <select
-                  class="select select-bordered w-full max-w-xs"
-                  aria-label="Default select example" id="userCards"
-                  v-model="CreateServiceOrderForm.basicInfo.userCards">
-                <option class="text-white" v-for="(card, index) in userCards"
-                        :key="index"
-                        :value="card['id']">
-                  {{ card['type_of_card'] }} {{ card['card_number'] }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
-
-            <div class="flex-1 mb-4">
-              <label class="block text-white text-sm font-bold mb-2">Service Category</label>
-              <select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
-                      id="customer_state" v-model="CreateServiceOrderForm.basicInfo.type_of_service">
-                <option class="text-white" v-for="(cat, index) in serviceList" :key="index" :value="cat['value']">
-                  {{ cat['text'] }}
-                </option>
-              </select>
-              <span v-if="v$.CreateServiceOrderForm.basicInfo.type_of_service.$error" class="text-red-600 text-center">
-                {{ v$.CreateServiceOrderForm.basicInfo.type_of_service.$errors[0].$message }}
-              </span>
-            </div>
-            <label class="form-control w-full max-w-xs">
-              <div class="label">
-                <span class="label-text">Subject</span>
-              </div>
-              <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs"
-                     v-model="CreateServiceOrderForm.basicInfo.dispatcher_subject_taken"/>
-            </label>
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.dispatcher_subject_taken.$error"
-                  class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.dispatcher_subject_taken.$errors[0].$message }}
-            </span>
-          </div>
-
-          <div class="mb-4">
-            <label class="form-control">
-              <div class="label">
-                <span class="label-text">What is the issue</span>
-              </div>
-              <textarea class="textarea textarea-bordered h-24" placeholder="Describe the issue for the service tech .."
-                        v-model="CreateServiceOrderForm.basicInfo.dispatcher_notes_taken"></textarea>
-            </label>
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.dispatcher_notes_taken.$error"
-                  class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.dispatcher_notes_taken.$errors[0].$message }}
-            </span>
-          </div>
-
-
-          <div class="mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Expected Service Date </label>
-            <input v-model="CreateServiceOrderForm.basicInfo.date_scheduled"
-                   class="input input-bordered w-full max-w-xs"
-                   id="title" type="date" min="2023-01-01" max="2030-01-01"/>
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.date_scheduled.$error" class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.date_scheduled.$errors[0].$message }}
-            </span>
-          </div>
-
-          <div class="flex-1 mb-4">
-            <label class="block text-white text-sm font-bold mb-2">Service Tech</label>
-            <select class="select select-bordered w-full max-w-xs" aria-label="Default select example"
-                    id="customer_state"
-                    v-model="CreateServiceOrderForm.basicInfo.service_tech_id">
-              <option class="text-white" v-for="(tech, index) in serviceTechsList" :key="index" :value="tech['id']">
-                {{ tech['employee_last_name'] }}
-              </option>
-            </select>
-            <span v-if="v$.CreateServiceOrderForm.basicInfo.service_tech_id.$error" class="text-red-600 text-center">
-              {{ v$.CreateServiceOrderForm.basicInfo.type_of_service.$errors[0].$message }}
-            </span>
-          </div>
-          <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
-            <button class="btn">
-              Edit Service Call
-            </button>
-          </div>
-        </form>
-      </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 SideBar from '../../layouts/sidebar/sidebar.vue'
-import Footer from '../../layouts/footers/footer.vue'
-import useValidate from "@vuelidate/core";
-import {notify} from "@kyvg/vue3-notification"
-import {minLength, required} from "@vuelidate/validators";
-
-
-export default defineComponent({
-  name: 'ServiceEdit',
-
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
-
-  data() {
-    return {
-      v$: useValidate(),
-      user: {
-        id: 0
-      },
-      serviceList: [],
-      serviceTechsList: [],
-      userCards: [],
-      userCard: {
-        date_added: '',
-        user_id: '',
-        card_number: '',
-        last_four_digits: '',
-        name_on_card: '',
-        expiration_month: '',
-        expiration_year: '',
-        type_of_card: '',
-        security_number: '',
-        accepted_or_declined: '',
-        main_card: '',
-      },
-      customer: {
-        id: 0,
-        user_id: 0,
-        customer_first_name: '',
-        customer_last_name: '',
-        customer_town: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_home_type: 0,
-        customer_phone_number: '',
-      },
-      serviceCall: {
-        id: 0,
-        tech_id: 0,
-        customer_id: 0,
-        type_of_service: 0,
-        dispatcher_notes_taken: '',
-        dispatcher_subject_taken: '',
-        date_scheduled: '',
-        payment_type: 0,
-        payment_card_id: 0,
-        same_day: 0,
-
-      },
-      CreateServiceOrderForm: {
-        basicInfo: {
-          type_of_service: '',
-          dispatcher_notes_taken: '',
-          dispatcher_subject_taken: '',
-          date_scheduled: '',
-          service_tech_id: '',
-          userCards: [],
-          credit_card_id: 0,
-          cash: false,
-          card: false,
-        },
-      },
-    }
-  },
-  validations() {
-    return {
-      CreateServiceOrderForm: {
-        basicInfo: {
-          type_of_service: {required},
-          dispatcher_notes_taken: {required, minLength: minLength(10)},
-          dispatcher_subject_taken: {required, minLength: minLength(10)},
-          date_scheduled: {required},
-          service_tech_id: {required},
-        },
-      },
-    };
-  },
-  created() {
-    this.userStatus()
-    this.getServiceTypeList()
-    this.getServiceTechsList()
-  },
-  watch: {
-    $route() {
-      this.getServiceCall(this.$route.params.id);
-      this.getServiceCallNotes(this.$route.params.id)
-    },
-  },
-  mounted() {
-    this.getServiceCall(this.$route.params.id)
-     this.getServiceCallNotes(this.$route.params.id)
-    this.getServiceTechsList()
-  },
-
-  methods: {
-    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;
-              this.user.id = response.data.user_id;
-            }
-          })
-
-    },
-    getCustomer(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.customer = response.data;
-            this.getPaymentCards(this.serviceCall.customer_id);
-            if (this.serviceCall.payment_type == 1) {
-              this.getPaymentCard(this.serviceCall.payment_card_id)
-            }
-            if (this.serviceCall.payment_type == 2) {
-              this.getPaymentCard(this.serviceCall.payment_card_id)
-            }
-          })
-          .catch(() => {
-            notify({
-              title: "Error",
-              text: "Could not find customer",
-              type: "error",
-            });
-          });
-    },
-    getPaymentCard(card_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/card/" + card_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.userCard = response.data;
-
-            this.CreateServiceOrderForm.basicInfo.userCards = response.data.id
-          })
-          .catch(() => {
-          });
-    },
-    getPaymentCards(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/cards/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.userCards = response.data;
-          })
-          .catch(() => {
-          });
-    },
-    // gets the item from paramater router
-    getServiceCall(serviceid: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/service/" + serviceid;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data) {
-              this.CreateServiceOrderForm.basicInfo.type_of_service = response.data.service_type;
-              this.CreateServiceOrderForm.basicInfo.date_scheduled = response.data.scheduled_date;
-              this.CreateServiceOrderForm.basicInfo.service_tech_id = response.data.tech_id;
-
-              this.CreateServiceOrderForm.basicInfo.date_scheduled = response.data.scheduled_date;
-
-
-              this.serviceCall = response.data
-
-              if (response.data.payment_type == 0) {
-                this.CreateServiceOrderForm.basicInfo.card = false
-                this.CreateServiceOrderForm.basicInfo.cash = true
-              }
-              if (response.data.payment_type == 1) {
-                this.CreateServiceOrderForm.basicInfo.card = true
-                this.CreateServiceOrderForm.basicInfo.cash = false
-              }
-              if (response.data.payment_type == 2) {
-                this.CreateServiceOrderForm.basicInfo.card = true
-                this.CreateServiceOrderForm.basicInfo.cash = true
-              }
-              this.getCustomer(this.serviceCall.customer_id);
-            }
-          })
-    },
-
-    getServiceCallNotes(serviceid: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/service/call/notes/" + serviceid;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data) {
-              this.CreateServiceOrderForm.basicInfo.dispatcher_notes_taken = response.data.dispatcher_notes;
-              this.CreateServiceOrderForm.basicInfo.dispatcher_subject_taken = response.data.dispatcher_subject;
-            }
-          })
-    },
-
-
-    EditServiceOrder(payload: {
-      dispatcher_notes_taken: string;
-      dispatcher_subject_taken: string;
-      date_scheduled: string;
-      type_of_service: string,
-      tech_id: number,
-      cash: boolean,
-      credit: boolean,
-      credit_card_id: any,
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/service/edit/" + this.serviceCall.id;
-      axios({
-        method: "put",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data.ok) {
-                this.$router.push({name: "serviceCall", params: { id: this.serviceCall.id }});
-            }
-            if (response.data.error) {
-              this.$router.push("/");
-            }
-          })
-    },
-    onSubmit() {
-      let payload = {
-        dispatcher_notes_taken: this.CreateServiceOrderForm.basicInfo.dispatcher_notes_taken,
-        dispatcher_subject_taken: this.CreateServiceOrderForm.basicInfo.dispatcher_subject_taken,
-        date_scheduled: this.CreateServiceOrderForm.basicInfo.date_scheduled,
-        type_of_service: this.CreateServiceOrderForm.basicInfo.type_of_service,
-        tech_id: this.serviceCall.tech_id,
-
-        cash: this.CreateServiceOrderForm.basicInfo.cash,
-        credit: this.CreateServiceOrderForm.basicInfo.card,
-        credit_card_id: this.CreateServiceOrderForm.basicInfo.userCards,
-
-      };
-      this.EditServiceOrder(payload);
-    },
-
-    getServiceTypeList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/servicetype";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            this.serviceList = response.data;
-          })
-          .catch(() => {
-          });
-    },
-
-    getServiceTechsList() {
-      let path = import.meta.env.VITE_BASE_URL + "/employee/techs";
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            this.serviceTechsList = response.data;
-          })
-          .catch(() => {
-          });
-    },
-  },
-})
-</script>
-
-<style scoped></style>

src/pages/service/home.vue

@@ -1,216 +0,0 @@
-<template>
-  <Header/>
-
-  <div class="flex">
-    <div class="">
-      <SideBar/>
-    </div>
-    <div class=" w-full px-10 ">
-      <div class="text-sm breadcrumbs">
-        <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-
-        </ul>
-      </div>
-      <div class="flex justify-end">
-
-      </div>
-
-      <div class="overflow-x-auto">
-        <div class="flex start">Service Calls</div>
-        <table class="table">
-          <!-- head -->
-          <thead>
-          <tr>
-            <th>Customer Name</th>
-            <th>Scheduled Date</th>
-            <th>Status</th>
-            <th>Town</th>
-            <th>Service Type</th>
-            <th>Initial Call</th>
-            <th>Tech Name</th>
-            <th>Payment Type</th>
-          </tr>
-          </thead>
-          <tbody>
-          <!-- row 1 -->
-          <tr v-for="service in service_calls" :key="service['id']">
-            <td>
-               <router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }">
-                {{ person['customer_first_name'] }} {{ person['customer_last_name'] }}
-              </router-link>
-            </td>
-            <td>
-              {{ service['scheduled_date'] }}
-            </td>
-            <td>
-              <div v-if="service['status'] == 0">Waiting/not paid</div>
-              <div v-else-if="service['status'] == 1">Paid /waiting</div>
-              <div v-else-if="service['status'] == 2">Scheduled Today</div>
-              <div v-else-if="service['status'] == 3">Completed/Unpaid</div>
-              <div v-else-if="service['status'] == 4">Completed/Paid</div>
-
-              <div v-else></div>
-            </td>
-
-            <td>
-              {{ service['customer_town'] }}
-            </td>
-
-            <td>
-              <div v-if="service['service_type'] == 0">General</div>
-              <div v-else-if="service['service_type'] == 1">Cleaning / Tuneup</div>
-              <div v-else-if="service['service_type'] == 2">No Heat</div>
-              <div v-else-if="service['service_type'] == 3">Install</div>
-              <div v-else-if="service['service_type'] == 4">Call Back</div>
-              <div v-else-if="service['service_type'] == 5">Quote</div>
-              <div v-else-if="service['service_type'] == 6" class="text-red-700 font-bold">Emergency</div>
-              <div v-else></div>
-            </td>
-            <td>
-              {{ service['when_called'] }}
-            </td>
-            <td>
-              {{ service['tech_first_name'] }} {{ service['tech_last_name'] }}
-            </td>
-            <td>
-              <div v-if="service['payment_type'] == 0">Cash C.O.D</div>
-              <div v-else-if="service['payment_type'] == 1">Credit</div>
-              <div v-else-if="service['payment_type'] == 2">Stripe</div>
-              <div v-else-if="service['payment_type'] == 3">Cash/Credit</div>
-
-              <div v-else></div>
-            </td>
-            <td class="flex gap-5">
-              <router-link :to="{ name: 'serviceCall', params: { id: service['id'] } }">
-                <button class="btn">View</button>
-              </router-link>
-              <router-link :to="{ name: 'serviceEdit', params: { id: service['id'] } }">
-                <button class="btn">Edit</button>
-              </router-link>
-
-              <button @click.prevent="deleteCall(service['id'])" class="btn">Delete</button>
-
-            </td>
-          </tr>
-          </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>
-        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
-      </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: 'ServiceCall',
-
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
-
-  data() {
-    return {
-      token: null,
-      user: null,
-      service_calls: [],
-      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) {
-      // we simulate an api call that fetch the records from a backend
-      this.service_calls = [];
-      this.get_service_call(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_service_call(page: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/service/all/' + page;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.service_calls = response.data
-      })
-    },
-    deleteCall(service_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/service/delete/' + service_id;
-      axios({
-        method: 'delete',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        if (response.data.ok) {
-          notify({
-            title: "Success",
-            text: "deleted service order",
-            type: "success",
-          });
-          this.getPage(this.page)
-        } else {
-          notify({
-            title: "Failure",
-            text: "error deleting service order",
-            type: "success",
-          });
-        }
-      })
-    },
-  },
-})
-</script>
-
-<style scoped></style>

src/pages/service/routes.ts

@@ -1,32 +0,0 @@
-
-
-import ServiceHome from '../service/home.vue';
-import ServiceCreate from '../service/create.vue';
-import ServiceEdit from '../service/edit.vue';
-import ServiceCall from '../service/view.vue';
-
-const serviceRoutes = [
-    {
-        path: '/service',
-        name: 'service',
-        component: ServiceHome,
-    },
-    {
-        path: '/service/:id',
-        name: 'serviceCall',
-        component: ServiceCall,
-    },
-    {
-        path: '/service/create/:id',
-        name: 'serviceCreate',
-        component: ServiceCreate,
-    },
-    {
-        path: '/service/edit/:id',
-        name: 'serviceEdit',
-        component: ServiceEdit,
-    },
-]
-
-export default serviceRoutes
-//sourceMappingURL=index.ts.map

src/pages/service/view.vue

@@ -1,423 +0,0 @@
-<template>
-  <Header/>
-
-  <div class="flex">
-    <div class="">
-      <SideBar/>
-    </div>
-    <div class=" w-full px-10">
-      <div class="text-sm breadcrumbs">
-        <ul>
-          <li>
-            <router-link :to="{ name: 'home' }">
-              Home
-            </router-link>
-          </li>
-          <li>
-            <router-link :to="{ name: 'service' }">
-              Service Home
-            </router-link>
-          </li>
-        </ul>
-      </div>
-
-      <div class="grid grid-cols-1 rounded-md  pb-5">
-        <div class="text-[24px]">
-          View Service Call # {{ serviceCall.id }}
-        </div>
-        <div class="grid grid-cols-12">
-          <div class="col-span-6">
-            <div class="col-span-12 font-bold">
-              Customer
-            </div>
-            <div class="col-span-6 bg-neutral p-5">
-              <div class="grid grid-cols-12">
-                <div class="col-span-12 font-bold flex">
-                  {{ serviceCall.customer_first_name }}
-                  {{ serviceCall.customer_last_name }}
-                </div>
-                <div class="col-span-12 font-bold flex">
-                  <div class="pr-2">
-                    {{ customer.customer_town }},
-                  </div>
-                  <div class="pr-2">
-                    <div v-if="customer.customer_state == 0">Massachusetts</div>
-                    <div v-else-if="customer.customer_state == 1">Rhode Island</div>
-                    <div v-else-if="customer.customer_state == 2">New Hampshire</div>
-                    <div v-else-if="customer.customer_state == 3">Maine</div>
-                    <div v-else-if="customer.customer_state == 4">Vermont</div>
-                    <div v-else-if="customer.customer_state == 5">Connecticut</div>
-                    <div v-else-if="customer.customer_state == 6">New York</div>
-                    <div v-else>Unknown state</div>
-                  </div>
-                  <div class="pr-2">
-                    {{ customer.customer_zip }}
-                  </div>
-                </div>
-
-                <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
-                  {{ customer.customer_apt }}
-                </div>
-                <div class="col-span-12 font-bold flex">
-                  <div v-if="customer.customer_home_type == 0">Residential</div>
-                  <div v-else-if="customer.customer_home_type == 1">apartment</div>
-                  <div v-else-if="customer.customer_home_type == 2">condo</div>
-                  <div v-else-if="customer.customer_home_type == 3">commercial</div>
-                  <div v-else-if="customer.customer_home_type == 4">business</div>
-                  <div v-else-if="customer.customer_home_type == 5">construction</div>
-                  <div v-else-if="customer.customer_home_type == 6">container</div>
-                </div>
-                <div class="col-span-12 font-bold flex">
-                  {{ customer.customer_phone_number }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-span-6 ">
-            <div class="flex justify-end" v-if="serviceCall.id ">
-              <router-link :to="{ name: 'serviceEdit', params: { id: serviceCall.id } }">
-                <button class="btn">Edit Service Call</button>
-              </router-link>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="col-span-6">
-        <div class="col-span-12 font-bold">
-          Service Status
-        </div>
-        <div class="grid grid-cols-12 bg-neutral   p-5">
-          <div class="col-span-12 font-bold">
-            Service Category
-
-          </div>
-          <div class="col-span-12">
-            <div v-if="serviceCall.service_type  == 0">General</div>
-            <div v-else-if="serviceCall.service_type == 1">Cleaning / Tuneup</div>
-            <div v-else-if="serviceCall.service_type == 2">No Heat</div>
-            <div v-else-if="serviceCall.service_type == 3">Install</div>
-            <div v-else-if="serviceCall.service_type == 4">Call Back</div>
-            <div v-else-if="serviceCall.service_type == 5">Quote</div>
-            <div v-else-if="serviceCall.service_type == 6">Emergency</div>
-            <div v-else></div>
-          </div>
-          <div class="col-span-12 font-bold mt-10">
-            Scheduled date/time
-          </div>
-          <div class="col-span-12 ">
-            {{ serviceCall.scheduled_date }}
-          </div>
-          <div class="col-span-12 font-bold mt-10">
-            Tech Name
-          </div>
-          <div class="col-span-12 ">
-            {{ serviceCall.tech_first_name }} {{ serviceCall.tech_last_name }}
-          </div>
-          <div class="col-span-12 font-bold mt-10">
-            When Called
-          </div>
-          <div class="col-span-12 ">
-            {{ serviceCall.when_called }}
-          </div>
-        </div>
-      </div>
-
-
-      <div class="col-span-6 mt-5">
-        <div class="col-span-12 font-bold">
-          Dispatcher Notes
-        </div>
-        <div class="grid grid-cols-12 bg-neutral   p-5">
-          <div class="col-span-12 font-bold">
-            Subject
-          </div>
-          <div class="col-span-12">
-            {{ serviceCallNotes.dispatcher_subject }}
-          </div>
-          <div class="col-span-12 font-bold mt-10">
-            Notes
-          </div>
-          <div class="col-span-12 ">
-            {{ serviceCallNotes.dispatcher_notes }}
-          </div>
-        </div>
-      </div>
-      <div class="col-span-6 mt-5">
-        <div class="col-span-12 font-bold">
-          Amount
-        </div>
-        <div class="grid grid-cols-12 bg-neutral   p-5">
-          <div class="col-span-12 font-bold">
-            <div v-if="serviceCall.customer_asked_for_fill==1">Fill</div>
-            <div v-else>{{ serviceCall.gallons_ordered }}</div>
-          </div>
-
-        </div>
-      </div>
-      <div class="col-span-6 mt-5">
-        <div class="col-span-12 font-bold">
-          Payment
-        </div>
-        <div class="grid grid-cols-12 bg-neutral   p-5">
-          <div class="col-span-12 font-bold">
-            <div v-if="serviceCall.payment_type==0">Cash</div>
-            <div v-else-if="serviceCall.payment_type==1">Credit Card</div>
-            <div v-else-if="serviceCall.payment_type==2">Credit Card & cash</div>
-            <div v-else>No Payment Type Added</div>
-          </div>
-          <div class="col-span-12" v-if="serviceCall.payment_type==1">
-            <div class="flex">
-              <div class="basis-1/3 p-2">
-                <div class="bg-neutral rounded-md border-2 ">
-                  <div class="flex p-3">
-                    {{ userCard.type_of_card }}
-                  </div>
-                  <div class="flex p-1 pl-4">
-                    {{ userCard.name_on_card }}
-                  </div>
-                  <div class="flex p-1 pl-4">
-                    ****-****-****-{{ userCard.last_four_digits }}
-                  </div>
-                  <div class="flex p-1 pl-4">
-                    {{ userCard.expiration_month }}/ {{ userCard.expiration_year }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-           <div class="col-span-12" v-if="serviceCall.payment_type==2">
-            <div class="flex">
-              <div class="basis-1/3 p-2">
-                <div class="bg-neutral rounded-md border-2 ">
-                  <div class="flex p-3">
-                    {{ userCard.type_of_card }}
-                  </div>
-                  <div class="flex p-1 pl-4">
-                    {{ userCard.name_on_card }}
-                  </div>
-                  <div class="flex p-1 pl-4">
-                    ****-****-****-{{ userCard.last_four_digits }}
-                  </div>
-                  <div class="flex p-1 pl-4">
-                    {{ userCard.expiration_month }}/ {{ userCard.expiration_year }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-         </div>
-          </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 SideBar from '../../layouts/sidebar/sidebar.vue'
-import Footer from '../../layouts/footers/footer.vue'
-import useValidate from "@vuelidate/core";
-import {notify} from "@kyvg/vue3-notification"
-import {minLength, required} from "@vuelidate/validators";
-
-
-export default defineComponent({
-  name: 'serviceCall',
-
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
-
-  data() {
-    return {
-      v$: useValidate(),
-      user: {
-        id: 0
-      },
-      serviceTech: [],
-      userCard: {
-        date_added: '',
-        user_id: '',
-        card_number: '',
-        last_four_digits: '',
-        name_on_card: '',
-        expiration_month: '',
-        expiration_year: '',
-        type_of_card: '',
-        security_number: '',
-        accepted_or_declined: '',
-        main_card: '',
-
-      },
-      customer: {
-        id: 0,
-        user_id: 0,
-        customer_first_name: '',
-        customer_last_name: '',
-        customer_town: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_home_type: 0,
-        customer_phone_number: '',
-      },
-      serviceCallNotes: {
-        service_call_id: '',
-        dispatcher_notes: '',
-        dispatcher_subject: '',
-        time_added: '',
-        dispatcher_id: '',
-        dispatcher_name: '',
-      },
-      serviceCall: {
-        id: 0,
-        customer_id: 0,
-        customer_last_name: '',
-        customer_first_name: '',
-        customer_town: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_address: '',
-        status: 0,
-        service_type: 0,
-        when_called: '',
-        scheduled_date: '',
-        scheduled_time: '',
-        when_serviced: '',
-        completed: 0,
-        tech_id: 0,
-        tech_first_name: '',
-        tech_last_name: '',
-        payment_type: 0,
-        payment_card_id: 0,
-      },
-
-    }
-  },
-  validations() {
-    return {
-      CreateServiceOrderForm: {
-        basicInfo: {
-          type_of_service: {required},
-          dispatcher_notes_taken: {required, minLength: minLength(10)},
-          dispatcher_subject_taken: {required, minLength: minLength(10)},
-          date_scheduled: {required},
-          service_tech_id: {required},
-        },
-      },
-    };
-  },
-  created() {
-    this.userStatus()
-  },
-  watch: {
-    $route() {
-      this.getServiceCall(this.$route.params.id);
-      this.getServiceCallNotes(this.$route.params.id);
-    },
-  },
-  mounted() {
-    this.getServiceCall(this.$route.params.id);
-    this.getServiceCallNotes(this.$route.params.id);
-  },
-
-  methods: {
-    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;
-              this.user.id = response.data.user_id;
-            }
-          })
-    },
-    getCustomer(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.customer = response.data;
-          })
-          .catch(() => {
-            notify({
-              title: "Error",
-              text: "Could not find customer",
-              type: "error",
-            });
-          });
-    },
-    getPaymentCard(card_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/payment/card/" + card_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
-          .then((response: any) => {
-            this.userCard = response.data;
-          })
-          .catch(() => {
-          });
-    },
-
-    getServiceCall(service_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/service/call/" + service_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data) {
-              this.serviceCall = response.data
-              this.getCustomer(this.serviceCall.customer_id)
-              if (this.serviceCall.payment_type != null) {
-                this.getPaymentCard(this.serviceCall.payment_card_id);
-              }
-            }
-          })
-    },
-
-    getServiceCallNotes(service_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/service/call/notes/" + service_id;
-      axios({
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-          .then((response: any) => {
-            if (response.data) {
-              this.serviceCallNotes = response.data
-
-            }
-          })
-    },
-  },
-})
-</script>
-
-<style scoped></style>

src/router/index.ts

@@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from "vue-router";
 
 import authRoutes from '../pages/auth/routes.ts';
 import oilRoutes from '../pages/delivery/routes.ts';
-import serviceRoutes from '../pages/service/routes.ts';
 import employeeRoutes from '../pages/employee/routes.ts';
 import payRoutes from '../pages/pay/routes.ts';
 import customerRoutes from '../pages/customer/routes.ts';
@@ -16,7 +15,6 @@ const routes = [
     ...cardRoutes,
     ...authRoutes,
     ...payRoutes,
-    ...serviceRoutes,
     ...employeeRoutes,
     ...customerRoutes,
     ...oilRoutes,

tailwind.config.js

@@ -3,20 +3,20 @@ module.exports = {
   presets: [],
   darkMode: 'class',
   daisyui: {
-  themes: ["business" ],
-    // themes: [{
-      // mytheme: {
-      //   "primary": "#0256bf",
-      //   "secondary": "#36363a",
-      //   "accent": "#7F00FF",
-      //   "neutral": "#2B2B36",
-      //   "base-100": "#252531",
-      //   "info": "#74a0d5",
-      //   "success": "#33cc33",
-      //   "warning": "#97520C",
-      //   "error": "#da0e0e",
-      // },
-    // }, ],
+    // themes: ["dracula" ],
+    themes: [{
+      mytheme: {
+        "primary": "#0256bf",
+        "secondary": "#1e1d24",
+        "accent": "#7F00FF",
+        "neutral": "#1e1d24",
+        "base-100": "#1e1d24",
+        "info": "#74a0d5",
+        "success": "#33cc33",
+        "warning": "#97520C",
+        "error": "#da0e0e",
+      },
+    },],
   },
   plugins: [require('daisyui')],
   theme: {
@@ -28,8 +28,8 @@ module.exports = {
       xxl: '1536px',
     },
     colors: ({
-               colors
-             }) => ({
+      colors
+    }) => ({
       inherit: colors.inherit,
       current: colors.current,
       transparent: colors.transparent,
@@ -136,35 +136,35 @@ module.exports = {
       video: '16 / 9',
     },
     backdropBlur: ({
-                     theme
-                   }) => theme('blur'),
+      theme
+    }) => theme('blur'),
     backdropBrightness: ({
-                           theme
-                         }) => theme('brightness'),
+      theme
+    }) => theme('brightness'),
     backdropContrast: ({
-                         theme
-                       }) => theme('contrast'),
+      theme
+    }) => theme('contrast'),
     backdropGrayscale: ({
-                          theme
-                        }) => theme('grayscale'),
+      theme
+    }) => theme('grayscale'),
     backdropHueRotate: ({
-                          theme
-                        }) => theme('hueRotate'),
+      theme
+    }) => theme('hueRotate'),
     backdropInvert: ({
-                       theme
-                     }) => theme('invert'),
+      theme
+    }) => theme('invert'),
     backdropOpacity: ({
-                        theme
-                      }) => theme('opacity'),
+      theme
+    }) => theme('opacity'),
     backdropSaturate: ({
-                         theme
-                       }) => theme('saturate'),
+      theme
+    }) => theme('saturate'),
     backdropSepia: ({
-                      theme
-                    }) => theme('sepia'),
+      theme
+    }) => theme('sepia'),
     backgroundColor: ({
-                        theme
-                      }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     backgroundImage: {
       none: 'none',
       'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
@@ -177,8 +177,8 @@ module.exports = {
       'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
     },
     backgroundOpacity: ({
-                          theme
-                        }) => theme('opacity'),
+      theme
+    }) => theme('opacity'),
     backgroundPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -220,14 +220,14 @@ module.exports = {
       200: '2',
     },
     borderColor: ({
-                    theme
-                  }) => ({
+      theme
+    }) => ({
       ...theme('colors'),
       DEFAULT: theme('colors.gray.200', 'currentColor'),
     }),
     borderOpacity: ({
-                      theme
-                    }) => theme('opacity'),
+      theme
+    }) => theme('opacity'),
     borderRadius: {
       none: '0px',
       sm: '0.125rem',
@@ -257,14 +257,14 @@ module.exports = {
       none: 'none',
     },
     boxShadowColor: ({
-                       theme
-                     }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     caretColor: ({
-                   theme
-                 }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     accentColor: ({
-                    theme
-                  }) => ({
+      theme
+    }) => ({
       ...theme('colors'),
       auto: 'auto',
     }),
@@ -320,14 +320,14 @@ module.exports = {
       'zoom-out': 'zoom-out',
     },
     divideColor: ({
-                    theme
-                  }) => theme('borderColor'),
+      theme
+    }) => theme('borderColor'),
     divideOpacity: ({
-                      theme
-                    }) => theme('borderOpacity'),
+      theme
+    }) => theme('borderOpacity'),
     divideWidth: ({
-                    theme
-                  }) => theme('borderWidth'),
+      theme
+    }) => theme('borderWidth'),
     dropShadow: {
       sm: '0 1px 1px rgb(0 0 0 / 0.05)',
       DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
@@ -338,8 +338,8 @@ module.exports = {
       none: '0 0 #0000',
     },
     fill: ({
-             theme
-           }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     grayscale: {
       0: '0',
       DEFAULT: '100%',
@@ -363,8 +363,8 @@ module.exports = {
       none: 'none',
     },
     flexBasis: ({
-                  theme
-                }) => ({
+      theme
+    }) => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',
@@ -485,11 +485,11 @@ module.exports = {
       black: '900',
     },
     gap: ({
-            theme
-          }) => theme('spacing'),
+      theme
+    }) => theme('spacing'),
     gradientColorStops: ({
-                           theme
-                         }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     gridAutoColumns: {
       auto: 'auto',
       min: 'min-content',
@@ -605,8 +605,8 @@ module.exports = {
       6: 'repeat(6, minmax(0, 1fr))',
     },
     height: ({
-               theme
-             }) => ({
+      theme
+    }) => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',
@@ -631,8 +631,8 @@ module.exports = {
       fit: 'fit-content',
     }),
     inset: ({
-              theme
-            }) => ({
+      theme
+    }) => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',
@@ -701,14 +701,14 @@ module.exports = {
       decimal: 'decimal',
     },
     margin: ({
-               theme
-             }) => ({
+      theme
+    }) => ({
       auto: 'auto',
       ...theme('spacing'),
     }),
     maxHeight: ({
-                  theme
-                }) => ({
+      theme
+    }) => ({
       ...theme('spacing'),
       full: '100%',
       screen: '100vh',
@@ -717,9 +717,9 @@ module.exports = {
       fit: 'fit-content',
     }),
     maxWidth: ({
-                 theme,
-                 breakpoints
-               }) => ({
+      theme,
+      breakpoints
+    }) => ({
       none: 'none',
       0: '0rem',
       xs: '20rem',
@@ -801,17 +801,17 @@ module.exports = {
       12: '12',
     },
     padding: ({
-                theme
-              }) => theme('spacing'),
+      theme
+    }) => theme('spacing'),
     placeholderColor: ({
-                         theme
-                       }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     placeholderOpacity: ({
-                           theme
-                         }) => theme('opacity'),
+      theme
+    }) => theme('opacity'),
     outlineColor: ({
-                     theme
-                   }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     outlineOffset: {
       0: '0px',
       1: '1px',
@@ -827,14 +827,14 @@ module.exports = {
       8: '8px',
     },
     ringColor: ({
-                  theme
-                }) => ({
+      theme
+    }) => ({
       DEFAULT: theme('colors.blue.500', '#3b82f6'),
       ...theme('colors'),
     }),
     ringOffsetColor: ({
-                        theme
-                      }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     ringOffsetWidth: {
       0: '0px',
       1: '1px',
@@ -843,8 +843,8 @@ module.exports = {
       8: '8px',
     },
     ringOpacity: ({
-                    theme
-                  }) => ({
+      theme
+    }) => ({
       DEFAULT: '0.5',
       ...theme('opacity'),
     }),
@@ -887,13 +887,13 @@ module.exports = {
       150: '1.5',
     },
     scrollMargin: ({
-                     theme
-                   }) => ({
+      theme
+    }) => ({
       ...theme('spacing'),
     }),
     scrollPadding: ({
-                      theme
-                    }) => theme('spacing'),
+      theme
+    }) => theme('spacing'),
     sepia: {
       0: '0',
       DEFAULT: '100%',
@@ -907,24 +907,24 @@ module.exports = {
       12: '12deg',
     },
     space: ({
-              theme
-            }) => ({
+      theme
+    }) => ({
       ...theme('spacing'),
     }),
     stroke: ({
-               theme
-             }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     strokeWidth: {
       0: '0',
       1: '1',
       2: '2',
     },
     textColor: ({
-                  theme
-                }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     textDecorationColor: ({
-                            theme
-                          }) => theme('colors'),
+      theme
+    }) => theme('colors'),
     textDecorationThickness: {
       auto: 'auto',
       'from-font': 'from-font',
@@ -943,13 +943,13 @@ module.exports = {
       8: '8px',
     },
     textIndent: ({
-                   theme
-                 }) => ({
+      theme
+    }) => ({
       ...theme('spacing'),
     }),
     textOpacity: ({
-                    theme
-                  }) => theme('opacity'),
+      theme
+    }) => theme('opacity'),
     transformOrigin: {
       center: 'center',
       top: 'top',
@@ -999,8 +999,8 @@ module.exports = {
       'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
     },
     translate: ({
-                  theme
-                }) => ({
+      theme
+    }) => ({
       ...theme('spacing'),
       '1/2': '50%',
       '1/3': '33.333333%',
@@ -1011,8 +1011,8 @@ module.exports = {
       full: '100%',
     }),
     width: ({
-              theme
-            }) => ({
+      theme
+    }) => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',