Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/satusehat

app/components/pub/base/data-table/data-table.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+import type { DataTableLoader } from './type'
+defineProps<{
+  rows: unknown[]
+  cols: any[]
+  header: any[]
+  keys: string[]
+  funcParsed: Record<string, (row: any) => any>
+  funcHtml: Record<string, (row: any) => string>
+  funcComponent: Record<string, (row: any, idx: number) => any>
+}>()
+
+const loader = inject('table_data_loader') as DataTableLoader
+</script>
+
+<template>
+  <Table>
+    <TableHeader class="bg-gray-50">
+      <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 v-if="loader.isTableLoading">
+      <!-- Loading state with 5 skeleton rows -->
+      <TableRow v-for="n in 5" :key="`skeleton-${n}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">
+          <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+    <TableBody v-else>
+      <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>
+            <!-- Use v-html for funcHtml to render HTML content -->
+            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row)"></div>
+            <!-- Use normal interpolation for funcParsed and regular data -->
+            <template v-else>
+              {{ funcParsed[key]?.(row) ?? (row as any)[key] }}
+            </template>
+          </template>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>

app/components/pub/base/data-table/type.ts

@@ -0,0 +1,4 @@
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}