✨ feat (patient): implement patient list and entry form

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

@@ -8,8 +8,7 @@ import Label from '~/components/pub/form/label.vue'
 <template>
   <form id="entry-form">
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <!-- <i class="bi bi-file-earmark-person"></i>  -->
-      <Icon name="i-lucide-user" />
+      <Icon name="i-lucide-user" class="me-2" />
       <span class="font-semibold">Tambah</span> Pasien
     </div>
 
@@ -32,7 +31,7 @@ import Label from '~/components/pub/form/label.vue'
       </div>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCs />
+      <PubNavFooterCsd />
     </div>
   </form>
 </template>

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

@@ -0,0 +1,118 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/nav/types'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 120 },
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: 'Rekam Medis' },
+    { label: 'KTP' },
+    { label: 'Tgl Lahir' },
+    { label: 'Umur' },
+    { label: 'JK' },
+    { label: 'Pendidikan' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'name',
+  'medicalRecord_number',
+  'identity_number',
+  'birth_date',
+  'patient_age',
+  'gender',
+  'education',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  birth_date: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX.birth_date == 'object' && recX.birth_date) {
+      return (recX.birth_date as Date).toLocaleDateString()
+    } else if (typeof recX.birth_date == 'string') {
+      return (recX.birth_date as string).substring(0, 10)
+    }
+    return recX.birth_date
+  },
+  patient_age: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.birth_date?.split('T')[0]
+  },
+  gender: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+      return 'Tidak Diketahui'
+    }
+    return recX.gender_code
+  },
+  education: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+      return recX.education_code
+    } else if (typeof recX.education_code) {
+      return recX.education_code
+    }
+    return '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}

app/components/app/patient/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, header, keys, funcParsed, funcHtml, funcComponent } from './list-cfg.ts'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubNavDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>