Fixed error with numbers sidebaar not updating

src/layouts/headers/headerauth.vue

@@ -102,7 +102,9 @@ export default defineComponent({
   created() {
     this.userStatus();
   },
-
+  mounted() {
+    this.updatestatus();
+  },
   methods: {
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
@@ -122,9 +124,18 @@ export default defineComponent({
             this.$router.push('/login');
           }
         })
-
     },
-
+    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")
+      })
+    },
     logout() {
       console.log("Logging out...");
       // Clear auth data

src/pages/Index.vue

@@ -55,7 +55,7 @@
           </div>
         </div>
 
-        <!-- Card 2: Today's Oil Price -->
+        <!-- Card 3: Today's Oil Price -->
         <div class="bg-neutral rounded-lg p-5">
           <h3 class="text-xl font-bold mb-4">Service Price</h3>
           <div class="space-y-2">
@@ -67,14 +67,13 @@
               <span>Price / Emergency:</span>
               <span class="font-mono">$200</span>
             </div>
-           
           </div>
         </div>
 
       
         
         <!-- Card 4: This Week's Stats -->
-        <div class="bg-neutral rounded-lg p-5 xl:col-span-4">
+        <!-- <div class="bg-neutral rounded-lg p-5 xl:col-span-4">
           <h3 class="text-xl font-bold mb-4">This Week's Stats</h3>
           <div class="stats stats-vertical lg:stats-horizontal shadow bg-base-100 w-full">
             <div class="stat">
@@ -93,7 +92,7 @@
               <div class="stat-desc">Estimated earnings</div>
             </div>
           </div>
-        </div>
+        </div> -->
 
       </div>
     </div>

src/pages/delivery/home.vue

@@ -63,10 +63,10 @@
                     'badge-error': [3, 5].includes(oil.delivery_status),
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
-                    <span v-else-if="oil.delivery_status == 1">Delivered</span>
+                    <span v-else-if="oil.delivery_status == 1">Cancelled</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Today</span>
-                    <span v-else-if="oil.delivery_status == 3">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 3">Tomorrow_Delivery</span>
-                    <span v-else-if="oil.delivery_status == 4">Partial Delivery</span>
+                    <span v-else-if="oil.delivery_status == 4">Partial_Delivery</span>
                     <span v-else-if="oil.delivery_status == 5">Issue</span>
                     <span v-else-if="oil.delivery_status == 10">Finalized</span>
                   </span>
@@ -124,8 +124,8 @@
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
                     <span v-else-if="oil.delivery_status == 1">Delivered</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Today_Delivery</span>
-                    <span v-else-if="oil.delivery_status == 3">Cancelled</span>
+                    <span v-else-if="oil.delivery_status == 3">Tommorrow_Delivery</span>
                     <span v-else-if="oil.delivery_status == 4">Partial Delivery</span>
                     <span v-else-if="oil.delivery_status == 5">Issue</span>
                     <span v-else-if="oil.delivery_status == 10">Finalized</span>

src/pages/delivery/update_tickets/finalize_ticket.vue

@@ -85,8 +85,8 @@
                 <div class="col-span-12 text-gray-500">
                   <div v-if="deliveryOrder.delivery_status == 0">waiting</div>
                   <div v-else-if="deliveryOrder.delivery_status == 1">delivered</div>
-                  <div v-else-if="deliveryOrder.delivery_status == 2">Out for Delivery</div>
+                  <div v-else-if="deliveryOrder.delivery_status == 2">Today</div>
-                  <div v-else-if="deliveryOrder.delivery_status == 3">Cancelled</div>
+                  <div v-else-if="deliveryOrder.delivery_status == 3">Tommorrow </div>
                   <div v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</div>
                   <div v-else-if="deliveryOrder.delivery_status == 5">misdelivery</div>
                   <div v-else-if="deliveryOrder.delivery_status == 6">unknown</div>

src/pages/delivery/update_tickets/missing_data_home.vue

@@ -40,7 +40,7 @@
             <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'] == 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>

src/pages/delivery/view.vue

@@ -74,7 +74,7 @@
                    }">
                 <span v-if="deliveryOrder.delivery_status == 0">Waiting</span>
                 <span v-else-if="deliveryOrder.delivery_status == 1">Delivered</span>
-                <span v-else-if="deliveryOrder.delivery_status == 2">Out for Delivery</span>
+                <span v-else-if="deliveryOrder.delivery_status == 2">Out_for_Delivery</span>
                 <span v-else-if="deliveryOrder.delivery_status == 3">Tomorrow</span>
                 <span v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</span>
                 <span v-else-if="deliveryOrder.delivery_status == 5">Misdelivery</span>

src/pages/delivery/viewstatus/pending.vue

@@ -50,7 +50,7 @@
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
                     <span v-else-if="oil.delivery_status == 1">Cancelled</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Out_for_Delivery</span>
                     <span v-else-if="oil.delivery_status == 10">Finalized</span>
                     <span v-else>N/A</span>
                   </span>
@@ -107,7 +107,7 @@
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
                     <span v-else-if="oil.delivery_status == 1">Cancelled</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Out_for_Delivery</span>
                     <span v-else-if="oil.delivery_status == 10">Finalized</span>
                     <span v-else>N/A</span>
                 </div>

src/pages/delivery/viewstatus/todaysdeliveries.vue

@@ -56,7 +56,7 @@
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
                     <span v-else-if="oil.delivery_status == 1">Cancelled</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Out_for_Delivery</span>
                     <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
                     <span v-else-if="oil.delivery_status == 4">Partial</span>
                     <span v-else-if="oil.delivery_status == 5">Issue</span>
