feat(sep): change to update value from datepicker

app/components/pub/custom-ui/form/datepicker-single.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 // helpers
-import { format } from 'date-fns'
-// icons
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { format, parseISO } from 'date-fns'
 // components
 import { Button } from '~/components/pub/ui/button'
 import { Calendar } from '~/components/pub/ui/calendar'
@@ -19,25 +17,23 @@ const emit = defineEmits<{
 
 const date = ref<Date | any>(undefined)
 
-// Sync prop to local state
-watch(
-  () => props.modelValue,
-  (value) => {
-    if (value instanceof Date) {
-      date.value = value
-    } else if (typeof value === 'string' && value) {
-      date.value = value
-    } else {
-      date.value = undefined
-    }
-  },
-  { immediate: true }
-)
-
 watch(date, (value) => {
   const newValue = format(value, 'yyyy-MM-dd')
   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>
@@ -48,7 +44,7 @@ watch(date, (value) => {
           <div class="flex justify-between items-center w-full">
             <p v-if="date">{{ format(date, 'PPP') }}</p>
             <p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
-            <CalendarIcon class="h-4 w-4 ml-2" />
+            <Icon name="i-lucide-calendar" class="h-5 w-5" />
           </div>
         </Button>
       </PopoverTrigger>