feat(FE) : json role

components/layout/full/vertical-header/ProfileDD.vue

@@ -10,7 +10,6 @@ const auth = useAuth();
 // Load user data on mount
 onMounted(async () => {
   if (!auth.user.value) {
-    console.log('ProfileDD: Loading user data...');
     await auth.checkAuth();
   }
 });
@@ -113,7 +112,7 @@ const sessionInfo = computed(() => ({
           :loading="auth.isLoading.value"
           :disabled="auth.isLoading.value"
         >
-          Logout
+          Keluar
         </v-btn>
       </div>
     </v-sheet>

components/layout/full/vertical-sidebar/VerticalSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, shallowRef } from "vue";
+import { ref, shallowRef, onMounted, computed } from "vue";
 import { useCustomizerStore } from "~/store/customizer";
 import sidebarItems from "./sidebarItem";
 import Logo from "../logo/Logo.vue";
@@ -7,8 +7,57 @@ import { Icon } from "@iconify/vue";
 import { useRoute } from "vue-router";
 // MiniSidebar Icons
 import MiniSideIcons from "./MinIconItems";
+import { useHakAkses } from "~/composables/useHakAkses";
 
 const route = useRoute();
+const { getAllowedPages } = useHakAkses();
+
+const allowedPages = ref<string[]>([]);
+const isLoadingAccess = ref(true);
+
+// Fetch allowed pages on mount
+onMounted(async () => {
+  try {
+    allowedPages.value = await getAllowedPages();
+    console.log('Allowed pages for user:', allowedPages.value);
+  } catch (error) {
+    console.error('Error loading allowed pages:', error);
+  } finally {
+    isLoadingAccess.value = false;
+  }
+});
+
+// Filter sidebar items based on user's allowed pages
+const filteredSidebarItems = computed(() => {
+  if (isLoadingAccess.value) {
+    return [];
+  }
+  
+  // If no allowed pages, return empty (no access)
+  if (allowedPages.value.length === 0) {
+    return [];
+  }
+  
+  return sidebarItems.map(section => {
+    // Filter children based on allowed pages
+    const filteredChildren = section.children?.filter(child => {
+      if (child.to) {
+        return allowedPages.value.includes(child.to);
+      }
+      return false;
+    });
+    
+    // Only include section if it has visible children
+    if (filteredChildren && filteredChildren.length > 0) {
+      return {
+        ...section,
+        children: filteredChildren
+      };
+    }
+    
+    return null;
+  }).filter(item => item !== null);
+});
 
 const findTitleByPath = (items: any, path: any) => {
   let title = "";

components/pendaftaran/ModalDetailPendaftaran.vue

@@ -93,9 +93,9 @@ const getGenderText = (gender: string) => {
 
 const getStatusColor = (status: string) => {
     switch (status) {
-        case STATUS.BELUM: return 'warning';
+        case STATUS.BELUM: return 'primary';
         case STATUS.SELESAI: return 'success';
-        case STATUS.TUNDA: return 'info';
+        case STATUS.TUNDA: return 'warning';
         case STATUS.BATAL: return 'error';
         default: return 'grey';
     }
@@ -638,7 +638,7 @@ const closeModal = () => {
                 </LoadingState>
             </v-card-text>
             
-            <v-card-actions class="pa-4 justify-end bg-grey-lighten-4">
+            <!-- <v-card-actions class="pa-4 justify-end bg-grey-lighten-4">
                 <v-btn 
                     color="primary" 
                     size="large" 
@@ -648,7 +648,7 @@ const closeModal = () => {
                 >
                     Tutup
                 </v-btn>
-            </v-card-actions>
+            </v-card-actions> -->
         </v-card>
     </v-dialog>
 </template>

components/pendaftaran/ModalUpdateStatus.vue

@@ -105,7 +105,7 @@ const handleSubmit = async () => {
     try {
         const response = await updateStatusAntrianOperasi(props.id, {
             statusOperasi: formData.value.statusOperasi,
-            tanggalSelesai: formData.value.tanggalSelesai || null,
+            tanggalSelesai: formData.value.tanggalSelesai ? new Date(formData.value.tanggalSelesai).toISOString() : null,
             keteranganStatus: formData.value.keteranganStatus || null
         });
         
@@ -114,11 +114,11 @@ const handleSubmit = async () => {
             emit('success');
             dialog.value = false;
         } else {
-            showSnackbar(response.message || 'Gagal mengupdate status antrian', 'error');
+            showSnackbar( 'Gagal mengupdate status antrian', 'error');
         }
     } catch (error: any) {
         console.error('Error updating status:', error);
-        showSnackbar(error.response?.data?.message || 'Gagal mengupdate status antrian', 'error');
+        showSnackbar('Gagal mengupdate status antrian', 'error');
     } finally {
         loadingSubmit.value = false;
     }
@@ -378,6 +378,7 @@ watch(() => props.modelValue, (isOpen) => {
                     @click="dialog = false"
                     :disabled="loadingSubmit"
                     size="large"
+                    prepend-icon="mdi-close"
                 >
                     Batal
                 </v-btn>
@@ -388,8 +389,8 @@ watch(() => props.modelValue, (isOpen) => {
                     :disabled="loading || !isFormValid"
                     variant="flat"
                     size="large"
+                    prepend-icon="mdi-content-save"
                 >
-                    <Icon icon="solar:check-circle-bold" height="20" class="mr-2" />
                     Simpan
                 </v-btn>
             </v-card-actions>

components/pendaftaran/TableAntrian.vue

@@ -10,6 +10,7 @@ interface Props {
     itemsPerPage?: number;
     minWidth?: string;
     actions?: Action[];
+    getActions?: (item: any) => Action[];
     serverSide?: boolean;
     loading?: boolean;
     totalItems?: number;
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     itemsPerPage: 10,
     minWidth: '1200px',
     actions: () => [],
+    getActions: undefined,
     serverSide: false,
     loading: false,
     totalItems: 0,
@@ -152,11 +154,11 @@ watch(itemsPerPageLocal, (newVal) => {
                 </template>
 
                 <!-- Action slot if enabled -->
-                <template v-if="actions && actions.length > 0" #item.actions="{ item }">
+                <template v-if="(actions && actions.length > 0) || getActions" #item.actions="{ item }">
                     <slot name="item.actions" :item="item">
                         <div class="d-flex ga-2">
                             <v-btn
-                                v-for="(action, index) in actions"
+                                v-for="(action, index) in (getActions ? getActions(item) : actions)"
                                 :key="index"
                                 icon
                                 size="small"