fixing eror

src/components/Sidebar.vue → src/components/Sidebar2.vue

@@ -16,53 +16,53 @@
     <div class="menu-inner-shadow"></div>
 
     <ul class="menu-inner py-1">
-      <li  class="menu-item" :class="{ active: $route.path === '/' }">
+      <li class="menu-item" :class="{ active: $route.path === '/' }">
         <router-link to="/" class="menu-link">
           <i class="menu-icon tf-icons bx bx-home-circle"></i>
           <div>Dashboard</div>
         </router-link>
       </li>
-      <li v-if="isAuthorized('dataMaster')" class="menu-item" :class="{ open: isDataMasterOpen }">
+      <li v-if="['HRD', 'CTO'].includes(auth.employee?.jabatan)" class="menu-item" :class="{ open: isDataMasterOpen }">
         <a class="menu-link menu-toggle" @click="toggleDropdown('dataMaster')">
           <i class="menu-icon tf-icons bx bx-cube-alt"></i>
           <div data-i18n="Data Master">Data Master</div>
         </a>
         <ul class="menu-sub" v-show="isDataMasterOpen">
-          <li v-if="isAuthorized('dataJabatan')" class="menu-item" :class="{ active: $route.path === '/master/data-jabatan' }">
+          <li class="menu-item" :class="{ active: $route.path === '/master/data-jabatan' }">
             <router-link to="/master/data-jabatan" class="menu-link">
               <div class="fw-bolder">Data Jabatan</div>
             </router-link>
           </li>
-          <li v-if="isAuthorized('dataKaryawan')" class="menu-item" :class="{ active: $route.path === '/master/data-karyawan' }">
+          <li class="menu-item" :class="{ active: $route.path === '/master/data-karyawan' }">
             <router-link to="/master/data-karyawan" class="menu-link">
               <div class="fw-bolder">Data Karyawan</div>
             </router-link>
           </li>
-          <li v-if="isAuthorized('dataProject')" class="menu-item" :class="{ active: $route.path === '/master/data-project' }">
+          <li class="menu-item" :class="{ active: $route.path === '/master/data-project' }">
             <router-link to="/master/data-project" class="menu-link">
               <div class="fw-bolder">Data Project</div>
             </router-link>
           </li>
-          <li v-if="isAuthorized('dataKeyResult')" class="menu-item" :class="{ active: $route.path === '/master/key-result' }">
+          <li v-if="auth.employee?.jabatan !== 'CTO'" class="menu-item" :class="{ active: $route.path === '/master/key-result' }">
             <router-link to="/master/key-result" class="menu-link">
               <div>Key Result</div>
             </router-link>
           </li>
         </ul>
       </li>
-      <li v-if="isAuthorized('presensi')" class="menu-item" :class="{ active: $route.path === '/absensi/absensi' }">
+      <li v-if="auth.employee?.jabatan !== 'CTO'" class="menu-item" :class="{ active: $route.path === '/absensi/absensi' }">
         <router-link to="/absensi/absensi" class="menu-link">
           <i class="menu-icon tf-icons bx bx-time"></i>
           <div class="fw-bolder">Presensi</div>
         </router-link>
       </li>
-      <li v-if="isAuthorized('dailyReport')" class="menu-item" :class="{ active: $route.path === '/absensi/daily-report' }">
+      <li v-if="auth.employee?.jabatan !== 'CTO'" class="menu-item" :class="{ active: $route.path === '/absensi/daily-report' }">
         <router-link to="/absensi/daily-report" class="menu-link">
           <i class="menu-icon tf-icons bx bxs-report"></i>
           <div class="fw-bolder">Daily Report</div>
         </router-link>
       </li>
-      <li v-if="isAuthorized('pengajuanLembur')" class="menu-item" :class="{ active: $route.path === '/ajuan/overtime' }">
+      <li v-if="auth.employee?.jabatan !== 'CTO'" class="menu-item" :class="{ active: $route.path === '/ajuan/overtime' }">
         <router-link to="/ajuan/overtime" class="menu-link">
           <i class="menu-icon tf-icons bx bxs-hourglass"></i>
           <div>Lembur</div>
