From e84a4bdadbe77d171baca63bc624d6ce2e41d07d Mon Sep 17 00:00:00 2001
From: timotiabbauftech <timotiabbauftech@gmail.com>
Date: Wed, 1 Oct 2025 10:47:53 +0700
Subject: [PATCH] [update] alert respon messae

---
 resources/js/pages/Akun.vue        |  33 ++-
 resources/js/pages/EditProduk.vue  |   6 +-
 resources/js/pages/InputProduk.vue |   2 +-
 resources/js/pages/Kategori.vue    |  43 +++-
 resources/js/pages/Produk.vue      |  57 ++++-
 resources/js/pages/Sales.vue       | 384 ++++++++++++++++-------------
 6 files changed, 338 insertions(+), 187 deletions(-)

diff --git a/resources/js/pages/Akun.vue b/resources/js/pages/Akun.vue
index d8c6f68..4eef43c 100644
--- a/resources/js/pages/Akun.vue
+++ b/resources/js/pages/Akun.vue
@@ -48,7 +48,26 @@
                     Tambah User
                 </button>
             </div>
-
+            <!-- 🔹 Alert Message -->
+            <div class="px-6" v-if="alert">
+            <div
+                v-if="alert.error"
+                class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
+                role="alert"
+            >
+                <strong class="font-bold">Error! </strong>
+                <span class="block sm:inline">{{ alert.error }}</span>
+            </div>
+            <div
+                v-if="alert.success"
+                class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
+                role="alert"
+            >
+                <strong class="font-bold">Success! </strong>
+                <span class="block sm:inline">{{ alert.success }}</span>
+            </div>
+            </div>
+            <!-- 🔹 End Alert -->
             <!-- Table Section -->
             <div
                 class="bg-white rounded-lg shadow-md overflow-hidden"
@@ -146,7 +165,16 @@ const detail = ref(null);
 const editingAkun = ref(false);
 const confirmDeleteOpen = ref(false);
 const akunToDelete = ref(null);
+const alert = ref(null);
+const timer = ref(null);
 
+function showAlert(type, message) {
+    alert.value = { [type]: message };
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      alert.value = null;
+    }, 5000);
+  }
 // Fetch data dari API
 const fetchAkun = async () => {
     loading.value = true;
@@ -191,6 +219,7 @@ const confirmDelete = async () => {
         });
         fetchAkun();
         confirmDeleteOpen.value = false;
+        showAlert("success", "User berhasil dihapus.");
     } catch (error) {
         console.error("Error deleting akun:", error);
     }
@@ -205,11 +234,13 @@ const closeDeleteModal = () => {
 const closeAkun = () => {
     creatingAkun.value = false;
     fetchAkun();
+    showAlert("success", "User berhasil ditambahkan.");
 };
 
 const closeEditAkun = () => {
     editingAkun.value = false;
     fetchAkun();
+    showAlert("success", "User berhasil diubah.");
 };
 
 // Lifecycle
diff --git a/resources/js/pages/EditProduk.vue b/resources/js/pages/EditProduk.vue
index 97ac7f8..9e57d13 100644
--- a/resources/js/pages/EditProduk.vue
+++ b/resources/js/pages/EditProduk.vue
@@ -288,7 +288,7 @@ const loadProduk = async () => {
     });
     const produk = response.data;
     // console.log(produk);
-    
+
     form.value = {
         nama: produk.nama,
         id_kategori: produk.id_kategori,
@@ -310,7 +310,7 @@ const loadFoto = async () => {
         // console.log(uploadedImages.value);
     } catch (e) {
         console.error(e);
-        
+
         uploadError.value = "Gagal memuat foto";
     }
 };
@@ -415,7 +415,7 @@ const submitForm = async () => {
                 },
             }
         );
