From 9d58eae1bfa9309533e607af9baf64691ababb37 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 15:48:48 +0700
Subject: [PATCH] feat(sep): change to update value from datepicker

---
 app/components/app/sep/entry-form.vue         | 34 ++++++++++++-------
 .../pub/custom-ui/form/datepicker-single.vue  | 34 ++++++++-----------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 458c070f..76880554 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -67,8 +67,8 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <div class="mx-auto w-full p-4">
-    <form @submit.prevent="onSubmit" class="grid gap-6">
+  <div class="mx-auto w-full">
+    <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
       <!-- Tanggal SEP & Jalur -->
       <div class="grid gap-4 md:grid-cols-3">
         <div class="flex flex-col gap-2">
@@ -88,8 +88,8 @@ const onSubmit = handleSubmit((values) => {
       <!-- Data Pasien -->
       <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <Button variant="outline" class="rounded-md border-green-600 text-green-600 hover:bg-green-50">
-          <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+        <Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
+          <Icon name="i-lucide-search" class="h-5 w-5" />
           Cari Pasien
         </Button>
       </div>
@@ -130,11 +130,8 @@ const onSubmit = handleSubmit((values) => {
           <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
           <div class="flex gap-2">
             <Input class="flex-1" v-model="noSuratKontrol" />
-            <Button
-              variant="outline"
-              class="rounded-</Button>md h-[40px] border-green-600 text-green-600 hover:bg-green-50"
-            >
-              <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+            <Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
+              <Icon name="i-lucide-search" class="h-5 w-5" />
               Cari Data
             </Button>
           </div>
@@ -247,10 +244,21 @@ const onSubmit = handleSubmit((values) => {
       </div>
 
       <!-- Actions -->
-      <div class="mt-6 flex justify-end gap-4">
-        <Button type="button" variant="outline">Riwayat SEP</Button>
-        <Button type="button" variant="outline">Preview</Button>
-        <Button type="submit">Simpan</Button>
+      <div class="mt-6 flex justify-end gap-2">
+        <Button type="button" variant="ghost" class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50">
+          <Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
+        >
+          <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
+        </Button>
+        <Button type="submit" class="h-[40px] text-white min-w-[120px]">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
       </div>
     </form>
   </div>
diff --git a/app/components/pub/custom-ui/form/datepicker-single.vue b/app/components/pub/custom-ui/form/datepicker-single.vue
index d866bbdf..7e628404 100644
--- a/app/components/pub/custom-ui/form/datepicker-single.vue
+++ b/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>