⚠️ refactor (components): restructure components to custom-ui

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Block from '~/components/pub/form/block.vue'
-import FieldGroup from '~/components/pub/form/field-group.vue'
-import Field from '~/components/pub/form/field.vue'
-import Label from '~/components/pub/form/label.vue'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
 
 const props = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue', 'event'])
@@ -110,7 +111,7 @@ function onClick(type: string) {
       </div>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCsd @click="onClick" />
+      <Action @click="onClick" />
     </div>
   </form>
 </template>

app/components/app/doctor/list-cfg.ts

@@ -1,9 +1,16 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
 const doctorStatus = {
   0: 'Tidak Aktif',

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Block from '~/components/pub/form/block.vue'
-import FieldGroup from '~/components/pub/form/field-group.vue'
-import Field from '~/components/pub/form/field.vue'
-import Label from '~/components/pub/form/label.vue'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
 </script>
 
 <template>
@@ -41,7 +42,7 @@ import Label from '~/components/pub/form/label.vue'
       </Block>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCsd />
+      <Action />
     </div>
   </form>
 </template>

app/components/app/patient/list-cfg.ts

@@ -1,9 +1,16 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
 export const cols: Col[] = [
   {},

app/components/flow/doctor/list.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
 
@@ -47,6 +48,6 @@ provide('rec_item', recItem)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
   <AppDoctorList :data="data" />
 </template>

app/components/flow/patient/list.vue

@@ -2,6 +2,8 @@
 import type { Summary } from '~/components/pub/base/summary-card.type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
 
@@ -100,14 +102,14 @@ provide('rec_item', recItem)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="isLoading.summary">
-        <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton />
+        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
       </template>
       <template v-else>
-        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </template>
     </div>
     <AppPatientList :data="data" />

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>

app/pages/(features)/doctor/add.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -36,5 +37,5 @@ const canCreate = hasCreateAccess(roleAccess)
   <div v-if="canCreate">
     <FlowDoctorAdd />
   </div>
-  <PubBaseError v-else :status-code="403" />
+  <Error v-else :status-code="403" />
 </template>

app/pages/(features)/doctor/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -34,6 +35,6 @@ const canRead = hasReadAccess(roleAccess)
     <div v-if="canRead">
       <FlowDoctorList />
     </div>
-    <PubBaseError v-else :status-code="403" />
+    <Error v-else :status-code="403" />
   </div>
 </template>

app/pages/(features)/patient/add.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -36,5 +37,5 @@ const canCreate = hasCreateAccess(roleAccess)
   <div v-if="canCreate">
     <FlowPatientAdd />
   </div>
-  <PubBaseError v-else :status-code="403" />
+  <Error v-else :status-code="403" />
 </template>

app/pages/(features)/patient/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -34,6 +35,6 @@ const canRead = hasReadAccess(roleAccess)
     <div v-if="canRead">
       <FlowPatientList />
     </div>
-    <PubBaseError v-else :status-code="403" />
+    <Error v-else :status-code="403" />
   </div>
 </template>