@@ -74,41 +74,41 @@
           <div>Cuti</div>
         </router-link>
       </li>
-      <li v-if="isAuthorized('kelolaAbsensi')" class="menu-item" :class="{ open: isKelolaAbsensiOpen }">
+      <li v-if="['HRD', 'CTO', 'PM'].includes(auth.employee?.jabatan)" class="menu-item" :class="{ open: isKelolaAbsensiOpen }">
         <a class="menu-link menu-toggle" @click="toggleDropdown('dataAbsen')">
           <i class="menu-icon tf-icons bx bx-box"></i>
           <div data-i18n="Kelola Absensi">Kelola Absensi</div>
         </a>
         <ul class="menu-sub" v-show="isKelolaAbsensiOpen">
-          <li v-if="isAuthorized('readpresensi')" class="menu-item" :class="{ active: $route.path === '/kelola/absensi' }">
+          <li class="menu-item" :class="{ active: $route.path === '/kelola/absensi' }">
             <router-link to="/kelola/absensi" class="menu-link">
               <div class="fw-bolder">Absensi Karyawan</div>
             </router-link>
           </li>
-          <li v-if="isAuthorized('readdailyReport')" class="menu-item" :class="{ active: $route.path === '/report/daily-report' }">
+          <li class="menu-item" :class="{ active: $route.path === '/report/daily-report' }">
             <router-link to="/report/daily-report" class="menu-link">
               <div class="fw-bolder">Report Karyawan</div>
             </router-link>
           </li>
-          <li v-if="isAuthorized('lembur')" class="menu-item" :class="{ active: $route.path === '/kelola/overtime' }">
+          <li class="menu-item" :class="{ active: $route.path === '/kelola/overtime' }">
             <router-link to="/kelola/overtime" class="menu-link">
               <div>Review Lembur</div>
             </router-link>
           </li>
-          <li v-if="isAuthorized('cuti')" class="menu-item" :class="{ active: $route.path === '/kelola/time-off' }">
+          <li class="menu-item" :class="{ active: $route.path === '/kelola/time-off' }">
             <router-link to="/kelola/time-off" class="menu-link">
               <div>Ajuan Cuti</div>
             </router-link>
           </li>
         </ul>
       </li>
-      <li v-if="isAuthorized('okr')" class="menu-item" :class="{ active: $route.path === '/report/okr' }">
+      <li v-if="['HRD', 'PM', 'CTO'].includes(auth.employee?.jabatan)" class="menu-item" :class="{ active: $route.path === '/report/okr' }">
         <router-link to="/report/okr" class="menu-link">
           <i class="menu-icon tf-icons bx bx-collection"></i>
           <div>Review OKR</div>
         </router-link>
       </li>
-      <li v-if="isAuthorized('meeting')" class="menu-item" :class="{ active: $route.path === '/meeting/meeting' }">
+      <li v-if="['HRD', 'PM'].includes(auth.employee?.jabatan)" class="menu-item" :class="{ active: $route.path === '/meeting/meeting' }">
         <router-link to="/meeting/meeting" class="menu-link">
           <i class="menu-icon tf-icons bx bx-calendar-event"></i>
           <div>Meeting</div>
@@ -118,61 +118,26 @@
   </aside>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { useAuthStore } from '@/stores/api/authStore';
 
