From 8fc097d92fe2812f81d7e730e536760057bdbae1 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 17:04:49 +0700
Subject: [PATCH] feat(patient): add status badge component for patient list

Implement a new status badge component to visually indicate patient status (active/inactive) in the patient list. The badge uses different colors based on status code and is integrated into the list configuration.
---
 app/components/app/patient/list-cfg.ts      | 12 +++++++++
 app/components/app/patient/status-badge.vue | 29 +++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 app/components/app/patient/status-badge.vue

diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index 0e1fe7f4..63455faa 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -4,6 +4,7 @@ import { defineAsyncComponent } from 'vue'
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const cols: Col[] = [
   {},
@@ -103,6 +104,17 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
+  status(rec, idx) {
+    if (rec.status === null) {
+      rec.status_code = 0
+    }
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
diff --git a/app/components/app/patient/status-badge.vue b/app/components/app/patient/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/patient/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>