Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/patient-63-adjustment

app/components/pub/my-ui/combobox/combobox.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { cn } from '~/lib/utils'
-
 import { type Item } from './index'
 
 const props = defineProps<{
@@ -14,6 +13,8 @@ const props = defineProps<{
   isDisabled?: boolean
 }>()
 
+const model = defineModel()
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
   'update:searchText': [value: string]
@@ -57,6 +58,7 @@ const searchableItems = computed(() => {
 })
 
 function onSelect(item: Item) {
+  model.value = item.value
   emit('update:modelValue', item.value)
   open.value = false
 }

app/components/pub/my-ui/comp-menu/comp-menu.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { type TabItem } from '../comp-tab/type'
+
+const props = defineProps<{
+  initialActiveMenu: string
+  data: TabItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveMenu)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="mt-4 flex gap-4">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
+        <button
+          v-for="menu in data"
+          :key="menu.value"
+          :data-active="activeMenu === menu.value"
+          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.value)"
+        >
+          {{ menu.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Active Menu Content -->
+    <div v-if="data.find((m) => m.value === activeMenu)?.component" class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+      <component
+        :is="data.find((m) => m.value === activeMenu)?.component"
+        v-bind="data.find((m) => m.value === activeMenu)?.props"
+      />
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/comp-tab/type.ts

@@ -3,5 +3,7 @@ export interface TabItem {
   label: string
   component?: any
   groups?: string[]
+  classCode?: string[]
+  subClassCode?: string[]
   props?: Record<string, any>
 }

app/components/pub/my-ui/content-header/content-header.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { Config } from './index'
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<Config>()
+
+const emit = defineEmits<{
+  'update:searchModelValue': [value: string]
+  'search': [value: string]
+}>()
+
+// Quick search
+const search = ref(props.quickSearchNav?.modelValue || props.refSearchNav?.modelValue || '')
+const debouncedSearch = refDebounced(search, props.quickSearchNav?.debounceDuration || 500)
+
+// Computed search model for v-model
+const searchModel = computed({
+  get: () => search.value,
+  set: (value: string) => {
+    search.value = value
+    emit('update:searchModelValue', value)
+  },
+})
+
+// Watch for external changes to modelValue
+watch(() => props.quickSearchNav?.modelValue, (newValue) => {
+  if (newValue !== props.quickSearchNav?.modelValue) {
+    search.value = newValue || ''
+  }
+})
+
+// Watch debounced search and emit search event
+watch(debouncedSearch, (newValue) => {
+  const minLength = props.quickSearchNav?.minLength || 3
+  // Only search if meets minimum length or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= minLength) {
+    emit('search', newValue)
+    props.refSearchNav?.onInput(newValue)
+  }
+})
+
+// Handle clear search
+function clearSearch() {
+  searchModel.value = ''
+  props.quickSearchNav?.onClear()
+  props.refSearchNav?.onClear()
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between pb-4 2xl:pb-5 ">
+    <div class="flex items-center">
+      <div class="ml-3 text-lg font-semibold text-gray-900">
+        <Icon v-if="icon" :name="icon" class="mr-2 size-4 md:size-6 align-middle" />
+        {{ title }}
+      </div>
+    </div>
+
+    <div class="flex items-center [&>*]:ms-2">
+      <!-- Slot -->
+      <slot />
+
+      <!-- Search Section -->
+      <div v-if="quickSearchNav || refSearchNav" class="relative">
+        <Input
+          v-model="searchModel"
+          name="search"
+          type="text"
+          :class="quickSearchNav?.inputClass || refSearchNav?.inputClass"
+          :placeholder="quickSearchNav?.placeholder || refSearchNav?.placeholder || 'Cari (min. 3 karakter)...'"
+        />
+
+        <button
+          v-if="search.length > 0"
+          class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+          type="button"
+          @click="clearSearch"
+        >
+          <Icon name="i-lucide-x" class="h-4 w-4" />
+        </button>
+
+        <div
+          v-if="quickSearchNav && quickSearchNav.showValidationFeedback !== false && searchModel.length > 0 && searchModel.length < (quickSearchNav.minLength || 3)"
+          class="absolute -bottom-6 left-0 text-xs text-amber-600 whitespace-nowrap"
+        >
+          Minimal {{ quickSearchNav.minLength || 3 }} karakter untuk mencari
+        </div>
+      </div>
+
+      <!-- Add Button -->
+      <div v-if="addNav" class="flex items-center">
+        <Button
+          class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm"
+          :class="addNav.classVal"
+          :variant="(addNav.variant as any) || 'default'"
+          @click="addNav?.onClick"
+        >
+          <Icon :name="addNav.icon || 'i-lucide-plus'" class="mr-2 h-4 w-4 align-middle" />
+          {{ addNav.label }}
+        </Button>
+      </div>
+
+      <!-- Filter Button -->
+      <div v-if="filterNav" class="flex items-center">
+        <Button
+          class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+          :class="filterNav.classVal"
+          :variant="(filterNav.variant as any) || 'default'"
+          @click="filterNav?.onClick"
+        >
+          <Icon :name="filterNav.icon || 'i-lucide-filter'" class="mr-2 h-4 w-4 align-middle" />
+          {{ filterNav.label }}
+        </Button>
+      </div>
+
+      <!-- Print Button -->
+      <div v-if="printNav" class="flex items-center">
+        <Button
+          class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+          :class="printNav.classVal"
+          :variant="(printNav.variant as any) || 'default'"
+          @click="printNav?.onClick"
+        >
+          <Icon :name="printNav.icon || 'i-lucide-printer'" class="mr-2 h-4 w-4 align-middle" />
+          {{ printNav.label }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/content-header/index.ts

@@ -0,0 +1,59 @@
+export type ComponentWithProps = { component: Component, props: Record<string, any> }
+
+export interface ButtonNav {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  classVal?: string
+  classValExt?: string
+  icon?: string
+  label: string
+  onClick?: () => void
+}
+
+// can type directly
+export interface QuickSearchNav {
+  modelValue?: string
+  placeholder?: string
+  inputClass?: string
+  inputPlaceHolder?: string
+  minLength?: number
+  btnClass?: string
+  btnIcon?: string
+  btnLabel?: string
+  showValidationFeedback?: boolean
+  debounceDuration?: number
+  searchParams: object
+  onSubmit?: (searchParams: object) => void
+  onClear: () => void
+}
+
+// callback on event
+export interface RefSearchNav {
+  modelValue?: string
+  placeholder?: string
+  inputClass?: string
+  inputPlaceHolder?: string
+  btnClass?: string
+  btnIcon?: string
+  onInput: (val: string) => void
+  onClick: () => void
+  onClear: () => void
+}
+
+export interface RefExportNav {
+  onExportPdf?: () => void
+  onExportCsv?: () => void
+  onExportExcel?: () => void
+}
+
+export interface Config {
+  title?: string
+  icon?: string
+  components?: ComponentWithProps[]
+  quickSearchNav?: QuickSearchNav
+  refSearchNav?: RefSearchNav // either ref or quick
+  filterNav?: ButtonNav
+  addNav?: ButtonNav
+  printNav?: ButtonNav
+}
+
+export { default as ContentHeader } from './content-header.vue'

app/components/pub/my-ui/content-switcher/content-switcher.vue

@@ -0,0 +1,58 @@
+<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
+}
+</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>
+      <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" />
+        </button>
+      </div>
+      <div :class="`item item-2 ${activeTab === 2 ? 'active' : 'inactive'}`">
+        <slot name="content2" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .content-switcher {
+    @apply overflow-hidden
+  }
+  .wrapper {
+    @apply flex w-[200%] h-full
+  }
+  .item {
+    @apply w-[calc(50%-60px)]
+  }
+
+  .item-1.active {
+    @apply ms-0 transition-all duration-500 ease-in-out
+  }
+  .item-1.inactive {
+    @apply -ms-[calc(50%-60px)] transition-all duration-500 ease-in-out
+  }
+
+  .nav {
+    @apply h-full w-[60px] flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  }
+
+</style>

app/components/pub/my-ui/data-table/data-table.vue

@@ -110,8 +110,8 @@ function handleActionCellClick(event: Event, _cellRef: string) {
     <TableBody v-else-if="rows.length === 0">
       <TableRow>
         <TableCell
-          :colspan="keys.length"
-          class="py-8 text-center"
+          :colspan="keys.length + 1"
+          class="py-5 text-center"
         >
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />

app/components/pub/my-ui/data/camuflage-input.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const model = defineModel<string>()
+const props = defineProps<{
+  class: string
+  defaultClass?: string
+  disabled?: boolean
+  width?: number
+  widthUnit?: string
+}>()
+
+const InputComp = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+const activeState = ref(false)
+
+let defaultClass = props.defaultClass ?? 'h-8 xl:h-9'
+let widthStyle = '';
+if(props.width) {
+  widthStyle = `width: ${props.width}${props.widthUnit ?? 'px'};`
+} else {
+  widthStyle = `width: 100%;`
+}
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+
+watch(activeState, () => {
+  nextTick(() => {
+    if (asyncInputRef.value && typeof asyncInputRef.value.focus === 'function') {
+        asyncInputRef.value.focus()
+      }
+  })
+
+    //   document.getElementById('editable-div')?.scrollIntoView({ behavior: 'smooth' })
+    InputComp.value.focus()
+    // console.log(inputComp.__defaults)
+})
+</script>
+
+<template>
+  <div
+    v-if="!activeState || disabled" @click="() => activeState = true"
+    :class="`${defaultClass}`"
+    :style="widthStyle">
+    {{ model }}
+  </div>
+  <InputComp v-else 
+    v-model="model"
+    :class="`${defaultClass}`"
+    :style="widthStyle"
+    @blur="() => activeState = false"
+  />
+  <!-- {{ inputComp.value }} -->
+  <!-- <Input
+    v-else v-model="model" @blur="() => activeState = false"
+    :class="`${defaultClass}`"
+    :style="widthStyle"
+    autofocus
+  /> -->
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/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)
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+</script>
+
+<template>
+  <Button @click="process" variant="outline"
+          class="text-orange-400 border-orange-400 bg-transparent">
+          Pilih
+          <Icon name="i-lucide-arrow-right" class="h-4 w-4 align-middle transition-colors" />
+        </Button>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/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)
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+</script>
+
+<template>
+  <Button @click="process" variant="outline"
+          class="text-orange-400 border-orange-400 bg-transparent">
+          Detail
+          <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
+        </Button>
+</template>

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/dropdown-action-print.vue

@@ -0,0 +1,31 @@
+<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')!
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+</script>
+
+<template>
+  <div>
+    <Button type="button" variant="outline" 
+      class="text-orange-500 border border-orange-400"
+      @click="print">
+      <Icon name="i-lucide-printer" class="h-4 w-4 align-middle transition-colors" />
+      Preview
+    </Button>
+  </div>
+</template>

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

@@ -0,0 +1,94 @@
+<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: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Delete',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  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
+  timestamp.value = new Date().getTime()
+}
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+</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/print-btn.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ActionEvents, type ListItemDto } from '~/components/pub/my-ui/data/types';
+
+const props = defineProps<{
+  url: string
+  btnTxt?: string
+  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')!
+
+function handlePrint() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  recItem.value = props.rec
+  timestamp.value = new Date().toISOString()
+}
+</script>
+
+<template>
+  <Button 
+    class="gap-3 items-center border-orange-400 text-orange-400"
+    variant="outline" @click="handlePrint">
+    <Icon name="i-lucide-printer" class="h-4 w-4" />
+    {{ props.btnTxt || 'Preview' }}
+  </Button>
+</template>

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

