feat(sep): modify form entry with calendar select

app/components/app/sep/entry-form.vue

@@ -10,6 +10,7 @@ import { Label } from '~/components/pub/ui/label'
 import { Select } from '~/components/pub/ui/select'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
+import DatepickerSingle from '~/components/pub/custom-ui/form/datepicker-single.vue'
 
 const items = [
   { value: 'item-1', label: 'Item 1' },
@@ -72,7 +73,7 @@ const onSubmit = handleSubmit((values) => {
       <div class="grid gap-4 md:grid-cols-3">
         <div class="flex flex-col gap-2">
           <Label for="tanggalSep">Tanggal SEP</Label>
-          <Input id="tanggalSep" type="date" v-model="tanggalSep" />
+          <DatepickerSingle v-model="tanggalSep" />
           <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
         </div>
         <div class="flex flex-col gap-2">
@@ -87,7 +88,7 @@ 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-</Button>md border-green-600 text-green-600 hover:bg-green-50">
+        <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" />
           Cari Pasien
         </Button>
@@ -144,15 +145,30 @@ const onSubmit = handleSubmit((values) => {
           <Input v-model="tglSuratKontrol" />
           <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
         </div>
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-row items-center gap-2">
-          <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
+          <div class="flex-1">
-          <Select
+            <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
-            icon-name="i-lucide-chevron-down"
+            <Select
-            v-model="klinikTujuan"
+              icon-name="i-lucide-chevron-down"
-            :items="items"
+              v-model="klinikTujuan"
-            placeholder="Pilih klinik"
+              :items="items"
-          ></Select>
+              placeholder="Pilih klinik"
-          <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
+            ></Select>
+            <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
+          </div>
+          <div>
+            <Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
+            <RadioGroup v-model="cob" class="flex items-center gap-2">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem value="Ya" id="cob-ya" />
+                <Label for="cob-ya">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem value="Tidak" id="cob-tidak" />
+                <Label for="cob-tidak">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </div>
         </div>
         <div class="flex flex-col gap-2">
           <Label>DPJP<span class="text-red-500">*</span></Label>
@@ -169,7 +185,7 @@ const onSubmit = handleSubmit((values) => {
       <!-- Catatan -->
       <div>
         <Label>Catatan</Label>
-        <Textarea placeholder="Masukkan catatan opsional" />
+        <Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
       </div>
 
       <div class="flex items-center gap-4">

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// helpers
+import { format } from 'date-fns'
+// icons
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+// components
+import { Button } from '~/components/pub/ui/button'
+import { Calendar } from '~/components/pub/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+
+const date = ref<Date | undefined>(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') }}</p>
+            <p v-else class="text-sm text-black text-opacity-80">Tanggal</p>
+            <CalendarIcon class="h-4 w-4 ml-2" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0">
+        <Calendar mode="single" />
+      </PopoverContent>
+    </Popover>
+    <p v-if="date" class="text-sm text-black text-opacity-80">{{ format(date, 'PPP') }}</p>
+  </div>
+</template>

package.json

@@ -20,6 +20,7 @@
     "@radix-icons/vue": "^1.0.0",
     "@unovis/ts": "^1.5.1",
     "@unovis/vue": "^1.5.1",
+    "date-fns": "^4.1.0",
     "embla-carousel": "^8.5.2",
     "embla-carousel-vue": "^8.5.2",
     "h3": "^1.15.4",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@unovis/vue':
     specifier: ^1.5.1
     version: 1.5.2(@unovis/[email protected])([email protected])
+  date-fns:
+    specifier: ^4.1.0
+    version: 4.1.0
   embla-carousel:
     specifier: ^8.5.2
     version: 8.6.0
@@ -6124,6 +6127,10 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-xzWNQ6jk/+NtdfLyXEipbX55dmDSeteLFt/ayF+wZUU5bzKgmrDOxmInUTbyVRp46YwnJdkDA1KhB7WIXFofJw==}
     peerDependencies: