dev: hotfix, moved combobox and datepicker

app/components/pub/my-ui/datepicker/datepicker-single.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// helpers
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+// components
+import { Button } from '~/components/pub/ui/button'
+import Calendar from '~/components/pub/ui/calendar/Calendar.vue'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+
+const props = defineProps<{
+  placeholder?: string
+  modelValue?: Date | string | undefined
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | string | undefined]
+}>()
+
+const date = ref<Date | any>(undefined)
+
+watch(date, (value) => {
+  const newValue = format(value, 'yyyy-MM-dd', { locale: localeID })
+  emit('update:modelValue', newValue)
+})
+
+onMounted(() => {
+  if (props.modelValue) {
+    const value = props.modelValue
+    if (value instanceof Date) {
+      date.value = value
+    } else if (typeof value === 'string' && value) {
+      date.value = parseISO(value)
+    } else {
+      date.value = undefined
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col space-y-2">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
+          <div class="flex justify-between items-center w-full">
+            <p v-if="date">{{ format(date, 'PPP', { locale: localeID }) }}</p>
+            <p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
+            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0">
+        <Calendar v-model="date" mode="single" locale="id" />
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>