@@ -71,9 +71,11 @@ export interface KeyNames {
 
 export interface LinkItem {
   label: string
+  value?: string
   icon?: string
   href?: string // to cover the needs of stating full external origins full url
   action?: string // for local paths
+  groups?: string[]
   onClick?: (event: Event) => void
   headerStatus?: boolean
 }
@@ -84,7 +86,9 @@ export const ActionEvents = {
   showEdit: 'showEdit',
   showDetail: 'showDetail',
   showProcess: 'showProcess',
+  showCancel: 'showCancel',
   showVerify: 'showVerify',
+  showConfirmVerify: 'showConfirmVerify',
   showValidate: 'showValidate',
   showPrint: 'showPrint',
 }

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-12 [&_.label]:xl:w-20',
-      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-20 [&_.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',

app/components/pub/my-ui/doc-entry/colon.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-
+const { class: classProp } = defineProps<{
+  class?: string
+}>()
 </script>
 
 <template>
-  <div class="w-5 text-center">:</div>    
+  <div :class="`w-4 ps-1 ${classProp}`">:</div>
 </template>

app/components/pub/my-ui/form/file-field.vue

@@ -5,7 +5,7 @@ import { cn } from '~/lib/utils'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
-const props = defineProps<{
+interface Props {
   fieldName: string
   label?: string
   placeholder?: string
@@ -18,6 +18,19 @@ const props = defineProps<{
   isRequired?: boolean
   isDisabled?: boolean
   icons?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: 'Choose file...',
+  maxSizeMb: 1,
+  isDisabled: false,
+  isRequired: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: File | null): void
+  (e: 'fileSelected', file: File | null): void
 }>()
 
 const hintMsg = computed(() => {
@@ -32,7 +45,26 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
   const target = event.target as HTMLInputElement
   const file = target.files?.[0]
 
+  if (!file) {
+    handleChange(null)
+    emit('update:modelValue', null)
+    emit('fileSelected', null)
+    return
+  }
+
+  // Validate file size
+  const maxSizeBytes = props.maxSizeMb * 1024 * 1024
+  if (file.size > maxSizeBytes) {
+    console.warn(`File size exceeds ${props.maxSizeMb}MB limit`)
+    handleChange(null)
+    emit('update:modelValue', null)
+    emit('fileSelected', null)
+    return
+  }
+
   handleChange(file)
+  emit('update:modelValue', file)
+  emit('fileSelected', file)
 }
 </script>
 

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

@@ -47,7 +47,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="mb-1"
+      class="font-medium mb-1"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
@@ -69,7 +69,7 @@ function handleInput(event: Event) {
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"

app/components/pub/my-ui/form/view/detail-row.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-defineProps<{
+import { cn } from '~/lib/utils';
+
+const props = defineProps<{
   label: string
+  class?: string
+  labelClass?: string
 }>()
 </script>
 
 <template>
-  <div class="flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3">
+  <div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
     <!-- Label -->
-    <span class="text-md font-normal text-muted-foreground">
+    <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
       {{ label }}
     </span>
 

app/components/pub/my-ui/menus/submenu.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+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)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="flex">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-56 2xl:w-64 flex-shrink-0 rounded-md border bg-white dark:bg-slate-800 shadow-sm">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto px-2 py-3">
+        <button
+          v-for="menu in data"
+          :key="menu.id"
+          :data-active="activeMenu === menu.id"
+          class="w-full rounded-md px-4 py-3 text-left text-xs 2xl:text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.id)">
+          {{ menu.title }}
+        </button>
+      </div>
+    </div>
+    <!-- Active Menu Content -->
+    <div class="p-4 2xl:p-5 flex-grow">
+      <div v-if="data.find((m) => m.id === activeMenu)?.component"
+        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"
+        />
+      </div>
+    </div>
+  </div>
+</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/nav-content/ba.vue

@@ -20,7 +20,7 @@ function onClick(type: ClickType) {
     @click="onClick('draft')"
     class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
     </svg>
     {{ props.label }}

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

@@ -26,7 +26,7 @@ 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>
@@ -38,7 +38,7 @@ function onClick(type: ClickType) {
     </div>
     <div>
       <Button type="button" @click="onClick('submit')">
-        <Icon name="i-lucide-check"  />
+        <Icon name="i-lucide-check" />
         Submit
       </Button>
     </div>

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

@@ -1,25 +1,22 @@
 <script setup lang="ts">
+type ClickType = 'back'
+
 const emit = defineEmits<{
-  (e: 'click'): void
+  (e: 'click', type: ClickType): void
 }>()
 
-function onClick() {
-  emit('click')
+function onClick(type: ClickType) {
+  emit('click', type)
 }
 </script>
 
 <template>
   <div class="m-2 flex gap-2 px-2">
-    <Button
-      class="bg-gray-400"
-      type="button"
-      @click="onClick"
-    >
-      <Icon
-        name="i-lucide-arrow-left"
-        class="me-2 align-middle"
-      />
-      Back
-    </Button>
+    <div>
+      <Button variant="ghost"@click="onClick('back')" >
+        <Icon name="i-lucide-arrow-left" class="" />
+        Back
+      </Button>
+    </div>
   </div>
 </template>

app/components/pub/my-ui/nav-footer/ca-ed-su.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 
 const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
 const additionalClass = props.class ?? ''
-const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-8 [&_button]:!p-0' : ''
 
 type ClickType = 'cancel' | 'edit' | 'submit'
 

app/components/pub/my-ui/nav-header/filter.vue

@@ -50,8 +50,11 @@ const value = ref({
   end: todayCalendar,
 }) as Ref<DateRange>
 
+
+function onInput(event: Event) {
+  props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+}
 function onFilterClick() {
-  console.log('Search:', searchQuery.value)
   console.log('Date Range:', dateRange.value)
   props.refSearchNav?.onClick()
 }
@@ -60,9 +63,11 @@ function onFilterClick() {
 <template>
   <header>
     <div class="flex items-center gap-2 mb-4 2xl:mb-5">
-      <div class="relative w-64">
+      
+      <div v-if="refSearchNav" class="relative w-64">
         <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
-        <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
+        <Input v-model="searchQuery" @input="onInput"
+          type="text" placeholder="Cari .." class="pl-9" />
       </div>
 
       <Popover>
@@ -101,7 +106,7 @@ function onFilterClick() {
       </Button>
 
       <DropdownMenu v-show="props.enableExport">
-        <DropdownMenuTrigger as-child>
+        <DropdownMenuTrigger v-show="props.enableExport" as-child>
           <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
             <Icon name="i-lucide-download" class="h-4 w-4" />
             Ekspor

app/components/pub/my-ui/nav-header/prep.vue

@@ -37,6 +37,10 @@ function btnClick() {
         </div>
       </div>
       <div class="flex items-center">
+        <!-- For components as slots -->
+        <slot />
+
+        <!-- For components passed by props -->
         <div v-if="prep.components">
           <template v-for="cwp in prep.components">
             <component

app/components/pub/my-ui/nav-header/search.vue

@@ -32,7 +32,7 @@ function btnClick() {
         />
       </div>
       <div v-if="prep.addNav" class="m-2 flex items-center">
-        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+        <Button size="default" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
           <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
           {{ prep.addNav.label }}
         </Button>