Updated forms

src/layouts/sidebar/sidebar.vue

@@ -31,22 +31,38 @@
             <div class=" hover:underline py-1">Home</div>
           </router-link>
           <router-link :to="{ name: 'deliveryOutForDelivery' }">
-            <div class=" hover:underline py-1">Todays Deliveries</div>
+            <div class=" hover:underline py-1" v-if="today_count > 0">
+              <div class="flex gap-5">
+                <div class="">Todays Deliveries </div>
+                <div class="text-orange-600"> ({{ today_count }})</div>
+              </div>
+            </div>
+            <div class=" hover:underline py-1" v-else>Todays Deliveries </div>
           </router-link>
           <router-link :to="{ name: 'deliveryTommorrow' }">
-            <div class=" hover:underline py-1">Tommorrow Deliveries</div>
+            <div class=" hover:underline py-1" v-if="tommorrow_count > 0">
+              <div class="flex gap-5">
+                <div class="">Tommorrows Deliveries </div>
+                <div class="text-orange-600"> ({{ tommorrow_count }})</div>
+              </div>
+            </div>
+            <div class=" hover:underline py-1" v-else>Tommorrow Deliveries </div>
           </router-link>
           <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>
+            <div class=" hover:underline py-1" v-if="waiting_count > 0">
+              <div class="flex gap-5">
+                <div class="">Waiting Deliveries </div>
+                <div class="text-orange-600"> ({{ waiting_count }})</div>
+              </div>
+            </div>
+            <div class=" hover:underline py-1" v-else>Waiting Deliveries </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>
+            <div class=" hover:underline py-1">Finalized Tickets</div>
           </router-link>
         </li>
         <div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
@@ -82,16 +98,59 @@
 <script lang="ts">
 
 import { defineComponent } from "vue";
+import axios from 'axios';
+import authHeader from '../../services/auth.header'
 
 export default defineComponent({
   name: "SideBar",
   mounted() {
+    this.getTodayCount();
+    this.getTommorrowCount();
+    this.getWaitingCount();
   },
   data() {
-    return {};
+    return {
+      waiting_count: 0,
+      today_count: 0,
+      tommorrow_count: 0,
+    };
   },
 
-  methods: {},
+  methods: {
+    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
+
+      })
+    },
+    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
+
+      })
+    },
+    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
+
+      })
+    },
+  },
 });
 </script>