diff --git a/components/layout/full/Main.vue b/components/layout/full/Main.vue
index 9b769ca..a69480b 100644
--- a/components/layout/full/Main.vue
+++ b/components/layout/full/Main.vue
@@ -69,9 +69,9 @@ watch(mdAndDown, (val) => {
         </div>
         
         <!-- Footer -->
-        <v-container fluid class="text-center py-4">
+        <!-- <v-container fluid class="text-center py-4">
           <p class="text-caption textSecondary">&copy; 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur. All rights reserved.</p>
-        </v-container>
+        </v-container> -->
       </v-main>
 
       <!-- Global Snackbar -->
diff --git a/components/pendaftaran/BiodataPasienV2.vue b/components/pendaftaran/BiodataPasienV2.vue
new file mode 100644
index 0000000..56b26ad
--- /dev/null
+++ b/components/pendaftaran/BiodataPasienV2.vue
@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import api from '@/services/api';
+import type { Props } from '~/types/common';
+import type { PatientData } from '~/types/pendaftaran';
+import { Icon } from '@iconify/vue';
+import { formatDate } from '~/utils/helpers';
+
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false
+});
+
+const formData = defineModel<{
+    noRekamMedis: string;
+    noKtp: string;
+    namaPasien: string;
+    jenisKelamin: string;
+    tanggalLahir: string;
+    umur: string;
+    alamat: string;
+    nomorTelepon: string[];
+}>({ required: true });
+
+const rules = {
+    required: (value: string) => !!value || 'Field ini wajib diisi'
+};
+
+// Autocomplete state
+const patientItems = ref<PatientData[]>([]);
+const loadingPatients = ref(false);
+const searchTimeout = ref<NodeJS.Timeout | null>(null);
+const selectedPatient = ref<PatientData | null>(null);
+
+// Search patients by RM number or name
+const searchPatients = async (search: string) => {
+    if (!search || search.length < 3) {
+        patientItems.value = [];
+        return;
+    }
+
+    loadingPatients.value = true;
+
+    try {
+        const response = await api.get('/reference/pasien', {
+            params: {
+                limit: 10,
+                search: search
+            }
+        });
+
+        if (response.data?.data) {
+            patientItems.value = response.data.data;
+        }
+    } catch (error) {
+        console.error('Error fetching patients:', error);
+        patientItems.value = [];
+    } finally {
+        loadingPatients.value = false;
+    }
+};
+
+// Handle search input with debounce
+const handleSearchInput = (value: string) => {
+    if (value === formData.value.noRekamMedis) {
+        patientItems.value = selectedPatient.value ? [selectedPatient.value] : [];
+        return;
+    }
+    if (searchTimeout.value) {
+        clearTimeout(searchTimeout.value);
+    }
+
+    searchTimeout.value = setTimeout(() => {
+        searchPatients(value);
+    }, 500);
+};
+
+// Handle patient selection
+const handlePatientSelect = (patient: PatientData | null) => {
+    if (patient) {
+        selectedPatient.value = patient;
+        formData.value.noRekamMedis = patient.nomr;
+        formData.value.noKtp = patient.nik;
+        formData.value.namaPasien = patient.nama;
+        formData.value.jenisKelamin = patient.jeniskelamin;
+        formData.value.tanggalLahir = patient.tgllahir;
+        formData.value.umur = patient.dataumur.label;
+        formData.value.alamat = patient.alamat;
+    }
+};
+
+// 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;
+    // Hapus karakter non-angka sebelum menghitung panjang
+    const length = value.replace(/[^0-9]/g, '').length;
+    return (length >= 9 && length <= 15) || 'Nomor telepon harus antara 9 hingga 15 digit.';
+};
+
+const indonesianPhoneFormat = (value: string) => {
+    if (!value) return true;
+    // Pola: Harus dimulai dengan '08', diikuti 7 hingga 13 digit angka
+    return /^08[0-9]{7,13}$/.test(value) || 'Format nomor telepon tidak valid (Contoh: 08xxxxxxxx).';
+};
+
+// Phone number input state
+const newPhoneNumber = ref('');
+const phoneError = ref<string | boolean>(true);
+
+// Initialize nomorTelepon as array if not already
+if (!Array.isArray(formData.value.nomorTelepon)) {
+    formData.value.nomorTelepon = [];
+}
+
+// Handle only numeric input and validate
+const handlePhoneInput = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const value = input.value;
+
+    // Only allow numbers
+    const numericValue = value.replace(/\D/g, '');
+    newPhoneNumber.value = numericValue;
+
+    // Validate format and length
+    const lengthValidation = phoneLength(numericValue);
+    const formatValidation = indonesianPhoneFormat(numericValue);
+
+    if (lengthValidation !== true) {
+        phoneError.value = lengthValidation;
+    } else if (formatValidation !== true) {
+        phoneError.value = formatValidation;
+    } else {
+        phoneError.value = true;
+    }
+};
+
+const addPhoneNumber = () => {
+    if (!newPhoneNumber.value.trim()) return;
+
+    // Validate before saving
+    const lengthValidation = phoneLength(newPhoneNumber.value);
+    const formatValidation = indonesianPhoneFormat(newPhoneNumber.value);
+
+    if (lengthValidation !== true || formatValidation !== true) {
+        return;
+    }
+
+    // Add to list
+    formData.value.nomorTelepon.push(newPhoneNumber.value);
+
+    // Reset input
+    newPhoneNumber.value = '';
+    phoneError.value = true;
+};
+
+const deletePhoneNumber = (index: number) => {
+    formData.value.nomorTelepon.splice(index, 1);
+};
+
+// Ref for no rekam medis input
+const noRekamMedisInput = ref();
+
+// Expose method to focus on no rekam medis
+const focusNoRekamMedis = () => {
+    if (noRekamMedisInput.value) {
+        noRekamMedisInput.value.focus();
+    }
+};
+
+defineExpose({
+    focusNoRekamMedis
+});
+</script>
+
+<template>
+    <v-card elevation="0">
+        <v-card-text class="pa-2">
+            <div class="d-flex align-center">
+                <Icon icon="solar:user-bold-duotone" height="20" class="mr-2 text-primary" />
+                <span class="text-h5">Biodata Pasien</span>
+            </div>
+        </v-card-text>
+        <v-card-text class="pt-4">
+            <v-row>
+                <!-- No Rekam Medis -->
+                <v-col cols="12" md="12" class="">
+                    <v-label class="mb-2">No Rekam Medis <span class="text-error">*</span></v-label>
+                    <v-autocomplete ref="noRekamMedisInput" v-model="formData.noRekamMedis" :items="patientItems"
+                        item-title="select" item-value="nomr" placeholder="Masukan Nomor RM / Nama Pasien"
+                        variant="outlined" density="compact" :rules="[rules.required]" hide-details="auto" max="8"
+                        :readonly="readonly" :disabled="readonly" :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                        :loading="loadingPatients" no-filter clearable @update:search="handleSearchInput"
+                        @update:model-value="(value: string) => {
+                            const patient = patientItems.find(p => p.nomr === value);
+                            handlePatientSelect(patient || null);
+                        }">
+                        <template #no-data>
+                            <v-list-item>
+                                <v-list-item-title>
+                                    Cari No RM atau Nama Pasien
+                                </v-list-item-title>
+                            </v-list-item>
+                        </template>
+                    </v-autocomplete>
+                </v-col>
+
+                <template v-if="formData.noRekamMedis && selectedPatient">
+                    <v-col cols="12">
+                        <v-card  class="pa-4 bg-light" elevation="0">
+                            <!-- Name and NIK -->
+                            <v-row dense class="mb-4">
+                                <v-col cols="12" sm="12">
+                                <div class="text-caption text-medium-emphasis mb-1">Nama Pasien</div>
+                                <div class="text-body-1 font-weight-bold">{{ selectedPatient.nama }}</div>
+                                </v-col>
+                            </v-row>
+
+                            <!-- Jenis Kelamin -->
+                            <v-row dense class="mb-4">
+                                <v-col cols="12" sm="6">
+                                <div class="text-caption text-medium-emphasis mb-1">NIK</div>
+                                <div class="text-body-1">{{ selectedPatient.nik || '-' }}</div>
+                                </v-col>
+                                <v-col cols="12" sm="6">
+                                    <div class="text-caption text-medium-emphasis mb-1">Tanggal Lahir</div>
+                                    <div class="text-body-1">{{ formatDate(selectedPatient.tgllahir) || '-' }}</div>
+                                </v-col>
+                            </v-row>
+
+                            <!-- Address -->
+                            <div>
+                                <div class="text-caption text-medium-emphasis mb-1">Alamat</div>
+                                <div class="text-body-1">{{ selectedPatient.alamat || '-' }}</div>
+                            </div>
+                        </v-card>
+                    </v-col>
+                </template>
+                 <!-- Nomor Telepon -->
+                    <v-col cols="12">
+                        <v-label class="mb-2 font-weight-medium">Nomor Telepon</v-label>
+
+                        <!-- Input field for adding phone number -->
+                        <div v-if="!readonly" class="mb-3">
+                            <div class="d-flex gap-2">
+                                <v-text-field v-model="newPhoneNumber" placeholder="Contoh: 08123456789"
+                                    variant="outlined" density="compact" type="tel" hide-details="auto"
+                                    @input="handlePhoneInput" @keyup.enter="addPhoneNumber"
+                                    :error-messages="phoneError !== true && newPhoneNumber ? [phoneError as string] : []"
+                                    class="flex-1-1">
+                                </v-text-field>
+                                <v-btn color="primary" variant="outlined" size="large" @click="addPhoneNumber"
+                                    :disabled="!newPhoneNumber.trim() || phoneError !== true">
+                                    <v-icon>mdi-check</v-icon>
+                                </v-btn>
+                            </div>
+                            <div class="text-caption text-medium-emphasis mt-2">
+                                Format: 08xxxxxxxxx (9-15 digit)
+                            </div>
+                        </div>
+
+                        <!-- Alert when no phone numbers -->
+                        <v-alert v-if="formData.nomorTelepon.length === 0" type="info" variant="tonal" class="mb-3"
+                            density="compact">
+                            <div class="d-flex align-center">
+                                <span>Tidak ada nomor telepon</span>
+                            </div>
+                        </v-alert>
+
+                        <!-- List of phone numbers -->
+                        <v-list v-if="formData.nomorTelepon.length > 0" density="compact">
+                            <v-list-item v-for="(phone, index) in formData.nomorTelepon" :key="index" class="px-4 mb-2 border">
+                                <template #default>
+                                    <div class="d-flex align-center justify-space-between w-100">
+                                        <span>{{ phone }}</span>
+                                        <v-btn v-if="!readonly" icon size="small" variant="text" color="error"
+                                            @click="deletePhoneNumber(index)">
+                                            <v-icon>mdi-delete</v-icon>
+                                        </v-btn>
+                                    </div>
+                                </template>
+                            </v-list-item>
+                        </v-list>
+                    </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/components/pendaftaran/CardAntrianList.vue b/components/pendaftaran/CardAntrianList.vue
new file mode 100644
index 0000000..8e51aa3
--- /dev/null
+++ b/components/pendaftaran/CardAntrianList.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import type { AntreanOperasi } from '~/types/antrean';
+import { STATUS, statusLabels } from '~/types/antrean';
+
+interface Props {
+    items: any[];
+    loading?: boolean;
+    hasMore?: boolean;
+    totalItems?: number;
+    getActions?: (item: any) => Array<{ icon: string; color: string; tooltip: string; event: string }>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    loading: false,
+    hasMore: false,
+    totalItems: 0,
+    getActions: () => []
+});
+
+const emit = defineEmits<{
+    (e: 'view', item: any): void;
+    (e: 'edit', item: any): void;
+    (e: 'updateStatus', item: any): void;
+    (e: 'delete', item: any): void;
+    (e: 'loadMore'): void;
+}>();
+
+const scrollContainer = ref<HTMLElement | null>(null);
+const isLoadingMore = ref(false);
+
+// Status color mapping
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case STATUS.BELUM:
+            return 'primary';
+        case STATUS.SELESAI:
+            return 'success';
+        case STATUS.TUNDA:
+            return 'warning';
+        case STATUS.BATAL:
+            return 'error';
+        default:
+            return 'grey';
+    }
+};
+
+// Status icon mapping
+const getStatusIcon = (status: string) => {
+    switch (status) {
+        case STATUS.BELUM:
+            return 'solar:hourglass-line-outline';
+        case STATUS.SELESAI:
+            return 'solar:check-circle-bold';
+        case STATUS.TUNDA:
+            return 'solar:pause-circle-bold';
+        case STATUS.BATAL:
+            return 'solar:close-circle-bold';
+        default:
+            return 'solar:question-circle-bold';
+    }
+};
+
+// Gender icon and color
+const getGenderIcon = (gender: string) => {
+    return gender === 'L' ? 'mdi-gender-male' : 'mdi-gender-female';
+};
+
+const getGenderColor = (gender: string) => {
+    return gender === 'L' ? 'text-info' : 'text-error';
+};
+
+const getGenderText = (gender: string) => {
+    return gender === 'L' ? 'Laki-laki' : 'Perempuan';
+};
+
+// 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'
+    });
+};
+
+// Handle action click
+const handleActionClick = (action: string, item: any) => {
+    emit(action as any, item);
+};
+
+// Infinite scroll implementation
+const handleScroll = () => {
+    if (!scrollContainer.value || props.loading || isLoadingMore.value || !props.hasMore) return;
+
+    const element = scrollContainer.value;
+    const scrollPosition = element.scrollTop + element.clientHeight;
+    const scrollHeight = element.scrollHeight;
+
+    // Load more when 200px from bottom
+    if (scrollHeight - scrollPosition < 200) {
+        isLoadingMore.value = true;
+        emit('loadMore');
+        // Reset loading state after a short delay
+        setTimeout(() => {
+            isLoadingMore.value = false;
+        }, 500);
+    }
+};
+
+onMounted(() => {
+    if (scrollContainer.value) {
+        scrollContainer.value.addEventListener('scroll', handleScroll);
+    }
+});
+
+onUnmounted(() => {
+    if (scrollContainer.value) {
+        scrollContainer.value.removeEventListener('scroll', handleScroll);
+    }
+});
+</script>
+
+<template>
+    <div ref="scrollContainer" class="card-list-container"
+        style="max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden;">
+        <!-- Loading state -->
+        <div v-if="loading && items.length === 0" class="d-flex justify-center align-center pa-8"
+            style="min-height: 400px;">
+            <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        </div>
+
+        <!-- Empty state -->
+        <div v-else-if="items.length === 0" class="text-center pa-8" style="min-height: 400px;">
+            <Icon icon="solar:document-text-outline" height="80" class="text-medium-emphasis mb-4" />
+            <h3 class="text-h6 text-medium-emphasis mb-2">Tidak ada data</h3>
+            <p class="text-body-2 text-medium-emphasis">Belum ada antrian operasi yang terdaftar</p>
+        </div>
+
+        <!-- Card list -->
+        <v-row v-else dense>
+            <v-col v-for="item in items" :key="item.id" cols="12" class="pa-1">
+                <v-card class="card-item" elevation="0" border style="transition: all 0.2s ease; cursor: pointer;"
+                    @mouseenter="$event.currentTarget.style.borderColor = '#1976D2'"
+                    @mouseleave="$event.currentTarget.style.borderColor = ''" @click="handleActionClick('view', item)">
+                    <!-- Header with queue numbers -->
+                    <!-- <div class="d-flex justify-space-between ga-2 pa-3 pb-0 ">
+                        <div class="d-flex ga-2">
+                            <v-chip size="x-small" color="primary" variant="outlined" label>
+                                No : {{ item.NoUrutKategori }}
+                            </v-chip>
+                            <v-chip size="x-small" color="primary" variant="outlined" label>
+                                Spesialis : {{ item.NoUrutSpesialis }}
+                            </v-chip>
+                            <v-chip size="x-small" color="primary" variant="outlined" label>
+                                SubSpesialis : {{ item.NoUrutSubSpesialis }}
+                            </v-chip>
+                        </div>
+
+                        <v-chip :color="getStatusColor(item.StatusOperasi)" size="small" variant="flat"
+                            class="font-weight-medium">
+                            {{ statusLabels[item.StatusOperasi as keyof typeof statusLabels] }}
+                        </v-chip>
+                    </div> -->
+
+                    <v-card-text class="pa-6">
+                        <div class="d-flex ga-4" style="position: relative;">
+                            <!-- Gender Avatar -->
+                            <!-- <v-tooltip location="top">
+                                <template #activator="{ props }">
+                                    <v-avatar v-bind="props" :color="getGenderColor(item.JenisKelamin)" size="80"
+                                        class="elevation-2">
+                                        <span class="text-h4 font-weight-bold">
+                                            {{ item.JenisKelamin == 'L' ? 'L' : 'P' }}
+                                        </span>
+                                    </v-avatar>
+                                </template>
+{{ getGenderText(item.JenisKelamin) }}
+</v-tooltip> -->
+
+                            <!-- Patient Info Section -->
+                            <div class="flex-grow-1">
+                                <div class="d-flex justify-space-between">
+                                    <h3 class="text-h6 font-weight-bold mb-3">{{ item.NamaPasien }}
+                                        <Icon class="ml-1" :icon="getGenderIcon(item.JenisKelamin)"
+                                            :class="getGenderColor(item.JenisKelamin)" height="14" />
+                                    </h3>
+                                    <v-chip :color="getStatusColor(item.StatusOperasi)" size="small" variant="flat"
+                                        class="font-weight-medium">
+                                        {{ statusLabels[item.StatusOperasi as keyof typeof statusLabels] }}
+                                    </v-chip>
+                                </div>
+                                <div class="d-flex ga-2 mb-4">
+                                    <v-chip size="small" color="primary" variant="outlined" label class="font-weight-medium">
+                                        No : {{ item.NoUrutKategori }}
+                                    </v-chip>
+                                    <v-chip size="small" color="primary" variant="outlined" label class="font-weight-medium">
+                                        No Spesialis : {{ item.NoUrutSpesialis }}
+                                    </v-chip>
+                                    <v-chip size="small" color="primary" variant="outlined" label class="font-weight-medium">
+                                        No SubSpesialis : {{ item.NoUrutSubSpesialis }}
+                                    </v-chip>
+                                </div>
+                                 <!-- Medical Details Grid -->
+                                <v-row dense class="mt-2">
+                                    <v-col cols="4">
+                                        <div class="d-flex align-center mb-2">
+                                            <Icon icon="solar:card-bold" height="16" class="mr-2 text-primary" />
+                                            <span class="text-body-1">{{ item.NoRekamMedis || '-' }}</span>
+                                        </div>
+                                        <div class="d-flex align-center mb-2">
+                                            <Icon icon="solar:calendar-bold" height="16" class="mr-2 text-primary" />
+                                            <span class="text-body-1">{{ formatDate(item.TglDaftar) }}</span>
+                                        </div>
+                                    </v-col>
+
+                                    <v-col cols="4">
+                                        <div class="d-flex align-center mb-2">
+                                            <Icon icon="solar:clipboard-list-bold" height="16" class="mr-2 text-primary" />
+                                            <span class="text-body-1">{{ item.Kategori.split('-')[1]?.trim() || item.Kategori }}</span>
+                                        </div>
+                                        <div class="d-flex align-center mb-2">
+                                            <Icon icon="solar:users-group-rounded-bold" height="16" class="mr-2 text-primary" />
+                                            <span class="text-body-1">{{ item.Spesialis.toUpperCase() }} - {{ item.SubSpesialis.toUpperCase() }}</span>
+                                        </div>
+                                    </v-col>
+                                    <v-col cols="4"   class="d-flex justify-end align-end">
+                                        <v-btn-group density="compact" variant="outlined">
+                                                <template v-for="action in getActions(item)" :key="action.event">
+                                                    <v-btn v-bind="props" :color="action.color"
+                                                        :prepend-icon="action.icon" size="small" variant="tonal"
+                                                        @click.stop="handleActionClick(action.event, item)">
+                                                        {{ action.tooltip }}
+                                                    </v-btn>
+                                                </template>
+                                        </v-btn-group>
+                                    </v-col>
+                                </v-row>
+                            </div>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <!-- Load more indicator -->
+        <div v-if="(isLoadingMore || loading) && items.length > 0" class="d-flex justify-center pa-4">
+            <v-progress-circular indeterminate color="primary" size="40"></v-progress-circular>
+        </div>
+
+        <!-- End of list indicator -->
+        <div v-if="!hasMore && items.length > 0" class="text-center pa-4">
+            <p class="text-body-2 text-medium-emphasis">
+                <Icon icon="solar:check-circle-bold" height="16" class="mr-1" />
+                Semua data telah dimuat ({{ items.length }} dari {{ totalItems || items.length }})
+            </p>
+        </div>
+
+        <!-- Items count indicator -->
+        <div v-if="hasMore && items.length > 0 && !loading" class="text-center pa-4">
+            <p class="text-caption text-medium-emphasis">
+                Menampilkan {{ items.length }} dari {{ totalItems || items.length }} data
+            </p>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/pendaftaran/CardAntrianListV2.vue b/components/pendaftaran/CardAntrianListV2.vue
new file mode 100644
index 0000000..8a8c8f8
--- /dev/null
+++ b/components/pendaftaran/CardAntrianListV2.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import type { AntreanOperasi } from '~/types/antrean';
+import { STATUS, statusLabels } from '~/types/antrean';
+
+interface Props {
+    items: any[];
+    loading?: boolean;
+    hasMore?: boolean;
+    totalItems?: number;
+    getActions?: (item: any) => Array<{ icon: string; color: string; tooltip: string; event: string }>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    loading: false,
+    hasMore: false,
+    totalItems: 0,
+    getActions: () => []
+});
+
+const emit = defineEmits<{
+    (e: 'view', item: any): void;
+    (e: 'edit', item: any): void;
+    (e: 'updateStatus', item: any): void;
+    (e: 'delete', item: any): void;
+    (e: 'loadMore'): void;
+}>();
+
+const scrollContainer = ref<HTMLElement | null>(null);
+const isLoadingMore = ref(false);
+
+// Status color mapping
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case STATUS.BELUM:
+            return 'primary';
+        case STATUS.SELESAI:
+            return 'success';
+        case STATUS.TUNDA:
+            return 'warning';
+        case STATUS.BATAL:
+            return 'error';
+        default:
+            return 'grey';
+    }
+};
+
+// Status icon mapping
+const getStatusIcon = (status: string) => {
+    switch (status) {
+        case STATUS.BELUM:
+            return 'solar:hourglass-line-outline';
+        case STATUS.SELESAI:
+            return 'solar:check-circle-bold';
+        case STATUS.TUNDA:
+            return 'solar:pause-circle-bold';
+        case STATUS.BATAL:
+            return 'solar:close-circle-bold';
+        default:
+            return 'solar:question-circle-bold';
+    }
+};
+
+// Gender icon and color
+const getGenderIcon = (gender: string) => {
+    return gender === 'L' ? 'mdi-gender-male' : 'mdi-gender-female';
+};
+
+const getGenderColor = (gender: string) => {
+    return gender === 'L' ? 'text-info' : 'text-error';
+};
+
+const getGenderText = (gender: string) => {
+    return gender === 'L' ? 'Laki-laki' : 'Perempuan';
+};
+
+// 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'
+    });
+};
+
+// Handle action click
+const handleActionClick = (action: string, item: any) => {
+    emit(action as any, item);
+};
+
+// Infinite scroll implementation
+const handleScroll = () => {
+    if (!scrollContainer.value || props.loading || isLoadingMore.value || !props.hasMore) return;
+
+    const element = scrollContainer.value;
+    const scrollPosition = element.scrollTop + element.clientHeight;
+    const scrollHeight = element.scrollHeight;
+
+    // Load more when 200px from bottom
+    if (scrollHeight - scrollPosition < 200) {
+        isLoadingMore.value = true;
+        emit('loadMore');
+        // Reset loading state after a short delay
+        setTimeout(() => {
+            isLoadingMore.value = false;
+        }, 500);
+    }
+};
+
+onMounted(() => {
+    if (scrollContainer.value) {
+        scrollContainer.value.addEventListener('scroll', handleScroll);
+    }
+});
+
+onUnmounted(() => {
+    if (scrollContainer.value) {
+        scrollContainer.value.removeEventListener('scroll', handleScroll);
+    }
+});
+</script>
+
+<template>
+    <div ref="scrollContainer" class="card-list-container"
+        style="max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden;">
+        <!-- Loading state -->
+        <div v-if="loading && items.length === 0" class="d-flex justify-center align-center pa-8"
+            style="min-height: 400px;">
+            <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        </div>
+
+        <!-- Empty state -->
+        <div v-else-if="items.length === 0" class="text-center pa-8" style="min-height: 400px;">
+            <Icon icon="solar:document-text-outline" height="80" class="text-medium-emphasis mb-4" />
+            <h3 class="text-h6 text-medium-emphasis mb-2">Tidak ada data</h3>
+            <p class="text-body-2 text-medium-emphasis">Belum ada antrian operasi yang terdaftar</p>
+        </div>
+
+        <!-- Card list -->
+        <v-row v-else dense>
+            <v-col v-for="item in items" :key="item.id" cols="12" class="pa-1">
+                <v-card class="card-item" elevation="0" border style="transition: all 0.2s ease;"
+                    @mouseenter="$event.currentTarget.style.borderColor = '#1976D2'"
+                    @mouseleave="$event.currentTarget.style.borderColor = ''" @click="handleActionClick('view', item)">
+
+                    <v-card-text class="pa-6">
+                        <v-row>
+                            <v-col cols="4">
+                                <h3 class="text-h6 font-weight-bold">
+                                    {{ item.NamaPasien }}
+                                    <Icon class="ml-1" :icon="getGenderIcon(item.JenisKelamin)"
+                                        :class="getGenderColor(item.JenisKelamin)" height="16" />
+                                </h3>
+                                <div class="d-flex ga-2 mt-2">
+                                    <v-chip size="small" color="primary" variant="outlined" label
+                                        class="font-weight-medium">
+                                        No : {{ item.NoUrutKategori }}
+                                    </v-chip>
+                                    <v-chip size="small" color="primary" variant="outlined" label
+                                        class="font-weight-medium">
+                                        Spesialis : {{ item.NoUrutSpesialis }}
+                                    </v-chip>
+                                    <v-chip size="small" color="primary" variant="outlined" label
+                                        class="font-weight-medium">
+                                        SubSpesialis : {{ item.NoUrutSubSpesialis }}
+                                    </v-chip>
+                                </div>
+                            </v-col>
+
+                            <v-col cols="4">
+                                <v-row dense class="mt-6">
+                                    <!-- Left Column -->
+                                    <v-col cols="6">
+                                        <div class="d-flex align-center mb-2">
+                                            <Icon icon="solar:card-bold" height="16" class="mr-2 text-primary" />
+                                            <span class="font-weight-medium">{{ item.NoRekamMedis || '-' }}</span>
+                                        </div>
+                                        <div class="d-flex align-center">
+                                            <Icon icon="solar:calendar-bold" height="16" class="mr-2 text-primary" />
+                                            <span class="font-weight-medium">{{ formatDate(item.TglDaftar) }}</span>
+                                        </div>
+                                    </v-col>
+
+                                    <!-- Right Column -->
+                                    <v-col cols="6">
+                                        <div class="d-flex align-center mb-2">
+                                            <Icon icon="solar:clipboard-list-bold" height="16" class="mr-2 text-primary" />
+                                            <span class="font-weight-medium">{{ item.Kategori.split('-')[1]?.trim() ||
+                                                item.Kategori }}</span>
+                                        </div>
+                                        <div class="d-flex align-center">
+                                            <Icon icon="solar:users-group-rounded-bold" height="16"
+                                                class="mr-2 text-primary" />
+                                            <span class="font-weight-medium">
+                                                {{ item.Spesialis.toUpperCase() }} <br>
+                                                {{item.SubSpesialis.toUpperCase() }}
+                                            </span>
+                                        </div>
+                                    </v-col>
+                                </v-row>
+                            </v-col>
+
+                            <v-col cols="4" class="d-flex flex-column justify-space-between">
+                                <!-- Status at top right -->
+                                <div class="d-flex justify-end">
+                                    <v-chip :color="getStatusColor(item.StatusOperasi)" size="small" variant="flat"
+                                        class="font-weight-medium" style="text-transform: uppercase;">
+                                        {{ statusLabels[item.StatusOperasi as keyof typeof statusLabels] }}
+                                    </v-chip>
+                                </div>
+
+                                <!-- Action buttons at bottom right -->
+                                <div class="d-flex justify-end mt-5">
+                                    <v-btn-group density="compact" variant="outlined">
+                                        <v-tooltip v-for="action in getActions(item)" :key="action.event" location="top">
+                                            <template #activator="{ props }">
+                                                <v-btn v-bind="props" :color="action.color" :prepend-icon="action.icon"
+                                                    size="small" variant="tonal"
+                                                    @click.stop="handleActionClick(action.event, item)">
+                                                    {{ action.tooltip }}
+                                                </v-btn>
+                                            </template>
+                                            {{ action.tooltip }}
+                                        </v-tooltip>
+                                    </v-btn-group>
+                                </div>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <!-- Load more indicator -->
+        <div v-if="(isLoadingMore || loading) && items.length > 0" class="d-flex justify-center pa-4">
+            <v-progress-circular indeterminate color="primary" size="40"></v-progress-circular>
+        </div>
+
+        <!-- End of list indicator -->
+        <div v-if="!hasMore && items.length > 0" class="text-center pa-4">
+            <p class="text-body-2 text-medium-emphasis">
+                <Icon icon="solar:check-circle-bold" height="16" class="mr-1" />
+                Semua data telah dimuat ({{ items.length }} dari {{ totalItems || items.length }})
+            </p>
+        </div>
+
+        <!-- Items count indicator -->
+        <div v-if="hasMore && items.length > 0 && !loading" class="text-center pa-4">
+            <p class="text-caption text-medium-emphasis">
+                Menampilkan {{ items.length }} dari {{ totalItems || items.length }} data
+            </p>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/pendaftaran/FilterSortMenu.vue b/components/pendaftaran/FilterSortMenu.vue
new file mode 100644
index 0000000..65cd18c
--- /dev/null
+++ b/components/pendaftaran/FilterSortMenu.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+interface FilterOption {
+    type: 'btn-group' | 'select';
+    label: string;
+    modelKey: string;
+    options: Array<{ label: string; value: any }>;
+    defaultValue?: any;
+    showAllOption?: boolean;
+}
+
+// Props
+interface Props {
+    filters: FilterOption[];
+    modelValue: Record<string, any>;
+}
+
+// Emits
+interface Emits {
+    (e: 'update:modelValue', value: Record<string, any>): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// Local state
+const showFilterMenu = ref(false);
+
+// Computed for two-way binding
+const localFilters = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+// Update individual filter value
+const updateFilter = (key: string, value: any) => {
+    emit('update:modelValue', { ...props.modelValue, [key]: value });
+};
+
+// Get default values from filters
+const getDefaultValues = () => {
+    const defaults: Record<string, any> = {};
+    props.filters.forEach(filter => {
+        defaults[filter.modelKey] = filter.defaultValue;
+    });
+    return defaults;
+};
+
+// Computed for active filter count
+const activeFilterCount = computed(() => {
+    let count = 0;
+    
+    props.filters.forEach(filter => {
+        const currentValue = props.modelValue[filter.modelKey];
+        const defaultValue = filter.defaultValue;
+        
+        // Skip if both are undefined or null
+        if ((currentValue === undefined || currentValue === null) && 
+            (defaultValue === undefined || defaultValue === null)) {
+            return;
+        }
+        
+        // Count as active if values are different
+        if (currentValue !== defaultValue) {
+            count++;
+        }
+    });
+    
+    return count;
+});
+
+// Reset to defaults
+const resetFilters = () => {
+    emit('update:modelValue', getDefaultValues());
+};
+</script>
+
+<template>
+    <v-menu v-model="showFilterMenu" :close-on-content-click="false" location="bottom">
+        <template v-slot:activator="{ props: menuProps }">
+            <v-btn 
+                v-bind="menuProps"
+                variant="outlined" 
+                color="primary"
+                prepend-icon="mdi-filter-variant"
+            >
+                Filter & Sort
+                <v-badge 
+                    v-if="activeFilterCount > 0"
+                    color="primary" 
+                    :content="activeFilterCount"
+                    floating
+                    offset-x="-8"
+                    offset-y="-10"
+                ></v-badge>
+            </v-btn>
+        </template>
+
+        <v-card min-width="400">
+            <v-card-text>
+                <div 
+                    v-for="(filter, index) in filters" 
+                    :key="filter.modelKey"
+                    :class="{ 'mb-4': index < filters.length - 1 }"
+                >
+                    <div class="text-subtitle-2 font-weight-bold mb-2">{{ filter.label }}</div>
+                    
+                    <!-- Button Group Type -->
+                    <v-btn-group 
+                        v-if="filter.type === 'btn-group'"
+                        divided 
+                        density="compact" 
+                        variant="outlined" 
+                        class="w-100"
+                    >
+                        <v-btn 
+                            v-for="(option, optIndex) in filter.options" 
+                            :key="option.value || `option-${optIndex}`"
+                            :color="localFilters[filter.modelKey] === option.value ? 'primary' : 'default'"
+                            :variant="localFilters[filter.modelKey] === option.value ? 'flat' : 'outlined'"
+                            @click="updateFilter(filter.modelKey, option.value)"
+                            size="small"
+                            class="flex-grow-1"
+                        >
+                            {{ option.label }}
+                        </v-btn>
+                    </v-btn-group>
+
+                    <!-- Select Type -->
+                    <v-select 
+                        v-else-if="filter.type === 'select'"
+                        :model-value="localFilters[filter.modelKey]"
+                        @update:model-value="updateFilter(filter.modelKey, $event)"
+                        :items="filter.options"
+                        item-title="label" 
+                        item-value="value" 
+                        variant="outlined" 
+                        density="compact" 
+                        hide-details
+                        bg-color="white"
+                    ></v-select>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-menu>
+</template>
diff --git a/components/pendaftaran/MedisPasienV2.vue b/components/pendaftaran/MedisPasienV2.vue
new file mode 100644
index 0000000..ec5400e
--- /dev/null
+++ b/components/pendaftaran/MedisPasienV2.vue
@@ -0,0 +1,587 @@
+<script setup lang="ts">
+import  api  from '@/services/api';
+import type { Props } from '~/types/common';
+import type { DiagnosisItem, TindakanItem, DiagnosisApiData, TindakanApiData } from '~/types/pendaftaran';
+import { Icon } from '@iconify/vue';
+
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false
+});
+
+const diagnosisItems = defineModel<DiagnosisItem[]>('diagnosisItems', { required: true });
+const tindakanItems = defineModel<TindakanItem[]>('tindakanItems', { required: true });
+
+// Form state for diagnosis
+const diagnosisForm = ref<DiagnosisItem>({
+    kodeDiagnosa: '',
+    diagnosa: '',
+    jenisDiagnosa: 'utama'
+});
+const editingDiagnosisIndex = ref<number | null>(null);
+const diagnosisFormExpanded = ref(false);
+const diagnosisList = ref<DiagnosisApiData[]>([]);
+const loadingDiagnosis = ref(false);
+const diagnosisSearchTimeout = ref<NodeJS.Timeout | null>(null);
+const diagnosisSearchPerformed = ref(false);
+
+// Search diagnosis from API
+const searchDiagnosis = async (search: string) => {
+    if (!search || search.length < 3) {
+        diagnosisList.value = [];
+        diagnosisSearchPerformed.value = false;
+        return;
+    }
+
+    loadingDiagnosis.value = true;
+    diagnosisSearchPerformed.value = false;
+    
+    try {
+        const response = await api.get('/reference/diagnosa', {
+            params: {
+                limit: 100,
+                search: search
+            }
+        });
+
+        if (response.data?.data) {
+            diagnosisList.value = response.data.data;
+            diagnosisSearchPerformed.value = true;
+        }
+    } catch (error) {
+        console.error('Error fetching diagnosis:', error);
+        diagnosisList.value = [];
+        diagnosisSearchPerformed.value = true;
+    } finally {
+        loadingDiagnosis.value = false;
+    }
+};
+
+// Handle diagnosis search input with debounce
+const handleDiagnosisSearchInput = (value: string) => {
+    if (diagnosisSearchTimeout.value) {
+        clearTimeout(diagnosisSearchTimeout.value);
+    }
+
+    diagnosisSearchTimeout.value = setTimeout(() => {
+        searchDiagnosis(value);
+    }, 500);
+};
+
+// Autocomplete options for diagnosis
+const diagnosisOptions = computed(() => {
+    return diagnosisList.value.map(d => ({
+        title: d.select,
+        value: d.kodeicd,
+        diagnosa: d.keterangan
+    }));
+});
+
+// Form state for tindakan
+const tindakanForm = ref<TindakanItem>({
+    kodeTindakan: '',
+    tindakan: '',
+    tindakanTambahan: ''
+});
+const editingTindakanIndex = ref<number | null>(null);
+const tindakanFormExpanded = ref(false);
+const tindakanList = ref<TindakanApiData[]>([]);
+const loadingTindakan = ref(false);
+const tindakanSearchTimeout = ref<NodeJS.Timeout | null>(null);
+const tindakanSearchPerformed = ref(false);
+
+// Search tindakan from API
+const searchTindakan = async (search: string) => {
+    if (!search || search.length < 3) {
+        tindakanList.value = [];
+        tindakanSearchPerformed.value = false;
+        return;
+    }
+
+    loadingTindakan.value = true;
+    tindakanSearchPerformed.value = false;
+    
+    try {
+        const response = await api.get('/reference/tindakan', {
+            params: {
+                limit: 100,
+                search: search
+            }
+        });
+
+        if (response.data?.data) {
+            tindakanList.value = response.data.data;
+            tindakanSearchPerformed.value = true;
+        }
+    } catch (error) {
+        console.error('Error fetching tindakan:', error);
+        tindakanList.value = [];
+        tindakanSearchPerformed.value = true;
+    } finally {
+        loadingTindakan.value = false;
+    }
+};
+
+// Handle tindakan search input with debounce
+const handleTindakanSearchInput = (value: string) => {
+    if (tindakanSearchTimeout.value) {
+        clearTimeout(tindakanSearchTimeout.value);
+    }
+
+    tindakanSearchTimeout.value = setTimeout(() => {
+        searchTindakan(value);
+    }, 500);
+};
+
+// Autocomplete options for tindakan
+const tindakanOptions = computed(() => {
+    return tindakanList.value.map(t => ({
+        title: t.select,
+        value: t.kode,
+        tindakan: t.keterangan
+    }));
+});
+
+// Initialize arrays if not already
+if (!Array.isArray(diagnosisItems.value)) {
+    diagnosisItems.value = [];
+}
+if (!Array.isArray(tindakanItems.value)) {
+    tindakanItems.value = [];
+}
+
+const resetDiagnosisForm = () => {
+    diagnosisForm.value = {
+        kodeDiagnosa: '',
+        diagnosa: '',
+        jenisDiagnosa: 'utama'
+    };
+    editingDiagnosisIndex.value = null;
+};
+
+const openDiagnosisModal = () => {
+    diagnosisFormExpanded.value = true;
+    resetDiagnosisForm();
+};
+
+const editDiagnosis = (index: number) => {
+    diagnosisForm.value = { ...diagnosisItems.value[index] };
+    editingDiagnosisIndex.value = index;
+};
+
+const saveDiagnosis = () => {
+    if (!diagnosisForm.value.kodeDiagnosa.trim() || !diagnosisForm.value.diagnosa.trim()) return;
+    
+    if (editingDiagnosisIndex.value !== null) {
+        diagnosisItems.value[editingDiagnosisIndex.value] = { ...diagnosisForm.value };
+    } else {
+        diagnosisItems.value.push({ ...diagnosisForm.value });
+    }
+    
+    resetDiagnosisForm();
+    diagnosisFormExpanded.value = false;
+};
+
+const cancelEditDiagnosis = () => {
+    resetDiagnosisForm();
+    diagnosisFormExpanded.value = false;
+};
+
+const deleteDiagnosis = (index: number) => {
+    diagnosisItems.value.splice(index, 1);
+};
+
+// Auto-fill diagnosis when code is selected
+const handleKodeDiagnosaChange = (kode: string) => {
+    const found = diagnosisList.value.find(d => d.kodeicd === kode);
+    if (found) {
+        diagnosisForm.value.diagnosa = found.keterangan;
+    }
+};
+
+const resetTindakanForm = () => {
+    tindakanForm.value = {
+        kodeTindakan: '',
+        tindakan: '',
+        tindakanTambahan: ''
+    };
+    editingTindakanIndex.value = null;
+};
+
+const openTindakanModal = () => {
+    tindakanFormExpanded.value = true;
+    resetTindakanForm();
+};
+
+const editTindakan = (index: number) => {
+    tindakanForm.value = { ...tindakanItems.value[index] };
+    editingTindakanIndex.value = index;
+};
+
+const saveTindakan = () => {
+    if (!tindakanForm.value.kodeTindakan.trim() || !tindakanForm.value.tindakan.trim()) return;
+    
+    if (editingTindakanIndex.value !== null) {
+        tindakanItems.value[editingTindakanIndex.value] = { ...tindakanForm.value };
+    } else {
+        tindakanItems.value.push({ ...tindakanForm.value });
+    }
+    
+    resetTindakanForm();
+    tindakanFormExpanded.value = false;
+};
+
+const cancelEditTindakan = () => {
+    resetTindakanForm();
+    tindakanFormExpanded.value = false;
+};
+
+const deleteTindakan = (index: number) => {
+    tindakanItems.value.splice(index, 1);
+};
+
+// Auto-fill tindakan when code is selected
+const handleKodeTindakanChange = (kode: string) => {
+    const found = tindakanList.value.find(t => t.kode === kode);
+    if (found) {
+        tindakanForm.value.tindakan = found.keterangan;
+    }
+};
+
+// Refs for focus functionality
+const diagnosisSection = ref();
+const tindakanSection = ref();
+const diagnosisInput = ref();
+const tindakanInput = ref();
+
+// Expose methods to focus on fields
+const focusDiagnosis = () => {
+    if (diagnosisSection.value) {
+        diagnosisSection.value.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        setTimeout(() => {
+            if (diagnosisInput.value) {
+                diagnosisInput.value.focus();
+            }
+        }, 300);
+    }
+};
+
+const focusTindakan = () => {
+    if (tindakanSection.value) {
+        tindakanSection.value.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        setTimeout(() => {
+            if (tindakanInput.value) {
+                tindakanInput.value.focus();
+            }
+        }, 300);
+    }
+};
+
+defineExpose({
+    focusDiagnosis,
+    focusTindakan
+});
+</script>
+
+<template>
+    <v-divider> </v-divider>
+    <v-card elevation="0" class="mt-4 mb-0">
+        <v-card-text class="pa-2">
+            <div class="d-flex align-center justify-space-between">
+                <div class="d-flex align-center">
+                    <Icon icon="solar:health-bold-duotone" height="20" class="mr-2 text-primary" />
+                    <span class="text-h5">Diagnosa</span>
+                </div>
+                <v-btn
+                    v-if="!readonly"
+                    color="primary"
+                    variant="text"
+                    @click="openDiagnosisModal"
+                >
+                    <Icon icon="mdi-plus-circle" height="18" class="mr-1" />
+                    Tambah Diagnosa
+                </v-btn>
+            </div>
+        </v-card-text>
+        <v-card-text class="pt-2">
+            <!-- Diagnosa -->
+            <div ref="diagnosisSection">
+                <v-table>
+                    <thead>
+                        <tr>
+                            <th style="width: 200px;">Jenis Diagnosa</th>
+                            <th style="width: 300px;">Kode Diagnosa</th>
+                            <th>Diagnosa</th>
+                            <th style="width: 130px;" class="text-center">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Empty State -->
+                        <tr v-if="diagnosisItems.length === 0 && !diagnosisFormExpanded">
+                            <td colspan="4" class="text-center pa-8">
+                                <div class="text-medium-emphasis">
+                                    <Icon icon="solar:medical-kit-outline" height="48" class="mb-2" />
+                                    <p class="text-body-2">Tidak ada data diagnosa</p>
+                                </div>
+                            </td>
+                        </tr>
+                        
+                        <!-- Data Rows -->
+                        <tr v-for="(item, index) in diagnosisItems" :key="index">
+                            <td>
+                                <v-chip
+                                    :color="item.jenisDiagnosa === 'utama' ? 'primary' : 'secondary'"
+                                    variant="flat"
+                                    size="small"
+                                >
+                                    {{ item.jenisDiagnosa }}
+                                </v-chip>
+                            </td>
+                            <td>{{ item.kodeDiagnosa }}</td>
+                            <td>{{ item.diagnosa }}</td>
+                            <td class="text-center">
+                                <v-btn
+                                    v-if="!readonly"
+                                    icon
+                                    size="small"
+                                    variant="text"
+                                    color="error"
+                                    @click="deleteDiagnosis(index)"
+                                >
+                                    <Icon icon="mdi-delete-outline" height="20" />
+                                </v-btn>
+                            </td>
+                        </tr>
+                        
+                        <!-- Form Input Row -->
+                        <tr v-if="!readonly && diagnosisFormExpanded" class="bg-blue-lighten-5">
+                            <td>
+                                <v-btn-group density="compact">
+                                    <v-btn
+                                        :color="diagnosisForm.jenisDiagnosa === 'utama' ? 'primary' : 'default'"
+                                        :variant="diagnosisForm.jenisDiagnosa === 'utama' ? 'flat' : 'outlined'"
+                                        size="small"
+                                        class="text-none"
+                                        @click="diagnosisForm.jenisDiagnosa = 'utama'"
+                                        :prepend-icon="diagnosisForm.jenisDiagnosa === 'utama' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank'"
+                                    >
+                                        utama
+                                    </v-btn>
+                                    <v-btn
+                                        :color="diagnosisForm.jenisDiagnosa === 'tambahan' ? 'primary' : 'default'"
+                                        :variant="diagnosisForm.jenisDiagnosa === 'tambahan' ? 'flat' : 'outlined'"
+                                        size="small"
+                                        class="text-none"
+                                        @click="diagnosisForm.jenisDiagnosa = 'tambahan'"
+                                        :prepend-icon="diagnosisForm.jenisDiagnosa === 'tambahan' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank'"
+                                    >
+                                        tambahan
+                                    </v-btn>
+                                </v-btn-group>
+                            </td>
+                            <td>
+                                <v-autocomplete
+                                    ref="diagnosisInput"
+                                    v-model="diagnosisForm.kodeDiagnosa"
+                                    :items="diagnosisOptions"
+                                    placeholder="Search..."
+                                    variant="outlined"
+                                    density="compact"
+                                    hide-details
+                                    :loading="loadingDiagnosis"
+                                    no-filter
+                                    clearable
+                                    @update:search="handleDiagnosisSearchInput"
+                                    @update:model-value="handleKodeDiagnosaChange"
+                                >
+                                    <template #append-inner>
+                                        <Icon icon="mdi-magnify" height="18" />
+                                    </template>
+                                    <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>
+                            </td>
+                            <td>
+                                <v-text-field
+                                    v-model="diagnosisForm.diagnosa"
+                                    variant="outlined"
+                                    density="compact"
+                                    readonly
+                                    bg-color="grey-lighten-3"
+                                    hide-details
+                                    placeholder="Diagnosa akan muncul setelah memilih kode"
+                                ></v-text-field>
+                            </td>
+                            <td class="text-center">
+                                <v-btn
+                                    icon
+                                    size="small"
+                                    variant="text"
+                                    color="grey"
+                                    @click="cancelEditDiagnosis"
+                                >
+                                    <Icon icon="mdi-close" height="20" />
+                                </v-btn>
+                                <v-btn
+                                    icon
+                                    size="small"
+                                    variant="text"
+                                    color="success"
+                                    @click="saveDiagnosis"
+                                    :disabled="!diagnosisForm.kodeDiagnosa || !diagnosisForm.diagnosa"
+                                >
+                                    <Icon icon="mdi-check" height="20" />
+                                </v-btn>
+                            </td>
+                        </tr>
+                    </tbody>
+                </v-table>
+            </div>
+        </v-card-text>
+    </v-card>
+     <v-divider> </v-divider>
+    <v-card elevation="0" class="mt-4 mb-0">
+        <v-card-text class="pa-2">
+            <div class="d-flex align-center justify-space-between">
+                <div class="d-flex align-center">
+                    <Icon icon="solar:medical-kit-bold-duotone" height="20" class="mr-2 text-primary" />
+                    <span class="text-h5">Tindakan</span>
+                </div>
+                <v-btn
+                    v-if="!readonly"
+                    color="primary"
+                    variant="text"
+                    @click="openTindakanModal"
+                >
+                    <Icon icon="mdi-plus-circle" height="18" class="mr-1" />
+                    Tambah Tindakan
+                </v-btn>
+            </div>
+        </v-card-text>
+        <v-card-text class="pt-2">
+            <!-- Tindakan -->
+            <div ref="tindakanSection">
+                <v-table>
+                    <thead>
+                        <tr>
+                            <th style="width: 300px;">Kode Tindakan</th>
+                            <th>Tindakan</th>
+                            <th style="width: 350px;">Tindakan Tambahan</th>
+                            <th style="width: 130px;" class="text-center">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Empty State -->
+                        <tr v-if="tindakanItems.length === 0 && !tindakanFormExpanded">
+                            <td colspan="4" class="text-center pa-8">
+                                <div class="text-medium-emphasis">
+                                    <Icon icon="solar:medical-kit-outline" height="48" class="mb-2" />
+                                    <p class="text-body-2">Tidak ada data tindakan</p>
+                                </div>
+                            </td>
+                        </tr>
+                        
+                        <!-- Data Rows -->
+                        <tr v-for="(item, index) in tindakanItems" :key="index">
+                            <td>{{ item.kodeTindakan }}</td>
+                            <td>{{ item.tindakan }}</td>
+                            <td>
+                                <span class="text-body-2 text-medium-emphasis">{{ item.tindakanTambahan || '-' }}</span>
+                            </td>
+                            <td class="text-center">
+                                <v-btn
+                                    v-if="!readonly"
+                                    icon
+                                    size="small"
+                                    variant="text"
+                                    color="error"
+                                    @click="deleteTindakan(index)"
+                                >
+                                    <Icon icon="mdi-delete-outline" height="20" />
+                                </v-btn>
+                            </td>
+                        </tr>
+                        
+                        <!-- Form Input Row -->
+                        <tr v-if="!readonly && tindakanFormExpanded" class="bg-purple-lighten-5">
+                            <td>
+                                <v-autocomplete
+                                    ref="tindakanInput"
+                                    v-model="tindakanForm.kodeTindakan"
+                                    :items="tindakanOptions"
+                                    placeholder="Search..."
+                                    variant="outlined"
+                                    density="compact"
+                                    hide-details
+                                    :loading="loadingTindakan"
+                                    no-filter
+                                    clearable
+                                    @update:search="handleTindakanSearchInput"
+                                    @update:model-value="handleKodeTindakanChange"
+                                >
+                                    <template #append-inner>
+                                        <Icon icon="mdi-magnify" height="18" />
+                                    </template>
+                                    <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>
+                            </td>
+                            <td>
+                                <v-text-field
+                                    v-model="tindakanForm.tindakan"
+                                    variant="outlined"
+                                    density="compact"
+                                    readonly
+                                    bg-color="grey-lighten-3"
+                                    hide-details
+                                    placeholder="Tindakan akan muncul setelah memilih kode"
+                                ></v-text-field>
+                            </td>
+                            <td>
+                                <v-text-field
+                                    v-model="tindakanForm.tindakanTambahan"
+                                    placeholder="Tindakan Tambahan..."
+                                    variant="outlined"
+                                    density="compact"
+                                    hide-details
+                                ></v-text-field>
+                            </td>
+                            <td class="text-center">
+                                <v-btn
+                                    icon
+                                    size="small"
+                                    variant="text"
+                                    color="grey"
+                                    @click="cancelEditTindakan"
+                                >
+                                    <Icon icon="mdi-close" height="20" />
+                                </v-btn>
+                                <v-btn
+                                    icon
+                                    size="small"
+                                    variant="text"
+                                    color="success"
+                                    @click="saveTindakan"
+                                    :disabled="!tindakanForm.kodeTindakan || !tindakanForm.tindakan"
+                                >
+                                    <Icon icon="mdi-check" height="20" />
+                                </v-btn>
+                            </td>
+                        </tr>
+                    </tbody>
+                </v-table>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/components/pendaftaran/ModalDetailPendaftaran.vue b/components/pendaftaran/ModalDetailPendaftaran.vue
index 44d01db..6e5ce0e 100644
--- a/components/pendaftaran/ModalDetailPendaftaran.vue
+++ b/components/pendaftaran/ModalDetailPendaftaran.vue
@@ -133,10 +133,10 @@ const initializeForm = () => {
         alamat: '',
         nomorTelepon: []
     };
