Feat: UI Laporan Operasi

app/components/pub/my-ui/form/view/detail-row.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-defineProps<{
+import { cn } from '~/lib/utils';
+
+const props = defineProps<{
   label: string
+  class?: string
+  labelClass?: string
 }>()
 </script>
 
 <template>
-  <div class="flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3">
+  <div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
     <!-- Label -->
-    <span class="text-md font-normal text-muted-foreground">
+    <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
       {{ label }}
     </span>
 

app/components/pub/my-ui/modal/dialog.vue

@@ -2,8 +2,6 @@
 import { Dialog } from '~/components/pub/ui/dialog'
 import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
 import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
-import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
-import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
 
 interface DialogProps {
   title: string

app/components/pub/my-ui/nav-header/filter.vue

@@ -50,8 +50,11 @@ const value = ref({
   end: todayCalendar,
 }) as Ref<DateRange>
 
+
+function onInput(event: Event) {
+  props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
+}
 function onFilterClick() {
-  console.log('Search:', searchQuery.value)
   console.log('Date Range:', dateRange.value)
   props.refSearchNav?.onClick()
 }
@@ -60,9 +63,11 @@ function onFilterClick() {
 <template>
   <header>
     <div class="flex items-center gap-2 mb-4 2xl:mb-5">
-      <div class="relative w-64">
+      
+      <div v-if="refSearchNav" 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" />
+        <Input v-model="searchQuery" @input="onInput"
+          type="text" placeholder="Cari .." class="pl-9" />
       </div>
 
       <Popover>