@@ -115,7 +115,7 @@
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
                     <span v-else-if="oil.delivery_status == 1">Cancelled</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Out_for_Delivery</span>
                     <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
                     <span v-else-if="oil.delivery_status == 4">Partial</span>
                     <span v-else-if="oil.delivery_status == 5">Issue</span>

src/pages/delivery/viewstatus/tommorrow.vue

@@ -49,7 +49,7 @@
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
                     <span v-else-if="oil.delivery_status == 1">Cancelled</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Out_for_Delivery</span>
                     <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
                     <span v-else-if="oil.delivery_status == 4">Partial</span>
                     <span v-else-if="oil.delivery_status == 5">Issue</span>
@@ -100,7 +100,7 @@
                   }">
                     <span v-if="oil.delivery_status == 0">Waiting</span>
                     <span v-else-if="oil.delivery_status == 1">Cancelled</span>
-                    <span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
+                    <span v-else-if="oil.delivery_status == 2">Out_for_Delivery</span>
                     <span v-else-if="oil.delivery_status == 3">Tomorrow</span>
                     <span v-else-if="oil.delivery_status == 4">Partial</span>
                     <span v-else-if="oil.delivery_status == 5">Issue</span>

src/pages/pay/pay_oil.vue

@@ -53,7 +53,7 @@
                 <div class="badge" :class="{ 'badge-info': delivery.delivery_status === 0, 'badge-success': delivery.delivery_status === 1, 'badge-warning': delivery.delivery_status > 1 }">
                   <span v-if="delivery.delivery_status == 0">Waiting</span>
                   <span v-else-if="delivery.delivery_status == 1">Delivered</span>
-                  <span v-else-if="delivery.delivery_status == 2">Out for Delivery</span>
+                  <span v-else-if="delivery.delivery_status == 2">Out_for_Delivery</span>
                   <span v-else-if="delivery.delivery_status == 3">Cancelled</span>
                   <span v-else-if="delivery.delivery_status == 4">Partial Delivery</span>
                   <span v-else-if="delivery.delivery_status == 5">Issue</span>
@@ -298,10 +298,22 @@ export default defineComponent({
     this.getOilOrder(this.$route.params.id)
     this.sumdelivery(this.$route.params.id);
     this.getOilPricing()
+    this.updatestatus();
 
   },
 
   methods: {
+        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")
+      })
+    },
     sumdelivery(delivery_id: any) {
       let path = import.meta.env.VITE_BASE_URL + "/delivery/total/" + delivery_id;
       axios({

src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
 
-
 // Import your route modules
 import authRoutes from '../pages/auth/routes.ts';
 import oilRoutes from '../pages/delivery/routes.ts';
@@ -18,9 +17,11 @@ import serviceRoutes from "../pages/service/routes.ts";
 import Home from '../pages/Index.vue';
 import Error404 from '../pages/error/Error404.vue';
 
-// Import the Pinia Auth Store
+// Import the Pinia Stores
 import { useAuthStore } from '../stores/auth.ts';
+import { useCountsStore } from '../stores/counts.ts';
 
+// Your protectRoutes function and routes array remain the same...
 const protectRoutes = (routes: any[]) => {
   return routes.map(route => {
     route.meta = { ...route.meta, requiresAuth: true };
@@ -32,7 +33,7 @@ const protectRoutes = (routes: any[]) => {
 };
 
 const routes = [
-    // Auth routes are public and don't get protected
+    // ... routes are unchanged
     ...authRoutes,
     ...protectRoutes(moneyRoutes),
     ...protectRoutes(cardRoutes),
@@ -45,17 +46,6 @@ const routes = [
     ...protectRoutes(tickerRoutes),
     ...protectRoutes(serviceRoutes),
 
-
-    // ...(moneyRoutes),
-    // ...(cardRoutes),
-    // ...(payRoutes),
-    // ...(employeeRoutes),
-    // ...(customerRoutes),
-    // ...(oilRoutes),
-    // ...(autoRoutes),
-    // ...(adminRoutes),
-    // ...(tickerRoutes),
-    // ...(serviceRoutes),
     {
         path: '/',
         name: 'home',
@@ -68,18 +58,18 @@ const routes = [
         component: Error404,
         meta: { requiresAuth: false }
     },
-]
+];
 
 const router = createRouter({
     history: createWebHistory(),
     routes,
 })
 
-// --- THE NAVIGATION GUARD ---
+// Your beforeEach guard remains the same...
 // @ts-ignore
-router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
+router.beforeEach(async (to, from, next) => {
   const authStore = useAuthStore();
-  const isAuthenticated = await authStore.checkAuthStatus();
+  const isAuthenticated = await authStore.checkAuthStatus(); 
   const requiresAuth = to.meta.requiresAuth;
 
   if (requiresAuth && !isAuthenticated) {
@@ -91,4 +81,17 @@ router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormali
   }
 });
 
+// --- DATA FETCHING GUARD (runs AFTER navigation is confirmed) ---
+// THIS IS THE CORRECTED BLOCK
+router.afterEach((_to: any, _from: any) => {
+  // We add types and prefix with `_` to signal they are unused.
+  const countsStore = useCountsStore();
+  const authStore = useAuthStore();
+  
+  if (authStore.isAuthenticated) {
+      console.log('Navigation complete, fetching sidebar counts...');
+      countsStore.fetchSidebarCounts();
+  }
+});
+
 export default router;