-    
+
     diagnosisItems.value = [];
     tindakanItems.value = [];
-    
+
     rencanaOperasiData.value = {
         spesialis: null,
         SpesialisName: '',
@@ -148,9 +148,9 @@ const initializeForm = () => {
         rencanaOperasi: null,
         keterangan: null
     };
-    
+
     dokterPelaksanaItems.value = [];
-    
+
     statusPasienData.value = {
         tanggalSelesai: null,
         statusOperasi: '',
@@ -161,41 +161,41 @@ const initializeForm = () => {
 // 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 };
@@ -224,441 +224,371 @@ const closeModal = () => {
 </script>
 
 <template>
-    <v-dialog v-model="showModal" max-width="900px" persistent scrollable>
+    <v-dialog v-model="showModal" max-width="1200px" persistent scrollable>
         <v-card>
             <v-card-title class="d-flex align-center justify-space-between pa-4">
                 <div class="d-flex align-center">
                     <Icon icon="solar:clipboard-text-bold-duotone" height="28" class="text-primary mr-3" />
                     <span class="text-h6">Detail Pendaftaran Antrean Operasi</span>
                 </div>
-                <v-btn
-                    icon
-                    variant="text"
-                    @click="closeModal"
-                >
+                <v-btn icon variant="text" @click="closeModal">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
             </v-card-title>
-            
+
             <v-card-text class="pa-5 bg-background" 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>
+                <LoadingState :loading="loading" :error="error" loading-text="Memuat detail pendaftaran..."
+                    error-text="Gagal memuat data detail" @retry="fetchDetailData">
+                    <v-row v-if="!loading && !error">
+                        <v-col cols="6">
+                            <!-- Informasi Pasien -->
+                            <v-card elevation="10" class="mb-4" style="height: 100%;">
+                                <v-card-title class="bg-blue-lighten-5 pa-4">
+                                    <div class="d-flex align-center">
+                                        <Icon icon="solar:user-bold-duotone" height="24" class="mr-2 text-primary" />
+                                        <span class="text-h6">Biodata Pasien</span>
+                                    </div>
+                                </v-card-title>
+                                <v-card-text class="pa-5">
+                                    <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">
+                                                    {{ 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="12">
+                                            <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 || '-' }}
+                                                    <v-chip :color="getGenderColor(formData.jenisKelamin)" size="small"
+                                                        variant="flat" class="ml-2">
+                                                        <Icon :icon="getGenderIcon(formData.jenisKelamin)"
+                                                            height="16" />
+                                                    </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="12">
+                                            <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="12">
+                                            <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>
+
                         </v-col>
-                    </v-row> -->
-
-                    <!-- Informasi Pasien -->
-                    <v-card elevation="10" class="mb-4">
-                        <v-card-title class="bg-blue-lighten-5 pa-4">
-                            <div class="d-flex align-center">
-                                <Icon icon="solar:user-bold-duotone" height="24" class="mr-2 text-primary" />
-                                <span class="text-h6">Biodata Pasien</span>
-                            </div>
-                        </v-card-title>
-                        <v-card-text class="pa-5">
-                            <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">
-                                            {{ formData.noRekamMedis || '-' }}
-                                        </div>
+                        <v-col cols="6">
+                            <!-- Rencana Operasi -->
+                            <v-card elevation="10" class="mb-4" style="height: 100%;">
+                                <v-card-title class="bg-orange-lighten-5 pa-4">
+                                    <div class="d-flex align-center">
+                                        <Icon icon="solar:calendar-mark-bold-duotone" height="24"
+                                            class="mr-2 text-warning" />
+                                        <span class="text-h6">Rencana Operasi</span>
                                     </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="10" class="mb-4">
-                        <v-card-title class="bg-green-lighten-5 pa-4">
-                            <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="font-weight-medium mb-1">
-                                                        {{ item.diagnosa }}
-                                                    </div>
-                                                    <div class="text-caption text-medium-emphasis mb-1">
-                                                        {{ item.jenisDiagnosa }}
-                                                    </div>
-                                                    <v-chip size="x-small" color="success" variant="outlined">
-                                                        {{ item.kodeDiagnosa }}
+                                </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.split('-')[1]?.trim() || '-' }}
                                                     </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>
+                                        </v-col>
+                                        <v-col v-if="rencanaOperasiData.rencanaOperasi" cols="12">
+                                            <div class="info-item">
+                                                <div class="info-label">
+                                                    <Icon icon="solar:notes-bold" height="20" class="mr-2" />
+                                                    Rencana Operasi
+                                                </div>
+                                                <div class="info-value">
+                                                    {{ rencanaOperasiData.rencanaOperasi }}
+                                                </div>
+                                            </div>
+                                        </v-col>
+                                        <v-col v-if="rencanaOperasiData.keterangan" cols="12">
+                                            <div class="info-item">
+                                                <div class="info-label">
+                                                    <Icon icon="solar:notebook-bold" height="20" class="mr-2" />
+                                                    Keterangan
+                                                </div>
+                                                <div class="info-value">
+                                                    {{ rencanaOperasiData.keterangan }}
+                                                </div>
+                                            </div>
+                                        </v-col>
+                                        <v-col v-if="dokterPelaksanaItems.length > 0" cols="12">
+                                            <div class="info-item">
+                                                <div class="info-label">
+                                                    <Icon icon="solar:user-id-bold-duotone" height="20" class="mr-2" />
+                                                    Dokter Pelaksana
+                                                </div>
 
-                    <!-- Tindakan -->
-                    <v-card elevation="10" class="mb-4">
-                        <v-card-title class="bg-purple-lighten-5 pa-4">
-                            <div class="d-flex align-center">
-                                <Icon icon="solar:medical-kit-bold-duotone" height="24" class="mr-2 text-secondary" />
-                                <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="secondary">
-                                        <v-card-text class="pa-3">
-                                            <div class="d-flex align-start">
-                                                <v-avatar color="secondary" 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-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>
+                                            </div>
+                                        </v-col>
+
+                                        <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-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="10" class="mb-4">
-                        <v-card-title class="bg-orange-lighten-5 pa-4">
-                            <div class="d-flex align-center">
-                                <Icon icon="solar:calendar-mark-bold-duotone" height="24" class="mr-2 text-warning" />
-                                <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>
+                                        </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>
+                        </v-col>
+                        <v-col cols="6">
+                            <!-- Diagnosis -->
+                            <v-card elevation="10" class="mb-4" style="height: 100%;">
+                                <v-card-title class="bg-green-lighten-5 pa-4">
+                                    <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-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>
+                                </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="font-weight-medium mb-1">
+                                                                {{ item.diagnosa }}
+                                                            </div>
+                                                            <div class="text-caption text-medium-emphasis mb-1">
+                                                                {{ item.jenisDiagnosa }}
+                                                            </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>
+                        </v-col>
+                        <v-col cols="6">
+                            <!-- Tindakan -->
+                            <v-card elevation="10" class="mb-4" style="height: 100%;">
+                                <v-card-title class="bg-purple-lighten-5 pa-4">
+                                    <div class="d-flex align-center">
+                                        <Icon icon="solar:medical-kit-bold-duotone" height="24"
+                                            class="mr-2 text-secondary" />
+                                        <span class="text-h6">Tindakan Operasi</span>
                                     </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.rencanaOperasi" cols="6">
-                                    <div class="info-item">
-                                        <div class="info-label">
-                                            <Icon icon="solar:notes-bold" height="20" class="mr-2" />
-                                            Rencana Operasi
-                                        </div>
-                                        <div class="info-value">
-                                            {{ rencanaOperasiData.rencanaOperasi }}
-                                        </div>
-                                    </div>
-                                </v-col>
-                                <v-col v-if="rencanaOperasiData.keterangan" cols="6">
-                                    <div class="info-item">
-                                        <div class="info-label">
-                                            <Icon icon="solar:notebook-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="10" class="mb-4">
-                        <v-card-title class="bg-indigo-lighten-5 pa-4">
-                            <div class="d-flex align-center">
-                                <Icon icon="solar:user-id-bold-duotone" height="24" class="mr-2 text-info" />
-                                <span class="text-h6">Tim Dokter Pelaksana</span>
-                            </div>
-                        </v-card-title>
-                        <v-card-text class="pa-4">
-                            <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="10" class="mb-2">
-                        <v-card-title class="bg-grey-lighten-3 pa-4">
-                            <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>
+                                </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="secondary">
+                                                <v-card-text class="pa-3">
+                                                    <div class="d-flex align-start">
+                                                        <v-avatar color="secondary" 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>
+                        </v-col>
+                    </v-row>
                 </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>
diff --git a/components/pendaftaran/ModalPendaftaranV2.vue b/components/pendaftaran/ModalPendaftaranV2.vue
new file mode 100644
index 0000000..2d47244
--- /dev/null
+++ b/components/pendaftaran/ModalPendaftaranV2.vue
@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import BiodataPasien from '@/components/pendaftaran/BiodataPasienV2.vue';
+import MedisPasien from '@/components/pendaftaran/MedisPasienV2.vue';
+import RencanaOperasi from '@/components/pendaftaran/RencanaOperasiV2.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';
+
+interface Props {
+    modelValue: boolean;
+    mode?: PageMode;
+    id?: string | number;
+    initialKategori?: number;
+    initialSpesialis?: number;
+    initialSubSpesialis?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    mode: 'create',
+    id: undefined,
+    initialKategori: undefined,
+    initialSpesialis: undefined,
+    initialSubSpesialis: undefined
+});
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+    'success': [];
+}>();
+
+const pendaftaranStore = usePendaftaranStore();
+
+// Use storeToRefs to make state reactive
+const {
+    formData,
+    diagnosisItems,
+    tindakanItems,
+    rencanaOperasiData,
+    dokterPelaksanaItems,
+    statusPasienData,
+    loading: formLoading
+} = storeToRefs(pendaftaranStore);
+
+const form = ref();
+const valid = ref(true);
+const loadingDetail = ref(false);
+const errorDetail = ref(false);
+
+// Refs for child components
+const biodataPasienRef = ref();
+const medisPasienRef = ref();
+const rencanaOperasiRef = ref();
+
+// Computed properties
+const isReadonly = computed(() => props.mode === 'view');
+
+const modalTitle = computed(() => {
+    switch (props.mode) {
+        case 'edit':
+            return 'Edit Pendaftaran Antrean Operasi';
+        case 'view':
+            return 'Detail Pendaftaran Antrean Operasi';
+        default:
+            return 'Tambah Pendaftaran Antrean Operasi';
+    }
+});
+
+const showModal = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+// Initialize form when modal opens
+watch(() => props.modelValue, async (isOpen) => {
+    if (isOpen) {
+        await initializeForm();
+    }
+}, { immediate: true }); // Add immediate to handle initial render
+
+// 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
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    pendaftaranStore.rencanaOperasiData.tanggalDaftar = `${year}-${month}-${day}T${hours}:${minutes}`;
+    
+    // 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;
+    }
+};
+
+const closeModal = () => {
+    showModal.value = false;
+};
+
+// Focus on error field - scroll to component and focus on first invalid field
+const focusOnErrorField = (fieldName: string) => {
+    nextTick(() => {
+        // Map field names to component refs and actions
+        const fieldMap: Record<string, { ref: any; action: string }> = {
+            'noRekamMedis': { ref: biodataPasienRef, action: 'focusNoRekamMedis' },
+            'diagnosis': { ref: medisPasienRef, action: 'focusDiagnosis' },
+            'tindakan': { ref: medisPasienRef, action: 'focusTindakan' },
+            'spesialis': { ref: rencanaOperasiRef, action: 'focusSpesialis' },
+            'subSpesialis': { ref: rencanaOperasiRef, action: 'focusSubSpesialis' },
+            'tanggalDaftar': { ref: rencanaOperasiRef, action: 'focusTanggalDaftar' },
+            'kategoriOperasi': { ref: rencanaOperasiRef, action: 'focusKategoriOperasi' },
+        };
+
+        const fieldInfo = fieldMap[fieldName];
+        if (fieldInfo && fieldInfo.ref.value) {
+            // Scroll to component
+            const componentElement = fieldInfo.ref.value.$el;
+            if (componentElement) {
+                componentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                
+                // Call focus method if available
+                setTimeout(() => {
+                    if (typeof fieldInfo.ref.value[fieldInfo.action] === 'function') {
+                        fieldInfo.ref.value[fieldInfo.action]();
+                    }
+                }, 300); // Wait for scroll to complete
+            }
+        }
+    });
+};
+
+const handleSimpan = async () => {
+    const { valid: isValid } = await form.value.validate();
+    
+    if (isValid) {
+        // Validate using store method
+        const validation = pendaftaranStore.validateForm();
+        
+        if (!validation.valid) {
+            const errorMessage = `Data berikut harus diisi:\n\n${validation.errors.join(', ')}`;
+            pendaftaranStore.showSnackbar(errorMessage, 'error');
+            
+            // Focus on first error field
+            if (validation.firstErrorField) {
+                focusOnErrorField(validation.firstErrorField);
+            }
+            return;
+        }
+        
+        // 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');
+            closeModal();
+        }
+    } else {
+        // Validate using store method
+        const validation = pendaftaranStore.validateForm();
+        const errorMessage = `Data berikut harus diisi:\n\n${validation.errors.join(', ')}`;
+        pendaftaranStore.showSnackbar(errorMessage, 'error');
+        
+        // Focus on first error field
+        if (validation.firstErrorField) {
+            focusOnErrorField(validation.firstErrorField);
+        }
+    }
+};
+
+const handleReset = () => {
+    if (confirm('Apakah Anda yakin ingin mereset form?')) {
+        form.value.reset();
+        pendaftaranStore.resetForm();
+        // Set default tanggal daftar ke now
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, '0');
+        const day = String(now.getDate()).padStart(2, '0');
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        pendaftaranStore.rencanaOperasiData.tanggalDaftar = `${year}-${month}-${day}T${hours}:${minutes}`;
+    }
+};
+</script>
+
+<template>
+    <v-dialog v-model="showModal" max-width="1200px" persistent scrollable>
+        <v-card>
+            <v-card-title class="d-flex align-center justify-space-between pa-3">
+                <div class="d-flex align-center">
+                    <v-icon class="mr-3 text-primary">mdi-clipboard-plus</v-icon>
+                    <span class="text-h6">{{ modalTitle }}</span>
+                </div>
+                <v-btn
+                    icon
+                    variant="text"
+                    @click="closeModal"
+                >
+                    <v-icon>mdi-close</v-icon>
+                </v-btn>
+            </v-card-title>
+            <v-divider></v-divider>
+            
+            <v-card-text class="bg-white pa-5" style="max-height: 70vh; overflow-y: auto; overflow-x: hidden;">
+                <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>
+                            <!-- Data Biodata Pasien -->
+                            <v-col cols="5" class="mb-5">
+                                <BiodataPasien ref="biodataPasienRef" v-model="formData" :readonly="isReadonly" />
+                            </v-col>
+                            <!-- Data Rencana Operasi -->
+                            <v-col cols="7">
+                                <RencanaOperasi 
+                                    ref="rencanaOperasiRef"
+                                    v-model:rencana-operasi-data="rencanaOperasiData"
+                                    v-model:dokter-pelaksana-items="dokterPelaksanaItems"
+                                    :readonly="isReadonly"
+                                />
+                            </v-col>
+                            <!-- Data Medis Pasien -->
+                            <v-col cols="12">
+                                <MedisPasien 
+                                    ref="medisPasienRef"
+                                    v-model:diagnosis-items="diagnosisItems"
+                                    v-model:tindakan-items="tindakanItems"
+                                    :readonly="isReadonly"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-form>
+                </LoadingState>
+            </v-card-text>
+            
+            <v-card-actions class="pa-4 justify-end">
+                <v-btn 
+                    v-if="!isReadonly"
+                    color="error" 
+                    size="large" 
+                    variant="outlined"
+                    prepend-icon="mdi-reload"
+                    @click="handleReset"
+                >
+                    Reset
+                </v-btn>
+                <v-btn 
+                    v-if="!isReadonly"
+                    color="primary" 
+                    size="large"
+                    :loading="formLoading"
+                    @click="handleSimpan"
+                    variant="flat"
+                    prepend-icon="mdi-content-save"
+                >
+                    Simpan
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
diff --git a/components/pendaftaran/ModalUpdateStatus.vue b/components/pendaftaran/ModalUpdateStatus.vue
index 6b42d28..88b75a1 100644
--- a/components/pendaftaran/ModalUpdateStatus.vue
+++ b/components/pendaftaran/ModalUpdateStatus.vue
@@ -52,16 +52,16 @@ const showSnackbar = (message: string, color: string = 'success') => {
 // 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;
@@ -87,7 +87,7 @@ 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) 
+    if ((formData.value.statusOperasi === STATUS.TUNDA || formData.value.statusOperasi === STATUS.BATAL)
         && !formData.value.keteranganStatus.trim()) {
         return false;
     }
