From d826b43887f0d882bb55e340e059cea88871434c Mon Sep 17 00:00:00 2001
From: Yusron alamsyah <icus.yusron@gmail.com>
Date: Tue, 27 Jan 2026 10:58:23 +0700
Subject: [PATCH] fix(FE) : validate number norm & add action, feat user & hak
 akses

---
 components/pendaftaran/BiodataPasien.vue      |  34 +-
 components/pendaftaran/MedisPasien.vue        |  26 +-
 components/pendaftaran/RencanaOperasi.vue     |  32 +-
 .../pendaftaran/StatusPasienOperasi.vue       |  28 +-
 components/pendaftaran/TableAntrian.vue       |  41 ++-
 data/mock/hakAkses.json                       |  32 ++
 data/mock/users.json                          |  42 +++
 pages/antrean/all.vue                         |  75 +++-
 pages/antrean/pendaftaran.vue                 |  59 ++-
 pages/setting/hak-akses/form.vue              | 339 ++++++++++++++++++
 pages/setting/hak-akses/index.vue             | 160 +++++++++
 pages/setting/user/form.vue                   | 283 +++++++++++++++
 pages/setting/user/index.vue                  | 166 +++++++++
 13 files changed, 1283 insertions(+), 34 deletions(-)
 create mode 100644 data/mock/hakAkses.json
 create mode 100644 data/mock/users.json
 create mode 100644 pages/setting/hak-akses/form.vue
 create mode 100644 pages/setting/hak-akses/index.vue
 create mode 100644 pages/setting/user/form.vue
 create mode 100644 pages/setting/user/index.vue

