Add reusable error modal component for API and system errors

assets/css/style.css

@@ -332,4 +332,44 @@ input {
     .items-cell li {
         font-size: 12px;
     }
+}
+
+/*Modal*/
+#error-modal .modal-content {
+    border-radius: 14px;
+    border: none;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    font-family: 'cremona', serif;
+}
+
+#error-modal .modal-header {
+    background-color: #d9534f;
+    border-top-left-radius: 14px;
+    border-top-right-radius: 14px;
+    padding: 1rem 1.5rem;
+}
+
+#error-modal .modal-title {
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#error-modal .modal-body {
+    padding: 2rem 1.5rem;
+    font-size: 1.1rem;
+    color: #374151;
+}
+
+#error-modal .modal-footer {
+    border-top: 1px solid #eee;
+    padding: 1rem;
+}
+
+.modal-backdrop {
+    z-index: 1040 !important;
+}
+.modal {
+    z-index: 1050 !important;
 }

assets/js/cart.js

@@ -20,17 +20,25 @@ function updatePrice(id, price) {
 
 // Add selected size to cart
 function addSelectedToCart(id, name, mediumPrice, largePrice) {
+    try {
+        let sizeInput = document.querySelector('input[name="size' + id + '"]:checked');
 
-    let size = document.querySelector('input[name="size' + id + '"]:checked').value;
+        if (!sizeInput) {
+            ErrorHandler.show("Please select a size before adding to cart.", "Selection Required");
+            return;
+        }
 
-    let price = size === "medium" ? mediumPrice : largePrice;
+        let size = sizeInput.value;
+        let price = size === "medium" ? mediumPrice : largePrice;
+        let itemName = name + " (" + size + ")";
 
-    let itemName = name + " (" + size + ")";
+        // Make unique ID for size
+        let uniqueId = id + "_" + size;
 
-    // Make unique ID for size
-    let uniqueId = id + "_" + size;
-
-    addToCart(uniqueId, itemName, price);
+        addToCart(uniqueId, itemName, price);
+    } catch (err) {
+        ErrorHandler.show("An error occurred while adding the item to the cart.", "System Error");
+    }
 }
 
 // Update cart display
@@ -135,7 +143,7 @@ document.addEventListener("DOMContentLoaded", () => {
 function checkout() {
 
     if (cart.length === 0) {
-        alert("Cart is empty!");
+        ErrorHandler.show("Your cart is empty! Please add items before placing an order.", "Empty Cart");
         return;
     }
 
@@ -162,7 +170,10 @@ function checkout() {
         })
     })
 
-        .then(res => res.text())
+        .then(res => {
+            if (!res.ok) throw new Error("Server error (HTTP " + res.status + ")");
+            return res.text();
+        })
 
         .then(response => {
 
@@ -179,7 +190,11 @@ function checkout() {
 
         .catch(err => {
 
-            alert("Error: " + err);
+            ErrorHandler.show(
+                "Could not send the order to the server. Please check your connection or try again later.",
+                "Order Error"
+            );
+            console.error("Checkout Error:", err);
 
         });
 }
@@ -196,9 +211,26 @@ function updateStatus(orderId, status) {
         body: JSON.stringify({ id: orderId, status: status })
 
     })
+        .then(res => {
+            if (!res.ok) throw new Error("Failed to connect to server.");
+            return res.text();
+        })
+        .then(msg => {
+            alert("Status Updated: " + msg);
+        })
+        .catch(err => {
+            ErrorHandler.show(
+                "Failed to update order status. Please try again.",
+                "Update Error"
+            );
+            console.error("Update Status Error:", err);
+        });
+}
 
-        .then(res => res.text())
-
-        .then(msg => alert(msg));
-
-}
+document.addEventListener("DOMContentLoaded", () => {
+    const discountInput = document.getElementById("discountPercent");
+    if (discountInput) {
+        discountInput.addEventListener("input", updateCart);
+    }
+    updateCart();
+});

assets/js/notif.js

