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>