Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/satusehat

app/components/pub/base/data-table/data-table.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
-
+import type { DataTableLoader } from './type'
 defineProps<{
   rows: unknown[]
   cols: any[]
@@ -11,7 +11,7 @@ defineProps<{
   funcComponent: Record<string, (row: any, idx: number) => any>
 }>()
 
-const pullData = inject('pull_data') as any
+const loader = inject('table_data_loader') as DataTableLoader
 </script>
 
 <template>
@@ -25,7 +25,7 @@ const pullData = inject('pull_data') as any
       </TableRow>
     </TableHeader>
 
-    <TableBody v-if="pullData.dataListLoading">
+    <TableBody v-if="loader.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in 5" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">

app/components/pub/base/data-table/type.ts

@@ -0,0 +1,4 @@
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}

app/components/pub/base/service-status/service-status.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ServiceStatus } from './service-status.type'
+import type { ServiceStatus } from './type'
 import { Loader, Loader2 } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 

app/components/pub/base/summary-card/summary-card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Summary } from './summary-card.type'
+import type { Summary } from './type'
 import { ChevronDown, ChevronUp } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 

app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Draf
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Submit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>

app/components/pub/custom-ui/nav-footer/ba-dr-su.vue

@@ -14,15 +14,15 @@ function onClick(type: ClickType) {
   <div class="m-2 flex gap-2 px-2">
     <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
       <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Kembali
+      Back
     </Button>
     <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
       <Icon name="i-lucide-file" class="me-2" />
-      Draf
+      Draft
     </Button>
     <Button class="bg-primary" type="button" @click="onClick('submit')">
       <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Selesai
+      Submit
     </Button>
   </div>
 </template>

app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>

app/components/pub/custom-ui/nav-footer/ba-ed-de.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+  </div>
+</template>

app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>

app/components/pub/custom-ui/nav-footer/ba-ed.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2 align-middle" />
+      Edit
+    </Button>
+  </div>
+</template>

app/components/pub/custom-ui/nav-footer/ba-su.vue

@@ -14,11 +14,11 @@ function onClick(type: ClickType) {
   <div class="m-2 flex gap-2 px-2">
     <Button class="bg-gray-400" @click="onClick('cancel')">
       <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Kembali
+      Back
     </Button>
     <Button class="bg-primary" @click="onClick('submit')">
       <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Selesai
+      Submit
     </Button>
   </div>
 </template>

app/components/pub/custom-ui/nav-header/header.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg font-bold text-gray-900">
+        <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+        {{ prep.title }}
+      </div>
+    </div>
+  </header>
+</template>

app/components/pub/custom-ui/nav-header/search.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep.addNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg text-gray-900">
+        <Input
+          type="text"
+          placeholder="Search"
+          class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+          @click="emitSearchNavClick"
+          @input="onInput"
+        />
+      </div>
+      <div v-if="prep.addNav" class="m-2 flex items-center">
+        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+          <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+          {{ prep.addNav.label }}
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>

app/components/pub/nav/data-table.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
-
-defineProps<{
-  rows: unknown[]
-  cols: object
-  header: object[]
-  keys: string[]
-  funcParsed: object
-  funcHtml: object
-  funcComponent: object
-}>()
-</script>
-
-<template>
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead
-          v-for="(h, idx) in header[0]"
-          :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
-        >
-          {{ h.label }}
-        </TableHead>
-      </TableRow>
-    </TableHeader>
-
-    <TableBody>
-      <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
-          <!-- If funcComponent has a renderer -->
-          <component
-            :is="funcComponent[key](row, rowIndex).component"
-            v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
-          />
-          <!-- If funcParsed or funcHtml returns a value -->
-          <template v-else>
-            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
-          </template>
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</template>