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

2025-08-25 14:58:45 +07:00
parent 31084be5ce a4d8086b6c
commit de7a833ddc
44 changed files with 307 additions and 113 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,96 @@
+// import type { ComponentType } from '@unovis/ts'
+import type { Component } from 'vue'
+
+export interface ListItemDto {
+  id: number
+  name: string
+  code: string
+}
+
+export type ComponentType = Component
+
+export interface RecComponent {
+  idx?: number
+  rec: object
+  props?: any
+  component: ComponentType
+}
+
+export interface Col {
+  span?: number
+  classVal?: string
+  style?: string
+  width?: number // specific for width
+  widthUnit?: string // specific for width
+}
+
+export interface Th {
+  label: string
+  colSpan?: number
+  rowSpan?: number
+  classVal?: string
+  childClassVal?: string
+  style?: string
+  childStyle?: string
+  hideOnSm?: boolean
+}
+
+export interface ButtonNav {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'negative' | 'ghost' | 'link'
+  classVal?: string
+  classValExt?: string
+  icon?: string
+  label: string
+  onClick?: () => void
+}
+
+export interface QuickSearchNav {
+  inputClass?: string
+  inputPlaceHolder?: string
+  btnClass?: string
+  btnIcon?: string
+  btnLabel?: string
+  mainField?: string
+  searchParams: object
+  onSubmit?: (searchParams: object) => void
+}
+
+export interface RefSearchNav {
+  onInput: (val: string) => void
+  onClick: () => void
+  onClear: () => void
+}
+
+// prepared header for relatively common usage
+export interface HeaderPrep {
+  title?: string
+  icon?: string
+  refSearchNav?: RefSearchNav
+  quickSearchNav?: QuickSearchNav
+  filterNav?: ButtonNav
+  addNav?: ButtonNav
+  printNav?: ButtonNav
+}
+
+export interface KeyLabel {
+  key: string
+  label: string
+}
+export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
+export type FuncComponent = (rec: unknown, idx: number) => RecComponent
+export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
+export type RecStrFuncComponent = Record<string, FuncComponent>
+
+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
+}
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  classValExt?: string
+}>()
+</script>
+
+<template>
+  <div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    column?: 1 | 2 | 3
+    density?: 'default' | 'dense'
+    side?: 'default' | 'break'
+    position?: 'default' | 'dynamic'
+    class?: string
+  }>(),
+  {
+    column: 1,
+    density: 'default',
+    side: 'default',
+    position: 'default',
+    class: '',
+  },
+)
+
+const wrapperClass = computed(() => [
+  'w-full flex-shrink-0',
+
+  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
+  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
+  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
+  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
+  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
+
+  props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
+
+  props.side !== 'break' ? 'md:flex' : '',
+
+  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
+
+  props.class,
+])
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+export interface XError {
+  message: string
+  [key: string]: any
+}
+
+defineProps<{
+  id?: string
+  errors?: Record<string, XError>
+}>()
+</script>
+
+<template>
+  <div class="grow">
+    <slot />
+    <div v-if="id && errors?.[id]" class="field-error-info">
+      {{ errors[id].message }}
+    </div>
+  </div>
+</template>
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    size?: 'default' | 'narrow' | 'wide'
+    height?: 'default' | 'compact'
+    position?: 'default' | 'dynamic'
+  }>(),
+  {
+    size: 'default',
+    height: 'default',
+    position: 'default',
+  },
+)
+
+const sizeMap = {
+  default: 'w-28 2xl:w-36',
+  narrow: 'w-24 2xl:w-28',
+  wide: 'w-44 2xl:w-48',
+} as const
+
+const heightMap = {
+  default: 'pt-2 2xl:pt-2.5',
+  compact: 'leading-[14pt]',
+} as const
+
+const positionWrapMap = {
+  default: 'pe-2 text-start',
+  dynamic: 'md:text-end',
+} as const
+
+const positionChildMap = {
+  default: '',
+  dynamic: 'block pe-2.5',
+} as const
+
+const wrapperClass = computed(() => [
+  'block shrink-0',
+  sizeMap[props.size],
+  heightMap[props.height],
+  positionWrapMap[props.position],
+])
+
+const labelClass = computed(() => positionChildMap[props.position])
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <label :class="labelClass">
+      <slot />
+    </label>
+  </div>
+</template>
@@ -0,0 +1,32 @@
+<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" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Draf
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Submit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
@@ -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" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Draft
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Submit
+    </Button>
+  </div>
+</template>
@@ -0,0 +1,32 @@
+<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" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
@@ -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" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+  </div>
+</template>
@@ -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" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
@@ -0,0 +1,24 @@
+<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" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2 align-middle" />
+      Edit
+    </Button>
+  </div>
+</template>
@@ -0,0 +1,24 @@
+<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="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" />
+      Back
+    </Button>
+    <Button class="bg-primary" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Submit
+    </Button>
+  </div>
+</template>
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg font-bold text-gray-900">
+        <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+        {{ prep.title }}
+      </div>
+    </div>
+  </header>
+</template>
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav?: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav?.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep?.addNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <div class="ml-3 text-lg font-bold text-gray-900">
+          <Icon :name="prep.icon" class="mr-2 size-4 md:size-6 align-middle" />
+          {{ prep.title }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div v-if="props.refSearchNav"
+        class="ml-3 text-lg text-gray-900">
+          <Input
+            type="text"
+            placeholder="Search"
+            class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+            @click="emitSearchNavClick"
+            @input="onInput"
+          />
+        </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">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+            {{ prep.addNav.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep.addNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg text-gray-900">
+        <Input
+          type="text"
+          placeholder="Search"
+          class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+          @click="emitSearchNavClick"
+          @input="onInput"
+        />
+      </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">
+          <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+          {{ prep.addNav.label }}
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>