@@ -100,7 +100,7 @@ const handleSubmit = async () => {
         showSnackbar('Mohon lengkapi data yang diperlukan', 'error');
         return;
     }
-    
+
     loadingSubmit.value = true;
     try {
         const response = await updateStatusAntrianOperasi(props.id, {
@@ -108,13 +108,13 @@ const handleSubmit = async () => {
             tanggalSelesai: formData.value.tanggalSelesai ? new Date(formData.value.tanggalSelesai).toISOString() : null,
             keteranganStatus: formData.value.keteranganStatus || null
         });
-        
+
         if (response.success) {
             showSnackbar('Status antrian berhasil diupdate', 'success');
             emit('success');
             dialog.value = false;
         } else {
-            showSnackbar( 'Gagal mengupdate status antrian', 'error');
+            showSnackbar('Gagal mengupdate status antrian', 'error');
         }
     } catch (error: any) {
         console.error('Error updating status:', error);
@@ -127,9 +127,9 @@ const handleSubmit = async () => {
 // Format date
 const formatDate = (date: string) => {
     if (!date) return '-';
-    return new Date(date).toLocaleDateString('id-ID', { 
-        year: 'numeric', 
-        month: 'short', 
+    return new Date(date).toLocaleDateString('id-ID', {
+        year: 'numeric',
+        month: 'short',
         day: 'numeric',
         hour: '2-digit',
         minute: '2-digit'
@@ -166,31 +166,22 @@ watch(() => props.modelValue, (isOpen) => {
 </script>
 
 <template>
-    <v-dialog v-model="dialog" max-width="900px" persistent scrollable>
+    <v-dialog v-model="dialog" max-width="1200px" persistent scrollable>
         <v-card>
             <v-card-title class="d-flex align-center justify-space-between pa-4">
                 <div class="d-flex align-center">
                     <Icon icon="solar:clipboard-check-bold-duotone" height="28" class="text-primary mr-3" />
                     <span class="text-h6">Update Status Antrian Operasi</span>
                 </div>
-                <v-btn
-                    icon
-                    variant="text"
-                    @click="dialog = false"
-                    :disabled="loadingSubmit"
-                >
+                <v-btn icon variant="text" @click="dialog = false" :disabled="loadingSubmit">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
             </v-card-title>
-            
+
             <v-card-text class="pa-5 bg-background" style="max-height: 75vh; overflow-y: auto;">
                 <!-- Loading State -->
                 <div v-if="loading" class="text-center py-8">
-                    <v-progress-circular
-                        indeterminate
-                        color="primary"
-                        size="50"
-                    ></v-progress-circular>
+                    <v-progress-circular indeterminate color="primary" size="50"></v-progress-circular>
                     <p class="mt-4 text-medium-emphasis">Memuat data...</p>
                 </div>
 
@@ -206,235 +197,209 @@ watch(() => props.modelValue, (isOpen) => {
 
                 <!-- Content -->
                 <div v-else-if="pasienData">
-                    <!-- Informasi Pasien -->
-                    <v-card elevation="2" class="mb-4">
-                        <v-card-title class="bg-blue-lighten-5 pa-4">
-                            <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-5">
-                            <v-row>
-                                <v-col cols="12" sm="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">
-                                            {{ pasienData.formData?.noRekamMedis || '-' }}
-                                        </div>
+                    <v-row>
+                        <v-col cols="6">
+                            <!-- Informasi Pasien -->
+                            <v-card elevation="2" class="mb-4" style="height: 100%;">
+                                <v-card-title class="bg-blue-lighten-5 pa-4">
+                                    <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-col>
-                                <v-col cols="12" sm="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">
-                                            {{ pasienData.formData?.namaPasien || '-' }}
-                                        </div>
-                                    </div>
-                                </v-col>
-                                <v-col cols="12" sm="6">
-                                    <div class="info-item">
-                                        <div class="info-label">
-                                            <Icon icon="mdi-gender-male-female" height="20" class="mr-2" />
-                                            Jenis Kelamin
-                                        </div>
-                                        <div class="info-value">
-                                            {{ getGenderText(pasienData.formData?.jenisKelamin) }}
-                                        </div>
-                                    </div>
-                                </v-col>
-                                <v-col cols="12" sm="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">
-                                            {{ formatDate(pasienData.rencanaOperasiData?.tanggalDaftar) }}
-                                        </div>
-                                    </div>
-                                </v-col>
-                                <v-col cols="12" sm="4">
-                                    <div class="info-item">
-                                        <div class="info-label">
-                                            <Icon icon="solar:clipboard-list-bold" height="20" class="mr-2" />
-                                            Kategori
-                                        </div>
-                                        <div class="info-value">
-                                            <v-chip size="small" color="primary" variant="flat">
-                                                {{ pasienData.rencanaOperasiData?.kategoriName || '-' }}
-                                            </v-chip>
-                                        </div>
-                                    </div>
-                                </v-col>
-                                <v-col cols="12" sm="4">
-                                    <div class="info-item">
-                                        <div class="info-label">
-                                            <Icon icon="solar:stethoscope-bold" height="20" class="mr-2" />
-                                            Spesialis
-                                        </div>
-                                        <div class="info-value">
-                                            <v-chip size="small" color="secondary" variant="flat">
-                                                {{ pasienData.rencanaOperasiData?.SpesialisName || '-' }}
-                                            </v-chip>
-                                        </div>
-                                    </div>
-                                </v-col>
-                                <v-col cols="12" sm="4">
-                                    <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">
-                                            <v-chip size="small" color="info" variant="flat">
-                                                {{ pasienData.rencanaOperasiData?.SubSpesialisName || '-' }}
-                                            </v-chip>
-                                        </div>
-                                    </div>
-                                </v-col>
-                            </v-row>
-                        </v-card-text>
-                    </v-card>
-
-                    <!-- Form Update Status -->
-                    <v-card elevation="2" class="mb-2">
-                        <v-card-title class="bg-orange-lighten-5 pa-4">
-                            <div class="d-flex align-center">
-                                <Icon icon="solar:settings-bold-duotone" height="24" class="mr-2 text-warning" />
-                                <span class="text-h6">Update Status Operasi</span>
-                            </div>
-                        </v-card-title>
-                        <v-card-text class="pa-4">
-                            <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"
-                                            >
-                                                <Icon v-if="formData.statusOperasi === STATUS.BELUM" icon="mdi-progress-clock" height="20" class="mr-2" />
-                                                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"
-                                            >
-                                                <Icon v-if="formData.statusOperasi === STATUS.SELESAI" icon="mdi-check-circle" height="20" class="mr-2" />
-                                                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"
-                                            >
-                                                <Icon v-if="formData.statusOperasi === STATUS.TUNDA" icon="mdi-timer-sand" height="20" class="mr-2" />
-                                                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"
-                                            >
-                                                <Icon v-if="formData.statusOperasi === STATUS.BATAL" icon="mdi-close-circle" height="20" class="mr-2" />
-                                                Batal
-                                            </v-btn>
-                                            </v-btn-group>
+                                </v-card-title>
+                                <v-card-text class="pa-4">
+                                    <v-row>
+                                        <v-col cols="12" sm="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">
+                                                    {{ pasienData.formData?.noRekamMedis || '-' }}
+                                                </div>
+                                            </div>
+                                        </v-col>
+                                        <v-col cols="12" sm="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">
+                                                    {{ pasienData.formData?.namaPasien || '-' }}
+                                                    <v-tooltip location="right">
+                                                        <template #activator="{ props }">
+                                                            <v-chip v-bind="props"
+                                                                :color="pasienData.formData?.jenisKelamin === 'L' ? 'primary' : 'error'"
+                                                                size="small" variant="flat" class="ml-2">
+                                                                <Icon
+                                                                    :icon="pasienData.formData?.jenisKelamin === 'L' ? 'mdi-gender-male' : 'mdi-gender-female'"
+                                                                    height="14" />
+                                                            </v-chip>
+                                                        </template>
+                                                        {{ pasienData.formData?.jenisKelamin === 'L' ? 'Laki-laki' :
+                                                        'Perempuan' }}
+                                                    </v-tooltip>
+                                                </div>
+                                            </div>
+                                        </v-col>
+                                        <v-col cols="12" sm="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">
+                                                    {{ formatDate(pasienData.rencanaOperasiData?.tanggalDaftar) }}
+                                                </div>
+                                            </div>
+                                        </v-col>
+                                        <v-col cols="12" sm="6">
+                                            <div class="info-item">
+                                                <div class="info-label">
+                                                    <Icon icon="solar:clipboard-list-bold" height="20" class="mr-2" />
+                                                    Kategori
+                                                </div>
+                                                <div class="info-value">
+                                                    <v-chip size="small" color="primary" variant="flat">
+                                                        {{
+                                                            pasienData.rencanaOperasiData?.kategoriName?.split('-')[1]?.trim()
+                                                        || '-' }}
+                                                    </v-chip>
+                                                </div>
+                                            </div>
+                                        </v-col>
+                                        <v-col cols="12" sm="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">
+                                                    <v-chip size="small" color="secondary" variant="flat">
+                                                        {{ pasienData.rencanaOperasiData?.SpesialisName || '-' }}
+                                                    </v-chip>
+                                                </div>
+                                            </div>
+                                        </v-col>
+                                        <v-col cols="12" sm="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">
+                                                    <v-chip size="small" color="info" variant="flat">
+                                                        {{ pasienData.rencanaOperasiData?.SubSpesialisName || '-' }}
+                                                    </v-chip>
+                                                </div>
+                                            </div>
                                         </v-col>
                                     </v-row>
-                                </v-col>
+                                </v-card-text>
+                            </v-card>
+                        </v-col>
+                        <v-col cols="6">
+                            <!-- Form Update Status -->
+                            <v-card elevation="2" class="mb-2" style="height: 100%;">
+                                <v-card-title class="bg-orange-lighten-5 pa-4">
+                                    <div class="d-flex align-center">
+                                        <Icon icon="solar:settings-bold-duotone" height="24"
+                                            class="mr-2 text-warning" />
+                                        <span class="text-h6">Update Status Operasi</span>
+                                    </div>
+                                </v-card-title>
+                                <v-card-text class="pa-4">
+                                    <v-row>
+                                        <!-- Status Operasi -->
+                                        <v-col cols="12">
+                                            <v-row>
+                                                <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">
+                                                            <Icon v-if="formData.statusOperasi === STATUS.BELUM"
+                                                                icon="mdi-progress-clock" height="20" class="mr-2" />
+                                                            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">
+                                                            <Icon v-if="formData.statusOperasi === STATUS.SELESAI"
+                                                                icon="mdi-check-circle" height="20" class="mr-2" />
+                                                            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">
+                                                            <Icon v-if="formData.statusOperasi === STATUS.TUNDA"
+                                                                icon="mdi-timer-sand" height="20" class="mr-2" />
+                                                            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">
+                                                            <Icon v-if="formData.statusOperasi === STATUS.BATAL"
+                                                                icon="mdi-close-circle" height="20" class="mr-2" />
+                                                            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>
+                                        <!-- 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>
+                                        <!-- 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>
+                        </v-col>
+                    </v-row>
                 </div>
             </v-card-text>
 
-            
+
             <v-card-actions class="pa-4 justify-end">
-                <v-btn
-                    color="primary"
-                    size="large"
-                    variant="flat"
-                    prepend-icon="mdi-content-save"
-                    :loading="loadingSubmit"
-                    :disabled="loading || !isFormValid"
-                    @click="handleSubmit"
-                >
+                <v-btn color="primary" size="large" variant="flat" prepend-icon="mdi-content-save"
+                    :loading="loadingSubmit" :disabled="loading || !isFormValid" @click="handleSubmit">
                     Simpan
                 </v-btn>
             </v-card-actions>
         </v-card>
 
         <!-- Snackbar -->
-        <v-snackbar
-            v-model="snackbar"
-            :color="snackbarColor"
-            :timeout="3000"
-            location="top"
-        >
+        <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top">
             {{ snackbarMessage }}
             <template #actions>
-                <v-btn
-                    variant="text"
-                    @click="snackbar = false"
-                >
+                <v-btn variant="text" @click="snackbar = false">
                     Close
                 </v-btn>
             </template>
@@ -443,10 +408,6 @@ watch(() => props.modelValue, (isOpen) => {
 </template>
 
 <style scoped>
-.info-item {
-    margin-bottom: 1rem;
-}
-
 .info-label {
     display: flex;
     align-items: center;
diff --git a/components/pendaftaran/RencanaOperasiV2.vue b/components/pendaftaran/RencanaOperasiV2.vue
new file mode 100644
index 0000000..c1d7e43
--- /dev/null
+++ b/components/pendaftaran/RencanaOperasiV2.vue
@@ -0,0 +1,646 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import api from '~/services/api';
+import type { Props } from '~/types/common';
+import type { Dokter } from '~/types/pendaftaran';
+import type { KategoriOperasi, Spesialis, SubSpesialis } from '~/types/antrean';
+import { Icon } from '@iconify/vue';
+
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false
+});
+
+const rencanaOperasiData = defineModel<{
+    spesialis: number | null | undefined;
+    subSpesialis: number | null | undefined;
+    tanggalDaftar: string;
+    kategoriOperasi: number | null | undefined;
+    rencanaOperasi: string;
+    keterangan: string;
+}>('rencanaOperasiData', { required: true });
+
+const dokterPelaksanaItems = defineModel<Dokter[]>('dokterPelaksanaItems', { required: true });
+
+const rules = {
+    required: (value: any) => !!value || 'Field ini wajib diisi'
+};
+
+// Spesialis, Sub-spesialis, dan Kategori Operasi data
+const spesialisList = ref<Spesialis[]>([]);
+const subSpesialisList = ref<SubSpesialis[]>([]);
+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(() => {
+    const options = spesialisList.value.map(s => ({
+        title: s.spesialis,
+        value: s.id
+    }));
+    
+    // If value exists but not in options yet (loading state), add placeholder
+    if (rencanaOperasiData.value.spesialis && !options.find(o => o.value === rencanaOperasiData.value.spesialis)) {
+        options.unshift({
+            title: 'Loading...',
+            value: rencanaOperasiData.value.spesialis
+        });
+    }
+    
+    return options;
+});
+
+const subSpesialisOptions = computed(() => {
+    const options = subSpesialisList.value.map(ss => ({
+        title: ss.sub_spesialis,
+        value: ss.id
+    }));
+    
+    // If value exists but not in options yet (loading state), add placeholder
+    if (rencanaOperasiData.value.subSpesialis && !options.find(o => o.value === rencanaOperasiData.value.subSpesialis)) {
+        options.unshift({
+            title: 'Loading...',
+            value: rencanaOperasiData.value.subSpesialis
+        });
+    }
+    
+    return options;
+});
+
+const kategoriOperasiOptions = computed(() => {
+    const options = kategoriOperasiList.value.map((k: KategoriOperasi) => ({
+        title: k.kategori.split('-')[1]?.trim(),
+        value: k.id
+    }));
+    
+    // If value exists but not in options yet (loading state), add placeholder
+    if (rencanaOperasiData.value.kategoriOperasi && !options.find(o => o.value === rencanaOperasiData.value.kategoriOperasi)) {
+        options.unshift({
+            title: 'Loading...',
+            value: rencanaOperasiData.value.kategoriOperasi
+        });
+    }
+    
+    return options;
+});
+
+// Fetch sub-spesialis from API
+const fetchSubSpesialis = async (idSpesialis: number) => {
+    try {
+        isLoadingSubSpesialis.value = true;
+        const response = await api.get(`/reference/sub-spesialis?id_spesialis=${idSpesialis}`);
+        
+        if (response.data.success && response.data.data) {
+            subSpesialisList.value = response.data.data;
+        }
+    } catch (error) {
+        console.error('Error fetching sub-spesialis:', error);
+        subSpesialisList.value = [];
+    } finally {
+        isLoadingSubSpesialis.value = false;
+    }
+};
+
+// Watch spesialis change to fetch sub-spesialis and reset sub-spesialis selection
+watch(() => rencanaOperasiData.value.spesialis, (newSpesialis, oldSpesialis) => {
+    // Don't reset subSpesialis during initialization
+    if (isInitializing.value) {
+        return;
+    }
+    
+    // Only reset if spesialis actually changed
+    if (newSpesialis !== oldSpesialis) {
+        rencanaOperasiData.value.subSpesialis = null;
+        subSpesialisList.value = [];
+        
+        if (newSpesialis) {
+            fetchSubSpesialis(newSpesialis);
+        }
+    }
+});
+
+// Fetch spesialis from API
+const fetchSpesialis = async () => {
+    try {
+        isLoadingSpesialis.value = true;
+        const response = await api.get('/reference/spesialis');
+        
+        if (response.data.success && response.data.data) {
+            spesialisList.value = response.data.data;
+        }
+    } catch (error) {
+        console.error('Error fetching spesialis:', error);
+        // You can add error notification here if needed
+    } finally {
+        isLoadingSpesialis.value = false;
+    }
+};
+
+// Fetch kategori operasi from API
+const fetchKategoriOperasi = async () => {
+    try {
+        isLoadingKategori.value = true;
+        const response = await api.get('/reference/kategori');
+        
+        if (response.data.success && response.data.data) {
+            kategoriOperasiList.value = response.data.data;
+        }
+    } catch (error) {
+        console.error('Error fetching kategori operasi:', error);
+        // You can add error notification here if needed
+    } finally {
+        isLoadingKategori.value = false;
+    }
+};
+
+// Load data on mount
+onMounted(async () => {
+    isInitializing.value = true;
+    
+    // Start fetching master data
+    const fetchPromises = [
+        fetchSpesialis(),
+        fetchKategoriOperasi()
+    ];
+    
+    // If spesialis is already set, fetch its detail to add to list immediately
+    if (rencanaOperasiData.value.spesialis) {
+        fetchPromises.push(
+            api.get(`/reference/spesialis/${rencanaOperasiData.value.spesialis}`)
+                .then(response => {
+                    if (response.data.success && response.data.data) {
+                        // Add to list if not already there
+                        const exists = spesialisList.value.find(s => s.id === response.data.data.id);
+                        if (!exists) {
+                            spesialisList.value.unshift(response.data.data);
+                        }
+                    }
+                })
+                .catch(err => console.error('Error fetching spesialis detail:', err))
+        );
+    }
+    
+    // If kategori is already set, fetch its detail to add to list immediately
+    if (rencanaOperasiData.value.kategoriOperasi) {
+        fetchPromises.push(
+            api.get(`/reference/kategori/${rencanaOperasiData.value.kategoriOperasi}`)
+                .then(response => {
+                    if (response.data.success && response.data.data) {
+                        // Add to list if not already there
+                        const exists = kategoriOperasiList.value.find(k => k.id === response.data.data.id);
+                        if (!exists) {
+                            kategoriOperasiList.value.unshift(response.data.data);
+                        }
+                    }
+                })
+                .catch(err => console.error('Error fetching kategori detail:', err))
+        );
+    }
+    
+    // Wait for initial fetches
+    await Promise.all(fetchPromises);
+    
+    // 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;
+                
+                // Add subspecialis to list
+                const exists = subSpesialisList.value.find(ss => ss.id === subSpesialisDetail.id);
+                if (!exists) {
+                    subSpesialisList.value.unshift(subSpesialisDetail);
+                }
+                
+                // 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;
+});
+
+// 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 dokterList = ref<Dokter[]>([]);
+const isLoadingDokter = ref(false);
+const dokterMenuOpen = ref(false);
+
+// 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 params = new URLSearchParams({
+            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;
+        }
+    } catch (error) {
+        console.error('Error fetching dokter:', error);
+        dokterList.value = [];
+    } finally {
+        isLoadingDokter.value = false;
+    }
+};
+
+// Watch search with debounce
+let dokterSearchTimeout: NodeJS.Timeout | null = null;
+watch(searchDokter, (newSearch) => {
+    if (dokterSearchTimeout) {
+        clearTimeout(dokterSearchTimeout);
+    }
+    dokterSearchTimeout = setTimeout(() => {
+        fetchDokter(newSearch);
+    }, 300);
+});
+
+// Load initial dokter list when dropdown opens
+watch(dokterMenuOpen, (isOpen) => {
+    if (isOpen && dokterList.value.length === 0) {
+        fetchDokter('');
+    }
+});
+
+// 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));
+    }
+});
+
+const removeDokter = (dokterId: string) => {
+    dokterPelaksanaItems.value = dokterPelaksanaItems.value.filter(d => d.id !== dokterId);
+};
+
+// Refs for focus functionality
+const spesialisInput = ref();
+const subSpesialisInput = ref();
+const tanggalDaftarInput = ref();
+const kategoriOperasiInput = ref();
+
+// Expose methods to focus on fields
+const focusSpesialis = () => {
+    if (spesialisInput.value) {
+        spesialisInput.value.focus();
+    }
+};
+
+const focusSubSpesialis = () => {
+    if (subSpesialisInput.value) {
+        subSpesialisInput.value.focus();
+    }
+};
+
+const focusTanggalDaftar = () => {
+    if (tanggalDaftarInput.value) {
+        tanggalDaftarInput.value.focus();
+    }
+};
+
+const focusKategoriOperasi = () => {
+    if (kategoriOperasiInput.value) {
+        kategoriOperasiInput.value.focus();
+    }
+};
+
+defineExpose({
+    focusSpesialis,
+    focusSubSpesialis,
+    focusTanggalDaftar,
+    focusKategoriOperasi
+});
+</script>
+
+<template>
+    <v-card elevation="0">
+        <v-card-text class="pa-2">
+            <div class="d-flex align-center">
+                <Icon icon="solar:calendar-mark-bold-duotone" height="20" class="mr-2 text-primary" />
+                <span class="text-h5">Data Rencana Operasi</span>
+            </div>
+        </v-card-text>
+        <v-card-text class="pt-4">
+            <v-row>
+                <!-- Tanggal Daftar -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Tanggal Daftar <span class="text-error">*</span></v-label>
+                    <v-text-field
+                        ref="tanggalDaftarInput"
+                        v-model="rencanaOperasiData.tanggalDaftar"
+                        type="datetime-local"
+                        variant="outlined" density="compact"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                    ></v-text-field>
+                </v-col>
+
+                <!-- Kategori Operasi -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Kategori Operasi <span class="text-error">*</span></v-label>
+                    <v-autocomplete
+                        ref="kategoriOperasiInput"
+                        v-model="rencanaOperasiData.kategoriOperasi"
+                        :items="kategoriOperasiOptions"
+                        placeholder="Pilih Kategori Operasi..."
+                        variant="outlined" 
+                        density="compact"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                        :readonly="readonly"
+                        :disabled="readonly || isLoadingKategori"
+                        :loading="isLoadingKategori"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                    ></v-autocomplete>
+                </v-col>
+
+                <!-- Spesialis -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Spesialis <span class="text-error">*</span></v-label>
+                    <v-autocomplete
+                        ref="spesialisInput"
+                        v-model="rencanaOperasiData.spesialis"
+                        :items="spesialisOptions"
+                        placeholder="Pilih Spesialis..."
+                        variant="outlined" 
+                        density="compact"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                        :readonly="readonly"
+                        :disabled="readonly || isLoadingSpesialis"
+                        :loading="isLoadingSpesialis"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                    ></v-autocomplete>
+                </v-col>
+
+                <!-- Sub Spesialis -->
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Sub Spesialis <span class="text-error">*</span></v-label>
+                    <v-autocomplete
+                        ref="subSpesialisInput"
+                        v-model="rencanaOperasiData.subSpesialis"
+                        :items="subSpesialisOptions"
+                        placeholder="Pilih Sub Spesialis..."
+                        variant="outlined" 
+                        density="compact"
+                        :rules="[rules.required]"
+                        hide-details="auto"
+                        :disabled="readonly || !rencanaOperasiData.spesialis || isLoadingSubSpesialis"
+                        :loading="isLoadingSubSpesialis"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                    ></v-autocomplete>
+                </v-col>
+
+                <!-- Dokter Pelaksana -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Dokter Pelaksana</v-label>
+                    <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="compact"
+                        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"
+                            >
+                                <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>
+                        </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="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-col>
+
+                <!-- Rencana Operasi -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Rencana Operasi</v-label>
+                    <v-textarea
+                        v-model="rencanaOperasiData.rencanaOperasi"
+                        variant="outlined" 
+                        density="compact"
+                        rows="2"
+                        hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                    ></v-textarea>
+                </v-col>
+
+                <!-- Keterangan -->
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Keterangan</v-label>
+                    <v-textarea
+                        v-model="rencanaOperasiData.keterangan"
+                        variant="outlined" 
+                        density="compact"
+                        rows="2"
+                        hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                    ></v-textarea>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
index 6064767..536e783 100644
--- a/pages/antrean/all.vue
+++ b/pages/antrean/all.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
-import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import CardAntrianList from '@/components/pendaftaran/CardAntrianList.vue';
+import FilterSortMenu from '@/components/pendaftaran/FilterSortMenu.vue';
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
 import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
 import { Icon } from '@iconify/vue';
 import type { AntreanOperasi } from '~/types/antrean';
-import { STATUS } from '~/types/antrean';
+import { STATUS, statusOptions } from '~/types/antrean';
 
 definePageMeta({
   middleware: 'auth',
@@ -15,12 +16,24 @@ definePageMeta({
 });
 
 const search = ref('');
-const statusFilter = ref<string | null>(null);
+const filterValues = ref<{
+    statusFilter: string | null;
+    sortOption: string | null;
+}>({
+    statusFilter: null,
+    sortOption: null
+});
 const antreanList = ref<any[]>([]);
 const loading = ref(false);
 const currentPage = ref(1);
 const itemsPerPage = ref(10);
 const totalItems = ref(0);
+const hasMore = ref(true);
+
+// Computed items per page based on view mode
+const effectiveItemsPerPage = computed(() => {
+    return itemsPerPage.value;
+});
 
 const router = useRouter();
 
@@ -33,30 +46,65 @@ 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' },
-    { value: STATUS.BELUM, label: 'Belum' },
-    { value: STATUS.SELESAI, label: 'Selesai' },
-    { value: STATUS.TUNDA, label: 'Tunda' },
-    { value: STATUS.BATAL, label: 'Batal' }
+// Define filter options
+const filterOptions = [
+    {
+        type: 'btn-group' as const,
+        label: 'Filter Status',
+        modelKey: 'statusFilter',
+        showAllOption: true,
+        options: statusOptions.filter(opt => opt.value !== null),
+        defaultValue: null
+    },
+    {
+        type: 'select' as const,
+        label: 'Urutkan',
+        modelKey: 'sortOption',
+        options: [
+            { label: 'Default', value: null },
+            { label: 'Tanggal Daftar ⬆', value: 'tanggal_daftar|DESC' },
+            { label: 'Tanggal Daftar ⬇', value: 'tanggal_daftar|ASC' }
+        ],
+        defaultValue: null
+    }
 ];
 
+
 // Fetch data from API
-const fetchData = async () => {
+const fetchData = async (append: boolean = false) => {
     loading.value = true;
     try {
-        const offset = (currentPage.value - 1) * itemsPerPage.value;
+        const offset = (currentPage.value - 1) * effectiveItemsPerPage.value;
+        let sortBy: string | undefined;
+        let sortOrder: string | undefined;
+        
+        if (filterValues.value.sortOption && filterValues.value.sortOption !== null) {
+            const parts = filterValues.value.sortOption.split('|');
+            sortBy = parts[0];
+            sortOrder = parts[1];
+        }
+        
         const response = await getAntrianOperasi({
             type: 'all',
-            limit: itemsPerPage.value,
+            limit: effectiveItemsPerPage.value,
             offset: offset,
-            status: statusFilter.value || undefined,
-            search: search.value || undefined
+            status: filterValues.value.statusFilter || undefined,
+            search: search.value || undefined,
+            sort_by: sortBy,
+            sort_order: sortOrder
         });
         
         if (response.success) {
-            antreanList.value = response.data;
+            if (append) {
+                antreanList.value = [...antreanList.value, ...response.data];
+            } else {
+                antreanList.value = response.data;
+            }
             totalItems.value = response.Paginate.Total;
+            
+            // Check if there's more data
+            const totalLoaded = currentPage.value * effectiveItemsPerPage.value;
+            hasMore.value = totalLoaded < response.Paginate.Total;
         }
     } catch (error) {
         console.error('Error fetching antrian operasi:', error);
@@ -66,19 +114,26 @@ const fetchData = async () => {
     }
 };
 
-// Watch for page changes
-watch(currentPage, () => {
-    fetchData();
-});
+// Load more for infinite scroll
+const handleLoadMore = () => {
+    if (hasMore.value && !loading.value) {
+        currentPage.value++;
+        fetchData(true);
+    }
+};
+
 
 watch(itemsPerPage, () => {
     currentPage.value = 1;
+    antreanList.value = [];
     fetchData();
 });
 
 // Watch for status filter changes
-watch(statusFilter, () => {
+watch(() => filterValues.value.statusFilter, () => {
     currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
     fetchData();
 });
 
@@ -90,10 +145,20 @@ watch(search, () => {
     }
     searchTimeout = setTimeout(() => {
         currentPage.value = 1;
+        antreanList.value = [];
+        hasMore.value = true;
         fetchData();
     }, 500); // 500ms debounce
 });
 
+// Watch for sort changes
+watch(() => filterValues.value.sortOption, () => {
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData();
+});
+
 // Initial fetch
 onMounted(() => {
     fetchData();
@@ -110,39 +175,14 @@ const showSnackbar = (message: string, color: string = 'success') => {
     snackbar.value = true;
 };
 
-const allHeaders = [
-    { title: 'Nomor', key: 'NoUrutKategori', width: '50px', align: 'center' as const, sortable: false },
-    { title: 'Nomor Spesialis', key: 'NoUrutSpesialis', width: '100px', align: 'center' as const, sortable: false },
-    { title: 'Nomor Sub Spesialis', key: 'NoUrutSubSpesialis', width: '140px', align: 'center' as const, sortable: false },
-    { 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 : 'Kategori', key: 'Kategori', sortable: false },
-    { title : 'Spesialis', key: 'Spesialis', sortable: false },
-    { title : 'Sub Spesialis', key: 'SubSpesialis', sortable: false },
-    { title: 'Status', key: 'StatusOperasi', sortable: false, width: '150px' },
-    { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
-];
-
-// Hide queue number columns when filtering
-const headers = computed(() => {
-    const isFiltering = search.value || statusFilter.value;
-    if (isFiltering) {
-        return allHeaders.filter(header => 
-            !['NoUrutKategori', 'NoUrutSpesialis', 'NoUrutSubSpesialis'].includes(header.key)
-        );
-    }
-    return allHeaders;
-});
 
 // Function to get actions based on item status
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
-        { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
+        // { icon: 'mdi-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' }
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete' }
     ];
 
     // If status is Selesai or Batal, only show View action
@@ -224,34 +264,24 @@ const handleUpdateStatusSuccess = () => {
 <template>
     <v-row>
         <v-col cols="12">
-            <v-card elevation="10">
-                <v-card-text>
-                    <div class="d-flex justify-space-between align-center mb-4">
-                        <div class="d-flex align-center w-50 ga-4">
-                        <v-text-field
-                            v-model="search"
-                            placeholder="Search..."
-                            variant="outlined"
-                            density="compact"
-                            hide-details
-                            prepend-inner-icon="mdi-magnify"
-                            style="max-width: 300px;"
-                        ></v-text-field>
-                        
-                        
-                         <v-select
-                                v-model="statusFilter"
-                                :items="statusOptions"
-                                item-title="label"
-                                item-value="value"
+             <div class="d-flex justify-space-between align-center mb-4 flex-wrap ga-3">
+                        <div class="d-flex align-center ga-3 flex-wrap" style="width: 70%;">
+                            <v-text-field
+                                v-model="search"
+                                placeholder="Search..."
                                 variant="outlined"
                                 density="compact"
                                 hide-details
-                                placeholder="Filter Status"
-                                style="max-width: 200px;"
-                            ></v-select>
+                                prepend-inner-icon="mdi-magnify"
+                                style="max-width: 300px;"
+                            ></v-text-field>
                             
+                            <FilterSortMenu 
+                                v-model="filterValues"
+                                :filters="filterOptions"
+                            />
                         </div>
+                        
                         <v-btn
                             color="primary"
                             size="large"
@@ -263,29 +293,19 @@ const handleUpdateStatusSuccess = () => {
                         </v-btn>
                     </div>
 
-                    <TableAntrian
-                        :headers="headers"
+                    <!-- Card View -->
+                    <CardAntrianList
                         :items="antreanList"
-                        :get-actions="getActionsForItem"
-                        :server-side="true"
-                        :total-items="totalItems"
-                        :current-page="currentPage"
-                        :items-per-page="itemsPerPage"
                         :loading="loading"
-                        min-width="1500px"
+                        :has-more="hasMore"
+                        :total-items="totalItems"
+                        :get-actions="getActionsForItem"
                         @view="handleView"
                         @edit="handleEdit"
                         @updateStatus="handleUpdateStatus"
                         @delete="handleDelete"
-                        @update:page="handlePageUpdate"
-                        @update:itemsPerPage="handleItemsPerPageUpdate"
-                    >
-                        <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>
+                        @loadMore="handleLoadMore"
+                    />
         </v-col>
     </v-row>
 
diff --git a/pages/antrean/kategori/[id].vue b/pages/antrean/kategori/[id].vue
index bd84a64..8201a64 100644
--- a/pages/antrean/kategori/[id].vue
+++ b/pages/antrean/kategori/[id].vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
+import CardAntrianList from '@/components/pendaftaran/CardAntrianList.vue';
+import FilterSortMenu from '@/components/pendaftaran/FilterSortMenu.vue';
 import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
 import { statusOptions, STATUS } from '~/types/antrean';
 import type { AntreanOperasi } from '~/types/antrean';
 import { Icon } from '@iconify/vue';
-import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
 
@@ -15,11 +16,18 @@ const categoryName = route.query.category as string || 'Kategori';
 // State
 const search = ref('');
 const antreanList = ref<any[]>([]);
-const statusFilter = ref<string | null>(STATUS.BELUM);
+const filterValues = ref<{
+    statusFilter: string | null;
+    sortOption: string | null;
+}>({
+    statusFilter: STATUS.BELUM,
+    sortOption: null
+});
 const loading = ref(false);
 const currentPage = ref(1);
-const itemsPerPage = ref(10);
+const itemsPerPage = ref(12); // Set to 12 for card view
 const totalItems = ref(0);
+const hasMore = ref(true);
 
 
 // Modal state
@@ -42,6 +50,29 @@ const showSnackbar = (message: string, color: string = 'success') => {
     snackbar.value = true;
 };
 
+// Define filter options
+const filterOptions = [
+    {
+        type: 'btn-group' as const,
+        label: 'Filter Status',
+        modelKey: 'statusFilter',
+        showAllOption: true,
+        options: statusOptions,
+        defaultValue: STATUS.BELUM
+    },
+    {
+        type: 'select' as const,
+        label: 'Urutkan',
+        modelKey: 'sortOption',
+        options: [
+            { label: 'Default', value: null },
+            { label: 'Tanggal Daftar ⬆', value: 'tanggal_daftar|DESC' },
+            { label: 'Tanggal Daftar ⬇', value: 'tanggal_daftar|ASC' }
+        ],
+        defaultValue: null
+    }
+];
+
 definePageMeta({
     middleware: 'auth',
     buttonBack: true
@@ -54,43 +85,63 @@ watch(() => route.query.category, (category) => {
 }, { immediate: true });
 
 // Fetch data from API
-const fetchData = async () => {
+const fetchData = async (append: boolean = false) => {
     loading.value = true;
     try {
         const offset = (currentPage.value - 1) * itemsPerPage.value;
+        let sortBy: string | undefined;
+        let sortOrder: string | undefined;
+        
+        if (filterValues.value.sortOption && filterValues.value.sortOption !== null) {
+            const parts = filterValues.value.sortOption.split('|');
+            sortBy = parts[0];
+            sortOrder = parts[1];
+        }
+        
         const response = await getAntrianOperasi({
             type: 'kategori',
             limit: itemsPerPage.value,
             offset: offset,
-            status: statusFilter.value || undefined,
+            status: filterValues.value.statusFilter || undefined,
             search: search.value || undefined,
-            type_id: idKategori
+            type_id: idKategori,
+            sort_by: sortBy,
+            sort_order: sortOrder
         });
 
         if (response.success) {
-            antreanList.value = response.data;
+            if (append) {
+                antreanList.value = [...antreanList.value, ...response.data];
+            } else {
+                antreanList.value = response.data;
+            }
             totalItems.value = response.Paginate.Total;
+            
+            // Check if there's more data
+            const totalLoaded = currentPage.value * itemsPerPage.value;
+            hasMore.value = totalLoaded < response.Paginate.Total;
         }
     } catch (error) {
         console.error('Error fetching antrian operasi:', error);
+        showSnackbar('Gagal mengambil data antrian operasi', 'error');
     } finally {
         loading.value = false;
     }
 };
 
-// Watch for page changes
-watch(currentPage, () => {
-    fetchData();
-});
-
-watch(itemsPerPage, () => {
-    currentPage.value = 1;
-    fetchData();
-});
+// Load more for infinite scroll
+const handleLoadMore = () => {
+    if (hasMore.value && !loading.value) {
+        currentPage.value++;
+        fetchData(true);
+    }
+};
 
 // Watch for status filter changes
-watch(statusFilter, () => {
+watch(() => filterValues.value.statusFilter, () => {
     currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
     fetchData();
 });
 
@@ -102,47 +153,31 @@ watch(search, () => {
     }
     searchTimeout = setTimeout(() => {
         currentPage.value = 1;
+        antreanList.value = [];
+        hasMore.value = true;
         fetchData();
     }, 500);
 });
 
+// Watch for sort changes
+watch(() => filterValues.value.sortOption, () => {
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData();
+});
+
 // Initial fetch
 onMounted(() => {
     fetchData();
 });
 
-const allHeaders = [
-    { title: 'Nomor', key: 'NoUrutKategori', width: '50px', align: 'center' as const, sortable: false },
-    { title: 'Nomor Spesialis', key: 'NoUrutSpesialis', width: '100px', align: 'center' as const, sortable: false },
-    { title: 'Nomor Sub Spesialis', key: 'NoUrutSubSpesialis', width: '140px', align: 'center' as const, sortable: false },
-    { 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 : 'Spesialis', key: 'Spesialis', sortable: false },
-    { title : 'Sub Spesialis', key: 'SubSpesialis', sortable: false },
-    { title: 'Status', key: 'StatusOperasi', sortable: false, width: '150px' },
-    { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
-];
-
-// Hide queue number columns when filtering
-const headers = computed(() => {
-    const isFiltering = search.value || (statusFilter.value && statusFilter.value !== '1') || !statusFilter.value;
-    if (isFiltering) {
-        return allHeaders.filter(header => 
-            !['NoUrutKategori', 'NoUrutSpesialis', 'NoUrutSubSpesialis'].includes(header.key)
-        );
-    }
-    return allHeaders;
-});
-
 // Function to get actions based on item status
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
-        { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
         { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
         { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
-        { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete' }
     ];
 
     // If status is Selesai or Batal, only show View action
@@ -185,7 +220,10 @@ const handleDelete = async (item: unknown) => {
             const response = await deleteAntrianOperasi(data.id);
             if (response.success) {
                 showSnackbar('Data berhasil dihapus.', 'success');
-                fetchData(); // Refresh the table after deletion
+                currentPage.value = 1;
+                antreanList.value = [];
+                hasMore.value = true;
+                fetchData(); // Refresh the data after deletion
             } else {
                 showSnackbar(response.message || 'Gagal menghapus data', 'error');
             }
@@ -196,24 +234,25 @@ const handleDelete = async (item: unknown) => {
     }
 };
 
-const handlePageUpdate = (page: unknown) => {
-    currentPage.value = page as number;
-};
-
-const handleItemsPerPageUpdate = (items: unknown) => {
-    itemsPerPage.value = items as number;
-};
-
 const handleModalSuccess = () => {
-    fetchData(); // Refresh the table after successful submission
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData(); // Refresh the data after successful submission
 };
 
 const handleEditModalSuccess = () => {
-    fetchData(); // Refresh the table after successful edit
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData(); // Refresh the data after successful edit
 };
 
 const handleUpdateStatusSuccess = () => {
-    fetchData(); // Refresh the table after status update
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData(); // Refresh the data after status update
 };
 </script>
 <template>
@@ -222,12 +261,14 @@ const handleUpdateStatusSuccess = () => {
             <v-card elevation="10">
                 <v-card-text>
                     <div class="d-flex justify-space-between align-center mb-4">
-                        <div class="d-flex align-center w-50 ga-4">
+                        <div class="d-flex align-center ga-3 w-50">
                             <v-text-field v-model="search" placeholder="Search..." variant="outlined" density="compact"
                                 hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
-                            <v-select v-model="statusFilter" :items="statusOptions" item-title="label"
-                                item-value="value" variant="outlined" density="compact" hide-details
-                                placeholder="Filter Status" style="max-width: 200px;"></v-select>
+                            
+                            <FilterSortMenu 
+                                v-model="filterValues"
+                                :filters="filterOptions"
+                            />
                         </div>
 
                         <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
@@ -236,29 +277,18 @@ const handleUpdateStatusSuccess = () => {
                         </v-btn>
                     </div>
 
-                    <TableAntrian
-                        :headers="headers"
+                    <CardAntrianList
                         :items="antreanList"
-                        :get-actions="getActionsForItem"
-                        :server-side="true"
-                        :total-items="totalItems"
-                        :current-page="currentPage"
-                        :items-per-page="itemsPerPage"
                         :loading="loading"
-                        min-width="1500px"
+                        :has-more="hasMore"
+                        :total-items="totalItems"
+                        :get-actions="getActionsForItem"
                         @view="handleView"
                         @edit="handleEdit"
                         @updateStatus="handleUpdateStatus"
                         @delete="handleDelete"
-                        @update:page="handlePageUpdate"
-                        @update:itemsPerPage="handleItemsPerPageUpdate"
-                    >
-                        <template #item.TglDaftar="{ item }">
-                            {{ new Date(item.TglDaftar).toLocaleDateString('id-ID', {
-                                year: 'numeric', month: 'short',
-                                day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
-                        </template>
-                    </TableAntrian>
+                        @loadMore="handleLoadMore"
+                    />
                 </v-card-text>
             </v-card>
         </v-col>
diff --git a/pages/antrean/list-kategori.vue b/pages/antrean/list-kategori.vue
index a7d8e6f..09fcd91 100644
--- a/pages/antrean/list-kategori.vue
+++ b/pages/antrean/list-kategori.vue
@@ -50,10 +50,10 @@ onMounted(() => {
                 md="4"
             >
                 <v-card elevation="10" class="h-100">
-                    <NuxtLink :to="`/antrean/kategori/${kategori.id_kategori}?category=${encodeURIComponent(kategori.kategori)}`" style="text-decoration: none; color: inherit;">
+                    <NuxtLink :to="`/antrean/kategori/${kategori.id_kategori}?category=${encodeURIComponent(kategori.kategori.split('-')[1]?.trim())}`" style="text-decoration: none; color: inherit;">
                         <v-card-item style="cursor: pointer;" class="v-card-item--link">
                             <div class="d-flex align-center justify-space-between">
-                                <h5 class="text-h6 font-weight-bold">{{ kategori.kategori }}</h5>
+                                <h5 class="text-h6 font-weight-bold">{{ kategori.kategori.split('-')[1]?.trim() }}</h5>
                                 <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
                             </div>
                             <v-chip class="mt-3 mb-0" color="primary" size="small">
diff --git a/pages/antrean/spesialis/[kode].vue b/pages/antrean/spesialis/[kode].vue
index 4cb75e6..556509e 100644
--- a/pages/antrean/spesialis/[kode].vue
+++ b/pages/antrean/spesialis/[kode].vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
+import CardAntrianList from '@/components/pendaftaran/CardAntrianListV2.vue';
+import FilterSortMenu from '@/components/pendaftaran/FilterSortMenu.vue';
 import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
 import { statusOptions, STATUS } from '~/types/antrean';
 import type { AntreanOperasi } from '~/types/antrean';
 import { Icon } from '@iconify/vue';
-import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
 
@@ -15,11 +17,18 @@ const spesialisName = route.query.spesialis as string || 'Spesialis';
 // State
 const search = ref('');
 const antreanList = ref<any[]>([]);
-const statusFilter = ref<string | null>(STATUS.BELUM);
+const filterValues = ref<{
+    statusFilter: string | null;
+    sortOption: string | null;
+}>({
+    statusFilter: STATUS.BELUM,
+    sortOption: null
+});
 const loading = ref(false);
 const currentPage = ref(1);
-const itemsPerPage = ref(10);
+const itemsPerPage = ref(12); // Set to 12 for card view
 const totalItems = ref(0);
+const hasMore = ref(true);
 
 // Modal state
 const showModal = ref(false);
@@ -41,6 +50,29 @@ const showSnackbar = (message: string, color: string = 'success') => {
     snackbar.value = true;
 };
 
+// Define filter options
+const filterOptions = [
+    {
+        type: 'btn-group' as const,
+        label: 'Filter Status',
+        modelKey: 'statusFilter',
+        showAllOption: true,
+        options: statusOptions,
+        defaultValue: STATUS.BELUM
+    },
+    {
+        type: 'select' as const,
+        label: 'Urutkan',
+        modelKey: 'sortOption',
+        options: [
+            { label: 'Default', value: null },
+            { label: 'Tanggal Daftar ⬆', value: 'tanggal_daftar|DESC' },
+            { label: 'Tanggal Daftar ⬇', value: 'tanggal_daftar|ASC' }
+        ],
+        defaultValue: null
+    }
+];
+
 definePageMeta({
   middleware: 'auth',
   buttonBack: true
@@ -53,43 +85,63 @@ watch(() => route.query.spesialis, (spesialis) => {
 }, { immediate: true });
 
 // Fetch data from API
-const fetchData = async () => {
+const fetchData = async (append: boolean = false) => {
     loading.value = true;
     try {
         const offset = (currentPage.value - 1) * itemsPerPage.value;
+        let sortBy: string | undefined;
+        let sortOrder: string | undefined;
+        
+        if (filterValues.value.sortOption && filterValues.value.sortOption !== null) {
+            const parts = filterValues.value.sortOption.split('|');
+            sortBy = parts[0];
+            sortOrder = parts[1];
+        }
+        
         const response = await getAntrianOperasi({
             type: 'spesialis',
             limit: itemsPerPage.value,
             offset: offset,
-            status: statusFilter.value || undefined,
+            status: filterValues.value.statusFilter || undefined,
             search: search.value || undefined,
-            type_id: kodeSpesialis
+            type_id: kodeSpesialis,
+            sort_by: sortBy,
+            sort_order: sortOrder
         });
 
         if (response.success) {
-            antreanList.value = response.data;
+            if (append) {
+                antreanList.value = [...antreanList.value, ...response.data];
+            } else {
+                antreanList.value = response.data;
+            }
             totalItems.value = response.Paginate.Total;
+            
+            // Check if there's more data
+            const totalLoaded = currentPage.value * itemsPerPage.value;
+            hasMore.value = totalLoaded < response.Paginate.Total;
         }
     } catch (error) {
         console.error('Error fetching antrian operasi:', error);
+        showSnackbar('Gagal mengambil data antrian operasi', 'error');
     } finally {
         loading.value = false;
     }
 };
 
-// Watch for page changes
-watch(currentPage, () => {
-    fetchData();
-});
-
-watch(itemsPerPage, () => {
-    currentPage.value = 1;
-    fetchData();
-});
+// Load more for infinite scroll
+const handleLoadMore = () => {
+    if (hasMore.value && !loading.value) {
+        currentPage.value++;
+        fetchData(true);
+    }
+};
 
 // Watch for status filter changes
-watch(statusFilter, () => {
+watch(() => filterValues.value.statusFilter, () => {
     currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
     fetchData();
 });
 
@@ -101,44 +153,29 @@ watch(search, () => {
     }
     searchTimeout = setTimeout(() => {
         currentPage.value = 1;
+        antreanList.value = [];
+        hasMore.value = true;
         fetchData();
     }, 500);
 });
 
+// Watch for sort changes
+watch(() => filterValues.value.sortOption, () => {
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData();
+});
+
 // Initial fetch
 onMounted(() => {
     fetchData();
 });
 
-const allHeaders = [
-    { 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 : 'Kategori', key: 'Kategori', sortable: false },
-    { title : 'Spesialis', key: 'Spesialis', sortable: false },
-    { title : 'Sub Spesialis', key: 'SubSpesialis', sortable: false },
-    { title: 'Status', key: 'StatusOperasi', sortable: false, width: '150px' },
-    { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
-];
-
-// Hide queue number columns when filtering
-const headers = computed(() => {
-    const isFiltering = search.value || (statusFilter.value && statusFilter.value !== '1') || !statusFilter.value;
-    if (isFiltering) {
-        return allHeaders.filter(header => 
-            !['NoUrutSpesialis', 'NoUrutSubSpesialis'].includes(header.key)
-        );
-    }
-    return allHeaders;
-});
 
 // Function to get actions based on item status
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
-        { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
         { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
         { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
         { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
@@ -184,7 +221,10 @@ const handleDelete = async (item: unknown) => {
             const response = await deleteAntrianOperasi(data.id);
             if (response.success) {
                 showSnackbar('Data berhasil dihapus.', 'success');
-                fetchData(); // Refresh the table after deletion
+                currentPage.value = 1;
+                antreanList.value = [];
+                hasMore.value = true;
+                fetchData(); // Refresh the data after deletion
             } else {
                 showSnackbar(response.message || 'Gagal menghapus data', 'error');
             }
@@ -195,24 +235,25 @@ const handleDelete = async (item: unknown) => {
     }
 };
 
-const handlePageUpdate = (page: unknown) => {
-    currentPage.value = page as number;
-};
-
-const handleItemsPerPageUpdate = (items: unknown) => {
-    itemsPerPage.value = items as number;
-};
-
 const handleModalSuccess = () => {
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
     fetchData();
 };
 
 const handleEditModalSuccess = () => {
-    fetchData(); // Refresh the table after successful edit
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData(); // Refresh the data after successful edit
 };
 
 const handleUpdateStatusSuccess = () => {
-    fetchData(); // Refresh the table after status update
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData(); // Refresh the data after status update
 };
 </script>
 
@@ -222,12 +263,14 @@ const handleUpdateStatusSuccess = () => {
             <v-card elevation="10">
                 <v-card-text>
                     <div class="d-flex justify-space-between align-center mb-4">
-                        <div class="d-flex align-center w-50 ga-4">
+                        <div class="d-flex align-center ga-3 w-50">
                             <v-text-field v-model="search" placeholder="Search..." variant="outlined" density="compact"
                                 hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
-                            <v-select v-model="statusFilter" :items="statusOptions" item-title="label"
-                                item-value="value" variant="outlined" density="compact" hide-details
-                                placeholder="Filter Status" style="max-width: 200px;"></v-select>
+                            
+                            <FilterSortMenu 
+                                v-model="filterValues"
+                                :filters="filterOptions"
+                            />
                         </div>
 
                         <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
@@ -236,29 +279,18 @@ const handleUpdateStatusSuccess = () => {
                         </v-btn>
                     </div>
 
-                    <TableAntrian
-                        :headers="headers"
+                    <CardAntrianList
                         :items="antreanList"
-                        :get-actions="getActionsForItem"
-                        :server-side="true"
-                        :total-items="totalItems"
-                        :current-page="currentPage"
-                        :items-per-page="itemsPerPage"
                         :loading="loading"
-                        min-width="1500px"
+                        :has-more="hasMore"
+                        :total-items="totalItems"
+                        :get-actions="getActionsForItem"
                         @view="handleView"
                         @edit="handleEdit"
                         @updateStatus="handleUpdateStatus"
                         @delete="handleDelete"
-                        @update:page="handlePageUpdate"
-                        @update:itemsPerPage="handleItemsPerPageUpdate"
-                    >
-                        <template #item.TglDaftar="{ item }">
-                            {{ new Date(item.TglDaftar).toLocaleDateString('id-ID', {
-                                year: 'numeric', month: 'short',
-                                day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
-                        </template>
-                    </TableAntrian>
+                        @loadMore="handleLoadMore"
+                    />
                 </v-card-text>
             </v-card>
         </v-col>
diff --git a/pages/antrean/subspesialis/[kode].vue b/pages/antrean/subspesialis/[kode].vue
index cb87e13..ebed0d8 100644
--- a/pages/antrean/subspesialis/[kode].vue
+++ b/pages/antrean/subspesialis/[kode].vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
+import CardAntrianList from '@/components/pendaftaran/CardAntrianList.vue';
+import FilterSortMenu from '@/components/pendaftaran/FilterSortMenu.vue';
 import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
 import { statusOptions, STATUS } from '~/types/antrean';
 import type { AntreanOperasi } from '~/types/antrean';
 import { Icon } from '@iconify/vue';
-import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
+import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
 
@@ -16,11 +17,18 @@ 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 filterValues = ref<{
+    statusFilter: string | null;
+    sortOption: string | null;
+}>({
+    statusFilter: STATUS.BELUM,
+    sortOption: null
+});
 const loading = ref(false);
 const currentPage = ref(1);
-const itemsPerPage = ref(10);
+const itemsPerPage = ref(12); // Set to 12 for card view
 const totalItems = ref(0);
+const hasMore = ref(true);
 
 // Modal state
 const showModal = ref(false);
@@ -42,6 +50,29 @@ const showSnackbar = (message: string, color: string = 'success') => {
     snackbar.value = true;
 };
 
+// Define filter options
+const filterOptions = [
+    {
+        type: 'btn-group' as const,
+        label: 'Filter Status',
+        modelKey: 'statusFilter',
+        showAllOption: true,
+        options: statusOptions,
+        defaultValue: STATUS.BELUM
+    },
+    {
+        type: 'select' as const,
+        label: 'Urutkan',
+        modelKey: 'sortOption',
+        options: [
+            { label: 'Default', value: null },
+            { label: 'Tanggal Daftar ⬆', value: 'tanggal_daftar|DESC' },
+            { label: 'Tanggal Daftar ⬇', value: 'tanggal_daftar|ASC' }
+        ],
+        defaultValue: null
+    }
+];
+
 definePageMeta({
   middleware: 'auth',
   buttonBack: true
@@ -54,43 +85,63 @@ watch(() => route.query.subspecialis, (subspecialis) => {
 }, { immediate: true });
 
 // Fetch data from API
-const fetchData = async () => {
+const fetchData = async (append: boolean = false) => {
     loading.value = true;
     try {
         const offset = (currentPage.value - 1) * itemsPerPage.value;
+        let sortBy: string | undefined;
+        let sortOrder: string | undefined;
+        
+        if (filterValues.value.sortOption && filterValues.value.sortOption !== null) {
+            const parts = filterValues.value.sortOption.split('|');
+            sortBy = parts[0];
+            sortOrder = parts[1];
+        }
+        
         const response = await getAntrianOperasi({
             type: 'sub-spesialis',
             limit: itemsPerPage.value,
             offset: offset,
-            status: statusFilter.value || undefined,
+            status: filterValues.value.statusFilter || undefined,
             search: search.value || undefined,
-            type_id: kodeSubSpesialis
+            type_id: kodeSubSpesialis,
+            sort_by: sortBy,
+            sort_order: sortOrder
         });
 
         if (response.success) {
-            antreanList.value = response.data;
+            if (append) {
+                antreanList.value = [...antreanList.value, ...response.data];
+            } else {
+                antreanList.value = response.data;
+            }
             totalItems.value = response.Paginate.Total;
+            
+            // Check if there's more data
+            const totalLoaded = currentPage.value * itemsPerPage.value;
+            hasMore.value = totalLoaded < response.Paginate.Total;
         }
     } catch (error) {
         console.error('Error fetching antrian operasi:', error);
+        showSnackbar('Gagal mengambil data antrian operasi', 'error');
     } finally {
         loading.value = false;
     }
 };
 
-// Watch for page changes
-watch(currentPage, () => {
-    fetchData();
-});
-
-watch(itemsPerPage, () => {
-    currentPage.value = 1;
-    fetchData();
-});
+// Load more for infinite scroll
+const handleLoadMore = () => {
+    if (hasMore.value && !loading.value) {
+        currentPage.value++;
+        fetchData(true);
+    }
+};
 
 // Watch for status filter changes
-watch(statusFilter, () => {
+watch(() => filterValues.value.statusFilter, () => {
     currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
     fetchData();
 });
 
@@ -102,46 +153,31 @@ watch(search, () => {
     }
     searchTimeout = setTimeout(() => {
         currentPage.value = 1;
+        antreanList.value = [];
+        hasMore.value = true;
         fetchData();
     }, 500);
 });
 
+// Watch for sort changes
+watch(() => filterValues.value.sortOption, () => {
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData();
+});
+
 // Initial fetch
 onMounted(() => {
     fetchData();
 });
 
-const allHeaders = [
-    { 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 : 'Kategori', key: 'Kategori', sortable: false },
-    { title : 'Spesialis', key: 'Spesialis', sortable: false },
-    { title : 'Sub Spesialis', key: 'SubSpesialis', sortable: false },
-    { title: 'Status', key: 'StatusOperasi', sortable: false, width: '150px' },
-    { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
-];
-
-// Hide queue number columns when filtering
-const headers = computed(() => {
-    const isFiltering = search.value || (statusFilter.value && statusFilter.value !== '1') || !statusFilter.value;
-    if (isFiltering) {
-        return allHeaders.filter(header => 
-            !['NoUrutSubSpesialis'].includes(header.key)
-        );
-    }
-    return allHeaders;
-});
-
 // Function to get actions based on item status
 const getActionsForItem = (item: AntreanOperasi) => {
     const allActions = [
-        { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
         { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
         { icon: 'mdi-clipboard-check', color: 'success', tooltip: 'Update Status', event: 'updateStatus' },
-        { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+        { icon: 'mdi-delete', color: 'error', tooltip: 'Hapus', event: 'delete' }
     ];
 
     // If status is Selesai or Batal, only show View action
@@ -184,7 +220,10 @@ const handleDelete = async (item: unknown) => {
             const response = await deleteAntrianOperasi(data.id);
             if (response.success) {
                 showSnackbar('Data berhasil dihapus.', 'success');
-                fetchData(); // Refresh the table after deletion
+                currentPage.value = 1;
+                antreanList.value = [];
+                hasMore.value = true;
+                fetchData(); // Refresh the data after deletion
             } else {
                 showSnackbar(response.message || 'Gagal menghapus data', 'error');
             }
@@ -195,24 +234,25 @@ const handleDelete = async (item: unknown) => {
     }
 };
 
-const handlePageUpdate = (page: unknown) => {
-    currentPage.value = page as number;
-};
-
-const handleItemsPerPageUpdate = (items: unknown) => {
-    itemsPerPage.value = items as number;
-};
-
 const handleModalSuccess = () => {
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
     fetchData();
 };
 
 const handleEditModalSuccess = () => {
-    fetchData(); // Refresh the table after successful edit
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData(); // Refresh the data after successful edit
 };
 
 const handleUpdateStatusSuccess = () => {
-    fetchData(); // Refresh the table after status update
+    currentPage.value = 1;
+    antreanList.value = [];
+    hasMore.value = true;
+    fetchData(); // Refresh the data after status update
 };
 
 </script>
@@ -223,12 +263,14 @@ const handleUpdateStatusSuccess = () => {
             <v-card elevation="10">
                 <v-card-text>
                     <div class="d-flex justify-space-between align-center mb-4">
-                        <div class="d-flex align-center w-50 ga-4">
+                        <div class="d-flex align-center ga-3 w-50">
                             <v-text-field v-model="search" placeholder="Search..." variant="outlined" density="compact"
                                 hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
-                            <v-select v-model="statusFilter" :items="statusOptions" item-title="label"
-                                item-value="value" variant="outlined" density="compact" hide-details
-                                placeholder="Filter Status" style="max-width: 200px;"></v-select>
+                            
+                            <FilterSortMenu 
+                                v-model="filterValues"
+                                :filters="filterOptions"
+                            />
                         </div>
 
                         <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
@@ -237,29 +279,18 @@ const handleUpdateStatusSuccess = () => {
                         </v-btn>
                     </div>
 
-                    <TableAntrian
-                        :headers="headers"
+                    <CardAntrianList
                         :items="antreanList"
-                        :get-actions="getActionsForItem"
-                        :server-side="true"
-                        :total-items="totalItems"
-                        :current-page="currentPage"
-                        :items-per-page="itemsPerPage"
                         :loading="loading"
-                        min-width="1500px"
+                        :has-more="hasMore"
+                        :total-items="totalItems"
+                        :get-actions="getActionsForItem"
                         @view="handleView"
                         @edit="handleEdit"
                         @updateStatus="handleUpdateStatus"
                         @delete="handleDelete"
-                        @update:page="handlePageUpdate"
-                        @update:itemsPerPage="handleItemsPerPageUpdate"
-                    >
-                        <template #item.TglDaftar="{ item }">
-                            {{ new Date(item.TglDaftar).toLocaleDateString('id-ID', {
-                                year: 'numeric', month: 'short',
-                                day: 'numeric', hour: 'numeric', minute: 'numeric' }) }}
-                        </template>
-                    </TableAntrian>
+                        @loadMore="handleLoadMore"
+                    />
                 </v-card-text>
             </v-card>
         </v-col>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 0aa756f..952214e 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -254,7 +254,7 @@ const pieChartOptions = ref({
         height: 350
     },
     labels: ['Belum', 'Selesai', 'Tunda', 'Batal'],
-    colors: ['#5D87FF', '#13DEB9', '#FFAE1F', '#FA896B'],
+    colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
     legend: {
         position: 'bottom'
     },
@@ -292,8 +292,8 @@ const pieKategoriChartOptions = computed(() => ({
         type: 'pie',
         height: 350
     },
-    labels: kategoriAntrianData.value.map(item => item.kategori),
-    colors: ['#5D87FF', '#13DEB9', '#FFAE1F', '#FA896B', '#9C27B0', '#E91E63', '#00BCD4', '#4CAF50'],
+    labels: kategoriAntrianData.value.map(item => item.kategori.split('-')[1]?.trim() ),
+    colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444', '#9C27B0', '#E91E63', '#00BCD4', '#4CAF50'],
     legend: {
         position: 'bottom'
     },
@@ -320,7 +320,7 @@ const pieKategoriChartSeries = computed(() => {
     return kategoriAntrianData.value.map(item => item.jumlah);
 });
 
-// Data untuk Line Chart - Antrian Per Hari dalam 1 Bulan
+// Data untuk Column Chart - Antrian Per Hari dalam 1 Bulan
 const lineChartOptions = computed(() => {
     const monthName = months[selectedMonth.value].text.substring(0, 3);
     
@@ -334,8 +334,9 @@ const lineChartOptions = computed(() => {
     
     return {
         chart: {
-            type: 'line',
+            type: 'bar',
             height: 350,
+            stacked: true,
             toolbar: {
                 show: true
             },
@@ -343,13 +344,21 @@ const lineChartOptions = computed(() => {
                 enabled: true
             }
         },
-        colors: ['#5D87FF', '#13DEB9', '#FFAE1F', '#FA896B'],
+        colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                columnWidth: '55%',
+                borderRadius: 4
+            }
+        },
         dataLabels: {
             enabled: false
         },
         stroke: {
-            curve: 'smooth',
-            width: 3
+            show: true,
+            width: 2,
+            colors: ['transparent']
         },
         xaxis: {
             categories: categories,
@@ -366,16 +375,17 @@ const lineChartOptions = computed(() => {
             position: 'top',
             horizontalAlign: 'left'
         },
-        grid: {
-            borderColor: '#e7e7e7',
-            row: {
-                colors: ['#f3f3f3', 'transparent'],
-                opacity: 0.5
-            }
+        fill: {
+            opacity: 1
         },
         tooltip: {
             shared: true,
-            intersect: false
+            intersect: false,
+            y: {
+                formatter: function (val: number) {
+                    return val + ' antrian'
+                }
+            }
         }
     };
 });
@@ -418,27 +428,172 @@ const antrianPerSpesialis = ref<Array<{ spesialis: string; total: number; belum:
 // Data antrian per subspesialis - populated from API
 const antrianPerSubspesialis = ref<Array<{ spesialis: string; subspesialis: string; total: number; belum: number; selesai: number; tunda: number; batal: number }>>([]);
 
-const searchSpesialis = ref('');
-const searchSubspesialis = ref('');
+// Chart options untuk Antrian Per Spesialis
+const spesialisChartOptions = computed(() => ({
+    chart: {
+        type: 'bar',
+        height: 400,
+        stacked: true,
+        toolbar: {
+            show: true
+        }
+    },
+    colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
+    plotOptions: {
+        bar: {
+            horizontal: true,
+            borderRadius: 6,
+            dataLabels: {
+                total: {
+                    enabled: true,
+                    style: {
+                        fontSize: '12px',
+                        fontWeight: 600
+                    }
+                }
+            }
+        }
+    },
+    dataLabels: {
+        enabled: false
+    },
+    stroke: {
+        show: true,
+        width: 1,
+        colors: ['#fff']
+    },
+    xaxis: {
+        categories: antrianPerSpesialis.value.map(item => item.spesialis),
+        title: {
+            text: 'Jumlah Antrian'
+        }
+    },
+    yaxis: {
+        title: {
+            text: 'Spesialis'
+        }
+    },
+    legend: {
+        position: 'top',
+        horizontalAlign: 'left',
+        offsetX: 40
+    },
+    fill: {
+        opacity: 1
+    },
+    tooltip: {
+        y: {
+            formatter: function (val: number) {
+                return val + ' antrian'
+            }
+        }
+    }
+}));
 
-const headersSpesialis = [
-    { title: 'Spesialis', key: 'spesialis' },
-    { title: 'Total', key: 'total', align: 'center' as const },
-    { title: 'Belum', key: 'belum', align: 'center' as const },
-    { title: 'Selesai', key: 'selesai', align: 'center' as const },
-    { title: 'Tunda', key: 'tunda', align: 'center' as const },
-    { title: 'Batal', key: 'batal', align: 'center' as const }
-];
+const spesialisChartSeries = computed(() => [
+    {
+        name: 'Belum',
+        data: antrianPerSpesialis.value.map(item => item.belum)
+    },
+    {
+        name: 'Selesai',
+        data: antrianPerSpesialis.value.map(item => item.selesai)
+    },
+    {
+        name: 'Tunda',
+        data: antrianPerSpesialis.value.map(item => item.tunda)
+    },
+    {
+        name: 'Batal',
+        data: antrianPerSpesialis.value.map(item => item.batal)
+    }
+]);
 
-const headersSubspesialis = [
-    { title: 'Spesialis', key: 'spesialis' },
-    { title: 'Subspesialis', key: 'subspesialis' },
-    { title: 'Total', key: 'total', align: 'center' as const },
-    { title: 'Belum', key: 'belum', align: 'center' as const },
-    { title: 'Selesai', key: 'selesai', align: 'center' as const },
-    { title: 'Tunda', key: 'tunda', align: 'center' as const },
-    { title: 'Batal', key: 'batal', align: 'center' as const }
-];
+// Chart options untuk Antrian Per Subspesialis
+const subspesialisChartOptions = computed(() => ({
+    chart: {
+        type: 'bar',
+        height: 400,
+        stacked: true,
+        toolbar: {
+            show: true
+        }
+    },
+    colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
+    plotOptions: {
+        bar: {
+            horizontal: true,
+            borderRadius: 6,
+            dataLabels: {
+                total: {
+                    enabled: true,
+                    style: {
+                        fontSize: '11px',
+                        fontWeight: 600
+                    }
+                }
+            }
+        }
+    },
+    dataLabels: {
+        enabled: false
+    },
+    stroke: {
+        show: true,
+        width: 1,
+        colors: ['#fff']
+    },
+    xaxis: {
+        categories: antrianPerSubspesialis.value.map(item => `${item.subspesialis} (${item.spesialis})`),
+        title: {
+            text: 'Jumlah Antrian'
+        }
+    },
+    yaxis: {
+        title: {
+            text: 'Subspesialis'
+        },
+        labels: {
+            style: {
+                fontSize: '11px'
+            }
+        }
+    },
+    legend: {
+        position: 'top',
+        horizontalAlign: 'left',
+        offsetX: 40
+    },
+    fill: {
+        opacity: 1
+    },
+    tooltip: {
+        y: {
+            formatter: function (val: number) {
+                return val + ' antrian'
+            }
+        }
+    }
+}));
+
+const subspesialisChartSeries = computed(() => [
+    {
+        name: 'Belum',
+        data: antrianPerSubspesialis.value.map(item => item.belum)
+    },
+    {
+        name: 'Selesai',
+        data: antrianPerSubspesialis.value.map(item => item.selesai)
+    },
+    {
+        name: 'Tunda',
+        data: antrianPerSubspesialis.value.map(item => item.tunda)
+    },
+    {
+        name: 'Batal',
+        data: antrianPerSubspesialis.value.map(item => item.batal)
+    }
+]);
 
 // Watch untuk refetch data saat bulan atau tahun berubah
 watch([selectedMonth, selectedYear], () => {
@@ -586,7 +741,7 @@ definePageMeta({
     <v-row>
         <!-- Status Cards -->
         <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 elevation="10" class="bg-primary" style="background: linear-gradient(135deg, #708DD9 0%, #4C71CF 100%);">
                 <v-card-item>
                     <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
                         <v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
@@ -609,7 +764,7 @@ definePageMeta({
         </v-col>
 
         <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 elevation="10" class="bg-success" style="background: linear-gradient(135deg, #59B6BA 0%, #2FA4A9 100%);">
                 <v-card-item>
                     <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
                         <v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
@@ -632,7 +787,7 @@ definePageMeta({
         </v-col>
 
         <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 elevation="10" class="bg-warning" style="background: linear-gradient(135deg, #F38A35 0%, #F06D02 100%);">
                 <v-card-item>
                     <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
                         <v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
@@ -655,7 +810,7 @@ definePageMeta({
         </v-col>
 
         <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 elevation="10" class="bg-error" style="background: linear-gradient(135deg, #F26969 0%, #EF4444 100%);">
                 <v-card-item>
                     <div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
                         <v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
@@ -696,7 +851,7 @@ definePageMeta({
                     <ClientOnly v-else>
                         <VueApexCharts 
                             :key="`pie-status-${selectedMonth}-${selectedYear}`"
-                            type="pie" 
+                            type="donut" 
                             height="350" 
                             :options="pieChartOptions" 
                             :series="pieChartSeries"
@@ -753,8 +908,8 @@ definePageMeta({
                     </div>
                     <ClientOnly v-else>
                         <VueApexCharts 
-                            :key="`line-${selectedMonth}-${selectedYear}`"
-                            type="line" 
+                            :key="`column-${selectedMonth}-${selectedYear}`"
+                            type="bar" 
                             height="350" 
                             :options="lineChartOptions" 
                             :series="lineChartSeries"
@@ -764,98 +919,72 @@ definePageMeta({
             </v-card>
         </v-col>
 
-        <!-- Table Antrian Per Spesialis -->
+        <!-- Chart Antrian Per Spesialis -->
         <v-col cols="12" lg="6">
             <v-card elevation="10">
                 <v-card-item>
                     <div class="d-flex align-center justify-space-between mb-4">
                         <h5 class="text-h5 font-weight-bold">Antrean Per Spesialis</h5>
                         <v-avatar size="40" class="rounded-md bg-lightprimary">
-                            <Icon icon="solar:users-group-rounded-outline" class="text-primary" height="22" />
+                            <Icon icon="solar:chart-square-bold" class="text-primary" height="22" />
                         </v-avatar>
                     </div>
                 </v-card-item>
                 <v-divider></v-divider>
-                <v-card-text class="pa-0">
-                    <div v-if="loadingAntrianPerSpesialis" class="d-flex justify-center align-center pa-8" style="min-height: 300px;">
+                <v-card-text>
+                    <div v-if="loadingAntrianPerSpesialis" class="d-flex justify-center align-center" style="min-height: 400px;">
                         <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
                     </div>
-                    <v-data-table v-else :headers="headersSpesialis" :items="antrianPerSpesialis" :search="searchSpesialis"
-                        :items-per-page="10" class="border-0" hide-default-footer>
-                        <template v-slot:item.total="{ item }">
-                            <v-chip size="small" color="primary" variant="tonal">
-                                {{ item.total }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.belum="{ item }">
-                            <v-chip size="small" color="info" variant="tonal">
-                                {{ item.belum }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.selesai="{ item }">
-                            <v-chip size="small" color="success" variant="tonal">
-                                {{ item.selesai }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.tunda="{ item }">
-                            <v-chip size="small" color="warning" variant="tonal">
-                                {{ item.tunda }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.batal="{ item }">
-                            <v-chip size="small" color="error" variant="tonal">
-                                {{ item.batal }}
-                            </v-chip>
-                        </template>
-                    </v-data-table>
+                    <div v-else-if="antrianPerSpesialis.length === 0" class="d-flex justify-center align-center" style="min-height: 400px;">
+                        <div class="text-center">
+                            <Icon icon="solar:chart-square-outline" height="64" class="text-medium-emphasis mb-4" />
+                            <p class="text-body-1 text-medium-emphasis">Tidak ada data antrian</p>
+                        </div>
+                    </div>
+                    <ClientOnly v-else>
+                        <VueApexCharts 
+                            :key="`spesialis-${selectedMonth}-${selectedYear}`"
+                            type="bar" 
+                            height="400" 
+                            :options="spesialisChartOptions" 
+                            :series="spesialisChartSeries"
+                        ></VueApexCharts>
+                    </ClientOnly>
                 </v-card-text>
             </v-card>
         </v-col>
 
-        <!-- Table Antrian Per Subspesialis -->
+        <!-- Chart Antrian Per Subspesialis -->
         <v-col cols="12" lg="6">
             <v-card elevation="10">
                 <v-card-item>
                     <div class="d-flex align-center justify-space-between mb-4">
                         <h5 class="text-h5 font-weight-bold">Antrean Per Subspesialis</h5>
                         <v-avatar size="40" class="rounded-md bg-lightsecondary">
-                            <Icon icon="solar:users-group-two-rounded-outline" class="text-secondary" height="22" />
+                            <Icon icon="solar:chart-square-bold" class="text-secondary" height="22" />
                         </v-avatar>
                     </div>
                 </v-card-item>
                 <v-divider></v-divider>
-                <v-card-text class="pa-0">
-                    <div v-if="loadingAntrianPerSubspesialis" class="d-flex justify-center align-center pa-8" style="min-height: 300px;">
+                <v-card-text>
+                    <div v-if="loadingAntrianPerSubspesialis" class="d-flex justify-center align-center" style="min-height: 400px;">
                         <v-progress-circular indeterminate color="secondary" size="64"></v-progress-circular>
                     </div>
-                    <v-data-table v-else :headers="headersSubspesialis" :items="antrianPerSubspesialis"
-                        :search="searchSubspesialis" :items-per-page="10" class="border-0" hide-default-footer>
-                        <template v-slot:item.total="{ item }">
-                            <v-chip size="small" color="primary" variant="tonal">
-                                {{ item.total }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.belum="{ item }">
-                            <v-chip size="small" color="info" variant="tonal">
-                                {{ item.belum }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.selesai="{ item }">
-                            <v-chip size="small" color="success" variant="tonal">
-                                {{ item.selesai }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.tunda="{ item }">
-                            <v-chip size="small" color="warning" variant="tonal">
-                                {{ item.tunda }}
-                            </v-chip>
-                        </template>
-                        <template v-slot:item.batal="{ item }">
-                            <v-chip size="small" color="error" variant="tonal">
-                                {{ item.batal }}
-                            </v-chip>
-                        </template>
-                    </v-data-table>
+                    <div v-else-if="antrianPerSubspesialis.length === 0" class="d-flex justify-center align-center" style="min-height: 400px;">
+                        <div class="text-center">
+                            <Icon icon="solar:chart-square-outline" height="64" class="text-medium-emphasis mb-4" />
+                            <p class="text-body-1 text-medium-emphasis">Tidak ada data antrian</p>
+                        </div>
+                    </div>
+                    <ClientOnly v-else>
+                        <VueApexCharts 
+                            :key="`subspesialis-${selectedMonth}-${selectedYear}`"
+                            type="bar" 
+                            height="400" 
+                            :options="subspesialisChartOptions" 
+                            :series="subspesialisChartSeries"
+                        ></VueApexCharts>
+                    </ClientOnly>
                 </v-card-text>
             </v-card>
         </v-col>
diff --git a/scss/_override.scss b/scss/_override.scss
index 05bfcca..bb874f1 100644
--- a/scss/_override.scss
+++ b/scss/_override.scss
@@ -171,4 +171,8 @@ html {
 }
 .grey-skeleton .v-skeleton-loader__bone .v-skeleton-loader__text {
   background: #e0e0e0 !important;
+}
+
+.bg-white {
+    background-color: white !important;
 }
\ No newline at end of file
diff --git a/services/antrean.ts b/services/antrean.ts
index 1a0aed6..c02b752 100644
--- a/services/antrean.ts
+++ b/services/antrean.ts
@@ -1,9 +1,9 @@
 import api from './api'
 
-export const getAntrianOperasi = async (params: { type?: string; limit?: number; offset?: number; status?: string | undefined; search?: string | undefined; type_id?: string | undefined } = {}) => {
-  const { type = 'all', limit = 10, offset = 0, status = undefined, search = undefined, type_id = undefined } = params
+export const getAntrianOperasi = async (params: { type?: string; limit?: number; offset?: number; status?: string | undefined; search?: string | undefined; type_id?: string | undefined; sort_by?: string | undefined; sort_order?: string | undefined } = {}) => {
+  const { type = 'all', limit = 10, offset = 0, status = undefined, search = undefined, type_id = undefined, sort_by = undefined, sort_order = undefined } = params
   const response = await api.get('/antrian-operasi', {
-    params: { type, limit, offset, status, search, type_id }
+    params: { type, limit, offset, status, search, type_id, sort_by, sort_order }
   })
   return response.data
 }
diff --git a/types/antrean.ts b/types/antrean.ts
index bb8e5d8..f647017 100644
--- a/types/antrean.ts
+++ b/types/antrean.ts
@@ -8,6 +8,13 @@ export const STATUS = {
     BATAL: '4'
 } as const;
 
+export const statusLabels = {
+    [STATUS.BELUM]: 'Belum',
+    [STATUS.SELESAI]: 'Selesai',
+    [STATUS.TUNDA]: 'Tunda',
+    [STATUS.BATAL]: 'Batal'
+};
+
 export const statusOptions = [
     { value: null, label: 'Semua Status' },
     { value: STATUS.BELUM, label: 'Belum' },
diff --git a/utils/helpers.ts b/utils/helpers.ts
index 9e8be24..14ef707 100644
--- a/utils/helpers.ts
+++ b/utils/helpers.ts
@@ -253,3 +253,12 @@ export function truncate(
     
     return value.substring(0, length) + suffix;
 }
+
+export function formatDate(date: string | Date | null | undefined, options?: Intl.DateTimeFormatOptions): string {
+    if (!date) return '-';
+    return new Date(date).toLocaleDateString('id-ID', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+};
\ No newline at end of file