Working calender/service

src/layouts/sidebar/sidebar.vue

@@ -72,15 +72,23 @@
             <div class=" hover:underline py-1">Finalized Tickets</div>
           </router-link>
         </li>
-
+        
         <div class="font-bold text-lg text-gray-500 pt-5">Service</div>
         <li class="text-white">
+          <router-link :to="{ name: 'ServiceCalendar' }">
+            <div class=" hover:underline py-1">Service Calendar</div>
+          </router-link>
           <router-link :to="{ name: 'ServiceHome' }">
-            <div class=" hover:underline py-1">Service Home</div>
+            <div class=" hover:underline py-1" v-if="upcoming_service_count > 0">
+              <div class="flex gap-5">
+                <div class="">Services</div>
+                <div class="text-orange-600"> ({{ upcoming_service_count }})</div>
+              </div>
+            </div>
+            <div class=" hover:underline py-1" v-else>Services</div>
           </router-link>
         </li>
-
-
+        
         <div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
         <li class="text-white">
           <router-link :to="{ name: 'auto' }">
@@ -123,11 +131,12 @@
 
 import { defineComponent } from "vue";
 import axios from 'axios';
-import authHeader from '../../services/auth.header'
+import authHeader from '../../services/auth.header';
 
 export default defineComponent({
   name: "SideBar",
   mounted() {
+    this.getUpcomingServiceCount();
     this.getTodayCount();
     this.getTommorrowCount();
     this.getWaitingCount();
@@ -139,6 +148,7 @@ export default defineComponent({
   },
   data() {
     return {
+      upcoming_service_count: 0,
       waiting_count: 0,
       today_count: 0,
       tommorrow_count: 0,
@@ -148,6 +158,21 @@ export default defineComponent({
   },
 
   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;
+      // --- THIS IS THE FIX ---
+      // Explicitly type the 'error' parameter as 'any'
+      }).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({