-        router.push("/produk");
+        router.push("/produk?message=Produk berhasil diperbarui");
     } catch (err) {
         errorMessages.value = err.response?.data?.message || "Gagal menyimpan produk";
         console.error(err);
diff --git a/resources/js/pages/InputProduk.vue b/resources/js/pages/InputProduk.vue
index e264117..f497f7a 100644
--- a/resources/js/pages/InputProduk.vue
+++ b/resources/js/pages/InputProduk.vue
@@ -174,7 +174,7 @@ import CreateItemModal from "../components/CreateItemModal.vue";
 const router = useRouter();
 
 const form = ref({
-  nama: '', id_kategori: null, berat: 0, kadar: 0, harga_per_gram: 0, harga_jual: 0,
+  nama: '', id_kategori: null, berat: null, kadar: null, harga_per_gram: null, harga_jual: null,
 });
 const category = ref([]);
 const showUploadMenu = ref(false);
diff --git a/resources/js/pages/Kategori.vue b/resources/js/pages/Kategori.vue
index f1a1b66..0524b57 100644
--- a/resources/js/pages/Kategori.vue
+++ b/resources/js/pages/Kategori.vue
@@ -16,7 +16,26 @@
 					Tambah Kategori
 				</button>
 			</div>
-
+                    <!-- 🔹 Alert Message -->
+            <div class="px-6" v-if="alert">
+            <div
+                v-if="alert.error"
+                class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
+                role="alert"
+            >
+                <strong class="font-bold">Error! </strong>
+                <span class="block sm:inline">{{ alert.error }}</span>
+            </div>
+            <div
+                v-if="alert.success"
+                class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
+                role="alert"
+            >
+                <strong class="font-bold">Success! </strong>
+                <span class="block sm:inline">{{ alert.success }}</span>
+            </div>
+            </div>
+            <!-- 🔹 End Alert -->
 			<!-- Table Section -->
 			<div class="bg-white rounded-lg shadow-md overflow-hidden">
 				<table class="w-full">
@@ -96,9 +115,18 @@ const creatingKategori = ref(false);
 const detail = ref(null);
 const confirmDeleteOpen = ref(false);
 const kategoriToDelete = ref(null);
-
+const alert = ref(null);
+const timer = ref(null);
 const isAdmin = localStorage.getItem("role") === "owner";
 
+function showAlert(type, message) {
+    alert.value = { [type]: message };
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      alert.value = null;
+    }, 5000);
+  }
+
 // Fetch data kategori dari API
 const fetchKategoris = async () => {
 	loading.value = true;
@@ -109,7 +137,6 @@ const fetchKategoris = async () => {
 			},
 		});
 		kategori.value = response.data;
