admin and vendor backends features

static/js/shared/modal-templates.js

@@ -0,0 +1,114 @@
+/**
+ * Universal Modal Templates
+ * Shared across all sections: Admin, Vendor, and Shop
+ */
+
+window.modalTemplates = {
+
+    /**
+     * Confirmation Modal
+     */
+    confirmModal: () => `
+        <div x-show="confirmModal.show"
+             x-cloak
+             class="modal-backdrop"
+             @click.self="closeConfirmModal()">
+            <div class="modal-container" @click.stop>
+                <div class="modal-header">
+                    <h3 class="modal-title" x-text="confirmModal.title"></h3>
+                    <button @click="closeConfirmModal()" class="modal-close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p class="modal-message" x-text="confirmModal.message"></p>
+                    <div x-show="confirmModal.warning" class="modal-warning">
+                        <p x-text="confirmModal.warning"></p>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button @click="closeConfirmModal()" class="btn btn-outline">
+                        Cancel
+                    </button>
+                    <button @click="handleConfirm()"
+                            class="btn"
+                            :class="confirmModal.buttonClass"
+                            x-text="confirmModal.buttonText">
+                    </button>
+                </div>
+            </div>
+        </div>
+    `,
+
+    /**
+     * Success Modal
+     */
+    successModal: () => `
+        <div x-show="successModal.show"
+             x-cloak
+             class="modal-backdrop"
+             @click.self="closeSuccessModal()">
+            <div class="modal-container" @click.stop>
+                <div class="modal-header">
+                    <h3 class="modal-title" x-text="successModal.title"></h3>
+                    <button @click="closeSuccessModal()" class="modal-close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="modal-icon success">
+                        <i class="fas fa-check"></i>
+                    </div>
+                    <p class="modal-message text-center" x-text="successModal.message"></p>
+                </div>
+                <div class="modal-footer">
+                    <button @click="closeSuccessModal()" class="btn btn-primary">
+                        OK
+                    </button>
+                </div>
+            </div>
+        </div>
+    `,
+
+    /**
+     * Error Modal
+     */
+    errorModal: () => `
+        <div x-show="errorModal.show"
+             x-cloak
+             class="modal-backdrop"
+             @click.self="closeErrorModal()">
+            <div class="modal-container" @click.stop>
+                <div class="modal-header">
+                    <h3 class="modal-title" x-text="errorModal.title"></h3>
+                    <button @click="closeErrorModal()" class="modal-close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="modal-icon error">
+                        <i class="fas fa-exclamation-triangle"></i>
+                    </div>
+                    <p class="modal-message text-center" x-text="errorModal.message"></p>
+                    <div x-show="errorModal.details" class="modal-details" x-text="errorModal.details"></div>
+                </div>
+                <div class="modal-footer">
+                    <button @click="closeErrorModal()" class="btn btn-primary">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    `,
+
+    /**
+     * Loading Overlay
+     */
+    loadingOverlay: () => `
+        <div x-show="loading"
+             x-cloak
+             class="loading-overlay">
+            <div class="loading-spinner"></div>
+        </div>
+    `
+};