dev: hotfix, improvements

+ components/pub/my-ui/data-table
+ components/pub/ui/badge
+ lib/date

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>

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>

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: {
+      variant: variants,
-        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',
-      },
     },
     defaultVariants: {
       variant: 'default',

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
+	};
+}