-		// console.log("Data kategori:", response.data);
 	} catch (error) {
 		console.error("Error fetching kategori:", error);
 	} finally {
@@ -119,14 +146,19 @@ const fetchKategoris = async () => {
 
 // Tambah kategori - open modal
 const tambahKategori = () => {
-	detail.value = null; // Reset detail untuk mode create
+	detail.value = null;
 	creatingKategori.value = true;
 };
 
 // Close modal
 const closeKategori = () => {
 	creatingKategori.value = false;
-	fetchKategoris(); // Refresh data setelah modal ditutup
+	fetchKategoris();
+    if (detail.value==null) {
+
+        showAlert("success", "Kategori berhasil ditambahkan");
+    } else
+    showAlert("success", "Kategori berhasil diubah");
 };
 
 // Ubah kategori
@@ -139,6 +171,7 @@ const ubahKategori = (item) => {
 const hapusKategori = (item) => {
 	kategoriToDelete.value = item;
 	confirmDeleteOpen.value = true;
+    showAlert("success", "Kategori berhasil dihapus");
 };
 
 // 🔵 Ditambahkan: aksi konfirmasi hapus
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 2911502..1675e45 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -1,11 +1,11 @@
 <template>
   <mainLayout>
     <!-- Modal Buat Item -->
-    <CreateItemModal 
-  :isOpen="creatingItem" 
-  :product="detail" 
-  @close="closeItemModal" 
-  @itemAdded="handleItemAdded" 
+    <CreateItemModal
+  :isOpen="creatingItem"
+  :product="detail"
+  @close="closeItemModal"
+  @itemAdded="handleItemAdded"
 />
 
 
@@ -51,6 +51,27 @@
         </div>
       </div>
 
+    <!-- 🔹 Alert Message -->
+    <div class="my-5" v-if="alert">
+      <div
+        v-if="alert.error"
+        class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
+        role="alert"
+      >
+        <strong class="font-bold">Error! </strong>
+        <span class="block sm:inline">{{ alert.error }}</span>
+      </div>
+      <div
+        v-if="alert.success"
+        class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
+        role="alert"
+      >
+        <strong class="font-bold">Success! </strong>
+        <span class="block sm:inline">{{ alert.success }}</span>
+      </div>
+    </div>
+    <!-- 🔹 End Alert -->
+
       <!-- 🔵 Loading State (sama persis dengan kategori) -->
       <div v-if="loading" class="flex justify-center items-center h-screen">
         <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
@@ -159,13 +180,21 @@ const searchQuery = ref("");
 const selectedCategory = ref(0);
 const creatingItem = ref(false);
 const deleting = ref(false);
-
+const alert = ref(null);
+const timer = ref(null);
 const detail = ref({});
 const showOverlay = ref(false);
 const currentFotoIndex = ref(0);
-
 const kategori = ref([]);
-const loading = ref(false); // 🔥 Loading persis kategori
+const loading = ref(false);
+
+function showAlert(type, message) {
+    alert.value = { [type]: message };
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      alert.value = null;
+    }, 5000);
+  }
 
 // Load kategori
 const loadKategori = async () => {
@@ -221,6 +250,18 @@ const closeItemModal = () => {
 onMounted(async () => {
   await loadKategori();
   await loadProduk();
+
+  // 🔹 Cek apakah ada ?message= di URL
+  const params = new URLSearchParams(window.location.search);
+  const message = params.get("message");
+
+  if (message) {
+    showAlert("success", message);
+
+    // 🔹 Hapus query param biar tidak muncul lagi pas refresh
+    const newUrl = window.location.pathname;
+    window.history.replaceState({}, document.title, newUrl);
+  }
 });
 
 // Filter produk
diff --git a/resources/js/pages/Sales.vue b/resources/js/pages/Sales.vue
index 1c0264b..55fb3e0 100644
--- a/resources/js/pages/Sales.vue
+++ b/resources/js/pages/Sales.vue
@@ -1,190 +1,236 @@
 <template>
-  <mainLayout>
-    <!-- Modal Create/Edit Sales -->
-    <CreateSales v-if="creatingSales" :isOpen="creatingSales" :sales="detail" @close="closeSales" />
+    <mainLayout>
+      <!-- Modal Create/Edit Sales -->
+      <CreateSales v-if="creatingSales" :isOpen="creatingSales" :sales="detail" @close="closeSales" />
 
-    <EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
+      <EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
 
-    <!-- Modal Delete -->
-    <ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
-      message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
+      <!-- Modal Delete -->
+      <ConfirmDeleteModal
+        :isOpen="confirmDeleteOpen"
+        title="Hapus Sales"
+        message="Apakah Anda yakin ingin menghapus sales ini?"
+        @confirm="confirmDelete"
+        @cancel="closeDeleteModal"
+      />
 
-    <div class="p-6 min-h-[75vh]">
-      <p class="font-serif italic text-[25px] text-D">SALES</p>
-      <div class="flex justify-end items-center mb-6">
-        <button @click="tambahSales"
-          v-if="isAdmin"
-          class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-          </svg>
-          Tambah Sales
+      <div class="p-6 min-h-[75vh]">
+        <p class="font-serif italic text-[25px] text-D">SALES</p>
+
+
+        <div class="flex justify-end items-center mb-6">
+            <button
+            @click="tambahSales"
+            v-if="isAdmin"
+            class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
+            >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+            Tambah Sales
         </button>
+    </div>
+    <!-- 🔹 Alert Message -->
+    <div class="px-6" v-if="alert">
+      <div
+        v-if="alert.error"
+        class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
+        role="alert"
+      >
+        <strong class="font-bold">Error! </strong>
+        <span class="block sm:inline">{{ alert.error }}</span>
       </div>
-
-      <!-- Table Section -->
-      <div class="bg-white rounded-lg shadow-md  overflow-x-auto">
-        <table class="w-full ">
-          <thead>
-            <tr class="bg-C text-white border-D border">
-              <th class="px-6 py-4 text-center border-r border-D text-D">
-                No
-              </th>
-              <th class="px-6 py-4 text-center border-r border-D text-D">
-                Nama Sales
-              </th>
-              <th class="px-6 py-4 text-center border-r border-D text-D">
-                No HP
-              </th>
-              <th class="px-6 py-4 text-center border-r border-D text-D">
-                Alamat
-              </th>
-              <th v-if="isAdmin" class="px-6 py-4 text-center text-D">
-                Aksi
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(item, index) in sales" :key="item.id"
-              class="border-b border-C border-t-0 border-x hover:bg-gray-50 transition duration-150"
-              :class="{ 'bg-gray-50': index % 2 === 1 }">
-              <td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
-                {{ index + 1 }}
-              </td>
-              <td class="px-6 py-4 border-r border-C text-D">
-                {{ item.nama }}
-              </td>
-              <td class="px-6 py-4 border-r border-C text-gray-800">
-                {{ item.no_hp }}
-              </td>
-              <td class="px-6 py-4 border-r border-C text-gray-800">
-                {{ item.alamat }}
-              </td>
-              <td class="px-6 py-4 text-center" v-if="isAdmin">
-                <div class="flex justify-center gap-2">
-                  <button @click="ubahSales(item)"
-                    class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
-                    Ubah
-                  </button>
-                  <button @click="hapusSales(item)"
-                    class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
-                    Hapus
-                  </button>
-                </div>
-              </td>
-            </tr>
-
-            <!-- Empty State -->
-            <tr v-if="sales.length === 0 && !loading">
-              <td colspan="5" class="px-6 py-8 text-center text-gray-500">
-                <div class="flex flex-col items-center">
-                  <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
-                  </svg>
-                  <p>Tidak ada data sales</p>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Loading State -->
-      <div v-if="loading" class="flex justify-center items-center py-8">
-        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
-        <span class="ml-2 text-gray-600">Memuat data...</span>
+      <div
+        v-if="alert.success"
+        class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
+        role="alert"
+      >
+        <strong class="font-bold">Success! </strong>
+        <span class="block sm:inline">{{ alert.success }}</span>
       </div>
     </div>
-  </mainLayout>
-</template>
+    <!-- 🔹 End Alert -->
 
-<script setup>
-import { ref, onMounted } from "vue";
-import axios from "axios";
-import mainLayout from "../layouts/mainLayout.vue";
-import CreateSales from "../components/CreateSales.vue";
-import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
-import EditSales from "../components/EditSales.vue";
+        <!-- Table Section -->
+        <div class="bg-white rounded-lg shadow-md overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="bg-C text-white border-D border">
+                <th class="px-6 py-4 text-center border-r border-D text-D">No</th>
+                <th class="px-6 py-4 text-center border-r border-D text-D">Nama Sales</th>
+                <th class="px-6 py-4 text-center border-r border-D text-D">No HP</th>
+                <th class="px-6 py-4 text-center border-r border-D text-D">Alamat</th>
+                <th v-if="isAdmin" class="px-6 py-4 text-center text-D">Aksi</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(item, index) in sales"
+                :key="item.id"
+                class="border-b border-C border-t-0 border-x hover:bg-gray-50 transition duration-150"
+                :class="{ 'bg-gray-50': index % 2 === 1 }"
+              >
+                <td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
+                  {{ index + 1 }}
+                </td>
+                <td class="px-6 py-4 border-r border-C text-D">{{ item.nama }}</td>
+                <td class="px-6 py-4 border-r border-C text-gray-800">{{ item.no_hp }}</td>
+                <td class="px-6 py-4 border-r border-C text-gray-800">{{ item.alamat }}</td>
+                <td class="px-6 py-4 text-center" v-if="isAdmin">
+                  <div class="flex justify-center gap-2">
+                    <button
+                      @click="ubahSales(item)"
+                      class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
+                    >
+                      Ubah
+                    </button>
+                    <button
+                      @click="hapusSales(item)"
+                      class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
+                    >
+                      Hapus
+                    </button>
+                  </div>
+                </td>
+              </tr>
 
-const isAdmin = localStorage.getItem("role") === "owner";
+              <!-- Empty State -->
+              <tr v-if="sales.length === 0 && !loading">
+                <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                  <div class="flex flex-col items-center">
+                    <svg
+                      class="w-12 h-12 text-gray-400 mb-2"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
+                      />
+                    </svg>
+                    <p>Tidak ada data sales</p>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
-// State
-const sales = ref([]);
-const loading = ref(false);
-const creatingSales = ref(false);
-const detail = ref(null);
-const editingSales = ref(false);
-const confirmDeleteOpen = ref(false);
-const salesToDelete = ref(null);
+        <!-- Loading State -->
+        <div v-if="loading" class="flex justify-center items-center py-8">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
+          <span class="ml-2 text-gray-600">Memuat data...</span>
+        </div>
+      </div>
+    </mainLayout>
+  </template>
 
-// Fetch data dari API
-const fetchSales = async () => {
-  loading.value = true;
-  try {
-    const response = await axios.get("/api/sales", {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-    });
-    sales.value = response.data;
-  } catch (error) {
-    console.error("Error fetching sales:", error);
-  } finally {
-    loading.value = false;
+  <script setup>
+  import { ref, onMounted } from "vue";
+  import axios from "axios";
+  import mainLayout from "../layouts/mainLayout.vue";
+  import CreateSales from "../components/CreateSales.vue";
+  import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
+  import EditSales from "../components/EditSales.vue";
+
+  const isAdmin = localStorage.getItem("role") === "owner";
+
+  // State
+  const sales = ref([]);
+  const loading = ref(false);
+  const creatingSales = ref(false);
+  const detail = ref(null);
+  const editingSales = ref(false);
+  const confirmDeleteOpen = ref(false);
+  const salesToDelete = ref(null);
+
+  // 🔹 Alert State
+  const alert = ref(null);
+  const timer = ref(null);
+
+  function showAlert(type, message) {
+    alert.value = { [type]: message };
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      alert.value = null;
+    }, 5000);
   }
-};
 
-// Tambah
-const tambahSales = () => {
-  detail.value = null;
-  creatingSales.value = true;
-};
+  // Fetch data dari API
+  const fetchSales = async () => {
+    loading.value = true;
+    try {
+      const response = await axios.get("/api/sales", {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+      sales.value = response.data;
+    } catch (error) {
+      console.error("Error fetching sales:", error);
+      showAlert("error", "Gagal memuat data sales.");
+    } finally {
+      loading.value = false;
+    }
+  };
 
-// Ubah
-const ubahSales = (item) => {
-  detail.value = item;
-  editingSales.value = true;
-};
+  // Tambah
+  const tambahSales = () => {
+    detail.value = null;
+    creatingSales.value = true;
+  };
 
-// Hapus
-const hapusSales = (item) => {
-  salesToDelete.value = item;
-  confirmDeleteOpen.value = true;
-};
+  // Ubah
+  const ubahSales = (item) => {
+    detail.value = item;
+    editingSales.value = true;
+  };
 
-const confirmDelete = async () => {
-  try {
-    await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-    });
-    fetchSales();
+  // Hapus
+  const hapusSales = (item) => {
+    salesToDelete.value = item;
+    confirmDeleteOpen.value = true;
+  };
+
+  const confirmDelete = async () => {
+    try {
+      await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+      fetchSales();
+      confirmDeleteOpen.value = false;
+      showAlert("success", "Sales berhasil dihapus.");
+    } catch (error) {
+      console.error("Error deleting sales:", error);
+      showAlert("error", "Gagal menghapus sales.");
+    }
+  };
+
+  const closeDeleteModal = () => {
     confirmDeleteOpen.value = false;
-  } catch (error) {
-    console.error("Error deleting sales:", error);
-  }
-};
+    salesToDelete.value = null;
+  };
 
-const closeDeleteModal = () => {
-  confirmDeleteOpen.value = false;
-  salesToDelete.value = null;
-};
+  // Tutup modal Create/Edit
+  const closeSales = () => {
+    creatingSales.value = false;
+    fetchSales();
+    showAlert("success", "Sales berhasil ditambahkan.");
+  };
 
-// Tutup modal Create/Edit
-const closeSales = () => {
-  creatingSales.value = false;
-  fetchSales();
-};
+  const closeEditSales = () => {
+    editingSales.value = false;
+    fetchSales();
+    showAlert("success", "Sales berhasil diperbarui.");
+  };
 
-const closeEditSales = () => {
-  editingSales.value = false;
-  fetchSales();
-};
-
-// Lifecycle
-onMounted(() => {
-  fetchSales();
-});
-</script>
+  // Lifecycle
+  onMounted(() => {
+    fetchSales();
+  });
+  </script>