Feat: add banner in List if requirement not met

app/components/content/outpatient/encounter/list.vue

@@ -9,9 +9,14 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import { usePaginatedList } from '~/composables/usePaginatedList'
 import { getList, remove } from '~/services/control-letter.service'
 import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
 // #endregion
 
 // #region State
+const props = defineProps<{
+  encounter?: Encounter
+}>()
 const route = useRoute()
 const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 
@@ -34,6 +39,7 @@ const refSearchNav: RefSearchNav = {
 
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
 
 const recId = ref<number>(0)
 const recAction = ref<string>('')
@@ -131,30 +137,40 @@ watch([recId, recAction], () => {
 </script>
 
 <template>
-  <Header v-model:search="searchInput"
-    :prep="{ ...headerPrep }"
-    :ref-search-nav="refSearchNav"
-    @search="handleSearch" />
+  <WarningAlert v-if="!isRequirementsMet"
+    class="mb-5"
+    text="Syarat pembuatan surat kontrol belum terpenuhi"
+    :description="[
+      'Lanjutan Penatalaksanaan Pasien harus pulang/KRS.',
+      'Status Resume Medis harus tervalidasi.'
+    ]" />
 
-  <AppOutpatientEncounterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <div v-else>
+    <Header v-model:search="searchInput"
+      :prep="{ ...headerPrep }"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch" />
 
-  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
-    <template #default="{ record }">
-      <div class="text-sm">
-        <p>
-          <strong>ID:</strong>
-          {{ record?.id }}
-        </p>
-        <p v-if="record?.firstName">
-          <strong>Nama:</strong>
-          {{ record.firstName }}
-        </p>
-        <p v-if="record?.code">
-          <strong>Kode:</strong>
-          {{ record.cellphone }}
-        </p>
-      </div>
-    </template>
-  </RecordConfirmation>
+    <AppOutpatientEncounterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
 </template>

app/components/pub/my-ui/alert/warning-alert.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils';
+
+const props = withDefaults(defineProps<{
+  text?: string
+  description?: string | string[]
+  class?: string
+}>(), {
+
+})
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-4 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
+        props.class
+    )">
+        <Icon name="i-lucide-triangle-alert" class="h-12 w-12 align-middle transition-colors" />
+        <div class="">
+            <p class="font-medium text-base">{{text}}</p>
+            <ul class="list-disc list-inside">
+                <li v-for="(desc, index) in (Array.isArray(description) ? description : [description])" :key="index">
+                    {{ desc }}
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>