Working log in/route guard

src/layouts/sidebar/sidebar.vue

@@ -1,24 +1,15 @@
 <!-- sidebar.vue -->
 <template>
-  <!-- 
-    The sidebar is now just the menu. The layout logic lives in App.vue.
-    This is much cleaner and works correctly with the mobile hamburger button.
-  -->
-  <ul class="menu p-4 w-80 min-h-full bg-base-100 text-base-content">
-    <!-- Logo at the top of the sidebar for mobile view -->
-<li class="mb-4 lg:hidden">
-  <router-link :to="{ name: 'home' }">
-    <img src="../assets/images/1.png" alt="Company Logo" class="h-10 w-auto" />
-  </router-link>
-</li>
-    
-    <li>
-      <router-link :to="{ name: 'home' }" exact-active-class="active">
-        Home
+  <ul class="menu p-4 w-64 min-h-full bg-base-100 text-base-content">
+    <li class="mb-4 lg-hidden">
+      <router-link :to="{ name: 'home' }">
+        <img src="../../assets/images/1.png" alt="Company Logo" class="h-10 w-auto" />
       </router-link>
     </li>
+    
+    <li><router-link :to="{ name: 'home' }" exact-active-class="active">Home</router-link></li>
 
-    <!-- Customer Section - Open by default -->
+    <!-- Customer Section -->
     <li>
       <details open>
         <summary class="font-bold text-lg">Customer</summary>
@@ -28,7 +19,7 @@
       </details>
     </li>
 
-    <!-- Delivery Section - Open by default -->
+    <!-- Delivery Section -->
     <li>
       <details open>
         <summary class="font-bold text-lg">Delivery</summary>
@@ -37,26 +28,26 @@
           <li>
             <router-link :to="{ name: 'deliveryOutForDelivery' }" exact-active-class="active">
               Todays Deliveries
-              <span v-if="today_count > 0" class="badge badge-secondary">{{ today_count }}</span>
+              <span v-if="countsStore.today > 0" class="badge badge-secondary">{{ countsStore.today }}</span>
             </router-link>
           </li>
           <li>
             <router-link :to="{ name: 'deliveryTommorrow' }" exact-active-class="active">
               Tomorrows Deliveries
-              <span v-if="tommorrow_count > 0" class="badge badge-secondary">{{ tommorrow_count }}</span>
+              <span v-if="countsStore.tomorrow > 0" class="badge badge-secondary">{{ countsStore.tomorrow }}</span>
             </router-link>
           </li>
           <li>
             <router-link :to="{ name: 'deliveryWaiting' }" exact-active-class="active">
               Waiting Deliveries
-              <span v-if="waiting_count > 0" class="badge badge-info">{{ waiting_count }}</span>
+              <span v-if="countsStore.waiting > 0" class="badge badge-info">{{ countsStore.waiting }}</span>
             </router-link>
           </li>
           <li><router-link :to="{ name: 'deliveryIssue' }" exact-active-class="active">Issue Tickets</router-link></li>
           <li>
             <router-link :to="{ name: 'deliveryPending' }" exact-active-class="active">
               Pending Payment
-              <span v-if="pending_count > 0" class="badge badge-warning">{{ pending_count }}</span>
+              <span v-if="countsStore.pending > 0" class="badge badge-warning">{{ countsStore.pending }}</span>
             </router-link>
           </li>
           <li><router-link :to="{ name: 'deliveryFinalized' }" exact-active-class="active">Finalized Tickets</router-link></li>
@@ -64,7 +55,7 @@
       </details>
     </li>
 
-    <!-- Service Section - Open by default -->
+    <!-- Service Section -->
     <li>
       <details open>
         <summary class="font-bold text-lg">Service</summary>
@@ -73,7 +64,7 @@
           <li>
             <router-link :to="{ name: 'ServiceHome' }" exact-active-class="active">
               Upcoming Service
-              <span v-if="upcoming_service_count > 0" class="badge badge-info">{{ upcoming_service_count }}</span>
+              <span v-if="countsStore.upcoming_service > 0" class="badge badge-info">{{ countsStore.upcoming_service }}</span>
             </router-link>
           </li>
           <li><router-link :to="{ name: 'ServicePast' }" exact-active-class="active">Past Service</router-link></li>