-export default defineComponent({
-  data() {
-    return {
-      isDataMasterOpen: false,
-      isKelolaAbsensiOpen: false,
-    };
-  },
-  methods: {
-    toggleDropdown(menu: string) {
-      if (menu === 'dataMaster') {
-        this.isDataMasterOpen = !this.isDataMasterOpen;
-      }
-      if (menu === 'dataAbsen') {
-        this.isKelolaAbsensiOpen = !this.isKelolaAbsensiOpen;
-      }
-    },
-    toggleMenu() {
-      // Logic to toggle the entire sidebar menu (e.g., for mobile view)
-    },
-    isAuthorized(menu: string): boolean {
-      const authStore = useAuthStore();
-      const employeeJabatan = authStore.employee?.jabatan ?? '';
+const auth = useAuthStore();
+const isDataMasterOpen = ref(false);
+const isKelolaAbsensiOpen = ref(false);
 
-      // Define the allowed roles for each menu item
-      const rolePermissions: { [key: string]: string[] } = {
-        // dashboard: ['HRD', 'PM', 'CTO'],
-        dataMaster: ['HRD', 'CTO'],
-        dataJabatan: ['HRD','CTO'],
-        dataProject: ['HRD', 'CTO'],
-        dataKaryawan: ['HRD', 'CTO'],
-        dataKeyResult: ['HRD'],
-        presensi: [ 'HRD', 'PM','Frontend','Backend', 'UI/UX'],
-        dailyReport: [ 'HRD', 'Frontend', 'Backend', 'UI/UX'],
-        pengajuanLembur: ['HRD', 'UIUX', 'Frontend', 'PM'],
-        presensi: ['UIUX', 'HRD', 'PM','Frontend'],
-        dailyReport: ['UIUX', 'HRD', 'Frontend'],
+function toggleDropdown(menu: string) {
+  if (menu === 'dataMaster') {
+    isDataMasterOpen.value = !isDataMasterOpen.value;
+  }
+  if (menu === 'dataAbsen') {
+    isKelolaAbsensiOpen.value = !isKelolaAbsensiOpen.value;
+  }
+}
 
-        readpresensi: ['HRD', 'PM', 'CTO'],
-        readdailyReport: ['HRD', 'PM', 'CTO'],
-        lembur: ['HRD', 'CTO','PM'],
-        cuti: ['HRD', 'CTO', 'PM'],
-        kelolaAbsensi: ['HRD', 'CTO', 'PM'],
-        okr: ['HRD', 'PM', 'CTO'],
-        meeting: ['HRD', 'PM'],
-      };
-
-      const allowedRoles = rolePermissions[menu];
-      return allowedRoles ? allowedRoles.includes(employeeJabatan) : false;
-    },
-  },
-});
+function toggleMenu() {
+  // Logic to toggle the entire sidebar menu (e.g., for mobile view)
+}
 </script>
 
 <style scoped></style>

src/layouts/default.vue

 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import Navbar from '../components/Navbar.vue';
-import Sidebar from '../components/Sidebar.vue';
+import Sidebar from '../components/Sidebar2.vue';
 import Footer from '../components/Footer.vue';
 </script>
 

src/pages/ajuan/time-off.vue

@@ -346,8 +346,7 @@ const isImage = (url: string) => {
                 <select id="type" class="form-select" v-model="formItem.type">
                   <option value="">Pilih Tipe Cuti</option>
                   <option value="tahunan">Cuti Tahunan</option>
-                  <option value="menikah">Cuti Menikah</option>
-                  <option value="melahirkan">Cuti Melahirkan</option>
+                  <option value="khusus">Cuti Khusus (Melahirkan, Menikah)</option>
                 </select>
                 <div class="d-block text-danger" v-if="formErrors.type">{{ formErrors.type }}</div>
               </div>

src/pages/report/okr.vue

@@ -210,6 +210,11 @@ const deleteData = async () => {
 const handleExportToExcel = async () => {
   await apiAssessmentStore.exportToExcel();
 };
+
+const id_jabatan = [1, 2, 4];
+const filteredEmployees = computed(() => {
+  return selectedEmployee.value.filter((employee: { detail: { id_jabatan: number; }; }) => !id_jabatan.includes(employee.detail.id_jabatan));
+});
 </script>
 
 <template>
@@ -379,7 +384,7 @@ const handleExportToExcel = async () => {
               <label for="employee" class="form-label">Karyawan</label>
               <select v-model="formItem.id_employee" id="employee" class="form-select">
                 <option value="0" disabled>Pilih Karyawan</option>
-                <option v-for="employee in selectedEmployee" :key="employee.value" :value="employee.value">
+                <option v-for="employee in filteredEmployees" :key="employee.value" :value="employee.value">
                   {{ employee.label }}
                 </option>
               </select>