eamco_office_frontend/src/layouts/sidebar/sidebar.vue

<!-- sidebar.vue -->
<template>
  <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 -->
    <li>
      <details open>
        <summary class="font-bold text-lg">Customer</summary>
        <ul>
          <li><router-link :to="{ name: 'customer' }" exact-active-class="active">All Customers</router-link></li>
        </ul>
      </details>
    </li>

    <!-- Delivery Section -->
    <li>
      <details open>
        <summary class="font-bold text-lg">Delivery</summary>
        <ul>
          <li><router-link :to="{ name: 'delivery' }" exact-active-class="active">Home</router-link></li>
          <li>
            <router-link :to="{ name: 'deliveryOutForDelivery' }" exact-active-class="active">
              Todays Deliveries
              <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="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="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="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>
        </ul>
      </details>
    </li>

    <!-- Service Section -->
    <li>
      <details open>
        <summary class="font-bold text-lg">Service</summary>
        <ul>
          <li><router-link :to="{ name: 'ServiceCalendar' }" exact-active-class="active">Service Calendar</router-link></li>
           <li>
            <router-link :to="{ name: 'ServiceToday' }" exact-active-class="active">
              Today's Service Calls
              <span v-if="countsStore.today_service > 0" class="badge badge-secondary">{{ countsStore.today_service }}</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'ServiceHome' }" exact-active-class="active">
              Upcoming Service
              <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>
          <li><router-link :to="{ name: 'ServicePlans' }" exact-active-class="active">Service Plans</router-link></li>
        </ul>
      </details>
    </li>

    <!-- Automatics Section -->
    <li>
      <details>
        <summary class="font-bold text-lg">Automatics</summary>
        <ul>
          <li>
            <router-link :to="{ name: 'auto' }" exact-active-class="active">
              All Automatics
              <span v-if="countsStore.automatic > 0" class="badge badge-info">{{ countsStore.automatic }}</span>
            </router-link>
          </li>
        </ul>
      </details>
    </li>
    
    <!-- Transactions Section -->
    <li>
      <details>
        <summary class="font-bold text-lg">Transactions</summary>
        <ul>
          <li>
            <router-link :to="{ name: 'transactionsAuthorize' }" exact-active-class="active">
              Authorize
              <span v-if="countsStore.transaction > 0" class="badge badge-secondary">{{ countsStore.transaction }}</span>
            </router-link>
          </li>
        </ul>
      </details>
    </li>

    <!-- Admin Section remains the same -->
    <li>
      <details>
        <summary class="font-bold text-lg">Admin</summary>
        <ul>
          <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>
          <li><router-link :to="{ name: 'MoneyYear' }" exact-active-class="active">Money</router-link></li>
        </ul>
      </details>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useCountsStore } from '../../stores/counts'; // Adjust path if needed

// Get a reference to our new store
const countsStore = useCountsStore();

// 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>