@@ -81,7 +72,7 @@
       </details>
     </li>
 
-    <!-- Automatics Section - Now has its own header -->
+    <!-- Automatics Section -->
     <li>
       <details>
         <summary class="font-bold text-lg">Automatics</summary>
@@ -89,19 +80,18 @@
           <li>
             <router-link :to="{ name: 'auto' }" exact-active-class="active">
               All Automatics
-              <span v-if="automatic_count > 0" class="badge badge-info">{{ automatic_count }}</span>
+              <span v-if="countsStore.automatic > 0" class="badge badge-info">{{ countsStore.automatic }}</span>
             </router-link>
           </li>
         </ul>
       </details>
     </li>
-
-    <!-- Admin Section - Closed by default and contains Employees -->
+    
+    <!-- Admin Section remains the same -->
     <li>
       <details>
         <summary class="font-bold text-lg">Admin</summary>
         <ul>
-          <!-- Employees is now here -->
           <li><router-link :to="{ name: 'employee' }" exact-active-class="active">Employees</router-link></li>
           <li><router-link :to="{ name: 'oilprice' }" exact-active-class="active">Oil Pricing</router-link></li>
           <li><router-link :to="{ name: 'promo' }" exact-active-class="active">Promos</router-link></li>
@@ -112,132 +102,16 @@
   </ul>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import axios from 'axios';
-import authHeader from '../../services/auth.header';
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useCountsStore } from '../../stores/counts'; // Adjust path if needed
 
-export default defineComponent({
-  name: "SideBar",
-  mounted() {
-    this.getUpcomingServiceCount();
-    this.getTodayCount();
-    this.getTommorrowCount();
-    this.getWaitingCount();
-    this.getPendingCount();
-    this.getAutoCount();
-    this.updatestatus();
-    this.updateautos();
-    this.updatetemp();
-  },
-  data() {
-    return {
-      upcoming_service_count: 0,
-      waiting_count: 0,
-      today_count: 0,
-      tommorrow_count: 0,
-      pending_count: 0,
-      automatic_count: 0,
-    };
-  },
+// Get a reference to our new store
+const countsStore = useCountsStore();
 
-  methods: {
-    getUpcomingServiceCount() {
-      let path = import.meta.env.VITE_BASE_URL + '/service/upcoming/count';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.upcoming_service_count = response.data.count;
-      }).catch((error: any) => {
-        console.error("Failed to get upcoming service count:", error);
-        this.upcoming_service_count = 0;
-      });
-    },
-    updatestatus() {
-      let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        if (response.data.update)
-          console.log("Updated Status of Deliveries")
-      }).catch((error: any) => console.error("Update status failed:", error));
-    },
-    updatetemp() {
-      let path = import.meta.env.VITE_AUTO_URL + '/main/temp';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        if (response.data.ok)
-          console.log("Updated Temp")
-      }).catch((error: any) => console.error("Update temp failed:", error));
-    },
-    updateautos() {
-      let path = import.meta.env.VITE_AUTO_URL + '/main/update';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        if (response.data.ok)
-          console.log("Updated Autos")
-      }).catch((error: any) => console.error("Update autos failed:", error));
-    },
-    getAutoCount() {
-      let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/automatic';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.automatic_count = response.data.count
-      }).catch((error: any) => console.error("Get auto count failed:", error));
-    },
-    getTodayCount() {
-      let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/today';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.today_count = response.data.count
-      }).catch((error: any) => console.error("Get today count failed:", error));
-    },
-    getTommorrowCount() {
-      let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/tommorrow';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.tommorrow_count = response.data.count
-      }).catch((error: any) => console.error("Get tomorrow count failed:", error));
-    },
-    getPendingCount() {
-      let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/pending';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.pending_count = response.data.count
-      }).catch((error: any) => console.error("Get pending count failed:", error));
-    },
-    getWaitingCount() {
-      let path = import.meta.env.VITE_BASE_URL + '/deliverystatus/count/waiting';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.waiting_count = response.data.count
-      }).catch((error: any) => console.error("Get waiting count failed:", error));
-    },
-  },
+// When the sidebar is first mounted, fetch all the counts
+onMounted(() => {
+  countsStore.fetchSidebarCounts();
+  // You can remove your other update functions if their logic is now handled elsewhere
 });
 </script>