feat(satusehat): add search component, card summary and date picker

- Implement search component with lucide-vue-next icon
- Create card summary component for displaying summary data
- Add date picker component with range selection functionality
- Update list configuration and styling
- Reorganize package.json structure

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

@@ -15,10 +15,12 @@ defineProps<{
 <template>
   <Table>
 
-    <TableHeader>
+    <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 }">
+        <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>
@@ -28,8 +30,10 @@ defineProps<{
       <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)" />
+          <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 -->

app/components/pub/base/service-status.vue

@@ -30,10 +30,12 @@ const tokenStatus = computed((): string => {
   <Card v-else class="py-6">
     <div class="flex gap-4 justify-between px-6">
       <div class="flex gap-2 items-center">
-        <span :class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
+        <span
+:class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
           { 'bg-red-500': props.status === 'error' },
           { 'bg-blue-500': props.status !== 'error' },
-        )">
+        )"
+>
           <Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
           <Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
         </span>
@@ -58,10 +60,12 @@ const tokenStatus = computed((): string => {
         <p v-if="props.status === 'connecting'">
           <Loader class="ml-2 h-4 w-4 animate-spin" />
         </p>
-        <p v-else :class="cn('text-xs md:text-md font-bold',
+        <p
+v-else :class="cn('text-xs md:text-md font-bold',
           { 'text-blue-500': props.sessionActive },
           { 'text-red-500': !props.sessionActive },
-        )">{{ tokenStatus }}</p>
+        )"
+>{{ tokenStatus }}</p>
       </div>
     </div>
   </Card>

app/components/pub/base/summary-card.vue

@@ -54,8 +54,10 @@ const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
         {{ props.stat.metric.toLocaleString('id-ID') }}
       </div>
       <p v-if="props.stat.trend !== 0" class="text-muted-foreground flex items-center gap-1 text-xs">
-        <component :is="isTrending ? ChevronUp : ChevronDown"
-          :class="cn('h-4 w-4', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })" />
+        <component
+:is="isTrending ? ChevronUp : ChevronDown"
+          :class="cn('h-4 w-4', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })"
+/>
         <span :class="cn('font-medium', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })">
           {{ props.stat.trend.toFixed(1) }}%
           <!-- {{ Math.abs(props.stat.trend).toFixed(1) }}% -->