From a4fb33dc3e08078cbd4143c55f356ff2010b1449 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Thu, 16 Oct 2025 16:06:02 +0700
Subject: [PATCH 1/2] dev: hotfix, data table + deepFetch for nested field +
 sampel

---
 .../pub/my-ui/data-table/data-table.vue       | 21 +++++-
 app/pages/_dev/data-table/index.cfg.ts        | 37 ++++++++++
 app/pages/_dev/data-table/index.data.ts       | 67 +++++++++++++++++++
 app/pages/_dev/data-table/index.vue           |  8 +++
 4 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/_dev/data-table/index.cfg.ts
 create mode 100644 app/pages/_dev/data-table/index.data.ts
 create mode 100644 app/pages/_dev/data-table/index.vue

diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index 5fbd8b36..5549dae9 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isRef } from 'vue';
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -33,6 +34,24 @@ function toggleSelection(row: any) {
   }
 }
 
+function deepFetch(data: Record<string, any>, key: string): string {
+  let result = '';
+  const keys = key.split('.')
+  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  for (let i = 0; i < keys.length; i++) {
+    let idx = keys[i] || ''
+    if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
+      if (i == keys.length - 1) {
+        return lastVal[idx];
+      } else {
+        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+      }
+    }
+  }
+  return result;
+}
+
+
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -116,7 +135,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           <template v-else>
             <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
             <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
             </template>
           </template>
         </TableCell>
