From a5ec824f4d0986154d29f652ffb60cee272f0950 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 8 Dec 2025 11:01:44 +0700
Subject: [PATCH] cherry-pick: pub components from feat/laporan-tindakan-185

---
 .../pub/my-ui/combobox/combobox.vue           |   6 +-
 app/components/pub/my-ui/combobox/index.ts    |   8 +-
 .../content-switcher/content-switcher.vue     |  82 ++++++---
 .../pub/my-ui/data/dropdown-action-d.vue      |  66 +++++++
 app/components/pub/my-ui/doc-entry/block.vue  |   4 +-
 .../pub/my-ui/form/button-action.vue          | 165 ++++++++++++++++++
 app/components/pub/my-ui/form/file-field.vue  |   3 -
 app/components/pub/my-ui/form/fragment.vue    |  26 +++
 app/components/pub/my-ui/form/index.ts        |  11 ++
 app/components/pub/my-ui/form/input-base.vue  |  78 ++++++---
 app/components/pub/my-ui/form/select.vue      |   9 +-
 .../pub/my-ui/form/text-area-input.vue        |  14 +-
 .../pub/my-ui/form/view/detail-row.vue        |  10 +-
 app/components/pub/my-ui/menus/submenu.vue    |  11 +-
 app/components/pub/my-ui/nav-footer/index.ts  |   1 +
 .../pub/my-ui/pagination/pagination.vue       |   2 +-
 app/components/pub/ui/form/array-message.vue  |  20 +++
 app/components/pub/ui/form/index.ts           |   1 +
 app/components/pub/ui/input/Input.vue         |   2 +-
 19 files changed, 434 insertions(+), 85 deletions(-)
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-d.vue
 create mode 100644 app/components/pub/my-ui/form/button-action.vue
 create mode 100644 app/components/pub/my-ui/form/fragment.vue
 create mode 100644 app/components/pub/my-ui/form/index.ts
 create mode 100644 app/components/pub/my-ui/nav-footer/index.ts
 create mode 100644 app/components/pub/ui/form/array-message.vue

diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index ab625b01..5f0292e7 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -4,7 +4,7 @@ import { type Item } from './index'
 
 const props = defineProps<{
   id?: string
-  modelValue?: string
+  modelValue?: string | number
   items: Item[]
   placeholder?: string
   searchPlaceholder?: string
@@ -16,8 +16,8 @@ const props = defineProps<{
 const model = defineModel()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'update:searchText': [value: string]
+  'update:modelValue': [value: string | number]
+  'update:searchText': [value: string | number]
 }>()
 
 const open = ref(false)
diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
index e4864f7f..f3038de7 100644
--- a/app/components/pub/my-ui/combobox/index.ts
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -1,5 +1,5 @@
 export interface Item {
-  value: string
+  value: string | number
   label: string
   code?: string
   priority?: number
@@ -7,12 +7,12 @@ export interface Item {
 
 export function recStrToItem(input: Record<string, string>): Item[] {
   const items: Item[] = []
-  let idx = 0;
+  let idx = 0
   for (const key in input) {
     if (input.hasOwnProperty(key)) {
       items.push({
-        value: key || ('unknown-' + idx),
-        label: input[key] || ('unknown-' + idx),
+        value: key || 'unknown-' + idx,
+        label: input[key] || 'unknown-' + idx,
       })
     }
     idx++
diff --git a/app/components/pub/my-ui/content-switcher/content-switcher.vue b/app/components/pub/my-ui/content-switcher/content-switcher.vue
index 267d94c1..3b79f193 100644
--- a/app/components/pub/my-ui/content-switcher/content-switcher.vue
+++ b/app/components/pub/my-ui/content-switcher/content-switcher.vue
@@ -1,33 +1,40 @@
 <script setup lang="ts">
 const props = defineProps<{
   height?: number
-  class?: string
   activeTab?: 1 | 2
 }>()
 
-const classVal = computed(() => {
-  return props.class ? props.class : ''
-})
 const activeTab = ref(props.activeTab || 1)
 
-function switchActiveTab() {
-  activeTab.value = activeTab.value === 1 ? 2 : 1
+function handleClick(value: 1 | 2) {
+  activeTab.value = value
 }
 </script>
 
 <template>
-  <div :class="`content-switcher ${classVal}`" :style="height ? `height:${200}px` : ''">
-    <div class="wrapper">
-      <div :class="`item item-1 ${activeTab === 1 ? 'active' : 'inactive'}`">
-        <slot name="content1" />
+  <div class="content-switcher" :style="`height: ${height || 200}px`">
+    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
+      <div class="content-wrapper">
+        <div>
+          <slot name="content1" />
+        </div>
       </div>
-      <div :class="`nav border-slate-300 ${ activeTab == 1 ? 'border-l' : 'border-r'}`">
-        <button @click="switchActiveTab()" class="!p-0 w-full h-full">
-          <Icon :name="activeTab == 1 ? 'i-lucide-chevron-left' : 'i-lucide-chevron-right'" class="text-3xl" />
+      <div class="content-nav">
+        <button @click="handleClick(1)">
+          <Icon name="i-lucide-chevron-right" />
         </button>
       </div>
-      <div :class="`item item-2 ${activeTab === 2 ? 'active' : 'inactive'}`">
-        <slot name="content2" />
+    </div>
+    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
+      <div class="content-nav">
+        <button @click="handleClick(2)">
+          <Icon name="i-lucide-chevron-left" />
+        </button>
+      </div>
+      <div class="content-wrapper">
+        <div>
+          <slot name="content2" />
+        </div>
       </div>
     </div>
   </div>
@@ -35,24 +42,45 @@ function switchActiveTab() {
 
 <style>
   .content-switcher {
-    @apply overflow-hidden
+    @apply flex overflow-hidden gap-3
   }
-  .wrapper {
-    @apply flex w-[200%] h-full
-  }
-  .item {
-    @apply w-[calc(50%-60px)]
+  .content-switcher > * {
+    @apply border border-slate-300 rounded-md flex overflow-hidden
   }
 
-  .item-1.active {
-    @apply ms-0 transition-all duration-500 ease-in-out
+  .content-wrapper {
+    @apply p-4 2xl:p-5 overflow-hidden grow
   }
-  .item-1.inactive {
-    @apply -ms-[calc(50%-60px)] transition-all duration-500 ease-in-out
+  .inactive .content-wrapper {
+    @apply p-0 w-0
   }
 
-  .nav {
-    @apply h-full w-[60px] flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  .content-nav {
+    @apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
   }
 
+  .content-nav button {
+    @apply pt-2 px-2 h-full w-full
+  }
+
+  /* .content-switcher .inactive > .content-wrapper {
+    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
+  } */
+  .content-switcher .inactive {
+    @apply w-16 transition-all duration-500 ease-in-out
+  }
+  .content-switcher .inactive > .content-nav {
+    @apply w-full transition-all duration-100 ease-in-out
+  }
+
+  .content-switcher .active {
+    @apply grow transition-all duration-500 ease-in-out
+  }
+  .content-switcher .active > .content-nav {
+    @apply w-0 transition-all duration-100 ease-in-out
+  }
+  /* .content-switcher .active > .content-wrapper {
+    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
+  } */
+
 </style>
diff --git a/app/components/pub/my-ui/data/dropdown-action-d.vue b/app/components/pub/my-ui/data/dropdown-action-d.vue
new file mode 100644
index 00000000..ac15ff49
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-d.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const timestamp = inject<Ref<number>>('timestamp')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+  timestamp.value = Date.now()
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index 7e217542..b51ad72a 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -53,8 +53,8 @@ const settingClass = computed(() => {
       '[&_.cell]:2xl:flex',
     ][getBreakpointIdx(props.cellFlexPoint)]
     cls += ' [&_.label]:flex-shrink-0 ' + [
-      '[&_.label]:md:w-16 [&_.label]:xl:w-20',
-      '[&_.label]:md:w-20 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
       '[&_.label]:md:w-24 [&_.label]:xl:w-32',
       '[&_.label]:md:w-32 [&_.label]:xl:w-40',
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
diff --git a/app/components/pub/my-ui/form/button-action.vue b/app/components/pub/my-ui/form/button-action.vue
new file mode 100644
index 00000000..a1054948
--- /dev/null
+++ b/app/components/pub/my-ui/form/button-action.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { Button } from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+
+/**
+ * Button Action Component untuk form
+ * Support preset: add, delete, save, cancel
+ */
+interface Props {
+  /**
+   * Preset button type dengan styling bawaan
+   * - add: Button tambah (outline primary)
+   * - delete: Button hapus (ghost)
+   * - save: Button simpan (primary)
+   * - cancel: Button batal (secondary)
+   * - custom: Custom styling
+   */
+  preset?: 'add' | 'delete' | 'save' | 'cancel' | 'custom'
+
+  /**
+   * Icon name (UnoCSS/Lucide)
+   * Default akan diset berdasarkan preset
+   */
+  icon?: string
+
+  /**
+   * Button text
+   * Set ke empty string ('') untuk icon-only mode
+   */
+  label?: string
+
+  /**
+   * Button title (tooltip)
+   * Wajib untuk icon-only buttons (accessibility)
+   */
+  title?: string
+
+  /**
+   * Icon only mode (no label)
+   * Otomatis true jika label kosong
+   */
+  iconOnly?: boolean
+
+  /**
+   * Button type
+   */
+  type?: 'button' | 'submit' | 'reset'
+
+  /**
+   * Disabled state
+   */
+  disabled?: boolean
+
+  /**
+   * Custom class untuk override styling
+   */
+  class?: string
+
+  /**
+   * Responsive width (full width on mobile)
+   */
+  fullWidthMobile?: boolean
+
+  /**
+   * Button size
+   */
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+
+  /**
+   * Button variant (override preset variant)
+   */
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  preset: 'custom',
+  type: 'button',
+  disabled: false,
+  fullWidthMobile: false,
+  iconOnly: false,
+})
+
+// Preset configurations
+const presetConfig = {
+  add: {
+    variant: 'outline' as const,
+    icon: 'i-lucide-plus',
+    label: 'Tambah',
+    classes:
+      'border-primary bg-white text-primary hover:bg-primary hover:text-white dark:bg-slate-800 dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white',
+  },
+  delete: {
+    variant: 'ghost' as const,
+    icon: 'i-lucide-trash-2',
+    label: '', // Default kosong untuk icon-only
+    classes:
+      'hover:bg-destructive hover:text-white hover:border-destructive dark:hover:bg-destructive dark:hover:text-white',
+  },
+  save: {
+    variant: 'default' as const,
+    icon: 'i-lucide-save',
+    label: 'Simpan',
+    classes: 'bg-primary text-primary-foreground hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90',
+  },
+  cancel: {
+    variant: 'secondary' as const,
+    icon: 'i-lucide-x',
+    label: 'Batal',
+    classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 dark:bg-slate-700 dark:hover:bg-slate-600',
+  },
+  custom: {
+    variant: 'default' as const,
+    icon: '',
+    label: '',
+    classes: '',
+  },
+}
+
+const currentPreset = computed(() => presetConfig[props.preset])
+const buttonVariant = computed(() => props.variant || currentPreset.value.variant)
+const buttonIcon = computed(() => props.icon || currentPreset.value.icon)
+
+// Label handling: gunakan prop label jika ada, fallback ke preset, atau undefined jika iconOnly
+const buttonLabel = computed(() => {
+  if (props.label !== undefined) return props.label
+  return currentPreset.value.label
+})
+
+const buttonTitle = computed(() => props.title || buttonLabel.value)
+
+// Deteksi icon-only mode
+const isIconOnly = computed(() => {
+  return props.iconOnly || buttonLabel.value === '' || !buttonLabel.value
+})
+
+const buttonClasses = computed(() => {
+  // Base classes berbeda untuk icon-only vs with-label
+  const baseClasses = isIconOnly.value
+    ? 'rounded-md p-2 w-9 h-9 transition-colors flex items-center justify-center' // Icon only: square button
+    : 'rounded-md px-4 py-2 transition-colors sm:text-sm' // With label: padding horizontal lebih besar
+
+  const widthClasses = props.fullWidthMobile && !isIconOnly.value ? 'w-full sm:w-auto' : ''
+  const presetClasses = currentPreset.value.classes
+
+  return cn(baseClasses, widthClasses, presetClasses, props.class)
+})
+</script>
+
+<template>
+  <Button
+    :title="buttonTitle"
+    :type="type"
+    :variant="buttonVariant"
+    :size="size"
+    :disabled="disabled"
+    :class="buttonClasses"
+  >
+    <Icon
+      v-if="buttonIcon"
+      :name="buttonIcon"
+      :class="cn('h-4 w-4 align-middle transition-colors', !isIconOnly ? 'mr-2' : '')"
+    />
+    <slot v-if="!isIconOnly">{{ buttonLabel }}</slot>
+  </Button>
+</template>
diff --git a/app/components/pub/my-ui/form/file-field.vue b/app/components/pub/my-ui/form/file-field.vue
index b995ca56..125ece00 100644
--- a/app/components/pub/my-ui/form/file-field.vue
+++ b/app/components/pub/my-ui/form/file-field.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
diff --git a/app/components/pub/my-ui/form/fragment.vue b/app/components/pub/my-ui/form/fragment.vue
new file mode 100644
index 00000000..a3f3135c
--- /dev/null
+++ b/app/components/pub/my-ui/form/fragment.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * A "Ghost" wrapper component designed to group related form fields
+ * without adding unnecessary depth to the DOM tree.
+ * * Unlike a standard <div> wrapper, this component leverages Vue 3's
+ * multi-root feature to render the title and slot content as direct siblings.
+ * This ensures the parent Form's grid or flex layout remains intact.
+ * * @property {string} [title] for compiler marker.
+ *
+ * Example Usage:
+ *
+    <Fragment
+      v-slot="{ section }"
+      title="Tim Pelaksana Tindakan"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+    </Fragment>
+ */
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <slot :section="title" />
+</template>
diff --git a/app/components/pub/my-ui/form/index.ts b/app/components/pub/my-ui/form/index.ts
new file mode 100644
index 00000000..246bb8c6
--- /dev/null
+++ b/app/components/pub/my-ui/form/index.ts
@@ -0,0 +1,11 @@
+export { default as Block } from './block.vue'
+export { default as ButtonAction } from './button-action.vue'
+export { default as FieldGroup } from './field-group.vue'
+export { default as Field } from './field.vue'
+export { default as FileField } from './file-field.vue'
+export { default as Fragment } from './fragment.vue'
+export { default as InputBase } from './input-base.vue'
+export { default as Label } from './label.vue'
+export { default as Select } from './select.vue'
+export { default as TextAreaInput } from './text-area-input.vue'
+export { default as TextCaptcha } from './text-captcha.vue'
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index c31b2073..398a5af2 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
+import { computed } from 'vue'
+import { useFieldError } from 'vee-validate'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
+type InputType = 'text' | 'number' | 'password' | 'email' | 'date' | 'time' | 'datetime-local' | 'search' | 'tel'
+
 const props = defineProps<{
   fieldName: string
   placeholder: string
-  label: string
+  label?: string
   errors?: FormErrors
   class?: string
   colSpan?: number
@@ -21,8 +22,13 @@ const props = defineProps<{
   isDisabled?: boolean
   rightLabel?: string
   bottomLabel?: string
+  suffixMsg?: string
+  iconName?: string
+  inputType?: InputType
 }>()
 
+const { class: containerClass } = props
+
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   let value = target.value
@@ -44,12 +50,16 @@ function handleInput(event: Event) {
     target.dispatchEvent(new Event('input', { bubbles: true }))
   }
 }
+
+// Get error state from vee-validate
+const fieldError = useFieldError(() => props.fieldName)
+const hasError = computed(() => !!fieldError.value)
 </script>
 
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      v-if="label !== ''"
+      v-if="label"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
     >
@@ -63,27 +73,51 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem :class="cn(`relative`,)">
-          <FormControl>
-            <Input
-              :disabled="isDisabled"
-              v-bind="componentField"
-              :placeholder="placeholder"
-              :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
-              autocomplete="off"
-              aria-autocomplete="none"
-              autocorrect="off"
-              autocapitalize="off"
-              spellcheck="false"
-              @input="handleInput"
-            />
-            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
+        <FormItem>
+          <FormControl :class="cn('relative', containerClass)">
+            <div class="relative w-full max-w-sm items-center">
+              <Input
+                :disabled="isDisabled"
+                v-bind="componentField"
+                :placeholder="placeholder"
+                :maxlength="maxLength"
+                :class="cn(hasError && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500')"
+                autocomplete="off"
+                aria-autocomplete="none"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                @input="handleInput"
+                :type="inputType"
+              />
+              <span
+                v-if="suffixMsg"
+                class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-muted-foreground"
+              >
+                {{ suffixMsg }}
+              </span>
+              <Icon
+                v-if="iconName"
+                :name="iconName"
+                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400"
+              />
+              <p
+                v-show="rightLabel"
+                class="absolute right-3 top-0 text-gray-400"
+              >
+                {{ rightLabel }}
+              </p>
+            </div>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
-    <p v-show="bottomLabel" class="text-gray-400 mt-1">{{ bottomLabel }}</p>    
+    <p
+      v-show="bottomLabel"
+      class="text-gray-400"
+    >
+      {{ bottomLabel }}
+    </p>
   </DE.Cell>
 </template>
diff --git a/app/components/pub/my-ui/form/select.vue b/app/components/pub/my-ui/form/select.vue
index 0cfc926b..0227d2b1 100644
--- a/app/components/pub/my-ui/form/select.vue
+++ b/app/components/pub/my-ui/form/select.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SelectRoot } from 'radix-vue'
-import { watch } from 'vue'
+import { watch, computed } from 'vue'
+import { useFieldError } from 'vee-validate'
 import SelectContent from '~/components/pub/ui/select/SelectContent.vue'
 import SelectGroup from '~/components/pub/ui/select/SelectGroup.vue'
 import SelectItem from '~/components/pub/ui/select/SelectItem.vue'
@@ -29,9 +30,14 @@ const props = defineProps<{
   isDisabled?: boolean
   autoWidth?: boolean
   autoFill?: boolean
+  id?: string
   // otherPlacement sudah tidak digunakan, diganti dengan priority system di Item interface
 }>()
 
+// Get error state from vee-validate if id is provided
+const fieldError = props.id ? useFieldError(() => props.id!) : ref(null)
+const hasError = computed(() => !!fieldError.value)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -121,6 +127,7 @@ watch(
             'cursor-not-allowed bg-gray-100 opacity-50': isDisabled,
             'bg-white text-black dark:bg-gray-800 dark:text-white': !isDisabled,
             'w-full': !autoWidth,
+            'border-red-500 focus:ring-red-500': hasError,
           },
           props.class,
         )
diff --git a/app/components/pub/my-ui/form/text-area-input.vue b/app/components/pub/my-ui/form/text-area-input.vue
index 43002c80..22015d54 100644
--- a/app/components/pub/my-ui/form/text-area-input.vue
+++ b/app/components/pub/my-ui/form/text-area-input.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
@@ -19,8 +15,11 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  resize?: 'none' | 'y' | 'x'
+  rows?: number
 }>()
 
+const { resize = 'none', class: className } = props
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   let value = target.value
@@ -47,7 +46,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="font-medium mb-1"
+      :class="className"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
@@ -65,11 +64,12 @@ function handleInput(event: Event) {
         <FormItem>
           <FormControl>
             <Textarea
+              :rows="rows"
               :disabled="isDisabled"
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"
@@ -83,4 +83,4 @@ function handleInput(event: Event) {
       </FormField>
     </DE.Field>
   </DE.Cell>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/pub/my-ui/form/view/detail-row.vue b/app/components/pub/my-ui/form/view/detail-row.vue
index c46b77b6..15b2ba67 100644
--- a/app/components/pub/my-ui/form/view/detail-row.vue
+++ b/app/components/pub/my-ui/form/view/detail-row.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cn } from '~/lib/utils';
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   label: string
@@ -9,15 +9,17 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
+  <div :class="cn(`flex flex-col gap-0.5 lg:grid lg:grid-cols-[180px_auto_minmax(0,1fr)] lg:gap-x-3 lg:gap-y-1`, props.class)">
     <!-- Label -->
     <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
       {{ label }}
     </span>
 
+    <!-- Colon (hidden on mobile) -->
+    <span class="hidden text-md tracking-wide text-muted-foreground lg:block">:</span>
+
     <!-- Value -->
-    <span class="truncate lg:whitespace-normal">
-      <span class="me-3 hidden lg:inline-block">:</span>
+    <span class="text-md font-sans tracking-wide">
       <slot />
     </span>
   </div>
diff --git a/app/components/pub/my-ui/menus/submenu.vue b/app/components/pub/my-ui/menus/submenu.vue
index 8d60f742..ecfeb054 100644
--- a/app/components/pub/my-ui/menus/submenu.vue
+++ b/app/components/pub/my-ui/menus/submenu.vue
@@ -4,10 +4,6 @@ import { type EncounterItem } from "~/handlers/encounter-init.handler";
 const props = defineProps<{
   initialActiveMenu: string
   data: EncounterItem[]
-  canCreate?: boolean
-  canRead?: boolean
-  canUpdate?: boolean
-  canDelete?: boolean
 }>()
 
 const activeMenu = ref(props.initialActiveMenu)
@@ -42,12 +38,7 @@ function changeMenu(value: string) {
         class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
         <component
           :is="data.find((m) => m.id === activeMenu)?.component"
-          v-bind="data.find((m) => m.id === activeMenu)?.props"
-          :can-create="canCreate"
-          :can-read="canRead"
-          :can-update="canUpdate"
-          :can-delete="canDelete"
-        />
+          v-bind="data.find((m) => m.id === activeMenu)?.props" />
       </div>
     </div>
   </div>
diff --git a/app/components/pub/my-ui/nav-footer/index.ts b/app/components/pub/my-ui/nav-footer/index.ts
new file mode 100644
index 00000000..ba848bbf
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/index.ts
@@ -0,0 +1 @@
+export type ClickType = 'back' | 'draft' | 'submit'
diff --git a/app/components/pub/my-ui/pagination/pagination.vue b/app/components/pub/my-ui/pagination/pagination.vue
index 9b1618c3..469f966d 100644
--- a/app/components/pub/my-ui/pagination/pagination.vue
+++ b/app/components/pub/my-ui/pagination/pagination.vue
@@ -93,7 +93,7 @@ function getButtonClass(pageNumber: number) {
 </script>
 
 <template>
-  <div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
+  <div class="flex w-full min-w-0 items-center justify-between overflow-x-scroll px-2 py-2 md:overflow-hidden">
     <!-- Info text -->
     <div
       v-if="showInfo && endRecord > 0"
diff --git a/app/components/pub/ui/form/array-message.vue b/app/components/pub/ui/form/array-message.vue
new file mode 100644
index 00000000..03bbfc12
--- /dev/null
+++ b/app/components/pub/ui/form/array-message.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ErrorMessage } from 'vee-validate'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  name: string
+  class?: string
+}>()
+</script>
+
+<template>
+  <ErrorMessage
+    :name="props.name"
+    v-slot="{ message }"
+  >
+    <p :class="cn('font-sans text-[0.8rem] text-destructive', props.class)">
+      {{ message }}
+    </p>
+  </ErrorMessage>
+</template>
diff --git a/app/components/pub/ui/form/index.ts b/app/components/pub/ui/form/index.ts
index 1a3be118..67c55c94 100644
--- a/app/components/pub/ui/form/index.ts
+++ b/app/components/pub/ui/form/index.ts
@@ -1,3 +1,4 @@
+export { default as ArrayMessage } from './array-message.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormDescription } from './FormDescription.vue'
 export { default as FormItem } from './FormItem.vue'
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 21603c73..b4fcf935 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:border-primary flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "