From 3e21705795961809a427a1ef20b146da35073e8c Mon Sep 17 00:00:00 2001
From: Yusron alamsyah <icus.yusron@gmail.com>
Date: Mon, 9 Mar 2026 08:58:25 +0700
Subject: [PATCH] fix(FE) : use general snackbar

---
 components/pendaftaran/CardAntrianList.vue   |   2 +-
 components/pendaftaran/ModalUpdateStatus.vue |  22 +---
 pages/antrean/all.vue                        |  31 +----
 pages/antrean/kategori/[id].vue              | 116 +++++--------------
 pages/antrean/spesialis/[kode].vue           |  37 +-----
 pages/antrean/subspesialis/[kode].vue        |  39 +------
 6 files changed, 50 insertions(+), 197 deletions(-)

diff --git a/components/pendaftaran/CardAntrianList.vue b/components/pendaftaran/CardAntrianList.vue
index 6b898a5..e217038 100644
--- a/components/pendaftaran/CardAntrianList.vue
+++ b/components/pendaftaran/CardAntrianList.vue
@@ -201,7 +201,7 @@ onUnmounted(() => {
                                         No Spesialis : {{ item.NoUrutSpesialis }}
                                     </v-chip>
                                     <v-chip size="small" color="primary" variant="outlined" label class="font-weight-medium">
-                                        No SubSpesialis : {{ item.NoUrutSubSpesialis }}
+                                        No Sub Spesialis : {{ item.NoUrutSubSpesialis }}
                                     </v-chip>
                                 </div>
                                  <!-- Medical Details Grid -->
diff --git a/components/pendaftaran/ModalUpdateStatus.vue b/components/pendaftaran/ModalUpdateStatus.vue
index 47aac61..26a5c4b 100644
--- a/components/pendaftaran/ModalUpdateStatus.vue
+++ b/components/pendaftaran/ModalUpdateStatus.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import type { AntreanOperasi } from '~/types/antrean';
+import { usePendaftaranStore } from "~/store/pendaftaran";
 import { STATUS } from '~/types/antrean';
 import { getAntrianOperasiById, updateStatusAntrianOperasi } from '@/services/antrean';
 
@@ -38,15 +38,11 @@ const formData = ref<{
     keteranganStatus: ''
 });
 
-// Snackbar
-const snackbar = ref(false);
-const snackbarMessage = ref('');
-const snackbarColor = ref('success');
+// Use pendaftaranStore for global snackbar
+const pendaftaranStore = usePendaftaranStore();
 
 const showSnackbar = (message: string, color: string = 'success') => {
-    snackbarMessage.value = message;
-    snackbarColor.value = color;
-    snackbar.value = true;
+    pendaftaranStore.showSnackbar(message, color);
 };
 
 // Fetch data pasien
@@ -414,16 +410,6 @@ watch(() => props.modelValue, (isOpen) => {
                 </v-btn>
             </v-card-actions>
         </v-card>
-
-        <!-- Snackbar -->
-        <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top">
-            {{ snackbarMessage }}
-            <template #actions>
-                <v-btn variant="text" @click="snackbar = false">
-                    Close
-                </v-btn>
-            </template>
-        </v-snackbar>
     </v-dialog>
 </template>
 
diff --git a/pages/antrean/all.vue b/pages/antrean/all.vue
index 4c27498..4b08dd4 100644
--- a/pages/antrean/all.vue
+++ b/pages/antrean/all.vue
@@ -9,12 +9,14 @@ import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
 import { Icon } from '@iconify/vue';
 import type { AntreanOperasi } from '~/types/antrean';
 import { STATUS, statusOptions } from '~/types/antrean';
+import { usePendaftaranStore } from '~/store/pendaftaran';
 
 definePageMeta({
   middleware: 'auth',
   pageTitle: 'Semua Antrean Operasi',
 });
 
+const pendaftaranStore = usePendaftaranStore();
 const search = ref('');
 const filterValues = ref<{
     statusFilter: string | null;
@@ -164,15 +166,8 @@ onMounted(() => {
     fetchData();
 });
 
-// Snackbar state
-const snackbar = ref(false);
-const snackbarMessage = ref('');
-const snackbarColor = ref('success');
-
 const showSnackbar = (message: string, color: string = 'success') => {
-    snackbarMessage.value = message;
-    snackbarColor.value = color;
-    snackbar.value = true;
+    pendaftaranStore.showSnackbar(message, color);
 };
 
 
@@ -263,7 +258,7 @@ const handleUpdateStatusSuccess = () => {
 </script>
 <template>
     <v-row>
-        <v-col cols="12">
+        <v-col cols="12" class="pa-6">
              <div class="d-flex justify-space-between align-center mb-4 flex-wrap ga-3">
                         <div class="d-flex align-center ga-3 flex-wrap" style="width: 70%;">
                             <v-text-field
@@ -310,24 +305,6 @@ const handleUpdateStatusSuccess = () => {
         </v-col>
     </v-row>
 
-    <!-- Snackbar for notifications -->
-    <v-snackbar
-        v-model="snackbar"
-        :color="snackbarColor"
-        :timeout="3000"
-        location="top"
-    >
-        {{ snackbarMessage }}
-        <template #actions>
-            <v-btn
-                variant="text"
-                @click="snackbar = false"
-            >
-                Close
-            </v-btn>
-        </template>
-    </v-snackbar>
-
     <!-- Modal Pendaftaran -->
     <ModalPendaftaran 
         v-model="showModal" 
diff --git a/pages/antrean/kategori/[id].vue b/pages/antrean/kategori/[id].vue
index bcdb60c..36e6012 100644
--- a/pages/antrean/kategori/[id].vue
+++ b/pages/antrean/kategori/[id].vue
@@ -8,10 +8,12 @@ import { Icon } from '@iconify/vue';
 import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
+import { usePendaftaranStore } from '~/store/pendaftaran';
 
 const route = useRoute();
 const idKategori = route.params.id as string;
 const categoryName = route.query.category as string || 'Kategori';
+const pendaftaranStore = usePendaftaranStore();
 
 // State
 const search = ref('');
@@ -39,15 +41,8 @@ const selectedId = ref<string | number | null>(null);
 const selectedIdForEdit = ref<string | number | null>(null);
 const selectedIdForStatus = ref<string | number | null>(null);
 
-// Snackbar state
-const snackbar = ref(false);
-const snackbarMessage = ref('');
-const snackbarColor = ref('success');
-
 const showSnackbar = (message: string, color: string = 'success') => {
-    snackbarMessage.value = message;
-    snackbarColor.value = color;
-    snackbar.value = true;
+    pendaftaranStore.showSnackbar(message, color);
 };
 
 // Define filter options
@@ -91,13 +86,13 @@ const fetchData = async (append: boolean = false) => {
         const offset = (currentPage.value - 1) * itemsPerPage.value;
         let sortBy: string | undefined;
         let sortOrder: string | undefined;
-        
+
         if (filterValues.value.sortOption && filterValues.value.sortOption !== null) {
             const parts = filterValues.value.sortOption.split('|');
             sortBy = parts[0];
             sortOrder = parts[1];
         }
-        
+
         const response = await getAntrianOperasi({
             type: 'kategori',
             limit: itemsPerPage.value,
@@ -116,7 +111,7 @@ const fetchData = async (append: boolean = false) => {
                 antreanList.value = response.data;
             }
             totalItems.value = response.Paginate.Total;
-            
+
             // Check if there's more data
             const totalLoaded = currentPage.value * itemsPerPage.value;
             hasMore.value = totalLoaded < response.Paginate.Total;
@@ -215,7 +210,7 @@ const handleUpdateStatus = async (item: unknown) => {
 
 const handleDelete = async (item: unknown) => {
     const data = item as AntreanOperasi;
-    if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
+    if (confirm('Apakah Anda yakin ingin menghapus data ini?')) {
         try {
             const response = await deleteAntrianOperasi(data.id);
             if (response.success) {
@@ -257,90 +252,39 @@ const handleUpdateStatusSuccess = () => {
 </script>
 <template>
     <v-row>
-        <v-col cols="12">
-            <v-card elevation="10">
-                <v-card-text>
-                    <div class="d-flex justify-space-between align-center mb-4">
-                        <div class="d-flex align-center ga-3 w-50">
-                            <v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
-                                hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
-                            
-                            <FilterSortMenu 
-                                v-model="filterValues"
-                                :filters="filterOptions"
-                            />
-                        </div>
+        <v-col cols="12" class="pa-6">
+            <div class="d-flex justify-space-between align-center mb-4">
+                <div class="d-flex align-center ga-3 w-50">
+                    <v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
+                        hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
 
-                        <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
-                            <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
-                            Pendaftaran Operasi Baru
-                        </v-btn>
-                    </div>
+                    <FilterSortMenu v-model="filterValues" :filters="filterOptions" />
+                </div>
 
-                    <CardAntrianList
-                        :items="antreanList"
-                        :loading="loading"
-                        :has-more="hasMore"
-                        :total-items="totalItems"
-                        :get-actions="getActionsForItem"
-                        @view="handleView"
-                        @edit="handleEdit"
-                        @updateStatus="handleUpdateStatus"
-                        @delete="handleDelete"
-                        @loadMore="handleLoadMore"
-                    />
-                </v-card-text>
-            </v-card>
+                <v-btn color="primary" size="large" elevation="2" @click="showModal = true">
+                    <Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
+                    Pendaftaran Operasi Baru
+                </v-btn>
+            </div>
+
+            <CardAntrianList :items="antreanList" :loading="loading" :has-more="hasMore" :total-items="totalItems"
+                :get-actions="getActionsForItem" @view="handleView" @edit="handleEdit"
+                @updateStatus="handleUpdateStatus" @delete="handleDelete" @loadMore="handleLoadMore" />
         </v-col>
     </v-row>
 
-    <!-- Snackbar for notifications -->
-    <v-snackbar
-        v-model="snackbar"
-        :color="snackbarColor"
-        :timeout="3000"
-        location="top"
-    >
-        {{ snackbarMessage }}
-        <template #actions>
-            <v-btn
-                variant="text"
-                @click="snackbar = false"
-            >
-                Close
-            </v-btn>
-        </template>
-    </v-snackbar>
-
     <!-- Modal Pendaftaran -->
-    <ModalPendaftaran 
-        v-model="showModal" 
-        mode="create"
-        :initial-kategori="parseInt(idKategori)"
-        @success="handleModalSuccess"
-    />
+    <ModalPendaftaran v-model="showModal" mode="create" :initial-kategori="parseInt(idKategori)"
+        @success="handleModalSuccess" />
 
     <!-- Modal Edit Pendaftaran -->
-    <ModalPendaftaran 
-        v-if="selectedIdForEdit"
-        v-model="showEditModal" 
-        mode="edit"
-        :id="selectedIdForEdit"
-        @success="handleEditModalSuccess"
-    />
+    <ModalPendaftaran v-if="selectedIdForEdit" v-model="showEditModal" mode="edit" :id="selectedIdForEdit"
+        @success="handleEditModalSuccess" />
 
     <!-- Modal Detail Pendaftaran -->
-    <ModalDetailPendaftaran 
-        v-if="selectedId"
-        v-model="showDetailModal" 
-        :id="selectedId"
-    />
+    <ModalDetailPendaftaran v-if="selectedId" v-model="showDetailModal" :id="selectedId" />
 
     <!-- Modal Update Status -->
-    <ModalUpdateStatus 
-        v-if="selectedIdForStatus"
-        v-model="showUpdateStatusModal" 
-        :id="selectedIdForStatus"
-        @success="handleUpdateStatusSuccess"
-    />
+    <ModalUpdateStatus v-if="selectedIdForStatus" v-model="showUpdateStatusModal" :id="selectedIdForStatus"
+        @success="handleUpdateStatusSuccess" />
 </template>
diff --git a/pages/antrean/spesialis/[kode].vue b/pages/antrean/spesialis/[kode].vue
index 9fb1517..74c0e03 100644
--- a/pages/antrean/spesialis/[kode].vue
+++ b/pages/antrean/spesialis/[kode].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
-import CardAntrianList from '@/components/pendaftaran/CardAntrianListV2.vue';
+import CardAntrianList from '@/components/pendaftaran/CardAntrianList.vue';
 import FilterSortMenu from '@/components/pendaftaran/FilterSortMenu.vue';
 import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
 import { statusOptions, STATUS } from '~/types/antrean';
@@ -9,10 +9,12 @@ import { Icon } from '@iconify/vue';
 import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
+import { usePendaftaranStore } from '~/store/pendaftaran';
 
 const route = useRoute();
 const kodeSpesialis = route.params.kode as string;
 const spesialisName = route.query.spesialis as string || 'Spesialis';
+const pendaftaranStore = usePendaftaranStore();
 
 // State
 const search = ref('');
@@ -39,15 +41,8 @@ const selectedId = ref<string | number | null>(null);
 const selectedIdForEdit = ref<string | number | null>(null);
 const selectedIdForStatus = ref<string | number | null>(null);
 
-// Snackbar state
-const snackbar = ref(false);
-const snackbarMessage = ref('');
-const snackbarColor = ref('success');
-
 const showSnackbar = (message: string, color: string = 'success') => {
-    snackbarMessage.value = message;
-    snackbarColor.value = color;
-    snackbar.value = true;
+    pendaftaranStore.showSnackbar(message, color);
 };
 
 // Define filter options
@@ -259,9 +254,7 @@ const handleUpdateStatusSuccess = () => {
 
 <template>
     <v-row>
-        <v-col cols="12">
-            <v-card elevation="10">
-                <v-card-text>
+        <v-col cols="12" class="pa-6">
                     <div class="d-flex justify-space-between align-center mb-4">
                         <div class="d-flex align-center ga-3 w-50">
                             <v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
@@ -291,29 +284,9 @@ const handleUpdateStatusSuccess = () => {
                         @delete="handleDelete"
                         @loadMore="handleLoadMore"
                     />
-                </v-card-text>
-            </v-card>
         </v-col>
     </v-row>
 
-    <!-- Snackbar for notifications -->
-    <v-snackbar
-        v-model="snackbar"
-        :color="snackbarColor"
-        :timeout="3000"
-        location="top"
-    >
-        {{ snackbarMessage }}
-        <template #actions>
-            <v-btn
-                variant="text"
-                @click="snackbar = false"
-            >
-                Close
-            </v-btn>
-        </template>
-    </v-snackbar>
-
     <!-- Modal Pendaftaran -->
     <ModalPendaftaran 
         v-model="showModal" 
diff --git a/pages/antrean/subspesialis/[kode].vue b/pages/antrean/subspesialis/[kode].vue
index f1f918d..4ab2da2 100644
--- a/pages/antrean/subspesialis/[kode].vue
+++ b/pages/antrean/subspesialis/[kode].vue
@@ -8,11 +8,13 @@ import { Icon } from '@iconify/vue';
 import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
 import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
 import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
+import { usePendaftaranStore } from '~/store/pendaftaran';
 
 const route = useRoute();
 const kodeSubSpesialis = route.params.kode as string;
 const subSpesialisName = route.query.subspecialis as string || 'Sub Spesialis';
 const spesialisId = route.query.spesialis_id as string || null;
+const pendaftaranStore = usePendaftaranStore();
 
 // State
 const search = ref('');
@@ -39,15 +41,8 @@ const selectedId = ref<string | number | null>(null);
 const selectedIdForEdit = ref<string | number | null>(null);
 const selectedIdForStatus = ref<string | number | null>(null);
 
-// Snackbar state
-const snackbar = ref(false);
-const snackbarMessage = ref('');
-const snackbarColor = ref('success');
-
 const showSnackbar = (message: string, color: string = 'success') => {
-    snackbarMessage.value = message;
-    snackbarColor.value = color;
-    snackbar.value = true;
+    pendaftaranStore.showSnackbar(message, color);
 };
 
 // Define filter options
@@ -259,12 +254,10 @@ const handleUpdateStatusSuccess = () => {
 
 <template>
     <v-row>
-        <v-col cols="12">
-            <v-card elevation="10">
-                <v-card-text>
-                    <div class="d-flex justify-space-between align-center mb-4">
+        <v-col cols="12" class="pa-6">
+            <div class="d-flex justify-space-between align-center mb-4">
                         <div class="d-flex align-center ga-3 w-50">
-                            <v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
+                            <v-text-field v-model="search" placeholder="Cari..." variant="outlined" clearable density="compact"
                                 hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
                             
                             <FilterSortMenu 
@@ -291,29 +284,9 @@ const handleUpdateStatusSuccess = () => {
                         @delete="handleDelete"
                         @loadMore="handleLoadMore"
                     />
-                </v-card-text>
-            </v-card>
         </v-col>
     </v-row>
 
-    <!-- Snackbar for notifications -->
-    <v-snackbar
-        v-model="snackbar"
-        :color="snackbarColor"
-        :timeout="3000"
-        location="top"
-    >
-        {{ snackbarMessage }}
-        <template #actions>
-            <v-btn
-                variant="text"
-                @click="snackbar = false"
-            >
-                Close
-            </v-btn>
-        </template>
-    </v-snackbar>
-
     <!-- Modal Pendaftaran -->
     <ModalPendaftaran 
         v-model="showModal"