diff --git a/components/pendaftaran/BiodataPasien.vue b/components/pendaftaran/BiodataPasien.vue
index 87f74e6..fc80441 100644
--- a/components/pendaftaran/BiodataPasien.vue
+++ b/components/pendaftaran/BiodataPasien.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+interface Props {
+    readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false
+});
+
 const formData = defineModel<{
     noRekamMedis: string;
     noKtp: string;
@@ -103,6 +111,16 @@ const savePhoneNumber = () => {
 const deletePhoneNumber = (index: number) => {
     formData.value.nomorTelepon.splice(index, 1);
 };
+
+// Handle noRekamMedis input - only allow numbers
+const handleRmInput = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const value = input.value;
+    
+    // Only allow numbers
+    const numericValue = value.replace(/\D/g, '');
+    formData.value.noRekamMedis = numericValue;
+};
 </script>
 
 <template>
@@ -122,9 +140,13 @@ const deletePhoneNumber = (index: number) => {
                         placeholder="Masukan Nomor RM / Nama Pasien"
                         variant="outlined" 
                         maxlength="8"
-                        density="comfortable" 
+                        density="comfortable"
+                        type="tel"
                         :rules="[rules.required]"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                        @input="handleRmInput"
                     ></v-text-field>
                 </v-col>
 
@@ -145,7 +167,7 @@ const deletePhoneNumber = (index: number) => {
                 <!-- Jenis Kelamin -->
                 <v-col cols="12" md="6">
                     <v-label class="mb-2 font-weight-medium">Jenis Kelamin</v-label>
-                    <v-radio-group v-model="formData.jenisKelamin" inline hide-details="auto">
+                    <v-radio-group v-model="formData.jenisKelamin" inline hide-details="auto" :readonly="readonly" :disabled="readonly">
                         <v-radio label="Laki-Laki" value="L" color="primary"></v-radio>
                         <v-radio label="Perempuan" value="P" color="primary"></v-radio>
                     </v-radio-group>
@@ -197,13 +219,14 @@ const deletePhoneNumber = (index: number) => {
                             :key="index"
                             class="px-4 mb-2"
                             border
-                            @click="editPhoneNumber(index)"
-                            style="cursor: pointer;"
+                            @click="!readonly && editPhoneNumber(index)"
+                            :style="readonly ? 'cursor: default;' : 'cursor: pointer;'"
                         >
                             <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"
@@ -219,6 +242,7 @@ const deletePhoneNumber = (index: number) => {
 
                     <!-- Add Button -->
                     <v-btn
+                        v-if="!readonly"
                         color="primary"
                         variant="flat"
                         prepend-icon="mdi-plus" 
@@ -277,7 +301,7 @@ const deletePhoneNumber = (index: number) => {
                     :disabled="!newPhoneNumber.trim() || phoneError !== true"
                 >
                     <v-icon start>mdi-check</v-icon>
-                    Save
+                    Simpan
                 </v-btn>
             </v-card-actions>
         </v-card>
diff --git a/components/pendaftaran/MedisPasien.vue b/components/pendaftaran/MedisPasien.vue
index f3500bf..8af7fe0 100644
--- a/components/pendaftaran/MedisPasien.vue
+++ b/components/pendaftaran/MedisPasien.vue
@@ -14,6 +14,14 @@ interface TindakanItem {
     tindakanTambahan?: string;
 }
 
+interface Props {
+    readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false
+});
+
 const diagnosisItems = defineModel<DiagnosisItem[]>('diagnosisItems', { required: true });
 const tindakanItems = defineModel<TindakanItem[]>('tindakanItems', { required: true });
 
@@ -186,8 +194,8 @@ const handleKodeTindakanChange = (kode: string) => {
                             v-for="(item, index) in diagnosisItems"
                             :key="index"
                             class="px-4 mb-2"
-                            @click="editDiagnosis(index)"
-                            style="cursor: pointer;"
+                            @click="!readonly && editDiagnosis(index)"
+                            :style="readonly ? 'cursor: default;' : 'cursor: pointer;'"
                         >
                             <template #default>
                                 <div class="d-flex align-center justify-space-between w-100">
@@ -198,6 +206,7 @@ const handleKodeTindakanChange = (kode: string) => {
                                         </div>
                                     </div>
                                     <v-btn
+                                        v-if="!readonly"
                                         icon
                                         size="small"
                                         variant="text"
@@ -211,7 +220,7 @@ const handleKodeTindakanChange = (kode: string) => {
                         </v-list-item>
                     </v-list>
                 </v-card>
-                <v-btn color="primary" prepend-icon="mdi-plus" @click="openDiagnosisModal">
+                <v-btn v-if="!readonly" color="primary" prepend-icon="mdi-plus" @click="openDiagnosisModal">
                     Tambah Diagnosa
                 </v-btn>
             </div>
@@ -235,8 +244,8 @@ const handleKodeTindakanChange = (kode: string) => {
                             v-for="(item, index) in tindakanItems"
                             :key="index"
                             class="px-4 mb-2"
-                            @click="editTindakan(index)"
-                            style="cursor: pointer;"
+                            @click="!readonly && editTindakan(index)"
+                            :style="readonly ? 'cursor: default;' : 'cursor: pointer;'"
                         >
                             <template #default>
                                 <div class="d-flex align-center justify-space-between w-100">
@@ -247,6 +256,7 @@ const handleKodeTindakanChange = (kode: string) => {
                                         </div>
                                     </div>
                                     <v-btn
+                                        v-if="!readonly"
                                         icon
                                         size="small"
                                         variant="text"
@@ -260,7 +270,7 @@ const handleKodeTindakanChange = (kode: string) => {
                         </v-list-item>
                     </v-list>
                 </v-card>
-                <v-btn color="primary" prepend-icon="mdi-plus" @click="openTindakanModal">
+                <v-btn v-if="!readonly" color="primary" prepend-icon="mdi-plus" @click="openTindakanModal">
                     Tambah Tindakan
                 </v-btn>
             </div>
@@ -336,7 +346,7 @@ const handleKodeTindakanChange = (kode: string) => {
                     :disabled="!diagnosisForm.kodeDiagnosa.trim() || !diagnosisForm.diagnosa.trim()"
                 >
                     <v-icon start>mdi-check</v-icon>
-                    Save
+                    Simpan
                 </v-btn>
             </v-card-actions>
         </v-card>
@@ -414,7 +424,7 @@ const handleKodeTindakanChange = (kode: string) => {
                     :disabled="!tindakanForm.kodeTindakan.trim() || !tindakanForm.tindakan.trim()"
                 >
                     <v-icon start>mdi-check</v-icon>
-                    Save
+                    Simpan
                 </v-btn>
             </v-card-actions>
         </v-card>
diff --git a/components/pendaftaran/RencanaOperasi.vue b/components/pendaftaran/RencanaOperasi.vue
index 7da361a..d433cdb 100644
--- a/components/pendaftaran/RencanaOperasi.vue
+++ b/components/pendaftaran/RencanaOperasi.vue
@@ -11,6 +11,14 @@ interface Dokter {
     satuan_kerja: string;
 }
 
+interface Props {
+    readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false
+});
+
 const rencanaOperasiData = defineModel<{
     spesialis: number | null | undefined;
     subSpesialis: number | null | undefined;
@@ -146,6 +154,9 @@ const toggleDokterSelection = (dokterId: number) => {
                         density="comfortable"
                         :rules="[rules.required]"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :disabled="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                     ></v-autocomplete>
                 </v-col>
 
@@ -160,7 +171,9 @@ const toggleDokterSelection = (dokterId: number) => {
                         density="comfortable"
                         :rules="[rules.required]"
                         hide-details="auto"
-                        :disabled="!rencanaOperasiData.spesialis"
+                        :disabled="readonly || !rencanaOperasiData.spesialis"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                     ></v-autocomplete>
                 </v-col>
 
@@ -182,8 +195,9 @@ const toggleDokterSelection = (dokterId: number) => {
                             <v-list-item
                                 v-for="(item, index) in dokterPelaksanaItems"
                                 :key="index"
-                                @click="openDokterModal"
+                                @click="!readonly && openDokterModal()"
                                 class="px-4 mb-2"
+                                :style="readonly ? 'cursor: default;' : 'cursor: pointer;'"
                             >
                                 <template #default>
                                     <div class="d-flex align-center justify-space-between w-100">
@@ -194,6 +208,7 @@ const toggleDokterSelection = (dokterId: number) => {
                                             </div>
                                         </div>
                                         <v-btn
+                                            v-if="!readonly"
                                             icon
                                             size="small"
                                             variant="text"
@@ -207,7 +222,7 @@ const toggleDokterSelection = (dokterId: number) => {
                             </v-list-item>
                         </v-list>
                     </v-card>
-                    <v-btn color="primary" prepend-icon="mdi-plus" @click="openDokterModal">
+                    <v-btn v-if="!readonly" color="primary" prepend-icon="mdi-plus" @click="openDokterModal">
                         Tambah Dokter Pelaksana
                     </v-btn>
                 </v-col>
@@ -222,6 +237,8 @@ const toggleDokterSelection = (dokterId: number) => {
                         density="comfortable"
                         :rules="[rules.required]"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                     ></v-text-field>
                 </v-col>
 
@@ -236,6 +253,9 @@ const toggleDokterSelection = (dokterId: number) => {
                         density="comfortable"
                         :rules="[rules.required]"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :disabled="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                     ></v-autocomplete>
                 </v-col>
 
@@ -247,6 +267,8 @@ const toggleDokterSelection = (dokterId: number) => {
                         variant="outlined"
                         rows="5"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                     ></v-textarea>
                 </v-col>
 
@@ -258,6 +280,8 @@ const toggleDokterSelection = (dokterId: number) => {
                         variant="outlined"
                         rows="3"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                     ></v-textarea>
                 </v-col>
             </v-row>
@@ -357,7 +381,7 @@ const toggleDokterSelection = (dokterId: number) => {
                     :disabled="selectedDokters.length === 0"
                 >
                     <v-icon start>mdi-check</v-icon>
-                    Save ({{ selectedDokters.length }})
+                    Simpan ({{ selectedDokters.length }})
                 </v-btn>
             </v-card-actions>
         </v-card>
diff --git a/components/pendaftaran/StatusPasienOperasi.vue b/components/pendaftaran/StatusPasienOperasi.vue
index dc917c1..8fe1860 100644
--- a/components/pendaftaran/StatusPasienOperasi.vue
+++ b/components/pendaftaran/StatusPasienOperasi.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+interface Props {
+    readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false
+});
+
 const statusPasienData = defineModel<{
     tanggalSelesai: string;
     statusOperasi: string;
@@ -24,7 +32,8 @@ const statusPasienData = defineModel<{
                                 size="large"
                                 :variant="statusPasienData.statusOperasi === 'Belum' ? 'flat' : 'outlined'"
                                 :color="statusPasienData.statusOperasi === 'Belum' ? 'primary' : 'default'"
-                                @click="statusPasienData.statusOperasi = 'Belum'"
+                                @click="!readonly && (statusPasienData.statusOperasi = 'Belum')"
+                                :disabled="readonly"
                             >
                                 <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Belum' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                 Belum
@@ -36,7 +45,8 @@ const statusPasienData = defineModel<{
                                 size="large"
                                 :variant="statusPasienData.statusOperasi === 'Selesai' ? 'flat' : 'outlined'"
                                 :color="statusPasienData.statusOperasi === 'Selesai' ? 'primary' : 'default'"
-                                @click="statusPasienData.statusOperasi = 'Selesai'"
+                                @click="!readonly && (statusPasienData.statusOperasi = 'Selesai')"
+                                :disabled="readonly"
                             >
                                 <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Selesai' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                 Selesai
@@ -48,7 +58,8 @@ const statusPasienData = defineModel<{
                                 size="large"
                                 :variant="statusPasienData.statusOperasi === 'Tunda' ? 'flat' : 'outlined'"
                                 :color="statusPasienData.statusOperasi === 'Tunda' ? 'primary' : 'default'"
-                                @click="statusPasienData.statusOperasi = 'Tunda'"
+                                @click="!readonly && (statusPasienData.statusOperasi = 'Tunda')"
+                                :disabled="readonly"
                             >
                                 <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Tunda' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                 Tunda
@@ -60,7 +71,8 @@ const statusPasienData = defineModel<{
                                 size="large"
                                 :variant="statusPasienData.statusOperasi === 'Batal' ? 'flat' : 'outlined'"
                                 :color="statusPasienData.statusOperasi === 'Batal' ? 'primary' : 'default'"
-                                @click="statusPasienData.statusOperasi = 'Batal'"
+                                @click="!readonly && (statusPasienData.statusOperasi = 'Batal')"
+                                :disabled="readonly"
                             >
                                 <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Batal' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                 Batal
@@ -78,6 +90,8 @@ const statusPasienData = defineModel<{
                         variant="outlined"
                         density="comfortable"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                     ></v-text-field>
                 </v-col>
 
@@ -87,9 +101,11 @@ const statusPasienData = defineModel<{
                     <v-textarea
                         v-model="statusPasienData.keteranganStatus"
                         variant="outlined"
-                        rows="5"
-                        placeholder="Keterangan status tunda / batal"
+                        rows="3"
                         hide-details="auto"
+                        :readonly="readonly"
+                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
+                        placeholder="Keterangan status tunda / batal"
                     ></v-textarea>
                 </v-col>
             </v-row>
diff --git a/components/pendaftaran/TableAntrian.vue b/components/pendaftaran/TableAntrian.vue
index 273e407..398c56f 100644
--- a/components/pendaftaran/TableAntrian.vue
+++ b/components/pendaftaran/TableAntrian.vue
@@ -7,20 +7,37 @@ interface Header {
     align?: 'start' | 'center' | 'end';
 }
 
+interface Action {
+    icon: string;
+    color?: string;
+    tooltip?: string;
+    event: string;
+}
+
 interface Props {
     headers: Header[];
     items: any[];
     search?: string;
     itemsPerPage?: number;
     minWidth?: string;
+    actions?: Action[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
     search: '',
     itemsPerPage: 10,
-    minWidth: '1200px'
+    minWidth: '1200px',
+    actions: () => []
 });
 
+const emit = defineEmits<{
+    (e: string, item: any): void;
+}>();
+
+const handleAction = (event: string, item: any) => {
+    emit(event, item);
+};
+
 const currentPage = ref(1);
 const itemsPerPageLocal = ref(props.itemsPerPage);
 </script>
@@ -64,6 +81,28 @@ const itemsPerPageLocal = ref(props.itemsPerPage);
                     </v-chip>
                 </slot>
             </template>
+
+            <!-- Action slot if enabled -->
+            <template v-if="actions && actions.length > 0" #item.actions="{ item }">
+                <slot name="item.actions" :item="item">
+                    <div class="d-flex ga-2">
+                        <v-btn
+                            v-for="(action, index) in actions"
+                            :key="index"
+                            icon
+                            size="small"
+                            variant="text"
+                            :color="action.color || 'primary'"
+                            @click="handleAction(action.event, item)"
+                        >
+                            <v-icon>{{ action.icon }}</v-icon>
+                            <v-tooltip v-if="action.tooltip" activator="parent" location="top">
+                                {{ action.tooltip }}
+                            </v-tooltip>
+                        </v-btn>
+                    </div>
+                </slot>
+            </template>
         </v-data-table>
     </div>
 </template>
diff --git a/data/mock/hakAkses.json b/data/mock/hakAkses.json
new file mode 100644
index 0000000..c4f77c3
--- /dev/null
+++ b/data/mock/hakAkses.json
@@ -0,0 +1,32 @@
+[
+    {
+        "id": 1,
+        "namaHakAkses": "Super Admin",
+        "jumlahHalaman": 15,
+        "status": "aktif"
+    },
+    {
+        "id": 2,
+        "namaHakAkses": "Admin Operasi",
+        "jumlahHalaman": 8,
+        "status": "aktif"
+    },
+    {
+        "id": 3,
+        "namaHakAkses": "Dokter",
+        "jumlahHalaman": 5,
+        "status": "aktif"
+    },
+    {
+        "id": 4,
+        "namaHakAkses": "Perawat",
+        "jumlahHalaman": 4,
+        "status": "aktif"
+    },
+    {
+        "id": 5,
+        "namaHakAkses": "Admin Rekam Medis",
+        "jumlahHalaman": 6,
+        "status": "tidak aktif"
+    }
+]
diff --git a/data/mock/users.json b/data/mock/users.json
new file mode 100644
index 0000000..303f0a4
--- /dev/null
+++ b/data/mock/users.json
@@ -0,0 +1,42 @@
+[
+    {
+        "id": 1,
+        "namaUser": "Dr. John Doe",
+        "username": "john.doe",
+        "email": "john.doe@hospital.com",
+        "hakAkses": "Dokter",
+        "status": "aktif"
+    },
+    {
+        "id": 2,
+        "namaUser": "Admin Sistem",
+        "username": "admin",
+        "email": "admin@hospital.com",
+        "hakAkses": "Super Admin",
+        "status": "aktif"
+    },
+    {
+        "id": 3,
+        "namaUser": "Perawat Siti",
+        "username": "siti.perawat",
+        "email": "siti@hospital.com",
+        "hakAkses": "Perawat",
+        "status": "aktif"
+    },
+    {
+        "id": 4,
+        "namaUser": "Admin Operasi 1",
+        "username": "admin.op1",
+        "email": "adminop1@hospital.com",
+        "hakAkses": "Admin Operasi",
+        "status": "aktif"
+    },
+    {
+        "id": 5,
+        "namaUser": "RM Staff",
+        "username": "rm.staff",
+        "email": "rm@hospital.com",
+        "hakAkses": "Admin Rekam Medis",
+        "status": "tidak aktif"
+    }
+]
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
index 1fa06de..4d0be87 100644
--- a/pages/antrean/all.vue
+++ b/pages/antrean/all.vue
@@ -2,6 +2,7 @@
 import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
 import antreanOperasiData from '~/data/mock/antreanOperasi.json';
+import { Title } from '#components';
 
 interface AntreanOperasi {
     id: number;
@@ -29,6 +30,19 @@ const breadcrumbs = ref([
 const search = ref('');
 const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);
 
+const router = useRouter();
+
+// Snackbar state
+const snackbar = ref(false);
+const snackbarMessage = ref('');
+const snackbarColor = ref('success');
+
+const showSnackbar = (message: string, color: string = 'success') => {
+    snackbarMessage.value = message;
+    snackbarColor.value = color;
+    snackbar.value = true;
+};
+
 const headers = [
     { title: 'No Urut', key: 'no', width: '180px', align: 'center' as const },
     { title: 'No Urut Kategori', key: 'no', width: '180px', align: 'center' as const },
@@ -38,8 +52,43 @@ const headers = [
     { 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' }
+    { title: 'Status', key: 'status', sortable: true, width: '150px' },
+    { title: 'Actions', key: 'actions', sortable: false }
 ];
+
+const actions = [
+    { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
+    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
+    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+];
+
+const handleView = (item: unknown) => {
+    const data = item as AntreanOperasi;
+    router.push({
+        path: '/antrean/pendaftaran',
+        query: {
+            mode: 'view',
+            id: data.id
+        }
+    });
+};
+
+const handleEdit = (item: unknown) => {
+    const data = item as AntreanOperasi;
+    router.push({
+        path: '/antrean/pendaftaran',
+        query: {
+            mode: 'edit',
+            id: data.id
+        }
+    });
+};
+
+const handleDelete = (item: unknown) => {
+    if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
+        showSnackbar('Data berhasil dihapus.', 'success');
+    }
+};
 </script>
 <template>
     <v-row>
@@ -73,7 +122,11 @@ const headers = [
                         :headers="headers"
                         :items="antreanList"
                         :search="search"
-                        min-width="1400px"
+                        :actions="actions"
+                        min-width="1500px"
+                        @view="handleView"
+                        @edit="handleEdit"
+                        @delete="handleDelete"
                     >
                         <template #item.no="{ index }">
                             {{ index + 1 }}
@@ -83,4 +136,22 @@ const headers = [
             </v-card>
         </v-col>
     </v-row>
+
+    <!-- Snackbar for notifications -->
+    <v-snackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="3000"
+        location="top"
+    >
+        {{ snackbarMessage }}
+        <template #actions>
+            <v-btn
+                variant="text"
+                @click="snackbar = false"
+            >
+                Close
+            </v-btn>
+        </template>
+    </v-snackbar>
 </template>
\ No newline at end of file
diff --git a/pages/antrean/pendaftaran.vue b/pages/antrean/pendaftaran.vue
index 55b97e2..f1978a7 100644
--- a/pages/antrean/pendaftaran.vue
+++ b/pages/antrean/pendaftaran.vue
@@ -28,15 +28,51 @@ const {
 const form = ref();
 const valid = ref(true);
 
-const page = ref({ title: 'Pendaftaran Antrean Operasi' });
-const breadcrumbs = ref([
+// Detect mode from route query
+type PageMode = 'create' | 'edit' | 'view';
+const mode = computed<PageMode>(() => {
+    const modeParam = route.query.mode as string;
+    if (modeParam === 'edit') return 'edit';
+    if (modeParam === 'view') return 'view';
+    return 'create';
+});
+
+// Computed readonly state
+const isReadonly = computed(() => mode.value === 'view');
+
+// Dynamic page title based on mode
+const pageTitle = computed(() => {
+    switch (mode.value) {
+        case 'edit':
+            return 'Edit Pendaftaran Antrean Operasi';
+        case 'view':
+            return 'Detail Pendaftaran Antrean Operasi';
+        default:
+            return 'Tambah Pendaftaran Antrean Operasi';
+    }
+});
+
+// Dynamic breadcrumbs based on mode
+const breadcrumbText = computed(() => {
+    switch (mode.value) {
+        case 'edit':
+            return 'Edit Pendaftaran';
+        case 'view':
+            return 'Detail Pendaftaran';
+        default:
+            return 'Tambah Pendaftaran';
+    }
+});
+
+const page = ref({ title: pageTitle });
+const breadcrumbs = computed(() => [
     {
         text: 'Antrean',
-        disabled: true,
-        href: '#'
+        disabled: false,
+        href: '/antrean/all'
     },
     {
-        text: 'Pendaftaran',
+        text: breadcrumbText.value,
         disabled: true,
         href: '#'
     }
@@ -106,12 +142,12 @@ const handleKembali = () => {
     <v-form ref="form" v-model="valid" lazy-validation>
         <v-row>
             <v-col cols="12">
-                <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+                <BaseBreadcrumb :button-back="true" :title="pageTitle" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
             </v-col>
             
             <!-- Data Biodata Pasien -->
         <v-col cols="12">
-            <BiodataPasien v-model="formData" />
+            <BiodataPasien v-model="formData" :readonly="isReadonly" />
         </v-col>
 
         <!-- Data Medis Pasien -->
@@ -119,6 +155,7 @@ const handleKembali = () => {
             <MedisPasien 
                 v-model:diagnosis-items="diagnosisItems"
                 v-model:tindakan-items="tindakanItems"
+                :readonly="isReadonly"
             />
         </v-col>
 
@@ -127,12 +164,13 @@ const handleKembali = () => {
             <RencanaOperasi 
                 v-model:rencana-operasi-data="rencanaOperasiData"
                 v-model:dokter-pelaksana-items="dokterPelaksanaItems"
+                :readonly="isReadonly"
             />
         </v-col>
 
         <!-- Data Status Pasien Operasi -->
         <v-col cols="12">
-            <StatusPasienOperasi v-model="statusPasienData" />
+            <StatusPasienOperasi v-model="statusPasienData" :readonly="isReadonly" />
         </v-col>
 
         <!-- Action Buttons -->
@@ -144,23 +182,28 @@ const handleKembali = () => {
                             color="default" 
                             size="large" 
                             variant="outlined"
+                            prepend-icon="mdi-arrow-left"
                             @click="handleKembali"
                         >
                             Kembali
                         </v-btn>
                         <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="loading"
                             @click="handleSimpan"
+                            prepend-icon="mdi-content-save"
                         >
                             Simpan
                         </v-btn>
diff --git a/pages/setting/hak-akses/form.vue b/pages/setting/hak-akses/form.vue
new file mode 100644
index 0000000..4f4b57b
--- /dev/null
+++ b/pages/setting/hak-akses/form.vue
@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import sidebarItem from '@/components/layout/full/vertical-sidebar/sidebarItem';
+
+const route = useRoute();
+const router = useRouter();
+
+// Detect mode from route query
+type PageMode = 'create' | 'edit' | 'view';
+const mode = computed<PageMode>(() => {
+    const modeParam = route.query.mode as string;
+    if (modeParam === 'edit') return 'edit';
+    if (modeParam === 'view') return 'view';
+    return 'create';
+});
+
+// Computed readonly state
+const isReadonly = computed(() => mode.value === 'view');
+
+// Dynamic page title based on mode
+const pageTitle = computed(() => {
+    switch (mode.value) {
+        case 'edit':
+            return 'Edit Hak Akses';
+        case 'view':
+            return 'Detail Hak Akses';
+        default:
+            return 'Tambah Hak Akses';
+    }
+});
+
+// Dynamic breadcrumbs based on mode
+const breadcrumbText = computed(() => {
+    switch (mode.value) {
+        case 'edit':
+            return 'Edit';
+        case 'view':
+            return 'Detail';
+        default:
+            return 'Tambah';
+    }
+});
+
+const page = ref({ title: pageTitle });
+const breadcrumbs = computed(() => [
+    {
+        text: 'Hak Akses',
+        disabled: false,
+        href: '/setting/hak-akses'
+    },
+    {
+        text: breadcrumbText.value,
+        disabled: true,
+        href: '#'
+    }
+]);
+
+// Form data
+const form = ref();
+const valid = ref(true);
+const namaHakAkses = ref('');
+const status = ref('aktif');
+const selectedPages = ref<string[]>([]);
+
+// Rules
+const rules = {
+    required: (value: string) => !!value || 'Field ini wajib diisi'
+};
+
+// Get all menu items with their pages
+const menuItems = computed(() => {
+    const items: { header: string; pages: { title: string; to: string }[] }[] = [];
+    
+    sidebarItem.forEach(section => {
+        if (section.children && section.children.length > 0) {
+            items.push({
+                header: section.header || '',
+                pages: section.children.map(child => ({
+                    title: child.title || '',
+                    to: child.to || ''
+                }))
+            });
+        }
+    });
+    
+    return items;
+});
+
+// Toggle all pages in a section
+const toggleSection = (sectionPages: { to: string }[]) => {
+    const allSelected = sectionPages.every(page => selectedPages.value.includes(page.to));
+    
+    if (allSelected) {
+        // Unselect all in this section
+        sectionPages.forEach(page => {
+            const index = selectedPages.value.indexOf(page.to);
+            if (index > -1) {
+                selectedPages.value.splice(index, 1);
+            }
+        });
+    } else {
+        // Select all in this section
+        sectionPages.forEach(page => {
+            if (!selectedPages.value.includes(page.to)) {
+                selectedPages.value.push(page.to);
+            }
+        });
+    }
+};
+
+// Check if all pages in section are selected
+const isSectionSelected = (sectionPages: { to: string }[]) => {
+    return sectionPages.length > 0 && sectionPages.every(page => selectedPages.value.includes(page.to));
+};
+
+// Check if some pages in section are selected
+const isSectionIndeterminate = (sectionPages: { to: string }[]) => {
+    const selectedCount = sectionPages.filter(page => selectedPages.value.includes(page.to)).length;
+    return selectedCount > 0 && selectedCount < sectionPages.length;
+};
+
+const handleSimpan = async () => {
+    const { valid } = await form.value.validate();
+    
+    if (valid) {
+        if (selectedPages.value.length === 0) {
+            alert('Pilih minimal satu halaman untuk hak akses');
+            return;
+        }
+        
+        console.log({
+            namaHakAkses: namaHakAkses.value,
+            status: status.value,
+            pages: selectedPages.value
+        });
+        
+        alert('Data berhasil disimpan!');
+    }
+};
+
+const handleReset = () => {
+    if (confirm('Apakah Anda yakin ingin mereset form?')) {
+        form.value.reset();
+        namaHakAkses.value = '';
+        status.value = 'aktif';
+        selectedPages.value = [];
+    }
+};
+
+const handleKembali = () => {
+    router.push('/setting/hak-akses');
+};
+
+// Load data if edit or view mode
+onMounted(() => {
+    if (mode.value !== 'create') {
+        const id = route.query.id;
+        // TODO: Load data based on id
+        // For now, just mock data
+        if (id === '1') {
+            namaHakAkses.value = 'Super Admin';
+            status.value = 'aktif';
+            selectedPages.value = ['/antrean/all', '/antrean/pendaftaran', '/master/guarantor'];
+        } else if (id === '2') {
+            namaHakAkses.value = 'Admin Operasi';
+            status.value = 'aktif';
+            selectedPages.value = ['/antrean/all', '/antrean/pendaftaran'];
+        } else if (id === '5') {
+            namaHakAkses.value = 'Admin Rekam Medis';
+            status.value = 'tidak aktif';
+            selectedPages.value = ['/antrean/all'];
+        }
+    }
+});
+</script>
+
+<template>
+    <v-form ref="form" v-model="valid" lazy-validation>
+        <v-row>
+            <v-col cols="12">
+                <BaseBreadcrumb :title="pageTitle" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+            </v-col>
+
+            <!-- Form Card -->
+            <v-col cols="12">
+                <v-card elevation="10">
+                    <v-card-item>
+                        <h5 class="text-h5 font-weight-bold">Informasi Hak Akses</h5>
+                    </v-card-item>
+                    <v-divider></v-divider>
+                    <v-card-text>
+                        <v-row>
+                            <!-- Nama Hak Akses -->
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Nama Hak Akses <span class="text-error">*</span></v-label>
+                                <v-text-field
+                                    v-model="namaHakAkses"
+                                    placeholder="Contoh: Admin, Dokter, Perawat"
+                                    variant="outlined"
+                                    density="comfortable"
+                                    :rules="[rules.required]"
+                                    hide-details="auto"
+                                    :readonly="isReadonly"
+                                    :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
+                                ></v-text-field>
+                            </v-col>
+
+                            <!-- Status -->
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Status <span class="text-error">*</span></v-label>
+                                <v-switch
+                                    v-model="status"
+                                    true-value="aktif"
+                                    false-value="tidak aktif"
+                                    color="success"
+                                    hide-details="auto"
+                                    :readonly="isReadonly"
+                                    :disabled="isReadonly"
+                                    inset
+                                >
+                                    <template #label>
+                                        <span :class="status === 'aktif' ? 'text-success' : 'text-error'">
+                                            {{ status === 'aktif' ? 'Aktif' : 'Tidak Aktif' }}
+                                        </span>
+                                    </template>
+                                </v-switch>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <!-- Akses Halaman Card -->
+            <v-col cols="12">
+                <v-card elevation="10">
+                    <v-card-item>
+                        <h5 class="text-h5 font-weight-bold">Akses Halaman</h5>
+                    </v-card-item>
+                    <v-divider></v-divider>
+                    <v-card-text>
+                        <v-row>
+                            <v-col 
+                                v-for="(section, index) in menuItems" 
+                                :key="index"
+                                cols="12"
+                                md="4"
+                            >
+                                <v-card variant="outlined">
+                                    <div class="d-flex align-center pa-1">
+                                        <v-checkbox
+                                            :model-value="isSectionSelected(section.pages)"
+                                            :indeterminate="isSectionIndeterminate(section.pages)"
+                                            @click="!isReadonly && toggleSection(section.pages)"
+                                            hide-details
+                                            density="compact"
+                                            color="primary"
+                                            :disabled="isReadonly"
+                                        >
+                                            <template #label>
+                                                <span class="text-capitalize font-weight-bold">
+                                                    {{ section.header }}
+                                                </span>
+                                            </template>
+                                        </v-checkbox>
+                                    </div>
+                                    
+                                    <v-divider class="mb-1"></v-divider>
+                                    
+                                    <div class="pl-3">
+                                        <v-checkbox
+                                            v-for="page in section.pages"
+                                            :key="page.to"
+                                            v-model="selectedPages"
+                                            :value="page.to"
+                                            :label="page.title"
+                                            hide-details
+                                            density="compact"
+                                            color="primary"
+                                            :disabled="isReadonly"
+                                        ></v-checkbox>
+                                    </div>
+                                </v-card>
+                            </v-col>
+                        </v-row>
+
+                        <!-- Selected Pages Summary -->
+                        <v-row v-if="selectedPages.length > 0" class="mt-4">
+                            <v-col cols="12">
+                                <v-alert type="info" variant="tonal" density="compact">
+                                    <div class="d-flex align-center">
+                                        <span><strong>{{ selectedPages.length }}</strong> halaman dipilih</span>
+                                    </div>
+                                </v-alert>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <!-- Action Buttons -->
+            <v-col cols="12">
+                <v-card elevation="10">
+                    <v-card-text>
+                        <div class="d-flex justify-end ga-3">
+                            <v-btn
+                                color="default"
+                                size="large"
+                                variant="outlined"
+                                prepend-icon="mdi-arrow-left"
+                                @click="handleKembali"
+                            >
+                                Kembali
+                            </v-btn>
+                            <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"
+                                prepend-icon="mdi-content-save"
+                                @click="handleSimpan"
+                            >
+                                Simpan
+                            </v-btn>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-form>
+</template>
\ No newline at end of file
diff --git a/pages/setting/hak-akses/index.vue b/pages/setting/hak-akses/index.vue
new file mode 100644
index 0000000..d395ed4
--- /dev/null
+++ b/pages/setting/hak-akses/index.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
+import hakAksesData from '~/data/mock/hakAkses.json';
+
+interface HakAkses {
+    id: number;
+    namaHakAkses: string;
+    status: string;
+}
+
+const page = ref({ title: 'Hak Akses' });
+const breadcrumbs = ref([
+    {
+        text: 'Setting',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Hak Akses',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const router = useRouter();
+const search = ref('');
+const hakAksesList = ref<HakAkses[]>(hakAksesData);
+
+// Snackbar state
+const snackbar = ref(false);
+const snackbarMessage = ref('');
+const snackbarColor = ref('success');
+
+const showSnackbar = (message: string, color: string = 'success') => {
+    snackbarMessage.value = message;
+    snackbarColor.value = color;
+    snackbar.value = true;
+};
+
+const headers = [
+    { title: 'No', key: 'no', width: '100px', align: 'center' as const },
+    { title: 'Nama Hak Akses', key: 'namaHakAkses', sortable: true },
+    { title: 'Status', key: 'status', sortable: true, align: 'center' as const },
+    { title: 'Actions', key: 'actions', sortable: false }
+];
+
+const actions = [
+    { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
+    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
+    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+];
+
+const handleView = (item: unknown) => {
+    const data = item as HakAkses;
+    router.push({
+        path: '/setting/hak-akses/form',
+        query: {
+            mode: 'view',
+            id: data.id
+        }
+    });
+};
+
+const handleEdit = (item: unknown) => {
+    const data = item as HakAkses;
+    router.push({
+        path: '/setting/hak-akses/form',
+        query: {
+            mode: 'edit',
+            id: data.id
+        }
+    });
+};
+
+const handleDelete = (item: unknown) => {
+    const data = item as HakAkses;
+    if (confirm(`Apakah Anda yakin ingin menghapus hak akses "${data.namaHakAkses}"?`)) {
+        // Remove from list
+        const index = hakAksesList.value.findIndex(h => h.id === data.id);
+        if (index > -1) {
+            hakAksesList.value.splice(index, 1);
+        }
+        showSnackbar('Hak akses berhasil dihapus.', 'success');
+    }
+};
+</script>
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :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="/setting/hak-akses/form"
+                        >
+                            Tambah Hak Akses
+                        </v-btn>
+                    </div>
+
+                    <TableAntrian
+                        :headers="headers"
+                        :items="hakAksesList"
+                        :search="search"
+                        :actions="actions"
+                        min-width="900px"
+                        @view="handleView"
+                        @edit="handleEdit"
+                        @delete="handleDelete"
+                    >
+                        <template #item.no="{ index }">
+                            {{ index + 1 }}
+                        </template>
+                        <template #item.status="{ item }">
+                            <v-chip
+                                :color="item.status === 'aktif' ? 'success' : 'error'"
+                                size="small"
+                            >
+                                {{ item.status }}
+                            </v-chip>
+                        </template>
+                    </TableAntrian>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+
+    <!-- Snackbar for notifications -->
+    <v-snackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="3000"
+        location="top"
+    >
+        {{ snackbarMessage }}
+        <template #actions>
+            <v-btn
+                variant="text"
+                @click="snackbar = false"
+            >
+                Close
+            </v-btn>
+        </template>
+    </v-snackbar>
+</template>
\ No newline at end of file
diff --git a/pages/setting/user/form.vue b/pages/setting/user/form.vue
new file mode 100644
index 0000000..6c32f96
--- /dev/null
+++ b/pages/setting/user/form.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import hakAksesData from '~/data/mock/hakAkses.json';
+
+const route = useRoute();
+const router = useRouter();
+
+// Detect mode from route query
+type PageMode = 'create' | 'edit' | 'view';
+const mode = computed<PageMode>(() => {
+    const modeParam = route.query.mode as string;
+    if (modeParam === 'edit') return 'edit';
+    if (modeParam === 'view') return 'view';
+    return 'create';
+});
+
+// Computed readonly state
+const isReadonly = computed(() => mode.value === 'view');
+
+// Dynamic page title based on mode
+const pageTitle = computed(() => {
+    switch (mode.value) {
+        case 'edit':
+            return 'Edit User';
+        case 'view':
+            return 'Detail User';
+        default:
+            return 'Tambah User';
+    }
+});
+
+// Dynamic breadcrumbs based on mode
+const breadcrumbText = computed(() => {
+    switch (mode.value) {
+        case 'edit':
+            return 'Edit';
+        case 'view':
+            return 'Detail';
+        default:
+            return 'Tambah';
+    }
+});
+
+const page = ref({ title: pageTitle });
+const breadcrumbs = computed(() => [
+    {
+        text: 'User',
+        disabled: false,
+        href: '/setting/user'
+    },
+    {
+        text: breadcrumbText.value,
+        disabled: true,
+        href: '#'
+    }
+]);
+
+// Form data
+const form = ref();
+const valid = ref(true);
+const namaUser = ref('');
+const username = ref('');
+const email = ref('');
+const hakAkses = ref<number | null>(null);
+const status = ref('aktif');
+
+// Rules
+const rules = {
+    required: (value: any) => !!value || 'Field ini wajib diisi',
+    email: (value: string) => {
+        const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return pattern.test(value) || 'Format email tidak valid';
+    }
+};
+
+// Hak Akses options
+const hakAksesList = ref(hakAksesData);
+const hakAksesOptions = computed(() => {
+    return hakAksesList.value.map(h => ({
+        title: h.namaHakAkses,
+        value: h.id
+    }));
+});
+
+const handleSimpan = async () => {
+    const { valid } = await form.value.validate();
+    
+    if (valid) {
+        console.log({
+            namaUser: namaUser.value,
+            username: username.value,
+            email: email.value,
+            hakAkses: hakAkses.value,
+            status: status.value
+        });
+        
+        alert('Data berhasil disimpan!');
+        router.push('/setting/user');
+    }
+};
+
+const handleReset = () => {
+    if (confirm('Apakah Anda yakin ingin mereset form?')) {
+        form.value.reset();
+        namaUser.value = '';
+        username.value = '';
+        email.value = '';
+        hakAkses.value = null;
+        status.value = 'aktif';
+    }
+};
+
+const handleKembali = () => {
+    router.push('/setting/user');
+};
+
+// Load data if edit or view mode
+onMounted(() => {
+    if (mode.value !== 'create') {
+        const id = route.query.id;
+        // TODO: Load data based on id
+        // For now, just mock data
+        if (id === '1') {
+            namaUser.value = 'Dr. John Doe';
+            username.value = 'john.doe';
+            email.value = 'john.doe@hospital.com';
+            hakAkses.value = 3; // Dokter
+            status.value = 'aktif';
+        } else if (id === '2') {
+            namaUser.value = 'Admin Sistem';
+            username.value = 'admin';
+            email.value = 'admin@hospital.com';
+            hakAkses.value = 1; // Super Admin
+            status.value = 'aktif';
+        }
+    }
+});
+</script>
+
+<template>
+    <v-form ref="form" v-model="valid" lazy-validation>
+        <v-row>
+            <v-col cols="12">
+                <BaseBreadcrumb :title="pageTitle" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+            </v-col>
+
+            <!-- Form Card -->
+            <v-col cols="12">
+                <v-card elevation="10">
+                    <v-card-item>
+                        <h5 class="text-h5 font-weight-bold">Informasi User</h5>
+                    </v-card-item>
+                    <v-divider></v-divider>
+                    <v-card-text>
+                        <v-row>
+                            <!-- Nama User -->
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Nama User <span class="text-error">*</span></v-label>
+                                <v-text-field
+                                    v-model="namaUser"
+                                    placeholder="Masukan nama lengkap user"
+                                    variant="outlined"
+                                    density="comfortable"
+                                    :rules="[rules.required]"
+                                    hide-details="auto"
+                                    :readonly="isReadonly"
+                                    :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
+                                ></v-text-field>
+                            </v-col>
+
+                            <!-- Username -->
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Username <span class="text-error">*</span></v-label>
+                                <v-text-field
+                                    v-model="username"
+                                    placeholder="Masukan username"
+                                    variant="outlined"
+                                    density="comfortable"
+                                    :rules="[rules.required]"
+                                    hide-details="auto"
+                                    :readonly="isReadonly"
+                                    :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
+                                ></v-text-field>
+                            </v-col>
+
+                            <!-- Email -->
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Email <span class="text-error">*</span></v-label>
+                                <v-text-field
+                                    v-model="email"
+                                    placeholder="contoh@email.com"
+                                    variant="outlined"
+                                    density="comfortable"
+                                    type="email"
+                                    :rules="[rules.required, rules.email]"
+                                    hide-details="auto"
+                                    :readonly="isReadonly"
+                                    :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
+                                ></v-text-field>
+                            </v-col>
+
+                            <!-- Hak Akses -->
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Hak Akses <span class="text-error">*</span></v-label>
+                                <v-autocomplete
+                                    v-model="hakAkses"
+                                    :items="hakAksesOptions"
+                                    placeholder="Pilih hak akses"
+                                    variant="outlined"
+                                    density="comfortable"
+                                    :rules="[rules.required]"
+                                    hide-details="auto"
+                                    :readonly="isReadonly"
+                                    :disabled="isReadonly"
+                                    :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
+                                ></v-autocomplete>
+                            </v-col>
+
+                            <!-- Status -->
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Status <span class="text-error">*</span></v-label>
+                                <v-switch
+                                    v-model="status"
+                                    true-value="aktif"
+                                    false-value="tidak aktif"
+                                    color="success"
+                                    hide-details="auto"
+                                    :readonly="isReadonly"
+                                    :disabled="isReadonly"
+                                    inset
+                                >
+                                    <template #label>
+                                        <span :class="status === 'aktif' ? 'text-success' : 'text-error'">
+                                            {{ status === 'aktif' ? 'Aktif' : 'Tidak Aktif' }}
+                                        </span>
+                                    </template>
+                                </v-switch>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <!-- Action Buttons -->
+            <v-col cols="12">
+                <v-card elevation="10">
+                    <v-card-text>
+                        <div class="d-flex justify-end ga-3">
+                            <v-btn
+                                color="default"
+                                size="large"
+                                variant="outlined"
+                                prepend-icon="mdi-arrow-left"
+                                @click="handleKembali"
+                            >
+                                Kembali
+                            </v-btn>
+                            <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"
+                                prepend-icon="mdi-content-save"
+                                @click="handleSimpan"
+                            >
+                                Simpan
+                            </v-btn>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-form>
+</template>
\ No newline at end of file
diff --git a/pages/setting/user/index.vue b/pages/setting/user/index.vue
new file mode 100644
index 0000000..95d1e4d
--- /dev/null
+++ b/pages/setting/user/index.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
+import usersData from '~/data/mock/users.json';
+
+interface User {
+    id: number;
+    namaUser: string;
+    username: string;
+    email: string;
+    hakAkses: string;
+    status: string;
+}
+
+const page = ref({ title: 'User' });
+const breadcrumbs = ref([
+    {
+        text: 'Setting',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'User',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+const router = useRouter();
+const search = ref('');
+const usersList = ref<User[]>(usersData);
+
+// Snackbar state
+const snackbar = ref(false);
+const snackbarMessage = ref('');
+const snackbarColor = ref('success');
+
+const showSnackbar = (message: string, color: string = 'success') => {
+    snackbarMessage.value = message;
+    snackbarColor.value = color;
+    snackbar.value = true;
+};
+
+const headers = [
+    { title: 'No', key: 'no', width: '100px', align: 'center' as const },
+    { title: 'Nama User', key: 'namaUser', sortable: true },
+    { title: 'Username', key: 'username', sortable: true },
+    { title: 'Email', key: 'email', sortable: true },
+    { title: 'Hak Akses', key: 'hakAkses', sortable: true },
+    { title: 'Status', key: 'status', sortable: true, align: 'center' as const },
+    { title: 'Actions', key: 'actions', sortable: false, align: 'center' as const }
+];
+
+const actions = [
+    { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
+    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
+    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+];
+
+const handleView = (item: unknown) => {
+    const data = item as User;
+    router.push({
+        path: '/setting/user/form',
+        query: {
+            mode: 'view',
+            id: data.id
+        }
+    });
+};
+
+const handleEdit = (item: unknown) => {
+    const data = item as User;
+    router.push({
+        path: '/setting/user/form',
+        query: {
+            mode: 'edit',
+            id: data.id
+        }
+    });
+};
+
+const handleDelete = (item: unknown) => {
+    const data = item as User;
+    if (confirm(`Apakah Anda yakin ingin menghapus user "${data.namaUser}"?`)) {
+        // Remove from list
+        const index = usersList.value.findIndex(u => u.id === data.id);
+        if (index > -1) {
+            usersList.value.splice(index, 1);
+        }
+        showSnackbar('User berhasil dihapus.', 'success');
+    }
+};
+</script>
+<template>
+    <v-row>
+        <v-col cols="12">
+            <BaseBreadcrumb :title="page.title" :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="/setting/user/form"
+                        >
+                            Tambah User
+                        </v-btn>
+                    </div>
+
+                    <TableAntrian
+                        :headers="headers"
+                        :items="usersList"
+                        :search="search"
+                        :actions="actions"
+                        min-width="1200px"
+                        @view="handleView"
+                        @edit="handleEdit"
+                        @delete="handleDelete"
+                    >
+                        <template #item.no="{ index }">
+                            {{ index + 1 }}
+                        </template>
+                        <template #item.status="{ item }">
+                            <v-chip
+                                :color="item.status === 'aktif' ? 'success' : 'error'"
+                                size="small"
+                            >
+                                {{ item.status }}
+                            </v-chip>
+                        </template>
+                    </TableAntrian>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+
+    <!-- Snackbar for notifications -->
+    <v-snackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="3000"
+        location="top"
+    >
+        {{ snackbarMessage }}
+        <template #actions>
+            <v-btn
+                variant="text"
+                @click="snackbar = false"
+            >
+                Close
+            </v-btn>
+        </template>
+    </v-snackbar>
+</template>
\ No newline at end of file