Merge remote-tracking branch 'origin/dev' into feat/patient

app/components/app/patient/entry-form.vue

@@ -1,9 +1,37 @@
-<script setup lang="ts"></script>
+<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>
-  <div>entry form</div>
+  <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>
-    <PubNavFooterCs />
-  </div>
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Nama</Label>
+            <Field name="name">
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Nomor RM</Label>
+            <Field name="name">
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
 </template>

app/components/app/patient/list-cfg.ts

@@ -0,0 +1,118 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/nav/types'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/nav/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/patient/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg.ts'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubNavDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/flow/patient/list.vue

@@ -3,7 +3,10 @@ import type { Summary } from '~/components/pub/base/summary-card.type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 
+const data = ref([])
+
 const refSearchNav: RefSearchNav = {
+
   onClick: () => {
     // open filter modal
   },
@@ -20,6 +23,9 @@ const isLoading = reactive({
   summary: false,
   table: false,
 })
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
   title: 'Pasien',
@@ -67,7 +73,7 @@ async function getPatientSummary() {
   try {
     isLoading.summary = true
 
-    await new Promise((resolve) => setTimeout(resolve, 1500))
+    await new Promise((resolve) => setTimeout(resolve, 500))
   } catch (error) {
     console.error('Error fetching patient summary:', error)
     // Keep default/existing data on error
@@ -77,20 +83,26 @@ async function getPatientSummary() {
 }
 
 async function getPatientList() {
-  // const response = await xfetch('/api/v1/patient')
-  // console.log('data patient', response)
+  const resp = await xfetch('/api/v1/patient')
+  console.log('data patient', resp)
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
 }
 
 onMounted(() => {
   getPatientSummary()
   getPatientList()
 })
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
 </script>
 
 <template>
   <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-
-  <main class="flex flex-1 flex-col gap-4 md:gap-8">
+  <div class="flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="isLoading.summary">
         <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton />
@@ -99,5 +111,6 @@ onMounted(() => {
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </template>
     </div>
-  </main>
+    <AppPatientList :data="data" />
+  </div>
 </template>

app/components/layout/Header.vue

@@ -37,7 +37,7 @@ watch(
     if (val) {
       links.value = setLinks()
     }
-  }
+  },
 )
 </script>
 

app/components/layout/SidebarNavFooter.vue

@@ -22,73 +22,75 @@ const showModalTheme = ref(false)
 </script>
 
 <template>
-  <SidebarMenu>
-    <SidebarMenuItem>
-      <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-          <SidebarMenuButton
-            size="lg"
-            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-          >
-            <Avatar class="h-8 w-8 rounded-lg">
-              <AvatarImage src="" :alt="userStore?.user_name" />
-              <AvatarFallback class="rounded-lg">
-                {{
-                  userStore?.user_name
-                    ?.split(' ')
-                    .map((n) => n[0])
-                    .join('')
-                }}
-              </AvatarFallback>
-            </Avatar>
-            <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">{{ userStore?.user_name }}</span>
-              <span class="truncate text-xs">{{ userStore?.user_email }}</span>
-            </div>
-            <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
-          </SidebarMenuButton>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-          :side="isMobile ? 'bottom' : 'right'"
-          align="end"
-        >
-          <DropdownMenuLabel class="p-0 font-normal">
-            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+  <ClientOnly>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuButton
+              size="lg"
+              class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
               <Avatar class="h-8 w-8 rounded-lg">
-                <AvatarImage src="" :alt="userStore?.user_name" />
+                <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
                 <AvatarFallback class="rounded-lg">
                   {{
                     userStore?.user_name
                       ?.split(' ')
                       .map((n) => n[0])
-                      .join('')
+                      .join('') || ''
                   }}
                 </AvatarFallback>
               </Avatar>
               <div class="grid flex-1 text-left text-sm leading-tight">
-                <span class="truncate font-semibold">{{ userStore?.user_name }}</span>
-                <span class="truncate text-xs">{{ userStore?.user_email }}</span>
+                <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
+                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
               </div>
-            </div>
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            <DropdownMenuItem @click="showModalTheme = true">
-              <Icon name="i-lucide-user" />
-              Profile
+              <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            align="end"
+          >
+            <DropdownMenuLabel class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar class="h-8 w-8 rounded-lg">
+                  <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                  <AvatarFallback class="rounded-lg">
+                    {{
+                      userStore?.user_name
+                        ?.split(' ')
+                        .map((n) => n[0])
+                        .join('') || ''
+                    }}
+                  </AvatarFallback>
+                </Avatar>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
+                  <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem @click="showModalTheme = true">
+                <Icon name="i-lucide-user" />
+                Profile
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem @click="handleLogout">
+              <Icon name="i-lucide-log-out" />
+              Log out
             </DropdownMenuItem>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem @click="handleLogout">
-            <Icon name="i-lucide-log-out" />
-            Log out
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </SidebarMenuItem>
-  </SidebarMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </ClientOnly>
 </template>
 
 <style scoped></style>

app/components/layout/SidebarNavGroup.vue

@@ -9,7 +9,7 @@ withDefaults(
   }>(),
   {
     size: 'default',
-  }
+  },
 )
 
 const { setOpenMobile } = useSidebar()

app/components/layout/SidebarNavLink.vue

@@ -22,6 +22,7 @@ const { setOpenMobile } = useSidebar()
         <NuxtLink
           :to="item.link"
           class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200"
+          active-class="bg-primary text-white"
           @click="setOpenMobile(false)"
         >
           <Icon :name="item.icon || ''" mode="svg" />

app/components/pub/base/error.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+defineProps<{
+  statusCode: number
+}>()
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="h-svh">
+    <div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
+      <template v-if="statusCode === 403">
+        <h1 class="text-[7rem] font-bold leading-tight">403</h1>
+        <span class="font-medium">Access Forbidden</span>
+        <p class="text-muted-foreground text-center">
+          You don't have necessary permission <br />
+          to access this resource.
+        </p>
+      </template>
+      <template v-else-if="statusCode === 404">
+        <h1 class="text-[7rem] font-bold leading-tight">404</h1>
+        <span class="font-medium">Page Not Found</span>
+        <p class="text-muted-foreground text-center">
+          The page you are looking for <br />
+          doesn't exist.
+        </p>
+      </template>
+      <template v-else-if="statusCode === 401">
+        <h1 class="text-[7rem] font-bold leading-tight">401</h1>
+        <span class="font-medium">Unauthorized Access</span>
+        <p class="text-muted-foreground text-center">
+          Please log in with the appropriate credentials <br />
+          to access this resource.
+        </p>
+      </template>
+      <template v-else>
+        <h1 class="text-[7rem] font-bold leading-tight">500</h1>
+        <span class="font-medium">Internal Server Error</span>
+        <p class="text-muted-foreground text-center">
+          Something went wrong on our end. <br />
+          Please try again later.
+        </p>
+      </template>
+      <div class="mt-6 flex gap-4">
+        <Button variant="outline" @click="router.back()"> Kembali </Button>
+        <Button @click="router.push('/')"> Kembali Ke Dashboard </Button>
+      </div>
+    </div>
+  </div>
+</template>

app/components/pub/form/block.vue

@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="`mb-5 flex-wrap md:flex ${classValExt || ''}`">
+  <div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
     <slot />
   </div>
 </template>

app/components/pub/form/field-group.vue

@@ -34,7 +34,15 @@ const classVal = computed(() => {
 </script>
 
 <template>
-  <div :class="classVal">
+  <div
+    :class="[
+      column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
+      density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
+      side !== 'break' ? 'md:flex' : '',
+      position === 'dynamic' ? 'ps-4' : '',
+      props.class,
+    ]"
+  >
     <slot />
   </div>
 </template>

app/components/pub/form/label.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    size?: 'default' | 'narrow' | 'wide'
+    height?: 'default' | 'compact'
+    position?: 'default' | 'dynamic'
+    class?: string
+  }>(),
+  {
+    size: 'default',
+    height: 'default',
+    position: 'default',
+    class: '',
+  },
+)
+
+const classVal = computed(() => {
+  let val = ''
+
+  if (props.size === 'narrow') val += 'size-narrow '
+  else if (props.size === 'wide') val += 'size-wide '
+  else val += 'size-default '
+
+  if (props.height === 'compact') val += 'height-compact '
+  else val += 'height-default '
+
+  if (props.position === 'dynamic') val += 'position-dynamic '
+  else val += 'position-default '
+
+  return (val + (props.class || '')).trim()
+})
+</script>
+
+<template>
+  <div class="label" :class="classVal">
+    <label>
+      <slot />
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.label {
+  @apply block flex-shrink-0 shrink-0;
+}
+
+.size-default {
+  @apply w-28 2xl:w-36;
+}
+.size-narrow {
+  @apply w-24 2xl:w-28;
+}
+.size-wide {
+  @apply w-44 2xl:w-48;
+}
+
+.height-default {
+  @apply pt-2 2xl:pt-2.5;
+}
+
+.height-compact {
+  line-height: 14pt;
+}
+
+.position-default {
+  @apply pe-2 text-start;
+}
+
+.position-dynamic > * {
+  @apply block pe-2.5 md:text-end;
+}
+</style>

