diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..6e16f543
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,30 @@
+# top-most EditorConfig file
+root = true
+
+# Default settings for all files
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+# For Markdown files, don't trim trailing whitespace (karena kadang dipakai untuk line break)
+[*.md]
+trim_trailing_whitespace = false
+
+# For JSON, YAML, and config files
+[*.{json,yml,yaml}]
+indent_style = space
+indent_size = 2
+
+# For JS, TS, Vue files
+[*.{js,ts,vue}]
+indent_style = space
+indent_size = 2
+
+# For CSS, SCSS, PostCSS
+[*.{css,scss,pcss}]
+indent_style = space
+indent_size = 2
diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..884ee1fb
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+NUXT_MAIN_API_ORIGIN=
+NUXT_BPJS_API_ORIGIN=
+NUXT_SYNC_API_ORIGIN=
+NUXT_API_ORIGIN=
diff --git a/.gitignore b/.gitignore
index 436290c0..a3d94e0b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,4 +25,4 @@ logs
 
 # editor
 .vscode
-*.swp
\ No newline at end of file
+*.swp
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..bff36007
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "semi": false,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "htmlWhitespaceSensitivity": "ignore",
+  "singleAttributePerLine": true
+}
diff --git a/README-nuxt.md b/README-nuxt.md
new file mode 100644
index 00000000..25b58212
--- /dev/null
+++ b/README-nuxt.md
@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/README.md b/README.md
index 5e582ddb..45e4a4e5 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,111 @@
 
 RSSA - Front End
 
-If you see this, the development is still not merged yet. Please check nother branches.
+> [!IMPORTANT]
+> Read this following instructions before doing your job
+
+## Framework Guide
+
+- [Vue Style Guide](https://vuejs.org/style-guide)
+- [Nuxt Style Guide](https://nuxt.com/docs/4.x/guide)
+- [Shadcn Vue @radix-ui](https://radix.shadcn-vue.com/)
+
+## Configuration
+
+- `nuxt.config.ts`<br />Nuxt configuration file
+- `.env`<br />Some environment variables
+
+## Directory Structure for `app/`
+
+- `app.vue`: Main layout
+- `components` : Contains all reusable UI components.
+- `components/content` : Entry point for business logic and workflows. Pages or routes call these content components to handle API requests and process application logic
+- `components/app` : View-layer components that manage and present data. These are used within `content/` to render or handle specific parts of the UI, and return results back to the content
+- `components/pub` : Public/shared components used across different parts of the app.
+- `composables` : Contains reusable logic and utility functions (e.g. composables, hooks)..
+- `layouts` : Reusable UI layout patterns used across pages.
+- `models` : Contains data definitions or interfaces.
+- `schemas` : Contains JSON schemas used for validation.
+- `services` : Contains reusable API calls and business logic.
+
+
+## Directory Structure for `app/pages`
+
+- `pages/auth` : Authentication related pages.
+- `pages/(features)` : Grouped feature modules that reflect specific business content or domains.
+
+## Directory Structure for `server/`
+
+- `server/api` : API or proxy requests
+
+## Workflows
+
+The basic development workflow follows these steps:
+
+### Define Your Data in `models/`
+
+- Create data definitions or interfaces.
+- These should represent the structure of the data used across your app.
+
+### Build UI Components in `components/app`
+
+- Create reusable UI and app specific components.
+- Keep components pure, avoid making HTTP requests directly within them.
+- They receive data via props and emit events upward.
+
+### Business Logic in `components/content`
+
+- This layer connects the UI with the logic (API calls, validations, navigation).
+- It composes components from `components/app/`, `components/pub/`, and other content.
+- Also responsible for managing state, side effects, and interactions.
+
+### Create Pages in `pages/`
+
+- Define permissions and guards for each page.
+- Pages load the appropriate content from `components/content/`.
+- They do not contain UI or logic directly, just route level layout or guards.
+
+### Validation
+
+- UI level validation in `components/app`. help users avoid mistakes before submitting.
+  - Lightweight/instant validation related to UX.
+  - Basic formatting (email regex, numeric-only, password length).
+  - Showing error messages directly under the field.
+
+- Business level validation in `components/flow`. cannot rely only on the UI, since it often requires server-side checks or rules that may change.
+  - More complex validation rules tied to business logic.
+
+## Code Conventions
+
+- Under the script setup block, putting things in group with the following order:
+  - Imports → all dependencies, sorted by external, alias (~), and relative imports.
+  - Props & Emits → clearly define component inputs & outputs.
+  - State & Computed → all ref, reactive, and computed variables grouped together.
+  - Lifecycle Hooks → grouped by mounting → updating → unmounting order.
+  - Functions → async first (fetching, API calls), then utility & event handlers.
+  - Watchers → if needed, put them at the bottom.
+  - Template → keep clean and minimal logic, use methods/computed instead of inline JS.
+- Declaration Naming
+  - Uses PascalCase for `type` naming
+  - Uses camelCase for `variable` and `const` naming
+  - Underscore can be used to indicates that a variable has derived from an attribute of an object<br />
+    for example: `person_name` indicates it is an attribute `name` from object `person`
+- Looping
+  - Uses `i`, `j`, `k` as variable for `for` looping index
+  - Uses `item` as object instantition for `forEach` loop callback
+  - Uses `item` as object instantition for `v-for` loop callback in the template
+
+## Git Workflows
+
+The basic git workflow follows these steps:
+
+1. Create a new branch on `dev`
+   - branch name should be `feat/<feature-name>` or `fix/<bug-name>`
+2. Make your changes
+3. Commit your changes
+   - commit msg format: `[type]: [description]`
+     - `type` can be `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`
+     - `description` should be a brief description of the changes
+     - Example: `feat: add new feature`
+4. Push your changes to `dev`
+5. Create a pull request from `dev` to `main`
diff --git a/app/app.vue b/app/app.vue
new file mode 100644
index 00000000..46d6ca88
--- /dev/null
+++ b/app/app.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ConfigProvider } from 'radix-vue'
+
+const useIdFunction = () => useId()
+
+const textDirection = useTextDirection({ initialValue: 'ltr' })
+const dir = computed(() => (textDirection.value === 'rtl' ? 'rtl' : 'ltr'))
+
+useHead({
+  // as a string,
+  // where `%s` is replaced with the title
+  titleTemplate: '%s - RSSA',
+})
+</script>
+
+<template>
+  <ConfigProvider :use-id="useIdFunction" :dir="dir">
+    <div vaul-drawer-wrapper class="relative">
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
+    <Toaster />
+  </ConfigProvider>
+</template>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
new file mode 100644
index 00000000..a25bddcb
--- /dev/null
+++ b/app/assets/css/main.css
@@ -0,0 +1,378 @@
+/* SIMRS RSSA Design System - Pure CSS (No Tailwind) */
+
+/* CSS Variables */
+:root {
+  /* Medical Theme Colors */
+  --background: 230 20% 98%;
+  --foreground: 210 20% 15%;
+  --card: 0 0% 100%;
+  --card-foreground: 210 20% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 210 20% 15%;
+
+  /* Primary - Medical Green */
+  --primary: 26 89% 57%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 26, 92%, 65%;
+
+  /* Secondary - Clean Blue */
+  --secondary: 40 70% 60%;
+  --secondary-foreground: 210 20% 100%;
+  --muted: 210 25% 95%;
+  --muted-foreground: 210 15% 50%;
+
+  /* Accent - Neutral Gray */
+  --accent: 210 40% 96%;
+  --accent-foreground: 222.2 84% 4.9%;
+  --destructive: 0 75% 55%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 210 20% 88%;
+  --input: 210 20% 95%;
+  --ring: 150 75% 35%;
+
+  /* Medical Status Colors */
+  --success: 150 75% 40%;
+  --success-foreground: 0 0% 100%;
+  --warning: 45 95% 60%;
+  --warning-foreground: 210 20% 15%;
+  --info: 210 100% 50%;
+  --info-foreground: 0 0% 100%;
+
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, hsl(150 75% 35%), hsl(150 75% 45%));
+  --gradient-medical: linear-gradient(135deg, hsl(150 75% 35%), hsl(210 100% 50%));
+  --gradient-subtle: linear-gradient(180deg, hsl(210 20% 98%), hsl(210 25% 95%));
+
+  /* Shadows */
+  --shadow-medical: 0 4px 20px -4px hsl(150 75% 35% / 0.15);
+  --shadow-card: 0 2px 10px -2px hsl(210 20% 15% / 0.1);
+  --shadow-glow: 0 0 30px hsl(150 75% 35% / 0.2);
+
+  /* Transitions */
+  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-fast: all 0.15s ease-out;
+
+  /* Border Radius */
+  --radius: 0.5rem;
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Sidebar */
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+.dark {
+  --background: 210 25% 8%;
+  --foreground: 210 20% 95%;
+  --card: 210 25% 10%;
+  --card-foreground: 210 20% 95%;
+  --popover: 210 25% 10%;
+  --popover-foreground: 210 20% 95%;
+  --primary: 26 89% 57%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 26, 92%, 65%;
+  --secondary: 210 25% 15%;
+  --secondary-foreground: 210 20% 90%;
+  --muted: 210 25% 15%;
+  --muted-foreground: 210 15% 65%;
+  --accent: 210 100% 55%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 75% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 210 25% 20%;
+  --input: 210 25% 15%;
+  --ring: 150 75% 45%;
+  --success: 150 75% 50%;
+  --warning: 45 95% 65%;
+  --info: 210 100% 60%;
+  --gradient-primary: linear-gradient(135deg, hsl(150 75% 45%), hsl(150 75% 55%));
+  --gradient-medical: linear-gradient(135deg, hsl(150 75% 45%), hsl(210 100% 55%));
+  --gradient-subtle: linear-gradient(180deg, hsl(210 25% 8%), hsl(210 25% 12%));
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+/* Keyframes for Animations */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseMedical {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 10px hsl(var(--primary) / 0);
+  }
+}
+
+/* Base Styles */
+* {
+  border-color: hsl(var(--border));
+  box-sizing: border-box;
+}
+
+body {
+  /* background-color: hsl(var(--background)); */
+  /* background-color: hsl(var(--background), 0.5); */
+  color: hsl(var(--foreground));
+  line-height: 1.5;
+  margin: 0;
+}
+
+body {
+  @apply bg-slate-100 dark:bg-slate-800 ;
+}
+
+body, table, label {
+  @apply md:!text-xs 2xl:!text-sm;
+}
+
+/* Container */
+.container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1400px;
+  }
+}
+
+/* Color Classes */
+.bg-background {
+  background-color: hsl(var(--background));
+}
+.bg-foreground {
+  background-color: hsl(var(--foreground));
+}
+.bg-card {
+  background-color: hsl(var(--card));
+}
+.bg-primary {
+  background-color: hsl(var(--primary));
+}
+.bg-secondary {
+  background-color: hsl(var(--secondary));
+}
+.bg-accent {
+  background-color: hsl(var(--accent));
+}
+.bg-destructive {
+  background-color: hsl(var(--destructive));
+}
+.bg-muted {
+  background-color: hsl(var(--muted));
+}
+.bg-success {
+  background-color: hsl(var(--success));
+}
+.bg-warning {
+  background-color: hsl(var(--warning));
+}
+.bg-info {
+  background-color: hsl(var(--info));
+}
+
+.text-background {
+  color: hsl(var(--background));
+}
+.text-foreground {
+  color: hsl(var(--foreground));
+}
+.text-card {
+  color: hsl(var(--card));
+}
+.text-primary {
+  color: hsl(var(--primary));
+}
+.text-secondary {
+  color: hsl(var(--secondary));
+}
+.text-accent {
+  color: hsl(var(--accent));
+}
+.text-destructive {
+  color: hsl(var(--destructive));
+}
+.text-muted {
+  color: hsl(var(--muted));
+}
+.text-success {
+  color: hsl(var(--success));
+}
+.text-warning {
+  color: hsl(var(--warning));
+}
+.text-info {
+  color: hsl(var(--info));
+}
+
+.text-primary-foreground {
+  color: hsl(var(--primary-foreground));
+}
+.text-secondary-foreground {
+  color: hsl(var(--secondary-foreground));
+}
+.text-accent-foreground {
+  color: hsl(var(--accent-foreground));
+}
+.text-destructive-foreground {
+  color: hsl(var(--destructive-foreground));
+}
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+.text-success-foreground {
+  color: hsl(var(--success-foreground));
+}
+.text-warning-foreground {
+  color: hsl(var(--warning-foreground));
+}
+.text-info-foreground {
+  color: hsl(var(--info-foreground));
+}
+
+.border-primary {
+  border-color: hsl(var(--primary));
+}
+.border-secondary {
+  border-color: hsl(var(--secondary));
+}
+.border-accent {
+  border-color: hsl(var(--accent));
+}
+.border-destructive {
+  border-color: hsl(var(--destructive));
+}
+.border-input {
+  border-color: hsl(var(--input));
+}
+
+/* Sidebar Colors */
+.bg-sidebar {
+  background-color: hsl(var(--sidebar-background));
+}
+.text-sidebar {
+  color: hsl(var(--sidebar-foreground));
+}
+.bg-sidebar-primary {
+  background-color: hsl(var(--sidebar-primary));
+}
+.text-sidebar-primary {
+  color: hsl(var(--sidebar-primary));
+}
+.bg-sidebar-accent {
+  background-color: hsl(var(--sidebar-accent));
+}
+.text-sidebar-accent {
+  color: hsl(var(--sidebar-accent));
+}
+.border-sidebar {
+  border-color: hsl(var(--sidebar-border));
+}
+
+/* Background Images */
+.bg-gradient-medical {
+  background-image: var(--gradient-medical);
+}
+.bg-gradient-primary {
+  background-image: var(--gradient-primary);
+}
+.bg-gradient-subtle {
+  background-image: var(--gradient-subtle);
+}
+
+/* Border Radius */
+.rounded-sm {
+  border-radius: var(--radius-sm);
+}
+
+/* Form Error Styling */
+.field-error-info {
+  font-size: 0.75rem;
+  margin-left: 0.25rem;
+  color: hsl(var(--destructive));
+  /* font-size: 0.875rem; */
+  margin-top: 0.25rem;
+  min-height: 1rem; /* Reserve space to prevent CLS */
+  line-height: 1.25;
+}
+
+/* .rounded-md { border-radius: var */
+
+/* Dashboard grid utility */
+.dashboard-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 1.25rem;
+  }
+}
diff --git a/app/components/app/assesment-function/entry-form.vue b/app/components/app/assesment-function/entry-form.vue
new file mode 100644
index 00000000..5768c6a0
--- /dev/null
+++ b/app/components/app/assesment-function/entry-form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/assesment-function/list-cfg.ts b/app/components/app/assesment-function/list-cfg.ts
new file mode 100644
index 00000000..a11537a7
--- /dev/null
+++ b/app/components/app/assesment-function/list-cfg.ts
@@ -0,0 +1,114 @@
+import { defineAsyncComponent } from 'vue'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec: unknown, idx: number) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(rec: unknown) {
+      return '-'
+    },
+  },
+}
\ No newline at end of file
diff --git a/app/components/app/assesment-function/list.vue b/app/components/app/assesment-function/list.vue
new file mode 100644
index 00000000..58b4f1bd
--- /dev/null
+++ b/app/components/app/assesment-function/list.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
+</template>
diff --git a/app/components/app/assesment-function/picker.vue b/app/components/app/assesment-function/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/assesment-function/search.vue b/app/components/app/assesment-function/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue
new file mode 100644
index 00000000..29fb60b4
--- /dev/null
+++ b/app/components/app/auth/login.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { z } from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Loader2 } from 'lucide-vue-next'
+import { useForm } from 'vee-validate'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  isLoading: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  submit: [data: any]
+}>()
+
+const { handleSubmit, defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    name: '',
+    password: '',
+  },
+})
+
+const [name, nameAttrs] = defineField('name')
+const [password, passwordAttrs] = defineField('password')
+
+const onSubmit = handleSubmit(async (values) => {
+  try {
+    await emit('submit', values)
+  } catch (error) {
+    console.error('Submission failed:', error)
+  }
+})
+</script>
+
+<template>
+  <form class="grid gap-6" @submit="onSubmit">
+    <div class="grid gap-2">
+      <Label for="name">Username</Label>
+      <Input
+        id="name"
+        v-model="name"
+        v-bind="nameAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.name }"
+      />
+      <span v-if="errors.name" class="text-sm text-red-500">
+        {{ errors.name }}
+      </span>
+    </div>
+
+    <div class="grid gap-2">
+      <Label for="password">Password</Label>
+      <Input
+        id="password"
+        v-model="password"
+        v-bind="passwordAttrs"
+        type="password"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.password }"
+      />
+      <span v-if="errors.password" class="text-sm text-red-500">
+        {{ errors.password }}
+      </span>
+    </div>
+
+    <Button type="submit" class="w-full" :disabled="isLoading || !meta.valid">
+      <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+      Login
+    </Button>
+  </form>
+</template>
diff --git a/app/components/app/bed/entry-form.vue b/app/components/app/bed/entry-form.vue
new file mode 100644
index 00000000..f2b0c961
--- /dev/null
+++ b/app/components/app/bed/entry-form.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  parents: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.bed,
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.bed
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.bed,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Kamar</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Kamar"
+            search-placeholder="Cari Kamar"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/bed/list-cfg.ts b/app/components/app/bed/list-cfg.ts
new file mode 100644
index 00000000..825db939
--- /dev/null
+++ b/app/components/app/bed/list-cfg.ts
@@ -0,0 +1,44 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Kamar' },
+    { label: '' },
+  ]],
+
+  keys: ['code', 'name', 'parent', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/bed/list.vue b/app/components/app/bed/list.vue
new file mode 100644
index 00000000..19642581
--- /dev/null
+++ b/app/components/app/bed/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/building/entry-form.vue b/app/components/app/building/entry-form.vue
new file mode 100644
index 00000000..c2851e2d
--- /dev/null
+++ b/app/components/app/building/entry-form.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.building,  
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.building
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.building,
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/building/list-cfg.ts b/app/components/app/building/list-cfg.ts
new file mode 100644
index 00000000..016caa03
--- /dev/null
+++ b/app/components/app/building/list-cfg.ts
@@ -0,0 +1,36 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/building/list.vue b/app/components/app/building/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/building/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/chamber/entry-form.vue b/app/components/app/chamber/entry-form.vue
new file mode 100644
index 00000000..f44a6745
--- /dev/null
+++ b/app/components/app/chamber/entry-form.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  parents: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.chamber,
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.chamber
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.chamber,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/chamber/list-cfg.ts b/app/components/app/chamber/list-cfg.ts
new file mode 100644
index 00000000..7f10fe7a
--- /dev/null
+++ b/app/components/app/chamber/list-cfg.ts
@@ -0,0 +1,44 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Lantai' },
+    { label: '' },
+  ]],
+
+  keys: ['code', 'name', 'parent', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/chamber/list.vue b/app/components/app/chamber/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/chamber/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/consultation/entry.vue b/app/components/app/consultation/entry.vue
new file mode 100644
index 00000000..bff12bfb
--- /dev/null
+++ b/app/components/app/consultation/entry.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+// Components
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// Types
+import type { ConsultationFormData } from '~/schemas/consultation.schema.ts'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import Textarea from '~/components/pub/ui/textarea/Textarea.vue'
+import type { CreateDto } from '~/models/consultation'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: CreateDto
+  encounter_id: number
+  units: { value: string; label: string }[]
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ConsultationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const today = new Date()
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    date: props.values.date || today.toISOString().slice(0, 10),
+    problem: '',
+    dstUnit_id: 0,
+  } as Partial<ConsultationFormData>,
+})
+
+const [date, dateAttrs] = defineField('date')
+const [unit_id, unitAttrs] = defineField('unit_id')
+const [problem, problemAttrs] = defineField('problem')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.date !== undefined) date.value = props.values.date.substring(0, 10)
+  if (props.values.dstUnit_id !== undefined) unit_id.value = props.values.dstUnit_id
+  if (props.values.problem !== undefined) problem.value = props.values.problem
+}
+
+const resetForm = () => {
+  date.value = date.value ?? today.toISOString().slice(0, 10)
+  unit_id.value = 0
+  problem.value = ''
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: ConsultationFormData = {
+    encounter_id: props.encounter_id,
+    date: date.value ? `${date.value}T00:00:00Z` : '',
+    problem: problem.value || '',
+    dstUnit_id: unit_id.value || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-division" @submit.prevent>
+    <DE.Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="3" :cellFlex="false">
+      <DE.Cell>
+        <DE.Label>Tanggal</DE.Label>
+        <DE.Field :errMessage="errors.code">
+          <Input
+            v-model.number="date"
+            icon-name="i-lucide-chevron-down"
+            v-bind="dateAttrs"
+            readonly
+          />
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>Unit</DE.Label>
+        <DE.Field :errMessage="errors.unit_id">
+          {{ errors.unit_id }}
+          <Select
+            id="strUnit_id"
+            v-model.number="unit_id"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih poliklinik tujuan"
+            v-bind="unitAttrs"
+            :items="props.units || []"
+            :disabled="isLoading || isReadonly"
+          />
+          <!-- <Input type="number" id="unit_id" v-model.number="unit_id" v-bind="unitAttrs" :disabled="isLoading || isReadonly" /> -->
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :colSpan="3">
+        <DE.Label>Uraian</DE.Label>
+        <DE.Field :errMessage="errors.problem">
+          <Textarea id="problem" v-model="problem" v-bind="problemAttrs" :disabled="isLoading || isReadonly" />
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/consultation/list.cfg.ts b/app/components/app/consultation/list.cfg.ts
new file mode 100644
index 00000000..587ec0f8
--- /dev/null
+++ b/app/components/app/consultation/list.cfg.ts
@@ -0,0 +1,54 @@
+import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { Consultation } from '~/models/consultation'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+export const config: Config = {
+  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  headers: [[
+    { label: 'Tanggal' },
+    { label: 'Tujuan' },
+    { label: 'Dokter' },
+    { label: 'Pertanyaan' },
+    { label: 'Jawaban' },
+    { label: '' },
+  ]],
+  keys: ['date', 'dstUnit.name', 'dstDoctor.name', 'problem', 'solution', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+    date(rec) {
+      const recX = rec as Consultation
+      return recX.date?.substring(0, 10) || '-'
+    }
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  } as RecStrFuncComponent,
+  htmls: {} as RecStrFuncUnknown,
+}
diff --git a/app/components/app/consultation/list.vue b/app/components/app/consultation/list.vue
new file mode 100644
index 00000000..19c6a9f9
--- /dev/null
+++ b/app/components/app/consultation/list.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <!-- FIXME: pindahkan ke content/division/list.vue   -->
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/counter/entry-form.vue b/app/components/app/counter/entry-form.vue
new file mode 100644
index 00000000..67a43a85
--- /dev/null
+++ b/app/components/app/counter/entry-form.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.counter,  
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.counter
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.counter,
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/counter/list-cfg.ts b/app/components/app/counter/list-cfg.ts
new file mode 100644
index 00000000..016caa03
--- /dev/null
+++ b/app/components/app/counter/list-cfg.ts
@@ -0,0 +1,36 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/counter/list.vue b/app/components/app/counter/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/counter/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/device-order-item/list-entry.config.ts b/app/components/app/device-order-item/list-entry.config.ts
new file mode 100644
index 00000000..f2f3ef86
--- /dev/null
+++ b/app/components/app/device-order-item/list-entry.config.ts
@@ -0,0 +1,36 @@
+import { defineAsyncComponent } from 'vue'
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+  headers: [[{ label: 'Nama' }, { label: 'Jumlah' }, { label: '' }]],
+  keys: ['name', 'count', 'action'],
+  delKeyNames: [
+    { key: 'name', label: 'Nama' },
+    { key: 'count', label: 'Jumlah' },
+  ],
+  skeletonSize: 10
+  // funcParsed: {
+  //   parent: (rec: unknown): unknown => {
+  //     const recX = rec as SmallDetailDto
+  //     return recX.parent?.name || '-'
+  //   },
+  // },
+  // funcComponent: {
+  //   action(rec: object, idx: any) {
+  //     const res: RecComponent = {
+  //       idx,
+  //       rec: rec as object,
+  //       component: action,
+  //       props: {
+  //         size: 'sm',
+  //       },
+  //     }
+  //     return res
+  //   },
+  // }
+}
+
diff --git a/app/components/app/device-order-item/list-entry.vue b/app/components/app/device-order-item/list-entry.vue
new file mode 100644
index 00000000..26f6691d
--- /dev/null
+++ b/app/components/app/device-order-item/list-entry.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import { config } from './list-entry.config'
+</script>
+
+<template>
+  <DataTable v-bind="config" :rows="[]" class="border mb-3 2xl:mb-4" />
+  <div>
+    <Button>
+      Tambah
+    </Button>
+  </div>
+</template>
diff --git a/app/components/app/device-order/entry-form.vue b/app/components/app/device-order/entry-form.vue
new file mode 100644
index 00000000..bea2b6eb
--- /dev/null
+++ b/app/components/app/device-order/entry-form.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    Test
+</template>
diff --git a/app/components/app/device-order/list.config.ts b/app/components/app/device-order/list.config.ts
new file mode 100644
index 00000000..7580c576
--- /dev/null
+++ b/app/components/app/device-order/list.config.ts
@@ -0,0 +1,42 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { DeviceOrder } from '~/models/device-order'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { }, { }, { width: 50 }],
+  headers: [[{ label: 'Tanggal' }, { label: 'DPJP' }, { label: 'Alat Kesehatan' }, { label: '' }]],
+  keys: ['createdAt', 'encounter.doctor.person.name', 'items', 'action'],
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+  skeletonSize: 10,
+  htmls: {
+    items: (rec: unknown): unknown => {
+      const recX = rec as DeviceOrder
+      return recX.items?.length || 0
+    },
+  }
+  // funcParsed: {
+  //   parent: (rec: unknown): unknown => {
+  //     const recX = rec as SmallDetailDto
+  //     return recX.parent?.name || '-'
+  //   },
+  // },
+  // funcComponent: {
+  //   action(rec: object, idx: any) {
+  //     const res: RecComponent = {
+  //       idx,
+  //       rec: rec as object,
+  //       component: action,
+  //       props: {
+  //         size: 'sm',
+  //       },
+  //     }
+  //     return res
+  //   },
+  // }
+}
+
diff --git a/app/components/app/device-order/list.vue b/app/components/app/device-order/list.vue
new file mode 100644
index 00000000..37b24ea3
--- /dev/null
+++ b/app/components/app/device-order/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.config'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="[]"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/diagnose-src/entry-form.vue b/app/components/app/diagnose-src/entry-form.vue
new file mode 100644
index 00000000..3f84b2a2
--- /dev/null
+++ b/app/components/app/diagnose-src/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DiagnoseSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<DiagnoseSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: DiagnoseSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-diagnose-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/diagnose-src/list-cfg.ts b/app/components/app/diagnose-src/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/diagnose-src/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/diagnose-src/list.vue b/app/components/app/diagnose-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/diagnose-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/division-position/entry-form.vue b/app/components/app/division-position/entry-form.vue
new file mode 100644
index 00000000..2525b49b
--- /dev/null
+++ b/app/components/app/division-position/entry-form.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genDivisionPosition } from '~/models/division-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  divisions: any[]
+  employees: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DivisionPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [division, divisionAttrs] = defineField('division_id')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.division_id !== undefined)
+    division.value = props.values.division_id ? Number(props.values.division_id) : null
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  division.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: DivisionPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    division_id: division.value || null,
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-division-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Posisi Divisi</Label>
+        <Field :errMessage="errors.division_id">
+          <Combobox
+            id="division"
+            v-model="division"
+            v-bind="divisionAttrs"
+            :items="divisions"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Divisi"
+            search-placeholder="Cari Divisi"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/division-position/list-cfg.ts b/app/components/app/division-position/list-cfg.ts
new file mode 100644
index 00000000..e35627d2
--- /dev/null
+++ b/app/components/app/division-position/list-cfg.ts
@@ -0,0 +1,59 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Divisi Induk' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.employee?.name || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/division-position/list.vue b/app/components/app/division-position/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/division-position/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/division/entry-form-prev.vue b/app/components/app/division/entry-form-prev.vue
new file mode 100644
index 00000000..0684fc55
--- /dev/null
+++ b/app/components/app/division/entry-form-prev.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Form } from '~/components/pub/ui/form'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+    }[]
+  }
+  divisionTree?: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    data: TreeItem[]
+    onFetchChildren: (parentId: string) => Promise<void>
+  }
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: DivisionFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
+            <Field id="name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama divisi" autocomplete="off"
+                      v-bind="componentField"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
+            <Field id="code" :errors="errors">
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input id="code" type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="parentId">Divisi Induk</Label>
+            <Field id="parentId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="parentId">
+                <FormItem>
+                  <FormControl>
+                    <!-- Gunakan TreeSelect jika divisionTree tersedia, fallback ke Combobox -->
+                    <TreeSelect
+                      v-if="props.divisionTree"
+                      id="parentId"
+                      :model-value="componentField.modelValue"
+                      :data="props.divisionTree.data"
+                      :on-fetch-children="props.divisionTree.onFetchChildren"
+                      @update:model-value="componentField.onChange"
+                    />
+                    <Combobox
+                      v-else
+                      id="parentId" v-bind="componentField" :items="props.division.items"
+                      :placeholder="props.division.msg.placeholder" :search-placeholder="props.division.msg.search"
+                      :empty-message="props.division.msg.empty"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/division/entry-form.vue b/app/components/app/division/entry-form.vue
new file mode 100644
index 00000000..7702fdc6
--- /dev/null
+++ b/app/components/app/division/entry-form.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+
+// Types
+import type { DivisionFormData } from '~/schemas/division.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  divisions: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<DivisionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [parent, parentAttrs] = defineField('parent_id')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  parent.value = null
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: DivisionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    parent_id: parent.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-division"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Divisi Induk</Label>
+        <Field :errMessage="errors.parent_id">
+          <TreeSelect
+            id="parent"
+            v-model="parent"
+            v-bind="parentAttrs"
+            :data="divisions"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Divisi Induk"
+            search-placeholder="Cari divisi"
+            empty-message="Divisi tidak ditemukan"
+            :on-fetch-children="async (_parentId: string) => {}"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/division/list-cfg.ts b/app/components/app/division/list-cfg.ts
new file mode 100644
index 00000000..54ed06a6
--- /dev/null
+++ b/app/components/app/division/list-cfg.ts
@@ -0,0 +1,47 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Divisi Induk' },
+    { label: '' },
+  ]],
+
+  keys: ['code', 'name', 'parent', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
\ No newline at end of file
diff --git a/app/components/app/division/list.vue b/app/components/app/division/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/division/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/division/tree.vue b/app/components/app/division/tree.vue
new file mode 100644
index 00000000..a6f66eff
--- /dev/null
+++ b/app/components/app/division/tree.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+
+/**
+ * DEMO COMPONENT - Tree Select dengan Lazy Loading
+ *
+ * Komponen ini adalah contoh penggunaan TreeSelect dengan data teknologi.
+ * Untuk penggunaan dalam aplikasi nyata, lihat komponen content/division/entry.vue
+ * yang menggunakan tree select untuk data divisi rumah sakit.
+ */
+
+// Tipe data untuk konsistensi
+interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
+
+// State untuk data pohon demo - data teknologi sebagai contoh
+const treeData = ref<TreeItem[]>([
+  { value: 'frontend', label: 'Frontend Development', hasChildren: true },
+  { value: 'backend', label: 'Backend Development', hasChildren: true },
+  { value: 'mobile', label: 'Mobile Development', hasChildren: true },
+  { value: 'devops', label: 'DevOps & Infrastructure', hasChildren: false },
+])
+
+// State untuk menampung nilai yang dipilih
+const selectedValue = ref<string>()
+
+// --- DEMO LOGIC: SIMULASI API DAN MANIPULASI DATA ---
+
+// Helper: Fungsi rekursif untuk mencari dan menyisipkan data anak ke dalam state
+function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]): boolean {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    if (node && node.value === parentId) {
+      // Gunakan Vue.set equivalent untuk memastikan reactivity
+      node.children = [...newChildren]
+      console.log(`[findAndInsertChildren] Updated children for ${parentId}:`, node.children)
+      return true
+    }
+    if (node && node.children && findAndInsertChildren(node.children, parentId, newChildren)) {
+      return true
+    }
+  }
+  return false
+}
+
+// Fungsi demo untuk simulasi fetch data dari API
+async function handleFetchChildren(parentId: string): Promise<void> {
+  console.log(`[DEMO] Mengambil data anak untuk parent: ${parentId}`)
+
+  // Simulasi delay API call
+  await new Promise(resolve => setTimeout(resolve, 600))
+
+  let childrenData: TreeItem[] = []
+
+  // Sample data berdasarkan parent ID
+  switch (parentId) {
+    case 'frontend':
+      childrenData = [
+        { value: 'vue', label: 'Vue.js', hasChildren: true },
+        { value: 'react', label: 'React.js', hasChildren: true },
+        { value: 'angular', label: 'Angular', hasChildren: false },
+        { value: 'svelte', label: 'Svelte', hasChildren: false },
+      ]
+      break
+    case 'backend':
+      childrenData = [
+        { value: 'nodejs', label: 'Node.js', hasChildren: true },
+        { value: 'python', label: 'Python', hasChildren: true },
+        { value: 'golang', label: 'Go', hasChildren: false },
+        { value: 'rust', label: 'Rust', hasChildren: false },
+      ]
+      break
+    case 'mobile':
+      childrenData = [
+        { value: 'flutter', label: 'Flutter', hasChildren: false },
+        { value: 'react-native', label: 'React Native', hasChildren: false },
+        { value: 'ionic', label: 'Ionic', hasChildren: false },
+      ]
+      break
+    case 'vue':
+      childrenData = [
+        { value: 'nuxt', label: 'Nuxt.js', hasChildren: false },
+        { value: 'quasar', label: 'Quasar', hasChildren: false },
+      ]
+      break
+    case 'react':
+      childrenData = [
+        { value: 'nextjs', label: 'Next.js', hasChildren: false },
+        { value: 'gatsby', label: 'Gatsby', hasChildren: false },
+      ]
+      break
+    case 'nodejs':
+      childrenData = [
+        { value: 'express', label: 'Express.js', hasChildren: false },
+        { value: 'nestjs', label: 'NestJS', hasChildren: false },
+        { value: 'fastify', label: 'Fastify', hasChildren: false },
+      ]
+      break
+    case 'python':
+      childrenData = [
+        { value: 'django', label: 'Django', hasChildren: false },
+        { value: 'fastapi', label: 'FastAPI', hasChildren: false },
+        { value: 'flask', label: 'Flask', hasChildren: false },
+      ]
+      break
+  }
+
+  // Insert data ke dalam tree state
+  const success = findAndInsertChildren(treeData.value, parentId, childrenData)
+  console.log(`[DEMO] Insert children result:`, success)
+
+  // Force trigger reactivity
+  triggerRef(treeData)
+  console.log(`[DEMO] Current tree data:`, JSON.stringify(treeData.value, null, 2))
+}
+</script>
+
+<template>
+  <div class="p-10 max-w-2xl mx-auto">
+    <div class="mb-6">
+      <h1 class="mb-2 text-3xl font-bold text-slate-800">Demo: Tree Select dengan Lazy Loading</h1>
+      <p class="text-slate-600">
+        Contoh penggunaan komponen TreeSelect dengan data teknologi.
+        Pilih item untuk melihat sub-kategori yang dimuat secara lazy.
+      </p>
+    </div>
+
+    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+      <h3 class="font-semibold text-blue-800 mb-2">💡 Catatan untuk Developer:</h3>
+      <p class="text-sm text-blue-700">
+        Untuk implementasi nyata dengan data divisi rumah sakit,
+        lihat komponen <code class="px-1 bg-blue-100 rounded">content/division/entry.vue</code>
+      </p>
+    </div>
+
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-slate-700 mb-2">
+          Pilih Teknologi:
+        </label>
+        <TreeSelect
+          v-model="selectedValue"
+          :data="treeData"
+          :on-fetch-children="handleFetchChildren"
+        />
+      </div>
+
+      <div class="p-4 bg-slate-50 rounded-lg">
+        <p class="text-sm text-slate-600 mb-1">Value yang terpilih:</p>
+        <span class="px-3 py-1 font-mono text-sm bg-white border rounded-md">
+          {{ selectedValue || 'Belum ada yang dipilih' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="mt-8 text-xs text-slate-500">
+      <p>🔄 Data dimuat secara lazy saat node parent dibuka</p>
+      <p>⏱️ Simulasi delay 600ms untuk menampilkan loading state</p>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/doctor/entry-form.vue b/app/components/app/doctor/entry-form.vue
new file mode 100644
index 00000000..24584074
--- /dev/null
+++ b/app/components/app/doctor/entry-form.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+]
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="2">
+            <Label>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>No. SIP</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Unit</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/doctor/list-cfg.ts b/app/components/app/doctor/list-cfg.ts
new file mode 100644
index 00000000..52111fc7
--- /dev/null
+++ b/app/components/app/doctor/list-cfg.ts
@@ -0,0 +1,109 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
+  ],
+
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
\ No newline at end of file
diff --git a/app/components/app/doctor/list.vue b/app/components/app/doctor/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/doctor/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/doctor/picker.vue b/app/components/app/doctor/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/doctor/search.vue b/app/components/app/doctor/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/doctor/status-badge.vue b/app/components/app/doctor/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/doctor/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/employee/entry-form.vue b/app/components/app/employee/entry-form.vue
new file mode 100644
index 00000000..006f8eff
--- /dev/null
+++ b/app/components/app/employee/entry-form.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any; items: any[] }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Nomor Induk Pegawai</Label>
+            <Field>
+              <Input v-model="data.number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Status</Label>
+            <Field>
+              <Select
+                v-model="data.type"
+                :items="items"
+                placeholder="Pilih jenis"
+              />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Position</Label>
+            <Field>
+              <Select
+                v-model="data.type"
+                :items="items"
+                placeholder="Pilih jenis"
+              />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Divisi</Label>
+            <Field>
+              <Select
+                v-model="data.type"
+                :items="items"
+                placeholder="Pilih jenis"
+              />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/employee/list-cfg.ts b/app/components/app/employee/list-cfg.ts
new file mode 100644
index 00000000..4c6f691c
--- /dev/null
+++ b/app/components/app/employee/list-cfg.ts
@@ -0,0 +1,104 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
+  ],
+
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    status: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+    }
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    }
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/employee/list.vue b/app/components/app/employee/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/employee/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/employee/picker.vue b/app/components/app/employee/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/employee/search.vue b/app/components/app/employee/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/encounter/assesment-function/entry-form.vue b/app/components/app/encounter/assesment-function/entry-form.vue
new file mode 100644
index 00000000..5768c6a0
--- /dev/null
+++ b/app/components/app/encounter/assesment-function/entry-form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/encounter/assesment-function/list-cfg.ts b/app/components/app/encounter/assesment-function/list-cfg.ts
new file mode 100644
index 00000000..754d2dfb
--- /dev/null
+++ b/app/components/app/encounter/assesment-function/list-cfg.ts
@@ -0,0 +1,112 @@
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 120 },
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: 'Rekam Medis' },
+    { label: 'KTP' },
+    { label: 'Tgl Lahir' },
+    { label: 'Umur' },
+    { label: 'JK' },
+    { label: 'Pendidikan' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'name',
+  'medicalRecord_number',
+  'identity_number',
+  'birth_date',
+  'patient_age',
+  'gender',
+  'education',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  birth_date: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX.birth_date == 'object' && recX.birth_date) {
+      return (recX.birth_date as Date).toLocaleDateString()
+    } else if (typeof recX.birth_date == 'string') {
+      return (recX.birth_date as string).substring(0, 10)
+    }
+    return recX.birth_date
+  },
+  patient_age: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.birth_date?.split('T')[0]
+  },
+  gender: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+      return 'Tidak Diketahui'
+    }
+    return recX.gender_code
+  },
+  education: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+      return recX.education_code
+    } else if (typeof recX.education_code) {
+      return recX.education_code
+    }
+    return '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/encounter/assesment-function/list.vue b/app/components/app/encounter/assesment-function/list.vue
new file mode 100644
index 00000000..b9a74929
--- /dev/null
+++ b/app/components/app/encounter/assesment-function/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/encounter/assesment-function/picker.vue b/app/components/app/encounter/assesment-function/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/encounter/assesment-function/search.vue b/app/components/app/encounter/assesment-function/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/encounter/check-in-entry.vue b/app/components/app/encounter/check-in-entry.vue
new file mode 100644
index 00000000..ad7de5d6
--- /dev/null
+++ b/app/components/app/encounter/check-in-entry.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+//
+import { LucideCheck } from 'lucide-vue-next';
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+// Components
+import type z from 'zod'
+import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { CheckInFormData } from '~/schemas/encounter.schema'
+import type { Encounter } from '~/models/encounter'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  doctors: { value: string; label: string }[]
+  employees: { value: string; label: string }[]
+  encounter: Encounter
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  submit: [values: CheckInFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    responsible_doctor_id: 0,
+    adm_employee_id: 0,
+    registeredAt: props.values.values?.registeredAt || '',
+  } as Partial<CheckInFormData>,
+})
+
+const [responsible_doctor_id, responsible_doctor_idAttrs] = defineField('responsible_doctor_id')
+const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
+const [registeredAt, registeredAtAttrs] = defineField('registeredAt')
+
+function submitForm() {
+  const formData: CheckInFormData = {
+    responsible_doctor_id: responsible_doctor_id.value,
+    adm_employee_id: adm_employee_id.value,
+    // registeredAt: registeredAt.value || '',
+  }
+  emit('submit', formData)
+}
+</script>
+
+<template>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Dokter</DE.Label>
+      <DE.Field>
+        <ComboBox
+          id="doctor"
+          v-model="responsible_doctor_id"
+          v-bind="responsible_doctor_idAttrs"
+          :items="doctors"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter DPJP"
+          search-placeholder="Pilih DPJP"
+          empty-message="DPJP tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>PJ Berkas</DE.Label>
+      <DE.Field>
+        <ComboBox
+          id="doctor"
+          v-model="adm_employee_id"
+          v-bind="adm_employee_idAttrs"
+          :items="employees"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter DPJP"
+          search-placeholder="Pilih petugas"
+          empty-message="Petugas tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Waktu Masuk</DE.Label>
+      <DE.Field>
+        <Input
+            id="name"
+            v-model="registeredAt"
+            v-bind="registeredAtAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="submitForm">
+      <LucideCheck />
+      Simpan
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/check-in-view.vue b/app/components/app/encounter/check-in-view.vue
new file mode 100644
index 00000000..a3b6ab53
--- /dev/null
+++ b/app/components/app/encounter/check-in-view.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+// Components
+import { LucidePen } from 'lucide-vue-next';
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Input from '~/components/pub/ui/input/Input.vue';
+import type { Encounter } from '~/models/encounter'
+
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const doctor = ref('-belum dipilih-')
+const adm = ref('-belum dipilih-')
+
+const emit = defineEmits<{
+  edit: []
+}>()
+
+watch(props.encounter, () => {
+  doctor.value = props.encounter.responsible_doctor?.employee?.person?.name ?? props.encounter.appointment_doctor?.employee?.person?.name ?? '-belum dipilih-'
+  adm.value = props.encounter.adm_employee?.person?.name ?? '-belum dipilih-'
+})
+</script>
+
+<template>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Dokter</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ adm }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="() => emit('edit')">
+      <LucidePen />
+      Edit
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/check-out-entry.vue b/app/components/app/encounter/check-out-entry.vue
new file mode 100644
index 00000000..fb8b4333
--- /dev/null
+++ b/app/components/app/encounter/check-out-entry.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+//
+import { LucideCheck } from 'lucide-vue-next';
+import { useForm, useFieldArray } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+//
+import type z from 'zod'
+import * as CB from '~/components/pub/my-ui/combobox'
+import { dischargeMethodCodes } from '~/lib/constants';
+import type {
+  CheckOutFormData,
+  CheckOutDeathFormData,
+  CheckOutInternalReferenceFormData
+} from '~/schemas/encounter.schema'
+
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { InternalReference, CreateDto as InternalReferenceCreateDto } from '~/models/internal-reference';
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  units: any[]
+  doctors: any[]
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
+
+const emit = defineEmits<{
+  submit: [values: CheckOutFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    discharge_method_code: '',
+    discharge_date: '',
+    internalReferences: [{ unit_id: 0, doctor_id: 0 }],
+    deathCauses: [""],
+  } as Partial<CheckOutFormData>,
+})
+const [ discharge_method_code, discharge_method_codeAttrs ] = defineField('discharge_method_code')
+const [ discharge_date, discharge_dateAttrs ] = defineField('discharge_date') 
+const { fields, push, remove } = useFieldArray<InternalReferenceCreateDto>('internalReferences');
+
+function submitForm(values: any) {
+  if (['consul-poly', 'consul-executive'].includes(discharge_method_code.value)) {
+    const formData: CheckOutInternalReferenceFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+      internalReferences: [{ unit_id: 0, doctor_id: 0 }],
+    }
+    emit('submit', formData)
+  } else if (discharge_method_code.value === 'death') {
+    const formData: CheckOutDeathFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+      death_cause: [""],
+    }
+    emit('submit', formData)
+  } else {
+    const formData: CheckOutFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+    }
+    emit('submit', formData)
+  }
+}
+
+const resetForm = () => {
+  discharge_method_code.value = ''
+  discharge_date.value = ''
+}
+</script>
+
+<template>
+  <DE.Block :cellFlex="false">
+    <DE.Cell>
+      <DE.Label>Alasan Keluar</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          id="dischargeMethodItems"
+          v-model="discharge_method_code"
+          v-bind="discharge_method_codeAttrs"
+          :items="dischargeMethodItems"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Cara Keluar"
+          search-placeholder="Cari Cara Keluar"
+          empty-message="Cara Keluar tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+
+    <DE.Cell>
+      <DE.Label>Waktu Keluar</DE.Label>
+      <DE.Cell>
+        <Input
+          id="discharge_date"
+          v-model="discharge_date"
+          v-bind="discharge_dateAttrs"
+          :disabled="isLoading || isReadonly"
+        />
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="'death' == discharge_method_code">
+      <DE.Label>Sebab Meninggal</DE.Label>
+      <DE.Cell>
+        <div class="mb-3">
+          <Input />
+        </div>
+        <div>
+          <Button
+            v-if="!isReadonly"
+              type="button"
+              :disabled="isLoading || !meta.valid"
+              @click="submitForm"
+          >
+            Tambah Sebab meninggal
+          </Button>
+        </div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="['consul-poly', 'consul-executive'].includes(discharge_method_code)">
+      <DE.Label>Tujuan</DE.Label>
+      <DE.Field>
+        <Table.Table class="border mb-3">
+          <Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
+            <Table.TableCell class="text-center">Poly</Table.TableCell>
+            <Table.TableCell class="text-center">DPJP</Table.TableCell>
+            <Table.TableCell class="text-center !w-10"></Table.TableCell>
+          </Table.TableHeader>
+          <Table.TableBody>
+            <Table.TableRow v-for="(item, index) in fields" :key="index">
+              <Table.TableCell class="!p-0.5">
+                <CB.Combobox
+                  id="dischargeMethodItems"
+                  :v-model.number="item.value.unit_id"
+                  :items="units"
+                  :disabled="isLoading || isReadonly"
+                  placeholder="Pilih Poly"
+                  search-placeholder="Cari Poly"
+                  empty-message="Poly tidak ditemukan"
+                />
+              </Table.TableCell>
+              <Table.TableCell class="!p-0.5">
+                <CB.Combobox
+                  id="dischargeMethodItems"
+                  :v-model.number="item.value.doctor_id"
+                  :items="units"
+                  :disabled="isLoading || isReadonly"
+                  placeholder="Pilih Dokter"
+                  search-placeholder="Pilih Dokter"
+                  empty-message="Dokter tidak ditemukan"
+                />
+              </Table.TableCell>
+              <Table.TableCell>
+                <Button variant="destructive" size="xs" @click="remove(index)" class="w-6 h-6 rounded-full">
+                  X
+                </Button>
+              </Table.TableCell>
+            </Table.TableRow>
+          </Table.TableBody>
+        </Table.Table>
+        <div>
+          <Button @click="push({ encounter_id: 0, unit_id: 0, doctor_id: 0 })">Tambah</Button>
+        </div>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="submitForm">>
+      <LucideCheck />
+      Simpan
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/check-out-view.vue b/app/components/app/encounter/check-out-view.vue
new file mode 100644
index 00000000..37cd2bbe
--- /dev/null
+++ b/app/components/app/encounter/check-out-view.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+//
+import { LucidePen, LucideCheck } from 'lucide-vue-next';
+
+//
+import * as CB from '~/components/pub/my-ui/combobox'
+import { dischargeMethodCodes } from '~/lib/constants';
+
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Encounter } from '~/models/encounter';
+
+interface Props {
+  encounter: Encounter
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
+
+const emit = defineEmits<{
+  edit: [],
+  finish: []
+}>()
+</script>
+
+<template>
+  <DE.Block :cellFlex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Alasan Keluar</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_method_code || '-belum ditentukan-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Keluar</DE.Label>
+      <DE.Cell>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date || '-belum ditentukan-' }}</div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="'death' == encounter.discharge_method_code">
+      <DE.Label class="font-semibold">Sebab Meninggal</DE.Label>
+      <DE.Cell>
+        <div class="mb-3">
+          <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date }}</div>
+        </div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="['consul-poly', 'consul-executive'].includes(encounter.discharge_method_code || '')">
+      <DE.Label class="font-semibold">Tujuan</DE.Label>
+      <DE.Field>
+        <Table.Table class="border mb-3">
+          <Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
+            <Table.TableCell class="text-center">Poly</Table.TableCell>
+            <Table.TableCell class="text-center">DPJP</Table.TableCell>
+            <Table.TableCell class="text-center !w-10"></Table.TableCell>
+          </Table.TableHeader>
+          <Table.TableBody>
+            <Table.TableRow v-for="(item, index) in encounter.internalReferences" :key="index">
+              <Table.TableCell class="!p-0.5">
+              </Table.TableCell>
+              <Table.TableCell class="!p-0.5">
+              </Table.TableCell>
+              <Table.TableCell>
+              </Table.TableCell>
+            </Table.TableRow>
+          </Table.TableBody>
+        </Table.Table>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center [&>*]:mx-1">
+    <Button @click="() => emit('edit')">
+      <LucidePen />
+      Edit
+    </Button>
+    <Button @click="() => emit('finish')">
+      <LucideCheck />
+      Selesai
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
new file mode 100644
index 00000000..25bdf9d8
--- /dev/null
+++ b/app/components/app/encounter/entry-form.vue
@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { Form } from '~/components/pub/ui/form'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+  click: (e: Event) => void
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+const doctorOpts = ref([
+  { label: 'Pilih', value: null },
+  { label: 'Dr. A', value: 1 },
+])
+const paymentOpts = ref([
+  { label: 'Umum', value: 'umum' },
+  { label: 'BPJS', value: 'bpjs' },
+])
+const sepOpts = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
+
+// file refs untuk tombol "Pilih Berkas"
+const sepFileInput = ref<HTMLInputElement | null>(null)
+const sippFileInput = ref<HTMLInputElement | null>(null)
+
+function pickSepFile() {
+  sepFileInput.value?.click()
+}
+function pickSippFile() {
+  sippFileInput.value?.click()
+}
+
+function onSepFileChange(e: Event) {
+  const f = (e.target as HTMLInputElement).files?.[0]
+  // set ke form / emit / simpan di state sesuai form library-mu
+  console.log('sep file', f)
+}
+
+function onSippFileChange(e: Event) {
+  const f = (e.target as HTMLInputElement).files?.[0]
+  console.log('sipp file', f)
+}
+
+function onAddSep() {
+  // contoh handler tombol "+" di sebelah No. SEP
+  console.log('open modal tambah SEP')
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="flex flex-col justify-between">
+        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
+          Data Pasien
+        </div>
+        <div class="flex gap-6 mb-2 2xl:mb-2">
+          <span>
+            Sudah pernah terdaftar sebagai pasien?
+            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
+              <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
+            </Button>
+          </span>
+          <span>
+            Belum pernah terdaftar sebagai pasien?
+            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
+              <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
+            </Button>
+          </span>
+        </div>
+        <Block :colCount="3">
+          <Cell>
+            <Label label-for="patient_name">Nama Pasien</Label>
+            <Field id="patient_name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="patient_name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="patient_name"
+                      v-bind="componentField"
+                      disabled
+                      placeholder="Tambah data pasien terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- NIK -->
+          <Cell :cosSpan="3">
+            <Label label-for="nik">NIK</Label>
+            <Field id="nik" :errors="errors">
+              <FormField v-slot="{ componentField }" name="nik">
+                <FormItem>
+                  <FormControl>
+                    <Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+          <Cell>
+            <Label label-for="rm">No. RM</Label>
+            <Field id="rm" :errors="errors">
+              <FormField v-slot="{ componentField }" name="rm">
+                <FormItem>
+                  <FormControl>
+                    <Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Separator class="my-4 2xl:my-5" />
+
+        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
+          Data Kunjungan
+        </div>
+        <Block :colCount="3">
+          <!-- Dokter (Combobox) -->
+          <Cell :cosSpan="3">
+            <Label label-for="doctor_id">Dokter</Label>
+            <Field id="doctor_id" :errors="errors">
+              <FormField v-slot="{ componentField }" name="doctor_id">
+                <FormItem>
+                  <FormControl>
+                    <Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Tanggal Daftar (DatePicker) -->
+          <Cell :cosSpan="3">
+            <Label label-for="register_date">Tanggal Daftar</Label>
+            <Field id="register_date" :errors="errors">
+              <FormField v-slot="{ componentField }" name="register_date">
+                <FormItem>
+                  <FormControl>
+                    <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Jenis Pembayaran (Combobox) -->
+          <Cell :cosSpan="3">
+            <Label label-for="payment_type">Jenis Pembayaran</Label>
+            <Field id="payment_type" :errors="errors">
+              <FormField v-slot="{ componentField }" name="payment_type">
+                <FormItem>
+                  <FormControl>
+                    <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
+                    <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell :cosSpan="3">
+            <Label label-for="bpjs_number">Kelompok Peserta</Label>
+            <Field id="bpjs_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="bpjs_number">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="bpjs_number"
+                      v-bind="componentField"
+                      placeholder="Pilih jenis pembayaran terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- No. Kartu BPJS -->
+          <Cell :cosSpan="3">
+            <Label label-for="bpjs_number">No. Kartu BPJS</Label>
+            <Field id="bpjs_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="bpjs_number">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="bpjs_number"
+                      v-bind="componentField"
+                      placeholder="Pilih jenis pembayaran terlebih dahulu"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Jenis SEP -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_type">Jenis SEP</Label>
+            <Field id="sep_type" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_type">
+                <FormItem>
+                  <FormControl>
+                    <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <!-- No. SEP (input + tombol +) -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_number">No. SEP</Label>
+            <Field id="sep_number" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_number">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex gap-2">
+                      <Input
+                        id="sep_number"
+                        v-bind="componentField"
+                        placeholder="Tambah SEP terlebih dahulu"
+                        class="flex-1"
+                      />
+                      <Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Dokumen SEP (file) -->
+          <Cell :cosSpan="3">
+            <Label label-for="sep_file">Dokumen SEP</Label>
+            <Field id="sep_file" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sep_file">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex items-center gap-2">
+                      <input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
+                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
+                        >Pilih Berkas</Button
+                      >
+                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+
+          <!-- Dokumen SIPP (file) -->
+          <Cell :cosSpan="3" labelSize="thin">
+            <Label label-for="sipp_file">Dokumen SIPP</Label>
+            <Field id="sipp_file" :errors="errors">
+              <FormField v-slot="{ componentField }" name="sipp_file">
+                <FormItem>
+                  <FormControl>
+                    <div class="flex items-center gap-2">
+                      <input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
+                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
+                        >Pilih Berkas</Button
+                      >
+                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/encounter/filter.vue b/app/components/app/encounter/filter.vue
new file mode 100644
index 00000000..31ec4476
--- /dev/null
+++ b/app/components/app/encounter/filter.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
+const props = defineProps<{
+  installation: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<InstallationFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    encounterClassCode: values.encounterClassCode || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+
+const items = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="parentId">Cara Bayar</Label>
+            <Field id="encounterClassCode" :errors="errors">
+              <FormField v-slot="{ componentField }" name="encounterClassCode">
+                <FormItem>
+                  <FormControl>
+                    <Select v-bind="componentField" :items="items" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label label-for="parentId">Poliklinik</Label>
+            <Field id="encounterClassCode" :errors="errors">
+              <FormField v-slot="{ componentField }" name="encounterClassCode">
+                <FormItem>
+                  <FormControl>
+                    <Select v-bind="componentField" :items="items" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label label-for="parentId">Kunjungan</Label>
+            <Field id="encounterClassCode" :errors="errors">
+              <FormField v-slot="{ componentField }" name="encounterClassCode">
+                <FormItem>
+                  <FormControl>
+                    <Select v-bind="componentField" :items="items" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/encounter/list.cfg.ts b/app/components/app/encounter/list.cfg.ts
new file mode 100644
index 00000000..9ebbc34f
--- /dev/null
+++ b/app/components/app/encounter/list.cfg.ts
@@ -0,0 +1,104 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { Encounter } from '~/models/encounter'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { getAge } from '~/lib/date'
+
+type SmallDetailDto = Encounter
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 160 },
+    {},
+    { width: 70 },
+    { },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir / Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status', classVal: '!text-center' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'patient.person.name',
+    'patient.number',
+    'patient.person.residentIdentityNumber',
+    'birth_date',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    gender: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      if (recX.patient?.person?.gender_code) {
+        return genderCodes[recX.patient.person.gender_code]
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.patient?.person?.education_code) {
+        return educationCodes[recX.patient.person.education_code]
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as Encounter
+      if (!recX.status_code) {
+        recX.status_code = 'new'
+      }
+      const res: RecComponent = {
+        idx,
+        rec: recX,
+        component: statusBadge,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      if (recX.patient?.person?.birthDate) {
+        return '' +
+          '<div>' + (recX.patient.person.birthDate as string).substring(0, 10) + ' / </div>' +
+          getAge(recX.patient.person.birthDate as string).extFormat
+      }
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/encounter/list.vue b/app/components/app/encounter/list.vue
new file mode 100644
index 00000000..1d58d6a7
--- /dev/null
+++ b/app/components/app/encounter/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list.cfg'
+
+const props = defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/encounter/picker.vue b/app/components/app/encounter/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/encounter/process.vue b/app/components/app/encounter/process.vue
new file mode 100644
index 00000000..237c04c2
--- /dev/null
+++ b/app/components/app/encounter/process.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import AssesmentFunctionList from './assesment-function/list.vue'
+
+const props = defineProps<{
+  initialActiveTab: string
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar' },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis' },
+  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'patient-note', label: 'CPRJ' },
+  { value: 'prescription', label: 'Order Obat' },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+]
+
+function changeTab(value: string) {
+  activeTab.value = value;
+  emit('changeTab', value);
+}
+</script>
+
+<template>
+  <!-- Tabs -->
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+    <Button
+      v-for="tab in tabs"
+      :key="tab.value"
+      :data-active="activeTab === tab.value"
+      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
+      @click="changeTab(tab.value)"
+    >
+      {{ tab.label }}
+    </Button>
+  </div>
+
+  <!-- Active Tab Content -->
+  <div class="mt-4 rounded-md border p-4">
+    <component
+      v-if="tabs.find((t) => t.value === activeTab)?.component"
+      :is="tabs.find((t) => t.value === activeTab)?.component"
+      :label="tabs.find((t) => t.value === activeTab)?.label"
+      v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>
diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
new file mode 100644
index 00000000..4b223917
--- /dev/null
+++ b/app/components/app/encounter/quick-info.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Encounter } from '~/models/encounter'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+
+let address = ''
+if (props.data.patient.person.addresses) {
+  address = props.data.patient.person.addresses.map((a) => a.address).join(', ')
+}
+
+let dpjp = ''
+if (props.data.responsible_doctor) {
+  const dp = props.data.responsible_doctor.employee.person
+  dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
+} else if (props.data.appointment_doctor) {
+  dpjp = props.data.appointment_doctor.employee.person.name
+}
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+    <!-- Data Pasien -->
+    <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
+      {{ data.patient.person.name }} - {{ data.patient.number }}
+    </h2>
+
+    <div class="grid grid-cols-3">
+      <div>
+        <DE.Block
+          mode="preview"
+          labelSize="large"
+        >
+          <DE.Cell>
+            <DE.Label class="font-semibold">No. RM</DE.Label>
+            <DE.Field>
+              {{ data.patient.person.birthDate?.substring(0, 10) }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
+            <DE.Field>
+              {{ data.patient.person.gender_code }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label class="font-semibold">Alamat</DE.Label>
+            <DE.Field>
+              <div v-html="address"></div>
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block
+          mode="preview"
+          labelSize="large"
+        >
+          <DE.Cell>
+            <DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
+            <DE.Field>
+              {{ data.visitDate.substring(0, 10) }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label class="font-semibold">Klinik</DE.Label>
+            <DE.Field>
+              {{ data.unit?.name }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label class="font-semibold">DPJP</DE.Label>
+            <DE.Field>
+              {{ dpjp }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block
+          mode="preview"
+          labelSize="large"
+        >
+          <DE.Cell>
+            <DE.Label
+              position="dynamic"
+              class="!text-base font-semibold 2xl:!text-lg"
+            >
+              Billing
+            </DE.Label>
+            <DE.Field class="text-base 2xl:text-lg">
+              Rp. 000.000
+              <!-- {{ data }} -->
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/encounter/search.vue b/app/components/app/encounter/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/encounter/status-badge.vue b/app/components/app/encounter/status-badge.vue
new file mode 100644
index 00000000..c8d4cd06
--- /dev/null
+++ b/app/components/app/encounter/status-badge.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { type Variants, Badge } from '~/components/pub/ui/badge'
+import { dataStatusCodes } from '~/lib/constants';
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusCodeColors: Record<string, Variants> = {
+  new: 'warning',
+  review: 'fresh',
+  process: 'fresh',
+  done: 'positive',
+  canceled: 'destructive',
+  rejected: 'destructive',
+  skiped: 'negative',
+}
+
+const statusText = computed(() => {
+  return dataStatusCodes[props.rec.status_code as keyof typeof dataStatusCodes]
+})
+
+const badgeVariant = computed(() => {
+  return (statusCodeColors[props.rec.status_code as keyof typeof statusCodeColors] || 'default')
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
new file mode 100644
index 00000000..daa60a07
--- /dev/null
+++ b/app/components/app/equipment/entry-form.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Types
+import type { MaterialFormData } from '~/schemas/material.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { genBase } from '~/models/_base'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  uoms: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: MaterialFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    uom_code: '',
+    stock: 0,
+  } as Partial<MaterialFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [uom, uomAttrs] = defineField('uom_code')
+const [stock, stockAttrs] = defineField('stock')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  uom.value = ''
+  stock.value = 0
+}
+
+function onSubmitForm() {
+  const formData: MaterialFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    uom_code: uom.value || '',
+    stock: stock.value || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-equipment"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom"
+            v-model="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input
+            id="stock"
+            v-model="stock"
+            type="number"
+            v-bind="stockAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/equipment/list-cfg.ts b/app/components/app/equipment/list-cfg.ts
new file mode 100644
index 00000000..96cde678
--- /dev/null
+++ b/app/components/app/equipment/list-cfg.ts
@@ -0,0 +1,57 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Stok' },
+      { label: 'Satuan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'stock', 'uom_code', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.uom_code
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
new file mode 100644
index 00000000..618c70c1
--- /dev/null
+++ b/app/components/app/equipment/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/floor/entry-form.vue b/app/components/app/floor/entry-form.vue
new file mode 100644
index 00000000..a59bfd4c
--- /dev/null
+++ b/app/components/app/floor/entry-form.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  parents: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.floor,
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.floor
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.floor,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Gedung</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Gedung"
+            search-placeholder="Cari Gedung"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/floor/list-cfg.ts b/app/components/app/floor/list-cfg.ts
new file mode 100644
index 00000000..64553e15
--- /dev/null
+++ b/app/components/app/floor/list-cfg.ts
@@ -0,0 +1,46 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Gedung' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'parent', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/floor/list.vue b/app/components/app/floor/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/floor/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/icd/entry-form.vue b/app/components/app/icd/entry-form.vue
new file mode 100644
index 00000000..7c850a16
--- /dev/null
+++ b/app/components/app/icd/entry-form.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <Action />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/icd/list-cfg.ts b/app/components/app/icd/list-cfg.ts
new file mode 100644
index 00000000..c413e737
--- /dev/null
+++ b/app/components/app/icd/list-cfg.ts
@@ -0,0 +1,127 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as SmallDetailDto
+      if (recX.status_code === null) {
+        recX.status_code = 0
+      }
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/icd/list.vue b/app/components/app/icd/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/icd/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/icd/multiselect-picker.vue b/app/components/app/icd/multiselect-picker.vue
new file mode 100644
index 00000000..ce4dbd80
--- /dev/null
+++ b/app/components/app/icd/multiselect-picker.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{ data: any[] }>()
+const modelValue = defineModel<any | null>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-model="modelValue"
+    v-bind="config"
+    select-mode="multi"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/icd/preview.vue b/app/components/app/icd/preview.vue
new file mode 100644
index 00000000..36bb193c
--- /dev/null
+++ b/app/components/app/icd/preview.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Trash2 } from 'lucide-vue-next'
+// import { Button } from '@/components/ui/button'
+// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+
+interface Diagnosa {
+  id: number
+  diagnosa: string
+  icd: string
+}
+
+const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])
+
+function removeItem(id: number) {
+  list.value = list.value.filter((item) => item.id !== id)
+}
+</script>
+
+<template>
+  <div class="rounded-lg border bg-white shadow-sm">
+    <Table>
+      <TableHeader class="bg-gray-50">
+        <TableRow>
+          <TableHead class="w-[50px] text-center">NO.</TableHead>
+          <TableHead>DIAGNOSA</TableHead>
+          <TableHead class="w-[120px]">ICD-X</TableHead>
+          <TableHead class="w-[80px] text-center">AKSI</TableHead>
+        </TableRow>
+      </TableHeader>
+
+      <TableBody>
+        <TableRow v-for="(item, i) in list" :key="item.id">
+          <TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
+          <TableCell>{{ item.diagnosa }}</TableCell>
+          <TableCell>{{ item.icd }}</TableCell>
+          <TableCell class="text-center">
+            <Button variant="ghost" size="icon" @click="removeItem(item.id)">
+              <Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</template>
diff --git a/app/components/app/icd/search.vue b/app/components/app/icd/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/icd/status-badge.vue b/app/components/app/icd/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/icd/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/installation/entry-form.vue b/app/components/app/installation/entry-form.vue
new file mode 100644
index 00000000..c83e5cb1
--- /dev/null
+++ b/app/components/app/installation/entry-form.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { InstallationFormData } from '~/schemas/installation.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  encounterClasses: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    encounterClass_code: '',
+  } as Partial<InstallationFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [encounterClassCode, encounterClassCodeAttrs] = defineField('encounterClass_code')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.encounterClass_code !== undefined) encounterClassCode.value = props.values.encounterClass_code
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  encounterClassCode.value = ''
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: InstallationFormData = {
+    name: name.value || '',
+    code: code.value || '',
+    encounterClass_code: encounterClassCode.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-unit"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Encounter Class</Label>
+        <Field :errMessage="errors.encounterClass_code">
+          <Combobox
+            id="encounterClass_code"
+            v-model="encounterClassCode"
+            v-bind="encounterClassCodeAttrs"
+            :items="encounterClasses"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Encounter Class"
+            search-placeholder="Cari Encounter Class"
+            empty-message="Encounter tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/installation/list-cfg.ts b/app/components/app/installation/list-cfg.ts
new file mode 100644
index 00000000..f64ecea8
--- /dev/null
+++ b/app/components/app/installation/list-cfg.ts
@@ -0,0 +1,53 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Encounter Class' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'encounterClass_code', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/installation/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/intern/entry-form.vue b/app/components/app/intern/entry-form.vue
new file mode 100644
index 00000000..aca8245b
--- /dev/null
+++ b/app/components/app/intern/entry-form.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+import { Form } from '~/components/pub/ui/form'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <!-- Specialist -->
+            <FieldGroup :column="2">
+              <Label label-for="specialist_id">Specialist</Label>
+              <Field id="specialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="specialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Subpecialist -->
+            <FieldGroup :column="2">
+              <Label label-for="subspecialist_id">Subspecialist</Label>
+              <Field id="subspecialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="subspecialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/item-price/entry-form.vue b/app/components/app/item-price/entry-form.vue
new file mode 100644
index 00000000..f2f55d76
--- /dev/null
+++ b/app/components/app/item-price/entry-form.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const items = [
+  { value: '1', label: 'item 1' },
+  { value: '2', label: 'item 2' },
+  { value: '3', label: 'item 3' },
+  { value: '4', label: 'item 4' },
+]
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup>
+            <Label>Items</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Perusahaan Insuransi</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Harga</Label>
+            <Field>
+              <Input v-model="data.price" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
new file mode 100644
index 00000000..c3db4f50
--- /dev/null
+++ b/app/components/app/item-price/list-cfg.ts
@@ -0,0 +1,47 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/item-price/list.vue b/app/components/app/item-price/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/item-price/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/item-price/picker.vue b/app/components/app/item-price/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item-price/search.vue b/app/components/app/item-price/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item-price/status-badge.vue b/app/components/app/item-price/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/item-price/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/item/entry-form.vue b/app/components/app/item/entry-form.vue
new file mode 100644
index 00000000..7ddc930b
--- /dev/null
+++ b/app/components/app/item/entry-form.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const items = [
+  { value: '1', label: 'item 1' },
+  { value: '2', label: 'item 2' },
+  { value: '3', label: 'item 3' },
+  { value: '4', label: 'item 4' },
+]
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup>
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Item Group</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>UOM</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Infra</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Harga</Label>
+            <Field>
+              <Input v-model="data.price" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
new file mode 100644
index 00000000..c3db4f50
--- /dev/null
+++ b/app/components/app/item/list-cfg.ts
@@ -0,0 +1,47 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/item/list.vue b/app/components/app/item/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/item/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/item/picker.vue b/app/components/app/item/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item/search.vue b/app/components/app/item/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item/status-badge.vue b/app/components/app/item/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/item/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/laborant/entry-form.vue b/app/components/app/laborant/entry-form.vue
new file mode 100644
index 00000000..c9d54963
--- /dev/null
+++ b/app/components/app/laborant/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup>
+            <Label>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/laborant/list-cfg.ts b/app/components/app/laborant/list-cfg.ts
new file mode 100644
index 00000000..13b5c015
--- /dev/null
+++ b/app/components/app/laborant/list-cfg.ts
@@ -0,0 +1,109 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
+  ],
+
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/laborant/list.vue b/app/components/app/laborant/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/laborant/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/laborant/picker.vue b/app/components/app/laborant/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/laborant/search.vue b/app/components/app/laborant/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/laborant/status-badge.vue b/app/components/app/laborant/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/laborant/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/medical-action-src/entry-form.vue b/app/components/app/medical-action-src/entry-form.vue
new file mode 100644
index 00000000..f8bf87e4
--- /dev/null
+++ b/app/components/app/medical-action-src/entry-form.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+
+// Types
+import type { MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+import { medicalActionTypeCode } from '~/lib/constants'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const medicalActionTypeOptions = mapToComboboxOptList(medicalActionTypeCode)
+
+const emit = defineEmits<{
+  submit: [values: MedicalActionSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    type_code: '',
+  } as Partial<MedicalActionSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [typeCode, typeCodeAttrs] = defineField('type_code')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.type_code !== undefined) typeCode.value = props.values.type_code
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  typeCode.value = ''
+}
+
+function onSubmitForm() {
+  const formData: MedicalActionSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    type_code: typeCode.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medical-action-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Type Kode</Label>
+        <Field :errMessage="errors.name">
+          <Select
+            id="type_code"
+            :is-disabled="isLoading || isReadonly"
+            :items="medicalActionTypeOptions"
+            v-bind="typeCodeAttrs"
+            v-model="typeCode"
+            placeholder="Pilih medical action type"
+            :preserve-order="false"
+            class="text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medical-action-src/list-cfg.ts b/app/components/app/medical-action-src/list-cfg.ts
new file mode 100644
index 00000000..2fecde69
--- /dev/null
+++ b/app/components/app/medical-action-src/list-cfg.ts
@@ -0,0 +1,32 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama ' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medical-action-src/list.vue b/app/components/app/medical-action-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/medical-action-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/medicine-group/entry-form.vue b/app/components/app/medicine-group/entry-form.vue
new file mode 100644
index 00000000..fb26631e
--- /dev/null
+++ b/app/components/app/medicine-group/entry-form.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Types
+import type { BaseFormData } from '~/schemas/base.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: BaseFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medicine-group"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medicine-group/list-cfg.ts b/app/components/app/medicine-group/list-cfg.ts
new file mode 100644
index 00000000..583fd860
--- /dev/null
+++ b/app/components/app/medicine-group/list-cfg.ts
@@ -0,0 +1,38 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medicine-group/list.vue b/app/components/app/medicine-group/list.vue
new file mode 100644
index 00000000..e4544c2f
--- /dev/null
+++ b/app/components/app/medicine-group/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/medicine-method/entry-form.vue b/app/components/app/medicine-method/entry-form.vue
new file mode 100644
index 00000000..3dc40419
--- /dev/null
+++ b/app/components/app/medicine-method/entry-form.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Types
+import type { BaseFormData } from '~/schemas/base.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: BaseFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medicine-method"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medicine-method/list-cfg.ts b/app/components/app/medicine-method/list-cfg.ts
new file mode 100644
index 00000000..583fd860
--- /dev/null
+++ b/app/components/app/medicine-method/list-cfg.ts
@@ -0,0 +1,38 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medicine-method/list.vue b/app/components/app/medicine-method/list.vue
new file mode 100644
index 00000000..e4544c2f
--- /dev/null
+++ b/app/components/app/medicine-method/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
new file mode 100644
index 00000000..42989fcb
--- /dev/null
+++ b/app/components/app/medicine/entry-form.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+  medicineGroups?: { value: string; label: string }[]
+  medicineMethods?: { value: string; label: string }[]
+  uoms?: { value: string; label: string }[]
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: any, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+    medicineGroup_code: '',
+    medicineMethod_code: '',
+    uom_code: '',
+    stock: 0,
+  },
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [medicineGroup_code, medicineGroupAttrs] = defineField('medicineGroup_code')
+const [medicineMethod_code, medicineMethodAttrs] = defineField('medicineMethod_code')
+const [uom_code, uomAttrs] = defineField('uom_code')
+const [stock, stockAttrs] = defineField('stock')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.medicineGroup_code !== undefined) medicineGroup_code.value = props.values.medicineGroup_code
+  if (props.values.medicineMethod_code !== undefined) medicineMethod_code.value = props.values.medicineMethod_code
+  if (props.values.uom_code !== undefined) uom_code.value = props.values.uom_code
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  medicineGroup_code.value = ''
+  medicineMethod_code.value = ''
+  uom_code.value = ''
+  stock.value = 0
+}
+
+function onSubmitForm() {
+  const formData = {
+    code: code.value || '',
+    name: name.value || '',
+    medicineGroup_code: medicineGroup_code.value || '',
+    medicineMethod_code: medicineMethod_code.value || '',
+    uom_code: uom_code.value || '',
+    stock: stock.value || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-medicine" @submit.prevent>
+    <Block class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+            class="input input-bordered w-full"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+            class="input input-bordered w-full"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label >Kelompok Obat</Label>
+        <Field :errMessage="errors.medicineGroup_code">
+          <Select
+            id="medicineGroup_code"
+            v-model="medicineGroup_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih kelompok obat"
+            v-bind="medicineGroupAttrs"
+            :items="props.medicineGroups || []"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Metode Pemberian</Label>
+        <Field :errMessage="errors.medicineMethod_code">
+          <Select
+            id="medicineMethod_code"
+            v-model="medicineMethod_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih metode pemberian"
+            v-bind="medicineMethodAttrs"
+            :items="props.medicineMethods || []"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label>Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom_code"
+            v-model="uom_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="props.uoms || []"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <!-- <Cell>
+        <Label height="compact">Infra</Label>
+        <Field :errMessage="errors.infra_id">
+          <Select
+            id="infra_id"
+            v-model="infra_id"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Tidak ada"
+            v-bind="infraAttrs"
+            :items="props.infras || []"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell> -->
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input
+            id="stock"
+            v-model="stock"
+            type="number"
+            v-bind="stockAttrs"
+            :disabled="isLoading || isReadonly"
+            class="input input-bordered w-full"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medicine/list-cfg.ts b/app/components/app/medicine/list-cfg.ts
new file mode 100644
index 00000000..059022c8
--- /dev/null
+++ b/app/components/app/medicine/list-cfg.ts
@@ -0,0 +1,54 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Name' },
+      { label: 'Golongan' },
+      { label: 'Metode Pemberian' },
+      { label: 'Satuan' },
+      { label: 'Stok' },
+      { label: 'Aksi' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'group', 'method', 'unit', 'stock', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).uom?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/medicine/list.vue b/app/components/app/medicine/list.vue
new file mode 100644
index 00000000..e4544c2f
--- /dev/null
+++ b/app/components/app/medicine/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/medicine/picker.vue b/app/components/app/medicine/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine/search.vue b/app/components/app/medicine/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine/status-badge.vue b/app/components/app/medicine/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/medicine/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/nurse/entry-form.vue b/app/components/app/nurse/entry-form.vue
new file mode 100644
index 00000000..c9d54963
--- /dev/null
+++ b/app/components/app/nurse/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup>
+            <Label>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/nurse/list-cfg.ts b/app/components/app/nurse/list-cfg.ts
new file mode 100644
index 00000000..13b5c015
--- /dev/null
+++ b/app/components/app/nurse/list-cfg.ts
@@ -0,0 +1,109 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
+  ],
+
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/nurse/list.vue b/app/components/app/nurse/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/nurse/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/nurse/picker.vue b/app/components/app/nurse/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nurse/search.vue b/app/components/app/nurse/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nurse/status-badge.vue b/app/components/app/nurse/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/nurse/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/nutritionist/entry-form.vue b/app/components/app/nutritionist/entry-form.vue
new file mode 100644
index 00000000..c9d54963
--- /dev/null
+++ b/app/components/app/nutritionist/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup>
+            <Label>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/nutritionist/list-cfg.ts b/app/components/app/nutritionist/list-cfg.ts
new file mode 100644
index 00000000..4dd5657f
--- /dev/null
+++ b/app/components/app/nutritionist/list-cfg.ts
@@ -0,0 +1,107 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
+  ],
+
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/nutritionist/list.vue b/app/components/app/nutritionist/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/nutritionist/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/nutritionist/picker.vue b/app/components/app/nutritionist/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nutritionist/search.vue b/app/components/app/nutritionist/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nutritionist/status-badge.vue b/app/components/app/nutritionist/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/nutritionist/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/patient/_common/input-file.vue b/app/components/app/patient/_common/input-file.vue
new file mode 100644
index 00000000..38ad6cea
--- /dev/null
+++ b/app/components/app/patient/_common/input-file.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+defineProps<{
+  fieldName: string
+  placeholder: string
+  label: string
+  errors?: FormErrors
+  class?: string
+  numericOnly?: boolean
+  maxLength?: number
+  isRequired?: boolean
+}>()
+</script>
+
+<template>
+  <FieldGroup>
+    <Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              v-bind="componentField"
+              type="file"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              @change="
+                (e: Event) => {
+                  const file = (e.target as HTMLInputElement).files?.[0] || null
+                  componentField.onChange(file)
+                }
+              "
+              @blur.prevent
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/patient/_common/input-name.vue b/app/components/app/patient/_common/input-name.vue
new file mode 100644
index 00000000..db9005f1
--- /dev/null
+++ b/app/components/app/patient/_common/input-name.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+defineProps<{
+  fieldNameInput: string
+  placeholder: string
+  labelForInput: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  maxLength?: number
+  isRequired?: boolean
+}>()
+</script>
+
+<template>
+  <DE.Cell :col-span="2">
+    <DE.Label
+      :label-for="fieldNameInput"
+      :is-required="isRequired"
+    >
+      {{ labelForInput }}
+    </DE.Label>
+
+    <DE.Field
+      :id="fieldNameInput"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldNameInput"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              v-bind="componentField"
+              type="text"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/radio-communication-barrier.vue b/app/components/app/patient/_common/radio-communication-barrier.vue
new file mode 100644
index 00000000..56918101
--- /dev/null
+++ b/app/components/app/patient/_common/radio-communication-barrier.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'gender',
+  label = 'Gender',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const genderOptions = [
+  { label: 'Ya', value: 'YA' },
+  { label: 'Tidak', value: 'TIDAK' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      class="pt-0.5"
+      >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in genderOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none font-normal text-xs leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/radio-disability.vue b/app/components/app/patient/_common/radio-disability.vue
new file mode 100644
index 00000000..6c1464e2
--- /dev/null
+++ b/app/components/app/patient/_common/radio-disability.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'disability',
+  label = 'Disabilitas',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const dissabilityOptions = [
+  { label: 'Ya', value: 'YA' },
+  { label: 'Tidak', value: 'TIDAK' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      class="pt-0.5"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in dissabilityOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/radio-gender.vue b/app/components/app/patient/_common/radio-gender.vue
new file mode 100644
index 00000000..47968c8f
--- /dev/null
+++ b/app/components/app/patient/_common/radio-gender.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { genderCodes } from '~/lib/constants'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'gender',
+  label = 'Gender',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const genderOptions = mapToComboboxOptList(genderCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="4">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in genderOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs 2xl:text-sm leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 !font-normal',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/radio-nationality.vue b/app/components/app/patient/_common/radio-nationality.vue
new file mode 100644
index 00000000..40525dff
--- /dev/null
+++ b/app/components/app/patient/_common/radio-nationality.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'nationality',
+  label = 'Kebangsaan',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const nationalityOptions = [
+  { label: 'WNI', value: 'WNI' },
+  { label: 'WNA', value: 'WNA' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+      height="compact"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      class="pt-0.5"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in nationalityOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/radio-newborn.vue b/app/components/app/patient/_common/radio-newborn.vue
new file mode 100644
index 00000000..86953443
--- /dev/null
+++ b/app/components/app/patient/_common/radio-newborn.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'isNewBorn',
+  label = 'Status Pasien',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const newbornOptions = [
+  { label: 'Ya', value: 'YA' },
+  { label: 'Tidak', value: 'TIDAK' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in newbornOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2 pt-1', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-disability.vue b/app/components/app/patient/_common/select-disability.vue
new file mode 100644
index 00000000..6058773a
--- /dev/null
+++ b/app/components/app/patient/_common/select-disability.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const {
+  fieldName = 'disabilityType',
+  placeholder = 'Pilih jenis disabilitas',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+} = props
+
+const disabilityOptions = [
+  { label: 'Tuna Daksa', value: 'daksa' },
+  { label: 'Tuna Netra', value: 'netra' },
+  { label: 'Tuna Rungu', value: 'rungu' },
+  { label: 'Tuna Wicara', value: 'wicara' },
+  { label: 'Tuna Rungu-Wicara', value: 'rungu_wicara' },
+  { label: 'Tuna Grahita', value: 'grahita' },
+  { label: 'Tuna Laras', value: 'laras' },
+  { label: 'Lainnya', value: 'other', priority: -100 },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="disabilityOptions"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-dob.vue b/app/components/app/patient/_common/select-dob.vue
new file mode 100644
index 00000000..eee11acc
--- /dev/null
+++ b/app/components/app/patient/_common/select-dob.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              id="birthDate"
+              type="date"
+              min="1900-01-01"
+              :max="new Date().toISOString().split('T')[0]"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+  <DE.Cell>
+    <DE.Label label-for="patientAge">Usia</DE.Label>
+    <DE.Field id="patientAge">
+      <FormField name="patientAge">
+        <FormItem>
+          <FormControl>
+            <Input
+              :value="patientAge"
+              disabled
+              readonly
+              placeholder="Masukkan tanggal lahir"
+              :class="
+                cn(
+                  'cursor-not-allowed bg-gray-50 focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0',
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-education.vue b/app/components/app/patient/_common/select-education.vue
new file mode 100644
index 00000000..848ed614
--- /dev/null
+++ b/app/components/app/patient/_common/select-education.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { educationCodes } from '~/lib/constants'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+const {
+  fieldName = 'education',
+  label = 'Pendidikan',
+  placeholder = 'Pilih pendidikan terakhir',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const extendOptions = [
+  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+  { label: 'Lainnya', value: 'other', priority: -1 },
+]
+
+const educationOptions = [
+  ...mapToComboboxOptList(educationCodes).map(({ label, value }) => ({
+    label,
+    value,
+  })),
+  ...extendOptions,
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :is-disabled="isDisabled"
+              :items="educationOptions"
+              :placeholder="placeholder"
+              :preserve-order="true"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-ethnicity.vue b/app/components/app/patient/_common/select-ethnicity.vue
new file mode 100644
index 00000000..43ef6cba
--- /dev/null
+++ b/app/components/app/patient/_common/select-ethnicity.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+const {
+  fieldName = 'ethnicity',
+  label = 'Suku',
+  placeholder = 'Pilih suku',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const ethnicOptions = [
+  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+  { label: 'Jawa', value: 'jawa' },
+  { label: 'Sunda', value: 'sunda' },
+  { label: 'Batak', value: 'batak' },
+  { label: 'Betawi', value: 'betawi' },
+  { label: 'Minangkabau', value: 'minangkabau' },
+  { label: 'Bugis', value: 'bugis' },
+  { label: 'Madura', value: 'madura' },
+  { label: 'Banjar', value: 'banjar' },
+  { label: 'Bali', value: 'bali' },
+  { label: 'Dayak', value: 'dayak' },
+  { label: 'Aceh', value: 'aceh' },
+  { label: 'Sasak', value: 'sasak' },
+  { label: 'Papua', value: 'papua' },
+  { label: 'Lainnya', value: 'lainnya', priority: -100 },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="ethnicOptions"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari..."
+              empty-message="Suku tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-gender.vue b/app/components/app/patient/_common/select-gender.vue
new file mode 100644
index 00000000..dfedf9ec
--- /dev/null
+++ b/app/components/app/patient/_common/select-gender.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const {
+  fieldName = 'disabilityType',
+  placeholder = 'Pilih jenis disabilitas',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+} = props
+
+const disabilityOptions = [
+  { label: 'Laki', value: 'male' },
+  { label: 'Perempuan', value: 'female' },
+  { label: 'Tidak Disebutkan', value: 'not-stated' },
+  { label: 'Tidak Diketahui', value: 'unknown' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="disabilityOptions"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-job.vue b/app/components/app/patient/_common/select-job.vue
new file mode 100644
index 00000000..814eb7ca
--- /dev/null
+++ b/app/components/app/patient/_common/select-job.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Jenis Pekerjaan tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-lang.vue b/app/components/app/patient/_common/select-lang.vue
new file mode 100644
index 00000000..ce5bbac8
--- /dev/null
+++ b/app/components/app/patient/_common/select-lang.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'language',
+  label = 'Bahasa',
+  placeholder = 'Pilih preferensi bahasa',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const langOptions = [
+  { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
+  { label: 'Bahasa Jawa', value: 'jawa' },
+  { label: 'Bahasa Sunda', value: 'sunda' },
+  { label: 'Bahasa Bali', value: 'bali' },
+  { label: 'Bahasa Jaksel', value: 'jaksel' },
+  { label: 'Bahasa Inggris', value: 'en' },
+  { label: 'Tidak Diketahui', value: 'unknown', priority: 100 },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="langOptions"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-marital-status.vue b/app/components/app/patient/_common/select-marital-status.vue
new file mode 100644
index 00000000..21ebf0c2
--- /dev/null
+++ b/app/components/app/patient/_common/select-marital-status.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  placeholder?: string
+}>()
+
+const {
+  fieldName = 'maritalStatus',
+  label = 'Status Pernikahan',
+  errors,
+  class: containerClass,
+  labelClass,
+  placeholder = 'Pilih',
+} = props
+
+const maritalStatusOptions = [
+  { label: 'Tidak Diketahui', value: 'TIDAK_DIKETAHUI' },
+  { label: 'Belum Kawin', value: 'BELUM_KAWIN' },
+  { label: 'Kawin', value: 'KAWIN' },
+  { label: 'Cerai Hidup', value: 'CERAI_HIDUP' },
+  { label: 'Cerai Mati', value: 'CERAI_MATI' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="maritalStatusOptions"
+              :placeholder="placeholder"
+              :preserve-order="true"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/_common/select-religion.vue b/app/components/app/patient/_common/select-religion.vue
new file mode 100644
index 00000000..6a1fec66
--- /dev/null
+++ b/app/components/app/patient/_common/select-religion.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { religionCodes } from '~/lib/constants'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'religion',
+  label = 'Agama',
+  placeholder = 'Pilih kepercayaan',
+  errors,
+  class: containerClass,
+  selectClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const extendOptions = [
+  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+  { label: 'Kepercayaan Lain', value: 'other', priority: -1 },
+]
+
+const religionOptions = [
+  ...mapToComboboxOptList(religionCodes).map(({ label, value }) => ({
+    label,
+    value,
+  })),
+  ...extendOptions,
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="religionOptions"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
new file mode 100644
index 00000000..a83189c2
--- /dev/null
+++ b/app/components/app/patient/entry-form.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
+import InputName from './_common/input-name.vue'
+import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
+import RadioDisability from './_common/radio-disability.vue'
+import SelectGender from './_common/select-gender.vue'
+import RadioNationality from './_common/radio-nationality.vue'
+import RadioNewborn from './_common/radio-newborn.vue'
+import SelectBirthPlace from '~/components/app/person/_common/select-birth-place.vue'
+import SelectDisability from './_common/select-disability.vue'
+import SelectDob from './_common/select-dob.vue'
+import SelectEducation from './_common/select-education.vue'
+import SelectEthnicity from './_common/select-ethnicity.vue'
+import SelectJob from './_common/select-job.vue'
+import SelectLanguage from './_common/select-lang.vue'
+import SelectMaritalStatus from './_common/select-marital-status.vue'
+import SelectReligion from './_common/select-religion.vue'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}"
+  >
+    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Data Diri Pasien</p>
+    <DE.Block :col-count="4" :cell-flex="false">
+      <InputBase
+        field-name="identityNumber"
+        label="No. KTP"
+        placeholder="Masukkan NIK"
+        :errors="errors"
+        numeric-only
+      />
+      <InputBase
+        field-name="drivingLicenseNumber"
+        label="No. SIM"
+        placeholder="Masukkan nomor SIM"
+        numeric-only
+        :max-length="20"
+        :errors="errors"
+      />
+      <InputBase
+        field-name="passportNumber"
+        label="No. Paspor"
+        placeholder="Masukkan nomor paspor"
+        :max-length="20"
+        :errors="errors"
+      />
+      <InputName
+        field-name-alias="alias"
+        field-name-input="fullName"
+        label-for-input="Nama Lengkap"
+        placeholder="Masukkan nama lengkap pasien"
+        :errors="errors"
+        is-required
+      />
+      <RadioNewborn
+        field-name="isNewBorn"
+        label="Pasien Bayi"
+        placeholder="Pilih status pasien"
+        :errors="errors"
+        is-required
+      />
+      <SelectGender
+        field-name="gender"
+        label="Jenis Kelamin"
+        placeholder="Pilih jenis kelamin"
+        :errors="errors"
+        is-required
+      />
+      <SelectBirthPlace
+        field-name="birthPlace"
+        label="Tempat Lahir"
+        placeholder="Pilih tempat lahir"
+        :errors="errors"
+        is-required
+      />
+      <SelectDob
+        label="Tanggal Lahir"
+        :errors="errors"
+        is-required
+      />
+      <SelectEducation
+        field-name="education"
+        label="Pendidikan"
+        placeholder="Pilih pendidikan"
+        :errors="errors"
+        is-required
+      />
+      <SelectJob
+        field-name="job"
+        label="Pekerjaan"
+        placeholder="Pilih pekerjaan"
+        :errors="errors"
+        is-required
+      />
+      <SelectMaritalStatus
+        field-name="maritalStatus"
+        label="Status Perkawinan"
+        placeholder="Pilih status Perkawinan"
+        :errors="errors"
+        is-required
+      />
+      <DE.Cell />
+      <RadioNationality
+        field-name="nationality"
+        label="Kebangsaan"
+        placeholder="Pilih kebangsaan"
+        :errors="errors"
+        is-required
+      />
+      <SelectEthnicity
+        field-name="ethnicity"
+        label="Suku"
+        placeholder="Pilih suku bangsa"
+        :errors="errors"
+        :is-disabled="values.nationality !== 'WNI'"
+      />
+      <SelectLanguage
+        field-name="language"
+        label="Bahasa"
+        placeholder="Pilih preferensi bahasa"
+        :errors="errors"
+        is-required
+      />
+      <SelectReligion
+        field-name="religion"
+        label="Agama"
+        placeholder="Pilih agama"
+        :errors="errors"
+        is-required
+      />
+      <RadioCommunicationBarrier
+        field-name="communicationBarrier"
+        label="Hambatan Berkomunikasi"
+        :errors="errors"
+        is-required
+      />
+      <RadioDisability
+        field-name="disability"
+        label="Disabilitas"
+        :errors="errors"
+        is-required
+      />
+      <SelectDisability
+        label="Jenis Disabilitas"
+        field-name="disabilityType"
+        :errors="errors"
+        :is-disabled="values.disability !== 'YA'"
+        :is-required="values.disability === 'YA'"
+      />
+      <InputBase
+        field-name="note"
+        label="Kepercayaan"
+        placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
+        :errors="errors"
+      />
+    </DE.Block>
+
+    <div class="h-6"></div>
+
+    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Dokumen Identitas</p>
+    <DE.Block :col-count="2" :cell-flex="false">
+      <FileUpload
+        field-name="identityCardFile"
+        label="Dokumen KTP"
+        placeholder="Unggah scan dokumen KTP"
+        :errors="errors"
+        :accept="['pdf', 'jpg', 'png']"
+        :max-size-mb="1"
+      />
+      <FileUpload
+        field-name="familyCardFile"
+        label="Dokumen KK"
+        placeholder="Unggah scan dokumen KK"
+        :errors="errors"
+        :accept="['pdf', 'jpg', 'png']"
+        :max-size-mb="1"
+      />
+    </DE.Block>
+  </Form>
+</template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
new file mode 100644
index 00000000..559428a7
--- /dev/null
+++ b/app/components/app/patient/list-cfg.ts
@@ -0,0 +1,100 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
+
+  headers: [
+    [
+      { label: 'ID' },
+      { label: 'Nama' },
+      { label: 'NIK/No. Paspor' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'Jenis Kelamin' },
+      { label: 'Pendidikan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['patientId', 'name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    name: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return person.name.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/patient/list.cfg.ts b/app/components/app/patient/list.cfg.ts
new file mode 100644
index 00000000..d86c8dc1
--- /dev/null
+++ b/app/components/app/patient/list.cfg.ts
@@ -0,0 +1,96 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
+
+  headers: [
+    [
+      { label: 'No. RM' },
+      { label: 'Nama' },
+      { label: 'No. KTP/SIM/Passpor' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'Kelamin' },
+      { label: 'Pendidikan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['number', 'person.name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
new file mode 100644
index 00000000..8274e752
--- /dev/null
+++ b/app/components/app/patient/list.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/patient/picker.vue b/app/components/app/patient/picker.vue
new file mode 100644
index 00000000..be8c7160
--- /dev/null
+++ b/app/components/app/patient/picker.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { config } from './list.cfg'
+
+defineProps<{ data: any[] }>()
+const modelValue = defineModel<any | null>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-model="modelValue"
+    v-bind="config"
+    select-mode="single"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/patient/preview.vue b/app/components/app/patient/preview.vue
new file mode 100644
index 00000000..03ec65fb
--- /dev/null
+++ b/app/components/app/patient/preview.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import type { Patient } from '~/models/patient'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue'
+import { formatAddress } from '~/models/person-address'
+
+import {
+  addressLocationTypeCode,
+  educationCodes,
+  genderCodes,
+  occupationCodes,
+  personContactTypes,
+  relationshipCodes,
+  religionCodes,
+} from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+// #region Props & Emits
+const props = defineProps<{
+  patient: Patient
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: string): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+const genderOptions = mapToComboboxOptList(genderCodes)
+const religionOptions = mapToComboboxOptList(religionCodes)
+const educationOptions = mapToComboboxOptList(educationCodes)
+const occupationOptions = mapToComboboxOptList(occupationCodes)
+const relationshipOptions = mapToComboboxOptList(relationshipCodes)
+const personContactTypeOptions = mapToComboboxOptList(personContactTypes)
+
+// Computed addresses from nested data
+const domicileAddress = computed(() => {
+  const addresses = props.patient.person.addresses
+  const resident = addresses?.find((addr) => addr.locationType_code === 'domicile')
+  return formatAddress(resident)
+})
+
+const identityAddress = computed(() => {
+  const addresses = props.patient.person.addresses
+  const primary = addresses?.find((addr) => addr.locationType_code === 'identity')
+  return formatAddress(primary)
+})
+
+const patientAge = computed(() => {
+  if (!props.patient.person.birthDate) {
+    return '-'
+  }
+  const birthDate = new Date(props.patient.person.birthDate)
+  const today = new Date()
+  let age = today.getFullYear() - birthDate.getFullYear()
+  const monthDiff = today.getMonth() - birthDate.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+    age--
+  }
+  return age
+})
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+function onClick(type: string) {
+  emit('click', type)
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailSection title="Data Pasien">
+    <DetailRow label="Nomor">{{ patient.number || '-' }}</DetailRow>
+    <DetailRow label="Nama Lengkap">{{ patient.person.name || '-' }}</DetailRow>
+    <DetailRow label="Tempat, tanggal lahir">
+      {{ patient.person.birthRegency?.name || '-' }},
+      {{ patient.person.birthDate ? new Date(patient.person.birthDate).toLocaleDateString('id-ID') : '-' }}
+    </DetailRow>
+    <DetailRow label="Usia">{{ patientAge || '-' }} Tahun</DetailRow>
+    <DetailRow label="Tanggal Daftar">
+      {{ patient.person.createdAt ? new Date(patient.person.createdAt).toLocaleDateString('id-ID') : '-' }}
+    </DetailRow>
+    <DetailRow label="Jenis Kelamin">
+      {{ genderOptions.find((item) => item.code === patient.person.gender_code)?.label || '-' }}
+    </DetailRow>
+
+    <DetailRow label="NIK">{{ patient.person.residentIdentityNumber || '-' }}</DetailRow>
+    <DetailRow label="No. SIM">{{ patient.person.drivingLicenseNumber || '-' }}</DetailRow>
+    <DetailRow label="No. Paspor">{{ patient.person.passportNumber || '-' }}</DetailRow>
+
+    <DetailRow label="Agama">
+      {{ religionOptions.find((item) => item.code === patient.person.religion_code)?.label || '-' }}
+    </DetailRow>
+    <DetailRow label="Suku">{{ patient.person.ethnic?.name || '-' }}</DetailRow>
+    <DetailRow label="Bahasa">{{ patient.person.language?.name || '-' }}</DetailRow>
+    <DetailRow label="Pendidikan">
+      {{ educationOptions.find((item) => item.code === patient.person.education_code)?.label || '-' }}
+    </DetailRow>
+    <DetailRow label="Pekerjaan">
+      {{
+        occupationOptions.find((item) => item.code === patient.person.occupation_code)?.label ||
+        patient.person.occupation_name ||
+        '-'
+      }}
+    </DetailRow>
+  </DetailSection>
+
+  <DetailSection title="Alamat">
+    <DetailRow :label="addressLocationTypeCode.domicile || 'Alamat Domisili'">{{ domicileAddress || '-' }}</DetailRow>
+    <DetailRow :label="addressLocationTypeCode.identity || 'Alamat KTP'">{{ identityAddress || '-' }}</DetailRow>
+  </DetailSection>
+  <DetailSection title="Kontak">
+    <template v-if="patient.person.contacts && patient.person.contacts.length > 0">
+      <template
+        v-for="contactType in personContactTypeOptions"
+        :key="contactType.code"
+      >
+        <DetailRow :label="contactType.label">
+          {{ patient.person.contacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
+        </DetailRow>
+      </template>
+    </template>
+    <template v-else>
+      <DetailRow label="Kontak">-</DetailRow>
+    </template>
+  </DetailSection>
+  <DetailSection title="Orang Tua">
+    <template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => !rel.responsible).length > 0">
+      <template
+        v-for="(relative, index) in patient.person.relatives.filter((rel) => !rel.responsible)"
+        :key="relative.id"
+      >
+        <div
+          v-if="index > 0"
+          class="mt-3 border-t border-gray-200 pt-3"
+        ></div>
+        <DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow>
+        <DetailRow label="Hubungan">
+          {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
+        </DetailRow>
+        <!-- <DetailRow label="Jenis Kelamin">
+          {{ genderOptions.find((item) => item.code === relative.gender_code)?.label || '-' }}
+        </DetailRow> -->
+        <DetailRow label="Pendidikan">
+          {{ educationOptions.find((item) => item.code === relative.education_code)?.label || '-' }}
+        </DetailRow>
+        <DetailRow label="Pekerjaan">
+          {{
+            occupationOptions.find((item) => item.code === relative.occupation_code)?.label ||
+            relative.occupation_name ||
+            '-'
+          }}
+        </DetailRow>
+        <!-- <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow> -->
+        <!-- <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow> -->
+      </template>
+    </template>
+    <template v-else>
+      <DetailRow label="Orang Tua">-</DetailRow>
+    </template>
+  </DetailSection>
+  <DetailSection title="Penanggung Jawab">
+    <template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => rel.responsible).length > 0">
+      <template
+        v-for="(relative, index) in patient.person.relatives.filter((rel) => rel.responsible)"
+        :key="relative.id"
+      >
+        <div
+          v-if="index > 0"
+          class="mt-3 border-t border-gray-200 pt-3"
+        ></div>
+        <DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow>
+        <DetailRow label="Hubungan">
+          {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
+        </DetailRow>
+        <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow>
+        <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow>
+      </template>
+    </template>
+    <template v-else>
+      <DetailRow label="Penanggung Jawab">-</DetailRow>
+    </template>
+  </DetailSection>
+  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBaEd @click="onClick" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/patient/search.vue b/app/components/app/patient/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/patient/status-badge.vue b/app/components/app/patient/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/patient/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/person-address/_common/radio-residence.vue b/app/components/app/person-address/_common/radio-residence.vue
new file mode 100644
index 00000000..f6e429a8
--- /dev/null
+++ b/app/components/app/person-address/_common/radio-residence.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'residenceStatus',
+  label = 'Apakah alamat KTP sama dengan alamat sekarang?',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const residenceOptions = [
+  { label: 'Ya', value: '1' },
+  { label: 'Tidak', value: '0' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      size="fit"
+      height="compact"
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in residenceOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-address/_common/select-district.vue b/app/components/app/person-address/_common/select-district.vue
new file mode 100644
index 00000000..2c0da04c
--- /dev/null
+++ b/app/components/app/person-address/_common/select-district.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  regencyCode?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'districtId',
+  placeholder = 'Pilih kecamatan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data districts
+const regencyCodeRef = toRef(props, 'regencyCode')
+const { districtOptions, isLoading, error } = useDistricts(regencyCodeRef)
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.regencyCode) return 'Pilih kabupaten/kota dahulu'
+  if (isLoading.value) return 'Memuat data kecamatan...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.regencyCode || isLoading.value || !!error.value
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kecamatan
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="districtOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kecamatan..."
+              empty-message="Kecamatan tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person-address/_common/select-postal.vue b/app/components/app/person-address/_common/select-postal.vue
new file mode 100644
index 00000000..56867c7f
--- /dev/null
+++ b/app/components/app/person-address/_common/select-postal.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  villageCode?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const { fieldName = 'postalRegion', placeholder = 'Kode Pos', errors, class: containerClass, fieldGroupClass } = props
+
+const villageCodeRef = toRef(props, 'villageCode')
+const { postalRegionOptions, isLoading, error } = usePostalRegion(villageCodeRef)
+
+const dynamicPlaceholder = computed(() => {
+  if (!props.villageCode) return 'Pilih kelurahan terlebih dahulu'
+  if (isLoading.value) return 'Memuat kode pos...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.villageCode || isLoading.value || !!error.value
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kode Pos
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="postalRegionOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari..."
+              empty-message="Kode pos tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person-address/_common/select-province.vue b/app/components/app/person-address/_common/select-province.vue
new file mode 100644
index 00000000..ca6dd51a
--- /dev/null
+++ b/app/components/app/person-address/_common/select-province.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'provinceCode',
+  placeholder = 'Pilih provinsi',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data provinces
+const { provinceOptions, isLoading, error } = useProvinces()
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (isLoading.value) return 'Memuat data provinsi...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || isLoading.value || !!error.value
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Provinsi
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="provinceOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari provinsi..."
+              empty-message="Provinsi tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person-address/_common/select-regency.vue b/app/components/app/person-address/_common/select-regency.vue
new file mode 100644
index 00000000..8fbf6f23
--- /dev/null
+++ b/app/components/app/person-address/_common/select-regency.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  provinceCode?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'regencyId',
+  placeholder = 'Pilih kabupaten/kota',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data regencies
+const provinceCodeRef = toRef(props, 'provinceCode')
+const { regencyOptions, isLoading, error } = useRegencies({ provinceCode: provinceCodeRef, enablePagination: false })
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.provinceCode) return 'Pilih provinsi dahulu'
+  if (isLoading.value) return 'Memuat data kabupaten/kota...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.provinceCode || isLoading.value || !!error.value
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kabupaten/Kota
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="regencyOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kabupaten/kota..."
+              empty-message="Kabupaten/kota tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person-address/_common/select-village.vue b/app/components/app/person-address/_common/select-village.vue
new file mode 100644
index 00000000..9684954f
--- /dev/null
+++ b/app/components/app/person-address/_common/select-village.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  districtCode?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'villageId',
+  placeholder = 'Pilih kelurahan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data villages
+const districtCodeRef = toRef(props, 'districtCode')
+const { villageOptions, isLoading, error } = useVillages(districtCodeRef)
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (!props.districtCode) return 'Pilih kecamatan dahulu'
+  if (isLoading.value) return 'Memuat data kelurahan...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || !props.districtCode || isLoading.value || !!error.value
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      Kelurahan
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="villageOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari kelurahan..."
+              empty-message="Kelurahan tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person-address/entry-form-relative.vue b/app/components/app/person-address/entry-form-relative.vue
new file mode 100644
index 00000000..cc294bab
--- /dev/null
+++ b/app/components/app/person-address/entry-form-relative.vue
@@ -0,0 +1,394 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import SelectDistrict from './_common/select-district.vue'
+import SelectPostal from './_common/select-postal.vue'
+import SelectProvince from './_common/select-province.vue'
+import SelectRegency from './_common/select-regency.vue'
+import SelectVillage from './_common/select-village.vue'
+import { Form } from '~/components/pub/ui/form'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  title: string
+  conf?: {
+    withAddressName?: boolean
+  }
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+
+// Watchers untuk cascading reset
+let isResetting = false
+
+// Field dependency map for placeholder
+const fieldStates: Record<string, { dependsOn?: string; placeholder: string }> = {
+  regency_code: { dependsOn: 'province_code', placeholder: 'Pilih provinsi dahulu' },
+  district_code: { dependsOn: 'regency_code', placeholder: 'Pilih kabupaten/kota dahulu' },
+  village_code: { dependsOn: 'district_code', placeholder: 'Pilih kecamatan dahulu' },
+  postalRegion_code: { dependsOn: 'village_code', placeholder: 'Pilih kelurahan dahulu' },
+  address: { placeholder: 'Masukkan alamat' },
+  rt: { placeholder: '001' },
+  rw: { placeholder: '002' },
+}
+
+// Computed untuk konversi boolean ke string untuk radio group
+const isSameAddressString = computed(() => {
+  const value = formRef.value?.values?.isSameAddress
+  if (typeof value === 'boolean') {
+    return value ? '1' : '0'
+  }
+  return value || '1'
+})
+// #region Function Helper
+function getFieldState(field: string) {
+  const state = fieldStates[field]
+  const isSame = formRef.value?.values?.isSameAddress === true || formRef.value?.values?.isSameAddress === '1'
+
+  // Jika alamat sama, semua field kecuali provinsi disabled
+  if (['address', 'rt', 'rw'].includes(field) && isSame) {
+    return { placeholder: '-', disabled: true }
+  }
+
+  // Untuk field yang tergantung pada field lain
+  if (state?.dependsOn) {
+    const dependencyValue = formRef.value?.values?.[state.dependsOn]
+    const isDisabledByDependency = !dependencyValue
+
+    // Jika isSame, semua field location disabled
+    if (isSame && ['regency_code', 'district_code', 'village_code', 'postalRegion_code'].includes(field)) {
+      return { placeholder: '-', disabled: true }
+    }
+
+    if (isDisabledByDependency) {
+      return { placeholder: state.placeholder, disabled: true }
+    }
+  }
+
+  // Jika isSame dan field location, disabled
+  if (isSame && ['regency_code', 'district_code', 'village_code', 'postalRegion_code'].includes(field)) {
+    return { placeholder: '-', disabled: true }
+  }
+
+  return { placeholder: state?.placeholder ?? '', disabled: false }
+}
+
+// #endregion
+
+// #region watch
+
+// Watch province_code changes
+watch(
+  () => formRef.value?.values?.province_code,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          regency_code: undefined,
+          district_code: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch regency_code changes
+watch(
+  () => formRef.value?.values?.regency_code,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          district_code: undefined,
+          village_code: undefined,
+          postalRegion_code: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch district_code changes
+watch(
+  () => formRef.value?.values?.district_code,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          village_code: undefined,
+          postalRegion_code: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch village_code changes
+watch(
+  () => formRef.value?.values?.village_code,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          postalRegion_code: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+
+// Watch isSameAddress changes untuk trigger validasi
+watch(
+  () => formRef.value?.values?.isSameAddress,
+  (newValue, oldValue) => {
+    if (!formRef.value || newValue === oldValue) return
+
+    // Konversi ke boolean untuk perbandingan yang konsisten
+    const newBool = newValue === true || newValue === '1'
+    const oldBool = oldValue === true || oldValue === '1'
+
+    // Ketika berubah dari true ke false, clear empty strings dan trigger validasi
+    if (oldBool && !newBool) {
+      nextTick(() => {
+        // Set empty strings ke undefined untuk trigger required validation
+        const currentValues = formRef.value.values
+        const updatedValues = { ...currentValues }
+
+        // Convert empty strings to undefined untuk field yang sekarang required
+        if (updatedValues.province_code === '') updatedValues.province_code = undefined
+        if (updatedValues.regency_code === '') updatedValues.regency_code = undefined
+        if (updatedValues.district_code === '') updatedValues.district_code = undefined
+        if (updatedValues.village_code === '') updatedValues.village_code = undefined
+        if (updatedValues.postalRegion_code === '') updatedValues.postalRegion_code = undefined
+        if (updatedValues.address === '') updatedValues.address = undefined
+
+        // Update values dan trigger validasi
+        formRef.value.setValues(updatedValues, false)
+
+        // Trigger validasi untuk menampilkan error
+        setTimeout(() => {
+          formRef.value?.validate()
+        }, 50)
+      })
+    }
+
+    // Ketika berubah dari false ke true, clear error messages
+    if (!oldBool && newBool) {
+      nextTick(() => {
+        // Clear error messages untuk field yang tidak lagi required
+        formRef.value?.setFieldError('province_code', undefined)
+        formRef.value?.setFieldError('regency_code', undefined)
+        formRef.value?.setFieldError('district_code', undefined)
+        formRef.value?.setFieldError('village_code', undefined)
+        formRef.value?.setFieldError('postalRegion_code', undefined)
+        formRef.value?.setFieldError('address', undefined)
+        formRef.value?.setFieldError('rt', undefined)
+        formRef.value?.setFieldError('rw', undefined)
+      })
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ?? { isSameAddress: '1', locationType_code: 'identity' }"
+  >
+    <div>
+      <p
+        v-if="props.title"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
+      >
+        {{ props.title }}
+      </p>
+    </div>
+    <!-- locationType_code - Hidden field with default value 'identity' -->
+    <FormField
+      v-slot="{ componentField }"
+      name="locationType_code"
+    >
+      <input
+        type="hidden"
+        v-bind="componentField"
+        value="identity"
+      />
+    </FormField>
+    <DE.Block :col-count="4" :cell-flex="false">
+      <DE.Cell :col-span="4">
+        <DE.Label
+          size="fit"
+          height="compact"
+          label-for="isSameAddress"
+        >
+          Apakah alamat KTP sama dengan alamat sekarang?
+        </DE.Label>
+        <DE.Field
+          id="isSameAddress"
+          :errors="errors"
+        >
+          <FormField
+            v-slot="{ componentField }"
+            name="isSameAddress"
+          >
+            <FormItem>
+              <FormControl>
+                <RadioGroup
+                  :model-value="isSameAddressString"
+                  @update:model-value="(value) => componentField.onChange(value)"
+                  class="flex flex-row flex-wrap gap-4 sm:gap-6"
+                >
+                  <div
+                    v-for="(option, index) in [
+                      { label: 'Ya', value: '1' },
+                      { label: 'Tidak', value: '0' },
+                    ]"
+                    :key="option.value"
+                    class="flex min-w-fit items-center space-x-2"
+                  >
+                    <RadioGroupItem
+                      :id="`isSameAddress-${index}`"
+                      :value="option.value"
+                      class="relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5"
+                    />
+                    <RadioLabel
+                      :for="`isSameAddress-${index}`"
+                      class="cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm"
+                    >
+                      {{ option.label }}
+                    </RadioLabel>
+                  </div>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage class="ml-0 mt-1" />
+            </FormItem>
+          </FormField>
+        </DE.Field>
+      </DE.Cell>
+      <SelectProvince
+        field-name="province_code"
+        placeholder="Pilih"
+        :is-disabled="values.isSameAddress === true || values.isSameAddress === '1'"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectRegency
+        field-name="regency_code"
+        :province-code="values.province_code"
+        :is-disabled="getFieldState('regency_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectDistrict
+        field-name="district_code"
+        :regency-code="values.regency_code"
+        :is-disabled="getFieldState('district_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <SelectVillage
+        field-name="village_code"
+        :district-code="values.district_code"
+        :is-disabled="getFieldState('village_code').disabled"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+      />
+      <InputBase
+        field-name="address"
+        label="Alamat"
+        :placeholder="getFieldState('address').placeholder"
+        :is-disabled="getFieldState('address').disabled"
+        :errors="errors"
+        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :col-span="2"
+      />
+      <div class="grid grid-cols-2 gap-1">
+        <InputBase
+          field-name="rt"
+          label="RT"
+          :errors="errors"
+          numeric-only
+          :max-length="2"
+          :placeholder="getFieldState('rt').placeholder"
+          :is-disabled="getFieldState('rt').disabled"
+        />
+        <InputBase
+          field-name="rw"
+          label="RW"
+          :placeholder="getFieldState('rw').placeholder"
+          :is-disabled="getFieldState('rw').disabled"
+          :errors="errors"
+          :max-length="2"
+          numeric-only
+        />
+      </div>
+      <SelectPostal
+        field-name="postalRegion_code"
+        :village-code="values.village_code"
+        :placeholder="getFieldState('postalRegion_code').placeholder"
+        :is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
+      />
+    </DE.Block>
+
+  </Form>
+</template>
diff --git a/app/components/app/person-address/entry-form.vue b/app/components/app/person-address/entry-form.vue
new file mode 100644
index 00000000..b3ef300d
--- /dev/null
+++ b/app/components/app/person-address/entry-form.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import SelectDistrict from './_common/select-district.vue'
+import SelectPostal from './_common/select-postal.vue'
+import SelectProvince from './_common/select-province.vue'
+import SelectRegency from './_common/select-regency.vue'
+import SelectVillage from './_common/select-village.vue'
+import { Form } from '~/components/pub/ui/form'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  title: string
+  conf?: {
+    withAddressName?: boolean
+  }
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+
+// Watchers untuk cascading reset
+let isResetting = false
+
+// #region Watch provinceCode changes
+
+watch(
+  () => formRef.value?.values?.provinceCode,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              regencyId: undefined,
+              districtId: undefined,
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
+
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150) // Delay 150ms, lebih dari debounce composable (100ms)
+    }
+  },
+)
+
+// Watch regencyId changes
+watch(
+  () => formRef.value?.values?.regencyId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              districtId: undefined,
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
+
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150)
+    }
+  },
+)
+
+// Watch districtId changes
+watch(
+  () => formRef.value?.values?.districtId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      // Delay reset untuk memberikan waktu composable menyelesaikan request
+      setTimeout(() => {
+        if (formRef.value) {
+          formRef.value.setValues(
+            {
+              villageId: undefined,
+              zipCode: undefined,
+            },
+            false,
+          )
+        }
+
+        nextTick(() => {
+          isResetting = false
+        })
+      }, 150)
+    }
+  },
+)
+
+// Watch villageId changes
+watch(
+  () => formRef.value?.values?.villageId,
+  (newValue, oldValue) => {
+    if (isResetting || !formRef.value || newValue === oldValue) return
+
+    if (oldValue && newValue !== oldValue) {
+      isResetting = true
+
+      formRef.value.setValues(
+        {
+          zipCode: undefined,
+        },
+        false,
+      )
+
+      nextTick(() => {
+        isResetting = false
+      })
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="
+      initialValues ? { locationType_code: 'domicile', ...initialValues } : { locationType_code: 'domicile' }
+    "
+  >
+    <div>
+      <p
+        v-if="props.title"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
+      >
+        {{ props.title }}
+      </p>
+    </div>
+    <FormField
+      v-slot="{ componentField }"
+      name="locationType_code"
+    >
+      <input
+        type="hidden"
+        v-bind="componentField"
+        value="domicile"
+      />
+    </FormField>
+
+    <DE.Block :col-count="4" :cell-flex="false">
+      <SelectProvince
+        field-name="province_code"
+        placeholder="Pilih"
+        is-required
+      />
+      <SelectRegency
+        field-name="regency_code"
+        :province-code="values.province_code"
+        is-required
+      />
+      <SelectDistrict
+        field-name="district_code"
+        :regency-code="values.regency_code"
+        is-required
+      />
+      <SelectVillage
+        field-name="village_code"
+        :district-code="values.district_code"
+        is-required
+      />
+      <InputBase
+        field-name="address"
+        label="Alamat"
+        placeholder="Masukkan alamat"
+        :errors="errors"
+        is-required
+        :col-span="2"
+      />
+      <DE.Cell class="flex-row gap-2">
+        <div class="grid grid-cols-2 gap-1">
+          <InputBase
+            field-name="rt"
+            label="RT"
+            placeholder="01"
+            :errors="errors"
+            numeric-only
+            :max-length="2"
+            />
+          <InputBase
+            field-name="rw"
+            label="RW"
+            placeholder="02"
+            :errors="errors"
+            :max-length="2"
+            numeric-only
+          />
+        </div>
+      </DE.Cell>
+      <SelectPostal
+          field-name="postalRegion_code"
+          placeholder="Pilih kelurahan dahulu"
+          :village-code="values.village_code"
+          :is-disabled="!values.village_code"
+        />
+    </DE.Block>
+  </Form>
+</template>
diff --git a/app/components/app/person-contact/_common/select-contact-type.vue b/app/components/app/person-contact/_common/select-contact-type.vue
new file mode 100644
index 00000000..d6f8fe24
--- /dev/null
+++ b/app/components/app/person-contact/_common/select-contact-type.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass, labelClass } = props
+
+const contactOptions = [
+  { label: 'Nomor HP', value: 'phoneNumber' },
+  { label: 'Nomor Telepon Kantor', value: 'officePhoneNumber' },
+  { label: 'Nomor Telepon Rumah', value: 'homePhoneNumber' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :is-disabled="isDisabled"
+              :items="contactOptions"
+              :placeholder="placeholder || 'Pilih jenis kontak'"
+              :preserve-order="true"
+              :class="
+                cn(
+                  'min-w-[190px] text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-contact/entry-form.vue b/app/components/app/person-contact/entry-form.vue
new file mode 100644
index 00000000..431a3c79
--- /dev/null
+++ b/app/components/app/person-contact/entry-form.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { FieldArray } from 'vee-validate'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectContactType from './_common/select-contact-type.vue'
+import { Form } from '~/components/pub/ui/form'
+
+const props = defineProps<{
+  title: string
+  schema: any
+  contactLimit: number
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const { contactLimit = 5 } = props
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues || { contacts: [{ contactType: '', contactNumber: '' }] }"
+  >
+    <div>
+      <p
+        v-if="props.title"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
+      >
+        {{ props.title || 'Kontak Pasien' }}
+      </p>
+    </div>
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
+        <FieldArray
+          v-slot="{ fields, push, remove }"
+          name="contacts"
+        >
+          <div
+            v-for="(field, idx) in fields"
+            :key="field.key"
+            class="flex-row gap-2 md:flex"
+          >
+            <div class="min-w-0 flex-[2]">
+              <SelectContactType
+                :field-name="`contacts[${idx}].contactType`"
+                :label="`Kontak ${idx + 1}`"
+                :is-required="idx === 0"
+              />
+            </div>
+            <div class="min-w-0 flex-[1.5]">
+              <InputBase
+                :field-name="`contacts[${idx}].contactNumber`"
+                placeholder="081234567890"
+                label="No"
+                numeric-only
+                :max-length="15"
+                :is-required="idx === 0"
+              />
+            </div>
+            <div class="flex-1 self-start md:pt-8">
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                class="text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700 dark:border-red-400 dark:text-red-400 dark:hover:border-red-300 dark:hover:bg-red-900/20"
+                :class="{ invisible: idx === 0 }"
+                @click="remove(idx)"
+              >
+                <Icon
+                  name="i-lucide-trash-2"
+                  class="h-5 w-5"
+                />
+              </Button>
+            </div>
+          </div>
+
+          <div class="self-center pt-3">
+            <Button
+              :disabled="fields.length >= contactLimit"
+              type="button"
+              variant="outline"
+              size="sm"
+              @click="push({ contactType: '', contactNumber: '' })"
+            >
+              <Icon
+                name="i-lucide-plus"
+                class="h-5 w-5"
+              />
+              Tambah Kontak
+            </Button>
+          </div>
+        </FieldArray>
+      </div>
+    </div>
+  </Form>
+</template>
diff --git a/app/components/app/person-relative/_common/select-relations.vue b/app/components/app/person-relative/_common/select-relations.vue
new file mode 100644
index 00000000..5c3d2594
--- /dev/null
+++ b/app/components/app/person-relative/_common/select-relations.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+import { relationshipCodes } from '~/lib/constants'
+
+const props = defineProps<{
+  fieldName: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isDisabled?: boolean
+}>()
+
+const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, label]) => ({
+  label,
+  value,
+  ...(value === 'other' && { priority: -1 })
+}))
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :is-disabled="isDisabled"
+              :items="emergencyContactOptions"
+              :placeholder="placeholder"
+              :preserve-order="true"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person-relative/_common/table-head.vue b/app/components/app/person-relative/_common/table-head.vue
new file mode 100644
index 00000000..1994147e
--- /dev/null
+++ b/app/components/app/person-relative/_common/table-head.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { TableHead } from '~/components/pub/ui/table'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  label?: string
+  isRequired?: boolean
+}>()
+</script>
+
+<template>
+  <TableHead :class="cn('text-sm font-normal text-black dark:text-white', props.class)">
+    {{ label || '' }}
+    <span
+      v-if="isRequired"
+      class="text-red-600"
+    >
+      *
+    </span>
+  </TableHead>
+</template>
diff --git a/app/components/app/person-relative/entry-form.vue b/app/components/app/person-relative/entry-form.vue
new file mode 100644
index 00000000..411fab37
--- /dev/null
+++ b/app/components/app/person-relative/entry-form.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { FieldArray } from 'vee-validate'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import SelectContactRelation from './_common/select-relations.vue'
+import { Form } from '~/components/pub/ui/form'
+
+const props = defineProps<{
+  title: string
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues || { contacts: [{ relation: '', name: '', address: '', phone: '' }] }"
+  >
+    <div>
+      <p
+        v-if="props.title"
+        class="text-md mb-2 mt-1 font-semibold"
+      >
+        {{ props.title || 'Kontak Pasien' }}
+      </p>
+    </div>
+    <div class="mb-5 space-y-4">
+      <FieldArray
+        v-slot="{ fields, push, remove }"
+        name="contacts"
+      >
+        <div class="space-y-4">
+          <div
+            v-for="(field, idx) in fields"
+            :key="field.key"
+            class="rounded-lg border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
+          >
+            <div class="mb-3 flex items-center justify-between">
+              <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">Penanggung Jawab {{ idx + 1 }}</h4>
+              <Button
+                v-if="idx !== 0"
+                type="button"
+                variant="outline"
+                size="sm"
+                class="text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700 dark:border-red-400 dark:text-red-400 dark:hover:border-red-300 dark:hover:bg-red-900/20"
+                @click="remove(idx)"
+              >
+                <Icon
+                  name="i-lucide-trash-2"
+                  class="h-4 w-4"
+                />
+              </Button>
+            </div>
+
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Hubungan dengan Pasien
+                </Label>
+                <SelectContactRelation
+                  :field-name="`contacts[${idx}].relation`"
+                  placeholder="Pilih"
+                  :errors="errors"
+                  field-group-class="mb-0"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Nama
+                </Label>
+                <InputBase
+                  label=""
+                  :field-name="`contacts[${idx}].name`"
+                  placeholder="Masukkan Nama"
+                  :errors="errors"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Alamat
+                </Label>
+                <InputBase
+                  :field-name="`contacts[${idx}].address`"
+                  label=""
+                  placeholder="Masukkan Alamat"
+                  :errors="errors"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <Label
+                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                  is-required
+                >
+                  Nomor HP
+                </Label>
+                <InputBase
+                  :field-name="`contacts[${idx}].phone`"
+                  label=""
+                  placeholder="081234567890"
+                  :max-length="15"
+                  numeric-only
+                  :errors="errors"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+          @click="push({ relation: '', name: '', address: '', phone: '' })"
+        >
+          <Icon
+            name="i-lucide-plus"
+            class="mr-2 h-4 w-4 align-middle transition-colors"
+          />
+          Tambah Penanggung Jawab
+        </Button>
+      </FieldArray>
+    </div>
+  </Form>
+</template>
diff --git a/app/components/app/person/_common/radio-parents-input.vue b/app/components/app/person/_common/radio-parents-input.vue
new file mode 100644
index 00000000..bd8b6f15
--- /dev/null
+++ b/app/components/app/person/_common/radio-parents-input.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'inputParentsData',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const residenceOptions = [
+  { label: 'Ya', value: '1' },
+  { label: 'Tidak', value: '0' },
+]
+</script>
+
+<template>
+  <FieldGroup :class="cn('radio-group-field', containerClass)">
+    <Label
+      size="fit"
+      height="compact"
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label || 'Identitas Orang Tua' }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in residenceOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>
diff --git a/app/components/app/person/_common/select-birth-place.vue b/app/components/app/person/_common/select-birth-place.vue
new file mode 100644
index 00000000..dd61a69f
--- /dev/null
+++ b/app/components/app/person/_common/select-birth-place.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthPlace',
+  placeholder = 'Pilih tempat lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data regencies (tanpa pagination & tanpa province code)
+const { fetchRegencies, regencyOptions, isLoading, error } = useRegencies({
+  enablePagination: false,
+  enableSearch: false,
+})
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (isLoading.value) return 'Memuat data tempat lahir...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || isLoading.value || !!error.value
+})
+
+onMounted(() => {
+  fetchRegencies()
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label :label-for="fieldName" :is-required="isRequired">
+      Tempat Lahir
+    </DE.Label>
+    <DE.Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')">
+      <FormField v-slot="{ componentField }" :name="fieldName">
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="regencyOptions"
+              :placeholder="dynamicPlaceholder"
+              :is-disabled="isFieldDisabled"
+              search-placeholder="Cari tempat lahir..."
+              empty-message="Tempat lahir tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/person/entry-form.vue b/app/components/app/person/entry-form.vue
new file mode 100644
index 00000000..0ea3757a
--- /dev/null
+++ b/app/components/app/person/entry-form.vue
@@ -0,0 +1,476 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Form } from '~/components/pub/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const religionOpts = mapToComboboxOptList(religionCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form
+      id="entry-form"
+      @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))"
+    >
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <FieldGroup>
+              <Label label-for="residentIdentityNumber">KTP</Label>
+              <Field
+                id="residentIdentityNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="residentIdentityNumber"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="residentIdentityNumber"
+                        type="text"
+                        maxlength="16"
+                        placeholder="Nomor KTP"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- FrontTitle -->
+            <FieldGroup :column="3">
+              <Label label-for="frontTitle">Gelar Depan</Label>
+              <Field
+                id="frontTitle"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="frontTitle"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="frontTitle"
+                        type="text"
+                        placeholder="Dr., Ir., dll"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <FieldGroup :column="3">
+              <Label
+                label-for="name"
+                position="dynamic"
+              >
+                Nama
+              </Label>
+              <Field
+                id="name"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="name"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="name"
+                        type="text"
+                        placeholder="Nama lengkap"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- EndTitle -->
+            <FieldGroup :column="3">
+              <Label
+                label-for="endTitle"
+                position="dynamic"
+              >
+                Gelar Belakang
+              </Label>
+              <Field
+                id="endTitle"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="endTitle"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="endTitle"
+                        type="text"
+                        placeholder="S.Kom, M.Kes, dll"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- BirthDate -->
+            <FieldGroup :column="2">
+              <Label label-for="birthDate">Tanggal Lahir</Label>
+              <Field
+                id="birthDate"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="birthDate"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="birthDate"
+                        type="date"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- BirthRegency_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="birthRegencyCode">Tempat Lahir</Label>
+              <Field
+                id="birthRegencyCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="birthRegencyCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="parentId"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Gender_Code -->
+            <FieldGroup>
+              <Label label-for="genderCode">Jenis Kelamin</Label>
+              <Field
+                id="genderCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="genderCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="genderCode"
+                        v-bind="componentField"
+                        :items="genderOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- PassportNumber -->
+            <FieldGroup :column="2">
+              <Label label-for="passportNumber">Paspor</Label>
+              <Field
+                id="passportNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="passportNumber"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="passportNumber"
+                        type="text"
+                        placeholder="Nomor Paspor"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- DrivingLicenseNumber -->
+            <FieldGroup :column="2">
+              <Label label-for="drivingLicenseNumber">SIM</Label>
+              <Field
+                id="drivingLicenseNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="drivingLicenseNumber"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="drivingLicenseNumber"
+                        type="text"
+                        placeholder="Nomor SIM"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Religion_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="religionCode">Agama</Label>
+              <Field
+                id="religionCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="religionCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="religionCode"
+                        v-bind="componentField"
+                        :items="religionOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <FieldGroup :column="2">
+              <Label label-for="ethnicCode">Suku</Label>
+              <Field
+                id="ethnicCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="ethnicCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="ethnicCode"
+                        v-bind="componentField"
+                        :items="occupationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Language_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="languageCode">Bahasa</Label>
+              <Field
+                id="languageCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="languageCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="parentId"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Education_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="educationCode">Pendidikan</Label>
+              <Field
+                id="educationCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="educationCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="educationCode"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="occupationCode">Pekerjaan</Label>
+              <Field
+                id="occupationCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="occupationCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="occupationCode"
+                        v-bind="componentField"
+                        :items="occupationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Name -->
+            <FieldGroup :column="2">
+              <Label label-for="occupationName">Detail Pekerjaan</Label>
+              <Field
+                id="occupationName"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="occupationName"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="occupationName"
+                        type="text"
+                        placeholder="Contoh: Guru SMP, Petani"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/person/family-parents-form.vue b/app/components/app/person/family-parents-form.vue
new file mode 100644
index 00000000..fc87ce45
--- /dev/null
+++ b/app/components/app/person/family-parents-form.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { PersonFamilyFormData as FamilyData } from '~/schemas/person-family.schema'
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { FieldArray } from 'vee-validate'
+import SelectEducation from '~/components/app/patient/_common/select-education.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import RadioParentsInput from './_common/radio-parents-input.vue'
+import { Form } from '~/components/pub/ui/form'
+
+const props = defineProps<{
+  title: string
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+// Watcher untuk mengatur families ketika shareFamilyData berubah
+watch(
+  () => formRef.value?.values?.shareFamilyData,
+  (newValue) => {
+    if (newValue === '1' && formRef.value) {
+      // Ketika memilih "Ya", pastikan ada data families untuk mother dan father
+      const currentFamilies = formRef.value.values?.families || []
+      if (currentFamilies.length === 0) {
+        formRef.value.setFieldValue('families', [
+          { relation: 'mother', name: undefined, education: undefined, occupation: undefined },
+          { relation: 'father', name: undefined, education: undefined, occupation: undefined },
+        ])
+      }
+    } else if (newValue === '0' && formRef.value) {
+      // Ketika memilih "Tidak", kosongkan families
+      formRef.value.setFieldValue('families', [])
+    }
+  },
+  { immediate: false },
+)
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="
+      initialValues || {
+        shareFamilyData: '0',
+        families: [],
+      }
+    "
+  >
+    <div>
+      <p
+        v-if="props.title"
+        class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
+      >
+        {{ props.title }}
+      </p>
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <!-- Radio Button Section - Full Width -->
+      <div class="mb-6">
+        <RadioParentsInput field-name="shareFamilyData" />
+      </div>
+
+      <!-- Form Fields Section - Only show when "Ya" is selected -->
+      <div
+        v-if="values.shareFamilyData === '1'"
+        class="space-y-6"
+      >
+        <FieldArray
+          v-slot="{ fields }"
+          name="families"
+        >
+          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <template
+              v-for="(field, idx) in fields"
+              :key="field.key"
+            >
+              <div
+                class="space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
+              >
+                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {{ (values.families as FamilyData[])?.[idx]?.relation === 'mother' ? 'Data Ibu' : 'Data Ayah' }}
+                </h4>
+
+                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div>
+                    <InputBase
+                      :field-name="`families[${idx}].name`"
+                      :label="
+                        (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                          ? 'Nama Ibu Kandung'
+                          : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                            ? 'Nama Ayah Kandung'
+                            : 'Nama Keluarga'
+                      "
+                      :placeholder="
+                        (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                          ? 'Masukkan nama ibu pasien'
+                          : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                            ? 'Masukkan nama ayah pasien'
+                            : 'Masukkan nama'
+                      "
+                      :errors="errors"
+                      is-required
+                    />
+                  </div>
+
+                  <div>
+                    <SelectEducation
+                      :field-name="`families[${idx}].education`"
+                      :label="
+                        (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                          ? 'Pendidikan Ibu'
+                          : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                            ? 'Pendidikan Ayah'
+                            : 'Pendidikan'
+                      "
+                      placeholder="Pilih"
+                      :errors="errors"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <InputBase
+                    :field-name="`families[${idx}].occupation`"
+                    :label="
+                      (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                        ? 'Pekerjaan Ibu'
+                        : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                          ? 'Pekerjaan Ayah'
+                          : 'Pekerjaan'
+                    "
+                    :placeholder="
+                      (values.families as FamilyData[])?.[idx]?.relation === 'mother'
+                        ? 'Masukkan pekerjaan ibu'
+                        : (values.families as FamilyData[])?.[idx]?.relation === 'father'
+                          ? 'Masukkan pekerjaan ayah'
+                          : 'Masukkan pekerjaan'
+                    "
+                    :errors="errors"
+                  />
+                </div>
+              </div>
+            </template>
+          </div>
+        </FieldArray>
+      </div>
+    </div>
+  </Form>
+</template>
diff --git a/app/components/app/pharmacist/entry-form.vue b/app/components/app/pharmacist/entry-form.vue
new file mode 100644
index 00000000..4d7fde87
--- /dev/null
+++ b/app/components/app/pharmacist/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="2">
+            <Label>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/pharmacist/list-cfg.ts b/app/components/app/pharmacist/list-cfg.ts
new file mode 100644
index 00000000..4dd5657f
--- /dev/null
+++ b/app/components/app/pharmacist/list-cfg.ts
@@ -0,0 +1,107 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
+  ],
+
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/pharmacist/list.vue b/app/components/app/pharmacist/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/pharmacist/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/pharmacist/picker.vue b/app/components/app/pharmacist/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/pharmacist/search.vue b/app/components/app/pharmacist/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/pharmacist/status-badge.vue b/app/components/app/pharmacist/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/pharmacist/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/prescription-item/list-entry.cfg.ts b/app/components/app/prescription-item/list-entry.cfg.ts
new file mode 100644
index 00000000..070dd65f
--- /dev/null
+++ b/app/components/app/prescription-item/list-entry.cfg.ts
@@ -0,0 +1,56 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
new file mode 100644
index 00000000..5b496b2b
--- /dev/null
+++ b/app/components/app/prescription-item/list-entry.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-entry.cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/prescription/entry.vue b/app/components/app/prescription/entry.vue
new file mode 100644
index 00000000..3b4acf28
--- /dev/null
+++ b/app/components/app/prescription/entry.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+      <PubMyUiDocEntryCell />
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+      <PubMyUiDocEntryCell />
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+    </PubMyUiDocEntryBlock>
+  </div>
+</template>
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/list.vue
new file mode 100644
index 00000000..6fe27d39
--- /dev/null
+++ b/app/components/app/prescription/list.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Separator class="my-5" />
+  <div>
+    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+      <PubMyUiDocEntryCell />
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+      <PubMyUiDocEntryCell />
+      <PubMyUiDocEntryCell>
+        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
+        <PubMyUiDocEntryField>
+            <Input />
+        </PubMyUiDocEntryField>
+      </PubMyUiDocEntryCell>
+    </PubMyUiDocEntryBlock>
+  </div>
+</template>
diff --git a/app/components/app/procedure-src/entry-form.vue b/app/components/app/procedure-src/entry-form.vue
new file mode 100644
index 00000000..fd33cf90
--- /dev/null
+++ b/app/components/app/procedure-src/entry-form.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+
+// Types
+import type { ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ProcedureSrcFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    parent_id: null,
+  } as Partial<ProcedureSrcFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [indName, indNameAttrs] = defineField('indName')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.indName !== undefined) indName.value = props.values.indName
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  indName.value = null
+}
+
+function onSubmitForm() {
+  const formData: ProcedureSrcFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    indName: indName.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-procedure-src"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (FHIR)</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama (ID)</Label>
+        <Field :errMessage="errors.indName">
+          <Input
+            id="indName"
+            v-model="indName"
+            v-bind="indNameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/procedure-src/list-cfg.ts b/app/components/app/procedure-src/list-cfg.ts
new file mode 100644
index 00000000..0a576270
--- /dev/null
+++ b/app/components/app/procedure-src/list-cfg.ts
@@ -0,0 +1,33 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
+
+  keys: ['code', 'name', 'indName', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama (FHIR)' },
+    { key: 'indName', label: 'Nama (ID)' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/procedure-src/list.vue b/app/components/app/procedure-src/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/procedure-src/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/public-screen/entry-form.vue b/app/components/app/public-screen/entry-form.vue
new file mode 100644
index 00000000..0872b779
--- /dev/null
+++ b/app/components/app/public-screen/entry-form.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys['public-screen'],  
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys['public-screen']
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys['public-screen'],
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/public-screen/list-cfg.ts b/app/components/app/public-screen/list-cfg.ts
new file mode 100644
index 00000000..9f7ea4b4
--- /dev/null
+++ b/app/components/app/public-screen/list-cfg.ts
@@ -0,0 +1,37 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/public-screen/list.vue b/app/components/app/public-screen/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/public-screen/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/rehab/registration/sep-prosedur/entry-form.vue b/app/components/app/rehab/registration/sep-prosedur/entry-form.vue
new file mode 100644
index 00000000..5768c6a0
--- /dev/null
+++ b/app/components/app/rehab/registration/sep-prosedur/entry-form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
new file mode 100644
index 00000000..19298fbf
--- /dev/null
+++ b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
@@ -0,0 +1,113 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date === 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date === 'string') {
+        return recX.birth_date.substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/rehab/registration/sep-prosedur/list.vue b/app/components/app/rehab/registration/sep-prosedur/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/rehab/registration/sep-prosedur/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/rehab/registration/sep-prosedur/picker.vue b/app/components/app/rehab/registration/sep-prosedur/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/rehab/registration/sep-prosedur/search.vue b/app/components/app/rehab/registration/sep-prosedur/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/room/entry-form.vue b/app/components/app/room/entry-form.vue
new file mode 100644
index 00000000..b460cc2d
--- /dev/null
+++ b/app/components/app/room/entry-form.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialists: any[]
+  subspecialists: any[]
+  units: any[]
+  parents: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  'update:selected-unit': [val: any]
+  'update:selected-specialist': [val: any]
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.room,
+    parent_id: null,
+    specialist_id: 0,
+    subspecialist_id: 0,
+    unit_id: 0,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [specialist_id, specialistAttrs] = defineField('specialist_id')
+const [subspecialist_id, subspecialistAttrs] = defineField('subspecialist_id')
+const [unit_id, unitAttrs] = defineField('unit_id')
+const [parent_id, parentAttrs] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.specialist_id !== undefined)
+    specialist_id.value = props.values.specialist_id ? Number(props.values.specialist_id) : null
+  if (props.values.subspecialist_id !== undefined)
+    subspecialist_id.value = props.values.subspecialist_id ? Number(props.values.subspecialist_id) : null
+  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? Number(props.values.unit_id) : null
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.room
+  specialist_id.value = 0
+  subspecialist_id.value = 0
+  unit_id.value = 0
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.room,
+    specialist_id: specialist_id.value || 0,
+    subspecialist_id: subspecialist_id.value || 0,
+    unit_id: unit_id.value || 0,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-building"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Lantai tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Unit</Label>
+        <Field :errMessage="errors.unit_id">
+          <Combobox
+            id="unit"
+            v-model="unit_id"
+            v-bind="unitAttrs"
+            :items="units"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Unit"
+            search-placeholder="Cari Unit"
+            empty-message="Unit tidak ditemukan"
+            @update:model-value="$emit('update:selected-unit', $event)"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Spesialis</Label>
+        <Field :errMessage="errors.specialist_id">
+          <Combobox
+            id="specialist"
+            v-model="specialist_id"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Spesialis"
+            search-placeholder="Cari spesialis"
+            empty-message="Spesialis tidak ditemukan"
+            @update:model-value="$emit('update:selected-specialist', $event)"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Sub Spesialis</Label>
+        <Field :errMessage="errors.subspecialist_id">
+          <Combobox
+            id="subspecialist"
+            v-model="subspecialist_id"
+            v-bind="subspecialistAttrs"
+            :items="subspecialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Sub Spesialis"
+            search-placeholder="Cari sub spesialis"
+            empty-message="Sub Spesialis tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/room/list-cfg.ts b/app/components/app/room/list-cfg.ts
new file mode 100644
index 00000000..409287e5
--- /dev/null
+++ b/app/components/app/room/list-cfg.ts
@@ -0,0 +1,57 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Lantai' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'parent', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist?.name || '-'
+    },
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.subspecialist?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit?.name || '-'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/room/list.vue b/app/components/app/room/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/room/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/satusehat/badge-patient.vue b/app/components/app/satusehat/badge-patient.vue
new file mode 100644
index 00000000..41202aaf
--- /dev/null
+++ b/app/components/app/satusehat/badge-patient.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col justify-center">
+    <p class="font-semibold text-sm">{{ props.rec.patient.name }}</p>
+    <p class="text-xs text-muted-foreground">{{ props.rec.patient.mrn }}</p>
+  </div>
+</template>
diff --git a/app/components/app/satusehat/badge-status.vue b/app/components/app/satusehat/badge-status.vue
new file mode 100644
index 00000000..5ff492f0
--- /dev/null
+++ b/app/components/app/satusehat/badge-status.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Badge from './badge.vue'
+import { rowStatus } from './list-cfg'
+
+const props = defineProps<{
+  rec: { status: number }
+  idx?: number
+}>()
+
+const variants = {
+  0: 'error',
+  1: 'warning',
+  2: 'info',
+} as const
+
+const statusText = computed(() => {
+  return rowStatus[props.rec.status as keyof typeof rowStatus]
+})
+
+const badgeStatus = computed((): 'error' | 'warning' | 'success' | 'info' => {
+  return variants[props.rec.status as keyof typeof variants] ?? 'info'
+})
+</script>
+
+<template>
+  <div class="flex">
+    <Badge :status="badgeStatus" :text="statusText" />
+  </div>
+</template>
diff --git a/app/components/app/satusehat/badge.vue b/app/components/app/satusehat/badge.vue
new file mode 100644
index 00000000..197cb084
--- /dev/null
+++ b/app/components/app/satusehat/badge.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority'
+import { cn } from '~/lib/utils'
+
+interface BadgeProps {
+  status: 'success' | 'info' | 'warning' | 'error'
+  text: string
+}
+
+const props = defineProps<BadgeProps>()
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        success: 'rounded-full border-transparent bg-green-500 text-white hover:bg-green-600',
+        info: 'rounded-full border-transparent bg-blue-500 text-white hover:bg-blue-600',
+        warning: 'rounded-full border-transparent bg-yellow-500 text-white hover:bg-yellow-600',
+        error: 'rounded-full border-transparent bg-red-500 text-white hover:bg-red-600',
+      },
+    },
+    defaultVariants: {
+      variant: 'info',
+    },
+  },
+)
+</script>
+
+<template>
+  <div class="flex">
+    <div :class="cn(badgeVariants({ variant: props.status }))">
+      {{ props.text }}
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/satusehat/button-action.vue b/app/components/app/satusehat/button-action.vue
new file mode 100644
index 00000000..f8ee85ec
--- /dev/null
+++ b/app/components/app/satusehat/button-action.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+  icon: string
+}>()
+</script>
+
+<template>
+  <Button
+  variant="outline" class="text-primary border-primary bg-white hover:bg-gray-50 focus:bg-gray-150
+         focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+         >
+    <Icon :name="props.icon" class="size-4 me-2" />
+    {{ props.text }}
+  </Button>
+</template>
diff --git a/app/components/app/satusehat/card-summary.vue b/app/components/app/satusehat/card-summary.vue
new file mode 100644
index 00000000..531e24d2
--- /dev/null
+++ b/app/components/app/satusehat/card-summary.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+
+const props = defineProps<{
+  isLoading: boolean
+  summaryData: Summary[]
+}>()
+</script>
+
+<template>
+  <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+    <template v-if="props.isLoading">
+      <PubMyUiSummaryCard v-for="n in 4" :key="n" is-skeleton :stat="summaryData[n]" />
+    </template>
+    <template v-else>
+      <PubMyUiSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+    </template>
+  </div>
+</template>
diff --git a/app/components/app/satusehat/entry-form.vue b/app/components/app/satusehat/entry-form.vue
new file mode 100644
index 00000000..5768c6a0
--- /dev/null
+++ b/app/components/app/satusehat/entry-form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/satusehat/list-cfg.ts b/app/components/app/satusehat/list-cfg.ts
new file mode 100644
index 00000000..efc3d483
--- /dev/null
+++ b/app/components/app/satusehat/list-cfg.ts
@@ -0,0 +1,78 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+export const rowType = {
+  1: 'Patient',
+  2: 'Encounter',
+  3: 'Observation',
+}
+
+export const rowStatus = {
+  0: 'Gagal',
+  1: 'Pending',
+  2: 'Terkirim',
+}
+
+const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
+const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+  ],
+
+  headers: [
+    [
+      { label: 'ID' },
+      { label: 'Jenis' },
+      { label: 'Pasien' },
+      { label: 'Status' },
+      { label: 'Terakhir Update' },
+      { label: 'FHIR ID' },
+    ],
+  ],
+
+  keys: ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+  },
+
+  components: {
+    patient(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: patientBadge,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/satusehat/list.vue b/app/components/app/satusehat/list.vue
new file mode 100644
index 00000000..58b4f1bd
--- /dev/null
+++ b/app/components/app/satusehat/list.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
+</template>
diff --git a/app/components/app/satusehat/picker.vue b/app/components/app/satusehat/picker.vue
new file mode 100644
index 00000000..29f282d7
--- /dev/null
+++ b/app/components/app/satusehat/picker.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { DateRange } from 'radix-vue'
+import type { Ref } from 'vue'
+import {
+  CalendarDate,
+  DateFormatter,
+  getLocalTimeZone,
+} from '@internationalized/date'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !value && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="value.start">
+          <template v-if="value.end">
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+          </template>
+
+          <template v-else>
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+          </template>
+        </template>
+        <template v-else>
+          Pick a date
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <RangeCalendar v-model="value" initial-focus :number-of-months="2" @update:start-value="(startDate) => value.start = startDate" />
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/app/components/app/satusehat/search.vue b/app/components/app/satusehat/search.vue
new file mode 100644
index 00000000..9e2d2405
--- /dev/null
+++ b/app/components/app/satusehat/search.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="relative w-full max-w-sm items-center">
+    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+      <Search class="size-6 text-muted-foreground" />
+    </span>
+  </div>
+</template>
diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
new file mode 100644
index 00000000..e48d23ec
--- /dev/null
+++ b/app/components/app/sep/entry-form.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+// helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+// components
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { Label } from '~/components/pub/ui/label'
+import Select from '~/components/pub/ui/select/Select.vue'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { Textarea } from '~/components/pub/ui/textarea'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+const emit = defineEmits<{
+  (e: 'event', value: any): void
+}>()
+
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+// Validation schema
+const schema = z.object({
+  tanggalSep: z.string().min(1, 'Tanggal SEP wajib diisi'),
+  jalur: z.string().min(1, 'Pilih jalur'),
+  noBpjs: z.string().min(1, 'No. Kartu BPJS wajib diisi'),
+  noKtp: z.string().min(1, 'No. KTP wajib diisi'),
+  noRm: z.string().min(1, 'No. RM wajib diisi'),
+  namaPasien: z.string().min(1, 'Nama pasien wajib diisi'),
+  noTelp: z.string().min(1, 'Nomor telepon wajib diisi'),
+  noSuratKontrol: z.string().min(1, 'No. Surat Kontrol wajib diisi'),
+  tglSuratKontrol: z.string().min(1, 'Tanggal Surat Kontrol wajib diisi'),
+  klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
+  dpjp: z.string().min(1, 'DPJP wajib diisi'),
+  diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
+  cob: z.string().min(1, 'COB wajib diisi'),
+  katarak: z.string().min(1, 'Katarak wajib diisi'),
+  jenisProsedur: z.string().min(1, 'Jenis prosedur wajib diisi'),
+  kodePenunjang: z.string().min(1, 'Kode penunjang wajib diisi'),
+})
+
+const { handleSubmit, errors, defineField } = useForm({
+  validationSchema: toTypedSchema(schema),
+})
+
+// Bind fields
+const [tanggalSep] = defineField('tanggalSep')
+const [jalur] = defineField('jalur')
+const [noBpjs] = defineField('noBpjs')
+const [noKtp] = defineField('noKtp')
+const [noRm] = defineField('noRm')
+const [namaPasien] = defineField('namaPasien')
+const [noTelp] = defineField('noTelp')
+const [noSuratKontrol] = defineField('noSuratKontrol')
+const [tglSuratKontrol] = defineField('tglSuratKontrol')
+const [klinikTujuan] = defineField('klinikTujuan')
+const [dpjp] = defineField('dpjp')
+const [diagnosaAwal] = defineField('diagnosaAwal')
+const [cob] = defineField('cob')
+const [katarak] = defineField('katarak')
+const [jenisProsedur] = defineField('jenisProsedur')
+const [kodePenunjang] = defineField('kodePenunjang')
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  console.log('✅ Validated form values:', values)
+})
+</script>
+
+<template>
+  <div class="mx-auto w-full">
+    <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
+      <!-- Tanggal SEP & Jalur -->
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
+          <DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
+          <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label for="jalur">Jalur</Label>
+          <Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
+          <p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- Data Pasien -->
+      <div class="flex items-center gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <Button
+          variant="outline"
+          class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          @click="emit('event', 'search-patient')"
+        >
+          <Icon name="i-lucide-search" class="h-5 w-5" />
+          Cari Pasien
+        </Button>
+      </div>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
+          <Input v-model="noBpjs" />
+          <p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>No. KTP<span class="text-red-500">*</span></Label>
+          <Input v-model="noKtp" />
+          <p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>No. RM<span class="text-red-500">*</span></Label>
+          <Input v-model="noRm" />
+          <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>Nama Pasien<span class="text-red-500">*</span></Label>
+          <Input v-model="namaPasien" />
+          <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>No. Telepon<span class="text-red-500">*</span></Label>
+          <Input v-model="noTelp" />
+          <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- Data SEP -->
+      <h3 class="text-lg font-semibold">Data SEP</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
+          <div class="flex gap-2">
+            <Input class="flex-1" v-model="noSuratKontrol" />
+            <Button
+              variant="outline"
+              class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+              @click="emit('event', 'search-letter')"
+            >
+              <Icon name="i-lucide-search" class="h-5 w-5" />
+              Cari Data
+            </Button>
+          </div>
+          <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
+          <DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
+          <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
+        </div>
+        <div class="flex flex-row items-center gap-2">
+          <div class="flex-1">
+            <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
+            <Select
+              icon-name="i-lucide-chevron-down"
+              v-model="klinikTujuan"
+              :items="items"
+              placeholder="Pilih klinik"
+            ></Select>
+            <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
+          </div>
+          <div>
+            <Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
+            <RadioGroup v-model="cob" class="flex items-center gap-2">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem value="Ya" id="cob-ya" />
+                <Label for="cob-ya">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem value="Tidak" id="cob-tidak" />
+                <Label for="cob-tidak">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </div>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>DPJP<span class="text-red-500">*</span></Label>
+          <Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
+          <p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
+          <Input v-model="diagnosaAwal" />
+          <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
+        </div>
+      </div>
+
+      <!-- Catatan -->
+      <div>
+        <Label>Catatan</Label>
+        <Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
+      </div>
+
+      <div class="flex items-center gap-4">
+        <div>
+          <Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="cob" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Ya" id="cob-ya" />
+              <Label for="cob-ya">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Tidak" id="cob-tidak" />
+              <Label for="cob-tidak">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </div>
+        <div>
+          <Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="katarak" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Ya" id="katarak-ya" />
+              <Label for="katarak-ya">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Tidak" id="katarak-tidak" />
+              <Label for="katarak-tidak">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </div>
+      </div>
+
+      <div class="grid gap-4 md:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label class="mb-2 block">Jenis Prosedur<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="jenisProsedur" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="procedure-one" id="procedure-one" />
+              <Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="procedure-two" id="procedure-two" />
+              <Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
+            </div>
+          </RadioGroup>
+        </div>
+      </div>
+
+      <div class="grid gap-4 md:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label>Kode Penunjang<span class="text-red-500">*</span></Label>
+          <Select
+            icon-name="i-lucide-chevron-down"
+            v-model="kodePenunjang"
+            :items="items"
+            placeholder="Pilih Kode Penunjang"
+          ></Select>
+          <p v-if="errors.kodePenunjang" class="text-sm text-red-500">{{ errors.kodePenunjang }}</p>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="mt-6 flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="ghost"
+          class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50"
+          @click="emit('event', 'history-sep')"
+        >
+          <Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
+        >
+          <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
+        </Button>
+        <Button type="submit" class="h-[40px] min-w-[120px] text-white">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/components/app/sep/list-cfg.ts b/app/components/app/sep/list-cfg.ts
new file mode 100644
index 00000000..4a6784fc
--- /dev/null
+++ b/app/components/app/sep/list-cfg.ts
@@ -0,0 +1,77 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SepDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 }, // TGL. SEP
+    { width: 150 }, // NO. SEP
+    { width: 120 }, // PELAYANAN
+    { width: 100 }, // JALUR
+    { width: 150 }, // NO. RM
+    { width: 200 }, // NAMA PASIEN
+    { width: 150 }, // NO. KARTU BPJS
+    { width: 150 }, // NO. SURAT KONTROL
+    { width: 150 }, // TGL SURAT KONTROL
+    { width: 150 }, // KLINIK TUJUAN
+    { width: 200 }, // DPJP
+    { width: 200 }, // DIAGNOSIS AWAL
+    { width: 100 }, // AKSI
+  ],
+
+  headers: [
+    [
+      { label: 'TGL. SEP' },
+      { label: 'NO. SEP' },
+      { label: 'PELAYANAN' },
+      { label: 'JALUR' },
+      { label: 'NO. RM' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TGL SURAT KONTROL' },
+      { label: 'KLINIK TUJUAN' },
+      { label: 'DPJP' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tgl_sep',
+    'no_sep',
+    'pelayanan',
+    'jalur',
+    'no_rm',
+    'nama_pasien',
+    'no_kartu_bpjs',
+    'no_surat_kontrol',
+    'tgl_surat_kontrol',
+    'klinik_tujuan',
+    'dpjp',
+    'diagnosis_awal',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'no_sep', label: 'NO. SEP' },
+    { key: 'nama_pasien', label: 'Nama Pasien' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/sep/list.vue b/app/components/app/sep/list.vue
new file mode 100644
index 00000000..f44166e2
--- /dev/null
+++ b/app/components/app/sep/list.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+interface SepData {
+  tgl_sep: string
+  no_sep: string
+  pelayanan: string
+  jalur: string
+  no_rm: string
+  nama_pasien: string
+  no_kartu_bpjs: string
+  no_surat_kontrol: string
+  tgl_surat_kontrol: string
+  klinik_tujuan: string
+  dpjp: string
+  diagnosis_awal: string
+}
+
+const props = defineProps<{
+  data: SepData[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="props.data"
+  />
+</template>
diff --git a/app/components/app/sep/small-entry.vue b/app/components/app/sep/small-entry.vue
new file mode 100644
index 00000000..a5372099
--- /dev/null
+++ b/app/components/app/sep/small-entry.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Form } from '~/components/pub/ui/form'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+const doctorOpts = ref([
+  { label: 'Pilih', value: null },
+  { label: 'Dr. A', value: 1 },
+])
+const paymentOpts = ref([
+  { label: 'Umum', value: 'umum' },
+  { label: 'BPJS', value: 'bpjs' },
+])
+const sepOpts = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
+
+// file refs untuk tombol "Pilih Berkas"
+const sepFileInput = ref<HTMLInputElement | null>(null)
+const sippFileInput = ref<HTMLInputElement | null>(null)
+
+function pickSepFile() {
+  sepFileInput.value?.click()
+}
+function pickSippFile() {
+  sippFileInput.value?.click()
+}
+
+function onSepFileChange(e: Event) {
+  const f = (e.target as HTMLInputElement).files?.[0]
+  // set ke form / emit / simpan di state sesuai form library-mu
+  console.log('sep file', f)
+}
+
+function onSippFileChange(e: Event) {
+  const f = (e.target as HTMLInputElement).files?.[0]
+  console.log('sipp file', f)
+}
+
+function onAddSep() {
+  // contoh handler tombol "+" di sebelah No. SEP
+  console.log('open modal tambah SEP')
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <div class="p-2">
+            <h2 class="text-md font-semibold">Data Kunjungan</h2>
+          </div>
+          <Block>
+            <!-- Tanggal Daftar (DatePicker) -->
+            <FieldGroup :column="3">
+              <Label label-for="register_date">Dengan Rujukan</Label>
+              <Field id="register_date" :errors="errors">
+                <FormField v-slot="{ componentField }" name="register_date">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="bpjs_number"
+                        v-bind="componentField"
+                        placeholder="Pilih jenis pembayaran terlebih dahulu"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Jenis Pembayaran (Combobox) -->
+            <FieldGroup :column="3">
+              <Label label-for="payment_type">Rujukan</Label>
+              <Field id="payment_type" :errors="errors">
+                <FormField v-slot="{ componentField }" name="payment_type">
+                  <FormItem>
+                    <FormControl>
+                      <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
+                      <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <FieldGroup :column="3">
+              <Label label-for="bpjs_number">No. Rujukan</Label>
+              <Field id="bpjs_number" :errors="errors">
+                <FormField v-slot="{ componentField }" name="bpjs_number">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="bpjs_number"
+                        v-bind="componentField"
+                        placeholder="Pilih jenis pembayaran terlebih dahulu"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- No. Kartu BPJS -->
+            <FieldGroup :column="2">
+              <Label label-for="bpjs_number">Tanggal Rujukan</Label>
+              <Field id="bpjs_number" :errors="errors">
+                <FormField v-slot="{ componentField }" name="bpjs_number">
+                  <FormItem>
+                    <FormControl>
+                      <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Jenis SEP -->
+            <FieldGroup :column="2">
+              <Label label-for="sep_type">Diagnosis</Label>
+              <Field id="sep_type" :errors="errors">
+                <FormField v-slot="{ componentField }" name="sep_type">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+            <!-- No. SEP (input + tombol +) -->
+
+            <FieldGroup>
+              <Label label-for="sep_type">Status Kecelakaan</Label>
+              <Field id="sep_type" :errors="errors">
+                <FormField v-slot="{ componentField }" name="sep_type">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/sep/table-history-sep.vue b/app/components/app/sep/table-history-sep.vue
new file mode 100644
index 00000000..bfe00e51
--- /dev/null
+++ b/app/components/app/sep/table-history-sep.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Input } from '~/components/pub/ui/input'
+
+const props = defineProps<{
+  open: boolean
+  histories: Array<{
+    no_sep: string
+    tgl_sep: string
+    no_rujukan: string
+    diagnosis: string
+    pelayanan: string
+    kelas: string
+  }>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const search = ref('')
+
+const filteredHistories = computed(() => {
+  const histories = props.histories || []
+  return histories.filter((p) => p.no_sep.includes(search.value))
+})
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-[50%]">
+      <DialogHeader>
+        <DialogTitle>History SEP</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-100">
+            <tr class="text-left">
+              <th class="p-2">NO. SEP</th>
+              <th class="p-2">TGL. SEP</th>
+              <th class="p-2">NO. RUJUKAN</th>
+              <th class="p-2">DIAGNOSIS AWAL</th>
+              <th class="p-2">JENIS PELAYANAN</th>
+              <th class="p-2">KELAS RAWAT</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
+              <td class="p-2">{{ p.no_sep }}</td>
+              <td class="p-2">{{ p.tgl_sep }}</td>
+              <td class="p-2">{{ p.no_rujukan }}</td>
+              <td class="p-2">{{ p.diagnosis }}</td>
+              <td class="p-2">{{ p.pelayanan }}</td>
+              <td class="p-2">{{ p.kelas }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/sep/table-search-letter.vue b/app/components/app/sep/table-search-letter.vue
new file mode 100644
index 00000000..64e65ff6
--- /dev/null
+++ b/app/components/app/sep/table-search-letter.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  open: boolean
+  letters: Array<{
+    noSurat: string
+    tglRencana: string
+    noSep: string
+    namaPasien: string
+    noBpjs: string
+    klinik: string
+    dokter: string
+  }>
+  selected: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+
+const filteredLetters = computed(() => {
+  const letters = props.letters || []
+  return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
+})
+
+function saveSelection() {
+  emit('save')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-[50%]">
+      <DialogHeader>
+        <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-100">
+            <tr class="text-left">
+              <th class="p-2"></th>
+              <th class="p-2">NO. SURAT KONTROL</th>
+              <th class="p-2">TGL RENCANA KONTROL</th>
+              <th class="p-2">NO. SEP</th>
+              <th class="p-2">NAMA PASIEN</th>
+              <th class="p-2">NO. KARTU BPJS</th>
+              <th class="p-2">KLINIK</th>
+              <th class="p-2">DOKTER</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
+              <td class="p-2">
+                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
+                  <RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
+                </RadioGroup>
+              </td>
+              <td class="p-2">{{ p.noSurat }}</td>
+              <td class="p-2">{{ p.tglRencana }}</td>
+              <td class="p-2">{{ p.noSep }}</td>
+              <td class="p-2">{{ p.namaPasien }}</td>
+              <td class="p-2">{{ p.noBpjs }}</td>
+              <td class="p-2">{{ p.klinik }}</td>
+              <td class="p-2">{{ p.dokter }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/sep/table-search-patient.vue b/app/components/app/sep/table-search-patient.vue
new file mode 100644
index 00000000..13a78651
--- /dev/null
+++ b/app/components/app/sep/table-search-patient.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  open: boolean
+  patients: Array<{
+    ktp: string
+    rm: string
+    bpjs: string
+    nama: string
+  }>
+  selected: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+const filteredPatients = computed(() => {
+  const patients = props.patients || []
+  return patients.filter(
+    (p) =>
+      p.ktp.includes(search.value) ||
+      p.rm.includes(search.value) ||
+      p.bpjs.includes(search.value) ||
+      p.nama.toLowerCase().includes(search.value.toLowerCase()),
+  )
+})
+
+function saveSelection() {
+  emit('save')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Cari Pasien</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-100">
+            <tr class="text-left">
+              <th class="p-2"></th>
+              <th class="p-2">NO. KTP</th>
+              <th class="p-2">NO. RM</th>
+              <th class="p-2">NO. KARTU BPJS</th>
+              <th class="p-2">NAMA PASIEN</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
+              <td class="p-2">
+                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
+                  <RadioGroupItem :id="p.ktp" :value="p.ktp" />
+                </RadioGroup>
+              </td>
+              <td class="p-2">{{ p.ktp }}</td>
+              <td class="p-2">{{ p.rm }}</td>
+              <td class="p-2">{{ p.bpjs }}</td>
+              <td class="p-2">{{ p.nama }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/soapi/early-entry.vue b/app/components/app/soapi/early-entry.vue
new file mode 100644
index 00000000..146a25d4
--- /dev/null
+++ b/app/components/app/soapi/early-entry.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
+const [curDiseaseHistory, curDiseaseHistoryAttrs] = defineField('cur-disea-hist')
+const [systolic, systolicAttrs] = defineField('syst-bp')
+const [diastolic, diastolicAttrs] = defineField('diast-bp')
+const [pulse, pulseAttrs] = defineField('pulse')
+const [respiratoryRate, respiratoryRateAttrs] = defineField('resp-rate')
+const [temperature, temperatureAttrs] = defineField('temp')
+const [weight, weightAttrs] = defineField('weight')
+const [height, heightAttrs] = defineField('height')
+const [bloodGroup, bloodGroupAttrs] = defineField('reflect-fisio')
+const [physicalExamination, physicalExaminationAttrs] = defineField('reflect-pato')
+const [diagnosisMedical, diagnosisMedicalAttrs] = defineField('autonom-neuron')
+const [medicalPlan, medicalPlanAttrs] = defineField('medical-act')
+const [therapy, therapyAttrs] = defineField('therapy')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    {{ errors }}
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <Cell>
+          <Label dynamic>Sudah Vaksin</Label>
+          <Field>
+            <RadioGroup class="flex gap-4">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  id="vaksin-yes"
+                  value="yes"
+                />
+                <Label for="vaksin-yes">Sudah</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  id="vaksin-no"
+                  value="no"
+                />
+                <Label for="vaksin-no">Belum</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Kasus</Label>
+          <Field>
+            <RadioGroup class="flex gap-4">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  id="kasus-baru"
+                  value="baru"
+                />
+                <Label for="kasus-baru">Baru</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  id="kasus-lama"
+                  value="lama"
+                />
+                <Label for="kasus-lama">Lama</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Kunjungan</Label>
+          <Field>
+            <RadioGroup class="flex gap-4">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  id="kunjungan-baru"
+                  value="baru"
+                />
+                <Label for="kunjungan-baru">Baru</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  id="kunjungan-lama"
+                  value="lama"
+                />
+                <Label for="kunjungan-lama">Lama</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Keluhan Utama</Label>
+          <Field :errMessage="errors['prim-compl']">
+            <Textarea
+              placeholder="Masukkan anamnesa pasien"
+              v-model="primaryComplaint"
+              v-bind="primaryComplaintAttrs"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Riwayat Penyakit</Label>
+          <Field>
+            <Textarea
+              placeholder=".."
+              v-model="curDiseaseHistory"
+              v-bind="curDiseaseHistoryAttrs"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>SpO₂</Label>
+          <Field>
+            <Input
+              type="number"
+              placeholder="%"
+              v-model="spo2"
+              v-bind="spo2Attrs"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Tekanan Darah Sistol</Label>
+          <Field>
+            <Input
+              type="number"
+              placeholder="mmHg"
+              v-model="systolic"
+              v-bind="systolicAttrs"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Tekanan Darah Diastol</Label>
+          <Field>
+            <Input
+              v-model="diastolic"
+              v-bind="diastolicAttrs"
+              type="number"
+              placeholder="mmHg"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Respirasi</Label>
+          <Field>
+            <Input
+              v-model="respiratoryRate"
+              v-bind="respiratoryRateAttrs"
+              type="number"
+              placeholder="kali/menit"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Nadi</Label>
+          <Field>
+            <Input
+              v-model="pulse"
+              v-bind="pulseAttrs"
+              type="number"
+              placeholder="kali/menit"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Temperatur</Label>
+          <Field>
+            <Input
+              v-model="temperature"
+              v-bind="temperatureAttrs"
+              type="number"
+              placeholder="℃"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Berat Badan</Label>
+          <Field>
+            <Input
+              v-model="weight"
+              v-bind="weightAttrs"
+              type="number"
+              placeholder="Kg"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Tinggi Badan</Label>
+          <Field>
+            <Input
+              v-model="height"
+              v-bind="heightAttrs"
+              type="number"
+              placeholder="Cm"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Golongan Darah</Label>
+          <Field>
+            <Select
+              :options="bloodGroups"
+              v-model="bloodGroup"
+              v-bind="bloodGroupAttrs"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
+          <Field>
+            <Textarea
+              placeholder="Masukkan pemeriksaan fisik"
+              v-model="physicalExamination"
+              v-bind="physicalExaminationAttrs"
+            />
+          </Field>
+        </Cell>
+
+        <!-- Prosedur -->
+        <Cell>
+          <Label dynamic>Diagnosa (ICD-X)</Label>
+          <Field>
+            <Button
+              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+              type="button"
+              @click="emits('modal', 'diagnosa')"
+            >
+              + Pilih Diagnosa
+            </Button>
+          </Field>
+        </Cell>
+        <!-- Diagnosa -->
+        <Cell>
+          <Label dynamic>Diagnosa (ICD-X)</Label>
+          <Field>
+            <Button
+              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+              type="button"
+              @click="emits('modal', 'prosedur')"
+            >
+              + Pilih Prosedur
+            </Button>
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <AppIcdPreview />
+        <AppIcdPreview />
+      </div>
+
+      <Block :colCount="3">
+        <Cell>
+          <Label dynamic>Diagnosa Medis</Label>
+          <Field>
+            <Textarea
+              v-model="diagnosisMedical"
+              v-bind="diagnosisMedicalAttrs"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Rencana Awal Medis</Label>
+          <Field>
+            <Textarea
+              v-model="medicalPlan"
+              v-bind="medicalPlanAttrs"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Terapi</Label>
+          <Field>
+            <Textarea
+              v-model="therapy"
+              v-bind="therapyAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/soapi/early-rehab-entry.vue b/app/components/app/soapi/early-rehab-entry.vue
new file mode 100644
index 00000000..2cafbcac
--- /dev/null
+++ b/app/components/app/soapi/early-rehab-entry.vue
@@ -0,0 +1,520 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
+const [medicalPlan, medicalPlanAttrs] = defineField('medical-plan')
+const [diagnosisMedical, diagnosisMedicalAttrs] = defineField('diagnosis-medical')
+const [rehabTrouble, rehabTroubleAttrs] = defineField('rehab-trouble')
+const [medicalTrouble, medicalTroubleAttrs] = defineField('medical-trouble')
+const [physicModal, physicModalAttrs] = defineField('physic-modal')
+const [exercise, exerciseAttrs] = defineField('exercise')
+const [orthoPesa, orthoPesaAttrs] = defineField('ortho-pesa')
+const [education, educationAttrs] = defineField('education')
+const [other, otherAttrs] = defineField('other')
+const [cranialis, cranialisAttrs] = defineField('cranialis')
+const [sensoris, sensorisAttrs] = defineField('sensoris')
+const [reflectFisio, reflectFisioAttrs] = defineField('reflect-fisio')
+const [reflectPato, reflectPatoAttrs] = defineField('reflect-pato')
+const [otonom, otonomAttrs] = defineField('otonom')
+const [localis, localisAttrs] = defineField('localis')
+const [medicalTrial, medicalTrialAttrs] = defineField('medical-trial')
+const [therapy, therapyAttrs] = defineField('therapy')
+const [systolic, systolicAttrs] = defineField('syst-bp')
+const [diastolic, diastolicAttrs] = defineField('diast-bp')
+const [pulse, pulseAttrs] = defineField('pulse')
+const [gcs, gcsAttrs] = defineField('gcs')
+const [respiratoryRate, respiratoryRateAttrs] = defineField('respiratory-rate')
+const [temperature, temperatureAttrs] = defineField('temperature')
+const [weight, weightAttrs] = defineField('weight')
+const [height, heightAttrs] = defineField('height')
+const [ambulance, ambulanceAttrs] = defineField('ambulance')
+const [gait, gaitAttrs] = defineField('gait')
+const [neckRom, neckRomAttrs] = defineField('neck-rom')
+const [bodyRom, bodyRomAttrs] = defineField('body-rom')
+const [agaRom, agaRomAttrs] = defineField('aga-rom')
+const [agbRom, agbRomAttrs] = defineField('agb-rom')
+const [neckMmt, neckMmtAttrs] = defineField('neck-mmt')
+const [bodyMmt, bodyMmtAttrs] = defineField('body-mmt')
+const [agaMmt, agaMmtAttrs] = defineField('aga-mmt')
+const [agbMmt, agbMmtAttrs] = defineField('agb-mmt')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div>
+        <h1 class="font-semibold">Pemeriksaan Fisiatrik</h1>
+        <span class="text-sm font-semibold">Anamnesa</span>
+      </div>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Keluhan Utama</Label>
+            <Field :errMessage="errors['prim-compl']">
+              <Textarea
+                v-model="primaryComplaint"
+                v-bind="primaryComplaintAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Diagnosa Medis</Label>
+            <Field>
+              <Textarea
+                v-model="diagnosisMedical"
+                v-bind="diagnosisMedicalAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Rencana Awal Medis</Label>
+            <Field>
+              <Textarea
+                v-model="medicalPlan"
+                v-bind="medicalPlanAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Terapi</Label>
+            <Field>
+              <Textarea
+                v-model="therapy"
+                v-bind="therapyAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+        <span class="text-sm font-semibold">Status Generalis</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Tekanan Darah</Label>
+            <Field>
+              <Input
+                placeholder="Sistolik"
+                v-model="systolic"
+                v-bind="systolicAttrs"
+              />
+              <Input
+                placeholder="Diastolik"
+                v-model="diastolic"
+                v-bind="diastolicAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input
+                v-model="pulse"
+                v-bind="pulseAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>GCS</Label>
+            <Field>
+              <Input
+                v-model="gcs"
+                v-bind="gcsAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>RR</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRate"
+                v-bind="respiratoryRateAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Ambulasi</Label>
+            <Field>
+              <RadioGroup
+                class="flex gap-4"
+                v-model="ambulance"
+                v-bind="ambulanceAttrs"
+              >
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-yes"
+                    value="yes"
+                  />
+                  <Label for="vaksin-yes">Dependent</Label>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-no"
+                    value="no"
+                  />
+                  <Label for="vaksin-no">Independen</Label>
+                </div>
+              </RadioGroup>
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Gait</Label>
+            <Field>
+              <Textarea
+                v-model="gait"
+                v-bind="gaitAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Neurologis</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>N. Cranialis</Label>
+            <Field>
+              <Input
+                v-model="cranialis"
+                v-bind="cranialisAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sensoris</Label>
+            <Field>
+              <Input
+                v-model="sensoris"
+                v-bind="sensorisAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reflek Fisilogis</Label>
+            <Field>
+              <Input
+                v-model="reflectFisio"
+                v-bind="reflectFisioAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Reflek Patologis</Label>
+            <Field>
+              <Input
+                v-model="reflectPato"
+                v-bind="reflectPatoAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Saraf Otonom</Label>
+            <Field>
+              <Input
+                v-model="otonom"
+                v-bind="otonomAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - ROM</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input
+                v-model="neckRom"
+                v-bind="neckRomAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input
+                v-model="bodyRom"
+                v-bind="bodyRomAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input
+                v-model="agaRom"
+                v-bind="agaRomAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input
+                v-model="agbRom"
+                v-bind="agbRomAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - MMT</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input
+                v-model="neckMmt"
+                v-bind="neckMmtAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input
+                v-model="bodyMmt"
+                v-bind="bodyMmtAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input
+                v-model="agaMmt"
+                v-bind="agaMmtAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input
+                v-model="agbMmt"
+                v-bind="agbMmtAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Statu Lokalis</span>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Deskripsi Temuan Fisik</Label>
+          <Field>
+            <Textarea
+              v-model="localis"
+              v-bind="localisAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Catatan Pemeriksaan Penunjang</Label>
+          <Field>
+            <Textarea
+              v-model="medicalTrial"
+              v-bind="medicalTrialAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Daftar Masalah</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Masalah Medik</Label>
+          <Field>
+            <Textarea
+              v-model="medicalTrouble"
+              v-bind="medicalTroubleAttrs"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Masalah Rehabilitasi Medik</Label>
+          <Field>
+            <Textarea
+              v-model="rehabTrouble"
+              v-bind="rehabTroubleAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+      </div>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <AppIcdPreview />
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Program Rehabilitasi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Modalitas Fisik</Label>
+            <Field>
+              <Textarea
+                v-model="physicModal"
+                v-bind="physicModalAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Latihan</Label>
+            <Field>
+              <Textarea
+                v-model="exercise"
+                v-bind="exerciseAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Ortesa Protesa</Label>
+            <Field>
+              <Textarea
+                v-model="orthoPesa"
+                v-bind="orthoPesaAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Edukasi</Label>
+            <Field>
+              <Textarea
+                v-model="education"
+                v-bind="educationAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Textarea
+                v-model="other"
+                v-bind="otherAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/soapi/entry.vue b/app/components/app/soapi/entry.vue
new file mode 100644
index 00000000..2ee2cefb
--- /dev/null
+++ b/app/components/app/soapi/entry.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import EarlyEntry from './early-entry.vue'
+import EarlyRehabEntry from './early-rehab-entry.vue'
+import FunctionEntry from './function-entry.vue'
+
+const props = defineProps<{
+  type: 'early' | 'early-rehab' | 'function'
+  excludeFields?: string[]
+}>()
+
+const emits = defineEmits(['click', 'submit', 'cancel'])
+
+const componentMap = {
+  early: EarlyEntry,
+  'early-rehab': EarlyRehabEntry,
+  function: FunctionEntry,
+}
+
+const ActiveComponent = computed(() => componentMap[props.type])
+
+const childRef = ref()
+
+const validate = async () => {
+  if (childRef.value?.validate) {
+    const result = await childRef.value.validate()
+    console.log('[Wrapper] Result from child validate:', result)
+    return result
+  } else {
+    console.warn('validate() not found in child component')
+    return { valid: false, data: null, errors: {} }
+  }
+}
+
+defineExpose({ validate })
+</script>
+
+<template>
+  <component
+    ref="childRef"
+    :is="ActiveComponent"
+    :exclude-fields="excludeFields"
+    @click="$emit('click', $event)"
+    @submit="$emit('submit', $event)"
+    @cancel="$emit('cancel', $event)"
+  />
+</template>
diff --git a/app/components/app/soapi/function-entry.vue b/app/components/app/soapi/function-entry.vue
new file mode 100644
index 00000000..3e192c47
--- /dev/null
+++ b/app/components/app/soapi/function-entry.vue
@@ -0,0 +1,658 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
+const [pastDisease, pastDiseaseAttrs] = defineField('past-disease')
+const [currentDisease, currentDiseaseAttrs] = defineField('current-disease')
+const [gcs, gcsAttrs] = defineField('gcs')
+const [respiratoryRate, respiratoryRateAttrs] = defineField('respiratory-rate')
+const [respiratoryRateType, respiratoryRateTypeAttrs] = defineField('respiratory-rate-type')
+const [pulse, pulseAttrs] = defineField('pulse')
+const [pulseType, pulseTypeAttrs] = defineField('pulse-type')
+const [rightArmBp, rightArmBpAttrs] = defineField('right-arm-bp')
+const [leftArmBp, leftArmBpAttrs] = defineField('left-arm-bp')
+const [axillaryTemp, axillaryTempAttrs] = defineField('axillary-temp')
+const [rektalTemp, rektalTempAttrs] = defineField('rektal-temp')
+const [skin, skinAttrs] = defineField('skin')
+const [head, headAttrs] = defineField('head')
+const [ear, earAttrs] = defineField('ear')
+const [nose, noseAttrs] = defineField('nose')
+const [oralCavity, oralCavityAttrs] = defineField('oral-cavity')
+const [eye, eyeAttrs] = defineField('eye')
+const [otherBodyPart, otherBodyPartAttrs] = defineField('other-body-part')
+const [neck, neckAttrs] = defineField('neck')
+const [thyroid, thyroidAttrs] = defineField('thyroid')
+const [thorax, thoraxAttrs] = defineField('thorax')
+const [heart, heartAttrs] = defineField('heart')
+const [lung, lungAttrs] = defineField('lung')
+const [abdomen, abdomenAttrs] = defineField('abdomen')
+const [heart2, heart2Attrs] = defineField('heart2')
+const [lien, lienAttrs] = defineField('lien')
+const [back, backAttrs] = defineField('back')
+const [extremity, extremityAttrs] = defineField('extremity')
+const [gender, genderAttrs] = defineField('gender')
+const [rectum, rectumAttrs] = defineField('rectum')
+const [systemSyaraf, systemSyarafAttrs] = defineField('system-syaraf')
+const [nervousSystem, nervousSystemAttrs] = defineField('nervous-system')
+const [cardioRespiratory, cardioRespiratoryAttrs] = defineField('cardio-respiratory')
+const [imaging, imagingAttrs] = defineField('imaging')
+const [laboratory, laboratoryAttrs] = defineField('laboratory')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+const disorders = ref<string[]>([])
+const therapies = ref<string[]>([])
+const summary = ref('')
+
+const disorderOptions = [
+  'Fungsi Otot',
+  'Fungsi Sendi',
+  'Fungsi Jalan',
+  'Fungsi Syaraf',
+  'Fungsi Koordinasi',
+  'Jantung',
+  'Fungsi Respirasi',
+  'Fungsi Menelan',
+  'Fungsi Bladder',
+  'Fungsi Bowel',
+  'Fungsi Luhur',
+  'Fungsi Kontrol Postur',
+  'Fungsi Eksekusi',
+  'Fungsi Ortosa/Protesa',
+  'Gangguan Aktivitas Sehari-hari',
+  'Lainnya',
+]
+
+const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <Cell>
+          <Label dynamic>Keluhan Utama</Label>
+          <Field :errMessage="errors['prim-compl']">
+            <Textarea
+              v-model="primaryComplaint"
+              v-bind="primaryComplaintAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Dahulu</Label>
+          <Field>
+            <Textarea
+              v-model="pastDisease"
+              v-bind="pastDiseaseAttrs"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Sekarang</Label>
+          <Field>
+            <Textarea
+              v-model="currentDisease"
+              v-bind="currentDiseaseAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Umum</Label>
+          <Field>
+            <Input placeholder="" />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Tanda Vital</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kesadaran (GCS)</Label>
+            <Field>
+              <Input
+                v-model="gcs"
+                v-bind="gcsAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Pernapasan</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRate"
+                v-bind="respiratoryRateAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input
+                v-model="respiratoryRateType"
+                v-bind="respiratoryRateTypeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input
+                v-model="pulse"
+                v-bind="pulseAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input
+                v-model="pulseType"
+                v-bind="pulseTypeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kanan</Label>
+            <Field>
+              <Input
+                v-model="rightArmBp"
+                v-bind="rightArmBpAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kiri</Label>
+            <Field>
+              <Input
+                v-model="leftArmBp"
+                v-bind="leftArmBpAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Suhu Aksila</Label>
+            <Field>
+              <Input
+                v-model="axillaryTemp"
+                v-bind="axillaryTempAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Suhu Rektal</Label>
+            <Field>
+              <Input
+                v-model="rektalTemp"
+                v-bind="rektalTempAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Badan</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kulit</Label>
+            <Field>
+              <Input
+                v-model="skin"
+                v-bind="skinAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Kepala</Label>
+            <Field>
+              <Input
+                v-model="head"
+                v-bind="headAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Telinga</Label>
+            <Field>
+              <Input
+                v-model="ear"
+                v-bind="earAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hidung</Label>
+            <Field>
+              <Input
+                v-model="nose"
+                v-bind="noseAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Rongga Mulut/Tenggorokan</Label>
+            <Field>
+              <Input
+                v-model="oralCavity"
+                v-bind="oralCavityAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Mata</Label>
+            <Field>
+              <Input
+                v-model="eye"
+                v-bind="eyeAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input
+                v-model="otherBodyPart"
+                v-bind="otherBodyPartAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input
+                v-model="neck"
+                v-bind="neckAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelenjar Tiroid</Label>
+            <Field>
+              <Input
+                v-model="thyroid"
+                v-bind="thyroidAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Thorax</Label>
+            <Field>
+              <Input
+                v-model="thorax"
+                v-bind="thoraxAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jantung</Label>
+            <Field>
+              <Input
+                v-model="heart"
+                v-bind="heartAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Paru-Paru</Label>
+            <Field>
+              <Input
+                v-model="lung"
+                v-bind="lungAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Abdomen</Label>
+            <Field>
+              <Input
+                v-model="abdomen"
+                v-bind="abdomenAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hati</Label>
+            <Field>
+              <Input
+                v-model="heart2"
+                v-bind="heart2Attrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lien</Label>
+            <Field>
+              <Input
+                v-model="lien"
+                v-bind="lienAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Punggung</Label>
+            <Field>
+              <Input
+                v-model="back"
+                v-bind="backAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Ekstremitas</Label>
+            <Field>
+              <Input
+                v-model="extremity"
+                v-bind="extremityAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelamin</Label>
+            <Field>
+              <Input
+                v-model="gender"
+                v-bind="genderAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Rectum</Label>
+            <Field>
+              <Input
+                v-model="rectum"
+                v-bind="rectumAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>System Syaraf</Label>
+            <Field>
+              <Input
+                v-model="nervousSystem"
+                v-bind="nervousSystemAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Neuromoskuloskeletal</Label>
+          <Field>
+            <Textarea
+              v-model="neuromoskuloskeletal"
+              v-bind="neuromoskuloskeletalAttrs"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Kardiorespirasi</Label>
+          <Field>
+            <Textarea
+              v-model="cardioRespiratory"
+              v-bind="cardioRespiratoryAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Pencitraan</Label>
+          <Field>
+            <Textarea
+              v-model="imaging"
+              v-bind="imagingAttrs"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Laboratorium</Label>
+          <Field>
+            <Textarea
+              v-model="laboratory"
+              v-bind="laboratoryAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+      </div>
+
+      <div class="space-y-8">
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Gangguan Fungsi</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in disorderOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="disorders"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+
+          <div class="mt-4 space-y-2">
+            <Label
+              for="summary"
+              class="font-medium"
+            >
+              Kesimpulan Didapatkan Gangguan Fungsi
+              <span class="text-red-500">*</span>
+            </Label>
+            <Textarea
+              id="summary"
+              v-model="summary"
+              placeholder="Masukkan kesimpulan gangguan fungsi"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- REKOMENDASI TERAPI -->
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Rekomendasi Terapi Tindakan Yang Diperlukan</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in therapyOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="therapies"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/soapi/list-cfg.ts b/app/components/app/soapi/list-cfg.ts
new file mode 100644
index 00000000..6fa11bda
--- /dev/null
+++ b/app/components/app/soapi/list-cfg.ts
@@ -0,0 +1,113 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date === 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date === 'string') {
+        return recX.birth_date.substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code !== 'undefined') {
+        return recX.education_code
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/soapi/list.vue b/app/components/app/soapi/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/soapi/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/soapi/picker.vue b/app/components/app/soapi/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/soapi/search.vue b/app/components/app/soapi/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/specialist-intern/entry-form.vue b/app/components/app/specialist-intern/entry-form.vue
new file mode 100644
index 00000000..aca8245b
--- /dev/null
+++ b/app/components/app/specialist-intern/entry-form.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+import { Form } from '~/components/pub/ui/form'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <!-- Specialist -->
+            <FieldGroup :column="2">
+              <Label label-for="specialist_id">Specialist</Label>
+              <Field id="specialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="specialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Subpecialist -->
+            <FieldGroup :column="2">
+              <Label label-for="subspecialist_id">Subspecialist</Label>
+              <Field id="subspecialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="subspecialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/specialist/entry-form-prev.vue b/app/components/app/specialist/entry-form-prev.vue
new file mode 100644
index 00000000..874a2c7d
--- /dev/null
+++ b/app/components/app/specialist/entry-form-prev.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+interface SpecialistFormData {
+  name: string
+  code: string
+  installationId: string
+  unitId: string
+}
+
+const props = defineProps<{
+  schema: any
+  initialValues?: Partial<SpecialistFormData>
+  errors?: FormErrors
+  installation: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  unit: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: SpecialistFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+  'installationChanged': [id: string]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: SpecialistFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    installationId: values.installationId || '',
+    unitId: values.unitId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+
+// Watch for installation changes
+function onInstallationChanged(installationId: string, setFieldValue: any) {
+  setFieldValue('unitId', '', false)
+  emit('installationChanged', installationId || '')
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm, values, setFieldValue }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
+            <Field id="name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name"
+                      type="text"
+                      placeholder="Masukkan nama spesialisasi"
+                      autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
+            <Field id="code" :errors="errors">
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="code"
+                      type="text"
+                      placeholder="Masukkan kode spesialisasi"
+                      autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="installationId">Instalasi</Label>
+            <Field id="installationId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="installationId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="installationId"
+                      v-bind="componentField"
+                      :items="installation.items"
+                      :placeholder="installation.msg.placeholder"
+                      :search-placeholder="installation.msg.search"
+                      :empty-message="installation.msg.empty"
+                      @update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="unitId">Unit</Label>
+            <Field id="unitId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="unitId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="unitId"
+                      :disabled="!values.installationId"
+                      v-bind="componentField"
+                      :items="unit.items"
+                      :placeholder="unit.msg.placeholder"
+                      :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/specialist/entry-form.vue b/app/components/app/specialist/entry-form.vue
new file mode 100644
index 00000000..70c0f294
--- /dev/null
+++ b/app/components/app/specialist/entry-form.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { SpecialistFormData } from '~/schemas/specialist.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  units: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: SpecialistFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    unit_id: 0,
+  } as Partial<SpecialistFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [unit, unitAttrs] = defineField('unit_id')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.unit_id !== undefined) unit.value = props.values.unit_id ? String(props.values.unit_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  unit.value = ''
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: SpecialistFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    unit_id: unit.value ? Number(unit.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-specialist"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Unit</Label>
+        <Field :errMessage="errors.unit">
+          <Combobox
+            id="unit"
+            v-model="unit"
+            v-bind="unitAttrs"
+            :items="units"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Unit"
+            search-placeholder="Cari unit"
+            empty-message="Unit tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/specialist/list-cfg.ts b/app/components/app/specialist/list-cfg.ts
new file mode 100644
index 00000000..8ed75f28
--- /dev/null
+++ b/app/components/app/specialist/list-cfg.ts
@@ -0,0 +1,49 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Unit' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'unit', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit_id || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/specialist/list.vue b/app/components/app/specialist/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/specialist/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/subspecialist/entry-form-prev.vue b/app/components/app/subspecialist/entry-form-prev.vue
new file mode 100644
index 00000000..a5a056a5
--- /dev/null
+++ b/app/components/app/subspecialist/entry-form-prev.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+interface SubSpecialistFormData {
+  name: string
+  code: string
+  installationId: string
+  unitId: string
+  specialistId: string
+}
+
+const props = defineProps<{
+  schema: any
+  initialValues?: Partial<SubSpecialistFormData>
+  errors?: FormErrors
+  installation: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  unit: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  specialist: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: SubSpecialistFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+  'installationChanged': [id: string]
+  'unitChanged': [id: string]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: SubSpecialistFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    installationId: values.installationId || '',
+    unitId: values.unitId || '',
+    specialistId: values.specialistId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+
+// Watch for installation changes
+function onInstallationChanged(installationId: string, setFieldValue: any) {
+  setFieldValue('unitId', '', false)
+  setFieldValue('specialistId', '', false)
+  emit('installationChanged', installationId || '')
+}
+
+function onUnitChanged(unitId: string, setFieldValue: any) {
+  setFieldValue('specialistId', '', false)
+  emit('unitChanged', unitId || '')
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{
+      handleSubmit,
+      resetForm,
+      values,
+     setFieldValue,
+    }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
+            <Field id="name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama spesialisasi" autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
+            <Field id="code" :errors="errors">
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="code" type="text" placeholder="Masukkan kode spesialisasi" autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="installationId">Instalasi</Label>
+            <Field id="installationId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="installationId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="installationId" v-bind="componentField" :items="installation.items"
+                      :placeholder="installation.msg.placeholder" :search-placeholder="installation.msg.search"
+                      :empty-message="installation.msg.empty"
+                      @update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="unitId">Unit</Label>
+            <Field id="unitId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="unitId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="unitId" :disabled="!values.installationId" v-bind="componentField" :items="unit.items"
+                      :placeholder="unit.msg.placeholder" :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                      @update:model-value="(value) => onUnitChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="specialistId">Specialist</Label>
+            <Field id="specialistId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="specialistId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="specialistId" :disabled="!values.unitId" v-bind="componentField" :items="specialist.items"
+                      :placeholder="specialist.msg.placeholder" :search-placeholder="specialist.msg.search"
+                      :empty-message="specialist.msg.empty"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/subspecialist/entry-form.vue b/app/components/app/subspecialist/entry-form.vue
new file mode 100644
index 00000000..8f176fb1
--- /dev/null
+++ b/app/components/app/subspecialist/entry-form.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { SubspecialistFormData } from '~/schemas/subspecialist.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialists: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: SubspecialistFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    specialist_id: 0,
+  } as Partial<SubspecialistFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [specialist, specialistAttrs] = defineField('specialist_id')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.specialist_id !== undefined)
+    specialist.value = props.values.specialist_id ? String(props.values.specialist_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  specialist.value = ''
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: SubspecialistFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    specialist_id: specialist.value ? Number(specialist.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-specialist"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Spesialis</Label>
+        <Field :errMessage="errors.specialist">
+          <Combobox
+            id="specialist"
+            v-model="specialist"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih spesialis"
+            search-placeholder="Cari spesialis"
+            empty-message="Spesialis tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/subspecialist/list-cfg.ts b/app/components/app/subspecialist/list-cfg.ts
new file mode 100644
index 00000000..7e9e7b79
--- /dev/null
+++ b/app/components/app/subspecialist/list-cfg.ts
@@ -0,0 +1,49 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Specialis' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'specialist', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist_id || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/subspecialist/list.vue b/app/components/app/subspecialist/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/subspecialist/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
new file mode 100644
index 00000000..13d2f6e0
--- /dev/null
+++ b/app/components/app/tools/entry-form.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Types
+import type { DeviceFormData } from '~/schemas/device.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  uoms: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DeviceFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    uom_code: '',
+    item_id: '',
+  } as Partial<DeviceFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [uom, uomAttrs] = defineField('uom_code')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  uom.value = ''
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: DeviceFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    uom_code: uom.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-tools"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-model="uom"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/tools/list-cfg.ts b/app/components/app/tools/list-cfg.ts
new file mode 100644
index 00000000..bdafd346
--- /dev/null
+++ b/app/components/app/tools/list-cfg.ts
@@ -0,0 +1,54 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    { width: 100 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Satuan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'uom_code', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.uom_code
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
new file mode 100644
index 00000000..e4544c2f
--- /dev/null
+++ b/app/components/app/tools/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/unit/entry-form-prev.vue b/app/components/app/unit/entry-form-prev.vue
new file mode 100644
index 00000000..06baecbb
--- /dev/null
+++ b/app/components/app/unit/entry-form-prev.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+interface UnitFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  unit: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<UnitFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: UnitFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: UnitFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
+            <Field id="name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama unit" autocomplete="off"
+                      v-bind="componentField"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
+            <Field id="code" :errors="errors">
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input id="code" type="text" placeholder="Masukkan kode unit" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="parentId">Instalasi</Label>
+            <Field id="parentId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="parentId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="parentId" v-bind="componentField" :items="unit.items"
+                      :placeholder="unit.msg.placeholder" :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
new file mode 100644
index 00000000..1b369695
--- /dev/null
+++ b/app/components/app/unit/entry-form.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { UnitFormData } from '~/schemas/unit.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  installations: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: UnitFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    installation_id: 0,
+  } as Partial<UnitFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [installation, installationAttrs] = defineField('installation_id')
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.installation_id !== undefined)
+    installation.value = props.values.installation_id ? Number(props.values.installation_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  installation.value = ''
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: UnitFormData = {
+    name: name.value || '',
+    code: code.value || '',
+    installation_id: installation.value ? Number(installation.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-unit"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Instalasi</Label>
+        <Field :errMessage="errors.installation">
+          <Combobox
+            id="installation"
+            v-model="installation"
+            v-bind="installationAttrs"
+            :items="installations"
+            :disabled="isLoading || isReadonly"
+            placeholder="Pilih Instalasi"
+            search-placeholder="Cari instalasi"
+            empty-message="Instalasi tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/unit/list-cfg.ts b/app/components/app/unit/list-cfg.ts
new file mode 100644
index 00000000..e3ab9b55
--- /dev/null
+++ b/app/components/app/unit/list-cfg.ts
@@ -0,0 +1,49 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Instalasi' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'installation', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    installation: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.installation?.name || recX.Installation?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/unit/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/uom/entry-form.vue b/app/components/app/uom/entry-form.vue
new file mode 100644
index 00000000..7289c825
--- /dev/null
+++ b/app/components/app/uom/entry-form.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Types
+import type { UomFormData } from '~/schemas/uom.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: UomFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-medicine-method"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/uom/list-cfg.ts b/app/components/app/uom/list-cfg.ts
new file mode 100644
index 00000000..a2d4e648
--- /dev/null
+++ b/app/components/app/uom/list-cfg.ts
@@ -0,0 +1,46 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/uom/list.vue b/app/components/app/uom/list.vue
new file mode 100644
index 00000000..618c70c1
--- /dev/null
+++ b/app/components/app/uom/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/user/entry-form.vue b/app/components/app/user/entry-form.vue
new file mode 100644
index 00000000..5e210a09
--- /dev/null
+++ b/app/components/app/user/entry-form.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/form/block.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Username</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Password</Label>
+            <Field>
+              <Input v-model="data.password" type="password" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/user/list-cfg.ts b/app/components/app/user/list-cfg.ts
new file mode 100644
index 00000000..f5ddf667
--- /dev/null
+++ b/app/components/app/user/list-cfg.ts
@@ -0,0 +1,103 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+    ],
+  ],
+
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      console.log(rec)
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    status: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/user/list.vue b/app/components/app/user/list.vue
new file mode 100644
index 00000000..96697bde
--- /dev/null
+++ b/app/components/app/user/list.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>
diff --git a/app/components/app/user/picker.vue b/app/components/app/user/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/user/search.vue b/app/components/app/user/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/warehouse/entry-form.vue b/app/components/app/warehouse/entry-form.vue
new file mode 100644
index 00000000..cc3256e0
--- /dev/null
+++ b/app/components/app/warehouse/entry-form.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  parents: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys.warehouse,
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id, parentIdAttrs] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys.warehouse
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.warehouse,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/warehouse/list-cfg.ts b/app/components/app/warehouse/list-cfg.ts
new file mode 100644
index 00000000..04ceca04
--- /dev/null
+++ b/app/components/app/warehouse/list-cfg.ts
@@ -0,0 +1,45 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Lantai' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'parent', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/warehouse/list.vue b/app/components/app/warehouse/list.vue
new file mode 100644
index 00000000..1be60a60
--- /dev/null
+++ b/app/components/app/warehouse/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/assesment-function/add.vue b/app/components/content/assesment-function/add.vue
new file mode 100644
index 00000000..128cf74a
--- /dev/null
+++ b/app/components/content/assesment-function/add.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>
diff --git a/app/components/content/assesment-function/list.vue b/app/components/content/assesment-function/list.vue
new file mode 100644
index 00000000..fcee9066
--- /dev/null
+++ b/app/components/content/assesment-function/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/assesment-function/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue
new file mode 100644
index 00000000..0e581ca9
--- /dev/null
+++ b/app/components/content/auth/login.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { z } from 'zod'
+
+const loginSchema = z.object({
+  name: z.string().min(3, 'Please enter a valid username'),
+  password: z.string().min(3, 'Password must be at least 3 characters'),
+})
+
+const { login } = useUserStore()
+
+type LoginFormData = z.infer<typeof loginSchema>
+
+const isLoading = ref(false)
+const apiErrors = ref<Record<string, string>>({})
+
+async function onSubmit(data: LoginFormData) {
+  isLoading.value = true
+
+  const result = await xfetch('/api/v1/authentication/login', 'POST', {
+    name: data.name,
+    password: data.password,
+  })
+
+  if (result.success) {
+    const { data: rawdata, meta } = result.body
+    if (meta.status === 'verified') {
+      await login(rawdata)
+      await navigateTo('/')
+    }
+  } else {
+    if (result.errors) {
+      Object.entries(result.errors).forEach(
+        ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
+      )
+    } else {
+      apiErrors.value.general = result.error?.message || result.message || 'Login failed'
+    }
+  }
+
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" />
+</template>
+
+<style scoped></style>
diff --git a/app/components/content/bed/list.vue b/app/components/content/bed/list.vue
new file mode 100644
index 00000000..e68f59c9
--- /dev/null
+++ b/app/components/content/bed/list.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppBedList from '~/components/app/bed/list.vue'
+import AppBedEntryForm from '~/components/app/bed/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.bed,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'bed',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kasur',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Kasur'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Kasur'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.chamber })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppBedList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Kasur'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppBedEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/building/list.vue b/app/components/content/building/list.vue
new file mode 100644
index 00000000..2c67a5ee
--- /dev/null
+++ b/app/components/content/building/list.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppBuildingList from '~/components/app/building/list.vue'
+import AppBuildingEntryForm from '~/components/app/building/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail } from '~/services/infra.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.building,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'building',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Gedung',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Gedung'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Gedung'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppBuildingList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Gedung'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppBuildingEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/chamber/list.vue b/app/components/content/chamber/list.vue
new file mode 100644
index 00000000..9b389a02
--- /dev/null
+++ b/app/components/content/chamber/list.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppChamberList from '~/components/app/chamber/list.vue'
+import AppChamberEntryForm from '~/components/app/chamber/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.chamber,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'chamber',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kamar',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Kamar'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Kamar'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.floor })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppChamberList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Kamar'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppChamberEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/consultation/list.vue b/app/components/content/consultation/list.vue
new file mode 100644
index 00000000..cfce5ae3
--- /dev/null
+++ b/app/components/content/consultation/list.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/consultation/list.vue'
+import Entry from '~/components/app/consultation/entry.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ConsultationSchema, type ConsultationFormData } from '~/schemas/consultation.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/consultation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/consultation.service'
+import { getValueLabelList } from '~/services/unit.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+
+let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({ 'encounter-id': props.encounter.id, includes: 'encounter,dstUnit', search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'consultation',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Konsultasi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = {
+        encounter_id: encounterId.value,
+        date: today.toISOString().slice(0, 10),
+        unit_id: 0,
+        problem: '',
+      }
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+const today = new Date()
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Konsultasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+  units.value = await getValueLabelList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="recItem?.id ? 'Edit Konsultasi' : 'Tambah Konsultasi'"
+    size="xl"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <Entry
+      :schema="ConsultationSchema"
+      :values="recItem"
+      :encounter_id="encounterId"
+      :units="units"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ConsultationFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMyList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMyList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/counter/list.vue b/app/components/content/counter/list.vue
new file mode 100644
index 00000000..e85c5df4
--- /dev/null
+++ b/app/components/content/counter/list.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppCounterList from '~/components/app/counter/list.vue'
+import AppCounterEntryForm from '~/components/app/counter/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail } from '~/services/infra.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.counter,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'counter',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Counter',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Counter'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Counter'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppCounterList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Counter'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppCounterEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/dashboard/index.vue b/app/components/content/dashboard/index.vue
new file mode 100644
index 00000000..c9780fcc
--- /dev/null
+++ b/app/components/content/dashboard/index.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+
+const dataCard = ref({
+  totalRevenue: 0,
+  totalRevenueDesc: 0,
+  subscriptions: 0,
+  subscriptionsDesc: 0,
+  sales: 0,
+  salesDesc: 0,
+  activeNow: 0,
+  activeNowDesc: 0,
+})
+
+const dataRecentSales = [
+  {
+    name: 'Olivia Martin',
+    email: 'olivia.martin@email.com',
+    amount: 1999,
+  },
+  {
+    name: 'Jackson Lee',
+    email: 'jackson.lee@email.com',
+    amount: 39,
+  },
+  {
+    name: 'Isabella Nguyen',
+    email: 'isabella.nguyen@email.com',
+    amount: 299,
+  },
+  {
+    name: 'William Kim',
+    email: 'will@email.com',
+    amount: 99,
+  },
+  {
+    name: 'Sofia Davis',
+    email: 'sofia.davis@email.com',
+    amount: 39,
+  },
+]
+
+const summaryData: any[] = [
+  {
+    title: 'Total Pasien Hari Ini',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Rehabilitasi Medik',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'VClaim BPJS',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'SATUSEHAT Sync',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+const linkItems = [
+  {
+    title: 'Daftar Pasien',
+    link: '/client/patient',
+    icon: 'i-lucide-users',
+  },
+  {
+    title: 'Rawat Jalan',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-stethoscope',
+  },
+  {
+    title: 'Rawat Inap',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-hospital',
+  },
+  {
+    title: 'Rehabilitasi',
+    link: '/client/patient',
+    icon: 'i-lucide-heart',
+  },
+]
+
+onMounted(() => {
+  dataCard.value = {
+    totalRevenue: 45231.89,
+    totalRevenueDesc: 20.1 / 100,
+    subscriptions: 2350,
+    subscriptionsDesc: 180.5 / 100,
+    sales: 12234,
+    salesDesc: 45 / 100,
+    activeNow: 573,
+    activeNowDesc: 201,
+  }
+})
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
+      <h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
+      <div class="flex items-center gap-4 space-x-2">
+        <div class="rounded-xl border bg-primary p-1 text-white">Status: Aktif</div>
+        <Button class="bg-primary p-2 text-white" size="lg">
+          <Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
+          Sinkronisasi
+        </Button>
+      </div>
+    </div>
+    <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
+      <div class="dashboard-grid">
+        <PubMyUiSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </div>
+      <div class="dashboard-grid">
+        <Card v-for="n in 3" :key="n">
+          <CardHeader>
+            <CardTitle>Recent Sales</CardTitle>
+          </CardHeader>
+          <CardContent class="grid gap-8">
+            <div v-for="recentSales in dataRecentSales" :key="recentSales.name" class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarFallback>{{
+                  recentSales.name
+                    .split(' ')
+                    .map((n) => n[0])
+                    .join('')
+                }}</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1 min-w-0">
+                <p class="text-sm font-medium leading-none truncate">
+                  {{ recentSales.name }}
+                </p>
+                <p class="text-sm text-muted-foreground truncate">
+                  {{ recentSales.email }}
+                </p>
+              </div>
+              <div class="ml-auto font-medium"></div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      <div>
+        <Card>
+          <CardHeader>
+            <div class="flex flex-wrap items-center gap-2">
+              <Icon name="i-lucide-activity" class="me-2 h-6 w-6 text-primary" />
+              <h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
+            </div>
+          </CardHeader>
+          <CardContent class="grid cursor-pointer gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-5">
+            <Card
+              v-for="item in linkItems"
+              :key="item.title"
+              class="my-2 h-32 border border-primary transition-colors duration-200 hover:bg-gray-200 hover:bg-primary"
+            >
+              <NuxtLink :to="item.link">
+                <CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
+                  <Icon :name="item.icon" class="h-9 w-[60px] text-primary" />
+                  <h1>{{ item.title }}</h1>
+                </CardContent>
+              </NuxtLink>
+            </Card>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/app/components/content/device-order/entry.vue b/app/components/content/device-order/entry.vue
new file mode 100644
index 00000000..6d76d685
--- /dev/null
+++ b/app/components/content/device-order/entry.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+
+import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Tambah Order Alkes',
+  icon: 'i-lucide-box',
+}
+
+  function navClick(type: 'cancel' | 'submit') {
+    if (type === 'cancel') {
+      backToList()
+    }
+  }
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <ItemListEntry />
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/content/device-order/list.vue b/app/components/content/device-order/list.vue
new file mode 100644
index 00000000..e62a2fbd
--- /dev/null
+++ b/app/components/content/device-order/list.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/device-order/list.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+// import { useQueryMode } from '~/composables/useQueryMode'
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type DeviceOrderFormData, DeviceOrderSchema  } from '~/schemas/device-order.schema'
+import type { DeviceOrder } from "~/models/device-order";
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device-order.handler'
+
+// Services
+import { getList } from '~/services/device-order.service'
+
+const route = useRoute()
+const title = ref('')
+
+// const { mode, openForm, backToList } = useQueryMode()
+const { mode, goToEntry, backToList } = useQueryCRUDMode()
+const { recordId } = useQueryCRUDRecordId()
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'parent,childrens',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device-order',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Alkes',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: async () => {
+      recItem.value = null
+      recId.value = 0
+      isReadonly.value = false
+      // await handleActionSave(recItem, getMyList, () => {}, () => {})
+      goToEntry()
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/device-order/main.vue b/app/components/content/device-order/main.vue
new file mode 100644
index 00000000..ae5a9ca8
--- /dev/null
+++ b/app/components/content/device-order/main.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const { mode } = useQueryMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" />
+  <Entry v-else />
+</template>
diff --git a/app/components/content/diagnose-src/list.vue b/app/components/content/diagnose-src/list.vue
new file mode 100644
index 00000000..2b056697
--- /dev/null
+++ b/app/components/content/diagnose-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/diagnose-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DiagnoseSrcSchema, type DiagnoseSrcFormData } from '~/schemas/diagnose-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/diagnose-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/diagnose-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'diagnose-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Diagnosis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Diagnosis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Diagnosis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppDiagnoseSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Diagnosis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDiagnoseSrcEntryForm
+      :schema="DiagnoseSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DiagnoseSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
new file mode 100644
index 00000000..019e64a9
--- /dev/null
+++ b/app/components/content/division-position/list.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppDivisionPositionList from '~/components/app/division-position/list.vue'
+import AppDivisionPositionEntryForm from '~/components/app/division-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DivisionPositionSchema, type DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/division-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/division-position.service'
+import { getValueLabelList as getDivisionLabelList } from '~/services/division.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const divisions = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'division',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDivisionDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Detail Divisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Edit Divisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+  employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+  await getDivisionList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppDivisionPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Divisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDivisionPositionEntryForm
+      :schema="DivisionPositionSchema"
+      :divisions="divisions"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DivisionPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getDivisionList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getDivisionList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDivisionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/division/entry.ts b/app/components/content/division/entry.ts
new file mode 100644
index 00000000..9f3cb9f4
--- /dev/null
+++ b/app/components/content/division/entry.ts
@@ -0,0 +1,145 @@
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+import * as z from 'zod'
+
+export const divisionConf = {
+  msg: {
+    placeholder: '---pilih divisi utama',
+    search: 'kode, nama divisi',
+    empty: 'divisi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Medical' },
+    { value: '2', label: 'Nursing' },
+    { value: '3', label: 'Admin' },
+    { value: '4', label: 'Support' },
+    { value: '5', label: 'Education' },
+    { value: '6', label: 'Pharmacy' },
+    { value: '7', label: 'Radiology' },
+    { value: '8', label: 'Laboratory' },
+    { value: '9', label: 'Finance' },
+    { value: '10', label: 'Human Resources' },
+    { value: '11', label: 'IT Services' },
+    { value: '12', label: 'Maintenance' },
+    { value: '13', label: 'Catering' },
+    { value: '14', label: 'Security' },
+    { value: '15', label: 'Emergency' },
+    { value: '16', label: 'Surgery' },
+    { value: '17', label: 'Outpatient' },
+    { value: '18', label: 'Inpatient' },
+    { value: '19', label: 'Rehabilitation' },
+    { value: '20', label: 'Research' },
+  ],
+}
+
+export const schema = z.object({
+  name: z
+    .string({
+      required_error: 'Nama wajib diisi',
+    })
+    .min(1, 'Nama divisi wajib diisi'),
+
+  code: z
+    .string({
+      required_error: 'Kode wajib diisi',
+    })
+    .min(1, 'Kode divisi wajib diisi'),
+
+  parentId: z.string().optional(),
+})
+
+// State untuk tree data divisi - dimulai dengan data level atas
+const divisionTreeData = ref<TreeItem[]>([
+  { value: '1', label: 'Medical', hasChildren: true },
+  { value: '2', label: 'Nursing', hasChildren: true },
+  { value: '3', label: 'Admin', hasChildren: false },
+  { value: '4', label: 'Support', hasChildren: true },
+  { value: '5', label: 'Education', hasChildren: false },
+  { value: '6', label: 'Pharmacy', hasChildren: true },
+  { value: '7', label: 'Radiology', hasChildren: false },
+  { value: '8', label: 'Laboratory', hasChildren: true },
+])
+
+// Helper function untuk mencari dan menyisipkan data anak ke dalam tree
+function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]): boolean {
+  for (const node of nodes) {
+    if (node.value === parentId) {
+      node.children = newChildren
+      return true
+    }
+    if (node.children && findAndInsertChildren(node.children as TreeItem[], parentId, newChildren)) {
+      return true
+    }
+  }
+  return false
+}
+
+// Fungsi untuk fetch data anak divisi (lazy loading)
+async function handleFetchDivisionChildren(parentId: string): Promise<void> {
+  console.log(`Mengambil data sub-divisi untuk parent: ${parentId}`)
+
+  // Simulasi delay API call
+  await new Promise((resolve) => setTimeout(resolve, 800))
+
+  let childrenData: TreeItem[] = []
+
+  // Sample data berdasarkan parent ID
+  switch (parentId) {
+    case '1': // Medical
+      childrenData = [
+        { value: '1-1', label: 'Cardiology', hasChildren: true },
+        { value: '1-2', label: 'Neurology', hasChildren: false },
+        { value: '1-3', label: 'Oncology', hasChildren: false },
+      ]
+      break
+    case '2': // Nursing
+      childrenData = [
+        { value: '2-1', label: 'ICU Nursing', hasChildren: false },
+        { value: '2-2', label: 'ER Nursing', hasChildren: false },
+        { value: '2-3', label: 'Ward Nursing', hasChildren: true },
+      ]
+      break
+    case '4': // Support
+      childrenData = [
+        { value: '4-1', label: 'IT Support', hasChildren: false },
+        { value: '4-2', label: 'Maintenance', hasChildren: false },
+      ]
+      break
+    case '6': // Pharmacy
+      childrenData = [
+        { value: '6-1', label: 'Inpatient Pharmacy', hasChildren: false },
+        { value: '6-2', label: 'Outpatient Pharmacy', hasChildren: false },
+      ]
+      break
+    case '8': // Laboratory
+      childrenData = [
+        { value: '8-1', label: 'Clinical Lab', hasChildren: false },
+        { value: '8-2', label: 'Pathology Lab', hasChildren: false },
+      ]
+      break
+    case '1-1': // Cardiology sub-divisions
+      childrenData = [
+        { value: '1-1-1', label: 'Cardiac Surgery', hasChildren: false },
+        { value: '1-1-2', label: 'Cardiac Cathlab', hasChildren: false },
+      ]
+      break
+    case '2-3': // Ward Nursing sub-divisions
+      childrenData = [
+        { value: '2-3-1', label: 'Pediatric Ward', hasChildren: false },
+        { value: '2-3-2', label: 'Surgical Ward', hasChildren: false },
+      ]
+      break
+  }
+
+  // Insert data ke dalam tree state
+  findAndInsertChildren(divisionTreeData.value, parentId, childrenData)
+}
+
+export const divisionTreeConfig = computed(() => ({
+  msg: {
+    placeholder: '--- Pilih divisi induk',
+    search: 'Cari divisi...',
+    empty: 'Divisi tidak ditemukan',
+  },
+  data: divisionTreeData.value,
+  onFetchChildren: handleFetchDivisionChildren,
+}))
diff --git a/app/components/content/division/list-prev.vue b/app/components/content/division/list-prev.vue
new file mode 100644
index 00000000..d072ac9a
--- /dev/null
+++ b/app/components/content/division/list-prev.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppDivisionEntryForm from '~/components/app/division/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { divisionConf, divisionTreeConfig, schema } from './entry'
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+async function fetchDivisionData(_params: any) {
+  const endpoint = '/api/v1/_dev/division/list'
+  return await xfetch(endpoint)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionList,
+} = usePaginatedList({
+  fetchFn: fetchDivisionData,
+  entityName: 'division',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Divisi',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/division/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getDivisionList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/division', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getDivisionList()
+
+    // TODO: Show success message
+    console.log('Division created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
+
+    <AppDivisionEntryFormPrev
+      :division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
+      :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
+    />
+
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+    >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
new file mode 100644
index 00000000..9ccefc56
--- /dev/null
+++ b/app/components/content/division/list.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppDivisionList from '~/components/app/division/list.vue'
+import AppDivisionEntryForm from '~/components/app/division/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
+import type { Division } from "~/models/division"
+import type { TreeItem } from '~/models/_base'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/division.handler'
+
+// Services
+import { getList, getDetail, getValueTreeItems } from '~/services/division.service'
+
+const divisionsTrees = ref<TreeItem[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'parent,childrens',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'division',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDivisionDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Detail Divisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Edit Divisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch(
+  () => data.value,
+  async () => {
+    if (!data.value) return
+    const result = await getList({
+      'page-size': 100,
+      'only-have-children': false,
+      includes: 'parent,childrens',
+    })
+    if (result.success) {
+      const currentData = result.body.data || []
+      const normalizedData = currentData.filter((division: Division) => !division.parent_id)
+      divisionsTrees.value = getValueTreeItems(normalizedData)
+    }
+  },
+)
+
+onMounted(async () => {
+  await getDivisionList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppDivisionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Divisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDivisionEntryForm
+      :schema="DivisionSchema"
+      :divisions="divisionsTrees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DivisionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getDivisionList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getDivisionList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDivisionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/employee/entry.vue b/app/components/content/employee/entry.vue
new file mode 100644
index 00000000..8dd6c48a
--- /dev/null
+++ b/app/components/content/employee/entry.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: 'doctor',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/employee')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+  { value: 'nutritionist', label: 'Ahli Gizi' },
+  { value: 'laborant', label: 'Laboran' },
+  { value: 'pharmacy', label: 'Farmasi' },
+  { value: 'payment', label: 'Pembayaran' },
+  { value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
+  { value: 'management', label: 'Management' },
+]
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Karyawan
+  </div>
+
+  <AppEmployeeEntryForm v-model="data" :items="items" />
+
+  <AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonAddressEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonContactEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonRelativeEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+
+  <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+  <AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
+  <AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
+  <AppLaborantEntryForm v-else-if="data.type === 'laborant'" v-model="data" />
+  <AppNutritionistEntryForm v-else-if="data.type === 'nutritionist'" v-model="data" />
+
+  <AppUserEntryForm v-model="data" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/content/employee/list.vue b/app/components/content/employee/list.vue
new file mode 100644
index 00000000..d9ce6fc0
--- /dev/null
+++ b/app/components/content/employee/list.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'User',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/human-src/employee/add'),
+  },
+}
+
+async function getDoctorList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/doctor')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getDoctorList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+</template>
diff --git a/app/components/content/encounter/assesment-function/add.vue b/app/components/content/encounter/assesment-function/add.vue
new file mode 100644
index 00000000..128cf74a
--- /dev/null
+++ b/app/components/content/encounter/assesment-function/add.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>
diff --git a/app/components/content/encounter/assesment-function/list.vue b/app/components/content/encounter/assesment-function/list.vue
new file mode 100644
index 00000000..48d50bc9
--- /dev/null
+++ b/app/components/content/encounter/assesment-function/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/encounter/assesment-function/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/encounter/entry.vue b/app/components/content/encounter/entry.vue
new file mode 100644
index 00000000..9e6b19f7
--- /dev/null
+++ b/app/components/content/encounter/entry.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const props = defineProps<{
+  id: number
+  formType: string
+}>()
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function onClick(e: 'search' | 'add') {
+  console.log('click', e)
+  if (e === 'search') {
+    isOpen.value = true
+  } else if (e === 'add') {
+    navigateTo('/client/patient/add')
+  }
+}
+
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">{{ props.formType }}</span> Kunjungan
+  </div>
+  <AppEncounterEntryForm @click="onClick" />
+  <AppSepSmallEntry v-if="props.id" />
+
+  <Dialog v-model:open="isOpen" title="Cari Pasien" size="xl" prevent-outside>
+    <AppPatientPicker :data="data" />
+  </Dialog>
+</template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
new file mode 100644
index 00000000..76f32415
--- /dev/null
+++ b/app/components/content/encounter/list.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+
+const props = defineProps<{
+  type: string
+}>()
+
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isFormEntryDialogOpen = ref(false)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Kunjungan',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/encounter/add'),
+  },
+}
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+    isFormEntryDialogOpen.value = true
+    console.log(' 1open filter modal')
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/encounter?includes=patient,patient-person')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+watch(
+  () => recAction.value,
+  () => {
+    console.log('recAction.value', recAction.value)
+    if (props.type === 'encounter') {
+      if (recAction.value === 'showDetail') {
+        navigateTo(`/rehab/encounter/${recId.value}/detail`)
+      } else if (recAction.value === 'showEdit') {
+        navigateTo(`/rehab/encounter/${recId.value}/edit`)
+      } else if (recAction.value === 'showProcess') {
+        navigateTo(`/rehab/encounter/${recId.value}/process`)
+      } else {
+        // handle other actions
+      }
+    } else if (props.type === 'registration') {
+      if (recAction.value === 'showDetail') {
+        navigateTo(`/rehab/registration/${recId.value}/detail`)
+      } else if (recAction.value === 'showEdit') {
+        navigateTo(`/rehab/registration/${recId.value}/edit`)
+      } else if (recAction.value === 'showProcess') {
+        navigateTo(`/rehab/registration/${recId.value}/process`)
+      } else {
+        // handle other actions
+      }
+    }
+  },
+)
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header
+    :prep="{ ...hreaderPrep }"
+    :ref-search-nav="refSearchNav"
+  />
+  <Separator class="my-4 xl:my-5" />
+
+  <Filter :ref-search-nav="refSearchNav" />
+
+  <AppEncounterList :data="data" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    title="Filter"
+    size="lg"
+    prevent-outside
+  >
+    <AppEncounterFilter />
+  </Dialog>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
new file mode 100644
index 00000000..71c7fe3d
--- /dev/null
+++ b/app/components/content/encounter/process.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+//
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { getDetail } from '~/services/encounter.service'
+
+//
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+
+// PLASE ORDER BY TAB POSITION
+import Status from '~/components/content/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
+import Consultation from '~/components/content/consultation/list.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
+  },
+})
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const dataRes = await getDetail(id, {
+  includes:
+    'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
+})
+const dataResBody = dataRes.body ?? null
+const data = dataResBody?.data ?? null
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    component: EarlyMedicalRehabList,
+  },
+  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'patient-note', label: 'CPRJ' },
+  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+]
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    </div>
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
+  </div>
+</template>
diff --git a/app/components/content/encounter/status.vue b/app/components/content/encounter/status.vue
new file mode 100644
index 00000000..513a7ab5
--- /dev/null
+++ b/app/components/content/encounter/status.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+//
+import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
+import { getValueLabelList as getEmployeeValueLabelList } from '~/services/employee.service'
+import { getValueLabelList as getUnitValueLabelList } from '~/services/unit.service'
+import type { CheckInFormData, CheckOutFormData } from '~/schemas/encounter.schema'
+import { CheckInSchema, CheckOutSchema } from '~/schemas/encounter.schema'
+
+//
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import CheckInView from '~/components/app/encounter/check-in-view.vue'
+import CheckInEntry from '~/components/app/encounter/check-in-entry.vue'
+import CheckOutView from '~/components/app/encounter/check-out-view.vue'
+import CheckOutEntry from '~/components/app/encounter/check-out-entry.vue'
+import type { Encounter } from '~/models/encounter'
+import { checkIn } from '~/services/encounter.service'
+
+//
+const props = defineProps<{
+  encounter: Encounter
+}>()
+
+// doctors
+const doctors = await getDoctorValueLabelList({'includes': 'employee,employee-person'})
+const employees = await getEmployeeValueLabelList({'includes': 'person', 'position-code': 'reg'})
+const units = await getUnitValueLabelList()
+
+// check in
+const checkInValues = ref<any>({
+  discharge_method_code: '',
+  responsible_doctor_id: 0,
+  // registeredAt: '',
+})
+const checkInIsLoading = ref(false)
+const checkInIsReadonly = ref(false)
+const checkInDialogOpen = ref(false)
+
+// check out
+const checkOutValues = ref<any>({
+  dischargeMethod_code: '',
+  unit_id: 0,
+  responsibleDoctor_id: 0,
+})
+const checkOutIsLoading = ref(false)
+const checkOutIsReadonly = ref(false)
+const checkOutDialogOpen = ref(false)
+
+function editCheckIn() {
+  checkInDialogOpen.value = true
+}
+
+function submitCheckIn(values: CheckInFormData) {
+  checkIn(props.encounter.id, values)
+}
+
+function editCheckOut() {
+  checkOutDialogOpen.value = true
+}
+
+function submitCheckOut(values: CheckOutFormData) {
+  console.log(values)
+}
+</script>
+
+<template>
+  <div class="lg:grid grid-cols-2">
+    <div class="border-r lg:pe-4 xl:pe-5 mb-10">
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Masuk</div>
+      <CheckInView
+        :encounter="encounter"
+        :is-loading="checkInIsLoading"
+        :is-readonly="checkInIsReadonly"
+        @edit="editCheckIn"
+      />
+    </div>
+    <div class="lg:ps-4 xl:ps-5">
+      <Separator class="lg:hidden my-4 xl:my-5" />
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Keluar</div>
+      <CheckOutView
+        :encounter="encounter"
+        :is-loading="checkOutIsLoading"
+        :is-readonly="checkOutIsReadonly"
+        @edit="editCheckOut"
+      />
+    </div>
+  </div>
+
+  <Dialog
+    v-model:open="checkInDialogOpen"
+    title="Ubah Informasi Masuk"
+    size="md"
+    prevent-outside
+  >
+    <CheckInEntry
+      :schema="CheckInSchema"
+      :values="checkInValues"
+      :encounter="encounter"
+      :doctors="doctors"
+      :employees="employees"
+      :is-loading="checkInIsLoading"
+      :is-readonly="checkInIsReadonly"
+      @submit="submitCheckIn"
+      @cancel="checkInDialogOpen = false"
+    />
+  </Dialog>
+
+  <Dialog
+    v-model:open="checkOutDialogOpen"
+    title="Ubah Informasi Keluar"
+    size="lg"
+    prevent-outside
+  >
+    <CheckOutEntry
+      :schema="CheckOutSchema"
+      :values="checkOutValues"
+      :encounter="encounter"
+      :units="units"
+      :doctors="doctors"
+      :is-loading="checkInIsLoading"
+      :is-readonly="checkInIsReadonly"
+      @submit="submitCheckOut"
+      @cancel="checkInDialogOpen = false"
+    />
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
new file mode 100644
index 00000000..19e5d913
--- /dev/null
+++ b/app/components/content/equipment/list.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppEquipmentList from '~/components/app/equipment/list.vue'
+import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/material.handler'
+
+// Services
+import { getList, getDetail } from '~/services/material.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const uoms = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getEquipmentList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'equipment',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Perlengkapan (BMHP)',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Perlengkapan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMaterialDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Detail Perlengkapan'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Edit Perlengkapan'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  uoms.value = await getUomList()
+  await getEquipmentList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppEquipmentList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Perlengkapan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppEquipmentEntryForm
+      :schema="MaterialSchema"
+      :values="recItem"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MaterialFormData, resetForm: any) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getEquipmentList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getEquipmentList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getEquipmentList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/floor/list.vue b/app/components/content/floor/list.vue
new file mode 100644
index 00000000..1b91af9d
--- /dev/null
+++ b/app/components/content/floor/list.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppFloorList from '~/components/app/floor/list.vue'
+import AppFloorEntryForm from '~/components/app/floor/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.floor,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'floor',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Lantai',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Lantai'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Lantai'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.building })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppFloorList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Lantai'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppFloorEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/installation/entry.ts b/app/components/content/installation/entry.ts
new file mode 100644
index 00000000..c003a029
--- /dev/null
+++ b/app/components/content/installation/entry.ts
@@ -0,0 +1,37 @@
+import * as z from 'zod'
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih encounter class (fhir7)',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+    { value: '4', label: 'Observation', code: 'OBSENC' },
+    { value: '5', label: 'Pre-admission', code: 'PRENC' },
+    { value: '6', label: 'Short Stay', code: 'SS' },
+    { value: '7', label: 'Virtual', code: 'VR' },
+    { value: '8', label: 'Home Health', code: 'HH' },
+  ],
+}
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama instalasi harus diisi',
+    })
+    .min(3, 'Nama instalasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode instalasi harus diisi',
+    })
+    .min(3, 'Kode instalasi minimal 3 karakter'),
+
+  encounterClassCode: z
+    .string({
+      required_error: 'Kelompok encounter class harus dipilih',
+    })
+    .min(1, 'Kelompok encounter class harus dipilih'),
+})
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
new file mode 100644
index 00000000..31486097
--- /dev/null
+++ b/app/components/content/installation/list.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppInstallationList from '~/components/app/installation/list.vue'
+import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InstallationSchema, type InstallationFormData } from '~/schemas/installation.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/installation.service'
+import { getValueLabelListConstants as getEncounterList } from '~/services/encounter.service'
+
+const encounterClasses = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'installation',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Instalasi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentInstallationDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Detail Instalasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Edit Instalasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  encounterClasses.value = getEncounterList()
+  await getInstallationList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppInstallationList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Instalasi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppInstallationEntryForm
+      :schema="InstallationSchema"
+      :encounter-classes="encounterClasses"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getInstallationList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
new file mode 100644
index 00000000..aa277b71
--- /dev/null
+++ b/app/components/content/item-price/list.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Modal from '~/components/pub/my-ui/modal/modal.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const data = ref([])
+const entry = ref<any>({})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+
+const isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Golongan Obat',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/medicine-group')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+
+  <AppMedicineGroupList :data="data" />
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
+    <AppMedicineGroupEntryForm v-model="entry" />
+  </Modal>
+</template>
diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
new file mode 100644
index 00000000..15887985
--- /dev/null
+++ b/app/components/content/item/list.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Modal from '~/components/pub/my-ui/modal/modal.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const data = ref([])
+const entry = ref<any>({})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+
+const isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Item',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/medicine-group')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+
+  <AppItemList :data="data" />
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
+    <AppItemEntryForm v-model="entry" />
+  </Modal>
+</template>
diff --git a/app/components/content/medical-action-src/list.vue b/app/components/content/medical-action-src/list.vue
new file mode 100644
index 00000000..c39ff4b8
--- /dev/null
+++ b/app/components/content/medical-action-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/medical-action-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MedicalActionSrcSchema, type MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medical-action-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medical-action-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medical-action-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar Aksi Medis',
+  icon: 'i-lucide-microscope',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Aksi Medis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Aksi Medis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicalActionSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Aksi Medis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicalActionSrcEntryForm
+      :schema="MedicalActionSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicalActionSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
new file mode 100644
index 00000000..80faf1ab
--- /dev/null
+++ b/app/components/content/medicine-group/list.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppMedicineGroupList from '~/components/app/medicine-group/list.vue'
+import AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { BaseSchema, type BaseFormData } from '~/schemas/base.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-group.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medicine-group.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineGroupList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-group',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kelompok Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMedicineGroupDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Detail Kelompok Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Edit Kelompok Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineGroupList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppMedicineGroupList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Kelompok Obat'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicineGroupEntryForm
+      :schema="BaseSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: BaseFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMedicineGroupList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
new file mode 100644
index 00000000..9e0e5d01
--- /dev/null
+++ b/app/components/content/medicine-method/list.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppMedicineMethodList from '~/components/app/medicine-method/list.vue'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { BaseSchema, type BaseFormData } from '~/schemas/base.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medicine-method.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineMethodList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-method',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Metode Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMedicineMethodDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Detail Metode Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Edit Metode Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineMethodList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppMedicineMethodList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Metode Obat'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicineMethodEntryForm
+      :schema="BaseSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: BaseFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMedicineMethodList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/medicine/entry.vue b/app/components/content/medicine/entry.vue
new file mode 100644
index 00000000..3c3b4cfd
--- /dev/null
+++ b/app/components/content/medicine/entry.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Obat
+  </div>
+  <AppMedicineEntryForm v-model="data" />
+</template>
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
new file mode 100644
index 00000000..27470776
--- /dev/null
+++ b/app/components/content/medicine/list.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppMedicineList from '~/components/app/medicine/list.vue'
+import AppMedicineEntryForm from '~/components/app/medicine/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MedicineSchema, type MedicineFormData } from '~/schemas/medicine.schema'
+import type { MedicineGroup } from '~/models/medicine-group'
+import type { MedicineMethod } from '~/models/medicine-method'
+import type { Uom } from '~/models/uom'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medicine.service'
+import { getValueLabelList as getMedicineGroupList } from '~/services/medicine-group.service'
+import { getValueLabelList as getMedicineMethodList } from '~/services/medicine-method.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const medicineGroups = ref<{ value: string; label: string }[]>([])
+const medicineMethods = ref<{ value: string; label: string }[]>([])
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'medicineGroup,medicineMethod,uom',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMedicineDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineDetail(recId.value)
+      title.value = 'Detail Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineDetail(recId.value)
+      title.value = 'Edit Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  medicineGroups.value = await getMedicineGroupList({ sort: 'createdAt:asc', 'page-size': 100 })
+  medicineMethods.value = await getMedicineMethodList({ sort: 'createdAt:asc', 'page-size': 100 })
+  uoms.value = await getUomList({ sort: 'createdAt:asc', 'page-size': 100 })
+  await getMedicineList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppMedicineList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Obat'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppMedicineEntryForm
+      :schema="MedicineSchema"
+      :values="recItem"
+      :medicineGroups="medicineGroups"
+      :medicineMethods="medicineMethods"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicineFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMedicineList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/patient/add.vue b/app/components/content/patient/add.vue
new file mode 100644
index 00000000..fd42e0a6
--- /dev/null
+++ b/app/components/content/patient/add.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Pasien
+  </div>
+  <AppPatientEntryForm />
+</template>
diff --git a/app/components/content/patient/detail.vue b/app/components/content/patient/detail.vue
new file mode 100644
index 00000000..da9b2809
--- /dev/null
+++ b/app/components/content/patient/detail.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { Patient } from '~/models/patient'
+import type { Person } from '~/models/person'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { getPatientDetail } from '~/services/patient.service'
+
+// #region Props & Emits
+const props = defineProps<{
+  patientId: number
+}>()
+
+// #endregion
+
+// #region State & Computed
+const patient = ref(
+  withBase<Patient>({
+    person: {} as Person,
+    personAddresses: [],
+    personContacts: [],
+    personRelatives: [],
+  }),
+)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Pasien',
+  icon: 'i-lucide-user',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  // await getPatientDetail()
+  const result = await getPatientDetail(props.patientId)
+  if (result.success) {
+    patient.value = result.body.data || {}
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      console.log('editing data')
+      break
+
+    case 'cancel':
+      navigateTo({
+        name: 'client-patient',
+      })
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppPatientPreview
+    :patient="patient"
+    @click="handleAction"
+  />
+</template>
diff --git a/app/components/content/patient/entry.vue b/app/components/content/patient/entry.vue
new file mode 100644
index 00000000..2eed6df5
--- /dev/null
+++ b/app/components/content/patient/entry.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import type { Patient, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleCancelForm,
+} from '~/handlers/patient.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+const residentIdentityFile = ref<File>()
+const familyCardFile = ref<File>()
+
+// form related state
+const personAddressForm = ref<ExposedForm<any> | null>(null)
+const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
+const personContactForm = ref<ExposedForm<any> | null>(null)
+const personEmergencyContactRelative = ref<ExposedForm<any> | null>(null)
+const personFamilyForm = ref<ExposedForm<any> | null>(null)
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // Initial synchronization when forms are mounted and isSameAddress is true by default
+  nextTick(() => {
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value
+    ) {
+      const currentAddressValues = personAddressForm.value.values
+      if (Object.keys(currentAddressValues).length > 0) {
+        personAddressRelativeForm.value.setValues(
+          {
+            ...personAddressRelativeForm.value.values,
+            province_code: currentAddressValues.province_code || undefined,
+            regency_code: currentAddressValues.regency_code || undefined,
+            district_code: currentAddressValues.district_code || undefined,
+            village_code: currentAddressValues.village_code || undefined,
+            postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+            address: currentAddressValues.address || undefined,
+            rt: currentAddressValues.rt || undefined,
+            rw: currentAddressValues.rw || undefined,
+          },
+          false,
+        )
+      }
+    }
+  })
+})
+// #endregion
+
+// #region Functions
+async function composeFormData(): Promise<Patient> {
+  const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
+    personPatientForm.value?.validate(),
+    personAddressForm.value?.validate(),
+    personAddressRelativeForm.value?.validate(),
+    personFamilyForm.value?.validate(),
+    personContactForm.value?.validate(),
+    personEmergencyContactRelative.value?.validate(),
+  ])
+
+  const results = [patient, address, addressRelative, families, contacts, emergencyContact]
+  console.log(results)
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  // for example: dropdown not selected
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formDataRequest: genPatientProps = {
+    patient: patient?.values,
+    residentAddress: address?.values,
+    cardAddress: addressRelative?.values,
+    familyData: families?.values,
+    contacts: contacts?.values,
+    responsible: emergencyContact?.values,
+  }
+
+  const formData = genPatient(formDataRequest)
+
+  if (patient?.values.residentIdentityFile) {
+    residentIdentityFile.value = patient?.values.residentIdentityFile
+  }
+
+  if (patient?.values.familyIdentityFile) {
+    familyCardFile.value = patient?.values.familyIdentityFile
+  }
+
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    const patient: Patient = await composeFormData()
+    let createdPatientId = 0
+
+    const response = await handleActionSave(
+      patient,
+      () => {},
+      () => {},
+      toast,
+    )
+
+    const data = (response?.body?.data ?? null) as PatientBase | null
+    if (!data) return
+    createdPatientId = data.id
+
+    if (residentIdentityFile.value) {
+      void uploadAttachment(residentIdentityFile.value, createdPatientId, 'ktp')
+    }
+    if (familyCardFile.value) {
+      void uploadAttachment(familyCardFile.value, createdPatientId, 'kk')
+    }
+
+    // If has callback provided redirect to callback with patientData
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
+      return
+    }
+
+    // Navigate to patient list or show success message
+    await navigateTo('/client/patient')
+    return
+  }
+
+  if (eventType === 'cancel') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    await navigateTo({
+      name: 'client-patient',
+    })
+    // handleCancelForm()
+  }
+}
+// #endregion
+
+// #region Watchers
+// Watcher untuk sinkronisasi initial ketika kedua form sudah ready
+watch(
+  [() => personAddressForm.value, () => personAddressRelativeForm.value],
+  ([addressForm, relativeForm]) => {
+    if (addressForm && relativeForm) {
+      // Trigger initial sync jika isSameAddress adalah true
+      nextTick(() => {
+        const isSameAddress = relativeForm.values?.isSameAddress
+        if ((isSameAddress === true || isSameAddress === '1') && addressForm.values) {
+          const currentAddressValues = addressForm.values
+          if (Object.keys(currentAddressValues).length > 0) {
+            relativeForm.setValues(
+              {
+                ...relativeForm.values,
+                province_code: currentAddressValues.province_code || undefined,
+                regency_code: currentAddressValues.regency_code || undefined,
+                district_code: currentAddressValues.district_code || undefined,
+                village_code: currentAddressValues.village_code || undefined,
+                postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+                address: currentAddressValues.address || undefined,
+                rt: currentAddressValues.rt || undefined,
+                rw: currentAddressValues.rw || undefined,
+              },
+              false,
+            )
+          }
+        }
+      })
+    }
+  },
+  { immediate: true },
+)
+
+// Watcher untuk sinkronisasi alamat ketika isSameAddress = true
+watch(
+  () => personAddressForm.value?.values,
+  (newAddressValues) => {
+    // Cek apakah alamat KTP harus sama dengan alamat sekarang
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
+
+    if ((isSameAddress === true || isSameAddress === '1') && newAddressValues && personAddressRelativeForm.value) {
+      // Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          province_code: newAddressValues.province_code || undefined,
+          regency_code: newAddressValues.regency_code || undefined,
+          district_code: newAddressValues.district_code || undefined,
+          village_code: newAddressValues.village_code || undefined,
+          postalRegion_code: newAddressValues.postalRegion_code || undefined,
+          address: newAddressValues.address || undefined,
+          rt: newAddressValues.rt || undefined,
+          rw: newAddressValues.rw || undefined,
+        },
+        false,
+      )
+    }
+  },
+  { deep: true },
+)
+
+// Watcher untuk memantau perubahan isSameAddress
+watch(
+  () => personAddressRelativeForm.value?.values?.isSameAddress,
+  (isSameAddress) => {
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value?.values
+    ) {
+      // Ketika isSameAddress diubah menjadi true, copy alamat sekarang ke alamat KTP
+      const currentAddressValues = personAddressForm.value.values
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          province_code: currentAddressValues.province_code || undefined,
+          regency_code: currentAddressValues.regency_code || undefined,
+          district_code: currentAddressValues.district_code || undefined,
+          village_code: currentAddressValues.village_code || undefined,
+          postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+          address: currentAddressValues.address || undefined,
+          rt: currentAddressValues.rt || undefined,
+          rw: currentAddressValues.rw || undefined,
+        },
+        false,
+      )
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Pasien</div>
+  <AppPatientEntryForm
+    ref="personPatientForm"
+    :schema="PatientSchema"
+  />
+  <div class="h-6"></div>
+  <AppPersonAddressEntryForm
+    ref="personAddressForm"
+    title="Alamat Sekarang"
+    :schema="PersonAddressSchema"
+  />
+  <div class="h-6"></div>
+  <AppPersonAddressEntryFormRelative
+    ref="personAddressRelativeForm"
+    title="Alamat KTP"
+    :schema="PersonAddressRelativeSchema"
+  />
+  <div class="h-6"></div>
+  <AppPersonFamilyParentsForm
+    ref="personFamilyForm"
+    title="Identitas Orang Tua"
+    :schema="PersonFamiliesSchema"
+  />
+  <div class="h-6"></div>
+  <AppPersonContactEntryForm
+    ref="personContactForm"
+    title="Kontak Pasien"
+    :contact-limit="10"
+    :schema="PersonContactListSchema"
+  />
+  <AppPersonRelativeEntryForm
+    ref="personEmergencyContactRelative"
+    title="Penanggung Jawab"
+    :schema="ResponsiblePersonSchema"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="handleActionClick" />
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/patient/list.vue b/app/components/content/patient/list.vue
new file mode 100644
index 00000000..519aeb8e
--- /dev/null
+++ b/app/components/content/patient/list.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+// #region Imports
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Pasien',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/client/patient/add'),
+  },
+}
+
+// Disable dulu, ayahab kalo diminta
+// const summaryData = ref<Summary[]>([
+//   {
+//     title: 'Total Pasien',
+//     icon: UsersRound,
+//     metric: 23,
+//     trend: 15,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Pasien Aktif',
+//     icon: UserCheck,
+//     metric: 100,
+//     trend: 9,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Kunjungan Hari Ini',
+//     icon: Calendar,
+//     metric: 52,
+//     trend: 1,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Peserta BPJS',
+//     icon: Hospital,
+//     metric: 71,
+//     trend: -3,
+//     timeframe: 'daily',
+//   },
+// ])
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
+async function getPatientSummary() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'client-patient-id',
+        params: { id: recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header
+    v-model:search="searchInput"
+    :prep="{ ...headerPrep }"
+    :ref-search-nav="refSearchNav"
+  />
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="summaryLoading">
+        <SummaryCard
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
+      </template>
+      <template v-else>
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
+      </template>
+    </div>
+  </div>
+  -->
+
+  <AppPatientList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.firstName">
+          <strong>Nama:</strong>
+          {{ record.firstName }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.cellphone }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
new file mode 100644
index 00000000..f8059b9d
--- /dev/null
+++ b/app/components/content/prescription/list.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Resep Obat',
+  icon: 'i-lucide-panel-bottom',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+onMounted(() => {
+  getMaterialList()
+})
+
+async function getMaterialList() {
+  isLoading.dataListLoading = true
+
+  // const resp = await xfetch('/api/v1/material')
+  // if (resp.success) {
+  //   data.value = (resp.body as Record<string, any>).data
+  // }
+
+  isLoading.dataListLoading = false
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+
+  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
+
+  <AppPrescriptionEntry />
+
+  <PrescriptionItemListEntry :data=[] />
+  <div>
+    <Button>
+      Tambah
+    </Button>
+  </div>
+</template>
diff --git a/app/components/content/procedure-src/list.vue b/app/components/content/procedure-src/list.vue
new file mode 100644
index 00000000..fad041ea
--- /dev/null
+++ b/app/components/content/procedure-src/list.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/procedure-src/list-cfg'
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/procedure-src.handler'
+
+// Services
+import { getList, getDetail } from '~/services/procedure-src.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:desc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'procedure-src',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'MCU Prosedur',
+  icon: 'i-lucide-clipboard-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Prosedur'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Prosedur'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppProcedureSrcList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Prosedur'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppProcedureSrcEntryForm
+      :schema="ProcedureSrcSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ProcedureSrcFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/public-screen/list.vue b/app/components/content/public-screen/list.vue
new file mode 100644
index 00000000..10c7d039
--- /dev/null
+++ b/app/components/content/public-screen/list.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppPublicScreenList from '~/components/app/public-screen/list.vue'
+import AppPublicScreenEntryForm from '~/components/app/public-screen/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail } from '~/services/infra.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys['public-screen'],
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'counter',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Layar Publik',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Layar Publik'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Layar Publik'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppPublicScreenList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Layar Publik'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppPublicScreenEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/rehab/registration/home.vue b/app/components/content/rehab/registration/home.vue
new file mode 100644
index 00000000..f6b646a9
--- /dev/null
+++ b/app/components/content/rehab/registration/home.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ListProsedur from './sep-prosedur/list.vue'
+
+interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar' },
+  { value: 'medis', label: 'Pengkajian Awal Medis' },
+  { value: 'rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'fungsi', label: 'Asesmen Fungsi', component: ListProsedur },
+  { value: 'protokol', label: 'Protokol Terapi' },
+  { value: 'edukasi', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'cprj', label: 'CPRJ' },
+  { value: 'obat', label: 'Order Obat' },
+  { value: 'alkes', label: 'Order Alkes' },
+  { value: 'radiologi', label: 'Order Radiologi' },
+  { value: 'labpk', label: 'Order Lab PK' },
+  { value: 'labmikro', label: 'Order Lab Mikro' },
+  { value: 'labpa', label: 'Order Lab PA' },
+  { value: 'ruangtindakan', label: 'Order Ruang Tindakan' },
+  { value: 'hasil', label: 'Hasil Penunjang' },
+  { value: 'konsultasi', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'kontrol', label: 'Surat Kontrol' },
+  { value: 'skrining', label: 'Skrinning MPP' },
+  { value: 'upload', label: 'Upload Dokumen Pendukung' },
+]
+const data = {
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
+  tanggalKunjungan: '23 April 2024',
+  klinik: 'Bedah',
+  tanggalLahir: '23 April 1990 (25 Tahun)',
+  jenisKelamin: 'Laki-laki',
+  jenisPembayaran: 'JKN',
+  noBilling: '223332',
+  dpjp: 'dr. Syaifullah, Sp.OT(K)',
+}
+
+const activeTab = ref('fungsi')
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <button
+        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Kembali ke Daftar Kunjungan
+      </button>
+    </div>
+
+    <AppPatientQuickInfo :data="data" />
+    <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+      <button
+        v-for="tab in tabs"
+        :key="tab.value"
+        :data-active="activeTab === tab.value"
+        class="flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium transition data-[active=false]:bg-gray-100 data-[active=true]:bg-green-600 data-[active=false]:text-gray-700 data-[active=true]:text-white"
+        @click="activeTab = tab.value"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div class="mt-4 rounded-md border p-4">
+      <component
+        :is="tabs.find((t) => t.value === activeTab)?.component"
+        v-if="tabs.find((t) => t.value === activeTab)?.component"
+        v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
+        :label="tabs.find((t) => t.value === activeTab)?.label"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/content/rehab/registration/sep-prosedur/add.vue b/app/components/content/rehab/registration/sep-prosedur/add.vue
new file mode 100644
index 00000000..128cf74a
--- /dev/null
+++ b/app/components/content/rehab/registration/sep-prosedur/add.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>
diff --git a/app/components/content/rehab/registration/sep-prosedur/list.vue b/app/components/content/rehab/registration/sep-prosedur/list.vue
new file mode 100644
index 00000000..1cf9a409
--- /dev/null
+++ b/app/components/content/rehab/registration/sep-prosedur/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import RehabSepProsedurList from '~/components/app/rehab/registration/sep-prosedur/list.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <RehabSepProsedurList :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/room/list.vue b/app/components/content/room/list.vue
new file mode 100644
index 00000000..1317d5b0
--- /dev/null
+++ b/app/components/content/room/list.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppRoomList from '~/components/app/room/list.vue'
+import AppRoomEntryForm from '~/components/app/room/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+import { getValueLabelList as getSpecialistList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistList } from '~/services/subspecialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
+import { getDetail as getItemDetail } from '~/services/item.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const specialists = ref<{ value: string | number; label: string }[]>([])
+const specialistsFiltered = ref<{ value: string | number; label: string }[]>([])
+const subspecialists = ref<{ value: string | number; label: string }[]>([])
+const subspecialistsFiltered = ref<{ value: string | number; label: string }[]>([])
+const units = ref<{ value: string | number; label: string }[]>([])
+const selectedUnit = ref<string | number | null>(null)
+const selectedSpecialist = ref<string | number | null>(null)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.room,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'room',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Ruangan',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    if (currentValue.item_id) {
+      const itemResult = await getItemDetail(currentValue.item_id)
+      if (itemResult.success) {
+        currentValue.item = itemResult.body?.data || {}
+      }
+    }
+    if (currentValue.rooms) {
+      const rooms: any = Array.isArray(currentValue.rooms) && currentValue.rooms.length > 0 ? currentValue.rooms[0] : {}
+      specialistsFiltered.value = rooms?.specialist
+        ? [
+            {
+              value: rooms.specialist?.id ? Number(rooms.specialist.id) : '',
+              label: rooms.specialist?.name || '',
+            },
+          ]
+        : []
+      subspecialistsFiltered.value = rooms?.subspecialist
+        ? [
+            {
+              value: rooms.subspecialist?.id ? Number(rooms.subspecialist.id) : '',
+              label: rooms.subspecialist?.name || '',
+            },
+          ]
+        : []
+      currentValue.unit_id = rooms?.unit_id || null
+      currentValue.specialist_id = rooms?.specialist_id || null
+      currentValue.subspecialist_id = rooms?.subspecialist_id || null
+    }
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Ruangan'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Ruangan'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch(selectedUnit, async (value: string | number | null) => {
+  specialistsFiltered.value = []
+  if (value) {
+    selectedSpecialist.value = null
+    specialistsFiltered.value = specialists.value.filter((item: any) => Number(item.parent) === Number(value))
+    subspecialistsFiltered.value = []
+  } else {
+    selectedSpecialist.value = null
+    specialistsFiltered.value = []
+    subspecialistsFiltered.value = []
+  }
+})
+
+watch(selectedSpecialist, async (value: string | number | null) => {
+  subspecialistsFiltered.value = []
+  if (value) {
+    subspecialistsFiltered.value = subspecialists.value.filter((item: any) => Number(item.parent) === Number(value))
+  } else {
+    subspecialistsFiltered.value = []
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.floor })
+  specialists.value = await getSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+  subspecialists.value = await getSubspecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+  units.value = await getUnitList({ sort: 'createdAt:asc', 'page-size': 100 })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppRoomList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Ruangan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppRoomEntryForm
+      :schema="InfraSchema"
+      :specialists="specialistsFiltered"
+      :subspecialists="subspecialistsFiltered"
+      :units="units"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @update:selected-unit="(val: any) => (selectedUnit = val)"
+      @update:selected-specialist="(val: any) => (selectedSpecialist = val)"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/satusehat/const.ts b/app/components/content/satusehat/const.ts
new file mode 100644
index 00000000..1d546648
--- /dev/null
+++ b/app/components/content/satusehat/const.ts
@@ -0,0 +1,97 @@
+import type { ServiceStatus } from '~/components/pub/my-ui/service-status/type'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { CircleCheckBig, CircleDashed, CircleX, Send } from 'lucide-vue-next'
+
+export const tabs = [
+  {
+    value: 'all',
+    label: 'Semua Resource',
+  },
+  {
+    value: 'patient',
+    label: 'Patient',
+  },
+  {
+    value: 'encounter',
+    label: 'Encounter',
+  },
+  {
+    value: 'observation',
+    label: 'Observation',
+  },
+]
+
+export const actions = [
+  {
+    value: 'export',
+    label: 'Ekspor',
+    icon: 'i-lucide-download',
+  },
+]
+
+// Status filter options
+export const statusOptions = [
+  { value: '0', label: 'Failed' },
+  { value: '1', label: 'Pending' },
+  { value: '2', label: 'Success' },
+]
+export const summaryData: Summary[] = [
+  {
+    title: 'Resource Terkirim',
+    icon: Send,
+    metric: 1245,
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Sync Success',
+    icon: CircleCheckBig,
+    metric: '97%',
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pending Queue',
+    icon: CircleDashed,
+    metric: 32,
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Failed Items',
+    icon: CircleX,
+    metric: 10,
+    trend: 0,
+    timeframe: 'daily',
+  },
+]
+
+// SATUSEHAT Service integration
+export const service = reactive<ServiceStatus>({
+  serviceName: 'SATUSEHAT',
+  serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
+  sessionActive: false,
+  status: 'connecting',
+  isSkeleton: false,
+})
+
+export const headerPrep: HeaderPrep = {
+  title: 'SATUSEHAT Integration',
+  icon: 'i-lucide-box',
+  addNav: {
+    label: 'Kirim Resource',
+    icon: 'i-lucide-send',
+    // onClick: () => navigateTo('/patient/add'),
+  },
+}
+
+export const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+  },
+  onClear: () => {
+  },
+}
diff --git a/app/components/content/satusehat/list.vue b/app/components/content/satusehat/list.vue
new file mode 100644
index 00000000..72cff7dd
--- /dev/null
+++ b/app/components/content/satusehat/list.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import { useUrlSearchParams } from '@vueuse/core'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { actions, headerPrep, refSearchNav, service, summaryData, tabs } from './const'
+import { defaultQuery, querySchema, tabSwitcher } from './schema.query'
+import { Form } from '~/components/pub/ui/form'
+
+// State management
+const data = ref([])
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isLoading = reactive<DataTableLoader>({
+  satusehatConn: true,
+  isTableLoading: false,
+})
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data
+})
+// Pagination state
+const pagination = ref({
+  total: 0,
+  page: 1,
+  limit: 10,
+  total_pages: 0,
+  has_next: false,
+  has_prev: false,
+})
+
+// API function to fetch data
+async function fetchData() {
+  try {
+    isLoading.isTableLoading = true
+    data.value = []
+    const response = await xfetch('/api/v1/satusehat/list', 'POST', {
+      resource_type: params.value?.resource_type,
+      date_from: params.value?.date_from,
+      date_to: params.value?.date_to,
+      search: params.value?.q,
+      page: params.value?.page,
+      limit: params.value?.limit,
+    })
+
+    if (response.success) {
+      data.value = response.body.data
+      pagination.value = response.body.meta
+    }
+  } catch (error) {
+    console.error('Error fetching data:', error)
+    data.value = []
+  } finally {
+    isLoading.isTableLoading = false
+  }
+}
+
+async function callSatuSehat() {
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    service.status = 'connected'
+    // service.status = 'error'
+    service.sessionActive = true
+    // service.sessionActive = false
+  } finally {
+    isLoading.satusehatConn = false
+  }
+}
+
+// Initialize params from URL on mount
+onMounted(async () => {
+  await callSatuSehat()
+  await fetchData()
+})
+
+// Watch for url param changed state and trigger refetch
+watch(params, () => {
+  fetchData()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Sync active tab filter with queryparams
+// fallback and default to `all` filter
+const activeTabFilter = computed({
+  get: () => {
+    const result = tabSwitcher.parse(queryParams.resource_type)
+    return result
+  },
+  set: (value) => {
+    queryParams.resource_type = value
+    queryParams.q = defaultQuery.q
+    queryParams.page = defaultQuery.page
+    queryParams.limit = defaultQuery.limit
+    queryParams.date_from = defaultQuery.date_from
+    queryParams.date_to = defaultQuery.date_to
+  },
+})
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
+
+    <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
+      <PubMyUiServiceStatus v-bind="service" />
+      <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
+    </div>
+
+    <div class="rounded-md border p-4">
+      <h2 class="text-md py-2 font-semibold">FHIR Resource</h2>
+      <Tabs v-model="activeTabFilter">
+        <div class="scrollbar-hide flex justify-between gap-2 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+          <div class="flex items-center gap-2">
+            <!-- Search Input -->
+
+            <AppSatusehatPicker />
+            <div class="relative w-full max-w-sm">
+              <Dialog>
+                <DialogTrigger>
+                  <Input type="text" placeholder="Cari pasien..." class="h-9 pl-3" />
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader class="border-b-1">
+                    <DialogTitle class="pb-2">Pencarian</DialogTitle>
+                  </DialogHeader>
+                  <Form>
+                    <FormField v-slot="{ componentField }" name="username">
+                      <FormItem>
+                        <FormLabel>Pasien</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="status">
+                      <FormItem>
+                        <FormLabel>Status</FormLabel>
+                        <FormControl>
+                          <Select v-bind="componentField">
+                            <SelectTrigger class="border border-gray-300 bg-white">
+                              <SelectValue class="text-gray-400" placeholder="-- select item" />
+                            </SelectTrigger>
+                            <SelectContent class="bg-white">
+                              <SelectItem value="0"> Gagal </SelectItem>
+                              <SelectItem value="1"> Pending </SelectItem>
+                              <SelectItem value="2"> Terkirim </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="fhirId">
+                      <FormItem>
+                        <FormLabel>FHIR ID</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="fhir id" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                  </Form>
+
+                  <DialogFooter>
+                    <Button variant="outline"> Reset </Button>
+                    <Button> Apply </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <!-- Action Buttons -->
+            <AppSatusehatButtonAction
+              v-for="action in actions"
+              :key="action.value"
+              :icon="action.icon"
+              :text="action.label"
+            />
+          </div>
+        </div>
+        <div class="mt-4">
+          <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
+            <div class="rounded-md border p-4">
+              <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+
+              <!-- Pagination -->
+              <div
+                v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0"
+                class="mt-4 flex items-center justify-between"
+              >
+                <div class="text-sm text-muted-foreground">
+                  Menampilkan {{ (pagination.page - 1) * pagination.limit + 1 }} -
+                  {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
+                  dari {{ pagination.total }} data
+                </div>
+                <div class="flex gap-2">
+                  <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--">
+                    Sebelumnya
+                  </Button>
+                  <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
+                    Selanjutnya
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  </div>
+</template>
diff --git a/app/components/content/satusehat/schema.query.ts b/app/components/content/satusehat/schema.query.ts
new file mode 100644
index 00000000..aab8340f
--- /dev/null
+++ b/app/components/content/satusehat/schema.query.ts
@@ -0,0 +1,23 @@
+import * as z from 'zod'
+
+const resourceTabEnum = z.enum(['all', 'patient', 'encounter', 'observation'])
+
+export const tabSwitcher = resourceTabEnum.default('all').catch('all')
+export const querySchema = z.object({
+  q: z.string().min(3).optional().catch(''),
+  resource_type: tabSwitcher,
+  date_from: z.string().optional().catch(''),
+  date_to: z.string().optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  limit: z.coerce.number().int().min(1).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  status: '',
+  resource_type: 'all',
+  date_from: '',
+  date_to: '',
+  page: 1,
+  limit: 10,
+}
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
new file mode 100644
index 00000000..61107232
--- /dev/null
+++ b/app/components/content/sep/entry.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const openPatient = ref(false)
+const openLetter = ref(false)
+const openHistory = ref(false)
+const selectedPatient = ref('3456512345678880')
+const selectedLetter = ref('SK22334442')
+
+const patients = [
+  {
+    ktp: '3456512345678880',
+    rm: 'RM23311224',
+    bpjs: '334423213214',
+    nama: 'Ahmad Baidowi',
+  },
+  {
+    ktp: '345678804565123',
+    rm: 'RM23455667',
+    bpjs: '33442367656',
+    nama: 'Bian Maulana',
+  },
+]
+
+const letters = [
+  {
+    noSurat: 'SK22334442',
+    tglRencana: '12 Agustus 2025',
+    noSep: 'SEP3232332',
+    namaPasien: 'Ahmad Baidowi',
+    noBpjs: '33442331214',
+    klinik: 'Penyakit Dalam',
+    dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
+  },
+  {
+    noSurat: 'SK99120039',
+    tglRencana: '12 Agustus 2025',
+    noSep: 'SEP4443232',
+    namaPasien: 'Bian Maulana',
+    noBpjs: '33442367656',
+    klinik: 'Gigi',
+    dokter: 'dr. Achmad Suparjo',
+  },
+]
+
+const histories = [
+  {
+    no_sep: "SP23311224",
+    tgl_sep: "12 Agustus 2025",
+    no_rujukan: "123444",
+    diagnosis: "C34.9 – Karsinoma Paru",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+  {
+    no_sep: "SP23455667",
+    tgl_sep: "11 Agustus 2025",
+    no_rujukan: "2331221",
+    diagnosis: "K35 – Apendisitis akut",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+]
+
+function handleSavePatient() {
+  console.log('Pasien dipilih:', selectedPatient.value)
+}
+
+function handleSaveLetter() {
+  console.log('Letter dipilih:', selectedLetter.value)
+}
+
+function handleEvent(value: string) {
+  if (value === 'search-patient') {
+    openPatient.value = true
+    return
+  }
+  if (value === 'search-letter') {
+    openLetter.value = true
+    return
+  }
+  if (value === 'history-sep') {
+    openHistory.value = true
+    return
+  }
+  if (value === 'back') {
+    navigateTo('/bpjs/sep')
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-panel-bottom" class="me-2" />
+    <span class="font-semibold">Tambah</span> SEP
+  </div>
+  <AppSepEntryForm @event="handleEvent" />
+  <AppSepTableSearchPatient
+    v-model:open="openPatient"
+    v-model:selected="selectedPatient"
+    :patients="patients"
+    @save="handleSavePatient"
+  />
+  <AppSepTableSearchLetter
+    v-model:open="openLetter"
+    v-model:selected="selectedLetter"
+    :letters="letters"
+    @save="handleSaveLetter"
+  />
+  <AppSepTableHistorySep
+    v-model:open="openHistory"
+    :histories="histories"
+  />
+
+</template>
diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
new file mode 100644
index 00000000..9a6cd8db
--- /dev/null
+++ b/app/components/content/sep/list.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '~/components/pub/ui/dropdown-menu'
+import { X, Check } from 'lucide-vue-next'
+
+const search = ref('')
+const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
+const open = ref(false)
+
+const sepData = {
+  no_sep: 'SP23311224',
+  kartu: '001234',
+  nama: 'Kenzie',
+}
+
+interface SepData {
+  tgl_sep: string
+  no_sep: string
+  pelayanan: string
+  jalur: string
+  no_rm: string
+  nama_pasien: string
+  no_kartu_bpjs: string
+  no_surat_kontrol: string
+  tgl_surat_kontrol: string
+  klinik_tujuan: string
+  dpjp: string
+  diagnosis_awal: string
+}
+
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: 1,
+  pageSize: 10,
+  totalPage: 5,
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  console.log('pageChange', page)
+}
+
+const data = ref<SepData[]>([])
+
+// contoh data dummy
+const rows = [
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM23311224',
+    nama_pasien: 'Ahmad Baidowi',
+    no_kartu_bpjs: '334423231214',
+    no_surat_kontrol: 'SK22334442',
+    tgl_surat_kontrol: '13 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
+    diagnosis_awal: 'C34.9 - Karsinoma Paru',
+  },
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001234',
+    nama_pasien: 'Kenzie',
+    no_kartu_bpjs: '12301234',
+    no_surat_kontrol: '123456',
+    tgl_surat_kontrol: '10 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Bronchitis',
+  },
+  {
+    tgl_sep: '11 Agustus 2025',
+    no_sep: 'SP23455667',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001009',
+    nama_pasien: 'Abraham Sulaiman',
+    no_kartu_bpjs: '334235',
+    no_surat_kontrol: '123334',
+    tgl_surat_kontrol: '11 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Paru-paru basah',
+  },
+]
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar SEP Prosedur',
+  icon: 'i-lucide-panel-bottom',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => {
+      navigateTo('/bpjs/sep/add')
+    },
+  },
+}
+
+async function getSepList() {
+  isLoading.dataListLoading = true
+  data.value = [...rows]
+  isLoading.dataListLoading = false
+}
+
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+
+function handleDelete() {
+  console.log('Data dihapus:', sepData)
+  open.value = false
+}
+
+watch(
+  () => recAction.value,
+  () => {
+    if (recAction.value === 'showConfirmDel') {
+      open.value = true
+    }
+  },
+)
+
+onMounted(() => {
+  getSepList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" />
+    <!-- Filter Bar -->
+    <div class="my-2 flex flex-wrap items-center gap-2">
+      <!-- Search -->
+      <Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
+
+      <!-- Date Range -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
+            {{ dateRange }}
+            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="p-2">
+          <Calendar mode="range" />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Export -->
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button
+            variant="outline"
+            class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          >
+            <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-40">
+          <DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
+          <DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    <div class="rounded-md border p-4">
+      <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+
+    <!-- Pagination -->
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubMyUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
+
+    <!-- Trigger button -->
+    <Dialog v-model:open="open">
+      <DialogTrigger as-child></DialogTrigger>
+
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Hapus SEP</DialogTitle>
+        </DialogHeader>
+
+        <DialogDescription class="text-gray-700">
+          Apakah anda yakin ingin menghapus SEP dengan data:
+        </DialogDescription>
+
+        <div class="mt-4 space-y-2 text-sm">
+          <p>No. SEP : {{ sepData.no_sep }}</p>
+          <p>No. Kartu BPJS : {{ sepData.kartu }}</p>
+          <p>Nama Pasien : {{ sepData.nama }}</p>
+        </div>
+
+        <DialogFooter class="mt-6 flex justify-end gap-3">
+          <Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
+            <X class="mr-1 h-4 w-4" /> Tidak
+          </Button>
+          <Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
+            <Check class="mr-1 h-4 w-4" /> Ya
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
diff --git a/app/components/content/soapi/entry.vue b/app/components/content/soapi/entry.vue
new file mode 100644
index 00000000..7b4ab9d4
--- /dev/null
+++ b/app/components/content/soapi/entry.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode'
+
+import SoapiList from './list.vue'
+import EarlyForm from './form.vue'
+import RehabForm from './form-rehab.vue'
+import FunctionForm from './form-function.vue'
+
+const route = useRoute()
+const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
+
+const { mode, openForm, backToList } = useQueryMode('mode')
+
+const formMap = {
+  'early-medical-assessment': EarlyForm,
+  'rehab-medical-assessment': RehabForm,
+  'function-assessment': FunctionForm,
+}
+
+const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
+</script>
+
+<template>
+  <div>
+    <SoapiList
+      v-if="mode === 'list'"
+      @add="openForm"
+    />
+
+    <component
+      v-else
+      :is="ActiveForm"
+      @back="backToList"
+    />
+  </div>
+</template>
diff --git a/app/components/content/soapi/form-function.vue b/app/components/content/soapi/form-function.vue
new file mode 100644
index 00000000..ade9e4d1
--- /dev/null
+++ b/app/components/content/soapi/form-function.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/soapi/entry.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { FunctionSoapiSchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+
+const route = useRoute()
+const isOpen = ref(false)
+const data = ref([])
+const schema = FunctionSoapiSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'function',
+  value: '',
+})
+const model = ref({
+  'prim-compl': '',
+  'past-disease': '',
+  'current-disease': '',
+  gcs: '',
+  'respiratory-rate': '',
+  'respiratory-rate-type': '',
+  pulse: '',
+  'pulse-type': '',
+  'right-arm-bp': '',
+  'left-arm-bp': '',
+  'axillary-temp': '',
+  'rektal-temp': '',
+  skin: '',
+  head: '',
+  ear: '',
+  nose: '',
+  'oral-cavity': '',
+  eye: '',
+  'other-body-part': '',
+  neck: '',
+  thyroid: '',
+  thorax: '',
+  heart: '',
+  lung: '',
+  abdomen: '',
+  heart2: '',
+  lien: '',
+  back: '',
+  extremity: '',
+  gender: '',
+  rectum: '',
+  'system-syaraf': '',
+  'nervous-system': '',
+  'cardio-respiratory': '',
+  imaging: '',
+  laboratory: '',
+})
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleOpen(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+const entryRehabRef = ref()
+async function actionHandler(type: string) {
+  console.log(type)
+  const result = await entryRehabRef.value?.validate()
+  if (result?.valid) {
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    ref="entryRehabRef"
+    v-model="model"
+    :schema="schema"
+    type="function"
+    @modal="handleOpen"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>
diff --git a/app/components/content/soapi/form-rehab.vue b/app/components/content/soapi/form-rehab.vue
new file mode 100644
index 00000000..655063f9
--- /dev/null
+++ b/app/components/content/soapi/form-rehab.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/soapi/entry.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { EarlyRehabSchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+
+const route = useRoute()
+const isOpen = ref(false)
+const data = ref([])
+const schema = EarlyRehabSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'early-rehab',
+  value: '',
+})
+const model = ref({
+  'prim-compl': '',
+  'medical-plan': '',
+  'diagnosis-medical': '',
+  'rehab-trouble': '',
+  'medical-trouble': '',
+  'physic-modal': '',
+  exercise: '',
+  'ortho-pesa': '',
+  education: '',
+  other: '',
+  cranialis: '',
+  sensoris: '',
+  'reflect-fisio': '',
+  'reflect-pato': '',
+  otonom: '',
+  localis: '',
+  'medical-trial': '',
+  therapy: '',
+  'syst-bp': '',
+  'diast-bp': '',
+  pulse: '',
+  gcs: '',
+  'respiratory-rate': '',
+  temperature: '',
+  ambulance: '',
+  gait: '',
+  'neck-rom': '',
+  'body-rom': '',
+  'aga-rom': '',
+  'agb-rom': '',
+  'neck-mmt': '',
+  'body-mmt': '',
+  'aga-mmt': '',
+  'agb-mmt': '',
+  localis: '',
+  'medical-trouble': '',
+  'rehab-trouble': '',
+  temp: '',
+  spo2: '',
+  weight: '',
+  height: '',
+})
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleOpen(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+const entryRehabRef = ref()
+async function actionHandler(type: string) {
+  console.log(type)
+  const result = await entryRehabRef.value?.validate()
+  if (result?.valid) {
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    ref="entryRehabRef"
+    v-model="model"
+    :schema="schema"
+    type="early-rehab"
+    @modal="handleOpen"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>
diff --git a/app/components/content/soapi/form.vue b/app/components/content/soapi/form.vue
new file mode 100644
index 00000000..794daef9
--- /dev/null
+++ b/app/components/content/soapi/form.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/soapi/entry.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { EarlySchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+
+const route = useRoute()
+const isOpen = ref(false)
+const data = ref([])
+const schema = EarlySchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'early',
+  value: '',
+})
+
+const model = ref({
+  'prim-compl': '',
+  'cur-disea-hist': '',
+  'syst-bp': '',
+  'diast-bp': '',
+  pulse: '',
+  'resp-rate': '',
+  temp: '',
+  weight: '',
+  height: '',
+  'reflect-fisio': '',
+  'reflect-pato': '',
+  'autonom-neuron': '',
+  'medical-act': '',
+  therapy: '',
+})
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleOpen(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+const entryRef = ref()
+async function actionHandler(type: string) {
+  console.log(type)
+  const result = await entryRef.value?.validate()
+  if (result?.valid) {
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    ref="entryRef"
+    v-model="model"
+    :schema="schema"
+    type="early"
+    @modal="handleOpen"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
new file mode 100644
index 00000000..a240a65f
--- /dev/null
+++ b/app/components/content/soapi/list.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emits = defineEmits(['add', 'edit'])
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => emits('add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+
+  <AssesmentFunctionList :data="data" />
+</template>
diff --git a/app/components/content/specialist-intern/entry.vue b/app/components/content/specialist-intern/entry.vue
new file mode 100644
index 00000000..cbfb6670
--- /dev/null
+++ b/app/components/content/specialist-intern/entry.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: 'doctor',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/specialist-intern')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+  { value: 'nutritionist', label: 'Ahli Gizi' },
+  { value: 'laborant', label: 'Laboran' },
+  { value: 'pharmacy', label: 'Farmasi' },
+  { value: 'payment', label: 'Pembayaran' },
+  { value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
+  { value: 'management', label: 'Management' },
+]
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Karyawan
+  </div>
+
+  <AppUserEntryForm v-model="data" />
+
+  <AppSpecialistInternEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+
+  <AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/content/specialist-intern/list.vue b/app/components/content/specialist-intern/list.vue
new file mode 100644
index 00000000..e2df8e3e
--- /dev/null
+++ b/app/components/content/specialist-intern/list.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'User',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/human-src/specialist-intern/add'),
+  },
+}
+
+async function getDoctorList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/doctor')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getDoctorList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+</template>
diff --git a/app/components/content/specialist/entry.ts b/app/components/content/specialist/entry.ts
new file mode 100644
index 00000000..c89302c2
--- /dev/null
+++ b/app/components/content/specialist/entry.ts
@@ -0,0 +1,95 @@
+import * as z from 'zod'
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama spesialisasi harus diisi',
+    })
+    .min(3, 'Nama spesialisasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode spesialisasi harus diisi',
+    })
+    .min(3, 'Kode spesialisasi minimal 3 karakter'),
+
+  installationId: z
+    .string({
+      required_error: 'Instalasi harus dipilih',
+    })
+    .min(1, 'Instalasi harus dipilih'),
+
+  unitId: z
+    .string({
+      required_error: 'Unit harus dipilih',
+    })
+    .min(1, 'Unit harus dipilih'),
+})
+
+// Unit mapping berdasarkan installation
+export const installationUnitMapping: Record<string, string[]> = {
+  '1': ['1', '3', '5'],
+  '2': ['2', '4', '6'],
+  '3': ['7', '8', '9', '10', '11'],
+}
+
+export const unitConf = {
+  msg: {
+    placeholder: '---pilih unit',
+    search: 'kode, nama unit',
+    empty: 'unit tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
+    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
+    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
+    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
+    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
+    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
+    { value: '10', label: 'Instalasi SDM', code: 'HR' },
+    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
+    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
+    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
+    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
+    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
+    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
+    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
+    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
+    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
+    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
+  ],
+}
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih instalasi',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+  ],
+}
+
+// Helper function untuk filter unit berdasarkan installation
+export function getFilteredUnits(installationId: string) {
+  if (!installationId || !installationUnitMapping[installationId]) {
+    return []
+  }
+
+  const allowedUnitIds = installationUnitMapping[installationId]
+  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
+}
+
+// Helper function untuk membuat unit config yang ter-filter
+export function createFilteredUnitConf(installationId: string) {
+  return {
+    ...unitConf,
+    items: getFilteredUnits(installationId),
+  }
+}
diff --git a/app/components/content/specialist/list-prev.vue b/app/components/content/specialist/list-prev.vue
new file mode 100644
index 00000000..9ed71016
--- /dev/null
+++ b/app/components/content/specialist/list-prev.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { createFilteredUnitConf, installationConf, schemaConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// State untuk tracking installation yang dipilih di form
+const selectedInstallationId = ref<string>('')
+
+// Computed untuk filtered unit berdasarkan installation yang dipilih
+const filteredUnitConf = computed(() => {
+  if (!selectedInstallationId.value) {
+    return { ...unitConf, items: [] }
+  }
+  return createFilteredUnitConf(selectedInstallationId.value)
+})
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSpecialistList,
+} = usePaginatedList({
+  fetchFn: fetchSpecialistData,
+  entityName: 'specialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Specialist',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Specialist',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+async function fetchSpecialistData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/Installation/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getSpecialistList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  // Reset installation selection ketika form dibatal
+  selectedInstallationId.value = ''
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+function onInstallationChanged(installationId: string) {
+  // Update local state untuk trigger re-render filtered units
+  selectedInstallationId.value = installationId
+
+  // The filteredUnitConf computed will automatically update
+  // based on the new selectedInstallationId value
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/Installation', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Reset installation selection ketika form berhasil submit
+    selectedInstallationId.value = ''
+
+    // Refresh data after successful submission
+    await getSpecialistList()
+
+    // TODO: Show success message
+    console.log('Installation created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Note: Installation change logic is now handled by the entry-form component
+// through the onInstallationChanged event handler
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+    <AppSpecialistEntryFormPrev
+      :installation="installationConf"
+      :unit="filteredUnitConf"
+      :schema="schemaConf"
+      :disabled-unit="!selectedInstallationId"
+      :initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
+      @submit="onSubmitForm"
+      @cancel="onCancelForm"
+      @installation-changed="onInstallationChanged"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
new file mode 100644
index 00000000..9bbf755f
--- /dev/null
+++ b/app/components/content/specialist/list.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSpecialistList from '~/components/app/specialist/list.vue'
+import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { SpecialistSchema, type SpecialistFormData } from '~/schemas/specialist.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/specialist.handler'
+
+// Services
+import { getList, getDetail } from '~/services/specialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
+
+const units = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'unit',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'specialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Spesialis',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Detail Spesialis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Edit Spesialis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  units.value = await getUnitList()
+  await getSpecialistList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppSpecialistList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Spesialis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSpecialistEntryForm
+      :schema="SpecialistSchema"
+      :units="units"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SpecialistFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSpecialistList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getSpecialistList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSpecialistList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/subspecialist/entry.ts b/app/components/content/subspecialist/entry.ts
new file mode 100644
index 00000000..5a93847d
--- /dev/null
+++ b/app/components/content/subspecialist/entry.ts
@@ -0,0 +1,98 @@
+import * as z from 'zod'
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama spesialisasi harus diisi',
+    })
+    .min(3, 'Nama spesialisasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode spesialisasi harus diisi',
+    })
+    .min(3, 'Kode spesialisasi minimal 3 karakter'),
+
+  installationId: z
+    .string({
+      required_error: 'Instalasi harus dipilih',
+    })
+    .min(1, 'Instalasi harus dipilih'),
+
+  unitId: z
+    .string({
+      required_error: 'Unit harus dipilih',
+    })
+    .min(1, 'Unit harus dipilih'),
+  specialistId: z
+    .string({
+      required_error: 'Specialist harus dipilih',
+    })
+    .min(1, 'Specialist harus dipilih'),
+})
+
+// Unit mapping berdasarkan installation
+export const installationUnitMapping: Record<string, string[]> = {
+  '1': ['1', '3'],
+  '2': ['2', '3'],
+  '3': ['1', '2', '3'],
+}
+
+export const unitConf = {
+  msg: {
+    placeholder: '---pilih unit',
+    search: 'kode, nama unit',
+    empty: 'unit tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+  ],
+}
+
+export const specialistConf = {
+  msg: {
+    placeholder: '---pilih specialist',
+    search: 'kode, nama specialist',
+    empty: 'specialist tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Spesialis Jantung', code: 'CARD' },
+    { value: '2', label: 'Spesialis Mata', code: 'OPHT' },
+    { value: '3', label: 'Spesialis Bedah', code: 'SURG' },
+    { value: '4', label: 'Spesialis Anak', code: 'PEDI' },
+    { value: '5', label: 'Spesialis Kandungan', code: 'OBGY' },
+  ],
+}
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih instalasi',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+  ],
+}
+
+// Helper function untuk filter unit berdasarkan installation
+export function getFilteredUnits(installationId: string) {
+  if (!installationId || !installationUnitMapping[installationId]) {
+    return []
+  }
+
+  const allowedUnitIds = installationUnitMapping[installationId]
+  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
+}
+
+// Helper function untuk membuat unit config yang ter-filter
+export function createFilteredUnitConf(installationId: string) {
+  return {
+    ...unitConf,
+    items: getFilteredUnits(installationId),
+  }
+}
diff --git a/app/components/content/subspecialist/list-prev.vue b/app/components/content/subspecialist/list-prev.vue
new file mode 100644
index 00000000..81f59399
--- /dev/null
+++ b/app/components/content/subspecialist/list-prev.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppSubspecialistEntryForm from '~/components/app/subspecialist/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { createFilteredUnitConf, installationConf, schemaConf, specialistConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// State untuk tracking installation, unit, dan specialist yang dipilih di form
+const selectedInstallationId = ref<string>('')
+const selectedUnitId = ref<string>('')
+
+// Computed untuk filtered unit berdasarkan installation yang dipilih
+const filteredUnitConf = computed(() => {
+  if (!selectedInstallationId.value) {
+    return { ...unitConf, items: [] }
+  }
+  return createFilteredUnitConf(selectedInstallationId.value)
+})
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSubSpecialistList,
+} = usePaginatedList({
+  fetchFn: fetchSubSpecialistData,
+  entityName: 'subspecialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sub Specialist',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Sub Specialist',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+async function fetchSubSpecialistData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/subspecialist/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getSubSpecialistList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  selectedInstallationId.value = ''
+  selectedUnitId.value = ''
+
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+function onInstallationChanged(installationId: string) {
+  selectedInstallationId.value = installationId
+}
+
+function onUnitChanged(unitId: string) {
+  selectedUnitId.value = unitId
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/subspecialist', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Reset selection ketika form berhasil submit
+    selectedInstallationId.value = ''
+    selectedUnitId.value = ''
+
+    // Refresh data after successful submission
+    await getSubSpecialistList()
+
+    // TODO: Show success message
+    console.log('Sub Specialist created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppSubspecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+    <AppSubspecialistEntryFormPrev
+      :installation="installationConf"
+      :unit="filteredUnitConf"
+      :specialist="specialistConf"
+      :schema="schemaConf"
+      :initial-values="{ name: '', code: '', installationId: '', unitId: '', specialistId: '' }"
+      @submit="onSubmitForm"
+      @cancel="onCancelForm"
+      @installation-changed="onInstallationChanged"
+      @unit-changed="onUnitChanged"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        <p v-if="record?.specialist"><strong>Specialist:</strong> {{ record.specialist?.name }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
new file mode 100644
index 00000000..e2c6db52
--- /dev/null
+++ b/app/components/content/subspecialist/list.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSubSpecialistList from '~/components/app/subspecialist/list.vue'
+import AppSubSpecialistEntryForm from '~/components/app/subspecialist/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { SubspecialistSchema, type SubspecialistFormData } from '~/schemas/subspecialist.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/subspecialist.handler'
+
+// Services
+import { getList, getDetail } from '~/services/subspecialist.service'
+import { getValueLabelList as getSpecialistsList } from '~/services/specialist.service'
+
+const specialists = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSubSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'specialist',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'subspecialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sub Spesialis',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentSubSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Detail Sub Spesialis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Edit Sub Spesialis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  specialists.value = await getSpecialistsList()
+  await getSubSpecialistList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppSubSpecialistList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Sub Spesialis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSubSpecialistEntryForm
+      :schema="SubspecialistSchema"
+      :specialists="specialists"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SubspecialistFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSubSpecialistList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getSubSpecialistList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSubSpecialistList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
new file mode 100644
index 00000000..da22a976
--- /dev/null
+++ b/app/components/content/tools/list.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppToolsList from '~/components/app/tools/list.vue'
+import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DeviceSchema, type DeviceFormData } from '~/schemas/device.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device.handler'
+
+// Services
+import { getList, getDetail } from '~/services/device.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getToolsList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Peralatan',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Peralatan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentToolsDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+  }
+}
+
+// Watch for row actions
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Detail Peralatan'
+      isReadonly.value = true
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Edit Peralatan'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  uoms.value = await getUomList()
+  await getToolsList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppToolsList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Peralatan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppToolsEntryForm
+      :schema="DeviceSchema"
+      :values="recItem"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DeviceFormData, resetForm: any) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getToolsList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getToolsList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getToolsList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/unit/entry.ts b/app/components/content/unit/entry.ts
new file mode 100644
index 00000000..bf85a0ed
--- /dev/null
+++ b/app/components/content/unit/entry.ts
@@ -0,0 +1,63 @@
+import * as z from 'zod'
+
+export const unitConf = {
+  msg: {
+    placeholder: '--- pilih instalasi',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
+    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
+    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
+    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
+    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
+    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
+    { value: '10', label: 'Instalasi SDM', code: 'HR' },
+    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
+    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
+    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
+    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
+    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
+    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
+    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
+    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
+    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
+    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
+  ],
+}
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama unit harus diisi',
+    })
+    .min(1, 'Nama unit harus diisi'),
+
+  code: z
+    .string({
+      required_error: 'Kode unit harus diisi',
+    })
+    .min(1, 'Kode unit harus diisi'),
+  parentId: z.preprocess(
+    (input: unknown) => {
+      if (typeof input === 'string') {
+        // Handle empty string case
+        if (input.trim() === '') {
+          return 0
+        }
+        return Number(input)
+      }
+
+      return input
+    },
+    z
+      .number({
+        required_error: 'Instalasi induk harus dipilih',
+      })
+      .refine((num) => num > 0, 'Instalasi induk harus dipilih'),
+  ),
+})
diff --git a/app/components/content/unit/list-prev.vue b/app/components/content/unit/list-prev.vue
new file mode 100644
index 00000000..e5498f25
--- /dev/null
+++ b/app/components/content/unit/list-prev.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { schemaConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+async function fetchUnitData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUnitList,
+} = usePaginatedList({
+  fetchFn: fetchUnitData,
+  entityName: 'unit',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Unit',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/unit/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/unit', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Unit created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Unit" size="lg" prevent-outside>
+    <AppUnitEntryFormPrev
+      :unit="unitConf" :schema="schemaConf" :initial-values="{ name: '', code: '', parentId: '' }"
+      @submit="onSubmitForm" @cancel="onCancelForm"
+/>
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+>
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
new file mode 100644
index 00000000..03edd231
--- /dev/null
+++ b/app/components/content/unit/list.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppUnitList from '~/components/app/unit/list.vue'
+import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { UnitSchema, type UnitFormData } from '~/schemas/unit.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/unit.handler'
+
+// Services
+import { getList, getDetail } from '~/services/unit.service'
+import { getValueLabelList as getInstallationList } from '~/services/installation.service'
+
+const installations = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUnitList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'installation',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'unit',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentUnitDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Detail Unit'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Edit Unit'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  installations.value = await getInstallationList()
+  await getUnitList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppUnitList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Unit'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppUnitEntryForm
+      :schema="UnitSchema"
+      :installations="installations"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: UnitFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getUnitList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getUnitList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getUnitList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
new file mode 100644
index 00000000..15498b15
--- /dev/null
+++ b/app/components/content/uom/list.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppUomEntryForm from '~/components/app/uom/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { UomSchema, type UomFormData } from '~/schemas/uom.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/uom.handler'
+
+// Services
+import { getList, getDetail } from '~/services/uom.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUomList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'uom',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Uom',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentUomDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Detail Uom'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Edit Uom'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getUomList()
+})
+</script>
+
+<template>
+  <div class="p-4">
+    <Header
+      v-model="searchInput"
+      :prep="headerPrep"
+      :ref-search-nav="headerPrep.refSearchNav"
+      @search="handleSearch"
+    />
+
+    <AppUomList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Uom'"
+      size="lg"
+      prevent-outside
+      @update:open="
+        (value: any) => {
+          onResetState()
+          isFormEntryDialogOpen = value
+        }
+      "
+    >
+      <AppUomEntryForm
+        :schema="UomSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: UomFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getUomList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getUomList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getUomList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.name">
+            <strong>Nama:</strong>
+            {{ record.name }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.code }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/content/user/entry.vue b/app/components/content/user/entry.vue
new file mode 100644
index 00000000..30c2e1d7
--- /dev/null
+++ b/app/components/content/user/entry.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/user')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Dokter
+  </div>
+  <div>
+    <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+  </div>
+  <AppUserEntryForm v-model="data" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/content/user/list.vue b/app/components/content/user/list.vue
new file mode 100644
index 00000000..d9ce6fc0
--- /dev/null
+++ b/app/components/content/user/list.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'User',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/human-src/employee/add'),
+  },
+}
+
+async function getDoctorList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/doctor')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getDoctorList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+</template>
diff --git a/app/components/content/warehouse/list.vue b/app/components/content/warehouse/list.vue
new file mode 100644
index 00000000..a17ae9bb
--- /dev/null
+++ b/app/components/content/warehouse/list.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppWarehouseList from '~/components/app/warehouse/list.vue'
+import AppWarehouseEntryForm from '~/components/app/warehouse/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.warehouse,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'warehouse',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Gudang',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Gudang'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Gudang'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.floor })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppWarehouseList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Gudang'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppWarehouseEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
new file mode 100644
index 00000000..4f51e42c
--- /dev/null
+++ b/app/components/layout/AppSidebar.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const navMenu = ref([])
+
+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 navMenuBottom: any[] = [
+  {
+    title: 'Help & Support',
+    icon: 'i-lucide-circle-help',
+    link: 'https://github.com/simrs/simrs-fe',
+  },
+]
+
+onMounted(async () => {
+  await setMenu()
+})
+
+function resolveNavItemComponent(item: any): any {
+  if ('children' in item) return resolveComponent('LayoutSidebarNavGroup')
+
+  return resolveComponent('LayoutSidebarNavLink')
+}
+
+async function setMenu() {
+  const position_code = 'sys'
+  const res = await fetch(`/side-menu-items/${position_code}.json`)
+  const rawMenu = await res.text()
+  navMenu.value = JSON.parse(rawMenu)
+}
+</script>
+
+<template>
+  <Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
+    <SidebarHeader>
+      <LayoutSidebarNavHeader :teams="teams" />
+    </SidebarHeader>
+    <SidebarContent>
+      <template v-if="navMenu.length > 0">
+        <SidebarGroup v-for="(nav, indexGroup) in navMenu" :key="indexGroup">
+          <SidebarGroupLabel v-if="nav.heading">
+            {{ nav.heading }}
+          </SidebarGroupLabel>
+          <component
+            :is="resolveNavItemComponent(item)"
+            v-for="(item, index) in nav.items"
+            :key="index"
+            :item="item"
+            class="my-1 mb-1"
+          />
+        </SidebarGroup>
+      </template>
+      <template v-else>
+        <div class="p-5">
+          <div v-for="n in 10" :key="n" class="my-4 h-8 animate-pulse rounded bg-gray-200 py-2"></div>
+        </div>
+      </template>
+      <SidebarGroup class="mt-auto">
+        <component
+          :is="resolveNavItemComponent(item)"
+          v-for="(item, index) in navMenuBottom"
+          :key="index"
+          :item="item"
+          size="sm"
+        />
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarFooter>
+      <LayoutSidebarNavFooter />
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
+
+<style scoped></style>
diff --git a/app/components/layout/Auth.vue b/app/components/layout/Auth.vue
new file mode 100644
index 00000000..7ead292a
--- /dev/null
+++ b/app/components/layout/Auth.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  reverse?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="relative flex h-dvh items-center justify-center px-4 lg:max-w-none lg:px-0"
+    :class="{ 'flex-row-reverse': reverse }"
+  >
+    <div class="bg-muted relative hidden h-full flex-1 flex-col p-10 text-white lg:flex dark:border-r">
+      <div class="absolute inset-0 bg-zinc-900" />
+      <div class="relative z-20 flex items-center text-lg font-medium">RSSA</div>
+      <div class="relative z-20 mt-auto">
+        <blockquote class="space-y-2">
+          <p class="text-lg">
+            &ldquo;This library has saved me countless hours of work and helped me deliver stunning designs to my
+            clients faster than ever before.&rdquo;
+          </p>
+          <footer class="text-sm">Sofia Davis</footer>
+        </blockquote>
+      </div>
+    </div>
+    <div class="mx-auto flex-1 lg:p-8">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/layout/Header.vue b/app/components/layout/Header.vue
new file mode 100644
index 00000000..64f71058
--- /dev/null
+++ b/app/components/layout/Header.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import ThemeToggle from "./ThemeToggle.vue"
+
+const route = useRoute()
+
+function setLinks() {
+  if (route.path === '/') {
+    return [{ title: 'Home', href: '/' }]
+  }
+
+  const segments = route.path.split('/').filter((item) => item !== '')
+
+  const breadcrumbs = segments.map((item, index) => {
+    // Bersihkan query parameters dari segment jika ada
+    const cleanItem = item.split('?')[0] || item
+    const str = cleanItem.replace(/-/g, ' ')
+    const title = str
+      .split(' ')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ')
+
+    return {
+      title,
+      href: `/${segments.slice(0, index + 1).map(seg => seg.split('?')[0] || seg).join('/')}`,
+    }
+  })
+
+  return [{ title: 'Home', href: '/' }, ...breadcrumbs]
+}
+
+const links = ref<
+  {
+    title: string
+    href: string
+  }[]
+>(setLinks())
+
+watch(
+  () => route.path,
+  (val) => {
+    if (val) {
+      links.value = setLinks()
+    }
+  },
+)
+</script>
+
+<template>
+  <header class="h-53px bg-background sticky top-0 z-10 flex items-center gap-4 border-b px-4 md:px-6">
+    <div class="flex w-full items-center gap-4">
+      <SidebarTrigger />
+      <Separator orientation="vertical" class="h-4" />
+      <PubMyUiBreadcrumb :links="links" />
+    </div>
+     <div class="ml-auto flex items-center gap-2">
+       <slot />
+       <ThemeToggle />
+     </div>
+  </header>
+</template>
+
+<style scoped></style>
diff --git a/app/components/layout/SidebarNavFooter.vue b/app/components/layout/SidebarNavFooter.vue
new file mode 100644
index 00000000..68d8d9a2
--- /dev/null
+++ b/app/components/layout/SidebarNavFooter.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { useSidebar } from '~/components/pub/ui/sidebar'
+
+// defineProps<{
+//   user: {
+//     name: string
+//     email: string
+//     avatar: string
+//   }
+// }>()
+
+const { isMobile } = useSidebar()
+const { logout } = useUserStore()
+const userStore = useUserStore().user
+
+function handleLogout() {
+  navigateTo('/auth/login')
+  logout()
+}
+
+const showModalTheme = ref(false)
+</script>
+
+<template>
+  <ClientOnly>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuButton
+              size="lg"
+              class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                <AvatarFallback class="rounded-lg">
+                  {{
+                    userStore?.user_name
+                      ?.split(' ')
+                      .map((n) => n[0])
+                      .join('') || ''
+                  }}
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
+                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+              </div>
+              <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg bg-white"
+            :side="isMobile ? 'bottom' : 'right'"
+            align="end"
+          >
+            <DropdownMenuLabel class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar class="h-8 w-8 rounded-lg">
+                  <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                  <AvatarFallback class="rounded-lg">
+                    {{
+                      userStore?.user_name
+                        ?.split(' ')
+                        .map((n) => n[0])
+                        .join('') || ''
+                    }}
+                  </AvatarFallback>
+                </Avatar>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
+                  <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
+                <Icon name="i-lucide-user" />
+                Profile
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem class="hover:bg-gray-100" @click="handleLogout">
+              <Icon name="i-lucide-log-out" />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </ClientOnly>
+</template>
+
+<style scoped></style>
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
new file mode 100644
index 00000000..fb06a4c7
--- /dev/null
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { SidebarMenuButtonVariants } from '~/components/pub/ui/sidebar'
+import { useSidebar } from '~/components/pub/ui/sidebar'
+
+withDefaults(
+  defineProps<{
+    item: any
+    size?: SidebarMenuButtonVariants['size']
+  }>(),
+  {
+    size: 'default',
+  },
+)
+
+const { setOpenMobile } = useSidebar()
+
+const openCollapsible = ref(false)
+</script>
+
+<template>
+  <SidebarMenu>
+    <Collapsible :key="item.title" v-model:open="openCollapsible" as-child class="group/collapsible ">
+      <SidebarMenuItem>
+        <CollapsibleTrigger as-child>
+          <SidebarMenuButton :tooltip="item.title" :size="size" class="md:!text-xs 2xl:!text-sm">
+            <Icon :name="item.icon || ''" mode="svg" />
+            <span class="mx-2">{{ item.title }}</span>
+            <Icon
+              name="i-lucide-chevron-right"
+              class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+            />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            <SidebarMenuSubItem v-for="subItem in item.children" :key="subItem.title">
+              <SidebarMenuSubButton as-child>
+                <NuxtLink
+                  :to="subItem.link"
+                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
+                  active-class="bg-primary text-white"
+                  @click="setOpenMobile(false)"
+                >
+                  <span>{{ subItem.title }}</span>
+                </NuxtLink>
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  </SidebarMenu>
+</template>
+
+<style scoped></style>
diff --git a/app/components/layout/SidebarNavHeader.vue b/app/components/layout/SidebarNavHeader.vue
new file mode 100644
index 00000000..4dd56bdb
--- /dev/null
+++ b/app/components/layout/SidebarNavHeader.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = defineProps<{
+  teams: {
+    name: string
+    logo: string
+    plan: string
+  }[]
+}>()
+
+const activeTeam = ref(props.teams[0])
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div
+              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+            >
+              <img :src="activeTeam?.logo" class="h-full w-full" />
+            </div>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">
+                {{ activeTeam?.name }}
+              </span>
+              <span class="truncate text-xs">{{ activeTeam?.plan }}</span>
+            </div>
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
+
+<style scoped></style>
diff --git a/app/components/layout/SidebarNavLink.vue b/app/components/layout/SidebarNavLink.vue
new file mode 100644
index 00000000..322a635b
--- /dev/null
+++ b/app/components/layout/SidebarNavLink.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { SidebarMenuButtonVariants } from '~/components/pub/ui/sidebar'
+import { useSidebar } from '~/components/pub/ui/sidebar'
+
+withDefaults(
+  defineProps<{
+    item: any
+    size?: SidebarMenuButtonVariants['size']
+  }>(),
+  {
+    size: 'default',
+  },
+)
+
+const { setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <SidebarMenuButton as-child :tooltip="item.title" :size="size" class="">
+        <NuxtLink
+          :to="item.link"
+          class="group flex items-center gap-3 rounded-lg px-2 py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
+          active-class="bg-primary text-white"
+          @click="setOpenMobile(false)"
+        >
+          <Icon :name="item.icon || ''" mode="svg" />
+          <span class="mx-1">{{ item.title }}</span>
+          <span
+            v-if="item.new"
+            class="bg-#adfa1d rounded-md px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline "
+          >
+            New
+          </span>
+        </NuxtLink>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
+
+<style scoped></style>
diff --git a/app/components/layout/ThemeToggle.vue b/app/components/layout/ThemeToggle.vue
new file mode 100644
index 00000000..d59dd19f
--- /dev/null
+++ b/app/components/layout/ThemeToggle.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useTheme } from '~/composables/useTheme'
+const { theme, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <button
+    @click="toggleTheme"
+    class="ml-2 rounded border px-2 py-1 text-sm"
+    :title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
+  >
+    <span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4 mt-1" /></span>
+    <span v-else><Icon name="i-lucide-sun" class="h-4 w-4 mt-1" /></span>
+  </button>
+</template>
diff --git a/app/components/pub/my-ui/breadcrumb/index.vue b/app/components/pub/my-ui/breadcrumb/index.vue
new file mode 100644
index 00000000..306ffe5b
--- /dev/null
+++ b/app/components/pub/my-ui/breadcrumb/index.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '~/components/pub/ui/breadcrumb'
+
+const props = defineProps<{
+  links: {
+    title: string
+    href: string
+  }[]
+}>()
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem v-for="(link, index) in props.links" :key="link.href">
+        <BreadcrumbLink as-child>
+          <NuxtLink :to="link.href">
+            {{ link.title }}
+          </NuxtLink>
+        </BreadcrumbLink>
+
+        <BreadcrumbSeparator v-if="index < props.links.length - 1" />
+      </BreadcrumbItem>
+    </BreadcrumbList>
+
+  </Breadcrumb>
+</template>
diff --git a/app/components/pub/my-ui/combobox/combobox-paginated.vue b/app/components/pub/my-ui/combobox/combobox-paginated.vue
new file mode 100644
index 00000000..74b69ef7
--- /dev/null
+++ b/app/components/pub/my-ui/combobox/combobox-paginated.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+import { type Item } from './index'
+
+const props = defineProps<{
+  id?: string
+  modelValue?: string
+  items: Item[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyMessage?: string
+  class?: string
+  isDisabled?: boolean
+  page?: number
+  totalPage?: number
+  hasNext?: boolean
+  hasPrev?: boolean
+  isLoading?: boolean
+  searchText?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:searchText': [value: string]
+  'page-change': [page: number]
+  next: []
+  prev: []
+}>()
+
+const open = ref(false)
+const internalSearchText = ref(props.searchText || '')
+
+// Keep internal search text synced with props
+watch(
+  () => props.searchText,
+  (val) => {
+    if (val !== internalSearchText.value) internalSearchText.value = val || ''
+  },
+)
+
+const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
+const displayText = computed(() => {
+  if (selectedItem.value?.label) return selectedItem.value.label
+  return props.placeholder || 'Pilih item'
+})
+
+const searchableItems = computed(() => {
+  const itemsWithSearch = props.items.map((item) => ({
+    ...item,
+    searchValue: `${item.code || ''} ${item.label}`.trim(),
+    isSelected: item.value === props.modelValue,
+  }))
+
+  return itemsWithSearch.sort((a, b) => {
+    const aPriority = a.priority ?? 0
+    const bPriority = b.priority ?? 0
+    if (aPriority !== bPriority) return bPriority - aPriority
+    if (a.isSelected && !b.isSelected) return -1
+    if (!a.isSelected && b.isSelected) return 1
+    return a.label.localeCompare(b.label)
+  })
+})
+
+function onSelect(item: Item) {
+  emit('update:modelValue', item.value)
+  open.value = false
+}
+
+function onSearchInput(value: string) {
+  console.log('[ComboboxPaginated] emit update:searchText', value)
+  internalSearchText.value = value
+  emit('update:searchText', value)
+}
+
+function handlePrev() {
+  if (props.hasPrev) emit('prev')
+}
+
+function handleNext() {
+  if (props.hasNext) emit('next')
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        :id="props.id"
+        :disabled="props.isDisabled"
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        :aria-controls="`${props.id}-list`"
+        :aria-describedby="`${props.id}-search`"
+        :class="
+          cn(
+            'h-8 w-full justify-between rounded-md border px-3 font-normal focus:outline-none focus:ring-1 focus:ring-black dark:!border-slate-400 dark:focus:ring-white md:text-xs 2xl:h-9 2xl:text-sm',
+            {
+              'cursor-not-allowed border-gray-300 bg-gray-100 text-gray-500 opacity-50': props.isDisabled,
+              'border-gray-400 bg-white text-black hover:bg-gray-50 dark:border-gray-600 dark:bg-slate-950 dark:text-white dark:hover:bg-gray-700':
+                !props.isDisabled,
+              'text-gray-400 dark:text-gray-500': !props.modelValue && !props.isDisabled,
+            },
+            props.class,
+          )
+        "
+      >
+        {{ displayText }}
+        <Icon
+          name="i-lucide-chevrons-up-down"
+          :class="
+            cn('ml-2 h-4 w-4 shrink-0', {
+              'opacity-30': props.isDisabled,
+              'text-gray-500 opacity-50 dark:text-gray-300': !props.isDisabled,
+            })
+          "
+        />
+      </Button>
+    </PopoverTrigger>
+
+    <PopoverContent
+      class="w-[var(--radix-popover-trigger-width)] border border-gray-200 bg-white p-0 dark:border-gray-700 dark:bg-gray-800"
+    >
+      <Command class="bg-white dark:bg-gray-800">
+        <CommandInput
+          :id="`${props.id}-search`"
+          class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+          :placeholder="searchPlaceholder || 'Cari...'"
+          v-model="internalSearchText"
+          @input="onSearchInput(($event.target as HTMLInputElement).value)"
+          :aria-label="`Cari ${displayText}`"
+        />
+
+        <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+          {{ emptyMessage || 'Item tidak ditemukan.' }}
+        </CommandEmpty>
+
+        <CommandList
+          :id="`${props.id}-list`"
+          role="listbox"
+          class="max-h-60 overflow-auto"
+        >
+          <CommandGroup>
+            <CommandItem
+              v-for="item in searchableItems"
+              :key="item.value"
+              :value="item.value"
+              :class="
+                cn(
+                  'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 md:text-xs xl:text-sm',
+                  'text-black focus:outline-none dark:text-white',
+                  'hover:bg-primary hover:text-white focus:bg-primary focus:text-white',
+                  'data-[highlighted]:bg-primary data-[highlighted]:text-white',
+                )
+              "
+              @select="onSelect(item)"
+            >
+              <div class="flex w-full items-center justify-between">
+                <span>{{ item.label }}</span>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="item.code"
+                    class="text-xs text-muted-foreground"
+                  >
+                    {{ item.code }}
+                  </span>
+                  <Icon
+                    name="i-lucide-check"
+                    :class="cn('h-4 w-4', props.modelValue === item.value ? 'opacity-100' : 'opacity-0')"
+                  />
+                </div>
+              </div>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+
+        <div class="flex items-center justify-between border-t border-gray-200 p-2 text-xs dark:border-gray-700">
+          <div class="flex items-center gap-2">
+            <Icon
+              v-if="props.isLoading"
+              name="i-lucide-loader-2"
+              class="h-3 w-3 animate-spin"
+            />
+            <span v-else>{{ props.page || 1 }} / {{ props.totalPage || 1 }}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              size="sm"
+              variant="ghost"
+              :disabled="!props.hasPrev || props.isDisabled"
+              @click="handlePrev"
+            >
+              Prev
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              :disabled="!props.hasNext || props.isDisabled"
+              @click="handleNext"
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
new file mode 100644
index 00000000..23505393
--- /dev/null
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+import { type Item } from './index'
+
+const props = defineProps<{
+  id?: string
+  modelValue?: string
+  items: Item[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyMessage?: string
+  class?: string
+  isDisabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const open = ref(false)
+
+const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
+
+const displayText = computed(() => {
+  console.log(selectedItem)
+  if (selectedItem.value?.label) {
+    return selectedItem.value.label
+  }
+  return props.placeholder || 'Pilih item'
+})
+
+watch(props, () => {
+  console.log(props.modelValue)
+})
+
+const searchableItems = computed(() => {
+  const itemsWithSearch = props.items.map((item) => ({
+    ...item,
+    searchValue: `${item.code || ''} ${item.label}`.trim(),
+    isSelected: item.value === props.modelValue,
+  }))
+
+  return itemsWithSearch.sort((a, b) => {
+    const aPriority = a.priority ?? 0
+    const bPriority = b.priority ?? 0
+    if (aPriority !== bPriority) {
+      return bPriority - aPriority
+    }
+
+    if (a.isSelected && !b.isSelected) return -1
+    if (!a.isSelected && b.isSelected) return 1
+
+    return a.label.localeCompare(b.label)
+  })
+})
+
+function onSelect(item: Item) {
+  emit('update:modelValue', item.value)
+  open.value = false
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        :id="props.id"
+        :disabled="props.isDisabled"
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        :aria-controls="`${props.id}-list`"
+        :aria-describedby="`${props.id}-search`"
+        :class="
+          cn(
+            'h-8 w-full justify-between rounded-md border px-3 font-normal focus:outline-none focus:ring-1 focus:ring-black dark:!border-slate-400 dark:focus:ring-white md:text-xs 2xl:h-9 2xl:text-sm',
+            {
+              'cursor-not-allowed border-gray-300 bg-gray-100 text-gray-500 opacity-50': props.isDisabled,
+              'border-gray-400 bg-white text-black hover:bg-gray-50 dark:border-gray-600 dark:bg-slate-950 dark:text-white dark:hover:bg-gray-700':
+                !props.isDisabled,
+              'text-gray-400 dark:text-gray-500': !modelValue && !props.isDisabled,
+            },
+            props.class,
+          )
+        "
+      >
+        {{ displayText }}
+        <Icon
+          name="i-lucide-chevrons-up-down"
+          :class="
+            cn('ml-2 h-4 w-4 shrink-0', {
+              'opacity-30': props.isDisabled,
+              'text-gray-500 opacity-50 dark:text-gray-300': !props.isDisabled,
+            })
+          "
+        />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent
+      class="w-[var(--radix-popover-trigger-width)] border border-gray-200 bg-white p-0 dark:border-gray-700 dark:bg-gray-800"
+    >
+      <Command class="bg-white dark:bg-gray-800">
+        <CommandInput
+          :id="`${props.id}-search`"
+          class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+          :placeholder="searchPlaceholder || 'Cari...'"
+          :aria-label="`Cari ${displayText}`"
+        />
+        <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+          {{ emptyMessage || 'Item tidak ditemukan.' }}
+        </CommandEmpty>
+        <CommandList
+          :id="`${props.id}-list`"
+          role="listbox"
+          class="max-h-60 overflow-auto"
+        >
+          <CommandGroup>
+            <CommandItem
+              v-for="item in searchableItems"
+              :key="item.value"
+              :value="item.searchValue"
+              :class="
+                cn(
+                  'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 md:text-xs xl:text-sm',
+                  'text-black focus:outline-none dark:text-white',
+                  'hover:bg-primary hover:text-white focus:bg-primary focus:text-white',
+                  'data-[highlighted]:bg-primary data-[highlighted]:text-white',
+                )
+              "
+              @select="onSelect(item)"
+            >
+              <div class="flex w-full items-center justify-between">
+                <span>{{ item.label }}</span>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="item.code"
+                    class="text-xs text-muted-foreground"
+                  >
+                    {{ item.code }}
+                  </span>
+                  <Icon
+                    name="i-lucide-check"
+                    :class="cn('h-4 w-4', modelValue === item.value ? 'opacity-100' : 'opacity-0')"
+                  />
+                </div>
+              </div>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
new file mode 100644
index 00000000..82a3b3cd
--- /dev/null
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -0,0 +1,23 @@
+export interface Item {
+  value: string
+  label: string
+  code?: string
+  priority?: number
+}
+
+export function recStrToItem(input: Record<string, string>): Item[] {
+  const items: Item[] = []
+  let idx = 0;
+  for (const key in input) {
+    if (input.hasOwnProperty(key)) {
+      items.push({
+        value: key || ('unknown-' + idx),
+        label: input[key] || ('unknown-' + idx),
+      })
+    }
+    idx++
+  }
+  return items
+}
+
+export { default as Combobox } from './combobox.vue'
diff --git a/app/components/pub/my-ui/comp-tab/comp-tab.vue b/app/components/pub/my-ui/comp-tab/comp-tab.vue
new file mode 100644
index 00000000..de045bce
--- /dev/null
+++ b/app/components/pub/my-ui/comp-tab/comp-tab.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type TabItem } from './type'
+
+const props = defineProps<{
+  initialActiveTab: string
+  data: TabItem[]
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+function changeTab(value: string) {
+  activeTab.value = value;
+  emit('changeTab', value);
+}
+</script>
+
+<template>
+  <!-- Tabs -->
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+    <Button
+      v-for="tab in data"
+      :key="tab.value"
+      :data-active="activeTab === tab.value"
+      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
+      @click="changeTab(tab.value)"
+    >
+      {{ tab.label }}
+    </Button>
+  </div>
+
+  <!-- Active Tab Content -->
+  <div class="mt-4 rounded-md border p-4">
+    <component
+      v-if="data.find((t) => t.value === activeTab)?.component"
+      :is="data.find((t) => t.value === activeTab)?.component"
+      :label="data.find((t) => t.value === activeTab)?.label"
+      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/comp-tab/type.ts b/app/components/pub/my-ui/comp-tab/type.ts
new file mode 100644
index 00000000..e6faacce
--- /dev/null
+++ b/app/components/pub/my-ui/comp-tab/type.ts
@@ -0,0 +1,6 @@
+export interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
diff --git a/app/components/pub/my-ui/confirmation/README.md b/app/components/pub/my-ui/confirmation/README.md
new file mode 100644
index 00000000..27268cad
--- /dev/null
+++ b/app/components/pub/my-ui/confirmation/README.md
@@ -0,0 +1,137 @@
+# Confirmation Modal Components
+
+Sistem confirmation modal yang modular dan dapat digunakan kembali di seluruh aplikasi.
+
+## Components
+
+### 1. `confirmation.vue` - Base Confirmation Modal
+
+Komponen dasar untuk modal konfirmasi yang dapat dikustomisasi.
+
+**Props:**
+- `open?: boolean` - Status modal (terbuka/tertutup)
+- `title?: string` - Judul modal (default: "Konfirmasi")
+- `message?: string` - Pesan konfirmasi (default: "Apakah Anda yakin ingin melanjutkan?")
+- `confirmText?: string` - Text tombol konfirmasi (default: "Ya")
+- `cancelText?: string` - Text tombol batal (default: "Batal")
+- `variant?: 'default' | 'destructive' | 'warning'` - Varian tampilan (default: "default")
+- `size?: 'sm' | 'md' | 'lg' | 'xl'` - Ukuran modal (default: "md")
+
+**Events:**
+- `@confirm` - Dipanggil saat tombol konfirmasi diklik
+- `@cancel` - Dipanggil saat tombol batal diklik
+- `@update:open` - Dipanggil saat status modal berubah
+
+**Contoh penggunaan:**
+```vue
+<template>
+  <Confirmation
+    v-model:open="isConfirmOpen"
+    title="Hapus Data"
+    message="Apakah Anda yakin ingin menghapus data ini?"
+    confirm-text="Hapus"
+    variant="destructive"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  />
+</template>
+```
+
+### 2. `record-confirmation.vue` - Record-specific Confirmation
+
+Komponen khusus untuk konfirmasi operasi pada record/data tertentu.
+
+**Props:**
+- `open?: boolean` - Status modal
+- `action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'` - Jenis aksi (default: "delete")
+- `record?: RecordData | null` - Data record yang akan diproses
+- `customTitle?: string` - Custom judul (opsional)
+- `customMessage?: string` - Custom pesan (opsional)
+- `customConfirmText?: string` - Custom text tombol konfirmasi (opsional)
+- `customCancelText?: string` - Custom text tombol batal (opsional)
+
+**Events:**
+- `@confirm` - Dipanggil dengan parameter `(record, action)`
+- `@cancel` - Dipanggil saat batal
+- `@update:open` - Update status modal
+
+**Contoh penggunaan:**
+```vue
+<template>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmOpen"
+    action="delete"
+    :record="selectedRecord"
+    @confirm="handleDeleteRecord"
+    @cancel="handleCancel"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p><strong>Nama:</strong> {{ record?.name }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+```
+
+## Action Types
+
+Record confirmation mendukung beberapa jenis aksi dengan konfigurasi default:
+
+- **delete**: Hapus data (variant: destructive, warna merah)
+- **deactivate**: Nonaktifkan data (variant: warning, warna kuning)
+- **activate**: Aktifkan data (variant: default, warna biru)
+- **archive**: Arsipkan data (variant: warning, warna kuning)
+- **restore**: Pulihkan data (variant: default, warna biru)
+
+## Integration Example
+
+Contoh implementasi di komponen list:
+
+```vue
+<script setup>
+// State management
+const isRecordConfirmationOpen = ref(false)
+const selectedRecord = ref(null)
+const confirmAction = ref('delete')
+
+// Handle action dari table
+function handleRowAction(action, record) {
+  selectedRecord.value = record
+  confirmAction.value = action
+  isRecordConfirmationOpen.value = true
+}
+
+// Handle konfirmasi
+async function handleConfirmAction(record, action) {
+  try {
+    // API call berdasarkan action
+    await performAction(action, record.id)
+    // Refresh data
+    await refreshData()
+  } catch (error) {
+    // Handle error
+  }
+}
+</script>
+
+<template>
+  <!-- Your list component -->
+  <DataTable @action="handleRowAction" />
+  
+  <!-- Confirmation modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    :action="confirmAction"
+    :record="selectedRecord"
+    @confirm="handleConfirmAction"
+  />
+</template>
+```
+
+## Styling
+
+Komponen menggunakan Tailwind CSS dan shadcn/ui components. Pastikan dependencies berikut tersedia:
+- `~/components/pub/my-ui/modal/dialog.vue`
+- `~/components/pub/ui/button`
diff --git a/app/components/pub/my-ui/confirmation/confirmation.vue b/app/components/pub/my-ui/confirmation/confirmation.vue
new file mode 100644
index 00000000..590f328d
--- /dev/null
+++ b/app/components/pub/my-ui/confirmation/confirmation.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { Button } from '~/components/pub/ui/button'
+
+interface ConfirmationProps {
+  open?: boolean
+  title?: string
+  message?: string
+  confirmText?: string
+  cancelText?: string
+  variant?: 'default' | 'destructive' | 'warning'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+interface ConfirmationEmits {
+  'update:open': [value: boolean]
+  'confirm': []
+  'cancel': []
+}
+
+const props = withDefaults(defineProps<ConfirmationProps>(), {
+  open: false,
+  title: 'Konfirmasi',
+  message: 'Apakah Anda yakin ingin melanjutkan?',
+  confirmText: 'Ya',
+  cancelText: 'Batal',
+  variant: 'default',
+  size: 'md',
+})
+
+const emit = defineEmits<ConfirmationEmits>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const variantClasses = computed(() => {
+  const variants = {
+    default: {
+      icon: 'i-lucide-help-circle',
+      iconColor: 'text-blue-500',
+      confirmVariant: 'default' as const,
+    },
+    destructive: {
+      icon: 'i-lucide-alert-triangle',
+      iconColor: 'text-red-500',
+      confirmVariant: 'destructive' as const,
+    },
+    warning: {
+      icon: 'i-lucide-alert-circle',
+      iconColor: 'text-yellow-500',
+      confirmVariant: 'default' as const,
+    },
+  }
+  return variants[props.variant]
+})
+
+function handleConfirm() {
+  emit('confirm')
+  emit('update:open', false)
+}
+
+function handleCancel() {
+  emit('cancel')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen" :title="title" :size="size">
+    <div class="space-y-4">
+      <!-- Icon dan pesan -->
+      <div class="flex items-start gap-3">
+        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
+        <div class="flex-1">
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ message }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Slot untuk konten custom -->
+      <div v-if="$slots.default">
+        <slot />
+      </div>
+
+      <!-- Footer buttons -->
+      <div class="flex justify-end gap-3 pt-4">
+        <Button variant="outline" @click="handleCancel">
+          {{ cancelText }}
+        </Button>
+        <Button :variant="variantClasses.confirmVariant" @click="handleConfirm">
+          {{ confirmText }}
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
diff --git a/app/components/pub/my-ui/confirmation/record-confirmation.vue b/app/components/pub/my-ui/confirmation/record-confirmation.vue
new file mode 100644
index 00000000..cff54b2b
--- /dev/null
+++ b/app/components/pub/my-ui/confirmation/record-confirmation.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import Confirmation from './confirmation.vue'
+
+interface RecordData {
+  id: number | string
+  name?: string
+  title?: string
+  code?: string
+  [key: string]: any
+}
+
+interface RecordConfirmationProps {
+  open?: boolean
+  action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'
+  record?: RecordData | null
+  customTitle?: string
+  customMessage?: string
+  customConfirmText?: string
+  customCancelText?: string
+}
+
+interface RecordConfirmationEmits {
+  'update:open': [value: boolean]
+  'confirm': [record: RecordData, action: string]
+  'cancel': []
+}
+
+const props = withDefaults(defineProps<RecordConfirmationProps>(), {
+  open: false,
+  action: 'delete',
+  record: null,
+  customTitle: '',
+  customMessage: '',
+  customConfirmText: '',
+  customCancelText: '',
+})
+
+const emit = defineEmits<RecordConfirmationEmits>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const actionConfig = computed(() => {
+  const configs = {
+    delete: {
+      title: 'Hapus Data',
+      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
+      confirmText: 'Hapus',
+      variant: 'destructive' as const,
+    },
+    deactivate: {
+      title: 'Nonaktifkan Data',
+      message: 'Apakah Anda yakin ingin menonaktifkan data ini?',
+      confirmText: 'Nonaktifkan',
+      variant: 'warning' as const,
+    },
+    activate: {
+      title: 'Aktifkan Data',
+      message: 'Apakah Anda yakin ingin mengaktifkan data ini?',
+      confirmText: 'Aktifkan',
+      variant: 'default' as const,
+    },
+    archive: {
+      title: 'Arsipkan Data',
+      message: 'Apakah Anda yakin ingin mengarsipkan data ini?',
+      confirmText: 'Arsipkan',
+      variant: 'warning' as const,
+    },
+    restore: {
+      title: 'Pulihkan Data',
+      message: 'Apakah Anda yakin ingin memulihkan data ini?',
+      confirmText: 'Pulihkan',
+      variant: 'default' as const,
+    },
+  }
+  return configs[props.action]
+})
+
+const finalTitle = computed(() => {
+  return props.customTitle || actionConfig.value.title
+})
+
+const finalMessage = computed(() => {
+  if (props.customMessage) {
+    return props.customMessage
+  }
+
+  const baseMessage = actionConfig.value.message
+  // if (props.record) {
+  // const recordName = props.record.name || props.record.title || props.record.code || `ID: ${props.record.id}`
+  // return `${baseMessage}\n\nData: ${recordName}`
+  // }
+
+  return baseMessage
+})
+
+const finalConfirmText = computed(() => {
+  return props.customConfirmText || actionConfig.value.confirmText
+})
+
+const finalCancelText = computed(() => {
+  return props.customCancelText || 'Batal'
+})
+
+function handleConfirm() {
+  if (props.record) {
+    emit('confirm', props.record, props.action)
+  }
+  emit('update:open', false)
+}
+
+function handleCancel() {
+  emit('cancel')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Confirmation
+v-model:open="isOpen" :title="finalTitle" :message="finalMessage" :confirm-text="finalConfirmText"
+    :cancel-text="finalCancelText" :variant="actionConfig.variant" size="md" @confirm="handleConfirm"
+    @cancel="handleCancel"
+>
+    <!-- Slot untuk informasi tambahan record -->
+    <div v-if="record && $slots.default" class="mt-4 p-3 bg-muted rounded-md">
+      <slot :record="record" :action="action" />
+    </div>
+  </Confirmation>
+</template>
diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
new file mode 100644
index 00000000..9d88ffee
--- /dev/null
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { isRef } from 'vue';
+import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
+import type { Config } from './index'
+import { Info } from 'lucide-vue-next'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+
+const props = defineProps<Config & { rows: unknown[] }>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any[] | any): void
+}>()
+
+const getSkeletonSize = computed(() => {
+  return props.skeletonSize || 5
+})
+const loader = inject('table_data_loader') as DataTableLoader
+
+// local state utk selection
+const selected = ref<any[]>([])
+
+function toggleSelection(row: any) {
+  if (props.selectMode === 'single') {
+    selected.value = [row]
+    emit('update:modelValue', row)
+  } else {
+    const idx = selected.value.findIndex((r) => r === row)
+    if (idx >= 0) {
+      selected.value.splice(idx, 1)
+    } else {
+      selected.value.push(row)
+    }
+    emit('update:modelValue', [...selected.value])
+  }
+}
+
+function deepFetch(data: Record<string, any>, key: string): string {
+  let result = '';
+  const keys = key.split('.')
+  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  for (let i = 0; i < keys.length; i++) {
+    let idx = keys[i] || ''
+    if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
+      if (i == keys.length - 1) {
+        return lastVal[idx];
+      } else {
+        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+      }
+    }
+  }
+  return result;
+}
+
+
+function handleActionCellClick(event: Event, _cellRef: string) {
+  // Prevent event if clicked directly on the button/dropdown
+  const target = event.target as HTMLElement
+  if (target.closest('button') || target.closest('[role="button"]')) {
+    return
+  }
+
+  // Find the dropdown trigger button and click it
+  const cell = event.currentTarget as HTMLElement
+  const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
+  if (triggerButton) {
+    ;(triggerButton as HTMLButtonElement).click()
+  }
+}
+</script>
+
+<template>
+  <Table>
+    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
+      <TableRow v-for="(hr, hrIdx) in headers">
+        <TableHead
+          v-for="(th, idx) in headers[hrIdx]"
+          :key="`head-${idx}`"
+          :class="`border ${th.classVal || ''}`"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
+        >
+          {{ th.label }}
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody v-if="loader?.isTableLoading">
+      <!-- Loading state with 5 skeleton rows -->
+      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+    <TableBody v-else-if="rows.length === 0">
+      <TableRow>
+        <TableCell :colspan="keys.length" class="py-8 text-center">
+          <div class="flex items-center justify-center">
+            <Info class="size-5 text-muted-foreground" />
+            <span class="ml-2">Tidak ada data tersedia</span>
+          </div>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+    <TableBody v-else>
+      <TableRow
+        v-for="(row, rowIndex) in rows"
+        :key="`row-${rowIndex}`"
+        :class="{
+          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
+          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
+        }"
+        @click="toggleSelection(row)"
+      >
+        <!-- opsional: kalau mau tampilkan checkbox/radio di cell pertama -->
+        <TableCell v-if="props.selectMode">
+          <input
+            v-if="props.selectMode === 'single'"
+            type="radio"
+            :checked="selected.includes(row)"
+            @change="toggleSelection(row)"
+          />
+          <input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
+        </TableCell>
+
+        <!-- lanjut render cell normal -->
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+          <!-- existing cell renderer -->
+          <component
+            :is="components?.[key]?.(row, rowIndex).component"
+            v-if="components?.[key]"
+            :rec="row"
+            :idx="rowIndex"
+            v-bind="components[key]?.(row, rowIndex).props"
+          />
+          <template v-else>
+            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
+            <template v-else>
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
+            </template>
+          </template>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
diff --git a/app/components/pub/my-ui/data-table/index.ts b/app/components/pub/my-ui/data-table/index.ts
new file mode 100644
index 00000000..69a90dbc
--- /dev/null
+++ b/app/components/pub/my-ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export * from './type'
+
+export { default as DataTable } from './data-table.vue'
diff --git a/app/components/pub/my-ui/data-table/type.ts b/app/components/pub/my-ui/data-table/type.ts
new file mode 100644
index 00000000..d7e7f611
--- /dev/null
+++ b/app/components/pub/my-ui/data-table/type.ts
@@ -0,0 +1,60 @@
+export type ComponentType = Component
+
+export interface Col {
+  span?: number
+  classVal?: string
+  style?: string
+  width?: number // specific for width
+  widthUnit?: string // specific for width
+}
+
+export interface Th {
+  label: string
+  colSpan?: number
+  rowSpan?: number
+  classVal?: string
+  childClassVal?: string
+  style?: string
+  childStyle?: string
+  hideOnSm?: boolean
+}
+
+export interface KeyLabel {
+  key: string
+  label: string
+}
+
+export interface RecComponent {
+  idx?: number
+  rec: object
+  props?: any
+  component: ComponentType
+}
+
+export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
+export type FuncComponent = (rec: unknown, idx: number) => RecComponent
+export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
+export type RecStrFuncComponent = Record<string, FuncComponent>
+
+export interface KeyNames {
+  key: string
+  label: string
+}
+
+export type Config = {
+  headers?: Th[][]
+  cols: Col[]
+  keys: string[]
+  delKeyNames?: KeyLabel[]
+  parses?: RecStrFuncUnknown
+  components?: RecStrFuncComponent
+  htmls?: RecStrFuncUnknown
+  skeletonSize?: number
+  selectMode?: 'single' | 'multiple'
+  modelValue?: any[] | any
+}
+
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}
diff --git a/app/components/pub/my-ui/data/dropdown-action-du.vue b/app/components/pub/my-ui/data/dropdown-action-du.vue
new file mode 100644
index 00000000..f2c668ad
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-du.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/data/dropdown-action-ducd.vue b/app/components/pub/my-ui/data/dropdown-action-ducd.vue
new file mode 100644
index 00000000..61f8d5d8
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-ducd.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Batal',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-x',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/data/dropdown-action-dud.vue b/app/components/pub/my-ui/data/dropdown-action-dud.vue
new file mode 100644
index 00000000..71979c7c
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-dud.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/data/dropdown-action-pdud.vue b/app/components/pub/my-ui/data/dropdown-action-pdud.vue
new file mode 100644
index 00000000..6ed6d778
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-pdud.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Proses',
+    onClick: () => {
+      process()
+    },
+    icon: 'i-lucide-file',
+  },
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/data/dropdown-action-ud.vue b/app/components/pub/my-ui/data/dropdown-action-ud.vue
new file mode 100644
index 00000000..8f71b362
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-ud.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+interface Props {
+  rec: ListItemDto
+  size?: 'default' | 'sm' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          :size="size"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
new file mode 100644
index 00000000..c0d283de
--- /dev/null
+++ b/app/components/pub/my-ui/data/types.ts
@@ -0,0 +1,84 @@
+// import type { ComponentType } from '@unovis/ts'
+import type { Component } from 'vue'
+
+export interface ListItemDto {
+  id: number
+  name: string
+  code: string
+}
+
+export type ComponentType = Component
+
+export interface ButtonNav {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  classVal?: string
+  classValExt?: string
+  icon?: string
+  label: string
+  onClick?: () => void
+}
+
+export interface QuickSearchNav {
+  inputClass?: string
+  inputPlaceHolder?: string
+  btnClass?: string
+  btnIcon?: string
+  btnLabel?: string
+  mainField?: string
+  searchParams: object
+  onSubmit?: (searchParams: object) => void
+}
+
+export interface RefSearchNav {
+  modelValue?: string
+  placeholder?: string
+  minLength?: number
+  debounceMs?: number
+  inputClass?: string
+  showValidationFeedback?: boolean
+  onInput: (val: string) => void
+  onClick: () => void
+  onClear: () => void
+}
+
+// prepared header for relatively common usage
+export interface HeaderPrep {
+  title?: string
+  icon?: string
+  refSearchNav?: RefSearchNav
+  quickSearchNav?: QuickSearchNav
+  filterNav?: ButtonNav
+  addNav?: ButtonNav
+  printNav?: ButtonNav
+}
+
+export interface KeyLabel {
+  key: string
+  label: string
+}
+
+export interface KeyNames {
+  key: string
+  label: string
+}
+
+export interface LinkItem {
+  label: string
+  icon?: string
+  href?: string // to cover the needs of stating full external origins full url
+  action?: string // for local paths
+  onClick?: (event: Event) => void
+  headerStatus?: boolean
+}
+
+export const ActionEvents = {
+  showConfirmDelete: 'showConfirmDel',
+  showEdit: 'showEdit',
+  showDetail: 'showDetail',
+  showProcess: 'showProcess',
+}
+
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}
diff --git a/app/components/pub/my-ui/datepicker/datepicker-single.vue b/app/components/pub/my-ui/datepicker/datepicker-single.vue
new file mode 100644
index 00000000..73f748ab
--- /dev/null
+++ b/app/components/pub/my-ui/datepicker/datepicker-single.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// helpers
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+// components
+import { Button } from '~/components/pub/ui/button'
+import Calendar from '~/components/pub/ui/calendar/Calendar.vue'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+
+const props = defineProps<{
+  placeholder?: string
+  modelValue?: Date | string | undefined
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | string | undefined]
+}>()
+
+const date = ref<Date | any>(undefined)
+
+watch(date, (value) => {
+  const newValue = format(value, 'yyyy-MM-dd', { locale: localeID })
+  emit('update:modelValue', newValue)
+})
+
+onMounted(() => {
+  if (props.modelValue) {
+    const value = props.modelValue
+    if (value instanceof Date) {
+      date.value = value
+    } else if (typeof value === 'string' && value) {
+      date.value = parseISO(value)
+    } else {
+      date.value = undefined
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col space-y-2">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right w-full h-8 2xl:h-9">
+          <div class="flex justify-between items-center w-full">
+            <p v-if="date">{{ format(date, 'PPP', { locale: localeID }) }}</p>
+            <p v-else class="text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
+            <Icon name="i-lucide-calendar"/>
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0">
+        <Calendar v-model="date" mode="single" locale="id" />
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
new file mode 100644
index 00000000..bf76c327
--- /dev/null
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+// ---------- Imports ----------
+import { computed, useSlots } from 'vue'
+
+// Types
+const props = defineProps({
+  mode: { type: String, default: 'entry' },
+  gridPoint: { type: String, default: 'lg' },
+  cellFlex: { type: Boolean, default: true },
+  cellFlexPoint: { type: String, default: 'md' },
+  labelSize: { type: String, default: 'medium' },
+  labelSizePoint: { type: String, default: 'md' },
+  colCount: { type: Number, default: 1 },
+  defaultClass: { type: String, default: 'mb-5' },
+  class: { type: String, default: '' },
+})
+
+const slots = useSlots()
+
+// Utility functions (minimal, can be expanded)
+const breakpoints = ['grid', 'sm:grid', 'md:grid', 'lg:grid', 'xl:grid', '2xl:grid']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp.startsWith(point)))
+}
+const labelSizes = ['small', 'medium', 'large', 'xl', '2xl']
+const getLabelSizeIdx = (size: string) => {
+  return Math.max(0, labelSizes.findIndex(s => s === size))
+}
+
+const settingClass = computed(() => {
+  const breakPointIdx = getBreakpointIdx(props.gridPoint)
+  let cls = breakpoints[breakPointIdx]
+  cls += ' gap-x-4 2xl:gap-x-5 ' + [
+    'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
+    'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
+  ][props.colCount - 1]
+  cls += breakPointIdx === 0 ? ' gap-x-3 ' : ''
+  cls += ' ' + [
+    ' [&_.cell]:!mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:md:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:lg:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:xl:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
+  ][breakPointIdx]
+  if (props.cellFlex) {
+    cls += ' gap-y-2 2xl:gap-y-3 ' + [
+      '[&_.cell]:flex',
+      '[&_.cell]:sm:flex',
+      '[&_.cell]:md:flex',
+      '[&_.cell]:lg:flex',
+      '[&_.cell]:xl:flex',
+      '[&_.cell]:2xl:flex',
+    ][getBreakpointIdx(props.cellFlexPoint)]
+    cls += ' [&_.label]:flex-shrink-0 ' + [
+      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-24 [&_.label]:xl:w-32',
+      '[&_.label]:md:w-32 [&_.label]:xl:w-40',
+      '[&_.label]:md:w-44 [&_.label]:xl:w-52',
+    ][getLabelSizeIdx(props.labelSize)]
+  } else {
+    cls += ' gap-y-2 2xl:gap-y-3 [&_.label]:pb-1 [&_.label]:!pt-0 ';
+  }
+  cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
+  cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
+  cls += '[&_label]:md:text-xs [&_label]:md:text-xs [&_label]:2xl:!text-sm'
+  return cls
+})
+</script>
+
+<template>
+  <div :class="`block ${mode} ${props.defaultClass} ${settingClass} ${props.class}`">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/app/components/pub/my-ui/doc-entry/cell.vue b/app/components/pub/my-ui/doc-entry/cell.vue
new file mode 100644
index 00000000..8c151df7
--- /dev/null
+++ b/app/components/pub/my-ui/doc-entry/cell.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  colSpan: { type: Number, default: undefined },
+  colStart: { type: Number, default: undefined },
+  colEnd: { type: Number, default: undefined },
+  class: { type: String, default: '' },
+})
+
+const settingClass = computed(() => {
+  let cls = ' cell'
+  if (props.colSpan) {
+    cls += ' ' + [
+      'col-span-1', 'col-span-2', 'col-span-3', 'col-span-4', 'col-span-5',
+      'col-span-6', 'col-span-7', 'col-span-8', 'col-span-9', 'col-span-10',
+    ][props.colSpan - 1]
+  }
+  if (props.colStart) {
+    cls += ' ' + [
+      'col-start-1', 'col-start-2', 'col-start-3', 'col-start-4', 'col-start-5',
+      'col-start-6', 'col-start-7', 'col-start-8', 'col-start-9', 'col-start-10',
+    ][props.colStart - 1]
+  }
+  if (props.colEnd) {
+    cls += ' ' + [
+      'col-end-1', 'col-end-2', 'col-end-3', 'col-end-4', 'col-end-5',
+      'col-end-6', 'col-end-7', 'col-end-8', 'col-end-9', 'col-end-10',
+    ][props.colEnd - 1]
+  }
+  if (props.class) {
+    cls += ' ' + props.class.trim()
+  }
+  return cls
+})
+</script>
+
+<template>
+  <div :class="`w-full${settingClass}`">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/doc-entry/colon.vue b/app/components/pub/my-ui/doc-entry/colon.vue
new file mode 100644
index 00000000..a6d379f5
--- /dev/null
+++ b/app/components/pub/my-ui/doc-entry/colon.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="w-5 text-center">:</div>    
+</template>
diff --git a/app/components/pub/my-ui/doc-entry/field.vue b/app/components/pub/my-ui/doc-entry/field.vue
new file mode 100644
index 00000000..adca2985
--- /dev/null
+++ b/app/components/pub/my-ui/doc-entry/field.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  errMessage: { type: String, default: '' },
+  defaultClass: { type: String, default: 'grow shrink-0 overflow-hidden' },
+  class: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div :class="`field ${props.defaultClass} ${props.class}`">
+    <slot />
+    <div v-if="props.errMessage" class="mt-1 md:!text-xs 2xl:!text-sm font-medium text-red-500">{{ props.errMessage }}</div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/doc-entry/index.ts b/app/components/pub/my-ui/doc-entry/index.ts
new file mode 100644
index 00000000..8af74884
--- /dev/null
+++ b/app/components/pub/my-ui/doc-entry/index.ts
@@ -0,0 +1,4 @@
+export { default as Block } from './block.vue'
+export { default as Cell } from './cell.vue'
+export { default as Label } from './label.vue'
+export { default as Field } from './field.vue'
diff --git a/app/components/pub/my-ui/doc-entry/label.vue b/app/components/pub/my-ui/doc-entry/label.vue
new file mode 100644
index 00000000..029ac2b7
--- /dev/null
+++ b/app/components/pub/my-ui/doc-entry/label.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  height: { type: String, default: 'default' }, // 'default' | 'compact'
+  position: { type: String, default: 'default' }, // 'default' | 'dynamic'
+  positionPoint: { type: String, default: 'lg' },
+  class: { type: String, default: '' },
+})
+
+const breakpoints = ['','sm','md','lg','xl','2xl']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp === point))
+}
+
+const settingClass = computed(() => {
+  let cls = 'label'
+  cls += props.height === 'compact' ? ' height-compact ' : ' height-default '
+  if (props.position === 'dynamic') {
+    cls += ' ' + [
+      'text-end pe-2.5',
+      'sm:text-end pe-2.5',
+      'md:text-end pe-2.5',
+      'lg:text-end pe-2.5',
+      'xl:text-end pe-2.5',
+      '2xl:text-end pe-2.5',
+    ][getBreakpointIdx(props.positionPoint)]
+  }
+  return cls + ' ' + (props.class?.trim() || '')
+})
+</script>
+
+<template>
+  <div :class="settingClass">
+    <label v-bind="$attrs">
+      <slot />
+    </label>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/error/error.vue b/app/components/pub/my-ui/error/error.vue
new file mode 100644
index 00000000..7f7bc4ea
--- /dev/null
+++ b/app/components/pub/my-ui/error/error.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+  statusCode: number
+}>()
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="h-svh">
+    <div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
+      <template v-if="statusCode === 403">
+        <h1 class="text-[7rem] font-bold leading-tight">403</h1>
+        <span class="font-medium">Access Forbidden</span>
+        <p class="text-muted-foreground text-center">
+          You don't have necessary permission <br />
+          to access this resource.
+        </p>
+      </template>
+      <template v-else-if="statusCode === 404">
+        <h1 class="text-[7rem] font-bold leading-tight">404</h1>
+        <span class="font-medium">Page Not Found</span>
+        <p class="text-muted-foreground text-center">
+          The page you are looking for <br />
+          doesn't exist.
+        </p>
+      </template>
+      <template v-else-if="statusCode === 401">
+        <h1 class="text-[7rem] font-bold leading-tight">401</h1>
+        <span class="font-medium">Unauthorized Access</span>
+        <p class="text-muted-foreground text-center">
+          Please log in with the appropriate credentials <br />
+          to access this resource.
+        </p>
+      </template>
+      <template v-else>
+        <h1 class="text-[7rem] font-bold leading-tight">500</h1>
+        <span class="font-medium">Internal Server Error</span>
+        <p class="text-muted-foreground text-center">
+          Something went wrong on our end. <br />
+          Please try again later.
+        </p>
+      </template>
+      <div class="mt-6 flex gap-4">
+        <Button variant="outline" @click="router.back()"> Kembali </Button>
+        <Button v-if="statusCode === 401" @click="router.push('/auth/login')">Login</Button>
+        <Button v-else @click="router.push('/')">Kembali ke Dashboard</Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/form/block.vue b/app/components/pub/my-ui/form/block.vue
new file mode 100644
index 00000000..ee19d116
--- /dev/null
+++ b/app/components/pub/my-ui/form/block.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  classValExt?: string
+}>()
+</script>
+
+<template>
+  <div :class="` mb-5 flex-wrap md:flex ${classValExt || ''}`">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/form/field-group.vue b/app/components/pub/my-ui/form/field-group.vue
new file mode 100644
index 00000000..a722495b
--- /dev/null
+++ b/app/components/pub/my-ui/form/field-group.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    column?: 1 | 2 | 3
+    density?: 'default' | 'dense'
+    side?: 'default' | 'break'
+    position?: 'default' | 'dynamic'
+    layout?: 'default' | 'stacked'
+    class?: string
+  }>(),
+  {
+    column: 1,
+    density: 'default',
+    side: 'default',
+    position: 'default',
+    layout: 'stacked',
+    class: '',
+  },
+)
+
+const widthClass = computed(() => {
+  if (props.column === 1) return 'md:w-full pe-4'
+  if (props.column === 2) return 'md:w-1/2 pe-4'
+  if (props.column === 3) return 'md:w-1/3 pe-4'
+  return 'w-full'
+})
+
+const wrapperClass = computed(() => [
+  'w-full flex-shrink-0',
+  widthClass.value,
+
+  props.layout === 'stacked' ? 'flex flex-col' : 'md:flex',
+
+  // Only add margin bottom if no custom class overrides it
+  props.class?.includes('mb-') ? '' : (props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : 'mb-3'),
+  props.class,
+])
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/form/field.vue b/app/components/pub/my-ui/form/field.vue
new file mode 100644
index 00000000..48e3bc3d
--- /dev/null
+++ b/app/components/pub/my-ui/form/field.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { XErrors } from '~/types/error'
+
+defineProps<{
+  id?: string
+  errors?: XErrors
+}>()
+</script>
+
+<template>
+  <div class="grow">
+    <slot />
+    <!-- Always reserve space for error message to prevent CLS -->
+    <div class="field-error-info">
+      {{ (id && errors?.[id]) ? errors[id]?.message : '' }}
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/form/file-field.vue b/app/components/pub/my-ui/form/file-field.vue
new file mode 100644
index 00000000..bc6a86c9
--- /dev/null
+++ b/app/components/pub/my-ui/form/file-field.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label?: string
+  placeholder?: string
+  hint?: string
+  modelValue?: File | null
+  accept?: string[]
+  maxSizeMb?: number
+  errors?: FormErrors
+  class?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  icons?: string
+}>()
+
+const hintMsg = computed(() => {
+  if (props.hint) return props.hint
+  if (props.accept) {
+    return `${props.accept.map((ext) => '.' + ext.replace(/^\./, '')).join(', ')}, maksimal ${props.maxSizeMb} MB`
+  }
+  return 'Gunakan file yang sesuai'
+})
+
+async function onFileChange(event: Event, handleChange: (value: any) => void) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+
+  handleChange(file)
+}
+</script>
+
+<template>
+  <DE.Cell>
+    <DE.Label
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }} ({{ hintMsg }})
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField, handleChange }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl class="flex flex-col">
+            <Input
+              @change="onFileChange($event, handleChange)"
+              type="file"
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
new file mode 100644
index 00000000..aeb4a4af
--- /dev/null
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  placeholder: string
+  label: string
+  errors?: FormErrors
+  class?: string
+  colSpan?: number
+  numericOnly?: boolean
+  maxLength?: number
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  let value = target.value
+
+  // Filter numeric only jika diperlukan
+  if (props.numericOnly) {
+    value = value.replace(/\D/g, '')
+  }
+
+  // Batasi panjang maksimal jika diperlukan
+  if (props.maxLength && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength)
+  }
+
+  // Update value jika ada perubahan
+  if (target.value !== value) {
+    target.value = value
+    // Trigger input event untuk update form
+    target.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :maxlength="maxLength"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              autocomplete="off"
+              aria-autocomplete="none"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+              @input="handleInput"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/pub/my-ui/form/label.vue b/app/components/pub/my-ui/form/label.vue
new file mode 100644
index 00000000..c833dad8
--- /dev/null
+++ b/app/components/pub/my-ui/form/label.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    labelFor?: string
+    size?: 'default' | 'narrow' | 'wide' | 'fit'
+    height?: 'default' | 'compact'
+    position?: 'default' | 'dynamic'
+    stacked?: boolean
+    isRequired?: boolean
+  }>(),
+  {
+    size: 'default',
+    height: 'default',
+    position: 'default',
+    stacked: true,
+    isRequired: false,
+  },
+)
+
+const sizeMap = {
+  default: 'w-28 2xl:w-36',
+  narrow: 'w-24 2xl:w-28',
+  wide: 'w-44 2xl:w-48',
+  fit: 'w-fit',
+} as const
+
+const heightMap = {
+  default: 'pt-2 2xl:pt-2.5',
+  compact: 'leading-[14pt]',
+} as const
+
+const positionWrapMap = {
+  default: 'pe-2 text-start',
+  dynamic: 'md:text-end',
+} as const
+
+const positionChildMap = {
+  default: '',
+  dynamic: 'block pe-2.5',
+} as const
+
+const wrapperClass = computed(() => [
+  'block shrink-0',
+  props.stacked ? 'w-full mb-1 text-start' : sizeMap[props.size],
+  props.stacked ? '' : heightMap[props.height],
+  props.stacked ? '' : positionWrapMap[props.position],
+])
+
+const labelClass = computed(() => [props.stacked ? 'block mb-1 font-normal' : positionChildMap[props.position]])
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <label
+      class="block"
+      :class="labelClass"
+      :for="labelFor"
+    >
+      <slot />
+      <span
+        v-if="isRequired"
+        class="text-red-600"
+      >
+        *
+      </span>
+    </label>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/form/select.vue b/app/components/pub/my-ui/form/select.vue
new file mode 100644
index 00000000..0cfc926b
--- /dev/null
+++ b/app/components/pub/my-ui/form/select.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { SelectRoot } from 'radix-vue'
+import { watch } from 'vue'
+import SelectContent from '~/components/pub/ui/select/SelectContent.vue'
+import SelectGroup from '~/components/pub/ui/select/SelectGroup.vue'
+import SelectItem from '~/components/pub/ui/select/SelectItem.vue'
+import SelectLabel from '~/components/pub/ui/select/SelectLabel.vue'
+import SelectSeparator from '~/components/pub/ui/select/SelectSeparator.vue'
+import SelectTrigger from '~/components/pub/ui/select/SelectTrigger.vue'
+import SelectValue from '~/components/pub/ui/select/SelectValue.vue'
+import { cn } from '~/lib/utils'
+
+export interface SelectItem {
+  value: string
+  label: string
+  code?: string
+  priority?: number // Priority untuk sorting: negatif = bawah, positif = atas, 0/undefined = normal sorting
+}
+
+const props = defineProps<{
+  modelValue?: string
+  items: SelectItem[]
+  placeholder?: string
+  label?: string
+  separator?: boolean
+  class?: string
+  isSelectedFirst?: boolean
+  preserveOrder?: boolean
+  isDisabled?: boolean
+  autoWidth?: boolean
+  autoFill?: boolean
+  // otherPlacement sudah tidak digunakan, diganti dengan priority system di Item interface
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const processedItems = computed(() => {
+  const itemsWithSelection = props.items.map((item) => ({
+    ...item,
+    isSelected: item.value === props.modelValue,
+  }))
+
+  // Jika preserveOrder true, kembalikan urutan array asli
+  if (props.preserveOrder) {
+    return itemsWithSelection
+  }
+
+  // Sorting dengan priority system
+  return itemsWithSelection.sort((a, b) => {
+    const aPriority = a.priority ?? 0
+    const bPriority = b.priority ?? 0
+
+    // Jika ada priority, sort berdasarkan priority (descending: tinggi ke rendah)
+    if (aPriority !== bPriority) {
+      return bPriority - aPriority
+    }
+
+    // Jika priority sama (termasuk 0/undefined), lakukan sorting normal
+    if (props.isSelectedFirst) {
+      if (a.isSelected && !b.isSelected) return -1
+      if (!a.isSelected && b.isSelected) return 1
+    }
+
+    return a.label.localeCompare(b.label)
+  })
+})
+
+// Computed property untuk menghitung width optimal berdasarkan konten terpanjang
+const optimalWidth = computed(() => {
+  // Jika autoWidth false atau undefined, gunakan full width
+  if (!props.autoWidth) return '100%'
+
+  if (!props.items.length) return 'auto'
+
+  // Mencari label terpanjang
+  const longestLabel = props.items.reduce((longest, item) => {
+    const itemText = item.code ? `${item.label} ${item.code}` : item.label
+    return itemText.length > longest.length ? itemText : longest
+  }, '')
+
+  // Menghitung width berdasarkan panjang karakter (estimasi)
+  // Setiap karakter ~0.6em, ditambah padding dan space untuk icon
+  const estimatedWidth = Math.max(longestLabel.length * 0.6 + 3, 8) // minimum 8em
+
+  return `${Math.min(estimatedWidth, 25)}em` // maksimum 25em
+})
+
+function onValueChange(value: string) {
+  emit('update:modelValue', value)
+}
+
+// Auto fill logic - automatically select first item if autoFill is enabled
+watch(
+  () => props.items,
+  (newItems) => {
+    if (props.autoFill && newItems.length > 0 && !props.modelValue) {
+      // Auto select first item only if no value is currently selected
+      const firstItem = newItems[0]
+      if (firstItem?.value) {
+        emit('update:modelValue', firstItem.value)
+      }
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <SelectRoot
+    :model-value="modelValue"
+    :disabled="isDisabled"
+    @update:model-value="onValueChange"
+  >
+    <SelectTrigger
+      :class="
+        cn(
+          'rounded-md focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+          {
+            'cursor-not-allowed bg-gray-100 opacity-50': isDisabled,
+            'bg-white text-black dark:bg-gray-800 dark:text-white': !isDisabled,
+            'w-full': !autoWidth,
+          },
+          props.class,
+        )
+      "
+      :style="autoWidth ? { width: optimalWidth, minWidth: '8em' } : {}"
+      icon-name="i-radix-icons-chevron-down"
+      icon-class="text-gray-500 dark:text-gray-300"
+    >
+      <SelectValue
+        :placeholder="placeholder || 'Pilih item'"
+        :class="
+          cn('', {
+            'text-gray-400': !props.modelValue,
+            'text-black dark:text-white': props.modelValue,
+            'text-gray-500': isDisabled,
+          })
+        "
+      />
+    </SelectTrigger>
+
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel v-if="label">
+          {{ label }}
+        </SelectLabel>
+
+        <SelectItem
+          v-for="item in processedItems"
+          :key="item.value"
+          :value="item.value"
+          class="cursor-pointer hover:bg-primary hover:text-white focus:bg-primary focus:text-white"
+        >
+          <div class="flex w-full items-center justify-between">
+            <span>{{ item.label }}</span>
+            <span
+              v-if="item.code"
+              class="ml-2 text-xs text-muted-foreground"
+            >
+              {{ item.code }}
+            </span>
+          </div>
+        </SelectItem>
+
+        <SelectSeparator v-if="separator" />
+      </SelectGroup>
+    </SelectContent>
+  </SelectRoot>
+</template>
diff --git a/app/components/pub/my-ui/form/view/detail-row.vue b/app/components/pub/my-ui/form/view/detail-row.vue
new file mode 100644
index 00000000..2b2b8f6f
--- /dev/null
+++ b/app/components/pub/my-ui/form/view/detail-row.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3">
+    <!-- Label -->
+    <span class="text-md font-normal text-muted-foreground">
+      {{ label }}
+    </span>
+
+    <!-- Value -->
+    <span class="truncate lg:whitespace-normal">
+      <span class="me-3 hidden lg:inline-block">:</span>
+      <slot />
+    </span>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/form/view/detail-section.vue b/app/components/pub/my-ui/form/view/detail-section.vue
new file mode 100644
index 00000000..50eebbe1
--- /dev/null
+++ b/app/components/pub/my-ui/form/view/detail-section.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+defineProps<{
+  title: string
+  headerClass?: string
+  contentClass?: string
+}>()
+</script>
+
+<template>
+  <section class="mb-6">
+    <h3 :class="cn('mb-3 flex items-center gap-1  pb-1 text-base font-semibold', headerClass)">
+      <slot name="icon" />
+      {{ title }}
+    </h3>
+
+    <div :class="cn('space-y-2', contentClass)">
+      <slot />
+    </div>
+  </section>
+</template>
diff --git a/app/components/pub/my-ui/modal/dialog.vue b/app/components/pub/my-ui/modal/dialog.vue
new file mode 100644
index 00000000..974013a2
--- /dev/null
+++ b/app/components/pub/my-ui/modal/dialog.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { Dialog } from '~/components/pub/ui/dialog'
+import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
+import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
+
+interface DialogProps {
+  title: string
+  titleIcon?: string
+  titleClass?: string
+  description?: string
+  preventOutside?: boolean
+  open?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  preventOutside: false,
+  open: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+// Computed untuk menentukan class size berdasarkan prop size
+const sizeClass = computed(() => {
+  const sizeMap = {
+    sm: 'sm:max-w-[350px]',
+    md: 'sm:max-w-[425px]',
+    lg: 'sm:max-w-[720px]',
+    xl: 'sm:max-w-[960px]',
+    '2xl': 'sm:max-w-[1200px]',
+    full: 'sm:max-w-[95vw]',
+  }
+  return sizeMap[props.size]
+})
+
+// Computed untuk state dialog
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent
+      :class="sizeClass"
+      @interact-outside="(e: any) => preventOutside && e.preventDefault()"
+      @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
+    >
+      <DialogHeader>
+        <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
+          <div class="me-2 pt-0.5">
+            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
+          </div>
+          <div>
+            {{ props.title }}
+          </div>
+        </DialogTitle>
+        <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
+      </DialogHeader>
+      <DialogDescription :class="sizeClass">
+        <slot />
+      </DialogDescription>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/pub/my-ui/modal/modal.vue b/app/components/pub/my-ui/modal/modal.vue
new file mode 100644
index 00000000..147079e5
--- /dev/null
+++ b/app/components/pub/my-ui/modal/modal.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Dialog } from '~/components/pub/ui/dialog'
+
+interface DialogProps {
+  title: string
+  description?: string
+  preventOutside?: boolean
+  open?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+}
+const props = withDefaults(defineProps<DialogProps>(), {
+  preventOutside: false,
+  open: false,
+  size: 'md',
+})
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const sizeClass = computed(() => {
+  const sizeMap = {
+    sm: 'sm:max-w-[350px]',
+    md: 'sm:max-w-[425px]',
+    lg: 'sm:max-w-[600px]',
+    xl: 'sm:max-w-[800px]',
+    full: 'sm:max-w-[95vw]',
+  }
+  return sizeMap[props.size]
+})
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent
+      :class="sizeClass"
+      @interact-outside="(e: any) => preventOutside && e.preventDefault()"
+      @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
+    >
+      <DialogHeader>
+        <DialogTitle>{{ props.title }}</DialogTitle>
+        <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
+      </DialogHeader>
+      <slot />
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/pub/my-ui/nav-content/ba.vue b/app/components/pub/my-ui/nav-content/ba.vue
new file mode 100644
index 00000000..c31fe72c
--- /dev/null
+++ b/app/components/pub/my-ui/nav-content/ba.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+
+</script>
+
+<template>
+  <Button
+    @click="onClick('draft')"
+    class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+    </svg>
+    {{ props.label }}
+  </Button>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue
new file mode 100644
index 00000000..a4df2da3
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-x" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue b/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue
new file mode 100644
index 00000000..0d8fcfb2
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete' | 'print'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-su.vue b/app/components/pub/my-ui/nav-footer/ba-de-su.vue
new file mode 100644
index 00000000..47246c4c
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-su.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
new file mode 100644
index 00000000..67d5aec5
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit' | 'print'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">``
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button  variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Draf
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="me-2 align-middle" />
+        Submit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
new file mode 100644
index 00000000..4598817b
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left"  />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check"  />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-de.vue b/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
new file mode 100644
index 00000000..cc607ac0
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-red-500" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue b/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
new file mode 100644
index 00000000..331c30af
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'print'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed.vue b/app/components/pub/my-ui/nav-footer/ba-ed.vue
new file mode 100644
index 00000000..aebd4296
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-ed.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'edit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('edit')">
+        <Icon name="i-lucide-file" class="me-2 align-middle" />
+        Edit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-su.vue b/app/components/pub/my-ui/nav-footer/ba-su.vue
new file mode 100644
index 00000000..613cac85
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-su.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost"@click="onClick('back')" >
+        <Icon name="i-lucide-arrow-left" class="" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ca-ed-su.vue b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
new file mode 100644
index 00000000..1f0f5915
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'edit' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button
+        variant="destructive"
+        type="button"
+        @click="onClick('cancel')"
+        >
+        <Icon name="i-lucide-x"  />
+        {{ smallMode ? '' : 'Batal' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        variant="secondary"
+        type="button"
+        @click="onClick('edit')"
+      >
+        <Icon name="i-lucide-pencil" />
+        {{ smallMode ? '' : 'Edit' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        type="button"
+        @click="onClick('submit')"
+      >
+        <Icon name="i-lucide-check"  />
+        {{ smallMode ? '' : 'Submit' }}
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ca-sa.vue b/app/components/pub/my-ui/nav-footer/ca-sa.vue
new file mode 100644
index 00000000..cbd5ef7f
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ca-sa.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('cancel')">
+        <Icon name="i-lucide-x"  />
+        Batal
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/cl-sa.vue b/app/components/pub/my-ui/nav-footer/cl-sa.vue
new file mode 100644
index 00000000..fea6fc56
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/cl-sa.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('close')">
+        <Icon name="i-lucide-x"  />
+        Tutup
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
new file mode 100644
index 00000000..01b1ab55
--- /dev/null
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav?: RefSearchNav
+}>()
+
+// function emitSearchNavClick() {
+//   props.refSearchNav?.onClick()
+// }
+//
+// function onInput(event: Event) {
+//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+// }
+//
+// function btnClick() {
+//   props.prep?.addNav?.onClick?.()
+// }
+
+const searchQuery = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+
+function onFilterClick() {
+  console.log('Search:', searchQuery.value)
+  console.log('Date Range:', dateRange.value)
+  props.refSearchNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
+      <div class="relative w-64">
+        <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
+        <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
+      </div>
+
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            :class="cn('w-[280px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
+          >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            <template v-if="value.start">
+              <template v-if="value.end">
+                {{ df.format(value.start.toDate(getLocalTimeZone())) }} -
+                {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+              </template>
+
+              <template v-else>
+                {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+              </template>
+            </template>
+            <template v-else> Pick a date </template>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <RangeCalendar
+            v-model="value"
+            initial-focus
+            :number-of-months="2"
+            @update:start-value="(startDate) => (value.start = startDate)"
+          />
+        </PopoverContent>
+      </Popover>
+
+      <Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
+        <FilterIcon class="mr-2 size-4" />
+        Filter
+      </Button>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/my-ui/nav-header/header.vue b/app/components/pub/my-ui/nav-header/header.vue
new file mode 100644
index 00000000..d11eb52b
--- /dev/null
+++ b/app/components/pub/my-ui/nav-header/header.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  modelValue?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'search': [value: string]
+}>()
+
+// Internal search state
+const searchInput = ref(props.modelValue || '')
+const debouncedSearch = refDebounced(searchInput, props.prep.refSearchNav?.debounceMs || 500)
+
+// Computed search model for v-model
+const searchModel = computed({
+  get: () => searchInput.value,
+  set: (value: string) => {
+    searchInput.value = value
+    emit('update:modelValue', value)
+  },
+})
+
+// Watch for external changes to modelValue
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== searchInput.value) {
+    searchInput.value = newValue || ''
+  }
+})
+
+// Watch debounced search and emit search event
+watch(debouncedSearch, (newValue) => {
+  const minLength = props.prep.refSearchNav?.minLength || 3
+  // Only search if meets minimum length or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= minLength) {
+    emit('search', newValue)
+    props.prep.refSearchNav?.onInput(newValue)
+  }
+})
+
+// Handle clear search
+function clearSearch() {
+  searchModel.value = ''
+  props.prep.refSearchNav?.onClear()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <div class="ml-3 text-lg font-bold text-gray-900">
+          <Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
+          {{ props.prep.title }}
+        </div>
+      </div>
+
+      <div class="flex items-center">
+        <!-- Search Section -->
+        <div v-if="props.prep.refSearchNav" class="ml-3 text-lg text-gray-900 relative">
+          <div class="relative">
+            <Input
+              id="search-table"
+              v-model="searchModel"
+              name="search-table"
+              type="text"
+              class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+              :class="[
+                props.prep.refSearchNav.inputClass,
+                {
+                  'border-amber-300 bg-amber-50': searchInput.length > 0 && searchInput.length < (props.prep.refSearchNav.minLength || 3),
+                  'border-green-300 bg-green-50': searchInput.length >= (props.prep.refSearchNav.minLength || 3),
+                },
+              ]"
+              :placeholder="props.prep.refSearchNav.placeholder || 'Cari (min. 3 karakter)...'"
+            />
+
+            <!-- Clear button -->
+            <button
+              v-if="searchInput.length > 0"
+              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              type="button"
+              @click="clearSearch"
+            >
+              <Icon name="i-lucide-x" class="h-4 w-4" />
+            </button>
+
+            <!-- Validation feedback -->
+            <div
+              v-if="props.prep.refSearchNav.showValidationFeedback !== false && searchInput.length > 0 && searchInput.length < (props.prep.refSearchNav.minLength || 3)"
+              class="absolute -bottom-6 left-0 text-xs text-amber-600 whitespace-nowrap"
+            >
+              Minimal {{ props.prep.refSearchNav.minLength || 3 }} karakter untuk mencari
+            </div>
+          </div>
+        </div>
+
+        <!-- Add Button -->
+        <div v-if="props.prep.addNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm"
+            :class="props.prep.addNav.classVal"
+            :variant="(props.prep.addNav.variant as any) || 'default'"
+            @click="props.prep.addNav?.onClick"
+          >
+            <Icon :name="props.prep.addNav.icon || 'i-lucide-plus'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.addNav.label }}
+          </Button>
+        </div>
+
+        <!-- Filter Button -->
+        <div v-if="props.prep.filterNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+            :class="props.prep.filterNav.classVal"
+            :variant="(props.prep.filterNav.variant as any) || 'default'"
+            @click="props.prep.filterNav?.onClick"
+          >
+            <Icon :name="props.prep.filterNav.icon || 'i-lucide-filter'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.filterNav.label }}
+          </Button>
+        </div>
+
+        <!-- Print Button -->
+        <div v-if="props.prep.printNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+            :class="props.prep.printNav.classVal"
+            :variant="(props.prep.printNav.variant as any) || 'default'"
+            @click="props.prep.printNav?.onClick"
+          >
+            <Icon :name="props.prep.printNav.icon || 'i-lucide-printer'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.printNav.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
new file mode 100644
index 00000000..63535847
--- /dev/null
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav?: RefSearchNav
+  class?: string
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav?.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep?.addNav?.onClick?.()
+}
+</script>
+
+<template>
+  <header>
+    <div
+      class="flex items-center justify-between mb-4 2xl:mb-5"
+      :class="cn('', props.class)"
+    >
+      <div class="flex items-center">
+        <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
+          <Icon
+            :name="props.prep.icon!"
+            class="mr-2 align-middle md:size-6"
+          />
+          {{ props.prep.title }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div
+          v-if="props.refSearchNav"
+          class="text-lg text-gray-900"
+        >
+          <Input
+            type="text"
+            placeholder="Search"
+            @click="emitSearchNavClick"
+            @input="onInput"
+          />
+        </div>
+        <div
+          v-if="prep.addNav"
+          class="ms-2 flex items-center"
+        >
+          <Button
+            class="rounded-md border border-gray-300 text-white"
+            @click="btnClick"
+          >
+            <Icon
+              name="i-lucide-plus"
+              class="align-middle"
+            />
+            {{ prep.addNav.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </header>
+  <Separator class="my-4 xl:my-5" />
+</template>
diff --git a/app/components/pub/my-ui/nav-header/search.vue b/app/components/pub/my-ui/nav-header/search.vue
new file mode 100644
index 00000000..6e42c36f
--- /dev/null
+++ b/app/components/pub/my-ui/nav-header/search.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep?.addNav?.onClick?.()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg text-gray-900">
+        <Input
+          type="text"
+          placeholder="Search"
+          class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+          @click="emitSearchNavClick"
+          @input="onInput"
+        />
+      </div>
+      <div v-if="prep.addNav" class="m-2 flex items-center">
+        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+          <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+          {{ prep.addNav.label }}
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/my-ui/pagination/pagination-view.vue b/app/components/pub/my-ui/pagination/pagination-view.vue
new file mode 100644
index 00000000..149d425e
--- /dev/null
+++ b/app/components/pub/my-ui/pagination/pagination-view.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Pagination from './pagination.vue'
+
+const props = defineProps<{
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Pagination
+  v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
+  :pagination-meta="paginationMeta"
+  @page-change="handlePageChange"
+  />
+</template>
diff --git a/app/components/pub/my-ui/pagination/pagination.type.ts b/app/components/pub/my-ui/pagination/pagination.type.ts
new file mode 100644
index 00000000..5c9d97f5
--- /dev/null
+++ b/app/components/pub/my-ui/pagination/pagination.type.ts
@@ -0,0 +1,13 @@
+export interface PaginationMeta {
+  recordCount: number
+  // page : current pointer for viewing data
+  page: number
+  // pageSize: limit each page request
+  pageSize: number
+  // totalPage: recourdCount / pageSize
+  totalPage: number
+  // hasNext: check if there is next page
+  hasNext: boolean
+  // hasPrev: check if there is previous page
+  hasPrev: boolean
+}
diff --git a/app/components/pub/my-ui/pagination/pagination.vue b/app/components/pub/my-ui/pagination/pagination.vue
new file mode 100644
index 00000000..4ba0da5f
--- /dev/null
+++ b/app/components/pub/my-ui/pagination/pagination.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { PaginationMeta } from './pagination.type'
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '~/components/pub/ui/pagination'
+
+interface Props {
+  paginationMeta: PaginationMeta
+  onPageChange?: (page: number) => void
+  showInfo?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  onPageChange: undefined,
+  showInfo: true,
+})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  if (props.onPageChange) {
+    props.onPageChange(page)
+  }
+  emit('pageChange', page)
+}
+
+function handleFirst() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(1)
+  }
+}
+
+function handlePrev() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(props.paginationMeta.page - 1)
+  }
+}
+
+function handleNext() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.page + 1)
+  }
+}
+
+function handleLast() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.totalPage)
+  }
+}
+
+// Computed properties for formatted numbers
+const formattedRecordCount = computed(() => {
+  const count = props.paginationMeta.recordCount
+  if (count == null || count === undefined) return '0'
+  return Number(count).toLocaleString('id-ID')
+})
+
+const startRecord = computed(() => {
+  const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+  return Number(start).toLocaleString('id-ID')
+})
+
+const endRecord = computed(() => {
+  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
+})
+
+// Function to determine button width based on page number
+function getButtonClass(pageNumber: number) {
+  const digits = pageNumber.toString().length
+
+  if (digits >= 4) { // 1000+ (1k+)
+    return 'h-9 px-4 min-w-12'
+  } else if (digits === 3) { // 100-999
+    return 'h-9 px-3 min-w-10'
+  } else { // 1-99
+    return 'w-9 h-9 p-0'
+  }
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
+    <!-- Info text -->
+    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
+      Menampilkan {{ startRecord }}
+      hingga {{ Number(endRecord).toLocaleString('id-ID') }}
+      dari {{ formattedRecordCount }} data
+    </div>
+    <div v-else class="shrink-0">-</div>
+
+    <!-- Spacer untuk memastikan ada ruang di tengah -->
+    <div class="flex-1 min-w-4"></div>
+
+    <!-- Pagination controls -->
+    <div class="shrink-0">
+      <Pagination
+v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
+        :items-per-page="paginationMeta.pageSize" show-edges
+>
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
+          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+
+          <template v-for="(item, index) in items">
+            <PaginationListItem
+v-if="item.type === 'page'" :key="index" :value="item.value" as-child
+              @click="handlePageChange(item.value)"
+>
+              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
+
+          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
+          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+        </PaginationList>
+      </Pagination>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/select-tree/command-item.vue b/app/components/pub/my-ui/select-tree/command-item.vue
new file mode 100644
index 00000000..a4d8ab09
--- /dev/null
+++ b/app/components/pub/my-ui/select-tree/command-item.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm bg-white px-2 py-1.5 text-sm font-normal text-black outline-none hover:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 [&>*]:text-sm [&>*]:font-normal',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/app/components/pub/my-ui/select-tree/leaf.vue b/app/components/pub/my-ui/select-tree/leaf.vue
new file mode 100644
index 00000000..6758c7fd
--- /dev/null
+++ b/app/components/pub/my-ui/select-tree/leaf.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import { Check } from 'lucide-vue-next'
+import CommandItem from './command-item.vue'
+
+defineProps<{
+  item: TreeItem
+  selectedValue?: string
+  shouldAlign?: boolean
+}>()
+
+const emit = defineEmits(['select'])
+
+function handleSelect(value: string) {
+  emit('select', value)
+}
+</script>
+
+<template>
+  <div class="leaf-node min-w-max">
+    <CommandItem
+      :value="item.value"
+      class="flex items-center justify-between p-2 w-full text-sm font-normal hover:text-primary cursor-pointer rounded-md bg-white dark:bg-transparent"
+      :class="{ 'pl-8': shouldAlign }"
+      @select="() => handleSelect(item.value)"
+    >
+      <span class="text-sm font-normal text-gray-400 dark:text-gray-300">{{ item.label }}</span>
+      <Check
+        v-if="selectedValue === item.value"
+        class="w-4 h-4 text-primary ml-2 flex-shrink-0"
+      />
+    </CommandItem>
+  </div>
+</template>
+
+<style scoped>
+.leaf-node {
+  width: 100%;
+}
+</style>
diff --git a/app/components/pub/my-ui/select-tree/tree-node.vue b/app/components/pub/my-ui/select-tree/tree-node.vue
new file mode 100644
index 00000000..40d99e46
--- /dev/null
+++ b/app/components/pub/my-ui/select-tree/tree-node.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import { Check, ChevronRight, Loader2 } from 'lucide-vue-next'
+import TreeView from './tree-view.vue'
+
+const props = defineProps<{
+  item: TreeItem
+  selectedValue?: string
+  onFetchChildren: (parentId: string) => Promise<void>
+  level?: number
+}>()
+
+const emit = defineEmits(['select'])
+
+const hasChildren = computed(() => props.item.children && props.item.children.length > 0)
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const isChevronRotated = ref(false)
+
+function handleSelect(value: string) {
+  emit('select', value)
+}
+
+function handleLabelClick() {
+  handleSelect(props.item.value)
+}
+
+watch(isOpen, async (newValue) => {
+  console.log(`[TreeNode] ${props.item.label} - isOpen changed to:`, newValue)
+
+  isChevronRotated.value = newValue
+
+  if (newValue && props.item.hasChildren && !props.item.children && !isLoading.value) {
+    console.log(`[TreeNode] Fetching children for: ${props.item.label}`)
+    isLoading.value = true
+    try {
+      await props.onFetchChildren(props.item.value)
+      console.log(`[TreeNode] Fetch completed for: ${props.item.label}`, props.item.children)
+      // Force reactivity update dengan nextTick
+      await nextTick()
+    } catch (error) {
+      console.error('Gagal memuat data anak:', error)
+      // Tutup kembali jika gagal fetch
+      isOpen.value = false
+    } finally {
+      isLoading.value = false
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="tree-node min-w-max">
+    <Collapsible
+      v-model:open="isOpen"
+      class="w-full"
+    >
+      <!-- Node Header -->
+      <div
+        class="flex w-full items-center justify-start gap-2 rounded-md bg-white p-2 hover:bg-accent dark:bg-transparent dark:hover:bg-slate-700"
+      >
+        <!-- Chevron Toggle Button -->
+        <CollapsibleTrigger as-child>
+          <Button
+            variant="ghost"
+            class="flex h-4 w-4 items-center justify-center p-0"
+          >
+            <Loader2
+              v-if="isLoading"
+              class="h-4 w-4 animate-spin text-muted-foreground"
+            />
+            <ChevronRight
+              v-else
+              class="h-4 w-4 text-muted-foreground transition-transform duration-200 ease-in-out"
+              :class="{
+                'rotate-90': isChevronRotated,
+              }"
+            />
+          </Button>
+        </CollapsibleTrigger>
+
+        <!-- Node Label -->
+        <span
+          class="flex flex-1 cursor-pointer items-center justify-between text-sm font-normal text-black hover:text-primary dark:text-white"
+          @click="handleLabelClick"
+        >
+          {{ item.label }}
+          <!-- Check Icon untuk selected state -->
+          <Check
+            v-if="selectedValue === item.value"
+            class="ml-2 h-4 w-4 flex-shrink-0 text-primary"
+          />
+        </span>
+      </div>
+
+      <!-- Children Container -->
+      <CollapsibleContent class="pl-6">
+        <div
+          v-if="!hasChildren"
+          class="p-2 text-sm text-muted-foreground"
+        >
+          {{ isLoading ? 'Memuat...' : 'Tidak ada data' }}
+        </div>
+        <TreeView
+          v-else
+          :data="item.children!"
+          :selected-value="selectedValue"
+          :on-fetch-children="onFetchChildren"
+          :level="(level || 0) + 1"
+          @select="handleSelect"
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  </div>
+</template>
+
+<style scoped>
+.tree-node {
+  width: 100%;
+}
+
+/* Animasi tambahan untuk smooth transition */
+.tree-node .collapsible-content {
+  transition: all 0.2s ease-in-out;
+}
+</style>
diff --git a/app/components/pub/my-ui/select-tree/tree-select.vue b/app/components/pub/my-ui/select-tree/tree-select.vue
new file mode 100644
index 00000000..62a792e6
--- /dev/null
+++ b/app/components/pub/my-ui/select-tree/tree-select.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import { ChevronsUpDown } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+import TreeView from './tree-view.vue'
+
+const props = defineProps<{
+  data: TreeItem[]
+  onFetchChildren: (parentId: string) => Promise<void>
+}>()
+
+const modelValue = defineModel<string>()
+const open = ref(false)
+const searchValue = ref('')
+
+function handleSelect(newVal: string) {
+  modelValue.value = newVal
+  open.value = false
+}
+
+function findLabel(value: string, items: TreeItem[]): string | undefined {
+  for (const item of items) {
+    if (item.value === value) return item.label
+    if (item.children) {
+      const found = findLabel(value, item.children)
+      if (found) return found
+    }
+  }
+}
+
+const selectedLabel = computed(() => {
+  return modelValue.value ? findLabel(modelValue.value, props.data) : '--- select item'
+})
+
+const filteredData = computed(() => {
+  if (!searchValue.value) return props.data
+  // recursive filter
+  function filterTree(items: TreeItem[]): TreeItem[] {
+    return items
+      .map((item) => {
+        const match = item.label.toLowerCase().includes(searchValue.value.toLowerCase())
+        let children: TreeItem[] | undefined = undefined
+        if (item.children) {
+          children = filterTree(item.children)
+        }
+        if (match || (children && children.length > 0)) {
+          return { ...item, children }
+        }
+        return null
+      })
+      .filter(Boolean) as TreeItem[]
+  }
+  return filterTree(props.data)
+})
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        role="combobox"
+        class="w-full justify-between border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+      >
+        <span
+          class="font-normal text-muted-foreground"
+          :class="cn('font-normal', !modelValue && 'text-muted-foreground', modelValue && 'text-black')"
+        >
+          {{ selectedLabel }}
+        </span>
+        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent
+      class="min-w-full max-w-[350px] border border-slate-200 bg-white p-0 text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+    >
+      <Command>
+        <CommandInput
+          placeholder="Cari item..."
+          v-model="searchValue"
+        />
+        <CommandEmpty>Item tidak ditemukan.</CommandEmpty>
+        <CommandList class="max-h-[300px] overflow-x-auto overflow-y-auto">
+          <CommandGroup>
+            <TreeView
+              :data="filteredData"
+              :selected-value="modelValue"
+              :on-fetch-children="onFetchChildren"
+              :level="0"
+              @select="handleSelect"
+            />
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/app/components/pub/my-ui/select-tree/tree-view.vue b/app/components/pub/my-ui/select-tree/tree-view.vue
new file mode 100644
index 00000000..dfc51d5c
--- /dev/null
+++ b/app/components/pub/my-ui/select-tree/tree-view.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import Leaf from './leaf.vue'
+import TreeNode from './tree-node.vue'
+
+const props = defineProps<{
+  data: TreeItem[]
+  selectedValue?: string
+  onFetchChildren: (parentId: string) => Promise<void>
+  level?: number
+}>()
+
+const emit = defineEmits(['select'])
+
+function handleSelect(value: string) {
+  emit('select', value)
+}
+
+// Computed untuk mendeteksi apakah ada node dengan children dalam level ini
+const hasAnyChildrenInLevel = computed(() => {
+  return props.data.some(item => item.hasChildren)
+})
+
+// Computed untuk menentukan apakah perlu alignment berdasarkan level
+const shouldAlignLeaves = computed(() => {
+  // Di root level (level 0), selalu align leaf dengan tree nodes jika ada mixed content
+  // Di level lain, hanya align jika ada mixed content
+  const isRootLevel = (props.level || 0) === 0
+  const hasMixedContent = hasAnyChildrenInLevel.value && props.data.some(item => !item.hasChildren)
+
+  return isRootLevel ? hasAnyChildrenInLevel.value : hasMixedContent
+})
+</script>
+
+<template>
+  <div class="tree-view min-w-max">
+    <template v-for="item in data" :key="item.value">
+      <TreeNode
+        v-if="item.hasChildren"
+        :item="item"
+        :selected-value="selectedValue"
+        :on-fetch-children="onFetchChildren"
+        :level="level || 0"
+        @select="handleSelect"
+      />
+      <Leaf
+        v-else
+        :item="item"
+        :selected-value="selectedValue"
+        :should-align="shouldAlignLeaves"
+        @select="handleSelect"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/select-tree/type.ts b/app/components/pub/my-ui/select-tree/type.ts
new file mode 100644
index 00000000..37d16761
--- /dev/null
+++ b/app/components/pub/my-ui/select-tree/type.ts
@@ -0,0 +1,6 @@
+export interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
diff --git a/app/components/pub/my-ui/service-status/service-status.vue b/app/components/pub/my-ui/service-status/service-status.vue
new file mode 100644
index 00000000..3ba2736f
--- /dev/null
+++ b/app/components/pub/my-ui/service-status/service-status.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { ServiceStatus } from './type'
+import { Loader, Loader2 } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ServiceStatus>()
+
+const tokenStatus = computed((): string => {
+  return props.sessionActive ? 'Valid' : 'Invalid'
+})
+</script>
+
+<template>
+  <Card v-if="props.isSkeleton" class="py-6">
+    <div class="flex gap-4 justify-between px-6">
+      <div class="flex gap-2 items-center">
+        <span class="bg-gray-100">
+          <Skeleton class="bg-gray-100 w-6 h-6 sm:w-8 sm:h-8" />
+        </span>
+        <div>
+          <Skeleton class="w-64 h-8 bg-gray-100 text-xs md:text-sm text-muted-foreground" />
+        </div>
+      </div>
+      <div class="text-right flex flex-col items-end">
+        <Skeleton class="w-32 h-2 bg-gray-100 text-xs md:text-md text-muted-foreground" />
+        <Skeleton class="w-32 h-3 bg-gray-100 text-xs md:text-md font-bold" />
+      </div>
+    </div>
+  </Card>
+  <Card v-else class="py-6">
+    <div class="flex gap-4 justify-between px-6">
+      <div class="flex gap-2 items-center">
+        <span
+:class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
+          { 'bg-red-500': props.status === 'error' },
+          { 'bg-blue-500': props.status !== 'error' },
+        )"
+>
+          <Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
+          <Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
+        </span>
+        <div>
+          <p v-if="props.status === 'connected'" class="text-xs md:text-md font-bold">Koneksi {{ props.serviceName }}
+            Aktif</p>
+          <p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke
+            API {{
+              props.serviceName }}
+            <Loader2 class="ml-2 h-4 w-4 animate-spin" />
+          </p>
+          <p v-if="props.status === 'error'" class="text-xs md:text-md font-bold">Koneksi ke API {{ props.serviceName
+          }}
+            Gagal</p>
+          <p v-if="props.status === 'connected'" class="text-xs md:text-sm text-muted-foreground">Koneksi Terhubung ke
+            API {{ props.serviceDesc }}
+          </p>
+        </div>
+      </div>
+      <div class="text-right flex flex-col items-end">
+        <p class="text-xs md:text-md text-muted-foreground">Session Token</p>
+        <p v-if="props.status === 'connecting'">
+          <Loader class="ml-2 h-4 w-4 animate-spin" />
+        </p>
+        <p
+v-else :class="cn('text-xs md:text-md font-bold',
+          { 'text-blue-500': props.sessionActive },
+          { 'text-red-500': !props.sessionActive },
+        )"
+>{{ tokenStatus }}</p>
+      </div>
+    </div>
+  </Card>
+</template>
diff --git a/app/components/pub/my-ui/service-status/type.ts b/app/components/pub/my-ui/service-status/type.ts
new file mode 100644
index 00000000..f3d15cd0
--- /dev/null
+++ b/app/components/pub/my-ui/service-status/type.ts
@@ -0,0 +1,7 @@
+export interface ServiceStatus {
+  serviceName: string
+  serviceDesc: string
+  sessionActive: boolean
+  status: 'connected' | 'connecting' | 'error' | 'disconnected'
+  isSkeleton?: boolean
+}
diff --git a/app/components/pub/my-ui/summary-card/summary-card.vue b/app/components/pub/my-ui/summary-card/summary-card.vue
new file mode 100644
index 00000000..35a5b17f
--- /dev/null
+++ b/app/components/pub/my-ui/summary-card/summary-card.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { Summary } from './type'
+import { ChevronDown, ChevronUp } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  stat?: Summary
+  isSkeleton?: boolean
+}>()
+
+const timeFrame = computed((): string => {
+  if (!props.stat?.timeframe) return 'from unknown timeframe'
+
+  let word: string = ''
+  switch (props.stat.timeframe) {
+    case 'daily':
+      word = 'from yesterday'
+      break
+    case 'weekly':
+      word = 'from last week'
+      break
+    case 'monthly':
+      word = 'from last month'
+      break
+    case 'yearly':
+      word = 'from last year'
+      break
+  }
+
+  return word
+})
+
+const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
+</script>
+
+<template>
+  <Card v-if="props.isSkeleton">
+    <CardHeader class="flex flex-row items-center justify-between pb-2">
+      <Skeleton class="h-6 w-32 bg-gray-100 text-sm font-medium" />
+      <Skeleton class="h-4 w-4 bg-gray-100" />
+    </CardHeader>
+    <CardContent>
+      <Skeleton class="mb-2 h-6 w-48 bg-gray-100 text-2xl" />
+      <Skeleton v-if="props.stat?.trend" class="h-4 w-64 bg-gray-100 text-xs font-medium" />
+    </CardContent>
+  </Card>
+  <Card v-else-if="props.stat && !props.isSkeleton" class="h-42">
+    <CardHeader class="flex flex-row items-center justify-between pb-2">
+      <CardTitle class="text-sm font-medium"> {{ props.stat.title }} </CardTitle>
+      <component :is="props.stat.icon" class="bg-primary h-[40px] w-auto rounded-md p-2 text-white" />
+    </CardHeader>
+    <CardContent>
+      <div class="text-2xl font-bold">
+        {{ props.stat.metric.toLocaleString('id-ID') }}
+      </div>
+      <p v-if="props.stat.trend !== 0" class="text-muted-foreground flex items-center gap-1 text-xs">
+        <component
+:is="isTrending ? ChevronUp : ChevronDown"
+          :class="cn('h-4 w-4', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })"
+/>
+        <span :class="cn('font-medium', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })">
+          {{ props.stat.trend.toFixed(1) }}%
+          <!-- {{ Math.abs(props.stat.trend).toFixed(1) }}% -->
+        </span>
+        <span>{{ timeFrame }}</span>
+      </p>
+    </CardContent>
+  </Card>
+</template>
+
+<style scoped></style>
diff --git a/app/components/pub/my-ui/summary-card/type.ts b/app/components/pub/my-ui/summary-card/type.ts
new file mode 100644
index 00000000..be04a9ce
--- /dev/null
+++ b/app/components/pub/my-ui/summary-card/type.ts
@@ -0,0 +1,7 @@
+export interface Summary {
+  title: string
+  icon: Component
+  metric: number | string
+  trend: number
+  timeframe: 'yearly' | 'monthly' | 'weekly' | 'daily'
+}
diff --git a/app/components/pub/ui/accordion/Accordion.vue b/app/components/pub/ui/accordion/Accordion.vue
new file mode 100644
index 00000000..1cd25bbe
--- /dev/null
+++ b/app/components/pub/ui/accordion/Accordion.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue'
+import {
+  AccordionRoot,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>
diff --git a/app/components/pub/ui/accordion/AccordionContent.vue b/app/components/pub/ui/accordion/AccordionContent.vue
new file mode 100644
index 00000000..8ace9297
--- /dev/null
+++ b/app/components/pub/ui/accordion/AccordionContent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { AccordionContent } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
diff --git a/app/components/pub/ui/accordion/AccordionItem.vue b/app/components/pub/ui/accordion/AccordionItem.vue
new file mode 100644
index 00000000..449c7b6a
--- /dev/null
+++ b/app/components/pub/ui/accordion/AccordionItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { AccordionItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>
diff --git a/app/components/pub/ui/accordion/AccordionTrigger.vue b/app/components/pub/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 00000000..fb4a3117
--- /dev/null
+++ b/app/components/pub/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ChevronDown } from 'lucide-vue-next'
+import {
+  AccordionHeader,
+  AccordionTrigger,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
diff --git a/app/components/pub/ui/accordion/index.ts b/app/components/pub/ui/accordion/index.ts
new file mode 100644
index 00000000..9340ac06
--- /dev/null
+++ b/app/components/pub/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
diff --git a/app/components/pub/ui/alert-dialog/AlertDialog.vue b/app/components/pub/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 00000000..aaa22d70
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue'
+import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogAction.vue b/app/components/pub/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 00000000..61b87234
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { AlertDialogAction } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue b/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 00000000..6b1d3029
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { AlertDialogCancel } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogContent.vue b/app/components/pub/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 00000000..9e90f9b1
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  AlertDialogContent,
+
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue b/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 00000000..b1a877ac
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  AlertDialogDescription,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogFooter.vue b/app/components/pub/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 00000000..aa4c9010
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogHeader.vue b/app/components/pub/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 00000000..4bab0bb7
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue b/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 00000000..39d64354
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { AlertDialogTitle } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogTrigger.vue b/app/components/pub/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 00000000..e790748f
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/index.ts b/app/components/pub/ui/alert-dialog/index.ts
new file mode 100644
index 00000000..448d5198
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/app/components/pub/ui/alert/Alert.vue b/app/components/pub/ui/alert/Alert.vue
new file mode 100644
index 00000000..69ca5215
--- /dev/null
+++ b/app/components/pub/ui/alert/Alert.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { cn } from '~/lib/utils'
+
+import { alertVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert/AlertDescription.vue b/app/components/pub/ui/alert/AlertDescription.vue
new file mode 100644
index 00000000..cc3dd0f0
--- /dev/null
+++ b/app/components/pub/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert/AlertTitle.vue b/app/components/pub/ui/alert/AlertTitle.vue
new file mode 100644
index 00000000..90ca4ab6
--- /dev/null
+++ b/app/components/pub/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/app/components/pub/ui/alert/index.ts b/app/components/pub/ui/alert/index.ts
new file mode 100644
index 00000000..36bf919b
--- /dev/null
+++ b/app/components/pub/ui/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/app/components/pub/ui/aspect-ratio/AspectRatio.vue b/app/components/pub/ui/aspect-ratio/AspectRatio.vue
new file mode 100644
index 00000000..69ad8fef
--- /dev/null
+++ b/app/components/pub/ui/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AspectRatioProps } from 'radix-vue'
+import { AspectRatio } from 'radix-vue'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio v-bind="props">
+    <slot />
+  </AspectRatio>
+</template>
diff --git a/app/components/pub/ui/aspect-ratio/index.ts b/app/components/pub/ui/aspect-ratio/index.ts
new file mode 100644
index 00000000..3faf121c
--- /dev/null
+++ b/app/components/pub/ui/aspect-ratio/index.ts
@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'
diff --git a/app/components/pub/ui/avatar/Avatar.vue b/app/components/pub/ui/avatar/Avatar.vue
new file mode 100644
index 00000000..384327ff
--- /dev/null
+++ b/app/components/pub/ui/avatar/Avatar.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AvatarVariants } from '.'
+import { AvatarRoot } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+import { avatarVariant } from '.'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/app/components/pub/ui/avatar/AvatarFallback.vue b/app/components/pub/ui/avatar/AvatarFallback.vue
new file mode 100644
index 00000000..1ac23e62
--- /dev/null
+++ b/app/components/pub/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback } from 'radix-vue'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/app/components/pub/ui/avatar/AvatarImage.vue b/app/components/pub/ui/avatar/AvatarImage.vue
new file mode 100644
index 00000000..6ef58f74
--- /dev/null
+++ b/app/components/pub/ui/avatar/AvatarImage.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'radix-vue'
+import { AvatarImage } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
diff --git a/app/components/pub/ui/avatar/index.ts b/app/components/pub/ui/avatar/index.ts
new file mode 100644
index 00000000..d26e9112
--- /dev/null
+++ b/app/components/pub/ui/avatar/index.ts
@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/app/components/pub/ui/badge/Badge.vue b/app/components/pub/ui/badge/Badge.vue
new file mode 100644
index 00000000..ad0aec4c
--- /dev/null
+++ b/app/components/pub/ui/badge/Badge.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { BadgeVariants } from '.'
+import { cn } from '~/lib/utils'
+
+import { badgeVariants } from '.'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/badge/index.ts b/app/components/pub/ui/badge/index.ts
new file mode 100644
index 00000000..1ada7a61
--- /dev/null
+++ b/app/components/pub/ui/badge/index.ts
@@ -0,0 +1,38 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export type Variants = | 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline'
+
+const variants: Record<Variants, string> = {
+  default:
+    'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+  secondary:
+    'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  fresh:
+    'border-transparent bg-teal-400 text-primary-foreground shadow hover:bg-teal-400/80',
+  positive:
+    'border-transparent bg-sky-400 text-primary-foreground shadow hover:bg-sky-400/80',
+  negative:
+    'border-transparent bg-neutral-400 text-destructive-foreground shadow hover:bg-neutral-400/80',
+  warning:
+    'border-transparent bg-orange-400 text-destructive-foreground shadow hover:bg-orange-400/80',
+  destructive:
+    'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+  outline: 'text-foreground',
+}
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: variants,
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/app/components/pub/ui/breadcrumb/Breadcrumb.vue b/app/components/pub/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 00000000..72ca1437
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue b/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 00000000..471bb29b
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbItem.vue b/app/components/pub/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 00000000..3f4e0489
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue b/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 00000000..7828e4ca
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbList.vue b/app/components/pub/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 00000000..154d2b4b
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbPage.vue b/app/components/pub/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 00000000..8d8435e3
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue b/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 00000000..aeeb91a6
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/index.ts b/app/components/pub/ui/breadcrumb/index.ts
new file mode 100644
index 00000000..05909832
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/app/components/pub/ui/button/Button.vue b/app/components/pub/ui/button/Button.vue
new file mode 100644
index 00000000..7fa45408
--- /dev/null
+++ b/app/components/pub/ui/button/Button.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
new file mode 100644
index 00000000..c4063089
--- /dev/null
+++ b/app/components/pub/ui/button/index.ts
@@ -0,0 +1,36 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md md:text-xs 2xl:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-slate-300 dark:border-slate-600 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'md:h8 2xl:h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/app/components/pub/ui/calendar/Calendar.vue b/app/components/pub/ui/calendar/Calendar.vue
new file mode 100644
index 00000000..b77a754a
--- /dev/null
+++ b/app/components/pub/ui/calendar/Calendar.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import CalendarCell from './CalendarCell.vue'
+import CalendarCellTrigger from './CalendarCellTrigger.vue'
+import CalendarGrid from './CalendarGrid.vue'
+import CalendarGridBody from './CalendarGridBody.vue'
+import CalendarGridHead from './CalendarGridHead.vue'
+import CalendarGridRow from './CalendarGridRow.vue'
+import CalendarHeadCell from './CalendarHeadCell.vue'
+import CalendarHeader from './CalendarHeader.vue'
+import CalendarHeading from './CalendarHeading.vue'
+import CalendarNextButton from './CalendarNextButton.vue'
+import CalendarPrevButton from './CalendarPrevButton.vue'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarCell.vue b/app/components/pub/ui/calendar/CalendarCell.vue
new file mode 100644
index 00000000..f5358420
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarCell.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarCellTrigger.vue b/app/components/pub/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 00000000..aea65898
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarCellTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-8 w-8 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGrid.vue b/app/components/pub/ui/calendar/CalendarGrid.vue
new file mode 100644
index 00000000..23544d26
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarGrid, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGridBody.vue b/app/components/pub/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 00000000..ab24c1e4
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from 'radix-vue'
+import { CalendarGridBody } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGridHead.vue b/app/components/pub/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 00000000..2f3025d0
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from 'radix-vue'
+import { CalendarGridHead } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGridRow.vue b/app/components/pub/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 00000000..ab41a17f
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarGridRow, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarHeadCell.vue b/app/components/pub/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 00000000..6d88f784
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarHeadCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarHeader.vue b/app/components/pub/ui/calendar/CalendarHeader.vue
new file mode 100644
index 00000000..86f5d427
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarHeader, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarHeading.vue b/app/components/pub/ui/calendar/CalendarHeading.vue
new file mode 100644
index 00000000..5684472a
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarHeading, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarNextButton.vue b/app/components/pub/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 00000000..3d4f73d1
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarNext, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Icon name="radix-icons:chevron-right" class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarPrevButton.vue b/app/components/pub/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 00000000..a99f4b6a
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CalendarPrev, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Icon name="radix-icons:chevron-left" class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/app/components/pub/ui/calendar/index.ts b/app/components/pub/ui/calendar/index.ts
new file mode 100644
index 00000000..5239a1bd
--- /dev/null
+++ b/app/components/pub/ui/calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/app/components/pub/ui/card/Card.vue b/app/components/pub/ui/card/Card.vue
new file mode 100644
index 00000000..90d5db70
--- /dev/null
+++ b/app/components/pub/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-xl border bg-card text-card-foreground shadow',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardContent.vue b/app/components/pub/ui/card/CardContent.vue
new file mode 100644
index 00000000..08b098f0
--- /dev/null
+++ b/app/components/pub/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-4 2xl:p-5', props.class)"> 
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardDescription.vue b/app/components/pub/ui/card/CardDescription.vue
new file mode 100644
index 00000000..b20d2ad7
--- /dev/null
+++ b/app/components/pub/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-xs 2xl:text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/app/components/pub/ui/card/CardFooter.vue b/app/components/pub/ui/card/CardFooter.vue
new file mode 100644
index 00000000..b2f2e110
--- /dev/null
+++ b/app/components/pub/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-4 2xl:p-5 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardHeader.vue b/app/components/pub/ui/card/CardHeader.vue
new file mode 100644
index 00000000..d6f6ecf4
--- /dev/null
+++ b/app/components/pub/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardTitle.vue b/app/components/pub/ui/card/CardTitle.vue
new file mode 100644
index 00000000..efd2875d
--- /dev/null
+++ b/app/components/pub/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/app/components/pub/ui/card/index.ts b/app/components/pub/ui/card/index.ts
new file mode 100644
index 00000000..9ff6d5e7
--- /dev/null
+++ b/app/components/pub/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
diff --git a/app/components/pub/ui/carousel/Carousel.vue b/app/components/pub/ui/carousel/Carousel.vue
new file mode 100644
index 00000000..8a78b61d
--- /dev/null
+++ b/app/components/pub/ui/carousel/Carousel.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
+import { cn } from '~/lib/utils'
+
+import { useProvideCarousel } from './useCarousel'
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const carouselArgs = useProvideCarousel(props, emits)
+
+defineExpose(carouselArgs)
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    carouselArgs.scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    carouselArgs.scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot v-bind="carouselArgs" />
+  </div>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselContent.vue b/app/components/pub/ui/carousel/CarouselContent.vue
new file mode 100644
index 00000000..74f4896a
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselContent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '~/lib/utils'
+
+import { useCarousel } from './useCarousel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselItem.vue b/app/components/pub/ui/carousel/CarouselItem.vue
new file mode 100644
index 00000000..9e0915bb
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '~/lib/utils'
+
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselNext.vue b/app/components/pub/ui/carousel/CarouselNext.vue
new file mode 100644
index 00000000..dbcc33dc
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselNext.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { ArrowRight } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+import { Button } from '../button'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollNext"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-right-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight class="h-4 w-4 text-current" />
+    </slot>
+  </Button>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselPrevious.vue b/app/components/pub/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 00000000..a0160401
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { ArrowLeft } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+import { Button } from '../button'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-left-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft class="h-4 w-4 text-current" />
+    </slot>
+  </Button>
+</template>
diff --git a/app/components/pub/ui/carousel/index.ts b/app/components/pub/ui/carousel/index.ts
new file mode 100644
index 00000000..c37ad02d
--- /dev/null
+++ b/app/components/pub/ui/carousel/index.ts
@@ -0,0 +1,10 @@
+export { default as Carousel } from './Carousel.vue'
+export { default as CarouselContent } from './CarouselContent.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+export { useCarousel } from './useCarousel'
+
+export type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'
diff --git a/app/components/pub/ui/carousel/interface.ts b/app/components/pub/ui/carousel/interface.ts
new file mode 100644
index 00000000..99c4f1a8
--- /dev/null
+++ b/app/components/pub/ui/carousel/interface.ts
@@ -0,0 +1,20 @@
+import type {
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
+} from 'embla-carousel'
+import type { HTMLAttributes, Ref } from 'vue'
+
+export interface CarouselProps {
+  opts?: CarouselOptions | Ref<CarouselOptions>
+  plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: CarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}
diff --git a/app/components/pub/ui/carousel/useCarousel.ts b/app/components/pub/ui/carousel/useCarousel.ts
new file mode 100644
index 00000000..fa5781c8
--- /dev/null
+++ b/app/components/pub/ui/carousel/useCarousel.ts
@@ -0,0 +1,59 @@
+import type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'
+import type { CarouselEmits, CarouselProps } from './interface'
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(true)
+    const canScrollPrev = ref(true)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api.canScrollNext()
+      canScrollPrev.value = api.canScrollPrev()
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+      { return }
+
+      emblaApi.value?.on('init', onSelect)
+      emblaApi.value?.on('reInit', onSelect)
+      emblaApi.value?.on('select', onSelect)
+
+      emits('init-api', emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+  { throw new Error('useCarousel must be used within a <Carousel />') }
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }
diff --git a/app/components/pub/ui/chart-area/AreaChart.vue b/app/components/pub/ui/chart-area/AreaChart.vue
new file mode 100644
index 00000000..c8efbfa6
--- /dev/null
+++ b/app/components/pub/ui/chart-area/AreaChart.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { Area, Axis, CurveType, Line } from '@unovis/ts'
+import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+  /**
+   * Controls the visibility of gradient.
+   * @default true
+   */
+  showGradiant?: boolean
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+  showGradiant: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
+            <template v-if="showGradiant">
+              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
+              <stop offset="95%" :stop-color="color" stop-opacity="0" />
+            </template>
+            <template v-else>
+              <stop offset="0%" :stop-color="color" />
+            </template>
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisArea
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          color="auto"
+          :curve-type="curveType"
+          :attributes="{
+            [Area.selectors.area]: {
+              fill: `url(#color-${i})`,
+            },
+          }"
+          :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
+        />
+      </template>
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :color="colors[i]"
+          :curve-type="curveType"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-area/index.ts b/app/components/pub/ui/chart-area/index.ts
new file mode 100644
index 00000000..2415a56c
--- /dev/null
+++ b/app/components/pub/ui/chart-area/index.ts
@@ -0,0 +1,66 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as AreaChart } from './AreaChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/chart-bar/BarChart.vue b/app/components/pub/ui/chart-bar/BarChart.vue
new file mode 100644
index 00000000..f3feda20
--- /dev/null
+++ b/app/components/pub/ui/chart-bar/BarChart.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
+import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Change the type of the chart
+   * @default "grouped"
+   */
+  type?: 'stacked' | 'grouped'
+  /**
+   * Rounded bar corners
+   * @default 0
+   */
+  roundedCorners?: number
+}>(), {
+  type: 'grouped',
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  filterOpacity: 0.2,
+  roundedCorners: 0,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+
+const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
+const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+      :margin="margin"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
+
+      <VisBarComponent
+        :x="(d: Data, i: number) => i"
+        :y="categories.map(category => (d: Data) => d[category]) "
+        :color="colors"
+        :rounded-corners="roundedCorners"
+        :bar-padding="0.05"
+        :attributes="{
+          [selectorsBar]: {
+            opacity: (d: Data, i:number) => {
+              const pos = i % categories.length
+              return legendItems[pos]?.inactive ? filterOpacity : 1
+            },
+          },
+        }"
+      />
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-bar/index.ts b/app/components/pub/ui/chart-bar/index.ts
new file mode 100644
index 00000000..762f2ce3
--- /dev/null
+++ b/app/components/pub/ui/chart-bar/index.ts
@@ -0,0 +1,66 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as BarChart } from './BarChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/chart-donut/DonutChart.vue b/app/components/pub/ui/chart-donut/DonutChart.vue
new file mode 100644
index 00000000..b8e69309
--- /dev/null
+++ b/app/components/pub/ui/chart-donut/DonutChart.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { Donut } from '@unovis/ts'
+import { VisDonut, VisSingleContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { ChartSingleTooltip, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
+  /**
+   * Sets the name of the key containing the quantitative chart values.
+   */
+  category: KeyOfT
+  /**
+   * Change the type of the chart
+   * @default "donut"
+   */
+  type?: 'donut' | 'pie'
+  /**
+   * Function to sort the segment
+   */
+  sortFunction?: (a: any, b: any) => number | undefined
+  /**
+   * Controls the formatting for the label.
+   */
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+}>(), {
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  sortFunction: () => undefined,
+  valueFormatter: (tick: number) => `${tick}`,
+  type: 'donut',
+  filterOpacity: 0.2,
+  showTooltip: true,
+  showLegend: true,
+})
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
+const isMounted = useMounted()
+const activeSegmentKey = ref<string>()
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
+const legendItems = computed(() => props.data.map((item, i) => ({
+  name: item[props.index],
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const totalValue = computed(() => props.data.reduce((prev, curr) => {
+  return prev + curr[props.category]
+}, 0))
+</script>
+
+<template>
+  <div :class="cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')">
+    <VisSingleContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <ChartSingleTooltip
+        :selector="Donut.selectors.segment"
+        :index="category"
+        :items="legendItems"
+        :value-formatter="valueFormatter"
+        :custom-tooltip="customTooltip"
+      />
+
+      <VisDonut
+        :value="(d: Data) => d[category]"
+        :sort-function="sortFunction"
+        :color="colors"
+        :arc-width="type === 'donut' ? 20 : 0"
+        :show-background="false"
+        :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
+        :events="{
+          [Donut.selectors.segment]: {
+            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {
+              if (d?.data?.[index] === activeSegmentKey) {
+                activeSegmentKey = undefined
+                elements.forEach(el => el.style.opacity = '1')
+              }
+              else {
+                activeSegmentKey = d?.data?.[index]
+                elements.forEach(el => el.style.opacity = `${filterOpacity}`)
+                elements[i].style.opacity = '1'
+              }
+            },
+          },
+        }"
+      />
+
+      <slot />
+    </VisSingleContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-donut/index.ts b/app/components/pub/ui/chart-donut/index.ts
new file mode 100644
index 00000000..db2b49d0
--- /dev/null
+++ b/app/components/pub/ui/chart-donut/index.ts
@@ -0,0 +1,39 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as DonutChart } from './DonutChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+}
diff --git a/app/components/pub/ui/chart-line/LineChart.vue b/app/components/pub/ui/chart-line/LineChart.vue
new file mode 100644
index 00000000..3cb6113a
--- /dev/null
+++ b/app/components/pub/ui/chart-line/LineChart.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { Axis, CurveType, Line } from '@unovis/ts'
+import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :margin="{ left: 20, right: 20 }"
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :curve-type="curveType"
+          :color="colors[i]"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-line/index.ts b/app/components/pub/ui/chart-line/index.ts
new file mode 100644
index 00000000..1078d270
--- /dev/null
+++ b/app/components/pub/ui/chart-line/index.ts
@@ -0,0 +1,66 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as LineChart } from './LineChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/chart/ChartCrosshair.vue b/app/components/pub/ui/chart/ChartCrosshair.vue
new file mode 100644
index 00000000..f49600f6
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartCrosshair.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import { omit } from '@unovis/ts'
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
+import { createApp } from 'vue'
+import { ChartTooltip } from '.'
+
+const props = withDefaults(defineProps<{
+  colors?: string[]
+  index: string
+  items: BulletLegendItemInterface[]
+  customTooltip?: Component
+}>(), {
+  colors: () => [],
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any) {
+  if (wm.has(d)) {
+    return wm.get(d)
+  }
+  else {
+    const componentDiv = document.createElement('div')
+    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+      const legendReference = props.items.find(i => i.name === key)
+      return { ...legendReference, value }
+    })
+    const TooltipComponent = props.customTooltip ?? ChartTooltip
+    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
+    wm.set(d, componentDiv.innerHTML)
+    return componentDiv.innerHTML
+  }
+}
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? 'transparent'
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="template" :color="color" />
+</template>
diff --git a/app/components/pub/ui/chart/ChartLegend.vue b/app/components/pub/ui/chart/ChartLegend.vue
new file mode 100644
index 00000000..225adc94
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartLegend.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { BulletLegend } from '@unovis/ts'
+import { VisBulletLegend } from '@unovis/vue'
+import { nextTick, onMounted, ref } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = withDefaults(defineProps<{ items?: BulletLegendItemInterface[] }>(), {
+  items: () => [],
+})
+
+const emits = defineEmits<{
+  'legendItemClick': [d: BulletLegendItemInterface, i: number]
+  'update:items': [payload: BulletLegendItemInterface[]]
+}>()
+
+const elRef = ref<HTMLElement>()
+
+onMounted(() => {
+  const selector = `.${BulletLegend.selectors.item}`
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector)
+    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
+    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
+  })
+})
+
+function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+  const isBulletActive = !props.items[i].inactive
+  const isFilterApplied = props.items.some(i => i.inactive)
+  if (isFilterApplied && isBulletActive) {
+    // reset filter
+    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))
+  }
+  else {
+    // apply selection, set other item as inactive
+    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
+  }
+}
+</script>
+
+<template>
+  <div ref="elRef" class="w-max">
+    <VisBulletLegend
+      :items="items"
+      :on-legend-item-click="onLegendItemClick"
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart/ChartSingleTooltip.vue b/app/components/pub/ui/chart/ChartSingleTooltip.vue
new file mode 100644
index 00000000..17594762
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartSingleTooltip.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import { omit } from '@unovis/ts'
+import { VisTooltip } from '@unovis/vue'
+import { createApp } from 'vue'
+import { ChartTooltip } from '.'
+
+const props = withDefaults(defineProps<{
+  selector: string
+  index: string
+  items?: BulletLegendItemInterface[]
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  customTooltip?: Component
+}>(), {
+  valueFormatter: (tick: number) => `${tick}`,
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+  if (props.index in d) {
+    if (wm.has(d)) {
+      return wm.get(d)
+    }
+    else {
+      const componentDiv = document.createElement('div')
+      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+        const legendReference = props.items?.find(i => i.name === key)
+        return { ...legendReference, value: props.valueFormatter(value) }
+      })
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      // eslint-disable-next-line vue/one-component-per-file
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+
+  else {
+    const data = d.data
+
+    if (wm.has(data)) {
+      return wm.get(data)
+    }
+    else {
+      const style = getComputedStyle(elements[i])
+      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
+      const componentDiv = document.createElement('div')
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      // eslint-disable-next-line vue/one-component-per-file
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+}
+</script>
+
+<template>
+  <VisTooltip
+    :horizontal-shift="20" :vertical-shift="20" :triggers="{
+      [selector]: template,
+    }"
+  />
+</template>
diff --git a/app/components/pub/ui/chart/ChartTooltip.vue b/app/components/pub/ui/chart/ChartTooltip.vue
new file mode 100644
index 00000000..24907f5f
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartTooltip.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '../card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardHeader v-if="title" class="border-b p-3">
+      <CardTitle>
+        {{ title }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="min-w-[180px] flex flex-col gap-1 p-3">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+        <div class="flex items-center">
+          <span class="mr-2 h-2.5 w-2.5">
+            <svg width="100%" height="100%" viewBox="0 0 30 30">
+              <path
+                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
+                :stroke="item.color"
+                :fill="item.color"
+                stroke-width="1"
+              />
+            </svg>
+          </span>
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="ml-4 font-semibold">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/app/components/pub/ui/chart/index.ts b/app/components/pub/ui/chart/index.ts
new file mode 100644
index 00000000..7426ca17
--- /dev/null
+++ b/app/components/pub/ui/chart/index.ts
@@ -0,0 +1,18 @@
+export { default as ChartCrosshair } from './ChartCrosshair.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
+export { default as ChartTooltip } from './ChartTooltip.vue'
+
+export function defaultColors(count: number = 3) {
+  const quotient = Math.floor(count / 2)
+  const remainder = count % 2
+
+  const primaryCount = quotient + remainder
+  const secondaryCount = quotient
+  return [
+    ...Array.from(Array.from({ length: primaryCount }).keys()).map(i => `hsl(var(--primary) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(Array.from({ length: secondaryCount }).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+  ]
+}
+
+export * from './interface'
diff --git a/app/components/pub/ui/chart/interface.ts b/app/components/pub/ui/chart/interface.ts
new file mode 100644
index 00000000..c3838afc
--- /dev/null
+++ b/app/components/pub/ui/chart/interface.ts
@@ -0,0 +1,64 @@
+import type { Spacing } from '@unovis/ts'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/checkbox/Checkbox.vue b/app/components/pub/ui/checkbox/Checkbox.vue
new file mode 100644
index 00000000..1e01933d
--- /dev/null
+++ b/app/components/pub/ui/checkbox/Checkbox.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-6 w-6 md:h-5 md:w-5 2xl:h-6 2xl:w-6 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="h-full w-full flex items-center justify-center text-current">
+      <slot>
+        <Icon name="radix-icons:check" class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/app/components/pub/ui/checkbox/index.ts b/app/components/pub/ui/checkbox/index.ts
new file mode 100644
index 00000000..8c28c286
--- /dev/null
+++ b/app/components/pub/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'
diff --git a/app/components/pub/ui/collapsible/Collapsible.vue b/app/components/pub/ui/collapsible/Collapsible.vue
new file mode 100644
index 00000000..fae7919c
--- /dev/null
+++ b/app/components/pub/ui/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/app/components/pub/ui/collapsible/CollapsibleContent.vue b/app/components/pub/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 00000000..5c82af24
--- /dev/null
+++ b/app/components/pub/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from 'radix-vue'
+import { CollapsibleContent } from 'radix-vue'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/app/components/pub/ui/collapsible/CollapsibleTrigger.vue b/app/components/pub/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 00000000..e3074994
--- /dev/null
+++ b/app/components/pub/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from 'radix-vue'
+import { CollapsibleTrigger } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/app/components/pub/ui/collapsible/index.ts b/app/components/pub/ui/collapsible/index.ts
new file mode 100644
index 00000000..abab9567
--- /dev/null
+++ b/app/components/pub/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
diff --git a/app/components/pub/ui/command/Command.vue b/app/components/pub/ui/command/Command.vue
new file mode 100644
index 00000000..bf013df6
--- /dev/null
+++ b/app/components/pub/ui/command/Command.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/app/components/pub/ui/command/CommandDialog.vue b/app/components/pub/ui/command/CommandDialog.vue
new file mode 100644
index 00000000..efe417df
--- /dev/null
+++ b/app/components/pub/ui/command/CommandDialog.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { useForwardPropsEmits, VisuallyHidden } from 'radix-vue'
+import { Dialog, DialogContent } from '../dialog'
+import Command from './Command.vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <VisuallyHidden as-child>
+        <DialogTitle />
+      </VisuallyHidden>
+      <VisuallyHidden as-child>
+        <DialogDescription aria-describedby="undefined" />
+      </VisuallyHidden>
+      <Command class="[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group]]:px-2 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:font-medium">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/pub/ui/command/CommandEmpty.vue b/app/components/pub/ui/command/CommandEmpty.vue
new file mode 100644
index 00000000..a21f3109
--- /dev/null
+++ b/app/components/pub/ui/command/CommandEmpty.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxEmpty } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/app/components/pub/ui/command/CommandGroup.vue b/app/components/pub/ui/command/CommandGroup.vue
new file mode 100644
index 00000000..04b9c094
--- /dev/null
+++ b/app/components/pub/ui/command/CommandGroup.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs text-muted-foreground font-medium">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/app/components/pub/ui/command/CommandInput.vue b/app/components/pub/ui/command/CommandInput.vue
new file mode 100644
index 00000000..c75ee3d7
--- /dev/null
+++ b/app/components/pub/ui/command/CommandInput.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ComboboxInputProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Search } from 'lucide-vue-next'
+import { ComboboxInput, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/command/CommandItem.vue b/app/components/pub/ui/command/CommandItem.vue
new file mode 100644
index 00000000..b79c8376
--- /dev/null
+++ b/app/components/pub/ui/command/CommandItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/app/components/pub/ui/command/CommandList.vue b/app/components/pub/ui/command/CommandList.vue
new file mode 100644
index 00000000..99b3269f
--- /dev/null
+++ b/app/components/pub/ui/command/CommandList.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
diff --git a/app/components/pub/ui/command/CommandSeparator.vue b/app/components/pub/ui/command/CommandSeparator.vue
new file mode 100644
index 00000000..c22cdc3a
--- /dev/null
+++ b/app/components/pub/ui/command/CommandSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ComboboxSeparator } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/app/components/pub/ui/command/CommandShortcut.vue b/app/components/pub/ui/command/CommandShortcut.vue
new file mode 100644
index 00000000..aed37517
--- /dev/null
+++ b/app/components/pub/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/command/index.ts b/app/components/pub/ui/command/index.ts
new file mode 100644
index 00000000..0e35f4b9
--- /dev/null
+++ b/app/components/pub/ui/command/index.ts
@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
diff --git a/app/components/pub/ui/context-menu/ContextMenu.vue b/app/components/pub/ui/context-menu/ContextMenu.vue
new file mode 100644
index 00000000..363e9c6b
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<ContextMenuRootProps>()
+const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="forwarded">
+    <slot />
+  </ContextMenuRoot>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue b/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 00000000..2dee4a75
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Check } from 'lucide-vue-next'
+import {
+  ContextMenuCheckboxItem,
+
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuContent.vue b/app/components/pub/ui/context-menu/ContextMenuContent.vue
new file mode 100644
index 00000000..a4ddf29b
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuContent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  ContextMenuContent,
+
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuGroup.vue b/app/components/pub/ui/context-menu/ContextMenuGroup.vue
new file mode 100644
index 00000000..4dda085d
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuGroupProps } from 'radix-vue'
+import { ContextMenuGroup } from 'radix-vue'
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuItem.vue b/app/components/pub/ui/context-menu/ContextMenuItem.vue
new file mode 100644
index 00000000..9b0c703b
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  ContextMenuItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuLabel.vue b/app/components/pub/ui/context-menu/ContextMenuLabel.vue
new file mode 100644
index 00000000..83e09f70
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ContextMenuLabel } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="delegatedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
+         inset && 'pl-8', props.class,
+      )"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuPortal.vue b/app/components/pub/ui/context-menu/ContextMenuPortal.vue
new file mode 100644
index 00000000..28e2192d
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuPortal.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuPortalProps } from 'radix-vue'
+import { ContextMenuPortal } from 'radix-vue'
+
+const props = defineProps<ContextMenuPortalProps>()
+</script>
+
+<template>
+  <ContextMenuPortal v-bind="props">
+    <slot />
+  </ContextMenuPortal>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuRadioGroup.vue b/app/components/pub/ui/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 00000000..a40feffb
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'radix-vue'
+import {
+  ContextMenuRadioGroup,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue b/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 00000000..88a672e9
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Circle } from 'lucide-vue-next'
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSeparator.vue b/app/components/pub/ui/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 00000000..a5d8a0a3
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ContextMenuSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  ContextMenuSeparator,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuShortcut.vue b/app/components/pub/ui/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 00000000..aed37517
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSub.vue b/app/components/pub/ui/context-menu/ContextMenuSub.vue
new file mode 100644
index 00000000..0d3c61db
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue'
+import {
+  ContextMenuSub,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuSubProps>()
+const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuSub v-bind="forwarded">
+    <slot />
+  </ContextMenuSub>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSubContent.vue b/app/components/pub/ui/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 00000000..54a8f242
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  ContextMenuSubContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue b/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 00000000..128b6162
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  ContextMenuSubTrigger,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuTrigger.vue b/app/components/pub/ui/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 00000000..136ee589
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from 'radix-vue'
+import { ContextMenuTrigger, useForwardProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="forwardedProps">
+    <slot />
+  </ContextMenuTrigger>
+</template>
diff --git a/app/components/pub/ui/context-menu/index.ts b/app/components/pub/ui/context-menu/index.ts
new file mode 100644
index 00000000..3ed59e63
--- /dev/null
+++ b/app/components/pub/ui/context-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
diff --git a/app/components/pub/ui/dialog/Dialog.vue b/app/components/pub/ui/dialog/Dialog.vue
new file mode 100644
index 00000000..5f6a5632
--- /dev/null
+++ b/app/components/pub/ui/dialog/Dialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogClose.vue b/app/components/pub/ui/dialog/DialogClose.vue
new file mode 100644
index 00000000..1fa61805
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'radix-vue'
+import { DialogClose } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogContent.vue b/app/components/pub/ui/dialog/DialogContent.vue
new file mode 100644
index 00000000..0c0fbf6b
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogContent.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-2 2x:gap-3 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogDescription.vue b/app/components/pub/ui/dialog/DialogDescription.vue
new file mode 100644
index 00000000..c7ac62d1
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogDescription.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DialogDescription, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogFooter.vue b/app/components/pub/ui/dialog/DialogFooter.vue
new file mode 100644
index 00000000..4627374d
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogHeader.vue b/app/components/pub/ui/dialog/DialogHeader.vue
new file mode 100644
index 00000000..176e9c7e
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left mb-2 2xl:mb-3', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogScrollContent.vue b/app/components/pub/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 00000000..802b5182
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid data-[state=closed]:animate-out data-[state=open]:animate-in place-items-center overflow-y-auto bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary"
+        >
+          <X class="h-4 w-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogTitle.vue b/app/components/pub/ui/dialog/DialogTitle.vue
new file mode 100644
index 00000000..53d2e3d2
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogTitle.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DialogTitle, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        '!text-base 2xl:text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogTrigger.vue b/app/components/pub/ui/dialog/DialogTrigger.vue
new file mode 100644
index 00000000..b966b29d
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/app/components/pub/ui/dialog/index.ts b/app/components/pub/ui/dialog/index.ts
new file mode 100644
index 00000000..ca8cfeae
--- /dev/null
+++ b/app/components/pub/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
diff --git a/app/components/pub/ui/drawer/Drawer.vue b/app/components/pub/ui/drawer/Drawer.vue
new file mode 100644
index 00000000..8be66568
--- /dev/null
+++ b/app/components/pub/ui/drawer/Drawer.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerRoot } from 'vaul-vue'
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+})
+
+const emits = defineEmits<DrawerRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerContent.vue b/app/components/pub/ui/drawer/DrawerContent.vue
new file mode 100644
index 00000000..9be84b5b
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerContent.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import { cn } from '~/lib/utils'
+
+import DrawerOverlay from './DrawerOverlay.vue'
+
+const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded" :class="cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        props.class,
+      )"
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerDescription.vue b/app/components/pub/ui/drawer/DrawerDescription.vue
new file mode 100644
index 00000000..8baddf33
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from 'vaul-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { DrawerDescription } from 'vaul-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerDescription v-bind="delegatedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerFooter.vue b/app/components/pub/ui/drawer/DrawerFooter.vue
new file mode 100644
index 00000000..1727b9d7
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerHeader.vue b/app/components/pub/ui/drawer/DrawerHeader.vue
new file mode 100644
index 00000000..e2f229df
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerOverlay.vue b/app/components/pub/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 00000000..bd0750d0
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from 'radix-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { DrawerOverlay } from 'vaul-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerTitle.vue b/app/components/pub/ui/drawer/DrawerTitle.vue
new file mode 100644
index 00000000..c9e6fc04
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from 'vaul-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { DrawerTitle } from 'vaul-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/app/components/pub/ui/drawer/index.ts b/app/components/pub/ui/drawer/index.ts
new file mode 100644
index 00000000..d41b7928
--- /dev/null
+++ b/app/components/pub/ui/drawer/index.ts
@@ -0,0 +1,8 @@
+export { default as Drawer } from './Drawer.vue'
+export { default as DrawerContent } from './DrawerContent.vue'
+export { default as DrawerDescription } from './DrawerDescription.vue'
+export { default as DrawerFooter } from './DrawerFooter.vue'
+export { default as DrawerHeader } from './DrawerHeader.vue'
+export { default as DrawerOverlay } from './DrawerOverlay.vue'
+export { default as DrawerTitle } from './DrawerTitle.vue'
+export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenu.vue b/app/components/pub/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 00000000..c9e77fe7
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 00000000..26a77270
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Check } from 'lucide-vue-next'
+import {
+  DropdownMenuCheckboxItem,
+
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 00000000..db152f46
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  DropdownMenuContent,
+
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuGroup.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 00000000..e9711764
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from 'radix-vue'
+import { DropdownMenuGroup } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 00000000..cd89c873
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-pointer select-none gap-2 items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 00000000..1286ee31
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 00000000..c21b27a8
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'radix-vue'
+import {
+  DropdownMenuRadioGroup,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 00000000..c5bb6f8a
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Circle } from 'lucide-vue-next'
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 00000000..44d2da7e
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  DropdownMenuSeparator,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuShortcut.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 00000000..ea09ac44
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSub.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 00000000..af6bac43
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue'
+import {
+  DropdownMenuSub,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 00000000..00a59383
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  DropdownMenuSubContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 00000000..bda57706
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  DropdownMenuSubTrigger,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex gap-2 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuTrigger.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 00000000..baf0f7c0
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'radix-vue'
+import { DropdownMenuTrigger, useForwardProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/index.ts b/app/components/pub/ui/dropdown-menu/index.ts
new file mode 100644
index 00000000..6011f35c
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'radix-vue'
diff --git a/app/components/pub/ui/form/FormControl.vue b/app/components/pub/ui/form/FormControl.vue
new file mode 100644
index 00000000..ca813eab
--- /dev/null
+++ b/app/components/pub/ui/form/FormControl.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from 'radix-vue'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :class="{ 'text-destructive border-destructive focus-visible:ring-destructive': error }"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
diff --git a/app/components/pub/ui/form/FormDescription.vue b/app/components/pub/ui/form/FormDescription.vue
new file mode 100644
index 00000000..b8508491
--- /dev/null
+++ b/app/components/pub/ui/form/FormDescription.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('md:text-xs 2xl:text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/app/components/pub/ui/form/FormItem.vue b/app/components/pub/ui/form/FormItem.vue
new file mode 100644
index 00000000..21b662f4
--- /dev/null
+++ b/app/components/pub/ui/form/FormItem.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { provide } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/form/FormLabel.vue b/app/components/pub/ui/form/FormLabel.vue
new file mode 100644
index 00000000..e724e335
--- /dev/null
+++ b/app/components/pub/ui/form/FormLabel.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Label } from '~/components/pub/ui/label'
+import { cn } from '~/lib/utils'
+
+import { useFormField } from './useFormField'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label :class="cn(error && 'text-destructive', props.class)" :for="formItemId">
+    <slot />
+  </Label>
+</template>
diff --git a/app/components/pub/ui/form/FormMessage.vue b/app/components/pub/ui/form/FormMessage.vue
new file mode 100644
index 00000000..ed3ecea5
--- /dev/null
+++ b/app/components/pub/ui/form/FormMessage.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
+import { useFormField } from './useFormField'
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-[0.8rem] text-destructive font-sans"
+  />
+</template>
diff --git a/app/components/pub/ui/form/index.ts b/app/components/pub/ui/form/index.ts
new file mode 100644
index 00000000..1a3be118
--- /dev/null
+++ b/app/components/pub/ui/form/index.ts
@@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
diff --git a/app/components/pub/ui/form/injectionKeys.ts b/app/components/pub/ui/form/injectionKeys.ts
new file mode 100644
index 00000000..5b9ee8f6
--- /dev/null
+++ b/app/components/pub/ui/form/injectionKeys.ts
@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY = Symbol('id') as InjectionKey<string>
diff --git a/app/components/pub/ui/form/useFormField.ts b/app/components/pub/ui/form/useFormField.ts
new file mode 100644
index 00000000..b94b79ae
--- /dev/null
+++ b/app/components/pub/ui/form/useFormField.ts
@@ -0,0 +1,29 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+  const fieldState = {
+    valid: useIsFieldValid(),
+    isDirty: useIsFieldDirty(),
+    isTouched: useIsFieldTouched(),
+    error: useFieldError(),
+  }
+
+  if (!fieldContext)
+  { throw new Error('useFormField should be used within <FormField>') }
+
+  const { name } = fieldContext
+  const id = fieldItemContext
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
diff --git a/app/components/pub/ui/hover-card/HoverCard.vue b/app/components/pub/ui/hover-card/HoverCard.vue
new file mode 100644
index 00000000..ef13ea57
--- /dev/null
+++ b/app/components/pub/ui/hover-card/HoverCard.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'radix-vue'
+import { HoverCardRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/app/components/pub/ui/hover-card/HoverCardContent.vue b/app/components/pub/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 00000000..39c214f5
--- /dev/null
+++ b/app/components/pub/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  HoverCardContent,
+
+  HoverCardPortal,
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/app/components/pub/ui/hover-card/HoverCardTrigger.vue b/app/components/pub/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 00000000..b3907564
--- /dev/null
+++ b/app/components/pub/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from 'radix-vue'
+import { HoverCardTrigger } from 'radix-vue'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/app/components/pub/ui/hover-card/index.ts b/app/components/pub/ui/hover-card/index.ts
new file mode 100644
index 00000000..9e4ccc2a
--- /dev/null
+++ b/app/components/pub/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
new file mode 100644
index 00000000..21603c73
--- /dev/null
+++ b/app/components/pub/ui/input/Input.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :class="
+      cn(
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  />
+</template>
diff --git a/app/components/pub/ui/input/index.ts b/app/components/pub/ui/input/index.ts
new file mode 100644
index 00000000..a691dd6c
--- /dev/null
+++ b/app/components/pub/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
diff --git a/app/components/pub/ui/label/Label.vue b/app/components/pub/ui/label/Label.vue
new file mode 100644
index 00000000..c3c34a8b
--- /dev/null
+++ b/app/components/pub/ui/label/Label.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { LabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Label } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'md:!text-xs 2xl:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/app/components/pub/ui/label/index.ts b/app/components/pub/ui/label/index.ts
new file mode 100644
index 00000000..572c2f01
--- /dev/null
+++ b/app/components/pub/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/app/components/pub/ui/menubar/Menubar.vue b/app/components/pub/ui/menubar/Menubar.vue
new file mode 100644
index 00000000..87a242f9
--- /dev/null
+++ b/app/components/pub/ui/menubar/Menubar.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  MenubarRoot,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarRoot>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarCheckboxItem.vue b/app/components/pub/ui/menubar/MenubarCheckboxItem.vue
new file mode 100644
index 00000000..a3495cb6
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarCheckboxItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  MenubarCheckboxItem,
+
+  MenubarItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <MenubarItemIndicator>
+        <Icon name="i-radix-icons-check" class="h-4 w-4" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarContent.vue b/app/components/pub/ui/menubar/MenubarContent.vue
new file mode 100644
index 00000000..21feeb6e
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  MenubarContent,
+
+  MenubarPortal,
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'start',
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarGroup.vue b/app/components/pub/ui/menubar/MenubarGroup.vue
new file mode 100644
index 00000000..e2e79d92
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarGroupProps } from 'radix-vue'
+import { MenubarGroup } from 'radix-vue'
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup v-bind="props">
+    <slot />
+  </MenubarGroup>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarItem.vue b/app/components/pub/ui/menubar/MenubarItem.vue
new file mode 100644
index 00000000..ce7a73e9
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  MenubarItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarItem>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarLabel.vue b/app/components/pub/ui/menubar/MenubarLabel.vue
new file mode 100644
index 00000000..6f561717
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { MenubarLabel } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+</script>
+
+<template>
+  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+    <slot />
+  </MenubarLabel>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarMenu.vue b/app/components/pub/ui/menubar/MenubarMenu.vue
new file mode 100644
index 00000000..3e0bc452
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarMenu.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from 'radix-vue'
+import { MenubarMenu } from 'radix-vue'
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu v-bind="props">
+    <slot />
+  </MenubarMenu>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarRadioGroup.vue b/app/components/pub/ui/menubar/MenubarRadioGroup.vue
new file mode 100644
index 00000000..0bc7a0a6
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarRadioGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from 'radix-vue'
+import {
+  MenubarRadioGroup,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<MenubarRadioGroupProps>()
+
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup v-bind="forwarded">
+    <slot />
+  </MenubarRadioGroup>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarRadioItem.vue b/app/components/pub/ui/menubar/MenubarRadioItem.vue
new file mode 100644
index 00000000..50d3a661
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarRadioItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <MenubarItemIndicator>
+        <Icon name="i-radix-icons-dot-filled" class="h-4 w-4 fill-current" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSeparator.vue b/app/components/pub/ui/menubar/MenubarSeparator.vue
new file mode 100644
index 00000000..62f82300
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { MenubarSeparator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-muted', props.class)" v-bind="forwardedProps" />
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarShortcut.vue b/app/components/pub/ui/menubar/MenubarShortcut.vue
new file mode 100644
index 00000000..aed37517
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSub.vue b/app/components/pub/ui/menubar/MenubarSub.vue
new file mode 100644
index 00000000..f1c8395d
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSub.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from 'radix-vue'
+import { MenubarSub, useForwardPropsEmits } from 'radix-vue'
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub v-bind="forwarded">
+    <slot />
+  </MenubarSub>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSubContent.vue b/app/components/pub/ui/menubar/MenubarSubContent.vue
new file mode 100644
index 00000000..fe71b058
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSubContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  MenubarPortal,
+  MenubarSubContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSubTrigger.vue b/app/components/pub/ui/menubar/MenubarSubTrigger.vue
new file mode 100644
index 00000000..960ee95b
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSubTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { MenubarSubTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <Icon name="i-radix-icons-chevron-right" class="ml-auto h-4 w-4" />
+  </MenubarSubTrigger>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarTrigger.vue b/app/components/pub/ui/menubar/MenubarTrigger.vue
new file mode 100644
index 00000000..bde777c1
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { MenubarTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>
diff --git a/app/components/pub/ui/menubar/index.ts b/app/components/pub/ui/menubar/index.ts
new file mode 100644
index 00000000..600c23ea
--- /dev/null
+++ b/app/components/pub/ui/menubar/index.ts
@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenu.vue b/app/components/pub/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 00000000..bf705594
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  NavigationMenuRoot,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue b/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 00000000..dbb23713
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  NavigationMenuContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue b/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 00000000..d6ec44dc
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { NavigationMenuIndicator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuItem.vue b/app/components/pub/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 00000000..09e26ca2
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from 'radix-vue'
+import { NavigationMenuItem } from 'radix-vue'
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuLink.vue b/app/components/pub/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 00000000..4179154d
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'radix-vue'
+import {
+  NavigationMenuLink,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuList.vue b/app/components/pub/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 00000000..0057b60d
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { NavigationMenuList, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue b/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 00000000..01cb04a3
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  NavigationMenuTrigger,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { navigationMenuTriggerStyle } from '.'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <Icon
+      name="i-radix-icons-chevron-down"
+      class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue b/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 00000000..eb336040
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  NavigationMenuViewport,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/index.ts b/app/components/pub/ui/navigation-menu/index.ts
new file mode 100644
index 00000000..fd0ef971
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/index.ts
@@ -0,0 +1,12 @@
+import { cva } from 'class-variance-authority'
+
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+)
diff --git a/app/components/pub/ui/number-field/NumberField.vue b/app/components/pub/ui/number-field/NumberField.vue
new file mode 100644
index 00000000..9d92a05f
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberField.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+    <slot />
+  </NumberFieldRoot>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldContent.vue b/app/components/pub/ui/number-field/NumberFieldContent.vue
new file mode 100644
index 00000000..5fe35cd8
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldDecrement.vue b/app/components/pub/ui/number-field/NumberFieldDecrement.vue
new file mode 100644
index 00000000..5ec2bf87
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Minus } from 'lucide-vue-next'
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldIncrement.vue b/app/components/pub/ui/number-field/NumberFieldIncrement.vue
new file mode 100644
index 00000000..49bb5d08
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldInput.vue b/app/components/pub/ui/number-field/NumberFieldInput.vue
new file mode 100644
index 00000000..e51206ac
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldInput.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { NumberFieldInput } from 'radix-vue'
+import { cn } from '~/lib/utils'
+</script>
+
+<template>
+  <NumberFieldInput :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-10 py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50')" />
+</template>
diff --git a/app/components/pub/ui/number-field/index.ts b/app/components/pub/ui/number-field/index.ts
new file mode 100644
index 00000000..5489697d
--- /dev/null
+++ b/app/components/pub/ui/number-field/index.ts
@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue'
+export { default as NumberFieldContent } from './NumberFieldContent.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
diff --git a/app/components/pub/ui/pagination/PaginationEllipsis.vue b/app/components/pub/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 00000000..b2b6123e
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { PaginationEllipsis } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
+    <slot>
+      <DotsHorizontalIcon />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationFirst.vue b/app/components/pub/ui/pagination/PaginationFirst.vue
new file mode 100644
index 00000000..e8dc1609
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DoubleArrowLeftIcon } from '@radix-icons/vue'
+import { PaginationFirst } from 'radix-vue'
+import { computed } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <DoubleArrowLeftIcon />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationLast.vue b/app/components/pub/ui/pagination/PaginationLast.vue
new file mode 100644
index 00000000..30685eef
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationLast.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DoubleArrowRightIcon } from '@radix-icons/vue'
+import { PaginationLast } from 'radix-vue'
+import { computed } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <DoubleArrowRightIcon />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationNext.vue b/app/components/pub/ui/pagination/PaginationNext.vue
new file mode 100644
index 00000000..3870b4dc
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationNext.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { PaginationNext } from 'radix-vue'
+import { computed } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronRightIcon />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationPrev.vue b/app/components/pub/ui/pagination/PaginationPrev.vue
new file mode 100644
index 00000000..4f8d9559
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationPrev.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import { PaginationPrev } from 'radix-vue'
+import { computed } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronLeftIcon />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>
diff --git a/app/components/pub/ui/pagination/index.ts b/app/components/pub/ui/pagination/index.ts
new file mode 100644
index 00000000..3a0b1817
--- /dev/null
+++ b/app/components/pub/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+} from 'radix-vue'
diff --git a/app/components/pub/ui/pin-input/PinInput.vue b/app/components/pub/ui/pin-input/PinInput.vue
new file mode 100644
index 00000000..ae30a217
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInput.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { PinInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: () => [],
+})
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
+    <slot />
+  </PinInputRoot>
+</template>
diff --git a/app/components/pub/ui/pin-input/PinInputGroup.vue b/app/components/pub/ui/pin-input/PinInputGroup.vue
new file mode 100644
index 00000000..0fc792f0
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInputGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Primitive, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
+    <slot />
+  </primitive>
+</template>
diff --git a/app/components/pub/ui/pin-input/PinInputInput.vue b/app/components/pub/ui/pin-input/PinInputInput.vue
new file mode 100644
index 00000000..36de92be
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInputInput.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { PinInputInput, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput v-bind="forwardedProps" :class="cn('relative text-center bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)" />
+</template>
diff --git a/app/components/pub/ui/pin-input/PinInputSeparator.vue b/app/components/pub/ui/pin-input/PinInputSeparator.vue
new file mode 100644
index 00000000..2ffeb810
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInputSeparator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import { Primitive, useForwardProps } from 'radix-vue'
+
+const props = defineProps<PrimitiveProps>()
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <Icon name="i-radix-icons-dash" />
+    </slot>
+  </primitive>
+</template>
diff --git a/app/components/pub/ui/pin-input/index.ts b/app/components/pub/ui/pin-input/index.ts
new file mode 100644
index 00000000..e645e414
--- /dev/null
+++ b/app/components/pub/ui/pin-input/index.ts
@@ -0,0 +1,4 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputGroup } from './PinInputGroup.vue'
+export { default as PinInputInput } from './PinInputInput.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
diff --git a/app/components/pub/ui/popover/Popover.vue b/app/components/pub/ui/popover/Popover.vue
new file mode 100644
index 00000000..da5f7096
--- /dev/null
+++ b/app/components/pub/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/app/components/pub/ui/popover/PopoverContent.vue b/app/components/pub/ui/popover/PopoverContent.vue
new file mode 100644
index 00000000..96bae67b
--- /dev/null
+++ b/app/components/pub/ui/popover/PopoverContent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  PopoverContent,
+
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/app/components/pub/ui/popover/PopoverTrigger.vue b/app/components/pub/ui/popover/PopoverTrigger.vue
new file mode 100644
index 00000000..6c944497
--- /dev/null
+++ b/app/components/pub/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'radix-vue'
+import { PopoverTrigger } from 'radix-vue'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/app/components/pub/ui/popover/index.ts b/app/components/pub/ui/popover/index.ts
new file mode 100644
index 00000000..c621f9b1
--- /dev/null
+++ b/app/components/pub/ui/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
diff --git a/app/components/pub/ui/progress/Progress.vue b/app/components/pub/ui/progress/Progress.vue
new file mode 100644
index 00000000..d7fca285
--- /dev/null
+++ b/app/components/pub/ui/progress/Progress.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/app/components/pub/ui/progress/index.ts b/app/components/pub/ui/progress/index.ts
new file mode 100644
index 00000000..eace9893
--- /dev/null
+++ b/app/components/pub/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'
diff --git a/app/components/pub/ui/radio-group/RadioGroup.vue b/app/components/pub/ui/radio-group/RadioGroup.vue
new file mode 100644
index 00000000..7815ca71
--- /dev/null
+++ b/app/components/pub/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>
diff --git a/app/components/pub/ui/radio-group/RadioGroupItem.vue b/app/components/pub/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 00000000..0220f14f
--- /dev/null
+++ b/app/components/pub/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <Icon name="i-radix-icons-check" class="h-3.5 w-3.5 fill-primary" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/app/components/pub/ui/radio-group/index.ts b/app/components/pub/ui/radio-group/index.ts
new file mode 100644
index 00000000..fa1da9c2
--- /dev/null
+++ b/app/components/pub/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
diff --git a/app/components/pub/ui/range-calendar/RangeCalendar.vue b/app/components/pub/ui/range-calendar/RangeCalendar.vue
new file mode 100644
index 00000000..8abdb82e
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendar.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarPrevButton />
+      <RangeCalendarHeading />
+      <RangeCalendarNextButton />
+    </RangeCalendarHeader>
+
+    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarCell.vue b/app/components/pub/ui/range-calendar/RangeCalendarCell.vue
new file mode 100644
index 00000000..40876a17
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarCell.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue b/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue
new file mode 100644
index 00000000..a437f0c2
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarCellTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selection Start
+      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+      // Selection End
+      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue b/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue
new file mode 100644
index 00000000..4cdbd7e6
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarGrid, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGridBody.vue b/app/components/pub/ui/range-calendar/RangeCalendarGridBody.vue
new file mode 100644
index 00000000..b841dd99
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGridBody.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridBodyProps } from 'radix-vue'
+import { RangeCalendarGridBody } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody v-bind="props">
+    <slot />
+  </RangeCalendarGridBody>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGridHead.vue b/app/components/pub/ui/range-calendar/RangeCalendarGridHead.vue
new file mode 100644
index 00000000..6e2bcec7
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGridHead.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridHeadProps } from 'radix-vue'
+import { RangeCalendarGridHead } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead v-bind="props">
+    <slot />
+  </RangeCalendarGridHead>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue b/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue
new file mode 100644
index 00000000..eb22ef02
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridRowProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarGridRow, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow :class="cn('flex mt-2 w-full', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarGridRow>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue
new file mode 100644
index 00000000..202286f8
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarHeadCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeadCell>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue
new file mode 100644
index 00000000..06b95b6c
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeaderProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarHeader, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeader>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue
new file mode 100644
index 00000000..d51f904c
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadingProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { RangeCalendarHeading, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue b/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue
new file mode 100644
index 00000000..e0174861
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { RangeCalendarNextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { RangeCalendarNext, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </RangeCalendarNext>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue b/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue
new file mode 100644
index 00000000..ee4b21ee
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { RangeCalendarPrevProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import { RangeCalendarPrev, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </RangeCalendarPrev>
+</template>
diff --git a/app/components/pub/ui/range-calendar/index.ts b/app/components/pub/ui/range-calendar/index.ts
new file mode 100644
index 00000000..7ba1637e
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from './RangeCalendar.vue'
+export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
+export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
+export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
+export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
+export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
+export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
+export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
+export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
+export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
+export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
+export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'
diff --git a/app/components/pub/ui/resizable/ResizableHandle.vue b/app/components/pub/ui/resizable/ResizableHandle.vue
new file mode 100644
index 00000000..c33213d6
--- /dev/null
+++ b/app/components/pub/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { GripVertical } from 'lucide-vue-next'
+import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 h-4 w-3 flex items-center justify-center border rounded-sm bg-border">
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/app/components/pub/ui/resizable/ResizablePanelGroup.vue b/app/components/pub/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 00000000..8a515328
--- /dev/null
+++ b/app/components/pub/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SplitterGroup, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>
diff --git a/app/components/pub/ui/resizable/index.ts b/app/components/pub/ui/resizable/index.ts
new file mode 100644
index 00000000..605e8106
--- /dev/null
+++ b/app/components/pub/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'
diff --git a/app/components/pub/ui/scroll-area/ScrollArea.vue b/app/components/pub/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 00000000..77359ce2
--- /dev/null
+++ b/app/components/pub/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+
+  ScrollAreaViewport,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import ScrollBar from './ScrollBar.vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/app/components/pub/ui/scroll-area/ScrollBar.vue b/app/components/pub/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 00000000..0eb4ac24
--- /dev/null
+++ b/app/components/pub/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/app/components/pub/ui/scroll-area/index.ts b/app/components/pub/ui/scroll-area/index.ts
new file mode 100644
index 00000000..2bd4fae5
--- /dev/null
+++ b/app/components/pub/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/app/components/pub/ui/select/Select.vue b/app/components/pub/ui/select/Select.vue
new file mode 100644
index 00000000..b18516fa
--- /dev/null
+++ b/app/components/pub/ui/select/Select.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import SelectContent from './SelectContent.vue'
+import SelectGroup from './SelectGroup.vue'
+import SelectItem from './SelectItem.vue'
+import SelectSeparator from './SelectSeparator.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectValue from './SelectValue.vue'
+
+interface Item {
+  value: string
+  label: string
+}
+
+const props = defineProps<
+  SelectRootProps & {
+    items: Item[]
+    iconName?: string
+    placeholder?: string
+    label?: string
+    separator?: boolean
+  }
+>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <SelectTrigger :icon-name="iconName" class="flex justify-between items-center">
+      <SelectValue :placeholder="placeholder" />
+    </SelectTrigger>
+
+    <SelectContent class="rounded border bg-white">
+      <SelectGroup>
+        <SelectLabel v-if="label" class="px-2 py-1 text-xs 2xl:text-sm font-semibold">
+          {{ label }}
+        </SelectLabel>
+
+        <SelectItem
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          class="cursor-pointer px-2 py-1 hover:bg-gray-100"
+        >
+          {{ item.label }}
+        </SelectItem>
+
+        <SelectSeparator v-if="separator" class="my-1 h-px bg-gray-200" />
+      </SelectGroup>
+    </SelectContent>
+  </SelectRoot>
+</template>
diff --git a/app/components/pub/ui/select/SelectContent.vue b/app/components/pub/ui/select/SelectContent.vue
new file mode 100644
index 00000000..1d63a4d8
--- /dev/null
+++ b/app/components/pub/ui/select/SelectContent.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+})
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          position === 'popper'
+            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class,
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]',
+          )
+        "
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/app/components/pub/ui/select/SelectGroup.vue b/app/components/pub/ui/select/SelectGroup.vue
new file mode 100644
index 00000000..1043492d
--- /dev/null
+++ b/app/components/pub/ui/select/SelectGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectGroup } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/app/components/pub/ui/select/SelectItem.vue b/app/components/pub/ui/select/SelectItem.vue
new file mode 100644
index 00000000..7fe5f342
--- /dev/null
+++ b/app/components/pub/ui/select/SelectItem.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-xs 2xl:text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 h-3.5 w-3.5 flex items-center justify-center">
+      <SelectItemIndicator>
+        <Icon name="i-radix-icons-check" class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/app/components/pub/ui/select/SelectItemText.vue b/app/components/pub/ui/select/SelectItemText.vue
new file mode 100644
index 00000000..a8db38b4
--- /dev/null
+++ b/app/components/pub/ui/select/SelectItemText.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from 'radix-vue'
+import { SelectItemText } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/app/components/pub/ui/select/SelectLabel.vue b/app/components/pub/ui/select/SelectLabel.vue
new file mode 100644
index 00000000..bbd20540
--- /dev/null
+++ b/app/components/pub/ui/select/SelectLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('px-2 py-1.5 text-xs 2xl:text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/app/components/pub/ui/select/SelectScrollDownButton.vue b/app/components/pub/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 00000000..7a8af19d
--- /dev/null
+++ b/app/components/pub/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-chevron-down" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/app/components/pub/ui/select/SelectScrollUpButton.vue b/app/components/pub/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 00000000..c528294d
--- /dev/null
+++ b/app/components/pub/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-chevron-up" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/app/components/pub/ui/select/SelectSeparator.vue b/app/components/pub/ui/select/SelectSeparator.vue
new file mode 100644
index 00000000..daa605c2
--- /dev/null
+++ b/app/components/pub/ui/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectSeparator } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
new file mode 100644
index 00000000..ce51f809
--- /dev/null
+++ b/app/components/pub/ui/select/SelectTrigger.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], iconName?: string }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 pl-3 pr-8 py-2 text-xs 2xl:text-sm file:border-0 file:bg-transparent file:text-xs file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+    <SelectIcon as-child class="absolute right-3 top-1/2 -translate-y-1/2">
+      <Icon :name="iconName" class="h-4 w-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/app/components/pub/ui/select/SelectValue.vue b/app/components/pub/ui/select/SelectValue.vue
new file mode 100644
index 00000000..6f37eb55
--- /dev/null
+++ b/app/components/pub/ui/select/SelectValue.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'radix-vue'
+import { SelectValue } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/app/components/pub/ui/select/index.ts b/app/components/pub/ui/select/index.ts
new file mode 100644
index 00000000..31b92946
--- /dev/null
+++ b/app/components/pub/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/app/components/pub/ui/separator/Separator.vue b/app/components/pub/ui/separator/Separator.vue
new file mode 100644
index 00000000..cfd7ce6a
--- /dev/null
+++ b/app/components/pub/ui/separator/Separator.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Separator } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-sm text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+        )
+      "
+    >{{ props.label }}</span>
+  </Separator>
+</template>
diff --git a/app/components/pub/ui/separator/index.ts b/app/components/pub/ui/separator/index.ts
new file mode 100644
index 00000000..2287bcb9
--- /dev/null
+++ b/app/components/pub/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/app/components/pub/ui/sheet/Sheet.vue b/app/components/pub/ui/sheet/Sheet.vue
new file mode 100644
index 00000000..5f6a5632
--- /dev/null
+++ b/app/components/pub/ui/sheet/Sheet.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetClose.vue b/app/components/pub/ui/sheet/SheetClose.vue
new file mode 100644
index 00000000..1fa61805
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'radix-vue'
+import { DialogClose } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetContent.vue b/app/components/pub/ui/sheet/SheetContent.vue
new file mode 100644
index 00000000..0b42c296
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetContent.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { SheetVariants } from '.'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+  VisuallyHidden,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { sheetVariants } from '.'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <VisuallyHidden as-child>
+        <DialogDescription aria-describedby="undefined" />
+      </VisuallyHidden>
+
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
+      >
+        <X class="h-4 w-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetDescription.vue b/app/components/pub/ui/sheet/SheetDescription.vue
new file mode 100644
index 00000000..144ae2f9
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetDescription.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DialogDescription } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetFooter.vue b/app/components/pub/ui/sheet/SheetFooter.vue
new file mode 100644
index 00000000..4627374d
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetHeader.vue b/app/components/pub/ui/sheet/SheetHeader.vue
new file mode 100644
index 00000000..65f32731
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetTitle.vue b/app/components/pub/ui/sheet/SheetTitle.vue
new file mode 100644
index 00000000..192735d0
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetTitle.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { DialogTitle } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetTrigger.vue b/app/components/pub/ui/sheet/SheetTrigger.vue
new file mode 100644
index 00000000..b966b29d
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/app/components/pub/ui/sheet/index.ts b/app/components/pub/ui/sheet/index.ts
new file mode 100644
index 00000000..603fa39d
--- /dev/null
+++ b/app/components/pub/ui/sheet/index.ts
@@ -0,0 +1,32 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
+
+export const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/app/components/pub/ui/sidebar/Sidebar.vue b/app/components/pub/ui/sidebar/Sidebar.vue
new file mode 100644
index 00000000..d7a9d0d0
--- /dev/null
+++ b/app/components/pub/ui/sidebar/Sidebar.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Sheet from '~/components/pub/ui/sheet/Sheet.vue'
+import SheetContent from '~/components/pub/ui/sheet/SheetContent.vue'
+import { cn } from '~/lib/utils'
+
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    side?: 'left' | 'right'
+    variant?: 'sidebar' | 'floating' | 'inset'
+    collapsible?: 'offcanvas' | 'icon' | 'none'
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    side: 'left',
+    variant: 'sidebar',
+    collapsible: 'offcanvas',
+  },
+)
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] flex-col', props.class)"  
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer hidden md:block"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="
+        cn(
+          'relative h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+        )
+      "
+    />
+    <div
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:left-[calc(var(--xxl-sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:right-[calc(var(--xxl-sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class,
+        )
+      "
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarContent.vue b/app/components/pub/ui/sidebar/SidebarContent.vue
new file mode 100644
index 00000000..c695d064
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarFooter.vue b/app/components/pub/ui/sidebar/SidebarFooter.vue
new file mode 100644
index 00000000..564b1f4b
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroup.vue b/app/components/pub/ui/sidebar/SidebarGroup.vue
new file mode 100644
index 00000000..1b5bc5dd
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroupAction.vue b/app/components/pub/ui/sidebar/SidebarGroupAction.vue
new file mode 100644
index 00000000..f6dea60d
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      // Increases the hit area of the button on mobile.
+      'after:absolute after:-inset-2 after:md:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroupContent.vue b/app/components/pub/ui/sidebar/SidebarGroupContent.vue
new file mode 100644
index 00000000..684873b5
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroupLabel.vue b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 00000000..0479b7a9
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 md:text-xs 2xl:text-sm font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarHeader.vue b/app/components/pub/ui/sidebar/SidebarHeader.vue
new file mode 100644
index 00000000..fa5e353e
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarInput.vue b/app/components/pub/ui/sidebar/SidebarInput.vue
new file mode 100644
index 00000000..72b27475
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarInput.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Input from '~/components/pub/ui/input/Input.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Input
+    data-sidebar="input"
+    :class="
+      cn('bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2', props.class)
+    "
+  >
+    <slot />
+  </Input>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarInset.vue b/app/components/pub/ui/sidebar/SidebarInset.vue
new file mode 100644
index 00000000..ae25091c
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarInset.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <main
+    :class="cn(
+      'overflow-x-auto relative flex min-h-svh flex-1 flex-col',
+      'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset][&>header]:rounded-t-xl md:peer-data-[variant=inset]:shadow',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenu.vue b/app/components/pub/ui/sidebar/SidebarMenu.vue
new file mode 100644
index 00000000..ef15a05a
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenu.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuAction.vue b/app/components/pub/ui/sidebar/SidebarMenuAction.vue
new file mode 100644
index 00000000..1bc89b7b
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  showOnHover?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-action"
+    :class="cn(
+      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+      // Increases the hit area of the button on mobile.
+      'after:absolute after:-inset-2 after:md:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuBadge.vue b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 00000000..8503f0c4
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-badge"
+    :class="cn(
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 md:text-xs 2xl:text-sm  font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuButton.vue b/app/components/pub/ui/sidebar/SidebarMenuButton.vue
new file mode 100644
index 00000000..bdb5ba3d
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { computed } from 'vue'
+import Tooltip from '~/components/pub/ui/tooltip/Tooltip.vue'
+import TooltipContent from '~/components/pub/ui/tooltip/TooltipContent.vue'
+import TooltipTrigger from '~/components/pub/ui/tooltip/TooltipTrigger.vue'
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component
+    }
+  >(),
+  {
+    as: 'button',
+    variant: 'default',
+    size: 'default',
+  },
+)
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = computed(() => {
+  const { tooltip, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue b/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 00000000..281261bd
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { SidebarMenuButtonVariants } from '.'
+import { Primitive } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+import { sidebarMenuButtonVariants } from '.'
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuItem.vue b/app/components/pub/ui/sidebar/SidebarMenuItem.vue
new file mode 100644
index 00000000..78886c8c
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSkeleton.vue b/app/components/pub/ui/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 00000000..3c31766d
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+import Skeleton from '~/components/pub/ui/skeleton/Skeleton.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`
+})
+</script>
+
+<template>
+  <div data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+    <Skeleton
+      class="h-4 max-w-[--skeleton-width] flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSub.vue b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
new file mode 100644
index 00000000..9ddf6f43
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-badge"
+    :class="cn(
+      'mx-3.5 flex min-w-0 translate-x-px flex-col border-l border-sidebar-border px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 00000000..ff3b89bf
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: 'sm' | 'md'
+      isActive?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'a',
+    size: 'md',
+  },
+)
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 py-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:whitespace-normal [&>span:last-child]:break-words [&>svg]:size-4 [&>svg]:shrink-0',
+        'aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground aria-[current=page]:font-medium',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSubItem.vue b/app/components/pub/ui/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 00000000..b04030b0
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarProvider.vue b/app/components/pub/ui/sidebar/SidebarProvider.vue
new file mode 100644
index 00000000..d8428d8d
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarProvider.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Ref } from 'vue'
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'radix-vue'
+import { computed, ref } from 'vue'
+import { cn } from '~/lib/utils'
+
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  XXL_SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils'
+
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean
+    open?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    defaultOpen: true,
+    open: undefined,
+  },
+)
+
+const emits = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+const openMobile = ref(false)
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'))
+
+const sidebar = {
+  collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
+  side: 'left', // 'left' | 'right'
+  variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
+}
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--xxl-sidebar-width': XXL_SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="
+        cn(
+          `group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full`,
+          [props.class, sidebar?.side === 'right' ? 'flex-row-reverse' : ''],
+        )
+      "
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarRail.vue b/app/components/pub/ui/sidebar/SidebarRail.vue
new file mode 100644
index 00000000..490e2477
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarRail.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarSeparator.vue b/app/components/pub/ui/sidebar/SidebarSeparator.vue
new file mode 100644
index 00000000..5f48fc20
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarSeparator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Separator data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+    <slot />
+  </Separator>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarTrigger.vue b/app/components/pub/ui/sidebar/SidebarTrigger.vue
new file mode 100644
index 00000000..830fa83d
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarTrigger.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { PanelLeft } from 'lucide-vue-next'
+import Button from '~/components/pub/ui/button/Button.vue'
+import { cn } from '~/lib/utils'
+
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('h-4 w-4', props.class)" @click="toggleSidebar">
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/app/components/pub/ui/sidebar/index.ts b/app/components/pub/ui/sidebar/index.ts
new file mode 100644
index 00000000..47f6114b
--- /dev/null
+++ b/app/components/pub/ui/sidebar/index.ts
@@ -0,0 +1,52 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:whitespace-normal [&>span:last-child]:break-words [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-auto text-sm py-2',
+        sm: 'h-auto text-xs py-1.5',
+        lg: 'h-auto text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/app/components/pub/ui/sidebar/utils.ts b/app/components/pub/ui/sidebar/utils.ts
new file mode 100644
index 00000000..768201dd
--- /dev/null
+++ b/app/components/pub/ui/sidebar/utils.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'radix-vue'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '12rem'
+export const XXL_SIDEBAR_WIDTH = '14rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')
diff --git a/app/components/pub/ui/skeleton/Skeleton.vue b/app/components/pub/ui/skeleton/Skeleton.vue
new file mode 100644
index 00000000..f0a940b6
--- /dev/null
+++ b/app/components/pub/ui/skeleton/Skeleton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface SkeletonProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
+</template>
diff --git a/app/components/pub/ui/skeleton/index.ts b/app/components/pub/ui/skeleton/index.ts
new file mode 100644
index 00000000..be21fad3
--- /dev/null
+++ b/app/components/pub/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/app/components/pub/ui/slider/Slider.vue b/app/components/pub/ui/slider/Slider.vue
new file mode 100644
index 00000000..b37d32ad
--- /dev/null
+++ b/app/components/pub/ui/slider/Slider.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderRange class="absolute h-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="block h-5 w-5 border-2 border-primary rounded-full bg-background ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
+    />
+  </SliderRoot>
+</template>
diff --git a/app/components/pub/ui/slider/index.ts b/app/components/pub/ui/slider/index.ts
new file mode 100644
index 00000000..1c945deb
--- /dev/null
+++ b/app/components/pub/ui/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'
diff --git a/app/components/pub/ui/sonner/Sonner.vue b/app/components/pub/ui/sonner/Sonner.vue
new file mode 100644
index 00000000..bd67f874
--- /dev/null
+++ b/app/components/pub/ui/sonner/Sonner.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner'
+import { Toaster as Sonner } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="group toaster"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>
diff --git a/app/components/pub/ui/sonner/index.ts b/app/components/pub/ui/sonner/index.ts
new file mode 100644
index 00000000..8d3d4062
--- /dev/null
+++ b/app/components/pub/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Sonner } from './Sonner.vue'
diff --git a/app/components/pub/ui/stepper/Stepper.vue b/app/components/pub/ui/stepper/Stepper.vue
new file mode 100644
index 00000000..4f65ce3d
--- /dev/null
+++ b/app/components/pub/ui/stepper/Stepper.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot
+    v-slot="slotProps"
+    :class="cn(
+      'flex gap-2',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </StepperRoot>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperDescription.vue b/app/components/pub/ui/stepper/StepperDescription.vue
new file mode 100644
index 00000000..0074eeab
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperDescription.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { StepperDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { StepperDescription, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot v-bind="slotProps" />
+  </StepperDescription>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperIndicator.vue b/app/components/pub/ui/stepper/StepperIndicator.vue
new file mode 100644
index 00000000..a7e7a7e6
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperIndicator.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { StepperIndicatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { StepperIndicator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="forwarded"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',
+      // Disabled
+      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+      // Active
+      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+      // Completed
+      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </StepperIndicator>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperItem.vue b/app/components/pub/ui/stepper/StepperItem.vue
new file mode 100644
index 00000000..5d87d18d
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperItem.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { StepperItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { StepperItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperSeparator.vue b/app/components/pub/ui/stepper/StepperSeparator.vue
new file mode 100644
index 00000000..16598953
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperSeparator.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { StepperSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { StepperSeparator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+      'bg-muted',
+      // Disabled
+      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
+      // Completed
+      'group-data-[state=completed]:bg-accent-foreground',
+      props.class,
+    )"
+  />
+</template>
diff --git a/app/components/pub/ui/stepper/StepperTitle.vue b/app/components/pub/ui/stepper/StepperTitle.vue
new file mode 100644
index 00000000..bc9d4619
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperTitle.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { StepperTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { StepperTitle, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+    <slot />
+  </StepperTitle>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperTrigger.vue b/app/components/pub/ui/stepper/StepperTrigger.vue
new file mode 100644
index 00000000..83ebebb0
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperTrigger.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { StepperTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { StepperTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
+  >
+    <slot />
+  </StepperTrigger>
+</template>
diff --git a/app/components/pub/ui/stepper/index.ts b/app/components/pub/ui/stepper/index.ts
new file mode 100644
index 00000000..a4065a57
--- /dev/null
+++ b/app/components/pub/ui/stepper/index.ts
@@ -0,0 +1,7 @@
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'
diff --git a/app/components/pub/ui/switch/Switch.vue b/app/components/pub/ui/switch/Switch.vue
new file mode 100644
index 00000000..8fe27300
--- /dev/null
+++ b/app/components/pub/ui/switch/Switch.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  SwitchRoot,
+
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
+    />
+  </SwitchRoot>
+</template>
diff --git a/app/components/pub/ui/switch/index.ts b/app/components/pub/ui/switch/index.ts
new file mode 100644
index 00000000..87b4b17d
--- /dev/null
+++ b/app/components/pub/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'
diff --git a/app/components/pub/ui/table/Table.vue b/app/components/pub/ui/table/Table.vue
new file mode 100644
index 00000000..fb8a5e04
--- /dev/null
+++ b/app/components/pub/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-x-auto">
+    <table :class="cn('min-w-full table-fixed caption-bottom md:text-xs 2xl:text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/app/components/pub/ui/table/TableBody.vue b/app/components/pub/ui/table/TableBody.vue
new file mode 100644
index 00000000..d36ffc25
--- /dev/null
+++ b/app/components/pub/ui/table/TableBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/app/components/pub/ui/table/TableCaption.vue b/app/components/pub/ui/table/TableCaption.vue
new file mode 100644
index 00000000..eeb57252
--- /dev/null
+++ b/app/components/pub/ui/table/TableCaption.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 md:text-xs 2xl:text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/app/components/pub/ui/table/TableCell.vue b/app/components/pub/ui/table/TableCell.vue
new file mode 100644
index 00000000..7955b08f
--- /dev/null
+++ b/app/components/pub/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p2 2xl:p-3 align-middle md:text-xs 2xl:text-sm [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/app/components/pub/ui/table/TableEmpty.vue b/app/components/pub/ui/table/TableEmpty.vue
new file mode 100644
index 00000000..96fafe2d
--- /dev/null
+++ b/app/components/pub/ui/table/TableEmpty.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle md:text-xs 2xl:text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/app/components/pub/ui/table/TableFooter.vue b/app/components/pub/ui/table/TableFooter.vue
new file mode 100644
index 00000000..e9f46f9c
--- /dev/null
+++ b/app/components/pub/ui/table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/app/components/pub/ui/table/TableHead.vue b/app/components/pub/ui/table/TableHead.vue
new file mode 100644
index 00000000..cf2cfcf2
--- /dev/null
+++ b/app/components/pub/ui/table/TableHead.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-12 px-4 text-left md:text-xs 2xl:text-sm align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/app/components/pub/ui/table/TableHeader.vue b/app/components/pub/ui/table/TableHeader.vue
new file mode 100644
index 00000000..879d2a83
--- /dev/null
+++ b/app/components/pub/ui/table/TableHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/app/components/pub/ui/table/TableRow.vue b/app/components/pub/ui/table/TableRow.vue
new file mode 100644
index 00000000..80b1e6a7
--- /dev/null
+++ b/app/components/pub/ui/table/TableRow.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/app/components/pub/ui/table/index.ts b/app/components/pub/ui/table/index.ts
new file mode 100644
index 00000000..5bfa3862
--- /dev/null
+++ b/app/components/pub/ui/table/index.ts
@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
diff --git a/app/components/pub/ui/table/separator/Separator.vue b/app/components/pub/ui/table/separator/Separator.vue
new file mode 100644
index 00000000..e1648859
--- /dev/null
+++ b/app/components/pub/ui/table/separator/Separator.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Separator } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+        )
+      "
+    >{{ props.label }}</span>
+  </Separator>
+</template>
diff --git a/app/components/pub/ui/table/separator/index.ts b/app/components/pub/ui/table/separator/index.ts
new file mode 100644
index 00000000..2287bcb9
--- /dev/null
+++ b/app/components/pub/ui/table/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/app/components/pub/ui/tabs/Tabs.vue b/app/components/pub/ui/tabs/Tabs.vue
new file mode 100644
index 00000000..8feda3f7
--- /dev/null
+++ b/app/components/pub/ui/tabs/Tabs.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/app/components/pub/ui/tabs/TabsContent.vue b/app/components/pub/ui/tabs/TabsContent.vue
new file mode 100644
index 00000000..0f5b6735
--- /dev/null
+++ b/app/components/pub/ui/tabs/TabsContent.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TabsContent } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/app/components/pub/ui/tabs/TabsList.vue b/app/components/pub/ui/tabs/TabsList.vue
new file mode 100644
index 00000000..6f9954b2
--- /dev/null
+++ b/app/components/pub/ui/tabs/TabsList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TabsList } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/app/components/pub/ui/tabs/TabsTrigger.vue b/app/components/pub/ui/tabs/TabsTrigger.vue
new file mode 100644
index 00000000..af9ddeb5
--- /dev/null
+++ b/app/components/pub/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TabsTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 md:text-xs 2xl:text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
diff --git a/app/components/pub/ui/tabs/index.ts b/app/components/pub/ui/tabs/index.ts
new file mode 100644
index 00000000..a5e58dc0
--- /dev/null
+++ b/app/components/pub/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
diff --git a/app/components/pub/ui/tags-input/TagsInput.vue b/app/components/pub/ui/tags-input/TagsInput.vue
new file mode 100644
index 00000000..a245c294
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInput.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TagsInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputInput.vue b/app/components/pub/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 00000000..cc76c8b8
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TagsInputInput, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputItem.vue b/app/components/pub/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 00000000..d13e94a4
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TagsInputItem, useForwardProps } from 'radix-vue'
+
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputItemDelete.vue b/app/components/pub/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 00000000..123db53b
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TagsInputItemDelete, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-cross-2" class="h-4 w-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputItemText.vue b/app/components/pub/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 00000000..a51c582d
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TagsInputItemText, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/app/components/pub/ui/tags-input/index.ts b/app/components/pub/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/app/components/pub/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/app/components/pub/ui/textarea/Textarea.vue b/app/components/pub/ui/textarea/Textarea.vue
new file mode 100644
index 00000000..a29bb1b7
--- /dev/null
+++ b/app/components/pub/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-slate-400 bg-white dark:bg-slate-950 px-3 py-2 md:text-xs 2xl:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
diff --git a/app/components/pub/ui/textarea/index.ts b/app/components/pub/ui/textarea/index.ts
new file mode 100644
index 00000000..6a7ab2a7
--- /dev/null
+++ b/app/components/pub/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/app/components/pub/ui/toast/Toast.vue b/app/components/pub/ui/toast/Toast.vue
new file mode 100644
index 00000000..7fce0311
--- /dev/null
+++ b/app/components/pub/ui/toast/Toast.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ToastRootEmits } from 'radix-vue'
+import type { ToastProps } from '.'
+import { ToastRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { toastVariants } from '.'
+
+const props = defineProps<ToastProps>()
+
+const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>
diff --git a/app/components/pub/ui/toast/ToastAction.vue b/app/components/pub/ui/toast/ToastAction.vue
new file mode 100644
index 00000000..577b1f65
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastAction.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ToastActionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ToastAction } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 md:text-xs 2xl:text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+    <slot />
+  </ToastAction>
+</template>
diff --git a/app/components/pub/ui/toast/ToastClose.vue b/app/components/pub/ui/toast/ToastClose.vue
new file mode 100644
index 00000000..c9fed52d
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastClose.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ToastCloseProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ToastClose } from 'radix-vue'
+
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <Icon name="radix-icons:cross-2" class="h-4 w-4" />
+  </ToastClose>
+</template>
diff --git a/app/components/pub/ui/toast/ToastDescription.vue b/app/components/pub/ui/toast/ToastDescription.vue
new file mode 100644
index 00000000..23b80db3
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ToastDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ToastDescription } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastDescription :class="cn('md:text-xs 2xl:text-sm opacity-90', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>
diff --git a/app/components/pub/ui/toast/ToastProvider.vue b/app/components/pub/ui/toast/ToastProvider.vue
new file mode 100644
index 00000000..97674052
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastProvider.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ToastProviderProps } from 'radix-vue'
+import { ToastProvider } from 'radix-vue'
+
+const props = defineProps<ToastProviderProps>()
+</script>
+
+<template>
+  <ToastProvider v-bind="props">
+    <slot />
+  </ToastProvider>
+</template>
diff --git a/app/components/pub/ui/toast/ToastTitle.vue b/app/components/pub/ui/toast/ToastTitle.vue
new file mode 100644
index 00000000..fc62fd61
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ToastTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ToastTitle } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('md:text-xs 2xl:text-sm font-semibold [&+div]:text-xs', props.class)">
+    <slot />
+  </ToastTitle>
+</template>
diff --git a/app/components/pub/ui/toast/ToastViewport.vue b/app/components/pub/ui/toast/ToastViewport.vue
new file mode 100644
index 00000000..7e75b4f3
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastViewport.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ToastViewportProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ToastViewport } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>
diff --git a/app/components/pub/ui/toast/Toaster.vue b/app/components/pub/ui/toast/Toaster.vue
new file mode 100644
index 00000000..cac5dad0
--- /dev/null
+++ b/app/components/pub/ui/toast/Toaster.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { isVNode } from 'vue'
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
+import { useToast } from './use-toast'
+
+const { toasts } = useToast()
+</script>
+
+<template>
+  <ToastProvider>
+    <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
+      <div class="grid gap-1">
+        <ToastTitle v-if="toast.title">
+          {{ toast.title }}
+        </ToastTitle>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
+        <ToastClose />
+      </div>
+      <component :is="toast.action" />
+    </Toast>
+    <ToastViewport />
+  </ToastProvider>
+</template>
diff --git a/app/components/pub/ui/toast/index.ts b/app/components/pub/ui/toast/index.ts
new file mode 100644
index 00000000..294b1e99
--- /dev/null
+++ b/app/components/pub/ui/toast/index.ts
@@ -0,0 +1,39 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { ToastRootProps } from 'radix-vue'
+
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+
+export { default as Toast } from './Toast.vue'
+export { default as ToastAction } from './ToastAction.vue'
+export { default as ToastClose } from './ToastClose.vue'
+export { default as ToastDescription } from './ToastDescription.vue'
+export { default as Toaster } from './Toaster.vue'
+export { default as ToastProvider } from './ToastProvider.vue'
+export { default as ToastTitle } from './ToastTitle.vue'
+export { default as ToastViewport } from './ToastViewport.vue'
+export { toast, useToast } from './use-toast'
+
+export const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type ToastVariants = VariantProps<typeof toastVariants>
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes['class']
+  variant?: ToastVariants['variant']
+  onOpenChange?: ((value: boolean) => void) | undefined
+}
diff --git a/app/components/pub/ui/toast/use-toast.ts b/app/components/pub/ui/toast/use-toast.ts
new file mode 100644
index 00000000..00ac23a4
--- /dev/null
+++ b/app/components/pub/ui/toast/use-toast.ts
@@ -0,0 +1,165 @@
+import type { Component, VNode } from 'vue'
+import type { ToastProps } from '.'
+import { computed, ref } from 'vue'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+export type StringOrVNode
+  = | string
+    | VNode
+    | (() => VNode)
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: StringOrVNode
+  action?: Component
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action
+  = | {
+    type: ActionType['ADD_TOAST']
+    toast: ToasterToast
+  }
+  | {
+    type: ActionType['UPDATE_TOAST']
+    toast: Partial<ToasterToast>
+  }
+  | {
+    type: ActionType['DISMISS_TOAST']
+    toastId?: ToasterToast['id']
+  }
+  | {
+    type: ActionType['REMOVE_TOAST']
+    toastId?: ToasterToast['id']
+  }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId))
+  { return }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+const state = ref<State>({
+  toasts: [],
+})
+
+function dispatch(action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)
+      break
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      )
+      break
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action
+
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      }
+      else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === toastId || toastId === undefined
+          ? {
+              ...t,
+              open: false,
+            }
+          : t,
+      )
+      break
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined)
+      { state.value.toasts = [] }
+      else
+      { state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId) }
+
+      break
+  }
+}
+
+function useToast() {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  }
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast(props: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    })
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open)
+        { dismiss() }
+      },
+    },
+  })
+
+  return {
+    id,
+    dismiss,
+    update,
+  }
+}
+
+export { toast, useToast }
diff --git a/app/components/pub/ui/toggle-group/ToggleGroup.vue b/app/components/pub/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 00000000..0b26f2b4
--- /dev/null
+++ b/app/components/pub/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { toggleVariants } from '~/components/pub/ui/toggle'
+import { ToggleGroupRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, provide } from 'vue'
+import { cn } from '~/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<
+  ToggleGroupRootProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>
diff --git a/app/components/pub/ui/toggle-group/ToggleGroupItem.vue b/app/components/pub/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 00000000..b34ee74b
--- /dev/null
+++ b/app/components/pub/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import type { ToggleGroupItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { ToggleGroupItem, useForwardProps } from 'radix-vue'
+import { computed, inject } from 'vue'
+import { toggleVariants } from '~/components/pub/ui/toggle'
+import { cn } from '~/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        toggleVariants({
+          variant: context?.variant || variant,
+          size: context?.size || size,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>
diff --git a/app/components/pub/ui/toggle-group/index.ts b/app/components/pub/ui/toggle-group/index.ts
new file mode 100644
index 00000000..9f89ad77
--- /dev/null
+++ b/app/components/pub/ui/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'
diff --git a/app/components/pub/ui/toggle/Toggle.vue b/app/components/pub/ui/toggle/Toggle.vue
new file mode 100644
index 00000000..15c099b0
--- /dev/null
+++ b/app/components/pub/ui/toggle/Toggle.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { ToggleVariants } from '.'
+import { Toggle, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import { toggleVariants } from '.'
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+}>(), {
+  variant: 'default',
+  size: 'default',
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Toggle>
+</template>
diff --git a/app/components/pub/ui/toggle/index.ts b/app/components/pub/ui/toggle/index.ts
new file mode 100644
index 00000000..07acae50
--- /dev/null
+++ b/app/components/pub/ui/toggle/index.ts
@@ -0,0 +1,28 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Toggle } from './Toggle.vue'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-3',
+        sm: 'h-8 px-2',
+        lg: 'h-10 px-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>
diff --git a/app/components/pub/ui/tooltip/Tooltip.vue b/app/components/pub/ui/tooltip/Tooltip.vue
new file mode 100644
index 00000000..3898c703
--- /dev/null
+++ b/app/components/pub/ui/tooltip/Tooltip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'radix-vue'
+import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/app/components/pub/ui/tooltip/TooltipContent.vue b/app/components/pub/ui/tooltip/TooltipContent.vue
new file mode 100644
index 00000000..ff02f8e9
--- /dev/null
+++ b/app/components/pub/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/app/components/pub/ui/tooltip/TooltipProvider.vue b/app/components/pub/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 00000000..23244b18
--- /dev/null
+++ b/app/components/pub/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'radix-vue'
+import { TooltipProvider } from 'radix-vue'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/app/components/pub/ui/tooltip/TooltipTrigger.vue b/app/components/pub/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 00000000..41acc5e9
--- /dev/null
+++ b/app/components/pub/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'radix-vue'
+import { TooltipTrigger } from 'radix-vue'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/app/components/pub/ui/tooltip/index.ts b/app/components/pub/ui/tooltip/index.ts
new file mode 100644
index 00000000..5ab96536
--- /dev/null
+++ b/app/components/pub/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
diff --git a/app/composables/README-useFormErrors.md b/app/composables/README-useFormErrors.md
new file mode 100644
index 00000000..48acdedb
--- /dev/null
+++ b/app/composables/README-useFormErrors.md
@@ -0,0 +1,73 @@
+# useFormErrors Composable
+
+Composable untuk menangani form validation errors seperti Laravel. Mengkonversi ZodError menjadi format yang mudah digunakan di template.
+
+## Penggunaan
+
+### Basic Usage
+
+```typescript
+// Di component parent (entry.vue)
+const { errors, setFromZodError, clearErrors } = useFormErrors()
+
+// Validasi dengan Zod
+const result = schema.safeParse(data.value)
+if (!result.success) {
+  setFromZodError(result.error)
+  return
+}
+```
+
+### Di Template
+
+```vue
+<!-- Pass errors ke form component -->
+<AppDivisonEntryForm v-model="data" :errors="errors" />
+```
+
+### Di Form Component
+
+```vue
+<script setup>
+import type { FormErrors } from '~/composables/useFormErrors'
+
+const props = defineProps<{ 
+  modelValue: any
+  errors?: FormErrors
+}>()
+</script>
+
+<template>
+  <!-- Setiap Field harus memiliki id yang sesuai dengan field name -->
+  <Field id="name" :errors="errors">
+    <Input v-model="data.name" />
+  </Field>
+</template>
+```
+
+## API Reference
+
+### Methods
+
+- `setFromZodError(zodError)` - Set errors dari ZodError
+- `setErrors(errors)` - Set errors manual
+- `setError(field, message)` - Set error untuk field tertentu
+- `clearError(field)` - Hapus error untuk field tertentu
+- `clearErrors()` - Hapus semua errors
+- `hasError(field)` - Cek apakah ada error untuk field
+- `getError(field)` - Ambil error message untuk field
+
+### Computed Properties
+
+- `hasErrors` - Boolean apakah ada error
+- `errorMessages` - Array semua error messages
+- `firstError` - Error pertama (untuk alert general)
+
+## Field Component
+
+Field component akan otomatis menampilkan error jika:
+1. Field memiliki `id` prop yang sesuai dengan field name
+2. Field menerima `errors` prop
+3. Ada error untuk field tersebut di dalam errors object
+
+Error akan ditampilkan dengan class `.field-error-info` yang sudah di-style dengan warna merah.
diff --git a/app/composables/useDistricts.ts b/app/composables/useDistricts.ts
new file mode 100644
index 00000000..a783ca19
--- /dev/null
+++ b/app/composables/useDistricts.ts
@@ -0,0 +1,180 @@
+import { ref, computed, watch } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { District } from '~/models/district'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as districtService from '~/services/district.service'
+
+// Global cache untuk districts berdasarkan regency code
+const districtsCache = ref<Map<string, District[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function useDistricts(regencyCode: Ref<string | undefined> | string | undefined) {
+  // Convert regencyCode ke ref jika bukan ref
+  const regencyCodeRef = typeof regencyCode === 'string' || regencyCode === undefined ? ref(regencyCode) : regencyCode
+
+  // Computed untuk mendapatkan districts berdasarkan regency code
+  const districts = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return []
+    return districtsCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = regencyCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const districtOptions = computed<SelectItem[]>(() => {
+    return districts.value.map((district) => ({
+      label: toTitleCase(district.name),
+      value: district.code,
+      searchValue: `${district.code} ${district.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch districts berdasarkan regency code
+  async function fetchDistricts(regencyCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && districtsCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await districtService.getList({
+        sort: 'name:asc',
+        'regency-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const districtsData = response.body.data || []
+        districtsCache.value.set(code, districtsData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kecamatan')
+        console.error('Failed to fetch districts:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kecamatan')
+      console.error('Error fetching districts:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari district berdasarkan code
+  function getDistrictByCode(code: string): District | undefined {
+    const regencyCode = regencyCodeRef.value
+    if (!regencyCode) return undefined
+
+    const districtsForRegency = districtsCache.value.get(regencyCode) || []
+    return districtsForRegency.find((district) => district.code === code)
+  }
+
+  // Function untuk mencari district berdasarkan name
+  function getDistrictByName(name: string): District | undefined {
+    const regencyCode = regencyCodeRef.value
+    if (!regencyCode) return undefined
+
+    const districtsForRegency = districtsCache.value.get(regencyCode) || []
+    return districtsForRegency.find((district) => district.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache regency tertentu
+  function clearCache(regencyCodeParam?: string) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (code) {
+      districtsCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    districtsCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshDistricts(regencyCodeParam?: string) {
+    const code = regencyCodeParam || regencyCodeRef.value
+    if (code) {
+      return fetchDistricts(code, true)
+    }
+  }
+
+  // Debounced regency code untuk mencegah multiple calls
+  const debouncedRegencyCode = refDebounced(regencyCodeRef, 100)
+
+  // Watch perubahan regency code untuk auto fetch
+  watch(
+    debouncedRegencyCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchDistricts(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    districts: readonly(districts),
+    districtOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchDistricts,
+    refreshDistricts,
+    getDistrictByCode,
+    getDistrictByName,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useDistrictsCache = () => ({
+  districtsCache: readonly(districtsCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useFormErrors.ts b/app/composables/useFormErrors.ts
new file mode 100644
index 00000000..2907540f
--- /dev/null
+++ b/app/composables/useFormErrors.ts
@@ -0,0 +1,107 @@
+import type { ZodError } from 'zod'
+import type { FormErrors } from '~/types/error'
+
+/**
+ * Composable untuk menangani form validation errors seperti Laravel
+ * Mengkonversi ZodError menjadi format yang mudah digunakan di template
+ */
+export function useFormErrors() {
+  const errors = ref<FormErrors>({})
+
+  /**
+   * Set errors dari ZodError
+   */
+  function setFromZodError(zodError: ZodError) {
+    const newErrors: FormErrors = {}
+
+    zodError.errors.forEach((error) => {
+      const field = error.path.join('.')
+      newErrors[field] = {
+        message: error.message,
+        code: error.code,
+        path: error.path,
+      }
+    })
+
+    errors.value = newErrors
+  }
+
+  /**
+   * Set errors manual (untuk error dari API response)
+   */
+  function setErrors(newErrors: FormErrors) {
+    errors.value = newErrors
+  }
+
+  /**
+   * Set error untuk field tertentu
+   */
+  function setError(field: string, message: string, extra: Record<string, any> = {}) {
+    errors.value[field] = {
+      message,
+      ...extra,
+    }
+  }
+
+  /**
+   * Hapus error untuk field tertentu
+   */
+  function clearError(field: string) {
+    delete errors.value[field]
+  }
+
+  /**
+   * Hapus semua errors
+   */
+  function clearErrors() {
+    errors.value = {}
+  }
+
+  /**
+   * Cek apakah ada error untuk field tertentu
+   */
+  function hasError(field: string): boolean {
+    return !!errors.value[field]
+  }
+
+  /**
+   * Ambil error message untuk field tertentu
+   */
+  function getError(field: string): string | null {
+    return errors.value[field]?.message || null
+  }
+
+  /**
+   * Cek apakah ada error apapun
+   */
+  const hasErrors = computed(() => Object.keys(errors.value).length > 0)
+
+  /**
+   * Ambil semua error messages sebagai array
+   */
+  const errorMessages = computed(() =>
+    Object.values(errors.value).map(error => error.message),
+  )
+
+  /**
+   * Ambil error pertama (untuk menampilkan alert general)
+   */
+  const firstError = computed(() => {
+    const firstKey = Object.keys(errors.value)[0]
+    return firstKey ? errors.value[firstKey] : null
+  })
+
+  return {
+    errors: readonly(errors),
+    setFromZodError,
+    setErrors,
+    setError,
+    clearError,
+    clearErrors,
+    hasError,
+    getError,
+    hasErrors,
+    errorMessages,
+    firstError,
+  }
+}
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
new file mode 100644
index 00000000..71dd99b3
--- /dev/null
+++ b/app/composables/usePaginatedList.ts
@@ -0,0 +1,181 @@
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import * as z from 'zod'
+import { is } from "date-fns/locale"
+
+// Default query schema yang bisa digunakan semua list
+export const defaultQuerySchema = z.object({
+  search: z
+    .union([z.literal(''), z.string().min(3)])
+    .optional()
+    .catch(''),
+  'page-number': z.coerce.number().int().min(1).default(1).catch(1),
+  'page-size': z.coerce.number().int().min(5).max(20).default(10).catch(10),
+})
+
+export const defaultQueryParams: Record<string, any> = {
+  search: '',
+  'page-number': 1,
+  'page-size': 10,
+}
+
+export type DefaultQueryParams = z.infer<typeof defaultQuerySchema>
+
+interface UsePaginatedListOptions<T = any> {
+  // Schema untuk validasi query parameters
+  querySchema?: z.ZodSchema<any>
+  defaultQuery?: Record<string, any>
+  // Fungsi untuk fetch data
+  fetchFn: (params: any) => Promise<{
+    success: boolean
+    body: {
+      data: T[]
+      meta: {
+        record_totalCount: number
+      }
+    }
+  }>
+  // Nama endpoint untuk logging error
+  entityName: string
+}
+
+export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
+  const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
+
+  // State management
+  const data = ref<T[]>([])
+  const isLoading = reactive<DataTableLoader>({
+    isTableLoading: false,
+  })
+
+  // URL state management
+  const queryParams = useUrlSearchParams('history', {
+    initialValue: defaultQuery,
+    removeFalsyValues: true,
+  })
+
+  const params = computed(() => {
+    const result = querySchema.safeParse(queryParams)
+    return result.data || defaultQuery
+  })
+
+  // Pagination state - computed from URL params
+  const paginationMeta = reactive<PaginationMeta>({
+    recordCount: 0,
+    page: params.value['page-number'],
+    pageSize: params.value['page-size'],
+    totalPage: 0,
+    hasNext: false,
+    hasPrev: false,
+  })
+
+  // Search model with debounce
+  const searchInput = ref(params.value.search || '')
+  const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+  // Functions
+  async function fetchData() {
+    if (isLoading.isTableLoading) return
+
+    isLoading.isTableLoading = true
+
+    try {
+      // Use current params from URL state
+      const currentParams = params.value
+
+      const response = await fetchFn(currentParams)
+
+      if (response.success) {
+        const responseBody = response.body
+        data.value = responseBody.data || []
+
+        const pager = responseBody.meta
+        // Update pagination meta from response
+        paginationMeta.recordCount = pager.record_totalCount
+        paginationMeta.page = currentParams['page-number']
+        paginationMeta.pageSize = currentParams['page-size']
+        paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+        paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+        paginationMeta.hasPrev = paginationMeta.page > 1
+      }
+    } catch (error) {
+      data.value = []
+      paginationMeta.recordCount = 0
+      paginationMeta.totalPage = 0
+      paginationMeta.hasNext = false
+      paginationMeta.hasPrev = false
+    } finally {
+      isLoading.isTableLoading = false
+    }
+  }
+
+  // Handle pagination page change
+  function handlePageChange(page: number) {
+    // Update URL params - this will trigger watcher
+    queryParams['page-number'] = page
+  }
+
+  // Handle search from header component
+  function handleSearch(searchValue: string) {
+    // Update URL params - this will trigger watcher and refetch data
+    queryParams.search = searchValue
+    queryParams['page-number'] = 1 // Reset to first page when searching
+  }
+
+  // Watchers
+  // Watch for URL param changes and trigger refetch
+  watch(
+    params,
+    (newParams) => {
+      console.log('watch ~ newParams', newParams)
+      // Sync search input with URL params (for back/forward navigation)
+      if (newParams.search !== searchInput.value) {
+        searchInput.value = newParams.search || ''
+      }
+      fetchData()
+    },
+    { deep: true },
+  )
+
+  // Watch debounced search and update URL params (keeping for backward compatibility)
+  watch(debouncedSearch, (newValue) => {
+    // Only search if 3+ characters or empty (to clear search)
+    if (newValue.length === 0 || newValue.length >= 3) {
+      queryParams.search = newValue
+      queryParams['page-number'] = 1 // Reset to first page when searching
+    }
+  })
+
+  // Initialize data on mount
+  onMounted(() => {
+    fetchData()
+  })
+
+  return {
+    // State
+    data,
+    isLoading,
+    paginationMeta,
+    searchInput,
+    params,
+    queryParams,
+
+    // Functions
+    fetchData,
+    handlePageChange,
+    handleSearch,
+  }
+}
+
+export function transform(endpoint: string ,params: any): string {
+  const urlParams = new URLSearchParams()
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value) {
+      urlParams.append(key, value.toString())
+    }
+  })
+
+  return `${endpoint}?${urlParams.toString()}`
+}
diff --git a/app/composables/usePostalRegion.ts b/app/composables/usePostalRegion.ts
new file mode 100644
index 00000000..79b04955
--- /dev/null
+++ b/app/composables/usePostalRegion.ts
@@ -0,0 +1,169 @@
+import { ref, computed, watch, readonly, type Ref } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { PostalRegion } from '~/models/postal-region'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import * as postalRegionService from '~/services/postal-region.service'
+
+// Global cache untuk postal codes berdasarkan village code
+const postalRegionCache = ref<Map<string, PostalRegion[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function usePostalRegion(villageCode: Ref<string | undefined> | string | undefined) {
+  // Convert villageCode ke ref jika bukan ref
+  const villageCodeRef = typeof villageCode === 'string' || villageCode === undefined ? ref(villageCode) : villageCode
+
+  // Computed untuk mendapatkan postalRegion berdasarkan village code
+  const postalRegion = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return []
+    return postalRegionCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = villageCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const postalRegionOptions = computed<SelectItem[]>(() => {
+    return postalRegion.value.map((postalRegion) => ({
+      label: postalRegion.code,
+      value: postalRegion.code,
+      searchValue: postalRegion.code,
+    }))
+  })
+
+  // Function untuk fetch postalRegion berdasarkan village code
+  async function fetchpostalRegion(villageCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && postalRegionCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await postalRegionService.getList({
+        sort: 'code:asc',
+        'village-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const postalRegionData = response.body.data || []
+        postalRegionCache.value.set(code, postalRegionData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kode pos')
+        console.error('Failed to fetch postal codes:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kode pos')
+      console.error('Error fetching postal codes:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari postalRegion berdasarkan code
+  function getpostalRegionByCode(code: string): PostalRegion | undefined {
+    const villageCode = villageCodeRef.value
+    if (!villageCode) return undefined
+
+    const postalRegionForVillage = postalRegionCache.value.get(villageCode) || []
+    return postalRegionForVillage.find((postalRegion) => postalRegion.code === code)
+  }
+
+  // Function untuk clear cache village tertentu
+  function clearCache(villageCodeParam?: string) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (code) {
+      postalRegionCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    postalRegionCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshpostalRegion(villageCodeParam?: string) {
+    const code = villageCodeParam || villageCodeRef.value
+    if (code) {
+      return fetchpostalRegion(code, true)
+    }
+  }
+
+  // Debounced village code untuk mencegah multiple calls
+  const debouncedVillageCode = refDebounced(villageCodeRef, 100)
+
+  // Watch perubahan village code untuk auto fetch
+  watch(
+    debouncedVillageCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchpostalRegion(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    postalRegion: readonly(postalRegion),
+    postalRegionOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchpostalRegion,
+    refreshpostalRegion,
+    getpostalRegionByCode,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const usepostalRegionCache = () => ({
+  postalRegionCache: readonly(postalRegionCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useProvinces.ts b/app/composables/useProvinces.ts
new file mode 100644
index 00000000..b1fc8609
--- /dev/null
+++ b/app/composables/useProvinces.ts
@@ -0,0 +1,111 @@
+import { ref, computed } from 'vue'
+import type { Province } from '~/models/province'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as provinceService from '~/services/province.service'
+
+// Global state untuk caching
+const provincesCache = ref<Province[]>([])
+const isLoading = ref(false)
+const isInitialized = ref(false)
+const error = ref<string | null>(null)
+
+export function useProvinces() {
+  // Computed untuk format SelectItem
+  const provinceOptions = computed<SelectItem[]>(() => {
+    return provincesCache.value.map((province) => ({
+      label: toTitleCase(province.name),
+      value: province.code,
+      // code: province.code,
+      searchValue: `${province.code} ${province.name}`.trim(), // Untuk search internal combobox
+    }))
+  })
+
+  // Function untuk fetch data provinces
+  async function fetchProvinces(forceRefresh = false) {
+    // Jika sudah ada data dan tidak force refresh, skip
+    if (isInitialized.value && !forceRefresh) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (isLoading.value) {
+      return
+    }
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const response = await provinceService.getList({
+        'page-no-limit': true,
+        sort: 'name:asc',
+      })
+
+      if (response.success) {
+        provincesCache.value = response.body.data || []
+        isInitialized.value = true
+      } else {
+        error.value = 'Gagal memuat data provinsi'
+        console.error('Failed to fetch provinces:', response)
+      }
+    } catch (err) {
+      error.value = 'Terjadi kesalahan saat memuat data provinsi'
+      console.error('Error fetching provinces:', err)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  // Function untuk mencari province berdasarkan code
+  function getProvinceByCode(code: string): Province | undefined {
+    return provincesCache.value.find((province) => province.code === code)
+  }
+
+  // Function untuk mencari province berdasarkan name
+  function getProvinceByName(name: string): Province | undefined {
+    return provincesCache.value.find((province) => province.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache (jika diperlukan)
+  function clearCache() {
+    provincesCache.value = []
+    isInitialized.value = false
+    error.value = null
+  }
+
+  // Function untuk refresh data
+  function refreshProvinces() {
+    return fetchProvinces(true)
+  }
+
+  // Auto fetch saat composable pertama kali digunakan
+  if (!isInitialized.value && !isLoading.value) {
+    fetchProvinces()
+  }
+
+  return {
+    // Data
+    provinces: readonly(provincesCache),
+    provinceOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    isInitialized: readonly(isInitialized),
+    error: readonly(error),
+
+    // Methods
+    fetchProvinces,
+    refreshProvinces,
+    getProvinceByCode,
+    getProvinceByName,
+    clearCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useProvincesCache = () => ({
+  provinces: readonly(provincesCache),
+  isLoading: readonly(isLoading),
+  isInitialized: readonly(isInitialized),
+})
diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
new file mode 100644
index 00000000..a48e9a2b
--- /dev/null
+++ b/app/composables/useQueryCRUD.ts
@@ -0,0 +1,46 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryCRUDMode(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const mode = computed<'list' | 'entry'>({
+    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
+    set: (val) => {
+      router.push({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  const goToEntry = () => (mode.value = 'entry')
+  const backToList = () =>(mode.value = 'list')
+
+  return { mode, goToEntry, backToList }
+}
+
+export function useQueryCRUDRecordId(key: string = 'record-id') {
+  const route = useRoute()
+  const router = useRouter()
+
+  // const recordId = useState('route-query-' + key, () => '')
+  const recordId = computed({
+    get: () => route.query[key],
+    set: (val: string) => {
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  return { recordId }
+}
diff --git a/app/composables/useQueryMode.ts b/app/composables/useQueryMode.ts
new file mode 100644
index 00000000..0787e09e
--- /dev/null
+++ b/app/composables/useQueryMode.ts
@@ -0,0 +1,25 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryMode(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const mode = computed<'list' | 'add'>({
+    get: () => (route.query[key] && route.query[key] === 'add' ? 'add' : 'list'),
+    set: (val) => {
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val === 'list' ? undefined : val,
+        },
+      })
+    },
+  })
+
+  const openForm = () => (mode.value = 'add')
+  const backToList = () => (mode.value = 'list')
+
+  return { mode, openForm, backToList }
+}
diff --git a/app/composables/useQueryParam.ts b/app/composables/useQueryParam.ts
new file mode 100644
index 00000000..29674b88
--- /dev/null
+++ b/app/composables/useQueryParam.ts
@@ -0,0 +1,32 @@
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryParam(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const getQueryParam = (key: string) => {
+    return route.query[key]
+  }
+
+  const setQueryParam = (key: string, val: string) => {
+    router.replace({
+      path: route.path,
+      query: {
+        ...route.query,
+        [key]: val === 'list' ? undefined : val,
+      },
+    })
+  }
+
+  const setQueryParams = (keyVal: Record<string, string>) => {
+    router.replace({
+      path: route.path,
+      query: {
+        ...route.query,
+        ...keyVal,
+      },
+    })
+  }
+
+  return { getQueryParam, setQueryParam, setQueryParams}
+}
diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
new file mode 100644
index 00000000..ced57e3e
--- /dev/null
+++ b/app/composables/useRBAC.ts
@@ -0,0 +1,48 @@
+import type { Permission, RoleAccess } from '~/models/role'
+
+/**
+ * Check if user has access to a page
+ */
+export function useRBAC() {
+  // NOTE: this roles was dummy for testing only, it should taken from the user store
+  const authStore = useUserStore()
+
+  const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
+    const roles = authStore.userRole
+    return roles.some((role: string) => (role in roleAccess) || role === 'system') // system by-passes this check
+  }
+
+  const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
+    const roles = authStore.userRole
+    return roles.some((role: string) => roleAccess[role]?.includes(permission) || role === 'system') // system by-passes this check
+  }
+
+  const getUserPermissions = (roleAccess: RoleAccess, _userRoles?: string[]): Permission[] => {
+    const roles = authStore.userRole
+    // const roles = ['admisi']
+    const permissions = new Set<Permission>()
+
+    roles.forEach((role: string) => {
+      if (roleAccess[role]) {
+        roleAccess[role].forEach((permission) => permissions.add(permission))
+      }
+    })
+
+    return Array.from(permissions)
+  }
+
+  const hasCreateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'C')
+  const hasReadAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'R')
+  const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
+  const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
+
+  return {
+    checkRole,
+    checkPermission,
+    getUserPermissions,
+    hasCreateAccess,
+    hasReadAccess,
+    hasUpdateAccess,
+    hasDeleteAccess,
+  }
+}
diff --git a/app/composables/useRegencies.ts b/app/composables/useRegencies.ts
new file mode 100644
index 00000000..d816a5ed
--- /dev/null
+++ b/app/composables/useRegencies.ts
@@ -0,0 +1,386 @@
+import { ref, computed, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import type { Regency } from '~/models/regency'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { toTitleCase } from '~/lib/utils'
+import * as regencyService from '~/services/regency.service'
+
+// Interface untuk query parameters
+interface RegencyQueryParams {
+  'province-code'?: string
+  search?: string
+  'page-number'?: number
+  'page-size'?: number
+  sort?: string
+}
+
+// Interface untuk cached data dengan pagination
+interface CachedRegencyData {
+  data: Regency[]
+  meta: PaginationMeta
+  queryKey: string // untuk tracking query yang berbeda
+}
+
+// Global cache untuk regencies berdasarkan query key (province-code + search + pagination)
+const regenciesCache = reactive(new Map<string, CachedRegencyData>())
+const loadingStates = reactive(new Map<string, boolean>())
+const errorStates = reactive(new Map<string, string | null>())
+
+interface UseRegenciesOptions {
+  provinceCode?: Ref<string | undefined> | string | undefined
+  pageSize?: number
+  enablePagination?: boolean
+  enableSearch?: boolean
+}
+
+export function useRegencies(options: UseRegenciesOptions | Ref<string | undefined> | string | undefined = {}) {
+  // Backward compatibility - jika parameter pertama adalah provinceCode
+  const normalizedOptions: UseRegenciesOptions =
+    typeof options === 'object' && 'value' in options
+      ? { provinceCode: options }
+      : typeof options === 'string' || options === undefined
+        ? { provinceCode: options }
+        : options
+
+  const { provinceCode, pageSize = 10, enablePagination = true, enableSearch = true } = normalizedOptions
+
+  // Convert provinceCode ke ref jika bukan ref
+  const provinceCodeRef =
+    typeof provinceCode === 'string' || provinceCode === undefined ? ref(provinceCode) : provinceCode || ref(undefined)
+
+  // State untuk pagination dan search
+  const currentPage = ref(1)
+  const currentPageSize = ref(pageSize)
+  const searchQuery = ref('')
+
+  // Function untuk generate query key
+  const generateQueryKey = (params: RegencyQueryParams) => {
+    const keyParts = [
+      params['province-code'] || '',
+      params.search || '',
+      params['page-number'] || 1,
+      params['page-size'] || pageSize,
+      params.sort || 'name:asc',
+    ]
+    return keyParts.join('|')
+  }
+
+  // Current query key
+  const currentQueryKey = computed(() => {
+    return generateQueryKey({
+      'province-code': provinceCodeRef.value,
+      search: enableSearch ? searchQuery.value : undefined,
+      'page-number': enablePagination ? currentPage.value : undefined,
+      'page-size': enablePagination ? currentPageSize.value : undefined,
+      sort: 'name:asc',
+    })
+  })
+
+  // Computed untuk mendapatkan regencies berdasarkan current query
+  const regencies = computed(() => {
+    const queryKey = currentQueryKey.value
+    const cachedData = regenciesCache.get(queryKey)
+    return cachedData?.data || []
+  })
+
+  // Computed untuk pagination meta
+  const paginationMeta = computed(() => {
+    const queryKey = currentQueryKey.value
+    const cachedData = regenciesCache.get(queryKey)
+    return (
+      cachedData?.meta || {
+        recordCount: 0,
+        page: currentPage.value,
+        pageSize: currentPageSize.value,
+        totalPage: 0,
+        hasNext: false,
+        hasPrev: false,
+      }
+    )
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const queryKey = currentQueryKey.value
+    return loadingStates.get(queryKey) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const queryKey = currentQueryKey.value
+    return errorStates.get(queryKey) || null
+  })
+
+  // Computed untuk format Item
+  const regencyOptions = computed<Item[]>(() => {
+    return regencies.value.map((regency) => ({
+      label: toTitleCase(regency.name),
+      value: regency.code,
+      searchValue: `${regency.code} ${regency.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch regencies dengan pagination dan search
+  async function fetchRegencies(params?: Partial<RegencyQueryParams>, forceRefresh = false) {
+    const queryParams: RegencyQueryParams = {
+      'province-code': params?.['province-code'] || provinceCodeRef.value,
+      search: enableSearch ? params?.search || searchQuery.value : undefined,
+      'page-number': enablePagination ? params?.['page-number'] || currentPage.value : undefined,
+      'page-size': enablePagination ? params?.['page-size'] || currentPageSize.value : undefined,
+      sort: params?.sort || 'name:asc',
+    }
+
+    // Jika tidak ada province code, return
+    // if (!queryParams['province-code']) return  // buat komponen select birth
+
+    const queryKey = generateQueryKey(queryParams)
+
+    // Jika tidak force refresh dan sudah ada cache, skip
+    if (!forceRefresh && regenciesCache.has(queryKey)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.get(queryKey)) {
+      return
+    }
+
+    loadingStates.set(queryKey, true)
+    errorStates.set(queryKey, null)
+
+    try {
+      // Prepare API parameters
+      const apiParams: any = {
+        sort: queryParams.sort,
+        'province-code': queryParams['province-code'],
+      }
+
+      // Add pagination or no-limit based on enablePagination
+      if (enablePagination && queryParams['page-number'] && queryParams['page-size']) {
+        apiParams['page-number'] = queryParams['page-number']
+        apiParams['page-size'] = queryParams['page-size']
+      } else {
+        apiParams['page-no-limit'] = true
+      }
+
+      // Add search if enabled and has value
+      if (enableSearch && queryParams.search && queryParams.search.trim().length >= 3) {
+        apiParams.search = queryParams.search.trim()
+      }
+
+      const response = await regencyService.getList(apiParams)
+
+      if (response.success) {
+        const regenciesData = response.body.data || []
+        const meta = response.body.meta || { record_totalCount: regenciesData.length }
+
+        // Create pagination meta
+        const paginationMeta: PaginationMeta = {
+          recordCount: meta.record_totalCount,
+          page: queryParams['page-number'] || 1,
+          pageSize: queryParams['page-size'] || regenciesData.length,
+          totalPage:
+            enablePagination && queryParams['page-size']
+              ? Math.ceil(meta.record_totalCount / queryParams['page-size'])
+              : 1,
+          hasNext: false,
+          hasPrev: false,
+        }
+
+        if (enablePagination && queryParams['page-size']) {
+          paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+          paginationMeta.hasPrev = paginationMeta.page > 1
+        }
+
+        // Cache the result
+        regenciesCache.set(queryKey, {
+          data: [...regenciesData],
+          meta: { ...paginationMeta },
+          queryKey,
+        })
+      } else {
+        errorStates.set(queryKey, 'Gagal memuat data kabupaten/kota')
+        console.error('Failed to fetch regencies:', response)
+      }
+    } catch (err) {
+      errorStates.set(queryKey, 'Terjadi kesalahan saat memuat data kabupaten/kota')
+      console.error('Error fetching regencies:', err)
+    } finally {
+      loadingStates.set(queryKey, false)
+    }
+  }
+
+  // Function untuk mencari regency berdasarkan code (search di semua cached data)
+  function getRegencyByCode(code: string): Regency | undefined {
+    // Search di semua cached data
+    for (const cachedData of regenciesCache.values()) {
+      const found = cachedData.data.find((regency) => regency.code === code)
+      if (found) return found
+    }
+    return undefined
+  }
+
+  // Function untuk mencari regency berdasarkan name (search di semua cached data)
+  function getRegencyByName(name: string): Regency | undefined {
+    // Search di semua cached data
+    for (const cachedData of regenciesCache.values()) {
+      const found = cachedData.data.find((regency) => regency.name.toLowerCase() === name.toLowerCase())
+      if (found) return found
+    }
+    return undefined
+  }
+
+  // Function untuk pagination
+  function goToPage(page: number) {
+    if (page >= 1 && page <= paginationMeta.value.totalPage) {
+      currentPage.value = page
+    }
+  }
+
+  function nextPage() {
+    if (paginationMeta.value.hasNext) {
+      currentPage.value += 1
+    }
+  }
+
+  function prevPage() {
+    if (paginationMeta.value.hasPrev) {
+      currentPage.value -= 1
+    }
+  }
+
+  function changePageSize(size: number) {
+    currentPageSize.value = size
+    currentPage.value = 1 // Reset ke halaman pertama
+  }
+
+  // Function untuk search
+  function setSearch(query: string) {
+    searchQuery.value = query
+    currentPage.value = 1 // Reset ke halaman pertama saat search
+  }
+
+  function clearSearch() {
+    searchQuery.value = ''
+    currentPage.value = 1
+  }
+
+  // Function untuk clear cache berdasarkan query key pattern
+  function clearCache(provinceCodeParam?: string) {
+    const code = provinceCodeParam || provinceCodeRef.value
+    if (code) {
+      // Clear semua cache yang mengandung province code tersebut
+      const keysToDelete: string[] = []
+      for (const [key] of regenciesCache.entries()) {
+        if (key.startsWith(code + '|')) {
+          keysToDelete.push(key)
+        }
+      }
+      keysToDelete.forEach((key) => {
+        regenciesCache.delete(key)
+        loadingStates.delete(key)
+        errorStates.delete(key)
+      })
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    regenciesCache.clear()
+    loadingStates.clear()
+    errorStates.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshRegencies(params?: Partial<RegencyQueryParams>) {
+    return fetchRegencies(params, true)
+  }
+
+  // Debounced province code untuk mencegah multiple calls
+  const debouncedProvinceCode = refDebounced(provinceCodeRef, 100)
+
+  // Watch perubahan province code untuk auto fetch
+  watch(
+    debouncedProvinceCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Reset pagination dan search saat province code berubah
+        currentPage.value = 1
+        if (enableSearch) {
+          searchQuery.value = ''
+        }
+        fetchRegencies()
+      }
+    },
+    { immediate: true },
+  )
+
+  const triggerFetchAfterIdle = useDebounceFn(() => {
+    if (enableSearch) {
+      currentPage.value = 1
+      fetchRegencies()
+    }
+  }, 1000)
+
+  // Watch perubahan search query untuk auto fetch dan reset halaman
+  watch(searchQuery, (newSearch, oldSearch) => {
+    if (newSearch !== oldSearch) {
+      triggerFetchAfterIdle()
+    }
+  })
+
+  // Watch perubahan pagination untuk auto fetch
+  watch([currentPage, currentPageSize], () => {
+    if (enablePagination) {
+      fetchRegencies()
+    }
+  })
+
+  watch(regencyOptions, (val) => {
+    console.log('[regencyOptions] updated', val.length)
+  })
+
+  return {
+    // Data
+    regencies: readonly(regencies),
+    regencyOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+    paginationMeta: readonly(paginationMeta),
+
+    // Search state
+    searchQuery: enableSearch ? searchQuery : readonly(ref('')),
+
+    // Pagination state
+    currentPage: enablePagination ? currentPage : readonly(ref(1)),
+    currentPageSize: enablePagination ? currentPageSize : readonly(ref(pageSize)),
+
+    // Methods
+    fetchRegencies,
+    refreshRegencies,
+    getRegencyByCode,
+    getRegencyByName,
+    clearCache,
+    clearAllCache,
+
+    // Pagination methods
+    goToPage: enablePagination ? goToPage : () => {},
+    nextPage: enablePagination ? nextPage : () => {},
+    prevPage: enablePagination ? prevPage : () => {},
+    changePageSize: enablePagination ? changePageSize : () => {},
+
+    // Search methods
+    setSearch: enableSearch ? setSearch : () => {},
+    clearSearch: enableSearch ? clearSearch : () => {},
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useRegenciesCache = () => ({
+  regenciesCache: readonly(regenciesCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useTheme.ts b/app/composables/useTheme.ts
new file mode 100644
index 00000000..f028d4c6
--- /dev/null
+++ b/app/composables/useTheme.ts
@@ -0,0 +1,31 @@
+import { ref, watchEffect } from 'vue'
+
+const THEME_KEY = 'theme-mode'
+
+export function useTheme() {
+  const theme = ref<'light' | 'dark'>(getInitialTheme())
+
+  function getInitialTheme() {
+    if (typeof window === 'undefined') return 'light'
+    const persisted = localStorage.getItem(THEME_KEY)
+    if (persisted === 'dark' || persisted === 'light') return persisted
+    // fallback: system preference
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  function setTheme(newTheme: 'light' | 'dark') {
+    theme.value = newTheme
+    localStorage.setItem(THEME_KEY, newTheme)
+    document.documentElement.classList.toggle('dark', newTheme === 'dark')
+  }
+
+  function toggleTheme() {
+    setTheme(theme.value === 'dark' ? 'light' : 'dark')
+  }
+
+  watchEffect(() => {
+    setTheme(theme.value)
+  })
+
+  return { theme, toggleTheme }
+}
diff --git a/app/composables/useVillages.ts b/app/composables/useVillages.ts
new file mode 100644
index 00000000..68713fe2
--- /dev/null
+++ b/app/composables/useVillages.ts
@@ -0,0 +1,181 @@
+import { ref, computed, watch } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { Village } from '~/models/village'
+import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
+import { toTitleCase } from '~/lib/utils'
+import * as villageService from '~/services/village.service'
+
+// Global cache untuk villages berdasarkan district code
+const villagesCache = ref<Map<string, Village[]>>(new Map())
+const loadingStates = ref<Map<string, boolean>>(new Map())
+const errorStates = ref<Map<string, string | null>>(new Map())
+
+export function useVillages(districtCode: Ref<string | undefined> | string | undefined) {
+  // Convert districtCode ke ref jika bukan ref
+  const districtCodeRef =
+    typeof districtCode === 'string' || districtCode === undefined ? ref(districtCode) : districtCode
+
+  // Computed untuk mendapatkan villages berdasarkan district code
+  const villages = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return []
+    return villagesCache.value.get(code) || []
+  })
+
+  // Computed untuk loading state
+  const isLoading = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return false
+    return loadingStates.value.get(code) || false
+  })
+
+  // Computed untuk error state
+  const error = computed(() => {
+    const code = districtCodeRef.value
+    if (!code) return null
+    return errorStates.value.get(code) || null
+  })
+
+  // Computed untuk format SelectItem
+  const villageOptions = computed<SelectItem[]>(() => {
+    return villages.value.map((village) => ({
+      label: toTitleCase(village.name),
+      value: village.code,
+      searchValue: `${village.code} ${village.name}`.trim(),
+    }))
+  })
+
+  // Function untuk fetch villages berdasarkan district code
+  async function fetchVillages(districtCodeParam?: string, forceRefresh = false, isUserAction = false) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (!code) return
+
+    // Jika user action atau force refresh, selalu fetch
+    // Jika bukan user action dan sudah ada cache, skip
+    if (!isUserAction && !forceRefresh && villagesCache.value.has(code)) {
+      return
+    }
+
+    // Jika sedang loading, skip untuk mencegah duplicate calls
+    if (loadingStates.value.get(code)) {
+      return
+    }
+
+    // Tambahan: Cek apakah ada pending request untuk code yang sama
+    const pendingKey = `pending_${code}`
+    if (loadingStates.value.get(pendingKey)) {
+      return
+    }
+
+    loadingStates.value.set(pendingKey, true)
+
+    loadingStates.value.set(code, true)
+    errorStates.value.set(code, null)
+
+    try {
+      const response = await villageService.getList({
+        sort: 'name:asc',
+        'district-code': code,
+        'page-no-limit': true,
+      })
+
+      if (response.success) {
+        const villagesData = response.body.data || []
+        villagesCache.value.set(code, villagesData)
+      } else {
+        errorStates.value.set(code, 'Gagal memuat data kelurahan')
+        console.error('Failed to fetch villages:', response)
+      }
+    } catch (err) {
+      errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kelurahan')
+      console.error('Error fetching villages:', err)
+    } finally {
+      loadingStates.value.set(code, false)
+      loadingStates.value.delete(pendingKey)
+    }
+  }
+
+  // Function untuk mencari village berdasarkan code
+  function getVillageByCode(code: string): Village | undefined {
+    const districtCode = districtCodeRef.value
+    if (!districtCode) return undefined
+
+    const villagesForDistrict = villagesCache.value.get(districtCode) || []
+    return villagesForDistrict.find((village) => village.code === code)
+  }
+
+  // Function untuk mencari village berdasarkan name
+  function getVillageByName(name: string): Village | undefined {
+    const districtCode = districtCodeRef.value
+    if (!districtCode) return undefined
+
+    const villagesForDistrict = villagesCache.value.get(districtCode) || []
+    return villagesForDistrict.find((village) => village.name.toLowerCase() === name.toLowerCase())
+  }
+
+  // Function untuk clear cache district tertentu
+  function clearCache(districtCodeParam?: string) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (code) {
+      villagesCache.value.delete(code)
+      loadingStates.value.delete(code)
+      errorStates.value.delete(code)
+    }
+  }
+
+  // Function untuk clear semua cache
+  function clearAllCache() {
+    villagesCache.value.clear()
+    loadingStates.value.clear()
+    errorStates.value.clear()
+  }
+
+  // Function untuk refresh data
+  function refreshVillages(districtCodeParam?: string) {
+    const code = districtCodeParam || districtCodeRef.value
+    if (code) {
+      return fetchVillages(code, true)
+    }
+  }
+
+  // Debounced district code untuk mencegah multiple calls
+  const debouncedDistrictCode = refDebounced(districtCodeRef, 100)
+
+  // Watch perubahan district code untuk auto fetch
+  watch(
+    debouncedDistrictCode,
+    (newCode, oldCode) => {
+      if (newCode && newCode !== oldCode) {
+        // Jika ada oldCode berarti user action (ganti pilihan)
+        const isUserAction = !!oldCode
+        fetchVillages(newCode, false, isUserAction)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Data
+    villages: readonly(villages),
+    villageOptions,
+
+    // State
+    isLoading: readonly(isLoading),
+    error: readonly(error),
+
+    // Methods
+    fetchVillages,
+    refreshVillages,
+    getVillageByCode,
+    getVillageByName,
+    clearCache,
+    clearAllCache,
+  }
+}
+
+// Export untuk direct access ke cached data (jika diperlukan)
+export const useVillagesCache = () => ({
+  villagesCache: readonly(villagesCache),
+  loadingStates: readonly(loadingStates),
+  errorStates: readonly(errorStates),
+})
diff --git a/app/composables/useXfetch.ts b/app/composables/useXfetch.ts
new file mode 100644
index 00000000..87d69f97
--- /dev/null
+++ b/app/composables/useXfetch.ts
@@ -0,0 +1,75 @@
+import type { Pinia } from 'pinia'
+import type { XError, XErrors } from '~/types/error'
+
+export interface XfetchResult {
+  success: boolean
+  status_code: number
+  body: object | any
+  errors?: XErrors | undefined
+  error?: XError | undefined
+  message?: string
+}
+
+export type XfetchMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE'
+
+export async function xfetch(
+  url: string,
+  method: XfetchMethod = 'GET',
+  input?: object | FormData,
+  headers?: any,
+  _type = 'json',
+): Promise<XfetchResult> {
+  let success = false
+  let body: object | any = {}
+  let errors: XErrors = {}
+  let error: XError | undefined = {
+    code: '',
+    message: '',
+  }
+  let message: string | undefined = ''
+
+  if (!headers) {
+    headers = {}
+  }
+  if (input && !(input instanceof FormData)) {
+    headers['Content-Type'] = 'application/json'
+  }
+
+  try {
+    const res = await $fetch.raw(url, {
+      method,
+      headers,
+      body: input instanceof FormData ? input : JSON.stringify(input),
+    })
+
+    body = res._data
+    success = true
+    return { success, status_code: res.status, body, errors, error, message }
+  } catch (fetchError: any) {
+    const status = fetchError.response?.status || 500
+    const resJson = fetchError.data
+
+    if (status === 401 && import.meta.client) {
+      clearStore()
+    }
+
+    if (resJson?.errors) {
+      errors = resJson.errors
+    } else if (resJson?.code && resJson?.message) {
+      error = { code: resJson.code, message: resJson.message }
+    } else if (resJson?.message) {
+      message = resJson.message
+    } else {
+      message = fetchError.message || 'Something went wrong'
+    }
+
+    return { success, status_code: status, body, errors, error, message }
+  }
+}
+
+function clearStore() {
+  const { $pinia } = useNuxtApp()
+  const userStore = useUserStore($pinia as Pinia)
+  userStore.logout()
+  navigateTo('/401')
+}
diff --git a/app/error.vue b/app/error.vue
new file mode 100644
index 00000000..c94b716f
--- /dev/null
+++ b/app/error.vue
@@ -0,0 +1,14 @@
+<script setup>
+definePageMeta({
+  layout: 'blank',
+})
+
+const { isAuthenticated } = useUserStore()
+</script>
+
+<template>
+  <PubMyUiError v-if="!isAuthenticated" :status-code="401" />
+  <PubMyUiError v-else :status-code="404" />
+</template>
+
+<style scoped></style>
diff --git a/app/handlers/_handler.ts b/app/handlers/_handler.ts
new file mode 100644
index 00000000..01a191b8
--- /dev/null
+++ b/app/handlers/_handler.ts
@@ -0,0 +1,271 @@
+import { ref } from 'vue'
+
+// Factory for CRUD handler state and actions
+export function createCrudHandler<T = any>(crud: {
+  post: (...args: any[]) => Promise<any>
+  patch: (...args: any[]) => Promise<any>
+  remove: (...args: any[]) => Promise<any>
+}) {
+  const recId = ref<number>(0)
+  const recAction = ref<string>('')
+  const recItem = ref<T | null>(null)
+  const isReadonly = ref(false)
+  const isProcessing = ref(false)
+  const isFormEntryDialogOpen = ref(false)
+  const isRecordConfirmationOpen = ref(false)
+
+  function onResetState() {
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+
+  async function handleActionSave(values: any, refresh: () => void, reset: () => void, toast: ToastFn) {
+    isProcessing.value = true
+    await handleAsyncAction<[any], any>({
+      action: crud.post,
+      args: [values],
+      toast,
+      successMessage: 'Data berhasil disimpan',
+      errorMessage: 'Gagal menyimpan data',
+      onSuccess: () => {
+        isFormEntryDialogOpen.value = false
+        if (refresh) refresh()
+      },
+      onFinally: (isSuccess: boolean) => {
+        if (isSuccess) setTimeout(reset, 300)
+        onResetState()
+        isProcessing.value = false
+      },
+    })
+  }
+
+  async function handleActionEdit(
+    id: number | string,
+    values: any,
+    refresh: () => void,
+    reset: () => void,
+    toast: ToastFn,
+  ) {
+    isProcessing.value = true
+    await handleAsyncAction<[number | string, any], any>({
+      action: crud.patch,
+      args: [id, values],
+      toast,
+      successMessage: 'Data berhasil diubah',
+      errorMessage: 'Gagal mengubah data',
+      onSuccess: () => {
+        isFormEntryDialogOpen.value = false
+        if (refresh) refresh()
+      },
+      onFinally: (isSuccess: boolean) => {
+        if (isSuccess) setTimeout(reset, 300)
+        onResetState()
+        isProcessing.value = false
+      },
+    })
+  }
+
+  async function handleActionRemove(id: number | string, refresh: () => void, toast: ToastFn) {
+    isProcessing.value = true
+    await handleAsyncAction<[number | string], any>({
+      action: crud.remove,
+      args: [id],
+      toast,
+      successMessage: 'Data berhasil dihapus',
+      errorMessage: 'Gagal menghapus data',
+      onSuccess: () => {
+        isRecordConfirmationOpen.value = false
+        if (refresh) refresh()
+      },
+      onFinally: () => {
+        setTimeout(refresh, 300)
+        onResetState()
+        isProcessing.value = false
+      },
+    })
+  }
+
+  function handleCancelForm(reset: () => void) {
+    isFormEntryDialogOpen.value = false
+    isReadonly.value = false
+    onResetState()
+    setTimeout(reset, 300)
+  }
+
+  return {
+    recId,
+    recAction,
+    recItem,
+    isReadonly,
+    isProcessing,
+    isFormEntryDialogOpen,
+    isRecordConfirmationOpen,
+    onResetState,
+    handleActionSave,
+    handleActionEdit,
+    handleActionRemove,
+    handleCancelForm,
+  }
+}
+
+// Factory for CRUD handler state and actions
+export function genCrudHandler<T = any>(crud: {
+  create: (...args: any[]) => Promise<any>
+  update: (...args: any[]) => Promise<any>
+  remove: (...args: any[]) => Promise<any>
+}) {
+  const recId = ref<number>(0)
+  const recAction = ref<string>('')
+  const recItem = ref<T | null>(null)
+  const isReadonly = ref(false)
+  const isProcessing = ref(false)
+  const isFormEntryDialogOpen = ref(false)
+  const isRecordConfirmationOpen = ref(false)
+
+  function onResetState() {
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+
+  async function handleActionSave(
+    values: any,
+    refresh: () => void,
+    reset: () => void,
+    toast: ToastFn,
+  ): Promise<any | null> {
+    isProcessing.value = true
+
+    let successResponse: any = null
+
+    await handleAsyncAction<[any], any>({
+      action: crud.create,
+      args: [values],
+      toast,
+      successMessage: 'Data berhasil disimpan',
+      errorMessage: 'Gagal menyimpan data',
+      onSuccess: (result) => {
+        isFormEntryDialogOpen.value = false
+        if (refresh) refresh()
+        successResponse = result
+      },
+      onFinally: (isSuccess: boolean) => {
+        if (isSuccess) setTimeout(reset, 500)
+        isProcessing.value = false
+      },
+    })
+
+    return successResponse
+  }
+
+  async function handleActionEdit(
+    id: number | string,
+    values: any,
+    refresh: () => void,
+    reset: () => void,
+    toast: ToastFn,
+  ) {
+    isProcessing.value = true
+    await handleAsyncAction<[number | string, any], any>({
+      action: crud.update,
+      args: [id, values],
+      toast,
+      successMessage: 'Data berhasil diubah',
+      errorMessage: 'Gagal mengubah data',
+      onSuccess: () => {
+        isFormEntryDialogOpen.value = false
+        if (refresh) refresh()
+      },
+      onFinally: (isSuccess: boolean) => {
+        if (isSuccess) setTimeout(reset, 500)
+        isProcessing.value = false
+      },
+    })
+  }
+
+  async function handleActionRemove(id: number | string, refresh: () => void, toast: ToastFn) {
+    isProcessing.value = true
+    await handleAsyncAction<[number | string], any>({
+      action: crud.remove,
+      args: [id],
+      toast,
+      successMessage: 'Data berhasil dihapus',
+      errorMessage: 'Gagal menghapus data',
+      onSuccess: () => {
+        isRecordConfirmationOpen.value = false
+        if (refresh) refresh()
+      },
+      onFinally: () => {
+        setTimeout(refresh, 300)
+        onResetState()
+        isProcessing.value = false
+      },
+    })
+  }
+
+  function handleCancelForm(reset: () => void) {
+    isFormEntryDialogOpen.value = false
+    isReadonly.value = false
+    onResetState()
+    setTimeout(reset, 300)
+  }
+
+  return {
+    recId,
+    recAction,
+    recItem,
+    isReadonly,
+    isProcessing,
+    isFormEntryDialogOpen,
+    isRecordConfirmationOpen,
+    onResetState,
+    handleActionSave,
+    handleActionEdit,
+    handleActionRemove,
+    handleCancelForm,
+  }
+}
+
+// Reusable async handler for CRUD actions with toast and state management
+export type ToastFn = (params: { title: string; description: string; variant: 'default' | 'destructive' }) => void
+
+export interface HandleAsyncActionOptions<T extends any[], R> {
+  action: (...args: T) => Promise<R & { success: boolean }>
+  args?: T
+  toast: ToastFn
+  successMessage: string
+  errorMessage: string
+  onSuccess?: (result: R) => void
+  onError?: (error: unknown) => void
+  onFinally?: (isSuccess: boolean) => void
+}
+
+export async function handleAsyncAction<T extends any[], R>({
+  action,
+  args = [] as unknown as T,
+  toast,
+  successMessage,
+  errorMessage,
+  onSuccess,
+  onError,
+  onFinally,
+}: HandleAsyncActionOptions<T, R>) {
+  let isSuccess = false
+  try {
+    const result = await action(...args)
+    if (result.success) {
+      toast({ title: 'Berhasil', description: successMessage, variant: 'default' })
+      isSuccess = true
+      if (onSuccess) onSuccess(result)
+    } else {
+      toast({ title: 'Gagal', description: errorMessage, variant: 'destructive' })
+      if (onError) onError(result)
+    }
+  } catch (error) {
+    toast({ title: 'Gagal', description: errorMessage, variant: 'destructive' })
+    if (onError) onError(error)
+  } finally {
+    if (onFinally) onFinally(isSuccess)
+  }
+}
diff --git a/app/handlers/consultation.handler.ts b/app/handlers/consultation.handler.ts
new file mode 100644
index 00000000..a8187b01
--- /dev/null
+++ b/app/handlers/consultation.handler.ts
@@ -0,0 +1,17 @@
+import { genCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/consultation.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({ create, update, remove })
diff --git a/app/handlers/device-order-item.handler.ts b/app/handlers/device-order-item.handler.ts
new file mode 100644
index 00000000..b1df996b
--- /dev/null
+++ b/app/handlers/device-order-item.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device-order-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/device-order.handler.ts b/app/handlers/device-order.handler.ts
new file mode 100644
index 00000000..b1df996b
--- /dev/null
+++ b/app/handlers/device-order.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device-order-item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/device.handler.ts b/app/handlers/device.handler.ts
new file mode 100644
index 00000000..320c6ab7
--- /dev/null
+++ b/app/handlers/device.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/device.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/diagnose-src.handler.ts b/app/handlers/diagnose-src.handler.ts
new file mode 100644
index 00000000..c109e6fc
--- /dev/null
+++ b/app/handlers/diagnose-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/diagnose-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/division-position.handler.ts b/app/handlers/division-position.handler.ts
new file mode 100644
index 00000000..29ac912d
--- /dev/null
+++ b/app/handlers/division-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/division-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/division.handler.ts b/app/handlers/division.handler.ts
new file mode 100644
index 00000000..8c36c357
--- /dev/null
+++ b/app/handlers/division.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/division.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/encounter.handler.ts b/app/handlers/encounter.handler.ts
new file mode 100644
index 00000000..10586ffb
--- /dev/null
+++ b/app/handlers/encounter.handler.ts
@@ -0,0 +1,25 @@
+
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/encounter.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/infra.handler.ts b/app/handlers/infra.handler.ts
new file mode 100644
index 00000000..739d1b3f
--- /dev/null
+++ b/app/handlers/infra.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/infra.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/installation.handler.ts b/app/handlers/installation.handler.ts
new file mode 100644
index 00000000..97898476
--- /dev/null
+++ b/app/handlers/installation.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/installation.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/material.handler.ts b/app/handlers/material.handler.ts
new file mode 100644
index 00000000..28b6524c
--- /dev/null
+++ b/app/handlers/material.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/material.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/medical-action-src.handler.ts b/app/handlers/medical-action-src.handler.ts
new file mode 100644
index 00000000..652d6d60
--- /dev/null
+++ b/app/handlers/medical-action-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medical-action-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/medicine-group.handler.ts b/app/handlers/medicine-group.handler.ts
new file mode 100644
index 00000000..6e61fff2
--- /dev/null
+++ b/app/handlers/medicine-group.handler.ts
@@ -0,0 +1,21 @@
+import { createCrudHandler } from '~/handlers/_handler'
+import { create, update, remove } from '~/services/medicine-group.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = createCrudHandler({
+  post: create,
+  patch: update,
+  remove: remove,
+})
diff --git a/app/handlers/medicine-method.handler.ts b/app/handlers/medicine-method.handler.ts
new file mode 100644
index 00000000..9ba6288b
--- /dev/null
+++ b/app/handlers/medicine-method.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medicine-method.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/medicine.handler.ts b/app/handlers/medicine.handler.ts
new file mode 100644
index 00000000..8def5dc3
--- /dev/null
+++ b/app/handlers/medicine.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/medicine.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/patient.handler.ts b/app/handlers/patient.handler.ts
new file mode 100644
index 00000000..f87eaf71
--- /dev/null
+++ b/app/handlers/patient.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { postPatient as create, patchPatient as update, removePatient as remove } from '~/services/patient.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/procedure-src.handler.ts b/app/handlers/procedure-src.handler.ts
new file mode 100644
index 00000000..7c949356
--- /dev/null
+++ b/app/handlers/procedure-src.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/procedure-src.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/soapi-early.handler.ts b/app/handlers/soapi-early.handler.ts
new file mode 100644
index 00000000..3a07108e
--- /dev/null
+++ b/app/handlers/soapi-early.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/soapi-early.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/specialist.handler.ts b/app/handlers/specialist.handler.ts
new file mode 100644
index 00000000..476c7ec8
--- /dev/null
+++ b/app/handlers/specialist.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/specialist.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/subspecialist.handler.ts b/app/handlers/subspecialist.handler.ts
new file mode 100644
index 00000000..bd12b146
--- /dev/null
+++ b/app/handlers/subspecialist.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/subspecialist.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/unit.handler.ts b/app/handlers/unit.handler.ts
new file mode 100644
index 00000000..b1240291
--- /dev/null
+++ b/app/handlers/unit.handler.ts
@@ -0,0 +1,25 @@
+
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/unit.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/uom.handler.ts b/app/handlers/uom.handler.ts
new file mode 100644
index 00000000..c4532dc7
--- /dev/null
+++ b/app/handlers/uom.handler.ts
@@ -0,0 +1,26 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/uom.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
+
+
diff --git a/app/layouts/blank.vue b/app/layouts/blank.vue
new file mode 100644
index 00000000..029e4eec
--- /dev/null
+++ b/app/layouts/blank.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100644
index 00000000..dd52a9c8
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import CardContent from '~/components/pub/ui/card/CardContent.vue'
+
+const route = useRoute()
+const contentFrame = computed(() => route.meta.contentFrame)
+const contentFrameClass = computed(() => {
+  switch (contentFrame.value) {
+    case 'cf-container-2xl':
+      return 'cf-container-2xl'
+    case 'cf-container-xl':
+      return 'cf-container-xl'
+    case 'cf-container-lg':
+      return 'cf-container-lg'
+    case 'cf-container-md':
+      return 'cf-container-md'
+    case 'cf-container-sm':
+      return 'cf-container-sm'
+    case 'cf-full-width':
+      return 'cf-full-width'
+    default:
+      return 'cf-container-lg'
+  }
+})
+</script>
+
+<template>
+  <SidebarProvider>
+    <LayoutAppSidebar />
+    <SidebarInset>
+      <LayoutHeader />
+      <div :class="`w-full p-4 2xl:p-5 flex justify-center ${contentFrameClass}`">
+        <div v-if="contentFrame !== 'cf-no-frame'">
+          <Card>
+            <CardContent>
+              <slot />
+            </CardContent>
+          </Card>
+        </div>
+        <slot v-else />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
+
+<style scoped>
+.cf-container > *,
+.cf-container-lg > *,
+.cf-container-md > *,
+.cf-container-sm > *,
+.cf-full-width {
+  width: 100%;
+}
+
+.cf-full-width > * {
+  width: 100%;
+}
+
+.cf-container-2xl > * {
+  max-width: 1400px;
+}
+
+.cf-container-xl > * {
+  max-width: 1200px;
+}
+
+.cf-container-lg > * {
+  max-width: 992px;
+}
+
+.cf-container-md > * {
+  max-width: 768px;
+}
+
+.cf-container-sm > * {
+  max-width: 576px;
+}
+</style>
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
new file mode 100644
index 00000000..3a52b22e
--- /dev/null
+++ b/app/lib/constants.ts
@@ -0,0 +1,385 @@
+export const activeStatusCodes: Record<string, string> = {
+  active: 'Aktif',
+  inactive: 'Tidak Aktif',
+}
+
+export const dataStatusCodes: Record<string, string> = {
+  new: 'Baru',
+  review: 'Review',
+  process: 'Proses',
+  done: 'Selesai',
+  canceled: 'Dibatalkan',
+  rejected: 'Ditolak',
+  skiped: 'Dilewati',
+}
+
+export const userStatusCodes: Record<string, string> = {
+  new: 'Baru',
+  active: 'Aktif',
+  inactive: 'Tidak Aktif',
+  blocked: 'Diblokir',
+  suspended: 'Dibekukan',
+}
+
+export const itemGroupCodes: Record<string, string> = {
+  infra: 'Infrastruktur',
+  medicine: 'Obat',
+  device: 'Peralatan',
+  material: 'Perlengkapan',
+}
+
+export const unitTypeCodes: Record<string, string> = {
+  reg: 'Registrasi',
+  exa: 'Pemeriksaan',
+  pay: 'Pembayaran',
+  pha: 'Farmasai',
+  lab: 'Laboratorium',
+  rad: 'Radiologi',
+}
+
+export const queueStatusCodes: Record<string, string> = {
+  wait: 'Tunggu',
+  proc: 'Proses',
+  done: 'Selesai',
+  cancel: 'Batal',
+  skip: 'Dilewati',
+}
+
+export const encounterClassCodes: Record<string, string> = {
+  outpatient: 'Rawat Jalan',
+  ambulatory: 'Rawat Jalan',
+  emergency: 'Gawat Darurat',
+  inpatient: 'Rawat Inap',
+  draft: 'Draft',
+  done: 'Selesai',
+  cancel: 'Batal',
+  skip: 'Dilewati',
+}
+
+export const timeUnitCodes: Record<string, string> = {
+  sec: 'Detik',
+  min: 'Menit',
+  hour: 'Jam',
+  day: 'Hari',
+  week: 'Minggu',
+  month: 'Bulan',
+  year: 'Tahun',
+}
+
+export const bigTimeUnitCodes: Record<string, string> = {
+  day: 'Hari',
+  week: 'Minggu',
+  month: 'Bulan',
+  year: 'Tahun',
+}
+
+export const dischargeMethodCodes: Record<string, string> = {
+  home: "Pulang",
+  "home-request": "Pulang Atas Permintaan Sendiri",
+  "consul-back": "Konsultasi Balik / Lanjutan",
+  "consul-poly": "Konsultasi Poliklinik Lain",
+  "consul-executive": "Konsultasi Antar Dokter Eksekutif",
+  "consul-ch-day": "Konsultasi Hari Lain",
+  emergency: "Rujuk IGD",
+  "emergency-covid": "Rujuk IGD Covid",
+  inpatient: "Rujuk Rawat Inap",
+  external: "Rujuk Faskes Lain",
+  death: "Meninggal",
+  "death-on-arrival": "Meninggal Saat Tiba"
+}
+
+export const genderCodes: Record<string, string> = {
+  male: 'Laki',
+  female: 'Perempuan',
+  'not-stated': 'Tidak Disebutkan',
+  unknown: 'Tidak Diketahui',
+}
+
+export const religionCodes: Record<string, string> = {
+  islam: 'Islam',
+  protestan: 'Protestan',
+  katolik: 'Katolik',
+  hindu: 'Hindu',
+  buda: 'Buda',
+  konghucu: 'Konghucu',
+  other: 'Kepercayaan Lain',
+}
+
+export const educationCodes: Record<string, string> = {
+  TS: 'TS',
+  TK: 'TK',
+  SD: 'SD',
+  SMP: 'SMP',
+  SMA: 'SMA',
+  D1: 'D1',
+  D2: 'D2',
+  D3: 'D3',
+  S1: 'S1',
+  S2: 'S2',
+  S3: 'S3',
+}
+
+export const occupationCodes: Record<string, string> = {
+  unknown: 'Tidak diketahui',
+  tidak_bekerja: 'Belum/Tidak Bekerja',
+  mengurus_rumah_tangga: 'Mengurus Rumah Tangga',
+  pelajar: 'Pelajar/Mahasiswa',
+  pensiunan: 'Pensiunan',
+  pns: 'Pegawai Negeri Sipil',
+  tni: 'Tentara Nasional Indonesia',
+  polri: 'Kepolisian RI',
+  perdagangan: 'Perdagangan',
+  petani: 'Petani/Pekebun',
+  peternak: 'Peternak',
+  nelayan: 'Nelayan/Perikanan',
+  industri: 'Industri',
+  konstruksi: 'Konstruksi',
+  transportasi: 'Transportasi',
+  karyawan_swasta: 'Karyawan Swasta',
+  karyawan_bumn: 'Karyawan BUMN',
+  karyawan_bumd: 'Karyawan BUMD',
+  karyawan_honorer: 'Karyawan Honorer',
+  buruh_harian: 'Buruh Harian Lepas',
+  buruh_tani: 'Buruh Tani/Perkebunan',
+  buruh_nelayan: 'Buruh Nelayan/Perikanan',
+  buruh_peternakan: 'Buruh Peternakan',
+  pembantu_rumah_tangga: 'Pembantu Rumah Tangga',
+  tukang_cukur: 'Tukang Cukur',
+  tukang_listrik: 'Tukang Listrik',
+  tukang_batu: 'Tukang Batu',
+  tukang_kayu: 'Tukang Kayu',
+  tukang_sol_sepatu: 'Tukang Sol Sepatu',
+  tukang_jahit: 'Tukang Jahit',
+  tukang_gigi: 'Tukang Gigi',
+  penata_rias: 'Penata Rias',
+  penata_busana: 'Penata Busana',
+  penata_rambut: 'Penata Rambut',
+  mekanik: 'Mekanik',
+  seniman: 'Seniman',
+  tabib: 'Tabib',
+  paraji: 'Paraji',
+  perancang_busana: 'Perancang Busana',
+  penterjemah: 'Penterjemah',
+  imam_mesjid: 'Imam Mesjid',
+  pendeta: 'Pendeta',
+  pastor: 'Pastor',
+  wartawan: 'Wartawan',
+  ustadz: 'Ustadz/Mubaligh',
+  juru_masak: 'Juru Masak',
+  promotor: 'Promotor Acara',
+  dpr_ri: 'Anggota DPR-RI',
+  dpd: 'Anggota DPD',
+  bpk: 'Anggota BPK',
+  presiden: 'Presiden',
+  wakil_presiden: 'Wakil Presiden',
+  mk: 'Anggota Mahkamah Konstitusi',
+  kabinet: 'Anggota Kabinet/Kementrian',
+  dubes: 'Duta Besar',
+  gubernur: 'Gubernur',
+  wakil_gubernur: 'Wakil Gubernur',
+  bupati: 'Bupati',
+  wakil_bupati: 'Wakil Bupati',
+  walikota: 'Walikota',
+  wakil_walikota: 'Wakil Walikota',
+  dprd_provinsi: 'Anggota DPRD Provinsi',
+  dprd_kabkota: 'Anggota DPRD Kabupaten/Kota',
+  dosen: 'Dosen',
+  guru: 'Guru',
+  pilot: 'Pilot',
+  pengacara: 'Pengacara',
+  arsitek: 'Arsitek',
+  akuntan: 'Akuntan',
+  konsultan: 'Konsultan',
+  dokter: 'Dokter',
+  bidan: 'Bidan',
+  apoteker: 'Apoteker',
+  psikolog: 'Psikiater/Psikolog',
+  penyiar_tv: 'Penyiar Televisi',
+  penyiar_radio: 'Penyiar Radio',
+  pelaut: 'Pelaut',
+  sopir: 'Sopir',
+  pialang: 'Pialang',
+  paranormal: 'Paranormal',
+  pedagang: 'Pedagang',
+  perangkat_desa: 'Perangkat Desa',
+  kepala_desa: 'Kepala Desa',
+  biarawati: 'Biarawati',
+  wiraswasta: 'Wiraswasta',
+  lainnya: 'Lainnya',
+}
+
+export const personContactTypes: Record<string, string> = {
+  phone: 'Telepon',
+  'm-phone': 'HP / Ponsel',
+  email: 'Email',
+  fax: 'Fax',
+}
+
+// Mapping dari UI values ke contact type constants
+export const contactTypeMapping: Record<string, string> = {
+  phoneNumber: 'm-phone',
+  officePhoneNumber: 'phone',
+  homePhoneNumber: 'phone',
+  email: 'email',
+  fax: 'fax',
+}
+
+export const dayCodes: Record<string, string> = {
+  '0': 'Minggu',
+  '1': '',
+  '2': '',
+  '3': '',
+  '4': '',
+  '5': '',
+  '6': 'Sabtu',
+}
+
+export const paymentMethodCodes: Record<string, string> = {
+  cash: 'Cash',
+  debit: 'Debit',
+  credit: 'Kredit',
+  insurance: 'Asuransi',
+  membership: 'Membership',
+}
+
+export const transportationCodes: Record<string, string> = {
+  ambulance: 'Ambulans',
+  car: 'Mobil',
+  'motor-cycle': 'Motor',
+  other: 'Lainnya',
+}
+
+export const personConditionCodes: Record<string, string> = {
+  res: 'Resutiasi',
+  emg: 'Darurat',
+  urg: 'Mendesak',
+  lurg: 'Kurang Mendesak',
+  nurg: 'Mendesak',
+  doa: 'Meninggal Saat Tiba',
+}
+
+export const emergencyClassCodes: Record<string, string> = {
+  emg: 'Darurat',
+  eon: 'Ponek',
+}
+
+export const outpatientClassCodes: Record<string, string> = {
+  op: 'Rawat Inap',
+  icu: 'ICU',
+  hcu: 'HCU',
+  vk: 'Kamar Bersalin',
+}
+
+export const checkupScopeCodes: Record<string, string> = {
+  lab: 'Laboratorium',
+  'mic-lab': 'Microbacterial Laboratorium',
+  'pa-lab': 'Patology Anatomy Laboratorium',
+  rad: 'Radiology',
+}
+
+export const employeePositionCodes: Record<string, string> = {
+  doctor: 'Dokter',
+  nurse: 'Perawat',
+  nutritionist: 'Ahli Gisi',
+  laborant: 'Laboran',
+  pharmacy: 'Farmasi',
+  payment: 'Pembayaran',
+  'payment-verificator': 'Konfirmasi Pembayaran',
+  management: 'Management',
+}
+
+export const subjectCodes: Record<string, string> = {
+  'pri-compl': 'Primary Complaint',
+  'sec-compl': 'Secondary Complaint',
+  'cur-disea-hist': 'Current Disease History',
+  'pas-disea-hist': 'Past Disease History',
+  'fam-disea-hist': 'Family Disease History',
+  'alg-hist': 'Allergic Hist',
+  'alg-react': 'Allergic Reaction',
+  'med-hist': 'Medication Hist',
+}
+
+export const objectCodes: Record<string, string> = {
+  'consc-level': 'Tingkat Kesadaran',
+  'consc-level-det': 'Detail Tingkat Kesadaran',
+  'syst-bp': 'Tekanan Darah Systolic',
+  'diast-bp': 'Tekanan Darah Diastolic',
+  'hear-rt': 'Detak Jantung',
+  temp: 'Suhu',
+  spo2: 'SpO2',
+  weight: 'Berat Badan',
+  height: 'Tinggi Badan',
+}
+
+export const assessmentCodes: Record<string, string> = {
+  'early-diag': 'Diagnosis Awal',
+  'late-diag': 'Diagnosis Akhir',
+  'sec-diag': 'Diagnosis Sekunder',
+}
+
+export const instructionCodes: Record<string, string> = {
+  detail: 'Detail Instruksi',
+  'med-act': 'Tindakan medis',
+  medication: 'Obat',
+  material: 'BMHP',
+}
+
+export const relationshipCodes: Record<string, string> = {
+  mother: 'Ibu',
+  father: 'Ayah',
+  uncle: 'Paman',
+  aunt: 'Bibi',
+  sibling: 'Saudara',
+  'gd-mother': 'Nenek',
+  'gd-father': 'Kakek',
+  child: 'Anak',
+  nephew: 'Keponakan',
+  'gd-child': 'Cucu',
+  other: 'Lainnya',
+}
+
+export const uploadCode: Record<string, string> = {
+  ktp: 'person-resident-number',
+  sim: 'person-driving-license',
+  kk: 'person-family-card',
+  paspor: 'person-passport',
+  'mcu-report': 'mcu-item-result',
+} as const
+
+export type UploadCodeKey = keyof typeof uploadCode
+export type UploadCodeValue = (typeof uploadCode)[UploadCodeKey]
+
+export const infraGroupCodes: Record<string, string> = {
+  building: 'Bangunan',
+  floor: 'Lantai',
+  warehouse: 'Gudang / Depo',
+  room: 'Ruang',
+  chamber: 'Kamar',
+  bed: 'Ranjang',
+  counter: 'Counter',
+  'public-screen': 'Public Screen',
+}
+
+export const infraGroupCodesKeys: Record<string, string> = Object.keys(infraGroupCodes).reduce(
+  (acc, key) => {
+    acc[key] = key
+    return acc
+  },
+  {} as Record<string, string>,
+)
+
+export const addressLocationTypeCode: Record<string, string> = {
+  identity: 'Alamat KTP',
+  domicile: 'Alamat Domisili',
+}
+
+export type AddressLocationTypeCode = keyof typeof addressLocationTypeCode
+export const medicalActionTypeCode: Record<string, string> = {
+  chemo: 'Chemo',
+  hemo: 'Hemo',
+  thalasemia: 'Thalasemia',
+  echocardio: 'Echocardiography',
+  spirometry: 'Spirometry',
+} as const
+
+export type medicalActionTypeCodeKey = keyof typeof medicalActionTypeCode
diff --git a/app/lib/date.ts b/app/lib/date.ts
new file mode 100644
index 00000000..502a6cfb
--- /dev/null
+++ b/app/lib/date.ts
@@ -0,0 +1,44 @@
+export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
+	const birthDate = new Date(dateString);
+	const today = new Date();
+
+	if (comparedDate) {
+		const comparedDateObj = new Date(comparedDate);
+		today.setFullYear(comparedDateObj.getFullYear());
+		today.setMonth(comparedDateObj.getMonth());
+		today.setDate(comparedDateObj.getDate());
+	}
+
+	// Format the date part
+	const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
+	const idFormat = birthDate.toLocaleDateString('id-ID', options);
+
+	// Calculate age
+	let years = today.getFullYear() - birthDate.getFullYear();
+	let months = today.getMonth() - birthDate.getMonth();
+	let days = today.getDate() - birthDate.getDate();
+
+	if (months < 0 || (months === 0 && days < 0)) {
+		years--;
+		months += 12;
+	}
+
+	if (days < 0) {
+		const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
+		days += prevMonth.getDate();
+		months--;
+	}
+
+	// Format the age part
+	let extFormat = '';
+	if ([years, months, days].filter(Boolean).join(' ')) {
+		extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
+	} else {
+		extFormat = '0';
+	}
+
+	return {
+		idFormat,
+		extFormat
+	};
+}
\ No newline at end of file
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
new file mode 100644
index 00000000..c527a8cc
--- /dev/null
+++ b/app/lib/page-permission.ts
@@ -0,0 +1,44 @@
+import type { RoleAccess } from '~/models/role'
+
+export const PAGE_PERMISSIONS = {
+  '/patient': {
+    doctor: ['R'],
+    nurse: ['R'],
+    admisi: ['C', 'R', 'U', 'D'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
+  '/doctor': {
+    doctor: ['C', 'R', 'U', 'D'],
+    nurse: ['R'],
+    admisi: ['R'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
+  '/satusehat': {
+    doctor: ['R'],
+    nurse: ['R'],
+    admisi: ['C', 'R', 'U', 'D'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
+  '/rehab/encounter': {
+    doctor: ['C', 'R', 'U', 'D'],
+    nurse: ['R'],
+    admisi: ['R'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
+  '/rehab/registration': {
+    doctor: ['C', 'R', 'U', 'D'],
+    nurse: ['R'],
+    admisi: ['R'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
+} as const satisfies Record<string, RoleAccess>
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
new file mode 100644
index 00000000..357d8700
--- /dev/null
+++ b/app/lib/utils.ts
@@ -0,0 +1,106 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export interface SelectOptionType<_T = string> {
+  value: string
+  label: string
+  code?: string
+}
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function mapToComboboxOptList(items: Record<string, string>): SelectOptionType<string>[] {
+  if (!items) {
+    return []
+  }
+  const result: SelectOptionType<string>[] = []
+  Object.keys(items).forEach((item) => {
+    result.push({
+      label: items[item] as string,
+      value: item,
+      code: item,
+    })
+  })
+  return result
+}
+
+/**
+ * Mengkonversi string menjadi title case (huruf pertama setiap kata kapital)
+ * @param str - String yang akan dikonversi
+ * @returns String dalam format title case
+ */
+export function toTitleCase(str: string): string {
+  return str.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
+
+/**
+ * Menghitung umur berdasarkan tanggal lahir
+ * @param birthDate - Tanggal lahir dalam format Date atau string
+ * @returns String umur dalam format "X tahun Y bulan" atau "X bulan" untuk bayi
+ */
+export function calculateAge(birthDate: Date | string | null | undefined): string {
+  if (!birthDate) {
+    return '-'
+  }
+
+  let birth: Date
+
+  // Konversi ke Date object
+  if (typeof birthDate === 'string') {
+    birth = new Date(birthDate)
+  } else {
+    birth = birthDate
+  }
+
+  // Validasi tanggal
+  if (isNaN(birth.getTime())) {
+    return '-'
+  }
+
+  const today = new Date()
+  const birthYear = birth.getFullYear()
+  const birthMonth = birth.getMonth()
+  const birthDay = birth.getDate()
+
+  const currentYear = today.getFullYear()
+  const currentMonth = today.getMonth()
+  const currentDay = today.getDate()
+
+  // Hitung tahun
+  let years = currentYear - birthYear
+  let months = currentMonth - birthMonth
+
+  // Adjust jika bulan atau hari belum lewat
+  if (months < 0 || (months === 0 && currentDay < birthDay)) {
+    years--
+    months += 12
+  }
+
+  if (currentDay < birthDay) {
+    months--
+  }
+
+  // Pastikan months tidak negatif
+  if (months < 0) {
+    months += 12
+  }
+
+  // Format output
+  if (years === 0) {
+    if (months === 0) {
+      // Hitung hari untuk bayi baru lahir
+      const diffTime = today.getTime() - birth.getTime()
+      const days = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+      return days <= 30 ? `${days} hari` : '1 bulan'
+    }
+    return `${months} bulan`
+  } else if (months === 0) {
+    return `${years} tahun`
+  } else {
+    return `${years} tahun ${months} bulan`
+  }
+}
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
new file mode 100644
index 00000000..e985520e
--- /dev/null
+++ b/app/middleware/auth.global.ts
@@ -0,0 +1,11 @@
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.meta.public) return
+
+  const { $pinia } = useNuxtApp()
+  if (import.meta.client) {
+    const userStore = useUserStore($pinia)
+    if (!userStore.isAuthenticated) {
+      return navigateTo('/auth/login')
+    }
+  }
+})
diff --git a/app/middleware/rbac.ts b/app/middleware/rbac.ts
new file mode 100644
index 00000000..87e8ca00
--- /dev/null
+++ b/app/middleware/rbac.ts
@@ -0,0 +1,32 @@
+import type { Pinia } from 'pinia'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.meta.public) return
+
+  const { $pinia } = useNuxtApp()
+  if (import.meta.server) {
+    const authStore = useUserStore($pinia as Pinia)
+    // Check specific page permissions if defined in config
+    const pagePermissions = PAGE_PERMISSIONS[to.path as keyof typeof PAGE_PERMISSIONS]
+    if (pagePermissions) {
+      const { checkRole } = useRBAC()
+      if (!checkRole(pagePermissions)) {
+        return navigateTo('/403')
+      }
+    }
+
+    // Fallback to meta roles
+    const requiredRoles = to.meta.roles as string[]
+    if (requiredRoles && requiredRoles.length > 0) {
+      // FIXME: change this dummy roles, when api is ready
+      const userRoles = authStore.userRole
+      // const userRoles = ['admisi']
+      const hasRequiredRole = requiredRoles.some((role) => userRoles.includes(role))
+
+      if (!hasRequiredRole) {
+        return navigateTo('/403')
+      }
+    }
+  }
+})
diff --git a/app/models/_ai_prompt.txt b/app/models/_ai_prompt.txt
new file mode 100644
index 00000000..61076e96
--- /dev/null
+++ b/app/models/_ai_prompt.txt
@@ -0,0 +1,30 @@
+Based on the following information:
+Template
+	code	varchar	10	notnull
+	name	varchar	10
+	Original_SrcCode_Id	int		notnull
+	dateTime	datetime		notnull
+	date	date
+
+I created the following typescript:
+import { type Base, genBase } from "./_base"
+
+export interface Template extends Base {
+  code: string
+  name?: string
+  original_srcCode_id: number
+  dateTime: string
+  date?: string
+}
+
+export function genTemplate(): Template {
+  return {
+    ...genBase(),
+    code: '',
+    original_srcCode_id: 0,
+    dateTime: '',
+  }
+}
+
+With similar method, create typescript based on the following information:
+[copy from excel]
\ No newline at end of file
diff --git a/app/models/_base.ts b/app/models/_base.ts
new file mode 100644
index 00000000..6aaa99fc
--- /dev/null
+++ b/app/models/_base.ts
@@ -0,0 +1,49 @@
+
+export interface Base {
+  id: number
+  createdAt: string | null
+  updatedAt: string | null
+  deletedAt?: string | null
+}
+
+export interface CodeName {
+  name: string
+  code: string
+}
+
+export interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
+
+export function genBase(): Base {
+  return {
+    id: 0,
+    createdAt: '',
+    updatedAt: '',
+  }
+}
+
+export type WithBase<T extends Base> = Omit<T, keyof Base> & Required<Base>
+
+/**
+ * The function `withBase` sets default values for item properties if not provided.
+ * @param item - The `withBase` function takes in an optional parameter `item`, which is a
+ * partial object of type `T`. The function merges the properties of `item` with default values for
+ * `id`, `createdAt`, `updatedAt`, and `deletedAt`. The function then returns an object of type
+ * @returns The `withBase` function returns an object with default values for the properties
+ * `id`, `createdAt`, `updatedAt`, and `deletedAt`, along with any additional properties provided in
+ * the `item` parameter. The returned object has a type `WithBase<T>`, which extends `T` and
+ * includes the default properties.
+ */
+export function withBase<T extends Base>(item: Partial<T> = {}): WithBase<T> {
+  return {
+    id: 0,
+    createdAt: null,
+    updatedAt: null,
+    deletedAt: null,
+    ...item,
+  } as WithBase<T>
+}
diff --git a/app/models/_model.ts b/app/models/_model.ts
new file mode 100644
index 00000000..b5f09a71
--- /dev/null
+++ b/app/models/_model.ts
@@ -0,0 +1,20 @@
+// Default item meta model for entities
+export interface ItemMeta {
+  id: number
+  createdAt: string | null
+  deletedAt: string | null
+  updatedAt: string | null
+}
+
+// Pagination meta model for API responses
+export interface PaginationMeta {
+  page_number: string
+  page_size: string
+  record_totalCount: string
+  source: string
+}
+
+export interface Base {
+  name: string
+  code: string
+}
diff --git a/app/models/adime.ts b/app/models/adime.ts
new file mode 100644
index 00000000..a7e7a9f9
--- /dev/null
+++ b/app/models/adime.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface Adime extends Base {
+  encounter_id: number
+  employee_id: number
+  time?: string
+  value: unknown
+}
+
+export function genAdime(): Adime {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    employee_id: 0,
+    value: ''
+  }
+}
+
diff --git a/app/models/ambulatory.ts b/app/models/ambulatory.ts
new file mode 100644
index 00000000..8ad38f60
--- /dev/null
+++ b/app/models/ambulatory.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Ambulatory extends Base {
+  encounter_id: number
+  class_code: string
+}
+
+export function genAmbulatory(): Ambulatory {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    class_code: '',
+  }
+}
diff --git a/app/models/appointment.ts b/app/models/appointment.ts
new file mode 100644
index 00000000..da8f4f2e
--- /dev/null
+++ b/app/models/appointment.ts
@@ -0,0 +1,24 @@
+import { type Base, genBase } from "./_base"
+
+export interface Appointment extends Base {
+  practiceSchedule_id: number
+  patient_id: number
+  person_residentIdentitynumber: string
+  person_name: string
+  person_phoneNumber: string
+  paymentMethod_code: string
+  refNumber: string
+}
+
+export function genAppointment(): Appointment {
+  return {
+    ...genBase(),
+    practiceSchedule_id: 0,
+    patient_id:  0,
+    person_residentIdentitynumber: '',
+    person_name: '',
+    person_phoneNumber: '',
+    paymentMethod_code: '',
+    refNumber: '',
+  }
+}
diff --git a/app/models/chemo.ts b/app/models/chemo.ts
new file mode 100644
index 00000000..4398ede0
--- /dev/null
+++ b/app/models/chemo.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from "./_base"
+
+export interface Chemo extends Base {
+  encounter_id: number
+  status_code: string
+  verified_at: string
+  verified_by_user_id: number
+  src_unit_id: number
+}
+
+export function genChemo(): Chemo {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    status_code: '',
+    verified_at: '',
+    verified_by_user_id: 0,
+    src_unit_id: 0,
+  }
+}
diff --git a/app/models/consultation.ts b/app/models/consultation.ts
new file mode 100644
index 00000000..09d050a8
--- /dev/null
+++ b/app/models/consultation.ts
@@ -0,0 +1,47 @@
+export interface Consultation {
+  id: number
+  encounter_id: number
+  date?: string
+  unit_id: number
+  doctor_id?: number
+  problem: string
+  solution?: string
+  repliedAt?: string
+}
+
+export interface CreateDto {
+  encounter_id: number
+  date: string
+  problem: string
+  dstUnit_id: number
+}
+
+export interface UpdateDto {
+  id: number
+  problem: string
+  unit_id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function genCreateDto(): CreateDto {
+  return {
+    encounter_id: 0,
+    problem: '',
+    unit_id: 0,
+  }
+}
+
+export function genConsultation(): Consultation {
+  return {
+    id: 0,
+    encounter_id: 0,
+    unit_id: 0,
+    doctor_id: 0,
+    problem: '',
+    solution: '',
+    repliedAt: '',
+  }
+}
diff --git a/app/models/death-cause.ts b/app/models/death-cause.ts
new file mode 100644
index 00000000..0f04609a
--- /dev/null
+++ b/app/models/death-cause.ts
@@ -0,0 +1,6 @@
+export interface DeathCause {
+  id: bigint;
+  encounter_id: bigint;
+  value: any; // json mapped to 'any' type
+}
+  
\ No newline at end of file
diff --git a/app/models/device-order-item.ts b/app/models/device-order-item.ts
new file mode 100644
index 00000000..fa16638a
--- /dev/null
+++ b/app/models/device-order-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface DeviceOrderItem extends Base {
+  deviceOrder_id: number
+  device_id: number
+  count: number
+}
+
+export function genDeviceOrderItem(): DeviceOrderItem {
+  return {
+    ...genBase(),
+    deviceOrder_id: 0,
+    device_id: 0,
+    count: 0,
+  }
+}
diff --git a/app/models/device-order.ts b/app/models/device-order.ts
new file mode 100644
index 00000000..884340c5
--- /dev/null
+++ b/app/models/device-order.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface DeviceOrder extends Base {
+  encounter_id: number
+  doctor_id: number
+  status_code?: string
+}
+
+export function genDeviceOrder(): DeviceOrder {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    doctor_id: 0,
+  }
+}
diff --git a/app/models/device.ts b/app/models/device.ts
new file mode 100644
index 00000000..08af6ab3
--- /dev/null
+++ b/app/models/device.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Device extends Base {
+  code: string
+  name: string
+  uom_code: string
+}
+
+export function genDevice(): Device {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    uom_code: '',
+  }
+}
diff --git a/app/models/diagnose-src.ts b/app/models/diagnose-src.ts
new file mode 100644
index 00000000..5d25a54a
--- /dev/null
+++ b/app/models/diagnose-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface DiagnoseSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genDiagnoseSrc(): DiagnoseSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}
diff --git a/app/models/district.ts b/app/models/district.ts
new file mode 100644
index 00000000..611f4435
--- /dev/null
+++ b/app/models/district.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+import type { Regency } from './regency'
+
+export interface District extends Base {
+  regency_code: string
+  code: string
+  name: string
+
+  // preload
+  regency?: Regency | null
+}
+
+export function genDistrict(): District {
+  return {
+    ...genBase(),
+    regency_code: '',
+    name: '',
+    code: '',
+  }
+}
diff --git a/app/models/division-position.ts b/app/models/division-position.ts
new file mode 100644
index 00000000..3bd5e63a
--- /dev/null
+++ b/app/models/division-position.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+
+export interface DivisionPosition extends Base {
+  code: string
+  name: string
+  headStatus?: boolean
+  division_id: number
+  employee_id?: number
+}
+
+export function genDivisionPosition(): DivisionPosition {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    headStatus: false,
+    division_id: 0,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/division.ts b/app/models/division.ts
new file mode 100644
index 00000000..0f6d9185
--- /dev/null
+++ b/app/models/division.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface Division extends Base {
+  code: string
+  name: string
+  parent_id?: number | null
+  childrens?: Division[] | null
+}
+
+export function genDivision(): Division {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    parent_id: null,
+    childrens: null,
+  }
+}
diff --git a/app/models/doctor-fee.ts b/app/models/doctor-fee.ts
new file mode 100644
index 00000000..23ae9d18
--- /dev/null
+++ b/app/models/doctor-fee.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface DoctorFee extends Base {
+  doctor_id: number
+  feeType_code: string
+  price: number
+  item_id: number
+}
+
+export function genDoctorFee(): DoctorFee {
+  return {
+    ...genBase(),
+    doctor_id: 0,
+    feeType_code: '',
+    price:  0,
+    item_id:  0,
+    }
+}
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
new file mode 100644
index 00000000..3f517476
--- /dev/null
+++ b/app/models/doctor.ts
@@ -0,0 +1,57 @@
+import { type Base, genBase } from "./_base"
+import { type Employee, genEmployee } from "./employee"
+import type { Specialist } from "./specialist"
+import type { Subspecialist } from "./subspecialist"
+
+export interface Doctor extends Base {
+  employee_id: number
+  employee: Employee
+  ihs_number: string
+  sip_number: string
+  unit_id?: number
+  specialist_id?: number
+  specialist?: Specialist
+  subspecialist_id?: number
+  subspecialist?: Subspecialist
+  bpjs_code?: string
+}
+
+// use one dto for both create and update
+export interface CreateDto {
+  employee_id: number
+  ihs_number: string
+  sip_number: string
+  unit_id?: number
+  specialist_id?: number
+  subspecialist_id?: number
+  bpjs_code: string
+}
+
+export interface GetListDto {
+  name?: string
+  identity_number?: string
+  sip_no?: string
+  ihs_number?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genDoctor(): Doctor {
+  return {
+    ...genBase(),
+    employee_id: 0,
+    employee: genEmployee(),
+    ihs_number: '',
+    sip_number: '',
+  }
+}
diff --git a/app/models/emergency.ts b/app/models/emergency.ts
new file mode 100644
index 00000000..ffbee650
--- /dev/null
+++ b/app/models/emergency.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface Emergency extends Base {
+  encounter_id: number
+  class_code: string
+
+}
+
+export function genEmergency(): Emergency {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    class_code: '',
+  }
+}
diff --git a/app/models/employee.ts b/app/models/employee.ts
new file mode 100644
index 00000000..534dec81
--- /dev/null
+++ b/app/models/employee.ts
@@ -0,0 +1,46 @@
+import { type Base, genBase } from "./_base"
+import { type Person, genPerson } from "./person"
+
+export interface Employee extends Base {
+  user_id: number
+  person_id: number
+  person: Person
+  position_code: string
+  division_code?: string
+  number?: string
+  status_code: string
+}
+
+export interface CreateDto extends Employee {
+  user_id: number
+  person_id: number
+  position_code: string
+  division_code: string
+  number: string
+  status_code: string
+}
+
+export interface GetListDto {
+  position_code?: string
+  division_code?: string
+  number?: string
+}
+
+export interface UpdateDto extends Employee {
+  id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function genEmployee(): Employee {
+  return {
+    ...genBase(),
+    user_id: 0,
+    person_id: 0,
+    person: genPerson(),
+    position_code: '',
+    status_code: '',
+  }
+}
diff --git a/app/models/encounter-payment.ts b/app/models/encounter-payment.ts
new file mode 100644
index 00000000..395547f3
--- /dev/null
+++ b/app/models/encounter-payment.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface EncounterPayment extends Base {
+  encounter_id: number
+  paymentMethod_code: string
+  insuranceCompany_id?: number
+  member_number?: string
+  ref_number?: string
+  trx_number?: string
+}
+
+export function genEncounterPayment(): EncounterPayment {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    paymentMethod_code: '',
+  }
+}
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
new file mode 100644
index 00000000..fb2c0b04
--- /dev/null
+++ b/app/models/encounter.ts
@@ -0,0 +1,64 @@
+import type { DeathCause } from "./death-cause"
+import { type Doctor, genDoctor } from "./doctor"
+import { genEmployee, type Employee } from "./employee"
+import type { InternalReference } from "./internal-reference"
+import { type Patient, genPatient } from "./patient"
+import type { Specialist } from "./specialist"
+import type { Subspecialist } from "./subspecialist"
+import { genUnit, type Unit } from "./unit"
+
+export interface Encounter {
+    id: number
+    patient_id: number
+    patient: Patient
+    registeredAt: string
+    class_code: string
+    unit_id: number
+    unit: Unit
+    specialist_id?: number
+    specilist?: Specialist
+    subspecialist_id?: number
+    subspecialist?: Subspecialist
+    visitDate: string
+    adm_employee_id: number
+    adm_employee: Employee
+    appointment_doctor_id: number
+    appointment_doctor: Doctor
+    responsible_doctor_id?: number
+    responsible_doctor?: Doctor
+    refSource_name?: string
+    appointment_id?: number
+    earlyEducation?: string
+    medicalDischargeEducation: string
+    admDischargeEducation?: string
+    discharge_method_code?: string
+    discharge_reason?: string
+    discharge_date?: string
+    internalReferences?: InternalReference[]
+    deathCause?: DeathCause
+    status_code: string
+}
+
+export function genEncounter(): Encounter {
+    return {
+        id: 0,
+        patient_id: 0,
+        patient: genPatient(),
+        registeredAt: '',
+        class_code: '',
+        unit_id: 0,
+        unit: genUnit(),
+        visitDate: '',
+        adm_employee_id: 0,
+        adm_employee: genEmployee(),
+        appointment_doctor_id: 0,
+        appointment_doctor: genDoctor(),
+        medicalDischargeEducation: '',
+        status_code: ''
+    }
+}
+
+export interface EncounterCheckInDto {
+    responsible_doctor_id: number
+    responsibleArea_employee_id: number
+}
diff --git a/app/models/ethnic.ts b/app/models/ethnic.ts
new file mode 100644
index 00000000..e4c0a67d
--- /dev/null
+++ b/app/models/ethnic.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Ethnic extends Base {
+  code: string
+  name: string
+}
+
+export function genEthnic(): Ethnic {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/models/infra.ts b/app/models/infra.ts
new file mode 100644
index 00000000..80119748
--- /dev/null
+++ b/app/models/infra.ts
@@ -0,0 +1,10 @@
+export interface Infra {
+  id?: number
+  code: string
+  name: string
+  infraGroup_code: string
+  parent_id?: number | string | null
+  specialist_id?: number | string | null
+  subspecialist_id?: number | string | null
+  unit_id?: number | string | null
+}
diff --git a/app/models/inpatient.ts b/app/models/inpatient.ts
new file mode 100644
index 00000000..5643f983
--- /dev/null
+++ b/app/models/inpatient.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Template extends Base {
+  encounter_id: number
+  class_code: string
+  infra_id: number
+}
+
+export function genTemplate(): Template {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    class_code: '',
+    infra_id: 0,
+  }
+}
diff --git a/app/models/installation.ts b/app/models/installation.ts
new file mode 100644
index 00000000..e8d77c41
--- /dev/null
+++ b/app/models/installation.ts
@@ -0,0 +1,42 @@
+import { type Base, genBase } from "./_base"
+
+export interface Installation extends Base {
+  code: string
+  name: string
+  encounterClass_code?: string | null
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+  encounterClass_code?: string | null
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+  encounterClass_code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genInstallation(): Installation {
+  return {
+    ...genBase(),
+    name: 'name',
+    code: 'code',
+    encounterClass_code: null,
+  }
+}
diff --git a/app/models/insurance-company.ts b/app/models/insurance-company.ts
new file mode 100644
index 00000000..7c1fb3b2
--- /dev/null
+++ b/app/models/insurance-company.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from "./_base"
+
+export interface InsuranceCompany extends Base {
+  code: string
+  name: string
+  regency_code: string
+  address: string
+  phoneNumber: string
+}
+
+export function genInsuranceCompany(): InsuranceCompany {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    regency_code: '',
+    address: '',
+    phoneNumber: '',
+    }
+}
diff --git a/app/models/internal-reference.ts b/app/models/internal-reference.ts
new file mode 100644
index 00000000..8af315a8
--- /dev/null
+++ b/app/models/internal-reference.ts
@@ -0,0 +1,12 @@
+export interface InternalReference {
+  id: number;
+  encounter_id: number;
+  unit_id: number;     // smallint mapped to number
+  doctor_id: number;   // int mapped to number
+}
+
+export interface CreateDto {
+  encounter_id: number;
+  unit_id: number;     // smallint mapped to number
+  doctor_id: number;   // int mapped to number
+}
\ No newline at end of file
diff --git a/app/models/item-price.ts b/app/models/item-price.ts
new file mode 100644
index 00000000..b287e99f
--- /dev/null
+++ b/app/models/item-price.ts
@@ -0,0 +1,41 @@
+import { type Base, genBase } from "./_base"
+
+export interface ItemPrice extends Base {
+  item_id: number
+  price: number
+  insuranceCompany_code: string
+}
+
+export interface CreateDto {
+  item_id: number
+  price: number
+  insuranceCompany_code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genItemPrice(): ItemPrice {
+  return {
+    ...genBase(),
+    item_id: 1,
+    price: 1,
+    insuranceCompany_code: 'test',
+  }
+}
diff --git a/app/models/item.ts b/app/models/item.ts
new file mode 100644
index 00000000..acf0494c
--- /dev/null
+++ b/app/models/item.ts
@@ -0,0 +1,50 @@
+import { type Base, genBase } from "./_base"
+
+export interface Item extends Base {
+  name: string
+  code: string
+  itemGroup_code: string
+  uom_code: string
+  infra_id: number
+  stock: number
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+  itemGroup_code: string
+  uom_code: string
+  infra_id: number
+  stock: number
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id: number
+}
+
+export interface UpdateDto extends CreateDto {
+  id: number
+}
+
+export interface DeleteDto {
+  id: string
+}
+
+export function genItem(): Item {
+  return {
+    ...genBase(),
+    name: '',
+    code: '',
+    itemGroup_code: '',
+    uom_code: '',
+    infra_id: 1,
+    stock: 1,
+  }
+}
diff --git a/app/models/laborant.ts b/app/models/laborant.ts
new file mode 100644
index 00000000..f3bc891b
--- /dev/null
+++ b/app/models/laborant.ts
@@ -0,0 +1,13 @@
+import { type Base, genBase } from "./_base"
+
+export interface laborant extends Base {
+  employee_id: number
+  ihs_number?: string
+}
+
+export function genlaborant(): laborant {
+  return {
+    ...genBase(),
+    employee_id: 0,
+  }
+}
diff --git a/app/models/language.ts b/app/models/language.ts
new file mode 100644
index 00000000..83958e5f
--- /dev/null
+++ b/app/models/language.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Language extends Base {
+  code: string
+  name: string
+}
+
+export function genMcuSrc(): Language {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/models/material-order-item.ts b/app/models/material-order-item.ts
new file mode 100644
index 00000000..823584a0
--- /dev/null
+++ b/app/models/material-order-item.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface MaterialOrderItem extends Base {
+  materialOrder_id: number
+  material_id: number
+  count?: number
+}
+
+export function genMaterialOrderItem(): MaterialOrderItem {
+  return {
+    ...genBase(),
+    materialOrder_id: 0,
+    material_id: 0,
+  }
+}
diff --git a/app/models/material-order.ts b/app/models/material-order.ts
new file mode 100644
index 00000000..c7f1ab7d
--- /dev/null
+++ b/app/models/material-order.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface MaterialOrder extends Base {
+  encounter_id: number
+  doctor_id: number
+  status_code?: string
+}
+
+export function genMaterialOrder(): MaterialOrder {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    doctor_id: 0,
+  }
+}
diff --git a/app/models/material.ts b/app/models/material.ts
new file mode 100644
index 00000000..c381a21f
--- /dev/null
+++ b/app/models/material.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface Material extends Base {
+  code: string
+  name: string
+  uom_code: string
+  stock: number
+}
+
+export function genMaterial(): Material {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    uom_code: '',
+    stock: 0,
+  }
+}
diff --git a/app/models/mcu-order-item.ts b/app/models/mcu-order-item.ts
new file mode 100644
index 00000000..67038edf
--- /dev/null
+++ b/app/models/mcu-order-item.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuOrderItem extends Base {
+  mcuOrder_id: number
+  mcuSrc_id: number
+  examinationDate?: string
+  result?: string
+  status_code?: string
+}
+
+export function genMcuOrderItem(): McuOrderItem {
+  return {
+    ...genBase(),
+    mcuOrder_id: 0,
+    mcuSrc_id: 0,
+  }
+}
diff --git a/app/models/mcu-order-sub-item.ts b/app/models/mcu-order-sub-item.ts
new file mode 100644
index 00000000..271ed424
--- /dev/null
+++ b/app/models/mcu-order-sub-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuOrderSubItem extends Base {
+  mcuSubSrc_id: number
+  mcuOrderItem_id: number
+  result?: string
+  status_code?: string
+}
+
+export function genMcuOrderSubItem(): McuOrderSubItem {
+  return {
+    ...genBase(),
+    mcuSubSrc_id: 0,
+    mcuOrderItem_id: 0,
+  }
+}
diff --git a/app/models/mcu-order.ts b/app/models/mcu-order.ts
new file mode 100644
index 00000000..e3899aab
--- /dev/null
+++ b/app/models/mcu-order.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuOrder extends Base {
+  encounter_id: number
+  doctor_id: number
+  status_code?: string
+  specimenPickTime: string
+  examinationDate: string
+  number?: number
+  temperature?: number
+  mcuUrgencyLevel_code?: string
+}
+
+export function genMcuOrder(): McuOrder {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    doctor_id: 0,
+    specimenPickTime: '',
+    examinationDate: ''
+  }
+}
+
diff --git a/app/models/mcu-src-category.ts b/app/models/mcu-src-category.ts
new file mode 100644
index 00000000..6fdf94db
--- /dev/null
+++ b/app/models/mcu-src-category.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuSrcCategory extends Base {
+  code: string
+  name: string
+  scope_code: string
+}
+
+export function genMcuSrcCategory(): McuSrcCategory {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    scope_code: '',
+  }
+}
diff --git a/app/models/mcu-src.ts b/app/models/mcu-src.ts
new file mode 100644
index 00000000..ff331efa
--- /dev/null
+++ b/app/models/mcu-src.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuSrc extends Base {
+  code: string
+  name: string
+  mcuSrcCategory_code: string
+  item_id: number
+}
+
+export function genMcuSrc(): McuSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    mcuSrcCategory_code: '',
+    item_id: 0
+  }
+}
diff --git a/app/models/mcu-sub-src.ts b/app/models/mcu-sub-src.ts
new file mode 100644
index 00000000..1b67d4cb
--- /dev/null
+++ b/app/models/mcu-sub-src.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from "./_base"
+
+export interface McuSubSrcCategory extends Base {
+  code: string
+  name: string
+  mcuSrc_id: number
+  item_id: number
+}
+
+export function genMcuSubSrcCategory(): McuSubSrcCategory {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    mcuSrc_id: 0,
+    item_id: 0
+  }
+}
diff --git a/app/models/medical-action-src-item.ts b/app/models/medical-action-src-item.ts
new file mode 100644
index 00000000..0f04657a
--- /dev/null
+++ b/app/models/medical-action-src-item.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface MedicalActionSrcItem extends Base {
+  medicalActionSrc_id: number
+  procedureSrc_id: number
+  item_id: number
+}
+
+export function genMedicalActionSrcItem(): MedicalActionSrcItem {
+  return {
+    ...genBase(),
+    medicalActionSrc_id: 0,
+    procedureSrc_id: 0,
+    item_id: 0,
+  }
+}
diff --git a/app/models/medical-action-src.ts b/app/models/medical-action-src.ts
new file mode 100644
index 00000000..21d36c84
--- /dev/null
+++ b/app/models/medical-action-src.ts
@@ -0,0 +1,19 @@
+import { type Base, genBase } from './_base'
+import type { medicalActionTypeCodeKey } from '~/lib/constants'
+
+export interface MedicalActionSrc extends Base {
+  code: string
+  name: string
+  type_code: medicalActionTypeCodeKey
+  item_id: number
+}
+
+export function genMedicalActionSrc(): MedicalActionSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    type_code: '',
+    item_id: 0,
+  }
+}
diff --git a/app/models/medication-item-dist.ts b/app/models/medication-item-dist.ts
new file mode 100644
index 00000000..4353703f
--- /dev/null
+++ b/app/models/medication-item-dist.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface MedicationItemDist extends Base {
+  medicationItem_id: number
+  nurse_id: number
+  dateTime: string
+  remain?: number
+}
+
+export function genMedicationItemDist(): MedicationItemDist {
+  return {
+    ...genBase(),
+    medicationItem_id: 0,
+    nurse_id: 0,
+    dateTime: '',
+  }
+}
diff --git a/app/models/medication-item.ts b/app/models/medication-item.ts
new file mode 100644
index 00000000..9f3f7cb2
--- /dev/null
+++ b/app/models/medication-item.ts
@@ -0,0 +1,28 @@
+import { type Base, genBase } from "./_base"
+
+export interface MedicationItem extends Base {
+  medication_id: number
+  isMix?: boolean
+  medicine_id?: number
+  medicineMix_id?: number
+  frequency: number
+  dose: number
+  interval: number
+  intervalUnit_code: string
+  usage?: string
+  intervalMultplier?: number
+  quantity?: number
+  isRedeemed?: boolean
+  note?: string
+}
+
+export function genMedicationItem(): MedicationItem {
+  return {
+    ...genBase(),
+    medication_id: 0,
+    frequency: 0,
+    dose: 0,
+    interval: 0,
+    intervalUnit_code: '',
+  }
+}
diff --git a/app/models/medication.ts b/app/models/medication.ts
new file mode 100644
index 00000000..abf878f1
--- /dev/null
+++ b/app/models/medication.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Medication extends Base {
+  encounter_id: number
+  pharmachist_id: number
+  issuedAt?: string
+  status_code?: string
+}
+
+export function genMedication(): Medication {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    pharmachist_id: 0,
+  }
+}
+
diff --git a/app/models/medicine-group.ts b/app/models/medicine-group.ts
new file mode 100644
index 00000000..6537f481
--- /dev/null
+++ b/app/models/medicine-group.ts
@@ -0,0 +1,38 @@
+import { type Base, genBase } from "./_base"
+
+export interface MedicineGroup extends Base {
+  name: string
+  code: string
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): MedicineGroup {
+  return {
+    ...genBase(),
+    name: 'name',
+    code: 'code',
+  }
+}
diff --git a/app/models/medicine-method.ts b/app/models/medicine-method.ts
new file mode 100644
index 00000000..7f65c189
--- /dev/null
+++ b/app/models/medicine-method.ts
@@ -0,0 +1,38 @@
+import { type Base, genBase } from "./_base"
+
+export interface MedicineMethod extends Base {
+  name: string
+  code: string
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): MedicineMethod {
+  return {
+    ...genBase(),
+    name: 'name',
+    code: 'code',
+  }
+}
diff --git a/app/models/medicine.ts b/app/models/medicine.ts
new file mode 100644
index 00000000..d3a04752
--- /dev/null
+++ b/app/models/medicine.ts
@@ -0,0 +1,65 @@
+import { type Base, genBase } from "./_base"
+
+export interface Medicine extends Base {
+  code: string
+  name: string
+  medicineGroup_code: string
+  medicineMethod_code: string
+  uom_code: string
+  infra_id?: string | null
+  stock: number
+}
+
+export interface CreateDto  {
+  code: string
+  name: string
+  medicineGroup_code: string
+  medicineMethod_code: string
+  uom_code: string
+  infra_id?: string | null
+  stock: number
+}
+
+export interface UpdateDto extends CreateDto {
+  id: number
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+  medicineGroup_code?: string
+  medicineMethod_code?: string
+  uom_code?: string
+  type?: string
+  dose?: string
+  infra_id?: string
+  stock?: string
+  status?: string
+}
+
+export interface GetDetailDto {
+  id: number
+}
+
+export interface UpdateDto extends CreateDto {
+  id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function genMedicine(): Medicine {
+  return {
+    ...genBase(),
+    name: 'name',
+    code: 'code',
+    medicineGroup_code: 'medicineGroup_code',
+    medicineMethod_code: 'medicineMethod_code',
+    uom_code: 'uom_code',
+    infra_id: null,
+    stock: 0
+  }
+}
diff --git a/app/models/medicinemix-item.ts b/app/models/medicinemix-item.ts
new file mode 100644
index 00000000..d2e1f973
--- /dev/null
+++ b/app/models/medicinemix-item.ts
@@ -0,0 +1,47 @@
+import { type Base, genBase } from "./_base"
+import { type Medicine, genMedicine } from "./medicine";
+
+interface MedicinemixItem extends Base {
+  id: number
+  medicineMix_id: number
+  medicine_id: number
+  medicine: Medicine
+  dose: number
+  uom_code: string
+}
+
+export interface CreateDto {
+  medicineMix_id: number
+  medicine_id: number
+  medicine: Medicine
+  dose: number
+  uom_code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+}
+
+export interface GetDetailDto {
+  id: number
+}
+
+export interface UpdateDto extends CreateDto {
+  id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function MedicinemixItem(): MedicinemixItem {
+  return {
+    ...genBase(),
+    medicineMix_id: 0,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    dose: 0,
+    uom_code: ''
+  }
+}
diff --git a/app/models/medicinemix.ts b/app/models/medicinemix.ts
new file mode 100644
index 00000000..d09c23d3
--- /dev/null
+++ b/app/models/medicinemix.ts
@@ -0,0 +1,37 @@
+import { type Base, genBase } from "./_base"
+
+export interface Medicinemix extends Base {
+  name: string
+  uom_code: string
+}
+
+export interface CreateDto {
+  name: string
+  uom_code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+}
+
+export interface GetDetailDto {
+  id: number
+}
+
+export interface UpdateDto extends CreateDto {
+  id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export function genMedicinemix(): Medicinemix {
+  return {
+    ...genBase(),
+    name: '',
+    uom_code: '',
+  }
+}
diff --git a/app/models/midwife.ts b/app/models/midwife.ts
new file mode 100644
index 00000000..65f76ea7
--- /dev/null
+++ b/app/models/midwife.ts
@@ -0,0 +1,13 @@
+import { type Base, genBase } from "./_base"
+
+export interface Midwife extends Base {
+  employee_id: number
+  ihs_number?: string
+}
+
+export function genMidwife(): Midwife {
+  return {
+    ...genBase(),
+    employee_id: 0,
+    }
+}
diff --git a/app/models/nurse.ts b/app/models/nurse.ts
new file mode 100644
index 00000000..d5e1f95f
--- /dev/null
+++ b/app/models/nurse.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Nurse extends Base {
+  employee_id: number
+  ihs_number?: string
+  unit_id: number
+  infra_id: number
+}
+
+export function genNurse(): Nurse {
+  return {
+    ...genBase(),
+    employee_id: 0,
+    unit_id: 0,
+    infra_id: 0,
+    }
+}
diff --git a/app/models/nutrition-exam.ts b/app/models/nutrition-exam.ts
new file mode 100644
index 00000000..b8191cec
--- /dev/null
+++ b/app/models/nutrition-exam.ts
@@ -0,0 +1,15 @@
+import { type Base, genBase } from "./_base"
+
+export interface NutritionExam extends Base {
+  encounter_id: number
+  nutritionist_id: number
+  status_code?: string
+}
+
+export function genNutritionExam(): NutritionExam {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    nutritionist_id: 0,
+  }
+}
diff --git a/app/models/nutritionist.ts b/app/models/nutritionist.ts
new file mode 100644
index 00000000..d5e1f95f
--- /dev/null
+++ b/app/models/nutritionist.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Nurse extends Base {
+  employee_id: number
+  ihs_number?: string
+  unit_id: number
+  infra_id: number
+}
+
+export function genNurse(): Nurse {
+  return {
+    ...genBase(),
+    employee_id: 0,
+    unit_id: 0,
+    infra_id: 0,
+    }
+}
diff --git a/app/models/patient-insurance.ts b/app/models/patient-insurance.ts
new file mode 100644
index 00000000..93706185
--- /dev/null
+++ b/app/models/patient-insurance.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface PatientInsurance extends Base {
+  patient_id: number
+  insuranceCompany_id: number
+  member_number: string
+}
+
+export function genPatientInsurance(): PatientInsurance {
+  return {
+    ...genBase(),
+    patient_id: 0,
+    insuranceCompany_id: 0,
+    member_number: ''
+  }
+}
diff --git a/app/models/patient.ts b/app/models/patient.ts
new file mode 100644
index 00000000..46e0f81d
--- /dev/null
+++ b/app/models/patient.ts
@@ -0,0 +1,181 @@
+import { type Base, genBase } from './_base'
+import type { PatientFormData } from '~/schemas/patient.schema'
+import type { PersonAddressFormData } from '~/schemas/person-address.schema'
+import type { PersonAddressRelativeFormData } from '~/schemas/person-address-relative.schema'
+import type { PersonFamiliesFormData } from '~/schemas/person-family.schema'
+import type { PersonContactFormData } from '~/schemas/person-contact.schema'
+import type { PersonRelativeFormData } from '~/schemas/person-relative.schema'
+
+import { genPerson, type Person } from './person'
+import type { PersonAddress } from './person-address'
+import type { PersonContact } from './person-contact'
+import type { PersonRelative } from './person-relative'
+
+import { contactTypeMapping } from '~/lib/constants'
+
+export interface PatientBase extends Base {
+  person_id?: number
+  newBornStatus?: boolean
+  registeredAt?: Date | string | null
+  status_code?: string
+  number?: string
+}
+
+export interface PatientEntity extends PatientBase {
+  person: Person
+  personAddresses: PersonAddress[]
+  personContacts: PersonContact[]
+  personRelatives: PersonRelative[]
+}
+
+export interface genPatientProps {
+  patient: PatientFormData
+  residentAddress: PersonAddressFormData
+  cardAddress: PersonAddressRelativeFormData
+  familyData: PersonFamiliesFormData
+  contacts: PersonContactFormData
+  responsible: PersonRelativeFormData
+}
+
+export function genPatientEntity(props: genPatientProps): PatientEntity {
+  const { patient, residentAddress, cardAddress, familyData, contacts, responsible } = props
+
+  const addresses: PersonAddress[] = [{ ...genBase(), person_id: 0, ...residentAddress }]
+  const familiesContact: PersonRelative[] = []
+  const personContacts: PersonContact[] = []
+
+  // jika alamat ktp sama dengan domisili saat ini
+  if (cardAddress.isSameAddress) {
+    addresses.push({
+      ...genBase(),
+      ...residentAddress,
+      person_id: 0,
+      locationType_code: cardAddress.locationType_code || 'identity'
+    })
+  } else {
+    // jika alamat berbeda, tambahkan alamat relatif
+    // Pastikan semua field yang diperlukan ada
+    const relativeAddress = {
+      ...genBase(),
+      person_id: 0,
+      locationType_code: cardAddress.locationType_code || 'identity',
+      address: cardAddress.address || '',
+      province_code: cardAddress.province_code || '',
+      regency_code: cardAddress.regency_code || '',
+      district_code: cardAddress.district_code || '',
+      village_code: cardAddress.village_code || '',
+      postalRegion_code: cardAddress.postalRegion_code || '',
+      rt: cardAddress.rt,
+      rw: cardAddress.rw,
+    }
+    addresses.push(relativeAddress)
+  }
+
+  // add data orang tua
+  if (familyData.shareFamilyData === '1') {
+    for (const family of familyData.families) {
+      familiesContact.push({
+        id: 0,
+        relationship_code: family.relation,
+        name: family.name,
+        education_code: family.education,
+        occupation_name: family.occupation,
+        occupation_code: family.occupation,
+        responsible: false,
+      })
+    }
+  }
+
+  // add kontak pasien
+  if (contacts && contacts.contacts.length > 0) {
+    for (const contact of contacts.contacts) {
+      // Convert UI contactType to backend type_code using mapping
+      const mappedContactType = contactTypeMapping[contact.contactType]
+
+      personContacts.push({
+        ...genBase(),
+        person_id: 0,
+        type_code: mappedContactType || '',
+        value: contact.contactNumber,
+      })
+    }
+  }
+
+  // add penanggung jawab
+  if (responsible) {
+    for (const contact of responsible.contacts) {
+      familiesContact.push({
+        id: 0,
+        relationship_code: contact.relation,
+        name: contact.name,
+        address: contact.address,
+        phoneNumber: contact.phone,
+        responsible: true,
+      })
+    }
+  }
+
+  return {
+    person: {
+      id: 0,
+      name: patient.fullName,
+      // alias: patient.alias,
+      birthDate: patient.birthDate,
+      birthRegency_code: patient.birthPlace,
+      gender_code: patient.gender,
+      residentIdentityNumber: patient.identityNumber,
+      passportNumber: patient.passportNumber,
+      drivingLicenseNumber: patient.drivingLicenseNumber,
+      religion_code: patient.religion,
+      education_code: patient.education,
+      occupation_code: patient.job,
+      occupation_name: patient.job,
+      ethnic_code: patient.ethnicity,
+      language_code: patient.language,
+      communicationIssueStatus: patient.communicationBarrier,
+      disability: patient.disabilityType || '',
+      nationality: patient.nationality,
+      // residentIdentityFileUrl: patient.residentIdentityFileUrl,
+      // passportFileUrl: patient.passportFileUrl,
+      // drivingLicenseFileUrl: patient.drivingLicenseFileUrl,
+      // familyIdentityFileUrl: patient.familyIdentityFileUrl,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      deletedAt: null,
+    },
+    personAddresses: addresses,
+    personContacts: personContacts,
+    personRelatives: familiesContact,
+    registeredAt: new Date(),
+    status_code: 'active',
+    newBornStatus: patient.isNewBorn,
+    person_id: 0,
+    id: 0,
+    number: '',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+  }
+}
+
+// New model
+export interface Patient extends Base {
+  person_id?: number
+  person: Person
+  newBornStatus?: boolean
+  registeredAt?: Date | string | null
+  status_code?: string
+  number?: string
+}
+
+export function genPatient(): Patient {
+  return {
+    ...genBase(),
+    person_id: 0,
+    registeredAt: '',
+    status_code: '',
+    number: '',
+    newBornStatus: false,
+    person: genPerson(),
+  }
+}
\ No newline at end of file
diff --git a/app/models/person-address.ts b/app/models/person-address.ts
new file mode 100644
index 00000000..c425bc3c
--- /dev/null
+++ b/app/models/person-address.ts
@@ -0,0 +1,47 @@
+import { type Base, genBase } from './_base'
+import type { AddressLocationTypeCode } from '~/lib/constants'
+import type { PostalRegion } from './postal-region'
+import { toTitleCase } from '~/lib/utils'
+export interface PersonAddress extends Base {
+  person_id: number
+  locationType_code: AddressLocationTypeCode
+  address: string
+  rt?: string
+  rw?: string
+  postalRegion_code?: string
+  village_code: string
+
+  // preload
+  postalRegion?: PostalRegion | null
+  locationType?: AddressLocationTypeCode
+}
+
+export function genPersonAddress(): PersonAddress {
+  return {
+    ...genBase(),
+    person_id: 0,
+    locationType_code: '',
+    address: '',
+    village_code: '',
+  }
+}
+
+export function formatAddress(builder?: PersonAddress) {
+  if (!builder) return ''
+
+  const village = builder?.postalRegion?.village
+  const district = village?.district
+  const regency = district?.regency
+  const province = regency?.province
+
+  const parts = [
+    builder?.address,
+    village?.name,
+    district?.name,
+    toTitleCase(regency?.name || ''),
+    toTitleCase(province?.name || ''),
+    builder?.postalRegion_code,
+  ].filter(Boolean)
+
+  return parts.join(', ')
+}
diff --git a/app/models/person-contact.ts b/app/models/person-contact.ts
new file mode 100644
index 00000000..09279880
--- /dev/null
+++ b/app/models/person-contact.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface PersonContact extends Base {
+  person_id: number
+  type_code: string
+  value: string
+}
+
+export function genPersonContact(): PersonContact {
+  return {
+    ...genBase(),
+    person_id: 0,
+    type_code: '',
+    value: '',
+  }
+}
diff --git a/app/models/person-relative.ts b/app/models/person-relative.ts
new file mode 100644
index 00000000..0391b63a
--- /dev/null
+++ b/app/models/person-relative.ts
@@ -0,0 +1,15 @@
+export interface PersonRelative {
+  id: number
+  person_id?: number
+  relationship_code?: string
+  name?: string
+  address?: string
+  village_code?: string
+  gender_code?: string
+  phoneNumber?: string
+  education_code?: string
+  occupation_name?: string
+  occupation_code?: string
+  responsible?: boolean
+}
+
diff --git a/app/models/person.ts b/app/models/person.ts
new file mode 100644
index 00000000..06b313b8
--- /dev/null
+++ b/app/models/person.ts
@@ -0,0 +1,48 @@
+import { type Base, genBase } from "./_base"
+import type { PersonAddress } from "./person-address"
+import type { PersonContact } from "./person-contact"
+import type { PersonRelative } from "./person-relative"
+import type { Ethnic } from './ethnic'
+import type { Language } from './language'
+import type { Regency } from './regency'
+
+export interface Person extends Base {
+  name: string
+  // alias?: string
+  frontTitle?: string
+  endTitle?: string
+  birthDate?: string
+  birthRegency_code?: string
+  gender_code?: string
+  residentIdentityNumber?: string
+  passportNumber?: string
+  drivingLicenseNumber?: string
+  religion_code?: string
+  education_code?: string
+  occupation_code?: string
+  occupation_name?: string
+  ethnic_code?: string
+  language_code?: string
+  nationality?: string
+  communicationIssueStatus?: boolean
+  disability?: string
+  residentIdentityFileUrl?: string
+  passportFileUrl?: string
+  drivingLicenseFileUrl?: string
+  familyIdentityFileUrl?: string
+
+  // preload data for detail patient
+  birthRegency?: Regency | null
+  addresses?: PersonAddress[] | null
+  contacts?: PersonContact[] | null
+  relatives?: PersonRelative[] | null
+  ethnic?: Ethnic | null
+  language?: Language | null
+}
+
+export function genPerson(): Person {
+  return {
+    ...genBase(),
+    name: '',
+  }
+}
diff --git a/app/models/pharmachist.ts b/app/models/pharmachist.ts
new file mode 100644
index 00000000..9829a51a
--- /dev/null
+++ b/app/models/pharmachist.ts
@@ -0,0 +1,13 @@
+import { type Base, genBase } from "./_base"
+
+export interface Pharmachist extends Base {
+  employee_id: number
+  ihs_number?: string
+}
+
+export function genPharmachist(): Pharmachist {
+  return {
+    ...genBase(),
+    employee_id: 0,
+  }
+}
diff --git a/app/models/postal-region.ts b/app/models/postal-region.ts
new file mode 100644
index 00000000..581d0bc7
--- /dev/null
+++ b/app/models/postal-region.ts
@@ -0,0 +1,18 @@
+import { type Base, genBase } from './_base'
+import type { Village } from './village'
+
+export interface PostalRegion extends Base {
+  code: string
+  village_code: string
+
+  // preload
+  village?: Village | null
+}
+
+export function genPostalRegion(): PostalRegion {
+  return {
+    ...genBase(),
+    code: '',
+    village_code: '',
+  }
+}
diff --git a/app/models/practice-schedule.ts b/app/models/practice-schedule.ts
new file mode 100644
index 00000000..6189f0a2
--- /dev/null
+++ b/app/models/practice-schedule.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from "./_base"
+import { type Doctor, genDoctor } from "./doctor"
+
+export interface PracticeSchedule extends Base {
+  doctor_id: number
+  doctor: Doctor
+  unit_code: number
+  day_code: number
+  starttime: string
+  endtime: string
+}
+
+export function genPracticeSchedule(): PracticeSchedule {
+  return {
+    ...genBase(),
+    doctor_id: 0,
+    doctor: genDoctor(),
+    unit_code: 0,
+    day_code: 0,
+    starttime: '',
+    endtime: '',
+  }
+}
diff --git a/app/models/prescription-item.ts b/app/models/prescription-item.ts
new file mode 100644
index 00000000..6f0d3716
--- /dev/null
+++ b/app/models/prescription-item.ts
@@ -0,0 +1,69 @@
+import { genMedicine, type Medicine } from "./medicine";
+import { genMedicinemix, type Medicinemix } from "./medicinemix";
+
+export interface PrescriptionItem {
+  id: number;
+  prescription_id: number;
+  isMix: boolean;
+  medicine_id: number;
+  medicine: Medicine;
+  medicineMix_id: number;
+  medicineMix: Medicinemix
+  frequency: number;
+  dose: number;
+  interval: number;
+  intervalUnit_code: string;
+  quantity: number;
+  usage: string;
+}
+
+export interface CreateDto {
+  prescription_Id: number;
+  isMix: boolean;
+  medicine_Id: number;
+  medicineMix_id: number;
+  frequency: number;
+  multiplier: number;
+  interval: number;
+  intervalUnit_code: string;
+  quantity: number;
+  usage: string;
+}
+ 
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+//   code?: string
+}
+ 
+export interface GetDetailDto {
+  id?: string
+}
+ 
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+ 
+export interface DeleteDto {
+  id?: string
+}
+ 
+export function genPresciptionItem(): PrescriptionItem {
+  return {
+    id: 0,
+    prescription_id: 0,
+    isMix: false,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    medicineMix_id: 0,
+    medicineMix: genMedicinemix(),
+    frequency: 0,
+    dose: 0,
+    interval: 0,
+    intervalUnit_code: '',
+    quantity: 0,
+    usage: ''
+  }
+}
+ 
\ No newline at end of file
diff --git a/app/models/prescription.ts b/app/models/prescription.ts
new file mode 100644
index 00000000..543724d2
--- /dev/null
+++ b/app/models/prescription.ts
@@ -0,0 +1,56 @@
+import { type Encounter, genEncounter } from "./encounter";
+import { type Doctor, genDoctor } from "./doctor";
+import { type PrescriptionItem } from "./prescription-item";
+import type { SpecialistIntern } from "./specialist-intern";
+
+export interface Prescription {
+  id: number
+  encounter_id: number
+  encounter: Encounter
+  doctor_id: number
+  doctor: Doctor
+  specialistIntern_id?: number
+  specialistIntern?: SpecialistIntern
+  issuedAt: string
+  status_code: string
+  items: PrescriptionItem[]
+}
+
+export interface CreateDto {
+  encounter_id: number
+  doctor_id: number
+  issuedAt: string
+  status_code: string
+}
+
+export interface GetListDto {
+  encounter_id: number
+  doctor_id: number
+  issuedAt: string
+  status_code: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genPresciption(): Prescription {
+  return {
+    id: 0,
+    encounter_id: 0,
+    encounter: genEncounter(),
+    doctor_id: 0,
+    doctor: genDoctor(),
+    issuedAt: '',
+    status_code: '',
+    items: [],
+  }
+}
diff --git a/app/models/procedure-src.ts b/app/models/procedure-src.ts
new file mode 100644
index 00000000..c86adcf9
--- /dev/null
+++ b/app/models/procedure-src.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from './_base'
+
+export interface ProcedureSrc extends Base {
+  code: string
+  name: string
+  indName: string
+}
+
+export function genProcedureSrc(): ProcedureSrc {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    indName: '',
+  }
+}
diff --git a/app/models/province.ts b/app/models/province.ts
new file mode 100644
index 00000000..a259cb57
--- /dev/null
+++ b/app/models/province.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface Province extends Base {
+  code: string
+  name: string
+}
+
+export function genProvince(): Province {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/models/queue.ts b/app/models/queue.ts
new file mode 100644
index 00000000..b9a76c51
--- /dev/null
+++ b/app/models/queue.ts
@@ -0,0 +1,22 @@
+import { type Base, genBase } from "./_base"
+
+export interface Queue extends Base {
+  appointment_id: number
+  counter_id: number
+  status_code: string
+  waitTimeStamp: number
+  startTimeStamp: number
+  endTimeStamp: number
+}
+
+export function genQueue(): Queue {
+  return {
+    ...genBase(),
+    appointment_id: 0,
+    counter_id: 0,
+    status_code: '',
+    waitTimeStamp: 0,
+    startTimeStamp: 0,
+    endTimeStamp: 0,
+  }
+}
diff --git a/app/models/regency.ts b/app/models/regency.ts
new file mode 100644
index 00000000..09418a52
--- /dev/null
+++ b/app/models/regency.ts
@@ -0,0 +1,19 @@
+import { type Base, genBase } from './_base'
+import type { Province } from './province'
+
+export interface Regency extends Base {
+  code: string
+  name: string
+  province_code: string
+
+  province?: Province | null
+}
+
+export function genRegency(): Regency {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    province_code: '',
+  }
+}
diff --git a/app/models/role.ts b/app/models/role.ts
new file mode 100644
index 00000000..6c6097a9
--- /dev/null
+++ b/app/models/role.ts
@@ -0,0 +1,22 @@
+import type { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+export interface User {
+  id: string
+  name: string
+  email: string
+}
+
+export interface AuthState {
+  user: User | null
+  roles: string[]
+  token: string | null
+}
+
+export type Permission = 'C' | 'R' | 'U' | 'D'
+
+export interface RoleAccess {
+  [role: string]: Permission[]
+}
+
+export type PagePath = keyof typeof PAGE_PERMISSIONS
+export type PagePermission = (typeof PAGE_PERMISSIONS)[PagePath]
diff --git a/app/models/sbar.ts b/app/models/sbar.ts
new file mode 100644
index 00000000..9c5ac38a
--- /dev/null
+++ b/app/models/sbar.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface Sbar extends Base {
+  encounter_id: number
+  employee_id: number
+  time?: string
+  value: unknown
+}
+
+export function genSbar(): Sbar {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    employee_id: 0,
+    value: '',
+  }
+}
diff --git a/app/models/soapi.ts b/app/models/soapi.ts
new file mode 100644
index 00000000..02b4dcd5
--- /dev/null
+++ b/app/models/soapi.ts
@@ -0,0 +1,190 @@
+import { type Base, genBase } from './_base'
+
+export interface Soapi extends Base {
+  encounter_id: number
+  employee_id: number
+  time?: string
+  typeCode?: string
+  value: unknown
+}
+
+export function genSoapi(): Soapi {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    employee_id: 0,
+    value: '',
+  }
+}
+
+export interface DiagnosisCode {
+  code: string
+  name: string
+}
+
+export interface AssessmentSection {
+  note: string
+  codes: DiagnosisCode[]
+}
+
+export interface Subject {
+  note: string
+  'prim-compl': string
+  'sec-compl': string
+  'pri-complain': string
+  'sec-complain': string
+  'cur-disea-hist': string
+  'pas-disea-hist': string
+  'fam-disea-hist': string
+  'alg-hist': string
+  'alg-react': string
+  'med-hist': string
+  'blood-type': string
+}
+
+export interface ObjectSection {
+  note: string
+  'consc-level': string
+  'consc-level-det': string
+  'syst-bp': string
+  'diast-bp': string
+  pulse: string
+  'resp-rate': string
+  'hear-rt': string
+  'neuro-cranialis': string
+  sensoris: string
+  'reflect-fisio': string
+  'reflect-pato': string
+  'autonom-neuron': string
+  'neck-rom': string
+  'body-rom': string
+  'aga-rom': string
+  'agb-rom': string
+  'neck-mmt': string
+  'body-mmt': string
+  'aga-mmt': string
+  'agb-mmt': string
+  localis: string
+  'medical-trouble': string
+  'rehab-medic-trouble': string
+  temp: string
+  spo2: string
+  weight: string
+  height: string
+  'head-to-toe': Record<string, string>
+}
+
+export interface Assessment {
+  'early-diag': AssessmentSection
+  'late-diag': AssessmentSection
+  'sec-diag': AssessmentSection
+}
+
+export interface InstructionCodeGroup {
+  note: string
+  codes: DiagnosisCode[]
+}
+
+export interface Instruction {
+  detail: string
+  'medical-act': InstructionCodeGroup
+  'supporting-exam': DiagnosisCode[]
+  therapy: string
+  medication: DiagnosisCode[]
+  material: DiagnosisCode[]
+  'rehab-program': string
+  'physic-modal': string
+  exercise: string
+  'ortes-protesa': string
+  education: string
+  other: string
+}
+
+export interface Soap extends Base {
+  subject: Subject
+  object: ObjectSection
+  assessment: Assessment
+  plan: string
+  instruction: Instruction
+}
+
+// ---- Generators ----
+
+function genDiagnosisCode(): DiagnosisCode {
+  return { code: '', name: '' }
+}
+
+function genAssessmentSection(): AssessmentSection {
+  return { note: '', codes: [genDiagnosisCode()] }
+}
+
+export function genSoap(): Soap {
+  return {
+    ...genBase(),
+    subject: {
+      note: '',
+      'prim-compl': '',
+      'sec-compl': '',
+      'pri-complain': '',
+      'sec-complain': '',
+      'cur-disea-hist': '',
+      'pas-disea-hist': '',
+      'fam-disea-hist': '',
+      'alg-hist': '',
+      'alg-react': '',
+      'med-hist': '',
+      'blood-type': '',
+    },
+    object: {
+      note: '',
+      'consc-level': '',
+      'consc-level-det': '',
+      'syst-bp': '',
+      'diast-bp': '',
+      pulse: '',
+      'resp-rate': '',
+      'hear-rt': '',
+      'neuro-cranialis': '',
+      sensoris: '',
+      'reflect-fisio': '',
+      'reflect-pato': '',
+      'autonom-neuron': '',
+      'neck-rom': '',
+      'body-rom': '',
+      'aga-rom': '',
+      'agb-rom': '',
+      'neck-mmt': '',
+      'body-mmt': '',
+      'aga-mmt': '',
+      'agb-mmt': '',
+      localis: '',
+      'medical-trouble': '',
+      'rehab-medic-trouble': '',
+      temp: '',
+      spo2: '',
+      weight: '',
+      height: '',
+      'head-to-toe': {},
+    },
+    assessment: {
+      'early-diag': genAssessmentSection(),
+      'late-diag': genAssessmentSection(),
+      'sec-diag': genAssessmentSection(),
+    },
+    plan: '',
+    instruction: {
+      detail: '',
+      'medical-act': { note: '', codes: [genDiagnosisCode()] },
+      'supporting-exam': [genDiagnosisCode()],
+      therapy: '',
+      medication: [genDiagnosisCode()],
+      material: [genDiagnosisCode()],
+      'rehab-program': '',
+      'physic-modal': '',
+      exercise: '',
+      'ortes-protesa': '',
+      education: '',
+      other: '',
+    },
+  }
+}
diff --git a/app/models/specialist-intern.ts b/app/models/specialist-intern.ts
new file mode 100644
index 00000000..cee08a1b
--- /dev/null
+++ b/app/models/specialist-intern.ts
@@ -0,0 +1,25 @@
+import { type Base, genBase } from "./_base"
+import { type Person, genPerson } from "./person";
+import { type Specialist, genSpecialist } from "./specialist";
+import { type Subspecialist } from "./subspecialist";
+
+export interface SpecialistIntern extends Base {
+  person_id: number
+  person: Person
+  specialist_id: number
+  specialist: Specialist
+  subspecialist_id?: number
+  subspecialist?: Subspecialist
+  user_id: number
+}
+
+export function genSpecialistIntern(): SpecialistIntern {
+  return {
+    ...genBase(),
+    person_id: 0,
+    person: genPerson(),
+    specialist_id: 0,
+    specialist: genSpecialist(),
+    user_id: 0,
+  }
+}
\ No newline at end of file
diff --git a/app/models/specialist.ts b/app/models/specialist.ts
new file mode 100644
index 00000000..b4fe1115
--- /dev/null
+++ b/app/models/specialist.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Specialist extends Base {
+  code: string
+  name: string
+  unit_id?: number | string | null
+}
+
+export function genSpecialist(): Specialist {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    unit_id: 0
+  }
+}
diff --git a/app/models/subspecialist.ts b/app/models/subspecialist.ts
new file mode 100644
index 00000000..6343b847
--- /dev/null
+++ b/app/models/subspecialist.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Subspecialist extends Base {
+  code: string
+  name: string
+  specialist_id?: number | string | null
+}
+
+export function genSubspecialist(): Subspecialist {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    specialist_id: 0
+  }
+}
diff --git a/app/models/triage.ts b/app/models/triage.ts
new file mode 100644
index 00000000..3c8ab6a9
--- /dev/null
+++ b/app/models/triage.ts
@@ -0,0 +1,32 @@
+import { type Base, genBase } from "./_base"
+
+export interface triage extends Base {
+  encounter_id: number
+  arrival_time: string
+  arrival_condition_code: string
+  arrival_transporation_code: string
+  patient_name: string
+  patient_id: number
+  patient_residentIdentityNumber: string
+  patient_birthDate: string
+  patient_gender_code: string
+  diagnosis: string
+  doctor_id: number
+}
+
+export function gentriage(): triage {
+  return {
+    ...genBase(),
+    encounter_id: 0,
+    arrival_time: '',
+    arrival_condition_code: '',
+    arrival_transporation_code: '',
+    patient_name: '',
+    patient_id: 0,
+    patient_residentIdentityNumber: '',
+    patient_birthDate: '',
+    patient_gender_code: '',
+    diagnosis: '',
+    doctor_id: 0,
+    }
+}
diff --git a/app/models/unit.ts b/app/models/unit.ts
new file mode 100644
index 00000000..142f0570
--- /dev/null
+++ b/app/models/unit.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Unit extends Base {
+  code: string
+  name: string
+  installation_id?: number | string | null
+}
+
+export function genUnit(): Unit {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    installation_id: 0,
+  }
+}
diff --git a/app/models/uom.ts b/app/models/uom.ts
new file mode 100644
index 00000000..7905a2b4
--- /dev/null
+++ b/app/models/uom.ts
@@ -0,0 +1,16 @@
+import { type Base, genBase } from "./_base"
+
+export interface Uom extends Base {
+  code: string
+  name: string
+  erp_id: string
+}
+
+export function genUom(): Uom {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+    erp_id: '',
+  }
+}
diff --git a/app/models/user.ts b/app/models/user.ts
new file mode 100644
index 00000000..f51fbb70
--- /dev/null
+++ b/app/models/user.ts
@@ -0,0 +1,17 @@
+import { type Base, genBase } from "./_base"
+
+export interface User extends Base {
+  name: string
+  // password: string // not returning password from API
+  status_code: string
+  position_code: string
+}
+
+export function genUser(): User {
+  return {
+    ...genBase(),
+    name: '',
+    status_code: '',
+    position_code: ''
+}
+}
diff --git a/app/models/village.ts b/app/models/village.ts
new file mode 100644
index 00000000..6e36636f
--- /dev/null
+++ b/app/models/village.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+import type { District } from './district'
+
+export interface Village extends Base {
+  district_code: string
+  code: string
+  name: string
+
+  // preload
+  district?: District | null
+}
+
+export function genVillage(): Village {
+  return {
+    ...genBase(),
+    district_code: '',
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/pages/(error)/401.vue b/app/pages/(error)/401.vue
new file mode 100644
index 00000000..b60f313f
--- /dev/null
+++ b/app/pages/(error)/401.vue
@@ -0,0 +1,26 @@
+<script setup>
+definePageMeta({
+  layout: 'blank',
+})
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="h-svh">
+    <div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
+      <h1 class="text-[7rem] font-bold leading-tight">401</h1>
+      <span class="font-medium">Unauthorized Access</span>
+      <p class="text-muted-foreground text-center">
+        Please log in with the appropriate credentials <br />
+        to access this resource.
+      </p>
+      <div class="mt-6 flex gap-4">
+        <Button variant="outline" @click="router('/auth/login')"> Login </Button>
+        <Button @click="router.push('/')"> Back to Home </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/pages/(error)/403.vue b/app/pages/(error)/403.vue
new file mode 100644
index 00000000..985bc412
--- /dev/null
+++ b/app/pages/(error)/403.vue
@@ -0,0 +1,34 @@
+<script setup>
+definePageMeta({
+  layout: 'blank',
+})
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="h-svh">
+    <div class="m-auto h-full w-full flex flex-col items-center justify-center gap-2">
+      <h1 class="text-[7rem] font-bold leading-tight">
+        403
+      </h1>
+      <span class="font-medium">Access Forbidden</span>
+      <p class="text-center text-muted-foreground">
+        You don't have necessary permission <br>
+        to view this resource.
+      </p>
+      <div class="mt-6 flex gap-4">
+        <Button variant="outline" @click="router.back()">
+          Go Back
+        </Button>
+        <Button @click="router.push('/')">
+          Back to Home
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/app/pages/(error)/404.vue b/app/pages/(error)/404.vue
new file mode 100644
index 00000000..a857fca1
--- /dev/null
+++ b/app/pages/(error)/404.vue
@@ -0,0 +1,34 @@
+<script setup>
+definePageMeta({
+  layout: 'blank',
+})
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="h-svh">
+    <div class="m-auto h-full w-full flex flex-col items-center justify-center gap-2">
+      <h1 class="text-[7rem] font-bold leading-tight">
+        404
+      </h1>
+      <span class="font-medium">Oops! Page Not Found!</span>
+      <p class="text-center text-muted-foreground">
+        It seems like the page you're looking for <br>
+        does not exist or might have been removed.
+      </p>
+      <div class="mt-6 flex gap-4">
+        <Button variant="outline" @click="router.back()">
+          Go Back
+        </Button>
+        <Button @click="router.push('/')">
+          Back to Home
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/app/pages/(error)/500.vue b/app/pages/(error)/500.vue
new file mode 100644
index 00000000..7c6cb120
--- /dev/null
+++ b/app/pages/(error)/500.vue
@@ -0,0 +1,33 @@
+<script setup>
+definePageMeta({
+  layout: 'blank',
+})
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="h-svh">
+    <div class="m-auto h-full w-full flex flex-col items-center justify-center gap-2">
+      <h1 class="text-[7rem] font-bold leading-tight">
+        500
+      </h1>
+      <span class="font-medium">Oops! Something went wrong :')</span>
+      <p class="text-center text-muted-foreground">
+        We apologize for the inconvenience. <br> Please try again later.
+      </p>
+      <div class="mt-6 flex gap-4">
+        <Button variant="outline" @click="router.back()">
+          Go Back
+        </Button>
+        <Button @click="router.push('/')">
+          Back to Home
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/app/pages/(error)/503.vue b/app/pages/(error)/503.vue
new file mode 100644
index 00000000..ccd86c2c
--- /dev/null
+++ b/app/pages/(error)/503.vue
@@ -0,0 +1,26 @@
+<script setup>
+definePageMeta({
+  layout: 'blank',
+})
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="h-svh">
+    <div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
+      <h1 class="text-[7rem] font-bold leading-tight">503</h1>
+      <span class="font-medium">Website is under maintenance!</span>
+      <p class="text-muted-foreground text-center">
+        The site is not available at the moment. <br />
+        We'll be back online shortly.
+      </p>
+      <div class="mt-6 flex gap-4">
+        <Button variant="outline" @click="router.back()"> Go Back </Button>
+        <Button @click="router.push('/')"> Back to Home </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/pages/(features)/children-action/echocardiography/index.vue b/app/pages/(features)/children-action/echocardiography/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/children-action/echocardiography/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/children-action/spirometry/index.vue b/app/pages/(features)/children-action/spirometry/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/children-action/spirometry/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/children-action/thalasemia/index.vue b/app/pages/(features)/children-action/thalasemia/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/children-action/thalasemia/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/client/medical-record/index.vue b/app/pages/(features)/client/medical-record/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/client/medical-record/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/client/patient/[id]/edit.vue b/app/pages/(features)/client/patient/[id]/edit.vue
new file mode 100644
index 00000000..bf4f470d
--- /dev/null
+++ b/app/pages/(features)/client/patient/[id]/edit.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">Edit patient id: {{ route.params.id }}</div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/client/patient/[id]/index.vue b/app/pages/(features)/client/patient/[id]/index.vue
new file mode 100644
index 00000000..ffe978eb
--- /dev/null
+++ b/app/pages/(features)/client/patient/[id]/index.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Pasien',
+  contentFrame: 'cf-container-md',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPatientDetail :patient-id="Number(route.params.id)" />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/client/patient/add.vue b/app/pages/(features)/client/patient/add.vue
new file mode 100644
index 00000000..ca4615e2
--- /dev/null
+++ b/app/pages/(features)/client/patient/add.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Pasien',
+  contentFrame: 'cf-container-2xl',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+const callbackUrl = route.query['return-path'] as string | undefined
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPatientEntry :callback-url="callbackUrl" />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/client/patient/index.vue b/app/pages/(features)/client/patient/index.vue
new file mode 100644
index 00000000..79befc0c
--- /dev/null
+++ b/app/pages/(features)/client/patient/index.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Pasien',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPatientList />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/pages/(features)/common/uom/index.vue b/app/pages/(features)/common/uom/index.vue
new file mode 100644
index 00000000..adb9d36f
--- /dev/null
+++ b/app/pages/(features)/common/uom/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentUomList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/device-order/index.vue b/app/pages/(features)/device-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/device-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/doctor/add.vue b/app/pages/(features)/doctor/add.vue
new file mode 100644
index 00000000..a76811de
--- /dev/null
+++ b/app/pages/(features)/doctor/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentDoctorAdd />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/doctor/index.vue b/app/pages/(features)/doctor/index.vue
new file mode 100644
index 00000000..078df778
--- /dev/null
+++ b/app/pages/(features)/doctor/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentDoctorList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/emergency/consultation/index.vue b/app/pages/(features)/emergency/consultation/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/emergency/consultation/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/emergency/encounter/index.vue b/app/pages/(features)/emergency/encounter/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/emergency/encounter/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/emergency/triage/index.vue b/app/pages/(features)/emergency/triage/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/emergency/triage/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/human-src/employee/add.vue b/app/pages/(features)/human-src/employee/add.vue
new file mode 100644
index 00000000..0c21c3ee
--- /dev/null
+++ b/app/pages/(features)/human-src/employee/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEmployeeEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/human-src/employee/index.vue b/app/pages/(features)/human-src/employee/index.vue
new file mode 100644
index 00000000..dd07cf40
--- /dev/null
+++ b/app/pages/(features)/human-src/employee/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentUserList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/human-src/specialist-intern/add.vue b/app/pages/(features)/human-src/specialist-intern/add.vue
new file mode 100644
index 00000000..0e5ed9da
--- /dev/null
+++ b/app/pages/(features)/human-src/specialist-intern/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentSpecialistInternEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/human-src/specialist-intern/index.vue b/app/pages/(features)/human-src/specialist-intern/index.vue
new file mode 100644
index 00000000..997a9ee1
--- /dev/null
+++ b/app/pages/(features)/human-src/specialist-intern/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentSpecialistInternList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/consultation/index.vue b/app/pages/(features)/inpatient/consultation/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/consultation/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/encounter/index.vue b/app/pages/(features)/inpatient/encounter/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/encounter/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/index.vue b/app/pages/(features)/inpatient/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/request/index.vue b/app/pages/(features)/inpatient/request/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/request/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/integration/bpjs/sep/add.vue b/app/pages/(features)/integration/bpjs/sep/add.vue
new file mode 100644
index 00000000..5db12aac
--- /dev/null
+++ b/app/pages/(features)/integration/bpjs/sep/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: [],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah SEP',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = true // hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentSepEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/integration/bpjs/sep/index.vue b/app/pages/(features)/integration/bpjs/sep/index.vue
new file mode 100644
index 00000000..b8ec57c4
--- /dev/null
+++ b/app/pages/(features)/integration/bpjs/sep/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentSepList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/integration/satusehat/[id]/detail.vue b/app/pages/(features)/integration/satusehat/[id]/detail.vue
new file mode 100644
index 00000000..88d0e796
--- /dev/null
+++ b/app/pages/(features)/integration/satusehat/[id]/detail.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>detail satusehat</div>
+</template>
diff --git a/app/pages/(features)/integration/satusehat/[id]/edit.vue b/app/pages/(features)/integration/satusehat/[id]/edit.vue
new file mode 100644
index 00000000..7df3c6a2
--- /dev/null
+++ b/app/pages/(features)/integration/satusehat/[id]/edit.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>edit satusehat</div>
+</template>
diff --git a/app/pages/(features)/integration/satusehat/add.vue b/app/pages/(features)/integration/satusehat/add.vue
new file mode 100644
index 00000000..c9d23199
--- /dev/null
+++ b/app/pages/(features)/integration/satusehat/add.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Pasien',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/satusehat']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentPatientAdd />
+  </div>
+  <PubMyUiError v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/integration/satusehat/index.vue b/app/pages/(features)/integration/satusehat/index.vue
new file mode 100644
index 00000000..a0db9e78
--- /dev/null
+++ b/app/pages/(features)/integration/satusehat/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'SATUSEHAT Integration',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/satusehat']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentSatusehatList />
+    </div>
+    <PubMyUiError v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/mcu-src/diagnose/index.vue b/app/pages/(features)/mcu-src/diagnose/index.vue
new file mode 100644
index 00000000..c557cf5f
--- /dev/null
+++ b/app/pages/(features)/mcu-src/diagnose/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Diagnosis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDiagnoseSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/mcu/index.vue b/app/pages/(features)/mcu-src/mcu/index.vue
new file mode 100644
index 00000000..cefa57c6
--- /dev/null
+++ b/app/pages/(features)/mcu-src/mcu/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Medical Checkup',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">MCU - SRC</template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/medical-action/index.vue b/app/pages/(features)/mcu-src/medical-action/index.vue
new file mode 100644
index 00000000..7e471367
--- /dev/null
+++ b/app/pages/(features)/mcu-src/medical-action/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Aksi Medis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentMedicalActionSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/mcu-src/procedure/index.vue b/app/pages/(features)/mcu-src/procedure/index.vue
new file mode 100644
index 00000000..030c0ab3
--- /dev/null
+++ b/app/pages/(features)/mcu-src/procedure/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Prosedur',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentProcedureSrcList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/micro-lab-order/index.vue b/app/pages/(features)/micro-lab-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/micro-lab-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/nutrition-order/index.vue b/app/pages/(features)/nutrition-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/nutrition-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/division/index.vue b/app/pages/(features)/org-src/division/index.vue
new file mode 100644
index 00000000..af458d58
--- /dev/null
+++ b/app/pages/(features)/org-src/division/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDivisionList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/org-src/installation/index.vue b/app/pages/(features)/org-src/installation/index.vue
new file mode 100644
index 00000000..fff5bac3
--- /dev/null
+++ b/app/pages/(features)/org-src/installation/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Instalasi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentInstallationList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/org-src/specialist/index.vue b/app/pages/(features)/org-src/specialist/index.vue
new file mode 100644
index 00000000..c81832f2
--- /dev/null
+++ b/app/pages/(features)/org-src/specialist/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Spesialis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSpecialistList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/org-src/subspecialist/index.vue b/app/pages/(features)/org-src/subspecialist/index.vue
new file mode 100644
index 00000000..6fb09f5e
--- /dev/null
+++ b/app/pages/(features)/org-src/subspecialist/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Sub Spesialis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSubspecialistList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/org-src/unit/index.vue b/app/pages/(features)/org-src/unit/index.vue
new file mode 100644
index 00000000..7032181f
--- /dev/null
+++ b/app/pages/(features)/org-src/unit/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Unit',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentUnitList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/outpatient/consultation/index.vue b/app/pages/(features)/outpatient/consultation/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpatient/consultation/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/index.vue b/app/pages/(features)/outpatient/encounter/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/polyclinic-queue/index.vue b/app/pages/(features)/outpatient/polyclinic-queue/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpatient/polyclinic-queue/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/registration-queue/index.vue b/app/pages/(features)/outpatient/registration-queue/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpatient/registration-queue/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/index.vue b/app/pages/(features)/outpation-action/cemotherapy/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpation-action/cemotherapy/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/hemophilia/index.vue b/app/pages/(features)/outpation-action/hemophilia/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpation-action/hemophilia/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/pa-lab-order/index.vue b/app/pages/(features)/pa-lab-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/pa-lab-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/patient/[id]/detail.vue b/app/pages/(features)/patient/[id]/detail.vue
new file mode 100644
index 00000000..33a36f0f
--- /dev/null
+++ b/app/pages/(features)/patient/[id]/detail.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>detail pasien</div>
+</template>
diff --git a/app/pages/(features)/patient/[id]/edit.vue b/app/pages/(features)/patient/[id]/edit.vue
new file mode 100644
index 00000000..2b7e8a31
--- /dev/null
+++ b/app/pages/(features)/patient/[id]/edit.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>edit pasien</div>
+</template>
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
new file mode 100644
index 00000000..412c2b3e
--- /dev/null
+++ b/app/pages/(features)/patient/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Pasien',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentPatientAdd />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
new file mode 100644
index 00000000..1877289e
--- /dev/null
+++ b/app/pages/(features)/patient/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Pasien',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPatientList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/payment/index.vue b/app/pages/(features)/payment/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/payment/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/pc-lab-order/index.vue b/app/pages/(features)/pc-lab-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/pc-lab-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/radiology-order/index.vue b/app/pages/(features)/radiology-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/radiology-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/detail.vue b/app/pages/(features)/rehab/encounter/[id]/detail.vue
new file mode 100644
index 00000000..e3d45895
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/detail.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry :id="1" form-type="Detail" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/edit.vue
new file mode 100644
index 00000000..77b0dd3e
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry :id="1" form-type="Edit" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
new file mode 100644
index 00000000..3fa7525a
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterProcess />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/encounter/add.vue b/app/pages/(features)/rehab/encounter/add.vue
new file mode 100644
index 00000000..f20b90c1
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry form-type="Tambah" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
new file mode 100644
index 00000000..7a8564a8
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList type="encounter" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/rehab/examination-queue/index.vue b/app/pages/(features)/rehab/examination-queue/index.vue
new file mode 100644
index 00000000..8616dd19
--- /dev/null
+++ b/app/pages/(features)/rehab/examination-queue/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Examination Queue</div>
+</template>
diff --git a/app/pages/(features)/rehab/examination/index.vue b/app/pages/(features)/rehab/examination/index.vue
new file mode 100644
index 00000000..806b2650
--- /dev/null
+++ b/app/pages/(features)/rehab/examination/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Examination</div>
+</template>
diff --git a/app/pages/(features)/rehab/registration-queue/index.vue b/app/pages/(features)/rehab/registration-queue/index.vue
new file mode 100644
index 00000000..d06e73ad
--- /dev/null
+++ b/app/pages/(features)/rehab/registration-queue/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <FlowRehabRegistrationHome />
+</template>
diff --git a/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue b/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
new file mode 100644
index 00000000..6a45818c
--- /dev/null
+++ b/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah SEP Prosedur',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentDoctorAdd />
+  </div>
+  <PubMyUiError v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/registration/[id]/detail.vue b/app/pages/(features)/rehab/registration/[id]/detail.vue
new file mode 100644
index 00000000..77c30c00
--- /dev/null
+++ b/app/pages/(features)/rehab/registration/[id]/detail.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry :id="1" form-type="Detail" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/registration/[id]/edit.vue b/app/pages/(features)/rehab/registration/[id]/edit.vue
new file mode 100644
index 00000000..c6af01a9
--- /dev/null
+++ b/app/pages/(features)/rehab/registration/[id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry :id="1" form-type="Edit" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/registration/add.vue b/app/pages/(features)/rehab/registration/add.vue
new file mode 100644
index 00000000..87053270
--- /dev/null
+++ b/app/pages/(features)/rehab/registration/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <template v-if="canCreate">
+    <ContentEncounterEntry form-type="Tambah" />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/registration/index.vue b/app/pages/(features)/rehab/registration/index.vue
new file mode 100644
index 00000000..5b4fbfb8
--- /dev/null
+++ b/app/pages/(features)/rehab/registration/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Pendaftaran',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList type="registration" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/service-src/bed/index.vue b/app/pages/(features)/service-src/bed/index.vue
new file mode 100644
index 00000000..85541ef5
--- /dev/null
+++ b/app/pages/(features)/service-src/bed/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Bed',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentBedList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/building/index.vue b/app/pages/(features)/service-src/building/index.vue
new file mode 100644
index 00000000..38b214db
--- /dev/null
+++ b/app/pages/(features)/service-src/building/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Building',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentBuildingList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/chamber/index.vue b/app/pages/(features)/service-src/chamber/index.vue
new file mode 100644
index 00000000..7afc18e1
--- /dev/null
+++ b/app/pages/(features)/service-src/chamber/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Chamber',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentChamberList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/counter/index.vue b/app/pages/(features)/service-src/counter/index.vue
new file mode 100644
index 00000000..63d35471
--- /dev/null
+++ b/app/pages/(features)/service-src/counter/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentCounterList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/floor/index.vue b/app/pages/(features)/service-src/floor/index.vue
new file mode 100644
index 00000000..9f17fd03
--- /dev/null
+++ b/app/pages/(features)/service-src/floor/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Floor',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentFloorList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/public-screen/index.vue b/app/pages/(features)/service-src/public-screen/index.vue
new file mode 100644
index 00000000..8dd20959
--- /dev/null
+++ b/app/pages/(features)/service-src/public-screen/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Layar Publik',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentPublicScreenList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/room/index.vue b/app/pages/(features)/service-src/room/index.vue
new file mode 100644
index 00000000..a91cc621
--- /dev/null
+++ b/app/pages/(features)/service-src/room/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Room',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentRoomList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/service-src/warehouse/index.vue b/app/pages/(features)/service-src/warehouse/index.vue
new file mode 100644
index 00000000..022e693b
--- /dev/null
+++ b/app/pages/(features)/service-src/warehouse/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Warehouse',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentWarehouseList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/equipment/index.vue b/app/pages/(features)/tools-equipment-src/equipment/index.vue
new file mode 100644
index 00000000..b1beab11
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/equipment/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar User',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentEquipmentList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
new file mode 100644
index 00000000..a400552a
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentMedicineMethodList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
new file mode 100644
index 00000000..97ee385b
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentMedicineGroupList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
new file mode 100644
index 00000000..74b5e576
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentMedicineEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/add.vue b/app/pages/(features)/tools-equipment-src/medicine/add.vue
new file mode 100644
index 00000000..706e052b
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <template v-if="canCreate">
+    <ContentMedicineEntry />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/index.vue b/app/pages/(features)/tools-equipment-src/medicine/index.vue
new file mode 100644
index 00000000..2be85f63
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentMedicineList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/tools/index.vue b/app/pages/(features)/tools-equipment-src/tools/index.vue
new file mode 100644
index 00000000..d337e041
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/tools/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar User',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentToolsList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/_dev/consultation/list.vue b/app/pages/_dev/consultation/list.vue
new file mode 100644
index 00000000..3f60b7ca
--- /dev/null
+++ b/app/pages/_dev/consultation/list.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import List from '~/components/content/consultation/list.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <List />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/_dev/data-table/index.cfg.ts b/app/pages/_dev/data-table/index.cfg.ts
new file mode 100644
index 00000000..4eba929e
--- /dev/null
+++ b/app/pages/_dev/data-table/index.cfg.ts
@@ -0,0 +1,37 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'No.RM.' },
+    { label: 'Nama Pasien' },
+    { label: 'Tempat Lahir' },
+    { label: '' },
+  ]],
+
+  keys: ['number', 'person.name', 'person.birthPlace_regency.name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/pages/_dev/data-table/index.data.ts b/app/pages/_dev/data-table/index.data.ts
new file mode 100644
index 00000000..16989c3f
--- /dev/null
+++ b/app/pages/_dev/data-table/index.data.ts
@@ -0,0 +1,67 @@
+export interface Regency {
+  id: number
+  code: string
+  name: string
+}
+
+export interface Person {
+  id: number
+  name: string
+  residentIdentityNumber?: string
+  birthDate?: string
+  birthPlace_regency_code: string
+  birthPlace_regency: Regency
+}
+
+export interface Patient {
+  id: number
+  number: string
+  person: Person
+}
+
+export const regencies: Regency[] = [
+  {
+    id: 1,
+    code: '3522',
+    name: 'Bojonegoro',
+  },
+  {
+    id: 2,
+    code: '3579',
+    name: 'Batu',
+  },
+]
+
+export const people: Person[] = [
+  {
+    id: 1,
+    name: 'Abdul Manap',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[0],
+  },
+  {
+    id: 2,
+    name: 'Abdul Gofur',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[1],
+  },
+]
+
+export const data: Patient[] = [
+  {
+    id: 1,
+    number: 'RM-0000001',
+    person_id: 1,
+    person: people[0],
+  },
+  {
+    id: 2,
+    number: 'RM-0000002',
+    person_id: 2,
+    person: people[1],
+  }
+]
diff --git a/app/pages/_dev/data-table/index.vue b/app/pages/_dev/data-table/index.vue
new file mode 100644
index 00000000..0e2c8308
--- /dev/null
+++ b/app/pages/_dev/data-table/index.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+  import { config } from './index.cfg'
+  import { data } from './index.data'
+</script>
+
+<template>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
+</template>
diff --git a/app/pages/_dev/division-position/index.vue b/app/pages/_dev/division-position/index.vue
new file mode 100644
index 00000000..dc0c82c4
--- /dev/null
+++ b/app/pages/_dev/division-position/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi Posisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDivisionPositionList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
new file mode 100644
index 00000000..b36abf7e
--- /dev/null
+++ b/app/pages/_dev/index.vue
@@ -0,0 +1,102 @@
+<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')),
+    },
+    {
+      title: 'Test Medicine List',
+      icon: 'i-lucide-user',
+      component: defineAsyncComponent(() => import('~/components/content/item/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/play.vue b/app/pages/_dev/play.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/pages/_dev/play.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/pages/_dev/prescription/list.vue b/app/pages/_dev/prescription/list.vue
new file mode 100644
index 00000000..3ac06c40
--- /dev/null
+++ b/app/pages/_dev/prescription/list.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPrescriptionList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</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..cf61068d
--- /dev/null
+++ b/app/pages/_dev/user/list.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+
+definePageMeta({
+  layout: 'blank',
+})
+
+// Tipe data untuk konsistensi
+interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
+
+// State untuk data pohon. Awalnya hanya berisi data level atas.
+const treeData = ref<TreeItem[]>([
+  { value: 'frontend', label: 'Frontend', hasChildren: true },
+  { value: 'backend', label: 'Backend', hasChildren: true },
+  { value: 'devops', label: 'DevOps', hasChildren: false },
+])
+
+// State untuk menampung nilai yang dipilih
+const selectedValue = ref<string>()
+
+// --- INI BAGIAN PENTING: LOGIKA API DAN MANIPULASI DATA ---
+
+// Helper: Fungsi rekursif untuk mencari dan menyisipkan data anak ke dalam state
+function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]) {
+  for (const node of nodes) {
+    if (node.value === parentId) {
+      node.children = newChildren
+      return true
+    }
+    if (node.children && findAndInsertChildren(node.children, parentId, newChildren)) {
+      return true
+    }
+  }
+  return false
+}
+
+// Fungsi yang akan dipanggil oleh komponen TreeSelectItem untuk mengambil data
+async function handleFetchChildren(parentId: string) {
+  console.log(`Mengambil data anak untuk parent: ${parentId}`)
+
+  // Simulasi panggilan API ke backend Anda
+  await new Promise(resolve => setTimeout(resolve, 500)) // Delay 0.5 detik
+
+  let childrenData: TreeItem[] = []
+  if (parentId === 'frontend') {
+    childrenData = [
+      { value: 'vue', label: 'Vue.js', hasChildren: true },
+      { value: 'react', label: 'React.js', hasChildren: false },
+    ]
+  } else if (parentId === 'backend') {
+    childrenData = [
+      { value: 'nodejs', label: 'Node.js', hasChildren: false },
+      { value: 'golang', label: 'Go', hasChildren: false },
+    ]
+  } else if (parentId === 'vue') { // Contoh untuk level yang lebih dalam
+    childrenData = [
+      { value: 'nuxt', label: 'Nuxt.js', hasChildren: false },
+    ]
+  }
+  // Akhir simulasi
+
+  // Masukkan data anak yang baru didapat ke dalam state treeData
+  findAndInsertChildren(treeData.value, parentId, childrenData)
+}
+</script>
+
+<template>
+  <div class="p-10">
+    <h1 class="mb-4 text-2xl font-bold">Tree Select (Lazy Loading)</h1>
+    <TreeSelect v-model="selectedValue" :data="treeData" :on-fetch-children="handleFetchChildren" />
+    <p class="mt-4">
+      Value yang terpilih:
+      <span class="p-1 font-mono text-sm rounded-md bg-slate-100">{{ selectedValue || 'Belum ada' }}</span>
+    </p>
+  </div>
+</template>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
new file mode 100644
index 00000000..9727a6be
--- /dev/null
+++ b/app/pages/auth/login.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank',
+  public: true,
+})
+</script>
+
+<template>
+  <LayoutAuth reverse>
+    <div class="mx-auto grid max-w-sm gap-6">
+      <div class="grid gap-2 text-center">
+        <h1 class="text-2xl font-semibold tracking-tight">Login RSSA</h1>
+      </div>
+      <ContentAuthLogin />
+    </div>
+  </LayoutAuth>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 00000000..7e27e735
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Dashboard',
+  contentFrame: 'cf-no-frame',
+})
+
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+</script>
+
+<template>
+  <ContentDashboard />
+</template>
diff --git a/app/plugins/persist.client.ts b/app/plugins/persist.client.ts
new file mode 100644
index 00000000..8e0b8a21
--- /dev/null
+++ b/app/plugins/persist.client.ts
@@ -0,0 +1,5 @@
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.$pinia.use(piniaPluginPersistedstate)
+})
diff --git a/app/schemas/auth.schema.ts b/app/schemas/auth.schema.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/app/schemas/base.schema.ts b/app/schemas/base.schema.ts
new file mode 100644
index 00000000..7b48b038
--- /dev/null
+++ b/app/schemas/base.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { CodeName } from '~/models/_base'
+
+const BaseSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+})
+
+type BaseFormData = z.infer<typeof BaseSchema> & CodeName
+
+export { BaseSchema }
+export type { BaseFormData }
diff --git a/app/schemas/consultation.schema.ts b/app/schemas/consultation.schema.ts
new file mode 100644
index 00000000..b1d306f5
--- /dev/null
+++ b/app/schemas/consultation.schema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+import type { CreateDto } from '~/models/consultation'
+
+const ConsultationSchema = z.object({
+  date: z.string({ required_error: 'Tanggal harus diisi' }),
+  dstUnit_id: z.number({ required_error: 'Unit harus diisi' }),
+  problem: z.string({ required_error: 'Uraian harus diisi' }).min(20, 'Uraian minimum 20 karakter'),
+})
+
+type ConsultationFormData = z.infer<typeof ConsultationSchema> & (CreateDto)
+
+export { ConsultationSchema }
+export type { ConsultationFormData }
diff --git a/app/schemas/device-order.schema.ts b/app/schemas/device-order.schema.ts
new file mode 100644
index 00000000..b0c2a56c
--- /dev/null
+++ b/app/schemas/device-order.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { DeviceOrder } from '~/models/device-order'
+
+const DeviceOrderSchema = z.object({
+  encounter_id: z.number({ required_error: 'Kode harus diisi' }),
+  doctor_id: z.number({ required_error: 'Kode harus diisi' }),
+})
+
+type DeviceOrderFormData = z.infer<typeof DeviceOrderSchema> & Partial<DeviceOrder>
+
+export { DeviceOrderSchema }
+export type { DeviceOrderFormData }
diff --git a/app/schemas/device.schema.ts b/app/schemas/device.schema.ts
new file mode 100644
index 00000000..a8603e52
--- /dev/null
+++ b/app/schemas/device.schema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+import type { Device } from '~/models/device'
+
+const DeviceSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  uom_code: z.string({ required_error: 'Kode unit harus diisi' }).min(1, 'Kode unit harus diisi'),
+})
+
+type DeviceFormData = z.infer<typeof DeviceSchema> & Partial<Device>
+
+export { DeviceSchema }
+export type { DeviceFormData }
diff --git a/app/schemas/diagnose-src.schema.ts b/app/schemas/diagnose-src.schema.ts
new file mode 100644
index 00000000..c174f4c8
--- /dev/null
+++ b/app/schemas/diagnose-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const DiagnoseSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type DiagnoseSrcFormData = z.infer<typeof DiagnoseSrcSchema> & Partial<DiagnoseSrc>
+
+export { DiagnoseSrcSchema }
+export type { DiagnoseSrcFormData }
diff --git a/app/schemas/division-position.schema.ts b/app/schemas/division-position.schema.ts
new file mode 100644
index 00000000..65906f61
--- /dev/null
+++ b/app/schemas/division-position.schema.ts
@@ -0,0 +1,21 @@
+import { z } from 'zod'
+import type { DivisionPosition } from '~/models/division-position'
+
+const DivisionPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  division_id: z.union([
+    z.string({ required_error: 'Divisi Induk harus diisi' }),
+    z.number({ required_error: 'Divisi Induk harus diisi' })
+  ]).optional().nullable(),
+  employee_id: z.union([
+    z.string({ required_error: 'Karyawan harus diisi' }),
+    z.number({ required_error: 'Karyawan harus diisi' })
+  ]).optional().nullable(),
+})
+
+type DivisionPositionFormData = z.infer<typeof DivisionPositionSchema> & Partial<DivisionPosition>
+
+export { DivisionPositionSchema }
+export type { DivisionPositionFormData }
\ No newline at end of file
diff --git a/app/schemas/division.schema.ts b/app/schemas/division.schema.ts
new file mode 100644
index 00000000..fae5afca
--- /dev/null
+++ b/app/schemas/division.schema.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import type { Division } from '~/models/division'
+
+const DivisionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  parent_id: z.union([
+    z.string({ required_error: 'Divisi Induk harus diisi' }),
+    z.number({ required_error: 'Divisi Induk harus diisi' })
+  ]).optional().nullable(),
+})
+
+type DivisionFormData = z.infer<typeof DivisionSchema> & Partial<Division>
+
+export { DivisionSchema }
+export type { DivisionFormData }
diff --git a/app/schemas/encounter.schema.ts b/app/schemas/encounter.schema.ts
new file mode 100644
index 00000000..e3c9affc
--- /dev/null
+++ b/app/schemas/encounter.schema.ts
@@ -0,0 +1,48 @@
+import { z } from 'zod'
+import { InternalReferenceSchema } from './internal-reference.schema'
+
+// Check In
+const CheckInSchema = z.object({
+  // registeredAt: z.string({ required_error: 'Tanggal masuk harus diisi' }),
+  responsible_doctor_id: z.number({ required_error: 'Dokter harus diisi' }).gt(0, 'Dokter harus diisi'),
+  adm_employee_id: z.number({ required_error: 'PJA harus diisi' }).gt(0, 'PJA harus diisi'),
+})
+type CheckInFormData = z.infer<typeof CheckInSchema>
+
+// Checkout
+const CheckOutSchema = z.object({
+  discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
+  discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
+})
+type CheckOutFormData = z.infer<typeof CheckOutSchema>
+
+// CheckoutDeath
+const CheckOutDeathSchema = z.object({
+  discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
+  discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
+  death_cause: z.array(z.string()).nonempty(),
+})
+type CheckOutDeathFormData = z.infer<typeof CheckOutDeathSchema>
+
+// CheckoutDeath
+const CheckOutInternalReferenceSchema = z.object({
+  discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
+  discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
+  internalReferences: z.array(InternalReferenceSchema).nonempty(),
+})
+type CheckOutInternalReferenceFormData = z.infer<typeof CheckOutInternalReferenceSchema>
+
+
+// Exports
+export {
+  CheckInSchema,
+  CheckOutSchema,
+  CheckOutDeathSchema,
+  CheckOutInternalReferenceSchema
+}
+export type {
+  CheckInFormData,
+  CheckOutFormData,
+  CheckOutDeathFormData,
+  CheckOutInternalReferenceFormData
+}
diff --git a/app/schemas/infra.schema.ts b/app/schemas/infra.schema.ts
new file mode 100644
index 00000000..c47cfe5f
--- /dev/null
+++ b/app/schemas/infra.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+import type { Infra } from '~/models/infra'
+
+const InfraSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  infraGroup_code: z.string().min(1, 'Infra Group harus diisi'),
+  parent_id: z
+    .union([z.string({ required_error: 'Induk harus diisi' }), z.number({ required_error: 'Induk harus diisi' })])
+    .optional()
+    .nullable(),
+  specialist_id: z.union([z.string(), z.number()]).nullable().optional(),
+  subspecialist_id: z.union([z.string(), z.number()]).nullable().optional(),
+  unit_id: z.union([z.string(), z.number()]).nullable().optional(),
+})
+
+type InfraFormData = z.infer<typeof InfraSchema> & Partial<Infra>
+
+export { InfraSchema }
+export type { InfraFormData }
diff --git a/app/schemas/installation.schema.ts b/app/schemas/installation.schema.ts
new file mode 100644
index 00000000..5fdfe565
--- /dev/null
+++ b/app/schemas/installation.schema.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import type { Installation } from "~/models/installation"
+
+export const InstallationSchema = z.object({
+  code: z.string().min(1, 'Kode wajib diisi'),
+  name: z.string().min(1, 'Nama wajib diisi'),
+  encounterClass_code: z.string().min(1, 'Encounter Class wajib diisi').optional(),
+})
+
+export type InstallationFormData = z.infer<typeof InstallationSchema> & Partial<Installation>
diff --git a/app/schemas/internal-reference.schema.ts b/app/schemas/internal-reference.schema.ts
new file mode 100644
index 00000000..eae75319
--- /dev/null
+++ b/app/schemas/internal-reference.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { InternalReference } from '~/models/internal-reference'
+
+const InternalReferenceSchema = z.object({
+  'unit_id': z.number({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  'doctor_id': z.number({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+})
+
+type InternalReferenceFormData = z.infer<typeof InternalReferenceSchema> & Partial<InternalReference>
+
+export { InternalReferenceSchema }
+export type { InternalReferenceFormData }
diff --git a/app/schemas/material.schema.ts b/app/schemas/material.schema.ts
new file mode 100644
index 00000000..bdb020e8
--- /dev/null
+++ b/app/schemas/material.schema.ts
@@ -0,0 +1,14 @@
+import { z } from 'zod'
+import type { Material } from '~/models/material'
+
+const MaterialSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  uom_code: z.string({ required_error: 'Kode unit harus diisi' }).min(1, 'Kode unit harus diisi'),
+  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' }).min(1, 'Stok harus lebih besar dari 0')),
+})
+
+type MaterialFormData = z.infer<typeof MaterialSchema> & Partial<Material>
+
+export { MaterialSchema }
+export type { MaterialFormData }
diff --git a/app/schemas/medical-action-src.schema.ts b/app/schemas/medical-action-src.schema.ts
new file mode 100644
index 00000000..a1caaeeb
--- /dev/null
+++ b/app/schemas/medical-action-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const MedicalActionSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  type_code: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type MedicalActionSrcFormData = z.infer<typeof MedicalActionSrcSchema> & Partial<MedicalActionSrc>
+
+export { MedicalActionSrcSchema }
+export type { MedicalActionSrcFormData }
diff --git a/app/schemas/medicine.schema.ts b/app/schemas/medicine.schema.ts
new file mode 100644
index 00000000..44113777
--- /dev/null
+++ b/app/schemas/medicine.schema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+export const MedicineSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimal 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimal 1 karakter'),
+  medicineGroup_code: z.string({ required_error: 'Kelompok obat harus diisi' }).min(1, 'Kelompok obat harus diisi'),
+  medicineMethod_code: z.string({ required_error: 'Metode pemberian harus diisi' }).min(1, 'Metode pemberian harus diisi'),
+  uom_code: z.string({ required_error: 'Satuan harus diisi' }).min(1, 'Satuan harus diisi'),
+  infra_id: z.number().nullable().optional(),
+  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' }).min(1, 'Stok harus lebih besar dari 0')),
+})
+
+export type MedicineFormData = z.infer<typeof MedicineSchema>
diff --git a/app/schemas/patient.schema.ts b/app/schemas/patient.schema.ts
new file mode 100644
index 00000000..2af50a67
--- /dev/null
+++ b/app/schemas/patient.schema.ts
@@ -0,0 +1,178 @@
+import { z } from 'zod'
+
+const CommunicationBarrierSchema = z
+  .enum(['YA', 'TIDAK'], {
+    required_error: 'Mohon lengkapi Status Hambatan Berkomunikasi',
+  })
+  .transform((val) => val === 'YA')
+
+const IsNewBornSchema = z
+  .enum(['YA', 'TIDAK'], {
+    required_error: 'Mohon lengkapi status pasien',
+  })
+  .transform((val) => val === 'YA')
+
+const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+
+const PatientSchema = z
+  .object({
+    // Data Diri Pasien
+    identityNumber: z.string().optional(),
+    // .string({
+    //   required_error: 'Mohon lengkapi NIK',
+    // })
+    // .min(16, 'NIK harus berupa angka 16 digit')
+    // .regex(/^\d+$/, 'NIK harus berupa angka 16 digit'),
+    residentIdentityFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
+      })
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+
+    familyIdentityFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
+      })
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+    // .refine(f => ['image/jpeg', 'image/png'].includes(f.type), 'Hanya JPG/PNG')
+
+    // Informasi Dasar
+    // alias: z.string({
+    //   required_error: 'Mohon pilih sapaan',
+    // }),
+    fullName: z.string({
+      required_error: 'Mohon lengkapi Nama',
+    }),
+    birthPlace: z
+      .string({
+        required_error: 'Mohon lengkapi Tempat Lahir',
+      })
+      .min(1, 'Mohon lengkapi Tempat Lahir'),
+    birthDate: z
+      .string({
+        required_error: 'Mohon lengkapi Tanggal Lahir',
+      })
+      .refine(
+        (date) => {
+          // Jika kosong, return false untuk required validation
+          if (!date || date.trim() === '') return false
+
+          // Jika ada isi, validasi format tanggal
+          try {
+            const dateObj = new Date(date)
+            // Cek apakah tanggal valid dan tahun >= 1900
+            return !isNaN(dateObj.getTime()) && dateObj.getFullYear() >= 1900
+          } catch {
+            return false
+          }
+        },
+        {
+          message: 'Mohon lengkapi Tanggal Lahir dengan format yang valid',
+        },
+      )
+      .transform((dateStr) => new Date(dateStr).toISOString()),
+
+    // Jenis Kelamin & Status
+    gender: z.string({
+      required_error: 'Pilih Jenis Kelamin',
+    }),
+    maritalStatus: z.enum(['TIDAK_DIKETAHUI', 'BELUM_KAWIN', 'KAWIN', 'CERAI_HIDUP', 'CERAI_MATI'], {
+      required_error: 'Pilih Status Perkawinan',
+    }),
+
+    // Informasi Lokasi & Sosial
+    job: z
+      .string({
+        required_error: 'Mohon lengkapi Pekerjaan',
+      })
+      .min(1),
+    nationality: z.string({
+      required_error: 'Pilih Kebangsaan',
+    }),
+    isNewBorn: IsNewBornSchema,
+    language: z.string({
+      required_error: 'Mohon pilih Preferensi Bahasa',
+    }),
+    education: z
+      .string({
+        required_error: 'Mohon lengkapi Pendidikan',
+      })
+      .min(1),
+    religion: z
+      .string({
+        required_error: 'Pilih Kepercayaan',
+      })
+      .min(1),
+    ethnicity: z.string().optional(),
+
+    // Disabilitas
+    disability: z.enum(['YA', 'TIDAK'], {
+      required_error: 'Mohon lengkapi Status Disabilitas',
+    }),
+    disabilityType: z.string().optional(),
+
+    // Informasi Kontak
+    passportNumber: z.string().optional(),
+    communicationBarrier: CommunicationBarrierSchema,
+
+    note: z.string().optional(),
+    drivingLicenseNumber: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      // Jika disability = 'TIDAK', maka disabilityType harus kosong atau undefined
+      if (data.disability === 'TIDAK') {
+        return !data.disabilityType || data.disabilityType.trim() === ''
+      }
+      return true
+    },
+    {
+      message: "Jenis Disabilitas harus kosong jika Status Disabilitas = 'TIDAK'",
+      path: ['disabilityType'],
+    },
+  )
+  .refine(
+    (data) => {
+      // Jika disability = 'YA', maka disabilityType wajib diisi
+      if (data.disability === 'YA') {
+        return !!data.disabilityType?.trim()
+      }
+      return true
+    },
+    {
+      message: 'Mohon pilih Jenis Disabilitas',
+      path: ['disabilityType'],
+    },
+  )
+  // .refine((data) => {
+  //   // Jika nationality = 'WNA', maka passportNumber wajib diisi
+  //   if (data.nationality === 'WNA') {
+  //     return !!data.passportNumber?.trim()
+  //   }
+  //   return true
+  // }, {
+  //   message: 'Nomor Paspor wajib diisi untuk Warga Negara Asing',
+  //   path: ['passportNumber'],
+  // })
+  .transform((data) => {
+    // Transform untuk backend: hanya kirim disabilityType sesuai kondisi
+    return {
+      ...data,
+      // Jika disability = 'YA', kirim disabilityType
+      // Jika disability = 'TIDAK', kirim null untuk disabilityType
+      disabilityType: data.disability === 'YA' ? data.disabilityType : null,
+      // Hapus field disability karena yang dikirim ke backend adalah disabilityType
+      disability: undefined,
+    }
+  })
+
+type PatientFormData = z.infer<typeof PatientSchema>
+
+export { PatientSchema }
+export type { PatientFormData }
diff --git a/app/schemas/person-address-relative.schema.ts b/app/schemas/person-address-relative.schema.ts
new file mode 100644
index 00000000..091da1df
--- /dev/null
+++ b/app/schemas/person-address-relative.schema.ts
@@ -0,0 +1,60 @@
+import { z } from 'zod'
+import { PersonAddressSchema } from './person-address.schema'
+
+const PersonAddressRelativeSchema = z
+  .object({
+    isSameAddress: z
+      .union([z.literal('1'), z.literal('0'), z.boolean()])
+      .default('1')
+      .transform((val) => {
+        if (typeof val === 'boolean') return val ? '1' : '0'
+        return val
+      }),
+  })
+  .merge(PersonAddressSchema.partial())
+  .superRefine((data, ctx) => {
+    const isSameAddress = data.isSameAddress
+
+    // Jika alamat tidak sama ('0'), maka semua field address wajib diisi
+    if (isSameAddress === '0') {
+      const requiredFields = [
+        'province_code',
+        'regency_code',
+        'district_code',
+        'village_code',
+        'postalRegion_code',
+        'address',
+      ]
+
+      requiredFields.forEach((field) => {
+        if (!data[field as keyof typeof data]) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: getRequiredMessage(field),
+            path: [field],
+          })
+        }
+      })
+    }
+  })
+  .transform((data) => ({
+    ...data,
+    isSameAddress: data.isSameAddress === '1',
+  }))
+
+function getRequiredMessage(field: string): string {
+  const messages: Record<string, string> = {
+    province_code: 'Mohon pilih provinsi',
+    regency_code: 'Mohon pilih kabupaten/kota',
+    district_code: 'Mohon pilih kecamatan',
+    village_code: 'Mohon pilih kelurahan',
+    postalRegion_code: 'Mohon lengkapi kode pos',
+    address: 'Mohon lengkapi alamat',
+  }
+  return messages[field] || `${field} wajib diisi`
+}
+
+type PersonAddressRelativeFormData = z.infer<typeof PersonAddressRelativeSchema>
+
+export { PersonAddressRelativeSchema }
+export type { PersonAddressRelativeFormData }
diff --git a/app/schemas/person-address.schema.ts b/app/schemas/person-address.schema.ts
new file mode 100644
index 00000000..3e991bad
--- /dev/null
+++ b/app/schemas/person-address.schema.ts
@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+const PersonAddressSchema = z.object({
+  locationType_code: z.string({
+    required_error: 'Mohon pilih jenis alamat',
+  }),
+  address: z.string({
+    required_error: 'Mohon lengkapi alamat',
+  }),
+  province_code: z.string({
+    required_error: 'Mohon pilih provinsi',
+  }),
+  regency_code: z.string({
+    required_error: 'Mohon pilih kabupaten/kota',
+  }),
+  district_code: z.string({
+    required_error: 'Mohon pilih kecamatan',
+  }),
+  village_code: z.string({
+    required_error: 'Mohon pilih kelurahan',
+  }),
+  postalRegion_code: z.string({
+    required_error: 'Mohon lengkapi kode pos',
+  }),
+  // .min(5, 'Kode pos harus berupa angka 5 digit')
+  // .regex(/^\d+$/, 'Kode pos harus berupa angka 5 digit'),
+  rt: z.string().optional(),
+  rw: z.string().optional(),
+})
+
+type PersonAddressFormData = z.infer<typeof PersonAddressSchema>
+
+export { PersonAddressSchema }
+export type { PersonAddressFormData }
diff --git a/app/schemas/person-contact.schema.ts b/app/schemas/person-contact.schema.ts
new file mode 100644
index 00000000..fe05c799
--- /dev/null
+++ b/app/schemas/person-contact.schema.ts
@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+const PersonContactBaseSchema = z.object({
+  contactType: z.string().min(1, 'Mohon pilih tipe kontak'),
+  contactNumber: z.string().min(8, 'Nomor minimal 8 digit'),
+})
+
+const PersonContactListSchema = z.object({
+  contacts: z.array(PersonContactBaseSchema).min(1, 'Minimal 1 kontak'),
+})
+
+type PersonContactFormData = z.infer<typeof PersonContactListSchema>
+
+export { PersonContactListSchema, PersonContactBaseSchema }
+export type { PersonContactFormData }
diff --git a/app/schemas/person-family.schema.ts b/app/schemas/person-family.schema.ts
new file mode 100644
index 00000000..06bf9042
--- /dev/null
+++ b/app/schemas/person-family.schema.ts
@@ -0,0 +1,33 @@
+import { z } from 'zod'
+
+const PersonFamilySchema = z.object({
+  relation: z.enum(['mother', 'father', 'guardian', 'emergency_contact']),
+  name: z
+    .string({
+      required_error: 'Mohon lengkapi nama',
+    })
+    .min(1, 'Mohon lengkapi nama'),
+  education: z
+    .string({
+      required_error: 'Mohon pilih pendidikan',
+    })
+    .min(1, 'Mohon pilih pendidikan'),
+  occupation: z.string().optional(),
+})
+
+const PersonFamiliesSchema = z.discriminatedUnion('shareFamilyData', [
+  z.object({
+    shareFamilyData: z.literal('0'),
+    families: z.array(PersonFamilySchema).optional().default([]),
+  }),
+  z.object({
+    shareFamilyData: z.literal('1'),
+    families: z.array(PersonFamilySchema).min(1, 'Minimal 1 kontak keluarga'),
+  }),
+])
+
+type PersonFamilyFormData = z.infer<typeof PersonFamilySchema>
+type PersonFamiliesFormData = z.infer<typeof PersonFamiliesSchema>
+
+export { PersonFamilySchema, PersonFamiliesSchema }
+export type { PersonFamilyFormData, PersonFamiliesFormData }
diff --git a/app/schemas/person-relative.schema.ts b/app/schemas/person-relative.schema.ts
new file mode 100644
index 00000000..06644de6
--- /dev/null
+++ b/app/schemas/person-relative.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+const ResponsibleContactPersonSchema = z.object({
+  relation: z.string({ required_error: 'Pilih jenis Penanggung Jawab' }).min(1, 'Pilih jenis Penanggung Jawab'),
+  name: z.string({ required_error: 'Mohon lengkapi Nama' }).min(3, 'Mohon lengkapi Nama'),
+  address: z.string({ required_error: 'Mohon lengkapi Alamat' }).min(3, 'Mohon lengkapi Alamat'),
+  phone: z
+    .string({ required_error: 'Mohon lengkapi Nomor HP' })
+    .min(8, 'Nomor HP minimal 10 digit')
+    .max(15, 'Nomor HP maksimal 15 digit'),
+})
+
+const ResponsiblePersonSchema = z.object({
+  contacts: z.array(ResponsibleContactPersonSchema).min(1, 'Minimal harus ada 1 penanggung jawab'),
+})
+
+type PersonRelativeFormData = z.infer<typeof ResponsiblePersonSchema>
+
+export { ResponsiblePersonSchema }
+export type { PersonRelativeFormData }
diff --git a/app/schemas/procedure-src.schema.ts b/app/schemas/procedure-src.schema.ts
new file mode 100644
index 00000000..dfbdc43a
--- /dev/null
+++ b/app/schemas/procedure-src.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const ProcedureSrcSchema = z.object({
+  code: z
+    .string({ required_error: 'Kode harus diisi' })
+    .min(1, 'Kode minimum 1 karakter')
+    .max(10, 'Kode maksimum 10 karakter'),
+  name: z
+    .string({ required_error: 'Nama harus diisi' })
+    .min(1, 'Nama minimum 1 karakter')
+    .max(2048, 'Nama maksimum 2048 karakter'),
+  indName: z
+    .string({ required_error: 'Nama (ID) harus diisi' })
+    .min(1, 'Nama (ID) minimum 1 karakter')
+    .max(2048, 'Nama (ID) maksimum 2048 karakter'),
+})
+
+type ProcedureSrcFormData = z.infer<typeof ProcedureSrcSchema> & Partial<ProcedureSrc>
+
+export { ProcedureSrcSchema }
+export type { ProcedureSrcFormData }
diff --git a/app/schemas/soapi.schema.ts b/app/schemas/soapi.schema.ts
new file mode 100644
index 00000000..50ade93e
--- /dev/null
+++ b/app/schemas/soapi.schema.ts
@@ -0,0 +1,190 @@
+import { z } from 'zod'
+import type { Soap } from '~/models/soapi'
+
+const DiagnosisCodeSchema = z.object({
+  code: z.string().default(''),
+  name: z.string().default(''),
+})
+
+const AssessmentSectionSchema = z.object({
+  note: z.string().default(''),
+  codes: z.array(DiagnosisCodeSchema).default([]),
+})
+
+export const EarlySchema = z.object({
+  'prim-compl': z.string({ required_error: 'Keluhan utama harus diisi' }).min(1, 'Keluhan utama harus diisi'),
+  'cur-disea-hist': z.string().default(''),
+  'syst-bp': z.string().default(''),
+  'diast-bp': z.string().default(''),
+  pulse: z.string().default(''),
+  'resp-rate': z.string().default(''),
+  temp: z.string().default(''),
+  weight: z.string().default(''),
+  height: z.string().default(''),
+  'reflect-fisio': z.string().default(''),
+  'reflect-pato': z.string().default(''),
+  'autonom-neuron': z.string().default(''),
+  'medical-act': z.string().default(''),
+  therapy: z.string().default(''),
+})
+
+export const EarlyRehabSchema = z.object({
+  'prim-compl': z.string({ required_error: 'Keluhan utama harus diisi' }).min(1, 'Keluhan utama harus diisi'),
+  'medical-plan': z.string().default(''),
+  'diagnosis-medical': z.string().default(''),
+  'rehab-trouble': z.string().default(''),
+  'medical-trouble': z.string().default(''),
+  'physic-modal': z.string().default(''),
+  exercise: z.string().default(''),
+  'ortho-pesa': z.string().default(''),
+  education: z.string().default(''),
+  other: z.string().default(''),
+  cranialis: z.string().default(''),
+  sensoris: z.string().default(''),
+  'reflect-fisio': z.string().default(''),
+  'reflect-pato': z.string().default(''),
+  otonom: z.string().default(''),
+  localis: z.string().default(''),
+  'medical-trial': z.string().default(''),
+  therapy: z.string().default(''),
+  'syst-bp': z.string().default(''),
+  'diast-bp': z.string().default(''),
+  pulse: z.string().default(''),
+  gcs: z.string().default(''),
+  'respiratory-rate': z.string().default(''),
+  temp: z.string().default(''),
+  weight: z.string().default(''),
+  height: z.string().default(''),
+  ambulance: z.string().default(''),
+  gait: z.string().default(''),
+  'neck-rom': z.string().default(''),
+  'body-rom': z.string().default(''),
+  'aga-rom': z.string().default(''),
+  'agb-rom': z.string().default(''),
+  'neck-mmt': z.string().default(''),
+  'body-mmt': z.string().default(''),
+  'aga-mmt': z.string().default(''),
+  'agb-mmt': z.string().default(''),
+})
+
+export const FunctionSoapiSchema = z.object({
+  'prim-compl': z.string({ required_error: 'Keluhan utama harus diisi' }).min(1, 'Keluhan utama harus diisi'),
+  'past-disease': z.string().default(''),
+  'current-disease': z.string().default(''),
+  gcs: z.string().default(''),
+  'respiratory-rate': z.string().default(''),
+  'respiratory-rate-type': z.string().default(''),
+  pulse: z.string().default(''),
+  'pulse-type': z.string().default(''),
+  'right-arm-bp': z.string().default(''),
+  'left-arm-bp': z.string().default(''),
+  'axillary-temp': z.string().default(''),
+  'rektal-temp': z.string().default(''),
+  skin: z.string().default(''),
+  head: z.string().default(''),
+  ear: z.string().default(''),
+  nose: z.string().default(''),
+  'oral-cavity': z.string().default(''),
+  eye: z.string().default(''),
+  'other-body-part': z.string().default(''),
+  neck: z.string().default(''),
+  thyroid: z.string().default(''),
+  thorax: z.string().default(''),
+  heart: z.string().default(''),
+  lung: z.string().default(''),
+  abdomen: z.string().default(''),
+  heart2: z.string().default(''),
+  lien: z.string().default(''),
+  back: z.string().default(''),
+  extremity: z.string().default(''),
+  gender: z.string().default(''),
+  rectum: z.string().default(''),
+  'system-syaraf': z.string().default(''),
+  'nervous-system': z.string().default(''),
+  'cardio-respiratory': z.string().default(''),
+  imaging: z.string().default(''),
+  laboratory: z.string().default(''),
+})
+
+export const SubjectSchema = z.object({
+  note: z.string().default(''),
+  'prim-compl': z.string({ required_error: 'Keluhan utama harus diisi' }).min(1, 'Keluhan utama harus diisi'),
+  'sec-compl': z.string().default(''),
+  'pri-complain': z.string().default(''),
+  'sec-complain': z.string().default(''),
+  'cur-disea-hist': z.string().default(''),
+  'pas-disea-hist': z.string().default(''),
+  'fam-disea-hist': z.string().default(''),
+  'alg-hist': z.string().default(''),
+  'alg-react': z.string().default(''),
+  'med-hist': z.string().default(''),
+  'blood-type': z.string().default(''),
+})
+
+export const ObjectSchema = z.object({
+  note: z.string().default(''),
+  'consc-level': z.string().default(''),
+  'consc-level-det': z.string().default(''),
+  'syst-bp': z.string().default(''),
+  'diast-bp': z.string().default(''),
+  pulse: z.string().default(''),
+  'resp-rate': z.string().default(''),
+  'hear-rt': z.string().default(''),
+  'neuro-cranialis': z.string().default(''),
+  sensoris: z.string().default(''),
+  'reflect-fisio': z.string().default(''),
+  'reflect-pato': z.string().default(''),
+  'autonom-neuron': z.string().default(''),
+  'neck-rom': z.string().default(''),
+  'body-rom': z.string().default(''),
+  'aga-rom': z.string().default(''),
+  'agb-rom': z.string().default(''),
+  'neck-mmt': z.string().default(''),
+  'body-mmt': z.string().default(''),
+  'aga-mmt': z.string().default(''),
+  'agb-mmt': z.string().default(''),
+  localis: z.string().default(''),
+  'medical-trouble': z.string().default(''),
+  'rehab-medic-trouble': z.string().default(''),
+  temp: z.string().default(''),
+  spo2: z.string().default(''),
+  weight: z.string().default(''),
+  height: z.string().default(''),
+  'head-to-toe': z.record(z.string()).default({}),
+})
+
+const AssessmentSchema = z.object({
+  'early-diag': AssessmentSectionSchema,
+  'late-diag': AssessmentSectionSchema,
+  'sec-diag': AssessmentSectionSchema,
+})
+
+const InstructionCodeGroupSchema = z.object({
+  note: z.string().default(''),
+  codes: z.array(DiagnosisCodeSchema).default([]),
+})
+
+const InstructionSchema = z.object({
+  detail: z.string().default(''),
+  'medical-act': InstructionCodeGroupSchema,
+  'supporting-exam': z.array(DiagnosisCodeSchema).default([]),
+  therapy: z.string().default(''),
+  medication: z.array(DiagnosisCodeSchema).default([]),
+  material: z.array(DiagnosisCodeSchema).default([]),
+  'rehab-program': z.string().default(''),
+  'physic-modal': z.string().default(''),
+  exercise: z.string().default(''),
+  'ortes-protesa': z.string().default(''),
+  education: z.string().default(''),
+  other: z.string().default(''),
+})
+
+export const SoapSchema = z.object({
+  subject: SubjectSchema,
+  object: ObjectSchema,
+  assessment: AssessmentSchema,
+  plan: z.string().default(''),
+  instruction: InstructionSchema,
+})
+
+export type SoapiFormData = z.infer<typeof SoapSchema> & Partial<Soap>
diff --git a/app/schemas/specialist.schema.ts b/app/schemas/specialist.schema.ts
new file mode 100644
index 00000000..1c536bef
--- /dev/null
+++ b/app/schemas/specialist.schema.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import type { Specialist } from '~/models/specialist'
+
+const SpecialistSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  unit_id: z
+    .union([z.string({ required_error: 'Unit harus diisi' }), z.number({ required_error: 'Unit harus diisi' })])
+    .optional()
+    .nullable(),
+})
+
+type SpecialistFormData = z.infer<typeof SpecialistSchema> & Partial<Specialist>
+
+export { SpecialistSchema }
+export type { SpecialistFormData }
diff --git a/app/schemas/subspecialist.schema.ts b/app/schemas/subspecialist.schema.ts
new file mode 100644
index 00000000..e4b3ec77
--- /dev/null
+++ b/app/schemas/subspecialist.schema.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+import type { Subspecialist } from '~/models/subspecialist'
+
+const SubspecialistSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  specialist_id: z
+    .union([
+      z.string({ required_error: 'Spesialis harus diisi' }),
+      z.number({ required_error: 'Spesialis harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+})
+
+type SubspecialistFormData = z.infer<typeof SubspecialistSchema> & Partial<Subspecialist>
+
+export { SubspecialistSchema }
+export type { SubspecialistFormData }
diff --git a/app/schemas/unit.schema.ts b/app/schemas/unit.schema.ts
new file mode 100644
index 00000000..83657224
--- /dev/null
+++ b/app/schemas/unit.schema.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+import type { Unit } from '~/models/unit'
+
+const UnitSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  installation_id: z
+    .union([
+      z.string({ required_error: 'Instalasi harus diisi' }),
+      z.number({ required_error: 'Instalasi harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+})
+
+type UnitFormData = z.infer<typeof UnitSchema> & Partial<Unit>
+
+export { UnitSchema }
+export type { UnitFormData }
diff --git a/app/schemas/uom.schema.ts b/app/schemas/uom.schema.ts
new file mode 100644
index 00000000..4229e420
--- /dev/null
+++ b/app/schemas/uom.schema.ts
@@ -0,0 +1,4 @@
+import { BaseSchema, type BaseFormData } from './base.schema'
+
+export { BaseSchema as UomSchema }
+export type { BaseFormData as UomFormData }
diff --git a/app/services/_crud-base.ts b/app/services/_crud-base.ts
new file mode 100644
index 00000000..e3c57689
--- /dev/null
+++ b/app/services/_crud-base.ts
@@ -0,0 +1,88 @@
+import { xfetch } from '~/composables/useXfetch'
+
+export async function create(path: string, data: any, name: string = 'item') {
+  try {
+    const resp = await xfetch(path, 'POST', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error posting ${name}:`, error)
+    throw new Error(`Failed to post ${name}`)
+  }
+}
+
+export async function getList(path: string, params: any = null, name: string = 'item') {
+  try {
+    let url = path
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(url, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error fetching ${name}s:`, error)
+    throw new Error(`Failed to fetch ${name}s`)
+  }
+}
+
+export async function getDetail(path: string, id: number | string, name: string = 'item', params?: any) {
+  try {
+    let paramStr = ''
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      paramStr += queryString ? `?${queryString}` : ''
+    }
+    const resp = await xfetch(`${path}/${id}${paramStr}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error fetching ${name} detail:`, error)
+    throw new Error(`Failed to get ${name} detail`)
+  }
+}
+
+export async function update(path: string, id: number | string, data: any, name: string = 'item') {
+  try {
+    const resp = await xfetch(`${path}/${id}`, 'PATCH', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
+  }
+}
+
+export async function remove(path: string, id: number | string, name: string = 'item') {
+  try {
+    const resp = await xfetch(`${path}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error deleting ${name}:`, error)
+    throw new Error(`Failed to delete ${name}`)
+  }
+}
diff --git a/app/services/auth.service.ts b/app/services/auth.service.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/app/services/consultation.service.ts b/app/services/consultation.service.ts
new file mode 100644
index 00000000..9bbe2208
--- /dev/null
+++ b/app/services/consultation.service.ts
@@ -0,0 +1,23 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/consultation'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}
diff --git a/app/services/device-order-item.service.ts b/app/services/device-order-item.service.ts
new file mode 100644
index 00000000..33b92b8c
--- /dev/null
+++ b/app/services/device-order-item.service.ts
@@ -0,0 +1,26 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/device-order-item'
+const name = 'device-order-item'
+
+export function create(data: any) {
+  console.log('service create', data)
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/device-order.service.ts b/app/services/device-order.service.ts
new file mode 100644
index 00000000..b8d5372c
--- /dev/null
+++ b/app/services/device-order.service.ts
@@ -0,0 +1,26 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/device-order'
+const name = 'device-order'
+
+export function create(data: any) {
+  console.log('service create', data)
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/device.service.ts b/app/services/device.service.ts
new file mode 100644
index 00000000..8ad00b2b
--- /dev/null
+++ b/app/services/device.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/device'
+const name = 'device'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/diagnose-src.service.ts b/app/services/diagnose-src.service.ts
new file mode 100644
index 00000000..4c5b50d4
--- /dev/null
+++ b/app/services/diagnose-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { DiagnoseSrc } from '~/models/diagnose-src'
+
+const path = '/api/v1/diagnose-src'
+const name = 'diagnose-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: DiagnoseSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/district.service.ts b/app/services/district.service.ts
new file mode 100644
index 00000000..fd817b3a
--- /dev/null
+++ b/app/services/district.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/district'
+const name = 'district'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/division-position.service.ts b/app/services/division-position.service.ts
new file mode 100644
index 00000000..dc3929f8
--- /dev/null
+++ b/app/services/division-position.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/division-position'
+const name = 'division-position'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/division.service.ts b/app/services/division.service.ts
new file mode 100644
index 00000000..e3285d34
--- /dev/null
+++ b/app/services/division.service.ts
@@ -0,0 +1,60 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Division } from '~/models/division'
+import type { TreeItem } from '~/models/_base'
+
+const path = '/api/v1/division'
+const name = 'division'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Division) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
+
+/**
+ * Convert division response (with childrens) to TreeItem[]
+ * @param divisions Array of division objects from API
+ * @returns TreeItem[]
+ */
+export function getValueTreeItems(divisions: any[]): TreeItem[] {
+  return divisions
+    .map((division: Division) => ({
+      value: division.id ? String(division.id) : division.code,
+      label: division.name,
+      hasChildren: Array.isArray(division.childrens) && division.childrens.length > 0,
+      children:
+        Array.isArray(division.childrens) && division.childrens.length > 0
+          ? getValueTreeItems(division.childrens)
+          : undefined,
+    }))
+}
diff --git a/app/services/doctor.service.ts b/app/services/doctor.service.ts
new file mode 100644
index 00000000..64ab22e9
--- /dev/null
+++ b/app/services/doctor.service.ts
@@ -0,0 +1,39 @@
+// Base
+import * as base from './_crud-base'
+import type { Doctor } from "~/models/doctor";
+
+const path = '/api/v1/doctor'
+const name = 'device'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Doctor) => ({
+      value: item.id,
+      label: item.employee.person.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/employee.service.ts b/app/services/employee.service.ts
new file mode 100644
index 00000000..366ef71e
--- /dev/null
+++ b/app/services/employee.service.ts
@@ -0,0 +1,38 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/employee'
+const name = 'employee'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: any) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.person.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/encounter.service.ts b/app/services/encounter.service.ts
new file mode 100644
index 00000000..6e42fd41
--- /dev/null
+++ b/app/services/encounter.service.ts
@@ -0,0 +1,62 @@
+// Base
+import type { CheckInFormData } from '~/schemas/encounter.schema'
+import * as base from './_crud-base'
+
+// Constants
+import { encounterClassCodes } from '~/lib/constants'
+
+const path = '/api/v1/encounter'
+const name = 'encounter'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: any) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
+
+export function getValueLabelListConstants() {
+  const allowed = ['ambulatory', 'emergency', 'inpatient']
+  return Object.entries(encounterClassCodes)
+    .filter(([key]) => allowed.includes(key))
+    .map(([key, value]) => ({ value: key, label: value }))
+}
+
+export async function checkIn(id: number, data: CheckInFormData) {
+  try {
+    const resp = await xfetch(`${path}/${id}/check-in`, 'PATCH', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
+  }
+}
\ No newline at end of file
diff --git a/app/services/infra.service.ts b/app/services/infra.service.ts
new file mode 100644
index 00000000..9147421d
--- /dev/null
+++ b/app/services/infra.service.ts
@@ -0,0 +1,42 @@
+
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Infra } from '~/models/infra'
+
+const path = '/api/v1/infra'
+const name = 'infra'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Infra) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/installation.service.ts b/app/services/installation.service.ts
new file mode 100644
index 00000000..1f1975f5
--- /dev/null
+++ b/app/services/installation.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Installation } from '~/models/installation'
+
+const path = '/api/v1/installation'
+const name = 'installation'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Installation) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/item.service.ts b/app/services/item.service.ts
new file mode 100644
index 00000000..8b44acd8
--- /dev/null
+++ b/app/services/item.service.ts
@@ -0,0 +1,38 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/item'
+const name = 'item'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: any) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/material.service.ts b/app/services/material.service.ts
new file mode 100644
index 00000000..f8e8c013
--- /dev/null
+++ b/app/services/material.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/material'
+const name = 'material'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/medical-action-src.service.ts b/app/services/medical-action-src.service.ts
new file mode 100644
index 00000000..aa196962
--- /dev/null
+++ b/app/services/medical-action-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { MedicalActionSrc } from '~/models/medical-action-src'
+
+const path = '/api/v1/medical-action-src'
+const name = 'medical-action-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: MedicalActionSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/medicine-group.service.ts b/app/services/medicine-group.service.ts
new file mode 100644
index 00000000..55c52a7a
--- /dev/null
+++ b/app/services/medicine-group.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { MedicineGroup } from '~/models/medicine-group'
+
+const path = '/api/v1/medicine-group'
+const name = 'medicine-group'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: MedicineGroup) => ({
+      value: item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/medicine-method.service.ts b/app/services/medicine-method.service.ts
new file mode 100644
index 00000000..a6bc9918
--- /dev/null
+++ b/app/services/medicine-method.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { MedicineMethod } from '~/models/medicine-method'
+
+const path = '/api/v1/medicine-method'
+const name = 'medicine-method'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: MedicineMethod) => ({
+      value: item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/medicine.service.ts b/app/services/medicine.service.ts
new file mode 100644
index 00000000..57a52103
--- /dev/null
+++ b/app/services/medicine.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/medicine'
+const name = 'medicine'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/patient.service.ts b/app/services/patient.service.ts
new file mode 100644
index 00000000..7591f356
--- /dev/null
+++ b/app/services/patient.service.ts
@@ -0,0 +1,107 @@
+import { xfetch } from '~/composables/useXfetch'
+import { uploadCode, type UploadCodeKey } from '~/lib/constants'
+
+const mainUrl = '/api/v1/patient'
+
+export async function getPatients(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(url, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching patients:', error)
+    throw new Error('Failed to fetch patients')
+  }
+}
+
+export async function getPatientDetail(id: number) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching patient detail:', error)
+    throw new Error('Failed to get patient detail')
+  }
+}
+
+export async function postPatient(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting patient:', error)
+    throw new Error('Failed to post patient')
+  }
+}
+
+export async function patchPatient(id: number, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error patching patient:', error)
+    throw new Error('Failed to patch patient')
+  }
+}
+
+export async function removePatient(id: number) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete patient')
+  }
+}
+
+export async function uploadAttachment(file: File, userId: number, key: UploadCodeKey) {
+  try {
+    const resolvedKey = uploadCode[key]
+    if (!resolvedKey) {
+      throw new Error(`Invalid upload code key: ${key}`)
+    }
+
+    // siapkan form-data body
+    const formData = new FormData()
+    formData.append('code', resolvedKey)
+    formData.append('content', file)
+
+    // kirim via xfetch
+    const resp = await xfetch(`${mainUrl}/${userId}/upload`, 'POST', formData)
+
+    // struktur hasil sama seperti patchPatient
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+
+    return result
+  } catch (error) {
+    console.error('Error uploading attachment:', error)
+    throw new Error('Failed to upload attachment')
+  }
+}
diff --git a/app/services/postal-region.service.ts b/app/services/postal-region.service.ts
new file mode 100644
index 00000000..8273dca0
--- /dev/null
+++ b/app/services/postal-region.service.ts
@@ -0,0 +1,17 @@
+// Base service for postal code operations
+import * as base from './_crud-base'
+
+const path = '/api/v1/postal-region'
+const name = 'postal-region'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
diff --git a/app/services/procedure-src.service.ts b/app/services/procedure-src.service.ts
new file mode 100644
index 00000000..a4bca68b
--- /dev/null
+++ b/app/services/procedure-src.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { ProcedureSrc } from '~/models/procedure-src'
+
+const path = '/api/v1/procedure-src'
+const name = 'procedure-src'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: ProcedureSrc) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/province.service.ts b/app/services/province.service.ts
new file mode 100644
index 00000000..0fb26e7a
--- /dev/null
+++ b/app/services/province.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/province'
+const name = 'province'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/regency.service.ts b/app/services/regency.service.ts
new file mode 100644
index 00000000..c5919610
--- /dev/null
+++ b/app/services/regency.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/regency'
+const name = 'regency'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/soapi-early.service.ts b/app/services/soapi-early.service.ts
new file mode 100644
index 00000000..7c55c979
--- /dev/null
+++ b/app/services/soapi-early.service.ts
@@ -0,0 +1,28 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Soapi } from '~/models/soapi'
+
+const path = '/api/v1/soapi'
+const name = 'soapi'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
new file mode 100644
index 00000000..c2c34e3f
--- /dev/null
+++ b/app/services/specialist.service.ts
@@ -0,0 +1,42 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Specialist } from '~/models/specialist'
+
+const path = '/api/v1/specialist'
+const name = 'specialist'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Specialist) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+      parent: item.unit_id ? Number(item.unit_id) : null,
+    }))
+  }
+  return data
+}
diff --git a/app/services/subspecialist.service.ts b/app/services/subspecialist.service.ts
new file mode 100644
index 00000000..94e70a09
--- /dev/null
+++ b/app/services/subspecialist.service.ts
@@ -0,0 +1,42 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Subspecialist } from '~/models/subspecialist'
+
+const path = '/api/v1/subspecialist'
+const name = 'subspecialist'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Subspecialist) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+      parent: item.specialist_id ? Number(item.specialist_id) : null,
+    }))
+  }
+  return data
+}
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
new file mode 100644
index 00000000..438625f1
--- /dev/null
+++ b/app/services/unit.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Unit } from "~/models/unit";
+
+const path = '/api/v1/unit'
+const name = 'unit'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Unit) => ({
+      value: item.id,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/uom.service.ts b/app/services/uom.service.ts
new file mode 100644
index 00000000..581c28f7
--- /dev/null
+++ b/app/services/uom.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Uom } from '~/models/uom'
+
+const path = '/api/v1/uom'
+const name = 'uom'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Uom) => ({
+      value: item.code || item.erp_id,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/village.service.ts b/app/services/village.service.ts
new file mode 100644
index 00000000..b41bd9d5
--- /dev/null
+++ b/app/services/village.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/village'
+const name = 'village'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/stores/user.ts b/app/stores/user.ts
new file mode 100644
index 00000000..14ab7134
--- /dev/null
+++ b/app/stores/user.ts
@@ -0,0 +1,38 @@
+export const useUserStore = defineStore(
+  'user',
+  () => {
+    const user = ref<any | null>(null)
+    // const token = useCookie('authentication')
+
+    const isAuthenticated = computed(() => !!user.value)
+    const userRole = computed(() => {
+      const roles = user.value?.roles || []
+      return roles.map((input: string) => {
+        const parts = input.split('-')
+        return parts.length > 1 ? parts[1]: parts[0]
+      })
+    })
+
+    const login = async (userData: any) => {
+      user.value = userData
+    }
+
+    const logout = () => {
+      user.value = null
+    }
+
+    return {
+      user,
+      isAuthenticated,
+      userRole,
+      login,
+      logout,
+    }
+  },
+  {
+    persist: {
+      key: 'user',
+      pick: ['user'],
+    },
+  },
+)
diff --git a/app/types/error.ts b/app/types/error.ts
new file mode 100644
index 00000000..78b4ed50
--- /dev/null
+++ b/app/types/error.ts
@@ -0,0 +1,27 @@
+/**
+ * Base interface untuk error yang digunakan di seluruh aplikasi
+ */
+export interface XError {
+  /** Pesan error yang akan ditampilkan */
+  message: string
+  /** Kode error (opsional) */
+  code?: string
+  /** Nilai yang diharapkan (untuk validasi) */
+  expectedVal?: string
+  /** Nilai yang diberikan (untuk validasi) */
+  givenVal?: string
+  /** Path field yang error (untuk form validation) */
+  path?: readonly (string | number)[]
+  /** Properties tambahan lainnya */
+  [key: string]: any
+}
+
+/**
+ * Collection of errors dengan key sebagai field name
+ */
+export type XErrors = Record<string, XError>
+
+/**
+ * Form errors type alias untuk kompatibilitas
+ */
+export type FormErrors = XErrors
diff --git a/app/types/form.ts b/app/types/form.ts
new file mode 100644
index 00000000..6941915e
--- /dev/null
+++ b/app/types/form.ts
@@ -0,0 +1,7 @@
+export interface ExposedForm<TValues = any> {
+  // eslint-disable-next-line style/member-delimiter-style
+  validate: () => Promise<{ valid: boolean; values: TValues; errors: any }> | undefined
+  resetForm: () => void
+  setValues: (values: any, shouldValidate?: boolean) => void
+  values: TValues
+}
diff --git a/app/types/index.d.ts b/app/types/index.d.ts
new file mode 100644
index 00000000..4a1d7476
--- /dev/null
+++ b/app/types/index.d.ts
@@ -0,0 +1,16 @@
+// app/types/index.d.ts
+import type { Pinia } from 'pinia'
+
+declare module '#app' {
+  interface NuxtApp {
+    $pinia: Pinia
+  }
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $pinia: Pinia
+  }
+}
+
+export {}
diff --git a/components.json b/components.json
new file mode 100644
index 00000000..a23fb04f
--- /dev/null
+++ b/components.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://radix.shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/assets/css/main.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "~/components/pub",
+    "utils": "~/lib/utils"
+  }
+}
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..52229dc1
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,55 @@
+import antfu from '@antfu/eslint-config'
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  antfu(
+    {
+      unocss: true,
+      formatters: true,
+      // Relaxed stylistic options
+      stylistic: {
+        semi: false,
+        quotes: 'single',
+        // Less strict formatting
+        jsx: false,
+        trailingComma: 'all',
+      },
+    },
+    {
+      rules: {
+        // Basic rules
+        quotes: ['error', 'single', { avoidEscape: true }],
+        'style/quote-props': 'off',
+        'style/no-trailing-spaces': ['error', { ignoreComments: true }],
+
+        'no-console': 'off',
+
+        // Relax strict formatting rules
+        'style/brace-style': 'off', // Allow inline if
+        curly: ['error', 'multi-line'], // Only require braces for multi-line
+        'style/arrow-parens': 'off',
+
+        // UnoCSS - make it warning instead of error, or disable completely
+        'unocss/order': 'off', // atau 'off' untuk disable
+
+        // Vue specific - relax template formatting
+        'vue/html-indent': 'off',
+        'vue/max-attributes-per-line': 'off',
+        'vue/singleline-html-element-content-newline': 'off',
+        'vue/multiline-html-element-content-newline': 'off',
+        'vue/html-self-closing': 'off',
+
+        // Allow more flexible code style
+        'style/max-statements-per-line': ['error', { max: 3 }],
+        'antfu/if-newline': 'off', // Disable newline after if requirement
+        'antfu/top-level-function': false,
+      },
+    },
+    {
+      files: ['**/*.md'],
+      rules: {
+        'style/no-trailing-spaces': 'off',
+      },
+    },
+  ),
+)
diff --git a/nuxt.config.ts b/nuxt.config.ts
new file mode 100644
index 00000000..55cdb6bf
--- /dev/null
+++ b/nuxt.config.ts
@@ -0,0 +1,73 @@
+import process from 'node:process'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  runtimeConfig: {
+    API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
+    public: {
+      API_ORIGIN: process.env.NUXT_API_ORIGIN || 'http://localhost:3000',
+    },
+  },
+  ssr: false,
+
+  // SPA optimizations
+  router: {
+    options: {
+      hashMode: false, // Use history mode for cleaner URLs
+    },
+  },
+
+  // Enable client-side rendering optimizations
+  nitro: {
+    prerender: {
+      crawlLinks: false, // Disable crawling for SPA
+    },
+  },
+
+  // Optimize app loading
+  app: {
+    head: {
+      viewport: 'width=device-width,initial-scale=1',
+      charset: 'utf-8',
+    },
+  },
+
+  modules: [
+    '@unocss/nuxt',
+    '@vueuse/nuxt',
+    '@nuxt/eslint',
+    '@nuxt/icon',
+    '@pinia/nuxt',
+    '@nuxtjs/color-mode',
+    '@nuxtjs/tailwindcss',
+    'shadcn-nuxt',
+  ],
+
+  css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'],
+
+  colorMode: {
+    classSuffix: '',
+  },
+
+  features: {
+    // For UnoCSS
+    inlineStyles: false,
+  },
+
+  eslint: {
+    config: {
+      standalone: false,
+    },
+  },
+
+  imports: {
+    dirs: ['./app/lib'],
+  },
+  shadcn: {
+    prefix: '',
+    componentDir: './app/components/pub/ui',
+  },
+
+  compatibilityDate: '2025-07-15',
+})
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..d415abde
--- /dev/null
+++ b/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "nuxt-app",
+  "type": "module",
+  "private": true,
+  "packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint .",
+    "format": "eslint --fix ."
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.30",
+    "@iconify-json/radix-icons": "^1.2.2",
+    "@internationalized/date": "^3.7.0",
+    "@radix-icons/vue": "^1.0.0",
+    "@unovis/ts": "^1.5.1",
+    "@unovis/vue": "^1.5.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel": "^8.5.2",
+    "embla-carousel-vue": "^8.5.2",
+    "h3": "^1.15.4",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.10.1",
+    "@nuxt/eslint": "^1.2.0",
+    "@nuxt/icon": "^1.15.0",
+    "@nuxt/test-utils": "^3.19.2",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/tailwindcss": "6.14.0",
+    "@pinia/nuxt": "^0.11.2",
+    "@unocss/eslint-plugin": "^66.0.0",
+    "@unocss/nuxt": "^66.0.0",
+    "@vee-validate/zod": "^4.15.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": "^12.8.2",
+    "@vueuse/math": "^12.2.0",
+    "@vueuse/nuxt": "^12.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-format": "^1.0.1",
+    "happy-dom": "^18.0.1",
+    "lucide-vue-next": "^0.482.0",
+    "nuxt": "^4.0.3",
+    "playwright-core": "^1.54.2",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "radix-vue": "^1.9.17",
+    "shadcn-nuxt": "^0.10.4",
+    "tailwind-merge": "^2.6.0",
+    "typescript": "^5.8.2",
+    "unocss": "^66.0.0",
+    "unocss-preset-animations": "^1.1.1",
+    "unocss-preset-shadcn": "^0.5.0",
+    "vaul-vue": "^0.2.0",
+    "vee-validate": "^4.15.0",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1",
+    "vue-sonner": "^1.3.0",
+    "vue-tsc": "^2.1.10",
+    "zod": "^3.25.76"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 00000000..5ae777c3
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,11753 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  '@iconify-json/lucide':
+    specifier: ^1.2.30
+    version: 1.2.68
+  '@iconify-json/radix-icons':
+    specifier: ^1.2.2
+    version: 1.2.5
+  '@internationalized/date':
+    specifier: ^3.7.0
+    version: 3.9.0
+  '@radix-icons/vue':
+    specifier: ^1.0.0
+    version: 1.0.0(vue@3.5.21)
+  '@unovis/ts':
+    specifier: ^1.5.1
+    version: 1.6.1
+  '@unovis/vue':
+    specifier: ^1.5.1
+    version: 1.6.1(@unovis/ts@1.6.1)(vue@3.5.21)
+  date-fns:
+    specifier: ^4.1.0
+    version: 4.1.0
+  embla-carousel:
+    specifier: ^8.5.2
+    version: 8.6.0
+  embla-carousel-vue:
+    specifier: ^8.5.2
+    version: 8.6.0(vue@3.5.21)
+  h3:
+    specifier: ^1.15.4
+    version: 1.15.4
+  pinia:
+    specifier: ^3.0.3
+    version: 3.0.3(typescript@5.9.2)(vue@3.5.21)
+  pinia-plugin-persistedstate:
+    specifier: ^4.4.1
+    version: 4.5.0(@pinia/nuxt@0.11.2)(pinia@3.0.3)
+  tailwindcss-animate:
+    specifier: ^1.0.7
+    version: 1.0.7(tailwindcss@3.4.17)
+
+devDependencies:
+  '@antfu/eslint-config':
+    specifier: ^4.10.1
+    version: 4.19.0(@unocss/eslint-plugin@66.5.1)(@vue/compiler-sfc@3.5.21)(eslint-plugin-format@1.0.2)(eslint@9.36.0)(typescript@5.9.2)(vitest@3.2.4)
+  '@nuxt/eslint':
+    specifier: ^1.2.0
+    version: 1.9.0(@vue/compiler-sfc@3.5.21)(eslint-plugin-format@1.0.2)(eslint@9.36.0)(typescript@5.9.2)(vite@7.1.6)
+  '@nuxt/icon':
+    specifier: ^1.15.0
+    version: 1.15.0(vite@7.1.6)(vue@3.5.21)
+  '@nuxt/test-utils':
+    specifier: ^3.19.2
+    version: 3.19.2(@vue/test-utils@2.4.6)(happy-dom@18.0.1)(playwright-core@1.55.0)(typescript@5.9.2)(vitest@3.2.4)
+  '@nuxtjs/color-mode':
+    specifier: ^3.5.2
+    version: 3.5.2
+  '@nuxtjs/tailwindcss':
+    specifier: 6.14.0
+    version: 6.14.0
+  '@pinia/nuxt':
+    specifier: ^0.11.2
+    version: 0.11.2(pinia@3.0.3)
+  '@unocss/eslint-plugin':
+    specifier: ^66.0.0
+    version: 66.5.1(eslint@9.36.0)(typescript@5.9.2)
+  '@unocss/nuxt':
+    specifier: ^66.0.0
+    version: 66.5.1(postcss@8.5.6)(vite@7.1.6)(webpack@5.101.3)
+  '@vee-validate/zod':
+    specifier: ^4.15.0
+    version: 4.15.1(vue@3.5.21)(zod@3.25.76)
+  '@vue/test-utils':
+    specifier: ^2.4.6
+    version: 2.4.6
+  '@vueuse/core':
+    specifier: ^12.8.2
+    version: 12.8.2(typescript@5.9.2)
+  '@vueuse/math':
+    specifier: ^12.2.0
+    version: 12.8.2(typescript@5.9.2)
+  '@vueuse/nuxt':
+    specifier: ^12.2.0
+    version: 12.8.2(nuxt@4.1.2)(typescript@5.9.2)
+  class-variance-authority:
+    specifier: ^0.7.1
+    version: 0.7.1
+  clsx:
+    specifier: ^2.1.1
+    version: 2.1.1
+  eslint:
+    specifier: ^9.22.0
+    version: 9.36.0
+  eslint-config-prettier:
+    specifier: ^9.1.0
+    version: 9.1.2(eslint@9.36.0)
+  eslint-plugin-format:
+    specifier: ^1.0.1
+    version: 1.0.2(eslint@9.36.0)
+  happy-dom:
+    specifier: ^18.0.1
+    version: 18.0.1
+  lucide-vue-next:
+    specifier: ^0.482.0
+    version: 0.482.0(vue@3.5.21)
+  nuxt:
+    specifier: ^4.0.3
+    version: 4.1.2(@vue/compiler-sfc@3.5.21)(eslint@9.36.0)(typescript@5.9.2)(vite@7.1.6)(vue-tsc@2.2.12)
+  playwright-core:
+    specifier: ^1.54.2
+    version: 1.55.0
+  prettier:
+    specifier: ^3.6.2
+    version: 3.6.2
+  prettier-plugin-tailwindcss:
+    specifier: ^0.5.14
+    version: 0.5.14(prettier@3.6.2)
+  radix-vue:
+    specifier: ^1.9.17
+    version: 1.9.17(vue@3.5.21)
+  shadcn-nuxt:
+    specifier: ^0.10.4
+    version: 0.10.4
+  tailwind-merge:
+    specifier: ^2.6.0
+    version: 2.6.0
+  typescript:
+    specifier: ^5.8.2
+    version: 5.9.2
+  unocss:
+    specifier: ^66.0.0
+    version: 66.5.1(@unocss/webpack@66.5.1)(postcss@8.5.6)(vite@7.1.6)
+  unocss-preset-animations:
+    specifier: ^1.1.1
+    version: 1.2.1(unocss@66.5.1)
+  unocss-preset-shadcn:
+    specifier: ^0.5.0
+    version: 0.5.0(unocss-preset-animations@1.2.1)(unocss@66.5.1)
+  vaul-vue:
+    specifier: ^0.2.0
+    version: 0.2.1(radix-vue@1.9.17)(vue@3.5.21)
+  vee-validate:
+    specifier: ^4.15.0
+    version: 4.15.1(vue@3.5.21)
+  vitest:
+    specifier: ^3.2.4
+    version: 3.2.4(happy-dom@18.0.1)
+  vue:
+    specifier: ^3.5.18
+    version: 3.5.21(typescript@5.9.2)
+  vue-router:
+    specifier: ^4.5.1
+    version: 4.5.1(vue@3.5.21)
+  vue-sonner:
+    specifier: ^1.3.0
+    version: 1.3.2
+  vue-tsc:
+    specifier: ^2.1.10
+    version: 2.2.12(typescript@5.9.2)
+  zod:
+    specifier: ^3.25.76
+    version: 3.25.76
+
+packages:
+
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  /@antfu/eslint-config@4.19.0(@unocss/eslint-plugin@66.5.1)(@vue/compiler-sfc@3.5.21)(eslint-plugin-format@1.0.2)(eslint@9.36.0)(typescript@5.9.2)(vitest@3.2.4):
+    resolution: {integrity: sha512-IQlML0cc7qNA1Uk55raMRZjOmh26rkX3bi2MFYjhO+VOtTQt8Mz2ngxBlIwpTgZFgfuYjle6JPuOuALnEZHDFw==}
+    hasBin: true
+    peerDependencies:
+      '@eslint-react/eslint-plugin': ^1.38.4
+      '@next/eslint-plugin-next': ^15.4.0-canary.115
+      '@prettier/plugin-xml': ^3.4.1
+      '@unocss/eslint-plugin': '>=0.50.0'
+      astro-eslint-parser: ^1.0.2
+      eslint: ^9.10.0
+      eslint-plugin-astro: ^1.2.0
+      eslint-plugin-format: '>=0.1.0'
+      eslint-plugin-react-hooks: ^5.2.0
+      eslint-plugin-react-refresh: ^0.4.19
+      eslint-plugin-solid: ^0.14.3
+      eslint-plugin-svelte: '>=2.35.1'
+      eslint-plugin-vuejs-accessibility: ^2.4.1
+      prettier-plugin-astro: ^0.14.0
+      prettier-plugin-slidev: ^1.0.5
+      svelte-eslint-parser: '>=0.37.0'
+    peerDependenciesMeta:
+      '@eslint-react/eslint-plugin':
+        optional: true
+      '@next/eslint-plugin-next':
+        optional: true
+      '@prettier/plugin-xml':
+        optional: true
+      '@unocss/eslint-plugin':
+        optional: true
+      astro-eslint-parser:
+        optional: true
+      eslint-plugin-astro:
+        optional: true
+      eslint-plugin-format:
+        optional: true
+      eslint-plugin-react-hooks:
+        optional: true
+      eslint-plugin-react-refresh:
+        optional: true
+      eslint-plugin-solid:
+        optional: true
+      eslint-plugin-svelte:
+        optional: true
+      eslint-plugin-vuejs-accessibility:
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-slidev:
+        optional: true
+      svelte-eslint-parser:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@clack/prompts': 0.11.0
+      '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.36.0)
+      '@eslint/markdown': 7.2.0
+      '@stylistic/eslint-plugin': 5.4.0(eslint@9.36.0)
+      '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0)(eslint@9.36.0)(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      '@unocss/eslint-plugin': 66.5.1(eslint@9.36.0)(typescript@5.9.2)
+      '@vitest/eslint-plugin': 1.3.12(eslint@9.36.0)(typescript@5.9.2)(vitest@3.2.4)
+      ansis: 4.1.0
+      cac: 6.7.14
+      eslint: 9.36.0
+      eslint-config-flat-gitignore: 2.1.0(eslint@9.36.0)
+      eslint-flat-config-utils: 2.1.4
+      eslint-merge-processors: 2.0.0(eslint@9.36.0)
+      eslint-plugin-antfu: 3.1.1(eslint@9.36.0)
+      eslint-plugin-command: 3.3.1(eslint@9.36.0)
+      eslint-plugin-format: 1.0.2(eslint@9.36.0)
+      eslint-plugin-import-lite: 0.3.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint-plugin-jsdoc: 51.4.1(eslint@9.36.0)
+      eslint-plugin-jsonc: 2.20.1(eslint@9.36.0)
+      eslint-plugin-n: 17.23.1(eslint@9.36.0)(typescript@5.9.2)
+      eslint-plugin-no-only-tests: 3.3.0
+      eslint-plugin-perfectionist: 4.15.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint-plugin-pnpm: 1.1.1(eslint@9.36.0)
+      eslint-plugin-regexp: 2.10.0(eslint@9.36.0)
+      eslint-plugin-toml: 0.12.0(eslint@9.36.0)
+      eslint-plugin-unicorn: 60.0.0(eslint@9.36.0)
+      eslint-plugin-unused-imports: 4.2.0(@typescript-eslint/eslint-plugin@8.44.0)(eslint@9.36.0)
+      eslint-plugin-vue: 10.4.0(@typescript-eslint/parser@8.44.0)(eslint@9.36.0)(vue-eslint-parser@10.2.0)
+      eslint-plugin-yml: 1.18.0(eslint@9.36.0)
+      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.21)(eslint@9.36.0)
+      globals: 16.4.0
+      jsonc-eslint-parser: 2.4.1
+      local-pkg: 1.1.2
+      parse-gitignore: 2.0.0
+      toml-eslint-parser: 0.10.0
+      vue-eslint-parser: 10.2.0(eslint@9.36.0)
+      yaml-eslint-parser: 1.3.0
+    transitivePeerDependencies:
+      - '@eslint/json'
+      - '@vue/compiler-sfc'
+      - supports-color
+      - typescript
+      - vitest
+    dev: true
+
+  /@antfu/install-pkg@1.1.0:
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+    dependencies:
+      package-manager-detector: 1.3.0
+      tinyexec: 1.0.1
+    dev: true
+
+  /@antfu/utils@8.1.1:
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+    dev: true
+
+  /@antfu/utils@9.2.1:
+    resolution: {integrity: sha512-TMilPqXyii1AsiEii6l6ubRzbo76p6oshUSYPaKsmXDavyMLqjzVDkcp3pHp5ELMUNJHATcEOGxKTTsX9yYhGg==}
+    dev: true
+
+  /@apidevtools/json-schema-ref-parser@14.2.1(@types/json-schema@7.0.15):
+    resolution: {integrity: sha512-HmdFw9CDYqM6B25pqGBpNeLCKvGPlIx1EbLrVL0zPvj50CJQUHyBNBw45Muk0kEIkogo1VZvOKHajdMuAzSxRg==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@types/json-schema': ^7.0.15
+    dependencies:
+      '@types/json-schema': 7.0.15
+      js-yaml: 4.1.0
+    dev: true
+
+  /@babel/code-frame@7.27.1:
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  /@babel/compat-data@7.28.4:
+    resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core@7.28.4:
+    resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator@7.28.3:
+    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  /@babel/helper-annotate-as-pure@7.27.3:
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.28.4
+    dev: true
+
+  /@babel/helper-compilation-targets@7.27.2:
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.28.4
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.26.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.4):
+    resolution: {integrity: sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.4
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-globals@7.28.0:
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-member-expression-to-functions@7.27.1:
+    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-module-imports@7.27.1:
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4):
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-optimise-call-expression@7.27.1:
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.28.4
+    dev: true
+
+  /@babel/helper-plugin-utils@7.27.1:
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-replace-supers@7.27.1(@babel/core@7.28.4):
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-skip-transparent-expression-wrappers@7.27.1:
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-string-parser@7.27.1:
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.27.1:
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option@7.27.1:
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers@7.28.4:
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+    dev: true
+
+  /@babel/parser@7.27.7:
+    resolution: {integrity: sha512-qnzXzDXdr/po3bOTbTIQZ7+TxNKxpkN5IifVLXS+r7qwynkZfPyjZfE7hCXbo7IoO9TNcSyibgONsf2HauUd3Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.28.4
+
+  /@babel/parser@7.28.4:
+    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.28.4
+
+  /@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4):
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+    dev: true
+
+  /@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.4):
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+    dev: true
+
+  /@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.4):
+    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/runtime@7.28.4:
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/template@7.27.2:
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.27.7
+      '@babel/types': 7.28.4
+
+  /@babel/traverse@7.27.7:
+    resolution: {integrity: sha512-X6ZlfR/O/s5EQ/SnUSLzr+6kGnkg8HXGMzpgsMsrJVcfDtH1vIp6ctCN4eZ1LS5c0+te5Cb6Y514fASjMRJ1nw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/parser': 7.27.7
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+      debug: 4.4.3
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/traverse@7.28.4:
+    resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/types@7.28.4:
+    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
+  /@clack/core@0.5.0:
+    resolution: {integrity: sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==}
+    dependencies:
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+    dev: true
+
+  /@clack/prompts@0.11.0:
+    resolution: {integrity: sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==}
+    dependencies:
+      '@clack/core': 0.5.0
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+    dev: true
+
+  /@cloudflare/kv-asset-handler@0.4.0:
+    resolution: {integrity: sha512-+tv3z+SPp+gqTIcImN9o0hqE9xyfQjI1XD9pL6NuKjua9B1y7mNYv0S9cP+QEbA4ppVgGZEmKOvHX5G5Ei1CVA==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      mime: 3.0.0
+    dev: true
+
+  /@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.0):
+    resolution: {integrity: sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+    dependencies:
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.0):
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+    dependencies:
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /@dprint/formatter@0.3.0:
+    resolution: {integrity: sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==}
+    dev: true
+
+  /@dprint/markdown@0.17.8:
+    resolution: {integrity: sha512-ukHFOg+RpG284aPdIg7iPrCYmMs3Dqy43S1ejybnwlJoFiW02b+6Bbr5cfZKFRYNP3dKGM86BqHEnMzBOyLvvA==}
+    dev: true
+
+  /@dprint/toml@0.6.4:
+    resolution: {integrity: sha512-bZXIUjxr0LIuHWshZr/5mtUkOrnh0NKVZEF6ACojW5z7zkJu7s9sV2mMXm8XQDqN4cJzdHYUYzUyEGdfciaLJA==}
+    dev: true
+
+  /@emnapi/core@1.5.0:
+    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
+    requiresBuild: true
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    dev: true
+    optional: true
+
+  /@emnapi/runtime@1.5.0:
+    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+    optional: true
+
+  /@emnapi/wasi-threads@1.1.0:
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+    optional: true
+
+  /@emotion/babel-plugin@11.13.5:
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/runtime': 7.28.4
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@emotion/cache@11.14.0:
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+    dev: false
+
+  /@emotion/css@11.13.5:
+    resolution: {integrity: sha512-wQdD0Xhkn3Qy2VNcIzbLP9MR8TafI0MJb7BEAXKp+w4+XqErksWR4OXomuDzPsN4InLdGhVe6EYcn2ZIUCpB8w==}
+    dependencies:
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@emotion/hash@0.9.2:
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+    dev: false
+
+  /@emotion/memoize@0.9.0:
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+    dev: false
+
+  /@emotion/serialize@1.3.3:
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.1.3
+    dev: false
+
+  /@emotion/sheet@1.4.0:
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+    dev: false
+
+  /@emotion/unitless@0.10.0:
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+    dev: false
+
+  /@emotion/utils@1.4.2:
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+    dev: false
+
+  /@emotion/weak-memoize@0.4.0:
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+    dev: false
+
+  /@es-joy/jsdoccomment@0.50.2:
+    resolution: {integrity: sha512-YAdE/IJSpwbOTiaURNCKECdAwqrJuFiZhylmesBcIRawtYKnBR2wxPhoIewMg+Yu+QuYvHfJNReWpoxGBKOChA==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@types/estree': 1.0.8
+      '@typescript-eslint/types': 8.44.0
+      comment-parser: 1.4.1
+      esquery: 1.6.0
+      jsdoc-type-pratt-parser: 4.1.0
+    dev: true
+
+  /@es-joy/jsdoccomment@0.52.0:
+    resolution: {integrity: sha512-BXuN7BII+8AyNtn57euU2Yxo9yA/KUDNzrpXyi3pfqKmBhhysR6ZWOebFh3vyPoqA3/j1SOvGgucElMGwlXing==}
+    engines: {node: '>=20.11.0'}
+    dependencies:
+      '@types/estree': 1.0.8
+      '@typescript-eslint/types': 8.44.0
+      comment-parser: 1.4.1
+      esquery: 1.6.0
+      jsdoc-type-pratt-parser: 4.1.0
+    dev: true
+
+  /@es-joy/jsdoccomment@0.56.0:
+    resolution: {integrity: sha512-c6EW+aA1w2rjqOMjbL93nZlwxp6c1Ln06vTYs5FjRRhmJXK8V/OrSXdT+pUr4aRYgjCgu8/OkiZr0tzeVrRSbw==}
+    engines: {node: '>=20.11.0'}
+    dependencies:
+      '@types/estree': 1.0.8
+      '@typescript-eslint/types': 8.44.0
+      comment-parser: 1.4.1
+      esquery: 1.6.0
+      jsdoc-type-pratt-parser: 5.1.1
+    dev: true
+
+  /@esbuild/aix-ppc64@0.25.10:
+    resolution: {integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64@0.25.10:
+    resolution: {integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.25.10:
+    resolution: {integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.25.10:
+    resolution: {integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.25.10:
+    resolution: {integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.25.10:
+    resolution: {integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.25.10:
+    resolution: {integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.25.10:
+    resolution: {integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.25.10:
+    resolution: {integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.25.10:
+    resolution: {integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.25.10:
+    resolution: {integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.25.10:
+    resolution: {integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.25.10:
+    resolution: {integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.25.10:
+    resolution: {integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.25.10:
+    resolution: {integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.25.10:
+    resolution: {integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.25.10:
+    resolution: {integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-arm64@0.25.10:
+    resolution: {integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.25.10:
+    resolution: {integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-arm64@0.25.10:
+    resolution: {integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.25.10:
+    resolution: {integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openharmony-arm64@0.25.10:
+    resolution: {integrity: sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.25.10:
+    resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.25.10:
+    resolution: {integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.25.10:
+    resolution: {integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.25.10:
+    resolution: {integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@eslint-community/eslint-plugin-eslint-comments@4.5.0(eslint@9.36.0):
+    resolution: {integrity: sha512-MAhuTKlr4y/CE3WYX26raZjy+I/kS2PLKSzvfmDCGrBLTFHOYwqROZdr4XwPgXwX3K9rjzMr4pSmUWGnzsUyMg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      escape-string-regexp: 4.0.0
+      eslint: 9.36.0
+      ignore: 5.3.2
+    dev: true
+
+  /@eslint-community/eslint-utils@4.9.0(eslint@9.36.0):
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 9.36.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@eslint-community/regexpp@4.12.1:
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
+  /@eslint/compat@1.3.2(eslint@9.36.0):
+    resolution: {integrity: sha512-jRNwzTbd6p2Rw4sZ1CgWRS8YMtqG15YyZf7zvb6gY2rB2u6n+2Z+ELW0GtL0fQgyl0pr4Y/BzBfng/BdsereRA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.40 || 9
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+    dependencies:
+      eslint: 9.36.0
+    dev: true
+
+  /@eslint/config-array@0.21.0:
+    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.3
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/config-helpers@0.3.1:
+    resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
+
+  /@eslint/config-inspector@1.3.0(eslint@9.36.0):
+    resolution: {integrity: sha512-t+5Pra/8VX9Ue8V2p6skCeEMw9vm6HjwNF/n7l5nx78f3lUqLjzSTdMisFeo9AeYOj1hwEBiFYYGZ/Xn88cmHw==}
+    hasBin: true
+    peerDependencies:
+      eslint: ^8.50.0 || ^9.0.0
+    dependencies:
+      '@nodelib/fs.walk': 3.0.1
+      ansis: 4.1.0
+      bundle-require: 5.1.0(esbuild@0.25.10)
+      cac: 6.7.14
+      chokidar: 4.0.3
+      debug: 4.4.3
+      esbuild: 0.25.10
+      eslint: 9.36.0
+      find-up: 7.0.0
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      mlly: 1.8.0
+      mrmime: 2.0.1
+      open: 10.2.0
+      tinyglobby: 0.2.15
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /@eslint/core@0.15.2:
+    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@types/json-schema': 7.0.15
+    dev: true
+
+  /@eslint/eslintrc@3.3.1:
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/js@9.36.0:
+    resolution: {integrity: sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
+
+  /@eslint/markdown@7.2.0:
+    resolution: {integrity: sha512-cmDloByulvKzofM0tIkSGWwxMcrKOLsXZC+EM0FLkRIrxKzW+2RkZAt9TAh37EtQRmx1M4vjBEmlC6R0wiGkog==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@eslint/core': 0.15.2
+      '@eslint/plugin-kit': 0.3.5
+      github-slugger: 2.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-frontmatter: 2.0.1
+      mdast-util-gfm: 3.1.0
+      micromark-extension-frontmatter: 2.0.0
+      micromark-extension-gfm: 3.0.0
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/object-schema@2.1.6:
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
+
+  /@eslint/plugin-kit@0.3.5:
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@eslint/core': 0.15.2
+      levn: 0.4.1
+    dev: true
+
+  /@floating-ui/core@1.7.3:
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+    dev: true
+
+  /@floating-ui/dom@1.7.4:
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+    dev: true
+
+  /@floating-ui/utils@0.2.10:
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+    dev: true
+
+  /@floating-ui/vue@1.1.9(vue@3.5.21):
+    resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/utils': 0.2.10
+      vue-demi: 0.14.10(vue@3.5.21)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@humanfs/core@0.19.1:
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+    dev: true
+
+  /@humanfs/node@0.16.7:
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+    dev: true
+
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
+
+  /@humanwhocodes/retry@0.4.3:
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+    dev: true
+
+  /@iconify-json/lucide@1.2.68:
+    resolution: {integrity: sha512-lR5xNJdn2CT0iR7lM25G4SewBO4G2hbr3fTWOc3AE9BspflEcneh02E3l9TBaCU/JOHozTJevWLrxBGypD7Tng==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: false
+
+  /@iconify-json/radix-icons@1.2.5:
+    resolution: {integrity: sha512-HkUt+ydCivK/S/aFsgaiZRvs7zDEcO07PKkuEuu2EFBWCuC+Pi1mDdXPX0U3qjRr7JknmnoR4sAg53C+Ig35ow==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: false
+
+  /@iconify/collections@1.0.596:
+    resolution: {integrity: sha512-+fc3aqkxIZlKa6n2Ez28OFOM2pDzh+Jf4YI8grhz/9JKhkkxFoLJAWrLFgepd6dp9sOme57gCy/p+mApZeKYAA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  /@iconify/utils@2.3.0:
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@iconify/utils@3.0.2:
+    resolution: {integrity: sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ==}
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 9.2.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@iconify/vue@5.0.0(vue@3.5.21):
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /@internationalized/date@3.9.0:
+    resolution: {integrity: sha512-yaN3brAnHRD+4KyyOsJyk49XUvj2wtbNACSqg0bz3u8t2VuzhC8Q5dfRnrSxjnnbDb+ienBnkn1TzQfE154vyg==}
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  /@internationalized/number@3.6.5:
+    resolution: {integrity: sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==}
+    dependencies:
+      '@swc/helpers': 0.5.17
+    dev: true
+
+  /@ioredis/commands@1.4.0:
+    resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
+    dev: true
+
+  /@isaacs/balanced-match@4.0.1:
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+    dev: true
+
+  /@isaacs/brace-expansion@5.0.0:
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+    dev: true
+
+  /@isaacs/cliui@8.0.2:
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: /string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: /strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: /wrap-ansi@7.0.0
+
+  /@isaacs/fs-minipass@4.0.1:
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      minipass: 7.1.2
+    dev: true
+
+  /@jridgewell/gen-mapping@0.3.13:
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  /@jridgewell/remapping@2.3.5:
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  /@jridgewell/source-map@0.3.11:
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.5.5:
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  /@jridgewell/trace-mapping@0.3.31:
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  /@juggle/resize-observer@3.4.0:
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+    dev: false
+
+  /@koa/router@12.0.2:
+    resolution: {integrity: sha512-sYcHglGKTxGF+hQ6x67xDfkE9o+NhVlRHBqq6gLywaMc6CojK/5vFZByphdonKinYlMLkEkacm+HEse9HzwgTA==}
+    engines: {node: '>= 12'}
+    dependencies:
+      debug: 4.4.3
+      http-errors: 2.0.0
+      koa-compose: 4.1.0
+      methods: 1.1.2
+      path-to-regexp: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@kwsites/file-exists@1.1.1:
+    resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@kwsites/promise-deferred@1.1.1:
+    resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
+    dev: true
+
+  /@mapbox/geojson-rewind@0.5.2:
+    resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
+    hasBin: true
+    dependencies:
+      get-stream: 6.0.1
+      minimist: 1.2.8
+    dev: false
+
+  /@mapbox/jsonlint-lines-primitives@2.0.2:
+    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /@mapbox/mapbox-gl-supported@2.0.1:
+    resolution: {integrity: sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==}
+    dev: false
+
+  /@mapbox/node-pre-gyp@2.0.0:
+    resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dependencies:
+      consola: 3.4.2
+      detect-libc: 2.1.0
+      https-proxy-agent: 7.0.6
+      node-fetch: 2.7.0
+      nopt: 8.1.0
+      semver: 7.7.2
+      tar: 7.4.3
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
+  /@mapbox/point-geometry@0.1.0:
+    resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
+    dev: false
+
+  /@mapbox/tiny-sdf@2.0.7:
+    resolution: {integrity: sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==}
+    dev: false
+
+  /@mapbox/unitbezier@0.0.1:
+    resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
+    dev: false
+
+  /@mapbox/vector-tile@1.3.1:
+    resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==}
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+    dev: false
+
+  /@mapbox/whoots-js@3.1.0:
+    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  /@napi-rs/wasm-runtime@0.2.12:
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+    requiresBuild: true
+    dependencies:
+      '@emnapi/core': 1.5.0
+      '@emnapi/runtime': 1.5.0
+      '@tybys/wasm-util': 0.10.1
+    dev: true
+    optional: true
+
+  /@napi-rs/wasm-runtime@1.0.5:
+    resolution: {integrity: sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==}
+    requiresBuild: true
+    dependencies:
+      '@emnapi/core': 1.5.0
+      '@emnapi/runtime': 1.5.0
+      '@tybys/wasm-util': 0.10.1
+    dev: true
+    optional: true
+
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  /@nodelib/fs.scandir@4.0.1:
+    resolution: {integrity: sha512-vAkI715yhnmiPupY+dq+xenu5Tdf2TBQ66jLvBIcCddtz+5Q8LbMKaf9CIJJreez8fQ8fgaY+RaywQx8RJIWpw==}
+    engines: {node: '>=18.18.0'}
+    dependencies:
+      '@nodelib/fs.stat': 4.0.0
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  /@nodelib/fs.stat@4.0.0:
+    resolution: {integrity: sha512-ctr6bByzksKRCV0bavi8WoQevU6plSp2IkllIsEqaiKe2mwNNnaluhnRhcsgGZHrrHk57B3lf95MkLMO3STYcg==}
+    engines: {node: '>=18.18.0'}
+    dev: true
+
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  /@nodelib/fs.walk@3.0.1:
+    resolution: {integrity: sha512-nIh/M6Kh3ZtOmlY00DaUYB4xeeV6F3/ts1l29iwl3/cfyY/OuCfUx+v08zgx8TKPTifXRcjjqVQ4KB2zOYSbyw==}
+    engines: {node: '>=18.18.0'}
+    dependencies:
+      '@nodelib/fs.scandir': 4.0.1
+      fastq: 1.19.1
+    dev: true
+
+  /@nuxt/cli@3.28.0:
+    resolution: {integrity: sha512-WQ751WxWLBIeH3TDFt/LWQ2znyAKxpR5+gpv80oerwnVQs4GKajAfR6dIgExXZkjaPUHEFv2lVD9vM+frbprzw==}
+    engines: {node: ^16.10.0 || >=18.0.0}
+    hasBin: true
+    dependencies:
+      c12: 3.3.0(magicast@0.3.5)
+      citty: 0.1.6
+      clipboardy: 4.0.0
+      confbox: 0.2.2
+      consola: 3.4.2
+      defu: 6.1.4
+      exsolve: 1.0.7
+      fuse.js: 7.1.0
+      get-port-please: 3.2.0
+      giget: 2.0.0
+      h3: 1.15.4
+      httpxy: 0.1.7
+      jiti: 2.5.1
+      listhen: 1.9.0
+      nypm: 0.6.2
+      ofetch: 1.4.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.3.0
+      scule: 1.3.0
+      semver: 7.7.2
+      std-env: 3.9.0
+      tinyexec: 1.0.1
+      ufo: 1.6.1
+      youch: 4.1.0-beta.11
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /@nuxt/devalue@2.0.2:
+    resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
+    dev: true
+
+  /@nuxt/devtools-kit@2.6.5(magicast@0.3.5)(vite@7.1.6):
+    resolution: {integrity: sha512-t+NxoENyzJ8KZDrnbVYv3FJI5VXqSi6X4w6ZsuIIh0aKABu6+6k9nR/LoEhrM0oekn/2LDhA0NmsRZyzCXt2xQ==}
+    peerDependencies:
+      vite: '>=6.0'
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      execa: 8.0.1
+      vite: 7.1.6(jiti@2.5.1)
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /@nuxt/devtools-wizard@2.6.5:
+    resolution: {integrity: sha512-nYYGxT4lmQDvfHL6qolNWLu0QTavsdN/98F57falPuvdgs5ev1NuYsC12hXun+5ENcnigEcoM9Ij92qopBgqmQ==}
+    hasBin: true
+    dependencies:
+      consola: 3.4.2
+      diff: 8.0.2
+      execa: 8.0.1
+      magicast: 0.3.5
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      prompts: 2.4.2
+      semver: 7.7.2
+    dev: true
+
+  /@nuxt/devtools@2.6.5(vite@7.1.6)(vue@3.5.21):
+    resolution: {integrity: sha512-Xh9XF1SzCTL5Zj6EULqsN2UjiNj4zWuUpS69rGAy5C55UTaj+Wn46IkDc6Q0+EKkGI279zlG6SzPRFawqPPUEw==}
+    hasBin: true
+    peerDependencies:
+      vite: '>=6.0'
+    dependencies:
+      '@nuxt/devtools-kit': 2.6.5(magicast@0.3.5)(vite@7.1.6)
+      '@nuxt/devtools-wizard': 2.6.5
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      '@vue/devtools-core': 7.7.7(vite@7.1.6)(vue@3.5.21)
+      '@vue/devtools-kit': 7.7.7
+      birpc: 2.5.0
+      consola: 3.4.2
+      destr: 2.0.5
+      error-stack-parser-es: 1.0.5
+      execa: 8.0.1
+      fast-npm-meta: 0.4.6
+      get-port-please: 3.2.0
+      hookable: 5.5.3
+      image-meta: 0.2.1
+      is-installed-globally: 1.0.0
+      launch-editor: 2.11.1
+      local-pkg: 1.1.2
+      magicast: 0.3.5
+      nypm: 0.6.2
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.3.0
+      semver: 7.7.2
+      simple-git: 3.28.0
+      sirv: 3.0.2
+      structured-clone-es: 1.0.0
+      tinyglobby: 0.2.15
+      vite: 7.1.6(jiti@2.5.1)
+      vite-plugin-inspect: 11.3.3(@nuxt/kit@3.19.2)(vite@7.1.6)
+      vite-plugin-vue-tracer: 1.0.0(vite@7.1.6)(vue@3.5.21)
+      which: 5.0.0
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+      - vue
+    dev: true
+
+  /@nuxt/eslint-config@1.9.0(@vue/compiler-sfc@3.5.21)(eslint-plugin-format@1.0.2)(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-KLiYlX/MmWR9dhC0u7GSZQl6wyVLGAHme5aAL5fAUT1PLYgcFiJIUg1Z+b296LmwHGTa+oGPRBIk3yoDmX9/9Q==}
+    peerDependencies:
+      eslint: ^9.0.0
+      eslint-plugin-format: '*'
+    peerDependenciesMeta:
+      eslint-plugin-format:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@clack/prompts': 0.11.0
+      '@eslint/js': 9.36.0
+      '@nuxt/eslint-plugin': 1.9.0(eslint@9.36.0)(typescript@5.9.2)
+      '@stylistic/eslint-plugin': 5.4.0(eslint@9.36.0)
+      '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0)(eslint@9.36.0)(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint: 9.36.0
+      eslint-config-flat-gitignore: 2.1.0(eslint@9.36.0)
+      eslint-flat-config-utils: 2.1.4
+      eslint-merge-processors: 2.0.0(eslint@9.36.0)
+      eslint-plugin-format: 1.0.2(eslint@9.36.0)
+      eslint-plugin-import-lite: 0.3.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint-plugin-import-x: 4.16.1(eslint@9.36.0)
+      eslint-plugin-jsdoc: 54.7.0(eslint@9.36.0)
+      eslint-plugin-regexp: 2.10.0(eslint@9.36.0)
+      eslint-plugin-unicorn: 60.0.0(eslint@9.36.0)
+      eslint-plugin-vue: 10.4.0(@typescript-eslint/parser@8.44.0)(eslint@9.36.0)(vue-eslint-parser@10.2.0)
+      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.21)(eslint@9.36.0)
+      globals: 16.4.0
+      local-pkg: 1.1.2
+      pathe: 2.0.3
+      vue-eslint-parser: 10.2.0(eslint@9.36.0)
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - '@vue/compiler-sfc'
+      - eslint-import-resolver-node
+      - supports-color
+      - typescript
+    dev: true
+
+  /@nuxt/eslint-plugin@1.9.0(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-DY4ZSavgFyKQxI/NCOpSCUHg3dpS2O4lAdic5UmvP2NWj1xwtvmA9UwEZQ2nW2/f/Km6N+Q53UsgFSIBjz8jDQ==}
+    peerDependencies:
+      eslint: ^9.0.0
+    dependencies:
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/utils': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint: 9.36.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@nuxt/eslint@1.9.0(@vue/compiler-sfc@3.5.21)(eslint-plugin-format@1.0.2)(eslint@9.36.0)(typescript@5.9.2)(vite@7.1.6):
+    resolution: {integrity: sha512-8Wm2fDD9za+vJOOhRS2jj+MzyjCNvDhS+04Y55q9W1Ai5hFjTZ1a94jlgSwaqI1B3Zt7y5fqFoEb4wKpZ3ycWg==}
+    peerDependencies:
+      eslint: ^9.0.0
+      eslint-webpack-plugin: ^4.1.0
+      vite-plugin-eslint2: ^5.0.0
+    peerDependenciesMeta:
+      eslint-webpack-plugin:
+        optional: true
+      vite-plugin-eslint2:
+        optional: true
+    dependencies:
+      '@eslint/config-inspector': 1.3.0(eslint@9.36.0)
+      '@nuxt/devtools-kit': 2.6.5(magicast@0.3.5)(vite@7.1.6)
+      '@nuxt/eslint-config': 1.9.0(@vue/compiler-sfc@3.5.21)(eslint-plugin-format@1.0.2)(eslint@9.36.0)(typescript@5.9.2)
+      '@nuxt/eslint-plugin': 1.9.0(eslint@9.36.0)(typescript@5.9.2)
+      '@nuxt/kit': 4.1.2
+      chokidar: 4.0.3
+      eslint: 9.36.0
+      eslint-flat-config-utils: 2.1.4
+      eslint-typegen: 2.3.0(eslint@9.36.0)
+      find-up: 7.0.0
+      get-port-please: 3.2.0
+      mlly: 1.8.0
+      pathe: 2.0.3
+      unimport: 5.3.0
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - '@vue/compiler-sfc'
+      - bufferutil
+      - eslint-import-resolver-node
+      - eslint-plugin-format
+      - magicast
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vite
+    dev: true
+
+  /@nuxt/icon@1.15.0(vite@7.1.6)(vue@3.5.21):
+    resolution: {integrity: sha512-kA0rxqr1B601zNJNcOXera8CyYcxUCEcT7dXEC7rwAz71PRCN5emf7G656eKEQgtqrD4JSj6NQqWDgrmFcf/GQ==}
+    dependencies:
+      '@iconify/collections': 1.0.596
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 2.3.0
+      '@iconify/vue': 5.0.0(vue@3.5.21)
+      '@nuxt/devtools-kit': 2.6.5(magicast@0.3.5)(vite@7.1.6)
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      consola: 3.4.2
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.9.0
+      tinyglobby: 0.2.15
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+      - vite
+      - vue
+    dev: true
+
+  /@nuxt/kit@3.19.2(magicast@0.3.5):
+    resolution: {integrity: sha512-+QiqO0WcIxsKLUqXdVn3m4rzTRm2fO9MZgd330utCAaagGmHsgiMJp67kE14boJEPutnikfz3qOmrzBnDIHUUg==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      c12: 3.3.0(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.7
+      ignore: 7.0.5
+      jiti: 2.5.1
+      klona: 2.0.6
+      knitwork: 1.2.0
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.2
+      std-env: 3.9.0
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      unctx: 2.4.1
+      unimport: 5.3.0
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
+  /@nuxt/kit@4.1.2:
+    resolution: {integrity: sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      c12: 3.3.0(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.7
+      ignore: 7.0.5
+      jiti: 2.5.1
+      klona: 2.0.6
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.2
+      std-env: 3.9.0
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      unctx: 2.4.1
+      unimport: 5.3.0
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /@nuxt/schema@4.1.2:
+    resolution: {integrity: sha512-uFr13C6c52OFbF3hZVIV65KvhQRyrwp1GlAm7EVNGjebY8279QEel57T4R9UA1dn2Et6CBynBFhWoFwwo97Pig==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+    dependencies:
+      '@vue/shared': 3.5.21
+      consola: 3.4.2
+      defu: 6.1.4
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      std-env: 3.9.0
+      ufo: 1.6.1
+    dev: true
+
+  /@nuxt/telemetry@2.6.6:
+    resolution: {integrity: sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      citty: 0.1.6
+      consola: 3.4.2
+      destr: 2.0.5
+      dotenv: 16.6.1
+      git-url-parse: 16.1.0
+      is-docker: 3.0.0
+      ofetch: 1.4.1
+      package-manager-detector: 1.3.0
+      pathe: 2.0.3
+      rc9: 2.1.2
+      std-env: 3.9.0
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /@nuxt/test-utils@3.19.2(@vue/test-utils@2.4.6)(happy-dom@18.0.1)(playwright-core@1.55.0)(typescript@5.9.2)(vitest@3.2.4):
+    resolution: {integrity: sha512-jvpCbTNd1e8t2vrGAMpVq8j7N25Jao0NpblRiIYwogXgNXOPrH1XBZxgufyLA701g64SeiplUe+pddtnJnQu/g==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      '@cucumber/cucumber': ^10.3.1 || ^11.0.0
+      '@jest/globals': ^29.5.0 || ^30.0.0
+      '@playwright/test': ^1.43.1
+      '@testing-library/vue': ^7.0.0 || ^8.0.1
+      '@vitest/ui': '*'
+      '@vue/test-utils': ^2.4.2
+      happy-dom: ^9.10.9 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      jsdom: ^22.0.0 || ^23.0.0 || ^24.0.0 || ^25.0.0 || ^26.0.0
+      playwright-core: ^1.43.1
+      vitest: ^3.2.0
+    peerDependenciesMeta:
+      '@cucumber/cucumber':
+        optional: true
+      '@jest/globals':
+        optional: true
+      '@playwright/test':
+        optional: true
+      '@testing-library/vue':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      '@vue/test-utils':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+      playwright-core:
+        optional: true
+      vitest:
+        optional: true
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      '@vue/test-utils': 2.4.6
+      c12: 3.3.0(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      estree-walker: 3.0.3
+      fake-indexeddb: 6.2.2
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      happy-dom: 18.0.1
+      local-pkg: 1.1.2
+      magic-string: 0.30.19
+      node-fetch-native: 1.6.7
+      node-mock-http: 1.0.3
+      ofetch: 1.4.1
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      playwright-core: 1.55.0
+      radix3: 1.1.2
+      scule: 1.3.0
+      std-env: 3.9.0
+      tinyexec: 1.0.1
+      ufo: 1.6.1
+      unplugin: 2.3.10
+      vitest: 3.2.4(happy-dom@18.0.1)
+      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(happy-dom@18.0.1)(playwright-core@1.55.0)(typescript@5.9.2)(vitest@3.2.4)
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - magicast
+      - typescript
+    dev: true
+
+  /@nuxt/vite-builder@4.1.2(eslint@9.36.0)(typescript@5.9.2)(vue-tsc@2.2.12)(vue@3.5.21):
+    resolution: {integrity: sha512-to9NKVtzMBtyuhIIVgwo/ph5UCONcxkVsoAjm8HnSkDi0o9nDPhHOAg1AUMlvPnHpdXOzwnSrXo/t8E7W+UZ/A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vue: ^3.3.4
+    dependencies:
+      '@nuxt/kit': 4.1.2
+      '@rollup/plugin-replace': 6.0.2(rollup@4.52.0)
+      '@vitejs/plugin-vue': 6.0.1(vite@7.1.6)(vue@3.5.21)
+      '@vitejs/plugin-vue-jsx': 5.1.1(vite@7.1.6)(vue@3.5.21)
+      autoprefixer: 10.4.21(postcss@8.5.6)
+      consola: 3.4.2
+      cssnano: 7.1.1(postcss@8.5.6)
+      defu: 6.1.4
+      esbuild: 0.25.10
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.7
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      jiti: 2.5.1
+      knitwork: 1.2.0
+      magic-string: 0.30.19
+      mlly: 1.8.0
+      mocked-exports: 0.1.1
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      postcss: 8.5.6
+      rollup-plugin-visualizer: 6.0.3(rollup@4.52.0)
+      std-env: 3.9.0
+      ufo: 1.6.1
+      unenv: 2.0.0-rc.21
+      vite: 7.1.6(jiti@2.5.1)
+      vite-node: 3.2.4(jiti@2.5.1)
+      vite-plugin-checker: 0.10.3(eslint@9.36.0)(typescript@5.9.2)(vite@7.1.6)(vue-tsc@2.2.12)
+      vue: 3.5.21(typescript@5.9.2)
+      vue-bundle-renderer: 2.1.2
+    transitivePeerDependencies:
+      - '@biomejs/biome'
+      - '@types/node'
+      - eslint
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - optionator
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - vls
+      - vti
+      - vue-tsc
+      - yaml
+    dev: true
+
+  /@nuxtjs/color-mode@3.5.2:
+    resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      pathe: 1.1.2
+      pkg-types: 1.3.1
+      semver: 7.7.2
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /@nuxtjs/tailwindcss@6.14.0:
+    resolution: {integrity: sha512-30RyDK++LrUVRgc2A85MktGWIZoRQgeQKjE4CjjD64OXNozyl+4ScHnnYgqVToMM6Ch2ZG2W4wV2J0EN6F0zkQ==}
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      autoprefixer: 10.4.21(postcss@8.5.6)
+      c12: 3.3.0(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      h3: 1.15.4
+      klona: 2.0.6
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      postcss: 8.5.6
+      postcss-nesting: 13.0.2(postcss@8.5.6)
+      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.17)
+      tailwindcss: 3.4.17
+      ufo: 1.6.1
+      unctx: 2.4.1
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+      - ts-node
+    dev: true
+
+  /@one-ini/wasm@0.1.1:
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+    dev: true
+
+  /@oxc-minify/binding-android-arm64@0.87.0:
+    resolution: {integrity: sha512-ZbJmAfXvNAamOSnXId3BiM3DiuzlD1isqKjtmRFb/hpvChHHA23FSPrFcO16w+ugZKg33sZ93FinFkKtlC4hww==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-darwin-arm64@0.87.0:
+    resolution: {integrity: sha512-ewmNsTY8YbjWOI8+EOWKTVATOYvG4Qq4zQHH5VFBeqhQPVusY1ORD6Ei+BijVKrnlbpjibLlkTl8IWqXCGK89A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-darwin-x64@0.87.0:
+    resolution: {integrity: sha512-qDH4w4EYttSC3Cs2VCh+CiMYKrcL2SNmnguBZXoUXe/RNk3csM+RhgcwdpX687xGvOhTFhH5PCIA84qh3ZpIbQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-freebsd-x64@0.87.0:
+    resolution: {integrity: sha512-5kxjHlSev2A09rDeITk+LMHxSrU3Iu8pUb0Zp4m+ul8FKlB9FrvFkAYwbctin6g47O98s3Win7Ewhy0w8JaiUA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-arm-gnueabihf@0.87.0:
+    resolution: {integrity: sha512-NjbGXnNaAl5EgyonaDg2cPyH2pTf5a/+AP/5SRCJ0KetpXV22ZSUCvcy04Yt4QqjMcDs+WnJaGVxwx15Ofr6Gw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-arm-musleabihf@0.87.0:
+    resolution: {integrity: sha512-llAjfCA0iV2LMMl+LTR3JhqAc2iQmj+DTKd0VWOrbNOuNczeE9D5kJFkqYplD73LrkuqxrX9oDeUjjeLdVBPXw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-arm64-gnu@0.87.0:
+    resolution: {integrity: sha512-tf2Shom09AaSmu7U1hYYcEFF/cd+20HtmQ8eyGsRkqD5bqUj6lDu8TNSU9FWZ9tcZ83NzyFMwXZWHyeeIIbpxw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-arm64-musl@0.87.0:
+    resolution: {integrity: sha512-pgWeYfSprtpnJVea9Q5eI6Eo80lDGlMw2JdcSMXmShtBjEhBl6bvDNHlV+6kNfh7iT65y/uC6FR8utFrRghu8A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-riscv64-gnu@0.87.0:
+    resolution: {integrity: sha512-O1QPczlT+lqNZVeKOdFxxL+s1RIlnixaJYFLrcqDcRyn82MGKLz7sAenBTFRQoIfLnSxtMGL6dqHOefYkQx7Cg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-s390x-gnu@0.87.0:
+    resolution: {integrity: sha512-tcwt3ZUWOKfNLXN2edxFVHMlIuPvbuyMaKmRopgljSCfFcNHWhfTNlxlvmECRNhuQ91EcGwte6F1dwoeMCNd7A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-x64-gnu@0.87.0:
+    resolution: {integrity: sha512-Xf4AXF14KXUzSnfgTcFLFSM0TykJhFw14+xwNvlAb6WdqXAKlMrz9joIAezc8dkW1NNscCVTsqBUPJ4RhvCM1Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-linux-x64-musl@0.87.0:
+    resolution: {integrity: sha512-LIqvpx9UihEW4n9QbEljDnfUdAWqhr6dRqmzSFwVAeLZRUECluLCDdsdwemrC/aZkvnisA4w0LFcFr3HmeTLJg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-wasm32-wasi@0.87.0:
+    resolution: {integrity: sha512-h0xluvc+YryfH5G5dndjGHuA/D4Kp85EkPMxqoOjNudOKDCtdobEaC9horhCqnOOQ0lgn+PGFl3w8u4ToOuRrA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.0.5
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-win32-arm64-msvc@0.87.0:
+    resolution: {integrity: sha512-fgxSx+TUc7e2rNtRAMnhHrjqh1e8p/JKmWxRZXtkILveMr/TOHGiDis7U3JJbwycmTZ+HSsJ/PNFQl+tKzmDxw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-minify/binding-win32-x64-msvc@0.87.0:
+    resolution: {integrity: sha512-K6TTrlitEJgD0FGIW2r0t3CIJNqBkzHT97h49gZLS24ey2UG1zKt27iSHkpXMJYDiG97ZD2yv3pSph1ctMlFXw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-android-arm64@0.87.0:
+    resolution: {integrity: sha512-3APxTyYaAjpW5zifjzfsPgoIa4YHwA5GBjtgLRQpGVXCykXBIEbUTokoAs411ZuOwS3sdTVXBTGAdziXRd8rUg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-darwin-arm64@0.87.0:
+    resolution: {integrity: sha512-99e8E76M+k3Gtwvs5EU3VTs2hQkJmvnrl/eu7HkBUc9jLFHA4nVjYSgukMuqahWe270udUYEPRfcWKmoE1Nukg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-darwin-x64@0.87.0:
+    resolution: {integrity: sha512-2rRo6Dz560/4ot5Q0KPUTEunEObkP8mDC9mMiH0RJk1FiOb9c+xpPbkYoUHNKuVMm8uIoiBCxIAbPtBhs9QaXQ==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-freebsd-x64@0.87.0:
+    resolution: {integrity: sha512-uR+WZAvWkFQPVoeqXgQFr7iy+3hEI295qTbQ4ujmklgM5eTX3YgMFoIV00Stloxfd1irSDDSaK7ySnnzF6mRJg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-arm-gnueabihf@0.87.0:
+    resolution: {integrity: sha512-Emm1NpVGKbwzQOIZJI8ZuZu0z8FAd5xscqdS6qpDFpDdEMxk6ab7o3nM8V09RhNCORAzeUlk4TBHQ2Crzjd50A==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-arm-musleabihf@0.87.0:
+    resolution: {integrity: sha512-1PPCxRZSJXzQaqc8y+wH7EqPgSfQ/JU3pK6WTN/1SUe/8paNVSKKqk175a8BbRVxGUtPnwEG89pi+xfPTSE7GA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-arm64-gnu@0.87.0:
+    resolution: {integrity: sha512-fcnnsfcyLamJOMVKq+BQ8dasb8gRnZtNpCUfZhaEFAdXQ7J2RmZreFzlygcn80iti0V7c5LejcjHbF4IdK3GAw==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-arm64-musl@0.87.0:
+    resolution: {integrity: sha512-tBPkSPgRSSbmrje8CUovISi/Hj/tWjZJ3n/qnrjx2B+u86hWtwLsngtPDQa5d4seSyDaHSx6tNEUcH7+g5Ee0Q==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-riscv64-gnu@0.87.0:
+    resolution: {integrity: sha512-z4UKGM4wv2wEAQAlx2pBq6+pDJw5J/5oDEXqW6yBSLbWLjLDo4oagmRSE3+giOWteUa+0FVJ+ypq4iYxBkYSWg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-s390x-gnu@0.87.0:
+    resolution: {integrity: sha512-6W1ENe/nZtr2TBnrEzmdGEraEAdZOiH3YoUNNeQWuqwLkmpoHTJJdclieToPe/l2IKJ4WL3FsSLSGHE8yt/OEg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-x64-gnu@0.87.0:
+    resolution: {integrity: sha512-s3kB/Ii3X3IOZ27Iu7wx2zYkIcDO22Emu32SNC6kkUSy09dPBc1yaW14TnAkPMe/rvtuzR512JPWj3iGpl+Dng==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-x64-musl@0.87.0:
+    resolution: {integrity: sha512-3+M9hfrZSDi4+Uy4Ll3rtOuVG3IHDQlj027jgtmAAHJK1eqp4CQfC7rrwE+LFUqUwX+KD2GwlxR+eHyyEf5Gbg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-wasm32-wasi@0.87.0:
+    resolution: {integrity: sha512-2jgeEeOa4GbQQg2Et/gFTgs5wKS/+CxIg+CN2mMOJ4EqbmvUVeGiumO01oFOWTYnJy1oONwIocBzrnMuvOcItA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.0.5
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-win32-arm64-msvc@0.87.0:
+    resolution: {integrity: sha512-KZp9poaBaVvuFM0TrsHCDOjPQK5eMDXblz21boMhKHGW5/bOlkMlg3CYn5j0f67FkK68NSdNKREMxmibBeXllQ==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-win32-x64-msvc@0.87.0:
+    resolution: {integrity: sha512-86uisngtp/8XdcerIKxMyJTqgDSTJatkfpylpUH0d96W8Bb9E+bVvM2fIIhLWB0Eb03PeY2BdIT7DNIln9TnHg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/wasm@0.1.0:
+    resolution: {integrity: sha512-oA7XhTbg9rRBJhIzxCNhJwYmON/9LFAH4GBQxl7HWmGSS6HTrb2t6Peq82nxY0W7knguH52neh9T7zs27FVvsQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+    dev: true
+
+  /@oxc-project/types@0.87.0:
+    resolution: {integrity: sha512-ipZFWVGE9fADBVXXWJWY/cxpysc41Gt5upKDeb32F6WMgFyO7XETUMVq8UuREKCih+Km5E6p2VhEvf6Fuhey6g==}
+    dev: true
+
+  /@oxc-transform/binding-android-arm64@0.87.0:
+    resolution: {integrity: sha512-B7W6J8T9cS054LUGLfYkYz8bz5+t+4yPftZ67Bn6MJ03okMLnbbEfm1bID1tqcP5tJwMurTILVy/dQfDYDcMgQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-darwin-arm64@0.87.0:
+    resolution: {integrity: sha512-HImW3xOPx7FHKqfC5WfE82onhRfnWQUiB7R+JgYrk+7NR404h3zANSPzu3V/W9lbDxlmHTcqoD2LKbNC5j0TQA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-darwin-x64@0.87.0:
+    resolution: {integrity: sha512-MDbgugi6mvuPTfS78E2jyozm7493Kuqmpc5r406CsUdEsXlnsF+xvmKlrW9ZIkisO74dD+HWouSiDtNyPQHjlw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-freebsd-x64@0.87.0:
+    resolution: {integrity: sha512-N0M5D/4haJw7BMn2WZ3CWz0WkdLyoK1+3KxOyCv2CPedMCxx6eQay2AtJxSzj9tjVU1+ukbSb2fDO24JIJGsVA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-arm-gnueabihf@0.87.0:
+    resolution: {integrity: sha512-PubObCNOUOzm1S+P0yn7S+/6xRLbSPMqhgrb73L3p+J1Z20fv/FYVg0kFd36Yho24TSC/byOkebEZWAtxCasWw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-arm-musleabihf@0.87.0:
+    resolution: {integrity: sha512-Nk2d/FS7sMCmCl99vHojzigakjDPamkjOXs2i+H71o/NqytS0pk3M+tXat8M3IGpeLJIEszA5Mv+dcq731nlYA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-arm64-gnu@0.87.0:
+    resolution: {integrity: sha512-BxFkIcso2V1+FCDoU+KctxvJzSQVSnEZ5EEQ8O3Up9EoFVQRnZ8ktXvqYj2Oqvc4IYPskLPsKUgc9gdK8wGhUg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-arm64-musl@0.87.0:
+    resolution: {integrity: sha512-MZ1/TNaebhXK73j1UDfwyBFnAy0tT3n6otOkhlt1vlJwqboUS/D7E/XrCZmAuHIfVPxAXRPovkl7kfxLB43SKw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-riscv64-gnu@0.87.0:
+    resolution: {integrity: sha512-JCWE6n4Hicu0FVbvmLdH/dS8V6JykOUsbrbDYm6JwFlHr4eFTTlS2B+mh5KPOxcdeOlv/D/XRnvMJ6WGYs25EA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-s390x-gnu@0.87.0:
+    resolution: {integrity: sha512-n2NTgM+3PqFagJV9UXRDNOmYesF+TO9SF9FeHqwVmW893ayef9KK+vfWAAhvOYHXYaKWT5XoHd87ODD7nruyhw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-x64-gnu@0.87.0:
+    resolution: {integrity: sha512-ZOKW3wx0bW2O7jGdOzr8DyLZqX2C36sXvJdsHj3IueZZ//d/NjLZqEiUKz+q0JlERHtCVKShQ5PLaCx7NpuqNg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-linux-x64-musl@0.87.0:
+    resolution: {integrity: sha512-eIspx/JqkVMPK1CAYEOo2J8o49s4ZTf+32MSMUknIN2ZS1fvRmWS0D/xFFaLP/9UGhdrXRIPbn/iSYEA8JnV/g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-wasm32-wasi@0.87.0:
+    resolution: {integrity: sha512-4uRjJQnt/+kmJUIC6Iwzn+MqqZhLP1zInPtDwgL37KI4VuUewUQWoL+sggMssMEgm7ZJwOPoZ6piuSWwMgOqgQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.0.5
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-win32-arm64-msvc@0.87.0:
+    resolution: {integrity: sha512-l/qSi4/N5W1yXKU9+1gWGo0tBoRpp4zvHYrpsbq3zbefPL4VYdA0gKF7O10/ZQVkYylzxiVh2zpYO34/FbZdIg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-transform/binding-win32-x64-msvc@0.87.0:
+    resolution: {integrity: sha512-jG/MhMjfSdyj5KyhnwNWr4mnAlAsz+gNUYpjQ+UXWsfsoB3f8HqbsTkG02RBtNa/IuVQYvYYVf1eIimNN3gBEQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-android-arm64@2.5.1:
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-arm64@2.5.1:
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-x64@2.5.1:
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-freebsd-x64@2.5.1:
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-glibc@2.5.1:
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-musl@2.5.1:
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-glibc@2.5.1:
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-musl@2.5.1:
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-glibc@2.5.1:
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-musl@2.5.1:
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-wasm@2.5.1:
+    resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
+    engines: {node: '>= 10.0.0'}
+    dependencies:
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+    dev: true
+    bundledDependencies:
+      - napi-wasm
+
+  /@parcel/watcher-win32-arm64@2.5.1:
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-ia32@2.5.1:
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-x64@2.5.1:
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher@2.5.1:
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+    requiresBuild: true
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+    dev: true
+
+  /@pinia/nuxt@0.11.2(pinia@3.0.3):
+    resolution: {integrity: sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg==}
+    peerDependencies:
+      pinia: ^3.0.3
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      pinia: 3.0.3(typescript@5.9.2)(vue@3.5.21)
+    transitivePeerDependencies:
+      - magicast
+
+  /@pkgjs/parseargs@0.11.0:
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+    requiresBuild: true
+    optional: true
+
+  /@pkgr/core@0.1.2:
+    resolution: {integrity: sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    dev: true
+
+  /@pkgr/core@0.2.9:
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    dev: true
+
+  /@polka/url@1.0.0-next.29:
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+    dev: true
+
+  /@poppinss/colors@4.1.5:
+    resolution: {integrity: sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==}
+    dependencies:
+      kleur: 4.1.5
+    dev: true
+
+  /@poppinss/dumper@0.6.4:
+    resolution: {integrity: sha512-iG0TIdqv8xJ3Lt9O8DrPRxw1MRLjNpoqiSGU03P/wNLP/s0ra0udPJ1J2Tx5M0J3H/cVyEgpbn8xUKRY9j59kQ==}
+    dependencies:
+      '@poppinss/colors': 4.1.5
+      '@sindresorhus/is': 7.1.0
+      supports-color: 10.2.2
+    dev: true
+
+  /@poppinss/exception@1.2.2:
+    resolution: {integrity: sha512-m7bpKCD4QMlFCjA/nKTs23fuvoVFoA83brRKmObCUNmi/9tVu8Ve3w4YQAnJu4q3Tjf5fr685HYIC/IA2zHRSg==}
+    dev: true
+
+  /@quansync/fs@0.1.5:
+    resolution: {integrity: sha512-lNS9hL2aS2NZgNW7BBj+6EBl4rOf8l+tQ0eRY6JWCI8jI2kc53gSoqbjojU0OnAWhzoXiOjFyGsHcDGePB3lhA==}
+    dependencies:
+      quansync: 0.2.11
+    dev: true
+
+  /@radix-icons/vue@1.0.0(vue@3.5.21):
+    resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
+    peerDependencies:
+      vue: '>= 3'
+    dependencies:
+      vue: 3.5.21(typescript@5.9.2)
+    dev: false
+
+  /@rolldown/pluginutils@1.0.0-beta.29:
+    resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
+    dev: true
+
+  /@rolldown/pluginutils@1.0.0-beta.38:
+    resolution: {integrity: sha512-N/ICGKleNhA5nc9XXQG/kkKHJ7S55u0x0XUJbbkmdCnFuoRkM1Il12q9q0eX19+M7KKUEPw/daUPIRnxhcxAIw==}
+    dev: true
+
+  /@rollup/plugin-alias@5.1.1(rollup@4.52.0):
+    resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 4.52.0
+    dev: true
+
+  /@rollup/plugin-commonjs@28.0.6(rollup@4.52.0):
+    resolution: {integrity: sha512-XSQB1K7FUU5QP+3lOQmVCE3I0FcbbNvmNT4VJSj93iUjayaARrTQeoRdiYQoftAJBLrR9t2agwAd3ekaTgHNlw==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.0)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      is-reference: 1.2.1
+      magic-string: 0.30.19
+      picomatch: 4.0.3
+      rollup: 4.52.0
+    dev: true
+
+  /@rollup/plugin-inject@5.0.5(rollup@4.52.0):
+    resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.0)
+      estree-walker: 2.0.2
+      magic-string: 0.30.19
+      rollup: 4.52.0
+    dev: true
+
+  /@rollup/plugin-json@6.1.0(rollup@4.52.0):
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.0)
+      rollup: 4.52.0
+    dev: true
+
+  /@rollup/plugin-node-resolve@16.0.1(rollup@4.52.0):
+    resolution: {integrity: sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.0)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.10
+      rollup: 4.52.0
+    dev: true
+
+  /@rollup/plugin-replace@6.0.2(rollup@4.52.0):
+    resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.0)
+      magic-string: 0.30.19
+      rollup: 4.52.0
+    dev: true
+
+  /@rollup/plugin-terser@0.4.4(rollup@4.52.0):
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 4.52.0
+      serialize-javascript: 6.0.2
+      smob: 1.5.0
+      terser: 5.44.0
+    dev: true
+
+  /@rollup/pluginutils@5.3.0(rollup@4.52.0):
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+      rollup: 4.52.0
+    dev: true
+
+  /@rollup/rollup-android-arm-eabi@4.52.0:
+    resolution: {integrity: sha512-VxDYCDqOaR7NXzAtvRx7G1u54d2kEHopb28YH/pKzY6y0qmogP3gG7CSiWsq9WvDFxOQMpNEyjVAHZFXfH3o/A==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.52.0:
+    resolution: {integrity: sha512-pqDirm8koABIKvzL59YI9W9DWbRlTX7RWhN+auR8HXJxo89m4mjqbah7nJZjeKNTNYopqL+yGg+0mhCpf3xZtQ==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.52.0:
+    resolution: {integrity: sha512-YCdWlY/8ltN6H78HnMsRHYlPiKvqKagBP1r+D7SSylxX+HnsgXGCmLiV3Y4nSyY9hW8qr8U9LDUx/Lo7M6MfmQ==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.52.0:
+    resolution: {integrity: sha512-z4nw6y1j+OOSGzuVbSWdIp1IUks9qNw4dc7z7lWuWDKojY38VMWBlEN7F9jk5UXOkUcp97vA1N213DF+Lz8BRg==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-freebsd-arm64@4.52.0:
+    resolution: {integrity: sha512-Q/dv9Yvyr5rKlK8WQJZVrp5g2SOYeZUs9u/t2f9cQ2E0gJjYB/BWoedXfUT0EcDJefi2zzVfhcOj8drWCzTviw==}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-freebsd-x64@4.52.0:
+    resolution: {integrity: sha512-kdBsLs4Uile/fbjZVvCRcKB4q64R+1mUq0Yd7oU1CMm1Av336ajIFqNFovByipciuUQjBCPMxwJhCgfG2re3rg==}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.52.0:
+    resolution: {integrity: sha512-aL6hRwu0k7MTUESgkg7QHY6CoqPgr6gdQXRJI1/VbFlUMwsSzPGSR7sG5d+MCbYnJmJwThc2ol3nixj1fvI/zQ==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-musleabihf@4.52.0:
+    resolution: {integrity: sha512-BTs0M5s1EJejgIBJhCeiFo7GZZ2IXWkFGcyZhxX4+8usnIo5Mti57108vjXFIQmmJaRyDwmV59Tw64Ap1dkwMw==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.52.0:
+    resolution: {integrity: sha512-uj672IVOU9m08DBGvoPKPi/J8jlVgjh12C9GmjjBxCTQc3XtVmRkRKyeHSmIKQpvJ7fIm1EJieBUcnGSzDVFyw==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.52.0:
+    resolution: {integrity: sha512-/+IVbeDMDCtB/HP/wiWsSzduD10SEGzIZX2945KSgZRNi4TSkjHqRJtNTVtVb8IRwhJ65ssI56krlLik+zFWkw==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-loong64-gnu@4.52.0:
+    resolution: {integrity: sha512-U1vVzvSWtSMWKKrGoROPBXMh3Vwn93TA9V35PldokHGqiUbF6erSzox/5qrSMKp6SzakvyjcPiVF8yB1xKr9Pg==}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-ppc64-gnu@4.52.0:
+    resolution: {integrity: sha512-X/4WfuBAdQRH8cK3DYl8zC00XEE6aM472W+QCycpQJeLWVnHfkv7RyBFVaTqNUMsTgIX8ihMjCvFF9OUgeABzw==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.52.0:
+    resolution: {integrity: sha512-xIRYc58HfWDBZoLmWfWXg2Sq8VCa2iJ32B7mqfWnkx5mekekl0tMe7FHpY8I72RXEcUkaWawRvl3qA55og+cwQ==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-musl@4.52.0:
+    resolution: {integrity: sha512-mbsoUey05WJIOz8U1WzNdf+6UMYGwE3fZZnQqsM22FZ3wh1N887HT6jAOjXs6CNEK3Ntu2OBsyQDXfIjouI4dw==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-s390x-gnu@4.52.0:
+    resolution: {integrity: sha512-qP6aP970bucEi5KKKR4AuPFd8aTx9EF6BvutvYxmZuWLJHmnq4LvBfp0U+yFDMGwJ+AIJEH5sIP+SNypauMWzg==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.52.0:
+    resolution: {integrity: sha512-nmSVN+F2i1yKZ7rJNKO3G7ZzmxJgoQBQZ/6c4MuS553Grmr7WqR7LLDcYG53Z2m9409z3JLt4sCOhLdbKQ3HmA==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.52.0:
+    resolution: {integrity: sha512-2d0qRo33G6TfQVjaMR71P+yJVGODrt5V6+T0BDYH4EMfGgdC/2HWDVjSSFw888GSzAZUwuska3+zxNUCDco6rQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-openharmony-arm64@4.52.0:
+    resolution: {integrity: sha512-A1JalX4MOaFAAyGgpO7XP5khquv/7xKzLIyLmhNrbiCxWpMlnsTYr8dnsWM7sEeotNmxvSOEL7F65j0HXFcFsw==}
+    cpu: [arm64]
+    os: [openharmony]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.52.0:
+    resolution: {integrity: sha512-YQugafP/rH0eOOHGjmNgDURrpYHrIX0yuojOI8bwCyXwxC9ZdTd3vYkmddPX0oHONLXu9Rb1dDmT0VNpjkzGGw==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.52.0:
+    resolution: {integrity: sha512-zYdUYhi3Qe2fndujBqL5FjAFzvNeLxtIqfzNEVKD1I7C37/chv1VxhscWSQHTNfjPCrBFQMnynwA3kpZpZ8w4A==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-gnu@4.52.0:
+    resolution: {integrity: sha512-fGk03kQylNaCOQ96HDMeT7E2n91EqvCDd3RwvT5k+xNdFCeMGnj5b5hEgTGrQuyidqSsD3zJDQ21QIaxXqTBJw==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.52.0:
+    resolution: {integrity: sha512-6iKDCVSIUQ8jPMoIV0OytRKniaYyy5EbY/RRydmLW8ZR3cEBhxbWl5ro0rkUNe0ef6sScvhbY79HrjRm8i3vDQ==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@sindresorhus/is@7.1.0:
+    resolution: {integrity: sha512-7F/yz2IphV39hiS2zB4QYVkivrptHHh0K8qJJd9HhuWSdvf8AN7NpebW3CcDZDBQsUPMoDKWsY2WWgW7bqOcfA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /@sindresorhus/merge-streams@2.3.0:
+    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /@speed-highlight/core@1.2.7:
+    resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
+    dev: true
+
+  /@stylistic/eslint-plugin@5.4.0(eslint@9.36.0):
+    resolution: {integrity: sha512-UG8hdElzuBDzIbjG1QDwnYH0MQ73YLXDFHgZzB4Zh/YJfnw8XNsloVtytqzx0I2Qky9THSdpTmi8Vjn/pf/Lew==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=9.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@typescript-eslint/types': 8.44.0
+      eslint: 9.36.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.3
+    dev: true
+
+  /@swc/helpers@0.5.17:
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+    dependencies:
+      tslib: 2.8.1
+
+  /@tanstack/virtual-core@3.13.12:
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+    dev: true
+
+  /@tanstack/vue-virtual@3.13.12(vue@3.5.21):
+    resolution: {integrity: sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /@tybys/wasm-util@0.10.1:
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+    optional: true
+
+  /@types/chai@5.2.2:
+    resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
+    dependencies:
+      '@types/deep-eql': 4.0.2
+    dev: true
+
+  /@types/d3-array@3.2.2:
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+    dev: false
+
+  /@types/d3-axis@3.0.6:
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-brush@3.0.6:
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-chord@3.0.6:
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+    dev: false
+
+  /@types/d3-collection@1.0.13:
+    resolution: {integrity: sha512-v0Rgw3IZebRyamcwVmtTDCZ8OmQcj4siaYjNc7wGMZT7PmdSHawGsCOQMxyLvZ7lWjfohYLK0oXtilMOMgfY8A==}
+    dev: false
+
+  /@types/d3-color@3.1.3:
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+    dev: false
+
+  /@types/d3-contour@3.0.6:
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/geojson': 7946.0.16
+    dev: false
+
+  /@types/d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+    dev: false
+
+  /@types/d3-dispatch@3.0.7:
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+    dev: false
+
+  /@types/d3-drag@3.0.7:
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-dsv@3.0.7:
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+    dev: false
+
+  /@types/d3-ease@3.0.2:
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+    dev: false
+
+  /@types/d3-fetch@3.0.7:
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+    dev: false
+
+  /@types/d3-force@3.0.10:
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+    dev: false
+
+  /@types/d3-format@3.0.4:
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+    dev: false
+
+  /@types/d3-geo@3.1.0:
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+    dev: false
+
+  /@types/d3-hierarchy@3.1.7:
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+    dev: false
+
+  /@types/d3-interpolate@3.0.4:
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+    dependencies:
+      '@types/d3-color': 3.1.3
+    dev: false
+
+  /@types/d3-path@1.0.11:
+    resolution: {integrity: sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==}
+    dev: false
+
+  /@types/d3-path@3.1.1:
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+    dev: false
+
+  /@types/d3-polygon@3.0.2:
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+    dev: false
+
+  /@types/d3-quadtree@3.0.6:
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+    dev: false
+
+  /@types/d3-random@3.0.3:
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+    dev: false
+
+  /@types/d3-sankey@0.11.2:
+    resolution: {integrity: sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==}
+    dependencies:
+      '@types/d3-shape': 1.3.12
+    dev: false
+
+  /@types/d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+    dev: false
+
+  /@types/d3-scale@4.0.9:
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+    dependencies:
+      '@types/d3-time': 3.0.4
+    dev: false
+
+  /@types/d3-selection@3.0.11:
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+    dev: false
+
+  /@types/d3-shape@1.3.12:
+    resolution: {integrity: sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==}
+    dependencies:
+      '@types/d3-path': 1.0.11
+    dev: false
+
+  /@types/d3-shape@3.1.7:
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+    dependencies:
+      '@types/d3-path': 3.1.1
+    dev: false
+
+  /@types/d3-time-format@4.0.3:
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+    dev: false
+
+  /@types/d3-time@3.0.4:
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+    dev: false
+
+  /@types/d3-timer@3.0.2:
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+    dev: false
+
+  /@types/d3-transition@3.0.9:
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-zoom@3.0.8:
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3@7.4.3:
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+    dev: false
+
+  /@types/dagre@0.7.53:
+    resolution: {integrity: sha512-f4gkWqzPZvYmKhOsDnhq/R8mO4UMcKdxZo+i5SCkOU1wvGeHJeUXGIHeE9pnwGyPMDof1Vx5ZQo4nxpeg2TTVQ==}
+    dev: false
+
+  /@types/debug@4.1.12:
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+    dependencies:
+      '@types/ms': 2.1.0
+    dev: true
+
+  /@types/deep-eql@4.0.2:
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+    dev: true
+
+  /@types/eslint-scope@3.7.7:
+    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
+    dependencies:
+      '@types/eslint': 9.6.1
+      '@types/estree': 1.0.8
+    dev: true
+
+  /@types/eslint@9.6.1:
+    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+    dev: true
+
+  /@types/estree@1.0.8:
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  /@types/geojson@7946.0.16:
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+    dev: false
+
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
+
+  /@types/leaflet@1.7.6:
+    resolution: {integrity: sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+    dev: false
+
+  /@types/mapbox__point-geometry@0.1.4:
+    resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
+    dev: false
+
+  /@types/mapbox__vector-tile@1.3.4:
+    resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/pbf': 3.0.5
+    dev: false
+
+  /@types/mdast@4.0.4:
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: true
+
+  /@types/ms@2.1.0:
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+    dev: true
+
+  /@types/node@20.19.17:
+    resolution: {integrity: sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==}
+    dependencies:
+      undici-types: 6.21.0
+    dev: true
+
+  /@types/node@24.5.2:
+    resolution: {integrity: sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==}
+    dependencies:
+      undici-types: 7.12.0
+    dev: true
+
+  /@types/parse-json@4.0.2:
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+    dev: false
+
+  /@types/parse-path@7.1.0:
+    resolution: {integrity: sha512-EULJ8LApcVEPbrfND0cRQqutIOdiIgJ1Mgrhpy755r14xMohPTEpkV/k28SJvuOs9bHRFW8x+KeDAEPiGQPB9Q==}
+    deprecated: This is a stub types definition. parse-path provides its own type definitions, so you do not need this installed.
+    dependencies:
+      parse-path: 7.1.0
+    dev: true
+
+  /@types/pbf@3.0.5:
+    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
+    dev: false
+
+  /@types/resolve@1.20.2:
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+    dev: true
+
+  /@types/supercluster@5.0.3:
+    resolution: {integrity: sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+    dev: false
+
+  /@types/three@0.135.0:
+    resolution: {integrity: sha512-l7WLhIHjhHMtlpyTSltPPAKLpiMwgMD1hXHj59AVUpYRoZP7Fd9NNOSRSvZBCPLpTHPYojgQvSJCoza9zoL7bg==}
+    dev: false
+
+  /@types/throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==}
+    dev: false
+
+  /@types/topojson-client@3.1.5:
+    resolution: {integrity: sha512-C79rySTyPxnQNNguTZNI1Ct4D7IXgvyAs3p9HPecnl6mNrJ5+UhvGNYcZfpROYV2lMHI48kJPxwR+F9C6c7nmw==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/topojson-server@3.0.4:
+    resolution: {integrity: sha512-5+ieK8ePfP+K2VH6Vgs1VCt+fO1U8XZHj0UsF+NktaF0DavAo1q3IvCBXgokk/xmtvoPltSUs6vxuR/zMdOE1g==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/topojson-simplify@3.0.3:
+    resolution: {integrity: sha512-sBO5UZ0O2dB0bNwo0vut2yLHhj3neUGi9uL7/ROdm8Gs6dtt4jcB9OGDKr+M2isZwQM2RuzVmifnMZpxj4IGNw==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/topojson-specification@1.0.5:
+    resolution: {integrity: sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+    dev: false
+
+  /@types/topojson@3.2.6:
+    resolution: {integrity: sha512-ppfdlxjxofWJ66XdLgIlER/85RvpGyfOf8jrWf+3kVIjEatFxEZYD/Ea83jO672Xu1HRzd/ghwlbcZIUNHTskw==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+      '@types/topojson-client': 3.1.5
+      '@types/topojson-server': 3.0.4
+      '@types/topojson-simplify': 3.0.3
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/unist@3.0.3:
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+    dev: true
+
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+    dev: true
+
+  /@types/web-bluetooth@0.0.21:
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+    dev: true
+
+  /@types/whatwg-mimetype@3.0.2:
+    resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
+    dev: true
+
+  /@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0)(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-EGDAOGX+uwwekcS0iyxVDmRV9HX6FLSM5kzrAToLTsr9OWCIKG/y3lQheCq18yZ5Xh78rRKJiEpP0ZaCs4ryOQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.44.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/type-utils': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.44.0
+      eslint: 9.36.0
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@8.44.0(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-VGMpFQGUQWYT9LfnPcX8ouFojyrZ/2w3K5BucvxL/spdNehccKhB4jUyB1yBCXpr2XFm0jkECxgrpXBW2ipoAw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.44.0
+      debug: 4.4.3
+      eslint: 9.36.0
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/project-service@8.44.0(typescript@5.9.2):
+    resolution: {integrity: sha512-ZeaGNraRsq10GuEohKTo4295Z/SuGcSq2LzfGlqiuEvfArzo/VRrT0ZaJsVPuKZ55lVbNk8U6FcL+ZMH8CoyVA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.44.0
+      debug: 4.4.3
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager@8.44.0:
+    resolution: {integrity: sha512-87Jv3E+al8wpD+rIdVJm/ItDBe/Im09zXIjFoipOjr5gHUhJmTzfFLuTJ/nPTMc2Srsroy4IBXwcTCHyRR7KzA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/visitor-keys': 8.44.0
+    dev: true
+
+  /@typescript-eslint/tsconfig-utils@8.44.0(typescript@5.9.2):
+    resolution: {integrity: sha512-x5Y0+AuEPqAInc6yd0n5DAcvtoQ/vyaGwuX5HE9n6qAefk1GaedqrLQF8kQGylLUb9pnZyLf+iEiL9fr8APDtQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      typescript: 5.9.2
+    dev: true
+
+  /@typescript-eslint/type-utils@8.44.0(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-9cwsoSxJ8Sak67Be/hD2RNt/fsqmWnNE1iHohG8lxqLSNY8xNfyY7wloo5zpW3Nu9hxVgURevqfcH6vvKCt6yg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      debug: 4.4.3
+      eslint: 9.36.0
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types@8.44.0:
+    resolution: {integrity: sha512-ZSl2efn44VsYM0MfDQe68RKzBz75NPgLQXuGypmym6QVOWL5kegTZuZ02xRAT9T+onqvM6T8CdQk0OwYMB6ZvA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@8.44.0(typescript@5.9.2):
+    resolution: {integrity: sha512-lqNj6SgnGcQZwL4/SBJ3xdPEfcBuhCG8zdcwCPgYcmiPLgokiNDKlbPzCwEwu7m279J/lBYWtDYL+87OEfn8Jw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/project-service': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/visitor-keys': 8.44.0
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.2
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@8.44.0(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-nktOlVcg3ALo0mYlV+L7sWUD58KG4CMj1rb2HUVOO4aL3K/6wcD+NERqd0rrA5Vg06b42YhF6cFxeixsp9Riqg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      eslint: 9.36.0
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/visitor-keys@8.44.0:
+    resolution: {integrity: sha512-zaz9u8EJ4GBmnehlrpoKvj/E3dNbuQ7q0ucyZImm3cLqJ8INTc970B1qEqDX/Rzq65r3TvVTN7kHWPBoyW7DWw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@typescript-eslint/types': 8.44.0
+      eslint-visitor-keys: 4.2.1
+    dev: true
+
+  /@unhead/vue@2.0.17(vue@3.5.21):
+    resolution: {integrity: sha512-jzmGZYeMAhETV6qfetmLbZzUjjx1TjdNvFSobeFZb73D7dwD9wl/nOAx36qq+TvjZsLJdF5PQWToz2oDGAUqCg==}
+    peerDependencies:
+      vue: '>=3.5.18'
+    dependencies:
+      hookable: 5.5.3
+      unhead: 2.0.17
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /@unocss/astro@66.5.1(vite@7.1.6):
+    resolution: {integrity: sha512-f17+xfyBZ9prFx4jda3D9ngOigjO8btHsR3uG7WeDQPW6OBdhETfIGdXs8WD99J/3A3LJtk7J0u9p121S+RE8Q==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/reset': 66.5.1
+      '@unocss/vite': 66.5.1(vite@7.1.6)
+      vite: 7.1.6(jiti@2.5.1)
+    dev: true
+
+  /@unocss/cli@66.5.1:
+    resolution: {integrity: sha512-b9fTS6b7lqTmeftDkZyjkJiC1LoCKzCB4vuX/VdqoHd0QWh02i6ppsfe6C69fMlzOrju01H7CL0Bpad0JzBr2A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.5.1
+      '@unocss/core': 66.5.1
+      '@unocss/preset-uno': 66.5.1
+      cac: 6.7.14
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      consola: 3.4.2
+      magic-string: 0.30.19
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      tinyglobby: 0.2.15
+      unplugin-utils: 0.3.0
+    dev: true
+
+  /@unocss/config@66.5.1:
+    resolution: {integrity: sha512-eL9P+WDX42B6ZkNGGSkMgOyR99xeuJ2Gkj0uarhag5kaRwvwHLn/CJptZ7/oZLLIn0uTH8TQ6MG8ErhK0ymewA==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 66.5.1
+      unconfig: 7.3.3
+    dev: true
+
+  /@unocss/core@66.5.1:
+    resolution: {integrity: sha512-BUgN87sUIffco1d+1IuV4a1gKTI1YAFa7CTjxglLUAnopXPPJ+Q77G10zoBoFLzutiIOYLsesa3hzbQvDhosnA==}
+    dev: true
+
+  /@unocss/eslint-plugin@66.5.1(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-wb9+Ntfo62v77lhBa9ZlgKzxjBvWDFJwogevzT9rl0jJuqwZgLABwEDZOANWEso21z3FKHugN86Ei/STqojeQQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@typescript-eslint/utils': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      '@unocss/config': 66.5.1
+      '@unocss/core': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+      magic-string: 0.30.19
+      synckit: 0.11.11
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+      - typescript
+    dev: true
+
+  /@unocss/extractor-arbitrary-variants@66.5.1:
+    resolution: {integrity: sha512-SpI2uv6bWyPyY3Tv7CxsFnHBjSTlNRcPCnfvD8gSKbAt7R+RqV0nrdkv7wSW+Woc5TYl8PClLEFSBIvo0c1h9Q==}
+    dependencies:
+      '@unocss/core': 66.5.1
+    dev: true
+
+  /@unocss/inspector@66.5.1:
+    resolution: {integrity: sha512-EyHcEM9BPZACJhl9YoTlgc/5i4as9MQ4zwaThAXbXoO9l+IfxdNrJoy3ED8qqkKLO5jgzyhPvy1COBdaoSlxsg==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+      colorette: 2.0.20
+      gzip-size: 6.0.0
+      sirv: 3.0.2
+      vue-flow-layout: 0.2.0
+    dev: true
+
+  /@unocss/nuxt@66.5.1(postcss@8.5.6)(vite@7.1.6)(webpack@5.101.3):
+    resolution: {integrity: sha512-iEOxscz6LBbkdJ3nOM07dBLMH0slxWsUSUbotHDqhP9JYwpgC2+gHs5jnbIsf5fARFz4NbkGPieCvN6aihlrvg==}
+    dependencies:
+      '@nuxt/kit': 4.1.2
+      '@unocss/config': 66.5.1
+      '@unocss/core': 66.5.1
+      '@unocss/preset-attributify': 66.5.1
+      '@unocss/preset-icons': 66.5.1
+      '@unocss/preset-tagify': 66.5.1
+      '@unocss/preset-typography': 66.5.1
+      '@unocss/preset-web-fonts': 66.5.1
+      '@unocss/preset-wind3': 66.5.1
+      '@unocss/preset-wind4': 66.5.1
+      '@unocss/reset': 66.5.1
+      '@unocss/vite': 66.5.1(vite@7.1.6)
+      '@unocss/webpack': 66.5.1(webpack@5.101.3)
+      unocss: 66.5.1(@unocss/webpack@66.5.1)(postcss@8.5.6)(vite@7.1.6)
+    transitivePeerDependencies:
+      - magicast
+      - postcss
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
+  /@unocss/postcss@66.5.1(postcss@8.5.6):
+    resolution: {integrity: sha512-waJSgjJv14cbbaA3fj0kgDid+e851KfArqx1l5/c2km3g9tiPZhSiY3Z7YslwMyM9CKRC8+qN8AWYB9l4YJrFw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      '@unocss/config': 66.5.1
+      '@unocss/core': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+      css-tree: 3.1.0
+      postcss: 8.5.6
+      tinyglobby: 0.2.15
+    dev: true
+
+  /@unocss/preset-attributify@66.5.1:
+    resolution: {integrity: sha512-lRTwtg9y+f9c6OlRiiPrXrBco2r9SwVxNvzJ27Kc/DhJl3fphuMQuKWsZyiq1qsDVYZeGz4NQzE1FDKqFi4qqQ==}
+    dependencies:
+      '@unocss/core': 66.5.1
+    dev: true
+
+  /@unocss/preset-icons@66.5.1:
+    resolution: {integrity: sha512-vxlnPSzTaQZmLKcmVPhCWC6rpgpHCUSD7aFsn7jW3iZ/jTIwc4kgQjnOJZdL443LF5mxBqF15+Cm9hZRnvrWNw==}
+    dependencies:
+      '@iconify/utils': 3.0.2
+      '@unocss/core': 66.5.1
+      ofetch: 1.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/preset-mini@66.5.1:
+    resolution: {integrity: sha512-kBEbA0kEXRtoHQ98o4b6f9sp1u5BanPzi+GMnWdmOWvbLAiLw1vcgXGPTX3sO+gzIMrwu0Famw6xiztWzAFjWQ==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/extractor-arbitrary-variants': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+    dev: true
+
+  /@unocss/preset-tagify@66.5.1:
+    resolution: {integrity: sha512-94dVIqfTT3Nfs+g9XnOC/oZuVsiSp8zR36wA/Uucvg3n1zIo2wg6qokghfh7ee8aYNdTqnV7extlnCMJp0TFJQ==}
+    dependencies:
+      '@unocss/core': 66.5.1
+    dev: true
+
+  /@unocss/preset-typography@66.5.1:
+    resolution: {integrity: sha512-5gmv/BN3WbwlZJuoC5qyToK7ufbnmXEszj6+3Rgtto4ptpyizBtJybyZe025ypcmExne3MwMpGWMmQPE5MzKgw==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+    dev: true
+
+  /@unocss/preset-uno@66.5.1:
+    resolution: {integrity: sha512-nUjh1XMChHpVJng5zJhYXXZcXxVDfmh2dxdZS4DgKQ08F8HdvFXmZV+sJrrw6JdeUtpDytelLFJbA8ejmxHYhA==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/preset-wind3': 66.5.1
+    dev: true
+
+  /@unocss/preset-web-fonts@66.5.1:
+    resolution: {integrity: sha512-XKrkoN7ncqJxRHDMxAqTCroBcqSPgryDUZIlLhhQ4mHilSp29AdYO1RgG6Ok04w9HNmqzo3d8A8v6Z5yGrGF0w==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      ofetch: 1.4.1
+    dev: true
+
+  /@unocss/preset-wind3@66.5.1:
+    resolution: {integrity: sha512-L1yMmKpwUWYUnScQq5jMTGvfMy/GBqVj40VS5afyOlzWnBeSkc/y4AxeW/khzGwqE/QaFcLWXiXwQVJIyxN02Q==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/preset-mini': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+    dev: true
+
+  /@unocss/preset-wind4@66.5.1:
+    resolution: {integrity: sha512-i6UaZ/hRabu+bvEwUJcc3k/v/tF1sjKukvtQF027zaL3Q5k5QKKhDH989wVHU1k+i+W77+og2/K9+FzXN9+CzQ==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/extractor-arbitrary-variants': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+    dev: true
+
+  /@unocss/preset-wind@66.5.1:
+    resolution: {integrity: sha512-YucMFPBa3Gwuxdtk+GlqWWcnCwMpzUJWkiB3BNyGk4wEJ0S/brkC+t1/DKpagOFLK9bc134mLxqLNDMWJwVbrg==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/preset-wind3': 66.5.1
+    dev: true
+
+  /@unocss/reset@66.5.1:
+    resolution: {integrity: sha512-NXDjDUn3cjATkxr7bbPdVnKkUHzEq6wSC1IRpnO8ISAXCw6JGPjuk3WJVYxHhnAlszhDxdqxVBjWRZ+zzVmrZw==}
+    dev: true
+
+  /@unocss/rule-utils@66.5.1:
+    resolution: {integrity: sha512-GuBKHrDv3bdq5N1HfOr1tD864vI1EIiovBVJSfg7x9ERA4jJSnyMpGk/hbLuDIXF25EnVdZ1lFhEpJgur9+9sw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 66.5.1
+      magic-string: 0.30.19
+    dev: true
+
+  /@unocss/transformer-attributify-jsx@66.5.1:
+    resolution: {integrity: sha512-uj3W0zSY6LyRFusqeIEj8VUy6WDbIhNMUajIHRulKdSqufFMxiymn6JLGriz7ArFRXBKBBmbN+kk6Fqi9gF6JA==}
+    dependencies:
+      '@babel/parser': 7.27.7
+      '@babel/traverse': 7.27.7
+      '@unocss/core': 66.5.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/transformer-compile-class@66.5.1:
+    resolution: {integrity: sha512-dEfXxWLt3lbMW85CI2yi0S/fQHcSZ32s9FSfGS3KPxFTJ3EY7tYYesT1bdzVrSm+o7J8Os42E5AiFFPjhiTN6Q==}
+    dependencies:
+      '@unocss/core': 66.5.1
+    dev: true
+
+  /@unocss/transformer-directives@66.5.1:
+    resolution: {integrity: sha512-+SErDMglrTI3NTaY8GYh2fCalXNIQDahf7b2AaBCiOf+SPPXeicIy04/1nx8cJ/qpsJ4Z4+ZBybFlATVSkInyQ==}
+    dependencies:
+      '@unocss/core': 66.5.1
+      '@unocss/rule-utils': 66.5.1
+      css-tree: 3.1.0
+    dev: true
+
+  /@unocss/transformer-variant-group@66.5.1:
+    resolution: {integrity: sha512-ykUIXExfSCrmex0f8OvS4hYZ4M0EbinosW86xLKwc2GGcbWD6CwqyxxpVWgXSzcc2sIELuqF+K3oZnIlQt3Dug==}
+    dependencies:
+      '@unocss/core': 66.5.1
+    dev: true
+
+  /@unocss/vite@66.5.1(vite@7.1.6):
+    resolution: {integrity: sha512-qcZMh+SZbKYfTjJC2CP6B9Zxg0jlfhJSDVmXdjQBlUzhQR9FllnwlBdae6SCVFBc634Sm+pBJIri5ShPLvwq+Q==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.5.1
+      '@unocss/core': 66.5.1
+      '@unocss/inspector': 66.5.1
+      chokidar: 3.6.0
+      magic-string: 0.30.19
+      pathe: 2.0.3
+      tinyglobby: 0.2.15
+      unplugin-utils: 0.3.0
+      vite: 7.1.6(jiti@2.5.1)
+    dev: true
+
+  /@unocss/webpack@66.5.1(webpack@5.101.3):
+    resolution: {integrity: sha512-2v0VHxofd1IT7B9D5oBJXgsGH1wvkSGUewkRkdfzvRDhgwsetR74Z0mRS+zVPeg/lG/gq76YdSLg9gbWv6t4Nw==}
+    peerDependencies:
+      webpack: ^4 || ^5
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.5.1
+      '@unocss/core': 66.5.1
+      chokidar: 3.6.0
+      magic-string: 0.30.19
+      pathe: 2.0.3
+      tinyglobby: 0.2.15
+      unplugin: 2.3.10
+      unplugin-utils: 0.3.0
+      webpack: 5.101.3(esbuild@0.25.10)
+      webpack-sources: 3.3.3
+    dev: true
+
+  /@unovis/dagre-layout@0.8.8-2:
+    resolution: {integrity: sha512-ZfDvfcYtzzhZhgKZty8XDi+zQIotfRqfNVF5M3dFQ9d9C5MTaRdbeBnPUkNrmlLJGgQ42HMOE2ajZLfm2VlRhg==}
+    dependencies:
+      '@unovis/graphlibrary': 2.2.0-2
+      lodash-es: 4.17.21
+    dev: false
+
+  /@unovis/graphlibrary@2.2.0-2:
+    resolution: {integrity: sha512-HeEzpd/vDyWiIJt0rnh+2ICXUIuF2N0+Z9OJJiKg0DB+eFUcD+bk+9QPhYHwkFwfxdjDA9fHi1DZ/O/bbV58Nw==}
+    dependencies:
+      lodash-es: 4.17.21
+    dev: false
+
+  /@unovis/ts@1.6.1:
+    resolution: {integrity: sha512-h6p9HFmgztlqy+6hn+eAXqjk598QCQ3OAWSYIb3Ii3ljVnzj6vrhunhUuktFRyS0sXC4SK57b/Yf3y+8hCukYg==}
+    dependencies:
+      '@emotion/css': 11.13.5
+      '@juggle/resize-observer': 3.4.0
+      '@types/d3': 7.4.3
+      '@types/d3-collection': 1.0.13
+      '@types/d3-sankey': 0.11.2
+      '@types/dagre': 0.7.53
+      '@types/geojson': 7946.0.16
+      '@types/leaflet': 1.7.6
+      '@types/supercluster': 5.0.3
+      '@types/three': 0.135.0
+      '@types/throttle-debounce': 5.0.2
+      '@types/topojson': 3.2.6
+      '@types/topojson-client': 3.1.5
+      '@types/topojson-specification': 1.0.5
+      '@unovis/dagre-layout': 0.8.8-2
+      '@unovis/graphlibrary': 2.2.0-2
+      d3: 7.9.0
+      d3-collection: 1.0.7
+      d3-geo-projection: 4.0.0
+      d3-interpolate-path: 2.3.0
+      d3-sankey: 0.12.3
+      elkjs: 0.10.2
+      geojson: 0.5.0
+      leaflet: 1.7.1
+      maplibre-gl: 2.4.0
+      striptags: 3.2.0
+      supercluster: 7.1.5
+      three: 0.135.0
+      throttle-debounce: 5.0.2
+      to-px: 1.1.0
+      topojson-client: 3.1.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@unovis/vue@1.6.1(@unovis/ts@1.6.1)(vue@3.5.21):
+    resolution: {integrity: sha512-HT5JXAmscEK6GaxLYU8lY/LarvmkLDdt0uZz49b/Pun/K/+y02073Lr+WhLAUTGBC+tDbvNN2EcwgAvIgwBzrw==}
+    peerDependencies:
+      '@unovis/ts': 1.6.1
+      vue: ^3
+    dependencies:
+      '@unovis/ts': 1.6.1
+      vue: 3.5.21(typescript@5.9.2)
+    dev: false
+
+  /@unrs/resolver-binding-android-arm-eabi@1.11.1:
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-android-arm64@1.11.1:
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-darwin-arm64@1.11.1:
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-darwin-x64@1.11.1:
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-freebsd-x64@1.11.1:
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1:
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm-musleabihf@1.11.1:
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm64-gnu@1.11.1:
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm64-musl@1.11.1:
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-ppc64-gnu@1.11.1:
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-riscv64-gnu@1.11.1:
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-riscv64-musl@1.11.1:
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-s390x-gnu@1.11.1:
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-x64-gnu@1.11.1:
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-x64-musl@1.11.1:
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-wasm32-wasi@1.11.1:
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-win32-arm64-msvc@1.11.1:
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-win32-ia32-msvc@1.11.1:
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-win32-x64-msvc@1.11.1:
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@vee-validate/zod@4.15.1(vue@3.5.21)(zod@3.25.76):
+    resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
+    peerDependencies:
+      zod: ^3.24.0
+    dependencies:
+      type-fest: 4.41.0
+      vee-validate: 4.15.1(vue@3.5.21)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - vue
+    dev: true
+
+  /@vercel/nft@0.30.1(rollup@4.52.0):
+    resolution: {integrity: sha512-2mgJZv4AYBFkD/nJ4QmiX5Ymxi+AisPLPcS/KPXVqniyQNqKXX+wjieAbDXQP3HcogfEbpHoRMs49Cd4pfkk8g==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dependencies:
+      '@mapbox/node-pre-gyp': 2.0.0
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.0)
+      acorn: 8.15.0
+      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      async-sema: 3.1.1
+      bindings: 1.5.0
+      estree-walker: 2.0.2
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      node-gyp-build: 4.8.4
+      picomatch: 4.0.3
+      resolve-from: 5.0.0
+    transitivePeerDependencies:
+      - encoding
+      - rollup
+      - supports-color
+    dev: true
+
+  /@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.6)(vue@3.5.21):
+    resolution: {integrity: sha512-uQkfxzlF8SGHJJVH966lFTdjM/lGcwJGzwAHpVqAPDD/QcsqoUGa+q31ox1BrUfi+FLP2ChVp7uLXE3DkHyDdQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+      vue: ^3.0.0
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
+      '@rolldown/pluginutils': 1.0.0-beta.38
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
+      vite: 7.1.6(jiti@2.5.1)
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vitejs/plugin-vue@6.0.1(vite@7.1.6)(vue@3.5.21):
+    resolution: {integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+      vue: ^3.2.25
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-beta.29
+      vite: 7.1.6(jiti@2.5.1)
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /@vitest/eslint-plugin@1.3.12(eslint@9.36.0)(typescript@5.9.2)(vitest@3.2.4):
+    resolution: {integrity: sha512-cSEyUYGj8j8SLqKrzN7BlfsJ3wG67eRT25819PXuyoSBogLXiyagdKx4MHWHV1zv+EEuyMXsEKkBEKzXpxyBrg==}
+    peerDependencies:
+      eslint: '>= 8.57.0'
+      typescript: '>= 5.0.0'
+      vitest: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vitest:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/utils': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint: 9.36.0
+      typescript: 5.9.2
+      vitest: 3.2.4(happy-dom@18.0.1)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vitest/expect@3.2.4:
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+    dependencies:
+      '@types/chai': 5.2.2
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+    dev: true
+
+  /@vitest/mocker@3.2.4(vite@7.1.6):
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.19
+      vite: 7.1.6(jiti@2.5.1)
+    dev: true
+
+  /@vitest/pretty-format@3.2.4:
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+    dependencies:
+      tinyrainbow: 2.0.0
+    dev: true
+
+  /@vitest/runner@3.2.4:
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
+    dependencies:
+      '@vitest/utils': 3.2.4
+      pathe: 2.0.3
+      strip-literal: 3.0.0
+    dev: true
+
+  /@vitest/snapshot@3.2.4:
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      magic-string: 0.30.19
+      pathe: 2.0.3
+    dev: true
+
+  /@vitest/spy@3.2.4:
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+    dependencies:
+      tinyspy: 4.0.4
+    dev: true
+
+  /@vitest/utils@3.2.4:
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+    dev: true
+
+  /@volar/language-core@2.4.15:
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
+    dependencies:
+      '@volar/source-map': 2.4.15
+    dev: true
+
+  /@volar/language-core@2.4.23:
+    resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
+    dependencies:
+      '@volar/source-map': 2.4.23
+    dev: true
+
+  /@volar/source-map@2.4.15:
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
+    dev: true
+
+  /@volar/source-map@2.4.23:
+    resolution: {integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==}
+    dev: true
+
+  /@volar/typescript@2.4.15:
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
+    dependencies:
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+    dev: true
+
+  /@vue-macros/common@3.0.0-beta.16(vue@3.5.21):
+    resolution: {integrity: sha512-8O2gWxWFiaoNkk7PGi0+p7NPGe/f8xJ3/INUufvje/RZOs7sJvlI1jnR4lydtRFa/mU0ylMXUXXjSK0fHDEYTA==}
+    engines: {node: '>=20.18.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
+    dependencies:
+      '@vue/compiler-sfc': 3.5.21
+      ast-kit: 2.1.2
+      local-pkg: 1.1.2
+      magic-string-ast: 1.0.2
+      unplugin-utils: 0.2.5
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /@vue/babel-helper-vue-transform-on@1.5.0:
+    resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
+    dev: true
+
+  /@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.4):
+    resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+      '@vue/babel-helper-vue-transform-on': 1.5.0
+      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.4)
+      '@vue/shared': 3.5.21
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.28.4):
+    resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/core': 7.28.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/parser': 7.28.4
+      '@vue/compiler-sfc': 3.5.21
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vue/compiler-core@3.5.21:
+    resolution: {integrity: sha512-8i+LZ0vf6ZgII5Z9XmUvrCyEzocvWT+TeR2VBUVlzIH6Tyv57E20mPZ1bCS+tbejgUgmjrEh7q/0F0bibskAmw==}
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@vue/shared': 3.5.21
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  /@vue/compiler-dom@3.5.21:
+    resolution: {integrity: sha512-jNtbu/u97wiyEBJlJ9kmdw7tAr5Vy0Aj5CgQmo+6pxWNQhXZDPsRr1UWPN4v3Zf82s2H3kF51IbzZ4jMWAgPlQ==}
+    dependencies:
+      '@vue/compiler-core': 3.5.21
+      '@vue/shared': 3.5.21
+
+  /@vue/compiler-sfc@3.5.21:
+    resolution: {integrity: sha512-SXlyk6I5eUGBd2v8Ie7tF6ADHE9kCR6mBEuPyH1nUZ0h6Xx6nZI29i12sJKQmzbDyr2tUHMhhTt51Z6blbkTTQ==}
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@vue/compiler-core': 3.5.21
+      '@vue/compiler-dom': 3.5.21
+      '@vue/compiler-ssr': 3.5.21
+      '@vue/shared': 3.5.21
+      estree-walker: 2.0.2
+      magic-string: 0.30.19
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
+  /@vue/compiler-ssr@3.5.21:
+    resolution: {integrity: sha512-vKQ5olH5edFZdf5ZrlEgSO1j1DMA4u23TVK5XR1uMhvwnYvVdDF0nHXJUblL/GvzlShQbjhZZ2uvYmDlAbgo9w==}
+    dependencies:
+      '@vue/compiler-dom': 3.5.21
+      '@vue/shared': 3.5.21
+
+  /@vue/compiler-vue2@2.7.16:
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+    dev: true
+
+  /@vue/devtools-api@6.6.4:
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+    dev: true
+
+  /@vue/devtools-api@7.7.7:
+    resolution: {integrity: sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==}
+    dependencies:
+      '@vue/devtools-kit': 7.7.7
+
+  /@vue/devtools-core@7.7.7(vite@7.1.6)(vue@3.5.21):
+    resolution: {integrity: sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@vue/devtools-kit': 7.7.7
+      '@vue/devtools-shared': 7.7.7
+      mitt: 3.0.1
+      nanoid: 5.1.5
+      pathe: 2.0.3
+      vite-hot-client: 2.1.0(vite@7.1.6)
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - vite
+    dev: true
+
+  /@vue/devtools-kit@7.7.7:
+    resolution: {integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==}
+    dependencies:
+      '@vue/devtools-shared': 7.7.7
+      birpc: 2.5.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.2
+
+  /@vue/devtools-shared@7.7.7:
+    resolution: {integrity: sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==}
+    dependencies:
+      rfdc: 1.4.1
+
+  /@vue/language-core@2.2.12(typescript@5.9.2):
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.21
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.21
+      alien-signals: 1.0.13
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      typescript: 5.9.2
+    dev: true
+
+  /@vue/language-core@3.0.7(typescript@5.9.2):
+    resolution: {integrity: sha512-0sqqyqJ0Gn33JH3TdIsZLCZZ8Gr4kwlg8iYOnOrDDkJKSjFurlQY/bEFQx5zs7SX2C/bjMkmPYq/NiyY1fTOkw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.4.23
+      '@vue/compiler-dom': 3.5.21
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.21
+      alien-signals: 2.0.7
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.3
+      typescript: 5.9.2
+    dev: true
+
+  /@vue/reactivity@3.5.21:
+    resolution: {integrity: sha512-3ah7sa+Cwr9iiYEERt9JfZKPw4A2UlbY8RbbnH2mGCE8NwHkhmlZt2VsH0oDA3P08X3jJd29ohBDtX+TbD9AsA==}
+    dependencies:
+      '@vue/shared': 3.5.21
+
+  /@vue/runtime-core@3.5.21:
+    resolution: {integrity: sha512-+DplQlRS4MXfIf9gfD1BOJpk5RSyGgGXD/R+cumhe8jdjUcq/qlxDawQlSI8hCKupBlvM+3eS1se5xW+SuNAwA==}
+    dependencies:
+      '@vue/reactivity': 3.5.21
+      '@vue/shared': 3.5.21
+
+  /@vue/runtime-dom@3.5.21:
+    resolution: {integrity: sha512-3M2DZsOFwM5qI15wrMmNF5RJe1+ARijt2HM3TbzBbPSuBHOQpoidE+Pa+XEaVN+czbHf81ETRoG1ltztP2em8w==}
+    dependencies:
+      '@vue/reactivity': 3.5.21
+      '@vue/runtime-core': 3.5.21
+      '@vue/shared': 3.5.21
+      csstype: 3.1.3
+
+  /@vue/server-renderer@3.5.21(vue@3.5.21):
+    resolution: {integrity: sha512-qr8AqgD3DJPJcGvLcJKQo2tAc8OnXRcfxhOJCPF+fcfn5bBGz7VCcO7t+qETOPxpWK1mgysXvVT/j+xWaHeMWA==}
+    peerDependencies:
+      vue: 3.5.21
+    dependencies:
+      '@vue/compiler-ssr': 3.5.21
+      '@vue/shared': 3.5.21
+      vue: 3.5.21(typescript@5.9.2)
+
+  /@vue/shared@3.5.21:
+    resolution: {integrity: sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==}
+
+  /@vue/test-utils@2.4.6:
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+    dependencies:
+      js-beautify: 1.15.4
+      vue-component-type-helpers: 2.2.12
+    dev: true
+
+  /@vueuse/core@10.11.1(vue@3.5.21):
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.21)
+      vue-demi: 0.14.10(vue@3.5.21)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/core@12.8.2(typescript@5.9.2):
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.9.2)
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
+  /@vueuse/math@12.8.2(typescript@5.9.2):
+    resolution: {integrity: sha512-hAhazPaKb4wlS/EXu11+dYaEaX60jvb+zil3uGR4he5yWLKAxcqGMhupuHAa0uIKcSK11GJMm0GdEA7mQYx2Aw==}
+    dependencies:
+      '@vueuse/shared': 12.8.2(typescript@5.9.2)
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
+  /@vueuse/metadata@10.11.1:
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+    dev: true
+
+  /@vueuse/metadata@12.8.2:
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+    dev: true
+
+  /@vueuse/nuxt@12.8.2(nuxt@4.1.2)(typescript@5.9.2):
+    resolution: {integrity: sha512-jDsMli+MmxlhzaMwu8a2varKlkiBTPCdb+I457F7bTb1GazC6HDbGbLmhkpVQ8bNA1FzqfhwhAsOEsESF7wOkw==}
+    peerDependencies:
+      nuxt: ^3.0.0 || ^4.0.0-0
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      '@vueuse/core': 12.8.2(typescript@5.9.2)
+      '@vueuse/metadata': 12.8.2
+      local-pkg: 1.1.2
+      nuxt: 4.1.2(@vue/compiler-sfc@3.5.21)(eslint@9.36.0)(typescript@5.9.2)(vite@7.1.6)(vue-tsc@2.2.12)
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - magicast
+      - typescript
+    dev: true
+
+  /@vueuse/shared@10.11.1(vue@3.5.21):
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.21)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/shared@12.8.2(typescript@5.9.2):
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+    dependencies:
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
+  /@webassemblyjs/ast@1.14.1:
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+    dependencies:
+      '@webassemblyjs/helper-numbers': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+    dev: true
+
+  /@webassemblyjs/floating-point-hex-parser@1.13.2:
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+    dev: true
+
+  /@webassemblyjs/helper-api-error@1.13.2:
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+    dev: true
+
+  /@webassemblyjs/helper-buffer@1.14.1:
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+    dev: true
+
+  /@webassemblyjs/helper-numbers@1.13.2:
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+    dependencies:
+      '@webassemblyjs/floating-point-hex-parser': 1.13.2
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/helper-wasm-bytecode@1.13.2:
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+    dev: true
+
+  /@webassemblyjs/helper-wasm-section@1.14.1:
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/wasm-gen': 1.14.1
+    dev: true
+
+  /@webassemblyjs/ieee754@1.13.2:
+    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+    dev: true
+
+  /@webassemblyjs/leb128@1.13.2:
+    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
+    dependencies:
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@webassemblyjs/utf8@1.13.2:
+    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
+    dev: true
+
+  /@webassemblyjs/wasm-edit@1.14.1:
+    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/helper-wasm-section': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-opt': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      '@webassemblyjs/wast-printer': 1.14.1
+    dev: true
+
+  /@webassemblyjs/wasm-gen@1.14.1:
+    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+    dev: true
+
+  /@webassemblyjs/wasm-opt@1.14.1:
+    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+    dev: true
+
+  /@webassemblyjs/wasm-parser@1.14.1:
+    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+    dev: true
+
+  /@webassemblyjs/wast-printer@1.14.1:
+    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@xtuc/long': 4.2.2
+    dev: true
+
+  /@xtuc/ieee754@1.2.0:
+    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
+    dev: true
+
+  /@xtuc/long@4.2.2:
+    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
+    dev: true
+
+  /abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dev: true
+
+  /abbrev@3.0.1:
+    resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    dev: true
+
+  /abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
+    dependencies:
+      event-target-shim: 5.0.1
+    dev: true
+
+  /accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+    dev: true
+
+  /acorn-import-attributes@1.9.5(acorn@8.15.0):
+    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
+    peerDependencies:
+      acorn: ^8
+    dependencies:
+      acorn: 8.15.0
+    dev: true
+
+  /acorn-import-phases@1.0.4(acorn@8.15.0):
+    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      acorn: ^8.14.0
+    dependencies:
+      acorn: 8.15.0
+    dev: true
+
+  /acorn-jsx@5.3.2(acorn@8.15.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.15.0
+    dev: true
+
+  /acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  /agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+    dev: true
+
+  /ajv-formats@2.1.1(ajv@8.17.1):
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+    dependencies:
+      ajv: 8.17.1
+    dev: true
+
+  /ajv-keywords@5.1.0(ajv@8.17.1):
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: ^8.8.2
+    dependencies:
+      ajv: 8.17.1
+      fast-deep-equal: 3.1.3
+    dev: true
+
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
+  /ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+    dev: true
+
+  /alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+    dev: true
+
+  /alien-signals@2.0.7:
+    resolution: {integrity: sha512-wE7y3jmYeb0+h6mr5BOovuqhFv22O/MV9j5p0ndJsa7z1zJNPGQ4ph5pQk/kTTCWRC3xsA4SmtwmkzQO+7NCNg==}
+    dev: true
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  /ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+
+  /ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  /ansis@4.1.0:
+    resolution: {integrity: sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  /archiver-utils@5.0.2:
+    resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      is-stream: 2.0.1
+      lazystream: 1.0.1
+      lodash: 4.17.21
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
+    dev: true
+
+  /archiver@7.0.1:
+    resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
+    engines: {node: '>= 14'}
+    dependencies:
+      archiver-utils: 5.0.2
+      async: 3.2.6
+      buffer-crc32: 1.0.0
+      readable-stream: 4.7.0
+      readdir-glob: 1.1.3
+      tar-stream: 3.1.7
+      zip-stream: 6.0.1
+    transitivePeerDependencies:
+      - react-native-b4a
+    dev: true
+
+  /are-docs-informative@0.0.2:
+    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+
+  /assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /ast-kit@2.1.2:
+    resolution: {integrity: sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==}
+    engines: {node: '>=20.18.0'}
+    dependencies:
+      '@babel/parser': 7.28.4
+      pathe: 2.0.3
+    dev: true
+
+  /ast-walker-scope@0.8.2:
+    resolution: {integrity: sha512-3pYeLyDZ6nJew9QeBhS4Nly02269Dkdk32+zdbbKmL6n4ZuaGorwwA+xx12xgOciA8BF1w9x+dlH7oUkFTW91w==}
+    engines: {node: '>=20.18.0'}
+    dependencies:
+      '@babel/parser': 7.28.4
+      ast-kit: 2.1.2
+    dev: true
+
+  /async-sema@3.1.1:
+    resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
+    dev: true
+
+  /async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+    dev: true
+
+  /at-least-node@1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
+  /autoprefixer@10.4.21(postcss@8.5.6):
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.26.2
+      caniuse-lite: 1.0.30001743
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /b4a@1.7.1:
+    resolution: {integrity: sha512-ZovbrBV0g6JxK5cGUF1Suby1vLfKjv4RWi8IxoaO/Mon8BDD9I21RxjHFtgQ+kskJqLAVyQZly3uMBui+vhc8Q==}
+    peerDependencies:
+      react-native-b4a: '*'
+    peerDependenciesMeta:
+      react-native-b4a:
+        optional: true
+    dev: true
+
+  /babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.28.4
+      cosmiconfig: 7.1.0
+      resolve: 1.22.10
+    dev: false
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  /bare-events@2.7.0:
+    resolution: {integrity: sha512-b3N5eTW1g7vXkw+0CXh/HazGTcO5KYuu/RCNaJbDMPI6LHDi+7qe8EmxKUVe1sUbY2KZOVZFyj62x0OEz9qyAA==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /my-ui64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: true
+
+  /my-uiline-browser-mapping@2.8.6:
+    resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==}
+    hasBin: true
+    dev: true
+
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  /bindings@1.5.0:
+    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
+    dependencies:
+      file-uri-to-path: 1.0.0
+    dev: true
+
+  /birpc@2.5.0:
+    resolution: {integrity: sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==}
+
+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
+  /brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+    dependencies:
+      balanced-match: 1.0.2
+
+  /braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.1.1
+
+  /browserslist@4.26.2:
+    resolution: {integrity: sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      baseline-browser-mapping: 2.8.6
+      caniuse-lite: 1.0.30001743
+      electron-to-chromium: 1.5.222
+      node-releases: 2.0.21
+      update-browserslist-db: 1.1.3(browserslist@4.26.2)
+    dev: true
+
+  /buffer-crc32@1.0.0:
+    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
+    engines: {node: '>=8.0.0'}
+    dev: true
+
+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: true
+
+  /buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: true
+
+  /builtin-modules@5.0.0:
+    resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
+    engines: {node: '>=18.20'}
+    dev: true
+
+  /bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      run-applescript: 7.1.0
+    dev: true
+
+  /bundle-require@5.1.0(esbuild@0.25.10):
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
+    dependencies:
+      esbuild: 0.25.10
+      load-tsconfig: 0.2.5
+    dev: true
+
+  /c12@3.3.0(magicast@0.3.5):
+    resolution: {integrity: sha512-K9ZkuyeJQeqLEyqldbYLG3wjqwpw4BVaAqvmxq3GYKK0b1A/yYQdIcJxkzAOWcNVWhJpRXAPfZFueekiY/L8Dw==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.2.2
+      defu: 6.1.4
+      dotenv: 17.2.2
+      exsolve: 1.0.7
+      giget: 2.0.0
+      jiti: 2.5.1
+      magicast: 0.3.5
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+
+  /cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /cache-content-type@1.0.1:
+    resolution: {integrity: sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      mime-types: 2.1.35
+      ylru: 1.4.0
+    dev: true
+
+  /call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+    dev: true
+
+  /call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+    dev: true
+
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  /caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+    dependencies:
+      browserslist: 4.26.2
+      caniuse-lite: 1.0.30001743
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+    dev: true
+
+  /caniuse-lite@1.0.30001743:
+    resolution: {integrity: sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==}
+    dev: true
+
+  /ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+    dev: true
+
+  /chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+    dev: true
+
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+    dev: true
+
+  /character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+    dev: true
+
+  /check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+    dev: true
+
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  /chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+    dependencies:
+      readdirp: 4.1.2
+
+  /chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /chrome-trace-event@1.0.4:
+    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
+    engines: {node: '>=6.0'}
+    dev: true
+
+  /ci-info@4.3.0:
+    resolution: {integrity: sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+    dependencies:
+      consola: 3.4.2
+
+  /class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+    dependencies:
+      clsx: 2.1.1
+    dev: true
+
+  /clean-regexp@1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
+  /clipboardy@4.0.0:
+    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
+    engines: {node: '>=18'}
+    dependencies:
+      execa: 8.0.1
+      is-wsl: 3.1.0
+      is64bit: 2.0.0
+    dev: true
+
+  /cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+    dev: true
+
+  /clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+    dev: true
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  /colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: true
+
+  /colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+    dev: true
+
+  /commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  /commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  /commander@6.2.1:
+    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
+    engines: {node: '>= 12.0.0'}
+    dev: true
+
+  /commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+    dev: true
+
+  /compatx@0.2.0:
+    resolution: {integrity: sha512-6gLRNt4ygsi5NyMVhceOCFv14CIdDFN7fQjX1U4+47qVE/+kjPoXMK65KWK+dWxmFzMTuKazoQ9sch6pM0p5oA==}
+    dev: true
+
+  /compress-commons@6.0.2:
+    resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      crc-32: 1.2.2
+      crc32-stream: 6.0.0
+      is-stream: 2.0.1
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
+    dev: true
+
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
+
+  /confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  /confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
+  /config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+    dev: true
+
+  /consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  /content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: false
+
+  /convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+    dev: true
+
+  /cookie-es@1.2.2:
+    resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
+
+  /cookie-es@2.0.0:
+    resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
+    dev: true
+
+  /cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /cookies@0.9.1:
+    resolution: {integrity: sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      depd: 2.0.0
+      keygrip: 1.1.0
+    dev: true
+
+  /copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+    dependencies:
+      is-what: 4.1.16
+
+  /core-js-compat@3.45.1:
+    resolution: {integrity: sha512-tqTt5T4PzsMIZ430XGviK4vzYSoeNJ6CXODi6c/voxOT6IZqBht5/EKaSNnYiEjjRYxjVz7DQIsOsY0XNi8PIA==}
+    dependencies:
+      browserslist: 4.26.2
+    dev: true
+
+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: true
+
+  /cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: false
+
+  /crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+    dev: true
+
+  /crc32-stream@6.0.0:
+    resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
+    engines: {node: '>= 14'}
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 4.7.0
+    dev: true
+
+  /croner@9.1.0:
+    resolution: {integrity: sha512-p9nwwR4qyT5W996vBZhdvBCnMhicY5ytZkR4D1Xj0wuTDEiMnjwR57Q3RXYY/s0EpX6Ay3vgIcfaR+ewGHsi+g==}
+    engines: {node: '>=18.0'}
+    dev: true
+
+  /cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  /crossws@0.3.5:
+    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
+    dependencies:
+      uncrypto: 0.1.3
+
+  /css-declaration-sorter@7.3.0(postcss@8.5.6):
+    resolution: {integrity: sha512-LQF6N/3vkAMYF4xoHLJfG718HRJh34Z8BnNhd6bosOMIVjMlhuZK5++oZa3uYAgrI5+7x2o27gUqTR2U/KjUOQ==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.0.9
+    dependencies:
+      postcss: 8.5.6
+    dev: true
+
+  /css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+    dev: true
+
+  /css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+    dev: true
+
+  /css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+    dev: true
+
+  /css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /csscolorparser@1.0.3:
+    resolution: {integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==}
+    dev: false
+
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  /cssnano-preset-default@7.0.9(postcss@8.5.6):
+    resolution: {integrity: sha512-tCD6AAFgYBOVpMBX41KjbvRh9c2uUjLXRyV7KHSIrwHiq5Z9o0TFfUCoM3TwVrRsRteN3sVXGNvjVNxYzkpTsA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      css-declaration-sorter: 7.3.0(postcss@8.5.6)
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-calc: 10.1.1(postcss@8.5.6)
+      postcss-colormin: 7.0.4(postcss@8.5.6)
+      postcss-convert-values: 7.0.7(postcss@8.5.6)
+      postcss-discard-comments: 7.0.4(postcss@8.5.6)
+      postcss-discard-duplicates: 7.0.2(postcss@8.5.6)
+      postcss-discard-empty: 7.0.1(postcss@8.5.6)
+      postcss-discard-overridden: 7.0.1(postcss@8.5.6)
+      postcss-merge-longhand: 7.0.5(postcss@8.5.6)
+      postcss-merge-rules: 7.0.6(postcss@8.5.6)
+      postcss-minify-font-values: 7.0.1(postcss@8.5.6)
+      postcss-minify-gradients: 7.0.1(postcss@8.5.6)
+      postcss-minify-params: 7.0.4(postcss@8.5.6)
+      postcss-minify-selectors: 7.0.5(postcss@8.5.6)
+      postcss-normalize-charset: 7.0.1(postcss@8.5.6)
+      postcss-normalize-display-values: 7.0.1(postcss@8.5.6)
+      postcss-normalize-positions: 7.0.1(postcss@8.5.6)
+      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.6)
+      postcss-normalize-string: 7.0.1(postcss@8.5.6)
+      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.6)
+      postcss-normalize-unicode: 7.0.4(postcss@8.5.6)
+      postcss-normalize-url: 7.0.1(postcss@8.5.6)
+      postcss-normalize-whitespace: 7.0.1(postcss@8.5.6)
+      postcss-ordered-values: 7.0.2(postcss@8.5.6)
+      postcss-reduce-initial: 7.0.4(postcss@8.5.6)
+      postcss-reduce-transforms: 7.0.1(postcss@8.5.6)
+      postcss-svgo: 7.1.0(postcss@8.5.6)
+      postcss-unique-selectors: 7.0.4(postcss@8.5.6)
+    dev: true
+
+  /cssnano-utils@5.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+    dev: true
+
+  /cssnano@7.1.1(postcss@8.5.6):
+    resolution: {integrity: sha512-fm4D8ti0dQmFPeF8DXSAA//btEmqCOgAc/9Oa3C1LW94h5usNrJEfrON7b4FkPZgnDEn6OUs5NdxiJZmAtGOpQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      cssnano-preset-default: 7.0.9(postcss@8.5.6)
+      lilconfig: 3.1.3
+      postcss: 8.5.6
+    dev: true
+
+  /csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      css-tree: 2.2.1
+    dev: true
+
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  /d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+    dependencies:
+      internmap: 1.0.1
+    dev: false
+
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
+
+  /d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
+  /d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-collection@1.0.7:
+    resolution: {integrity: sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==}
+    dev: false
+
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+    dependencies:
+      delaunator: 5.0.1
+    dev: false
+
+  /d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+    dev: false
+
+  /d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+    dev: false
+
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dsv: 3.0.1
+    dev: false
+
+  /d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-geo-projection@4.0.0:
+    resolution: {integrity: sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      d3-array: 3.2.4
+      d3-geo: 3.1.1
+    dev: false
+
+  /d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate-path@2.3.0:
+    resolution: {integrity: sha512-tZYtGXxBmbgHsIc9Wms6LS5u4w6KbP8C09a4/ZYc4KLMYYqub57rRBUgpUr2CIarIrJEpdAWWxWQvofgaMpbKQ==}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+    dev: false
+
+  /d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+    dev: false
+
+  /d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+    dev: false
+
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+    dependencies:
+      d3-path: 1.0.9
+    dev: false
+
+  /d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-transition@3.0.1(d3-selection@3.0.0):
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
+  /d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+    dev: false
+
+  /date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+    dev: false
+
+  /db0@0.3.2:
+    resolution: {integrity: sha512-xzWNQ6jk/+NtdfLyXEipbX55dmDSeteLFt/ayF+wZUU5bzKgmrDOxmInUTbyVRp46YwnJdkDA1KhB7WIXFofJw==}
+    peerDependencies:
+      '@electric-sql/pglite': '*'
+      '@libsql/client': '*'
+      better-sqlite3: '*'
+      drizzle-orm: '*'
+      mysql2: '*'
+      sqlite3: '*'
+    peerDependenciesMeta:
+      '@electric-sql/pglite':
+        optional: true
+      '@libsql/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      drizzle-orm:
+        optional: true
+      mysql2:
+        optional: true
+      sqlite3:
+        optional: true
+    dev: true
+
+  /de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+    dev: true
+
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
+  /debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+
+  /decode-named-character-reference@1.2.0:
+    resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
+    dependencies:
+      character-entities: 2.0.2
+    dev: true
+
+  /deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /deep-equal@1.0.1:
+    resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
+    dev: true
+
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
+  /deep-pick-omit@1.2.1:
+    resolution: {integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==}
+    dev: false
+
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
+    dev: true
+
+  /define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  /delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+    dependencies:
+      robust-predicates: 3.0.2
+    dev: false
+
+  /delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+    dev: true
+
+  /denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+    dev: true
+
+  /depd@1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
+  /destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+    dev: true
+
+  /detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    dev: true
+
+  /detect-libc@2.1.0:
+    resolution: {integrity: sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /devalue@5.3.2:
+    resolution: {integrity: sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==}
+    dev: true
+
+  /devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  /diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+    engines: {node: '>=0.3.1'}
+    dev: true
+
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  /dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: true
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: true
+
+  /dot-prop@9.0.0:
+    resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      type-fest: 4.41.0
+    dev: true
+
+  /dotenv@16.6.1:
+    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /dotenv@17.2.2:
+    resolution: {integrity: sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==}
+    engines: {node: '>=12'}
+
+  /dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+    dev: true
+
+  /duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+    dev: true
+
+  /earcut@2.2.4:
+    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
+    dev: false
+
+  /eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  /editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.1
+      semver: 7.7.2
+    dev: true
+
+  /ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+    dev: true
+
+  /electron-to-chromium@1.5.222:
+    resolution: {integrity: sha512-gA7psSwSwQRE60CEoLz6JBCQPIxNeuzB2nL8vE03GK/OHxlvykbLyeiumQy1iH5C2f3YbRAZpGCMT12a/9ih9w==}
+    dev: true
+
+  /elkjs@0.10.2:
+    resolution: {integrity: sha512-Yx3ORtbAFrXelYkAy2g0eYyVY8QG0XEmGdQXmy0eithKKjbWRfl3Xe884lfkszfBF6UKyIy4LwfcZ3AZc8oxFw==}
+    dev: false
+
+  /embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+    dependencies:
+      embla-carousel: 8.6.0
+    dev: false
+
+  /embla-carousel-vue@8.6.0(vue@3.5.21):
+    resolution: {integrity: sha512-v8UO5UsyLocZnu/LbfQA7Dn2QHuZKurJY93VUmZYP//QRWoCWOsionmvLLAlibkET3pGPs7++03VhJKbWD7vhQ==}
+    peerDependencies:
+      vue: ^3.2.37
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      vue: 3.5.21(typescript@5.9.2)
+    dev: false
+
+  /embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+    dev: false
+
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  /emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  /empathic@2.0.0:
+    resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.3
+    dev: true
+
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  /error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+    dependencies:
+      is-arrayish: 0.2.1
+    dev: false
+
+  /error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
+    dev: true
+
+  /errx@0.1.0:
+    resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
+
+  /es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+    dev: true
+
+  /es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+    dev: true
+
+  /esbuild@0.25.10:
+    resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.10
+      '@esbuild/android-arm': 0.25.10
+      '@esbuild/android-arm64': 0.25.10
+      '@esbuild/android-x64': 0.25.10
+      '@esbuild/darwin-arm64': 0.25.10
+      '@esbuild/darwin-x64': 0.25.10
+      '@esbuild/freebsd-arm64': 0.25.10
+      '@esbuild/freebsd-x64': 0.25.10
+      '@esbuild/linux-arm': 0.25.10
+      '@esbuild/linux-arm64': 0.25.10
+      '@esbuild/linux-ia32': 0.25.10
+      '@esbuild/linux-loong64': 0.25.10
+      '@esbuild/linux-mips64el': 0.25.10
+      '@esbuild/linux-ppc64': 0.25.10
+      '@esbuild/linux-riscv64': 0.25.10
+      '@esbuild/linux-s390x': 0.25.10
+      '@esbuild/linux-x64': 0.25.10
+      '@esbuild/netbsd-arm64': 0.25.10
+      '@esbuild/netbsd-x64': 0.25.10
+      '@esbuild/openbsd-arm64': 0.25.10
+      '@esbuild/openbsd-x64': 0.25.10
+      '@esbuild/openharmony-arm64': 0.25.10
+      '@esbuild/sunos-x64': 0.25.10
+      '@esbuild/win32-arm64': 0.25.10
+      '@esbuild/win32-ia32': 0.25.10
+      '@esbuild/win32-x64': 0.25.10
+    dev: true
+
+  /escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: true
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  /escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  /eslint-compat-utils@0.5.1(eslint@9.36.0):
+    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 9.36.0
+      semver: 7.7.2
+    dev: true
+
+  /eslint-compat-utils@0.6.5(eslint@9.36.0):
+    resolution: {integrity: sha512-vAUHYzue4YAa2hNACjB8HvUQj5yehAZgiClyFVVom9cP8z5NSFq3PwB/TtJslN2zAMgRX6FCFCjYBbQh71g5RQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 9.36.0
+      semver: 7.7.2
+    dev: true
+
+  /eslint-config-flat-gitignore@2.1.0(eslint@9.36.0):
+    resolution: {integrity: sha512-cJzNJ7L+psWp5mXM7jBX+fjHtBvvh06RBlcweMhKD8jWqQw0G78hOW5tpVALGHGFPsBV+ot2H+pdDGJy6CV8pA==}
+    peerDependencies:
+      eslint: ^9.5.0
+    dependencies:
+      '@eslint/compat': 1.3.2(eslint@9.36.0)
+      eslint: 9.36.0
+    dev: true
+
+  /eslint-config-prettier@9.1.2(eslint@9.36.0):
+    resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 9.36.0
+    dev: true
+
+  /eslint-flat-config-utils@2.1.4:
+    resolution: {integrity: sha512-bEnmU5gqzS+4O+id9vrbP43vByjF+8KOs+QuuV4OlqAuXmnRW2zfI/Rza1fQvdihQ5h4DUo0NqFAiViD4mSrzQ==}
+    dependencies:
+      pathe: 2.0.3
+    dev: true
+
+  /eslint-formatting-reporter@0.0.0(eslint@9.36.0):
+    resolution: {integrity: sha512-k9RdyTqxqN/wNYVaTk/ds5B5rA8lgoAmvceYN7bcZMBwU7TuXx5ntewJv81eF3pIL/CiJE+pJZm36llG8yhyyw==}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      eslint: 9.36.0
+      prettier-linter-helpers: 1.0.0
+    dev: true
+
+  /eslint-import-context@0.1.9(unrs-resolver@1.11.1):
+    resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      unrs-resolver: ^1.0.0
+    peerDependenciesMeta:
+      unrs-resolver:
+        optional: true
+    dependencies:
+      get-tsconfig: 4.10.1
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    dev: true
+
+  /eslint-json-compat-utils@0.2.1(eslint@9.36.0)(jsonc-eslint-parser@2.4.1):
+    resolution: {integrity: sha512-YzEodbDyW8DX8bImKhAcCeu/L31Dd/70Bidx2Qex9OFUtgzXLqtfWL4Hr5fM/aCCB8QUZLuJur0S9k6UfgFkfg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@eslint/json': '*'
+      eslint: '*'
+      jsonc-eslint-parser: ^2.4.0
+    peerDependenciesMeta:
+      '@eslint/json':
+        optional: true
+    dependencies:
+      eslint: 9.36.0
+      esquery: 1.6.0
+      jsonc-eslint-parser: 2.4.1
+    dev: true
+
+  /eslint-merge-processors@2.0.0(eslint@9.36.0):
+    resolution: {integrity: sha512-sUuhSf3IrJdGooquEUB5TNpGNpBoQccbnaLHsb1XkBLUPPqCNivCpY05ZcpCOiV9uHwO2yxXEWVczVclzMxYlA==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      eslint: 9.36.0
+    dev: true
+
+  /eslint-parser-plain@0.1.1:
+    resolution: {integrity: sha512-KRgd6wuxH4U8kczqPp+Oyk4irThIhHWxgFgLDtpgjUGVIS3wGrJntvZW/p6hHq1T4FOwnOtCNkvAI4Kr+mQ/Hw==}
+    dev: true
+
+  /eslint-plugin-antfu@3.1.1(eslint@9.36.0):
+    resolution: {integrity: sha512-7Q+NhwLfHJFvopI2HBZbSxWXngTwBLKxW1AGXLr2lEGxcEIK/AsDs8pn8fvIizl5aZjBbVbVK5ujmMpBe4Tvdg==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      eslint: 9.36.0
+    dev: true
+
+  /eslint-plugin-command@3.3.1(eslint@9.36.0):
+    resolution: {integrity: sha512-fBVTXQ2y48TVLT0+4A6PFINp7GcdIailHAXbvPBixE7x+YpYnNQhFZxTdvnb+aWk+COgNebQKen/7m4dmgyWAw==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      '@es-joy/jsdoccomment': 0.50.2
+      eslint: 9.36.0
+    dev: true
+
+  /eslint-plugin-es-x@7.8.0(eslint@9.36.0):
+    resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=8'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@eslint-community/regexpp': 4.12.1
+      eslint: 9.36.0
+      eslint-compat-utils: 0.5.1(eslint@9.36.0)
+    dev: true
+
+  /eslint-plugin-format@1.0.2(eslint@9.36.0):
+    resolution: {integrity: sha512-ySrDaLQZbreNAr/Betq6ocd5Hxy3+LBIfWNV2621EQQ6yGf/ZSLtN2MiM62WO2YQTX+nSFhv332Tpp51q+AkZQ==}
+    peerDependencies:
+      eslint: ^8.40.0 || ^9.0.0
+    dependencies:
+      '@dprint/formatter': 0.3.0
+      '@dprint/markdown': 0.17.8
+      '@dprint/toml': 0.6.4
+      eslint: 9.36.0
+      eslint-formatting-reporter: 0.0.0(eslint@9.36.0)
+      eslint-parser-plain: 0.1.1
+      prettier: 3.6.2
+      synckit: 0.9.3
+    dev: true
+
+  /eslint-plugin-import-lite@0.3.0(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-dkNBAL6jcoCsXZsQ/Tt2yXmMDoNt5NaBh/U7yvccjiK8cai6Ay+MK77bMykmqQA2bTF6lngaLCDij6MTO3KkvA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=9.0.0'
+      typescript: '>=4.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@typescript-eslint/types': 8.44.0
+      eslint: 9.36.0
+      typescript: 5.9.2
+    dev: true
+
+  /eslint-plugin-import-x@4.16.1(eslint@9.36.0):
+    resolution: {integrity: sha512-vPZZsiOKaBAIATpFE2uMI4w5IRwdv/FpQ+qZZMR4E+PeOcM4OeoEbqxRMnywdxP19TyB/3h6QBB0EWon7letSQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/utils': ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      eslint-import-resolver-node: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/utils':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 8.44.0
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      eslint: 9.36.0
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 10.0.3
+      semver: 7.7.2
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsdoc@51.4.1(eslint@9.36.0):
+    resolution: {integrity: sha512-y4CA9OkachG8v5nAtrwvcvjIbdcKgSyS6U//IfQr4FZFFyeBFwZFf/tfSsMr46mWDJgidZjBTqoCRlXywfFBMg==}
+    engines: {node: '>=20.11.0'}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      '@es-joy/jsdoccomment': 0.52.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.36.0
+      espree: 10.4.0
+      esquery: 1.6.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.2
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsdoc@54.7.0(eslint@9.36.0):
+    resolution: {integrity: sha512-u5Na4he2+6kY1rWqxzbQaAwJL3/tDCuT5ElDRc5UJ9stOeQeQ5L1JJ1kRRu7ldYMlOHMCJLsY8Mg/Tu3ExdZiQ==}
+    engines: {node: '>=20.11.0'}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      '@es-joy/jsdoccomment': 0.56.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.36.0
+      espree: 10.4.0
+      esquery: 1.6.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.2
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsonc@2.20.1(eslint@9.36.0):
+    resolution: {integrity: sha512-gUzIwQHXx7ZPypUoadcyRi4WbHW2TPixDr0kqQ4miuJBU0emJmyGTlnaT3Og9X2a8R1CDayN9BFSq5weGWbTng==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      eslint: 9.36.0
+      eslint-compat-utils: 0.6.5(eslint@9.36.0)
+      eslint-json-compat-utils: 0.2.1(eslint@9.36.0)(jsonc-eslint-parser@2.4.1)
+      espree: 10.4.0
+      graphemer: 1.4.0
+      jsonc-eslint-parser: 2.4.1
+      natural-compare: 1.4.0
+      synckit: 0.11.11
+    transitivePeerDependencies:
+      - '@eslint/json'
+    dev: true
+
+  /eslint-plugin-n@17.23.1(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-68PealUpYoHOBh332JLLD9Sj7OQUDkFpmcfqt8R9sySfFSeuGJjMTJQvCRRB96zO3A/PELRLkPrzsHmzEFQQ5A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=8.23.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      enhanced-resolve: 5.18.3
+      eslint: 9.36.0
+      eslint-plugin-es-x: 7.8.0(eslint@9.36.0)
+      get-tsconfig: 4.10.1
+      globals: 15.15.0
+      globrex: 0.1.2
+      ignore: 5.3.2
+      semver: 7.7.2
+      ts-declaration-location: 1.0.7(typescript@5.9.2)
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
+  /eslint-plugin-no-only-tests@3.3.0:
+    resolution: {integrity: sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q==}
+    engines: {node: '>=5.0.0'}
+    dev: true
+
+  /eslint-plugin-perfectionist@4.15.0(eslint@9.36.0)(typescript@5.9.2):
+    resolution: {integrity: sha512-pC7PgoXyDnEXe14xvRUhBII8A3zRgggKqJFx2a82fjrItDs1BSI7zdZnQtM2yQvcyod6/ujmzb7ejKPx8lZTnw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      eslint: '>=8.45.0'
+    dependencies:
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/utils': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint: 9.36.0
+      natural-orderby: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /eslint-plugin-pnpm@1.1.1(eslint@9.36.0):
+    resolution: {integrity: sha512-gNo+swrLCgvT8L6JX6hVmxuKeuStGK2l8IwVjDxmYIn+wP4SW/d0ORLKyUiYamsp+UxknQo3f2M1irrTpqahCw==}
+    peerDependencies:
+      eslint: ^9.0.0
+    dependencies:
+      empathic: 2.0.0
+      eslint: 9.36.0
+      jsonc-eslint-parser: 2.4.1
+      pathe: 2.0.3
+      pnpm-workspace-yaml: 1.1.1
+      tinyglobby: 0.2.15
+      yaml-eslint-parser: 1.3.0
+    dev: true
+
+  /eslint-plugin-regexp@2.10.0(eslint@9.36.0):
+    resolution: {integrity: sha512-ovzQT8ESVn5oOe5a7gIDPD5v9bCSjIFJu57sVPDqgPRXicQzOnYfFN21WoQBQF18vrhT5o7UMKFwJQVVjyJ0ng==}
+    engines: {node: ^18 || >=20}
+    peerDependencies:
+      eslint: '>=8.44.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@eslint-community/regexpp': 4.12.1
+      comment-parser: 1.4.1
+      eslint: 9.36.0
+      jsdoc-type-pratt-parser: 4.8.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+    dev: true
+
+  /eslint-plugin-toml@0.12.0(eslint@9.36.0):
+    resolution: {integrity: sha512-+/wVObA9DVhwZB1nG83D2OAQRrcQZXy+drqUnFJKymqnmbnbfg/UPmEMCKrJNcEboUGxUjYrJlgy+/Y930mURQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.36.0
+      eslint-compat-utils: 0.6.5(eslint@9.36.0)
+      lodash: 4.17.21
+      toml-eslint-parser: 0.10.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-unicorn@60.0.0(eslint@9.36.0):
+    resolution: {integrity: sha512-QUzTefvP8stfSXsqKQ+vBQSEsXIlAiCduS/V1Em+FKgL9c21U/IIm20/e3MFy1jyCf14tHAhqC1sX8OTy6VUCg==}
+    engines: {node: ^20.10.0 || >=21.0.0}
+    peerDependencies:
+      eslint: '>=9.29.0'
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@eslint/plugin-kit': 0.3.5
+      change-case: 5.4.4
+      ci-info: 4.3.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.45.1
+      eslint: 9.36.0
+      esquery: 1.6.0
+      find-up-simple: 1.0.1
+      globals: 16.4.0
+      indent-string: 5.0.0
+      is-builtin-module: 5.0.0
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      regexp-tree: 0.1.27
+      regjsparser: 0.12.0
+      semver: 7.7.2
+      strip-indent: 4.1.0
+    dev: true
+
+  /eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.44.0)(eslint@9.36.0):
+    resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
+      eslint: ^9.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0)(eslint@9.36.0)(typescript@5.9.2)
+      eslint: 9.36.0
+    dev: true
+
+  /eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.44.0)(eslint@9.36.0)(vue-eslint-parser@10.2.0):
+    resolution: {integrity: sha512-K6tP0dW8FJVZLQxa2S7LcE1lLw3X8VvB3t887Q6CLrFVxHYBXGANbXvwNzYIu6Ughx1bSJ5BDT0YB3ybPT39lw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      vue-eslint-parser: ^10.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@typescript-eslint/parser': 8.44.0(eslint@9.36.0)(typescript@5.9.2)
+      eslint: 9.36.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.2
+      vue-eslint-parser: 10.2.0(eslint@9.36.0)
+      xml-name-validator: 4.0.0
+    dev: true
+
+  /eslint-plugin-yml@1.18.0(eslint@9.36.0):
+    resolution: {integrity: sha512-9NtbhHRN2NJa/s3uHchO3qVVZw0vyOIvWlXWGaKCr/6l3Go62wsvJK5byiI6ZoYztDsow4GnS69BZD3GnqH3hA==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.36.0
+      eslint-compat-utils: 0.6.5(eslint@9.36.0)
+      natural-compare: 1.4.0
+      yaml-eslint-parser: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.21)(eslint@9.36.0):
+    resolution: {integrity: sha512-u4W0CJwGoWY3bjXAuFpc/b6eK3NQEI8MoeW7ritKj3G3z/WtHrKjkqf+wk8mPEy5rlMGS+k6AZYOw2XBoN/02Q==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.3.0
+      eslint: '>=9.0.0'
+    dependencies:
+      '@vue/compiler-sfc': 3.5.21
+      eslint: 9.36.0
+    dev: true
+
+  /eslint-scope@5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+    dev: true
+
+  /eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-typegen@2.3.0(eslint@9.36.0):
+    resolution: {integrity: sha512-azYgAvhlz1AyTpeLfVSKcrNJInuIsRrcUrOcHmEl8T9oMKesePVUPrF8gRgE6azV8CAlFzxJDTyaXAAbA/BYiA==}
+    peerDependencies:
+      eslint: ^9.0.0
+    dependencies:
+      eslint: 9.36.0
+      json-schema-to-typescript-lite: 15.0.0
+      ohash: 2.0.11
+    dev: true
+
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
+
+  /eslint@9.36.0:
+    resolution: {integrity: sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0)
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.21.0
+      '@eslint/config-helpers': 0.3.1
+      '@eslint/core': 0.15.2
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.36.0
+      '@eslint/plugin-kit': 0.3.5
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+    dev: true
+
+  /espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /estraverse@4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  /estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    dependencies:
+      '@types/estree': 1.0.8
+
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+    dev: true
+
+  /execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+    dev: true
+
+  /expect-type@1.2.2:
+    resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
+  /exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
+
+  /fake-indexeddb@6.2.2:
+    resolution: {integrity: sha512-SGbf7fzjeHz3+12NO1dYigcYn4ivviaeULV5yY5rdGihBvvgwMds4r4UBbNIUMwkze57KTDm32rq3j1Az8mzEw==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
+
+  /fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+    dev: true
+
+  /fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+    dev: true
+
+  /fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
+
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
+  /fast-npm-meta@0.4.6:
+    resolution: {integrity: sha512-zbBBOAOlzxfrU4WSnbCHk/nR6Vf32lSEPxDEvNOR08Z5DSZ/A6qJu0rqrHVcexBTd1hc2gim998xnqF/R1PuEw==}
+    dev: true
+
+  /fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+    dev: true
+
+  /fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+    dependencies:
+      reusify: 1.1.0
+
+  /fault@2.0.1:
+    resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
+    dependencies:
+      format: 0.2.2
+    dev: true
+
+  /fdir@6.5.0(picomatch@4.0.3):
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+    dependencies:
+      picomatch: 4.0.3
+
+  /file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      flat-cache: 4.0.1
+    dev: true
+
+  /file-uri-to-path@1.0.0:
+    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
+    dev: true
+
+  /fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+
+  /find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
+
+  /find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+      unicorn-magic: 0.1.0
+    dev: true
+
+  /flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+    dev: true
+
+  /flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+    dev: true
+
+  /foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  /format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
+    dev: true
+
+  /fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+    dev: true
+
+  /fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /fs-extra@9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  /fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /geojson-vt@3.2.1:
+    resolution: {integrity: sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==}
+    dev: false
+
+  /geojson@0.5.0:
+    resolution: {integrity: sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
+  /get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dev: true
+
+  /get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+    dev: true
+
+  /get-port-please@3.2.0:
+    resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
+    dev: true
+
+  /get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+    dev: true
+
+  /get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
+  /giget@2.0.0:
+    resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
+    hasBin: true
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      defu: 6.1.4
+      node-fetch-native: 1.6.7
+      nypm: 0.6.2
+      pathe: 2.0.3
+
+  /git-up@8.1.1:
+    resolution: {integrity: sha512-FDenSF3fVqBYSaJoYy1KSc2wosx0gCvKP+c+PRBht7cAaiCeQlBtfBDX9vgnNOHmdePlSFITVcn4pFfcgNvx3g==}
+    dependencies:
+      is-ssh: 1.4.1
+      parse-url: 9.2.0
+    dev: true
+
+  /git-url-parse@16.1.0:
+    resolution: {integrity: sha512-cPLz4HuK86wClEW7iDdeAKcCVlWXmrLpb2L+G9goW0Z1dtpNS6BXXSOckUTlJT/LDQViE1QZKstNORzHsLnobw==}
+    dependencies:
+      git-up: 8.1.1
+    dev: true
+
+  /github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+    dev: true
+
+  /gl-matrix@3.4.4:
+    resolution: {integrity: sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==}
+    dev: false
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+    dev: true
+
+  /glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      ini: 4.1.1
+    dev: true
+
+  /global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+    dev: false
+
+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /globby@14.1.0:
+    resolution: {integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@sindresorhus/merge-streams': 2.3.0
+      fast-glob: 3.3.3
+      ignore: 7.0.5
+      path-type: 6.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.3.0
+    dev: true
+
+  /globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    dev: true
+
+  /gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    dev: true
+
+  /graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
+
+  /gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
+  /gzip-size@7.0.0:
+    resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
+  /h3@1.15.4:
+    resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
+    dependencies:
+      cookie-es: 1.2.2
+      crossws: 0.3.5
+      defu: 6.1.4
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.3
+      radix3: 1.1.2
+      ufo: 1.6.1
+      uncrypto: 0.1.3
+
+  /happy-dom@18.0.1:
+    resolution: {integrity: sha512-qn+rKOW7KWpVTtgIUi6RVmTBZJSe2k0Db0vh1f7CWrWclkkc7/Q+FrOfkZIb2eiErLyqu5AXEzE7XthO9JVxRA==}
+    engines: {node: '>=20.0.0'}
+    dependencies:
+      '@types/node': 20.19.17
+      '@types/whatwg-mimetype': 3.0.2
+      whatwg-mimetype: 3.0.0
+    dev: true
+
+  /has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.1.0
+    dev: true
+
+  /hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
+  /hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  /http-assert@1.5.0:
+    resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      deep-equal: 1.0.1
+      http-errors: 1.8.1
+    dev: true
+
+  /http-errors@1.6.3:
+    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.0
+      statuses: 1.5.0
+    dev: true
+
+  /http-errors@1.8.1:
+    resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 1.5.0
+      toidentifier: 1.0.1
+    dev: true
+
+  /http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+    dev: true
+
+  /http-shutdown@1.2.2:
+    resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+    dev: true
+
+  /https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /httpxy@0.1.7:
+    resolution: {integrity: sha512-pXNx8gnANKAndgga5ahefxc++tJvNL87CXoRwxn1cJE2ZkWEojF3tNfQIEhZX/vfpt+wzeAzpUI4qkediX1MLQ==}
+    dev: true
+
+  /human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+    dev: true
+
+  /iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: false
+
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  /ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  /image-meta@0.2.1:
+    resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
+    dev: true
+
+  /import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  /impound@1.0.0:
+    resolution: {integrity: sha512-8lAJ+1Arw2sMaZ9HE2ZmL5zOcMnt18s6+7Xqgq2aUVy4P1nlzAyPtzCDxsk51KVFwHEEdc6OWvUyqwHwhRYaug==}
+    dependencies:
+      exsolve: 1.0.7
+      mocked-exports: 0.1.1
+      pathe: 2.0.3
+      unplugin: 2.3.10
+      unplugin-utils: 0.2.5
+    dev: true
+
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  /ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dev: true
+
+  /internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+    dev: false
+
+  /internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /ioredis@5.7.0:
+    resolution: {integrity: sha512-NUcA93i1lukyXU+riqEyPtSEkyFq8tX90uL659J+qpCZ3rEdViB/APC58oAhIh3+bJln2hzdlZbBZsGNrlsR8g==}
+    engines: {node: '>=12.22.0'}
+    dependencies:
+      '@ioredis/commands': 1.4.0
+      cluster-key-slot: 1.1.2
+      debug: 4.4.3
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+
+  /is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+    dev: false
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.3.0
+
+  /is-builtin-module@5.0.0:
+    resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
+    engines: {node: '>=18.20'}
+    dependencies:
+      builtin-modules: 5.0.0
+    dev: true
+
+  /is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      hasown: 2.0.2
+
+  /is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dev: true
+
+  /is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+    dev: true
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  /is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+    dev: true
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+
+  /is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+    dependencies:
+      is-docker: 3.0.0
+    dev: true
+
+  /is-installed-globally@1.0.0:
+    resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      global-directory: 4.0.1
+      is-path-inside: 4.0.0
+    dev: true
+
+  /is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  /is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+    dependencies:
+      '@types/estree': 1.0.8
+    dev: true
+
+  /is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+    dev: true
+
+  /is-ssh@1.4.1:
+    resolution: {integrity: sha512-JNeu1wQsHjyHgn9NcWTaXq6zWSR6hqE0++zhfZlkFBbScNkyvxCdeV8sRkSBaeLKxmbpR21brail63ACNxJ0Tg==}
+    dependencies:
+      protocols: 2.0.2
+    dev: true
+
+  /is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
+  /is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+    dev: true
+
+  /is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+    dependencies:
+      is-inside-container: 1.0.0
+    dev: true
+
+  /is64bit@2.0.0:
+    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
+    engines: {node: '>=18'}
+    dependencies:
+      system-architecture: 0.1.0
+    dev: true
+
+  /isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: true
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  /isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  /jest-worker@27.5.1:
+    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/node': 24.5.2
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+    dev: true
+
+  /jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  /jiti@2.5.1:
+    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
+    hasBin: true
+
+  /js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.4
+      glob: 10.4.5
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+    dev: true
+
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  /js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /jsdoc-type-pratt-parser@4.1.0:
+    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
+  /jsdoc-type-pratt-parser@4.8.0:
+    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
+  /jsdoc-type-pratt-parser@5.1.1:
+    resolution: {integrity: sha512-DYYlVP1fe4QBMh2xTIs20/YeTz2GYVbWAEZweHSZD+qQ/Cx2d5RShuhhsdk64eTjNq0FeVnteP/qVOgaywSRbg==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
+  /jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
+
+  /json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  /json-schema-to-typescript-lite@15.0.0:
+    resolution: {integrity: sha512-5mMORSQm9oTLyjM4mWnyNBi2T042Fhg1/0gCIB6X8U/LVpM2A+Nmj2yEyArqVouDmFThDxpEXcnTgSrjkGJRFA==}
+    dependencies:
+      '@apidevtools/json-schema-ref-parser': 14.2.1(@types/json-schema@7.0.15)
+      '@types/json-schema': 7.0.15
+    dev: true
+
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
+  /json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /jsonc-eslint-parser@2.4.1:
+    resolution: {integrity: sha512-uuPNLJkKN8NXAlZlQ6kmUF9qO+T6Kyd7oV4+/7yy8Jz6+MZNyhPq8EdLpdfnPVzUC8qSf1b4j1azKaGnFsjmsw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.15.0
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.7.2
+    dev: true
+
+  /jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
+  /kdbush@3.0.0:
+    resolution: {integrity: sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==}
+    dev: false
+
+  /keygrip@1.1.0:
+    resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      tsscmp: 1.0.6
+    dev: true
+
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
+
+  /kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  /knitwork@1.2.0:
+    resolution: {integrity: sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==}
+
+  /koa-compose@4.1.0:
+    resolution: {integrity: sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==}
+    dev: true
+
+  /koa-convert@2.0.0:
+    resolution: {integrity: sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      co: 4.6.0
+      koa-compose: 4.1.0
+    dev: true
+
+  /koa-send@5.0.1:
+    resolution: {integrity: sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==}
+    engines: {node: '>= 8'}
+    dependencies:
+      debug: 4.4.3
+      http-errors: 1.8.1
+      resolve-path: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /koa-static@5.0.0:
+    resolution: {integrity: sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==}
+    engines: {node: '>= 7.6.0'}
+    dependencies:
+      debug: 3.2.7
+      koa-send: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /koa@2.16.2:
+    resolution: {integrity: sha512-+CCssgnrWKx9aI3OeZwroa/ckG4JICxvIFnSiOUyl2Uv+UTI+xIw0FfFrWS7cQFpoePpr9o8csss7KzsTzNL8Q==}
+    engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
+    dependencies:
+      accepts: 1.3.8
+      cache-content-type: 1.0.1
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookies: 0.9.1
+      debug: 4.4.3
+      delegates: 1.0.0
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      fresh: 0.5.2
+      http-assert: 1.5.0
+      http-errors: 1.8.1
+      is-generator-function: 1.1.0
+      koa-compose: 4.1.0
+      koa-convert: 2.0.0
+      on-finished: 2.4.1
+      only: 0.0.2
+      parseurl: 1.3.3
+      statuses: 1.5.0
+      type-is: 1.6.18
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: true
+
+  /launch-editor@2.11.1:
+    resolution: {integrity: sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==}
+    dependencies:
+      picocolors: 1.1.1
+      shell-quote: 1.8.3
+    dev: true
+
+  /lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
+    dependencies:
+      readable-stream: 2.3.8
+    dev: true
+
+  /leaflet@1.7.1:
+    resolution: {integrity: sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==}
+    dev: false
+
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  /listhen@1.9.0:
+    resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
+    hasBin: true
+    dependencies:
+      '@parcel/watcher': 2.5.1
+      '@parcel/watcher-wasm': 2.5.1
+      citty: 0.1.6
+      clipboardy: 4.0.0
+      consola: 3.4.2
+      crossws: 0.3.5
+      defu: 6.1.4
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      http-shutdown: 1.2.2
+      jiti: 2.5.1
+      mlly: 1.8.0
+      node-forge: 1.3.1
+      pathe: 1.1.2
+      std-env: 3.9.0
+      ufo: 1.6.1
+      untun: 0.1.3
+      uqr: 0.1.2
+    dev: true
+
+  /load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /loader-runner@4.3.0:
+    resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
+    engines: {node: '>=6.11.5'}
+    dev: true
+
+  /local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      p-locate: 6.0.0
+    dev: true
+
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
+  /lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+    dev: true
+
+  /lodash.isarguments@3.1.0:
+    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+    dev: true
+
+  /lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+    dev: true
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
+  /lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+    dev: true
+
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
+  /longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+    dev: true
+
+  /loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+    dev: true
+
+  /lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: true
+
+  /lucide-vue-next@0.482.0(vue@3.5.21):
+    resolution: {integrity: sha512-XpxrCOAnPzuH1tlKUy3U6epKAmdMfs1iEeL6ziWulGVXzNKv6anorp0v6vCdhziqvCSQ2SsGLnbOXmZ/sjjl9g==}
+    peerDependencies:
+      vue: '>=3.0.1'
+    dependencies:
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /magic-regexp@0.10.0:
+    resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
+    dependencies:
+      estree-walker: 3.0.3
+      magic-string: 0.30.19
+      mlly: 1.8.0
+      regexp-tree: 0.1.27
+      type-level-regexp: 0.1.17
+      ufo: 1.6.1
+      unplugin: 2.3.10
+    dev: true
+
+  /magic-string-ast@1.0.2:
+    resolution: {integrity: sha512-8ngQgLhcT0t3YBdn9CGkZqCYlvwW9pm7aWJwd7AxseVWf1RU8ZHCQvG1mt3N5vvUme+pXTcHB8G/7fE666U8Vw==}
+    engines: {node: '>=20.18.0'}
+    dependencies:
+      magic-string: 0.30.19
+    dev: true
+
+  /magic-string@0.30.19:
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  /magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+      source-map-js: 1.2.1
+
+  /maplibre-gl@2.4.0:
+    resolution: {integrity: sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==}
+    requiresBuild: true
+    dependencies:
+      '@mapbox/geojson-rewind': 0.5.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/mapbox-gl-supported': 2.0.1
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/tiny-sdf': 2.0.7
+      '@mapbox/unitbezier': 0.0.1
+      '@mapbox/vector-tile': 1.3.1
+      '@mapbox/whoots-js': 3.1.0
+      '@types/geojson': 7946.0.16
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/mapbox__vector-tile': 1.3.4
+      '@types/pbf': 3.0.5
+      csscolorparser: 1.0.3
+      earcut: 2.2.4
+      geojson-vt: 3.2.1
+      gl-matrix: 3.4.4
+      global-prefix: 3.0.0
+      murmurhash-js: 1.0.0
+      pbf: 3.3.0
+      potpack: 1.0.2
+      quickselect: 2.0.0
+      supercluster: 7.1.5
+      tinyqueue: 2.0.3
+      vt-pbf: 3.1.3
+    dev: false
+
+  /markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+    dev: true
+
+  /math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+    dev: true
+
+  /mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-frontmatter@2.0.1:
+    resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      escape-string-regexp: 5.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-extension-frontmatter: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+    dev: true
+
+  /mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+    dev: true
+
+  /mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+    dev: true
+
+  /mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+    dependencies:
+      '@types/mdast': 4.0.4
+    dev: true
+
+  /mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+    dev: true
+
+  /mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+    dev: true
+
+  /media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    dev: true
+
+  /merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  /methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-frontmatter@2.0.0:
+    resolution: {integrity: sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==}
+    dependencies:
+      fault: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+    dependencies:
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+    dev: true
+
+  /micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+    dev: true
+
+  /micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+    dev: true
+
+  /micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+    dev: true
+
+  /micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+    dev: true
+
+  /micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+    dev: true
+
+  /micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+    dependencies:
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+    dev: true
+
+  /micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: true
+
+  /micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+    dev: true
+
+  /micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+    dev: true
+
+  /micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.3
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: true
+
+  /mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.54.0
+    dev: true
+
+  /mime@3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    dev: true
+
+  /mime@4.1.0:
+    resolution: {integrity: sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dev: true
+
+  /mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /minimatch@10.0.3:
+    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+    engines: {node: 20 || >=22}
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+    dev: true
+
+  /minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.12
+    dev: true
+
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.2
+    dev: true
+
+  /minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.2
+    dev: true
+
+  /minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.2
+
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: false
+
+  /minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  /minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+    dependencies:
+      minipass: 7.1.2
+    dev: true
+
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  /mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
+  /mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
+  /mocked-exports@0.1.1:
+    resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
+    dev: true
+
+  /mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  /muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+    dev: true
+
+  /murmurhash-js@1.0.0:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+    dev: false
+
+  /mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  /nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /nanoid@5.1.5:
+    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: true
+
+  /nanotar@0.2.0:
+    resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
+    dev: true
+
+  /napi-postinstall@0.3.3:
+    resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+    dev: true
+
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
+  /natural-orderby@5.0.0:
+    resolution: {integrity: sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+    dev: true
+
+  /nitropack@2.12.6:
+    resolution: {integrity: sha512-DEq31s0SP4/Z5DIoVBRo9DbWFPWwIoYD4cQMEz7eE+iJMiAP+1k9A3B9kcc6Ihc0jDJmfUcHYyh6h2XlynCx6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      xml2js: ^0.6.2
+    peerDependenciesMeta:
+      xml2js:
+        optional: true
+    dependencies:
+      '@cloudflare/kv-asset-handler': 0.4.0
+      '@rollup/plugin-alias': 5.1.1(rollup@4.52.0)
+      '@rollup/plugin-commonjs': 28.0.6(rollup@4.52.0)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.52.0)
+      '@rollup/plugin-json': 6.1.0(rollup@4.52.0)
+      '@rollup/plugin-node-resolve': 16.0.1(rollup@4.52.0)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.52.0)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.52.0)
+      '@vercel/nft': 0.30.1(rollup@4.52.0)
+      archiver: 7.0.1
+      c12: 3.3.0(magicast@0.3.5)
+      chokidar: 4.0.3
+      citty: 0.1.6
+      compatx: 0.2.0
+      confbox: 0.2.2
+      consola: 3.4.2
+      cookie-es: 2.0.0
+      croner: 9.1.0
+      crossws: 0.3.5
+      db0: 0.3.2
+      defu: 6.1.4
+      destr: 2.0.5
+      dot-prop: 9.0.0
+      esbuild: 0.25.10
+      escape-string-regexp: 5.0.0
+      etag: 1.8.1
+      exsolve: 1.0.7
+      globby: 14.1.0
+      gzip-size: 7.0.0
+      h3: 1.15.4
+      hookable: 5.5.3
+      httpxy: 0.1.7
+      ioredis: 5.7.0
+      jiti: 2.5.1
+      klona: 2.0.6
+      knitwork: 1.2.0
+      listhen: 1.9.0
+      magic-string: 0.30.19
+      magicast: 0.3.5
+      mime: 4.1.0
+      mlly: 1.8.0
+      node-fetch-native: 1.6.7
+      node-mock-http: 1.0.3
+      ofetch: 1.4.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      pretty-bytes: 7.1.0
+      radix3: 1.1.2
+      rollup: 4.52.0
+      rollup-plugin-visualizer: 6.0.3(rollup@4.52.0)
+      scule: 1.3.0
+      semver: 7.7.2
+      serve-placeholder: 2.0.2
+      serve-static: 2.2.0
+      source-map: 0.7.6
+      std-env: 3.9.0
+      ufo: 1.6.1
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.4.1
+      unenv: 2.0.0-rc.21
+      unimport: 5.3.0
+      unplugin-utils: 0.3.0
+      unstorage: 1.17.1(db0@0.3.2)(ioredis@5.7.0)
+      untyped: 2.0.0
+      unwasm: 0.3.11
+      youch: 4.1.0-beta.11
+      youch-core: 0.3.3
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - better-sqlite3
+      - drizzle-orm
+      - encoding
+      - idb-keyval
+      - mysql2
+      - react-native-b4a
+      - rolldown
+      - sqlite3
+      - supports-color
+      - uploadthing
+    dev: true
+
+  /node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+    dev: true
+
+  /node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  /node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
+  /node-forge@1.3.1:
+    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
+    engines: {node: '>= 6.13.0'}
+    dev: true
+
+  /node-gyp-build@4.8.4:
+    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
+    hasBin: true
+    dev: true
+
+  /node-mock-http@1.0.3:
+    resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==}
+
+  /node-releases@2.0.21:
+    resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
+    dev: true
+
+  /nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+    dependencies:
+      abbrev: 2.0.0
+    dev: true
+
+  /nopt@8.1.0:
+    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+    dependencies:
+      abbrev: 3.0.1
+    dev: true
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  /normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      path-key: 4.0.0
+    dev: true
+
+  /npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+    dev: true
+
+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
+  /nuxt@4.1.2(@vue/compiler-sfc@3.5.21)(eslint@9.36.0)(typescript@5.9.2)(vite@7.1.6)(vue-tsc@2.2.12):
+    resolution: {integrity: sha512-g5mwszCZT4ZeGJm83nxoZvtvZoAEaY65VDdn7p7UgznePbRaEJJ1KS1OIld4FPVkoDZ8TEVuDNqI9gUn12Exvg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@parcel/watcher': ^2.1.0
+      '@types/node': '>=18.12.0'
+    peerDependenciesMeta:
+      '@parcel/watcher':
+        optional: true
+      '@types/node':
+        optional: true
+    dependencies:
+      '@nuxt/cli': 3.28.0
+      '@nuxt/devalue': 2.0.2
+      '@nuxt/devtools': 2.6.5(vite@7.1.6)(vue@3.5.21)
+      '@nuxt/kit': 4.1.2
+      '@nuxt/schema': 4.1.2
+      '@nuxt/telemetry': 2.6.6
+      '@nuxt/vite-builder': 4.1.2(eslint@9.36.0)(typescript@5.9.2)(vue-tsc@2.2.12)(vue@3.5.21)
+      '@unhead/vue': 2.0.17(vue@3.5.21)
+      '@vue/shared': 3.5.21
+      c12: 3.3.0(magicast@0.3.5)
+      chokidar: 4.0.3
+      compatx: 0.2.0
+      consola: 3.4.2
+      cookie-es: 2.0.0
+      defu: 6.1.4
+      destr: 2.0.5
+      devalue: 5.3.2
+      errx: 0.1.0
+      esbuild: 0.25.10
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      exsolve: 1.0.7
+      h3: 1.15.4
+      hookable: 5.5.3
+      ignore: 7.0.5
+      impound: 1.0.0
+      jiti: 2.5.1
+      klona: 2.0.6
+      knitwork: 1.2.0
+      magic-string: 0.30.19
+      mlly: 1.8.0
+      mocked-exports: 0.1.1
+      nanotar: 0.2.0
+      nitropack: 2.12.6
+      nypm: 0.6.2
+      ofetch: 1.4.1
+      ohash: 2.0.11
+      on-change: 5.0.1
+      oxc-minify: 0.87.0
+      oxc-parser: 0.87.0
+      oxc-transform: 0.87.0
+      oxc-walker: 0.5.2(oxc-parser@0.87.0)
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      radix3: 1.1.2
+      scule: 1.3.0
+      semver: 7.7.2
+      std-env: 3.9.0
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.4.1
+      unimport: 5.3.0
+      unplugin: 2.3.10
+      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.21)(typescript@5.9.2)(vue-router@4.5.1)(vue@3.5.21)
+      unstorage: 1.17.1(db0@0.3.2)(ioredis@5.7.0)
+      untyped: 2.0.0
+      vue: 3.5.21(typescript@5.9.2)
+      vue-bundle-renderer: 2.1.2
+      vue-devtools-stub: 0.1.0
+      vue-router: 4.5.1(vue@3.5.21)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@biomejs/biome'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@vue/compiler-sfc'
+      - aws4fetch
+      - better-sqlite3
+      - bufferutil
+      - db0
+      - drizzle-orm
+      - encoding
+      - eslint
+      - idb-keyval
+      - ioredis
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - mysql2
+      - optionator
+      - react-native-b4a
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - sqlite3
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - vite
+      - vls
+      - vti
+      - vue-tsc
+      - xml2js
+      - yaml
+    dev: true
+
+  /nypm@0.6.2:
+    resolution: {integrity: sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      tinyexec: 1.0.1
+
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  /ofetch@1.4.1:
+    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.1
+    dev: true
+
+  /ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  /on-change@5.0.1:
+    resolution: {integrity: sha512-n7THCP7RkyReRSLkJb8kUWoNsxUIBxTkIp3JKno+sEz6o/9AJ3w3P9fzQkITEkMwyTKJjZciF3v/pVoouxZZMg==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      ee-first: 1.1.1
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      mimic-fn: 4.0.0
+    dev: true
+
+  /only@0.0.2:
+    resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}
+    dev: true
+
+  /open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+    dev: true
+
+  /open@7.4.2:
+    resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
+  /open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
+  /optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+    dev: true
+
+  /oxc-minify@0.87.0:
+    resolution: {integrity: sha512-+UHWp6+0mdq0S2rEsZx9mqgL6JnG9ogO+CU17XccVrPUFtISFcZzk/biTn1JdBYFQ3kztof19pv8blMtgStQ2g==}
+    engines: {node: '>=14.0.0'}
+    optionalDependencies:
+      '@oxc-minify/binding-android-arm64': 0.87.0
+      '@oxc-minify/binding-darwin-arm64': 0.87.0
+      '@oxc-minify/binding-darwin-x64': 0.87.0
+      '@oxc-minify/binding-freebsd-x64': 0.87.0
+      '@oxc-minify/binding-linux-arm-gnueabihf': 0.87.0
+      '@oxc-minify/binding-linux-arm-musleabihf': 0.87.0
+      '@oxc-minify/binding-linux-arm64-gnu': 0.87.0
+      '@oxc-minify/binding-linux-arm64-musl': 0.87.0
+      '@oxc-minify/binding-linux-riscv64-gnu': 0.87.0
+      '@oxc-minify/binding-linux-s390x-gnu': 0.87.0
+      '@oxc-minify/binding-linux-x64-gnu': 0.87.0
+      '@oxc-minify/binding-linux-x64-musl': 0.87.0
+      '@oxc-minify/binding-wasm32-wasi': 0.87.0
+      '@oxc-minify/binding-win32-arm64-msvc': 0.87.0
+      '@oxc-minify/binding-win32-x64-msvc': 0.87.0
+    dev: true
+
+  /oxc-parser@0.87.0:
+    resolution: {integrity: sha512-uc47XrtHwkBoES4HFgwgfH9sqwAtJXgAIBq4fFBMZ4hWmgVZoExyn+L4g4VuaecVKXkz1bvlaHcfwHAJPQb5Gw==}
+    engines: {node: '>=20.0.0'}
+    dependencies:
+      '@oxc-project/types': 0.87.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm64': 0.87.0
+      '@oxc-parser/binding-darwin-arm64': 0.87.0
+      '@oxc-parser/binding-darwin-x64': 0.87.0
+      '@oxc-parser/binding-freebsd-x64': 0.87.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.87.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.87.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.87.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.87.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.87.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.87.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.87.0
+      '@oxc-parser/binding-linux-x64-musl': 0.87.0
+      '@oxc-parser/binding-wasm32-wasi': 0.87.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.87.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.87.0
+    dev: true
+
+  /oxc-transform@0.87.0:
+    resolution: {integrity: sha512-dt6INKWY2DKbSc8yR9VQoqBsCjPQ3z/SKv882UqlwFve+K38xtpi2avDlvNd35SpHUwDLDFoV3hMX0U3qOSaaQ==}
+    engines: {node: '>=14.0.0'}
+    optionalDependencies:
+      '@oxc-transform/binding-android-arm64': 0.87.0
+      '@oxc-transform/binding-darwin-arm64': 0.87.0
+      '@oxc-transform/binding-darwin-x64': 0.87.0
+      '@oxc-transform/binding-freebsd-x64': 0.87.0
+      '@oxc-transform/binding-linux-arm-gnueabihf': 0.87.0
+      '@oxc-transform/binding-linux-arm-musleabihf': 0.87.0
+      '@oxc-transform/binding-linux-arm64-gnu': 0.87.0
+      '@oxc-transform/binding-linux-arm64-musl': 0.87.0
+      '@oxc-transform/binding-linux-riscv64-gnu': 0.87.0
+      '@oxc-transform/binding-linux-s390x-gnu': 0.87.0
+      '@oxc-transform/binding-linux-x64-gnu': 0.87.0
+      '@oxc-transform/binding-linux-x64-musl': 0.87.0
+      '@oxc-transform/binding-wasm32-wasi': 0.87.0
+      '@oxc-transform/binding-win32-arm64-msvc': 0.87.0
+      '@oxc-transform/binding-win32-x64-msvc': 0.87.0
+    dev: true
+
+  /oxc-walker@0.5.2(oxc-parser@0.87.0):
+    resolution: {integrity: sha512-XYoZqWwApSKUmSDEFeOKdy3Cdh95cOcSU8f7yskFWE4Rl3cfL5uwyY+EV7Brk9mdNLy+t5SseJajd6g7KncvlA==}
+    peerDependencies:
+      oxc-parser: '>=0.72.0'
+    dependencies:
+      magic-regexp: 0.10.0
+      oxc-parser: 0.87.0
+    dev: true
+
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      yocto-queue: 1.2.1
+    dev: true
+
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      p-limit: 4.0.0
+    dev: true
+
+  /package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  /package-manager-detector@1.3.0:
+    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+    dev: true
+
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+
+  /parse-gitignore@2.0.0:
+    resolution: {integrity: sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /parse-imports-exports@0.2.4:
+    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
+    dependencies:
+      parse-statements: 1.0.11
+    dev: true
+
+  /parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+    dev: false
+
+  /parse-path@7.1.0:
+    resolution: {integrity: sha512-EuCycjZtfPcjWk7KTksnJ5xPMvWGA/6i4zrLYhRG0hGvC3GPU/jGUj3Cy+ZR0v30duV3e23R95T1lE2+lsndSw==}
+    dependencies:
+      protocols: 2.0.2
+    dev: true
+
+  /parse-statements@1.0.11:
+    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
+    dev: true
+
+  /parse-unit@1.0.1:
+    resolution: {integrity: sha512-hrqldJHokR3Qj88EIlV/kAyAi/G5R2+R56TBANxNMy0uPlYcttx0jnMW6Yx5KsKPSbC3KddM/7qQm3+0wEXKxg==}
+    dev: false
+
+  /parse-url@9.2.0:
+    resolution: {integrity: sha512-bCgsFI+GeGWPAvAiUv63ZorMeif3/U0zaXABGJbOWt5OH2KCaPHF6S+0ok4aqM9RuIPGyZdx9tR9l13PsW4AYQ==}
+    engines: {node: '>=14.13.0'}
+    dependencies:
+      '@types/parse-path': 7.1.0
+      parse-path: 7.1.0
+    dev: true
+
+  /parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
+
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  /path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  /path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  /path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+    dev: true
+
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /path-type@6.0.0:
+    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+    dev: true
+
+  /pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  /pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+    dev: true
+
+  /pbf@3.3.0:
+    resolution: {integrity: sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==}
+    hasBin: true
+    dependencies:
+      ieee754: 1.2.1
+      resolve-protobuf-schema: 2.1.0
+    dev: false
+
+  /perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  /perfect-debounce@2.0.0:
+    resolution: {integrity: sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==}
+
+  /picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  /picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  /pinia-plugin-persistedstate@4.5.0(@pinia/nuxt@0.11.2)(pinia@3.0.3):
+    resolution: {integrity: sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      '@pinia/nuxt': '>=0.10.0'
+      pinia: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@pinia/nuxt':
+        optional: true
+      pinia:
+        optional: true
+    dependencies:
+      '@pinia/nuxt': 0.11.2(pinia@3.0.3)
+      deep-pick-omit: 1.2.1
+      defu: 6.1.4
+      destr: 2.0.5
+      pinia: 3.0.3(typescript@5.9.2)(vue@3.5.21)
+    dev: false
+
+  /pinia@3.0.3(typescript@5.9.2)(vue@3.5.21):
+    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 7.7.7
+      typescript: 5.9.2
+      vue: 3.5.21(typescript@5.9.2)
+
+  /pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  /pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  /pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.7
+      pathe: 2.0.3
+
+  /playwright-core@1.55.0:
+    resolution: {integrity: sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dev: true
+
+  /pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /pnpm-workspace-yaml@1.1.1:
+    resolution: {integrity: sha512-nGBB7h3Ped3g9dBrR6d3YNwXCKYsEg8K9J3GMmSrwGEXq3RHeGW44/B4MZW51p4FRMnyxJzTY5feSBbUjRhIHQ==}
+    dependencies:
+      yaml: 2.8.1
+    dev: true
+
+  /portfinder@1.0.38:
+    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
+    engines: {node: '>= 10.12'}
+    dependencies:
+      async: 3.2.6
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /postcss-calc@10.1.1(postcss@8.5.6):
+    resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
+    engines: {node: ^18.12 || ^20.9 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.38
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-colormin@7.0.4(postcss@8.5.6):
+    resolution: {integrity: sha512-ziQuVzQZBROpKpfeDwmrG+Vvlr0YWmY/ZAk99XD+mGEBuEojoFekL41NCsdhyNUtZI7DPOoIWIR7vQQK9xwluw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-convert-values@7.0.7(postcss@8.5.6):
+    resolution: {integrity: sha512-HR9DZLN04Xbe6xugRH6lS4ZQH2zm/bFh/ZyRkpedZozhvh+awAfbA0P36InO4fZfDhvYfNJeNvlTf1sjwGbw/A==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-discard-comments@7.0.4(postcss@8.5.6):
+    resolution: {integrity: sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /postcss-discard-duplicates@7.0.2(postcss@8.5.6):
+    resolution: {integrity: sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+    dev: true
+
+  /postcss-discard-empty@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+    dev: true
+
+  /postcss-discard-overridden@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+    dev: true
+
+  /postcss-import@15.1.0(postcss@8.5.6):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.10
+
+  /postcss-js@4.1.0(postcss@8.5.6):
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.6
+
+  /postcss-load-config@4.0.2(postcss@8.5.6):
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 3.1.3
+      postcss: 8.5.6
+      yaml: 2.8.1
+
+  /postcss-merge-longhand@7.0.5(postcss@8.5.6):
+    resolution: {integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      stylehacks: 7.0.6(postcss@8.5.6)
+    dev: true
+
+  /postcss-merge-rules@7.0.6(postcss@8.5.6):
+    resolution: {integrity: sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      caniuse-api: 3.0.0
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /postcss-minify-font-values@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-gradients@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-params@7.0.4(postcss@8.5.6):
+    resolution: {integrity: sha512-3OqqUddfH8c2e7M35W6zIwv7jssM/3miF9cbCSb1iJiWvtguQjlxZGIHK9JRmc8XAKmE2PFGtHSM7g/VcW97sw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-selectors@7.0.5(postcss@8.5.6):
+    resolution: {integrity: sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      cssesc: 3.0.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /postcss-nested@6.2.0(postcss@8.5.6):
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  /postcss-nesting@13.0.2(postcss@8.5.6):
+    resolution: {integrity: sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.0)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /postcss-normalize-charset@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+    dev: true
+
+  /postcss-normalize-display-values@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-positions@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-repeat-style@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-string@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-timing-functions@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-unicode@7.0.4(postcss@8.5.6):
+    resolution: {integrity: sha512-LvIURTi1sQoZqj8mEIE8R15yvM+OhbR1avynMtI9bUzj5gGKR/gfZFd8O7VMj0QgJaIFzxDwxGl/ASMYAkqO8g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-url@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-whitespace@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-ordered-values@7.0.2(postcss@8.5.6):
+    resolution: {integrity: sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-reduce-initial@7.0.4(postcss@8.5.6):
+    resolution: {integrity: sha512-rdIC9IlMBn7zJo6puim58Xd++0HdbvHeHaPgXsimMfG1ijC5A9ULvNLSE0rUKVJOvNMcwewW4Ga21ngyJjY/+Q==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      caniuse-api: 3.0.0
+      postcss: 8.5.6
+    dev: true
+
+  /postcss-reduce-transforms@7.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  /postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /postcss-svgo@7.1.0(postcss@8.5.6):
+    resolution: {integrity: sha512-KnAlfmhtoLz6IuU3Sij2ycusNs4jPW+QoFE5kuuUOK8awR6tMxZQrs5Ey3BUz7nFCzT3eqyFgqkyrHiaU2xx3w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >= 18}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      svgo: 4.0.0
+    dev: true
+
+  /postcss-unique-selectors@7.0.4(postcss@8.5.6):
+    resolution: {integrity: sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  /postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  /potpack@1.0.2:
+    resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
+    dev: false
+
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.3.0
+    dev: true
+
+  /prettier-plugin-tailwindcss@0.5.14(prettier@3.6.2):
+    resolution: {integrity: sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+    dependencies:
+      prettier: 3.6.2
+    dev: true
+
+  /prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
+  /pretty-bytes@7.1.0:
+    resolution: {integrity: sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==}
+    engines: {node: '>=20'}
+    dev: true
+
+  /process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: true
+
+  /process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+    dev: true
+
+  /prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+    dev: true
+
+  /proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+    dev: true
+
+  /protocol-buffers-schema@3.6.0:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+    dev: false
+
+  /protocols@2.0.2:
+    resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
+    dev: true
+
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  /quickselect@2.0.0:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+    dev: false
+
+  /radix-vue@1.9.17(vue@3.5.21):
+    resolution: {integrity: sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/vue': 1.1.9(vue@3.5.21)
+      '@internationalized/date': 3.9.0
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.12(vue@3.5.21)
+      '@vueuse/core': 10.11.1(vue@3.5.21)
+      '@vueuse/shared': 10.11.1(vue@3.5.21)
+      aria-hidden: 1.2.6
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.1.5
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: true
+
+  /radix3@1.1.2:
+    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
+
+  /randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.5
+
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+
+  /readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: true
+
+  /readable-stream@4.7.0:
+    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      abort-controller: 3.0.0
+      buffer: 6.0.3
+      events: 3.3.0
+      process: 0.11.10
+      string_decoder: 1.3.0
+    dev: true
+
+  /readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
+    dependencies:
+      minimatch: 5.1.6
+    dev: true
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+
+  /readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  /redis-errors@1.2.0:
+    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /redis-parser@3.0.0:
+    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
+    engines: {node: '>=4'}
+    dependencies:
+      redis-errors: 1.2.0
+    dev: true
+
+  /refa@0.12.1:
+    resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+    dev: true
+
+  /regexp-ast-analysis@0.7.1:
+    resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      refa: 0.12.1
+    dev: true
+
+  /regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+    dev: true
+
+  /regjsparser@0.12.0:
+    resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
+    hasBin: true
+    dependencies:
+      jsesc: 3.0.2
+    dev: true
+
+  /replace-in-file@6.3.5:
+    resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      chalk: 4.1.2
+      glob: 7.2.3
+      yargs: 17.7.2
+    dev: true
+
+  /require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  /resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /resolve-path@1.4.0:
+    resolution: {integrity: sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      http-errors: 1.6.3
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
+  /resolve-protobuf-schema@2.1.0:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+    dependencies:
+      protocol-buffers-schema: 3.6.0
+    dev: false
+
+  /resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  /reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  /rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  /robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+    dev: false
+
+  /rollup-plugin-visualizer@6.0.3(rollup@4.52.0):
+    resolution: {integrity: sha512-ZU41GwrkDcCpVoffviuM9Clwjy5fcUxlz0oMoTXTYsK+tcIFzbdacnrr2n8TXcHxbGKKXtOdjxM2HUS4HjkwIw==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x || ^1.0.0-beta
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.3
+      rollup: 4.52.0
+      source-map: 0.7.6
+      yargs: 17.7.2
+    dev: true
+
+  /rollup@4.52.0:
+    resolution: {integrity: sha512-+IuescNkTJQgX7AkIDtITipZdIGcWF0pnVvZTWStiazUmcGA2ag8dfg0urest2XlXUi9kuhfQ+qmdc5Stc3z7g==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.52.0
+      '@rollup/rollup-android-arm64': 4.52.0
+      '@rollup/rollup-darwin-arm64': 4.52.0
+      '@rollup/rollup-darwin-x64': 4.52.0
+      '@rollup/rollup-freebsd-arm64': 4.52.0
+      '@rollup/rollup-freebsd-x64': 4.52.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.52.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.52.0
+      '@rollup/rollup-linux-arm64-gnu': 4.52.0
+      '@rollup/rollup-linux-arm64-musl': 4.52.0
+      '@rollup/rollup-linux-loong64-gnu': 4.52.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.52.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.52.0
+      '@rollup/rollup-linux-riscv64-musl': 4.52.0
+      '@rollup/rollup-linux-s390x-gnu': 4.52.0
+      '@rollup/rollup-linux-x64-gnu': 4.52.0
+      '@rollup/rollup-linux-x64-musl': 4.52.0
+      '@rollup/rollup-openharmony-arm64': 4.52.0
+      '@rollup/rollup-win32-arm64-msvc': 4.52.0
+      '@rollup/rollup-win32-ia32-msvc': 4.52.0
+      '@rollup/rollup-win32-x64-gnu': 4.52.0
+      '@rollup/rollup-win32-x64-msvc': 4.52.0
+      fsevents: 2.3.3
+    dev: true
+
+  /run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+
+  /rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+    dev: false
+
+  /safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: true
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: true
+
+  /safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+    dev: true
+
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: false
+
+  /sax@1.4.1:
+    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+    dev: true
+
+  /schema-utils@4.3.2:
+    resolution: {integrity: sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 8.17.1
+      ajv-formats: 2.1.1(ajv@8.17.1)
+      ajv-keywords: 5.1.0(ajv@8.17.1)
+    dev: true
+
+  /scslre@0.3.0:
+    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
+    engines: {node: ^14.0.0 || >=16.0.0}
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+    dev: true
+
+  /scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+    dev: true
+
+  /semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  /send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      mime-types: 3.0.1
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
+  /serve-placeholder@2.0.2:
+    resolution: {integrity: sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==}
+    dependencies:
+      defu: 6.1.4
+    dev: true
+
+  /serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /setprototypeof@1.1.0:
+    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
+    dev: true
+
+  /setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+    dev: true
+
+  /shadcn-nuxt@0.10.4:
+    resolution: {integrity: sha512-WhSGzjaSMi1D2xb9Aflpwl8G8Qvlb0g4OuJLPO4YyRhduQDuscU6Pr1HdF7T4700foLLglgFnz7m8E2DDLLHJA==}
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      '@oxc-parser/wasm': 0.1.0
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  /shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+    dev: true
+
+  /signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  /simple-git@3.28.0:
+    resolution: {integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==}
+    dependencies:
+      '@kwsites/file-exists': 1.1.1
+      '@kwsites/promise-deferred': 1.1.1
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+    dev: true
+
+  /sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+    dev: true
+
+  /slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+    dev: true
+
+  /smob@1.5.0:
+    resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
+    dev: true
+
+  /source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+    dev: true
+
+  /spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+    dev: true
+
+  /spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.22
+    dev: true
+
+  /spdx-license-ids@3.0.22:
+    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
+    dev: true
+
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  /stable-hash-x@0.2.0:
+    resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
+  /stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+    dev: true
+
+  /standard-as-callback@2.1.0:
+    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+    dev: true
+
+  /statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+
+  /streamx@2.22.1:
+    resolution: {integrity: sha512-znKXEBxfatz2GBNK02kRnCXjV+AA4kjZIUxeWSr3UGirZMJfTE9uiwKHobnbgxWyL/JWro8tTq+vOqAK1/qbSA==}
+    dependencies:
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.3
+    optionalDependencies:
+      bare-events: 2.7.0
+    transitivePeerDependencies:
+      - react-native-b4a
+    dev: true
+
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  /string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  /string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
+  /string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+
+  /strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-regex: 6.2.2
+
+  /strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /strip-indent@4.1.0:
+    resolution: {integrity: sha512-OA95x+JPmL7kc7zCu+e+TeYxEiaIyndRx0OrBcK2QPPH09oAndr2ALvymxWA+Lx1PYYvFUm4O63pRkdJAaW96w==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /strip-literal@3.0.0:
+    resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
+    dependencies:
+      js-tokens: 9.0.1
+
+  /striptags@3.2.0:
+    resolution: {integrity: sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==}
+    dev: false
+
+  /structured-clone-es@1.0.0:
+    resolution: {integrity: sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==}
+    dev: true
+
+  /stylehacks@7.0.6(postcss@8.5.6):
+    resolution: {integrity: sha512-iitguKivmsueOmTO0wmxURXBP8uqOO+zikLGZ7Mm9e/94R4w5T999Js2taS/KBOnQ/wdC3jN3vNSrkGDrlnqQg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+    dependencies:
+      browserslist: 4.26.2
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+    dev: false
+
+  /sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      ts-interface-checker: 0.1.13
+
+  /supercluster@7.1.5:
+    resolution: {integrity: sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==}
+    dependencies:
+      kdbush: 3.0.0
+    dev: false
+
+  /superjson@2.2.2:
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+    engines: {node: '>=16'}
+    dependencies:
+      copy-anything: 3.0.5
+
+  /supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  /svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.1
+    dev: true
+
+  /synckit@0.11.11:
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@pkgr/core': 0.2.9
+    dev: true
+
+  /synckit@0.9.3:
+    resolution: {integrity: sha512-JJoOEKTfL1urb1mDoEblhD9NhEbWmq9jHEMEnxoC4ujUaZ4itA8vKgwkFAyNClgxplLi9tsUKX+EduK0p/l7sg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@pkgr/core': 0.1.2
+      tslib: 2.8.1
+    dev: true
+
+  /system-architecture@0.1.0:
+    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /tailwind-config-viewer@2.0.4(tailwindcss@3.4.17):
+    resolution: {integrity: sha512-icvcmdMmt9dphvas8wL40qttrHwAnW3QEN4ExJ2zICjwRsPj7gowd1cOceaWG3IfTuM/cTNGQcx+bsjMtmV+cw==}
+    engines: {node: '>=13'}
+    hasBin: true
+    peerDependencies:
+      tailwindcss: 1 || 2 || 2.0.1-compat || 3
+    dependencies:
+      '@koa/router': 12.0.2
+      commander: 6.2.1
+      fs-extra: 9.1.0
+      koa: 2.16.2
+      koa-static: 5.0.0
+      open: 7.4.2
+      portfinder: 1.0.38
+      replace-in-file: 6.3.5
+      tailwindcss: 3.4.17
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+    dev: true
+
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.17
+    dev: false
+
+  /tailwindcss@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.1.0(postcss@8.5.6)
+      postcss-load-config: 4.0.2(postcss@8.5.6)
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  /tapable@2.2.3:
+    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+    dependencies:
+      b4a: 1.7.1
+      fast-fifo: 1.3.2
+      streamx: 2.22.1
+    transitivePeerDependencies:
+      - react-native-b4a
+    dev: true
+
+  /tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.2
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+    dev: true
+
+  /terser-webpack-plugin@5.3.14(esbuild@0.25.10)(webpack@5.101.3):
+    resolution: {integrity: sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      esbuild: 0.25.10
+      jest-worker: 27.5.1
+      schema-utils: 4.3.2
+      serialize-javascript: 6.0.2
+      terser: 5.44.0
+      webpack: 5.101.3(esbuild@0.25.10)
+    dev: true
+
+  /terser@5.44.0:
+    resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.15.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    dev: true
+
+  /text-decoder@1.2.3:
+    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
+    dependencies:
+      b4a: 1.7.1
+    transitivePeerDependencies:
+      - react-native-b4a
+    dev: true
+
+  /thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+
+  /thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+
+  /three@0.135.0:
+    resolution: {integrity: sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ==}
+    dev: false
+
+  /throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+    dev: false
+
+  /tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+    dev: true
+
+  /tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+    dev: true
+
+  /tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+    dev: true
+
+  /tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+
+  /tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  /tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    dev: true
+
+  /tinyqueue@2.0.3:
+    resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
+    dev: false
+
+  /tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /to-px@1.1.0:
+    resolution: {integrity: sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==}
+    dependencies:
+      parse-unit: 1.0.1
+    dev: false
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+
+  /toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+    dev: true
+
+  /toml-eslint-parser@0.10.0:
+    resolution: {integrity: sha512-khrZo4buq4qVmsGzS5yQjKe/WsFvV8fGfOjDQN0q4iy9FjRfPWRgTFrU8u1R2iu/SfWLhY9WnCi4Jhdrcbtg+g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /topojson-client@3.1.0:
+    resolution: {integrity: sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+    dev: false
+
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: true
+
+  /ts-api-utils@2.1.0(typescript@5.9.2):
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+    dependencies:
+      typescript: 5.9.2
+    dev: true
+
+  /ts-declaration-location@1.0.7(typescript@5.9.2):
+    resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
+    peerDependencies:
+      typescript: '>=4.0.0'
+    dependencies:
+      picomatch: 4.0.3
+      typescript: 5.9.2
+    dev: true
+
+  /ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  /tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  /tsscmp@1.0.6:
+    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
+    engines: {node: '>=0.6.x'}
+    dev: true
+
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
+  /type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+    dev: true
+
+  /type-level-regexp@0.1.17:
+    resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
+    dev: true
+
+  /typescript@5.9.2:
+    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  /ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
+  /ultrahtml@1.6.0:
+    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
+    dev: true
+
+  /unconfig@7.3.3:
+    resolution: {integrity: sha512-QCkQoOnJF8L107gxfHL0uavn7WD9b3dpBcFX6HtfQYmjw2YzWxGuFQ0N0J6tE9oguCBJn9KOvfqYDCMPHIZrBA==}
+    dependencies:
+      '@quansync/fs': 0.1.5
+      defu: 6.1.4
+      jiti: 2.5.1
+      quansync: 0.2.11
+    dev: true
+
+  /uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  /unctx@2.4.1:
+    resolution: {integrity: sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==}
+    dependencies:
+      acorn: 8.15.0
+      estree-walker: 3.0.3
+      magic-string: 0.30.19
+      unplugin: 2.3.10
+
+  /undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+    dev: true
+
+  /undici-types@7.12.0:
+    resolution: {integrity: sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==}
+    dev: true
+
+  /unenv@2.0.0-rc.21:
+    resolution: {integrity: sha512-Wj7/AMtE9MRnAXa6Su3Lk0LNCfqDYgfwVjwRFVum9U7wsto1imuHqk4kTm7Jni+5A0Hn7dttL6O/zjvUvoo+8A==}
+    dependencies:
+      defu: 6.1.4
+      exsolve: 1.0.7
+      ohash: 2.0.11
+      pathe: 2.0.3
+      ufo: 1.6.1
+    dev: true
+
+  /unhead@2.0.17:
+    resolution: {integrity: sha512-xX3PCtxaE80khRZobyWCVxeFF88/Tg9eJDcJWY9us727nsTC7C449B8BUfVBmiF2+3LjPcmqeoB2iuMs0U4oJQ==}
+    dependencies:
+      hookable: 5.5.3
+    dev: true
+
+  /unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /unimport@5.3.0:
+    resolution: {integrity: sha512-cty7t1DESgm0OPfCy9oyn5u9B5t0tMW6tH6bXTjAGIO3SkJsbg/DXYHjrPrUKqultqbAAoltAfYsuu/FEDocjg==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      acorn: 8.15.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.19
+      mlly: 1.8.0
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      pkg-types: 2.3.0
+      scule: 1.3.0
+      strip-literal: 3.0.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.10
+      unplugin-utils: 0.3.0
+
+  /unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: true
+
+  /unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: true
+
+  /unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+    dev: true
+
+  /unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+    dev: true
+
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
+  /unocss-preset-animations@1.2.1(unocss@66.5.1):
+    resolution: {integrity: sha512-HFdYPSLZ8SaAgTLfTNoiV5+1xAdcttOtFSPsZyHbA0qSis7Sansf90pz7a2yhs9Yq6Nos9P4onDttfdO8dwKPA==}
+    peerDependencies:
+      '@unocss/preset-wind3': '>=0.56.0 < 101'
+      unocss: '>=0.56.0 < 101'
+    peerDependenciesMeta:
+      '@unocss/preset-wind3':
+        optional: true
+    dependencies:
+      unocss: 66.5.1(@unocss/webpack@66.5.1)(postcss@8.5.6)(vite@7.1.6)
+    dev: true
+
+  /unocss-preset-shadcn@0.5.0(unocss-preset-animations@1.2.1)(unocss@66.5.1):
+    resolution: {integrity: sha512-e/bF/+b5adcolHio3kst3WVF+f09+BiDkyTshUVqcWXB0RabQ0T8lzqfM3KAegTTi1iJo1jjCZoE88cUzaVDmQ==}
+    peerDependencies:
+      unocss: '>=0.56.0 < 101'
+      unocss-preset-animations: ^1.1.1
+    dependencies:
+      unocss: 66.5.1(@unocss/webpack@66.5.1)(postcss@8.5.6)(vite@7.1.6)
+      unocss-preset-animations: 1.2.1(unocss@66.5.1)
+    dev: true
+
+  /unocss@66.5.1(@unocss/webpack@66.5.1)(postcss@8.5.6)(vite@7.1.6):
+    resolution: {integrity: sha512-e+9nqOy9v6NwPz0DxFdApGPefW22pCfU0Z1ALuodEoSHen03WlfTuEhkDkcKEpdo78tbIi/BbAYK9qT8p1d9sg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 66.5.1
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+      vite:
+        optional: true
+    dependencies:
+      '@unocss/astro': 66.5.1(vite@7.1.6)
+      '@unocss/cli': 66.5.1
+      '@unocss/core': 66.5.1
+      '@unocss/postcss': 66.5.1(postcss@8.5.6)
+      '@unocss/preset-attributify': 66.5.1
+      '@unocss/preset-icons': 66.5.1
+      '@unocss/preset-mini': 66.5.1
+      '@unocss/preset-tagify': 66.5.1
+      '@unocss/preset-typography': 66.5.1
+      '@unocss/preset-uno': 66.5.1
+      '@unocss/preset-web-fonts': 66.5.1
+      '@unocss/preset-wind': 66.5.1
+      '@unocss/preset-wind3': 66.5.1
+      '@unocss/preset-wind4': 66.5.1
+      '@unocss/transformer-attributify-jsx': 66.5.1
+      '@unocss/transformer-compile-class': 66.5.1
+      '@unocss/transformer-directives': 66.5.1
+      '@unocss/transformer-variant-group': 66.5.1
+      '@unocss/vite': 66.5.1(vite@7.1.6)
+      '@unocss/webpack': 66.5.1(webpack@5.101.3)
+      vite: 7.1.6(jiti@2.5.1)
+    transitivePeerDependencies:
+      - postcss
+      - supports-color
+    dev: true
+
+  /unplugin-utils@0.2.5:
+    resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+    dev: true
+
+  /unplugin-utils@0.3.0:
+    resolution: {integrity: sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==}
+    engines: {node: '>=20.19.0'}
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
+  /unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.21)(typescript@5.9.2)(vue-router@4.5.1)(vue@3.5.21):
+    resolution: {integrity: sha512-PyGehCjd9Ny9h+Uer4McbBjjib3lHihcyUEILa7pHKl6+rh8N7sFyw4ZkV+N30Oq2zmIUG7iKs3qpL0r+gXAaQ==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.5.17
+      vue-router: ^4.5.1
+    peerDependenciesMeta:
+      vue-router:
+        optional: true
+    dependencies:
+      '@vue-macros/common': 3.0.0-beta.16(vue@3.5.21)
+      '@vue/compiler-sfc': 3.5.21
+      '@vue/language-core': 3.0.7(typescript@5.9.2)
+      ast-walker-scope: 0.8.2
+      chokidar: 4.0.3
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.19
+      mlly: 1.8.0
+      muggle-string: 0.4.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      scule: 1.3.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.10
+      unplugin-utils: 0.2.5
+      vue-router: 4.5.1(vue@3.5.21)
+      yaml: 2.8.1
+    transitivePeerDependencies:
+      - typescript
+      - vue
+    dev: true
+
+  /unplugin@2.3.10:
+    resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.15.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
+  /unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+    requiresBuild: true
+    dependencies:
+      napi-postinstall: 0.3.3
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+    dev: true
+
+  /unstorage@1.17.1(db0@0.3.2)(ioredis@5.7.0):
+    resolution: {integrity: sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6.0.3 || ^7.0.0
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1.0.1
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 4.0.3
+      db0: 0.3.2
+      destr: 2.0.5
+      h3: 1.15.4
+      ioredis: 5.7.0
+      lru-cache: 10.4.3
+      node-fetch-native: 1.6.7
+      ofetch: 1.4.1
+      ufo: 1.6.1
+    dev: true
+
+  /untun@0.1.3:
+    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
+    hasBin: true
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 1.1.2
+    dev: true
+
+  /untyped@2.0.0:
+    resolution: {integrity: sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==}
+    hasBin: true
+    dependencies:
+      citty: 0.1.6
+      defu: 6.1.4
+      jiti: 2.5.1
+      knitwork: 1.2.0
+      scule: 1.3.0
+
+  /unwasm@0.3.11:
+    resolution: {integrity: sha512-Vhp5gb1tusSQw5of/g3Q697srYgMXvwMgXMjcG4ZNga02fDX9coxJ9fAb0Ci38hM2Hv/U1FXRPGgjP2BYqhNoQ==}
+    dependencies:
+      knitwork: 1.2.0
+      magic-string: 0.30.19
+      mlly: 1.8.0
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      unplugin: 2.3.10
+    dev: true
+
+  /update-browserslist-db@1.1.3(browserslist@4.26.2):
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.26.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
+    dev: true
+
+  /uqr@0.1.2:
+    resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
+    dev: true
+
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  /vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /vaul-vue@0.2.1(radix-vue@1.9.17)(vue@3.5.21):
+    resolution: {integrity: sha512-iF91R1JQZzxb9mb9uGNHYv8rVFxR5bL5Fj51iqvyXjzMPAzNMciCrXb9OUBu2NdlhcF6rVtEADXnQoTY+pKIeA==}
+    peerDependencies:
+      radix-vue: ^1.4.0
+      vue: ^3.3.0
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.21)
+      radix-vue: 1.9.17(vue@3.5.21)
+      vue: 3.5.21(typescript@5.9.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: true
+
+  /vee-validate@4.15.1(vue@3.5.21):
+    resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
+    peerDependencies:
+      vue: ^3.4.26
+    dependencies:
+      '@vue/devtools-api': 7.7.7
+      type-fest: 4.41.0
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /vite-dev-rpc@1.1.0(vite@7.1.6):
+    resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0
+    dependencies:
+      birpc: 2.5.0
+      vite: 7.1.6(jiti@2.5.1)
+      vite-hot-client: 2.1.0(vite@7.1.6)
+    dev: true
+
+  /vite-hot-client@2.1.0(vite@7.1.6):
+    resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+    dependencies:
+      vite: 7.1.6(jiti@2.5.1)
+    dev: true
+
+  /vite-node@3.2.4(jiti@2.5.1):
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.1.6(jiti@2.5.1)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+    dev: true
+
+  /vite-plugin-checker@0.10.3(eslint@9.36.0)(typescript@5.9.2)(vite@7.1.6)(vue-tsc@2.2.12):
+    resolution: {integrity: sha512-f4sekUcDPF+T+GdbbE8idb1i2YplBAoH+SfRS0e/WRBWb2rYb1Jf5Pimll0Rj+3JgIYWwG2K5LtBPCXxoibkLg==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      '@biomejs/biome': '>=1.7'
+      eslint: '>=7'
+      meow: ^13.2.0
+      optionator: ^0.9.4
+      stylelint: '>=16'
+      typescript: '*'
+      vite: '>=2.0.0'
+      vls: '*'
+      vti: '*'
+      vue-tsc: ~2.2.10 || ^3.0.0
+    peerDependenciesMeta:
+      '@biomejs/biome':
+        optional: true
+      eslint:
+        optional: true
+      meow:
+        optional: true
+      optionator:
+        optional: true
+      stylelint:
+        optional: true
+      typescript:
+        optional: true
+      vls:
+        optional: true
+      vti:
+        optional: true
+      vue-tsc:
+        optional: true
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      chokidar: 4.0.3
+      eslint: 9.36.0
+      npm-run-path: 6.0.0
+      picocolors: 1.1.1
+      picomatch: 4.0.3
+      strip-ansi: 7.1.2
+      tiny-invariant: 1.3.3
+      tinyglobby: 0.2.15
+      typescript: 5.9.2
+      vite: 7.1.6(jiti@2.5.1)
+      vscode-uri: 3.1.0
+      vue-tsc: 2.2.12(typescript@5.9.2)
+    dev: true
+
+  /vite-plugin-inspect@11.3.3(@nuxt/kit@3.19.2)(vite@7.1.6):
+    resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      ansis: 4.1.0
+      debug: 4.4.3
+      error-stack-parser-es: 1.0.5
+      ohash: 2.0.11
+      open: 10.2.0
+      perfect-debounce: 2.0.0
+      sirv: 3.0.2
+      unplugin-utils: 0.3.0
+      vite: 7.1.6(jiti@2.5.1)
+      vite-dev-rpc: 1.1.0(vite@7.1.6)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vite-plugin-vue-tracer@1.0.0(vite@7.1.6)(vue@3.5.21):
+    resolution: {integrity: sha512-a+UB9IwGx5uwS4uG/a9kM6fCMnxONDkOTbgCUbhFpiGhqfxrrC1+9BibV7sWwUnwj1Dg6MnRxG0trLgUZslDXA==}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0
+      vue: ^3.5.0
+    dependencies:
+      estree-walker: 3.0.3
+      exsolve: 1.0.7
+      magic-string: 0.30.19
+      pathe: 2.0.3
+      source-map-js: 1.2.1
+      vite: 7.1.6(jiti@2.5.1)
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /vite@7.1.6(jiti@2.5.1):
+    resolution: {integrity: sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+    dependencies:
+      esbuild: 0.25.10
+      fdir: 6.5.0(picomatch@4.0.3)
+      jiti: 2.5.1
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.52.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(happy-dom@18.0.1)(playwright-core@1.55.0)(typescript@5.9.2)(vitest@3.2.4):
+    resolution: {integrity: sha512-eBCwtIQriXW5/M49FjqNKfnlJYlG2LWMSNFsRVKomc8CaMqmhQPBS5LZ9DlgYL9T8xIVsiA6RZn2lk7vxov3Ow==}
+    dependencies:
+      '@nuxt/test-utils': 3.19.2(@vue/test-utils@2.4.6)(happy-dom@18.0.1)(playwright-core@1.55.0)(typescript@5.9.2)(vitest@3.2.4)
+    transitivePeerDependencies:
+      - '@cucumber/cucumber'
+      - '@jest/globals'
+      - '@playwright/test'
+      - '@testing-library/vue'
+      - '@vitest/ui'
+      - '@vue/test-utils'
+      - happy-dom
+      - jsdom
+      - magicast
+      - playwright-core
+      - typescript
+      - vitest
+    dev: true
+
+  /vitest@3.2.4(happy-dom@18.0.1):
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 5.2.2
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.1.6)
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.2.2
+      happy-dom: 18.0.1
+      magic-string: 0.30.19
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.9.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 7.1.6(jiti@2.5.1)
+      vite-node: 3.2.4(jiti@2.5.1)
+      why-is-node-running: 2.3.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+    dev: true
+
+  /vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+    dev: true
+
+  /vt-pbf@3.1.3:
+    resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/vector-tile': 1.3.1
+      pbf: 3.3.0
+    dev: false
+
+  /vue-bundle-renderer@2.1.2:
+    resolution: {integrity: sha512-M4WRBO/O/7G9phGaGH9AOwOnYtY9ZpPoDVpBpRzR2jO5rFL9mgIlQIgums2ljCTC2HL1jDXFQc//CzWcAQHgAw==}
+    dependencies:
+      ufo: 1.6.1
+    dev: true
+
+  /vue-component-type-helpers@2.2.12:
+    resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
+    dev: true
+
+  /vue-demi@0.14.10(vue@3.5.21):
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /vue-devtools-stub@0.1.0:
+    resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
+    dev: true
+
+  /vue-eslint-parser@10.2.0(eslint@9.36.0):
+    resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.36.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      semver: 7.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vue-flow-layout@0.2.0:
+    resolution: {integrity: sha512-zKgsWWkXq0xrus7H4Mc+uFs1ESrmdTXlO0YNbR6wMdPaFvosL3fMB8N7uTV308UhGy9UvTrGhIY7mVz9eN+L0Q==}
+    dev: true
+
+  /vue-router@4.5.1(vue@3.5.21):
+    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.21(typescript@5.9.2)
+    dev: true
+
+  /vue-sonner@1.3.2:
+    resolution: {integrity: sha512-UbZ48E9VIya3ToiRHAZUbodKute/z/M1iT8/3fU8zEbwBRE11AKuHikssv18LMk2gTTr6eMQT4qf6JoLHWuj/A==}
+    dev: true
+
+  /vue-tsc@2.2.12(typescript@5.9.2):
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.9.2)
+      typescript: 5.9.2
+    dev: true
+
+  /vue@3.5.21(typescript@5.9.2):
+    resolution: {integrity: sha512-xxf9rum9KtOdwdRkiApWL+9hZEMWE90FHh8yS1+KJAiWYh+iGWV1FquPjoO9VUHQ+VIhsCXNNyZ5Sf4++RVZBA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.5.21
+      '@vue/compiler-sfc': 3.5.21
+      '@vue/runtime-dom': 3.5.21
+      '@vue/server-renderer': 3.5.21(vue@3.5.21)
+      '@vue/shared': 3.5.21
+      typescript: 5.9.2
+
+  /watchpack@2.4.4:
+    resolution: {integrity: sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+    dev: true
+
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: true
+
+  /webpack-sources@3.3.3:
+    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  /webpack@5.101.3(esbuild@0.25.10):
+    resolution: {integrity: sha512-7b0dTKR3Ed//AD/6kkx/o7duS8H3f1a4w3BYpIriX4BzIhjkn4teo05cptsxvLesHFKK5KObnadmCHBwGc+51A==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.15.0
+      acorn-import-phases: 1.0.4(acorn@8.15.0)
+      browserslist: 4.26.2
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.3
+      es-module-lexer: 1.7.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.2
+      tapable: 2.2.3
+      terser-webpack-plugin: 5.3.14(esbuild@0.25.10)(webpack@5.101.3)
+      watchpack: 2.4.4
+      webpack-sources: 3.3.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+    dev: true
+
+  /whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: true
+
+  /which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: false
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+
+  /which@5.0.0:
+    resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+    dependencies:
+      isexe: 3.1.1
+    dev: true
+
+  /why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+    dev: true
+
+  /word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  /wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
+
+  /ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
+  /wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+    dependencies:
+      is-wsl: 3.1.0
+    dev: true
+
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: true
+
+  /yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /yaml-eslint-parser@1.3.0:
+    resolution: {integrity: sha512-E/+VitOorXSLiAqtTd7Yqax0/pAS3xaYMP+AUUJGOK1OZG3rhcj9fcJOM5HJ2VrP1FrStVCWr1muTfQCdj4tAA==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      yaml: 2.8.1
+    dev: true
+
+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: false
+
+  /yaml@2.8.1:
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  /yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+    dev: true
+
+  /ylru@1.4.0:
+    resolution: {integrity: sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yocto-queue@1.2.1:
+    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
+    engines: {node: '>=12.20'}
+    dev: true
+
+  /youch-core@0.3.3:
+    resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==}
+    dependencies:
+      '@poppinss/exception': 1.2.2
+      error-stack-parser-es: 1.0.5
+    dev: true
+
+  /youch@4.1.0-beta.11:
+    resolution: {integrity: sha512-sQi6PERyO/mT8w564ojOVeAlYTtVQmC2GaktQAf+IdI75/GKIggosBuvyVXvEV+FATAT6RbLdIjFoiIId4ozoQ==}
+    dependencies:
+      '@poppinss/colors': 4.1.5
+      '@poppinss/dumper': 0.6.4
+      '@speed-highlight/core': 1.2.7
+      cookie: 1.0.2
+      youch-core: 0.3.3
+    dev: true
+
+  /zip-stream@6.0.1:
+    resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      archiver-utils: 5.0.2
+      compress-commons: 6.0.2
+      readable-stream: 4.7.0
+    dev: true
+
+  /zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+    dev: true
+
+  /zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+    dev: true
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..18993ad9
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 00000000..0ad279c7
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:
diff --git a/public/rss-login-page.jpg b/public/rss-login-page.jpg
new file mode 100644
index 00000000..dffa71f0
Binary files /dev/null and b/public/rss-login-page.jpg differ
diff --git a/public/rssa-logo.png b/public/rssa-logo.png
new file mode 100644
index 00000000..28985723
Binary files /dev/null and b/public/rssa-logo.png differ
diff --git a/public/side-menu-items/doc.json b/public/side-menu-items/doc.json
new file mode 100644
index 00000000..e3ab2cdf
--- /dev/null
+++ b/public/side-menu-items/doc.json
@@ -0,0 +1,116 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Triase",
+            "icon": "i-lucide-stethoscope",
+            "link": "/outpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "icon": "i-lucide-building-2",
+            "link": "/outpatient/consultation"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "icon": "i-lucide-stethoscope",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Kunjungan",
+            "icon": "i-lucide-building-2",
+            "link": "/emergency/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "icon": "i-lucide-building-2",
+            "link": "/emergency/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rehabilitasi Medik",
+        "icon": "i-lucide-bike",
+        "children": [
+          {
+            "title": "Kunjungan",
+            "icon": "i-lucide-building-2",
+            "link": "/rehab/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "icon": "i-lucide-building-2",
+            "link": "/rehab/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "children": [
+          {
+            "title": "Kunjungan",
+            "icon": "i-lucide-building-2",
+            "link": "/inpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "icon": "i-lucide-building-2",
+            "link": "/inpatient/consultation"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Rajal",
+    "items": [
+      {
+        "title": "Kemoterapi",
+        "icon": "i-lucide-droplets",
+        "link": "/outpatient-action/cemotherapy"
+      },
+      {
+        "title": "Hemofilia",
+        "icon": "i-lucide-droplet-off",
+        "link": "/outpatient-action/hemophilia/encounter"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Anak",
+    "items": [
+      {
+        "title": "Thalasemi",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/thalasemia"
+      },
+      {
+        "title": "Echocardiography",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/echocardiography"
+      },
+      {
+        "title": "Spirometri",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/spirometry"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/lab.json b/public/side-menu-items/lab.json
new file mode 100644
index 00000000..b366ff42
--- /dev/null
+++ b/public/side-menu-items/lab.json
@@ -0,0 +1,58 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Lab - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pc-lab-order"
+      },
+      {
+        "title": "Lab Mikro - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/micro-lab-order"
+      },
+      {
+        "title": "Lab PA - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pa-lab-order"
+      },
+      {
+        "title": "Radiologi - Order",
+        "icon": "i-lucide-radio",
+        "link": "/radiology-order"
+      },
+      {
+        "title": "Gizi",
+        "icon": "i-lucide-egg-fried",
+        "link": "/nutrition-order"
+      },
+      {
+        "title": "Pembayaran",
+        "icon": "i-lucide-banknote-arrow-up",
+        "link": "/payment"
+      }
+    ]
+  },
+  {
+    "heading": "Source",
+    "items": [
+      {
+        "title": "Umum",
+        "icon": "i-lucide-airplay",
+        "children": [
+          {
+            "title": "Uom",
+            "icon": "i-lucide-airplay",
+            "link": "/common/uom"
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/miw.json b/public/side-menu-items/miw.json
new file mode 100644
index 00000000..ebb43da6
--- /dev/null
+++ b/public/side-menu-items/miw.json
@@ -0,0 +1,32 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "link": "/outpatient/encounter"
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "link": "/emergency/encounter"
+      },
+      {
+        "title": "Rehabilitasi Medik",
+        "icon": "i-lucide-bike",
+        "link": "/rehab/polyclinic-queue"
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "link": "/inpatient/encounter"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/nur.json b/public/side-menu-items/nur.json
new file mode 100644
index 00000000..8185456c
--- /dev/null
+++ b/public/side-menu-items/nur.json
@@ -0,0 +1,95 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Antrian Poliklinik",
+            "link": "/outpatient/polyclinic-queue"
+          },
+          {
+            "title": "Pendaftaran",
+            "link": "/outpatient/encounter"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Pemeriksaan",
+            "link": "/emergency/encounter"
+          }
+        ]
+      },
+      {
+        "title": "Rehabilitasi Medik",
+        "icon": "i-lucide-bike",
+        "link": "/rehab",
+        "children": [
+          {
+            "title": "Antrean Poliklinik",
+            "link": "/rehab/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/rehab/encounter"
+          }
+        ]
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "link": "/inpatient/encounter"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Rajal",
+    "items": [
+      {
+        "title": "Kemoterapi",
+        "icon": "i-lucide-droplets",
+        "link": "/outpation-action/cemotherapy"
+      },
+      {
+        "title": "Hemofilia",
+        "icon": "i-lucide-droplet-off",
+        "link": "/outpation-action/hemophilia"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Anak",
+    "items": [
+      {
+        "title": "Thalasemi",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/thalasemia"
+      },
+      {
+        "title": "Echocardiography",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/echocardiography"
+      },
+      {
+        "title": "Spirometri",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/spirometry"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/nut.json b/public/side-menu-items/nut.json
new file mode 100644
index 00000000..4368b22e
--- /dev/null
+++ b/public/side-menu-items/nut.json
@@ -0,0 +1,67 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "link": "/outpatient/encounter"
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "link": "/emergency/encounter"
+      },
+      {
+        "title": "Rehabilitasi Medik",
+        "icon": "i-lucide-bike",
+        "link": "/rehab/encounter"
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "link": "/inpatient/encounter"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Rajal",
+    "items": [
+      {
+        "title": "Kemoterapi",
+        "icon": "i-lucide-droplets",
+        "link": "/outpatient-action/cemotherapy"
+      },
+      {
+        "title": "Hemofilia",
+        "icon": "i-lucide-droplet-off",
+        "link": "/outpatient-action/hemophilia"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Anak",
+    "items": [
+      {
+        "title": "Thalasemi",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/thalasemia"
+      },
+      {
+        "title": "Echocardiography",
+        "icon": "i-lucide-baby",
+        "link": "/child-action/echocardiography"
+      },
+      {
+        "title": "Spirometri",
+        "icon": "i-lucide-baby",
+        "link": "/child-action/spirometry"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/pha.json b/public/side-menu-items/pha.json
new file mode 100644
index 00000000..22e60caf
--- /dev/null
+++ b/public/side-menu-items/pha.json
@@ -0,0 +1,64 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Obat - Order",
+        "icon": "i-lucide-briefcase-medical",
+        "children": [
+          {
+            "title": "Permintaan",
+            "icon": "i-lucide-user",
+            "link": "/medication/order"
+          },
+          {
+            "title": "Standing Order",
+            "icon": "i-lucide-user",
+            "link": "/medication/standing-order"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "heading": "Source",
+    "items": [
+      {
+        "title": "Peralatan dan Perlengkapan",
+        "icon": "i-lucide-layout-dashboard",
+        "children": [
+          {
+            "title": "Obat",
+            "icon": "i-lucide-stethoscope",
+            "link": "/tools-equipment-src/medicine"
+          },
+          {
+            "title": "Peralatan",
+            "icon": "i-lucide-tools",
+            "link": "/tools-equipment-src/tools"
+          },
+          {
+            "title": "Perlengkapan (BMHP)",
+            "icon": "i-lucide-stethoscope",
+            "link": "/tools-equipment-src/equipment"
+          },
+          {
+            "title": "Metode Obat",
+            "icon": "i-lucide-user",
+            "link": "/tools-equipment-src/medicine-method"
+          },
+          {
+            "title": "Jenis Obat",
+            "icon": "i-lucide-user",
+            "link": "/tools-equipment-src/medicine-type"
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/reg.json b/public/side-menu-items/reg.json
new file mode 100644
index 00000000..86d6d4ed
--- /dev/null
+++ b/public/side-menu-items/reg.json
@@ -0,0 +1,75 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "link": "/outpatient/registration-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/outpatient/encounter"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "link": "/emergency/encounter"
+      },
+      {
+        "title": "Rehabilitasi Medik",
+        "icon": "i-lucide-bike",
+        "link": "/rehab",
+        "children": [
+          {
+            "title": "Antrean Pendaftaran",
+            "link": "/rehab/registration-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/rehab/encounter"
+          }
+        ]
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "children": [
+          {
+            "title": "Permintaan",
+            "link": "/inpatient/request"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/inpatient/encounter"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "heading": "Client",
+    "items": [
+      {
+        "title": "Pasien",
+        "icon": "i-lucide-users",
+        "link": "/client/patient"
+      },
+      {
+        "title": "Rekam Medis",
+        "icon": "i-lucide-file-text",
+        "link": "/client/medical-record"
+      }
+    ]
+  }
+]
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
new file mode 100644
index 00000000..19491069
--- /dev/null
+++ b/public/side-menu-items/sys.json
@@ -0,0 +1,363 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "link": "/outpatient/registration-queue"
+          },
+          {
+            "title": "Antrian Poliklinik",
+            "link": "/outpatient/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/outpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/outpatient/consultation"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/emergency/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/emergency/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rehab Medik",
+        "icon": "i-lucide-bike",
+        "children": [
+          {
+            "title": "Antrean Pendaftaran",
+            "link": "/rehab/registration-queue"
+          },
+          {
+            "title": "Antrean Poliklinik",
+            "link": "/rehab/polyclinic-queue"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/rehab/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/rehab/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "children": [
+          {
+            "title": "Permintaan",
+            "link": "/inpatient/request"
+          },
+          {
+            "title": "Kunjungan",
+            "link": "/inpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "link": "/inpatient/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Obat - Order",
+        "icon": "i-lucide-briefcase-medical",
+        "children": [
+          {
+            "title": "Permintaan",
+            "link": "/medication/order"
+          },
+          {
+            "title": "Standing Order",
+            "link": "/medication/standing-order"
+          }
+        ]
+      },
+      {
+        "title": "Lab - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pc-lab-order"
+      },
+      {
+        "title": "Lab Mikro - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/micro-lab-order"
+      },
+      {
+        "title": "Lab PA - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pa-lab-order"
+      },
+      {
+        "title": "Radiologi - Order",
+        "icon": "i-lucide-radio",
+        "link": "/radiology-order"
+      },
+      {
+        "title": "Gizi",
+        "icon": "i-lucide-egg-fried",
+        "link": "/nutrition-order"
+      },
+      {
+        "title": "Pembayaran",
+        "icon": "i-lucide-banknote-arrow-up",
+        "link": "/payment"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Rajal",
+    "items": [
+      {
+        "title": "Kemoterapi",
+        "icon": "i-lucide-droplets",
+        "link": "/outpation-action/cemotherapy"
+      },
+      {
+        "title": "Hemofilia",
+        "icon": "i-lucide-droplet-off",
+        "link": "/outpation-action/hemophilia"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Anak",
+    "items": [
+      {
+        "title": "Thalasemi",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/thalasemia"
+      },
+      {
+        "title": "Echocardiography",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/echocardiography"
+      },
+      {
+        "title": "Spirometri",
+        "icon": "i-lucide-baby",
+        "link": "/children-action/spirometry"
+      }
+    ]
+  },
+  {
+    "heading": "Client",
+    "items": [
+      {
+        "title": "Pasien",
+        "icon": "i-lucide-users",
+        "link": "/client/patient"
+      },
+      {
+        "title": "Rekam Medis",
+        "icon": "i-lucide-file-text",
+        "link": "/client/medical-record"
+      }
+    ]
+  },
+  {
+    "heading": "Integrasi",
+    "items": [
+      {
+        "title": "BPJS",
+        "icon": "i-lucide-circuit-board",
+        "children": [
+          {
+            "title": "SEP",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/sep"
+          },
+          {
+            "title": "Peserta",
+            "icon": "i-lucide-circuit-board",
+            "link": "/integration/bpjs/member"
+          }
+        ]
+      },
+      {
+        "title": "SATUSEHAT",
+        "icon": "i-lucide-database",
+        "link": "/integration/satusehat"
+      }
+    ]
+  },
+  {
+    "heading": "Source",
+    "items": [
+      {
+        "title": "Peralatan dan Perlengkapan",
+        "icon": "i-lucide-layout-dashboard",
+        "children": [
+          {
+            "title": "Obat",
+            "link": "/tools-equipment-src/medicine"
+          },
+          {
+            "title": "Peralatan",
+            "link": "/tools-equipment-src/tools"
+          },
+          {
+            "title": "Perlengkapan (BMHP)",
+            "link": "/tools-equipment-src/equipment"
+          },
+          {
+            "title": "Metode Obat",
+            "link": "/tools-equipment-src/medicine-method"
+          },
+          {
+            "title": "Jenis Obat",
+            "link": "/tools-equipment-src/medicine-type"
+          }
+        ]
+      },
+      {
+        "title": "Pengguna",
+        "icon": "i-lucide-user",
+        "children": [
+          {
+            "title": "Pegawai",
+            "link": "/human-src/employee"
+          },
+          {
+            "title": "PPDS",
+            "link": "/human-src/specialist-intern"
+          }
+        ]
+      },
+      {
+        "title": "Pemeriksaan Penunjang",
+        "icon": "i-lucide-layout-list",
+        "children": [
+          {
+            "title": "Checkup",
+            "link": "/mcu-src/mcu"
+          },
+          {
+            "title": "Prosedur",
+            "link": "/mcu-src/procedure"
+          },
+          {
+            "title": "Diagnosis",
+            "link": "/mcu-src/diagnose"
+          },
+          {
+            "title": "Medical Action",
+            "link": "/mcu-src/medical-action"
+          }
+        ]
+      },
+      {
+        "title": "Layanan",
+        "icon": "i-lucide-layout-list",
+        "children": [
+          {
+            "title": "Counter",
+            "link": "/service-src/counter"
+          },
+          {
+            "title": "Public Screen (Big Screen)",
+            "link": "/service-src/public-screen"
+          },
+          {
+            "title": "Kasur",
+            "link": "/service-src/bed"
+          },
+          {
+            "title": "Kamar",
+            "link": "/service-src/chamber"
+          },
+          {
+            "title": "Ruang",
+            "link": "/service-src/room"
+          },
+          {
+            "title": "Depo",
+            "link": "/service-src/warehouse"
+          },
+          {
+            "title": "Lantai",
+            "link": "/service-src/floor"
+          },
+          {
+            "title": "Gedung",
+            "link": "/service-src/building"
+          }
+        ]
+      },
+      {
+        "title": "Organisasi",
+        "icon": "i-lucide-network",
+        "children": [
+          {
+            "title": "Divisi",
+            "link": "/org-src/division"
+          },
+          {
+            "title": "Instalasi",
+            "link": "/org-src/installation"
+          },
+          {
+            "title": "Unit",
+            "link": "/org-src/unit"
+          },
+          {
+            "title": "Spesialis",
+            "link": "/org-src/specialist"
+          },
+          {
+            "title": "Sub Spesialis",
+            "link": "/org-src/subspecialist"
+          }
+        ]
+      },
+      {
+        "title": "Umum",
+        "icon": "i-lucide-airplay",
+        "children": [
+          {
+            "title": "Uom",
+            "link": "/common/uom"
+          }
+        ]
+      },
+      {
+        "title": "Keuangan",
+        "icon": "i-lucide-airplay",
+        "children": [
+          {
+            "title": "Item & Pricing",
+            "link": "/common/item"
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/server/api/[...req].ts b/server/api/[...req].ts
new file mode 100644
index 00000000..8404cc2a
--- /dev/null
+++ b/server/api/[...req].ts
@@ -0,0 +1,45 @@
+import { defineEventHandler, getCookie, getRequestHeaders, getRequestURL, readBody } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const { method } = event.node.req
+  const headers = getRequestHeaders(event)
+  const url = getRequestURL(event)
+  const config = useRuntimeConfig()
+  
+  const apiOrigin = config.public.API_ORIGIN
+  const pathname = url.pathname.replace(/^\/api/, '')
+
+  const targetUrl = apiOrigin + pathname + (url.search || '')
+
+  const verificationId = headers['verification-id'] as string | undefined
+  let bearer = ''
+  if (verificationId) {
+    bearer = getCookie(event, `Verification-${verificationId}`) || ''
+    if (!bearer) bearer = getCookie(event, 'authentication') || ''
+  } else {
+    bearer = getCookie(event, 'authentication') || ''
+  }
+
+  const forwardHeaders = new Headers()
+  if (headers['content-type']) forwardHeaders.set('Content-Type', headers['content-type'])
+  forwardHeaders.set('Authorization', `Bearer ${bearer}`)
+
+  let body: any
+  if (['POST', 'PATCH'].includes(method!)) {
+    if (headers['content-type']?.includes('multipart/form-data')) {
+      body = await readBody(event)
+    } else {
+      body = await readBody(event)
+      forwardHeaders.set('Content-Type', 'application/json')
+      body = JSON.stringify(body)
+    }
+  }
+
+  const res = await fetch(targetUrl, {
+    method,
+    headers: forwardHeaders,
+    body,
+  })
+
+  return res
+})
diff --git a/server/api/v1/_dev/division/list.get.ts b/server/api/v1/_dev/division/list.get.ts
new file mode 100644
index 00000000..377e1592
--- /dev/null
+++ b/server/api/v1/_dev/division/list.get.ts
@@ -0,0 +1,163 @@
+export default defineEventHandler(async (event) => {
+  // Ambil query parameters
+  const payload = { ...getQuery(event) }
+  const isTreeFormat = payload.tree === 'true' || payload.tree === '1'
+
+  // Mock data division dengan struktur nested meta parent
+  const baseDivisions = [
+    {
+      id: 1,
+      name: 'Direktorat Medis',
+      code: 'DIR-MED',
+      parentId: null,
+    },
+    {
+      id: 2,
+      name: 'Bidang Medik',
+      code: 'BDG-MED',
+      parentId: 1,
+    },
+    {
+      id: 3,
+      name: 'Tim Kerja Ranap, ICU, Bedah',
+      code: 'TIM-RAN',
+      parentId: 2,
+    },
+    {
+      id: 4,
+      name: 'Direktorat Keperawatan',
+      code: 'DIR-KEP',
+      parentId: null,
+    },
+    {
+      id: 5,
+      name: 'Bidang Keperawatan',
+      code: 'BDG-KEP',
+      parentId: 4,
+    },
+    {
+      id: 6,
+      name: 'Tim Kerja Keperawatan Ranap, ICU, Bedah',
+      code: 'TIM-KEP',
+      parentId: 5,
+    },
+    {
+      id: 7,
+      name: 'Direktorat Penunjang',
+      code: 'DIR-PNJ',
+      parentId: null,
+    },
+    {
+      id: 8,
+      name: 'Bidang Penunjang Medik',
+      code: 'BDG-PNJ',
+      parentId: 7,
+    },
+    {
+      id: 9,
+      name: 'Tim Kerja Radiologi',
+      code: 'TIM-RAD',
+      parentId: 8,
+    },
+    {
+      id: 10,
+      name: 'Direktorat Produksi',
+      code: 'DIR-PRD',
+      parentId: null,
+    },
+    {
+      id: 11,
+      name: 'Bidang Teknologi',
+      code: 'BDG-TEK',
+      parentId: 10,
+    },
+    {
+      id: 12,
+      name: 'Tim Kerja Software Engineering',
+      code: 'TIM-SWE',
+      parentId: 11,
+    },
+    {
+      id: 13,
+      name: 'Direktorat Operasional',
+      code: 'DIR-OPS',
+      parentId: null,
+    },
+    {
+      id: 14,
+      name: 'Bidang HR & GA',
+      code: 'BDG-HRG',
+      parentId: 13,
+    },
+    {
+      id: 15,
+      name: 'Tim Kerja Rekrutmen',
+      code: 'TIM-REC',
+      parentId: 14,
+    },
+  ]
+
+  // Menambahkan meta parent pada setiap division
+  const divisions = baseDivisions
+    .map((division) => {
+      const parent = baseDivisions.find((d) => d.id === division.parentId)
+
+      const mapped = {
+        ...division,
+        meta: {
+          parentId: parent?.id || null,
+          name: parent?.name || null,
+          code: parent?.code || null,
+        },
+      }
+
+      if (mapped.meta.parentId === null) {
+        mapped.meta = null
+      }
+
+      return mapped
+    })
+    .sort((a, b) => {
+      if (a.parentId === null && b.parentId !== null) return -1
+      if (a.parentId !== null && b.parentId === null) return 1
+
+      return a.id - b.id
+    })
+
+  // Jika tree format diminta, konversi ke struktur hierarki
+  if (isTreeFormat) {
+    const buildTree = (parentId = null) => {
+      return baseDivisions
+        .filter(division => division.parentId === parentId)
+        .map(division => ({
+          id: division.id,
+          name: division.name,
+          code: division.code,
+          children: buildTree(division.id),
+        }))
+        .sort((a, b) => a.id - b.id)
+    }
+
+    const treeData = buildTree()
+
+    return {
+      success: true,
+      data: treeData,
+      message: 'Data division dalam format tree berhasil diambil',
+      meta: {
+        record_totalCount: baseDivisions.length,
+        format: 'tree',
+      },
+    }
+  }
+
+  return {
+    success: true,
+    data: divisions,
+    message: 'Data division berhasil diambil',
+    meta: {
+      record_totalCount: divisions.length,
+      format: 'flat',
+    },
+  }
+})
diff --git a/server/api/v1/authentication/login.post.ts b/server/api/v1/authentication/login.post.ts
new file mode 100644
index 00000000..70511d4d
--- /dev/null
+++ b/server/api/v1/authentication/login.post.ts
@@ -0,0 +1,45 @@
+import { getRequestURL, readBody, setCookie } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  const url = getRequestURL(event)
+  const config = useRuntimeConfig()
+
+  const apiOrigin = config.public.API_ORIGIN
+
+  const cleanOrigin = apiOrigin.replace(/\/+$/, '')
+  const cleanPath = url.pathname.replace(/^\/api\//, '').replace(/^\/+/, '')
+  const externalUrl = `${cleanOrigin}/${cleanPath}${url.search}`
+
+  const resp = await fetch(externalUrl, {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+
+  console.log(resp)
+  if (resp.status === 200) {
+    const data = await resp.json()
+
+    if (data?.data?.accessToken) {
+      setCookie(event, 'authentication', data.data.accessToken, {
+        path: '/',
+        httpOnly: true,
+        sameSite: 'strict',
+        maxAge: 60 * 60 * 24,
+      })
+
+      delete data.data.accessToken
+      return data
+    }
+  }
+
+  return new Response(await resp.text(), {
+    status: resp.status,
+    headers: {
+      'Content-Type': resp.headers.get('content-type') || 'text/plain',
+    },
+  })
+})
diff --git a/server/api/v1/satusehat/list.post.ts b/server/api/v1/satusehat/list.post.ts
new file mode 100644
index 00000000..97ce963a
--- /dev/null
+++ b/server/api/v1/satusehat/list.post.ts
@@ -0,0 +1,171 @@
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+
+  // Mock data lengkap
+  const mockData = [
+    {
+      id: 'RSC001',
+      resource_type: 'Encounter',
+      patient: {
+        name: 'Ahmad Wepe',
+        mrn: 'RM001234',
+      },
+      status: 2, // 0: failed, 1: pending, 2: success
+      updated_at: '2025-01-15',
+      fhir_id: 'ENC-00123',
+    },
+    {
+      id: 'RSC002',
+      resource_type: 'Patient',
+      patient: {
+        name: 'Siti Aminah',
+        mrn: 'RM001235',
+      },
+      status: 1,
+      updated_at: '2025-01-10',
+      fhir_id: 'PAT-001235',
+    },
+    {
+      id: 'RSC003',
+      resource_type: 'Observation',
+      patient: {
+        name: 'Budi Antono',
+        mrn: 'RM001236',
+      },
+      status: 0,
+      updated_at: '2025-01-11',
+      fhir_id: 'OBS-001236',
+    },
+    {
+      id: 'RSC004',
+      resource_type: 'Encounter',
+      patient: {
+        name: 'Maria Sari',
+        mrn: 'RM001237',
+      },
+      status: 2,
+      updated_at: '2025-01-12',
+      fhir_id: 'ENC-001237',
+    },
+    {
+      id: 'RSC005',
+      resource_type: 'Patient',
+      patient: {
+        name: 'Joko Widodo',
+        mrn: 'RM001238',
+      },
+      status: 1,
+      updated_at: '2025-01-13',
+      fhir_id: 'PAT-001238',
+    },
+    {
+      id: 'RSC006',
+      resource_type: 'Observation',
+      patient: {
+        name: 'Dewi Sartika',
+        mrn: 'RM001239',
+      },
+      status: 2,
+      updated_at: '2025-01-14',
+      fhir_id: 'OBS-001239',
+    },
+    {
+      id: 'RSC007',
+      resource_type: 'Encounter',
+      patient: {
+        name: 'Rudi Hartono',
+        mrn: 'RM001240',
+      },
+      status: 0,
+      updated_at: '2025-01-16',
+      fhir_id: 'ENC-001240',
+    },
+    {
+      id: 'RSC008',
+      resource_type: 'Patient',
+      patient: {
+        name: 'Sri Mulyani',
+        mrn: 'RM001241',
+      },
+      status: 2,
+      updated_at: '2025-01-17',
+      fhir_id: 'PAT-001241',
+    },
+  ]
+
+  // Ekstrak parameter filter dari request body
+  const {
+    status,
+    resource_type,
+    date_from,
+    date_to,
+    search,
+    page = 1,
+    limit = 10,
+  } = body
+
+  let filteredData = [...mockData]
+
+  // Filter berdasarkan status
+  if (status !== undefined && status !== null && status !== '') {
+    filteredData = filteredData.filter(item => item.status === Number(status))
+  }
+
+  // Filter berdasarkan resource_type (transaction type)
+  if (resource_type && resource_type !== 'all') {
+    filteredData = filteredData.filter(item =>
+      item.resource_type.toLowerCase() === resource_type.toLowerCase(),
+    )
+  }
+
+  // Filter berdasarkan rentang tanggal
+  if (date_from) {
+    filteredData = filteredData.filter(item =>
+      new Date(item.updated_at) >= new Date(date_from),
+    )
+  }
+
+  if (date_to) {
+    filteredData = filteredData.filter(item =>
+      new Date(item.updated_at) <= new Date(date_to),
+    )
+  }
+
+  // Filter berdasarkan pencarian nama pasien atau MRN
+  if (search) {
+    filteredData = filteredData.filter(item =>
+      item.patient.name.toLowerCase().includes(search.toLowerCase())
+      || item.patient.mrn.toLowerCase().includes(search.toLowerCase())
+      || item.fhir_id.toLowerCase().includes(search.toLowerCase()),
+    )
+  }
+
+  // Pagination
+  const totalItems = filteredData.length
+  const totalPages = Math.ceil(totalItems / limit)
+  const offset = (page - 1) * limit
+  const paginatedData = filteredData.slice(offset, offset + limit)
+
+  // Simulasi delay untuk loading state
+  await new Promise(resolve => setTimeout(resolve, 300))
+
+  return {
+    success: true,
+    data: paginatedData,
+    meta: {
+      total: totalItems,
+      page: Number(page),
+      limit: Number(limit),
+      total_pages: totalPages,
+      has_next: page < totalPages,
+      has_prev: page > 1,
+    },
+    filters: {
+      status,
+      resource_type,
+      date_from,
+      date_to,
+      search,
+    },
+  }
+})
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 00000000..3b037e25
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,86 @@
+import animate from 'tailwindcss-animate'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  safelist: ['dark'],
+  prefix: '',
+
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+        'collapsible-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+      },
+    },
+  },
+  plugins: [animate],
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..a6436031
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "~/*": [
+        "./app/*"
+      ]
+    }
+  }
+}
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 00000000..a34f3725
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,33 @@
+import { defineConfig, presetAttributify, presetIcons, presetWind } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind(), // This is the Tailwind-compatible preset
+    presetAttributify(),
+    presetIcons(),
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {},
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  shortcuts: [
+    // Add any custom shortcuts if needed
+  ],
+  rules: [
+    // Custom rules if needed
+  ],
+  inspector: true,
+})