diff --git a/app/pages/_dev/data-table/index.cfg.ts b/app/pages/_dev/data-table/index.cfg.ts
new file mode 100644
index 00000000..4eba929e
--- /dev/null
+++ b/app/pages/_dev/data-table/index.cfg.ts
@@ -0,0 +1,37 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'No.RM.' },
+    { label: 'Nama Pasien' },
+    { label: 'Tempat Lahir' },
+    { label: '' },
+  ]],
+
+  keys: ['number', 'person.name', 'person.birthPlace_regency.name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/pages/_dev/data-table/index.data.ts b/app/pages/_dev/data-table/index.data.ts
new file mode 100644
index 00000000..16989c3f
--- /dev/null
+++ b/app/pages/_dev/data-table/index.data.ts
@@ -0,0 +1,67 @@
+export interface Regency {
+  id: number
+  code: string
+  name: string
+}
+
+export interface Person {
+  id: number
+  name: string
+  residentIdentityNumber?: string
+  birthDate?: string
+  birthPlace_regency_code: string
+  birthPlace_regency: Regency
+}
+
+export interface Patient {
+  id: number
+  number: string
+  person: Person
+}
+
+export const regencies: Regency[] = [
+  {
+    id: 1,
+    code: '3522',
+    name: 'Bojonegoro',
+  },
+  {
+    id: 2,
+    code: '3579',
+    name: 'Batu',
+  },
+]
+
+export const people: Person[] = [
+  {
+    id: 1,
+    name: 'Abdul Manap',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[0],
+  },
+  {
+    id: 2,
+    name: 'Abdul Gofur',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[1],
+  },
+]
+
+export const data: Patient[] = [
+  {
+    id: 1,
+    number: 'RM-0000001',
+    person_id: 1,
+    person: people[0],
+  },
+  {
+    id: 2,
+    number: 'RM-0000002',
+    person_id: 2,
+    person: people[1],
+  }
+]
diff --git a/app/pages/_dev/data-table/index.vue b/app/pages/_dev/data-table/index.vue
new file mode 100644
index 00000000..0e2c8308
--- /dev/null
+++ b/app/pages/_dev/data-table/index.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+  import { config } from './index.cfg'
+  import { data } from './index.data'
+</script>
+
+<template>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
+</template>

From 61a3e8597b30f47a40212b00099684f3c98cf715 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Fri, 17 Oct 2025 02:18:25 +0700
Subject: [PATCH 2/2] dev: hotfix, improvements

+ components/pub/my-ui/data-table
+ components/pub/ui/badge
+ lib/date
---
 .../pub/my-ui/data-table/data-table.vue       |  8 ++--
 app/components/pub/my-ui/nav-header/prep.vue  |  5 +--
 app/components/pub/ui/badge/index.ts          | 30 +++++++++----
 app/lib/date.ts                               | 44 +++++++++++++++++++
 4 files changed, 71 insertions(+), 16 deletions(-)
 create mode 100644 app/lib/date.ts

diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index 5549dae9..9d88ffee 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -71,14 +71,14 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 <template>
   <Table>
     <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
-      <TableRow>
+      <TableRow v-for="(hr, hrIdx) in headers">
         <TableHead
-          v-for="(h, idx) in headers[0]"
+          v-for="(th, idx) in headers[hrIdx]"
           :key="`head-${idx}`"
-          class="border"
+          :class="`border ${th.classVal || ''}`"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
         >
-          {{ h.label }}
+          {{ th.label }}
         </TableHead>
       </TableRow>
     </TableHeader>
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index e7a48d03..10ad748b 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -31,7 +31,7 @@ function btnClick() {
         <div class="font-semibold text-gray-900 md:text-base xl:text-lg">
           <Icon
             :name="props.prep.icon!"
-            class="mr-2 size-4 align-middle md:size-6"
+            class="mr-2 align-middle md:size-6"
           />
           {{ props.prep.title }}
         </div>
@@ -44,7 +44,6 @@ function btnClick() {
           <Input
             type="text"
             placeholder="Search"
-            class="sm:text-sm"
             @click="emitSearchNavClick"
             @input="onInput"
           />
@@ -59,7 +58,7 @@ function btnClick() {
           >
             <Icon
               name="i-lucide-plus"
-              class="mr-2 h-4 w-4 align-middle"
+              class="align-middle"
             />
             {{ prep.addNav.label }}
           </Button>
diff --git a/app/components/pub/ui/badge/index.ts b/app/components/pub/ui/badge/index.ts
index 4f3e6d83..1ada7a61 100644
--- a/app/components/pub/ui/badge/index.ts
+++ b/app/components/pub/ui/badge/index.ts
@@ -3,19 +3,31 @@ import { cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
+export type Variants = | 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline'
+
+const variants: Record<Variants, string> = {
+  default:
+    'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+  secondary:
+    'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  fresh:
+    'border-transparent bg-teal-400 text-primary-foreground shadow hover:bg-teal-400/80',
+  positive:
+    'border-transparent bg-sky-400 text-primary-foreground shadow hover:bg-sky-400/80',
+  negative:
+    'border-transparent bg-neutral-400 text-destructive-foreground shadow hover:bg-neutral-400/80',
+  warning:
+    'border-transparent bg-orange-400 text-destructive-foreground shadow hover:bg-orange-400/80',
+  destructive:
+    'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+  outline: 'text-foreground',
+}
+
 export const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
+      variant: variants,
     },
     defaultVariants: {
       variant: 'default',
diff --git a/app/lib/date.ts b/app/lib/date.ts
new file mode 100644
index 00000000..502a6cfb
--- /dev/null
+++ b/app/lib/date.ts
@@ -0,0 +1,44 @@
+export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
+	const birthDate = new Date(dateString);
+	const today = new Date();
+
+	if (comparedDate) {
+		const comparedDateObj = new Date(comparedDate);
+		today.setFullYear(comparedDateObj.getFullYear());
+		today.setMonth(comparedDateObj.getMonth());
+		today.setDate(comparedDateObj.getDate());
+	}
+
+	// Format the date part
+	const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
+	const idFormat = birthDate.toLocaleDateString('id-ID', options);
+
+	// Calculate age
+	let years = today.getFullYear() - birthDate.getFullYear();
+	let months = today.getMonth() - birthDate.getMonth();
+	let days = today.getDate() - birthDate.getDate();
+
+	if (months < 0 || (months === 0 && days < 0)) {
+		years--;
+		months += 12;
+	}
+
+	if (days < 0) {
+		const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
+		days += prevMonth.getDate();
+		months--;
+	}
+
+	// Format the age part
+	let extFormat = '';
+	if ([years, months, days].filter(Boolean).join(' ')) {
+		extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
+	} else {
+		extFormat = '0';
+	}
+
+	return {
+		idFormat,
+		extFormat
+	};
+}
\ No newline at end of file