app/components/pub/nav/data-table.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/pub/ui/table'
+
+defineProps<{
+  rows: unknown[]
+  cols: object
+  header: object[]
+  keys: string[]
+  funcParsed: object
+  funcHtml: object
+  funcComponent: object
+}>()
+</script>
+
+<template>
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead
+          v-for="(h, idx) in header[0]"
+          :key="`head-${idx}`"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
+        >
+          {{ h.label }}
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody>
+      <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
+          <!-- If funcComponent has a renderer -->
+          <component
+            :is="funcComponent[key](row, rowIndex).component"
+            v-if="funcComponent[key]"
+            v-bind="funcComponent[key](row, rowIndex)"
+          />
+          <!-- If funcParsed or funcHtml returns a value -->
+          <template v-else>
+            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
+          </template>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>

app/components/pub/nav/dropdown-action-du.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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')!
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showDetail'
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showEdit'
+  recItem.value = props.rec
+}
+
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+        >
+          <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 bg-white" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            v-slot="{ active }"
+            class="hover:bg-gray-100"
+            @click="item.onClick"
+          >
+            <Icon :name="item.icon" />
+            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/pub/nav/dropdown-action-ducd.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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')!
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showDetail'
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showEdit'
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showConfirmDel'
+  recItem.value = props.rec
+}
+
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Batal',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-x',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+        >
+          <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 bg-white" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            v-slot="{ active }"
+            class="hover:bg-gray-100"
+            @click="item.onClick"
+          >
+            <Icon :name="item.icon" />
+            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/pub/nav/dropdown-action-dud.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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')!
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showDetail'
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showEdit'
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showConfirmDel'
+  recItem.value = props.rec
+}
+
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+        >
+          <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 bg-white" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            v-slot="{ active }"
+            class="hover:bg-gray-100"
+            @click="item.onClick"
+          >
+            <Icon :name="item.icon" />
+            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/pub/nav/dropdown-action-ud.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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')!
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showEdit'
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showConfirmDel'
+  recItem.value = props.rec
+}
+
+const linkItems: LinkItem[] = [
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+        >
+          <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 bg-white" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            v-slot="{ active }"
+            class="hover:bg-gray-100"
+            @click="item.onClick"
+          >
+            <Icon :name="item.icon" />
+            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/pub/nav/footer/cs.vue

@@ -1,12 +1,24 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+type ClickType = 'cancel' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
 
 <template>
-  <div class="flex justify-between">
-    <div>
-      <Button variant="outline" size="sm">
-        <Icon name="i-lucide-pencil" class="mr-1" />
-        Edit
-      </Button>
-    </div>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Kembali
+    </Button>
+    <Button class="bg-primary" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Selesai
+    </Button>
   </div>
 </template>

app/components/pub/nav/footer/csd.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Kembali
+    </Button>
+    <Button class="bg-orange-500" variant="outline" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Draf
+    </Button>
+    <Button class="bg-primary" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Selesai
+    </Button>
+  </div>
+</template>

app/components/pub/nav/header/prep.vue

@@ -32,7 +32,7 @@ function btnClick() {
           <Input
             type="text"
             placeholder="Search"
-            class="w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 sm:text-sm"
+            class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
             @click="emitSearchNavClick"
             @input="onInput"
           />

app/components/pub/nav/types.ts

@@ -82,3 +82,12 @@ export interface KeyNames {
   key: string
   label: string
 }
+
+export interface LinkItem {
+  label: string
+  icon?: string
+  href?: string // to cover the needs of stating full external origins full url
+  action?: string // for local paths
+  onClick?: (event: Event) => void
+  headerStatus?: boolean
+}

app/components/pub/ui/input/Input.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   defaultValue?: string | number
@@ -20,5 +20,13 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+  <input
+    v-model="modelValue"
+    :class="
+      cn(
+        'border-input ring-offset-background placeholder:text-muted-foreground flex  h-10 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  />
 </template>