Updated looks

src/layouts/headers/headerauth.vue

@@ -1,23 +1,23 @@
 <template>
 
-  <div class="navbar bg-primary">
+  <div class="navbar bg-primary border-b border-bottom-500 border-gray-500">
     <div class="basis-1/4 md:basis-1/4">
       <router-link :to="{ name: 'home' }">
-        Auburn Oil
+      <div class="text-3xl"> {{ company.company_name }}</div> 
       </router-link>
     </div>
     <div class="basis-1/4 md:basis-1/2 justify-center text-center">
-      <input type="text" placeholder="Search " class="input input-bordered w-24 md:w-auto grow" v-model="searchTerm"/>
+      <input type="text" placeholder="Search " class="input input-bordered w-24 md:w-auto grow" v-model="searchTerm" />
     </div>
 
     <div class="basis-1/2 md:basis-1/4 justify-end gap-5">
       <router-link :to="{ name: 'customerCreate' }">
-        <button class="btn btn-accent">Create Customer</button>
+        <button class="btn btn-accent btn-sm">Create Customer</button>
       </router-link>
 
       <div v-if="employee.id">
         <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }">
-          <button class="btn btn-accent">{{ user.user_name }}</button>
+          <div class="">{{ user.user_name }}</div>
         </router-link>
       </div>
     </div>
@@ -26,15 +26,15 @@
   </div>
   <div class="grid grid-cols-12 ">
     <div class="grow col-start-4 col-span-6 ">
-      <SearchResults v-if="customers.length" :customers="customers"/>
+      <SearchResults v-if="customers.length" :customers="customers" />
     </div>
   </div>
 </template>
 
 
 <script lang="ts">
-import {debounce} from "vue-debounce";
-import {defineComponent} from "vue";
+import { debounce } from "vue-debounce";
+import { defineComponent } from "vue";
 import axios from "axios";
 import authHeader from "../../services/auth.header";
 import SearchResults from "./SearchResults.vue";
@@ -56,12 +56,14 @@ export default defineComponent({
         user_name: '',
       },
       company: {
-        company_dba_name: '',
-        company_llc_name: '',
-        company_town: '',
-        company_stat: 0,
-        company_zip: '0',
-
+        creation_date: "",
+        account_prefix: "",
+        company_name: "",
+        company_address: "",
+        company_town: "",
+        company_zip: "",
+        company_state: "",
+        company_phone_number: "",
       },
       employee: {
         id: '',
@@ -86,12 +88,16 @@ export default defineComponent({
     };
   },
   watch: {
-    searchTerm(this:any) {
+    searchTerm(this: any) {
       this.performSearch();
     },
   },
+  mounted() {
+    this.getCompany();
+
+  },
   methods: {
-    performSearch: debounce(async function (this:any) {
+    performSearch: debounce(async function (this: any) {
       if (this.searchTerm === "") {
         this.customers = [];
         return;
@@ -158,20 +164,20 @@ export default defineComponent({
         withCredentials: true,
         headers: authHeader(),
       })
-          .then((response: any) => {
-            if (response.data.ok) {
-              this.user = response.data.user;
-              this.employeeStatus()
-              this.loaded = true;
-            } else {
-              localStorage.removeItem('user');
-              this.$router.push('/login');
-            }
-          })
-          .catch(() => {
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+            this.employeeStatus()
             this.loaded = true;
+          } else {
+            localStorage.removeItem('user');
             this.$router.push('/login');
-          });
+          }
+        })
+        .catch(() => {
+          this.loaded = true;
+          this.$router.push('/login');
+        });
     },
     employeeStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id;
@@ -182,14 +188,16 @@ export default defineComponent({
         withCredentials: true,
         headers: authHeader(),
       })
-          .then((response: any) => {
-            this.employee = response.data;
-            this.loaded = true;
+        .then((response: any) => {
+          this.employee = response.data;
+          this.loaded = true;
 
-          })
+        })
     },
     getCompany() {
-      let path = import.meta.env.VITE_BASE_URL + '/admin/company/' + import.meta.env.COMPANY_ID;
+
+      let path = import.meta.env.VITE_BASE_URL + '/admin/company/' + import.meta.env.VITE_COMPANY_ID;
+
 
       axios({
         method: "get",
@@ -197,16 +205,14 @@ export default defineComponent({
         withCredentials: true,
         headers: authHeader(),
       })
-          .then((response: any) => {
-            this.company = response.data;
-          
+        .then((response: any) => {
+          this.company = response.data;
+   
 
-          })
+        })
     },
   },
 });
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/layouts/headers/headernoauth.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="navbar bg-base-100">
+  <div class="navbar bg-primary border-b border-bottom-500 border-gray-500">
     <div class="basis-1/4 md:basis-1/4">
       <router-link :to="{ name: 'home' }">
         Auburn Oil

src/layouts/sidebar/sidebar.vue

@@ -1,25 +1,25 @@
 <template>
 
-  <div class="drawer sm:drawer-open">
-    <input id="my-drawer-2" type="checkbox" class="drawer-toggle"/>
+  <div class="drawer sm:drawer-open bg-primary">
+    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
     <div class="drawer-content flex flex-col items-center justify-center ">
     </div>
 
     <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-100 text-base-content">
+      <ul class="menu p-4 w-80 min-h-full  text-base-content  bg-base-100  ">
 
         <!-- Sidebar content here -->
         <li>
-        <router-link :to="{ name: 'home' }">
-          <div class=" hover:underline py-1 px-5 font-bold">Home</div>
-        </router-link>
-         </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>
+        <div class="font-bold text-lg text-gray-500 pt-5 ">Customer</div>
+
+        <li class="text-white">
           <router-link :to="{ name: 'customer' }">
             <div class=" hover:underline py-1">All Customers</div>
           </router-link>
@@ -28,7 +28,7 @@
           </router-link>
         </li>
         <div class="font-bold text-lg text-gray-500 pt-5">Delivery</div>
-        <li>
+        <li class="text-white">
           <router-link :to="{ name: 'delivery' }">
             <div class=" hover:underline py-1">Home</div>
           </router-link>
@@ -41,7 +41,7 @@
           <router-link :to="{ name: 'deliveryWaiting' }">
             <div class=" hover:underline py-1">Waiting Deliverys</div>
           </router-link>
-          <router-link :to="{ name: 'deliveryDelivered'}">
+          <router-link :to="{ name: 'deliveryDelivered' }">
             <div class=" hover:underline py-1">Delivered Payment </div>
           </router-link>
           <router-link :to="{ name: 'deliveryIssue' }">
@@ -52,37 +52,32 @@
           </router-link>
         </li>
         <div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
-        <li>
+        <li class="text-white">
           <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>
+        <li class="text-white">
           <router-link :to="{ name: 'employee' }">
             <div class=" hover:underline py-1">Employees</div>
           </router-link>
         </li>
-
         <div class="font-bold text-lg text-gray-500 pt-5">Admin</div>
-        <li>
+        <li class="text-white">
           <router-link :to="{ name: 'oilprice' }">
             <div class=" hover:underline py-1">Oil Pricing</div>
           </router-link>
         </li>
-      
       </ul>
-
-
     </div>
   </div>
-
 </template>
 
 
 <script lang="ts">
 
-import {defineComponent} from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "SideBar",
@@ -96,6 +91,4 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>