diff --git a/components/layout/full/vertical-sidebar/sidebarItem.ts b/components/layout/full/vertical-sidebar/sidebarItem.ts
index fa8c080..9f651cd 100644
--- a/components/layout/full/vertical-sidebar/sidebarItem.ts
+++ b/components/layout/full/vertical-sidebar/sidebarItem.ts
@@ -37,12 +37,33 @@ const sidebarItem: menu[] = [
               icon: 'cart-3-line-duotone',
               to: '/antrean/all',
           },
+          {
+              title: 'Kategori',
+              icon: 'layers-line-duotone',
+              to: '/antrean/list-kategori'
+          },
           {
               title: 'Spesialis',
               icon: 'widget-4-line-duotone',
               to: '/antrean/list-spesialis'
           }
       ]
+  },
+  {
+      header: 'pengaturan',
+      id: 1,
+      children: [
+          {
+              title: 'Hak Akses',
+              icon: 'settings-line-duotone',
+              to: '/setting/hak-akses',
+          },
+          {
+              title: 'User',
+              icon: 'user-line-duotone',
+              to: '/setting/user'
+          }
+      ]
   }
 ];
 
diff --git a/components/pendaftaran/BiodataPasien.vue b/components/pendaftaran/BiodataPasien.vue
index 169d7e9..87f74e6 100644
--- a/components/pendaftaran/BiodataPasien.vue
+++ b/components/pendaftaran/BiodataPasien.vue
@@ -14,10 +14,25 @@ const rules = {
     required: (value: string) => !!value || 'Field ini wajib diisi'
 };
 
+// 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).';
+};
+
 // Modal state
 const showModal = ref(false);
 const newPhoneNumber = ref('');
 const editingIndex = ref<number | null>(null);
