diff --git a/components/layout/full/vertical-header/ProfileDD.vue b/components/layout/full/vertical-header/ProfileDD.vue
index dcc4369..f19e6ac 100644
--- a/components/layout/full/vertical-header/ProfileDD.vue
+++ b/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>
diff --git a/components/layout/full/vertical-sidebar/VerticalSidebar.vue b/components/layout/full/vertical-sidebar/VerticalSidebar.vue
index 4a11733..d98c378 100644
--- a/components/layout/full/vertical-sidebar/VerticalSidebar.vue
+++ b/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 = "";
diff --git a/components/pendaftaran/ModalDetailPendaftaran.vue b/components/pendaftaran/ModalDetailPendaftaran.vue
index 8789cbb..a0d9569 100644
--- a/components/pendaftaran/ModalDetailPendaftaran.vue
+++ b/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>
diff --git a/components/pendaftaran/ModalUpdateStatus.vue b/components/pendaftaran/ModalUpdateStatus.vue
index 4aded1b..87a9ebb 100644
--- a/components/pendaftaran/ModalUpdateStatus.vue
+++ b/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>
diff --git a/components/pendaftaran/TableAntrian.vue b/components/pendaftaran/TableAntrian.vue
index 027bf83..b3f3200 100644
--- a/components/pendaftaran/TableAntrian.vue
+++ b/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"
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
index 01ea155..c92eb95 100644
--- a/composables/useAuth.ts
+++ b/composables/useAuth.ts
@@ -27,6 +27,20 @@ export const useAuth = () => {
       if (response && response.user) {
         user.value = response.user
         accessToken.value = response.accessToken || null
+        
+        // Store tokens to localStorage for API interceptor (only on client-side)
+        if (process.client) {
+          if (response.idToken) {
+            localStorage.setItem('idToken', response.idToken)
+          }
+          if (response.accessToken) {
+            localStorage.setItem('accessToken', response.accessToken)
+          }
+          if (response.refreshToken) {
+            localStorage.setItem('refreshToken', response.refreshToken)
+          }
+        }
+        
         return response.user
       }
       
@@ -44,6 +58,14 @@ export const useAuth = () => {
       }
       user.value = null
       accessToken.value = null
+      
+      // Clear tokens from localStorage on auth failure
+      if (process.client) {
+        localStorage.removeItem('idToken')
+        localStorage.removeItem('accessToken')
+        localStorage.removeItem('refreshToken')
+      }
+      
       return null
     } finally {
       isLoading.value = false
@@ -87,6 +109,11 @@ export const useAuth = () => {
       accessToken.value = null
       
       if (response?.success && response?.logoutUrl) {
+        //remove all tokens from localstorage
+        localStorage.removeItem('idToken');
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+
         console.log('🔗 Redirecting to Keycloak logout...')
         // Keycloak will redirect back to the base URL after logout
         // We can add a query param to detect the logout and show a message
diff --git a/composables/useHakAkses.ts b/composables/useHakAkses.ts
new file mode 100644
index 0000000..09b6990
--- /dev/null
+++ b/composables/useHakAkses.ts
@@ -0,0 +1,81 @@
+// composables/useHakAkses.ts
+// Composable for handling user permissions/access based on hakAkses
+import { useAuth } from "~/composables/useAuth";
+
+export const useHakAkses = () => {
+    const {user, checkAuth} = useAuth();
+    
+    /**
+     * Get all pages that user has access to based on their roles
+     */
+    const getAllowedPages = async (): Promise<string[]> => {
+        // Pastikan user sudah ter-load dari cookie/session
+        // Jika user.value masih null, panggil checkAuth() untuk load dari API session
+        if (!user.value) {
+            console.log('🔄 User belum ter-load, memanggil checkAuth()...');
+            await checkAuth();
+        }
+        
+        const currentUser = user.value;
+        console.log('Current User in getAllowedPages:', currentUser);
+        
+        if (!currentUser || !currentUser.roles || currentUser.roles.length === 0) {
+            console.log('⚠️ User tidak memiliki roles');
+            return [];
+        }
+
+        
+        try {
+            // Fetch all hak akses data
+            const response = await $fetch('/api/hak-akses');
+            
+            if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
+                const hakAksesList = Array.isArray(response.data) ? response.data : [];
+                
+                // Filter hak akses that match user's roles and are active
+                const userHakAkses = hakAksesList.filter((hakAkses: any) => 
+                    currentUser.roles?.includes(hakAkses.namaHakAkses) && 
+                    hakAkses.status === 'aktif'
+                );
+                
+                // Combine all pages from all matching hak akses
+                const allPages = userHakAkses.reduce((pages: string[], hakAkses: any) => {
+                    if (hakAkses.pages && Array.isArray(hakAkses.pages)) {
+                        return [...pages, ...hakAkses.pages];
+                    }
+                    return pages;
+                }, []);
+                
+                // Remove duplicates
+                return [...new Set(allPages)];
+            }
+            
+            return [];
+        } catch (error) {
+            console.error('Error fetching allowed pages:', error);
+            return [];
+        }
+    };
+    
+    /**
+     * Check if user has access to a specific page
+     */
+    const hasPageAccess = async (pagePath: string): Promise<boolean> => {
+        const allowedPages = await getAllowedPages();
+        return allowedPages.includes(pagePath);
+    };
+    
+    /**
+     * Check if user has access to any page in a list
+     */
+    const hasAnyPageAccess = async (pagePaths: string[]): Promise<boolean> => {
+        const allowedPages = await getAllowedPages();
+        return pagePaths.some(path => allowedPages.includes(path));
+    };
+    
+    return {
+        getAllowedPages,
+        hasPageAccess,
+        hasAnyPageAccess
+    };
+};
diff --git a/composables/useRoles.ts b/composables/useRoles.ts
new file mode 100644
index 0000000..690fd61
--- /dev/null
+++ b/composables/useRoles.ts
@@ -0,0 +1,72 @@
+// composables/useRoles.ts
+// Composable for role-based access control on client side
+
+export const useRoles = () => {
+    const { user } = useUserInfo();
+    
+    /**
+     * Check if current user has a specific role
+     */
+    const hasRole = (role: string): boolean => {
+        const currentUser = user.value;
+        if (!currentUser || !currentUser.roles) {
+            return false;
+        }
+        
+        return currentUser.roles.includes(role);
+    };
+    
+    /**
+     * Check if current user has any of the specified roles
+     */
+    const hasAnyRole = (roles: string[]): boolean => {
+        const currentUser = user.value;
+        if (!currentUser || !currentUser.roles) {
+            return false;
+        }
+        
+        return roles.some(role => currentUser.roles?.includes(role));
+    };
+    
+    /**
+     * Check if current user has all of the specified roles
+     */
+    const hasAllRoles = (roles: string[]): boolean => {
+        const currentUser = user.value;
+        if (!currentUser || !currentUser.roles) {
+            return false;
+        }
+        
+        return roles.every(role => currentUser.roles?.includes(role));
+    };
+    
+    /**
+     * Get all roles of current user
+     */
+    const getRoles = (): string[] => {
+        return user.value?.roles || [];
+    };
+    
+    /**
+     * Get realm roles only
+     */
+    const getRealmRoles = (): string[] => {
+        return (user.value as any)?.realm_roles || [];
+    };
+    
+    /**
+     * Get client roles only
+     */
+    const getClientRoles = (): string[] => {
+        return (user.value as any)?.client_roles || [];
+    };
+    
+    return {
+        hasRole,
+        hasAnyRole,
+        hasAllRoles,
+        getRoles,
+        getRealmRoles,
+        getClientRoles
+    };
+};
diff --git a/data/HAK_AKSES_GUIDE.md b/data/HAK_AKSES_GUIDE.md
new file mode 100644
index 0000000..5829875
--- /dev/null
+++ b/data/HAK_AKSES_GUIDE.md
@@ -0,0 +1,302 @@
+# Implementasi Hak Akses di Sidebar & Pages
+
+## Overview
+
+Sistem hak akses sekarang sudah terintegrasi dengan sidebar dan page routing. Menu sidebar akan otomatis difilter berdasarkan pages yang user miliki akses, dan middleware akan mencegah akses langsung ke pages yang tidak diizinkan.
+
+## Komponen yang Terbuat
+
+### 1. Composable `useHakAkses()` ([composables/useHakAkses.ts](composables/useHakAkses.ts))
+
+Menyediakan fungsi untuk mengecek akses user ke halaman:
+
+```typescript
+const { getAllowedPages, hasPageAccess, hasAnyPageAccess } = useHakAkses();
+
+// Get all pages user can access
+const pages = await getAllowedPages();
+
+// Check single page
+const canAccess = await hasPageAccess('/dashboard');
+
+// Check multiple pages
+const hasAccess = await hasAnyPageAccess(['/antrean/all', '/dashboard']);
+```
+
+### 2. Sidebar dengan Filter ([components/layout/full/vertical-sidebar/VerticalSidebar.vue](components/layout/full/vertical-sidebar/VerticalSidebar.vue))
+
+- ✅ Auto load allowed pages saat mount
+- ✅ Filter menu items berdasarkan allowed pages
+- ✅ Hanya tampilkan section yang punya minimal 1 menu visible
+- ✅ Log allowed pages untuk debugging
+
+### 3. Middleware Protection ([middleware/checkPageAccess.ts](middleware/checkPageAccess.ts))
+
+- ✅ Cek akses user ke page yang dituju
+- ✅ Redirect ke dashboard atau first allowed page jika tidak punya akses
+- ✅ Skip check untuk public pages (login, register)
+
+## Cara Kerja
+
+### Flow Akses User:
+
+1. **Login** → User mendapat roles dari Keycloak
+2. **Auto-sync** → Roles di-sync ke `hakAkses.json` 
+3. **Aktifkan hakAkses** → Admin mengaktifkan hakAkses dan set pages di UI
+4. **Load Sidebar** → Sidebar fetch allowed pages dan filter menu
+5. **Navigation** → Middleware check setiap navigation ke page baru
+
+### Data Structure:
+
+```json
+// hakAkses.json
+{
+    "id": "uuid",
+    "namaHakAkses": "manage-account", // nama role dari Keycloak
+    "status": "aktif", // harus aktif untuk memberikan akses
+    "pages": [
+        "/dashboard",
+        "/antrean/all",
+        "/setting/hak-akses"
+    ]
+}
+```
+
+## Penggunaan
+
+### 1. Mengaktifkan Middleware di Page
+
+Ada 2 cara:
+
+#### Option A: Per Page (Recommended)
+```vue
+<script setup lang="ts">
+definePageMeta({
+    middleware: ['auth', 'check-page-access']
+});
+</script>
+```
+
+#### Option B: Global di nuxt.config.ts
+```typescript
+export default defineNuxtConfig({
+    router: {
+        middleware: ['auth', 'check-page-access']
+    }
+})
+```
+
+### 2. Manual Check di Component
+
+Untuk show/hide content berdasarkan akses:
+
+```vue
+<script setup lang="ts">
+const { hasPageAccess } = useHakAkses();
+const canAccessSettings = ref(false);
+
+onMounted(async () => {
+    canAccessSettings.value = await hasPageAccess('/setting/hak-akses');
+});
+</script>
+
+<template>
+    <v-btn v-if="canAccessSettings" to="/setting/hak-akses">
+        Settings
+    </v-btn>
+</template>
+```
+
+### 3. Conditional Rendering dengan Allowed Pages
+
+```vue
+<script setup lang="ts">
+const { getAllowedPages } = useHakAkses();
+const allowedPages = ref<string[]>([]);
+
+onMounted(async () => {
+    allowedPages.value = await getAllowedPages();
+});
+
+const canManageUsers = computed(() => 
+    allowedPages.value.includes('/setting/user')
+);
+</script>
+
+<template>
+    <div v-if="canManageUsers">
+        <!-- User management content -->
+    </div>
+</template>
+```
+
+## Mengelola Hak Akses
+
+### 1. Menambah Pages ke Role
+
+Di halaman **Hak Akses** (`/setting/hak-akses`):
+
+1. Pilih role yang ingin diedit
+2. Set status menjadi **Aktif**
+3. Pilih pages yang boleh diakses
+4. Simpan
+
+### 2. Format Path di Pages Array
+
+Path harus **exact match** dengan route path:
+
+✅ **Benar:**
+- `/dashboard`
+- `/antrean/all`
+- `/setting/hak-akses`
+
+❌ **Salah:**
+- `dashboard` (tanpa slash)
+- `/dashboard/` (dengan trailing slash)
+- `/antrean/*` (wildcard tidak support)
+
+### 3. Testing Hak Akses
+
+1. Login dengan user yang punya role tertentu
+2. Cek console log: `Allowed pages for user: [...]`
+3. Sidebar akan otomatis filter
+4. Coba akses URL langsung yang tidak ada di allowed pages
+5. Harus redirect ke dashboard atau first allowed page
+
+## Troubleshooting
+
+### Menu Tidak Muncul di Sidebar
+
+**Penyebab:**
+1. Status hakAkses masih **tidak aktif**
+2. Path di pages array tidak match dengan `to` di sidebarItem.ts
+3. User tidak punya role yang sesuai
+
+**Solusi:**
+```typescript
+// Check di console
+const { getAllowedPages } = useHakAkses();
+const pages = await getAllowedPages();
+console.log('Allowed pages:', pages);
+
+// Check role user
+const { getRoles } = useRoles();
+console.log('User roles:', getRoles());
+```
+
+### User Bisa Akses Page Tanpa Permission
+
+**Penyebab:**
+- Middleware belum ditambahkan di page
+
+**Solusi:**
+```vue
+<script setup lang="ts">
+definePageMeta({
+    middleware: ['auth', 'check-page-access'] // Tambahkan ini
+});
+</script>
+```
+
+### Error "You do not have access to any pages"
+
+**Penyebab:**
+- Semua hakAkses user statusnya **tidak aktif**
+- Pages array kosong di semua hakAkses user
+
+**Solusi:**
+1. Buka `/setting/hak-akses`
+2. Edit hakAkses yang sesuai dengan role user
+3. Set status **Aktif**
+4. Tambahkan minimal `/dashboard` di pages
+5. Simpan
+
+## Best Practices
+
+### 1. Default Pages untuk Semua Role
+
+Pastikan semua role aktif punya akses ke:
+- `/dashboard` - Landing page setelah login
+
+### 2. Hierarchical Access
+
+Jika user punya akses ke child path, berikan juga akses ke parent:
+```json
+{
+    "pages": [
+        "/setting",           // Parent
+        "/setting/hak-akses", // Child
+        "/setting/user"       // Child
+    ]
+}
+```
+
+### 3. Testing Multiple Roles
+
+Test dengan user yang punya multiple roles untuk pastikan combine pages works:
+
+```typescript
+// User dengan role: ['admin', 'dokter']
+// hakAkses admin: ['/dashboard', '/setting/user']
+// hakAkses dokter: ['/dashboard', '/antrean/all']
+// Result: ['/dashboard', '/setting/user', '/antrean/all'] ✅
+```
+
+### 4. Sync Status
+
+Selalu pastikan:
+1. ✅ Role di Keycloak
+2. ✅ Auto-sync ke hakAkses.json saat login
+3. ✅ Status diaktifkan di UI hak akses
+4. ✅ Pages ditambahkan
+
+## API Endpoints
+
+### Get All Hak Akses
+```typescript
+const response = await $fetch('/api/hak-akses');
+// Returns all hakAkses with their pages
+```
+
+### Get User Allowed Pages (Client Side)
+```typescript
+const { getAllowedPages } = useHakAkses();
+const pages = await getAllowedPages();
+// Returns only pages from active hakAkses that match user's roles
+```
+
+## Security Notes
+
+1. **Server-side validation** diperlukan untuk API calls yang sensitive
+2. Middleware hanya **client-side protection** - jangan andalkan untuk security critical operations
+3. Gunakan `requireRole()` atau `requireAnyRole()` di server API handlers untuk real protection
+4. Pages array di hakAkses.json bisa diedit manual, tapi lebih baik via UI
+
+## Example: Complete Setup
+
+```typescript
+// 1. User login dengan role: 'manage-account'
+
+// 2. Auto-sync creates/updates hakAkses.json:
+{
+    "namaHakAkses": "manage-account",
+    "status": "tidak aktif", // Default
+    "pages": []
+}
+
+// 3. Admin edit via UI:
+{
+    "namaHakAkses": "manage-account",
+    "status": "aktif", // ← Changed
+    "pages": [
+        "/dashboard",
+        "/antrean/all",
+        "/setting/hak-akses"
+    ] // ← Added
+}
+
+// 4. User refresh/re-login:
+// - Sidebar shows: Dashboard, Antrean > Semua, Settings > Hak Akses
+// - Can access: /dashboard, /antrean/all, /setting/hak-akses
+// - Cannot access: /antrean/list-kategori, /setting/user (will redirect)
+```
diff --git a/data/mock/hakAkses.json b/data/mock/hakAkses.json
index c4f77c3..68d97c4 100644
--- a/data/mock/hakAkses.json
+++ b/data/mock/hakAkses.json
@@ -1,32 +1,20 @@
 [
     {
-        "id": 1,
-        "namaHakAkses": "Super Admin",
-        "jumlahHalaman": 15,
-        "status": "aktif"
+        "id": "a37f9466-ea80-47a8-8540-2043f6c1ba06",
+        "namaHakAkses": "manage-account",
+        "status": "tidak aktif",
+        "pages": []
     },
     {
-        "id": 2,
-        "namaHakAkses": "Admin Operasi",
-        "jumlahHalaman": 8,
-        "status": "aktif"
+        "id": "aec03180-cae0-4164-a861-12e2b60861c1",
+        "namaHakAkses": "manage-account-links",
+        "status": "tidak aktif",
+        "pages": []
     },
     {
-        "id": 3,
-        "namaHakAkses": "Dokter",
-        "jumlahHalaman": 5,
-        "status": "aktif"
-    },
-    {
-        "id": 4,
-        "namaHakAkses": "Perawat",
-        "jumlahHalaman": 4,
-        "status": "aktif"
-    },
-    {
-        "id": 5,
-        "namaHakAkses": "Admin Rekam Medis",
-        "jumlahHalaman": 6,
-        "status": "tidak aktif"
+        "id": "4917180d-1b8c-4f92-a8a6-ae40852415ae",
+        "namaHakAkses": "view-profile",
+        "status": "tidak aktif",
+        "pages": []
     }
-]
+]
\ No newline at end of file
diff --git a/data/mock/users.json b/data/mock/users.json
index 303f0a4..cf878ba 100644
--- a/data/mock/users.json
+++ b/data/mock/users.json
@@ -1,42 +1,24 @@
 [
     {
-        "id": 1,
-        "namaUser": "Dr. John Doe",
-        "username": "john.doe",
-        "email": "john.doe@hospital.com",
-        "hakAkses": "Dokter",
+        "id": "d6621539-9e8e-4937-ba9a-fca68f625e39",
+        "namaUser": "yusron",
+        "email": "yusron.sandbox@gmai.com",
+        "hakAkses": [
+            "manage-account",
+            "manage-account-links",
+            "view-profile"
+        ],
         "status": "aktif"
     },
     {
-        "id": 2,
-        "namaUser": "Admin Sistem",
-        "username": "admin",
-        "email": "admin@hospital.com",
-        "hakAkses": "Super Admin",
+        "id": "a2507dbf-5dfc-4f38-bdd5-bb227eb20015",
+        "namaUser": "Akbar Attallah",
+        "email": "akbarantrean@gmail.com",
+        "hakAkses": [
+            "manage-account",
+            "manage-account-links",
+            "view-profile"
+        ],
         "status": "aktif"
-    },
-    {
-        "id": 3,
-        "namaUser": "Perawat Siti",
-        "username": "siti.perawat",
-        "email": "siti@hospital.com",
-        "hakAkses": "Perawat",
-        "status": "aktif"
-    },
-    {
-        "id": 4,
-        "namaUser": "Admin Operasi 1",
-        "username": "admin.op1",
-        "email": "adminop1@hospital.com",
-        "hakAkses": "Admin Operasi",
-        "status": "aktif"
-    },
-    {
-        "id": 5,
-        "namaUser": "RM Staff",
-        "username": "rm.staff",
-        "email": "rm@hospital.com",
-        "hakAkses": "Admin Rekam Medis",
-        "status": "tidak aktif"
     }
-]
+]
\ No newline at end of file
diff --git a/data/users.db b/data/users.db
index 5bc6f90..5db7387 100644
Binary files a/data/users.db and b/data/users.db differ
diff --git a/middleware/checkPageAccess.ts b/middleware/checkPageAccess.ts
new file mode 100644
index 0000000..f1ff24b
--- /dev/null
+++ b/middleware/checkPageAccess.ts
@@ -0,0 +1,41 @@
+// middleware/checkPageAccess.ts
+// Middleware to check if user has access to the page based on hakAkses
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    // Skip check for auth pages, error pages
+    const publicPaths = ['/auth/login', '/auth/register', '/'];
+    if (publicPaths.includes(to.path)) {
+        return;
+    }
+    
+    const { user } = useUserInfo();
+    
+    // If not authenticated, let auth middleware handle it
+    if (!user.value) {
+        return;
+    }
+    
+    const { getAllowedPages } = useHakAkses();
+    
+    try {
+        const allowedPages = await getAllowedPages();
+        
+        // Check if user has access to this page
+        if (!allowedPages.includes(to.path)) {
+            console.warn(`Access denied to ${to.path}. User allowed pages:`, allowedPages);
+            
+            // Redirect to dashboard or first allowed page
+            if (allowedPages.length > 0) {
+                const firstPage = allowedPages.includes('/dashboard') ? '/dashboard' : allowedPages[0];
+                return navigateTo(firstPage);
+            } else {
+                // No access to any page - redirect to login with error
+                return navigateTo('/auth/login?error=' + encodeURIComponent('You do not have access to any pages. Please contact administrator.'));
+            }
+        }
+    } catch (error) {
+        console.error('Error checking page access:', error);
+        // Allow access on error to prevent blocking user
+        return;
+    }
+});
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
index 215b11c..ca2d160 100644
--- a/pages/antrean/all.vue
+++ b/pages/antrean/all.vue
@@ -4,7 +4,7 @@ import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
-import { getAntrianOperasi } from '~/services/antrean';
+import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
 import { Icon } from '@iconify/vue';
 import type { AntreanOperasi } from '~/types/antrean';
 import { STATUS } from '~/types/antrean';
@@ -110,7 +110,7 @@ const showSnackbar = (message: string, color: string = 'success') => {
     snackbar.value = true;
 };
 
-const headers = [
+const allHeaders = [
     { title: 'Nomor', key: 'NoUrutKategori', width: '50px', align: 'center' as const, sortable: false },
     { title: 'Nomor Spesialis', key: 'NoUrutSpesialis', width: '100px', align: 'center' as const, sortable: false },
     { title: 'Nomor Sub Spesialis', key: 'NoUrutSubSpesialis', width: '140px', align: 'center' as const, sortable: false },
@@ -122,12 +122,34 @@ const headers = [
     { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
 ];
 
-const actions = [
-    { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
-    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
-    { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
-    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
-];
+// Hide queue number columns when filtering
+const headers = computed(() => {
+    const isFiltering = search.value || statusFilter.value;
+    if (isFiltering) {
+        return allHeaders.filter(header => 
+            !['NoUrutKategori', 'NoUrutSpesialis', 'NoUrutSubSpesialis'].includes(header.key)
+        );
+    }
+    return allHeaders;
+});
+
+// Function to get actions based on item status
+const getActionsForItem = (item: AntreanOperasi) => {
+    const allActions = [
+        { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
+        { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
+        { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+    ];
+
+    // If status is Selesai or Batal, only show View action
+    if (item.StatusOperasi === STATUS.SELESAI || item.StatusOperasi === STATUS.BATAL) {
+        return allActions.filter(action => action.event === 'view');
+    }
+
+    // For other statuses (Belum, Tunda), show all actions
+    return allActions;
+};
 
 const handleView = async (item: unknown) => {
     const data = item as AntreanOperasi;
@@ -153,9 +175,21 @@ const handleUpdateStatus = async (item: unknown) => {
     showUpdateStatusModal.value = true;
 };
 
-const handleDelete = (item: unknown) => {
+const handleDelete = async (item: unknown) => {
+    const data = item as AntreanOperasi;
     if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
-        showSnackbar('Data berhasil dihapus.', 'success');
+        try {
+            const response = await deleteAntrianOperasi(data.id);
+            if (response.success) {
+                showSnackbar('Data berhasil dihapus.', 'success');
+                fetchData(); // Refresh the table after deletion
+            } else {
+                showSnackbar(response.message || 'Gagal menghapus data', 'error');
+            }
+        } catch (error: any) {
+            console.error('Error deleting antrian operasi:', error);
+            showSnackbar(error.response?.data?.message || 'Gagal menghapus data', 'error');
+        }
     }
 };
 
@@ -229,7 +263,7 @@ const handleUpdateStatusSuccess = () => {
                     <TableAntrian
                         :headers="headers"
                         :items="antreanList"
-                        :actions="actions"
+                        :get-actions="getActionsForItem"
                         :server-side="true"
                         :total-items="totalItems"
                         :current-page="currentPage"
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 5788ad3..114e77b 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -35,10 +35,14 @@ const showModal = ref(false);
 // Loading state
 const loadingStatusAntrian = ref(false);
 const loadingKategoriAntrian = ref(false);
+const loadingAntrianPerHari = ref(false);
+const loadingAntrianPerSpesialis = ref(false);
+const loadingAntrianPerSubspesialis = ref(false);
 
 // Data status antrian dari API
 const statusAntrianData = ref<Array<{ id: number; jumlah: number; statust: string }>>([]);
 const kategoriAntrianData = ref<Array<{ id_kategori: number; kategori: string; jumlah: number }>>([]);
+const antrianPerHariData = ref<Array<{ TanggalDaftar: string; Belum: number; Selesai: number; Tunda: number; Batal: number }>>([]);
 
 // Fetch data perbandingan status antrian
 const fetchStatusAntrian = async () => {
@@ -84,6 +88,89 @@ const fetchKategoriAntrian = async () => {
     }
 };
 
+// Fetch data antrian per hari
+const fetchAntrianPerHari = async () => {
+    loadingAntrianPerHari.value = true;
+    try {
+        const response = await api.get('/dashboard/antrian-per-hari', {
+            params: {
+                year: selectedYear.value,
+                month: selectedMonth.value + 1 // API expects 1-12, not 0-11
+            }
+        });
+
+        if (response.data?.success && response.data?.data) {
+            antrianPerHariData.value = response.data.data;
+        }
+    } catch (error) {
+        console.error('Error fetching antrian per hari:', error);
+        antrianPerHariData.value = [];
+    } finally {
+        loadingAntrianPerHari.value = false;
+    }
+};
+
+// Fetch data antrian per spesialis
+const fetchAntrianPerSpesialis = async () => {
+    loadingAntrianPerSpesialis.value = true;
+    try {
+        const response = await api.get('/dashboard/table-antrian-per-spesialis', {
+            params: {
+                year: selectedYear.value,
+                month: selectedMonth.value + 1 // API expects 1-12, not 0-11
+            }
+        });
+
+        if (response.data?.success && response.data?.data) {
+            // Transform API data to match table headers (lowercase keys)
+            antrianPerSpesialis.value = response.data.data.map((item: any) => ({
+                spesialis: item.Spesialis,
+                total: item.Total,
+                belum: item.Belum,
+                selesai: item.Selesai,
+                tunda: item.Tunda,
+                batal: item.Batal
+            }));
+        }
+    } catch (error) {
+        console.error('Error fetching antrian per spesialis:', error);
+        antrianPerSpesialis.value = [];
+    } finally {
+        loadingAntrianPerSpesialis.value = false;
+    }
+};
+
+// Fetch data antrian per subspesialis
+const fetchAntrianPerSubspesialis = async () => {
+    loadingAntrianPerSubspesialis.value = true;
+    try {
+        const response = await api.get('/dashboard/table-antrian-per-subspesialis', {
+            params: {
+                year: selectedYear.value,
+                month: selectedMonth.value + 1 // API expects 1-12, not 0-11
+            }
+        });
+
+        if (response.data?.success && response.data?.data) {
+            // Transform API data to match table headers (lowercase keys)
+            antrianPerSubspesialis.value = response.data.data.map((item: any) => ({
+                spesialis: item.Spesialis,
+                subspesialis: item.SubSpesialis,
+                total: item.Total,
+                belum: item.Belum,
+                selesai: item.Selesai,
+                tunda: item.Tunda,
+                batal: item.Batal
+            }));
+        }
+    } catch (error) {
+        console.error('Error fetching antrian per subspesialis:', error);
+        antrianPerSubspesialis.value = [];
+    } finally {
+        loadingAntrianPerSubspesialis.value = false;
+    }
+};
+
 // Computed properties untuk total masing-masing status
 const totalBelum = computed(() => {
     const item = statusAntrianData.value.find(d => d.statust === 'Belum');
@@ -118,6 +205,9 @@ const handleModalSuccess = () => {
     // Refresh data dashboard setelah pendaftaran berhasil
     fetchStatusAntrian();
     fetchKategoriAntrian();
+    fetchAntrianPerHari();
+    fetchAntrianPerSpesialis();
+    fetchAntrianPerSubspesialis();
     console.log('Pendaftaran berhasil');
 };
 
@@ -199,9 +289,16 @@ const pieKategoriChartSeries = computed(() => {
 
 // Data untuk Line Chart - Antrian Per Hari dalam 1 Bulan
 const lineChartOptions = computed(() => {
-    const daysInMonth = new Date(selectedYear.value, selectedMonth.value + 1, 0).getDate();
     const monthName = months[selectedMonth.value].text.substring(0, 3);
     
+    // Get categories from API data or generate default
+    const categories = antrianPerHariData.value.length > 0
+        ? antrianPerHariData.value.map(item => {
+            const date = new Date(item.TanggalDaftar);
+            return `${date.getDate()} ${monthName}`;
+        })
+        : [];
+    
     return {
         chart: {
             type: 'line',
@@ -222,7 +319,7 @@ const lineChartOptions = computed(() => {
             width: 3
         },
         xaxis: {
-            categories: Array.from({ length: daysInMonth }, (_, i) => `${i + 1} ${monthName}`),
+            categories: categories,
             title: {
                 text: 'Tanggal'
             }
@@ -251,56 +348,42 @@ const lineChartOptions = computed(() => {
 });
 
 const lineChartSeries = computed(() => {
-    const daysInMonth = new Date(selectedYear.value, selectedMonth.value + 1, 0).getDate();
-    
-    // Generate random data for demo purposes
-    const generateData = (base: number, variance: number) => {
-        return Array.from({ length: daysInMonth }, () => 
-            Math.floor(Math.random() * variance) + base
-        );
-    };
+    // If no data from API, return empty series
+    if (antrianPerHariData.value.length === 0) {
+        return [
+            { name: 'Belum', data: [] },
+            { name: 'Selesai', data: [] },
+            { name: 'Tunda', data: [] },
+            { name: 'Batal', data: [] }
+        ];
+    }
     
+    // Map data from API
     return [
         {
             name: 'Belum',
-            data: generateData(15, 20)
+            data: antrianPerHariData.value.map(item => item.Belum)
         },
         {
             name: 'Selesai',
-            data: generateData(25, 25)
+            data: antrianPerHariData.value.map(item => item.Selesai)
         },
         {
             name: 'Tunda',
-            data: generateData(5, 10)
+            data: antrianPerHariData.value.map(item => item.Tunda)
         },
         {
             name: 'Batal',
-            data: generateData(2, 6)
+            data: antrianPerHariData.value.map(item => item.Batal)
         }
     ];
 });
 
-// Data antrian per spesialis
-const antrianPerSpesialis = ref([
-    { spesialis: 'Bedah Umum', total: 15, belum: 12, selesai: 3, tunda: 1, batal: 1 },
-    { spesialis: 'Bedah Ortopedi', total: 10, belum: 8, selesai: 2, tunda: 1, batal: 0 },
-    { spesialis: 'Bedah Saraf', total: 8, belum: 7, selesai: 1, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Jantung', total: 12, belum: 10, selesai: 2, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Plastik', total: 7, belum: 5, selesai: 2, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Urologi', total: 5, belum: 3, selesai: 2, tunda: 0, batal: 0 }
-]);
+// Data antrian per spesialis - populated from API
+const antrianPerSpesialis = ref<Array<{ spesialis: string; total: number; belum: number; selesai: number; tunda: number; batal: number }>>([]);
 
-// Data antrian per subspesialis
-const antrianPerSubspesialis = ref([
-    { spesialis: 'Bedah Umum', subspesialis: 'Digestif', total: 8, belum: 6, selesai: 2, tunda: 1, batal: 0 },
-    { spesialis: 'Bedah Umum', subspesialis: 'Onkologi', total: 7, belum: 5, selesai: 2, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Ortopedi', subspesialis: 'Traumatologi', total: 6, belum: 5, selesai: 1, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Ortopedi', subspesialis: 'Spine', total: 4, belum: 3, selesai: 1, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Saraf', subspesialis: 'Tumor', total: 5, belum: 4, selesai: 1, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Saraf', subspesialis: 'Vaskular', total: 3, belum: 3, selesai: 0, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Jantung', subspesialis: 'Dewasa', total: 7, belum: 6, selesai: 1, tunda: 0, batal: 0 },
-    { spesialis: 'Bedah Jantung', subspesialis: 'Anak', total: 5, belum: 4, selesai: 1, tunda: 0, batal: 0 }
-]);
+// Data antrian per subspesialis - populated from API
+const antrianPerSubspesialis = ref<Array<{ spesialis: string; subspesialis: string; total: number; belum: number; selesai: number; tunda: number; batal: number }>>([]);
 
 const searchSpesialis = ref('');
 const searchSubspesialis = ref('');
@@ -328,12 +411,18 @@ const headersSubspesialis = [
 watch([selectedMonth, selectedYear], () => {
     fetchStatusAntrian();
     fetchKategoriAntrian();
+    fetchAntrianPerHari();
+    fetchAntrianPerSpesialis();
+    fetchAntrianPerSubspesialis();
 });
 
 // Fetch data saat component mounted
 onMounted(() => {
     fetchStatusAntrian();
     fetchKategoriAntrian();
+    fetchAntrianPerHari();
+    fetchAntrianPerSpesialis();
+    fetchAntrianPerSubspesialis();
 });
 
 definePageMeta({
@@ -552,7 +641,10 @@ definePageMeta({
                 </v-card-item>
                 <v-divider></v-divider>
                 <v-card-text>
-                    <ClientOnly>
+                    <div v-if="loadingAntrianPerHari" class="d-flex justify-center align-center" style="min-height: 350px;">
+                        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+                    </div>
+                    <ClientOnly v-else>
                         <VueApexCharts 
                             :key="`line-${selectedMonth}-${selectedYear}`"
                             type="line" 
@@ -578,7 +670,10 @@ definePageMeta({
                 </v-card-item>
                 <v-divider></v-divider>
                 <v-card-text class="pa-0">
-                    <v-data-table :headers="headersSpesialis" :items="antrianPerSpesialis" :search="searchSpesialis"
+                    <div v-if="loadingAntrianPerSpesialis" class="d-flex justify-center align-center pa-8" style="min-height: 300px;">
+                        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+                    </div>
+                    <v-data-table v-else :headers="headersSpesialis" :items="antrianPerSpesialis" :search="searchSpesialis"
                         :items-per-page="10" class="border-0" hide-default-footer>
                         <template v-slot:item.total="{ item }">
                             <v-chip size="small" color="primary" variant="tonal">
@@ -623,7 +718,10 @@ definePageMeta({
                 </v-card-item>
                 <v-divider></v-divider>
                 <v-card-text class="pa-0">
-                    <v-data-table :headers="headersSubspesialis" :items="antrianPerSubspesialis"
+                    <div v-if="loadingAntrianPerSubspesialis" class="d-flex justify-center align-center pa-8" style="min-height: 300px;">
+                        <v-progress-circular indeterminate color="secondary" size="64"></v-progress-circular>
+                    </div>
+                    <v-data-table v-else :headers="headersSubspesialis" :items="antrianPerSubspesialis"
                         :search="searchSubspesialis" :items-per-page="10" class="border-0" hide-default-footer>
                         <template v-slot:item.total="{ item }">
                             <v-chip size="small" color="primary" variant="tonal">
diff --git a/pages/setting/hak-akses/form.vue b/pages/setting/hak-akses/form.vue
index 99871be..a1e466a 100644
--- a/pages/setting/hak-akses/form.vue
+++ b/pages/setting/hak-akses/form.vue
@@ -69,6 +69,19 @@ const valid = ref(true);
 const namaHakAkses = ref('');
 const status = ref('aktif');
 const selectedPages = ref<string[]>([]);
+const loading = ref(false);
+const currentId = ref<number | null>(null);
+
+// Snackbar state
+const snackbar = ref(false);
+const snackbarMessage = ref('');
+const snackbarColor = ref('success');
+
+const showSnackbar = (message: string, color: string = 'success') => {
+    snackbarMessage.value = message;
+    snackbarColor.value = color;
+    snackbar.value = true;
+};
 
 // Rules
 const rules = {
@@ -132,17 +145,57 @@ const handleSimpan = async () => {
     
     if (valid) {
         if (selectedPages.value.length === 0) {
-            alert('Pilih minimal satu halaman untuk hak akses');
+            showSnackbar('Pilih minimal satu halaman untuk hak akses', 'error');
             return;
         }
         
-        console.log({
-            namaHakAkses: namaHakAkses.value,
-            status: status.value,
-            pages: selectedPages.value
-        });
+        loading.value = true;
         
-        alert('Data berhasil disimpan!');
+        try {
+            const payload = {
+                namaHakAkses: namaHakAkses.value,
+                status: status.value,
+                pages: selectedPages.value
+            };
+            
+            let response;
+            
+            if (mode.value === 'edit' && currentId.value) {
+                // Update existing
+                response = await $fetch(`/api/hak-akses/${currentId.value}`, {
+                    method: 'PUT',
+                    body: payload
+                });
+            } else {
+                // Create new
+                response = await $fetch('/api/hak-akses', {
+                    method: 'POST',
+                    body: payload
+                });
+            }
+            
+            if (response && typeof response === 'object' && 'success' in response && response.success) {
+                const message = 'message' in response && typeof response.message === 'string' 
+                    ? response.message 
+                    : 'Data berhasil disimpan';
+                showSnackbar(message, 'success');
+                
+                // Redirect to list after 1 second
+                setTimeout(() => {
+                    router.push('/setting/hak-akses');
+                }, 1000);
+            } else {
+                const message = response && typeof response === 'object' && 'message' in response && typeof response.message === 'string'
+                    ? response.message
+                    : 'Gagal menyimpan data';
+                showSnackbar(message, 'error');
+            }
+        } catch (error) {
+            console.error('Error saving hak akses:', error);
+            showSnackbar('Terjadi kesalahan saat menyimpan data', 'error');
+        } finally {
+            loading.value = false;
+        }
     }
 };
 
@@ -160,23 +213,47 @@ const handleKembali = () => {
 };
 
 // Load data if edit or view mode
-onMounted(() => {
+onMounted(async () => {
     if (mode.value !== 'create') {
         const id = route.query.id;
-        // TODO: Load data based on id
-        // For now, just mock data
-        if (id === '1') {
-            namaHakAkses.value = 'Super Admin';
-            status.value = 'aktif';
-            selectedPages.value = ['/antrean/all', '/antrean/pendaftaran', '/master/guarantor'];
-        } else if (id === '2') {
-            namaHakAkses.value = 'Admin Operasi';
-            status.value = 'aktif';
-            selectedPages.value = ['/antrean/all', '/antrean/pendaftaran'];
-        } else if (id === '5') {
-            namaHakAkses.value = 'Admin Rekam Medis';
-            status.value = 'tidak aktif';
-            selectedPages.value = ['/antrean/all'];
+        
+        if (id) {
+            loading.value = true;
+            
+            try {
+                const response = await $fetch(`/api/hak-akses/${id}`);
+                
+                if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
+                    const data = response.data;
+                    
+                    if (data && typeof data === 'object') {
+                        currentId.value = 'id' in data && typeof data.id === 'number' ? data.id : null;
+                        namaHakAkses.value = 'namaHakAkses' in data && typeof data.namaHakAkses === 'string' ? data.namaHakAkses : '';
+                        status.value = 'status' in data && typeof data.status === 'string' ? data.status : 'aktif';
+                        selectedPages.value = 'pages' in data && Array.isArray(data.pages) ? data.pages : [];
+                    }
+                } else {
+                    const message = response && typeof response === 'object' && 'message' in response && typeof response.message === 'string' 
+                        ? response.message 
+                        : 'Data tidak ditemukan';
+                    showSnackbar(message, 'error');
+                    
+                    // Redirect to list after 2 seconds
+                    setTimeout(() => {
+                        router.push('/setting/hak-akses');
+                    }, 2000);
+                }
+            } catch (error) {
+                console.error('Error loading hak akses:', error);
+                showSnackbar('Gagal memuat data', 'error');
+                
+                // Redirect to list after 2 seconds
+                setTimeout(() => {
+                    router.push('/setting/hak-akses');
+                }, 2000);
+            } finally {
+                loading.value = false;
+            }
         }
     }
 });
@@ -331,6 +408,8 @@ onMounted(() => {
                                 size="large"
                                 prepend-icon="mdi-content-save"
                                 @click="handleSimpan"
+                                :loading="loading"
+                                :disabled="loading"
                             >
                                 Simpan
                             </v-btn>
@@ -340,4 +419,22 @@ onMounted(() => {
             </v-col>
         </v-row>
     </v-form>
+
+    <!-- Snackbar for notifications -->
+    <v-snackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="3000"
+        location="top"
+    >
+        {{ snackbarMessage }}
+        <template #actions>
+            <v-btn
+                variant="text"
+                @click="snackbar = false"
+            >
+                Close
+            </v-btn>
+        </template>
+    </v-snackbar>
 </template>
\ No newline at end of file
diff --git a/pages/setting/hak-akses/index.vue b/pages/setting/hak-akses/index.vue
index e4a77e7..9f2e0dd 100644
--- a/pages/setting/hak-akses/index.vue
+++ b/pages/setting/hak-akses/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
-import hakAksesData from '~/data/mock/hakAkses.json';
 import type { HakAkses } from '~/types/setting';
 
 const page = ref({ title: 'Hak Akses' });
@@ -19,7 +18,8 @@ const breadcrumbs = ref([
 
 const router = useRouter();
 const search = ref('');
-const hakAksesList = ref<HakAkses[]>(hakAksesData);
+const hakAksesList = ref<HakAkses[]>([]);
+const loading = ref(false);
 
 // Snackbar state
 const snackbar = ref(false);
@@ -32,6 +32,24 @@ const showSnackbar = (message: string, color: string = 'success') => {
     snackbar.value = true;
 };
 
+// Load data from API
+const loadData = async () => {
+    loading.value = true;
+    
+    try {
+        const response = await $fetch('/api/hak-akses');
+        
+        if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
+            hakAksesList.value = Array.isArray(response.data) ? response.data : [];
+        }
+    } catch (error) {
+        console.error('Error loading hak akses:', error);
+        showSnackbar('Gagal memuat data', 'error');
+    } finally {
+        loading.value = false;
+    }
+};
+
 const headers = [
     { title: 'No', key: 'no', width: '100px', align: 'center' as const },
     { title: 'Nama Hak Akses', key: 'namaHakAkses', sortable: true },
@@ -67,18 +85,47 @@ const handleEdit = (item: unknown) => {
     });
 };
 
-const handleDelete = (item: unknown) => {
+const handleDelete = async (item: unknown) => {
     const data = item as HakAkses;
     if (confirm(`Apakah Anda yakin ingin menghapus hak akses "${data.namaHakAkses}"?`)) {
-        // Remove from list
-        const index = hakAksesList.value.findIndex(h => h.id === data.id);
-        if (index > -1) {
-            hakAksesList.value.splice(index, 1);
+        loading.value = true;
+        
+        try {
+            const response = await $fetch(`/api/hak-akses/${data.id}`, {
+                method: 'DELETE'
+            });
+            
+            if (response && typeof response === 'object' && 'success' in response && response.success) {
+                // Remove from list locally
+                const index = hakAksesList.value.findIndex(h => h.id === data.id);
+                if (index > -1) {
+                    hakAksesList.value.splice(index, 1);
+                }
+                
+                const message = 'message' in response && typeof response.message === 'string' 
+                    ? response.message 
+                    : 'Hak akses berhasil dihapus';
+                showSnackbar(message, 'success');
+            } else {
+                const message = response && typeof response === 'object' && 'message' in response && typeof response.message === 'string'
+                    ? response.message
+                    : 'Gagal menghapus hak akses';
+                showSnackbar(message, 'error');
+            }
+        } catch (error) {
+            console.error('Error deleting hak akses:', error);
+            showSnackbar('Terjadi kesalahan saat menghapus data', 'error');
+        } finally {
+            loading.value = false;
         }
-        showSnackbar('Hak akses berhasil dihapus.', 'success');
     }
 };
 
+// Load data on mount
+onMounted(() => {
+    loadData();
+});
+
 definePageMeta({
   middleware: 'auth',
   pageTitle: 'Hak Akses',
@@ -114,6 +161,7 @@ definePageMeta({
                         :items="hakAksesList"
                         :search="search"
                         :actions="actions"
+                        :loading="loading"
                         min-width="900px"
                         @view="handleView"
                         @edit="handleEdit"
diff --git a/pages/setting/user/index.vue b/pages/setting/user/index.vue
index a3d3d4c..4bb5f3f 100644
--- a/pages/setting/user/index.vue
+++ b/pages/setting/user/index.vue
@@ -22,11 +22,10 @@ const showSnackbar = (message: string, color: string = 'success') => {
 const headers = [
     { title: 'No', key: 'no', width: '100px', align: 'center' as const },
     { title: 'Nama User', key: 'namaUser', sortable: true },
-    { title: 'Username', key: 'username', sortable: true },
     { title: 'Email', key: 'email', sortable: true },
     { title: 'Hak Akses', key: 'hakAkses', sortable: true },
     { title: 'Status', key: 'status', sortable: true, align: 'center' as const },
-    { title: 'Actions', key: 'actions', sortable: false, align: 'center' as const }
+    // { title: 'Actions', key: 'actions', sortable: false, align: 'center' as const }
 ];
 
 const actions = [
@@ -90,20 +89,19 @@ definePageMeta({
                             style="max-width: 400px;"
                         ></v-text-field>
                         
-                        <v-btn
+                        <!-- <v-btn
                             color="primary"
                             prepend-icon="mdi-plus"
                             to="/setting/user/form"
                         >
                             Tambah User
-                        </v-btn>
+                        </v-btn> -->
                     </div>
 
                     <TableAntrian
                         :headers="headers"
                         :items="usersList"
                         :search="search"
-                        :actions="actions"
                         min-width="1200px"
                         @view="handleView"
                         @edit="handleEdit"
@@ -112,6 +110,17 @@ definePageMeta({
                         <template #item.no="{ index }">
                             {{ index + 1 }}
                         </template>
+                        <template #item.hakAkses="{ item }">
+                            <v-chip
+                                v-for="(hak, idx) in item.hakAkses"
+                                :key="idx"
+                                class="ma-1"
+                                color="primary"
+                                size="small"
+                            >
+                                {{ hak }}
+                            </v-chip>
+                        </template>
                         <template #item.status="{ item }">
                             <v-chip
                                 :color="item.status === 'aktif' ? 'success' : 'error'"
diff --git a/server/api/auth/keycloak-callback.get.ts b/server/api/auth/keycloak-callback.get.ts
index 48480a4..8805bc3 100644
--- a/server/api/auth/keycloak-callback.get.ts
+++ b/server/api/auth/keycloak-callback.get.ts
@@ -128,15 +128,30 @@ export default defineEventHandler(async (event) => {
         const tokens = await tokenResponse.json();
         
         let idTokenPayload;
+        let accessTokenPayload;
         try {
             idTokenPayload = JSON.parse(
                 Buffer.from(tokens.id_token.split('.')[1], 'base64').toString()
             );
+            accessTokenPayload = JSON.parse(
+                Buffer.from(tokens.access_token.split('.')[1], 'base64').toString()
+            );
         } catch (decodeError) {
             console.error('❌ Failed to decode ID token:', decodeError);
             const errorMsg = encodeURIComponent('Invalid ID token format');
             return sendRedirect(event, `/auth/login?error=${errorMsg}`);
         }
+                
+        // Extract roles from Keycloak token
+        // Keycloak stores roles in different places depending on configuration
+        const realmRoles = accessTokenPayload.realm_access?.roles || [];
+        const clientRoles = accessTokenPayload.resource_access?.account?.roles || [];
+        const allRoles = [...new Set([...realmRoles, ...clientRoles])]; // Remove duplicates
+        
+        console.log('👥 User Roles Extracted:');
+        console.log('   - Realm Roles:', realmRoles);
+        console.log('   - Client Roles:', clientRoles);
+        console.log('   - All Roles:', allRoles);
         
         // Store minimal session data in cookie to reduce size
         // The ID token contains user info, so we can decode it when needed
@@ -147,6 +162,9 @@ export default defineEventHandler(async (event) => {
                 email: idTokenPayload.email,
                 name: idTokenPayload.name || idTokenPayload.preferred_username,
                 preferred_username: idTokenPayload.preferred_username,
+                roles: allRoles, // All user roles combined
+                realm_roles: realmRoles, // Realm-specific roles
+                client_roles: clientRoles, // Client-specific roles
             },
             // Store tokens - these are necessary for API calls
             // Note: These JWT tokens are large, but necessary for authentication
@@ -210,15 +228,29 @@ export default defineEventHandler(async (event) => {
         console.log('   - MaxAge:', SESSION_DURATION, 'seconds');
         console.log('   - Host:', event.node.req.headers.host);
         
-        // Auto-sync user data to database (first time login check)
-        // Pass session createdAt as loginTime to sync function
+        // Auto-sync hakAkses and user data after successful login
         try {
-            const { syncUserFromTokens } = await import('~/server/utils/userSync');
-            const result = syncUserFromTokens(tokens.id_token, tokens.access_token, sessionData.createdAt);
-            console.log(`✅ User auto-sync on login: ${result.action} - ${result.message}`);
+            console.log('🔄 Starting auto-sync process...');
+            
+            // 1. Sync hakAkses (roles) to hakAkses.json
+            const { syncHakAksesFromRoles } = await import('~/server/utils/hakAksesSync');
+            const hakAksesResult = syncHakAksesFromRoles(clientRoles);
+            console.log(`📋 HakAkses sync result:`, hakAksesResult);
+            
+            // 2. Sync user data to users.json
+            const { syncUserData } = await import('~/server/utils/userDataSync');
+            const userResult = syncUserData({
+                id: sessionData.user.id,
+                name: sessionData.user.name,
+                email: sessionData.user.email,
+                roles: clientRoles
+            });
+            console.log(`👤 User sync result: ${userResult.action} - ${userResult.message}`);
+            
+            console.log('✅ Auto-sync process completed successfully');
         } catch (syncError: any) {
             // Don't fail the login if sync fails, just log it
-            console.error('⚠️ Failed to auto-sync user on login:', syncError);
+            console.error('⚠️ Failed to auto-sync data on login:', syncError);
         }
         
         // IMPORTANT: Ensure cookie is set before redirect
diff --git a/server/api/hak-akses/[id].ts b/server/api/hak-akses/[id].ts
new file mode 100644
index 0000000..91aa76a
--- /dev/null
+++ b/server/api/hak-akses/[id].ts
@@ -0,0 +1,140 @@
+import fs from 'fs';
+import path from 'path';
+import type { HakAkses } from '~/types/setting';
+
+const filePath = path.resolve('data/mock/hakAkses.json');
+
+// Helper to read JSON file
+const readData = (): HakAkses[] => {
+    try {
+        const data = fs.readFileSync(filePath, 'utf-8');
+        return JSON.parse(data);
+    } catch (error) {
+        console.error('Error reading hakAkses.json:', error);
+        return [];
+    }
+};
+
+// Helper to write JSON file
+const writeData = (data: HakAkses[]): boolean => {
+    try {
+        fs.writeFileSync(filePath, JSON.stringify(data, null, 4), 'utf-8');
+        return true;
+    } catch (error) {
+        console.error('Error writing hakAkses.json:', error);
+        return false;
+    }
+};
+
+export default defineEventHandler(async (event) => {
+    const method = event.method;
+    const id = event.context.params?.id || '0';
+
+    if (!id) {
+        return {
+            success: false,
+            message: 'Invalid ID'
+        };
+    }
+
+    // GET - Get single hak akses by ID
+    if (method === 'GET') {
+        const data = readData();
+        const hakAkses = data.find(item => item.id === id);
+        
+        if (hakAkses) {
+            return {
+                success: true,
+                data: hakAkses
+            };
+        } else {
+            return {
+                success: false,
+                message: 'Hak akses tidak ditemukan'
+            };
+        }
+    }
+
+    // PUT - Update hak akses
+    if (method === 'PUT') {
+        try {
+            const body = await readBody(event);
+            const data = readData();
+            const index = data.findIndex(item => item.id === id);
+            
+            if (index === -1) {
+                return {
+                    success: false,
+                    message: 'Hak akses tidak ditemukan'
+                };
+            }
+            
+            // Update the item
+            data[index] = {
+                id,
+                namaHakAkses: body.namaHakAkses,
+                status: body.status,
+                pages: body.pages || []
+            };
+            
+            const success = writeData(data);
+            
+            if (success) {
+                return {
+                    success: true,
+                    message: 'Hak akses berhasil diupdate',
+                    data: data[index]
+                };
+            } else {
+                throw new Error('Failed to save data');
+            }
+        } catch (error) {
+            return {
+                success: false,
+                message: 'Gagal mengupdate hak akses',
+                error: error instanceof Error ? error.message : 'Unknown error'
+            };
+        }
+    }
+
+    // DELETE - Delete hak akses
+    if (method === 'DELETE') {
+        try {
+            const data = readData();
+            const index = data.findIndex(item => item.id === id);
+            
+            if (index === -1) {
+                return {
+                    success: false,
+                    message: 'Hak akses tidak ditemukan'
+                };
+            }
+            
+            const deletedItem = data[index];
+            data.splice(index, 1);
+            
+            const success = writeData(data);
+            
+            if (success) {
+                return {
+                    success: true,
+                    message: 'Hak akses berhasil dihapus',
+                    data: deletedItem
+                };
+            } else {
+                throw new Error('Failed to save data');
+            }
+        } catch (error) {
+            return {
+                success: false,
+                message: 'Gagal menghapus hak akses',
+                error: error instanceof Error ? error.message : 'Unknown error'
+            };
+        }
+    }
+
+    return {
+        success: false,
+        message: 'Method not allowed'
+    };
+});
diff --git a/server/api/hak-akses/index.ts b/server/api/hak-akses/index.ts
new file mode 100644
index 0000000..935eab6
--- /dev/null
+++ b/server/api/hak-akses/index.ts
@@ -0,0 +1,84 @@
+import fs from 'fs';
+import path from 'path';
+import type { HakAkses } from '~/types/setting';
+
+const filePath = path.resolve('data/mock/hakAkses.json');
+
+// Helper to read JSON file
+const readData = (): HakAkses[] => {
+    try {
+        const data = fs.readFileSync(filePath, 'utf-8');
+        return JSON.parse(data);
+    } catch (error) {
+        console.error('Error reading hakAkses.json:', error);
+        return [];
+    }
+};
+
+// Helper to write JSON file
+const writeData = (data: HakAkses[]): boolean => {
+    try {
+        fs.writeFileSync(filePath, JSON.stringify(data, null, 4), 'utf-8');
+        return true;
+    } catch (error) {
+        console.error('Error writing hakAkses.json:', error);
+        return false;
+    }
+};
+
+export default defineEventHandler(async (event) => {
+    const method = event.method;
+
+    // GET - List all hak akses
+    if (method === 'GET') {
+        const data = readData();
+        return {
+            success: true,
+            data
+        };
+    }
+
+    // POST - Create new hak akses
+    if (method === 'POST') {
+        try {
+            const body = await readBody(event);
+            const data = readData();
+            
+            // Generate new ID
+            //random uuid
+            const newId = crypto.randomUUID();
+            
+            const newHakAkses: HakAkses = {
+                id: newId,
+                namaHakAkses: body.namaHakAkses,
+                status: body.status,
+                pages: body.pages || []
+            };
+            
+            data.push(newHakAkses);
+            
+            const success = writeData(data);
+            
+            if (success) {
+                return {
+                    success: true,
+                    message: 'Hak akses berhasil ditambahkan',
+                    data: newHakAkses
+                };
+            } else {
+                throw new Error('Failed to save data');
+            }
+        } catch (error) {
+            return {
+                success: false,
+                message: 'Gagal menambahkan hak akses',
+                error: error instanceof Error ? error.message : 'Unknown error'
+            };
+        }
+    }
+
+    return {
+        success: false,
+        message: 'Method not allowed'
+    };
+});
diff --git a/server/utils/hakAksesSync.ts b/server/utils/hakAksesSync.ts
new file mode 100644
index 0000000..4135ac8
--- /dev/null
+++ b/server/utils/hakAksesSync.ts
@@ -0,0 +1,78 @@
+import fs from 'fs';
+import path from 'path';
+import { randomUUID } from 'crypto';
+import type { HakAkses } from '~/types/setting';
+
+const filePath = path.resolve('data/mock/hakAkses.json');
+
+// Helper to read JSON file
+const readData = (): HakAkses[] => {
+    try {
+        const data = fs.readFileSync(filePath, 'utf-8');
+        return JSON.parse(data);
+    } catch (error) {
+        console.error('Error reading hakAkses.json:', error);
+        return [];
+    }
+};
+
+// Helper to write JSON file
+const writeData = (data: HakAkses[]): boolean => {
+    try {
+        fs.writeFileSync(filePath, JSON.stringify(data, null, 4), 'utf-8');
+        return true;
+    } catch (error) {
+        console.error('Error writing hakAkses.json:', error);
+        return false;
+    }
+};
+
+/**
+ * Sync roles from Keycloak to hakAkses.json
+ * Add any missing roles with inactive status and empty pages
+ */
+export const syncHakAksesFromRoles = (roles: string[]): { added: string[], skipped: string[] } => {
+    const data = readData();
+    const added: string[] = [];
+    const skipped: string[] = [];
+    
+    let hasChanges = false;
+    
+    for (const role of roles) {
+        // Check if role already exists
+        const exists = data.some(item => item.namaHakAkses === role);
+        
+        if (!exists) {
+            // Generate new UUID
+            const newId = randomUUID();
+            
+            // Add new hak akses
+            const newHakAkses: HakAkses = {
+                id: newId,
+                namaHakAkses: role,
+                status: 'tidak aktif',
+                pages: []
+            };
+            
+            data.push(newHakAkses);
+            added.push(role);
+            hasChanges = true;
+            
+            console.log(`✅ Added new hak akses: ${role} (id: ${newId})`);
+        } else {
+            skipped.push(role);
+        }
+    }
+    
+    // Write back to file if there are changes
+    if (hasChanges) {
+        const success = writeData(data);
+        if (success) {
+            console.log(`📝 Updated hakAkses.json with ${added.length} new roles`);
+        } else {
+            console.error('❌ Failed to update hakAkses.json');
+        }
+    }
+    
+    return { added, skipped };
+};
diff --git a/server/utils/roleChecker.ts b/server/utils/roleChecker.ts
new file mode 100644
index 0000000..f693ce4
--- /dev/null
+++ b/server/utils/roleChecker.ts
@@ -0,0 +1,87 @@
+// server/utils/roleChecker.ts
+// Utility functions for role-based access control
+
+import { getSessionFromCookie } from './sessionStore';
+
+/**
+ * Check if user has a specific role
+ */
+export async function hasRole(event: any, role: string): Promise<boolean> {
+    const session = await getSessionFromCookie(event);
+    if (!session || !session.user) {
+        return false;
+    }
+    
+    const userRoles = session.user.roles || [];
+    return userRoles.includes(role);
+}
+
+/**
+ * Check if user has any of the specified roles
+ */
+export async function hasAnyRole(event: any, roles: string[]): Promise<boolean> {
+    const session = await getSessionFromCookie(event);
+    if (!session || !session.user) {
+        return false;
+    }
+    
+    const userRoles = session.user.roles || [];
+    return roles.some(role => userRoles.includes(role));
+}
+
+/**
+ * Check if user has all of the specified roles
+ */
+export async function hasAllRoles(event: any, roles: string[]): Promise<boolean> {
+    const session = await getSessionFromCookie(event);
+    if (!session || !session.user) {
+        return false;
+    }
+    
+    const userRoles = session.user.roles || [];
+    return roles.every(role => userRoles.includes(role));
+}
+
+/**
+ * Get all user roles
+ */
+export async function getUserRoles(event: any): Promise<string[]> {
+    const session = await getSessionFromCookie(event);
+    if (!session || !session.user) {
+        return [];
+    }
+    
+    return session.user.roles || [];
+}
+
+/**
+ * Middleware helper to require specific role
+ * Throws error if user doesn't have the required role
+ */
+export async function requireRole(event: any, role: string): Promise<void> {
+    const hasRequiredRole = await hasRole(event, role);
+    
+    if (!hasRequiredRole) {
+        throw createError({
+            statusCode: 403,
+            statusMessage: 'Forbidden',
+            message: `Access denied. Required role: ${role}`
+        });
+    }
+}
+
+/**
+ * Middleware helper to require any of the specified roles
+ * Throws error if user doesn't have any of the required roles
+ */
+export async function requireAnyRole(event: any, roles: string[]): Promise<void> {
+    const hasRequiredRole = await hasAnyRole(event, roles);
+    
+    if (!hasRequiredRole) {
+        throw createError({
+            statusCode: 403,
+            statusMessage: 'Forbidden',
+            message: `Access denied. Required roles: ${roles.join(', ')}`
+        });
+    }
+}
diff --git a/server/utils/userDataSync.ts b/server/utils/userDataSync.ts
new file mode 100644
index 0000000..ad8c235
--- /dev/null
+++ b/server/utils/userDataSync.ts
@@ -0,0 +1,107 @@
+import fs from 'fs';
+import path from 'path';
+
+interface User {
+    id: string;
+    namaUser: string;
+    email: string;
+    hakAkses: string[];
+    status: string;
+}
+
+const filePath = path.resolve('data/mock/users.json');
+
+// Helper to read JSON file
+const readData = (): User[] => {
+    try {
+        const data = fs.readFileSync(filePath, 'utf-8');
+        return JSON.parse(data);
+    } catch (error) {
+        console.error('Error reading users.json:', error);
+        return [];
+    }
+};
+
+// Helper to write JSON file
+const writeData = (data: User[]): boolean => {
+    try {
+        fs.writeFileSync(filePath, JSON.stringify(data, null, 4), 'utf-8');
+        return true;
+    } catch (error) {
+        console.error('Error writing users.json:', error);
+        return false;
+    }
+};
+
+/**
+ * Sync user data from Keycloak to users.json
+ * Add user if not exists, update hakAkses if exists
+ */
+export const syncUserData = (userData: {
+    id: string;
+    name: string;
+    email: string;
+    roles: string[];
+}): { action: 'created' | 'updated' | 'skipped', message: string } => {
+    const data = readData();
+    
+    // Check if user exists
+    const existingUserIndex = data.findIndex(user => user.id === userData.id);
+    
+    if (existingUserIndex === -1) {
+        // User doesn't exist, create new
+        const newUser: User = {
+            id: userData.id,
+            namaUser: userData.name,
+            email: userData.email,
+            hakAkses: userData.roles,
+            status: 'aktif'
+        };
+        
+        data.push(newUser);
+        
+        const success = writeData(data);
+        if (success) {
+            console.log(`✅ Created new user: ${userData.name} (${userData.email})`);
+            return {
+                action: 'created',
+                message: `User ${userData.name} created successfully`
+            };
+        } else {
+            console.error('❌ Failed to create user');
+            return {
+                action: 'skipped',
+                message: 'Failed to write user data'
+            };
+        }
+    } else {
+        // User exists, update hakAkses if different
+        const existingUser = data[existingUserIndex];
+        const rolesChanged = JSON.stringify(existingUser.hakAkses.sort()) !== JSON.stringify(userData.roles.sort());
+        
+        if (rolesChanged) {
+            existingUser.hakAkses = userData.roles;
+            
+            const success = writeData(data);
+            if (success) {
+                console.log(`✅ Updated user roles: ${userData.name}`);
+                return {
+                    action: 'updated',
+                    message: `User ${userData.name} roles updated`
+                };
+            } else {
+                console.error('❌ Failed to update user');
+                return {
+                    action: 'skipped',
+                    message: 'Failed to write user data'
+                };
+            }
+        } else {
+            console.log(`ℹ️ User ${userData.name} already exists with same roles`);
+            return {
+                action: 'skipped',
+                message: `User ${userData.name} already up to date`
+            };
+        }
+    }
+};
diff --git a/services/antrean.ts b/services/antrean.ts
index c40a2b2..1a0aed6 100644
--- a/services/antrean.ts
+++ b/services/antrean.ts
@@ -14,7 +14,12 @@ export const getAntrianOperasiById = async (id: string | number) => {
 }
 
 export const updateStatusAntrianOperasi = async (id: string | number, data: any) => {
-  const response = await api.put(`/antrian-operasi/${id}/status`, data)
+  const response = await api.put(`/antrian-operasi/${id}/update-status`, data)
+  return response.data
+}
+
+export const deleteAntrianOperasi = async (id: string | number) => {
+  const response = await api.delete(`/antrian-operasi/${id}`)
   return response.data
 }
 
diff --git a/services/api.ts b/services/api.ts
index 75adf1b..e8344bf 100644
--- a/services/api.ts
+++ b/services/api.ts
@@ -17,10 +17,13 @@ const apiGomed = axios.create({
 
 // Shared request interceptor
 const requestInterceptor = (config: any) => {
-  const token = localStorage.getItem('token')
-
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`
+  // Only access localStorage on client-side (avoid SSR errors)
+  if (process.client) {
+    const idToken = localStorage.getItem('idToken')
+    
+    if (idToken) {
+      config.headers.Authorization = `Bearer ${idToken}`
+    }
   }
 
   return config
diff --git a/types/antrean.ts b/types/antrean.ts
index 4280622..bb8e5d8 100644
--- a/types/antrean.ts
+++ b/types/antrean.ts
@@ -25,7 +25,7 @@ export interface AntreanOperasi {
     kodeSpesialis?: string;
     kodeSubSpesialis?: string;
     idKategoriOperasi?: number;
-    status?: string;
+    StatusOperasi?: string;
 }
 
 export interface Spesialis {
diff --git a/types/auth.ts b/types/auth.ts
index 88c054b..58aa4f5 100644
--- a/types/auth.ts
+++ b/types/auth.ts
@@ -40,6 +40,7 @@ export interface SessionResponse {
   success?: boolean // Add success indicator
   user: User | null
   accessToken?: string
+  idToken?: string // ID token for API authentication
   refreshToken?: string // Often useful to track
   expiresAt?: number
   error?: string // For error cases
diff --git a/types/setting.ts b/types/setting.ts
index 5cf2eae..d114e57 100644
--- a/types/setting.ts
+++ b/types/setting.ts
@@ -1,16 +1,16 @@
 // Types for Setting related functionality
 
 export interface User {
-    id: number;
+    id: string;
     namaUser: string;
-    username: string;
     email: string;
-    hakAkses: string;
+    hakAkses: string[];
     status: string;
 }
 
 export interface HakAkses {
-    id: number;
+    id: string;
     namaHakAkses: string;
     status: string;
+    pages: string[];
 }