fix: resolve conflict

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type TabItem } from './type'
+
+const props = defineProps<{
+  initialActiveTab: string
+  data: TabItem[]
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+function changeTab(value: string) {
+  activeTab.value = value;
+  emit('changeTab', value);
+}
+</script>
+
+<template>
+  <!-- Tabs -->
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+    <Button
+      v-for="tab in data"
+      :key="tab.value"
+      :data-active="activeTab === tab.value"
+      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
+      @click="changeTab(tab.value)"
+    >
+      {{ tab.label }}
+    </Button>
+  </div>
+
+  <!-- Active Tab Content -->
+  <div class="mt-4 rounded-md border p-4">
+    <component
+      v-if="data.find((t) => t.value === activeTab)?.component"
+      :is="data.find((t) => t.value === activeTab)?.component"
+      :label="data.find((t) => t.value === activeTab)?.label"
+      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+export interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}

app/components/pub/my-ui/confirmation/README.md

@@ -133,5 +133,5 @@ async function handleConfirmAction(record, action) {
 ## Styling
 
 Komponen menggunakan Tailwind CSS dan shadcn/ui components. Pastikan dependencies berikut tersedia:
-- `~/components/pub/custom-ui/modal/dialog.vue`
+- `~/components/pub/my-ui/modal/dialog.vue`
 - `~/components/pub/ui/button`

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { Button } from '~/components/pub/ui/button'
 
 interface ConfirmationProps {

app/components/pub/my-ui/confirmation/record-confirmation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Confirmation from '~/components/pub/custom-ui/confirmation/confirmation.vue'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 
 interface RecordData {
   id: number | string

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DataTableLoader } from './type'
-import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
+import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+
+</script>
+
+<template>
+  <Button
+    @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">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+    </svg>
+    {{ props.label }}
+  </Button>
+</template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+type ClickType = 'cancel' | 'draft' | 'submit' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+type ClickType = 'cancel' | 'draft' | 'delete' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -20,7 +20,7 @@ function onClick(type: ClickType) {
       <Icon name="i-lucide-file" class="me-2" />
       Edit
     </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+    <Button class="bg-red-500" type="button" @click="onClick('delete')">
       <Icon name="i-lucide-trash" class="me-2 align-middle" />
       Delete
     </Button>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+type ClickType = 'cancel' | 'draft' | 'delete'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -20,7 +20,7 @@ function onClick(type: ClickType) {
       <Icon name="i-lucide-file" class="me-2" />
       Edit
     </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+    <Button class="bg-red-500" type="button" @click="onClick('delete')">
       <Icon name="i-lucide-trash" class="me-2 align-middle" />
       Delete
     </Button>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+type ClickType = 'cancel' | 'draft' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void

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

@@ -5,7 +5,7 @@ import type { Ref } from 'vue'
 import type { DateRange } from 'radix-vue'
 import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { cn } from '~/lib/utils'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
   prep: HeaderPrep

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { refDebounced } from '@vueuse/core'
 
 const props = defineProps<{

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
   prep: HeaderPrep

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 const props = defineProps<{
   prep: HeaderPrep

app/components/pub/my-ui/pagination/pagination-view.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import Pagination from './pagination.vue'
 
 const props = defineProps<{

app/components/pub/ui/textarea/Textarea.vue

@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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)" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-slate-400 bg-white dark:bg-slate-950 px-3 py-2 text-sm ring-offset-background 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)" />
 </template>