[update] alert respon messae

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

resources/js/pages/EditProduk.vue

@@ -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);

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);

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

resources/js/pages/Produk.vue

@@ -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

resources/js/pages/Sales.vue

@@ -6,68 +6,88 @@
       <EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
 
       <!-- Modal Delete -->
-    <ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
+      <ConfirmDeleteModal
-      message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
+        :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"
+            <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">
+            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>
+      <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-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">
+                <th class="px-6 py-4 text-center border-r border-D text-D">No</th>
-                No
+                <th class="px-6 py-4 text-center border-r border-D text-D">Nama Sales</th>
-              </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">
+                <th class="px-6 py-4 text-center border-r border-D text-D">Alamat</th>
-                Nama Sales
+                <th v-if="isAdmin" class="px-6 py-4 text-center text-D">Aksi</th>
-              </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"
+              <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 }">
+                :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">
+                <td class="px-6 py-4 border-r border-C text-D">{{ item.nama }}</td>
-                {{ item.nama }}
+                <td class="px-6 py-4 border-r border-C text-gray-800">{{ item.no_hp }}</td>
-              </td>
+                <td class="px-6 py-4 border-r border-C text-gray-800">{{ item.alamat }}</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)"
+                    <button
-                    class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
+                      @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)"
+                    <button
-                    class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
+                      @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>
@@ -78,9 +98,18 @@
               <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">
+                    <svg
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      class="w-12 h-12 text-gray-400 mb-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" />
+                      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>
@@ -118,6 +147,18 @@ 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);
+  }
+
   // Fetch data dari API
   const fetchSales = async () => {
     loading.value = true;
@@ -130,6 +171,7 @@ const fetchSales = async () => {
       sales.value = response.data;
     } catch (error) {
       console.error("Error fetching sales:", error);
+      showAlert("error", "Gagal memuat data sales.");
     } finally {
       loading.value = false;
     }
@@ -162,8 +204,10 @@ const confirmDelete = async () => {
       });
       fetchSales();
       confirmDeleteOpen.value = false;
+      showAlert("success", "Sales berhasil dihapus.");
     } catch (error) {
       console.error("Error deleting sales:", error);
+      showAlert("error", "Gagal menghapus sales.");
     }
   };
 
@@ -176,11 +220,13 @@ const closeDeleteModal = () => {
   const closeSales = () => {
     creatingSales.value = false;
     fetchSales();
+    showAlert("success", "Sales berhasil ditambahkan.");
   };
 
   const closeEditSales = () => {
     editingSales.value = false;
     fetchSales();
+    showAlert("success", "Sales berhasil diperbarui.");
   };
 
   // Lifecycle