diff --git a/components/pendaftaran/BiodataPasien.vue b/components/pendaftaran/BiodataPasien.vue
index eb35c35..5bcb582 100644
--- a/components/pendaftaran/BiodataPasien.vue
+++ b/components/pendaftaran/BiodataPasien.vue
@@ -85,6 +85,54 @@ const handlePatientSelect = (patient: PatientData | null) => {
     }
 };
 
+// Fetch patient by RM number (for edit mode)
+const fetchPatientByRm = async (rm: string) => {
+    if (!rm) return;
+    
+    loadingPatients.value = true;
+    
+    try {
+        const response = await api.get('/reference/pasien', {
+            params: {
+                limit: 1,
+                search: rm
+            }
+        });
+
+        if (response.data?.data && response.data.data.length > 0) {
+            const patient = response.data.data[0];
+            if (patient.nomr === rm) {
+                selectedPatient.value = patient;
+                patientItems.value = [patient];
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching patient by RM:', error);
+    } finally {
+        loadingPatients.value = false;
+    }
+};
+
+// Watch for formData changes to load patient details in edit mode
+watchEffect(async () => {
+    const rm = formData.value.noRekamMedis;
+    const nama = formData.value.namaPasien;
+    
+    // Use nextTick to ensure all reactive updates are complete
+    await nextTick();
+    
+    // If both RM and Nama are populated but selectedPatient is not, fetch patient details
+    if (rm && nama && !selectedPatient.value) {
+        await fetchPatientByRm(rm);
+    }
+    
+    // Clear selectedPatient if RM is cleared
+    if (!rm && selectedPatient.value) {
+        selectedPatient.value = null;
+        patientItems.value = [];
+    }
+});
+
 // Phone validation rules
 const phoneLength = (value: string) => {
     if (!value) return true;
@@ -164,7 +212,6 @@ const deletePhoneNumber = (index: number) => {
                     <v-label class="mb-2 font-weight-medium">No Rekam Medis <span
                             class="text-error">*</span></v-label>
                     <v-autocomplete
-                        autofocus
                         v-model="formData.noRekamMedis"
                         :items="patientItems"
                         item-title="select"
@@ -218,7 +265,9 @@ const deletePhoneNumber = (index: number) => {
                     <!-- Jenis Kelamin -->
                     <v-col cols="12" md="6">
                         <v-label class="mb-2 font-weight-medium">Jenis Kelamin</v-label>
-                        <v-btn-group
+                        <v-text-field  :model-value="formData.jenisKelamin === 'L' ? 'Laki-laki' : 'Perempuan'"  variant="outlined" density="compact"
+                        hide-details="auto" readonly style="background-color: #f5f5f5; border-radius: 4px;"></v-text-field>
+                        <!-- <v-btn-group
                             v-model="formData.jenisKelamin"
                             divided
                             density="compact"
@@ -229,8 +278,8 @@ const deletePhoneNumber = (index: number) => {
                                 :color="formData.jenisKelamin === 'L' ? 'info' : 'default'"
                                 :variant="formData.jenisKelamin === 'L' ? 'flat' : 'outlined'"
                                 class="flex-1-1"
-                                @click="!readonly && (formData.jenisKelamin = 'L')"
-                                :readonly
+                                @click="formData.jenisKelamin === 'L'"
+                                
                             >
                                 <v-icon icon="mdi-gender-male"></v-icon>
                                 Laki-laki
@@ -239,13 +288,13 @@ const deletePhoneNumber = (index: number) => {
                                 :color="formData.jenisKelamin === 'P' ? 'error' : 'default'"
                                 :variant="formData.jenisKelamin === 'P' ? 'flat' : 'outlined'"
                                 class="flex-1-1"
-                                :readonly
-                                @click="!readonly && (formData.jenisKelamin = 'P')"
+                                
+                                @click="formData.jenisKelamin === 'P'"
                             >
                                 <v-icon icon="mdi-gender-female"></v-icon>
                                 Perempuan
                             </v-btn>
-                        </v-btn-group>
+                        </v-btn-group> -->
                     </v-col>
 
                     <!-- Tanggal Lahir -->
@@ -271,7 +320,7 @@ const deletePhoneNumber = (index: number) => {
                     </v-col>
 
                     <!-- Nomor Telepon -->
-                    <v-col cols="6">
+                    <v-col cols="12">
                     <v-label class="mb-2 font-weight-medium">Nomor Telepon</v-label>
                     
                     <!-- Input field for adding phone number -->
@@ -285,6 +334,7 @@ const deletePhoneNumber = (index: number) => {
                                 type="tel"
                                 hide-details="auto"
                                 @input="handlePhoneInput"
+                                @keyup.enter="addPhoneNumber"
                                 :error-messages="phoneError !== true && newPhoneNumber ? [phoneError as string] : []"
                                 class="flex-1-1"
                             >
diff --git a/components/pendaftaran/MedisPasien.vue b/components/pendaftaran/MedisPasien.vue
index 1164e77..6a788fc 100644
--- a/components/pendaftaran/MedisPasien.vue
+++ b/components/pendaftaran/MedisPasien.vue
@@ -10,14 +10,14 @@ const props = withDefaults(defineProps<Props>(), {
 const diagnosisItems = defineModel<DiagnosisItem[]>('diagnosisItems', { required: true });
 const tindakanItems = defineModel<TindakanItem[]>('tindakanItems', { required: true });
 
-// Modal state for diagnosis
-const showDiagnosisModal = ref(false);
+// Form state for diagnosis
 const diagnosisForm = ref<DiagnosisItem>({
     kodeDiagnosa: '',
     diagnosa: '',
     jenisDiagnosa: 'utama'
 });
 const editingDiagnosisIndex = ref<number | null>(null);
+const diagnosisFormExpanded = ref(true); // Always show form
 const diagnosisList = ref<DiagnosisApiData[]>([]);
 const loadingDiagnosis = ref(false);
 const diagnosisSearchTimeout = ref<NodeJS.Timeout | null>(null);
@@ -75,14 +75,14 @@ const diagnosisOptions = computed(() => {
     }));
 });
 
-// Modal state for tindakan
-const showTindakanModal = ref(false);
+// Form state for tindakan
 const tindakanForm = ref<TindakanItem>({
     kodeTindakan: '',
     tindakan: '',
     tindakanTambahan: ''
 });
 const editingTindakanIndex = ref<number | null>(null);
+const tindakanFormExpanded = ref(true); // Always show form
 const tindakanList = ref<TindakanApiData[]>([]);
 const loadingTindakan = ref(false);
 const tindakanSearchTimeout = ref<NodeJS.Timeout | null>(null);
@@ -148,20 +148,22 @@ if (!Array.isArray(tindakanItems.value)) {
     tindakanItems.value = [];
 }
 
-const openDiagnosisModal = () => {
+const resetDiagnosisForm = () => {
     diagnosisForm.value = {
         kodeDiagnosa: '',
         diagnosa: '',
         jenisDiagnosa: 'utama'
     };
     editingDiagnosisIndex.value = null;
-    showDiagnosisModal.value = true;
+};
+
+const openDiagnosisModal = () => {
+    resetDiagnosisForm();
 };
 
 const editDiagnosis = (index: number) => {
     diagnosisForm.value = { ...diagnosisItems.value[index] };
     editingDiagnosisIndex.value = index;
-    showDiagnosisModal.value = true;
 };
 
 const saveDiagnosis = () => {
@@ -173,13 +175,11 @@ const saveDiagnosis = () => {
         diagnosisItems.value.push({ ...diagnosisForm.value });
     }
     
-    showDiagnosisModal.value = false;
-    diagnosisForm.value = {
-        kodeDiagnosa: '',
-        diagnosa: '',
-        jenisDiagnosa: 'utama'
-    };
-    editingDiagnosisIndex.value = null;
+    resetDiagnosisForm();
+};
+
+const cancelEditDiagnosis = () => {
+    resetDiagnosisForm();
 };
 
 const deleteDiagnosis = (index: number) => {
@@ -191,24 +191,25 @@ const handleKodeDiagnosaChange = (kode: string) => {
     const found = diagnosisList.value.find(d => d.kodeicd === kode);
     if (found) {
         diagnosisForm.value.diagnosa = found.keterangan;
-        // Keep jenisDiagnosa as is or default to current value
     }
 };
 
-const openTindakanModal = () => {
+const resetTindakanForm = () => {
     tindakanForm.value = {
         kodeTindakan: '',
         tindakan: '',
         tindakanTambahan: ''
     };
     editingTindakanIndex.value = null;
-    showTindakanModal.value = true;
+};
+
+const openTindakanModal = () => {
+    resetTindakanForm();
 };
 
 const editTindakan = (index: number) => {
     tindakanForm.value = { ...tindakanItems.value[index] };
     editingTindakanIndex.value = index;
-    showTindakanModal.value = true;
 };
 
 const saveTindakan = () => {
@@ -220,13 +221,11 @@ const saveTindakan = () => {
         tindakanItems.value.push({ ...tindakanForm.value });
     }
     
-    showTindakanModal.value = false;
-    tindakanForm.value = {
-        kodeTindakan: '',
-        tindakan: '',
-        tindakanTambahan: ''
-    };
-    editingTindakanIndex.value = null;
+    resetTindakanForm();
+};
+
+const cancelEditTindakan = () => {
+    resetTindakanForm();
 };
 
 const deleteTindakan = (index: number) => {
@@ -238,296 +237,363 @@ const handleKodeTindakanChange = (kode: string) => {
     const found = tindakanList.value.find(t => t.kode === kode);
     if (found) {
         tindakanForm.value.tindakan = found.keterangan;
-        // Keep tindakanTambahan as is or user can input manually
     }
 };
 </script>
 
 <template>
     <v-card elevation="10">
+        <v-divider></v-divider>
         <v-card-item>
             <h5 class="text-h5 font-weight-bold">Data Medis Pasien</h5>
         </v-card-item>
-        <v-divider></v-divider>
         <v-card-text>
             <!-- Diagnosa -->
             <div class="mb-6">
                 <h6 class="text-h6 font-weight-medium mb-3">Diagnosa</h6>
-                <v-card variant="outlined" class="mb-3">
-                    <v-alert
-                        v-if="diagnosisItems.length === 0"
-                        type="info"
-                        variant="tonal"
-                        density="compact"
-                    >
-                        <div class="d-flex align-center">
-                            <span>No items</span>
-                        </div>
-                    </v-alert>
-                    <v-list v-else density="compact">
-                        <v-list-item
-                            v-for="(item, index) in diagnosisItems"
-                            :key="index"
-                            class="px-4 mb-2"
-                            @click="!readonly && editDiagnosis(index)"
-                            :style="readonly ? 'cursor: default;' : 'cursor: pointer;'"
+                
+                <!-- Form Input Diagnosa -->
+                <v-card v-if="!readonly" variant="outlined" class="mb-4 pa-4" color="blue-lighten-5">
+                    <v-row>
+
+                        <!-- Jenis Diagnosa -->
+                        <v-col cols="12" md="3">
+                            <v-label class="mb-2 font-weight-medium text-caption">
+                                Jenis Diagnosa <span class="text-error">*</span>
+                            </v-label>
+                            <v-select
+                                v-model="diagnosisForm.jenisDiagnosa"
+                                :items="['utama', 'tambahan']"
+                                variant="outlined"
+                                density="compact"
+                                hide-details="auto"
+                            ></v-select>
+                            <!-- <v-btn-group
+                                v-model="diagnosisForm.jenisDiagnosa"
+                                variant="outlined"
+                                density="compact"
+                            >
+                                <v-btn
+                                    :color="diagnosisForm.jenisDiagnosa === 'utama' ? 'primary' : 'light'"
+                                    variant="flat"
+                                    size="small"
+                                    @click="diagnosisForm.jenisDiagnosa = 'utama'"
+                                    :value="'utama'"
+                                >
+                                    Diagnosa Utama
+                                </v-btn>
+                                <v-btn
+                                    :color="diagnosisForm.jenisDiagnosa === 'tambahan' ? 'primary' : 'light'"
+                                    variant="flat"
+                                    size="small"
+                                    @click="diagnosisForm.jenisDiagnosa = 'tambahan'"
+                                    :value="'tambahan'"
+                                >
+                                    Diagnosa Tambahan
+                                </v-btn>
+                            </v-btn-group> -->
+                        </v-col>
+
+                        <!-- Kode Diagnosa -->
+                        <v-col cols="12" md="4">
+                            <v-label class="mb-2 font-weight-medium text-caption">
+                                Kode Diagnosa <span class="text-error">*</span>
+                            </v-label>
+                            <v-autocomplete
+                                v-model="diagnosisForm.kodeDiagnosa"
+                                :items="diagnosisOptions"
+                                placeholder="Ketik min. 3 karakter..."
+                                variant="outlined"
+                                density="compact"
+                                hide-details="auto"
+                                :loading="loadingDiagnosis"
+                                no-filter
+                                clearable
+                                @update:search="handleDiagnosisSearchInput"
+                                @update:model-value="handleKodeDiagnosaChange"
+                            >
+                                <template #no-data>
+                                    <v-list-item>
+                                        <v-list-item-title class="text-caption">
+                                            {{ diagnosisSearchPerformed && diagnosisList.length === 0 
+                                                 ? 'Data tidak ditemukan' : 'Ketik untuk mencari...' }}
+                                        </v-list-item-title>
+                                    </v-list-item>
+                                </template>
+                            </v-autocomplete>
+                        </v-col>
+
+                        <!-- Diagnosa -->
+                        <v-col cols="12" md="5">
+                            <v-label class="mb-2 font-weight-medium text-caption">
+                                Diagnosa <span class="text-error">*</span>
+                            </v-label>
+                            <v-text-field
+                                v-model="diagnosisForm.diagnosa"
+                                variant="outlined"
+                                density="compact"
+                                readonly
+                                bg-color="grey-lighten-3"
+                                hide-details="auto"
+                            ></v-text-field>
+                        </v-col>
+
+                        <!-- Action Buttons -->
+                        <v-col cols="12">
+                            <div class="d-flex ga-2 justify-end">
+                                <v-btn
+                                    v-if="editingDiagnosisIndex !== null"
+                                    color="default"
+                                    variant="outlined"
+                                    size="small"
+                                    @click="cancelEditDiagnosis"
+                                >
+                                    <v-icon start size="small">mdi-close</v-icon>
+                                    Batal
+                                </v-btn>
+                                <v-btn
+                                    color="primary"
+                                    variant="flat"
+                                    size="small"
+                                    @click="saveDiagnosis"
+                                    :disabled="!diagnosisForm.kodeDiagnosa || !diagnosisForm.diagnosa"
+                                >
+                                    <v-icon start size="small">
+                                        {{ editingDiagnosisIndex !== null ? 'mdi-check' : 'mdi-plus' }}
+                                    </v-icon>
+                                    {{ editingDiagnosisIndex !== null ? 'Update' : 'Tambah' }}
+                                </v-btn>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-card>
+
+                <!-- List Diagnosa -->
+                        <v-alert
+                            v-if="diagnosisItems.length === 0"
+                            type="info"
+                            variant="tonal"
+                            density="compact"
+                            class="ma-0"
                         >
-                            <template #default>
-                                <div class="d-flex align-center justify-space-between w-100">
-                                    <div>
-                                        <div class="font-weight-medium">{{ item.kodeDiagnosa }} - {{ item.diagnosa }}</div>
-                                        <div class="text-caption text-medium-emphasis">
-                                            {{ item.jenisDiagnosa === 'utama' ? 'Diagnosa Utama' : 'Diagnosa Tambahan' }}
-                                        </div>
+                            <div class="d-flex align-center">
+                                <span>Tidak ada data diagnosa</span>
+                            </div>
+                        </v-alert>
+                        
+                <v-card v-else variant="outlined">
+                    <v-card-text class="pa-1">
+                        <v-list  density="compact" class="pa-0">
+                            <v-list-item
+                                v-for="(item, index) in diagnosisItems"
+                                :key="index"
+                                class="px-4"
+                                :class="{ 'bg-blue-lighten-5': editingDiagnosisIndex === index }"
+                            >
+                                <template #prepend>
+                                    <v-avatar 
+                                        :color="item.jenisDiagnosa === 'utama' ? 'primary' : 'secondary'" 
+                                        size="32" 
+                                        class="mr-3"
+                                    >
+                                        <v-icon size="small">
+                                            {{ item.jenisDiagnosa === 'utama' ? 'mdi-stethoscope' : 'mdi-stethoscope' }}
+                                        </v-icon>
+                                    </v-avatar>
+                                </template>
+                                
+                                <v-list-item-title class="font-weight-medium">
+                                    {{ item.kodeDiagnosa }} - {{ item.diagnosa }}
+                                </v-list-item-title>
+                                <v-list-item-subtitle class="text-caption">
+                                    {{ item.jenisDiagnosa === 'utama' ? 'Diagnosa Utama' : 'Diagnosa Tambahan' }}
+                                </v-list-item-subtitle>
+                                
+                                <template v-if="!readonly" #append>
+                                    <div class="d-flex ga-1">
+                                        <v-btn
+                                            icon
+                                            size="x-small"
+                                            variant="text"
+                                            color="primary"
+                                            @click="editDiagnosis(index)"
+                                        >
+                                            <v-icon size="small">mdi-pencil</v-icon>
+                                        </v-btn>
+                                        <v-btn
+                                            icon
+                                            size="x-small"
+                                            variant="text"
+                                            color="error"
+                                            @click="deleteDiagnosis(index)"
+                                        >
+                                            <v-icon size="small">mdi-delete</v-icon>
+                                        </v-btn>
                                     </div>
-                                    <v-btn
-                                        v-if="!readonly"
-                                        icon
-                                        size="small"
-                                        variant="text"
-                                        color="error"
-                                        @click.stop="deleteDiagnosis(index)"
-                                    >
-                                        <v-icon>mdi-delete</v-icon>
-                                    </v-btn>
-                                </div>
-                            </template>
-                        </v-list-item>
-                    </v-list>
+                                </template>
+                            </v-list-item>
+                        </v-list>
+                    </v-card-text>
                 </v-card>
-                <v-btn v-if="!readonly" color="primary" prepend-icon="mdi-plus" @click="openDiagnosisModal">
-                    Tambah Diagnosa
-                </v-btn>
             </div>
 
             <!-- Tindakan -->
             <div>
                 <h6 class="text-h6 font-weight-medium mb-3">Tindakan</h6>
-                <v-card variant="outlined" class="mb-3">
-                    <v-alert
-                        v-if="tindakanItems.length === 0"
-                        type="info"
-                        variant="tonal"
-                        density="compact"
-                    >
-                        <div class="d-flex align-center">
-                            <span>No items</span>
-                        </div>
-                    </v-alert>
-                    <v-list v-else density="compact">
-                        <v-list-item
-                            v-for="(item, index) in tindakanItems"
-                            :key="index"
-                            class="px-4 mb-2"
-                            @click="!readonly && editTindakan(index)"
-                            :style="readonly ? 'cursor: default;' : 'cursor: pointer;'"
-                        >
-                            <template #default>
-                                <div class="d-flex align-center justify-space-between w-100">
-                                    <div>
-                                        <div class="font-weight-medium">{{ item.kodeTindakan }} - {{ item.tindakan }}</div>
-                                        <div v-if="item.tindakanTambahan" class="text-caption text-medium-emphasis">
-                                            {{ item.tindakanTambahan }}
-                                        </div>
-                                    </div>
-                                    <v-btn
-                                        v-if="!readonly"
-                                        icon
-                                        size="small"
-                                        variant="text"
-                                        color="error"
-                                        @click.stop="deleteTindakan(index)"
-                                    >
-                                        <v-icon>mdi-delete</v-icon>
-                                    </v-btn>
-                                </div>
-                            </template>
-                        </v-list-item>
-                    </v-list>
+                
+                <!-- Form Input Tindakan -->
+                <v-card v-if="!readonly" variant="outlined" class="mb-4 pa-4" color="purple-lighten-5">
+                    <v-row>
+                        <!-- Kode Tindakan -->
+                        <v-col cols="12" md="6">
+                            <v-label class="mb-2 font-weight-medium text-caption">
+                                Kode Tindakan <span class="text-error">*</span>
+                            </v-label>
+                            <v-autocomplete
+                                v-model="tindakanForm.kodeTindakan"
+                                :items="tindakanOptions"
+                                placeholder="Ketik min. 3 karakter..."
+                                variant="outlined"
+                                density="compact"
+                                hide-details="auto"
+                                :loading="loadingTindakan"
+                                no-filter
+                                clearable
+                                @update:search="handleTindakanSearchInput"
+                                @update:model-value="handleKodeTindakanChange"
+                            >
+                                <template #no-data>
+                                    <v-list-item>
+                                        <v-list-item-title class="text-caption">
+                                            {{ tindakanSearchPerformed && tindakanList.length === 0 
+                                                ? 'Data tidak ditemukan' : 'Ketik untuk mencari...' }}
+                                        </v-list-item-title>
+                                    </v-list-item>
+                                </template>
+                            </v-autocomplete>
+                        </v-col>
+
+                        <!-- Tindakan -->
+                        <v-col cols="12" md="6">
+                            <v-label class="mb-2 font-weight-medium text-caption">
+                                Tindakan <span class="text-error">*</span>
+                            </v-label>
+                            <v-text-field
+                                v-model="tindakanForm.tindakan"
+                                variant="outlined"
+                                density="compact"
+                                readonly
+                                bg-color="grey-lighten-3"
+                                hide-details="auto"
+                            ></v-text-field>
+                        </v-col>
+
+                        <!-- Tindakan Tambahan -->
+                        <v-col cols="12" md="12">
+                            <v-label class="mb-2 font-weight-medium text-caption">
+                                Tindakan Tambahan
+                            </v-label>
+                            <v-textarea
+                                v-model="tindakanForm.tindakanTambahan"
+                                placeholder="Prosedur tambahan..."
+                                variant="outlined"
+                                density="compact"
+                                rows="2"
+                                hide-details="auto"
+                            ></v-textarea>
+                        </v-col>
+
+                        <!-- Action Buttons -->
+                        <v-col cols="12">
+                            <div class="d-flex ga-2 justify-end">
+                                <v-btn
+                                    v-if="editingTindakanIndex !== null"
+                                    color="default"
+                                    variant="outlined"
+                                    size="small"
+                                    @click="cancelEditTindakan"
+                                >
+                                    <v-icon start size="small">mdi-close</v-icon>
+                                    Batal
+                                </v-btn>
+                                <v-btn
+                                    color="primary"
+                                    variant="flat"
+                                    size="small"
+                                    @click="saveTindakan"
+                                    :disabled="!tindakanForm.kodeTindakan || !tindakanForm.tindakan"
+                                >
+                                    <v-icon start size="small">
+                                        {{ editingTindakanIndex !== null ? 'mdi-check' : 'mdi-plus' }}
+                                    </v-icon>
+                                    {{ editingTindakanIndex !== null ? 'Update' : 'Tambah' }}
+                                </v-btn>
+                            </div>
+                        </v-col>
+                    </v-row>
                 </v-card>
-                <v-btn v-if="!readonly" color="primary" prepend-icon="mdi-plus" @click="openTindakanModal">
-                    Tambah Tindakan
-                </v-btn>
+
+                <!-- List Tindakan -->
+                        <v-alert
+                            v-if="tindakanItems.length === 0"
+                            type="info"
+                            variant="tonal"
+                            density="compact"
+                            class="ma-0"
+                        >
+                            <div class="d-flex align-center">
+                                <span>Tidak ada data tindakan</span>
+                            </div>
+                        </v-alert>
+                        <v-card v-else variant="outlined">
+                            <v-card-text class="pa-1">
+                                <v-list  density="compact" class="pa-0">
+                                    <v-list-item
+                                        v-for="(item, index) in tindakanItems"
+                                        :key="index"
+                                        class="px-4 mb-1"
+                                        :class="{ 'bg-purple-lighten-5': editingTindakanIndex === index }"
+                                    >
+                                        <template #prepend>
+                                            <v-avatar color="primary" size="32" class="mr-3">
+                                                <v-icon size="small">mdi-medical-bag</v-icon>
+                                            </v-avatar>
+                                        </template>
+                                        
+                                        <v-list-item-title class="font-weight-medium">
+                                            {{ item.kodeTindakan }} - {{ item.tindakan }}
+                                        </v-list-item-title>
+                                        <v-list-item-subtitle v-if="item.tindakanTambahan" class="text-caption">
+                                            {{ item.tindakanTambahan }}
+                                        </v-list-item-subtitle>
+                                        
+                                        <template v-if="!readonly" #append>
+                                            <div class="d-flex ga-1">
+                                                <v-btn
+                                                    icon
+                                                    size="x-small"
+                                                    variant="text"
+                                                    color="primary"
+                                                    @click="editTindakan(index)"
+                                                >
+                                                    <v-icon size="small">mdi-pencil</v-icon>
+                                                </v-btn>
+                                                <v-btn
+                                                    icon
+                                                    size="x-small"
+                                                    variant="text"
+                                                    color="error"
+                                                    @click="deleteTindakan(index)"
+                                                >
+                                                    <v-icon size="small">mdi-delete</v-icon>
+                                                </v-btn>
+                                            </div>
+                                        </template>
+                                    </v-list-item>
+                                </v-list>
+                            </v-card-text>  
+                        </v-card>
             </div>
         </v-card-text>
     </v-card>
-
-    <!-- Modal for adding diagnosis -->
-    <v-dialog v-model="showDiagnosisModal" max-width="800px">
-        <v-card>
-            <v-card-title class="d-flex align-center justify-space-between pa-4">
-                <div class="d-flex align-center">
-                    <v-icon class="mr-3">mdi-package-variant</v-icon>
-                    <span class="text-h6">{{ editingDiagnosisIndex !== null ? 'Edit' : 'Tambah' }} Item Data Diagnosa Pasien Operasi</span>
-                </div>
-                <v-btn
-                    icon
-                    variant="text"
-                    @click="showDiagnosisModal = false"
-                >
-                    <v-icon>mdi-close</v-icon>
-                </v-btn>
-            </v-card-title>
-            
-            <v-divider></v-divider>
-            
-            <v-card-text class="pa-6">
-                <v-row>
-                    <!-- Kode Diagnosa -->
-                    <v-col cols="12" md="6">
-                        <v-label class="mb-2 font-weight-medium">Kode Diagnosa</v-label>
-                        <v-autocomplete
-                            v-model="diagnosisForm.kodeDiagnosa"
-                            :items="diagnosisOptions"
-                            placeholder="Ketik minimal 3 karakter untuk mencari diagnosa"
-                            variant="outlined"
-                            density="comfortable"
-                            hide-details="auto"
-                            :loading="loadingDiagnosis"
-                            no-filter
-                            clearable
-                            @update:search="handleDiagnosisSearchInput"
-                            @update:model-value="handleKodeDiagnosaChange"
-                        >
-                            <template #no-data>
-                                <v-list-item>
-                                    <v-list-item-title>
-                                        {{ diagnosisSearchPerformed && diagnosisList.length === 0 
-                                             ? 'Data tidak ditemukan' : 'Cari Diagnosa' }}
-                                    </v-list-item-title>
-                                </v-list-item>
-                            </template>
-                        </v-autocomplete>
-                    </v-col>
-
-                    <!-- Diagnosa -->
-                    <v-col cols="12" md="6">
-                        <v-label class="mb-2 font-weight-medium">Diagnosa</v-label>
-                        <v-text-field
-                            v-model="diagnosisForm.diagnosa"
-                            variant="outlined"
-                            density="comfortable"
-                            readonly
-                            bg-color="grey-lighten-3"
-                            hide-details="auto"
-                        ></v-text-field>
-                    </v-col>
-
-                    <!-- Jenis Diagnosa -->
-                    <v-col cols="12">
-                        <v-label class="mb-2 font-weight-medium">Jenis Diagnosa</v-label>
-                        <v-radio-group v-model="diagnosisForm.jenisDiagnosa" inline hide-details="auto">
-                            <v-radio label="Diagnosa Utama" value="utama" color="primary"></v-radio>
-                            <v-radio label="Diagnosa Tambahan" value="tambahan" color="primary"></v-radio>
-                        </v-radio-group>
-                    </v-col>
-                </v-row>
-            </v-card-text>
-            
-            <v-divider></v-divider>
-            
-            <v-card-actions class="pa-4 justify-end">
-                <v-btn
-                    color="primary"
-                    variant="flat"
-                    @click="saveDiagnosis"
-                    :disabled="!diagnosisForm.kodeDiagnosa.trim() || !diagnosisForm.diagnosa.trim()"
-                >
-                    <v-icon start>mdi-check</v-icon>
-                    Simpan
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-
-    <!-- Modal for adding tindakan -->
-    <v-dialog v-model="showTindakanModal" max-width="800px">
-        <v-card>
-            <v-card-title class="d-flex align-center justify-space-between pa-4">
-                <div class="d-flex align-center">
-                    <v-icon class="mr-3">mdi-package-variant</v-icon>
-                    <span class="text-h6">{{ editingTindakanIndex !== null ? 'Edit' : 'Tambah' }} Item Data Tindakan Pasien Operasi</span>
-                </div>
-                <v-btn
-                    icon
-                    variant="text"
-                    @click="showTindakanModal = false"
-                >
-                    <v-icon>mdi-close</v-icon>
-                </v-btn>
-            </v-card-title>
-            
-            <v-divider></v-divider>
-            
-            <v-card-text class="pa-6">
-                <v-row>
-                    <!-- Kode Tindakan -->
-                    <v-col cols="12" md="6">
-                        <v-label class="mb-2 font-weight-medium">Kode Tindakan</v-label>
-                        <v-autocomplete
-                            v-model="tindakanForm.kodeTindakan"
-                            :items="tindakanOptions"
-                            placeholder="Ketik minimal 3 karakter untuk mencari tindakan"
-                            variant="outlined"
-                            density="comfortable"
-                            hide-details="auto"
-                            :loading="loadingTindakan"
-                            no-filter
-                            clearable
-                            @update:search="handleTindakanSearchInput"
-                            @update:model-value="handleKodeTindakanChange"
-                        >
-                            <template #no-data>
-                                <v-list-item>
-                                    <v-list-item-title>
-                                        {{ tindakanSearchPerformed && tindakanList.length === 0 
-                                            ? 'Data tidak ditemukan' : 'Cari Tindakan' }}
-                                    </v-list-item-title>
-                                </v-list-item>
-                            </template>
-                        </v-autocomplete>
-                    </v-col>
-
-                    <!-- Tindakan -->
-                    <v-col cols="12" md="6">
-                        <v-label class="mb-2 font-weight-medium">Tindakan</v-label>
-                        <v-text-field
-                            v-model="tindakanForm.tindakan"
-                            variant="outlined"
-                            density="comfortable"
-                            readonly
-                            bg-color="grey-lighten-3"
-                            hide-details="auto"
-                        ></v-text-field>
-                    </v-col>
-
-                    <!-- Tindakan Tambahan -->
-                    <v-col cols="12">
-                        <v-label class="mb-2 font-weight-medium">Tindakan Tambahan</v-label>
-                        <v-text-field
-                            v-model="tindakanForm.tindakanTambahan"
-                            placeholder="Prosedur Tindakan Tambahan"
-                            variant="outlined"
-                            density="comfortable"
-                            hide-details="auto"
-                        ></v-text-field>
-                    </v-col>
-                </v-row>
-            </v-card-text>
-            
-            <v-divider></v-divider>
-            
-            <v-card-actions class="pa-4 justify-end">
-                <v-btn
-                    color="primary"
-                    variant="flat"
-                    @click="saveTindakan"
-                    :disabled="!tindakanForm.kodeTindakan.trim() || !tindakanForm.tindakan.trim()"
-                >
-                    <v-icon start>mdi-check</v-icon>
-                    Simpan
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
 </template>
diff --git a/components/pendaftaran/ModalDetailPendaftaran.vue b/components/pendaftaran/ModalDetailPendaftaran.vue
new file mode 100644
index 0000000..8789cbb
--- /dev/null
+++ b/components/pendaftaran/ModalDetailPendaftaran.vue
@@ -0,0 +1,676 @@
+<script setup lang="ts">
+import LoadingState from '@/components/shared/LoadingState.vue';
+import { getAntrianOperasiById } from '@/services/antrean';
+import { Icon } from '@iconify/vue';
+import { STATUS } from '~/types/antrean';
+
+interface Props {
+    modelValue: boolean;
+    id: string | number;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+}>();
+
+const loading = ref(false);
+const error = ref(false);
+
+// Form data
+const formData = ref({
+    noRekamMedis: '',
+    noKtp: '',
+    namaPasien: '',
+    jenisKelamin: '',
+    tanggalLahir: '',
+    umur: '',
+    alamat: '',
+    nomorTelepon: [] as string[]
+});
+
+const diagnosisItems = ref<any[]>([]);
+const tindakanItems = ref<any[]>([]);
+
+const rencanaOperasiData = ref({
+    spesialis: null as number | null,
+    SpesialisName: '',
+    subSpesialis: null as number | null,
+    SubSpesialisName: '',
+    tanggalDaftar: '',
+    kategoriOperasi: null as number | null,
+    kategoriName: '',
+    rencanaOperasi: null,
+    keterangan: null
+});
+
+const dokterPelaksanaItems = ref<any[]>([]);
+
+const statusPasienData = ref({
+    tanggalSelesai: null,
+    statusOperasi: '',
+    keteranganStatus: null
+});
+
+const showModal = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+// Helper functions
+const formatDate = (dateString: string) => {
+    if (!dateString) return '-';
+    return new Date(dateString).toLocaleDateString('id-ID', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+};
+
+const formatDateTime = (dateString: string) => {
+    if (!dateString) return '-';
+    return new Date(dateString).toLocaleDateString('id-ID', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+const getGenderIcon = (gender: string) => {
+    return gender === 'L' ? 'mdi-gender-male' : 'mdi-gender-female';
+};
+
+const getGenderColor = (gender: string) => {
+    return gender === 'L' ? 'info' : 'error';
+};
+
+const getGenderText = (gender: string) => {
+    return gender === 'L' ? 'Laki-laki' : 'Perempuan';
+};
+
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case STATUS.BELUM: return 'warning';
+        case STATUS.SELESAI: return 'success';
+        case STATUS.TUNDA: return 'info';
+        case STATUS.BATAL: return 'error';
+        default: return 'grey';
+    }
+};
+
+const getStatusText = (status: string) => {
+    switch (status) {
+        case STATUS.BELUM: return 'Belum';
+        case STATUS.SELESAI: return 'Selesai';
+        case STATUS.TUNDA: return 'Tunda';
+        case STATUS.BATAL: return 'Batal';
+        default: return 'Unknown';
+    }
+};
+
+const getStatusIcon = (status: string) => {
+    switch (status) {
+        case STATUS.BELUM: return 'mdi-clock-outline';
+        case STATUS.SELESAI: return 'mdi-check-circle';
+        case STATUS.TUNDA: return 'mdi-pause-circle';
+        case STATUS.BATAL: return 'mdi-close-circle';
+        default: return 'mdi-help-circle';
+    }
+};
+
+const initializeForm = () => {
+    // Reset all data
+    formData.value = {
+        noRekamMedis: '',
+        noKtp: '',
+        namaPasien: '',
+        jenisKelamin: '',
+        tanggalLahir: '',
+        umur: '',
+        alamat: '',
+        nomorTelepon: []
+    };
+    
+    diagnosisItems.value = [];
+    tindakanItems.value = [];
+    
+    rencanaOperasiData.value = {
+        spesialis: null,
+        SpesialisName: '',
+        subSpesialis: null,
+        SubSpesialisName: '',
+        tanggalDaftar: '',
+        kategoriOperasi: null,
+        kategoriName: '',
+        rencanaOperasi: null,
+        keterangan: null
+    };
+    
+    dokterPelaksanaItems.value = [];
+    
+    statusPasienData.value = {
+        tanggalSelesai: null,
+        statusOperasi: '',
+        keteranganStatus: null
+    };
+};
+
+// Fetch detail data
+const fetchDetailData = async () => {
+    if (!props.id) return;
+    
+    loading.value = true;
+    error.value = false;
+    
+    try {
+        const response = await getAntrianOperasiById(props.id);
+        
+        if (response.success && response.data) {
+            const data = response.data;
+            
+            // Set form data
+            if (data.formData) {
+                formData.value = { ...data.formData };
+            }
+            
+            // Set diagnosis items
+            if (data.diagnosisItems) {
+                diagnosisItems.value = data.diagnosisItems;
+            }
+            
+            // Set tindakan items
+            if (data.tindakanItems) {
+                tindakanItems.value = data.tindakanItems;
+            }
+            
+            // Set rencana operasi data
+            if (data.rencanaOperasiData) {
+                rencanaOperasiData.value = { ...data.rencanaOperasiData };
+            }
+            
+            // Set dokter pelaksana items
+            if (data.dokterPelaksanaItems) {
+                dokterPelaksanaItems.value = data.dokterPelaksanaItems;
+            }
+            
+            // Set status pasien data
+            if (data.statusPasienData) {
+                statusPasienData.value = { ...data.statusPasienData };
+            }
+        }
+    } catch (err) {
+        console.error('Error fetching detail data:', err);
+        error.value = true;
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Initialize when modal opens
+watch(() => props.modelValue, (isOpen) => {
+    if (isOpen && props.id) {
+        //reset form dulu diawal
+        initializeForm();
+        fetchDetailData();
+    }
+}, { immediate: true });
+
+const closeModal = () => {
+    showModal.value = false;
+};
+</script>
+
+<template>
+    <v-dialog v-model="showModal" max-width="900px" persistent scrollable>
+        <v-card>
+            <v-card-title class="d-flex align-center justify-space-between pa-4 bg-primary text-white">
+                <div class="d-flex align-center">
+                    <Icon icon="solar:clipboard-text-bold-duotone" height="28" class="mr-3" />
+                    <span class="text-h6">Detail Pendaftaran Antrean Operasi</span>
+                </div>
+                <v-btn
+                    icon
+                    variant="text"
+                    color="white"
+                    @click="closeModal"
+                >
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+            </v-card-title>
+            
+            <v-card-text class="pa-4" style="max-height: 75vh; overflow-y: auto;">
+                <LoadingState 
+                    :loading="loading" 
+                    :error="error"
+                    loading-text="Memuat detail pendaftaran..."
+                    error-text="Gagal memuat data detail"
+                    @retry="fetchDetailData"
+                >
+                    <!-- Status Badge -->
+                    <v-row class="mb-2">
+                        <v-col cols="12">
+                            <v-chip
+                                :color="getStatusColor(statusPasienData.statusOperasi)"
+                                variant="flat"
+                                size="large"
+                                class="px-6"
+                            >
+                                <Icon :icon="getStatusIcon(statusPasienData.statusOperasi)" height="20" class="mr-2" />
+                                Status: {{ getStatusText(statusPasienData.statusOperasi) }}
+                            </v-chip>
+                        </v-col>
+                    </v-row>
+
+                    <!-- Informasi Pasien -->
+                    <v-card elevation="2" class="mb-4">
+                        <v-card-title class="bg-blue-lighten-5 pa-3">
+                            <div class="d-flex align-center">
+                                <Icon icon="solar:user-bold-duotone" height="24" class="mr-2 text-primary" />
+                                <span class="text-h6">Informasi Pasien</span>
+                            </div>
+                        </v-card-title>
+                        <v-card-text class="pa-4">
+                            <v-row>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="mdi-card-account-details" height="20" class="mr-2" />
+                                            No Rekam Medis
+                                        </div>
+                                        <div class="info-value font-weight-bold text-primary">
+                                            {{ formData.noRekamMedis || '-' }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="mdi-credit-card" height="20" class="mr-2" />
+                                            No KTP
+                                        </div>
+                                        <div class="info-value">
+                                            {{ formData.noKtp || '-' }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:user-heart-bold" height="20" class="mr-2" />
+                                            Nama Pasien
+                                        </div>
+                                        <div class="info-value font-weight-bold">
+                                            {{ formData.namaPasien || '-' }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon :icon="getGenderIcon(formData.jenisKelamin)" height="20" class="mr-2" />
+                                            Jenis Kelamin
+                                        </div>
+                                        <div class="info-value">
+                                            <v-chip 
+                                                :color="getGenderColor(formData.jenisKelamin)" 
+                                                size="small"
+                                                variant="flat"
+                                            >
+                                                <Icon :icon="getGenderIcon(formData.jenisKelamin)" height="16" class="mr-1" />
+                                                {{ getGenderText(formData.jenisKelamin) }}
+                                            </v-chip>
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:calendar-bold" height="20" class="mr-2" />
+                                            Tanggal Lahir
+                                        </div>
+                                        <div class="info-value">
+                                            {{ formatDate(formData.tanggalLahir) }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="mdi-cake-variant" height="20" class="mr-2" />
+                                            Umur
+                                        </div>
+                                        <div class="info-value">
+                                            {{ formData.umur || '-' }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:map-point-bold" height="20" class="mr-2" />
+                                            Alamat
+                                        </div>
+                                        <div class="info-value">
+                                            {{ formData.alamat || '-' }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:phone-bold" height="20" class="mr-2" />
+                                            Nomor Telepon
+                                        </div>
+                                        <div class="info-value">
+                                            <v-chip
+                                                v-for="(phone, index) in formData.nomorTelepon"
+                                                :key="index"
+                                                color="success"
+                                                variant="tonal"
+                                                size="small"
+                                                class="mr-2 mb-2"
+                                            >
+                                                <Icon icon="mdi-phone" height="16" class="mr-1" />
+                                                {{ phone }}
+                                            </v-chip>
+                                            <span v-if="!formData.nomorTelepon || formData.nomorTelepon.length === 0">-</span>
+                                        </div>
+                                    </div>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+
+                    <!-- Diagnosis -->
+                    <v-card elevation="2" class="mb-4">
+                        <v-card-title class="bg-green-lighten-5 pa-3">
+                            <div class="d-flex align-center">
+                                <Icon icon="solar:health-bold-duotone" height="24" class="mr-2 text-success" />
+                                <span class="text-h6">Diagnosis</span>
+                            </div>
+                        </v-card-title>
+                        <v-card-text class="pa-4">
+                            <v-list v-if="diagnosisItems.length > 0" class="pa-0">
+                                <v-list-item
+                                    v-for="(item, index) in diagnosisItems"
+                                    :key="index"
+                                    class="px-0 mb-3"
+                                >
+                                    <v-card variant="tonal" color="success">
+                                        <v-card-text class="pa-3">
+                                            <div class="d-flex align-start">
+                                                <v-avatar color="success" size="32" class="mr-3">
+                                                    {{ index + 1 }}
+                                                </v-avatar>
+                                                <div class="flex-1-1">
+                                                    <div class="text-caption text-medium-emphasis mb-1">
+                                                        {{ item.jenisDiagnosa }}
+                                                    </div>
+                                                    <div class="font-weight-medium mb-1">
+                                                        {{ item.diagnosa }}
+                                                    </div>
+                                                    <v-chip size="x-small" color="success" variant="outlined">
+                                                        {{ item.kodeDiagnosa }}
+                                                    </v-chip>
+                                                </div>
+                                            </div>
+                                        </v-card-text>
+                                    </v-card>
+                                </v-list-item>
+                            </v-list>
+                            <v-alert v-else type="info" variant="tonal" density="compact">
+                                Tidak ada data diagnosis
+                            </v-alert>
+                        </v-card-text>
+                    </v-card>
+
+                    <!-- Tindakan -->
+                    <v-card elevation="2" class="mb-4">
+                        <v-card-title class="bg-purple-lighten-5 pa-3">
+                            <div class="d-flex align-center">
+                                <Icon icon="solar:medical-kit-bold-duotone" height="24" class="mr-2 text-purple" />
+                                <span class="text-h6">Tindakan Operasi</span>
+                            </div>
+                        </v-card-title>
+                        <v-card-text class="pa-4">
+                            <v-list v-if="tindakanItems.length > 0" class="pa-0">
+                                <v-list-item
+                                    v-for="(item, index) in tindakanItems"
+                                    :key="index"
+                                    class="px-0 mb-3"
+                                >
+                                    <v-card variant="tonal" color="purple">
+                                        <v-card-text class="pa-3">
+                                            <div class="d-flex align-start">
+                                                <v-avatar color="purple" size="32" class="mr-3">
+                                                    {{ index + 1 }}
+                                                </v-avatar>
+                                                <div class="flex-1-1">
+                                                    <div class="font-weight-medium mb-1">
+                                                        {{ item.tindakan }}
+                                                    </div>
+                                                    <div class="text-body-2 text-medium-emphasis mb-2">
+                                                        {{ item.tindakanTambahan || '-' }}
+                                                    </div>
+                                                    <v-chip size="x-small" color="purple" variant="outlined">
+                                                        {{ item.kodeTindakan || '-' }}
+                                                    </v-chip>
+                                                </div>
+                                            </div>
+                                        </v-card-text>
+                                    </v-card>
+                                </v-list-item>
+                            </v-list>
+                            <v-alert v-else type="info" variant="tonal" density="compact">
+                                Tidak ada data tindakan
+                            </v-alert>
+                        </v-card-text>
+                    </v-card>
+
+                    <!-- Rencana Operasi -->
+                    <v-card elevation="2" class="mb-4">
+                        <v-card-title class="bg-orange-lighten-5 pa-3">
+                            <div class="d-flex align-center">
+                                <Icon icon="solar:calendar-mark-bold-duotone" height="24" class="mr-2 text-orange" />
+                                <span class="text-h6">Rencana Operasi</span>
+                            </div>
+                        </v-card-title>
+                        <v-card-text class="pa-4">
+                            <v-row>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:stethoscope-bold" height="20" class="mr-2" />
+                                            Spesialis
+                                        </div>
+                                        <div class="info-value font-weight-bold">
+                                            {{ rencanaOperasiData.SpesialisName || '-' }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:health-bold" height="20" class="mr-2" />
+                                            Sub Spesialis
+                                        </div>
+                                        <div class="info-value font-weight-bold">
+                                            {{ rencanaOperasiData.SubSpesialisName || '-' }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:calendar-date-bold" height="20" class="mr-2" />
+                                            Tanggal Daftar
+                                        </div>
+                                        <div class="info-value">
+                                            {{ formatDateTime(rencanaOperasiData.tanggalDaftar) }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:clipboard-list-bold" height="20" class="mr-2" />
+                                            Kategori Operasi
+                                        </div>
+                                        <div class="info-value">
+                                            <v-chip color="orange" size="small" variant="flat">
+                                                {{ rencanaOperasiData.kategoriName || '-' }}
+                                            </v-chip>
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col v-if="rencanaOperasiData.keterangan" cols="12">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:notes-bold" height="20" class="mr-2" />
+                                            Keterangan
+                                        </div>
+                                        <div class="info-value">
+                                            {{ rencanaOperasiData.keterangan }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+
+                    <!-- Dokter Pelaksana -->
+                    <v-card elevation="2" class="mb-4">
+                        <v-card-title class="bg-indigo-lighten-5 pa-3">
+                            <div class="d-flex align-center">
+                                <Icon icon="solar:user-id-bold-duotone" height="24" class="mr-2 text-indigo" />
+                                <span class="text-h6">Tim Dokter Pelaksana</span>
+                            </div>
+                        </v-card-title>
+                        <v-card-text class="pa-2">
+                            <v-list v-if="dokterPelaksanaItems.length > 0" class="pa-0">
+                                <v-list-item
+                                    v-for="(dokter, index) in dokterPelaksanaItems"
+                                    :key="index"
+                                    class="pa-2 mb-2 rounded-lg border"
+                                >
+                                    <template #prepend>
+                                        <v-avatar color="indigo" size="48" >
+                                            <Icon icon="solar:user-bold" height="24" />
+                                        </v-avatar>
+                                    </template>
+                                    <v-list-item-title class="font-weight-bold">
+                                        {{ dokter.nama }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle>
+                                        <div class="mt-1">
+                                            <v-chip size="x-small" color="indigo" variant="outlined" class="mr-2">
+                                                NIP: {{ dokter.nip }}
+                                            </v-chip>
+                                            <v-chip size="x-small" color="indigo" variant="tonal">
+                                                {{ dokter.satuan_kerja }}
+                                            </v-chip>
+                                        </div>
+                                    </v-list-item-subtitle>
+                                </v-list-item>
+                            </v-list>
+                            <v-alert v-else type="info" variant="tonal" density="compact">
+                                Tidak ada data dokter pelaksana
+                            </v-alert>
+                        </v-card-text>
+                    </v-card>
+
+                    <!-- Status Operasi -->
+                    <v-card elevation="2" class="mb-2">
+                        <v-card-title class="bg-grey-lighten-3 pa-3">
+                            <div class="d-flex align-center">
+                                <Icon icon="solar:clipboard-check-bold-duotone" height="24" class="mr-2 text-grey-darken-2" />
+                                <span class="text-h6">Status Operasi</span>
+                            </div>
+                        </v-card-title>
+                        <v-card-text class="pa-4">
+                            <v-row>
+                                <v-col cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="mdi-information" height="20" class="mr-2" />
+                                            Status
+                                        </div>
+                                        <div class="info-value">
+                                            <v-chip 
+                                                :color="getStatusColor(statusPasienData.statusOperasi)" 
+                                                variant="flat"
+                                                size="small"
+                                            >
+                                                <Icon :icon="getStatusIcon(statusPasienData.statusOperasi)" height="16" class="mr-1" />
+                                                {{ getStatusText(statusPasienData.statusOperasi) }}
+                                            </v-chip>
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col v-if="statusPasienData.tanggalSelesai" cols="12" md="6">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:calendar-check-bold" height="20" class="mr-2" />
+                                            Tanggal Selesai
+                                        </div>
+                                        <div class="info-value">
+                                            {{ formatDateTime(statusPasienData.tanggalSelesai) }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                                <v-col v-if="statusPasienData.keteranganStatus" cols="12">
+                                    <div class="info-item">
+                                        <div class="info-label">
+                                            <Icon icon="solar:notes-bold" height="20" class="mr-2" />
+                                            Keterangan Status
+                                        </div>
+                                        <div class="info-value">
+                                            {{ statusPasienData.keteranganStatus }}
+                                        </div>
+                                    </div>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </LoadingState>
+            </v-card-text>
+            
+            <v-card-actions class="pa-4 justify-end bg-grey-lighten-4">
+                <v-btn 
+                    color="primary" 
+                    size="large" 
+                    variant="flat"
+                    prepend-icon="mdi-close"
+                    @click="closeModal"
+                >
+                    Tutup
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<style scoped>
+.info-item {
+    margin-bottom: 1rem;
+}
+
+.info-label {
+    display: flex;
+    align-items: center;
+    font-size: 0.875rem;
+    color: rgb(var(--v-theme-on-surface));
+    opacity: 0.7;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.info-value {
+    font-size: 1rem;
+    color: rgb(var(--v-theme-on-surface));
+    padding-left: 28px;
+}
+</style>
diff --git a/components/pendaftaran/ModalPendaftaran.vue b/components/pendaftaran/ModalPendaftaran.vue
index 78d4fbd..926f32a 100644
--- a/components/pendaftaran/ModalPendaftaran.vue
+++ b/components/pendaftaran/ModalPendaftaran.vue
@@ -3,7 +3,9 @@ import BiodataPasien from '@/components/pendaftaran/BiodataPasien.vue';
 import MedisPasien from '@/components/pendaftaran/MedisPasien.vue';
 import RencanaOperasi from '@/components/pendaftaran/RencanaOperasi.vue';
 import StatusPasienOperasi from '@/components/pendaftaran/StatusPasienOperasi.vue';
+import LoadingState from '@/components/shared/LoadingState.vue';
 import { usePendaftaranStore } from '@/store/pendaftaran';
+import { getAntrianOperasiById } from '@/services/antrean';
 import { storeToRefs } from 'pinia';
 import type { PageMode } from '~/types/common';
 
@@ -11,11 +13,17 @@ interface Props {
     modelValue: boolean;
     mode?: PageMode;
     id?: string | number;
+    initialKategori?: number;
+    initialSpesialis?: number;
+    initialSubSpesialis?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     mode: 'create',
-    id: undefined
+    id: undefined,
+    initialKategori: undefined,
+    initialSpesialis: undefined,
+    initialSubSpesialis: undefined
 });
 
 const emit = defineEmits<{
@@ -38,6 +46,8 @@ const {
 
 const form = ref();
 const valid = ref(true);
+const loadingDetail = ref(false);
+const errorDetail = ref(false);
 
 // Computed properties
 const isReadonly = computed(() => props.mode === 'view');
@@ -59,13 +69,93 @@ const showModal = computed({
 });
 
 // Initialize form when modal opens
-watch(() => props.modelValue, (isOpen) => {
+watch(() => props.modelValue, async (isOpen) => {
     if (isOpen) {
-        initializeForm();
+        await initializeForm();
     }
-});
+}, { immediate: true }); // Add immediate to handle initial render
 
-const initializeForm = () => {
+// Fetch detail data for edit mode
+const fetchDetailData = async () => {
+    if (!props.id) return;
+    
+    loadingDetail.value = true;
+    errorDetail.value = false;
+    
+    try {
+        const response = await getAntrianOperasiById(props.id);
+        
+        if (response.success && response.data) {
+            const data = response.data;
+            
+            // Set form data to store
+            if (data.formData) {
+                pendaftaranStore.formData = { ...data.formData };
+            }
+            
+            // Set diagnosis items to store
+            if (data.diagnosisItems) {
+                pendaftaranStore.diagnosisItems = [...data.diagnosisItems];
+            }
+            
+            // Set tindakan items to store
+            if (data.tindakanItems) {
+                pendaftaranStore.tindakanItems = [...data.tindakanItems];
+            }
+            
+            // Set rencana operasi data to store
+            if (data.rencanaOperasiData) {
+                const rencanaData = { ...data.rencanaOperasiData };
+                
+                // Convert tanggalDaftar from ISO format to datetime-local format
+                if (rencanaData.tanggalDaftar) {
+                    // Remove 'Z' and convert to local datetime format
+                    const date = new Date(rencanaData.tanggalDaftar);
+                    const year = date.getFullYear();
+                    const month = String(date.getMonth() + 1).padStart(2, '0');
+                    const day = String(date.getDate()).padStart(2, '0');
+                    const hours = String(date.getHours()).padStart(2, '0');
+                    const minutes = String(date.getMinutes()).padStart(2, '0');
+                    rencanaData.tanggalDaftar = `${year}-${month}-${day}T${hours}:${minutes}`;
+                }
+                
+                pendaftaranStore.rencanaOperasiData = rencanaData;
+            }
+            
+            // Set dokter pelaksana items to store with proper mapping
+            if (data.dokterPelaksanaItems && Array.isArray(data.dokterPelaksanaItems)) {
+                // Map the API response to match Dokter interface
+                pendaftaranStore.dokterPelaksanaItems = data.dokterPelaksanaItems.map((dokter: any) => ({
+                    id: dokter.id,
+                    nip: dokter.nip,
+                    nama_lengkap: dokter.nama || dokter.nama_lengkap,
+                    hfis_code: dokter.hfis_code || null,
+                    nama_ksm: dokter.satuan_kerja || dokter.nama_ksm || ''
+                }));
+            }
+            
+            // Set status pasien data to store
+            if (data.statusPasienData) {
+                pendaftaranStore.statusPasienData = { ...data.statusPasienData };
+            }
+        }
+    } catch (err) {
+        console.error('Error fetching detail data:', err);
+        errorDetail.value = true;
+        pendaftaranStore.showSnackbar('Gagal mengambil data detail', 'error');
+    } finally {
+        loadingDetail.value = false;
+    }
+};
+
+const initializeForm = async () => {
+    // If edit or view mode, load data by id first
+    if ((props.mode === 'edit' || props.mode === 'view') && props.id) {
+        await fetchDetailData();
+        return; // Don't reset form for edit/view mode
+    }
+    
+    // For create mode, reset form and set defaults
     pendaftaranStore.resetForm();
     
     // Set default tanggal daftar ke now
@@ -77,10 +167,15 @@ const initializeForm = () => {
     const minutes = String(now.getMinutes()).padStart(2, '0');
     pendaftaranStore.rencanaOperasiData.tanggalDaftar = `${year}-${month}-${day}T${hours}:${minutes}`;
     
-    // If edit or view mode, load data by id
-    if ((props.mode === 'edit' || props.mode === 'view') && props.id) {
-        // TODO: Load data from API by id
-        // await pendaftaranStore.loadData(props.id);
+    // Set initial values from parent context
+    if (props.initialKategori !== undefined) {
+        pendaftaranStore.rencanaOperasiData.kategoriOperasi = props.initialKategori;
+    }
+    if (props.initialSpesialis !== undefined) {
+        pendaftaranStore.rencanaOperasiData.spesialis = props.initialSpesialis;
+    }
+    if (props.initialSubSpesialis !== undefined) {
+        pendaftaranStore.rencanaOperasiData.subSpesialis = props.initialSubSpesialis;
     }
 };
 
@@ -101,8 +196,10 @@ const handleSimpan = async () => {
             return;
         }
         
-        // Submit form using store action
-        const result = await pendaftaranStore.submitForm();
+        // Submit form using store action - pass id if edit mode
+        const result = props.mode === 'edit' && props.id
+            ? await pendaftaranStore.submitForm(props.id)
+            : await pendaftaranStore.submitForm();
         
         if (result.success) {
             emit('success');
@@ -133,7 +230,7 @@ const handleReset = () => {
 </script>
 
 <template>
-    <v-dialog v-model="showModal" max-width="1300px" persistent scrollable>
+    <v-dialog v-model="showModal" max-width="1100px" persistent scrollable>
         <v-card>
             <v-card-title class="d-flex align-center justify-space-between pa-3 bg-primary text-white">
                 <div class="d-flex align-center">
@@ -150,32 +247,40 @@ const handleReset = () => {
             </v-card-title>
             
             <v-card-text class="pa-4" style="max-height: 70vh; overflow-y: auto; overflow-x: hidden;">
-                <v-form ref="form" v-model="valid" lazy-validation>
-                    <v-row no-gutters>
-                        <!-- Data Biodata Pasien -->
-                        <v-col cols="12">
-                            <BiodataPasien v-model="formData" :readonly="isReadonly" />
-                        </v-col>
+                <LoadingState 
+                    :loading="loadingDetail" 
+                    :error="errorDetail"
+                    loading-text="Memuat data pendaftaran..."
+                    error-text="Gagal memuat data pendaftaran"
+                    @retry="fetchDetailData"
+                >
+                    <v-form ref="form" v-model="valid" lazy-validation>
+                        <v-row no-gutters>
+                            <!-- Data Biodata Pasien -->
+                            <v-col cols="12">
+                                <BiodataPasien v-model="formData" :readonly="isReadonly" />
+                            </v-col>
 
-                        <!-- Data Medis Pasien -->
-                        <v-col cols="12">
-                            <MedisPasien 
-                                v-model:diagnosis-items="diagnosisItems"
-                                v-model:tindakan-items="tindakanItems"
-                                :readonly="isReadonly"
-                            />
-                        </v-col>
+                            <!-- Data Medis Pasien -->
+                            <v-col cols="12">
+                                <MedisPasien 
+                                    v-model:diagnosis-items="diagnosisItems"
+                                    v-model:tindakan-items="tindakanItems"
+                                    :readonly="isReadonly"
+                                />
+                            </v-col>
 
-                        <!-- Data Rencana Operasi -->
-                        <v-col cols="12">
-                            <RencanaOperasi 
-                                v-model:rencana-operasi-data="rencanaOperasiData"
-                                v-model:dokter-pelaksana-items="dokterPelaksanaItems"
-                                :readonly="isReadonly"
-                            />
-                        </v-col>
-                    </v-row>
-                </v-form>
+                            <!-- Data Rencana Operasi -->
+                            <v-col cols="12">
+                                <RencanaOperasi 
+                                    v-model:rencana-operasi-data="rencanaOperasiData"
+                                    v-model:dokter-pelaksana-items="dokterPelaksanaItems"
+                                    :readonly="isReadonly"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-form>
+                </LoadingState>
             </v-card-text>
             
             <v-card-actions class="pa-4 justify-end">
diff --git a/components/pendaftaran/ModalUpdateStatus.vue b/components/pendaftaran/ModalUpdateStatus.vue
new file mode 100644
index 0000000..4aded1b
--- /dev/null
+++ b/components/pendaftaran/ModalUpdateStatus.vue
@@ -0,0 +1,416 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import type { AntreanOperasi } from '~/types/antrean';
+import { STATUS } from '~/types/antrean';
+import { getAntrianOperasiById, updateStatusAntrianOperasi } from '@/services/antrean';
+
+interface Props {
+    modelValue: boolean;
+    id: string | number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'success'): void;
+}>();
+
+const dialog = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+const loading = ref(false);
+const loadingSubmit = ref(false);
+const error = ref(false);
+
+// Data pasien - struktur lengkap dari API
+const pasienData = ref<any>(null);
+
+// Form data
+const formData = ref<{
+    statusOperasi: string;
+    tanggalSelesai: string;
+    keteranganStatus: string;
+}>({
+    statusOperasi: STATUS.BELUM,
+    tanggalSelesai: '',
+    keteranganStatus: ''
+});
+
+// Snackbar
+const snackbar = ref(false);
+const snackbarMessage = ref('');
+const snackbarColor = ref('success');
+
+const showSnackbar = (message: string, color: string = 'success') => {
+    snackbarMessage.value = message;
+    snackbarColor.value = color;
+    snackbar.value = true;
+};
+
+// Fetch data pasien
+const fetchData = async () => {
+    if (!props.id) return;
+    
+    loading.value = true;
+    error.value = false;
+    
+    try {
+        const response = await getAntrianOperasiById(props.id);
+        
+        if (response.success && response.data) {
+            pasienData.value = response.data;
+            
+            // Set initial form data dari status yang ada
+            if (pasienData.value.statusPasienData) {
+                formData.value.statusOperasi = pasienData.value.statusPasienData.statusOperasi || STATUS.BELUM;
+                formData.value.tanggalSelesai = pasienData.value.statusPasienData.tanggalSelesai || '';
+                formData.value.keteranganStatus = pasienData.value.statusPasienData.keteranganStatus || '';
+            } else {
+                formData.value.statusOperasi = STATUS.BELUM;
+                formData.value.tanggalSelesai = '';
+                formData.value.keteranganStatus = '';
+            }
+        }
+    } catch (err) {
+        console.error('Error fetching data:', err);
+        error.value = true;
+        showSnackbar('Gagal mengambil data pasien', 'error');
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Validation
+const isFormValid = computed(() => {
+    if (formData.value.statusOperasi === STATUS.SELESAI && !formData.value.tanggalSelesai) {
+        return false;
+    }
+    if ((formData.value.statusOperasi === STATUS.TUNDA || formData.value.statusOperasi === STATUS.BATAL) 
+        && !formData.value.keteranganStatus.trim()) {
+        return false;
+    }
+    return true;
+});
+
+// Submit handler
+const handleSubmit = async () => {
+    if (!isFormValid.value) {
+        showSnackbar('Mohon lengkapi data yang diperlukan', 'error');
+        return;
+    }
+    
+    loadingSubmit.value = true;
+    try {
+        const response = await updateStatusAntrianOperasi(props.id, {
+            statusOperasi: formData.value.statusOperasi,
+            tanggalSelesai: formData.value.tanggalSelesai || null,
+            keteranganStatus: formData.value.keteranganStatus || null
+        });
+        
+        if (response.success) {
+            showSnackbar('Status antrian berhasil diupdate', 'success');
+            emit('success');
+            dialog.value = false;
+        } else {
+            showSnackbar(response.message || 'Gagal mengupdate status antrian', 'error');
+        }
+    } catch (error: any) {
+        console.error('Error updating status:', error);
+        showSnackbar(error.response?.data?.message || 'Gagal mengupdate status antrian', 'error');
+    } finally {
+        loadingSubmit.value = false;
+    }
+};
+
+// Format date
+const formatDate = (date: string) => {
+    if (!date) return '-';
+    return new Date(date).toLocaleDateString('id-ID', { 
+        year: 'numeric', 
+        month: 'short', 
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+// Helper functions
+const getGenderText = (gender: string) => {
+    return gender === 'L' ? 'Laki-laki' : 'Perempuan';
+};
+
+// Min date for tanggal selesai (same as tanggal daftar)
+const minTanggalSelesai = computed(() => {
+    if (!pasienData.value?.rencanaOperasiData?.tanggalDaftar) return '';
+    return new Date(pasienData.value.rencanaOperasiData.tanggalDaftar).toISOString().slice(0, 16);
+});
+
+// Initialize form
+const initializeForm = () => {
+    formData.value = {
+        statusOperasi: STATUS.BELUM,
+        tanggalSelesai: '',
+        keteranganStatus: ''
+    };
+};
+
+// Watch dialog - trigger saat modal dibuka
+watch(() => props.modelValue, (isOpen) => {
+    if (isOpen && props.id) {
+        initializeForm();
+        fetchData();
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <v-dialog v-model="dialog" max-width="800" persistent scrollable>
+        <v-card>
+            <v-card-title class="d-flex align-center justify-space-between bg-primary pa-4">
+                <div class="d-flex align-center">
+                    <Icon icon="solar:clipboard-check-bold" height="24" class="mr-2" />
+                    <span class="text-h5">Update Status Antrian Operasi</span>
+                </div>
+                <v-btn
+                    icon
+                    variant="text"
+                    size="small"
+                    @click="dialog = false"
+                    :disabled="loadingSubmit"
+                >
+                    <Icon icon="mdi-close" height="20" />
+                </v-btn>
+            </v-card-title>
+            <v-card-text class="pa-4" style="max-height: 600px;">
+                <!-- Loading State -->
+                <div v-if="loading" class="text-center py-8">
+                    <v-progress-circular
+                        indeterminate
+                        color="primary"
+                        size="50"
+                    ></v-progress-circular>
+                    <p class="mt-4 text-medium-emphasis">Memuat data...</p>
+                </div>
+
+                <!-- Error State -->
+                <div v-else-if="error" class="text-center py-8">
+                    <v-icon size="64" color="error" class="mb-4">mdi-alert-circle</v-icon>
+                    <p class="text-h6 mb-2">Gagal memuat data</p>
+                    <v-btn color="primary" @click="fetchData" variant="outlined">
+                        <Icon icon="mdi-refresh" height="20" class="mr-2" />
+                        Coba Lagi
+                    </v-btn>
+                </div>
+
+                <!-- Content -->
+                <div v-else-if="pasienData">
+                    <!-- Informasi Pasien -->
+                    <v-card variant="outlined" class="mb-6">
+                        <v-card-item>
+                            <h6 class="text-h6 font-weight-bold mb-4">
+                                <Icon icon="solar:user-bold" height="20" class="mr-2" />
+                                Informasi Pasien
+                            </h6>
+                        </v-card-item>
+                        <v-divider></v-divider>
+                        <v-card-text >
+                            <v-row>
+                                <v-col cols="12" sm="6">
+                                    <div class="mb-3">
+                                        <div class="text-caption text-medium-emphasis">No. Rekam Medis</div>
+                                        <div class="text-body-1 font-weight-medium">{{ pasienData.formData?.noRekamMedis || '-' }}</div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" sm="6">
+                                    <div class="mb-3">
+                                        <div class="text-caption text-medium-emphasis">Nama Pasien</div>
+                                        <div class="text-body-1 font-weight-medium">{{ pasienData.formData?.namaPasien || '-' }}</div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" sm="6">
+                                    <div class="mb-3">
+                                        <div class="text-caption text-medium-emphasis">Jenis Kelamin</div>
+                                        <div class="text-body-1">{{ getGenderText(pasienData.formData?.jenisKelamin) }}</div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" sm="6">
+                                    <div class="mb-3">
+                                        <div class="text-caption text-medium-emphasis">Tanggal Daftar</div>
+                                        <div class="text-body-1">{{ formatDate(pasienData.rencanaOperasiData?.tanggalDaftar) }}</div>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" sm="4">
+                                    <div class="mb-3">
+                                        <div class="text-caption text-medium-emphasis">Kategori</div>
+                                        <v-chip size="small" color="primary" variant="tonal">
+                                            {{ pasienData.rencanaOperasiData?.kategoriName || '-' }}
+                                        </v-chip>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" sm="4">
+                                    <div class="mb-3">
+                                        <div class="text-caption text-medium-emphasis">Spesialis</div>
+                                        <v-chip size="small" color="secondary" variant="tonal">
+                                            {{ pasienData.rencanaOperasiData?.SpesialisName || '-' }}
+                                        </v-chip>
+                                    </div>
+                                </v-col>
+                                <v-col cols="12" sm="4">
+                                    <div class="mb-3">
+                                        <div class="text-caption text-medium-emphasis">Sub Spesialis</div>
+                                        <v-chip size="small" color="info" variant="tonal">
+                                            {{ pasienData.rencanaOperasiData?.SubSpesialisName || '-' }}
+                                        </v-chip>
+                                    </div>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+
+                    <!-- Form Update Status -->
+                    <v-card variant="outlined">
+                        <v-card-item>
+                            <h6 class="text-h6 font-weight-bold mb-4">
+                                <Icon icon="solar:settings-bold" height="20" class="mr-2" />
+                                Update Status Operasi
+                            </h6>
+                        </v-card-item>
+                        <v-divider></v-divider>
+                        <v-card-text>
+                            <v-row>
+                                <!-- Status Operasi -->
+                                <v-col cols="12">
+                                    <v-label class="mb-2 font-weight-medium">
+                                        Status Operasi <span class="text-error">*</span>
+                                    </v-label>
+                                    <v-row class="mt-2">
+                                        <v-col cols="12" sm="12">   
+                                            <v-btn-group
+                                                v-model="formData.statusOperasi"
+                                                mandatory
+                                                class="w-100"
+                                            >
+                                            <v-btn
+                                                class="flex-grow-1"
+                                                size="large"
+                                                :variant="formData.statusOperasi === STATUS.BELUM ? 'flat' : 'outlined'"
+                                                :color="formData.statusOperasi === STATUS.BELUM ? 'primary' : 'default'"
+                                                @click="formData.statusOperasi = STATUS.BELUM"
+                                            >
+                                                Belum
+                                            </v-btn>
+                                             <v-btn
+                                                class="flex-grow-1"
+                                                size="large"
+                                                :variant="formData.statusOperasi === STATUS.SELESAI ? 'flat' : 'outlined'"
+                                                :color="formData.statusOperasi === STATUS.SELESAI ? 'success' : 'default'"
+                                                @click="formData.statusOperasi = STATUS.SELESAI"
+                                            >
+                                                Selesai
+                                            </v-btn>
+                                             <v-btn
+                                                class="flex-grow-1"
+                                                size="large"
+                                                :variant="formData.statusOperasi === STATUS.TUNDA ? 'flat' : 'outlined'"
+                                                :color="formData.statusOperasi === STATUS.TUNDA ? 'warning' : 'default'"
+                                                @click="formData.statusOperasi = STATUS.TUNDA"
+                                            >
+                                                Tunda
+                                            </v-btn>
+                                            <v-btn
+                                                class="flex-grow-1"
+                                                size="large"
+                                                :variant="formData.statusOperasi === STATUS.BATAL ? 'flat' : 'outlined'"
+                                                :color="formData.statusOperasi === STATUS.BATAL ? 'error' : 'default'"
+                                                @click="formData.statusOperasi = STATUS.BATAL"
+                                            >
+                                                Batal
+                                            </v-btn>
+                                            </v-btn-group>
+                                        </v-col>
+                                    </v-row>
+                                </v-col>
+
+                                <!-- Tanggal Selesai (shown only when status is Selesai) -->
+                                <v-col v-if="formData.statusOperasi === STATUS.SELESAI" cols="12">
+                                    <v-label class="mb-2 font-weight-medium">
+                                        Tanggal Selesai Operasi <span class="text-error">*</span>
+                                    </v-label>
+                                    <v-text-field
+                                        v-model="formData.tanggalSelesai"
+                                        type="datetime-local"
+                                        variant="outlined"
+                                        density="comfortable"
+                                        hide-details="auto"
+                                        :min="minTanggalSelesai"
+                                        :error-messages="!formData.tanggalSelesai ? ['Tanggal selesai wajib diisi'] : []"
+                                    ></v-text-field>
+                                </v-col>
+
+                                <!-- Keterangan (shown only when status is Tunda or Batal) -->
+                                <v-col v-if="formData.statusOperasi === STATUS.TUNDA || formData.statusOperasi === STATUS.BATAL" cols="12">
+                                    <v-label class="mb-2 font-weight-medium">
+                                        Keterangan <span class="text-error">*</span>
+                                    </v-label>
+                                    <v-textarea
+                                        v-model="formData.keteranganStatus"
+                                        variant="outlined"
+                                        rows="3"
+                                        hide-details="auto"
+                                        :placeholder="`Masukkan alasan ${formData.statusOperasi === STATUS.TUNDA ? 'penundaan' : 'pembatalan'} operasi`"
+                                        :error-messages="!formData.keteranganStatus.trim() ? ['Keterangan wajib diisi'] : []"
+                                    ></v-textarea>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </div>
+            </v-card-text>
+
+            <v-divider></v-divider>
+
+            <v-card-actions class="pa-4">
+                <v-spacer></v-spacer>
+                <v-btn
+                    variant="outlined"
+                    @click="dialog = false"
+                    :disabled="loadingSubmit"
+                    size="large"
+                >
+                    Batal
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    @click="handleSubmit"
+                    :loading="loadingSubmit"
+                    :disabled="loading || !isFormValid"
+                    variant="flat"
+                    size="large"
+                >
+                    <Icon icon="solar:check-circle-bold" height="20" class="mr-2" />
+                    Simpan
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+
+        <!-- Snackbar -->
+        <v-snackbar
+            v-model="snackbar"
+            :color="snackbarColor"
+            :timeout="3000"
+            location="top"
+        >
+            {{ snackbarMessage }}
+            <template #actions>
+                <v-btn
+                    variant="text"
+                    @click="snackbar = false"
+                >
+                    Close
+                </v-btn>
+            </template>
+        </v-snackbar>
+    </v-dialog>
+</template>
diff --git a/components/pendaftaran/RencanaOperasi.vue b/components/pendaftaran/RencanaOperasi.vue
index 8a86f4e..7ba83f5 100644
--- a/components/pendaftaran/RencanaOperasi.vue
+++ b/components/pendaftaran/RencanaOperasi.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import api from '~/services/api';
-import TableAntrian from './TableAntrian.vue';
 import type { Props } from '~/types/common';
 import type { Dokter } from '~/types/pendaftaran';
 import type { KategoriOperasi, Spesialis, SubSpesialis } from '~/types/antrean';
@@ -32,6 +31,7 @@ const kategoriOperasiList = ref<KategoriOperasi[]>([]);
 const isLoadingSpesialis = ref(false);
 const isLoadingSubSpesialis = ref(false);
 const isLoadingKategori = ref(false);
+const isInitializing = ref(false); // Flag to prevent resetting during initialization
 
 // Autocomplete options
 const spesialisOptions = computed(() => {
@@ -73,12 +73,20 @@ const fetchSubSpesialis = async (idSpesialis: number) => {
 };
 
 // Watch spesialis change to fetch sub-spesialis and reset sub-spesialis selection
-watch(() => rencanaOperasiData.value.spesialis, (newSpesialis) => {
-    rencanaOperasiData.value.subSpesialis = null;
-    subSpesialisList.value = [];
+watch(() => rencanaOperasiData.value.spesialis, (newSpesialis, oldSpesialis) => {
+    // Don't reset subSpesialis during initialization
+    if (isInitializing.value) {
+        return;
+    }
     
-    if (newSpesialis) {
-        fetchSubSpesialis(newSpesialis);
+    // Only reset if spesialis actually changed
+    if (newSpesialis !== oldSpesialis) {
+        rencanaOperasiData.value.subSpesialis = null;
+        subSpesialisList.value = [];
+        
+        if (newSpesialis) {
+            fetchSubSpesialis(newSpesialis);
+        }
     }
 });
 
@@ -117,39 +125,102 @@ const fetchKategoriOperasi = async () => {
 };
 
 // Load data on mount
-onMounted(() => {
-    fetchSpesialis();
-    fetchKategoriOperasi();
+onMounted(async () => {
+    isInitializing.value = true;
+    
+    await fetchSpesialis();
+    await fetchKategoriOperasi();
+    
+    // If both spesialis and subSpesialis are set, just fetch subSpesialis list
+    if (rencanaOperasiData.value.spesialis && rencanaOperasiData.value.subSpesialis) {
+        await fetchSubSpesialis(rencanaOperasiData.value.spesialis);
+    }
+    // If only subSpesialis is set, fetch the spesialis detail and load subSpesialis list
+    else if (rencanaOperasiData.value.subSpesialis) {
+        try {
+            const response = await api.get(`/reference/sub-spesialis/${rencanaOperasiData.value.subSpesialis}`);
+            
+            if (response.data.success && response.data.data) {
+                const subSpesialisDetail = response.data.data;
+                
+                // Set spesialis if found
+                if (subSpesialisDetail.id_spesialis) {
+                    rencanaOperasiData.value.spesialis = subSpesialisDetail.id_spesialis;
+                    
+                    // Fetch sub-spesialis list for the spesialis
+                    await fetchSubSpesialis(subSpesialisDetail.id_spesialis);
+                }
+            }
+        } catch (error) {
+            console.error('Error fetching sub-spesialis detail:', error);
+        }
+    }
+    // If only spesialis is set, fetch subSpesialis list
+    else if (rencanaOperasiData.value.spesialis) {
+        await fetchSubSpesialis(rencanaOperasiData.value.spesialis);
+    }
+    
+    isInitializing.value = false;
 });
 
-// Modal state for dokter
-const showDokterModal = ref(false);
+// Watch for late data loading (when data is loaded after component mount)
+watch(() => rencanaOperasiData.value.spesialis, async (newSpesialis) => {
+    // If we're not initializing and spesialis is set and we have no subSpesialis options yet
+    if (!isInitializing.value && newSpesialis && subSpesialisList.value.length === 0) {
+        await fetchSubSpesialis(newSpesialis);
+    }
+}, { immediate: false });
+
+// Watch for subSpesialis being set when spesialis list is empty (late data load scenario)
+watch(() => rencanaOperasiData.value.subSpesialis, async (newSubSpesialis) => {
+    // If subSpesialis is set but we don't have the spesialis yet
+    if (!isInitializing.value && newSubSpesialis && !rencanaOperasiData.value.spesialis) {
+        try {
+            const response = await api.get(`/reference/sub-spesialis/${newSubSpesialis}`);
+            
+            if (response.data.success && response.data.data) {
+                const subSpesialisDetail = response.data.data;
+                
+                if (subSpesialisDetail.id_spesialis) {
+                    isInitializing.value = true; // Prevent reset during this operation
+                    rencanaOperasiData.value.spesialis = subSpesialisDetail.id_spesialis;
+                    await fetchSubSpesialis(subSpesialisDetail.id_spesialis);
+                    isInitializing.value = false;
+                }
+            }
+        } catch (error) {
+            console.error('Error fetching sub-spesialis detail:', error);
+        }
+    }
+}, { immediate: false });
+
+// Autocomplete state for dokter
 const searchDokter = ref('');
-const selectedDokters = ref<string[]>([]);
 const dokterList = ref<Dokter[]>([]);
 const isLoadingDokter = ref(false);
-const dokterLimit = ref(10);
-const dokterOffset = ref(0);
-const dokterTotalCount = ref(0);
-const dokterCurrentPage = ref(1);
-const dokterItemsPerPage = ref(10);
+const dokterMenuOpen = ref(false);
 
-// Fetch dokter from API
-const fetchDokter = async () => {
+// Initialize dokterPelaksanaItems as array if not already
+if (!Array.isArray(dokterPelaksanaItems.value)) {
+    dokterPelaksanaItems.value = [];
+}
+
+// Fetch dokter from API for autocomplete
+const fetchDokter = async (search: string = '') => {
+    if (!dokterMenuOpen.value && !search) return; // Only fetch when menu is open or searching
+    
     try {
         isLoadingDokter.value = true;
-        const offset = (dokterCurrentPage.value - 1) * dokterItemsPerPage.value;
         const params = new URLSearchParams({
-            search: searchDokter.value,
-            limit: dokterItemsPerPage.value.toString(),
-            offset: offset.toString()
+            search: search,
+            limit: '50', // Load more items for better selection
+            offset: '0'
         });
         
         const response = await api.get(`/reference/dokter?${params}`);
         
         if (response.data.success && response.data.data) {
             dokterList.value = response.data.data;
-            dokterTotalCount.value = response.data.Paginate.Total;
         }
     } catch (error) {
         console.error('Error fetching dokter:', error);
@@ -161,97 +232,66 @@ const fetchDokter = async () => {
 
 // Watch search with debounce
 let dokterSearchTimeout: NodeJS.Timeout | null = null;
-watch(searchDokter, () => {
+watch(searchDokter, (newSearch) => {
     if (dokterSearchTimeout) {
         clearTimeout(dokterSearchTimeout);
     }
     dokterSearchTimeout = setTimeout(() => {
-        dokterCurrentPage.value = 1;
-        fetchDokter();
-    }, 500);
+        fetchDokter(newSearch);
+    }, 300);
 });
 
-// Watch for page changes
-watch(dokterCurrentPage, () => {
-    fetchDokter();
-});
-
-watch(dokterItemsPerPage, () => {
-    dokterCurrentPage.value = 1;
-    fetchDokter();
-});
-
-// Initialize dokterPelaksanaItems as array if not already
-if (!Array.isArray(dokterPelaksanaItems.value)) {
-    dokterPelaksanaItems.value = [];
-}
-
-const openDokterModal = () => {
-    // Pre-select already added doctors
-    selectedDokters.value = dokterPelaksanaItems.value.map(d => d.id);
-    searchDokter.value = '';
-    dokterCurrentPage.value = 1;
-    showDokterModal.value = true;
-    fetchDokter();
-};
-
-const saveDokterSelection = () => {
-    // Get selected doctor objects
-    const selected = dokterList.value.filter(d => selectedDokters.value.includes(d.id));
-    dokterPelaksanaItems.value = selected;
-    showDokterModal.value = false;
-};
-
-const deleteDokter = (index: number) => {
-    dokterPelaksanaItems.value.splice(index, 1);
-};
-
-// Toggle all selection
-const toggleAllDokters = () => {
-    if (selectedDokters.value.length === dokterList.value.length) {
-        selectedDokters.value = [];
-    } else {
-        selectedDokters.value = dokterList.value.map(d => d.id);
+// Load initial dokter list when dropdown opens
+watch(dokterMenuOpen, (isOpen) => {
+    if (isOpen && dokterList.value.length === 0) {
+        fetchDokter('');
     }
-};
-
-const isAllSelected = computed(() => {
-    return dokterList.value.length > 0 && 
-           selectedDokters.value.length === dokterList.value.length;
 });
 
-const toggleDokterSelection = (dokterId: string) => {
-    const index = selectedDokters.value.indexOf(dokterId);
-    if (index > -1) {
-        selectedDokters.value.splice(index, 1);
-    } else {
-        selectedDokters.value.push(dokterId);
+// Computed for autocomplete items (merge selected dokters dengan fetched list)
+const dokterOptions = computed(() => {
+    // Start with already selected doctors
+    const selectedDokters = dokterPelaksanaItems.value;
+    
+    // Merge with fetched list, avoid duplicates
+    const allDokters = [...selectedDokters];
+    dokterList.value.forEach(d => {
+        if (!allDokters.find(sd => sd.id === d.id)) {
+            allDokters.push(d);
+        }
+    });
+    
+    return allDokters.map(d => ({
+        title: d.nama_lengkap,
+        value: d.id,
+        subtitle: `${d.nip} - ${d.nama_ksm}`,
+        raw: d
+    }));
+});
+
+// Selected dokter IDs for v-autocomplete
+const selectedDokterIds = computed({
+    get: () => dokterPelaksanaItems.value.map(d => d.id),
+    set: (ids: string[]) => {
+        // Get all available doctors (from options)
+        const availableDokters = dokterOptions.value.map(opt => opt.raw);
+        
+        // Update dokterPelaksanaItems based on selected IDs
+        dokterPelaksanaItems.value = availableDokters.filter(d => ids.includes(d.id));
     }
-};
+});
 
-// Headers for dokter table
-const dokterHeaders = [
-    { title: 'Select', key: 'select', sortable: false, width: '80px' },
-    { title: 'NIP', key: 'nip', sortable: false },
-    { title: 'Nama Lengkap', key: 'nama_lengkap', sortable: false },
-    { title: 'KSM', key: 'nama_ksm', sortable: false }
-];
-
-const handleDokterPageUpdate = (page: unknown) => {
-    dokterCurrentPage.value = page as number;
-};
-
-const handleDokterItemsPerPageUpdate = (items: unknown) => {
-    dokterItemsPerPage.value = items as number;
+const removeDokter = (dokterId: string) => {
+    dokterPelaksanaItems.value = dokterPelaksanaItems.value.filter(d => d.id !== dokterId);
 };
 </script>
 
 <template>
     <v-card elevation="10">
+        <v-divider></v-divider>
         <v-card-item>
             <h5 class="text-h5 font-weight-bold">Data Rencana Operasi</h5>
         </v-card-item>
-        <v-divider></v-divider>
         <v-card-text>
             <v-row>
                 <!-- Spesialis -->
@@ -293,51 +333,131 @@ const handleDokterItemsPerPageUpdate = (items: unknown) => {
                 <!-- Dokter Pelaksana -->
                 <v-col cols="12">
                     <v-label class="mb-2 font-weight-medium">Dokter Pelaksana</v-label>
-                    <v-card variant="outlined" class="mb-3">
-                        <v-alert
-                            v-if="dokterPelaksanaItems.length === 0"
-                            type="info"
-                            variant="tonal"
-                            density="compact"
-                        >
-                            <div class="d-flex align-center">
-                                <span>No items</span>
-                            </div>
-                        </v-alert>
-                        <v-list v-else density="compact">
-                            <v-list-item
-                                v-for="(item, index) in dokterPelaksanaItems"
-                                :key="index"
-                                @click="!readonly && openDokterModal()"
-                                class="px-4 mb-2"
-                                :style="readonly ? 'cursor: default;' : 'cursor: pointer;'"
+                    <v-autocomplete
+                        v-model="selectedDokterIds"
+                        v-model:search="searchDokter"
+                        v-model:menu="dokterMenuOpen"
+                        :items="dokterOptions"
+                        item-title="title"
+                        item-value="value"
+                        :loading="isLoadingDokter"
+                        :readonly="readonly"
+                        :disabled="readonly"
+                        placeholder="Cari dan pilih dokter..."
+                        variant="outlined"
+                        density="comfortable"
+                        multiple
+                        chips
+                        closable-chips
+                        hide-details="auto"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                        no-data-text="Tidak ada data dokter"
+                    >
+                        <template #chip="{ props: chipProps, item }">
+                            <v-chip
+                                v-bind="chipProps"
+                                closable
+                                @click:close="removeDokter(item.value)"
+                                color="primary"
+                                variant="flat"
                             >
-                                <template #default>
-                                    <div class="d-flex align-center justify-space-between w-100">
-                                        <div>
-                                            <div class="font-weight-medium">{{ item.nama_lengkap }}</div>
-                                            <div class="text-caption text-medium-emphasis">
-                                                {{ item.nip }} - {{ item.nama_ksm }}
-                                            </div>
-                                        </div>
-                                        <v-btn
-                                            v-if="!readonly"
-                                            icon
-                                            size="small"
-                                            variant="text"
-                                            color="error"
-                                            @click="deleteDokter(index)"
-                                        >
-                                            <v-icon>mdi-delete</v-icon>
-                                        </v-btn>
-                                    </div>
+                                <span class="font-weight-medium">{{ item.title }}</span>
+                            </v-chip>
+                        </template>
+                        
+                        <template #item="{ props: itemProps, item }">
+                            <v-list-item
+                                v-bind="itemProps"
+                            >
+                                <template #prepend>
+                                    <v-icon 
+                                        :color="selectedDokterIds.includes(item.value) ? 'primary' : 'grey'"
+                                    >
+                                        {{ selectedDokterIds.includes(item.value) ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
+                                    </v-icon>
                                 </template>
                             </v-list-item>
-                        </v-list>
+                        </template>
+                        
+                        <template #prepend-item>
+                            <v-list-item>
+                                <v-list-item-title class="text-caption text-medium-emphasis">
+                                    <v-icon size="small" class="mr-2">mdi-information</v-icon>
+                                    Ketik untuk mencari dokter, pilih untuk menambahkan
+                                </v-list-item-title>
+                            </v-list-item>
+                            <v-divider></v-divider>
+                        </template>
+                    </v-autocomplete>
+                    
+                    <!-- Display selected doctors in a nice list -->
+                    <v-card v-if="dokterPelaksanaItems.length > 0 && !readonly" variant="outlined" class="mt-3">
+                        <v-card-text class="pa-3">
+                            <div class="text-caption text-medium-emphasis mb-2">
+                                <v-icon size="small" class="mr-1">mdi-account-multiple</v-icon>
+                                {{ dokterPelaksanaItems.length }} Dokter Terpilih
+                            </div>
+                            <v-list density="compact" class="pa-0">
+                                <v-list-item
+                                    v-for="(dokter, index) in dokterPelaksanaItems"
+                                    :key="dokter.id"
+                                    class="px-0"
+                                    :class="{ 'mb-2': index < dokterPelaksanaItems.length - 1 }"
+                                >
+                                    <template #prepend>
+                                        <v-avatar color="primary" size="32" class="mr-3">
+                                            <v-icon size="small">mdi-doctor</v-icon>
+                                        </v-avatar>
+                                    </template>
+                                    
+                                    <v-list-item-title class="font-weight-medium">
+                                        {{ dokter.nama_lengkap }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle class="text-caption">
+                                        {{ dokter.nip }} • {{ dokter.nama_ksm }}
+                                    </v-list-item-subtitle>
+                                    
+                                    <template #append>
+                                        <v-btn
+                                            icon
+                                            size="x-small"
+                                            variant="text"
+                                            color="error"
+                                            @click="removeDokter(dokter.id)"
+                                        >
+                                            <v-icon size="small">mdi-close-circle</v-icon>
+                                        </v-btn>
+                                    </template>
+                                </v-list-item>
+                            </v-list>
+                        </v-card-text>
+                    </v-card>
+                    
+                    <!-- Read-only display -->
+                    <v-card v-else-if="dokterPelaksanaItems.length > 0 && readonly" variant="outlined" class="mt-3">
+                        <v-card-text class="pa-3">
+                            <v-list density="compact" class="pa-0">
+                                <v-list-item
+                                    v-for="dokter in dokterPelaksanaItems"
+                                    :key="dokter.id"
+                                    class="px-0 mb-2"
+                                >
+                                    <template #prepend>
+                                        <v-avatar color="primary" size="32" class="mr-3">
+                                            <v-icon size="small">mdi-doctor</v-icon>
+                                        </v-avatar>
+                                    </template>
+                                    
+                                    <v-list-item-title class="font-weight-medium">
+                                        {{ dokter.nama_lengkap }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle class="text-caption">
+                                        {{ dokter.nip }} • {{ dokter.nama_ksm }}
+                                    </v-list-item-subtitle>
+                                </v-list-item>
+                            </v-list>
+                        </v-card-text>
                     </v-card>
-                    <v-btn v-if="!readonly" color="primary" prepend-icon="mdi-plus" @click="openDokterModal">
-                        Tambah Dokter Pelaksana
-                    </v-btn>
                 </v-col>
 
                 <!-- Tanggal Daftar -->
@@ -401,95 +521,4 @@ const handleDokterItemsPerPageUpdate = (items: unknown) => {
             </v-row>
         </v-card-text>
     </v-card>
-
-    <!-- Modal for selecting dokter -->
-    <v-dialog v-model="showDokterModal" max-width="900px">
-        <v-card>
-            <v-card-title class="d-flex align-center justify-space-between pa-4">
-                <div class="d-flex align-center">
-                    <v-icon class="mr-3">mdi-database</v-icon>
-                    <span class="text-h6">Select Item</span>
-                </div>
-                <v-btn
-                    icon
-                    variant="text"
-                    @click="showDokterModal = false"
-                >
-                    <v-icon>mdi-close</v-icon>
-                </v-btn>
-            </v-card-title>
-            
-            <v-divider></v-divider>
-            
-            <v-card-text class="pa-4">
-                <!-- Search Bar -->
-                <v-text-field
-                    v-model="searchDokter"
-                    placeholder="Search..."
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details
-                    prepend-inner-icon="mdi-magnify"
-                    :loading="isLoadingDokter"
-                    class="mb-4"
-                ></v-text-field>
-
-                <!-- Data Table -->
-                <TableAntrian
-                    :headers="dokterHeaders"
-                    :items="dokterList"
-                    :server-side="true"
-                    :total-items="dokterTotalCount"
-                    :current-page="dokterCurrentPage"
-                    :items-per-page="dokterItemsPerPage"
-                    :loading="isLoadingDokter"
-                    min-width="700px"
-                    @update:page="handleDokterPageUpdate"
-                    @update:itemsPerPage="handleDokterItemsPerPageUpdate"
-                >
-                    <template #item.select="{ item }">
-                        <v-checkbox
-                            v-model="selectedDokters"
-                            :value="item.id"
-                            hide-details
-                            density="compact"
-                            @click.stop
-                        ></v-checkbox>
-                    </template>
-                    
-                    <template #item.nip="{ item }">
-                        <div @click="toggleDokterSelection(item.id)" style="cursor: pointer;">
-                            {{ item.nip }}
-                        </div>
-                    </template>
-                    
-                    <template #item.nama_lengkap="{ item }">
-                        <div @click="toggleDokterSelection(item.id)" style="cursor: pointer;">
-                            {{ item.nama_lengkap }}
-                        </div>
-                    </template>
-                    
-                    <template #item.nama_ksm="{ item }">
-                        <div @click="toggleDokterSelection(item.id)" style="cursor: pointer;">
-                            {{ item.nama_ksm }}
-                        </div>
-                    </template>
-                </TableAntrian>
-            </v-card-text>
-            
-            <v-divider></v-divider>
-            
-            <v-card-actions class="pa-4 justify-end">
-                <v-btn
-                    color="primary"
-                    variant="flat"
-                    @click="saveDokterSelection"
-                    :disabled="selectedDokters.length === 0"
-                >
-                    <v-icon start>mdi-check</v-icon>
-                    Simpan ({{ selectedDokters.length }})
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
 </template>
diff --git a/components/pendaftaran/TableAntrian.vue b/components/pendaftaran/TableAntrian.vue
index 0f7f6cb..027bf83 100644
--- a/components/pendaftaran/TableAntrian.vue
+++ b/components/pendaftaran/TableAntrian.vue
@@ -11,6 +11,7 @@ interface Props {
     minWidth?: string;
     actions?: Action[];
     serverSide?: boolean;
+    loading?: boolean;
     totalItems?: number;
     currentPage?: number;
 }
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     minWidth: '1200px',
     actions: () => [],
     serverSide: false,
+    loading: false,
     totalItems: 0,
     currentPage: 1
 });
@@ -74,7 +76,19 @@ watch(itemsPerPageLocal, (newVal) => {
 
 <template>
     <div class="table-container">
-        <div class="table-wrapper">
+        <div class="table-wrapper" :class="{ 'loading-overlay-wrapper': loading }">
+            <!-- Loading Overlay -->
+            <div v-if="loading" class="loading-overlay">
+                <v-progress-circular
+                    indeterminate
+                    color="primary"
+                    size="48"
+                ></v-progress-circular>
+                <div class="text-caption text-medium-emphasis mt-3">
+                    Memuat data...
+                </div>
+            </div>
+
             <v-data-table-server
                 :headers="headers"
                 :items="items"
@@ -82,11 +96,32 @@ watch(itemsPerPageLocal, (newVal) => {
                 v-model:page="page"
                 v-model:items-per-page="itemsPerPageLocal"
                 :search="serverSide ? undefined : search"
+                :loading="loading"
                 class="elevation-1"
                 item-value="id"
                 hide-default-footer
                 striped="even"
             >
+                <!-- Loading slot -->
+                <template #loading>
+                    <v-skeleton-loader
+                        type="table-row@10"
+                        class="mx-auto"
+                    ></v-skeleton-loader>
+                </template>
+
+                <!-- No data slot -->
+                <template #no-data>
+                    <div class="text-center pa-8">
+                        <v-icon size="64" color="grey-lighten-1" class="mb-4">
+                            mdi-database-off-outline
+                        </v-icon>
+                        <div class="text-h6 text-grey-darken-1 mb-2">Tidak ada data</div>
+                        <div class="text-caption text-grey">
+                            Tidak ada data yang tersedia untuk ditampilkan
+                        </div>
+                    </div>
+                </template>
                 <!-- Pass through all slots to parent -->
                 <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
                     <slot :name="name" v-bind="slotData" />
@@ -144,7 +179,12 @@ watch(itemsPerPageLocal, (newVal) => {
         <div class="pagination-footer">
             <div class="pagination-info">
                 <span class="text-caption">
-                    Showing {{ ((page - 1) * itemsPerPageLocal) + 1 }} to {{ Math.min(page * itemsPerPageLocal, serverSide ? totalItems : items.length) }} of {{ serverSide ? numberFormat(totalItems) : items.length }} entries
+                    <template v-if="loading">
+                        Memuat data...
+                    </template>
+                    <template v-else>
+                        Showing {{ ((page - 1) * itemsPerPageLocal) + 1 }} to {{ Math.min(page * itemsPerPageLocal, serverSide ? totalItems : items.length) }} of {{ serverSide ? numberFormat(totalItems) : items.length }} entries
+                    </template>
                 </span>
             </div>
             <div class="pagination-controls">
@@ -154,6 +194,7 @@ watch(itemsPerPageLocal, (newVal) => {
                     density="compact"
                     variant="outlined"
                     hide-details
+                    :disabled="loading"
                     style="max-width: 100px;"
                     label="Rows"
                 ></v-select>
@@ -161,6 +202,7 @@ watch(itemsPerPageLocal, (newVal) => {
                     v-model="page"
                     :length="Math.ceil((serverSide ? totalItems : items.length) / itemsPerPageLocal)"
                     :total-visible="5"
+                    :disabled="loading"
                     density="comfortable"
                 ></v-pagination>
             </div>
@@ -179,12 +221,38 @@ watch(itemsPerPageLocal, (newVal) => {
     overflow-x: auto;
     width: 100%;
     margin-bottom: 16px;
+    position: relative;
+}
+
+.loading-overlay-wrapper {
+    position: relative;
+    min-height: 400px;
+}
+
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    backdrop-filter: blur(2px);
 }
 
 .table-wrapper :deep(.v-data-table) {
     min-width: v-bind(minWidth);
 }
 
+.table-wrapper.loading-overlay-wrapper :deep(.v-data-table) {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
 .pagination-footer {
     display: flex;
     align-items: center;
@@ -213,4 +281,8 @@ watch(itemsPerPageLocal, (newVal) => {
     border-top-color: rgba(255, 255, 255, 0.12);
     background-color: rgb(30, 30, 30);
 }
+
+:deep(.v-theme--dark) .loading-overlay {
+    background-color: rgba(30, 30, 30, 0.9);
+}
 </style>
diff --git a/data/users.db b/data/users.db
index 736a211..5bc6f90 100644
Binary files a/data/users.db and b/data/users.db differ
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
index 2454df0..215b11c 100644
--- a/pages/antrean/all.vue
+++ b/pages/antrean/all.vue
@@ -2,6 +2,8 @@
 import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
+import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
 import { getAntrianOperasi } from '~/services/antrean';
 import { Icon } from '@iconify/vue';
 import type { AntreanOperasi } from '~/types/antrean';
@@ -24,6 +26,12 @@ const router = useRouter();
 
 // Modal state
 const showModal = ref(false);
+const showEditModal = ref(false);
+const showDetailModal = ref(false);
+const showUpdateStatusModal = ref(false);
+const selectedId = ref<string | number | null>(null);
+const selectedIdForEdit = ref<string | number | null>(null);
+const selectedIdForStatus = ref<string | number | null>(null);
 
 const statusOptions = [
     { value: null, label: 'Semua Status' },
@@ -117,29 +125,32 @@ const headers = [
 const actions = [
     { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
     { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
+    { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
     { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
 ];
 
-const handleView = (item: unknown) => {
+const handleView = async (item: unknown) => {
     const data = item as AntreanOperasi;
-    router.push({
-        path: '/antrean/pendaftaran',
-        query: {
-            mode: 'view',
-            id: data.id
-        }
-    });
+    selectedId.value = data.id;
+    // Wait for DOM update before opening modal
+    await nextTick();
+    showDetailModal.value = true;
 };
 
-const handleEdit = (item: unknown) => {
+const handleEdit = async (item: unknown) => {
     const data = item as AntreanOperasi;
-    router.push({
-        path: '/antrean/pendaftaran',
-        query: {
-            mode: 'edit',
-            id: data.id
-        }
-    });
+    selectedIdForEdit.value = data.id;
+    // Wait for DOM update before opening modal
+    await nextTick();
+    showEditModal.value = true;
+};
+
+const handleUpdateStatus = async (item: unknown) => {
+    const data = item as AntreanOperasi;
+    selectedIdForStatus.value = data.id;
+    // Wait for DOM update before opening modal
+    await nextTick();
+    showUpdateStatusModal.value = true;
 };
 
 const handleDelete = (item: unknown) => {
@@ -164,6 +175,14 @@ const openModal = () => {
 const handleModalSuccess = () => {
     fetchData(); // Refresh the table after successful submission
 };
+
+const handleEditModalSuccess = () => {
+    fetchData(); // Refresh the table after successful edit
+};
+
+const handleUpdateStatusSuccess = () => {
+    fetchData(); // Refresh the table after status update
+};
 </script>
 <template>
     <v-row>
@@ -219,6 +238,7 @@ const handleModalSuccess = () => {
                         min-width="1500px"
                         @view="handleView"
                         @edit="handleEdit"
+                        @updateStatus="handleUpdateStatus"
                         @delete="handleDelete"
                         @update:page="handlePageUpdate"
                         @update:itemsPerPage="handleItemsPerPageUpdate"
@@ -256,4 +276,28 @@ const handleModalSuccess = () => {
         mode="create"
         @success="handleModalSuccess"
     />
+
+    <!-- Modal Edit Pendaftaran -->
+    <ModalPendaftaran 
+        v-if="selectedIdForEdit"
+        v-model="showEditModal" 
+        mode="edit"
+        :id="selectedIdForEdit"
+        @success="handleEditModalSuccess"
+    />
+
+    <!-- Modal Detail Pendaftaran -->
+    <ModalDetailPendaftaran 
+        v-if="selectedId"
+        v-model="showDetailModal" 
+        :id="selectedId"
+    />
+
+    <!-- Modal Update Status -->
+    <ModalUpdateStatus 
+        v-if="selectedIdForStatus"
+        v-model="showUpdateStatusModal" 
+        :id="selectedIdForStatus"
+        @success="handleUpdateStatusSuccess"
+    />
 </template>
\ No newline at end of file
diff --git a/pages/antrean/kategori/[id].vue b/pages/antrean/kategori/[id].vue
index 97e182e..450cdbd 100644
--- a/pages/antrean/kategori/[id].vue
+++ b/pages/antrean/kategori/[id].vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import { getAntrianOperasi } from '~/services/antrean';
-import api from '~/services/api';
-import type { KategoriOperasi } from '~/types/antrean';
 import { statusOptions, STATUS } from '~/types/antrean';
 import { Icon } from '@iconify/vue';
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 
 const route = useRoute();
 const idKategori = route.params.id as string;
 const categoryName = route.query.category as string || 'Kategori';
 
 // State
-const kategoriInfo = ref<KategoriOperasi | null>(null);
-const isLoadingKategori = ref(false);
 const search = ref('');
 const antreanList = ref<any[]>([]);
 const statusFilter = ref<string | null>(STATUS.BELUM);
@@ -21,6 +19,12 @@ const currentPage = ref(1);
 const itemsPerPage = ref(10);
 const totalItems = ref(0);
 
+
+// Modal state
+const showModal = ref(false);
+const showDetailModal = ref(false);
+const selectedId = ref<string | number | null>(null);
+
 definePageMeta({
     middleware: 'auth',
     buttonBack: true
@@ -41,6 +45,7 @@ const fetchData = async () => {
             type: 'kategori',
             limit: itemsPerPage.value,
             offset: offset,
+            status: statusFilter.value || undefined,
             search: search.value || undefined,
             type_id: idKategori
         });
@@ -66,6 +71,12 @@ watch(itemsPerPage, () => {
     fetchData();
 });
 
+// Watch for status filter changes
+watch(statusFilter, () => {
+    currentPage.value = 1;
+    fetchData();
+});
+
 // Watch for search with debounce
 let searchTimeout: NodeJS.Timeout | null = null;
 watch(search, () => {
@@ -102,6 +113,22 @@ const actions = [
     { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
 ];
 
+const handleView = (item: unknown) => {
+    const data = item as any;
+    selectedId.value = data.id;
+    showDetailModal.value = true;
+};
+
+const handleEdit = (item: unknown) => {
+    console.log('Edit', item);
+};
+
+const handleDelete = (item: unknown) => {
+    if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
+        console.log('Delete', item);
+    }
+};
+
 const handlePageUpdate = (page: unknown) => {
     currentPage.value = page as number;
 };
@@ -109,6 +136,10 @@ const handlePageUpdate = (page: unknown) => {
 const handleItemsPerPageUpdate = (items: unknown) => {
     itemsPerPage.value = items as number;
 };
+
+const handleModalSuccess = () => {
+    fetchData(); // Refresh the table after successful submission
+};
 </script>
 <template>
     <v-row>
@@ -124,7 +155,7 @@ const handleItemsPerPageUpdate = (items: unknown) => {
                                 placeholder="Filter Status" style="max-width: 200px;"></v-select>
                         </div>
 
-                        <v-btn color="primary" size="large" elevation="2">
+                        <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
                             <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
                             Pendaftaran Operasi Baru
                         </v-btn>
@@ -132,7 +163,11 @@ const handleItemsPerPageUpdate = (items: unknown) => {
 
                     <TableAntrian :headers="headers" :actions="actions" :items="antreanList" :server-side="true"
                         :total-items="totalItems" :current-page="currentPage" :items-per-page="itemsPerPage"
-                        :loading="loading" min-width="1500px" @update:page="handlePageUpdate"
+                        :loading="loading" min-width="1500px" 
+                        @view="handleView"
+                        @edit="handleEdit"
+                        @delete="handleDelete"
+                        @update:page="handlePageUpdate"
                         @update:itemsPerPage="handleItemsPerPageUpdate">
                         <template #item.TglDaftar="{ item }">
                             {{ new Date(item.TglDaftar).toLocaleDateString('id-ID', {
@@ -144,4 +179,19 @@ const handleItemsPerPageUpdate = (items: unknown) => {
             </v-card>
         </v-col>
     </v-row>
+
+    <!-- Modal Pendaftaran -->
+    <ModalPendaftaran 
+        v-model="showModal" 
+        mode="create"
+        :initial-kategori="parseInt(idKategori)"
+        @success="handleModalSuccess"
+    />
+
+    <!-- Modal Detail Pendaftaran -->
+    <ModalDetailPendaftaran 
+        v-if="selectedId"
+        v-model="showDetailModal" 
+        :id="selectedId"
+    />
 </template>
diff --git a/pages/antrean/list-spesialis.vue b/pages/antrean/list-spesialis.vue
index 37abbd7..b6f2333 100644
--- a/pages/antrean/list-spesialis.vue
+++ b/pages/antrean/list-spesialis.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { getAntrianPerSpesialis } from '~/services/antrean';
 import LoadingState from '@/components/shared/LoadingState.vue';
+import { numberFormat } from '~/utils/helpers';
 
 definePageMeta({
   middleware: 'auth',
@@ -22,6 +23,20 @@ interface SpesialisData {
 
 const loading = ref(true);
 const spesialisList = ref<SpesialisData[]>([]);
+const expandedItems = ref<Set<number>>(new Set());
+
+// Toggle expand/collapse for subspecialist details
+const toggleExpand = (idSpesialis: number) => {
+  if (expandedItems.value.has(idSpesialis)) {
+    expandedItems.value.delete(idSpesialis);
+  } else {
+    expandedItems.value.add(idSpesialis);
+  }
+};
+
+const isExpanded = (idSpesialis: number) => {
+  return expandedItems.value.has(idSpesialis);
+};
 
 // Fetch data from API
 const fetchData = async () => {
@@ -67,43 +82,64 @@ onMounted(() => {
                                 <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
                             </div>
                             <v-chip class="mt-3 mb-0" color="primary" size="small">
-                                {{ spesialis.JmlAntrian }} Antrean
+                                {{ numberFormat(spesialis.JmlAntrian) }} Antrean
                             </v-chip>
                         </v-card-item>
                     </NuxtLink>
                     <v-divider></v-divider>
-                    <v-card-text>
-                        <v-label class="mb-2 font-weight-medium text-subtitle-2">Sub Spesialis:</v-label>
-                        <v-list density="compact" class="py-0">
-                            <v-list-item
-                                v-for="subSpesialis in spesialis.SubSpesialis"
-                                :key="subSpesialis.IdSubSpesialis"
-                                class="px-0"
-                                :to="`/antrean/subspesialis/${subSpesialis.IdSubSpesialis}?subspecialis=${encodeURIComponent(subSpesialis.SubSpesialis || '')}`"
-                                style="text-decoration: none; color: inherit;"
-                            >
-                                <template #prepend>
-                                    <v-icon size="small" color="primary">mdi-chevron-right</v-icon>
-                                </template>
-                                <v-list-item-title class="text-body-2">
-                                    {{ subSpesialis.SubSpesialis }}
-                                </v-list-item-title>
-                                <template #append>
-                                    <v-chip size="x-small" variant="outlined" color="primary">
-                                        {{ subSpesialis.JmlAntrian }} Antrean
-                                    </v-chip>
-                                </template>
-                            </v-list-item>
-                            
-                            <v-list-item v-if="!spesialis.SubSpesialis || spesialis.SubSpesialis.length === 0" class="px-0">
-                                <v-list-item-title class="text-body-2 text-medium-emphasis">
-                                    Tidak ada sub spesialis
-                                </v-list-item-title>
-                            </v-list-item>
-                        </v-list>
-                    </v-card-text>
+                    
+                    <!-- Collapsible Header -->
+                    <div 
+                        @click="toggleExpand(spesialis.IdSpesialis)"
+                        style="cursor: pointer;"
+                        class="px-4 py-3 d-flex align-center justify-space-between"
+                    >
+                        <v-label class="font-weight-medium text-subtitle-2">Sub Spesialis:</v-label>
+                        <v-icon :class="{ 'rotate-180': isExpanded(spesialis.IdSpesialis) }" style="transition: transform 0.3s;">
+                            mdi-chevron-down
+                        </v-icon>
+                    </div>
+                    
+                    <!-- Collapsible Content -->
+                    <v-expand-transition>
+                        <v-card-text v-show="isExpanded(spesialis.IdSpesialis)" class="pt-0">
+                            <v-list density="compact" class="py-0">
+                                <v-list-item
+                                    v-for="subSpesialis in spesialis.SubSpesialis"
+                                    :key="subSpesialis.IdSubSpesialis"
+                                    class="px-0"
+                                    :to="`/antrean/subspesialis/${subSpesialis.IdSubSpesialis}?subspecialis=${encodeURIComponent(subSpesialis.SubSpesialis || '')}&spesialis_id=${spesialis.IdSpesialis}`"
+                                    style="text-decoration: none; color: inherit;"
+                                >
+                                    <template #prepend>
+                                        <v-icon size="small" color="primary">mdi-chevron-right</v-icon>
+                                    </template>
+                                    <v-list-item-title class="text-body-2">
+                                        {{ subSpesialis.SubSpesialis }}
+                                    </v-list-item-title>
+                                    <template #append>
+                                        <v-chip size="x-small" variant="outlined" color="primary">
+                                            {{ numberFormat(subSpesialis.JmlAntrian) }} Antrean
+                                        </v-chip>
+                                    </template>
+                                </v-list-item>
+                                
+                                <v-list-item v-if="!spesialis.SubSpesialis || spesialis.SubSpesialis.length === 0" class="px-0">
+                                    <v-list-item-title class="text-body-2 text-medium-emphasis">
+                                        Tidak ada sub spesialis
+                                    </v-list-item-title>
+                                </v-list-item>
+                            </v-list>
+                        </v-card-text>
+                    </v-expand-transition>
                 </v-card>
             </v-col>
         </v-row>
     </LoadingState>
-</template> 
\ No newline at end of file
+</template>
+
+<style scoped>
+.rotate-180 {
+    transform: rotate(180deg);
+}
+</style> 
\ No newline at end of file
diff --git a/pages/antrean/spesialis/[kode].vue b/pages/antrean/spesialis/[kode].vue
index c727604..067237d 100644
--- a/pages/antrean/spesialis/[kode].vue
+++ b/pages/antrean/spesialis/[kode].vue
@@ -1,15 +1,29 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
-import antreanOperasiData from '~/data/mock/antreanOperasi.json';
-import type { AntreanOperasi } from '~/types/antrean';
+import { getAntrianOperasi } from '~/services/antrean';
 import { statusOptions, STATUS } from '~/types/antrean';
 import { Icon } from '@iconify/vue';
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 
 const route = useRoute();
-const statusFilter = ref<string | null>(STATUS.BELUM);
 const kodeSpesialis = route.params.kode as string;
 const spesialisName = route.query.spesialis as string || 'Spesialis';
 
+// State
+const search = ref('');
+const antreanList = ref<any[]>([]);
+const statusFilter = ref<string | null>(STATUS.BELUM);
+const loading = ref(false);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+const totalItems = ref(0);
+
+// Modal state
+const showModal = ref(false);
+const showDetailModal = ref(false);
+const selectedId = ref<string | number | null>(null);
+
 definePageMeta({
   middleware: 'auth',
   buttonBack: true
@@ -21,19 +35,72 @@ watch(() => route.query.spesialis, (spesialis) => {
     route.meta.pageTitle = `Antrean Operasi Spesialis ${spesialisText}`;
 }, { immediate: true });
 
-const search = ref('');
-const antreanList = ref<AntreanOperasi[]>(
-    antreanOperasiData.filter(antrian => antrian.kodeSpesialis === kodeSpesialis)
-);
+// Fetch data from API
+const fetchData = async () => {
+    loading.value = true;
+    try {
+        const offset = (currentPage.value - 1) * itemsPerPage.value;
+        const response = await getAntrianOperasi({
+            type: 'spesialis',
+            limit: itemsPerPage.value,
+            offset: offset,
+            status: statusFilter.value || undefined,
+            search: search.value || undefined,
+            type_id: kodeSpesialis
+        });
+
+        if (response.success) {
+            antreanList.value = response.data;
+            totalItems.value = response.Paginate.Total;
+        }
+    } catch (error) {
+        console.error('Error fetching antrian operasi:', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Watch for page changes
+watch(currentPage, () => {
+    fetchData();
+});
+
+watch(itemsPerPage, () => {
+    currentPage.value = 1;
+    fetchData();
+});
+
+// Watch for status filter changes
+watch(statusFilter, () => {
+    currentPage.value = 1;
+    fetchData();
+});
+
+// Watch for search with debounce
+let searchTimeout: NodeJS.Timeout | null = null;
+watch(search, () => {
+    if (searchTimeout) {
+        clearTimeout(searchTimeout);
+    }
+    searchTimeout = setTimeout(() => {
+        currentPage.value = 1;
+        fetchData();
+    }, 500);
+});
+
+// Initial fetch
+onMounted(() => {
+    fetchData();
+});
 
 const headers = [
-    { title: 'No. Urut Spesialis', key: 'no', sortable: false },
-    { title: 'No. Urut Sub Spesialis', key: 'no', sortable: false },
-    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
-    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
-    { title: 'No Ktp', key: 'noKtp', sortable: true },
-    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true },
-    { title: 'Status', key: 'status', sortable: true },
+    { title: 'Nomor Spesialis', key: 'NoUrutSpesialis', width: '100px', align: 'center' as const, sortable: false },
+    { title: 'Nomor Sub Spesialis', key: 'NoUrutSubSpesialis', width: '140px', align: 'center' as const, sortable: false },
+    { title: 'Tanggal Daftar', key: 'TglDaftar', sortable: false, width: '150px' },
+    { title: 'No Rekam Medis', key: 'NoRekamMedis', sortable: false, width: '180px' },
+    { title: 'Nama Pasien', key: 'NamaPasien', sortable: false },
+    { title: 'Jenis kelamin', key: 'JenisKelamin', sortable: false },
+    { title: 'Status', key: 'StatusOperasi', sortable: false, width: '150px' },
     { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
 ];
 
@@ -42,6 +109,34 @@ const actions = [
     { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
     { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
 ];
+
+const handleView = (item: unknown) => {
+    const data = item as any;
+    selectedId.value = data.id;
+    showDetailModal.value = true;
+};
+
+const handleEdit = (item: unknown) => {
+    console.log('Edit', item);
+};
+
+const handleDelete = (item: unknown) => {
+    if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
+        console.log('Delete', item);
+    }
+};
+
+const handlePageUpdate = (page: unknown) => {
+    currentPage.value = page as number;
+};
+
+const handleItemsPerPageUpdate = (items: unknown) => {
+    itemsPerPage.value = items as number;
+};
+
+const handleModalSuccess = () => {
+    fetchData();
+};
 </script>
 
 <template>
@@ -58,7 +153,7 @@ const actions = [
                                 placeholder="Filter Status" style="max-width: 200px;"></v-select>
                         </div>
 
-                        <v-btn color="primary" size="large" elevation="2">
+                        <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
                             <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
                             Pendaftaran Operasi Baru
                         </v-btn>
@@ -68,14 +163,41 @@ const actions = [
                         :headers="headers"
                         :actions="actions"
                         :items="antreanList"
-                        :search="search"
+                        :server-side="true"
+                        :total-items="totalItems"
+                        :current-page="currentPage"
+                        :items-per-page="itemsPerPage"
+                        :loading="loading"
+                        min-width="1500px"
+                        @view="handleView"
+                        @edit="handleEdit"
+                        @delete="handleDelete"
+                        @update:page="handlePageUpdate"
+                        @update:itemsPerPage="handleItemsPerPageUpdate"
                     >
-                        <template #item.no="{ index }">
-                            {{ index + 1 }}
+                        <template #item.TglDaftar="{ item }">
+                            {{ new Date(item.TglDaftar).toLocaleDateString('id-ID', {
+                                year: 'numeric', month: 'short',
+                                day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
                         </template>
                     </TableAntrian>
                 </v-card-text>
             </v-card>
         </v-col>
     </v-row>
+
+    <!-- Modal Pendaftaran -->
+    <ModalPendaftaran 
+        v-model="showModal" 
+        mode="create"
+        :initial-spesialis="parseInt(kodeSpesialis)"
+        @success="handleModalSuccess"
+    />
+
+    <!-- Modal Detail Pendaftaran -->
+    <ModalDetailPendaftaran 
+        v-if="selectedId"
+        v-model="showDetailModal" 
+        :id="selectedId"
+    />
 </template>
diff --git a/pages/antrean/subspesialis/[kode].vue b/pages/antrean/subspesialis/[kode].vue
index eeb78a7..e358b58 100644
--- a/pages/antrean/subspesialis/[kode].vue
+++ b/pages/antrean/subspesialis/[kode].vue
@@ -1,15 +1,29 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
-import antreanOperasiData from '~/data/mock/antreanOperasi.json';
-import type { AntreanOperasi } from '~/types/antrean';
-import { Icon } from '@iconify/vue';
+import { getAntrianOperasi } from '~/services/antrean';
 import { statusOptions, STATUS } from '~/types/antrean';
+import { Icon } from '@iconify/vue';
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 
 const route = useRoute();
 const kodeSubSpesialis = route.params.kode as string;
 const subSpesialisName = route.query.subspecialis as string || 'Sub Spesialis';
-const statusFilter = ref<string | null>(STATUS.BELUM);
+const spesialisId = route.query.spesialis_id as string || null;
 
+// State
+const search = ref('');
+const antreanList = ref<any[]>([]);
+const statusFilter = ref<string | null>(STATUS.BELUM);
+const loading = ref(false);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+const totalItems = ref(0);
+
+// Modal state
+const showModal = ref(false);
+const showDetailModal = ref(false);
+const selectedId = ref<string | number | null>(null);
 
 definePageMeta({
   middleware: 'auth',
@@ -22,18 +36,71 @@ watch(() => route.query.subspecialis, (subspecialis) => {
     route.meta.pageTitle = `Antrean Operasi Sub Spesialis ${subspecialisText}`;
 }, { immediate: true });
 
-const search = ref('');
-const antreanList = ref<AntreanOperasi[]>(
-    antreanOperasiData.filter(antrian => antrian.kodeSubSpesialis === kodeSubSpesialis)
-);
+// Fetch data from API
+const fetchData = async () => {
+    loading.value = true;
+    try {
+        const offset = (currentPage.value - 1) * itemsPerPage.value;
+        const response = await getAntrianOperasi({
+            type: 'sub-spesialis',
+            limit: itemsPerPage.value,
+            offset: offset,
+            status: statusFilter.value || undefined,
+            search: search.value || undefined,
+            type_id: kodeSubSpesialis
+        });
+
+        if (response.success) {
+            antreanList.value = response.data;
+            totalItems.value = response.Paginate.Total;
+        }
+    } catch (error) {
+        console.error('Error fetching antrian operasi:', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Watch for page changes
+watch(currentPage, () => {
+    fetchData();
+});
+
+watch(itemsPerPage, () => {
+    currentPage.value = 1;
+    fetchData();
+});
+
+// Watch for status filter changes
+watch(statusFilter, () => {
+    currentPage.value = 1;
+    fetchData();
+});
+
+// Watch for search with debounce
+let searchTimeout: NodeJS.Timeout | null = null;
+watch(search, () => {
+    if (searchTimeout) {
+        clearTimeout(searchTimeout);
+    }
+    searchTimeout = setTimeout(() => {
+        currentPage.value = 1;
+        fetchData();
+    }, 500);
+});
+
+// Initial fetch
+onMounted(() => {
+    fetchData();
+});
 
 const headers = [
-    { title: 'No. Urut Sub Spesialis', key: 'no', sortable: false },
-    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
-    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
-    { title: 'No Ktp', key: 'noKtp', sortable: true },
-    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true },
-    { title: 'Status', key: 'status', sortable: true },
+    { title: 'Nomor Sub Spesialis', key: 'NoUrutSubSpesialis', width: '140px', align: 'center' as const, sortable: false },
+    { title: 'Tanggal Daftar', key: 'TglDaftar', sortable: false, width: '150px' },
+    { title: 'No Rekam Medis', key: 'NoRekamMedis', sortable: false, width: '180px' },
+    { title: 'Nama Pasien', key: 'NamaPasien', sortable: false },
+    { title: 'Jenis kelamin', key: 'JenisKelamin', sortable: false },
+    { title: 'Status', key: 'StatusOperasi', sortable: false, width: '150px' },
     { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
 ];
 
@@ -43,6 +110,34 @@ const actions = [
     { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
 ];
 
+const handleView = (item: unknown) => {
+    const data = item as any;
+    selectedId.value = data.id;
+    showDetailModal.value = true;
+};
+
+const handleEdit = (item: unknown) => {
+    console.log('Edit', item);
+};
+
+const handleDelete = (item: unknown) => {
+    if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
+        console.log('Delete', item);
+    }
+};
+
+const handlePageUpdate = (page: unknown) => {
+    currentPage.value = page as number;
+};
+
+const handleItemsPerPageUpdate = (items: unknown) => {
+    itemsPerPage.value = items as number;
+};
+
+const handleModalSuccess = () => {
+    fetchData();
+};
+
 </script>
 
 <template>
@@ -59,7 +154,7 @@ const actions = [
                                 placeholder="Filter Status" style="max-width: 200px;"></v-select>
                         </div>
 
-                        <v-btn color="primary" size="large" elevation="2">
+                        <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
                             <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
                             Pendaftaran Operasi Baru
                         </v-btn>
@@ -69,14 +164,42 @@ const actions = [
                         :headers="headers"
                         :actions="actions"
                         :items="antreanList"
-                        :search="search"
+                        :server-side="true"
+                        :total-items="totalItems"
+                        :current-page="currentPage"
+                        :items-per-page="itemsPerPage"
+                        :loading="loading"
+                        min-width="1500px"
+                        @view="handleView"
+                        @edit="handleEdit"
+                        @delete="handleDelete"
+                        @update:page="handlePageUpdate"
+                        @update:itemsPerPage="handleItemsPerPageUpdate"
                     >
-                        <template #item.no="{ index }">
-                            {{ index + 1 }}
+                        <template #item.TglDaftar="{ item }">
+                            {{ new Date(item.TglDaftar).toLocaleDateString('id-ID', {
+                                year: 'numeric', month: 'short',
+                                day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
                         </template>
                     </TableAntrian>
                 </v-card-text>
             </v-card>
         </v-col>
     </v-row>
+
+    <!-- Modal Pendaftaran -->
+    <ModalPendaftaran 
+        v-model="showModal" 
+        mode="create"
+        :initial-spesialis="spesialisId ? parseInt(spesialisId) : undefined"
+        :initial-sub-spesialis="parseInt(kodeSubSpesialis)"
+        @success="handleModalSuccess"
+    />
+
+    <!-- Modal Detail Pendaftaran -->
+    <ModalDetailPendaftaran 
+        v-if="selectedId"
+        v-model="showDetailModal" 
+        :id="selectedId"
+    />
 </template>
diff --git a/pages/auth/Login.vue b/pages/auth/Login.vue
index d11f056..8ecdcff 100644
--- a/pages/auth/Login.vue
+++ b/pages/auth/Login.vue
@@ -56,14 +56,14 @@
                         @click="handleLogin"
                       >
                         <v-icon left class="mr-3">mdi-account-circle</v-icon>
-                        Log In with Keycloak
+                        Login dengan Keycloak
                       </v-btn>
                     </div>
 
                     <!-- BOTTOM AREA -->
                     <div class="d-flex align-center">
                       <v-icon size="small" class="mr-2">mdi-lock-outline</v-icon>
-                      <span class="text-caption">Not Authenticated</span>
+                      <span class="text-caption">Belum terautentikasi</span>
                     </div>
 
                   </div>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index c9e94b9..5788ad3 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 // @ts-ignore: module has incompatible/undiscoverable typings in package exports
 import VueApexCharts from "vue3-apexcharts";
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import api from '@/services/api';
 
 // Filter bulan
 const selectedMonth = ref(new Date().getMonth());
@@ -27,17 +29,100 @@ const years = ref([
     yearNow -3, yearNow - 2, yearNow -1,yearNow
 ]);
 
-// Navigasi ke halaman pendaftaran
-const goToRegistration = () => {
-    navigateTo('/antrean/pendaftaran');
+// Modal state
+const showModal = ref(false);
+
+// Loading state
+const loadingStatusAntrian = ref(false);
+const loadingKategoriAntrian = ref(false);
+
+// Data status antrian dari API
+const statusAntrianData = ref<Array<{ id: number; jumlah: number; statust: string }>>([]);
+const kategoriAntrianData = ref<Array<{ id_kategori: number; kategori: string; jumlah: number }>>([]);
+
+// Fetch data perbandingan status antrian
+const fetchStatusAntrian = async () => {
+    loadingStatusAntrian.value = true;
+    try {
+        const response = await api.get('/dashboard/perbandingan-status-antrian', {
+            params: {
+                year: selectedYear.value,
+                month: selectedMonth.value + 1 // API expects 1-12, not 0-11
+            }
+        });
+
+        if (response.data?.success && response.data?.data) {
+            statusAntrianData.value = response.data.data;
+        }
+    } catch (error) {
+        console.error('Error fetching status antrian:', error);
+        statusAntrianData.value = [];
+    } finally {
+        loadingStatusAntrian.value = false;
+    }
+};
+
+// Fetch data antrian per kategori
+const fetchKategoriAntrian = async () => {
+    loadingKategoriAntrian.value = true;
+    try {
+        const response = await api.get('/dashboard/perbandingan-kategori-antrian', {
+            params: {
+                year: selectedYear.value,
+                month: selectedMonth.value + 1 // API expects 1-12, not 0-11
+            }
+        });
+
+        if (response.data?.success && response.data?.data) {
+            kategoriAntrianData.value = response.data.data;
+        }
+    } catch (error) {
+        console.error('Error fetching kategori antrian:', error);
+        kategoriAntrianData.value = [];
+    } finally {
+        loadingKategoriAntrian.value = false;
+    }
+};
+
+// Computed properties untuk total masing-masing status
+const totalBelum = computed(() => {
+    const item = statusAntrianData.value.find(d => d.statust === 'Belum');
+    return item?.jumlah || 0;
+});
+
+const totalSelesai = computed(() => {
+    const item = statusAntrianData.value.find(d => d.statust === 'Selesai');
+    return item?.jumlah || 0;
+});
+
+const totalTunda = computed(() => {
+    const item = statusAntrianData.value.find(d => d.statust === 'Tunda');
+    return item?.jumlah || 0;
+});
+
+const totalBatal = computed(() => {
+    const item = statusAntrianData.value.find(d => d.statust === 'Batal');
+    return item?.jumlah || 0;
+});
+
+const totalAll = computed(() => {
+    return totalBelum.value + totalSelesai.value + totalTunda.value + totalBatal.value;
+});
+
+// Buka modal pendaftaran
+const openModal = () => {
+    showModal.value = true;
+};
+
+const handleModalSuccess = () => {
+    // Refresh data dashboard setelah pendaftaran berhasil
+    fetchStatusAntrian();
+    fetchKategoriAntrian();
+    console.log('Pendaftaran berhasil');
 };
 
 // Data dummy untuk antrian operasi berdasarkan status
-const totalBelum = ref(25);
-const totalSelesai = ref(45);
-const totalTunda = ref(8);
-const totalBatal = ref(5);
-const totalAll = ref(83);
+// Dihapus karena sudah menggunakan API
 
 // Data untuk Pie Chart - Status Antrian
 const pieChartOptions = ref({
@@ -69,16 +154,23 @@ const pieChartOptions = ref({
     }]
 });
 
-const pieChartSeries = ref([25, 45, 8, 5]);
+const pieChartSeries = computed(() => {
+    return [
+        totalBelum.value,
+        totalSelesai.value,
+        totalTunda.value,
+        totalBatal.value
+    ];
+});
 
-// Data untuk Pie Chart - Kategori Antrian
-const pieKategoriChartOptions = ref({
+// Data untuk Pie Chart - Kategori Antrian (computed untuk dynamic labels)
+const pieKategoriChartOptions = computed(() => ({
     chart: {
         type: 'pie',
         height: 350
     },
-    labels: ['Elektif', 'Elektif Dengan ICU', 'Elektif Dengan Implan', 'Elektif Dengan ICU & Implan', 'Urgent'],
-    colors: ['#5D87FF', '#13DEB9', '#FFAE1F', '#FA896B', '#9C27B0'],
+    labels: kategoriAntrianData.value.map(item => item.kategori),
+    colors: ['#5D87FF', '#13DEB9', '#FFAE1F', '#FA896B', '#9C27B0', '#E91E63', '#00BCD4', '#4CAF50'],
     legend: {
         position: 'bottom'
     },
@@ -99,9 +191,11 @@ const pieKategoriChartOptions = ref({
             }
         }
     }]
-});
+}));
 
-const pieKategoriChartSeries = ref([30, 15, 20, 10, 8]);
+const pieKategoriChartSeries = computed(() => {
+    return kategoriAntrianData.value.map(item => item.jumlah);
+});
 
 // Data untuk Line Chart - Antrian Per Hari dalam 1 Bulan
 const lineChartOptions = computed(() => {
@@ -230,6 +324,18 @@ const headersSubspesialis = [
     { title: 'Batal', key: 'batal', align: 'center' as const }
 ];
 
+// Watch untuk refetch data saat bulan atau tahun berubah
+watch([selectedMonth, selectedYear], () => {
+    fetchStatusAntrian();
+    fetchKategoriAntrian();
+});
+
+// Fetch data saat component mounted
+onMounted(() => {
+    fetchStatusAntrian();
+    fetchKategoriAntrian();
+});
+
 definePageMeta({
   middleware: 'auth',
   pageTitle: 'Dashboard',
@@ -270,7 +376,7 @@ definePageMeta({
                             color="primary"
                             size="large"
                             elevation="2"
-                            @click="goToRegistration"
+                            @click="openModal"
                         >
                             <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
                             Pendaftaran Operasi Baru
@@ -286,7 +392,14 @@ definePageMeta({
         <v-col cols="12" sm="6" md="3">
             <v-card elevation="10" class="bg-primary" style="background: linear-gradient(135deg, #5D87FF 0%, #4570EA 100%);">
                 <v-card-item>
-                    <div class="d-flex ga-3 align-center">
+                    <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
+                        <v-skeleton-loader type="avatar" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        <div class="flex-grow-1">
+                            <v-skeleton-loader type="text" class="bg-white bg-opacity-20 mb-2"></v-skeleton-loader>
+                            <v-skeleton-loader type="heading" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        </div>
+                    </div>
+                    <div v-else class="d-flex ga-3 align-center">
                         <v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
                             <Icon icon="solar:hourglass-line-outline" class="text-white" height="28" />
                         </v-avatar>
@@ -302,7 +415,14 @@ definePageMeta({
         <v-col cols="12" sm="6" md="3">
             <v-card elevation="10" class="bg-success" style="background: linear-gradient(135deg, #13DEB9 0%, #06B89C 100%);">
                 <v-card-item>
-                    <div class="d-flex ga-3 align-center">
+                    <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
+                        <v-skeleton-loader type="avatar" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        <div class="flex-grow-1">
+                            <v-skeleton-loader type="text" class="bg-white bg-opacity-20 mb-2"></v-skeleton-loader>
+                            <v-skeleton-loader type="heading" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        </div>
+                    </div>
+                    <div v-else class="d-flex ga-3 align-center">
                         <v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
                             <Icon icon="solar:check-circle-outline" class="text-white" height="28" />
                         </v-avatar>
@@ -318,7 +438,14 @@ definePageMeta({
         <v-col cols="12" sm="6" md="3">
             <v-card elevation="10" class="bg-warning" style="background: linear-gradient(135deg, #FFAE1F 0%, #FF9800 100%);">
                 <v-card-item>
-                    <div class="d-flex ga-3 align-center">
+                    <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
+                        <v-skeleton-loader type="avatar" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        <div class="flex-grow-1">
+                            <v-skeleton-loader type="text" class="bg-white bg-opacity-20 mb-2"></v-skeleton-loader>
+                            <v-skeleton-loader type="heading" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        </div>
+                    </div>
+                    <div v-else class="d-flex ga-3 align-center">
                         <v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
                             <Icon icon="solar:pause-circle-outline" class="text-white" height="28" />
                         </v-avatar>
@@ -334,7 +461,14 @@ definePageMeta({
         <v-col cols="12" sm="6" md="3">
             <v-card elevation="10" class="bg-error" style="background: linear-gradient(135deg, #FA896B 0%, #F06548 100%);">
                 <v-card-item>
-                    <div class="d-flex ga-3 align-center">
+                    <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
+                        <v-skeleton-loader type="avatar" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        <div class="flex-grow-1">
+                            <v-skeleton-loader type="text" class="bg-white bg-opacity-20 mb-2"></v-skeleton-loader>
+                            <v-skeleton-loader type="heading" class="bg-white bg-opacity-20"></v-skeleton-loader>
+                        </div>
+                    </div>
+                    <div v-else class="d-flex ga-3 align-center">
                         <v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
                             <Icon icon="solar:close-circle-outline" class="text-white" height="28" />
                         </v-avatar>
@@ -360,8 +494,17 @@ definePageMeta({
                 </v-card-item>
                 <v-divider></v-divider>
                 <v-card-text>
-                    <ClientOnly>
-                        <VueApexCharts type="pie" height="350" :options="pieChartOptions" :series="pieChartSeries"></VueApexCharts>
+                    <div v-if="loadingStatusAntrian" class="d-flex justify-center align-center" style="min-height: 350px;">
+                        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+                    </div>
+                    <ClientOnly v-else>
+                        <VueApexCharts 
+                            :key="`pie-status-${selectedMonth}-${selectedYear}`"
+                            type="pie" 
+                            height="350" 
+                            :options="pieChartOptions" 
+                            :series="pieChartSeries"
+                        ></VueApexCharts>
                     </ClientOnly>
                 </v-card-text>
             </v-card>
@@ -380,8 +523,17 @@ definePageMeta({
                 </v-card-item>
                 <v-divider></v-divider>
                 <v-card-text>
-                    <ClientOnly>
-                        <VueApexCharts type="donut" height="350" :options="pieKategoriChartOptions" :series="pieKategoriChartSeries"></VueApexCharts>
+                    <div v-if="loadingKategoriAntrian" class="d-flex justify-center align-center" style="min-height: 350px;">
+                        <v-progress-circular indeterminate color="secondary" size="64"></v-progress-circular>
+                    </div>
+                    <ClientOnly v-else>
+                        <VueApexCharts 
+                            :key="`pie-kategori-${selectedMonth}-${selectedYear}`"
+                            type="donut" 
+                            height="350" 
+                            :options="pieKategoriChartOptions" 
+                            :series="pieKategoriChartSeries"
+                        ></VueApexCharts>
                     </ClientOnly>
                 </v-card-text>
             </v-card>
@@ -503,4 +655,11 @@ definePageMeta({
             </v-card>
         </v-col>
     </v-row>
+
+    <!-- Modal Pendaftaran -->
+    <ModalPendaftaran 
+        v-model="showModal" 
+        mode="create"
+        @success="handleModalSuccess"
+    />
 </template>
diff --git a/services/antrean.ts b/services/antrean.ts
index fd228e6..c40a2b2 100644
--- a/services/antrean.ts
+++ b/services/antrean.ts
@@ -8,7 +8,24 @@ export const getAntrianOperasi = async (params: { type?: string; limit?: number;
   return response.data
 }
 
-export const getAntrianPerSpesialis = async () => {
-  const response = await api.get('/dashboard/antrian-per-spesialis')
+export const getAntrianOperasiById = async (id: string | number) => {
+  const response = await api.get(`/antrian-operasi/${id}`)
   return response.data
 }
+
+export const updateStatusAntrianOperasi = async (id: string | number, data: any) => {
+  const response = await api.put(`/antrian-operasi/${id}/status`, data)
+  return response.data
+}
+
+export const getAntrianPerSpesialis = async () => {
+  const response = await api.get('/dashboard/antrian-per-spesialis')
+   const sortedData = response.data.data.sort((a: any, b: any) =>
+    a.Spesialis.localeCompare(b.Spesialis)
+  )
+
+  return {
+    ...response.data,
+    data: sortedData
+  }
+}
diff --git a/store/pendaftaran.ts b/store/pendaftaran.ts
index 388e0db..5da0212 100644
--- a/store/pendaftaran.ts
+++ b/store/pendaftaran.ts
@@ -206,7 +206,7 @@ export const usePendaftaranStore = defineStore('pendaftaran', {
         },
 
         // Submit form
-        async submitForm() {
+        async submitForm(id?: string | number) {
             this.loading = true;
             try {
                 // Prepare submission data
@@ -224,7 +224,8 @@ export const usePendaftaranStore = defineStore('pendaftaran', {
                     dokterPelaksanaItems: this.dokterPelaksanaItems.map(dokter => ({
                         id: dokter.id,
                         nip: dokter.nip,
-                        nama: dokter.nama_lengkap
+                        nama: dokter.nama_lengkap,
+                        satuan_kerja: dokter.nama_ksm
                     })),
                     statusPasienData: {
                         ...this.statusPasienData,
@@ -237,13 +238,16 @@ export const usePendaftaranStore = defineStore('pendaftaran', {
 
                 console.log('Submitting data:', submissionData);
 
-                // Make API call
-                const response = await api.post('/antrian-operasi', submissionData);
+                // Make API call - use PUT for edit mode, POST for create mode
+                const response = id 
+                    ? await api.put(`/antrian-operasi/${id}`, submissionData)
+                    : await api.post('/antrian-operasi', submissionData);
 
                 console.log('API Response:', response.data);
 
                 // Show success message
-                this.showSnackbar('Data berhasil disimpan!', 'success');
+                const successMessage = id ? 'Data berhasil diupdate!' : 'Data berhasil disimpan!';
+                this.showSnackbar(successMessage, 'success');
 
                 return { success: true, data: response.data };
             } catch (error: any) {