@@ -1,3 +1,31 @@
+/* ERROR MODAL LOGIC */
+const ErrorHandler = {
+    bootstrapModal: null,
+
+    init() {
+        const modalElem = document.getElementById('error-modal');
+        if (modalElem) {
+            if (!this.bootstrapModal) {
+                this.bootstrapModal = new bootstrap.Modal(modalElem);
+            }
+            this.titleElem = document.getElementById('modal-title');
+            this.messageElem = document.getElementById('modal-message');
+            return true;
+        }
+        return false;
+    },
+
+    show(message, title = "Something Went Wrong") {
+        if (this.init()) {
+            this.titleElem.innerText = title;
+            this.messageElem.innerText = message;
+            this.bootstrapModal.show();
+        } else {
+            alert(`${title}: ${message}`);
+        }
+        console.error(`[System Error] ${title}: ${message}`);
+    }
+};
 (() => {
     let lastCount = 0;
 
@@ -8,7 +36,11 @@
     /* NOTIFICATIONS (GLOBAL)*/
     function loadNotifications() {
         fetch(notifUrl + '?t=' + Date.now())
-            .then(res => res.json())
+            .then(res => {
+                if (!res.ok) throw new Error("Database unavailable" + res.status);
+                return res.json();
+            })
+
             .then(data => {
                 const count = parseInt(data.count) || 0;
 
@@ -27,7 +59,11 @@
 
                 lastCount = count;
             })
-            .catch(err => console.error('Notif error:', err));
+
+            .catch(err => {
+                ErrorHandler.show("Failed to check for new notifications.", "Notification Error");
+                console.error('Notif error:', err);
+            });
     }
 
     /*  VIEW.PHP (ORDERS GRID)*/
@@ -36,11 +72,18 @@
         if (!container) return; // only runs on view.php
 
         fetch(orderUrl + '?t=' + Date.now())
-            .then(res => res.text())
+            .then(res => {
+                if (!res.ok) throw new Error("HTTP error " + res.status);
+                return res.text();
+            })
+
             .then(html => {
                 container.innerHTML = html;
             })
-            .catch(err => console.error('Orders error:', err));
+            .catch(err => {
+                ErrorHandler.show("Failed to load order data from the server.", "Data Load Error");
+                console.error('Orders error:', err);
+            });
     }
 
     /* Dashboard
@@ -97,4 +140,7 @@
         startAutoRefresh();
     });
 
-})();
+})();
+
+<!--Example integration-->
+// ErrorHandler.show("Frontend trigger test success!", "System Check");

assets/js/orders.js

@@ -4,7 +4,10 @@ const BASE_URL = "http://localhost/Nadine-system/src/order/";
 // View Items button
 function viewItems(orderId) {
     fetch(`${BASE_URL}order_details.php?order_id=${orderId}&ajax=1`)
-        .then(res => res.json())
+        .then(res => {
+            if (!res.ok) throw new Error("Failed to fetch order details.");
+            return res.json();
+        })
         .then(data => {
             let html = "<ul>";
             data.items.forEach(item => {
@@ -16,7 +19,10 @@ function viewItems(orderId) {
             document.getElementById('modal-special-instructions').innerText = data.notes || '-';
             document.getElementById('itemsModal').style.display = 'flex';
         })
-        .catch(err => console.error("Error fetching items:", err));
+        .catch(err => {
+            ErrorHandler.show("Could not load the order items. Please try again.", "Load Error");
+            console.error("Fetch items error:", err);
+        });
 }
 
 // Close modal
@@ -28,12 +34,18 @@ function closeModal() {
 function deleteOrder(orderId) {
     if (!confirm("Are you sure you want to delete this order?")) return;
     fetch(`${BASE_URL}delete_order.php?id=${orderId}`)
-        .then(res => res.text())
+        .then(res => {
+            if (!res.ok) throw new Error("Failed to delete the order.");
+            return res.text();
+        })
         .then(msg => {
             alert(msg);
             location.reload();
         })
-        .catch(err => console.error("Error deleting order:", err));
+        .catch(err => {
+            ErrorHandler.show("An error occurred while trying to delete the order.", "Delete Error");
+            console.error("Delete error:", err);
+        });
 }
 
 // Update Status dropdown
@@ -43,18 +55,30 @@ function updateStatus(orderId, status) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ id: orderId, status: status })
     })
-        .then(res => res.text())
+        .then(res => {
+            if (!res.ok) throw new Error("Status update failed.");
+            return res.text();
+        })
         .then(msg => alert(msg))
-        .catch(err => console.error("Error updating status:", err));
+        .catch(err => {
+            ErrorHandler.show("Failed to update the order status. Please check your connection.", "Update Error");
+            console.error("Status update error:", err);
+        });
 }
 function updatePaymentStatus(orderID, paymentStatus) {
     fetch(`${BASE_URL}upPayment_status.php`, {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({ id: orderID, payment_status: paymentStatus })
     })
-        .then(res => res.text())
+        .then(res => {
+            if (!res.ok) throw new Error("Payment status update failed.");
+            return res.text();
+        })
         .then(data => {console.log(data);
         })
-        .catch(err => console.error(err));
+        .catch(err => {
+            ErrorHandler.show("Could not update the payment status. Please try again.", "Payment Update Error");
+            console.error("Payment status error:", err);
+        });
 }

index.php

@@ -7,7 +7,7 @@
 $total_amount = $conn->query("
     SELECT SUM(oi.price * oi.quantity) AS total
     FROM order_items oi
-    JOIN orders o ON oi.orderID = o.orderID 
+    JOIN orders o ON oi.orderID = o.orderID
     WHERE o.payment_status = 'Paid'
 ")->fetch_assoc()['total'] ?? 0;
 
@@ -57,9 +57,6 @@
 
 <head>
     <title>Dashboard</title>
-    <link rel="stylesheet" href="<?= $base_url ?>assets/css/style.css">
-    <link rel="stylesheet" href="<?= $base_url ?>assets/css/sidebar.css">
-    <link rel="stylesheet" href="<?= $base_url ?>assets/icon/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
     <style>
@@ -128,7 +125,12 @@
         <?php include 'src/dashboard/recent_orders.php'; ?>
 
     </div>
-    <script src="<?= $base_url ?>assets/js/notif.js"></script>
+
+    <!--Example integration-->
+<!--    <button type="button" class="btn btn-warning"-->
+<!--            onclick="ErrorHandler.show('The manual test was successful!', 'Manual Test')">-->
+<!--        Test Error Modal-->
+<!--    </button>-->
 
 </body>
 

src/dashboard/recent_orders.php

@@ -92,4 +92,4 @@
             <?php endif; ?>
         </div>
     </div>
-</dev>
+</div>