Squashed commit of the following:

commit bcfb4c1456 Merge: 1cbde57 975c87d Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com> Date: Mon Nov 17 11:15:14 2025 +0700 Merge pull request #147 from dikstub-rssa/feat/surat-kontrol-135 Feat: Integration Rehab Medik - Surat Kontrol commit 975c87d99a Merge: f582090 1cbde57 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Mon Nov 17 10:58:10 2025 +0700 Merge branch 'dev' into feat/surat-kontrol-135 commit f582090d18 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Thu Nov 13 11:56:21 2025 +0700 Fix: Refactor surat kontrol commit a14c4a5d3c Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Tue Nov 11 14:21:58 2025 +0700 Fix: Refactor Surat Kontrol CRUD {id} to {code} commit 24313adef6 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Fri Nov 7 10:35:46 2025 +0700 Fix: debug back btn in add, edit, detail content page commit 59b44b5729 Merge: 99a61a0 db15ec9 Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com> Date: Fri Nov 7 09:11:10 2025 +0700 Merge branch 'dev' into feat/surat-kontrol-135 commit 99a61a0bf2 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Thu Nov 6 08:06:01 2025 +0700 Feat: add right & bottom label in input base component commit db48919325 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Wed Nov 5 13:53:43 2025 +0700 Feat: add banner in List if requirement not met commit bd57250f7e Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Wed Nov 5 13:26:48 2025 +0700 Fix: refactor getDetail url param commit a361922e32 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Wed Nov 5 13:19:07 2025 +0700 Feat: Add & integrate add, edit, detail page commit 331f4a6b20 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Tue Nov 4 16:56:08 2025 +0700 Feat: Integrate Control Letter commit 2275f4dc99 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Mon Oct 27 14:01:58 2025 +0700 Feat: add UI BPJS > Surat Kontrol commit 89e0e7a2c8 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Mon Oct 27 10:21:59 2025 +0700 Feat: add UI CRUD Surat Kontrol at Rehab Medik > kunjungan > Proses
2025-11-18 12:58:58 +07:00
parent dc0bcc3606
commit c98018bb4e
47 changed files with 2696 additions and 31 deletions
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils';
+
+const props = withDefaults(defineProps<{
+  text?: string
+  description?: string | string[]
+  class?: string
+}>(), {
+
+})
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-4 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
+        props.class
+    )">
+        <Icon name="i-lucide-triangle-alert" class="h-12 w-12 align-middle transition-colors" />
+        <div class="">
+            <p class="font-medium text-base">{{text}}</p>
+            <ul class="list-disc list-inside">
+                <li v-for="(desc, index) in (Array.isArray(description) ? description : [description])" :key="index">
+                    {{ desc }}
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+import { activeStatusCodes } from '~/lib/constants';
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusText = computed(() => {
+  const code: keyof typeof activeStatusCodes = props.rec.status_code === 1 ? `active` : `inactive`
+  return activeStatusCodes[code]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
@@ -71,7 +71,7 @@ function handleCancel() {
  <Dialog v-model:open="isOpen" :title="title" :size="size">
    <div class="space-y-4">
      <!-- Icon dan pesan -->
-      <div class="flex items-start gap-3">
+      <div class="flex items-center gap-3">
        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
        <div class="flex-1">
          <p class="text-sm text-muted-foreground leading-relaxed">
@@ -42,6 +42,12 @@ export interface RefSearchNav {
  onClear: () => void
 }

+export interface RefExportNav {
+  onExportPdf?: () => void
+  onExportCsv?: () => void
+  onExportExcel?: () => void
+}
+
 // prepared header for relatively common usage
 export interface HeaderPrep {
  title?: string
@@ -19,6 +19,8 @@ const props = defineProps<{
  maxLength?: number
  isRequired?: boolean
  isDisabled?: boolean
+  rightLabel?: string
+  bottomLabel?: string
 }>()

 function handleInput(event: Event) {
@@ -61,7 +63,7 @@ function handleInput(event: Event) {
        v-slot="{ componentField }"
        :name="fieldName"
      >
-        <FormItem>
+        <FormItem :class="`relative`">
          <FormControl>
            <Input
              :disabled="isDisabled"
@@ -76,10 +78,12 @@ function handleInput(event: Event) {
              spellcheck="false"
              @input="handleInput"
            />
+            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </DE.Field>
+    <p v-show="bottomLabel" class="text-gray-400">{{ bottomLabel }}</p>    
  </DE.Cell>
 </template>
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+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, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
+}>()
+
+// function emitSearchNavClick() {
+//   props.refSearchNav?.onClick()
+// }
+//
+// function onInput(event: Event) {
+//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+// }
+//
+// function btnClick() {
+//   props.prep?.addNav?.onClick?.()
+// }
+
+const searchQuery = ref('')
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+
+function onFilterClick() {
+  console.log('Search:', searchQuery.value)
+  console.log('Date Range:', dateRange.value)
+  props.refSearchNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
+      
+      <Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
+        <FilterIcon class="mr-2 size-4" />
+        Filter
+      </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
+    </div>
+  </header>
+</template>
@@ -5,11 +5,13 @@ 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/my-ui/data/types'
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'

 const props = defineProps<{
  prep: HeaderPrep
  refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
 }>()

 // function emitSearchNavClick() {
@@ -57,7 +59,7 @@ function onFilterClick() {

 <template>
  <header>
-    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
+    <div class="flex items-center gap-2 mb-4 2xl:mb-5">
      <div class="relative w-64">
        <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
        <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
@@ -97,6 +99,30 @@ function onFilterClick() {
        <FilterIcon class="mr-2 size-4" />
        Filter
      </Button>
+
+      <DropdownMenu v-show="props.enableExport">
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
+            <Icon name="i-lucide-download" class="h-4 w-4" />
+            Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
+                            @click="props.refExportNav?.onExportPdf">
+                            Ekspor PDF
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
+                            @click="props.refExportNav?.onExportCsv">
+                            Ekspor CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
+                            @click="props.refExportNav?.onExportExcel">
+                            Ekspor Excel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
    </div>
  </header>
 </template>