fix : calender view jadwal dokter

app.vue

@@ -13,7 +13,7 @@ nuxtApp.hook('page:finish', () => {
 
 // Naikkan versi ini setiap kali ada perubahan struktur state (schema migration).
 // Saat versi tidak cocok, semua cache Pinia akan dibersihkan otomatis.
-const STORE_SCHEMA_VERSION = 4;
+const STORE_SCHEMA_VERSION = 3;
 const VERSION_KEY = 'app-store-version';
 
 // Daftar semua localStorage key yang dikelola oleh Pinia stores

components/HakAkses/EditHakAkses.vue

@@ -4,76 +4,29 @@
       <thead>
         <tr>
           <th class="text-left font-weight-bold">Halaman</th>
-          <th class="text-center font-weight-bold" style="width: 80px;">Access</th>
-          <th class="text-center font-weight-bold" style="width: 80px;">View</th>
-          <th class="text-center font-weight-bold" style="width: 80px;">Add</th>
-          <th class="text-center font-weight-bold" style="width: 80px;">Edit</th>
-          <th class="text-center font-weight-bold" style="width: 80px;">Delete</th>
+          <th class="text-center font-weight-bold" style="width: 120px;">Akses</th>
         </tr>
       </thead>
       <tbody>
-        <template v-for="item in flatNavItems" :key="item.menuKey || item.name">
-          <tr :class="{ 'bg-grey-lighten-4': !item.menuKey }">
+        <template v-for="item in flatNavItems" :key="item.path || item.name">
+          <tr :class="{ 'bg-grey-lighten-4': !item.path }">
             <td :style="{ paddingLeft: item.level * 24 + 'px' }">
               <div class="d-flex align-center">
                 <v-icon :icon="item.icon" size="small" class="mr-2" color="grey"></v-icon>
-                <span :class="{ 'font-weight-bold': !item.menuKey }">{{ item.name }}</span>
+                <span :class="{ 'font-weight-bold': !item.path }">{{ item.name }}</span>
               </div>
             </td>
             <td class="text-center">
               <v-checkbox
-                v-if="item.menuKey"
-                :model-value="getPermission(item.menuKey, 'canAccess')"
-                @update:model-value="toggleAccess(item, 'canAccess', !!$event)"
-                hide-details
-                density="compact"
-                color="primary"
-                class="d-inline-flex"
-              ></v-checkbox>
-            </td>
-            <td class="text-center">
-              <v-checkbox
-                v-if="item.menuKey"
-                :model-value="getPermission(item.menuKey, 'canView')"
-                @update:model-value="toggleAccess(item, 'canView', !!$event)"
-                hide-details
-                density="compact"
-                color="primary"
-                class="d-inline-flex"
-              ></v-checkbox>
-            </td>
-            <td class="text-center">
-              <v-checkbox
-                v-if="item.menuKey"
-                :model-value="getPermission(item.menuKey, 'canAdd')"
-                @update:model-value="toggleAccess(item, 'canAdd', !!$event)"
-                hide-details
-                density="compact"
-                color="primary"
-                class="d-inline-flex"
-              ></v-checkbox>
-            </td>
-            <td class="text-center">
-              <v-checkbox
-                v-if="item.menuKey"
-                :model-value="getPermission(item.menuKey, 'canEdit')"
-                @update:model-value="toggleAccess(item, 'canEdit', !!$event)"
-                hide-details
-                density="compact"
-                color="primary"
-                class="d-inline-flex"
-              ></v-checkbox>
-            </td>
-            <td class="text-center">
-              <v-checkbox
-                v-if="item.menuKey"
-                :model-value="getPermission(item.menuKey, 'canDelete')"
-                @update:model-value="toggleAccess(item, 'canDelete', !!$event)"
+                v-if="item.path"
+                :model-value="isAllowed(item.path)"
+                @update:model-value="toggleAccess(item, !!$event)"
                 hide-details
                 density="compact"
                 color="primary"
                 class="d-inline-flex"
               ></v-checkbox>
+              <v-icon v-else icon="mdi-folder-open" size="small" color="grey-lighten-1"></v-icon>
             </td>
           </tr>
         </template>
@@ -84,24 +37,24 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { defaultNavItems } from '~/stores/navItems1';
-import type { HakAksesMenu } from '~/server/utils/schemas/permissionSchema';
+import { useNavItemsStore } from '~/stores/navItems1';
 
 const props = defineProps({
-  hakAksesMenu: {
-    type: Array as () => HakAksesMenu[],
+  pages: {
+    type: Array as () => any[], // Be flexible with legacy data
     default: () => []
   }
 });
 
-const emit = defineEmits(['update:hakAksesMenu']);
+const emit = defineEmits(['update:pages']);
+
+const navItemsStore = useNavItemsStore();
 
 interface FlatNavItem {
   name: string;
   path: string;
   icon: string;
   level: number;
-  menuKey?: string;
 }
 
 const flatNavItems = computed(() => {
@@ -113,8 +66,7 @@ const flatNavItems = computed(() => {
         name: item.name,
         path: item.path,
         icon: item.icon,
-        level,
-        menuKey: item.menuKey
+        level
       });
       if (item.children && item.children.length > 0) {
         walk(item.children, level + 1);
@@ -122,48 +74,32 @@ const flatNavItems = computed(() => {
     });
   };
   
-  walk(defaultNavItems);
+  walk(navItemsStore.getNavItems);
   return result;
 });
 
-const getPermission = (menuKey: string, action: keyof HakAksesMenu): boolean => {
-  if (!props.hakAksesMenu || !Array.isArray(props.hakAksesMenu)) return false;
-  const menuConfig = props.hakAksesMenu.find((p: HakAksesMenu) => p.menuKey === menuKey);
-  if (!menuConfig) return false;
-  return !!menuConfig[action];
+const isAllowed = (path: string) => {
+  if (!props.pages || !Array.isArray(props.pages)) return false;
+  
+  return props.pages.some(p => {
+    if (typeof p === 'string') return p === path;
+    if (p && typeof p === 'object' && p.path) return p.path === path;
+    return false;
+  });
 };
 
-const toggleAccess = (item: FlatNavItem, action: keyof HakAksesMenu, value: boolean) => {
-  if (!item.menuKey) return;
+const toggleAccess = (item: FlatNavItem, allowed: boolean) => {
+  let newPages = [...props.pages];
   
-  // Clone current array
-  let newMenus = JSON.parse(JSON.stringify(props.hakAksesMenu || []));
-  
-  let menuIndex = newMenus.findIndex((m: HakAksesMenu) => m.menuKey === item.menuKey);
-  
-  if (menuIndex === -1) {
-    if (value) {
-      newMenus.push({
-        menuKey: item.menuKey,
-        name: item.name,
-        canAccess: action === 'canAccess' ? true : false,
-        canView: action === 'canView' ? true : false,
-        canAdd: action === 'canAdd' ? true : false,
-        canEdit: action === 'canEdit' ? true : false,
-        canDelete: action === 'canDelete' ? true : false
-      });
+  if (allowed) {
+    if (!newPages.includes(item.path)) {
+      newPages.push(item.path);
     }
   } else {
-    newMenus[menuIndex][action] = value;
-    // Auto-grant canAccess and canView if Add/Edit/Delete is checked
-    if (value && (action === 'canAdd' || action === 'canEdit' || action === 'canDelete')) {
-        newMenus[menuIndex].canAccess = true;
-        newMenus[menuIndex].canView = true;
-    }
-    // If all are false, maybe remove it, but keeping it is fine too
+    newPages = newPages.filter(p => p !== item.path);
   }
   
-  emit('update:hakAksesMenu', newMenus);
+  emit('update:pages', newPages);
 };
 </script>
 

components/features/master/jadwalDokter/DialogDetailEvent.vue

@@ -0,0 +1,114 @@
+<script setup>
+/**
+ * DialogDetailEvent — Dialog untuk menampilkan detail jadwal dokter
+ * yang diklik di kalender. Mendukung tampilan Rutin dan Adhoc.
+ * Menggunakan v-model pattern untuk kontrol buka/tutup dialog dari parent.
+ */
+
+const props = defineProps({
+    /** Kontrol buka/tutup dialog (v-model) */
+    modelValue: { type: Boolean, default: false },
+    /** Data event yang sedang ditampilkan */
+    event: { type: Object, default: null },
+});
+
+const emit = defineEmits(['update:modelValue', 'delete']);
+
+/** Computed v-model proxy untuk dialog visibility */
+const dialogOpen = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+
+/**
+ * Emit event delete ke parent untuk menghapus jadwal.
+ */
+const handleDelete = () => {
+    emit('delete', props.event?.id);
+    dialogOpen.value = false;
+};
+</script>
+
+<template>
+    <v-dialog v-model="dialogOpen" max-width="420px">
+        <v-card rounded="lg" class="pa-0">
+            <v-card-title class="pa-5" :class="event?.tipe === 'Adhoc' ? 'bg-secondary' : 'bg-primary'"
+                style="color:white;">
+                <div class="d-flex justify-space-between align-center w-100">
+                    <div class="d-flex align-center gap-2">
+                        <v-icon>{{ event?.tipe === 'Adhoc' ? 'mdi-calendar-clock' : 'mdi-calendar-sync'
+                        }}</v-icon>
+                        <span class="ml-2 text-h6 font-weight-bold">Jadwal {{ event?.tipe }}</span>
+                    </div>
+                    <v-btn icon="mdi-close" variant="text" size="small" style="color:white;"
+                        @click="dialogOpen = false" />
+                </div>
+            </v-card-title>
+
+            <v-card-text class="pa-6" v-if="event">
+                <v-list density="compact" class="pa-0">
+                    <v-list-item class="px-0">
+                        <template #prepend>
+                            <v-icon color="primary" size="small" class="mr-3">mdi-hospital-building</v-icon>
+                        </template>
+                        <div class="text-caption text-grey-darken-1">Poli / Klinik</div>
+                        <div class="text-body-2 font-weight-bold">{{ event.poli }}</div>
+                    </v-list-item>
+
+                    <v-divider class="my-2" />
+
+                    <v-list-item class="px-0">
+                        <template #prepend>
+                            <v-icon color="primary" size="small" class="mr-3">mdi-doctor</v-icon>
+                        </template>
+                        <div class="text-caption text-grey-darken-1">Dokter</div>
+                        <div class="text-body-2 font-weight-bold">{{ event.dokter }}</div>
+                    </v-list-item>
+
+                    <v-divider class="my-2" />
+
+                    <v-list-item class="px-0">
+                        <template #prepend>
+                            <v-icon color="primary" size="small" class="mr-3">mdi-calendar</v-icon>
+                        </template>
+                        <div class="text-caption text-grey-darken-1">Tanggal</div>
+                        <div class="text-body-2 font-weight-bold">{{ event.tanggal }}</div>
+                    </v-list-item>
+
+                    <!-- Rutin: tampilkan hari -->
+                    <template v-if="event.tipe === 'Rutin' && event.hari">
+                        <v-divider class="my-2" />
+                        <v-list-item class="px-0">
+                            <template #prepend>
+                                <v-icon color="primary" size="small" class="mr-3">mdi-calendar-week</v-icon>
+                            </template>
+                            <div class="text-caption text-grey-darken-1">Hari Praktek</div>
+                            <div class="text-body-2 font-weight-bold">{{ event.hari }}</div>
+                        </v-list-item>
+                    </template>
+
+                    <!-- Adhoc: tampilkan shift -->
+                    <template v-if="event.tipe === 'Adhoc' && event.shift">
+                        <v-divider class="my-2" />
+                        <v-list-item class="px-0">
+                            <template #prepend>
+                                <v-icon color="secondary" size="small" class="mr-3">mdi-clock-outline</v-icon>
+                            </template>
+                            <div class="text-caption text-grey-darken-1">Waktu</div>
+                            <div class="text-body-2 font-weight-bold">{{ event.shift }}</div>
+                        </v-list-item>
+                    </template>
+                </v-list>
+            </v-card-text>
+
+            <v-divider />
+
+            <v-card-actions class="pa-5 justify-space-between">
+                <v-btn color="error" variant="text" prepend-icon="mdi-trash-can-outline" @click="handleDelete">
+                    Hapus
+                </v-btn>
+                <v-btn color="primary" variant="flat" @click="dialogOpen = false">Tutup</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>

components/features/master/jadwalDokter/DialogTambahJadwal.vue

@@ -0,0 +1,336 @@
+<script setup>
+/**
+ * DialogTambahJadwal — Dialog form untuk menambahkan jadwal dokter baru.
+ * Mendukung dua tipe jadwal: Rutin (mingguan berulang) dan Adhoc (satu kali).
+ * Menggunakan v-model pattern untuk kontrol buka/tutup dialog dari parent.
+ */
+
+const DAYS_OF_WEEK = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+
+const props = defineProps({
+    /** Kontrol buka/tutup dialog (v-model) */
+    modelValue: { type: Boolean, default: false },
+    /** Daftar klinik untuk referensi nama poli */
+    clinicList: { type: Array, default: () => [] },
+    /** ID poli yang sedang dipilih */
+    selectedPoli: { type: [String, Number, null], default: null },
+    /** Nama dokter yang sedang dipilih */
+    selectedDoctor: { type: [String, null], default: null },
+    /** Tanggal yang diklik di kalender (opsional, sebagai default adhoc) */
+    clickedDate: { type: [Date, null], default: null },
+    /** Mode tampilan saat ini ('list' atau 'calendar') */
+    viewMode: { type: String, default: 'list' },
+    /** Daftar jadwal saat ini (untuk preview kalender) */
+    jadwalList: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue', 'save']);
+
+/** Computed v-model proxy untuk dialog visibility */
+const dialogOpen = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+
+/** State form tambah jadwal */
+const form = reactive({
+    poliId: null,
+    dokter: null,
+    tipe: 'Rutin',
+    hari: '',
+    shifts: [{ jamMulai: '', jamSelesai: '' }],
+    adhocTanggal: '',
+    adhocShifts: [{ jamMulai: '', jamSelesai: '' }],
+});
+
+/** Computed daftar dokter berdasarkan poli yang dipilih */
+const availableDoctors = computed(() => {
+    if (!form.poliId) return [];
+    const clinic = props.clinicList.find(c => c.id === form.poliId);
+    return clinic?.doctors || [];
+});
+
+/** Error validasi form */
+const formErrors = ref({});
+
+/**
+ * Format tanggal ke string YYYY-MM-DD.
+ * @param {Date} date
+ * @returns {string}
+ */
+const toDateStr = (date) => {
+    const d = new Date(date);
+    const tzOffset = d.getTimezoneOffset() * 60000;
+    return new Date(d.getTime() - tzOffset).toISOString().slice(0, 10);
+};
+
+/** Reset form saat dialog dibuka */
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.viewMode === 'calendar') {
+            form.poliId = props.selectedPoli || null;
+            form.dokter = props.selectedDoctor || null;
+        } else {
+            form.poliId = null;
+            form.dokter = null;
+        }
+
+        form.tipe = 'Rutin';
+        form.hari = '';
+        form.shifts = [{ jamMulai: '', jamSelesai: '' }];
+        formErrors.value = {};
+
+        if (props.clickedDate) {
+            const dateStr = toDateStr(props.clickedDate);
+            form.adhocTanggal = dateStr;
+            form.adhocShifts = [{ jamMulai: '08:00', jamSelesai: '12:00' }];
+        } else {
+            const dateStr = toDateStr(new Date());
+            form.adhocTanggal = dateStr;
+            form.adhocShifts = [{ jamMulai: '08:00', jamSelesai: '12:00' }];
+        }
+    }
+});
+
+/**
+ * Validasi form sebelum simpan.
+ * @returns {boolean} true jika valid
+ */
+const validateForm = () => {
+    const errors = {};
+    if (!form.poliId) errors.poli = 'Pilih poli terlebih dahulu';
+    if (!form.dokter) errors.dokter = 'Pilih dokter terlebih dahulu';
+
+    if (form.tipe === 'Rutin') {
+        if (!form.hari) errors.hari = 'Pilih hari kerja';
+        form.shifts.forEach((shift, idx) => {
+            if (!shift.jamMulai) errors[`shift_${idx}_jamMulai`] = 'Pilih jam mulai';
+            if (!shift.jamSelesai) errors[`shift_${idx}_jamSelesai`] = 'Pilih jam selesai';
+            if (shift.jamMulai && shift.jamSelesai && shift.jamMulai >= shift.jamSelesai) {
+                errors[`shift_${idx}_jamSelesai`] = 'Harus setelah jam mulai';
+            }
+        });
+    } else {
+        if (!form.adhocTanggal) errors.adhocTanggal = 'Pilih tanggal';
+        form.adhocShifts.forEach((shift, idx) => {
+            if (!shift.jamMulai) errors[`adhocShift_${idx}_jamMulai`] = 'Pilih jam mulai';
+            if (!shift.jamSelesai) errors[`adhocShift_${idx}_jamSelesai`] = 'Pilih jam selesai';
+            if (shift.jamMulai && shift.jamSelesai && shift.jamMulai >= shift.jamSelesai) {
+                errors[`adhocShift_${idx}_jamSelesai`] = 'Harus setelah jam mulai';
+            }
+        });
+    }
+    formErrors.value = errors;
+    return Object.keys(errors).length === 0;
+};
+
+/**
+ * Menangani submit form — validasi lalu emit data ke parent.
+ */
+const handleSave = () => {
+    if (!validateForm()) return;
+
+    const poliName = props.clinicList.find(c => c.id === form.poliId)?.title ?? '';
+    const emittedData = [];
+
+    if (form.tipe === 'Rutin') {
+        form.shifts.forEach((shift, index) => {
+            emittedData.push({
+                id: Date.now() + index,
+                poliId: form.poliId,
+                poliName,
+                dokter: form.dokter,
+                tipe: 'Rutin',
+                hari: [form.hari],
+                jamMulai: shift.jamMulai || null,
+                jamSelesai: shift.jamSelesai || null,
+            });
+        });
+    } else {
+        form.adhocShifts.forEach((shift, index) => {
+            emittedData.push({
+                id: Date.now() + index,
+                poliId: form.poliId,
+                poliName,
+                dokter: form.dokter,
+                tipe: 'Adhoc',
+                mulai: `${form.adhocTanggal}T${shift.jamMulai}:00`,
+                selesai: `${form.adhocTanggal}T${shift.jamSelesai}:00`,
+            });
+        });
+    }
+
+    emit('save', emittedData);
+    dialogOpen.value = false;
+};
+
+import MiniCalendarPreview from './MiniCalendarPreview.vue';
+</script>
+
+<template>
+    <v-dialog v-model="dialogOpen" max-width="520px" persistent>
+        <v-card rounded="lg" class="pa-0">
+            <!-- Header -->
+            <v-card-title class="bg-primary text-white pa-5">
+                <div class="d-flex justify-space-between align-center w-100">
+                    <div class="d-flex align-center gap-2">
+                        <v-icon>mdi-calendar-plus</v-icon>
+                        <span class="text-h6 font-weight-bold">Tambah Jadwal Dokter</span>
+                    </div>
+                    <v-btn icon="mdi-close" variant="text" size="small" class="text-white"
+                        @click="dialogOpen = false" />
+                </div>
+            </v-card-title>
+
+            <v-card-text class="pa-6">
+
+                <!-- Tipe Jadwal -->
+                <div class="text-caption text-grey-darken-1 mb-2 font-weight-medium">Tipe Jadwal</div>
+                <v-btn-toggle v-model="form.tipe" mandatory color="primary" variant="outlined" class="mb-5 w-100"
+                    divided>
+                    <v-btn value="Rutin" class="flex-grow-1">
+                        <v-icon start>mdi-calendar-sync</v-icon>
+                        Rutin
+                    </v-btn>
+                    <v-btn value="Adhoc" class="flex-grow-1">
+                        <v-icon start>mdi-calendar-clock</v-icon>
+                        Adhoc
+                    </v-btn>
+                </v-btn-toggle>
+
+                <!-- Info poli & dokter -->
+                <v-row class="mb-4">
+                    <v-col cols="12" sm="12">
+                        <div class="text-caption text-grey mb-1">Poli / Klinik <span class="text-error">*</span></div>
+                        <v-select v-model="form.poliId" :items="clinicList" item-title="title" item-value="id"
+                            density="compact" variant="outlined" hide-details="auto" placeholder="Pilih Poli"
+                            prepend-inner-icon="mdi-hospital-building" @update:model-value="form.dokter = null"
+                            :error-messages="formErrors.poli" />
+                    </v-col>
+                    <v-col cols="12" sm="12">
+                        <div class="text-caption text-grey mb-1">Dokter <span class="text-error">*</span></div>
+                        <v-select v-model="form.dokter" :items="availableDoctors" density="compact" variant="outlined"
+                            hide-details="auto" placeholder="Pilih Dokter" prepend-inner-icon="mdi-doctor"
+                            :disabled="!form.poliId" :error-messages="formErrors.dokter" />
+                    </v-col>
+                </v-row>
+
+                <!-- ── Form Rutin ──────────────────────────────── -->
+                <template v-if="form.tipe === 'Rutin'">
+                    <div class="text-caption text-grey-darken-1 mb-3 font-weight-medium">Pilih Hari Kerja</div>
+                    <div class="d-flex flex-wrap gap-2 mb-1">
+                        <v-chip class="mr-1" v-for="day in DAYS_OF_WEEK" :key="day"
+                            :color="form.hari === day ? 'primary' : 'primary'"
+                            :variant="form.hari === day ? 'flat' : 'outlined'" size="small" style="cursor:pointer;"
+                            @click="form.hari = day">
+                            {{ day }}
+                        </v-chip>
+                    </div>
+                    <div v-if="formErrors.hari" class="text-caption text-error mb-4">{{ formErrors.hari }}</div>
+
+                    <MiniCalendarPreview v-if="form.poliId && form.dokter" :tipe="form.tipe" :hari="form.hari"
+                        :adhoc-tanggal="form.adhocTanggal" :jadwal-list="jadwalList" :poli-id="form.poliId"
+                        :dokter="form.dokter" />
+
+                    <!-- Jam required -->
+                    <div v-for="(shift, index) in form.shifts" :key="index" class="d-flex align-center gap-4 mt-4">
+                        <div class="flex-grow-1">
+                            <v-row>
+                                <v-col cols="6">
+                                    <div class="text-caption text-grey mb-1">Jam Mulai</div>
+                                    <v-text-field v-model="shift.jamMulai" type="time" variant="outlined"
+                                        density="compact" hide-details required
+                                        :error-messages="formErrors[`shift_${index}_jamMulai`]" />
+                                    <div v-if="formErrors[`shift_${index}_jamMulai`]"
+                                        class="text-caption text-error mt-1">{{ formErrors[`shift_${index}_jamMulai`] }}
+                                    </div>
+                                </v-col>
+                                <v-col cols="6">
+                                    <div class="text-caption text-grey mb-1">Jam Selesai</div>
+                                    <v-text-field v-model="shift.jamSelesai" type="time" variant="outlined"
+                                        density="compact" hide-details required
+                                        :error-messages="formErrors[`shift_${index}_jamSelesai`]" />
+                                    <div v-if="formErrors[`shift_${index}_jamSelesai`]"
+                                        class="text-caption text-error mt-1">{{ formErrors[`shift_${index}_jamSelesai`]
+                                        }}</div>
+                                </v-col>
+                            </v-row>
+                        </div>
+                        <div class="mt-5" v-if="form.shifts.length > 1">
+                            <v-btn icon="mdi-trash-can-outline" variant="text" color="error" size="small"
+                                @click="form.shifts.splice(index, 1)" />
+                        </div>
+                    </div>
+
+                    <div class="mt-4">
+                        <v-btn variant="outlined" color="primary" size="small" class="text-none"
+                            @click="form.shifts.push({ jamMulai: '', jamSelesai: '' })">
+                            + Tambah Jadwal {{ form.hari ? `Hari ${form.hari}` : '' }}
+                        </v-btn>
+                    </div>
+                </template>
+
+                <!-- ── Form Adhoc ──────────────────────────────── -->
+                <template v-else>
+                    <v-row class="mb-2">
+                        <v-col cols="12">
+                            <v-text-field v-model="form.adhocTanggal" label="Tanggal" type="date" variant="outlined"
+                                density="compact" prepend-inner-icon="mdi-calendar" hide-details="auto"
+                                :error-messages="formErrors.adhocTanggal" />
+                        </v-col>
+                        <v-col cols="12">
+                            <MiniCalendarPreview v-if="form.poliId && form.dokter" :tipe="form.tipe" :hari="form.hari"
+                                :adhoc-tanggal="form.adhocTanggal" :jadwal-list="jadwalList" :poli-id="form.poliId"
+                                :dokter="form.dokter" />
+                        </v-col>
+                    </v-row>
+                    <div v-for="(shift, index) in form.adhocShifts" :key="index" class="d-flex align-center gap-4 mt-2">
+                        <div class="flex-grow-1">
+                            <v-row>
+                                <v-col cols="6">
+                                    <div class="text-caption text-grey mb-1">Jam Mulai</div>
+                                    <v-text-field v-model="shift.jamMulai" type="time" variant="outlined"
+                                        density="compact" hide-details required
+                                        :error-messages="formErrors[`adhocShift_${index}_jamMulai`]" />
+                                    <div v-if="formErrors[`adhocShift_${index}_jamMulai`]"
+                                        class="text-caption text-error mt-1">{{
+                                            formErrors[`adhocShift_${index}_jamMulai`] }}</div>
+                                </v-col>
+                                <v-col cols="6">
+                                    <div class="text-caption text-grey mb-1">Jam Selesai</div>
+                                    <v-text-field v-model="shift.jamSelesai" type="time" variant="outlined"
+                                        density="compact" hide-details required
+                                        :error-messages="formErrors[`adhocShift_${index}_jamSelesai`]" />
+                                    <div v-if="formErrors[`adhocShift_${index}_jamSelesai`]"
+                                        class="text-caption text-error mt-1">{{
+                                            formErrors[`adhocShift_${index}_jamSelesai`] }}</div>
+                                </v-col>
+                            </v-row>
+                        </div>
+                        <div class="mt-5" v-if="form.adhocShifts.length > 1">
+                            <v-btn icon="mdi-trash-can-outline" variant="text" color="error" size="small"
+                                @click="form.adhocShifts.splice(index, 1)" />
+                        </div>
+                    </div>
+
+                    <div class="mt-4">
+                        <v-btn variant="outlined" color="primary" size="small" class="text-none"
+                            @click="form.adhocShifts.push({ jamMulai: '', jamSelesai: '' })">
+                            + Tambah Shift Adhoc
+                        </v-btn>
+                    </div>
+                </template>
+
+            </v-card-text>
+
+            <v-divider />
+
+            <v-card-actions class="pa-5 justify-end gap-2">
+                <v-btn variant="text" color="grey" @click="dialogOpen = false">Batal</v-btn>
+                <v-btn color="primary" variant="flat" prepend-icon="mdi-content-save" @click="handleSave">
+                    Simpan Jadwal
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>

components/features/master/jadwalDokter/JadwalDokterCalendar.vue

@@ -0,0 +1,344 @@
+<script setup>
+/**
+ * JadwalDokterCalendar — Mode tampilan kalender untuk jadwal dokter.
+ * Menampilkan filter poli/dokter dan v-calendar Vuetify dengan event
+ * jadwal rutin (primary) dan adhoc (secondary).
+ * Menerima data dari parent dan emit interaksi kembali ke parent.
+ */
+
+const MONTH_NAMES = [
+    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+];
+
+const props = defineProps({
+    /** Daftar klinik/poli untuk filter */
+    clinicList: { type: Array, default: () => [] },
+    /** Daftar event kalender yang sudah di-generate oleh parent */
+    calendarEvents: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits([
+    'update:selectedPoli',
+    'update:selectedDoctor',
+    'date-click',
+    'event-click',
+]);
+
+// ── Filter State (local, synced ke parent via emit) ──────────────────────
+
+/** Poli yang dipilih di mode calendar */
+const selectedPoli = defineModel('selectedPoli', { type: [String, Number, null], default: null });
+
+/** Dokter yang dipilih di mode calendar */
+const selectedDoctor = defineModel('selectedDoctor', { type: [String, null], default: null });
+
+
+const selectedElement = ref(null)
+const selectedOpen = ref(false)
+
+/**
+ * Daftar dokter berdasarkan poli yang dipilih.
+ * @returns {string[]} Kosong jika poli belum dipilih
+ */
+const doctorList = computed(() => {
+    if (!selectedPoli.value) return [];
+    const clinic = props.clinicList.find(c => c.id === selectedPoli.value);
+    return clinic?.doctors ?? [];
+});
+
+/** Reset dokter saat poli berubah */
+watch(selectedPoli, () => { selectedDoctor.value = null; });
+
+// ── Navigasi Kalender ────────────────────────────────────────────────────
+
+const isDailyEventsOpen = ref(false);
+const dailyEvents = ref([]);
+const selectedDateFormatted = ref('');
+
+
+/** Tanggal referensi untuk navigasi bulan */
+const viewDate = ref(new Date());
+
+/**
+ * Key dinamis untuk v-calendar. Vuetify v-calendar punya internal navigation
+ * state sendiri — mengubah :model-value saja tidak cukup. Dengan mengganti :key,
+ * kita paksa komponen re-mount sehingga bulan yang tampil ikut berubah.
+ */
+const calendarKey = computed(() =>
+    `cal-${viewDate.value.getFullYear()}-${viewDate.value.getMonth()}`
+);
+
+/** Judul bulan & tahun aktif */
+const calendarTitle = computed(() =>
+    `${MONTH_NAMES[viewDate.value.getMonth()]} ${viewDate.value.getFullYear()}`
+);
+
+/** Navigasi ke bulan sebelumnya */
+const prevMonth = () => {
+    const d = new Date(viewDate.value);
+    d.setMonth(d.getMonth() - 1);
+    viewDate.value = new Date(d);
+};
+
+/** Navigasi ke bulan berikutnya */
+const nextMonth = () => {
+    const d = new Date(viewDate.value);
+    d.setMonth(d.getMonth() + 1);
+    viewDate.value = new Date(d);
+};
+
+/**
+ * Menangani klik pada tanggal di kalender.
+ * @param {Date|string|object} info - Payload dari @click:date
+ */
+const handleDateClick = (info, { date }) => {
+    emit('date-click', date);
+};
+
+/**
+ * Menangani klik pada event di kalender.
+ * @param {object} payload - Payload dari @click:event v-calendar
+ */
+const handleEventClick = (nativeEvent, { event }) => {
+    const ev = event;
+    if (!ev?.extendedProps) return;
+    const d = ev.start instanceof Date ? ev.start : new Date(ev.start);
+    emit('event-click', {
+        ...ev.extendedProps,
+        tanggal: d.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }),
+    });
+};
+/**
+ * Menangani klik "+X lainnya" pada kalender.
+ * @param {Date|string|object} info - Payload dari @click:more
+ */
+const handleMoreClick = (nativeEvent, { date }) => {
+    selectedDateFormatted.value = date;
+    console.log("date", date)
+    console.log("calendarEvents.value", props.calendarEvents)
+    dailyEvents.value = props.calendarEvents.filter(e =>
+        e.start.toISOString().split("T")[0] === selectedDateFormatted.value
+    );
+
+    const open = () => {
+        // selectedEvent.value = event
+        selectedElement.value = nativeEvent.target
+        requestAnimationFrame(() => requestAnimationFrame(() => selectedOpen.value = true))
+    }
+    if (selectedOpen.value) {
+        selectedOpen.value = false
+        requestAnimationFrame(() => requestAnimationFrame(() => open()))
+    } else {
+        open()
+    }
+    nativeEvent.stopPropagation()
+};
+
+/**
+ * Menangani klik pada event di dalam dialog harian.
+ */
+const handleDailyEventClick = (ev) => {
+    isDailyEventsOpen.value = false;
+    const payload = { event: ev };
+    handleEventClick(payload);
+};
+
+</script>
+
+<template>
+    <div>
+        <!-- ── Filter Card ─────────────────────────────────────── -->
+        <v-row class="mb-2">
+            <v-col cols="12">
+                <v-card class="pa-6" color="white">
+                    <div class="d-flex align-center mb-4">
+                        <v-icon color="primary" class="mr-2">mdi-filter-variant</v-icon>
+                        <h3 class="text-subtitle-1 font-weight-bold text-primary">FILTER JADWAL</h3>
+                    </div>
+
+                    <v-row>
+                        <v-col cols="12" sm="6">
+                            <v-select v-model="selectedPoli" :items="clinicList" item-title="title" item-value="id"
+                                label="Pilih Poli / Klinik" variant="outlined" density="compact" clearable
+                                prepend-inner-icon="mdi-hospital-building" hide-details />
+                        </v-col>
+                        <v-col cols="12" sm="6">
+                            <v-select v-model="selectedDoctor" :items="doctorList" label="Pilih Dokter"
+                                variant="outlined" density="compact" clearable prepend-inner-icon="mdi-doctor"
+                                :disabled="!selectedPoli" hide-details
+                                :placeholder="selectedPoli ? 'Pilih dokter...' : 'Pilih poli terlebih dahulu'" />
+                        </v-col>
+                    </v-row>
+
+                    <div v-if="selectedPoli || selectedDoctor" class="mt-4 d-flex align-center gap-2 flex-wrap">
+                        <span class="text-caption text-grey-darken-1">Filter aktif:</span>
+                        <v-chip v-if="selectedPoli" size="small" color="primary" variant="tonal" closable
+                            @click:close="selectedPoli = null">
+                            <v-icon start size="x-small">mdi-hospital-building</v-icon>
+                            {{clinicList.find(c => c.id === selectedPoli)?.title}}
+                        </v-chip>
+                        <v-chip v-if="selectedDoctor" size="small" color="secondary" variant="tonal" closable
+                            @click:close="selectedDoctor = null">
+                            <v-icon start size="x-small">mdi-doctor</v-icon>
+                            {{ selectedDoctor }}
+                        </v-chip>
+                    </div>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <!-- ── Calendar Card ───────────────────────────────────── -->
+        <v-row v-if="selectedDoctor && selectedPoli">
+            <v-col cols="12">
+                <v-card elevation="2" rounded="lg" color="white">
+
+                    <!-- Toolbar -->
+                    <div class="d-flex align-center justify-space-between px-6 pt-5 pb-4">
+
+                        <div class="d-flex align-center">
+                            <v-btn icon="mdi-chevron-left" variant="text" size="small" @click="prevMonth" />
+                            <v-btn icon="mdi-chevron-right" variant="text" size="small" @click="nextMonth" />
+                            <span class="text-body-1 font-weight-bold" style="min-width:150px;text-align:center;">
+                                {{ calendarTitle }}
+                            </span>
+                        </div>
+                        <!-- Legend -->
+                        <div class="d-flex align-center gap-3">
+                            <div class="d-flex align-center gap-1">
+                                <span class="legend-dot bg-primary"></span>
+                                <span class="text-caption ml-1">Rutin</span>
+                            </div>
+                            <div class="d-flex align-center gap-1 ml-1">
+                                <span class="legend-dot bg-secondary"></span>
+                                <span class="text-caption ml-1">Adhoc</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <v-divider />
+
+                    <!-- v-calendar Vuetify -->
+                    <v-calendar :interval-height="100" locale="id" :key="calendarKey" :model-value="viewDate"
+                        :events="calendarEvents" view-mode="month" event-more-text="{0} lainnya" class="jadwal-calendar"
+                        @click:date="handleDateClick" @click:event="handleEventClick" @click:more="handleMoreClick" />
+                    <v-menu v-model="selectedOpen" :activator="selectedElement" :close-on-content-click="false"
+                        location="end">
+                        <v-card color="grey-lighten-4" min-width="350px" flat>
+                            <v-toolbar color="primary" dark>
+                                <v-btn icon>
+                                    <v-icon>mdi-calendar</v-icon>
+                                </v-btn>
+                                <v-toolbar-title>Jadwal Lainnya</v-toolbar-title>
+                            </v-toolbar>
+                            <v-card-text style="max-height: 300px; overflow-y: auto;">
+                                <v-list v-if="dailyEvents.length > 0" lines="two" bg-color="transparent">
+                                    <v-list-item v-for="(ev, idx) in dailyEvents" :key="idx" class="mb-3 rounded border"
+                                        :class="ev.color === 'primary' ? 'border-primary' : 'border-secondary'"
+                                        @click="handleDailyEventClick(ev)" hover>
+                                        <v-list-item-title class="font-weight-bold">
+                                            <v-chip :color="ev.color" size="small" class="mr-2">{{
+                                                ev.extendedProps?.tipe }}</v-chip>
+                                            {{ ev.name }}
+                                        </v-list-item-title>
+                                        <v-list-item-subtitle class="mt-1">
+                                            <v-icon size="x-small" class="mr-1">mdi-doctor</v-icon>{{
+                                                ev.extendedProps?.dokter }}
+                                        </v-list-item-subtitle>
+                                        <v-list-item-subtitle>
+                                            <v-icon size="x-small" class="mr-1">mdi-hospital-building</v-icon>{{
+                                                ev.extendedProps?.poli }}
+                                        </v-list-item-subtitle>
+                                    </v-list-item>
+                                </v-list>
+                                <div v-else class="text-center pa-6 text-grey">
+                                    Tidak ada jadwal tambahan.
+                                </div>
+                            </v-card-text>
+                        </v-card>
+                    </v-menu>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <template v-else>
+            <v-card min-height="400px">
+                <v-card-text>
+                    <v-row>
+                        <v-col cols="12">
+                            <div class="text-center pa-12 d-flex align-center justify-center" style="height: 400px;">
+                                <div>
+                                    <v-icon size="48" color="grey-lighten-1"
+                                        class="mb-2">mdi-calendar-blank-outline</v-icon>
+                                    <div class="text-body-2 text-grey-lighten-1">Silahkan Pilih Poli dan Dokter terlebih
+                                        dahulu</div>
+                                </div>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </template>
+    </div>
+</template>
+
+<style scoped>
+:deep(.v-calendar-weekly__day) {
+    height: 125px;
+}
+
+.jadwal-calendar {
+    border-radius: 0 0 8px 8px;
+}
+
+.legend-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+}
+
+/* Header hari */
+:deep(.v-calendar-month__weekday) {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #283593;
+    background-color: #e8eaf6;
+    padding: 6px 0;
+}
+
+/* Nomor tanggal */
+:deep(.v-calendar-month__day-label) {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: #424242;
+    cursor: pointer;
+}
+
+:deep(.v-calendar-month__day-label:hover) {
+    background-color: #e8eaf6;
+    border-radius: 50%;
+}
+
+/* Hari ini */
+:deep(.v-calendar-month__day--today .v-calendar-month__day-label) {
+    background-color: #1a237e;
+    color: white;
+    border-radius: 50%;
+}
+
+/* Event */
+:deep(.v-calendar-month__event) {
+    font-size: 0.68rem !important;
+    font-weight: 600;
+    border-radius: 4px !important;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+}
+
+:deep(.v-calendar-month__event:hover) {
+    opacity: 0.82;
+}
+</style>

components/features/master/jadwalDokter/JadwalDokterList.vue

@@ -0,0 +1,313 @@
+<script setup>
+/**
+ * JadwalDokterList — Mode tampilan daftar (tabel) untuk jadwal dokter.
+ * Menampilkan filter (poli klinik, tanggal, nama dokter) dan tabel
+ * dengan kolom NO, POLI, NAMA DOKTER, JADWAL RUTIN, AKSI.
+ * Mode ini menjadi tampilan default halaman Jadwal Dokter.
+ */
+
+const props = defineProps({
+    /** Daftar klinik/poli dari store */
+    clinicList: { type: Array, default: () => [] },
+    /** Daftar jadwal yang sudah ditambahkan */
+    jadwalList: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['edit', 'add']);
+
+// ── Filter State ─────────────────────────────────────────────────────────
+
+/** Poli yang dipilih untuk filter */
+const filterPoli = ref(null);
+
+/** Tanggal yang dipilih untuk filter */
+const filterDate = ref(null);
+
+/** Keyword pencarian nama dokter */
+const filterDokter = ref('');
+
+// ── Pagination ───────────────────────────────────────────────────────────
+
+/** Halaman aktif saat ini */
+const currentPage = ref(1);
+
+/** Jumlah baris per halaman */
+const itemsPerPage = ref(10);
+
+/** Opsi jumlah baris per halaman */
+const perPageOptions = [5, 10, 25, 50];
+
+// ── Mapping Hari ─────────────────────────────────────────────────────────
+
+const DAY_MAP = {
+    0: 'Minggu', 1: 'Senin', 2: 'Selasa', 3: 'Rabu',
+    4: 'Kamis', 5: 'Jumat', 6: 'Sabtu'
+};
+
+// ── Computed: Data Tabel ─────────────────────────────────────────────────
+
+/**
+ * Membangun data tabel dari jadwalList, dikelompokkan per dokter + poli.
+ * Setiap baris menampilkan 1 dokter dengan ringkasan jadwal rutinnya.
+ * @returns {Array<{ id, poliName, poliId, dokter, jadwalRutin, raw }>}
+ */
+const tableData = computed(() => {
+    /** Gabungkan jadwal berdasarkan key unik dokter+poli */
+    const grouped = {};
+
+    props.jadwalList.forEach(j => {
+        const key = `${j.poliId}-${j.dokter}`;
+        if (!grouped[key]) {
+            grouped[key] = {
+                id: j.id,
+                poliName: j.poliName,
+                poliId: j.poliId,
+                dokter: j.dokter,
+                hariSet: new Set(),
+                jamMulai: null,
+                jamSelesai: null,
+                raw: [],
+            };
+        }
+        grouped[key].raw.push(j);
+
+        if (j.tipe === 'Rutin' && j.hari) {
+            j.hari.forEach(h => grouped[key].hariSet.add(h));
+            if (j.jamMulai) grouped[key].jamMulai = j.jamMulai;
+            if (j.jamSelesai) grouped[key].jamSelesai = j.jamSelesai;
+        }
+    });
+
+    return Object.values(grouped).map(g => {
+        const hariArr = Array.from(g.hariSet);
+        /** Format jadwal rutin: "Senin - Kamis\n08:00 - 14:00 WIB" */
+        let jadwalRutin = '';
+        if (hariArr.length > 0) {
+            jadwalRutin = hariArr.join(', ');
+            if (g.jamMulai && g.jamSelesai) {
+                jadwalRutin += `\n${g.jamMulai} - ${g.jamSelesai} WIB`;
+            }
+        } else {
+            jadwalRutin = '-';
+        }
+
+        return {
+            id: g.id,
+            poliName: g.poliName,
+            poliId: g.poliId,
+            dokter: g.dokter,
+            jadwalRutin,
+            raw: g.raw,
+        };
+    });
+});
+
+/**
+ * Data tabel yang sudah difilter berdasarkan poli, tanggal, dan keyword nama dokter.
+ * @returns {Array}
+ */
+const filteredData = computed(() => {
+    let data = tableData.value;
+
+    // Filter poli
+    if (filterPoli.value) {
+        data = data.filter(d => d.poliId === filterPoli.value);
+    }
+
+    // Filter tanggal — cocokkan dengan hari dari jadwal rutin
+    if (filterDate.value) {
+        const date = new Date(filterDate.value);
+        const dayName = DAY_MAP[date.getDay()];
+        data = data.filter(d =>
+            d.raw.some(j => j.tipe === 'Rutin' && j.hari?.includes(dayName))
+        );
+    }
+
+    // Filter nama dokter
+    if (filterDokter.value) {
+        const keyword = filterDokter.value.toLowerCase();
+        data = data.filter(d => d.dokter.toLowerCase().includes(keyword));
+    }
+
+    return data;
+});
+
+/** Total data setelah filter */
+const totalItems = computed(() => filteredData.value.length);
+
+/** Total halaman */
+const totalPages = computed(() => Math.max(1, Math.ceil(totalItems.value / itemsPerPage.value)));
+
+/** Data untuk halaman aktif (sliced) */
+const paginatedData = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage.value;
+    return filteredData.value.slice(start, start + itemsPerPage.value);
+});
+
+/** Label info pagination: "Menampilkan 1-10 dari 124 dokter spesialis" */
+const paginationLabel = computed(() => {
+    if (totalItems.value === 0) return 'Tidak ada data';
+    const start = (currentPage.value - 1) * itemsPerPage.value + 1;
+    const end = Math.min(currentPage.value * itemsPerPage.value, totalItems.value);
+    return `Menampilkan ${start}-${end} dari ${totalItems.value} dokter spesialis`;
+});
+
+/** Reset halaman saat filter berubah */
+watch([filterPoli, filterDate, filterDokter], () => {
+    currentPage.value = 1;
+});
+
+/**
+ * Navigasi ke halaman tertentu.
+ * @param {number} page
+ */
+const goToPage = (page) => {
+    if (page >= 1 && page <= totalPages.value) {
+        currentPage.value = page;
+    }
+};
+</script>
+
+<template>
+    <div>
+        <!-- ── Filter Card ─────────────────────────────────────── -->
+        <v-card class="pa-5 mb-6" elevation="2" rounded="lg" color="white">
+            <v-row align="center">
+                <v-col cols="12" sm="4">
+                    <div class="text-caption text-grey-darken-1 mb-1 font-weight-medium">Poli Klinik</div>
+                    <v-select v-model="filterPoli" :items="clinicList" item-title="title" item-value="id"
+                        placeholder="Semua Poli" variant="outlined" density="compact" clearable
+                        prepend-inner-icon="mdi-hospital-building" hide-details />
+                </v-col>
+                <v-col cols="12" sm="4">
+                    <div class="text-caption text-grey-darken-1 mb-1 font-weight-medium">Tanggal</div>
+                    <v-text-field v-model="filterDate" type="date" placeholder="Pilih Tanggal" variant="outlined"
+                        density="compact" clearable prepend-inner-icon="mdi-calendar" hide-details />
+                </v-col>
+                <v-col cols="12" sm="4">
+                    <div class="text-caption text-grey-darken-1 mb-1 font-weight-medium">Nama Dokter</div>
+                    <v-text-field v-model="filterDokter" placeholder="Cari Nama Dokter..." variant="outlined"
+                        density="compact" clearable prepend-inner-icon="mdi-account-search" hide-details />
+                </v-col>
+            </v-row>
+        </v-card>
+
+        <!-- ── Tabel Jadwal ────────────────────────────────────── -->
+        <v-card elevation="2" rounded="lg" color="white">
+            <v-table class="jadwal-table">
+                <thead>
+                    <tr>
+                        <th class="text-left" style="width: 60px;">NO</th>
+                        <th class="text-left" style="width: 140px;">POLI</th>
+                        <th class="text-left">NAMA DOKTER</th>
+                        <th class="text-left" style="width: 200px;">JADWAL RUTIN</th>
+                        <th class="text-center" style="width: 100px;">AKSI</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-if="paginatedData.length === 0">
+                        <td colspan="5" class="text-center pa-8 text-grey">
+                            <v-icon size="48" color="grey-lighten-1" class="mb-2">mdi-calendar-blank-outline</v-icon>
+                            <div class="text-body-2">Belum ada data jadwal dokter</div>
+                            <div class="text-caption text-grey-lighten-1">Tambahkan jadwal dokter melalui mode
+                                kalender</div>
+                        </td>
+                    </tr>
+                    <tr v-for="(item, index) in paginatedData" :key="item.id" class="jadwal-row">
+                        <td class="text-body-2 font-weight-medium">
+                            {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+                        </td>
+                        <td>
+                            <v-chip size="small" color="primary" variant="tonal">
+                                {{ item.poliName }}
+                            </v-chip>
+                        </td>
+                        <td class="text-body-2 font-weight-bold">
+                            {{ item.dokter }}
+                        </td>
+                        <td>
+                            <div class="text-body-2" style="white-space: pre-line; line-height: 1.5;">
+                                {{ item.jadwalRutin }}
+                            </div>
+                        </td>
+                        <td class="text-center">
+                            <v-btn variant="outlined" size="small" color="primary" rounded="lg"
+                                prepend-icon="mdi-pencil" @click="emit('edit', item)">
+                                Edit
+                            </v-btn>
+                        </td>
+                    </tr>
+                </tbody>
+            </v-table>
+
+            <!-- ── Pagination Footer ──────────────────────────── -->
+            <v-divider />
+            <div class="d-flex align-center justify-space-between px-4 py-3 pagination-footer">
+                <span class="text-caption text-grey-darken-1">{{ paginationLabel }}</span>
+
+                <div class="d-flex align-center gap-3">
+                    <div class="d-flex align-center gap-2">
+                        <span class="text-caption text-grey-darken-1 mr-2">Baris per halaman:</span>
+                        <v-select v-model="itemsPerPage" :items="perPageOptions" variant="plain" density="compact"
+                            hide-details style="max-width: 70px;" />
+                    </div>
+
+                    <div class="d-flex align-center gap-1">
+                        <v-btn icon size="x-small" variant="text" :disabled="currentPage <= 1" @click="goToPage(1)">
+                            <v-icon size="16">mdi-page-first</v-icon>
+                        </v-btn>
+                        <v-btn icon size="x-small" variant="text" :disabled="currentPage <= 1"
+                            @click="goToPage(currentPage - 1)">
+                            <v-icon size="16">mdi-chevron-left</v-icon>
+                        </v-btn>
+                        <v-btn icon size="x-small" variant="text" :disabled="currentPage >= totalPages"
+                            @click="goToPage(currentPage + 1)">
+                            <v-icon size="16">mdi-chevron-right</v-icon>
+                        </v-btn>
+                        <v-btn icon size="x-small" variant="text" :disabled="currentPage >= totalPages"
+                            @click="goToPage(totalPages)">
+                            <v-icon size="16">mdi-page-last</v-icon>
+                        </v-btn>
+                    </div>
+                </div>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<style scoped>
+.jadwal-table {
+    border-radius: 12px 12px 0 0;
+}
+
+.jadwal-table thead th {
+    background-color: #f5f6fa !important;
+    color: #5a607f !important;
+    font-weight: 700 !important;
+    font-size: 0.75rem !important;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    border-bottom: 2px solid #e8eaf0 !important;
+    padding: 14px 16px !important;
+}
+
+.jadwal-row {
+    transition: background-color 0.15s ease;
+}
+
+.jadwal-row:hover {
+    background-color: #f8f9fd;
+}
+
+.jadwal-row td {
+    padding: 16px !important;
+    border-bottom: 1px solid #f0f1f5 !important;
+    vertical-align: middle;
+}
+
+
+.pagination-footer {
+    background-color: #fafbfc;
+    border-radius: 0 0 12px 12px;
+}
+</style>

components/features/master/jadwalDokter/MiniCalendarPreview.vue

@@ -0,0 +1,259 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    tipe: { type: String, default: 'Rutin' },
+    hari: { type: String, default: '' },
+    adhocTanggal: { type: String, default: '' },
+    jadwalList: { type: Array, default: () => [] },
+    poliId: { type: [String, Number, null], default: null },
+    dokter: { type: String, default: null }
+});
+
+const MONTH_NAMES = [
+    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+];
+
+const DAY_MAP = {
+    'Minggu': 0, 'Senin': 1, 'Selasa': 2, 'Rabu': 3,
+    'Kamis': 4, 'Jumat': 5, 'Sabtu': 6
+};
+
+const viewDate = ref(new Date());
+
+const calendarKey = computed(() =>
+    `cal-mini-${viewDate.value.getFullYear()}-${viewDate.value.getMonth()}`
+);
+
+const calendarTitle = computed(() =>
+    `${MONTH_NAMES[viewDate.value.getMonth()]} ${viewDate.value.getFullYear()}`
+);
+
+const prevMonth = () => {
+    const d = new Date(viewDate.value);
+    d.setMonth(d.getMonth() - 1);
+    viewDate.value = new Date(d);
+};
+
+const nextMonth = () => {
+    const d = new Date(viewDate.value);
+    d.setMonth(d.getMonth() + 1);
+    viewDate.value = new Date(d);
+};
+
+const toDateStr = (date) => {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+};
+
+const calendarEvents = computed(() => {
+    const events = [];
+    const year = viewDate.value.getFullYear();
+    const month = viewDate.value.getMonth();
+
+    // 1. Generate existing events for the selected doctor
+    const filtered = props.jadwalList.filter(j => {
+        if (props.poliId && j.poliId !== props.poliId) return false;
+        if (props.dokter && j.dokter !== props.dokter) return false;
+        return true;
+    });
+
+    filtered.forEach(jadwal => {
+        if (jadwal.tipe === 'Rutin') {
+            for (let mOffset = -1; mOffset <= 1; mOffset++) {
+                const tYear = month + mOffset < 0 ? year - 1 : month + mOffset > 11 ? year + 1 : year;
+                const tMonth = (month + mOffset + 12) % 12;
+                const daysInMonth = new Date(tYear, tMonth + 1, 0).getDate();
+
+                for (let d = 1; d <= daysInMonth; d++) {
+                    const date = new Date(tYear, tMonth, d);
+                    const dayName = Object.keys(DAY_MAP).find(k => DAY_MAP[k] === date.getDay());
+
+                    let jadwalHariArray = [];
+                    if (Array.isArray(jadwal.hari)) {
+                        jadwalHariArray = jadwal.hari;
+                    } else if (typeof jadwal.hari === 'string') {
+                        jadwalHariArray = [jadwal.hari];
+                    }
+
+                    if (!jadwalHariArray.includes(dayName)) continue;
+
+                    const dateStr = toDateStr(date);
+                    const jamLabel = jadwal.jamMulai && jadwal.jamSelesai
+                        ? ` ${jadwal.jamMulai} - ${jadwal.jamSelesai}`
+                        : '';
+                    events.push({
+                        name: `${jamLabel}`,
+                        start: jadwal.jamMulai ? new Date(`${dateStr}T${jadwal.jamMulai}:00`) : date,
+                        end: jadwal.jamSelesai ? new Date(`${dateStr}T${jadwal.jamSelesai}:00`) : date,
+                        color: 'primary',
+                        allDay: !jadwal.jamMulai,
+                    });
+                }
+            }
+        } else {
+            const adhocMulaiTime = jadwal.mulai ? jadwal.mulai.split('T')[1]?.slice(0, 5) : '';
+            const adhocSelesaiTime = jadwal.selesai ? jadwal.selesai.split('T')[1]?.slice(0, 5) : '';
+            const adhocJamLabel = adhocMulaiTime && adhocSelesaiTime
+                ? ` ${adhocMulaiTime} - ${adhocSelesaiTime}`
+                : '';
+            events.push({
+                name: `${adhocJamLabel}`,
+                start: new Date(jadwal.mulai),
+                end: new Date(jadwal.selesai),
+                color: 'secondary',
+                allDay: false,
+            });
+        }
+    });
+
+    return events;
+});
+
+const calendarRef = ref(null);
+
+const updateHighlight = () => {
+    // Wait for calendar to fully render internally
+    setTimeout(() => {
+        const calendarEl = calendarRef.value?.$el || document.querySelector('.mini-calendar');
+        if (!calendarEl) return;
+
+        // Remove previous highlights
+        const previous = calendarEl.querySelectorAll('.adhoc-highlight, .rutin-highlight');
+        previous.forEach(el => {
+            el.classList.remove('adhoc-highlight', 'rutin-highlight');
+            el.style.border = '';
+            el.style.borderRadius = '';
+            el.style.color = '';
+            el.style.fontWeight = '';
+        });
+
+        const allDays = calendarEl.querySelectorAll('.v-calendar-weekly__day');
+        if (allDays.length === 0) return;
+
+        if (props.tipe === 'Rutin' && props.hari) {
+            const targetCol = DAY_MAP[props.hari];
+            allDays.forEach((dayEl, index) => {
+                // Check if index matches column and it's not from adjacent month
+                if (index % 7 === targetCol && !dayEl.classList.contains('v-calendar-weekly__day--adjacent')) {
+                    const labelBtn = dayEl.querySelector('.v-calendar-weekly__day-label .v-btn, .v-calendar-weekly__day-label');
+                    if (labelBtn) {
+                        labelBtn.classList.add('rutin-highlight');
+                        // Fallback inline styles in case CSS scoped issue occurs
+                        labelBtn.style.border = '2px solid rgb(var(--v-theme-primary))';
+                        labelBtn.style.borderRadius = '50%';
+                        labelBtn.style.color = 'rgb(var(--v-theme-primary))';
+                        labelBtn.style.fontWeight = 'bold';
+                        labelBtn.style.width = '28px';
+                        labelBtn.style.height = '28px';
+                        labelBtn.style.display = 'flex';
+                        labelBtn.style.alignItems = 'center';
+                        labelBtn.style.justifyContent = 'center';
+                        labelBtn.style.margin = '2px auto';
+                    }
+                }
+            });
+        } else if (props.tipe === 'Adhoc' && props.adhocTanggal) {
+            const adhocDate = new Date(props.adhocTanggal);
+            if (adhocDate.getMonth() !== viewDate.value.getMonth() || adhocDate.getFullYear() !== viewDate.value.getFullYear()) {
+                return;
+            }
+
+            const dayToHighlight = adhocDate.getDate().toString();
+            allDays.forEach(dayEl => {
+                if (!dayEl.classList.contains('v-calendar-weekly__day--adjacent')) {
+                    const labelTextEl = dayEl.querySelector('.v-calendar-weekly__day-label .v-btn__content, .v-calendar-weekly__day-label');
+                    const labelBtn = dayEl.querySelector('.v-calendar-weekly__day-label .v-btn, .v-calendar-weekly__day-label');
+                    if (labelTextEl && labelTextEl.textContent.trim() === dayToHighlight) {
+                        labelBtn.classList.add('adhoc-highlight');
+                        labelBtn.style.border = '2px solid rgb(var(--v-theme-primary))';
+                        labelBtn.style.borderRadius = '50%';
+                        labelBtn.style.color = 'rgb(var(--v-theme-primary))';
+                        labelBtn.style.fontWeight = 'bold';
+                        labelBtn.style.width = '28px';
+                        labelBtn.style.height = '28px';
+                        labelBtn.style.display = 'flex';
+                        labelBtn.style.alignItems = 'center';
+                        labelBtn.style.justifyContent = 'center';
+                        labelBtn.style.margin = '2px auto';
+                    }
+                }
+            });
+        }
+    }, 150);
+};
+
+import { watch, nextTick } from 'vue';
+watch([() => props.adhocTanggal, () => props.hari, () => props.tipe, viewDate], () => {
+    nextTick(() => updateHighlight());
+}, { immediate: true });
+
+
+</script>
+
+<template>
+    <v-card class="mt-4 border border-grey-lighten-3 rounded-lg" elevation="0">
+        <div class="d-flex align-center justify-space-between px-4 pt-3 pb-2">
+            <div class="d-flex align-center">
+                <v-btn icon="mdi-chevron-left" variant="text" size="x-small" @click="prevMonth" />
+                <v-btn icon="mdi-chevron-right" variant="text" size="x-small" @click="nextMonth" />
+                <span class="text-caption font-weight-bold mx-2" style="min-width:100px;text-align:center;">
+                    {{ calendarTitle }}
+                </span>
+            </div>
+        </div>
+
+        <!-- We use a custom class to inject CSS for highlighted days if they have preview event -->
+        <v-calendar ref="calendarRef" :interval-height="40" locale="id" :key="calendarKey" :model-value="viewDate"
+            :events="calendarEvents" view-mode="month"
+            :class="['mini-calendar', props.tipe === 'Rutin' && props.hari ? 'preview-hari-' + props.hari : '']" />
+    </v-card>
+</template>
+
+<style scoped>
+:deep(.v-calendar-weekly__day) {
+    height: 70px !important;
+}
+
+.mini-calendar {
+    border-radius: 0 0 8px 8px;
+    background-color: white !important;
+}
+
+/* Header hari */
+:deep(.v-calendar-weekly__weekday) {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #555;
+    background-color: #f5f5f5;
+    padding: 4px 0;
+}
+
+/* Nomor tanggal */
+:deep(.v-calendar-weekly__day-label) {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #424242;
+    transition: all 0.2s ease;
+}
+
+/* Lingkaran Preview via JS Class */
+:deep(.rutin-highlight),
+:deep(.adhoc-highlight) {
+    border: 2px solid rgb(var(--v-theme-primary)) !important;
+    border-radius: 50% !important;
+    color: rgb(var(--v-theme-primary)) !important;
+    font-weight: bold !important;
+}
+
+/* Event styles */
+:deep(.v-calendar-weekly__event) {
+    font-size: 0.6rem !important;
+    font-weight: 600;
+    border-radius: 4px !important;
+    padding: 0 4px !important;
+    margin-bottom: 2px !important;
+    min-height: 16px !important;
+}
+</style>

components/features/queue/CurrentPatientCard.vue

@@ -3,31 +3,17 @@
     <v-card-text class="pa-4">
       <div class="section-header mb-3">
         <div class="section-label">SEDANG DIPROSES</div>
-        <div class="d-flex align-center">
-          <v-btn
-            v-if="patient"
-            variant="outlined"
-            height="36"
-            rounded="lg"
-            class="data-pasien-btn bg-white mr-3 text-none font-weight-bold"
-            @click="showPatientDataDialog = true"
-          >
-            <v-icon start size="18">mdi-account-cog-outline</v-icon>
-            Data Pasien
-          </v-btn>
-          <v-btn
-            v-if="patient"
-            class="call-button text-white text-none font-weight-bold"
-            color="primary-500"
-            variant="flat"
-            height="36"
-            rounded="lg"
-            @click="$emit('call')"
-          >
-            <v-icon start size="18">mdi-microphone</v-icon>
-            Panggil
-          </v-btn>
-        </div>
+        <v-btn
+          v-if="patient"
+          class="call-button text-white"
+          color="primary-500"
+          variant="flat"
+          size="small"
+          @click="$emit('call')"
+        >
+          <v-icon start size="18">mdi-bullhorn</v-icon>
+          Panggil
+        </v-btn>
       </div>
       
       <div v-if="patient" class="patient-details" :class="`patient-details-${theme}`">
@@ -152,30 +138,11 @@
         </div>
       </div>
     </v-card-text>
-
-    <!-- Patient Data Dialog -->
-    <PatientDataDialog
-      v-if="patient"
-      v-model="showPatientDataDialog"
-      :patient="patient"
-      @linked="handlePatientLinked"
-    />
   </v-card>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
-import PatientDataDialog from './PatientDataDialog.vue';
-
-const showPatientDataDialog = ref(false);
-
-/**
- * Menangani event ketika antrean berhasil dihubungkan dengan data pasien di SIMRS
- * Memunculkan notifikasi (snackbar) bahwa proses berhasil.
- */
-const handlePatientLinked = () => {
-  emit('linked', 'Data pasien berhasil dihubungkan');
-};
+import { computed } from 'vue';
 
 const props = defineProps({
   patient: {
@@ -211,11 +178,6 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call', 'open-klinik-rua
 </script>
 
 <style scoped lang="scss">
-.data-pasien-btn {
-  color: var(--color-primary-500) !important;
-  border-color: var(--color-primary-500) !important;
-}
-
 .current-patient-card {
   border-radius: 12px;
   border: 1px solid var(--color-neutral-500);

components/features/queue/PatientDataDialog.vue

@@ -1,318 +0,0 @@
-<template>
-  <v-dialog
-    v-model="isOpen"
-    max-width="600px"
-    persistent
-    scrollable
-  >
-    <v-card class="patient-data-dialog" rounded="xl">
-      <!-- Header -->
-      <v-card-title class="dialog-header d-flex justify-space-between align-center px-4 py-3 text-white">
-        <span class="text-subtitle-1 font-weight-medium">Data Pasien</span>
-        <v-btn icon="mdi-close" variant="text" size="small" color="white" @click="closeDialog" />
-      </v-card-title>
-
-      <v-card-text class="pa-6">
-        <!-- Antrean Number Info -->
-        <div class="text-center mb-6">
-          <div class="text-subtitle-1 text-grey-darken-1 mb-1">Nomor Antrian</div>
-          <div class="text-h3 font-weight-bold mb-1">{{ antrianNumber }}</div>
-          <div class="text-caption text-grey-darken-1 mb-2">
-            Barcode: <span class="font-weight-bold">{{ patient?.barcode || '-' }}</span>
-          </div>
-          
-          <div v-if="alreadyLinked || isLinked" class="text-success mt-3 text-body-1 font-weight-medium d-flex align-center justify-center">
-            <v-icon start size="20" color="success">mdi-check-circle</v-icon>
-            {{ isLinked ? 'Berhasil dihubungkan ke RM baru' : `Sudah terhubung dengan RM: ${patient?.noRM}` }}
-          </div>
-          <div v-else-if="searchError" class="text-error mt-3 text-body-1 font-weight-medium d-flex align-center justify-center">
-            <v-icon start size="20">mdi-close-circle</v-icon>
-            {{ searchError }}
-          </div>
-          <div v-else-if="!patientData" class="text-error mt-3 text-body-1 font-weight-medium d-flex align-center justify-center">
-            <v-icon start size="20">mdi-alert-circle</v-icon>
-            Nomor Antrean belum terhubung ke pasien
-          </div>
-        </div>
-
-        <!-- Search Form -->
-        <div class="form-section pa-5 border rounded-xl mb-6">
-          <div class="section-title text-caption font-weight-bold mb-3 text-uppercase text-navy-custom" style="letter-spacing: 0.5px;">
-            Hubungkan Antrean
-          </div>
-          <v-text-field
-            v-model="searchQuery"
-            placeholder="Cari Nomor BPJS atau Nomor RM atau NIK.."
-            variant="outlined"
-            density="comfortable"
-            hide-details
-            prepend-inner-icon="mdi-magnify"
-            bg-color="white"
-            class="search-input"
-            @keyup.enter="searchPatient"
-          >
-            <template #append-inner>
-              <div class="d-flex align-center h-100 pr-1">
-                <v-btn
-                  variant="flat"
-                  class="search-btn bg-navy-custom text-white text-none font-weight-bold"
-                  height="36"
-                  min-width="80"
-                  rounded="lg"
-                  :loading="isLoading"
-                  @click="searchPatient"
-                >
-                  Cari
-                </v-btn>
-              </div>
-            </template>
-          </v-text-field>
-        </div>
-
-        <!-- Patient Info Display -->
-        <v-expand-transition>
-          <div v-if="patientData" class="info-section">
-            <div class="section-title text-caption font-weight-bold text-primary mb-3 text-uppercase">
-              Informasi Data Diri
-            </div>
-            
-            <div class="info-grid">
-              <!-- Nama Lengkap -->
-              <div class="info-field">
-                <div class="text-caption text-grey-darken-1 mb-1">Nama Lengkap</div>
-                <div class="info-box">{{ patientData.nama }}</div>
-              </div>
-
-              <!-- TTL -->
-              <div class="info-field">
-                <div class="text-caption text-grey-darken-1 mb-1">Tempat / Tanggal Lahir</div>
-                <div class="info-box">{{ patientData.ttl }}</div>
-              </div>
-
-              <!-- Jenis Kelamin -->
-              <div class="info-field">
-                <div class="text-caption text-grey-darken-1 mb-1">Jenis Kelamin</div>
-                <div class="info-box">{{ patientData.jenisKelamin }}</div>
-              </div>
-
-              <!-- No Telepon -->
-              <div class="info-field">
-                <div class="text-caption text-grey-darken-1 mb-1">Nomor Telepon</div>
-                <div class="info-box">{{ patientData.noTelepon }}</div>
-              </div>
-
-              <!-- Alamat -->
-              <div class="info-field full-width">
-                <div class="text-caption text-grey-darken-1 mb-1">Alamat</div>
-                <div class="info-box">{{ patientData.alamat }}</div>
-              </div>
-            </div>
-          </div>
-        </v-expand-transition>
-      </v-card-text>
-
-      <!-- Footer Actions -->
-      <v-card-actions v-if="patientData" class="pa-4 bg-grey-lighten-4 justify-end">
-        <v-btn
-          variant="flat"
-          class="bg-navy-custom text-white px-6 text-none"
-          prepend-icon="mdi-sync"
-          :loading="isLinking"
-          @click="linkPatient"
-        >
-          Hubungkan
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue';
-
-const props = defineProps<{
-  modelValue: boolean;
-  patient: any;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'linked'): void;
-}>();
-
-// State
-const isOpen = ref(props.modelValue);
-const searchQuery = ref('');
-const isLoading = ref(false);
-const isLinking = ref(false);
-const isLinked = ref(false);
-const searchError = ref('');
-
-const antrianNumber = computed(() => {
-  return props.patient?.noAntrian ? props.patient.noAntrian.split(' |')[0] : '';
-});
-
-const alreadyLinked = computed(() => {
-  return !!props.patient?.noRM;
-});
-
-// Tipe data mock
-interface MockPatient {
-  nama: string;
-  ttl: string;
-  jenisKelamin: string;
-  noTelepon: string;
-  alamat: string;
-}
-
-const patientData = ref<MockPatient | null>(null);
-
-// Watchers
-watch(() => props.modelValue, (newVal) => {
-  isOpen.value = newVal;
-  if (newVal) {
-    // Reset state saat modal dibuka
-    searchQuery.value = '';
-    patientData.value = null;
-    isLinked.value = false;
-    searchError.value = '';
-  }
-});
-
-watch(isOpen, (newVal) => {
-  emit('update:modelValue', newVal);
-});
-
-// Methods
-const resetState = () => {
-  searchQuery.value = '';
-  patientData.value = null;
-  isLinked.value = false;
-  isLoading.value = false;
-  isLinking.value = false;
-};
-
-const closeDialog = () => {
-  isOpen.value = false;
-};
-
-/**
- * Simulasi pencarian data pasien ke SIMRS.
- * NANTI BISA DIGANTI DENGAN $fetch KE SERVICE API ASLI.
- */
-const searchPatient = async () => {
-  if (!searchQuery.value.trim()) return;
-
-  isLoading.value = true;
-  patientData.value = null;
-
-  try {
-    // Reset state error sebelum pencarian
-    searchError.value = '';
-    
-    // TODO: Ganti URL '/api/simrs/patient/' di bawah ini dengan URL API Service SIMRS yang sebenarnya
-    const response = await $fetch(`/api/simrs/patient/${searchQuery.value}`);
-    
-    // @ts-ignore
-    patientData.value = response.data;
-  } catch (error: any) {
-    console.error('Gagal mencari data pasien:', error);
-    searchError.value = error.data?.statusMessage || `Pasien dengan nomor ${searchQuery.value} tidak ditemukan.`;
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-/**
- * Simulasi menghubungkan nomor antrean dengan data pasien di SIMRS.
- */
-const linkPatient = async () => {
-  isLinking.value = true;
-
-  try {
-    // TODO: Ganti dengan API call asli untuk menghubungkan antrean
-    // await $fetch('/api/antrean/link', { method: 'POST', body: { ... } });
-    
-    // Simulasi delay
-    await new Promise(resolve => setTimeout(resolve, 600));
-
-    isLinked.value = true;
-    emit('linked');
-    closeDialog();
-  } catch (error) {
-    console.error('Gagal menghubungkan data pasien:', error);
-  } finally {
-    isLinking.value = false;
-  }
-};
-</script>
-
-<style scoped lang="scss">
-.bg-navy-custom {
-  background-color: #003482 !important;
-  color: #ffffff !important;
-}
-
-.text-navy-custom {
-  color: #003482 !important;
-}
-
-.patient-data-dialog {
-  border-radius: 12px;
-  overflow: hidden;
-
-  .dialog-header {
-    background-color: #003482 !important;
-  }
-
-  .text-error {
-    color: #E53935;
-  }
-
-  .search-input {
-    :deep(.v-field) {
-      border-radius: 8px;
-    }
-    :deep(.v-field__append-inner) {
-      padding-top: 0;
-      padding-bottom: 0;
-      align-items: center;
-    }
-  }
-
-  .search-btn {
-    border-radius: 6px;
-    text-transform: none;
-    letter-spacing: normal;
-    font-weight: 500;
-  }
-
-  .info-section {
-    background-color: #F8F9FA;
-    border-radius: 12px;
-    padding: 20px;
-    border: 1px solid #E0E0E0;
-
-    .info-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
-
-      .info-field {
-        &.full-width {
-          grid-column: 1 / -1;
-        }
-
-        .info-box {
-          background-color: #ECEFF1;
-          border-radius: 6px;
-          padding: 10px 14px;
-          font-size: 14px;
-          color: #333;
-          min-height: 40px;
-        }
-      }
-    }
-  }
-}
-</style>

composables/useQueueSync.ts

@@ -170,11 +170,6 @@ export const useQueueSync = (deps: QueueSyncDeps) => {
 
   let _autoSyncInterval: any = null;
 
-  /**
-   * Memulai interval auto-sync (fallback) untuk memastikan data tetap segar 
-   * meskipun koneksi WebSocket terputus atau gagal menerima event.
-   * Berjalan setiap 30 detik berdasarkan active interest.
-   */
   const startAutoSync = () => {
     if (typeof window === 'undefined') return;
     if (_autoSyncInterval) return;

docs/DEVLOG.md

@@ -63,36 +63,6 @@ Format output:
 
 <!-- Tambahkan entry baru di bawah baris ini, urutan terbaru di atas -->
 
-## 2026-07-10 — Fitur Hubungkan Data Pasien ke SIMRS
-
-**Sprint/Phase:** Phase 7 — UI/UX Feature
-**Durasi:** ~1.5 jam
-**Status:** ✅ Done
-
-### Yang Dikerjakan
-- Membuat UI Pop-up Modal baru `PatientDataDialog.vue` untuk mengaitkan nomor antrean yang berjalan dengan data dari SIMRS.
-- Menambahkan tombol **Data Pasien** (ikon *user-cog*) di komponen `CurrentPatientCard.vue` berdampingan dengan tombol **Panggil**.
-- Mengimplementasikan state management lokal untuk pop-up, termasuk simulasi proses API (*loading bar*, *mock data*, dan *success notification*).
-- Menyesuaikan warna komponen secara presisi menggunakan hex code `#003482` dengan *SCSS override* untuk menembus batasan tema *default*.
-- Meningkatkan *border-radius* modal ke `xl` untuk sudut yang lebih melengkung (*rounded*) sesuai desain UI/UX.
-- Mengubah logika *mock data* pada *method* `searchPatient` menjadi `$fetch` (*API call*) asinkron yang menembak internal API Nuxt (`/api/simrs/patient/[id]`).
-- Mengimplementasikan endpoint API backend (menggunakan *Nitro/H3*) di folder `server/api/simrs/patient/[id].get.ts` sebagai *Dummy JSON Provider* untuk di-*replace* dengan layanan asli nanti.
-- Melengkapi fungsi-fungsi yang baru dibuat dengan komentar JSDoc.
-
-### Keputusan Teknis
-> **Dummy API via Nitro**: Dengan memindahkan *mock data* dari dalam komponen Vue ke `server/api/`, arsitektur kode simulasi jadi lebih mirip dengan *production*. Saat pindah ke *Service API* sungguhan nanti, front-end developer hanya perlu mengganti URL string `$fetch` tanpa harus membongkar ulang struktur logika _async_ `try-catch`-nya.
-> **Pemisahan Komponen**: Daripada menggabungkan form SIMRS ke dalam `CurrentPatientCard`, diputuskan untuk membuat file baru `PatientDataDialog.vue`. Ini menjaga agar file loket tidak terlalu membengkak (modular) dan mudah dikelola atau diganti endpoint API-nya nanti.
-
-### Masalah & Solusi
-| Masalah | Solusi | Referensi |
-|---------|--------|-----------|
-| Warna tombol garis luar (*outlined*) selalu kembali ke warna hitam (*fallback*) dan tidak menyerap properti `color="primary"`. | Menambahkan *style SCSS* kustom secara paksa (`!important`) untuk mengisi `border-color` dan `color` sesuai `hex code` `#003482` dari desain. | `CurrentPatientCard.vue`, `PatientDataDialog.vue` |
-
-### Besok
-- [ ] Mengganti endpoint `/api/simrs/patient/` internal ini dengan URL *Service API* SIMRS yang sebenarnya saat endpoint backend sudah di-*deploy*.
-
----
-
 ## 2026-07-10 — Migrasi API Endpoint & Project Knowledge Base
 
 **Sprint/Phase:** Phase 7 — Infrastruktur & Dokumentasi
@@ -750,22 +720,6 @@ Format output:
 
 ---
 
-## 2026-07-13 — Konsolidasi Loket Eksekutif
-
-**Sprint/Phase:** Phase 7
-**Status:** ✅ Done
-
-### Yang Dikerjakan
-- Mengubah `localLoketData` pada `loketStore.js` dari 14 loket menjadi 1 loket tunggal (`LOKET EKS`) untuk melayani semua klinik eksekutif (ID 1000 hingga 1022).
-- Menaikkan `STORE_SCHEMA_VERSION` pada `app.vue` (menjadi v4) untuk memicu pembersihan *cache localStorage* pada pengguna agar konfigurasi loket tunggal segera diterapkan.
-
-### Keputusan Teknis
-- Mengubah default pembuatan array untuk `localLoketData` menjadi 1 objek.
-- Properti `pelayanan` (hak akses layanan) diberikan semua ID layanan dari 1000 - 1022.
-- Tidak ada penambahan/perubahan logika UI karena antrean dan grid UI otomatis menyesuaikan jumlah `loketStore`.
-
----
-
 <!-- Tambahkan entry baru di atas baris ini, urutan terbaru di atas -->
 
 ---

docs/DEVPLAN.md

@@ -258,6 +258,5 @@ docs: update DEVPLAN
 
 | Versi | Tanggal | Author | Perubahan |
 |-------|---------|--------|-----------|
-| 1.1.1 | 2026-07-13 | Agent | Refactor `loketStore.js` untuk menggabungkan loket eksekutif menjadi 1 loket tunggal (melayani semua) |
 | 1.1.0 | 2026-07-10 | Akbar | Phase 7: migrasi API, knowledge base, update docs |
 | 1.0.0 | 2026-05-25 | Akbar | Initial plan — direkonstruksi berdasarkan timeline aktual |

docs/hakakses implementation_plan_v2.md

@@ -1,181 +0,0 @@
-# Integrasi Hak Akses (Permissions) di UI beserta Konfigurasi CRUD
-
-## ✅ Hasil Pengecekan Kesiapan Project
-1. **Navigasi (*Menu/Routing*)**: Sudah tersedia di `stores/navItems1.ts` (`defaultNavItems`). Array ini akan menjadi sumber daftar halaman di dialog "Edit Hak Akses" — dengan catatan penting di bagian struktur data (lihat poin 2 di bawah).
-2. **Library Komponen**: Vuetify 3 sudah tersedia, tinggal memasang `<v-checkbox>` / `<v-switch>` di tabel dialog Edit Hak Akses.
-3. **Mock Backend API**: `server/api/hak-akses/index.ts` sudah bisa menahan format data CRUD yang akan dikirim dari UI.
-
-Karena API backend sesungguhnya belum siap, kita pakai **Nuxt Local API (Mock Backend)** sebagai *Backend-for-Frontend* sementara, dengan arsitektur *toggling* API sejak awal agar migrasi ke backend asli mulus.
-
-> ⚠️ **Catatan penting**: Toggle mock/real API ini menyelesaikan masalah *sumber data*, bukan masalah *keamanan*. Semua pengecekan `v-permission` dan middleware di bawah ini berjalan di client — lihat bagian **Keamanan** sebelum dianggap selesai.
-
----
-
-## Bagan Alur Sistem Hak Akses (Permission Flow)
-
-```mermaid
-flowchart TD
-    User([Pengguna]) --> Login(Berhasil Login via Keycloak)
-    Login --> Auth[useAuth.ts: Dapat Data Roles & Groups]
-    Auth --> PermStore[permissionStore.ts memuat Permissions]
-
-    PermStore --> CheckFlag{USE_MOCK_API ?}
-
-    CheckFlag -- TRUE --> MockAPI[Nuxt Local API: /api/hak-akses]
-    CheckFlag -- FALSE --> RealAPI[Real Backend: /api/v1/permission]
-
-    MockAPI --> FetchFail{Fetch gagal?}
-    RealAPI --> FetchFail
-    FetchFail -- Ya --> DenyDefault[Deny-by-default: anggap tanpa izin]
-    FetchFail -- Tidak --> PermState(Permission State Disimpan)
-
-    PermState --> Router[Vue Router Middleware - client]
-    PermState --> ServerCheck[Server Middleware/Plugin - SSR guard]
-    PermState --> Sidebar[Sidebar Navigation]
-
-    Router -- canAccess: False --> Deny[Redirect ke Error/403]
-    Router -- canAccess: True --> Page[Buka Halaman]
-    ServerCheck -- canAccess: False --> Deny
-
-    Sidebar -- canView: False --> HideMenu[Sembunyikan Menu]
-
-    Page --> Directive[v-permission directive pada Komponen]
-    Directive -- canDelete: False --> HideBtn[Tombol Hapus Hilang/Disabled]
-    Directive -- canAdd: True --> ShowBtn[Tombol Tambah Tampil]
-
-    Page -.-> BackendGuard[[Backend API tetap validasi ulang izin]]
-```
-
----
-
-## Proposed Changes
-
-### 1. Seamless Backend Migration Strategy (Persiapan API Asli)
-- `stores/permissionStore.ts` dan composable pemanggil membaca konfigurasi *runtime* (`useRuntimeConfig()`).
-- Tambahkan flag `USE_MOCK_PERMISSION_API: true`.
-- Saat backend siap, cukup ubah `NUXT_PUBLIC_USE_MOCK_PERMISSION_API=false` di `.env`.
-- **Tambahan — contract test**: buat satu skema/interface TypeScript (idealnya divalidasi dengan `zod`) yang dipakai bersama oleh mock API dan dipakai untuk memvalidasi response real API nanti. Ini memastikan klaim "tinggal ganti flag" benar-benar teruji, bukan asumsi.
-
-### 2. Upgrade Local API Mock (`server/api/hak-akses/index.ts`)
-- Perbarui `data/mock/hakAkses.json` agar field `hakAksesMenu` berisi boolean: `canAccess`, `canView`, `canAdd`, `canEdit`, `canDelete`.
-- **Perubahan struktur — pakai key stabil, bukan label**: setiap entri `hakAksesMenu` menyimpan `menuKey` (mengacu ke `key`/`routeName` unik di `navItems1.ts`), bukan `name` (label tampilan). Label bisa berubah/di-rename tanpa memutus mapping izin.
-
-```json
-{
-  "menuKey": "master-klinik-ruang",
-  "name": "Master Klinik Ruang",
-  "canAccess": true,
-  "canView": true,
-  "canAdd": false,
-  "canEdit": false,
-  "canDelete": false
-}
-```
-
-- Validasi payload masuk dengan skema (zod) di endpoint mock, supaya struktur tidak diam-diam berubah antara UI dan backend.
-
-### 3. Memperbarui `Setting/HakAkses.vue` (UI Konfigurasi CRUD)
-- Dialog Edit melooping `navItems1.ts`, menampilkan matriks checkbox untuk `canAccess`, `canView`, `canAdd`, `canEdit`, `canDelete`, dikunci ke `menuKey` masing-masing.
-- Payload POST mengarah ke API Mock/Real sesuai flag.
-- **Aturan precedence eksplisit** (harus didefinisikan sebelum coding, karena ada `role`, `group`, dan `isGroupBased` sekaligus):
-  1. Jika user punya override individual (role-based) → pakai itu.
-  2. Jika tidak ada override individual dan `isGroupBased: true` → pakai izin dari group.
-  3. Jika keduanya tidak ada → deny-by-default.
-  - Tuliskan aturan ini sebagai komentar di `permissionStore.ts`, bukan hanya di dokumen, supaya tidak jadi sumber bug tersembunyi saat logic berkembang.
-
-### 4. Vue Custom Directive `v-permission`
-- File baru `plugins/permission.ts` untuk registrasi directive.
-- Dukungan penggunaan:
-  - Single: `<v-btn v-permission="'canEdit'">Edit</v-btn>`
-  - Multiple (AND): `<v-btn v-permission="['canEdit', 'canDelete']">...</v-btn>`
-- **Mode hide vs disable**: tambahkan modifier, misal `v-permission:disable="'canDelete'"`, agar tombol bisa di-disable dengan tooltip ("Anda tidak punya izin") alih-alih hilang total tanpa penjelasan — pilih sesuai konteks UX per halaman.
-
-### 5. `stores/permissionStore.ts` (State Management)
-- Mengambil data izin dari Local/Real API saat login.
-- Menyimpan state global.
-- **Deny-by-default**: jika fetch permission gagal (network error, token expired), state dianggap "tanpa izin sama sekali", bukan default terbuka.
-- **Refresh strategy**: tentukan apakah perubahan hak akses oleh admin berlaku langsung (polling/refetch berkala) atau baru berlaku setelah re-login. Pilih salah satu secara eksplisit dan dokumentasikan, jangan dibiarkan implisit.
-
-### 6. Middleware & Dynamic Sidebar
-- **Client middleware (`middleware/permissions.ts`)**: mencegat rute jika `canAccess` false.
-- **Server-side guard**: karena project ini SSR (Nuxt), tambahkan pengecekan di server middleware/plugin juga — bukan hanya client — untuk mencegah *flash of unauthorized content* (halaman sempat ter-render sebelum redirect).
-- **Sidebar (`stores/navItems1.ts`)**: filter menu berdasarkan `canView`, dikunci ke `menuKey`.
-
-### 7. Keamanan Backend (wajib, non-negotiable)
-- `v-permission` dan middleware di atas adalah **UX**, bukan kontrol akses sesungguhnya — keduanya berjalan di client dan bisa dilewati siapa saja yang memanggil API langsung.
-- Backend API asli **wajib** memvalidasi ulang setiap permission di server berdasarkan identitas user dari token, tidak pernah mempercayai payload/izin yang dikirim dari frontend.
-
----
-
-## Verification Plan
-
-### 1. Verifikasi API Lokal via cURL
-Pastikan API Lokal mampu membaca dan menyimpan JSON berformat CRUD dengan `menuKey`:
-
-```bash
-curl -X POST "http://localhost:3000/api/hak-akses" \
-  -H "Content-Type: application/json" \
-  -d '{
-    "role": "admin",
-    "group": "LOKET",
-    "namaTipeUser": "Admin Loket",
-    "isGroupBased": true,
-    "hakAksesMenu": [
-      {
-        "menuKey": "master-klinik-ruang",
-        "name": "Master Klinik Ruang",
-        "canAccess": true,
-        "canView": true,
-        "canAdd": false,
-        "canEdit": false,
-        "canDelete": false
-      }
-    ]
-  }'
-```
-
-### 2. Manual UI Verification
-1. Buka **Setting > Hak Akses**, atur hak untuk Role tertentu (centang `canView`, matikan `canDelete`).
-2. Login sebagai akun dengan Role tersebut.
-3. Buka halaman target.
-4. **Validasi**: Halaman terbuka, tombol "Delete" tersembunyi/disabled sesuai mode `v-permission`.
-5. **Validasi fetch gagal**: Simulasikan permission API error (mis. matikan endpoint sementara) → pastikan sistem deny-by-default, bukan default terbuka.
-6. **Validasi kesiapan API asli**: Cek logika precedence dan toggle flag di `permissionStore.ts`.
-
-### 3. Automated Testing (baru)
-- **Unit test** untuk `permissionStore.ts`: precedence role vs group, deny-by-default saat fetch gagal, evaluasi `canAccess`/`canView`/dst.
-- **Contract test**: bandingkan skema response Mock API vs Real API (setelah Real API tersedia) menggunakan skema TypeScript/zod yang sama, untuk memastikan switch flag benar-benar tanpa perubahan kode lain.
-- **Directive test**: pastikan `v-permission` menyembunyikan/disable elemen dengan benar untuk kombinasi single dan multiple permission.
-
----
-
-## Strategi Selama Backend Asli Belum Tersedia
-
-Karena tim belum bisa mengimplementasikan validasi izin di server sungguhan, mock API diperlakukan sebagai **kontrak (contract-first)**, bukan sekadar penyimpanan data sementara. Tujuannya: frontend sudah teruji terhadap semua skenario yang nanti jadi tanggung jawab backend asli, dan tidak perlu dirombak saat migrasi.
-
-### 1. Mock API mengikuti skema, bukan menerima apa saja
-- Definisikan interface TypeScript / skema `zod` untuk request dan response `hak-akses` **sekarang**, bukan menunggu backend asli.
-- Mock API menolak (400) payload yang tidak sesuai skema.
-- Skema ini menjadi kontrak yang wajib dipatuhi backend asli nanti — perbedaan struktur akan ketahuan lewat contract test, bukan saat production.
-
-### 2. Simulasikan tanggung jawab yang nanti dipegang backend
-- Tambahkan endpoint mock `/api/hak-akses/check` yang bisa mensimulasikan penolakan server (403) karena user tidak punya izin — supaya UI dan middleware sudah teruji menangani penolakan dari server, bukan hanya dari state client.
-- Simulasikan juga kegagalan fetch (delay/error 500) untuk memverifikasi deny-by-default benar-benar berjalan.
-
-### 3. Tandai eksplisit bagian yang "sementara tidak aman"
-Beri komentar `TODO(security)` di titik-titik yang wajib diperkuat saat backend asli terpasang, contoh:
-```ts
-// TODO(security): saat backend asli terpasang, endpoint ini WAJIB
-// memvalidasi ulang permission dari token JWT/session di server,
-// jangan percaya payload role/group yang dikirim dari client.
-```
-Ini mencegah asumsi keliru saat handoff bahwa "karena UI sudah mengatur tampilan sesuai izin, backend tidak perlu memvalidasi ulang".
-
-### 4. Definition of Done — Migrasi ke Backend Asli
-Checklist ini harus tercentang semua **sebelum** flag `USE_MOCK_PERMISSION_API` dimatikan (`false`) di production:
-- [ ] Endpoint real API memvalidasi permission berdasarkan identitas dari token (JWT/session), bukan dari body request yang dikirim client.
-- [ ] Response real API lolos contract test terhadap skema yang sama dengan mock API (field, tipe data, struktur `hakAksesMenu` identik).
-- [ ] Skenario penolakan server (403) dan fetch gagal (500/timeout) sudah diuji terhadap real API, tidak hanya terhadap mock.
-- [ ] Ada audit log untuk setiap perubahan hak akses (siapa mengubah, kapan, dari-ke apa) — direkomendasikan mengingat ini fitur kontrol akses.
-- [ ] Rate limiting pada endpoint pengubahan hak akses, untuk mencegah penyalahgunaan.
-- [ ] Semua komentar `TODO(security)` di kode sudah diselesaikan atau dipindahkan menjadi tiket tersendiri yang dilacak.

docs/hakakses_implementation_plan_final.md

@@ -1,181 +0,0 @@
-# Integrasi Hak Akses (Permissions) di UI beserta Konfigurasi CRUD
-
-## ✅ Hasil Pengecekan Kesiapan Project
-1. **Navigasi (*Menu/Routing*)**: Sudah tersedia di `stores/navItems1.ts` (`defaultNavItems`). Array ini akan menjadi sumber daftar halaman di dialog "Edit Hak Akses" — dengan catatan penting di bagian struktur data (lihat poin 2 di bawah).
-2. **Library Komponen**: Vuetify 3 sudah tersedia, tinggal memasang `<v-checkbox>` / `<v-switch>` di tabel dialog Edit Hak Akses.
-3. **Mock Backend API**: `server/api/hak-akses/index.ts` sudah bisa menahan format data CRUD yang akan dikirim dari UI.
-
-Karena API backend sesungguhnya belum siap, kita pakai **Nuxt Local API (Mock Backend)** sebagai *Backend-for-Frontend* sementara, dengan arsitektur *toggling* API sejak awal agar migrasi ke backend asli mulus.
-
-> ⚠️ **Catatan penting**: Toggle mock/real API ini menyelesaikan masalah *sumber data*, bukan masalah *keamanan*. Semua pengecekan `v-permission` dan middleware di bawah ini berjalan di client — lihat bagian **Keamanan** sebelum dianggap selesai.
-
----
-
-## Bagan Alur Sistem Hak Akses (Permission Flow)
-
-```mermaid
-flowchart TD
-    User([Pengguna]) --> Login(Berhasil Login via Keycloak)
-    Login --> Auth[useAuth.ts: Dapat Data Roles & Groups]
-    Auth --> PermStore[permissionStore.ts memuat Permissions]
-
-    PermStore --> CheckFlag{USE_MOCK_API ?}
-
-    CheckFlag -- TRUE --> MockAPI[Nuxt Local API: /api/hak-akses]
-    CheckFlag -- FALSE --> RealAPI[Real Backend: /api/v1/permission]
-
-    MockAPI --> FetchFail{Fetch gagal?}
-    RealAPI --> FetchFail
-    FetchFail -- Ya --> DenyDefault[Deny-by-default: anggap tanpa izin]
-    FetchFail -- Tidak --> PermState(Permission State Disimpan)
-
-    PermState --> Router[Vue Router Middleware - client]
-    PermState --> ServerCheck[Server Middleware/Plugin - SSR guard]
-    PermState --> Sidebar[Sidebar Navigation]
-
-    Router -- canAccess: False --> Deny[Redirect ke Error/403]
-    Router -- canAccess: True --> Page[Buka Halaman]
-    ServerCheck -- canAccess: False --> Deny
-
-    Sidebar -- canView: False --> HideMenu[Sembunyikan Menu]
-
-    Page --> Directive[v-permission directive pada Komponen]
-    Directive -- canDelete: False --> HideBtn[Tombol Hapus Hilang/Disabled]
-    Directive -- canAdd: True --> ShowBtn[Tombol Tambah Tampil]
-
-    Page -.-> BackendGuard[[Backend API tetap validasi ulang izin]]
-```
-
----
-
-## Proposed Changes
-
-### 1. Seamless Backend Migration Strategy (Persiapan API Asli)
-- `stores/permissionStore.ts` dan composable pemanggil membaca konfigurasi *runtime* (`useRuntimeConfig()`).
-- Tambahkan flag `USE_MOCK_PERMISSION_API: true`.
-- Saat backend siap, cukup ubah `NUXT_PUBLIC_USE_MOCK_PERMISSION_API=false` di `.env`.
-- **Tambahan — contract test**: buat satu skema/interface TypeScript (idealnya divalidasi dengan `zod`) yang dipakai bersama oleh mock API dan dipakai untuk memvalidasi response real API nanti. Ini memastikan klaim "tinggal ganti flag" benar-benar teruji, bukan asumsi.
-
-### 2. Upgrade Local API Mock (`server/api/hak-akses/index.ts`)
-- Perbarui `data/mock/hakAkses.json` agar field `hakAksesMenu` berisi boolean: `canAccess`, `canView`, `canAdd`, `canEdit`, `canDelete`.
-- **Perubahan struktur — pakai key stabil, bukan label**: setiap entri `hakAksesMenu` menyimpan `menuKey` (mengacu ke `key`/`routeName` unik di `navItems1.ts`), bukan `name` (label tampilan). Label bisa berubah/di-rename tanpa memutus mapping izin.
-
-```json
-{
-  "menuKey": "master-klinik-ruang",
-  "name": "Master Klinik Ruang",
-  "canAccess": true,
-  "canView": true,
-  "canAdd": false,
-  "canEdit": false,
-  "canDelete": false
-}
-```
-
-- Validasi payload masuk dengan skema (zod) di endpoint mock, supaya struktur tidak diam-diam berubah antara UI dan backend.
-
-### 3. Memperbarui `Setting/HakAkses.vue` (UI Konfigurasi CRUD)
-- Dialog Edit melooping `navItems1.ts`, menampilkan matriks checkbox untuk `canAccess`, `canView`, `canAdd`, `canEdit`, `canDelete`, dikunci ke `menuKey` masing-masing.
-- Payload POST mengarah ke API Mock/Real sesuai flag.
-- **Aturan precedence eksplisit** (harus didefinisikan sebelum coding, karena ada `role`, `group`, dan `isGroupBased` sekaligus):
-  1. Jika user punya override individual (role-based) → pakai itu.
-  2. Jika tidak ada override individual dan `isGroupBased: true` → pakai izin dari group.
-  3. Jika keduanya tidak ada → deny-by-default.
-  - Tuliskan aturan ini sebagai komentar di `permissionStore.ts`, bukan hanya di dokumen, supaya tidak jadi sumber bug tersembunyi saat logic berkembang.
-
-### 4. Vue Custom Directive `v-permission`
-- File baru `plugins/permission.ts` untuk registrasi directive.
-- Dukungan penggunaan:
-  - Single: `<v-btn v-permission="'canEdit'">Edit</v-btn>`
-  - Multiple (AND): `<v-btn v-permission="['canEdit', 'canDelete']">...</v-btn>`
-- **Mode hide vs disable**: tambahkan modifier, misal `v-permission:disable="'canDelete'"`, agar tombol bisa di-disable dengan tooltip ("Anda tidak punya izin") alih-alih hilang total tanpa penjelasan — pilih sesuai konteks UX per halaman.
-
-### 5. `stores/permissionStore.ts` (State Management)
-- Mengambil data izin dari Local/Real API saat login.
-- Menyimpan state global.
-- **Deny-by-default**: jika fetch permission gagal (network error, token expired), state dianggap "tanpa izin sama sekali", bukan default terbuka.
-- **Refresh strategy**: tentukan apakah perubahan hak akses oleh admin berlaku langsung (polling/refetch berkala) atau baru berlaku setelah re-login. Pilih salah satu secara eksplisit dan dokumentasikan, jangan dibiarkan implisit.
-
-### 6. Middleware & Dynamic Sidebar
-- **Client middleware (`middleware/permissions.ts`)**: mencegat rute jika `canAccess` false.
-- **Server-side guard**: karena project ini SSR (Nuxt), tambahkan pengecekan di server middleware/plugin juga — bukan hanya client — untuk mencegah *flash of unauthorized content* (halaman sempat ter-render sebelum redirect).
-- **Sidebar (`stores/navItems1.ts`)**: filter menu berdasarkan `canView`, dikunci ke `menuKey`.
-
-### 7. Keamanan Backend (wajib, non-negotiable)
-- `v-permission` dan middleware di atas adalah **UX**, bukan kontrol akses sesungguhnya — keduanya berjalan di client dan bisa dilewati siapa saja yang memanggil API langsung.
-- Backend API asli **wajib** memvalidasi ulang setiap permission di server berdasarkan identitas user dari token, tidak pernah mempercayai payload/izin yang dikirim dari frontend.
-
----
-
-## Verification Plan
-
-### 1. Verifikasi API Lokal via cURL
-Pastikan API Lokal mampu membaca dan menyimpan JSON berformat CRUD dengan `menuKey`:
-
-```bash
-curl -X POST "http://localhost:3000/api/hak-akses" \
-  -H "Content-Type: application/json" \
-  -d '{
-    "role": "admin",
-    "group": "LOKET",
-    "namaTipeUser": "Admin Loket",
-    "isGroupBased": true,
-    "hakAksesMenu": [
-      {
-        "menuKey": "master-klinik-ruang",
-        "name": "Master Klinik Ruang",
-        "canAccess": true,
-        "canView": true,
-        "canAdd": false,
-        "canEdit": false,
-        "canDelete": false
-      }
-    ]
-  }'
-```
-
-### 2. Manual UI Verification
-1. Buka **Setting > Hak Akses**, atur hak untuk Role tertentu (centang `canView`, matikan `canDelete`).
-2. Login sebagai akun dengan Role tersebut.
-3. Buka halaman target.
-4. **Validasi**: Halaman terbuka, tombol "Delete" tersembunyi/disabled sesuai mode `v-permission`.
-5. **Validasi fetch gagal**: Simulasikan permission API error (mis. matikan endpoint sementara) → pastikan sistem deny-by-default, bukan default terbuka.
-6. **Validasi kesiapan API asli**: Cek logika precedence dan toggle flag di `permissionStore.ts`.
-
-### 3. Automated Testing (baru)
-- **Unit test** untuk `permissionStore.ts`: precedence role vs group, deny-by-default saat fetch gagal, evaluasi `canAccess`/`canView`/dst.
-- **Contract test**: bandingkan skema response Mock API vs Real API (setelah Real API tersedia) menggunakan skema TypeScript/zod yang sama, untuk memastikan switch flag benar-benar tanpa perubahan kode lain.
-- **Directive test**: pastikan `v-permission` menyembunyikan/disable elemen dengan benar untuk kombinasi single dan multiple permission.
-
----
-
-## Strategi Selama Backend Asli Belum Tersedia
-
-Karena tim belum bisa mengimplementasikan validasi izin di server sungguhan, mock API diperlakukan sebagai **kontrak (contract-first)**, bukan sekadar penyimpanan data sementara. Tujuannya: frontend sudah teruji terhadap semua skenario yang nanti jadi tanggung jawab backend asli, dan tidak perlu dirombak saat migrasi.
-
-### 1. Mock API mengikuti skema, bukan menerima apa saja
-- Definisikan interface TypeScript / skema `zod` untuk request dan response `hak-akses` **sekarang**, bukan menunggu backend asli.
-- Mock API menolak (400) payload yang tidak sesuai skema.
-- Skema ini menjadi kontrak yang wajib dipatuhi backend asli nanti — perbedaan struktur akan ketahuan lewat contract test, bukan saat production.
-
-### 2. Simulasikan tanggung jawab yang nanti dipegang backend
-- Tambahkan endpoint mock `/api/hak-akses/check` yang bisa mensimulasikan penolakan server (403) karena user tidak punya izin — supaya UI dan middleware sudah teruji menangani penolakan dari server, bukan hanya dari state client.
-- Simulasikan juga kegagalan fetch (delay/error 500) untuk memverifikasi deny-by-default benar-benar berjalan.
-
-### 3. Tandai eksplisit bagian yang "sementara tidak aman"
-Beri komentar `TODO(security)` di titik-titik yang wajib diperkuat saat backend asli terpasang, contoh:
-```ts
-// TODO(security): saat backend asli terpasang, endpoint ini WAJIB
-// memvalidasi ulang permission dari token JWT/session di server,
-// jangan percaya payload role/group yang dikirim dari client.
-```
-Ini mencegah asumsi keliru saat handoff bahwa "karena UI sudah mengatur tampilan sesuai izin, backend tidak perlu memvalidasi ulang".
-
-### 4. Definition of Done — Migrasi ke Backend Asli
-Checklist ini harus tercentang semua **sebelum** flag `USE_MOCK_PERMISSION_API` dimatikan (`false`) di production:
-- [ ] Endpoint real API memvalidasi permission berdasarkan identitas dari token (JWT/session), bukan dari body request yang dikirim client.
-- [ ] Response real API lolos contract test terhadap skema yang sama dengan mock API (field, tipe data, struktur `hakAksesMenu` identik).
-- [ ] Skenario penolakan server (403) dan fetch gagal (500/timeout) sudah diuji terhadap real API, tidak hanya terhadap mock.
-- [ ] Ada audit log untuk setiap perubahan hak akses (siapa mengubah, kapan, dari-ke apa) — direkomendasikan mengingat ini fitur kontrol akses.
-- [ ] Rate limiting pada endpoint pengubahan hak akses, untuk mencegah penyalahgunaan.
-- [ ] Semua komentar `TODO(security)` di kode sudah diselesaikan atau dipindahkan menjadi tiket tersendiri yang dilacak.

layouts/default.vue

@@ -12,20 +12,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import SideBar from "../components/layout/SideBar.vue";
 // Ensure this path matches your store location
 import { useNavItemsStore } from '~/stores/navItems1'; 
 import { useAuth } from "~/composables/useAuth";
-import { usePermissionStore } from '~/stores/permissionStore';
+
+definePageMeta({
+  middleware: ['auth', 'checkPageAccess']
+})
 
 // State for controlling the sidebar
 const drawer = ref(true);
 const rail = ref(true);
 
 const navItemsStore = useNavItemsStore();
-const permissionStore = usePermissionStore();
 const { user, checkAuth } = useAuth();
 
 // Navigation will be filtered via navItemsStore using the new hakAkses system
@@ -34,47 +36,16 @@ const filteredNavItems = computed(() => navItemsStore.filteredNavItems);
 
 onMounted(async () => {
   await checkAuth();
-  
   if (user.value) {
-    if (!permissionStore.isLoaded) {
-      const roles = [
-          ...(user.value.realm_access?.roles || []),
-          ...(user.value.roles || [])
-      ];
-      
-      const groups: string[] = [];
-      const rawGroups = (user.value as any).groups || [];
-      rawGroups.forEach((g: string) => {
-          const parts = g.split('/').filter(Boolean);
-          if (parts.length > 1) {
-              groups.push(parts[1]);
-          } else if (parts.length === 1) {
-              groups.push(parts[0]);
-          }
-      });
-      
-      const primaryRole = roles[0] || '';
-      const primaryGroup = groups[0] || '';
-      const username = user.value.preferred_username || user.value.email || user.value.name || '';
-      
-      await permissionStore.load(primaryRole, primaryGroup, username);
-    }
     await navItemsStore.refreshNavItems();
   }
 });
 
-// Watch for permissions loaded state to refresh navItems (fixes empty sidebar on F5)
-watch(() => permissionStore.isLoaded, async (isLoaded) => {
-  if (isLoaded && user.value) {
-    await navItemsStore.refreshNavItems();
-  }
-}, { immediate: true });
-
 // Watch for user changes to refresh navItems
 watch(() => user.value, async (newUser) => {
-  if (newUser && permissionStore.isLoaded) {
+  if (newUser) {
     await navItemsStore.refreshNavItems();
-  } else if (!newUser) {
+  } else {
     // Optionally reset navItems when logged out
     navItemsStore.filteredNavItems = [];
   }

middleware/checkPageAccess.ts

@@ -1,84 +1,70 @@
 // middleware/checkPageAccess.ts
-import { defineNuxtRouteMiddleware, navigateTo } from '#app';
-import { useAuth } from '~/composables/useAuth';
-import { usePermissionStore } from '~/stores/permissionStore';
+// Middleware to check if user has access to the page based on hakAkses
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
+    // Skip check for public pages
     const publicPaths = ['/LoginPage', '/auth/login', '/index-legacy'];
     
+    // index.vue is the debug dashboard, let's keep it accessible for now as requested
     if (to.path === '/' || publicPaths.includes(to.path)) {
         return;
     }
     
+    // On server-side, skip access check - let client handle it
+    // This matches auth.ts behavior and prevents SSR failures when cookie context is missing
     if (process.server) {
+        console.log('⏭️ Server-side: Skipping page access check (will verify on client)');
         return;
     }
     
+    // Import useAuth and useHakAkses
     const { user, checkAuth } = useAuth();
+    const { getAllowedPages } = useHakAkses();
+    
+    // If user not loaded, try to load
     if (!user.value) {
         await checkAuth();
     }
+    
+    // If still not authenticated, redirect to login
     if (!user.value) {
         return navigateTo('/LoginPage');
     }
-
-    const permissionStore = usePermissionStore();
     
-    // Ensure permissions are loaded
-    if (!permissionStore.isLoaded) {
-        const roles = [
-            ...(user.value.realm_access?.roles || []),
-            ...(user.value.roles || [])
-        ];
+    try {
+        const allowedPages = await getAllowedPages();
         
-        const groups: string[] = [];
-        const rawGroups = (user.value as any).groups || [];
-        rawGroups.forEach((g: string) => {
-            const parts = g.split('/').filter(Boolean);
-            if (parts.length > 1) {
-                groups.push(parts[1]);
-            } else if (parts.length === 1) {
-                groups.push(parts[0]);
-            }
+        const targetPath = to.path.endsWith('/') && to.path.length > 1 ? to.path.slice(0, -1) : to.path;
+        const targetPathLower = targetPath.toLowerCase();
+        const toPathLower = to.path.toLowerCase();
+        
+        // Check if user has access to this page
+        // We also check against the raw path just in case, case-insensitive
+        const isAllowed = allowedPages.some(path => {
+            const normalizedAllowed = path.endsWith('/') && path.length > 1 ? path.slice(0, -1) : path;
+            const normalizedAllowedLower = normalizedAllowed.toLowerCase();
+            const pathLower = path.toLowerCase();
+            return normalizedAllowedLower === targetPathLower || pathLower === toPathLower;
         });
-        
-        const primaryRole = roles[0] || '';
-        const primaryGroup = groups[0] || '';
-        const username = user.value.preferred_username || user.value.email || user.value.name || '';
-        
-        await permissionStore.load(primaryRole, primaryGroup, username);
-    }
-    
-    let menuKey = "";
-    if (to.name) {
-        menuKey = to.name.toString().toLowerCase().replace(/_|-/g, '-');
-    }
-    
-    // If no explicit route name, allow it for now.
-    if (!menuKey) return;
-    
-    // The previous implementation allowed some pages implicitly.
-    // If it's not configured, our can() method returns false.
-    // We should allow access if it's explicitly allowed.
-    let hasAccess = permissionStore.can(menuKey, 'canAccess');
-    
-    // Default allow Dashboard for all authenticated users
-    if (menuKey === 'dashboard') {
-        hasAccess = true;
-    }
-    
-    if (!hasAccess) {
-        console.warn(`Access denied to ${to.path}. User lacks 'canAccess' for menuKey: ${menuKey}`);
-        
-        // Find a fallback page that the user CAN access
-        const fallbackMenu = permissionStore.permissions.find(p => p.canAccess);
-        if (fallbackMenu && fallbackMenu.menuKey) {
-            // Note: menuKey might not be a valid path, but if we map routeName to menuKey,
-            // we can try to navigate to the route name instead.
-            return navigateTo({ name: fallbackMenu.menuKey });
+
+        if (!isAllowed) {
+            console.warn(`Access denied to ${to.path}. User allowed pages:`, allowedPages);
+            
+            // Redirect to first allowed page if available, else stay/error
+            if (allowedPages.length > 0) {
+                // If dashboard is allowed, go there, else go to the first allowed one
+                const dashboardPath = allowedPages.find(p => p === '/' || p === '/dashboard');
+                return navigateTo(dashboardPath || allowedPages[0]);
+            } else {
+                // No access to any page - technically this shouldn't happen if user has roles
+                console.error('User has roles but no allowed pages found in configuration.');
+                // For now, allow root as fallback since index.vue is kept
+                if (to.path === '/') return;
+            }
         }
-        
-        // Final fallback
-        return navigateTo('/');
+    } catch (error) {
+        console.error('Error checking page access:', error);
+        // On error, we might want to allow or block. Let's allow but log.
+        return;
     }
 });

nuxt.config.ts

@@ -88,7 +88,6 @@ export default defineNuxtConfig({
       wsBaseUrl: process.env.WS_API_URL || process.env.WS_BASE_URL || 'ws://10.10.123.135:8084/api/v1/ws',
       verificationApiBaseUrl: process.env.ANTRIAN_API_URL || process.env.VERIFICATION_API_BASE_URL || 'http://10.10.123.140:8089/api/v1',
       externalApiBaseUrl: process.env.VISIT_API_URL || (process.env.EXTERNAL_API_BASE_URL ? `${process.env.EXTERNAL_API_BASE_URL}/api/v1` : 'http://10.10.123.135:8084/api/v1'),
-      useMockPermissionApi: process.env.NUXT_PUBLIC_USE_MOCK_PERMISSION_API !== 'false', // Default true until backend is ready
     },
   },
 

package-lock.json

@@ -37,8 +37,7 @@
         "vue-chartjs": "^5.3.2",
         "vue-draggable-next": "^2.3.0",
         "vue-router": "^4.5.1",
-        "vue3-carousel": "^0.17.0",
-        "zod": "^4.4.3"
+        "vue3-carousel": "^0.17.0"
       },
       "devDependencies": {
         "@nuxtjs/google-fonts": "^3.2.0",
@@ -23602,15 +23601,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/zod": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
-      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

package.json

@@ -47,8 +47,7 @@
     "vue-chartjs": "^5.3.2",
     "vue-draggable-next": "^2.3.0",
     "vue-router": "^4.5.1",
-    "vue3-carousel": "^0.17.0",
-    "zod": "^4.4.3"
+    "vue3-carousel": "^0.17.0"
   },
   "devDependencies": {
     "@nuxtjs/google-fonts": "^3.2.0",

pages/AdminKlinikRuang/index.vue

@@ -103,47 +103,11 @@ const ruangStore = useRuangStore();
 
 const loading = ref(false);
 
-/**
- * Computed property untuk mendapatkan daftar klinik dengan menggabungkan 
- * semua poli Eksekutif menjadi satu entitas "GRAND PAVILIUN".
- * @returns {Array} Daftar klinik yang sudah digabung dan diurutkan.
- */
 const klinikRuangList = computed(() => {
   const list = masterStore.ruangData || [];
-  const regulerList = list.filter(k => k.jenisLayanan !== 'Eksekutif');
-  const eksekutifList = list.filter(k => k.jenisLayanan === 'Eksekutif');
-  
-  const result = [...regulerList];
-  
-  if (eksekutifList.length > 0) {
-    // Combine all Eksekutif rooms for the preview
-    const allRooms = eksekutifList.flatMap(k => k.ruangList || []);
-    // Filter unique room names
-    const uniqueRoomNames = new Set();
-    const uniqueRooms = [];
-    allRooms.forEach(r => {
-      if (!uniqueRoomNames.has(r.namaRuang)) {
-        uniqueRoomNames.add(r.namaRuang);
-        uniqueRooms.push(r);
-      }
-    });
-
-    result.push({
-      kodeKlinik: 'EKS',
-      namaKlinik: 'GRAND PAVILIUN',
-      jenisLayanan: 'Eksekutif',
-      ruangList: uniqueRooms
-    });
-  }
-  
-  return result.sort((a, b) => a.namaKlinik.localeCompare(b.namaKlinik));
+  return [...list].sort((a, b) => a.namaKlinik.localeCompare(b.namaKlinik));
 });
 
-/**
- * Navigasi ke halaman detail antrean klinik ruang tertentu.
- * @param {string} kodeKlinik - Kode unik klinik (contoh: 'AN', 'EKS').
- * @param {string} jenisLayanan - Jenis layanan ('Reguler' atau 'Eksekutif').
- */
 const navigateToKlinik = (kodeKlinik, jenisLayanan) => {
   // Include jenisLayanan as query parameter to differentiate same clinic code with different service types
   router.push({
@@ -152,9 +116,6 @@ const navigateToKlinik = (kodeKlinik, jenisLayanan) => {
   });
 };
 
-/**
- * Navigasi ke halaman master setting klinik ruang.
- */
 const navigateToSettings = () => {
   router.push('/setting/masterklinikruang');
 };

pages/AdminLoket/[id].vue

@@ -37,7 +37,6 @@
               @call="handleCallPatient"
               @open-klinik-ruang="openKlinikRuangDialog"
               @open-penunjang="openPenunjangDialog"
-              @linked="handlePatientLinked"
             />
 
             <QueueActionsCard
@@ -1452,20 +1451,12 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
   snackbarColor.value = result.success ? "success" : "error";
   snackbar.value = true;
 
-
   if (result.success) {
     broadcastUpdate();
   }
   
   closeKlinikRuangDialog();
 };
-
-// --- SIMRS Integration Handlers ---
-const handlePatientLinked = (message) => {
-  snackbarText.value = message;
-  snackbarColor.value = "success";
-  snackbar.value = true;
-};
 </script>
 
 <style scoped lang="scss">

pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue

@@ -209,14 +209,8 @@ const klinikData = computed(() => {
   }
 
   // Filter by kodeKlinik AND jenisLayanan if provided
-  let filteredRuang = []
-  if (jenisLayanan.value === 'Eksekutif' && kode === 'EKS') {
-    return {
-      kodeKlinik: 'EKS',
-      namaKlinik: 'GRAND PAVILIUN',
-      jenisLayanan: 'Eksekutif'
-    }
-  } else if (jenisLayanan.value) {
+  let filteredRuang
+  if (jenisLayanan.value) {
     filteredRuang = allRuang.filter(r => 
       r.kodeKlinik === kode && r.jenisLayanan === jenisLayanan.value
     )
@@ -286,15 +280,7 @@ watch(() => queueStore.lastKlinikCall, (newCall) => {
   
   const callKode = String(newCall.kodeKlinik || '').toUpperCase();
   const myKode = String(kodeKlinik.value || '').toUpperCase();
-  
-  let isMatch = false;
-  if (myKode === 'EKS' && jenisLayanan.value === 'Eksekutif') {
-    // For consolidated view, check if the called clinic is an Eksekutif clinic
-    const targetClinic = (masterStore.ruangData || []).find(r => r.kodeKlinik === callKode || r.kodeKlinik === newCall.kodeKlinik);
-    isMatch = targetClinic && targetClinic.jenisLayanan === 'Eksekutif';
-  } else {
-    isMatch = callKode === myKode;
-  }
+  const isMatch = callKode === myKode;
 
   console.log('🔍 [Anjungan] Klinik Code Comparison:', { 
     received: callKode, 
@@ -346,19 +332,13 @@ const klinikPatients = computed(() => {
   // Get patients from klinik-ruang stage (created from AdminKlinikRuang)
   // Filter out finished patients (status: 'processed' or 'selesai')
   // AND filter by room number to separate patients by jenisLayanan
-  return queueStore.allPatients.filter(p => {
-    if (p.processStage !== 'klinik-ruang' || p.status === 'processed' || p.status === 'selesai') {
-      return false;
-    }
-    
-    // For consolidated Eksekutif view, any valid Eksekutif room is a match, regardless of patient's original kodeKlinik
-    if (kodeKlinik.value === 'EKS' && jenisLayanan.value === 'Eksekutif') {
-      return validRoomNumbers.includes(p.nomorRuang);
-    }
-    
-    // For regular clinics, enforce exact kodeKlinik match
-    return p.kodeKlinik === kodeKlinik.value && validRoomNumbers.includes(p.nomorRuang);
-  })
+  return queueStore.allPatients.filter(p => 
+    p.processStage === 'klinik-ruang' && 
+    p.kodeKlinik === kodeKlinik.value &&
+    p.status !== 'processed' &&
+    p.status !== 'selesai' &&
+    validRoomNumbers.includes(p.nomorRuang) // Only show patients in rooms belonging to this jenisLayanan
+  )
 })
 
 // Get ruang list for this specific klinik
@@ -384,11 +364,8 @@ const ruangListForKlinik = computed(() => {
   }
   
   // Filter by kodeKlinik AND jenisLayanan if provided
-  let filtered = []
-  if (jenisLayanan.value === 'Eksekutif' && kodeKlinik.value === 'EKS') {
-    // If it's the consolidated Eksekutif view, we want ALL Eksekutif rooms
-    filtered = allRuang.filter(r => r.jenisLayanan === 'Eksekutif')
-  } else if (jenisLayanan.value) {
+  let filtered
+  if (jenisLayanan.value) {
     filtered = allRuang.filter(r => 
       r.kodeKlinik === kodeKlinik.value && r.jenisLayanan === jenisLayanan.value
     )

pages/Anjungan/AntrianKlinikRuang/index.vue

@@ -126,50 +126,15 @@ const clinicStore = useClinicStore();
 const ruangStore = useRuangStore();
 const route = useRoute();
 
-/**
- * Computed property untuk mendapatkan daftar klinik dengan menggabungkan 
- * semua poli Eksekutif menjadi satu entitas "GRAND PAVILIUN".
- * @returns {Array} Daftar klinik yang sudah digabung dan diurutkan berdasarkan nama.
- */
+// Simplified computed to use masterStore.ruangData (which is already grouped/processed by ruangStore)
 const kliniksWithRuang = computed(() => {
   const list = masterStore.ruangData || [];
-  const regulerList = list.filter(k => k.jenisLayanan !== 'Eksekutif');
-  const eksekutifList = list.filter(k => k.jenisLayanan === 'Eksekutif');
-  
-  const result = [...regulerList];
-  
-  if (eksekutifList.length > 0) {
-    // Combine all Eksekutif rooms for the preview
-    const allRooms = eksekutifList.flatMap(k => k.ruangList || []);
-    // Filter unique room names
-    const uniqueRoomNames = new Set();
-    const uniqueRooms = [];
-    allRooms.forEach(r => {
-      if (!uniqueRoomNames.has(r.namaRuang)) {
-        uniqueRoomNames.add(r.namaRuang);
-        uniqueRooms.push(r);
-      }
-    });
-
-    result.push({
-      id: 'EKS',
-      kodeKlinik: 'EKS',
-      namaKlinik: 'GRAND PAVILIUN',
-      jenisLayanan: 'Eksekutif',
-      ruangList: uniqueRooms
-    });
-  }
-  
-  return result.sort((a, b) => a.namaKlinik.localeCompare(b.namaKlinik));
+  return [...list].sort((a, b) => a.namaKlinik.localeCompare(b.namaKlinik));
 });
 
 // Deprecated: Pagination logic removed
 
 
-/**
- * Navigasi ke halaman anjungan antrean klinik ruang tertentu.
- * @param {Object} klinik - Objek data klinik yang dipilih.
- */
 const navigateToKlinik = (klinik) => {
   // Build URL with jenisLayanan query parameter to differentiate same clinic codes
   const url = `/anjungan/antrianklinikruang/${klinik.kodeKlinik}`;
@@ -177,9 +142,6 @@ const navigateToKlinik = (klinik) => {
   navigateTo({ path: url, query });
 };
 
-/**
- * Navigasi ke halaman master setting klinik ruang.
- */
 const navigateToSettings = () => {
   navigateTo('/setting/masterklinikruang');
 };

pages/Setting/HakAkses.vue

@@ -129,7 +129,6 @@
               prepend-icon="mdi-shield-edit-outline"
               class="text-capitalize rounded-lg mr-2"
               @click="editPermissions(item)"
-              v-permission="'canEdit'"
             >
               Atur Akses
             </v-btn>
@@ -166,8 +165,8 @@
           <div class="pa-6 pt-0">
             <EditHakAkses 
               v-if="editedEntity"
-              :hakAksesMenu="editedEntity.hakAksesMenu || []" 
-              @update:hakAksesMenu="editedEntity.hakAksesMenu = $event"
+              :pages="editedEntity.pages" 
+              @update:pages="editedEntity.pages = $event"
             />
           </div>
         </v-card-text>
@@ -241,7 +240,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 import EditHakAkses from '@/components/HakAkses/EditHakAkses.vue';
-import { useNavItemsStore, defaultNavItems } from '~/stores/navItems1';
+import { useNavItemsStore } from '~/stores/navItems1';
 import type { HakAkses } from '~/types/setting';
 
 definePageMeta({
@@ -322,8 +321,6 @@ const loadData = async () => {
     }
 };
 
-
-
 // Computed list based on active tab
 const displayItems = computed(() => {
     let list = [];
@@ -331,15 +328,15 @@ const displayItems = computed(() => {
     else if (activeTab.value === 'groups') list = keycloakEntities.value.groups;
     else list = keycloakEntities.value.users;
     
-    // Get all valid menuKeys from current navigation store
-    const allNavKeys = new Set<string>();
-    const extractKeys = (items: any[]) => {
+    // Get all valid paths from current navigation store
+    const allNavPaths = new Set<string>();
+    const extractPaths = (items: any[]) => {
         items.forEach((item: any) => {
-            if (item.menuKey) allNavKeys.add(item.menuKey);
-            if (item.children) extractKeys(item.children);
+            if (item.path) allNavPaths.add(item.path);
+            if (item.children) extractPaths(item.children);
         });
     };
-    extractKeys(defaultNavItems);
+    extractPaths(navItemsStore.getNavItems);
 
     return list.map((entity: any) => {
         // Find existing permission mapping
@@ -347,15 +344,18 @@ const displayItems = computed(() => {
         const lookupKey = entity.type === 'user' ? entity.username : entity.name;
         const mapping = hakAksesList.value.find(h => h.namaHakAkses === lookupKey);
         
-        if (!mapping) return { ...entity, hakAksesMenu: [], validPagesCount: 0, status: 'tidak aktif', id_mapping: null };
+        if (!mapping) return { ...entity, pages: [], validPagesCount: 0, status: 'tidak aktif', id_mapping: null };
         
-        // Count only valid pages that exist in navigation and have canAccess
-        const validMenus = (mapping.hakAksesMenu || []).filter((m: any) => m.menuKey && allNavKeys.has(m.menuKey) && m.canAccess);
+        // Count only valid pages that exist in navigation
+        const validPages = (mapping.pages || []).filter(p => {
+            const path = typeof p === 'string' ? p : (p as any)?.path;
+            return path && allNavPaths.has(path);
+        });
 
         return {
             ...entity,
-            hakAksesMenu: mapping.hakAksesMenu, // Keep original for editing
-            validPagesCount: validMenus.length,
+            pages: mapping.pages, // Keep original for editing
+            validPagesCount: validPages.length,
             status: mapping.status,
             id_mapping: mapping.id
         };
@@ -401,14 +401,10 @@ const savePermissions = async () => {
     loading.value = true;
     try {
         const payload = {
-            id: editedEntity.value.id_mapping || undefined, // Zod optional() expects undefined, not null
-            namaHakAkses: editedEntity.value.type === 'user' ? editedEntity.value.username : editedEntity.value.name,
-            role: editedEntity.value.type === 'role' ? editedEntity.value.name : undefined,
-            group: editedEntity.value.type === 'group' ? editedEntity.value.name : undefined,
-            namaTipeUser: editedEntity.value.type === 'user' ? editedEntity.value.username : undefined,
-            isGroupBased: editedEntity.value.type === 'group',
+            id: editedEntity.value.id_mapping, // If null, backend create new
+            namaHakAkses: editedEntity.value.name,
             status: 'aktif',
-            hakAksesMenu: editedEntity.value.hakAksesMenu || []
+            pages: editedEntity.value.pages
         };
 
         const response = await $fetch<{ success: boolean, message: string }>('/api/hak-akses', {
@@ -421,12 +417,10 @@ const savePermissions = async () => {
             await loadData();
             await navItemsStore.refreshNavItems();
             showEditDialog.value = false;
-        } else {
-            showSnackbar(response.message || 'Gagal menyimpan perubahan', 'error');
         }
     } catch (error) {
         console.error('Error saving:', error);
-        showSnackbar('Terjadi kesalahan pada server saat menyimpan perubahan', 'error');
+        showSnackbar('Gagal menyimpan perubahan', 'error');
     } finally {
         loading.value = false;
     }

pages/Setting/JadwalDokter/index.vue

@@ -0,0 +1,383 @@
+<script setup>
+/**
+ * Halaman Jadwal Dokter — Orchestrator utama.
+ * Menyediakan 2 mode tampilan:
+ * 1. List (default) — tabel dengan filter poli, tanggal, nama dokter
+ * 2. Calendar — kalender bulanan dengan event jadwal
+ *
+ * State management (jadwalList, selectedPoli, selectedDoctor) dikelola di sini
+ * dan diteruskan ke child component via props/defineModel.
+ */
+import PageHeader from '@/components/common/PageHeader.vue';
+import JadwalDokterList from '@/components/features/master/jadwalDokter/JadwalDokterList.vue';
+import JadwalDokterCalendar from '@/components/features/master/jadwalDokter/JadwalDokterCalendar.vue';
+import DialogTambahJadwal from '@/components/features/master/jadwalDokter/DialogTambahJadwal.vue';
+import DialogDetailEvent from '@/components/features/master/jadwalDokter/DialogDetailEvent.vue';
+import { useClinicStore } from '@/stores/clinicStore.js';
+
+// ── Tanggal Header ─────────────────────────────────────────────────────────
+
+/** Mengembalikan string tanggal hari ini dalam format Indonesia */
+const currentDate = computed(() => {
+    const now = new Date();
+    const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+    const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+    return `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
+});
+
+// ── Mode Toggle ────────────────────────────────────────────────────────────
+
+/** Mode tampilan aktif: 'list' (default) atau 'calendar' */
+const viewMode = ref('list');
+
+// ── Store & Data ───────────────────────────────────────────────────────────
+const clinicStore = useClinicStore();
+
+/** Daftar semua klinik/poli dari store */
+const clinicList = computed(() =>
+    clinicStore.clinics.map(c => ({ id: c.id, title: c.name, kode: c.kode, doctors: c.doctors ?? [] }))
+);
+
+/** Poli yang dipilih (untuk mode calendar & dialog) */
+const selectedPoli = ref(null);
+
+/** Dokter yang dipilih (untuk mode calendar & dialog) */
+const selectedDoctor = ref(null);
+
+// ── Konstanta ──────────────────────────────────────────────────────────────
+const DAY_MAP = {
+    'Minggu': 0, 'Senin': 1, 'Selasa': 2, 'Rabu': 3,
+    'Kamis': 4, 'Jumat': 5, 'Sabtu': 6
+};
+
+// ── Storage Jadwal (local state) ───────────────────────────────────────────
+
+/**
+ * Daftar jadwal yang sudah ditambahkan.
+ * Setiap entry: { id, poliId, poliName, dokter, tipe, hari?, jamMulai?, jamSelesai?, mulai?, selesai? }
+ */
+const jadwalList = ref([]);
+
+jadwalList.value = [
+    {
+        "id": 1784689277259,
+        "poliId": 1000,
+        "poliName": "ANAK",
+        "dokter": "dr. Sarah Putri, Sp.A",
+        "tipe": "Adhoc",
+        "mulai": "2026-07-05T07:00:00",
+        "selesai": "2026-07-05T08:00:00"
+    },
+    {
+        "id": 1784689301842,
+        "poliId": 1000,
+        "poliName": "ANAK",
+        "dokter": "dr. Sarah Putri, Sp.A",
+        "tipe": "Rutin",
+        "hari": [
+            "Minggu",
+        ],
+        "jamMulai": "10:00",
+        "jamSelesai": "12:00"
+    },
+    {
+        "id": 1784689301842,
+        "poliId": 1000,
+        "poliName": "ANAK",
+        "dokter": "dr. Sarah Putri, Sp.A",
+        "tipe": "Rutin",
+        "hari": [
+            "Kamis",
+        ],
+        "jamMulai": "11:00",
+        "jamSelesai": "13:00"
+    },
+    {
+        "id": 1784689305888,
+        "poliId": 1000,
+        "poliName": "ANAK",
+        "dokter": "dr. Sarah Putri, Sp.A",
+        "tipe": "Adhoc",
+        "mulai": "2026-07-05T13:00:00",
+        "selesai": "2026-07-05T14:00:00"
+    },
+    {
+        "id": 178468930123,
+        "poliId": 1000,
+        "poliName": "ANAK",
+        "dokter": "dr. Sarah Putri, Sp.A",
+        "tipe": "Adhoc",
+        "mulai": "2026-07-05T19:00:00",
+        "selesai": "2026-07-05T20:00:00"
+    }
+]
+
+// ── Generate Events Kalender ───────────────────────────────────────────────
+
+/**
+ * Format tanggal ke string YYYY-MM-DD.
+ * @param {Date} date
+ * @returns {string}
+ */
+const toDateStr = (date) => {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+};
+
+/** Tanggal referensi untuk navigasi bulan (digunakan oleh calendarEvents) */
+const viewDate = ref(new Date());
+
+/**
+ * Menghasilkan event kalender dari jadwalList yang tersimpan,
+ * difilter berdasarkan selectedPoli dan selectedDoctor.
+ * @returns {Array}
+ */
+const calendarEvents = computed(() => {
+    const events = [];
+    const year = viewDate.value.getFullYear();
+    const month = viewDate.value.getMonth();
+
+    const filtered = jadwalList.value.filter(j => {
+        if (selectedPoli.value && j.poliId !== selectedPoli.value) return false;
+        if (selectedDoctor.value && j.dokter !== selectedDoctor.value) return false;
+        return true;
+    });
+
+    filtered.forEach(jadwal => {
+        if (jadwal.tipe === 'Rutin') {
+            for (let mOffset = -1; mOffset <= 1; mOffset++) {
+                const tYear = month + mOffset < 0 ? year - 1 : month + mOffset > 11 ? year + 1 : year;
+                const tMonth = (month + mOffset + 12) % 12;
+                const daysInMonth = new Date(tYear, tMonth + 1, 0).getDate();
+
+                for (let d = 1; d <= daysInMonth; d++) {
+                    const date = new Date(tYear, tMonth, d);
+                    const dayName = Object.keys(DAY_MAP).find(k => DAY_MAP[k] === date.getDay());
+                    if (!jadwal.hari.includes(dayName)) continue;
+
+                    const dateStr = toDateStr(date);
+                    /** Tambahkan jam ke title jika tersedia */
+                    const jamLabel = jadwal.jamMulai && jadwal.jamSelesai
+                        ? ` ${jadwal.jamMulai} - ${jadwal.jamSelesai}`
+                        : '';
+                    events.push({
+                        name: `${jamLabel}`,
+                        start: jadwal.jamMulai ? new Date(`${dateStr}T${jadwal.jamMulai}:00`) : date,
+                        end: jadwal.jamSelesai ? new Date(`${dateStr}T${jadwal.jamSelesai}:00`) : date,
+                        color: 'primary',
+                        allDay: !jadwal.jamMulai,
+                        extendedProps: {
+                            id: jadwal.id,
+                            poli: jadwal.poliName,
+                            dokter: jadwal.dokter,
+                            tipe: 'Rutin',
+                            hari: jadwal.hari.join(', '),
+                        }
+                    });
+                }
+            }
+        } else {
+            /** Format jam adhoc dari datetime string */
+            const adhocMulaiTime = jadwal.mulai ? jadwal.mulai.split('T')[1]?.slice(0, 5) : '';
+            const adhocSelesaiTime = jadwal.selesai ? jadwal.selesai.split('T')[1]?.slice(0, 5) : '';
+            const adhocJamLabel = adhocMulaiTime && adhocSelesaiTime
+                ? ` ${adhocMulaiTime} - ${adhocSelesaiTime}`
+                : '';
+            events.push({
+                name: `${adhocJamLabel}`,
+                start: new Date(jadwal.mulai),
+                end: new Date(jadwal.selesai),
+                color: 'secondary',
+                allDay: false,
+                extendedProps: {
+                    id: jadwal.id,
+                    poli: jadwal.poliName,
+                    dokter: jadwal.dokter,
+                    tipe: 'Adhoc',
+                    shift: `${formatDatetime(jadwal.mulai)} – ${formatDatetime(jadwal.selesai)}`,
+                }
+            });
+        }
+    });
+
+    return events;
+});
+
+
+watch(jadwalList, () => {
+    console.log(jadwalList.value)
+}, { deep: true })
+
+/**
+ * Format ISO datetime ke string Indonesia yang ringkas.
+ * @param {string} isoStr
+ * @returns {string}
+ */
+const formatDatetime = (isoStr) => {
+    if (!isoStr) return '';
+    const d = new Date(isoStr);
+    return d.toLocaleString('id-ID', {
+        day: '2-digit', month: 'short', year: 'numeric',
+        hour: '2-digit', minute: '2-digit'
+    });
+};
+
+// ── Dialog Tambah Jadwal ───────────────────────────────────────────────────
+
+/** Apakah dialog tambah jadwal terbuka */
+const isAddOpen = ref(false);
+
+/** Tanggal yang diklik sebagai default untuk form */
+const clickedDate = ref(null);
+
+/**
+ * Menangani klik pada tanggal di kalender.
+ * @param {Date} date - Tanggal yang diklik (sudah dinormalisasi oleh child)
+ */
+const handleDateClick = (date) => {
+    clickedDate.value = date;
+    isAddOpen.value = true;
+};
+
+/**
+ * Menyimpan jadwal baru ke jadwalList dari dialog.
+ * @param {object|Array} jadwalData - Data jadwal dari dialog
+ */
+const handleSaveJadwal = (jadwalData) => {
+    if (Array.isArray(jadwalData)) {
+        jadwalList.value.push(...jadwalData);
+    } else {
+        jadwalList.value.push(jadwalData);
+    }
+};
+
+/** Membuka dialog tambah dari tombol header */
+const openAddDialog = () => {
+    clickedDate.value = new Date();
+    isAddOpen.value = true;
+};
+
+// ── Detail Event ───────────────────────────────────────────────────────────
+
+/** Event yang sedang diklik */
+const selectedEvent = ref(null);
+
+/** Apakah dialog detail terbuka */
+const isDetailOpen = ref(false);
+
+/**
+ * Menangani klik event dari kalender.
+ * @param {object} eventData - Data event yang sudah dinormalisasi oleh child
+ */
+const handleEventClick = (eventData) => {
+    selectedEvent.value = eventData;
+    isDetailOpen.value = true;
+};
+
+/**
+ * Menghapus jadwal dari jadwalList berdasarkan ID event.
+ * @param {number} id - ID jadwal yang akan dihapus
+ */
+const handleDeleteJadwal = (id) => {
+    if (!id) return;
+    jadwalList.value = jadwalList.value.filter(j => j.id !== id);
+};
+
+/**
+ * Menangani klik edit dari mode list.
+ * @param {object} item - Item tabel yang akan di-edit
+ */
+const handleEdit = (item) => {
+    // Untuk saat ini, tampilkan detail event dari item pertama
+    if (item.raw && item.raw.length > 0) {
+        const first = item.raw[0];
+        selectedEvent.value = {
+            id: first.id,
+            poli: first.poliName,
+            dokter: first.dokter,
+            tipe: first.tipe,
+            hari: first.hari ? first.hari.join(', ') : null,
+            tanggal: new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }),
+        };
+        isDetailOpen.value = true;
+    }
+};
+</script>
+
+<template>
+    <div style="background: var(--color-neutral-300); height: 100%;">
+        <PageHeader icon="mdi-calendar-clock" title="Jadwal Dokter" :subtitle="currentDate" :show-add-button="false"
+            theme="primary">
+            <template #actions>
+                <div class="d-flex align-center gap-3">
+                    <!-- Mode Toggle -->
+                    <v-btn-toggle v-model="viewMode" mandatory density="compact" variant="outlined" color="white"
+                        class="mode-toggle" divided>
+                        <v-btn value="list" size="small">
+                            <v-icon start size="18">mdi-format-list-bulleted</v-icon>
+                            List
+                        </v-btn>
+                        <v-btn value="calendar" size="small">
+                            <v-icon start size="18">mdi-calendar-month</v-icon>
+                            Calendar
+                        </v-btn>
+                    </v-btn-toggle>
+
+                    <!-- Tombol Tambah Dokter -->
+                    <v-btn color="white" elevation="0" class="add-btn-primary ml-5" @click="openAddDialog">
+                        <v-icon left size="20">mdi-plus-circle</v-icon>
+                        Tambah Jadwal
+                    </v-btn>
+                </div>
+            </template>
+        </PageHeader>
+
+        <v-container class="py-6">
+            <!-- ── Mode List (default) ──────────────────────────── -->
+            <JadwalDokterList v-if="viewMode === 'list'" :clinic-list="clinicList" :jadwal-list="jadwalList"
+                @edit="handleEdit" @add="openAddDialog" />
+
+            <!-- ── Mode Calendar ────────────────────────────────── -->
+            <JadwalDokterCalendar v-else v-model:selected-poli="selectedPoli" v-model:selected-doctor="selectedDoctor"
+                :clinic-list="clinicList" :calendar-events="calendarEvents" @date-click="handleDateClick"
+                @event-click="handleEventClick" />
+        </v-container>
+
+        <!-- ══ Dialog Tambah Jadwal (shared) ═══════════════════════ -->
+        <DialogTambahJadwal v-model="isAddOpen" :view-mode="viewMode" :clinic-list="clinicList"
+            :selected-poli="selectedPoli" :selected-doctor="selectedDoctor" :clicked-date="clickedDate"
+            :jadwal-list="jadwalList"
+            @save="handleSaveJadwal" />
+
+        <!-- ══ Dialog Detail Event (shared) ═══════════════════════ -->
+        <DialogDetailEvent v-model="isDetailOpen" :event="selectedEvent" @delete="handleDeleteJadwal" />
+    </div>
+</template>
+
+<style scoped>
+.mode-toggle {
+    border-radius: 8px !important;
+    overflow: hidden;
+}
+
+.mode-toggle .v-btn {
+    color: rgba(255, 255, 255, 0.8) !important;
+    text-transform: none !important;
+    font-weight: 600;
+    font-size: 0.8rem;
+    letter-spacing: 0.02em;
+}
+
+.mode-toggle .v-btn--active {
+    background-color: rgba(255, 255, 255, 0.2) !important;
+    color: white !important;
+}
+
+.add-btn-primary {
+    text-transform: none !important;
+    font-weight: 600;
+    font-size: 0.85rem;
+    letter-spacing: 0.02em;
+    border-radius: 8px;
+}
+</style>

pages/Setting/MasterKlinikRuang.vue

@@ -76,7 +76,7 @@
         <v-data-table
           v-model:page="page"
           :headers="headers"
-          :items="consolidatedRuangData"
+          :items="masterStore.ruangData"
           :items-per-page="itemsPerPage"
           :search="search"
           item-value="id"
@@ -120,7 +120,6 @@
           
           <template v-slot:item.layarInformasi="{ item }">
             <v-btn
-              v-if="item.id !== 'EKS'"
               size="small"
               variant="outlined"
               color="primary-600"
@@ -130,17 +129,6 @@
               <v-icon size="16" left>mdi-eye</v-icon>
               Preview
             </v-btn>
-            <v-btn
-              v-else
-              size="small"
-              variant="outlined"
-              color="primary-600"
-              @click="previewUrl = '/anjungan/antrianklinikruang/EKS?jenisLayanan=Eksekutif'; previewDialog = true;"
-              class="btn-preview mr-2"
-            >
-              <v-icon size="16" left>mdi-eye</v-icon>
-              Preview
-            </v-btn>
           </template>
           
           <template v-slot:item.jenisLayanan="{ item }">
@@ -170,29 +158,26 @@
           </template>
 
           <template v-slot:item.aksi="{ item }">
-            <template v-if="item.id !== 'EKS'">
-              <v-btn
-                size="small"
-                color=" warning-600"
-                @click="openEditDialog(item)"
-                class="btn-edit mr-2"
-                variant="flat"
-              >
-                <v-icon size="16" left>mdi-pencil</v-icon>
-                Edit
-              </v-btn>
-              <v-btn
-                size="small"
-                color="error-600"
-                @click="handleDelete(item)"
-                class="btn-delete"
-                variant="flat"
-              >
-                <v-icon size="16" left>mdi-delete</v-icon>
-                Delete
-              </v-btn>
-            </template>
-            <span v-else class="text-caption text-grey">Data Otomatis</span>
+            <v-btn
+              size="small"
+              color=" warning-600"
+              @click="openEditDialog(item)"
+              class="btn-edit mr-2"
+              variant="flat"
+            >
+              <v-icon size="16" left>mdi-pencil</v-icon>
+              Edit
+            </v-btn>
+            <v-btn
+              size="small"
+              color="error-600"
+              @click="handleDelete(item)"
+              class="btn-delete"
+              variant="flat"
+            >
+              <v-icon size="16" left>mdi-delete</v-icon>
+              Delete
+            </v-btn>
           </template>
         </v-data-table>
       </v-card-text>
@@ -406,46 +391,6 @@ const itemsPerPage = ref(10);
 const search = ref('');
 const filteredTotal = ref(masterStore.ruangData.length);
 
-/**
- * Menggabungkan data ruang klinik agar poli Eksekutif tampil sebagai satu kesatuan 'GRAND PAVILIUN'.
- * Memisahkan poli reguler dan mengekstrak semua ruangan dari poli eksekutif menjadi satu set ruangan unik.
- * @returns {Array} Array objek data ruang klinik yang sudah dikonsolidasi.
- */
-const consolidatedRuangData = computed(() => {
-  const list = masterStore.ruangData || [];
-  const regulerList = list.filter(k => k.jenisLayanan !== 'Eksekutif');
-  const eksekutifList = list.filter(k => k.jenisLayanan === 'Eksekutif');
-  
-  const result = [...regulerList];
-  
-  if (eksekutifList.length > 0) {
-    // Combine all Eksekutif rooms
-    const allRooms = eksekutifList.flatMap(k => k.ruangList || []);
-    const uniqueRoomNames = new Set();
-    const uniqueRooms = [];
-    allRooms.forEach(r => {
-      if (!uniqueRoomNames.has(r.namaRuang)) {
-        uniqueRoomNames.add(r.namaRuang);
-        uniqueRooms.push(r);
-      }
-    });
-
-    result.push({
-      id: 'EKS',
-      kodeKlinik: 'EKS',
-      namaKlinik: 'GRAND PAVILIUN',
-      jenisLayanan: 'Eksekutif',
-      ruangList: uniqueRooms,
-      _originalClinics: eksekutifList
-    });
-  }
-  
-  return result;
-});
-
-/**
- * Watcher untuk memperbarui total entri yang difilter ketika jumlah data utama berubah (dan tidak sedang mencari).
- */
 watch(() => masterStore.ruangData.length, (newLen) => {
   if (!search.value) filteredTotal.value = newLen;
 }, { immediate: true });

pages/verifikasiAkun/DetailAkun.vue

@@ -331,11 +331,7 @@ const handleAddMember = () => {
                 <div class="text-body-2">{{ profileData.birthDate }}</div>
               </v-col>
 
-              <v-col cols="3">
-                <div class="text-caption text-uppercase text-grey-darken-1 font-weight-bold mb-1">
-                  Nomor Telepon
-                </div>
-                <div class="text-body-2">{{ profileData.registrationNumber }}</div>
+              <v-col cols="2">
               </v-col>
 
               <v-col cols="7">

plugins/permission.ts

@@ -1,95 +0,0 @@
-import { defineNuxtPlugin } from '#app';
-import { usePermissionStore } from '~/stores/permissionStore';
-import type { HakAksesMenu } from '~/server/utils/schemas/permissionSchema';
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.directive('permission', {
-    mounted(el, binding) {
-      const permissionStore = usePermissionStore();
-      
-      // Determine what action to check based on modifiers or value.
-      // If it's an array: v-permission="['canEdit', 'canDelete']"
-      // If it's a string: v-permission="'canEdit'"
-      
-      const permissionsRequired = Array.isArray(binding.value) ? binding.value : [binding.value];
-      
-      // Determine the menuKey context. 
-      // In a real app, you might inject this context from the page component.
-      // For now, we extract it from the current route name.
-      const currentRoute = useRoute();
-      let menuKey = "";
-      if (currentRoute && currentRoute.name) {
-          // Convert vue-router route name to our menuKey format
-          menuKey = currentRoute.name.toString().toLowerCase().replace(/_|-/g, '-');
-      }
-
-      let hasPermission = true;
-
-      for (const action of permissionsRequired) {
-        if (!permissionStore.can(menuKey, action as keyof HakAksesMenu)) {
-          hasPermission = false;
-          break;
-        }
-      }
-
-      if (!hasPermission) {
-        if (binding.arg === 'disable') {
-          el.disabled = true;
-          el.classList.add('v-btn--disabled'); // If it's vuetify button
-          el.setAttribute('title', 'Anda tidak memiliki izin untuk aksi ini');
-          el.style.opacity = '0.5';
-          el.style.pointerEvents = 'none';
-        } else {
-          // Default: hide
-          el.style.display = 'none';
-          
-          // Better hide by removing from DOM if possible, 
-          // but display: none is safer for custom directives that don't want to break layout engines
-          // To truly remove: el.parentNode?.removeChild(el) (but breaks if Vue tries to update it)
-        }
-      }
-    },
-    updated(el, binding) {
-        // Handle reactivity if permissions change or route changes
-        const permissionStore = usePermissionStore();
-        const permissionsRequired = Array.isArray(binding.value) ? binding.value : [binding.value];
-        const currentRoute = useRoute();
-        let menuKey = "";
-        if (currentRoute && currentRoute.name) {
-            menuKey = currentRoute.name.toString().toLowerCase().replace(/_|-/g, '-');
-        }
-  
-        let hasPermission = true;
-  
-        for (const action of permissionsRequired) {
-          if (!permissionStore.can(menuKey, action as keyof HakAksesMenu)) {
-            hasPermission = false;
-            break;
-          }
-        }
-  
-        if (!hasPermission) {
-          if (binding.arg === 'disable') {
-            el.disabled = true;
-            el.classList.add('v-btn--disabled');
-            el.setAttribute('title', 'Anda tidak memiliki izin untuk aksi ini');
-            el.style.opacity = '0.5';
-            el.style.pointerEvents = 'none';
-          } else {
-            el.style.display = 'none';
-          }
-        } else {
-            // Restore if permission was granted
-            if (binding.arg === 'disable') {
-                el.disabled = false;
-                el.classList.remove('v-btn--disabled');
-                el.removeAttribute('title');
-                el.style.opacity = '1';
-                el.style.pointerEvents = 'auto';
-            } else {
-                el.style.display = ''; // Revert to original display
-            }
-        }
-    }
-  });
-});

server/api/hak-akses/check.ts

@@ -1,23 +0,0 @@
-// server/api/hak-akses/check.ts
-export default defineEventHandler(async (event) => {
-    // This is a mock endpoint to simulate backend checking permission.
-    // In production, the backend will validate the user's token directly.
-    const method = event.method;
-    if (method === 'POST') {
-        const body = await readBody(event);
-        const { menuKey, action } = body;
-        
-        // Simulating some random failure or checking logic
-        if (!menuKey || !action) {
-            return createError({ statusCode: 400, statusMessage: 'Bad Request: menuKey and action required' });
-        }
-
-        // Just simulating success for now.
-        return {
-            success: true,
-            message: `Mock check: User has ${action} permission for ${menuKey}`,
-            allowed: true
-        }
-    }
-    return createError({ statusCode: 405, statusMessage: 'Method Not Allowed' });
-});

server/api/hak-akses/index.ts

@@ -1,12 +1,12 @@
 import fs from 'fs';
 import path from 'path';
+import type { HakAkses } from '~/types/setting';
 import { randomUUID } from 'node:crypto'; // Use standard node crypto
-import { hakAksesPayloadSchema, type HakAksesPayload } from '~/server/utils/schemas/permissionSchema';
 
 const filePath = path.resolve('data/mock/hakAkses.json');
 
 // Helper to read JSON file
-const readData = (): HakAksesPayload[] => {
+const readData = (): HakAkses[] => {
     try {
         if (!fs.existsSync(filePath)) {
             // Ensure directory exists
@@ -26,7 +26,7 @@ const readData = (): HakAksesPayload[] => {
 };
 
 // Helper to write JSON file
-const writeData = (data: HakAksesPayload[]): boolean => {
+const writeData = (data: HakAkses[]): boolean => {
     try {
         fs.writeFileSync(filePath, JSON.stringify(data, null, 4), 'utf-8');
         return true;
@@ -51,20 +51,7 @@ export default defineEventHandler(async (event) => {
     // POST - Create or Update hak akses
     if (method === 'POST') {
         try {
-            const rawBody = await readBody(event);
-            
-            // Validate payload with Zod Schema (Contract testing)
-            const validationResult = hakAksesPayloadSchema.safeParse(rawBody);
-            
-            if (!validationResult.success) {
-                return {
-                    success: false,
-                    message: 'Payload invalid: Gagal menyimpan hak akses',
-                    error: validationResult.error.format()
-                };
-            }
-            
-            const body = validationResult.data;
+            const body = await readBody(event);
             const data = readData();
             
             if (body.id) {
@@ -76,21 +63,18 @@ export default defineEventHandler(async (event) => {
                         ...body
                     };
                 } else {
-                    data.push(body as HakAksesPayload);
+                    data.push(body);
                 }
             } else {
                 // Create new
-                body.id = randomUUID();
-                
-                // For backward compatibility with HakAkses.vue UI that expects 'namaHakAkses'
-                if (!body.namaHakAkses) {
-                    body.namaHakAkses = body.role || body.group || body.namaTipeUser || "Unknown";
-                }
-                if (!body.status) {
-                    body.status = 'aktif';
-                }
-                
-                data.push(body as HakAksesPayload);
+                const newId = randomUUID();
+                const newHakAkses: HakAkses = {
+                    id: newId,
+                    namaHakAkses: body.namaHakAkses,
+                    status: body.status || 'aktif',
+                    pages: body.pages || []
+                };
+                data.push(newHakAkses);
             }
             
             const success = writeData(data);
@@ -107,7 +91,7 @@ export default defineEventHandler(async (event) => {
         } catch (error) {
             return {
                 success: false,
-                message: 'Gagal memproses request',
+                message: 'Gagal menyimpan hak akses',
                 error: error instanceof Error ? error.message : 'Unknown error'
             };
         }

server/api/simrs/patient/[id].get.ts

@@ -1,35 +0,0 @@
-/**
- * Dummy API Endpoint untuk mencari data pasien dari SIMRS
- * 
- * Endpoint ini merespons request GET dengan ID pasien.
- * Digunakan sebagai simulasi (mock) sebelum API Service SIMRS yang asli tersedia.
- * 
- * @param event - Objek event request dari Nitro H3
- * @returns Object data pasien jika ID cocok, atau throw 404 Error jika tidak ditemukan
- */
-export default defineEventHandler(async (event) => {
-  const id = event.context.params?.id;
-
-  // Simulasi delay jaringan (biar ada efek loading di UI)
-  await new Promise((resolve) => setTimeout(resolve, 800));
-
-  // Data dummy (nanti ini akan didapatkan dari database SIMRS asli)
-  if (id === '123456789') {
-    return {
-      success: true,
-      data: {
-        nama: 'Andi Pratama',
-        ttl: 'Surabaya, 15 Agustus 1990',
-        jenisKelamin: 'Laki-laki',
-        noTelepon: '081234567890',
-        alamat: 'Jl. Merdeka No. 45, Klojen, Malang'
-      }
-    };
-  }
-
-  // Jika pasien tidak ditemukan
-  throw createError({
-    statusCode: 404,
-    statusMessage: `Pasien dengan nomor ${id} tidak ditemukan.`,
-  });
-});

server/utils/configDb.ts

@@ -29,7 +29,6 @@ const SEED_ANJUNGAN = [
 const SEED_ANTREAN_MASUK_SCREENS = [
   { namaScreen: 'Layar Antrean Masuk 1', nomorScreen: 'AM-001', loket: JSON.stringify([1, 2, 12, 14]) },
   { namaScreen: 'Layar Antrean Masuk 2', nomorScreen: 'AM-002', loket: JSON.stringify([3, 4]) },
-  { namaScreen: 'Layar Antrean Masuk Eksekutif', nomorScreen: 'AM-EKS', loket: JSON.stringify([1000]) },
 ];
 
 const SEED_KLINIK_RUANG = [

server/utils/schemas/permissionSchema.ts

@@ -1,25 +0,0 @@
-import { z } from 'zod';
-
-export const hakAksesMenuSchema = z.object({
-  menuKey: z.string().min(1, "menuKey is required"),
-  name: z.string().min(1, "name is required"),
-  canAccess: z.boolean().default(false),
-  canView: z.boolean().default(false),
-  canAdd: z.boolean().default(false),
-  canEdit: z.boolean().default(false),
-  canDelete: z.boolean().default(false),
-});
-
-export const hakAksesPayloadSchema = z.object({
-  id: z.string().optional(),
-  role: z.string().optional(),
-  group: z.string().optional(),
-  namaTipeUser: z.string().optional(),
-  isGroupBased: z.boolean().default(true),
-  status: z.string().optional(), // Tambahan dari mock lama
-  namaHakAkses: z.string().optional(), // Tambahan dari mock lama
-  hakAksesMenu: z.array(hakAksesMenuSchema).default([]),
-});
-
-export type HakAksesMenu = z.infer<typeof hakAksesMenuSchema>;
-export type HakAksesPayload = z.infer<typeof hakAksesPayloadSchema>;

stores/loketStore.js

@@ -79,21 +79,35 @@ export const useLoketStore = defineStore('loket', () => {
   const apiLoketData = ref([])
   
   // Local Data (EKSEKUTIF) - ID 1000+ manual input
-  // DI-persist ke localStorage. Default 1 loket melayani semua EKS.
-  const localLoketData = ref([{
-    id: 1000,
-    no: 1,
-    namaLoket: `LOKET EKS`,
-    kuota: 500,
-    // Provide all EKS clinic IDs (1000-1022) so it serves all
-    pelayanan: Array.from({ length: 23 }, (_, i) => 1000 + i), 
-    pembayaran: ['EKSEKUTIF'],
-    tipeLoket: 'EKSEKUTIF',
-    keterangan: 'ONLINE',
-    statusPelayanan: 'RAWAT JALAN',
-    source: 'local',
-    loketAktif: true
-  }])
+  // DI-persist ke localStorage. Default 14 loket hardcoded.
+  const localLoketData = ref(Array.from({ length: 14 }, (_, i) => {
+    // Distribute services securely
+    // Loket 1-5: Single service
+    // Loket 6-10: Dual services
+    // Loket 11+: Single service
+    let services = [];
+    if (i < 5) {
+      services = [1000 + i];
+    } else if (i < 10) {
+      services = [1000 + i, 1005 + i]; 
+    } else {
+      services = [1000 + i];
+    }
+
+    return {
+      id: 1000 + i,
+      no: i + 1,
+      namaLoket: `LOKET ${i + 1} EKS`,
+      kuota: 500,
+      pelayanan: services, 
+      pembayaran: ['EKSEKUTIF'],  // Changed to array for consistency
+      tipeLoket: 'EKSEKUTIF',  // Add tipeLoket field for consistency
+      keterangan: 'ONLINE',
+      statusPelayanan: 'RAWAT JALAN',
+      source: 'local',
+      loketAktif: true
+    };
+  }))
   
   // Merged data (computed) - Gabungan API + Local
   const loketData = computed(() => {

stores/navItems1.ts

@@ -2,35 +2,33 @@
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
 import { computed, ref } from 'vue'; // Import computed dari Vue
-import { usePermissionStore } from '~/stores/permissionStore';
+import { useHakAkses } from '~/composables/useHakAkses';
 
 interface NavItem {
   id: number;
   name: string; // Menggantikan 'title'
   path: string; // Menggantikan 'to'
   icon: string;
-  menuKey?: string; // New field for permission checking
   children?: NavItem[];
   badge?: string; // Tambahkan properti badge
 }
 
 // Initial default navigation items
-export const defaultNavItems: NavItem[] = [
-  { id: 1, name: "Dashboard", icon: "mdi-view-dashboard", path: "/dashboard", menuKey: "dashboard" },
-  { id: 2, name: "Verifikasi Akun", icon: "mdi-account-check-outline", path:"/verifikasiAkun/VerifikasiAkun", menuKey: "verifikasiakun-verifikasiakun" },
-  { 
-    id: 3, 
-    name: "Check In", 
-    icon: "mdi-file-document-edit-outline", 
-    path: "/CheckInPasien/checkIn",
-    menuKey: "checkinpasien-checkin"
+const defaultNavItems: NavItem[] = [
+  { id: 1, name: "Dashboard", icon: "mdi-view-dashboard", path: "/dashboard" },
+  { id: 2, name: "Verifikasi Akun", icon: "mdi-account-check-outline", path: "/verifikasiAkun/VerifikasiAkun" },
+  {
+    id: 3,
+    name: "Check In",
+    icon: "mdi-file-document-edit-outline",
+    path: "/CheckInPasien/checkIn"
     // badge: "3", 
   },
-  { id: 4, name: "Admin Loket", icon: "mdi-account-supervisor-outline", path: "/AdminLoket", menuKey: "adminloket" },
-  { id: 6, name: "Admin Klinik Ruang", icon: "mdi-door-open", path: "/AdminKlinikRuang", menuKey: "adminklinikruang" },
+  { id: 4, name: "Admin Loket", icon: "mdi-account-supervisor-outline", path: "/AdminLoket" },
+  { id: 6, name: "Admin Klinik Ruang", icon: "mdi-door-open", path: "/AdminKlinikRuang" },
   // { id: 7, name: "Admin Penunjang", icon: "mdi-plus-box-outline", path: "/AdminPenunjang" },
   // { id: 8, name: "Buat Antrean", icon: "mdi-account-multiple-plus-outline", path: "/BuatAntrean" },
-  { id: 9, name: "Monitoring Pasien", icon: "mdi-account-group-outline", path: "/MonitoringPasien/monitoringPasien", menuKey: "monitoringpasien-monitoringpasien" },
+  { id: 9, name: "Monitoring Pasien", icon: "mdi-account-group-outline", path: "/MonitoringPasien/monitoringPasien" },
   {
     id: 10,
     name: "Layar Informasi",
@@ -38,34 +36,36 @@ export const defaultNavItems: NavItem[] = [
     path: "",
     children: [
       // { id: 10, name: "Anjungan", path: "/Anjungan/Anjungan", icon: "mdi-circle-small" },
-      { id: 11, name: "Anjungan", path: "/anjungan/anjungancopy", icon: "mdi-circle-small", menuKey: "anjungan-anjungancopy" },
+      { id: 11, name: "Anjungan", path: "/anjungan/anjungancopy", icon: "mdi-circle-small" },
       // { id: 11, name: "Klinik", path: "/Anjungan/AntrianKlinik", icon: "mdi-circle-small" },
-      { id: 12, name: "Klinik Ruang", path: "/Anjungan/AntrianKlinikRuang", icon: "mdi-circle-small", menuKey: "anjungan-antrianklinikruang"},
+      { id: 12, name: "Klinik Ruang", path: "/Anjungan/AntrianKlinikRuang", icon: "mdi-circle-small" },
       // { id: 13, name: "Penunjang", path: "/Anjungan/AntrianPenunjang", icon: "mdi-circle-small"},
-      {id: 14, name: "Loket", path: "/Anjungan/AntrianLoket", icon: "mdi-circle-small", menuKey: "anjungan-antrianloket"},
-      {id: 15, name: "Antrean Masuk", path: "/Anjungan/AntreanMasuk", icon: "mdi-circle-small", menuKey: "anjungan-antreanmasuk"},
+      { id: 14, name: "Loket", path: "/Anjungan/AntrianLoket", icon: "mdi-circle-small" },
+      { id: 15, name: "Antrean Masuk", path: "/Anjungan/AntreanMasuk", icon: "mdi-circle-small" },
+
     ],
   },
-    {
+  {
     id: 15,
     name: "Master Data",
     icon: "mdi-cog-outline",
     path: "",
     children: [
-      { id: 16, name: "Hak Akses", path: "/Setting/HakAkses", icon: "mdi-circle-small", menuKey: "setting-hakakses" },
-      { id: 17, name: "User Login", path: "/Setting/UserLogin", icon: "mdi-circle-small", menuKey: "setting-userlogin" },
-      { id: 18, name: "Master Anjungan", path: "/Setting/MasterAnjungan", icon: "mdi-circle-small", menuKey: "setting-masteranjungan" },
-      { id: 19, name: "Master Loket", path: "/Setting/MasterLoket", icon: "mdi-circle-small", menuKey: "setting-masterloket" },
-      { id: 20, name: "Master Klinik", path: "/Setting/MasterKlinik", icon: "mdi-circle-small", menuKey: "setting-masterklinik" },
-      { id: 21, name: "Master Klinik Ruang", path: "/Setting/MasterKlinikRuang", icon: "mdi-circle-small", menuKey: "setting-masterklinikruang" },
+      { id: 16, name: "Hak Akses", path: "/Setting/HakAkses", icon: "mdi-circle-small" },
+      { id: 17, name: "User Login", path: "/Setting/UserLogin", icon: "mdi-circle-small" },
+      { id: 25, name: "Master Jadwal Dokter", path: "/Setting/JadwalDokter", icon: "mdi-circle-small" },
+      { id: 18, name: "Master Anjungan", path: "/Setting/MasterAnjungan", icon: "mdi-circle-small" },
+      { id: 19, name: "Master Loket", path: "/Setting/MasterLoket", icon: "mdi-circle-small" },
+      { id: 20, name: "Master Klinik", path: "/Setting/MasterKlinik", icon: "mdi-circle-small" },
+      { id: 21, name: "Master Klinik Ruang", path: "/Setting/MasterKlinikRuang", icon: "mdi-circle-small" },
       // { id: 22, name: "Master Penunjang", path: "/Setting/MasterPenunjang", icon: "mdi-circle-small" },
       // { id: 23, name: "Screen", path: "/Setting/Screen", icon: "mdi-circle-small" },
-      { id: 24, name: "Screen Antrean Masuk", path: "/Setting/ScreenAntreanMasuk", icon: "mdi-circle-small", menuKey: "setting-screenantreanmasuk" },
+      { id: 24, name: "Screen Antrean Masuk", path: "/Setting/ScreenAntreanMasuk", icon: "mdi-circle-small" },
     ],
   },
 ];
 
-const STORAGE_VERSION = '1.5'; // Increment this if you change structure or default paths
+const STORAGE_VERSION = '1.3'; // Increment this if you change structure or default paths
 
 export const useNavItemsStore = defineStore('navItems', () => {
   const storedVersion = useLocalStorage('navItems_version', '0');
@@ -83,7 +83,7 @@ export const useNavItemsStore = defineStore('navItems', () => {
     // Jika navItems.value null, undefined, atau bukan array yang valid, 
     // kembalikan array default.
     if (!Array.isArray(navItems.value) || navItems.value === null || navItems.value === undefined) {
-      return defaultNavItems; 
+      return defaultNavItems;
     }
     return navItems.value;
   });
@@ -102,16 +102,17 @@ export const useNavItemsStore = defineStore('navItems', () => {
   }
 
   // Filtered navigation items based on hakAkses
-  const filteredNavItems = ref<NavItem[]>([]);
+  const filteredNavItems = ref<NavItem[]>(defaultNavItems);
 
   async function refreshNavItems() {
-    const permissionStore = usePermissionStore();
-    
-    // Wait for permissions to be loaded if they aren't
-    if (!permissionStore.isLoaded) {
-       // We assume middleware already triggered load, if not, wait
-       // Typically, refreshNavItems is called after checkAuth, which doesn't auto-load now
-       // But checkPageAccess does. Let's just use what's in store.
+    const { getAllowedPages } = useHakAkses();
+    const allowedPages = await getAllowedPages();
+
+    if (allowedPages.length === 0) {
+      // If no hak akses defined (maybe new system not setup yet), 
+      // keep default or clear? Let's keep for now for safety during transition
+      filteredNavItems.value = defaultNavItems;
+      return;
     }
 
     const filterItems = (items: NavItem[]): NavItem[] => {
@@ -125,16 +126,9 @@ export const useNavItemsStore = defineStore('navItems', () => {
           }
           return false;
         }
-        
-        // If it's a child or leaf, check permissionStore
-        if (item.menuKey) {
-            if (item.menuKey === 'dashboard') return true;
-            return permissionStore.can(item.menuKey, 'canAccess');
-        }
-        
-        // If no menuKey configured, fallback to previous allow/deny logic or true
-        // Safe bet is to hide if not mapped, but we mapped everything in defaultNavItems.
-        return false; 
+
+        // If it's a child or leaf, check if path is in allowedPages
+        return allowedPages.includes(item.path);
       });
     };
 

stores/permissionStore.ts

@@ -1,116 +1,24 @@
+// /stores/permissionStore.ts
 import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import type { HakAksesPayload, HakAksesMenu } from "~/server/utils/schemas/permissionSchema";
 
-export const usePermissionStore = defineStore("permission", () => {
-  const permissions = ref<HakAksesMenu[]>([]);
-  const isLoaded = ref(false);
-  const isError = ref(false);
-
-  /**
-   * Load permissions for the current user's role and group
-   */
-  const load = async (role: string, group: string = "", username: string = "") => {
-    try {
+export const usePermissionStore = defineStore("permission", {
+  state: () => ({
+    data: null as any,
+  }),
+  actions: {
+    async load(path: string) {
+      const parts = path.split("/").filter(Boolean);
+      const group = parts[1] || "";
+      const role = parts.at(-1)?.toLowerCase() || "";
       const config = useRuntimeConfig();
-      const useMock = config.public.useMockPermissionApi;
-      
-      let url = "";
-      if (useMock) {
-        url = `/api/hak-akses`; // Mock endpoint (returns all config)
-      } else {
-        const apiBase = config.public.verificationApiBaseUrl || 'http://10.10.123.140:8089/api/v1';
-        // Ensure valid origin parsing
-        const origin = apiBase.startsWith('http') ? new URL(apiBase).origin : 'http://10.10.123.140:8089';
-        // In a real API, passing username might be needed if they support user-level overrides
-        url = `${origin}/api/v1/permission?roles=${role}&groups=${group}&username=${username}`;
-      }
-
-      const { data, error } = await useFetch<any>(url);
-      
-      if (error.value) {
-        throw new Error(error.value.message || "Failed to fetch permissions");
-      }
-
-      isError.value = false;
-
-      // Handle Mock vs Real API response differences
-      if (useMock && data.value?.success) {
-        // Mock returns all permission configs. Find the matching one based on precedence:
-        const allConfigs = data.value.data as HakAksesPayload[];
-        
-        // Precedence 0: Exact User Match (Specific Override)
-        let matchedConfig = allConfigs.find(c => c.namaTipeUser?.toLowerCase() === username.toLowerCase() || c.namaHakAkses?.toLowerCase() === username.toLowerCase());
-
-        // Precedence 1: Exact Role Match
-        if (!matchedConfig && role) {
-           matchedConfig = allConfigs.find(c => c.role?.toLowerCase() === role.toLowerCase() && !c.isGroupBased);
-        }
-        
-        // Precedence 2: Group Match
-        if (!matchedConfig && group) {
-           matchedConfig = allConfigs.find(c => c.isGroupBased && c.group?.toLowerCase() === group.toLowerCase());
-        }
-
-        // If found, use it, else empty (Deny-by-default)
-        permissions.value = matchedConfig?.hakAksesMenu || [];
-      } else if (!useMock && data.value?.data) {
-        // Real API returns { message: "...", data: [ { id, create, read, update, delete, pagename } ] }
-        // We need to map Real API schema back to HakAksesMenu schema (contract mapping)
-        const realApiData = Array.isArray(data.value.data) ? data.value.data : [];
-        permissions.value = realApiData.map((item: any) => ({
-          menuKey: item.pagename?.toLowerCase().replace(/\s+/g, '-') || "", // Best effort mapping if API doesn't send menuKey
-          name: item.pagename || "Unknown",
-          canAccess: item.read === true,
-          canView: item.read === true,
-          canAdd: item.create === true,
-          canEdit: item.update === true,
-          canDelete: item.delete === true
-        }));
-      } else {
-        // Unrecognized format -> Deny-by-default
-        permissions.value = [];
-      }
-      
-      isLoaded.value = true;
-    } catch (err) {
-      console.error("[permissionStore] Failed to load permissions:", err);
-      // Deny-by-default on fetch error
-      permissions.value = [];
-      isError.value = true;
-      isLoaded.value = true;
-    }
-  };
-
-  /**
-   * Check if a specific menuKey has a specific permission action.
-   * If the fetch failed or config is missing, it returns false (Deny-by-default).
-   */
-  const can = (menuKey: string, action: keyof HakAksesMenu = 'canAccess'): boolean => {
-    // If we haven't loaded yet or there was an error, deny everything
-    if (!isLoaded.value || isError.value) return false;
-
-    // // TODO(security): This check is purely for UX.
-    // // True access control must be validated on the backend!
-    
-    // Find the menu configuration
-    const menuConfig = permissions.value.find(
-      (m) => m.menuKey.toLowerCase() === menuKey.toLowerCase()
-    );
-
-    if (!menuConfig) return false; // Not configured -> deny
-
-    return menuConfig[action] === true;
-  };
-
-  /**
-   * Reset the store (e.g. on logout)
-   */
-  const clear = () => {
-    permissions.value = [];
-    isLoaded.value = false;
-    isError.value = false;
-  };
-
-  return { permissions, isLoaded, isError, load, can, clear };
+      const apiBase = config.public.verificationApiBaseUrl || 'http://10.10.123.140:8089/api/v1';
+      const origin = new URL(apiBase).origin;
+      const url = `${origin}/api/permission?roles=${role}&groups=${group}`;
+      const { data } = await useFetch(url);
+      this.data = data.value;
+    },
+    can(action: string) {
+      return this.data?.[action] === true;
+    },
+  },
 });

stores/queueStore.ts

@@ -2782,7 +2782,6 @@ const fetchPatientsForLoket = async (loketId: string | number, force: boolean =
       shift: shift,
       klinik: clinic.name || clinic,
       kodeKlinik: clinic.kode || null, // Essential for filtering
-      idKlinik: clinic.id || null,     // Essential for Eksekutif loket matching
       fastTrack: isFastTrack ? "YA" : "TIDAK",
       pembayaran: paymentType,
       noRM: `RM-${barcode.slice(-6)}`,
@@ -2805,17 +2804,12 @@ const fetchPatientsForLoket = async (loketId: string | number, force: boolean =
 
     // Auto-assign Loket ID if not provided, based on Clinic Mapping
     // fulfill requirement: "adjust based on loket id depending on creation"
-    if (!newPatient.loketId && (newPatient.kodeKlinik || newPatient.idKlinik)) {
+    if (!newPatient.loketId && newPatient.kodeKlinik) {
        const allLokets = loketStore.lokets || [];
        if (isEksekutif) {
          const targetLoket = allLokets.find(l => 
            l.pelayanan && Array.isArray(l.pelayanan) && 
-           (
-             l.pelayanan.includes(newPatient.kodeKlinik) || 
-             l.pelayanan.includes(newPatient.kodeKlinik?.split('-')[0]) ||
-             l.pelayanan.includes(newPatient.idKlinik) ||
-             l.pelayanan.includes(String(newPatient.idKlinik))
-           ) &&
+           (l.pelayanan.includes(newPatient.kodeKlinik) || l.pelayanan.includes(newPatient.kodeKlinik?.split('-')[0])) &&
            (l.id >= 1000 || l.tipeLoket === 'EKSEKUTIF')
          );
          
@@ -2824,17 +2818,12 @@ const fetchPatientsForLoket = async (loketId: string | number, force: boolean =
            if (!newPatient.loket) newPatient.loket = targetLoket.namaLoket;
            console.log(`✅ Auto-assigned Eksekutif Ticket ${newPatient.noAntrian} to Loket ${targetLoket.id} (${targetLoket.namaLoket})`);
          } else {
-           console.warn(`⚠️ Warning: No Eksekutif Loket found for clinic ID ${newPatient.idKlinik} or Code ${newPatient.kodeKlinik}. Ticket will not be routed to any loket.`);
+           console.warn(`⚠️ Warning: No Eksekutif Loket found for clinic ${newPatient.kodeKlinik}. Ticket will not be routed to any loket.`);
          }
        } else {
          const targetLoket = allLokets.find(l => 
            l.pelayanan && Array.isArray(l.pelayanan) && 
-           (
-             l.pelayanan.includes(newPatient.kodeKlinik) || 
-             l.pelayanan.includes(newPatient.kodeKlinik?.split('-')[0]) ||
-             l.pelayanan.includes(newPatient.idKlinik) ||
-             l.pelayanan.includes(String(newPatient.idKlinik))
-           )
+           (l.pelayanan.includes(newPatient.kodeKlinik) || l.pelayanan.includes(newPatient.kodeKlinik?.split('-')[0]))
          );
          
          if (targetLoket) {

update_mock.cjs

@@ -1,39 +0,0 @@
-const fs = require('fs');
-const navContent = fs.readFileSync('stores/navItems1.ts', 'utf-8');
-const keys = [...navContent.matchAll(/menuKey:\s*['"]([^'"]+)['"]/g)].map(m => m[1]);
-
-console.log('Extracted keys:', keys);
-
-const data = JSON.parse(fs.readFileSync('data/mock/hakAkses.json', 'utf-8'));
-
-const menus = keys.map(k => ({
-    menuKey: k,
-    name: k,
-    canAccess: true,
-    canView: true,
-    canAdd: true,
-    canEdit: true,
-    canDelete: true
-}));
-
-const usernameOverrides = ['[email protected]', 'akbar44', 'Akbar Attallah'];
-
-for (const user of usernameOverrides) {
-    const existing = data.find(d => d.namaTipeUser === user || d.namaHakAkses === user);
-    if (existing) {
-        existing.hakAksesMenu = menus;
-        existing.namaTipeUser = user;
-    } else {
-        data.push({
-            id: require('crypto').randomUUID(),
-            namaHakAkses: user,
-            namaTipeUser: user,
-            status: 'aktif',
-            isGroupBased: false,
-            hakAksesMenu: menus
-        });
-    }
-}
-
-fs.writeFileSync('data/mock/hakAkses.json', JSON.stringify(data, null, 4));
-console.log('Granted full access to ' + usernameOverrides.join(', '));