Squashed commit of the following:

commit 72ce2260c50597f782f07d29db3985607ecc2f34
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 17 15:19:36 2025 +0700

    Feat: add doc preview in Therpay protocol List

commit 7032cd2409a660d40899ffd421137e4158cfde4a
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 12 15:34:30 2025 +0700

    Fix: prepare API integration protokol terapi verification

commit dbf6f78d00afc818baf2b34d128ee2153814cc88
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Wed Nov 12 14:09:28 2025 +0700

    Feat: add basic CRUD therapy protocol

commit 46a44e90fe4d4097b5460d2d4e5689b2a5389467
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 11 15:57:54 2025 +0700

    Fix: Prepare protokol terapi API Integration

commit 4674090566727cebd947e50e2c06c44e8c7afa7e
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 10 15:33:22 2025 +0700

    Fix: hotfix style add protokol terapi

commit 919c91abd8ef8b4cd193012eed7f5e8cf635cda2
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 10 15:17:14 2025 +0700

    Fix: Typo drpodown-action-p in protokol-terapi

commit e21d30eacf1a08118e289d4bb64889e708d5023a
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 10 15:14:33 2025 +0700

    Fix: add diagnose & procedure dialog picker in add protokol terapi

commit 9a3d73b72b0dceea778d83e7630c5ead110a6a4c
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 4 10:21:24 2025 +0700

    Fix: Add Schema therapy protocol rehab medik

commit 4d8d2d633bbbd78038b1cc607558c1ceb31c5986
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Tue Nov 4 09:30:55 2025 +0700

    Fix: refactor Actions Btn ba-dr-su

commit 5f290a6e4bd1559c0e5864a508c5ab650cfae6e8
Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date:   Mon Nov 3 17:08:20 2025 +0700

    Feat: UI protokol terapi in Rehab medik

commit 63010f69ff30532bb8ac91443112f31d4942b221
Author: Khafid Prayoga <khafidp@pm.me>
Date:   Tue Oct 21 09:54:13 2025 +0700

    wip: list protokol terapi

commit 44eedc298680a5255fee0ee8feee3e24beda93dd
Author: Khafid Prayoga <khafidp@pm.me>
Date:   Mon Oct 20 12:54:01 2025 +0700

    feat(therapy-protocol): init form entry

    feat(therapy-protocol): init page routes

    wip: init entry form

    wip: form entry protokol terapi

    todo: table procedure, and diagnose  picker

    wip: schema form new entry

    todo: picker/modal yang relateds ke form entry

app/components/pub/my-ui/data/dropdown-action-dp.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/pub/my-ui/data/dropdown-action-duvp.vue

@@ -0,0 +1,106 @@
+<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<any>>('timestamp')!
+  
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Verifikasi',
+    onClick: () => {
+      verify()
+    },
+    icon: 'i-lucide-shield-check',
+  },
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function verify() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmVerify
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/pub/my-ui/data/dropdown-action-p.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Process',
+    onClick: () => {
+      process()
+    },
+    icon: 'i-lucide-arrow-right',
+  },
+]
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/pub/my-ui/data/types.ts

@@ -78,6 +78,8 @@ export const ActionEvents = {
   showEdit: 'showEdit',
   showDetail: 'showDetail',
   showProcess: 'showProcess',
+  showConfirmVerify: 'showConfirmVerify',
+  showPrint: 'showPrint',
 }
 
 export interface DataTableLoader {

app/components/pub/my-ui/form/text-area-input.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  placeholder: string
+  label: string
+  errors?: FormErrors
+  class?: string
+  colSpan?: number
+  numericOnly?: boolean
+  maxLength?: number
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  let value = target.value
+
+  // Filter numeric only jika diperlukan
+  if (props.numericOnly) {
+    value = value.replace(/\D/g, '')
+  }
+
+  // Batasi panjang maksimal jika diperlukan
+  if (props.maxLength && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength)
+  }
+
+  // Update value jika ada perubahan
+  if (target.value !== value) {
+    target.value = value
+    // Trigger input event untuk update form
+    target.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label
+      class="mb-2 font-medium"
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Textarea
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :maxlength="maxLength"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              autocomplete="off"
+              aria-autocomplete="none"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+              @input="handleInput"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/pub/my-ui/modal/dialog.vue

@@ -45,15 +45,12 @@ const isOpen = computed({
 
 <template>
   <Dialog v-model:open="isOpen">
-    <DialogContent
-      :class="sizeClass"
-      @interact-outside="(e: any) => preventOutside && e.preventDefault()"
-      @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
-    >
+    <DialogContent :class="sizeClass" @interact-outside="(e: any) => preventOutside && e.preventDefault()"
+      @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()">
       <DialogHeader>
         <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
-          <div v-if="props.titleIcon" class="me-2 pt-0.5">
-            <Icon :name="props.titleIcon" :class="`!pt-2`" />
+          <div class="me-2 pt-0.5">
+            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
           </div>
           <div>
             {{ props.title }}
@@ -66,4 +63,4 @@ const isOpen = computed({
       </DialogDescription>
     </DialogContent>
   </Dialog>
-</template>
+</template>

app/components/pub/my-ui/modal/doc-preview-dialog.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  link: string
+}>()
+
+const emit = defineEmits<{
+  // submit: [values: InstallationFormData, resetForm: () => void]
+  // cancel: [resetForm: () => void]
+}>()
+
+// Form cancel handler
+// function onCancelForm({ resetForm }: { resetForm: () => void }) {
+//   emit('cancel', resetForm)
+// }
+function onExternalLink() {
+  navigateTo(props.link, {external: true,open: { target: "_blank" },});
+}
+</script>
+
+<template>
+  <Button variant="link" class="absolute top-4 right-16" @click="onExternalLink">
+    Open in Browser
+    <Icon name="i-lucide-external-link" class="h-4 w-4" />
+  </Button>
+  <div class="border border-gray-400 rounded-lg w-full h-[80vh] overflow-hidden">
+    <embed style="width: 100%; height: 100%" :src="props.link" />
+  </div>
+</template>

app/components/pub/my-ui/nav-footer/ba-dr-su.vue

@@ -26,19 +26,19 @@ function onClick(type: ClickType) {
   <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
     <div>
       <Button variant="ghost" type="button" @click="onClick('back')">
-        <Icon name="i-lucide-arrow-left"  />
+        <Icon name="i-lucide-arrow-left" />
         Back
       </Button>
     </div>
-    <div>
-      <Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
+    <div v-show="props.enableDraft">
+      <Button variant="secondary" type="button" @click="onClick('draft')">
         <Icon name="i-lucide-file" />
         Draft
       </Button>
     </div>
     <div>
       <Button type="button" @click="onClick('submit')">
-        <Icon name="i-lucide-check"  />
+        <Icon name="i-lucide-check" />
         Submit
       </Button>
     </div>