From 1b84ce3c62bfd0519db811e2e4eb59d2372ca9c3 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 16:40:53 +0700
Subject: [PATCH] feat(doctor): add status badge component for doctor list

Replace hardcoded status text with a reusable status badge component to improve consistency and maintainability. Remove console.log statement and adjust column widths in the list configuration.
---
 app/components/app/doctor/list-cfg.ts      | 25 +++++++++----------
 app/components/app/doctor/status-badge.vue | 29 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 app/components/app/doctor/status-badge.vue

diff --git a/app/components/app/doctor/list-cfg.ts b/app/components/app/doctor/list-cfg.ts
index 9d47c6d0..977e7427 100644
--- a/app/components/app/doctor/list-cfg.ts
+++ b/app/components/app/doctor/list-cfg.ts
@@ -4,11 +4,7 @@ import { defineAsyncComponent } from 'vue'
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const cols: Col[] = [
   { width: 100 },
@@ -19,10 +15,10 @@ export const cols: Col[] = [
   {},
   {},
   {},
+  { width: 120 },
   { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 50 },
+  {},
+  {},
 ]
 
 export const header: Th[][] = [
@@ -59,7 +55,6 @@ export const delKeyNames: KeyLabel[] = [
 
 export const funcParsed: RecStrFuncUnknown = {
   name: (rec: unknown): unknown => {
-    console.log(rec)
     const recX = rec as SmallDetailDto
     return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
   },
@@ -78,10 +73,6 @@ export const funcParsed: RecStrFuncUnknown = {
     const recX = rec as SmallDetailDto
     return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
   },
-  status: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
-  },
 }
 
 export const funcComponent: RecStrFuncComponent = {
@@ -93,6 +84,14 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
diff --git a/app/components/app/doctor/status-badge.vue b/app/components/app/doctor/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/doctor/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>