diff --git a/app/components/flow/user/entry.vue b/app/components/flow/user/entry.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/flow/user/list.vue b/app/components/flow/user/list.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
new file mode 100644
index 00000000..256bc4ce
--- /dev/null
+++ b/app/lib/constants.ts
@@ -0,0 +1,170 @@
+export interface ActiveStatusCode {
+  code: 'active' | 'inactive'
+  name: 'Aktif' | 'Tidak Aktif'
+}
+
+export interface DataStatusCode {
+  code: 'new' | 'review' | 'process' | 'done' | 'canceled' | 'rejected' | 'skiped'
+  name: 'Baru' | 'Review' | 'Proses' | 'Selesai' | 'Dibatalkan' | 'Ditolak' | 'Dilewati'
+}
+
+export interface UserStatusCode {
+  code: 'new' | 'active' | 'inactive' | 'blocked' | 'suspended'
+  name: 'Baru' | 'Aktif' | 'Tidak Aktif' | 'Diblokir' | 'Dibekukan'
+}
+
+export interface ItemGroupCode {
+  code: 'infra' | 'medicine' | 'device' | 'material'
+  name: 'Infrastruktur' | 'Obat' | 'Peralatan' | 'Perlengkapan'
+}
+
+export interface UnitTypeCode {
+  code: 'reg' | 'exa' | 'pay' | 'pha' | 'lab' | 'rad'
+  name: 'Registrasi' | 'Pemeriksaan' | 'Pembayaran' | 'Farmasai' | 'Laboratorium' | 'Radiologi'
+}
+
+export interface QueueStatusCode {
+  code: 'wait' | 'proc' | 'done' | 'cancel' | 'skip'
+  name: 'Tunggu' | 'Proses' | 'Selesai' | 'Batal' | 'Dilewati'
+}
+
+export interface EncounterClassCode {
+  code: 'outpatient' | 'ambulatory' | 'emergency' | 'inpatient' | 'draft' | 'done' | 'cancel' | 'skip'
+  name: 'Rawat Jalan' | 'Rawat Jalan' | 'Gawat Darurat' | 'Rawat Inap' | 'Draft' | 'Selesai' | 'Batal' | 'Dilewati'
+}
+
+export interface TimeUnitCode {
+  code: 'sec' | 'min' | 'hour' | 'day' | 'week' | 'month' | 'year'
+  name: 'Detik' | 'Menit' | 'Jam' | 'Hari' | 'Minggu' | 'Bulan' | 'Tahun'
+}
+
+export interface DischargeMethodCode {
+  code: 'home' | 'home-request'
+  name: 'Home' | 'Home Request'
+}
+
+export interface GenderCode {
+  code: 'male' | 'female' | 'not-stated' | 'unknown'
+  name: 'Laki' | 'Perempuan' | 'Tidak Disebutkan' | 'Tidak Diketahui'
+}
+
+export interface ReligionCode {
+  code: 'islam' | 'protestan' | 'katolik' | 'hindu' | 'buda' | 'konghucu'
+  name: 'Islam' | 'Protestan' | 'Katolik' | 'Hindu' | 'Buda' | 'Konghucu'
+}
+
+export interface EducationCode {
+  code: 'TS' | 'TK' | 'SD' | 'SMP' | 'SMA' | 'D1' | 'D2' | 'D3' | 'S1' | 'S2' | 'S3'
+  name: 'TS' | 'TK' | 'SD' | 'SMP' | 'SMA' | 'D1' | 'D2' | 'D3' | 'S1' | 'S2' | 'S3'
+}
+
+export interface OccupationCode {
+  code: 'tidak-bekerja' | 'pns' | 'polisi' | 'tni' | 'guru' | 'wiraswasta' | 'kary-swasta' | 'lainnya'
+  name:
+    | 'Tidak Bekerja'
+    | 'Pegawai Negeri Sipil'
+    | 'Polisi'
+    | 'TNI'
+    | 'Guru'
+    | 'Wiraswasta'
+    | 'Karyawan Swasta'
+    | 'Lainnya'
+}
+
+export interface PersonContactType {
+  code: 'phone' | 'm-phone' | 'email' | 'fax'
+  name: 'Telepon' | 'HP / Ponsel' | 'Email' | 'Fax'
+}
+
+export interface DayCode {
+  code: '0' | '1' | '2' | '3' | '4' | '5' | '6'
+  name: 'Minggu' | '' | '' | '' | '' | '' | 'Sabtu'
+}
+
+export interface PaymentMethodCode {
+  code: 'cash' | 'debit' | 'credit' | 'insurance' | 'membership'
+  name: 'Cash' | 'Debit' | 'Kredit' | 'Asuransi' | 'Membership'
+}
+
+export interface TransportationCode {
+  code: 'ambulance' | 'car' | 'motor-cycle' | 'other'
+  name: 'Ambulans' | 'Mobil' | 'Motor' | 'Lainnya'
+}
+
+export interface PersonConditionCode {
+  code: 'res' | 'emg' | 'urg' | 'lurg' | 'nurg' | 'doa'
+  name: 'Resutiasi' | 'Darurat' | 'Mendesak' | 'Kurang Mendesak' | 'Mendesak' | 'Meninggal Saat Tiba'
+}
+
+export interface EmergencyClassCode {
+  code: 'emg' | 'eon'
+  name: 'Darurat' | 'Ponek'
+}
+
+export interface OutpatientClassCode {
+  code: 'op' | 'icu' | 'hcu' | 'vk'
+  name: 'Rawat Inap' | 'ICU' | 'HCU' | 'Kamar Bersalin'
+}
+
+export interface CheckupScopeCode {
+  code: 'lab' | 'mic-lab' | 'pa-lab' | 'rad'
+  name: 'Laboratorium' | 'Microbacterial Laboratorium' | 'Patology Anatomy Laboratorium' | 'Radiology'
+}
+
+export interface EmployeePositionCode {
+  code: 'doctor' | 'nurse' | 'nutritionist' | 'laborant' | 'pharmacy' | 'payment' | 'payment-verificator' | 'management'
+  name:
+    | 'Dokter'
+    | 'Perawat'
+    | 'Ahli Gisi'
+    | 'Laboran'
+    | 'Farmasi'
+    | 'Pembayaran'
+    | 'Konfirmasi Pembayaran'
+    | 'Management'
+}
+
+export interface SubjectCode {
+  code:
+    | 'pri-compl'
+    | 'sec-compl'
+    | 'cur-disea-hist'
+    | 'pas-disea-hist'
+    | 'fam-disea-hist'
+    | 'alg-hist'
+    | 'alg-react'
+    | 'med-hist'
+  name:
+    | 'Primary Complaint'
+    | 'Secondary Complaint'
+    | 'Current Disease History'
+    | 'Past Disease History'
+    | 'Family Disease History'
+    | 'Allergic Hist'
+    | 'Allergic Reaction'
+    | 'Medication Hist'
+}
+
+export interface ObjectCode {
+  code: 'consc-level' | 'consc-level-det' | 'syst-bp' | 'diast-bp' | 'hear-rt' | 'temp' | 'spo2' | 'weight' | 'height'
+  name:
+    | 'Tingkat Kesadaran'
+    | 'Detail Tingkat Kesadaran'
+    | 'Tekanan Darah Systolic'
+    | 'Tekanan Darah Diastolic'
+    | 'Detak Jantung'
+    | 'Suhu'
+    | 'SpO2'
+    | 'Berat Badan'
+    | 'Tinggi Badan'
+}
+
+export interface AssessmentCode {
+  code: 'early-diag' | 'late-diag' | 'sec-diag'
+  name: 'Diagnosis Awal' | 'Diagnosis Akhir' | 'Diagnosis Sekunder'
+}
+
+export interface InstructionCode {
+  code: 'detail' | 'med-act' | 'medication' | 'material'
+  name: 'Detail Instruksi' | 'Tindakan medis' | 'Obat' | 'BMHP'
+}
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
new file mode 100644
index 00000000..b1afab26
--- /dev/null
+++ b/app/pages/_dev/index.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'blank',
+  public: true,
+})
+
+const route = useRoute()
+const contentFrame = computed(() => route.meta.contentFrame)
+const contentContent = computed(() => {
+  switch (contentFrame.value) {
+    case 'cf-container-lg':
+      return 'cf-frame cf-container-lg-content'
+    case 'cf-container-md':
+      return 'cf-frame cf-container-md-content'
+    case 'cf-container-sm':
+      return 'cf-frame cf-container-sm-content'
+    case 'cf-full-width':
+      return 'cf-frame-width'
+    default:
+      return 'cf-frame'
+  }
+})
+
+const teams: {
+  name: string
+  logo: string
+  plan: string
+}[] = [
+  {
+    name: 'SIMRS - RSSA',
+    logo: '/rssa-logo.png',
+    plan: 'Saiful Anwar Hospital',
+  },
+]
+const sidebar = {
+  collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
+  side: 'left', // 'left' | 'right'
+  variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
+}
+
+const navMenu = ref({
+  heading: 'Main Menu',
+  items: [
+    {
+      title: 'Test User List',
+      icon: 'i-lucide-user',
+      component: defineAsyncComponent(() => import('~/pages/_dev/user/list.vue')),
+    },
+  ],
+})
+
+const activeComponent = ref<any>(null)
+
+function selectComponent(item: any) {
+  activeComponent.value = item.component
+}
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
+      <SidebarHeader>
+        <LayoutSidebarNavHeader :teams="teams" />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup v-if="navMenu.items.length > 0">
+          <SidebarGroupLabel>
+            {{ navMenu.heading }}
+          </SidebarGroupLabel>
+          <button
+            v-for="(item, index) in navMenu.items"
+            :key="index"
+            class="my-2 mb-2 flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
+            @click="selectComponent(item)"
+          >
+            <i :class="item.icon"></i>
+            {{ item.title }}
+          </button>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <LayoutSidebarNavFooter />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+
+    <SidebarInset>
+      <LayoutHeader />
+      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
+        <div v-if="activeComponent">
+          <component :is="activeComponent" />
+        </div>
+        <div v-else class="text-gray-500">Playground untuk testing component</div>
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/app/pages/_dev/user/entry.vue b/app/pages/_dev/user/entry.vue
new file mode 100644
index 00000000..6888d3af
--- /dev/null
+++ b/app/pages/_dev/user/entry.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank',
+  public: true,
+})
+</script>
+
+<template>
+  <div>test tambah user</div>
+</template>
diff --git a/app/pages/_dev/user/list.vue b/app/pages/_dev/user/list.vue
new file mode 100644
index 00000000..4c5edc33
--- /dev/null
+++ b/app/pages/_dev/user/list.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank',
+})
+</script>
+
+<template>
+  <div>test list user</div>
+</template>
diff --git a/package.json b/package.json
index ed5ec93b..55c77220 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@unocss/nuxt": "^66.0.0",
     "@vee-validate/zod": "^4.15.0",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^12.2.0",
+    "@vueuse/core": "^12.8.2",
     "@vueuse/math": "^12.2.0",
     "@vueuse/nuxt": "^12.2.0",
     "class-variance-authority": "^0.7.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f00e4ce1..dcf2f0ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,7 +71,7 @@ devDependencies:
     specifier: ^2.4.6
     version: 2.4.6
   '@vueuse/core':
-    specifier: ^12.2.0
+    specifier: ^12.8.2
     version: 12.8.2(typescript@5.9.2)
   '@vueuse/math':
     specifier: ^12.2.0