+const phoneError = ref<string | boolean>(true);
 
 // Initialize nomorTelepon as array if not already
 if (!Array.isArray(formData.value.nomorTelepon)) {
@@ -27,18 +42,19 @@ if (!Array.isArray(formData.value.nomorTelepon)) {
 const openAddModal = () => {
     newPhoneNumber.value = '';
     editingIndex.value = null;
+    phoneError.value = true;
     showModal.value = true;
 };
 
 const editPhoneNumber = (index: number) => {
     const phone = formData.value.nomorTelepon[index];
-    // Remove +62 prefix for editing
-    newPhoneNumber.value = phone.startsWith('+62') ? phone.substring(3) : phone;
+    newPhoneNumber.value = phone;
     editingIndex.value = index;
+    phoneError.value = true;
     showModal.value = true;
 };
 
-// Handle only numeric input
+// Handle only numeric input and validate
 const handlePhoneInput = (event: Event) => {
     const input = event.target as HTMLInputElement;
     const value = input.value;
@@ -46,22 +62,42 @@ const handlePhoneInput = (event: Event) => {
     // 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 savePhoneNumber = () => {
     if (!newPhoneNumber.value.trim()) return;
     
-    const fullPhoneNumber = `+62${newPhoneNumber.value}`;
+    // Validate before saving
+    const lengthValidation = phoneLength(newPhoneNumber.value);
+    const formatValidation = indonesianPhoneFormat(newPhoneNumber.value);
     
+    if (lengthValidation !== true || formatValidation !== true) {
+        return;
+    }
+    
+    // Save directly as 08xxx format
     if (editingIndex.value !== null) {
-        formData.value.nomorTelepon[editingIndex.value] = fullPhoneNumber;
+        formData.value.nomorTelepon[editingIndex.value] = newPhoneNumber.value;
     } else {
-        formData.value.nomorTelepon.push(fullPhoneNumber);
+        formData.value.nomorTelepon.push(newPhoneNumber.value);
     }
     
     showModal.value = false;
     newPhoneNumber.value = '';
     editingIndex.value = null;
+    phoneError.value = true;
 };
 
 const deletePhoneNumber = (index: number) => {
@@ -85,6 +121,7 @@ const deletePhoneNumber = (index: number) => {
                         v-model="formData.noRekamMedis" 
                         placeholder="Masukan Nomor RM / Nama Pasien"
                         variant="outlined" 
+                        maxlength="8"
                         density="comfortable" 
                         :rules="[rules.required]"
                         hide-details="auto"
@@ -217,17 +254,17 @@ const deletePhoneNumber = (index: number) => {
                 <v-label class="mb-2 font-weight-medium">Nomor Telepon</v-label>
                 <v-text-field
                     v-model="newPhoneNumber"
-                    placeholder="Masukan nomor telepon lengkap"
+                    placeholder="Contoh: 08123456789"
                     variant="outlined"
                     density="comfortable"
-                    hide-details="auto"
                     type="tel"
                     @input="handlePhoneInput"
+                    :error-messages="phoneError !== true ? [phoneError as string] : []"
                 >
-                    <template #prepend-inner>
-                        <span class="text-medium-emphasis">+62</span>
-                    </template>
                 </v-text-field>
+                <div class="text-caption text-medium-emphasis mt-2">
+                    Format: 08xxxxxxxxx (9-15 digit)
+                </div>
             </v-card-text>
             
             <v-divider></v-divider>
@@ -237,7 +274,7 @@ const deletePhoneNumber = (index: number) => {
                     color="primary"
                     variant="flat"
                     @click="savePhoneNumber"
-                    :disabled="!newPhoneNumber.trim()"
+                    :disabled="!newPhoneNumber.trim() || phoneError !== true"
                 >
                     <v-icon start>mdi-check</v-icon>
                     Save
diff --git a/components/pendaftaran/TableAntrian.vue b/components/pendaftaran/TableAntrian.vue
new file mode 100644
index 0000000..273e407
--- /dev/null
+++ b/components/pendaftaran/TableAntrian.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+interface Header {
+    title: string;
+    key: string;
+    sortable?: boolean;
+    width?: string;
+    align?: 'start' | 'center' | 'end';
+}
+
+interface Props {
+    headers: Header[];
+    items: any[];
+    search?: string;
+    itemsPerPage?: number;
+    minWidth?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    search: '',
+    itemsPerPage: 10,
+    minWidth: '1200px'
+});
+
+const currentPage = ref(1);
+const itemsPerPageLocal = ref(props.itemsPerPage);
+</script>
+
+<template>
+    <div class="table-wrapper">
+        <v-data-table
+            :headers="headers"
+            :items="items"
+            :search="search"
+            class="elevation-1"
+            item-value="id"
+            v-model:page="currentPage"
+            v-model:items-per-page="itemsPerPageLocal"
+        >
+            <!-- Pass through all slots to parent -->
+            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+                <slot :name="name" v-bind="slotData" />
+            </template>
+            
+            <!-- Default slot for Jenis Kelamin if not provided -->
+            <template #item.jenisKelamin="{ item }">
+                <slot name="item.jenisKelamin" :item="item">
+                    <v-chip
+                        :color="item.jenisKelamin === 'L' ? 'primary' : 'pink'"
+                        size="small"
+                    >
+                        {{ item.jenisKelamin }}
+                    </v-chip>
+                </slot>
+            </template>
+
+            <!-- Default slot for Status if not provided -->
+            <template #item.status="{ item }">
+                <slot name="item.status" :item="item">
+                    <v-chip
+                        :color="item.status === 'selesai' ? 'success' : item.status === 'batal' ? 'error' : item.status === 'tunda' ? 'warning' : 'info'"
+                        size="small"
+                    >
+                        {{ item.status }}
+                    </v-chip>
+                </slot>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<style scoped>
+.table-wrapper {
+    overflow-x: auto;
+    width: 100%;
+}
+
+.table-wrapper :deep(.v-data-table) {
+    min-width: v-bind(minWidth);
+}
+</style>
diff --git a/components/shared/BaseBreadcrumb.vue b/components/shared/BaseBreadcrumb.vue
index 1f4d066..6f2d684 100644
--- a/components/shared/BaseBreadcrumb.vue
+++ b/components/shared/BaseBreadcrumb.vue
@@ -1,19 +1,36 @@
 <script setup >
 import { Icon } from '@iconify/vue';
+
 const props = defineProps({
     title: String,
     breadcrumbs: Array ,
     icon: String,
-    text: String
+    text: String,
+    buttonBack: Boolean
 });
 
+const router = useRouter();
 
+const handleBack = () => {
+    router.back();
+};
 </script>
 
 <template>
         <div class="px-6 py-4">
             <div class="d-flex justify-space-between align-center">
-                <h5 class="text-h5">{{ title }}</h5>
+                <div class="d-flex align-center ga-2">
+                    <v-btn
+                        v-if="buttonBack"
+                        icon
+                        variant="text"
+                        size="small"
+                        @click="handleBack"
+                    >
+                        <Icon icon="solar:arrow-left-line-duotone" height="24" />
+                    </v-btn>
+                    <h5 class="text-h5">{{ title }}</h5>
+                </div>
                 <div class="d-flex align-center ga-2">
                     <router-link to="/" class="textSecondary lh-0">
                         <Icon icon="solar:home-2-line-duotone" height="20" />
diff --git a/data/mock/antreanOperasi.json b/data/mock/antreanOperasi.json
index 345e1bd..3652358 100644
--- a/data/mock/antreanOperasi.json
+++ b/data/mock/antreanOperasi.json
@@ -6,7 +6,9 @@
     "noKtp": "3573031612100001",
     "noRekamMedis": "11621458",
     "kodeSpesialis": "SP001",
-    "kodeSubSpesialis": "SUB001"
+    "kodeSubSpesialis": "SUB001",
+    "idKategoriOperasi": 1,
+    "status": "selesai"
   },
   {
     "id": 2,
@@ -15,7 +17,9 @@
     "noKtp": "3573044509740002",
     "noRekamMedis": "11506867",
     "kodeSpesialis": "SP002",
-    "kodeSubSpesialis": "SUB005"
+    "kodeSubSpesialis": "SUB005",
+    "idKategoriOperasi": 1,
+    "status": "belum"
   },
   {
     "id": 3,
@@ -24,7 +28,9 @@
     "noKtp": "3514040104730003",
     "noRekamMedis": "11582081",
     "kodeSpesialis": "SP003",
-    "kodeSubSpesialis": "SUB008"
+    "kodeSubSpesialis": "SUB008",
+    "idKategoriOperasi": 1,
+    "status": "belum"
   },
   {
     "id": 4,
@@ -33,7 +39,9 @@
     "noKtp": "3507321911890004",
     "noRekamMedis": "11585010",
     "kodeSpesialis": "SP001",
-    "kodeSubSpesialis": "SUB002"
+    "kodeSubSpesialis": "SUB002",
+    "idKategoriOperasi": 1,
+    "status": "batal"
   },
   {
     "id": 5,
@@ -42,7 +50,9 @@
     "noKtp": "3507304107550005",
     "noRekamMedis": "11602936",
     "kodeSpesialis": "SP002",
-    "kodeSubSpesialis": "SUB006"
+    "kodeSubSpesialis": "SUB006",
+    "idKategoriOperasi": 2,
+    "status": "tunda"
   },
   {
     "id": 6,
@@ -51,7 +61,9 @@
     "noKtp": "3175085505780006",
     "noRekamMedis": "11591972",
     "kodeSpesialis": "SP005",
-    "kodeSubSpesialis": "SUB013"
+    "kodeSubSpesialis": "SUB013",
+    "idKategoriOperasi": 3,
+    "status": "belum"
   },
   {
     "id": 7,
@@ -60,7 +72,9 @@
     "noKtp": "3506021701590007",
     "noRekamMedis": "11578328",
     "kodeSpesialis": "SP004",
-    "kodeSubSpesialis": "SUB011"
+    "kodeSubSpesialis": "SUB011",
+    "idKategoriOperasi": 2,
+    "status": "batal"
   },
   {
     "id": 8,
@@ -69,7 +83,9 @@
     "noKtp": "3503074101710008",
     "noRekamMedis": "11589921",
     "kodeSpesialis": "SP003",
-    "kodeSubSpesialis": "SUB009"
+    "kodeSubSpesialis": "SUB009",
+    "idKategoriOperasi": 2,
+    "status": "selesai"
   },
   {
     "id": 9,
@@ -78,7 +94,9 @@
     "noKtp": "3507252806700009",
     "noRekamMedis": "11614879",
     "kodeSpesialis": "SP001",
-    "kodeSubSpesialis": "SUB003"
+    "kodeSubSpesialis": "SUB003",
+    "idKategoriOperasi": 3,
+    "status": "tunda"
   },
   {
     "id": 10,
@@ -87,7 +105,9 @@
     "noKtp": "3505136904850010",
     "noRekamMedis": "11423790",
     "kodeSpesialis": "SP005",
-    "kodeSubSpesialis": "SUB014"
+    "kodeSubSpesialis": "SUB014",
+    "idKategoriOperasi": 2,
+    "status": "selesai"
   },
   {
     "id": 11,
@@ -96,7 +116,9 @@
     "noKtp": "3507155310740011",
     "noRekamMedis": "11571803",
     "kodeSpesialis": "SP002",
-    "kodeSubSpesialis": "SUB007"
+    "kodeSubSpesialis": "SUB007",
+    "idKategoriOperasi": 2,
+    "status": "selesai"
   },
   {
     "id": 12,
@@ -105,7 +127,9 @@
     "noKtp": "3575017105550012",
     "noRekamMedis": "11614674",
     "kodeSpesialis": "SP004",
-    "kodeSubSpesialis": "SUB012"
+    "kodeSubSpesialis": "SUB012",
+    "idKategoriOperasi": 2,
+    "status": "belum"
   },
   {
     "id": 13,
@@ -114,6 +138,8 @@
     "noKtp": "3575030809990013",
     "noRekamMedis": "11615541",
     "kodeSpesialis": "SP005",
-    "kodeSubSpesialis": "SUB015"
+    "kodeSubSpesialis": "SUB015",
+    "idKategoriOperasi": 1,
+    "status": "belum"
   }
 ]
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
index 02e813f..1fa06de 100644
--- a/pages/antrean/all.vue
+++ b/pages/antrean/all.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import antreanOperasiData from '~/data/mock/antreanOperasi.json';
 
 interface AntreanOperasi {
@@ -8,6 +9,7 @@ interface AntreanOperasi {
     namaPasien: string;
     noKtp: string;
     noRekamMedis: string;
+    status: string;
 }
 
 const page = ref({ title: 'List Antrean Operasi' });
@@ -26,15 +28,17 @@ const breadcrumbs = ref([
 
 const search = ref('');
 const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);
-const currentPage = ref(1);
-const itemsPerPage = ref(10);
 
 const headers = [
-    { title: 'No. Urut', key: 'no', sortable: false },
+    { title: 'No Urut', key: 'no', width: '180px', align: 'center' as const },
+    { title: 'No Urut Kategori', key: 'no', width: '180px', align: 'center' as const },
+    { title: 'No Urut Spesialis', key: 'no', width: '180px', align: 'center' as const },
+    { title: 'No Urut Sub Spesialis', key: 'no', width: '220px', align: 'center' as const },
     { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
     { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
     { title: 'No Ktp', key: 'noKtp', sortable: true },
-    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true }
+    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true, width: '250px' },
+    { title: 'Status', key: 'status', sortable: true, width: '150px' }
 ];
 </script>
 <template>
@@ -65,29 +69,18 @@ const headers = [
                         </v-btn>
                     </div>
 
-                    <v-data-table
+                    <TableAntrian
                         :headers="headers"
                         :items="antreanList"
                         :search="search"
-                        class="elevation-1"
-                        item-value="id"
-                        v-model:page="currentPage"
-                        v-model:items-per-page="itemsPerPage"
+                        min-width="1400px"
                     >
                         <template #item.no="{ index }">
-                            {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+                            {{ index + 1 }}
                         </template>
-                        <template #item.jenisKelamin="{ item }">
-                            <v-chip
-                                :color="item.jenisKelamin === 'L' ? 'primary' : 'pink'"
-                                size="small"
-                            >
-                                {{ item.jenisKelamin }}
-                            </v-chip>
-                        </template>
-                    </v-data-table>
+                    </TableAntrian>
                 </v-card-text>
             </v-card>
         </v-col>
     </v-row>
-</template> 
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/pages/antrean/kategori/[id].vue b/pages/antrean/kategori/[id].vue
new file mode 100644
index 0000000..46d1218
--- /dev/null
+++ b/pages/antrean/kategori/[id].vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
+import antreanOperasiData from '~/data/mock/antreanOperasi.json';
+import kategoriOperasiData from '~/data/mock/kategoriOperasi.json';
+
+interface AntreanOperasi {
+    id: number;
+    jenisKelamin: string;
+    namaPasien: string;
+    noKtp: string;
+    noRekamMedis: string;
+    kodeSpesialis: string;
+    kodeSubSpesialis: string;
+    idKategoriOperasi: number;
+    status: string;
+}
+
+const route = useRoute();
+const idKategori = parseInt(route.params.id as string);
+
+// Find kategori info
+const kategoriInfo = kategoriOperasiData.find(k => k.id === idKategori);
+
+const page = ref({
+    title: kategoriInfo ? `List Antrian Kategori ${kategoriInfo.kategori}` : 'List Antrian Kategori'
+});
+
+const breadcrumbs = ref([
+    {
+        text: 'Antrean',
+        disabled: false,
+        href: '/antrean'
+    },
+    {
+        text: 'List Kategori',
+        disabled: false,
+        href: '/antrean/list-kategori'
+    },
+    {
+        text: kategoriInfo ? kategoriInfo.kategori : 'Kategori',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const search = ref('');
+const antreanList = ref<AntreanOperasi[]>(
+    antreanOperasiData.filter(antrian => antrian.idKategoriOperasi === idKategori)
+);
+
+const headers = [
+    { title: 'No Urut Kategori', key: 'noKategori', width: '180px', align: 'center' as const },
+    { title: 'No Urut Spesialis', key: 'noSpesialis', width: '180px', align: 'center' as const },
+    { title: 'No Urut Sub Spesialis', key: 'noSubSpesialis', width: '220px', align: 'center' as const },
+    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
+    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
+    { title: 'No Ktp', key: 'noKtp', sortable: true },
+    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true, width: '250px' },
+    { title: 'Status', key: 'status', sortable: true, width: '150px' }
+];
+
+// Function to get queue number per spesialis
+const getNoPerSpesialis = (item: AntreanOperasi) => {
+    const itemsWithSameSpesialis = antreanOperasiData
+        .filter(a => a.idKategoriOperasi === idKategori && a.kodeSpesialis === item.kodeSpesialis)
+        .sort((a, b) => a.id - b.id);
+    return itemsWithSameSpesialis.findIndex(a => a.id === item.id) + 1;
+};
+
+// Function to get queue number per sub spesialis
+const getNoPerSubSpesialis = (item: AntreanOperasi) => {
+    const itemsWithSameSubSpesialis = antreanOperasiData
+        .filter(a => a.idKategoriOperasi === idKategori && a.kodeSubSpesialis === item.kodeSubSpesialis)
+        .sort((a, b) => a.id - b.id);
+    return itemsWithSameSubSpesialis.findIndex(a => a.id === item.id) + 1;
+};
+</script>
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+        </v-col>
+        <v-col cols="12">
+            <v-card elevation="10">
+                <v-card-text>
+                    <div class="d-flex justify-space-between align-center mb-4">
+                        <v-text-field v-model="search" placeholder="Search..." variant="outlined" density="comfortable"
+                            hide-details prepend-inner-icon="mdi-magnify" style="max-width: 400px;"></v-text-field>
+
+                        <v-btn color="primary" prepend-icon="mdi-plus" to="/antrean/pendaftaran">
+                            Daftar Antrean Operasi Baru
+                        </v-btn>
+                    </div>
+                    
+                    <TableAntrian
+                        :headers="headers"
+                        :items="antreanList"
+                        :search="search"
+                        min-width="1200px"
+                    >
+                        <template #item.noKategori="{ index }">
+                            <div class="text-center">
+                                {{ index + 1 }}
+                            </div>
+                        </template>
+                        <template #item.noSpesialis="{ item }">
+                            <div class="text-center">
+                                {{ getNoPerSpesialis(item) }}
+                            </div>
+                        </template>
+                        <template #item.noSubSpesialis="{ item }">
+                            <div class="text-center">
+                                {{ getNoPerSubSpesialis(item) }}
+                            </div>
+                        </template>
+                    </TableAntrian>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/pages/antrean/list-kategori.vue b/pages/antrean/list-kategori.vue
new file mode 100644
index 0000000..647b7a5
--- /dev/null
+++ b/pages/antrean/list-kategori.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import kategoriOperasiData from '~/data/mock/kategoriOperasi.json';
+import antreanOperasiData from '~/data/mock/antreanOperasi.json';
+
+interface KategoriOperasi {
+    id: number;
+    kategori: string;
+}
+
+interface AntreanOperasi {
+    id: number;
+    jenisKelamin: string;
+    namaPasien: string;
+    noKtp: string;
+    noRekamMedis: string;
+    kodeSpesialis: string;
+    kodeSubSpesialis: string;
+    idKategoriOperasi: number;
+}
+
+const page = ref({ title: 'List Antrean Operasi per Kategori' });
+const breadcrumbs = ref([
+    {
+        text: 'Antrean',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'List Antrean Operasi per Kategori',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const kategoriOperasiList = ref<KategoriOperasi[]>(kategoriOperasiData);
+const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);
+
+// Function to count antrian by kategori operasi id
+const countAntreanByKategori = (idKategoriOperasi: number) => {
+    return antreanList.value.filter(antrian => antrian.idKategoriOperasi === idKategoriOperasi).length;
+};
+
+</script>
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+        </v-col>
+        
+        <v-col 
+            v-for="kategori in kategoriOperasiList" 
+            :key="kategori.id"
+            cols="12"
+            md="4"
+        >
+            <v-card elevation="10" class="h-100">
+                <NuxtLink :to="`/antrean/kategori/${kategori.id}`" 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>
+                            <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
+                        </div>
+                        <v-chip class="mt-3 mb-0"  color="primary" size="small">{{ countAntreanByKategori(kategori.id) }} Antrean</v-chip>
+                    </v-card-item>
+                </NuxtLink>
+            </v-card>
+        </v-col>
+    </v-row>
+</template> 
\ No newline at end of file
diff --git a/pages/antrean/list-spesialis.vue b/pages/antrean/list-spesialis.vue
index e5583c4..d33b372 100644
--- a/pages/antrean/list-spesialis.vue
+++ b/pages/antrean/list-spesialis.vue
@@ -27,7 +27,7 @@ interface AntreanOperasi {
     kodeSubSpesialis: string;
 }
 
-const page = ref({ title: 'List Antrean Operasi Spesialis' });
+const page = ref({ title: 'List Antrean Operasi per Spesialis' });
 const breadcrumbs = ref([
     {
         text: 'Antrean',
@@ -35,7 +35,7 @@ const breadcrumbs = ref([
         href: '#'
     },
     {
-        text: 'List Antrean Operasi Spesialis',
+        text: 'List Antrean Operasi per Spesialis',
         disabled: true,
         href: '#'
     }
diff --git a/pages/antrean/pendaftaran.vue b/pages/antrean/pendaftaran.vue
index 1c4d24e..55b97e2 100644
--- a/pages/antrean/pendaftaran.vue
+++ b/pages/antrean/pendaftaran.vue
@@ -44,6 +44,19 @@ const breadcrumbs = ref([
 
 // Auto-select spesialis dan sub spesialis dari query parameter
 onMounted(async () => {
+    // Reset form terlebih dahulu
+    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}`;
+    
+    // Auto-select spesialis dan sub spesialis jika ada query parameter
     const kodeSpesialis = route.query.kodeSpesialis as string;
     const kodeSubSpesialis = route.query.kodeSubSpesialis as string;
     
diff --git a/pages/antrean/spesialis/[kode].vue b/pages/antrean/spesialis/[kode].vue
index 2bee623..7d26d07 100644
--- a/pages/antrean/spesialis/[kode].vue
+++ b/pages/antrean/spesialis/[kode].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import antreanOperasiData from '~/data/mock/antreanOperasi.json';
 import spesialisData from '~/data/mock/spesialis.json';
 
@@ -11,6 +12,7 @@ interface AntreanOperasi {
     noRekamMedis: string;
     kodeSpesialis: string;
     kodeSubSpesialis: string;
+    status: string;
 }
 
 const route = useRoute();
@@ -45,22 +47,22 @@ const search = ref('');
 const antreanList = ref<AntreanOperasi[]>(
     antreanOperasiData.filter(antrian => antrian.kodeSpesialis === kodeSpesialis)
 );
-const currentPage = ref(1);
-const itemsPerPage = ref(10);
 
 const headers = [
-    { title: 'No. Urut', key: 'no', sortable: false },
+    { title: 'No. Urut Spesialis', key: 'no', sortable: false },
+    { title: 'No. Urut Sub Spesialis', key: 'no', sortable: false },
     { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
     { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
     { title: 'No Ktp', key: 'noKtp', sortable: true },
-    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true }
+    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true },
+    { title: 'Status', key: 'status', sortable: true }
 ];
 </script>
 
 <template>
     <v-row>
         <v-col cols="12">
-            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+            <BaseBreadcrumb :title="page.title" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
         </v-col>
         <v-col cols="12">
             <v-card elevation="10">
@@ -85,27 +87,15 @@ const headers = [
                         </v-btn>
                     </div>
 
-                    <v-data-table
+                    <TableAntrian
                         :headers="headers"
                         :items="antreanList"
                         :search="search"
-                        class="elevation-1"
-                        item-value="id"
-                        v-model:page="currentPage"
-                        v-model:items-per-page="itemsPerPage"
                     >
                         <template #item.no="{ index }">
-                            {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+                            {{ index + 1 }}
                         </template>
-                        <template #item.jenisKelamin="{ item }">
-                            <v-chip
-                                :color="item.jenisKelamin === 'L' ? 'primary' : 'pink'"
-                                size="small"
-                            >
-                                {{ item.jenisKelamin }}
-                            </v-chip>
-                        </template>
-                    </v-data-table>
+                    </TableAntrian>
                 </v-card-text>
             </v-card>
         </v-col>
diff --git a/pages/antrean/subspesialis/[kode].vue b/pages/antrean/subspesialis/[kode].vue
index 88e7a9c..9181988 100644
--- a/pages/antrean/subspesialis/[kode].vue
+++ b/pages/antrean/subspesialis/[kode].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import antreanOperasiData from '~/data/mock/antreanOperasi.json';
 import subSpesialisData from '~/data/mock/subSpesialis.json';
 import spesialisData from '~/data/mock/spesialis.json';
@@ -12,6 +13,7 @@ interface AntreanOperasi {
     noRekamMedis: string;
     kodeSpesialis: string;
     kodeSubSpesialis: string;
+    status: string;
 }
 
 const route = useRoute();
@@ -46,15 +48,14 @@ const search = ref('');
 const antreanList = ref<AntreanOperasi[]>(
     antreanOperasiData.filter(antrian => antrian.kodeSubSpesialis === kodeSubSpesialis)
 );
-const currentPage = ref(1);
-const itemsPerPage = ref(10);
 
 const headers = [
-    { title: 'No. Urut', key: 'no', sortable: false },
+    { title: 'No. Urut Sub Spesialis', key: 'no', sortable: false },
     { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
     { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
     { title: 'No Ktp', key: 'noKtp', sortable: true },
-    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true }
+    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true },
+    { title: 'Status', key: 'status', sortable: true }
 ];
 
 // Get kode spesialis from subSpesialisInfo
@@ -75,7 +76,7 @@ const pendaftaranUrl = computed(() => {
 <template>
     <v-row>
         <v-col cols="12">
-            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+            <BaseBreadcrumb :title="page.title" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
         </v-col>
         <v-col cols="12">
             <v-card elevation="10">
@@ -100,27 +101,15 @@ const pendaftaranUrl = computed(() => {
                         </v-btn>
                     </div>
 
-                    <v-data-table
+                    <TableAntrian
                         :headers="headers"
                         :items="antreanList"
                         :search="search"
-                        class="elevation-1"
-                        item-value="id"
-                        v-model:page="currentPage"
-                        v-model:items-per-page="itemsPerPage"
                     >
                         <template #item.no="{ index }">
-                            {{ (currentPage - 1) * itemsPerPage + index + 1 }}
+                            {{ index + 1 }}
                         </template>
-                        <template #item.jenisKelamin="{ item }">
-                            <v-chip
-                                :color="item.jenisKelamin === 'L' ? 'primary' : 'pink'"
-                                size="small"
-                            >
-                                {{ item.jenisKelamin }}
-                            </v-chip>
-                        </template>
-                    </v-data-table>
+                    </TableAntrian>
                 </v-card-text>
             </v-card>
         </v-col>
diff --git a/services/api.ts b/services/api.ts
index 60d2215..bd1c80e 100644
--- a/services/api.ts
+++ b/services/api.ts
@@ -11,10 +11,10 @@ api.interceptors.request.use((config) => {
   if (token) {
     config.headers.Authorization = `Bearer ${token}`
   }
-//   const cookies = `directus_session_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA2ZGM5MGY3LWUzY2YtNGY1Ny04N2VjLTM4ZDhhYzJjNTNjOSIsInJvbGUiOm51bGwsImFwcF9hY2Nlc3MiOnRydWUsImFkbWluX2FjY2VzcyI6dHJ1ZSwic2Vzc2lvbiI6ImQ1UzhTVGN6enh5YWJYOEdkR0N0UDFxYU9Ud1VIamdLRWEtR2ZpYXlOczZxcUQ1MnlacS1lWGh5clE3TUxfeHoiLCJpYXQiOjE3NjkzOTMwMzYsImV4cCI6MTc2OTQ3OTQzNiwiaXNzIjoiZGlyZWN0dXMifQ.p-Di4C3e6bmSp-46fIhGv6HH_cq3hQRA_XcfXJLAiIA; _dd_s=logs=1&id=be53286e-881e-490b-aae1-88555740b7fb&created=1769393024176&expire=1769393960283`
-//   if(cookies){
-//     config.headers.Cookie = cookies
-//   }
+  const cookies = `directus_session_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA2ZGM5MGY3LWUzY2YtNGY1Ny04N2VjLTM4ZDhhYzJjNTNjOSIsInJvbGUiOm51bGwsImFwcF9hY2Nlc3MiOnRydWUsImFkbWluX2FjY2VzcyI6dHJ1ZSwic2Vzc2lvbiI6ImQ1UzhTVGN6enh5YWJYOEdkR0N0UDFxYU9Ud1VIamdLRWEtR2ZpYXlOczZxcUQ1MnlacS1lWGh5clE3TUxfeHoiLCJpYXQiOjE3NjkzOTMwMzYsImV4cCI6MTc2OTQ3OTQzNiwiaXNzIjoiZGlyZWN0dXMifQ.p-Di4C3e6bmSp-46fIhGv6HH_cq3hQRA_XcfXJLAiIA; _dd_s=logs=1&id=be53286e-881e-490b-aae1-88555740b7fb&created=1769393024176&expire=1769393960283`
+  if(cookies){
+    config.headers.Cookie = cookies
+  }
 
   return config
 })
diff --git a/services/category.ts b/services/category.ts
new file mode 100644
index 0000000..e69de29