fix: replace all native confirm() dialogs with styled modal macros

Migrated ~68 native browser confirm() calls across 74 files to use the project's confirm_modal/confirm_modal_dynamic Jinja2 macros, providing consistent styled confirmation dialogs instead of plain browser popups. Modules updated: core, tenancy, cms, marketplace, messaging, billing, customers, orders, cart. Uses danger/warning/info variants and double-confirm pattern for destructive delete operations. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-19 16:56:25 +01:00
parent 182610283d
commit 167bb50f4f
74 changed files with 939 additions and 436 deletions
--- a/app/modules/tenancy/static/admin/js/admin-user-detail.js
+++ b/app/modules/tenancy/static/admin/js/admin-user-detail.js
@@ -17,6 +17,9 @@ function adminUserDetailPage() {
        error: null,
        userId: null,
        currentUserId: null,
+        showToggleStatusModal: false,
+        showDeleteModal: false,
+        showDeleteFinalModal: false,

        // Initialize
        async init() {
@@ -116,11 +119,6 @@ function adminUserDetailPage() {
                return;
            }

-            if (!confirm(`Are you sure you want to ${action} "${this.adminUser.username}"?`)) {
-                adminUserDetailLog.info('Status toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/admin-users/${this.userId}/status`;
@@ -142,6 +140,12 @@ function adminUserDetailPage() {
            }
        },

+        // Intermediate step for double-confirm delete
+        confirmDeleteStep() {
+            adminUserDetailLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteFinalModal = true;
+        },
+
        // Delete admin user
        async deleteAdminUser() {
            adminUserDetailLog.info('Delete admin user requested:', this.userId);
@@ -152,17 +156,6 @@ function adminUserDetailPage() {
                return;
            }

-            if (!confirm(`Are you sure you want to delete admin user "${this.adminUser.username}"?\n\nThis action cannot be undone.`)) {
-                adminUserDetailLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.adminUser.username}"?`)) {
-                adminUserDetailLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/admin-users/${this.userId}`;
--- a/app/modules/tenancy/static/admin/js/admin-user-edit.js
+++ b/app/modules/tenancy/static/admin/js/admin-user-edit.js
@@ -26,6 +26,10 @@ function adminUserEditPage() {
        // Confirmation modal state
        showRemovePlatformModal: false,
        platformToRemove: null,
+        showToggleSuperAdminModal: false,
+        showToggleStatusModal: false,
+        showDeleteModal: false,
+        showDeleteFinalModal: false,

        // Initialize
        async init() {
@@ -149,11 +153,6 @@ function adminUserEditPage() {
                return;
            }

-            if (!confirm(`Are you sure you want to ${action} super admin "${this.adminUser.username}"?`)) {
-                adminUserEditLog.info('Super admin toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/admin-users/${this.userId}/super-admin`;
@@ -192,11 +191,6 @@ function adminUserEditPage() {
                return;
            }

-            if (!confirm(`Are you sure you want to ${action} "${this.adminUser.username}"?`)) {
-                adminUserEditLog.info('Status toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/admin-users/${this.userId}/status`;
@@ -298,6 +292,12 @@ function adminUserEditPage() {
            this.selectedPlatformId = null;
        },

+        // Intermediate step for double-confirm delete
+        confirmDeleteStep() {
+            adminUserEditLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteFinalModal = true;
+        },
+
        // Delete admin user
        async deleteAdminUser() {
            adminUserEditLog.info('Delete admin user requested:', this.userId);
@@ -308,17 +308,6 @@ function adminUserEditPage() {
                return;
            }

-            if (!confirm(`Are you sure you want to delete admin user "${this.adminUser.username}"?\n\nThis action cannot be undone.`)) {
-                adminUserEditLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.adminUser.username}"?`)) {
-                adminUserEditLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/admin-users/${this.userId}`;
--- a/app/modules/tenancy/static/admin/js/admin-users.js
+++ b/app/modules/tenancy/static/admin/js/admin-users.js
@@ -17,6 +17,9 @@ function adminUsersPage() {
        loading: false,
        error: null,
        currentUserId: null,
+        showDeleteModal: false,
+        showDeleteFinalModal: false,
+        adminToDelete: null,
        filters: {
            search: '',
            is_super_admin: '',
@@ -286,6 +289,12 @@ function adminUsersPage() {
            window.location.href = `/admin/admin-users/${admin.id}/edit`;
        },

+        // Intermediate step for double-confirm delete
+        confirmDeleteStep() {
+            adminUsersLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteFinalModal = true;
+        },
+
        async deleteAdminUser(admin) {
            adminUsersLog.warn('Delete admin user requested:', admin.username);

@@ -295,17 +304,6 @@ function adminUsersPage() {
                return;
            }

-            if (!confirm(`Are you sure you want to delete admin user "${admin.username}"?\n\nThis action cannot be undone.`)) {
-                adminUsersLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${admin.username}"?`)) {
-                adminUsersLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
-
            try {
                const url = `/admin/admin-users/${admin.id}`;
                window.LogConfig.logApiCall('DELETE', url, null, 'request');
--- a/app/modules/tenancy/static/admin/js/merchant-detail.js
+++ b/app/modules/tenancy/static/admin/js/merchant-detail.js
@@ -16,6 +16,10 @@ function adminMerchantDetail() {
        error: null,
        merchantId: null,

+        // Modal state
+        showDeleteMerchantModal: false,
+        showDeleteMerchantFinalModal: false,
+
        // Subscription state
        platforms: [],
        subscriptions: [],
@@ -239,8 +243,8 @@ function adminMerchantDetail() {
            return formatted;
        },

-        // Delete merchant
-        async deleteMerchant() {
+        // Prompt delete merchant (first step of double confirm)
+        promptDeleteMerchant() {
            merchantDetailLog.info('Delete merchant requested:', this.merchantId);

            if (this.merchant?.store_count > 0) {
@@ -248,17 +252,16 @@ function adminMerchantDetail() {
                return;
            }

-            if (!confirm(`Are you sure you want to delete merchant "${this.merchant.name}"?\n\nThis action cannot be undone.`)) {
-                merchantDetailLog.info('Delete cancelled by user');
-                return;
-            }
+            this.showDeleteMerchantModal = true;
+        },

-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.merchant.name}"?`)) {
-                merchantDetailLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
+        // Confirm first step, show final confirmation
+        confirmDeleteMerchantStep() {
+            this.showDeleteMerchantFinalModal = true;
+        },

+        // Delete merchant
+        async deleteMerchant() {
            try {
                const url = `/admin/merchants/${this.merchantId}?confirm=true`;
                window.LogConfig.logApiCall('DELETE', url, null, 'request');
--- a/app/modules/tenancy/static/admin/js/merchant-edit.js
+++ b/app/modules/tenancy/static/admin/js/merchant-edit.js
@@ -18,6 +18,12 @@ function adminMerchantEdit() {
        saving: false,
        merchantId: null,

+        // Modal state
+        showToggleVerificationModal: false,
+        showToggleActiveModal: false,
+        showDeleteMerchantModal: false,
+        showDeleteMerchantFinalModal: false,
+
        // Transfer ownership state
        showTransferOwnershipModal: false,
        transferring: false,
@@ -166,11 +172,6 @@ function adminMerchantEdit() {
            const action = this.merchant.is_verified ? 'unverify' : 'verify';
            merchantEditLog.info(`Toggle verification: ${action}`);

-            if (!confirm(`Are you sure you want to ${action} this merchant?`)) {
-                merchantEditLog.info('Verification toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/merchants/${this.merchantId}/verification`;
@@ -199,11 +200,6 @@ function adminMerchantEdit() {
            const action = this.merchant.is_active ? 'deactivate' : 'activate';
            merchantEditLog.info(`Toggle active status: ${action}`);

-            if (!confirm(`Are you sure you want to ${action} this merchant?\n\nThis will affect all stores under this merchant.`)) {
-                merchantEditLog.info('Active status toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/merchants/${this.merchantId}/status`;
@@ -343,8 +339,8 @@ function adminMerchantEdit() {
            this.userSearchResults = [];
        },

-        // Delete merchant
-        async deleteMerchant() {
+        // Prompt delete merchant (first step of double confirm)
+        promptDeleteMerchant() {
            merchantEditLog.info('=== DELETING MERCHANT ===');

            if (this.merchant.store_count > 0) {
@@ -352,16 +348,17 @@ function adminMerchantEdit() {
                return;
            }

-            if (!confirm(`Are you sure you want to delete merchant "${this.merchant.name}"?\n\nThis action cannot be undone.`)) {
-                merchantEditLog.info('Merchant deletion cancelled by user');
-                return;
-            }
+            this.showDeleteMerchantModal = true;
+        },

-            // Double confirmation for critical action
-            if (!confirm(`FINAL CONFIRMATION: Delete "${this.merchant.name}"?\n\nThis will permanently delete the merchant and all its data.`)) {
-                merchantEditLog.info('Merchant deletion cancelled at final confirmation');
-                return;
-            }
+        // Confirm first step, show final confirmation
+        confirmDeleteMerchantStep() {
+            this.showDeleteMerchantFinalModal = true;
+        },
+
+        // Delete merchant
+        async deleteMerchant() {
+            merchantEditLog.info('=== DELETING MERCHANT (confirmed) ===');

            this.saving = true;
            try {
--- a/app/modules/tenancy/static/admin/js/merchant-user-detail.js
+++ b/app/modules/tenancy/static/admin/js/merchant-user-detail.js
@@ -16,6 +16,9 @@ function merchantUserDetailPage() {
        saving: false,
        error: null,
        userId: null,
+        showToggleStatusModal: false,
+        showDeleteModal: false,
+        showDeleteFinalModal: false,

        // Initialize
        async init() {
@@ -100,11 +103,6 @@ function merchantUserDetailPage() {
            const action = this.merchantUser.is_active ? 'deactivate' : 'activate';
            merchantUserDetailLog.info(`Toggle status: ${action}`);

-            if (!confirm(`Are you sure you want to ${action} "${this.merchantUser.full_name || this.merchantUser.username}"?`)) {
-                merchantUserDetailLog.info('Status toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/users/${this.userId}/status`;
@@ -126,21 +124,16 @@ function merchantUserDetailPage() {
            }
        },

+        // Intermediate step for double-confirm delete
+        confirmDeleteStep() {
+            merchantUserDetailLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteFinalModal = true;
+        },
+
        // Delete user
        async deleteUser() {
            merchantUserDetailLog.info('Delete user requested:', this.userId);

-            if (!confirm(`Are you sure you want to delete "${this.merchantUser.full_name || this.merchantUser.username}"?\n\nThis action cannot be undone.`)) {
-                merchantUserDetailLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.merchantUser.full_name || this.merchantUser.username}"?`)) {
-                merchantUserDetailLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/users/${this.userId}`;
--- a/app/modules/tenancy/static/admin/js/merchant-users.js
+++ b/app/modules/tenancy/static/admin/js/merchant-users.js
@@ -16,6 +16,11 @@ function merchantUsersPage() {
        merchantUsers: [],
        loading: false,
        error: null,
+        showToggleStatusModal: false,
+        showDeleteModal: false,
+        showDeleteFinalModal: false,
+        userToToggle: null,
+        userToDelete: null,
        filters: {
            search: '',
            is_active: ''
@@ -230,11 +235,6 @@ function merchantUsersPage() {
            const action = user.is_active ? 'deactivate' : 'activate';
            merchantUsersLog.info(`Toggle status: ${action} for user`, user.username);

-            if (!confirm(`Are you sure you want to ${action} "${user.full_name || user.username || user.email}"?`)) {
-                merchantUsersLog.info('Status toggle cancelled by user');
-                return;
-            }
-
            try {
                const url = `/admin/users/${user.id}/status`;
                window.LogConfig.logApiCall('PUT', url, null, 'request');
@@ -254,21 +254,16 @@ function merchantUsersPage() {
            }
        },

+        // Intermediate step for double-confirm delete
+        confirmDeleteStep() {
+            merchantUsersLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteFinalModal = true;
+        },
+
        // Delete user
        async deleteUser(user) {
            merchantUsersLog.warn('Delete user requested:', user.username);

-            if (!confirm(`Are you sure you want to delete "${user.full_name || user.username || user.email}"?\n\nThis action cannot be undone.`)) {
-                merchantUsersLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${user.full_name || user.username || user.email}"?`)) {
-                merchantUsersLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
-
            try {
                const url = `/admin/users/${user.id}`;
                window.LogConfig.logApiCall('DELETE', url, null, 'request');
--- a/app/modules/tenancy/static/admin/js/merchants.js
+++ b/app/modules/tenancy/static/admin/js/merchants.js
@@ -26,6 +26,10 @@ function adminMerchants() {
        loading: false,
        error: null,

+        // Modal state
+        showDeleteMerchantModal: false,
+        merchantToDelete: null,
+
        // Search and filters
        filters: {
            search: '',
@@ -192,23 +196,19 @@ function adminMerchants() {
            window.location.href = `/admin/merchants/${merchantId}/edit`;
        },

-        // Delete merchant
-        async deleteMerchant(merchant) {
+        // Prompt delete merchant modal
+        promptDeleteMerchant(merchant) {
            if (merchant.store_count > 0) {
                merchantsLog.warn('Cannot delete merchant with stores');
                Utils.showToast(`Cannot delete "${merchant.name}" because it has ${merchant.store_count} store(s). Please delete or reassign the stores first.`, 'warning');
                return;
            }
+            this.merchantToDelete = merchant;
+            this.showDeleteMerchantModal = true;
+        },

-            const confirmed = confirm(
-                `Are you sure you want to delete "${merchant.name}"?\n\nThis action cannot be undone.`
-            );
-
-            if (!confirmed) {
-                merchantsLog.info('Delete cancelled by user');
-                return;
-            }
-
+        // Delete merchant
+        async deleteMerchant(merchant) {
            try {
                merchantsLog.info('Deleting merchant:', merchant.id);

--- a/app/modules/tenancy/static/admin/js/platform-menu-config.js
+++ b/app/modules/tenancy/static/admin/js/platform-menu-config.js
@@ -18,6 +18,8 @@ function adminPlatformMenuConfig(platformCode) {
        error: null,
        successMessage: null,
        saving: false,
+        showShowAllModal: false,
+        showHideAllModal: false,

        // Data
        platform: null,
@@ -160,10 +162,6 @@ function adminPlatformMenuConfig(platformCode) {
        },

        async showAll() {
-            if (!confirm(I18n.t('tenancy.confirmations.show_all_menu_items'))) {
-                return;
-            }
-
            this.saving = true;
            this.error = null;
            this.successMessage = null;
@@ -186,10 +184,6 @@ function adminPlatformMenuConfig(platformCode) {
        },

        async resetToDefaults() {
-            if (!confirm(I18n.t('tenancy.confirmations.hide_all_menu_items'))) {
-                return;
-            }
-
            this.saving = true;
            this.error = null;
            this.successMessage = null;
--- a/app/modules/tenancy/static/admin/js/platform-modules.js
+++ b/app/modules/tenancy/static/admin/js/platform-modules.js
@@ -15,6 +15,8 @@ function adminPlatformModules(platformCode) {
        error: null,
        successMessage: null,
        saving: false,
+        showEnableAllModal: false,
+        showDisableOptionalModal: false,

        // Data
        platform: null,
@@ -176,10 +178,6 @@ function adminPlatformModules(platformCode) {
        },

        async enableAll() {
-            if (!confirm(I18n.t('tenancy.confirmations.enable_all_modules'))) {
-                return;
-            }
-
            this.saving = true;
            this.error = null;
            this.successMessage = null;
@@ -207,10 +205,6 @@ function adminPlatformModules(platformCode) {
        },

        async disableOptional() {
-            if (!confirm(I18n.t('tenancy.confirmations.disable_optional_modules'))) {
-                return;
-            }
-
            this.saving = true;
            this.error = null;
            this.successMessage = null;
--- a/app/modules/tenancy/static/admin/js/store-detail.js
+++ b/app/modules/tenancy/static/admin/js/store-detail.js
@@ -17,6 +17,8 @@ function adminStoreDetail() {
        loading: false,
        error: null,
        storeCode: null,
+        showDeleteStoreModal: false,
+        showDeleteStoreFinalModal: false,

        // Initialize
        async init() {
@@ -143,21 +145,20 @@ function adminStoreDetail() {
            return 'bg-green-500';
        },

+        // Prompt delete store (first step of double confirm)
+        promptDeleteStore() {
+            detailLog.info('Delete store requested:', this.storeCode);
+            this.showDeleteStoreModal = true;
+        },
+
+        // Confirm first step, show final confirmation
+        confirmDeleteStoreStep() {
+            detailLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteStoreFinalModal = true;
+        },
+
        // Delete store
        async deleteStore() {
-            detailLog.info('Delete store requested:', this.storeCode);
-
-            if (!confirm(`Are you sure you want to delete store "${this.store.name}"?\n\nThis action cannot be undone and will delete:\n- All products\n- All orders\n- All customers\n- All team members`)) {
-                detailLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nType the store code to confirm: ${this.store.store_code}\n\nAre you absolutely sure?`)) {
-                detailLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
-
            try {
                const url = `/admin/stores/${this.storeCode}?confirm=true`;
                window.LogConfig.logApiCall('DELETE', url, null, 'request');
@@ -189,4 +190,4 @@ function adminStoreDetail() {
    };
 }

-detailLog.info('Store detail module loaded');
+detailLog.info('Store detail module loaded');
--- a/app/modules/tenancy/static/admin/js/store-edit.js
+++ b/app/modules/tenancy/static/admin/js/store-edit.js
@@ -18,6 +18,10 @@ function adminStoreEdit() {
        loadingStore: false,
        saving: false,
        storeCode: null,
+        showToggleVerificationModal: false,
+        showToggleActiveModal: false,
+        showDeleteStoreModal: false,
+        showDeleteStoreFinalModal: false,

        // Initialize
        async init() {
@@ -166,11 +170,6 @@ function adminStoreEdit() {
            const action = this.store.is_verified ? 'unverify' : 'verify';
            editLog.info(`Toggle verification: ${action}`);

-            if (!confirm(`Are you sure you want to ${action} this store?`)) {
-                editLog.info('Verification toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/stores/${this.storeCode}/verification`;
@@ -199,11 +198,6 @@ function adminStoreEdit() {
            const action = this.store.is_active ? 'deactivate' : 'activate';
            editLog.info(`Toggle active status: ${action}`);

-            if (!confirm(`Are you sure you want to ${action} this store?\n\nThis will affect their operations.`)) {
-                editLog.info('Active status toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/stores/${this.storeCode}/status`;
@@ -227,22 +221,20 @@ function adminStoreEdit() {
            }
        },

+        // Prompt delete store (first step of double confirm)
+        promptDeleteStore() {
+            editLog.info('Delete store requested');
+            this.showDeleteStoreModal = true;
+        },
+
+        // Confirm first step, show final confirmation
+        confirmDeleteStoreStep() {
+            editLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteStoreFinalModal = true;
+        },
+
        // Delete store
        async deleteStore() {
-            editLog.info('Delete store requested');
-
-            const storeName = this.store?.name || this.storeCode;
-            if (!confirm(`Are you sure you want to delete "${storeName}"?\n\n⚠️ WARNING: This will permanently delete:\n• All products\n• All orders\n• All customers\n• All team members\n\nThis action cannot be undone!`)) {
-                editLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Double confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nType OK to permanently delete "${storeName}" and ALL associated data.`)) {
-                editLog.info('Delete cancelled at final confirmation');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/stores/${this.storeCode}?confirm=true`;
@@ -311,4 +303,4 @@ function adminStoreEdit() {
    };
 }

-editLog.info('Store edit module loaded');
+editLog.info('Store edit module loaded');
--- a/app/modules/tenancy/static/admin/js/store-theme.js
+++ b/app/modules/tenancy/static/admin/js/store-theme.js
@@ -31,6 +31,7 @@ function adminStoreTheme() {
        loading: true,
        saving: false,
        error: null,
+        showResetThemeModal: false,

        // Theme data structure matching StoreTheme model
        themeData: {
@@ -272,10 +273,6 @@ function adminStoreTheme() {
        },

        async resetTheme() {
-            if (!confirm(I18n.t('tenancy.confirmations.reset_theme'))) {
-                return;
-            }
-
            themeLog.warn('Resetting theme to default');
            this.saving = true;

@@ -332,4 +329,4 @@ function adminStoreTheme() {
 // MODULE LOADED
 // ============================================================================

-themeLog.info('Store theme editor module loaded');
+themeLog.info('Store theme editor module loaded');
--- a/app/modules/tenancy/static/admin/js/stores.js
+++ b/app/modules/tenancy/static/admin/js/stores.js
@@ -25,6 +25,8 @@ function adminStores() {
        },
        loading: false,
        error: null,
+        showDeleteStoreModal: false,
+        storeToDelete: null,

        // Search and filters
        filters: {
@@ -283,15 +285,15 @@ function adminStores() {
            window.location.href = url;
        },

+        // Prompt delete store
+        promptDeleteStore(store) {
+            storesLog.info('Delete store requested:', store.store_code);
+            this.storeToDelete = store;
+            this.showDeleteStoreModal = true;
+        },
+
        // Delete store
        async deleteStore(store) {
-            storesLog.info('Delete store requested:', store.store_code);
-
-            if (!confirm(`Are you sure you want to delete store "${store.name}"?\n\nThis action cannot be undone.`)) {
-                storesLog.info('Delete cancelled by user');
-                return;
-            }
-
            try {
                const url = `/admin/stores/${store.store_code}`;
                window.LogConfig.logApiCall('DELETE', url, null, 'request');
@@ -329,4 +331,4 @@ function adminStores() {
    };
 }

-storesLog.info('Stores module loaded');
+storesLog.info('Stores module loaded');
--- a/app/modules/tenancy/static/admin/js/user-detail.js
+++ b/app/modules/tenancy/static/admin/js/user-detail.js
@@ -16,6 +16,9 @@ function adminUserDetail() {
        saving: false,
        error: null,
        userId: null,
+        showToggleStatusModal: false,
+        showDeleteModal: false,
+        showDeleteFinalModal: false,

        // Initialize
        async init() {
@@ -97,11 +100,6 @@ function adminUserDetail() {
            const action = this.user.is_active ? 'deactivate' : 'activate';
            userDetailLog.info(`Toggle status: ${action}`);

-            if (!confirm(`Are you sure you want to ${action} ${this.user.username}?`)) {
-                userDetailLog.info('Status toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/users/${this.userId}/status`;
@@ -123,6 +121,12 @@ function adminUserDetail() {
            }
        },

+        // Intermediate step for double-confirm delete
+        confirmDeleteStep() {
+            userDetailLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteFinalModal = true;
+        },
+
        // Delete user
        async deleteUser() {
            userDetailLog.info('Delete user requested:', this.userId);
@@ -132,17 +136,6 @@ function adminUserDetail() {
                return;
            }

-            if (!confirm(`Are you sure you want to delete "${this.user.username}"?\n\nThis action cannot be undone.`)) {
-                userDetailLog.info('Delete cancelled by user');
-                return;
-            }
-
-            // Second confirmation for safety
-            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.user.username}"?`)) {
-                userDetailLog.info('Delete cancelled by user (second confirmation)');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/users/${this.userId}`;
--- a/app/modules/tenancy/static/admin/js/user-edit.js
+++ b/app/modules/tenancy/static/admin/js/user-edit.js
@@ -17,6 +17,9 @@ function adminUserEdit() {
        loadingUser: false,
        saving: false,
        userId: null,
+        showToggleStatusModal: false,
+        showDeleteModal: false,
+        showDeleteFinalModal: false,

        // Initialize
        async init() {
@@ -154,11 +157,6 @@ function adminUserEdit() {
            const action = this.user.is_active ? 'deactivate' : 'activate';
            userEditLog.info(`Toggle status: ${action}`);

-            if (!confirm(`Are you sure you want to ${action} ${this.user.username}?`)) {
-                userEditLog.info('Status toggle cancelled by user');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/users/${this.userId}/status`;
@@ -180,6 +178,12 @@ function adminUserEdit() {
            }
        },

+        // Intermediate step for double-confirm delete
+        confirmDeleteStep() {
+            userEditLog.info('First delete confirmation accepted, showing final confirmation');
+            this.showDeleteFinalModal = true;
+        },
+
        // Delete user
        async deleteUser() {
            userEditLog.info('=== DELETING USER ===');
@@ -189,17 +193,6 @@ function adminUserEdit() {
                return;
            }

-            if (!confirm(`Are you sure you want to delete user "${this.user.username}"?\n\nThis action cannot be undone.`)) {
-                userEditLog.info('User deletion cancelled by user');
-                return;
-            }
-
-            // Double confirmation for critical action
-            if (!confirm(`FINAL CONFIRMATION: Delete "${this.user.username}"?\n\nThis will permanently delete the user.`)) {
-                userEditLog.info('User deletion cancelled at final confirmation');
-                return;
-            }
-
            this.saving = true;
            try {
                const url = `/admin/users/${this.userId}`;
--- a/app/modules/tenancy/static/admin/js/users.js
+++ b/app/modules/tenancy/static/admin/js/users.js
@@ -16,6 +16,10 @@ function adminUsers() {
        users: [],
        loading: false,
        error: null,
+        showToggleStatusModal: false,
+        showDeleteModal: false,
+        userToToggle: null,
+        userToDelete: null,
        filters: {
            search: '',
            role: '',
@@ -171,15 +175,15 @@ function adminUsers() {
        // Load statistics
        async loadStats() {
            usersLog.info('Loading user statistics...');
-            
+
            try {
                const url = '/admin/users/stats';
                window.LogConfig.logApiCall('GET', url, null, 'request');
-                
+
                const response = await apiClient.get(url);  // ✅ Fixed: lowercase apiClient
-                
+
                window.LogConfig.logApiCall('GET', url, response, 'response');
-                
+
                if (response) {
                    this.stats = response;
                    usersLog.debug('Stats loaded:', this.stats);
@@ -242,23 +246,18 @@ function adminUsers() {
        async toggleUserStatus(user) {
            const action = user.is_active ? 'deactivate' : 'activate';
            usersLog.info(`Toggle user status: ${action}`, user.username);
-            
-            if (!confirm(`Are you sure you want to ${action} ${user.username}?`)) {
-                usersLog.info('Status toggle cancelled by user');
-                return;
-            }

            try {
                const url = `/admin/users/${user.id}/status`;
                window.LogConfig.logApiCall('PUT', url, { is_active: !user.is_active }, 'request');
-                
+
                await apiClient.put(url, {  // ✅ Fixed: lowercase apiClient
                    is_active: !user.is_active
                });
-                
+
                Utils.showToast(`User ${action}d successfully`, 'success');
                usersLog.info(`User ${action}d successfully`);
-                
+
                await this.loadUsers();
                await this.loadStats();
            } catch (error) {
@@ -269,21 +268,16 @@ function adminUsers() {

        async deleteUser(user) {
            usersLog.warn('Delete user requested:', user.username);
-            
-            if (!confirm(`Are you sure you want to delete ${user.username}? This action cannot be undone.`)) {
-                usersLog.info('Delete cancelled by user');
-                return;
-            }

            try {
                const url = `/admin/users/${user.id}`;
                window.LogConfig.logApiCall('DELETE', url, null, 'request');
-                
+
                await apiClient.delete(url);  // ✅ Fixed: lowercase apiClient
-                
+
                Utils.showToast(I18n.t('tenancy.messages.user_deleted_successfully'), 'success');
                usersLog.info('User deleted successfully');
-                
+
                await this.loadUsers();
                await this.loadStats();
            } catch (error) {
@@ -299,4 +293,4 @@ function adminUsers() {
    };
 }

-usersLog.info('Users module loaded');
+usersLog.info('Users module loaded');
--- a/app/modules/tenancy/templates/tenancy/admin/admin-user-detail.html
+++ b/app/modules/tenancy/templates/tenancy/admin/admin-user-detail.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/headers.html' import detail_page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}

 {% block title %}Admin User Details{% endblock %}

@@ -33,7 +34,7 @@
                Edit Admin User
            </a>
            <button
-                @click="toggleStatus()"
+                @click="showToggleStatusModal = true"
                :disabled="saving || adminUser?.id === currentUserId"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                :class="adminUser?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'"
@@ -42,7 +43,7 @@
                <span x-text="adminUser?.is_active ? 'Deactivate' : 'Activate'"></span>
            </button>
            <button
-                @click="deleteAdminUser()"
+                @click="showDeleteModal = true"
                :disabled="saving || adminUser?.id === currentUserId"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50 disabled:cursor-not-allowed"
                :title="adminUser?.id === currentUserId ? 'Cannot delete yourself' : 'Delete admin user'">
@@ -231,6 +232,42 @@
        </div>
    </div>
 </div>
+
+<!-- Toggle Status Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'toggleStatusModal',
+    'Toggle User Status',
+    "'Are you sure you want to ' + (adminUser?.is_active ? 'deactivate' : 'activate') + ' \"' + (adminUser?.username || '') + '\"?'",
+    'toggleStatus()',
+    'showToggleStatusModal',
+    'Confirm',
+    'Cancel',
+    'warning'
+) }}
+
+<!-- Delete Admin User Confirmation Modal (Step 1) -->
+{{ confirm_modal_dynamic(
+    'deleteAdminUserModal',
+    'Delete Admin User',
+    "'Are you sure you want to delete admin user \"' + (adminUser?.username || '') + '\"? This action cannot be undone.'",
+    'confirmDeleteStep()',
+    'showDeleteModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
+
+<!-- Delete Admin User Final Confirmation Modal (Step 2) -->
+{{ confirm_modal_dynamic(
+    'deleteAdminUserFinalModal',
+    'Final Confirmation',
+    "'FINAL CONFIRMATION: Are you absolutely sure you want to permanently delete \"' + (adminUser?.username || '') + '\"?'",
+    'deleteAdminUser()',
+    'showDeleteFinalModal',
+    'Permanently Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/admin-user-edit.html
+++ b/app/modules/tenancy/templates/tenancy/admin/admin-user-edit.html
@@ -25,7 +25,7 @@
        <div class="flex flex-wrap items-center gap-3">
            <!-- Toggle Active Status -->
            <button
-                @click="toggleStatus()"
+                @click="showToggleStatusModal = true"
                :disabled="saving || adminUser?.id === currentUserId"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none disabled:opacity-50"
                :class="adminUser?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'"
@@ -36,7 +36,7 @@

            <!-- Toggle Super Admin -->
            <button
-                @click="toggleSuperAdmin()"
+                @click="showToggleSuperAdminModal = true"
                :disabled="saving || (adminUser?.id === currentUserId && adminUser?.is_super_admin)"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none disabled:opacity-50"
                :class="adminUser?.is_super_admin ? 'bg-yellow-600 hover:bg-yellow-700' : 'bg-purple-600 hover:bg-purple-700'"
@@ -180,7 +180,7 @@
        <div class="flex flex-wrap items-center gap-3">
            <!-- Delete Admin User Button -->
            <button
-                @click="deleteAdminUser()"
+                @click="showDeleteModal = true"
                :disabled="saving || adminUser?.id === currentUserId"
                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50"
                :title="adminUser?.id === currentUserId ? 'Cannot delete yourself' : 'Delete this admin user'">
@@ -265,6 +265,54 @@
    'Cancel',
    'warning'
 ) }}
+
+<!-- Toggle Super Admin Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'toggleSuperAdminModal',
+    'Toggle Super Admin',
+    "'Are you sure you want to ' + (adminUser?.is_super_admin ? 'demote' : 'promote') + ' \"' + (adminUser?.username || '') + '\" ' + (adminUser?.is_super_admin ? 'from' : 'to') + ' super admin?'",
+    'toggleSuperAdmin()',
+    'showToggleSuperAdminModal',
+    'Confirm',
+    'Cancel',
+    'warning'
+) }}
+
+<!-- Toggle Status Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'toggleStatusModal',
+    'Toggle User Status',
+    "'Are you sure you want to ' + (adminUser?.is_active ? 'deactivate' : 'activate') + ' \"' + (adminUser?.username || '') + '\"?'",
+    'toggleStatus()',
+    'showToggleStatusModal',
+    'Confirm',
+    'Cancel',
+    'warning'
+) }}
+
+<!-- Delete Admin User Confirmation Modal (Step 1) -->
+{{ confirm_modal_dynamic(
+    'deleteAdminUserModal',
+    'Delete Admin User',
+    "'Are you sure you want to delete admin user \"' + (adminUser?.username || '') + '\"? This action cannot be undone.'",
+    'confirmDeleteStep()',
+    'showDeleteModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
+
+<!-- Delete Admin User Final Confirmation Modal (Step 2) -->
+{{ confirm_modal_dynamic(
+    'deleteAdminUserFinalModal',
+    'Final Confirmation',
+    "'FINAL CONFIRMATION: Are you absolutely sure you want to permanently delete \"' + (adminUser?.username || '') + '\"?'",
+    'deleteAdminUser()',
+    'showDeleteFinalModal',
+    'Permanently Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/admin-users.html
+++ b/app/modules/tenancy/templates/tenancy/admin/admin-users.html
@@ -4,6 +4,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}

 {% block title %}Admin Users{% endblock %}

@@ -239,7 +240,7 @@

                                <!-- Delete Button (disabled for self) -->
                                <button
-                                    @click="deleteAdminUser(admin)"
+                                    @click="adminToDelete = admin; showDeleteModal = true"
                                    :disabled="admin.id === currentUserId"
                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                    :title="admin.id === currentUserId ? 'Cannot delete yourself' : 'Delete admin user'"
@@ -255,6 +256,30 @@

    {{ pagination() }}
 </div>
+
+<!-- Delete Admin User Confirmation Modal (Step 1) -->
+{{ confirm_modal_dynamic(
+    'deleteAdminUserModal',
+    'Delete Admin User',
+    "'Are you sure you want to delete admin user \"' + (adminToDelete?.username || '') + '\"? This action cannot be undone.'",
+    'confirmDeleteStep()',
+    'showDeleteModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
+
+<!-- Delete Admin User Final Confirmation Modal (Step 2) -->
+{{ confirm_modal_dynamic(
+    'deleteAdminUserFinalModal',
+    'Final Confirmation',
+    "'FINAL CONFIRMATION: Are you absolutely sure you want to permanently delete \"' + (adminToDelete?.username || '') + '\"?'",
+    'deleteAdminUser(adminToDelete)',
+    'showDeleteFinalModal',
+    'Permanently Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/merchant-detail.html
+++ b/app/modules/tenancy/templates/tenancy/admin/merchant-detail.html
@@ -4,6 +4,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/headers.html' import detail_page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}

 {% block title %}Merchant Details{% endblock %}

@@ -42,7 +43,7 @@
                Create Subscription
            </button>
            <button
-                @click="deleteMerchant()"
+                @click="promptDeleteMerchant()"
                :disabled="merchant?.store_count > 0"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50 disabled:cursor-not-allowed"
                :title="merchant?.store_count > 0 ? 'Cannot delete merchant with stores' : 'Delete merchant'">
@@ -456,6 +457,28 @@
            Stores created will be associated with this merchant.
        </p>
    </div>
+
+    {{ confirm_modal_dynamic(
+        'deleteMerchantModal',
+        'Delete Merchant',
+        "'Are you sure you want to delete merchant \"' + (merchant?.name || '') + '\"? This action cannot be undone.'",
+        'confirmDeleteMerchantStep()',
+        'showDeleteMerchantModal',
+        'Continue',
+        'Cancel',
+        'danger'
+    ) }}
+
+    {{ confirm_modal_dynamic(
+        'deleteMerchantFinalModal',
+        'Final Confirmation',
+        "'Are you absolutely sure you want to delete \"' + (merchant?.name || '') + '\"?'",
+        'deleteMerchant()',
+        'showDeleteMerchantFinalModal',
+        'Delete Permanently',
+        'Cancel',
+        'danger'
+    ) }}
 </div>
 {% endblock %}

--- a/app/modules/tenancy/templates/tenancy/admin/merchant-edit.html
+++ b/app/modules/tenancy/templates/tenancy/admin/merchant-edit.html
@@ -3,6 +3,7 @@
 {% from 'shared/macros/alerts.html' import loading_state %}
 {% from 'shared/macros/inputs.html' import search_autocomplete, selected_item_display %}
 {% from 'shared/macros/headers.html' import edit_page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}

 {% block title %}Edit Merchant{% endblock %}

@@ -24,7 +25,7 @@
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <button
-                @click="toggleVerification()"
+                @click="showToggleVerificationModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="{ 'bg-orange-600 hover:bg-orange-700': merchant && merchant.is_verified, 'bg-green-600 hover:bg-green-700': merchant && !merchant.is_verified }">
@@ -33,7 +34,7 @@
            </button>

            <button
-                @click="toggleActive()"
+                @click="showToggleActiveModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="{ 'bg-red-600 hover:bg-red-700': merchant && merchant.is_active, 'bg-green-600 hover:bg-green-700': merchant && !merchant.is_active }">
@@ -290,7 +291,7 @@

            <!-- Delete Merchant Button -->
            <button
-                @click="deleteMerchant()"
+                @click="promptDeleteMerchant()"
                :disabled="saving || (merchant?.store_count > 0)"
                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50"
                :title="merchant?.store_count > 0 ? 'Cannot delete merchant with stores' : 'Delete this merchant'"
@@ -308,6 +309,50 @@
        </p>
    </div>

+    {{ confirm_modal_dynamic(
+        'toggleVerificationModal',
+        'Toggle Verification',
+        "merchant?.is_verified ? 'Are you sure you want to unverify this merchant?' : 'Are you sure you want to verify this merchant?'",
+        'toggleVerification()',
+        'showToggleVerificationModal',
+        'Confirm',
+        'Cancel',
+        'warning'
+    ) }}
+
+    {{ confirm_modal_dynamic(
+        'toggleActiveModal',
+        'Toggle Active Status',
+        "merchant?.is_active ? 'Are you sure you want to deactivate this merchant? This will affect all stores under this merchant.' : 'Are you sure you want to activate this merchant? This will affect all stores under this merchant.'",
+        'toggleActive()',
+        'showToggleActiveModal',
+        'Confirm',
+        'Cancel',
+        'warning'
+    ) }}
+
+    {{ confirm_modal_dynamic(
+        'deleteMerchantModal',
+        'Delete Merchant',
+        "'Are you sure you want to delete merchant \"' + (merchant?.name || '') + '\"? This action cannot be undone.'",
+        'confirmDeleteMerchantStep()',
+        'showDeleteMerchantModal',
+        'Continue',
+        'Cancel',
+        'danger'
+    ) }}
+
+    {{ confirm_modal_dynamic(
+        'deleteMerchantFinalModal',
+        'Final Confirmation',
+        "'FINAL CONFIRMATION: Delete \"' + (merchant?.name || '') + '\"? This will permanently delete the merchant and all its data.'",
+        'deleteMerchant()',
+        'showDeleteMerchantFinalModal',
+        'Delete Permanently',
+        'Cancel',
+        'danger'
+    ) }}
+
    {# noqa: FE-004 - Complex form modal with dynamic user search and transfer functionality #}
    <!-- Transfer Ownership Modal -->
    <div
--- a/app/modules/tenancy/templates/tenancy/admin/merchant-user-detail.html
+++ b/app/modules/tenancy/templates/tenancy/admin/merchant-user-detail.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/headers.html' import detail_page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}

 {% block title %}Merchant User Details{% endblock %}

@@ -27,7 +28,7 @@
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <button
-                @click="toggleStatus()"
+                @click="showToggleStatusModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                :class="merchantUser?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
@@ -35,7 +36,7 @@
                <span x-text="merchantUser?.is_active ? 'Deactivate' : 'Activate'"></span>
            </button>
            <button
-                @click="deleteUser()"
+                @click="showDeleteModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50 disabled:cursor-not-allowed"
                title="Delete user">
@@ -243,6 +244,39 @@
            </div>
        </div>
    </div>
+
+    {{ confirm_modal_dynamic(
+        'toggleStatusModal',
+        'Toggle User Status',
+        "merchantUser?.is_active ? 'Are you sure you want to deactivate \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"?' : 'Are you sure you want to activate \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"?'",
+        'toggleStatus()',
+        'showToggleStatusModal',
+        'Confirm',
+        'Cancel',
+        'warning'
+    ) }}
+
+    {{ confirm_modal_dynamic(
+        'deleteUserModal',
+        'Delete User',
+        "'Are you sure you want to delete \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"? This action cannot be undone.'",
+        'confirmDeleteStep()',
+        'showDeleteModal',
+        'Continue',
+        'Cancel',
+        'danger'
+    ) }}
+
+    {{ confirm_modal_dynamic(
+        'deleteUserFinalModal',
+        'Final Confirmation',
+        "'Are you absolutely sure you want to delete \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"?'",
+        'deleteUser()',
+        'showDeleteFinalModal',
+        'Delete Permanently',
+        'Cancel',
+        'danger'
+    ) }}
 </div>
 {% endblock %}

--- a/app/modules/tenancy/templates/tenancy/admin/merchant-users.html
+++ b/app/modules/tenancy/templates/tenancy/admin/merchant-users.html
@@ -4,6 +4,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/modals.html' import confirm_modal, confirm_modal_dynamic %}

 {% block title %}Merchant Users{% endblock %}

@@ -198,7 +199,7 @@

                                <!-- Toggle Status Button -->
                                <button
-                                    @click="toggleUserStatus(user)"
+                                    @click="userToToggle = user; showToggleStatusModal = true"
                                    class="flex items-center justify-center p-2 rounded-lg hover:bg-orange-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                                    :class="user.is_active ? 'text-orange-600 dark:text-orange-400' : 'text-green-600 dark:text-green-400'"
                                    :title="user.is_active ? 'Deactivate user' : 'Activate user'"
@@ -208,7 +209,7 @@

                                <!-- Delete Button -->
                                <button
-                                    @click="deleteUser(user)"
+                                    @click="userToDelete = user; showDeleteModal = true"
                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                                    title="Delete user"
                                >
@@ -223,6 +224,42 @@

    {{ pagination() }}
 </div>
+
+<!-- Toggle Status Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'toggleStatusModal',
+    'Toggle User Status',
+    "'Are you sure you want to ' + (userToToggle?.is_active ? 'deactivate' : 'activate') + ' \"' + (userToToggle?.full_name || userToToggle?.username || userToToggle?.email || '') + '\"?'",
+    'toggleUserStatus(userToToggle)',
+    'showToggleStatusModal',
+    'Confirm',
+    'Cancel',
+    'warning'
+) }}
+
+<!-- Delete User Confirmation Modal (Step 1) -->
+{{ confirm_modal_dynamic(
+    'deleteUserModal',
+    'Delete User',
+    "'Are you sure you want to delete \"' + (userToDelete?.full_name || userToDelete?.username || userToDelete?.email || '') + '\"? This action cannot be undone.'",
+    'confirmDeleteStep()',
+    'showDeleteModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
+
+<!-- Delete User Final Confirmation Modal (Step 2) -->
+{{ confirm_modal_dynamic(
+    'deleteUserFinalModal',
+    'Final Confirmation',
+    "'FINAL CONFIRMATION: Are you absolutely sure you want to permanently delete \"' + (userToDelete?.full_name || userToDelete?.username || userToDelete?.email || '') + '\"?'",
+    'deleteUser(userToDelete)',
+    'showDeleteFinalModal',
+    'Permanently Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/merchants.html
+++ b/app/modules/tenancy/templates/tenancy/admin/merchants.html
@@ -4,6 +4,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}

 {% block title %}Merchants{% endblock %}

@@ -225,7 +226,7 @@

                                <!-- Delete Button -->
                                <button
-                                    @click="deleteMerchant(merchant)"
+                                    @click="promptDeleteMerchant(merchant)"
                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                                    title="Delete merchant"
                                    :disabled="merchant.store_count > 0"
@@ -242,6 +243,17 @@

    {{ pagination() }}
 </div>
+
+{{ confirm_modal_dynamic(
+    'deleteMerchantModal',
+    'Delete Merchant',
+    "'Are you sure you want to delete \"' + (merchantToDelete?.name || '') + '\"? This action cannot be undone.'",
+    'deleteMerchant(merchantToDelete)',
+    'showDeleteMerchantModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/module-config.html
+++ b/app/modules/tenancy/templates/tenancy/admin/module-config.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
 {% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal %}

 {% block title %}Module Configuration{% endblock %}

@@ -121,7 +122,7 @@
    <!-- Actions -->
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <button
-            @click="resetToDefaults()"
+            @click="showResetConfirm = true"
            :disabled="saving"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600 disabled:opacity-50"
        >
@@ -141,6 +142,9 @@
    </div>
 </div>

+<!-- Reset to Defaults Confirm Modal -->
+{{ confirm_modal('resetConfirm', 'Reset Configuration', 'This will reset all configuration options to their default values. This action cannot be undone.', 'resetToDefaults()', 'showResetConfirm', 'Reset to Defaults', 'Cancel', 'warning') }}
+
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/platform-menu-config.html
+++ b/app/modules/tenancy/templates/tenancy/admin/platform-menu-config.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
 {% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal %}

 {% block title %}Menu Configuration{% endblock %}

@@ -94,7 +95,7 @@
    </p>
    <div class="flex gap-2">
        <button
-            @click="showAll()"
+            @click="showShowAllModal = true"
            :disabled="saving"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
        >
@@ -102,7 +103,7 @@
            Show All
        </button>
        <button
-            @click="resetToDefaults()"
+            @click="showHideAllModal = true"
            :disabled="saving"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
        >
@@ -193,6 +194,30 @@
    </div>
 </div>

+<!-- Show All Menu Items Confirmation Modal -->
+{{ confirm_modal(
+    'showAllModal',
+    'Show All Menu Items',
+    'Are you sure you want to show all menu items? This will make all non-mandatory items visible.',
+    'showAll()',
+    'showShowAllModal',
+    'Show All',
+    'Cancel',
+    'info'
+) }}
+
+<!-- Hide All Menu Items Confirmation Modal -->
+{{ confirm_modal(
+    'hideAllModal',
+    'Hide All Menu Items',
+    'Are you sure you want to hide all optional menu items? Only mandatory items will remain visible.',
+    'resetToDefaults()',
+    'showHideAllModal',
+    'Hide All',
+    'Cancel',
+    'warning'
+) }}
+
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/platform-modules.html
+++ b/app/modules/tenancy/templates/tenancy/admin/platform-modules.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
 {% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal %}

 {% block title %}Module Configuration{% endblock %}

@@ -76,7 +77,7 @@
    </p>
    <div class="flex gap-2">
        <button
-            @click="enableAll()"
+            @click="showEnableAllModal = true"
            :disabled="saving"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
        >
@@ -84,7 +85,7 @@
            Enable All
        </button>
        <button
-            @click="disableOptional()"
+            @click="showDisableOptionalModal = true"
            :disabled="saving"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
        >
@@ -275,6 +276,30 @@
    </div>
 </div>

+<!-- Enable All Modules Confirmation Modal -->
+{{ confirm_modal(
+    'enableAllModal',
+    'Enable All Modules',
+    'Are you sure you want to enable all modules? This will activate all optional modules for this platform.',
+    'enableAll()',
+    'showEnableAllModal',
+    'Enable All',
+    'Cancel',
+    'info'
+) }}
+
+<!-- Disable Optional Modules Confirmation Modal -->
+{{ confirm_modal(
+    'disableOptionalModal',
+    'Disable Optional Modules',
+    'Are you sure you want to disable all optional modules? Only core modules will remain enabled.',
+    'disableOptional()',
+    'showDisableOptionalModal',
+    'Disable Optional',
+    'Cancel',
+    'warning'
+) }}
+
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/store-detail.html
+++ b/app/modules/tenancy/templates/tenancy/admin/store-detail.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/headers.html' import detail_page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal, confirm_modal_dynamic %}

 {% block title %}Store Details{% endblock %}

@@ -33,7 +34,7 @@
                Edit Store
            </a>
            <button
-                @click="deleteStore()"
+                @click="promptDeleteStore()"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red">
                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
                Delete Store
@@ -385,6 +386,30 @@
            Contact info and ownership are managed at the merchant level.
        </p>
    </div>
+
+    <!-- Delete Store Confirmation Modal (Step 1) -->
+    {{ confirm_modal_dynamic(
+        'deleteStoreModal',
+        'Delete Store',
+        "'Are you sure you want to delete \"' + (store?.name || '') + '\"? This will permanently delete all products, orders, customers, and team members. This action cannot be undone!'",
+        'confirmDeleteStoreStep()',
+        'showDeleteStoreModal',
+        'Delete',
+        'Cancel',
+        'danger'
+    ) }}
+
+    <!-- Delete Store Final Confirmation Modal (Step 2) -->
+    {{ confirm_modal_dynamic(
+        'deleteStoreFinalModal',
+        'Final Confirmation',
+        "'FINAL CONFIRMATION: Are you absolutely sure you want to permanently delete \"' + (store?.name || '') + '\" and ALL associated data?'",
+        'deleteStore()',
+        'showDeleteStoreFinalModal',
+        'Permanently Delete',
+        'Cancel',
+        'danger'
+    ) }}
 </div>
 {% endblock %}

--- a/app/modules/tenancy/templates/tenancy/admin/store-edit.html
+++ b/app/modules/tenancy/templates/tenancy/admin/store-edit.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import loading_state %}
 {% from 'shared/macros/headers.html' import edit_page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal, confirm_modal_dynamic %}

 {% block title %}Edit Store{% endblock %}

@@ -25,7 +26,7 @@
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <button
-                @click="toggleVerification()"
+                @click="showToggleVerificationModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="store?.is_verified ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
@@ -34,7 +35,7 @@
            </button>

            <button
-                @click="toggleActive()"
+                @click="showToggleActiveModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="store?.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
@@ -425,6 +426,54 @@
        </div>
    </form>
 </div>
+
+<!-- Toggle Verification Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'toggleVerificationModal',
+    'Toggle Store Verification',
+    "store?.is_verified ? 'Are you sure you want to unverify this store?' : 'Are you sure you want to verify this store?'",
+    'toggleVerification()',
+    'showToggleVerificationModal',
+    'Confirm',
+    'Cancel',
+    'warning'
+) }}
+
+<!-- Toggle Active Status Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'toggleActiveModal',
+    'Toggle Store Status',
+    "store?.is_active ? 'Are you sure you want to deactivate this store? This will affect their operations.' : 'Are you sure you want to activate this store?'",
+    'toggleActive()',
+    'showToggleActiveModal',
+    'Confirm',
+    'Cancel',
+    'warning'
+) }}
+
+<!-- Delete Store Confirmation Modal (Step 1) -->
+{{ confirm_modal_dynamic(
+    'deleteStoreModal',
+    'Delete Store',
+    "'Are you sure you want to delete \"' + (store?.name || '') + '\"? This will permanently delete all products, orders, customers, and team members. This action cannot be undone!'",
+    'confirmDeleteStoreStep()',
+    'showDeleteStoreModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
+
+<!-- Delete Store Final Confirmation Modal (Step 2) -->
+{{ confirm_modal_dynamic(
+    'deleteStoreFinalModal',
+    'Final Confirmation',
+    "'FINAL CONFIRMATION: Are you absolutely sure you want to permanently delete \"' + (store?.name || '') + '\" and ALL associated data?'",
+    'deleteStore()',
+    'showDeleteStoreFinalModal',
+    'Permanently Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/store-theme.html
+++ b/app/modules/tenancy/templates/tenancy/admin/store-theme.html
@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/headers.html' import page_header_flex %}
+{% from 'shared/macros/modals.html' import confirm_modal %}

 {% block title %}Theme Editor - {{ store_code }}{% endblock %}

@@ -330,7 +331,7 @@

        <!-- Action Buttons -->
        <div class="flex justify-between items-center">
-            <button @click="resetToDefault()"
+            <button @click="showResetThemeModal = true"
                    :disabled="saving"
                    class="px-4 py-2 text-sm font-medium leading-5 text-red-700 transition-colors duration-150 bg-white border border-red-300 rounded-lg hover:bg-red-50 focus:outline-none disabled:opacity-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-600">
                <span x-html="$icon('refresh', 'inline w-4 h-4 mr-2')"></span>
@@ -443,6 +444,18 @@
        </div>
    </div>
 </div>
+
+<!-- Reset Theme Confirmation Modal -->
+{{ confirm_modal(
+    'resetThemeModal',
+    'Reset Theme',
+    'Are you sure you want to reset the theme to default? All customizations will be lost.',
+    'resetTheme()',
+    'showResetThemeModal',
+    'Reset',
+    'Cancel',
+    'warning'
+) }}
 {% endblock %}

 {% block extra_scripts %}
--- a/app/modules/tenancy/templates/tenancy/admin/stores.html
+++ b/app/modules/tenancy/templates/tenancy/admin/stores.html
@@ -4,6 +4,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/modals.html' import confirm_modal, confirm_modal_dynamic %}

 {% block title %}Stores{% endblock %}

@@ -210,7 +211,7 @@

                                <!-- Delete Button -->
                                <button
-                                    @click="deleteStore(store)"
+                                    @click="promptDeleteStore(store)"
                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                                    title="Delete store"
                                >
@@ -225,6 +226,18 @@

    {{ pagination() }}
 </div>
+
+<!-- Delete Store Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'deleteStoreModal',
+    'Delete Store',
+    "'Are you sure you want to delete \"' + (storeToDelete?.name || '') + '\"? This action cannot be undone.'",
+    'deleteStore(storeToDelete)',
+    'showDeleteStoreModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}

 {% block extra_scripts %}