Merge pull request #139 from dikstub-rssa/dev

Update branch feat/resume-81

.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

.env.example

@@ -0,0 +1,4 @@
+NUXT_MAIN_API_ORIGIN=
+NUXT_BPJS_API_ORIGIN=
+NUXT_SYNC_API_ORIGIN=
+NUXT_API_ORIGIN=

.gitignore

@@ -25,4 +25,4 @@ logs
 
 # editor
 .vscode
-*.swp
+*.swp

.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
+}

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.

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`

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>

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;
+  }
+}

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>

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 '-'
+    },
+  },
+}

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>

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>

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>

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: {},
+}

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>

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>

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: {},
+}

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>

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>

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: {},
+}

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>

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>

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,
+}

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>

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>

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: {},
+}

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>

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
+  //   },
+  // }
+}
+

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>

app/components/app/device-order/entry-form.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    Test
+</template>

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
+  //   },
+  // }
+}
+

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>

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>

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: {},
+}

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>

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>

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: {},
+}

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>

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>

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>

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: {},
+}

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>

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>

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>

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 '-'
+    },
+  },
+}

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>

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>

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>

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 '-'
+    },
+  },
+}

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>

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>

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 '-'
+  },
+}

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>

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>

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>

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>

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>

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>

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>

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 '-'
+    },
+  },
+}

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>

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>

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>

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>

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>

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: {},
+}

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>

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>

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: {},
+}

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>

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>

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 '-'
+    },
+  },
+}

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>

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>

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>

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>

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>

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 '-'
+    },
+  },
+}

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>

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>

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>

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 '-'
+    },
+  },
+}

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>

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>

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>

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 '-'
+    },
+  },
+}

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>