fix: update vendor templates to use new modal_simple macro API

The modal_simple macro was simplified to use {% call %}...{% endcall %}
syntax with content passed as the caller block. Updated 5 vendor templates:

- products.html (2 modals: delete, bulk delete)
- orders.html (2 modals: status update, bulk status update)
- inventory.html (3 modals: adjust, set quantity, bulk adjust)
- order-detail.html (2 modals: status update, ship all)
- team.html (2 modals: edit member, remove member)

The new pattern provides more flexibility by allowing custom content
including buttons to be placed inside the modal body.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/templates/vendor/inventory.html

@@ -253,18 +253,10 @@
 {{ pagination(show_condition="!loading && pagination.total > 0") }}
 
 <!-- Adjust Stock Modal -->
-{{ modal_simple(
+{% call modal_simple('adjustStockModal', 'Adjust Stock', show_var='showAdjustModal', size='sm') %}
-    show_var='showAdjustModal',
+<div class="space-y-4">
-    title='Adjust Stock',
+    <template x-if="selectedItem">
-    icon='plus-minus',
+        <div>
-    icon_color='blue',
-    confirm_text='Adjust',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='executeAdjust()',
-    loading_var='saving'
-) }}
-<template x-if="showAdjustModal && selectedItem">
-    <div class="mb-4">
             <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                 Adjust stock for <span class="font-semibold" x-text="selectedItem.product_name"></span>
                 <span class="text-xs text-gray-500">(Current: <span x-text="selectedItem.quantity"></span>)</span>
@@ -289,20 +281,25 @@
             </div>
         </div>
     </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showAdjustModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="executeAdjust()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Adjust</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Set Quantity Modal -->
-{{ modal_simple(
+{% call modal_simple('setQuantityModal', 'Set Quantity', show_var='showSetModal', size='sm') %}
-    show_var='showSetModal',
+<div class="space-y-4">
-    title='Set Quantity',
+    <template x-if="selectedItem">
-    icon='pencil',
+        <div>
-    icon_color='purple',
-    confirm_text='Set',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='executeSet()',
-    loading_var='saving'
-) }}
-<template x-if="showSetModal && selectedItem">
-    <div class="mb-4">
             <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                 Set quantity for <span class="font-semibold" x-text="selectedItem.product_name"></span>
             </p>
@@ -317,20 +314,24 @@
             </div>
         </div>
     </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showSetModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="executeSet()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Set</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Bulk Adjust Modal -->
-{{ modal_simple(
+{% call modal_simple('bulkAdjustModal', 'Bulk Adjust Stock', show_var='showBulkAdjustModal', size='sm') %}
-    show_var='showBulkAdjustModal',
+<div class="space-y-4">
-    title='Bulk Adjust Stock',
+    <div>
-    icon='plus-minus',
-    icon_color='blue',
-    confirm_text='Adjust All',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='bulkAdjust()',
-    loading_var='saving'
-) }}
-<template x-if="showBulkAdjustModal">
-    <div class="mb-4">
         <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
             Adjust stock for <span class="font-semibold" x-text="selectedItems.length"></span> selected item(s)
         </p>
@@ -353,7 +354,19 @@
             />
         </div>
     </div>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showBulkAdjustModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="bulkAdjust()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Adjust All</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/order-detail.html

@@ -354,18 +354,9 @@
 </div>
 
 <!-- Status Update Modal -->
-{{ modal_simple(
+{% call modal_simple('updateOrderStatusModal', 'Update Order Status', show_var='showStatusModal', size='sm') %}
-    show_var='showStatusModal',
+<div class="space-y-4">
-    title='Update Order Status',
+    <div>
-    icon='pencil-square',
-    icon_color='blue',
-    confirm_text='Update',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='confirmStatusUpdate()',
-    loading_var='saving'
-) }}
-<template x-if="showStatusModal">
-    <div class="mb-4">
         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
         <select
             x-model="newStatus"
@@ -400,21 +391,23 @@
             </div>
         </template>
     </div>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showStatusModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="confirmStatusUpdate()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Update</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Ship All Modal -->
-{{ modal_simple(
+{% call modal_simple('shipAllModal', 'Ship All Items', show_var='showShipAllModal', size='sm') %}
-    show_var='showShipAllModal',
+<div class="space-y-4">
-    title='Ship All Items',
-    icon='truck',
-    icon_color='indigo',
-    confirm_text='Ship All',
-    confirm_class='bg-indigo-600 hover:bg-indigo-700 focus:shadow-outline-indigo',
-    confirm_fn='shipAllItems()',
-    loading_var='saving'
-) }}
-<template x-if="showShipAllModal">
-    <div class="mb-4 space-y-3">
     <p class="text-sm text-gray-600 dark:text-gray-400">
         This will ship all remaining items and mark the order as shipped.
     </p>
@@ -436,8 +429,19 @@
             class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
         />
     </div>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showShipAllModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="shipAllItems()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
+        >Ship All</button>
     </div>
-</template>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/orders.html

@@ -265,18 +265,10 @@
 {{ pagination(show_condition="!loading && pagination.total > 0") }}
 
 <!-- Status Update Modal -->
-{{ modal_simple(
+{% call modal_simple('updateStatusModal', 'Update Order Status', show_var='showStatusModal', size='sm') %}
-    show_var='showStatusModal',
+<div class="space-y-4">
-    title='Update Order Status',
+    <template x-if="selectedOrder">
-    icon='pencil-square',
+        <div>
-    icon_color='blue',
-    confirm_text='Update',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='updateStatus()',
-    loading_var='saving'
-) }}
-<template x-if="showStatusModal && selectedOrder">
-    <div class="mb-4">
             <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                 Update status for order <span class="font-semibold" x-text="selectedOrder.order_number || `#${selectedOrder.id}`"></span>
             </p>
@@ -291,20 +283,24 @@
             </select>
         </div>
     </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showStatusModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="updateStatus()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Update</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Bulk Status Update Modal -->
-{{ modal_simple(
+{% call modal_simple('bulkUpdateStatusModal', 'Bulk Update Status', show_var='showBulkStatusModal', size='sm') %}
-    show_var='showBulkStatusModal',
+<div class="space-y-4">
-    title='Bulk Update Status',
+    <div>
-    icon='pencil-square',
-    icon_color='blue',
-    confirm_text='Update All',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='bulkUpdateStatus()',
-    loading_var='saving'
-) }}
-<template x-if="showBulkStatusModal">
-    <div class="mb-4">
         <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
             Update status for <span class="font-semibold" x-text="selectedOrders.length"></span> selected order(s)
         </p>
@@ -319,7 +315,19 @@
             </template>
         </select>
     </div>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showBulkStatusModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="bulkUpdateStatus()"
+            :disabled="saving || !bulkStatus"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Update All</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/products.html

@@ -319,40 +319,48 @@
 {{ pagination(show_condition="!loading && pagination.total > 0") }}
 
 <!-- Delete Confirmation Modal -->
-{{ modal_simple(
+{% call modal_simple('deleteProductModal', 'Delete Product', show_var='showDeleteModal', size='sm') %}
-    show_var='showDeleteModal',
+<div class="space-y-4">
-    title='Delete Product',
+    <template x-if="selectedProduct">
-    icon='exclamation-triangle',
+        <p class="text-sm text-gray-600 dark:text-gray-400">
-    icon_color='red',
-    confirm_text='Delete',
-    confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
-    confirm_fn='deleteProduct()',
-    loading_var='saving'
-) }}
-<template x-if="showDeleteModal && selectedProduct">
-    <p class="text-gray-600 dark:text-gray-400 mb-4">
             Are you sure you want to delete <span class="font-semibold" x-text="selectedProduct.name"></span>?
             This action cannot be undone.
         </p>
     </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showDeleteModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="deleteProduct()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >Delete</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Bulk Delete Confirmation Modal -->
-{{ modal_simple(
+{% call modal_simple('bulkDeleteProductModal', 'Delete Selected Products', show_var='showBulkDeleteModal', size='sm') %}
-    show_var='showBulkDeleteModal',
+<div class="space-y-4">
-    title='Delete Selected Products',
+    <p class="text-sm text-gray-600 dark:text-gray-400">
-    icon='exclamation-triangle',
-    icon_color='red',
-    confirm_text='Delete All',
-    confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
-    confirm_fn='bulkDelete()',
-    loading_var='saving'
-) }}
-<template x-if="showBulkDeleteModal">
-    <p class="text-gray-600 dark:text-gray-400 mb-4">
         Are you sure you want to delete <span class="font-semibold" x-text="selectedProducts.length"></span> selected product(s)?
         This action cannot be undone.
     </p>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showBulkDeleteModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="bulkDelete()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >Delete All</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/team.html

@@ -222,18 +222,10 @@
 </div>
 
 <!-- Edit Modal -->
-{{ modal_simple(
+{% call modal_simple('editTeamMemberModal', 'Edit Team Member', show_var='showEditModal', size='sm') %}
-    show_var='showEditModal',
+<div class="space-y-4">
-    title='Edit Team Member',
+    <template x-if="selectedMember">
-    icon='pencil',
+        <div>
-    icon_color='blue',
-    confirm_text='Save',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='updateMember()',
-    loading_var='saving'
-) }}
-<template x-if="showEditModal && selectedMember">
-    <div class="mb-4">
             <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                 Edit <span class="font-semibold" x-text="selectedMember.email"></span>
             </p>
@@ -254,24 +246,42 @@
             </div>
         </div>
     </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showEditModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="updateMember()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Save</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Remove Confirmation Modal -->
-{{ modal_simple(
+{% call modal_simple('removeTeamMemberModal', 'Remove Team Member', show_var='showRemoveModal', size='sm') %}
-    show_var='showRemoveModal',
+<div class="space-y-4">
-    title='Remove Team Member',
+    <template x-if="selectedMember">
-    icon='exclamation-triangle',
+        <p class="text-sm text-gray-600 dark:text-gray-400">
-    icon_color='red',
-    confirm_text='Remove',
-    confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
-    confirm_fn='removeMember()',
-    loading_var='saving'
-) }}
-<template x-if="showRemoveModal && selectedMember">
-    <p class="text-gray-600 dark:text-gray-400 mb-4">
             Are you sure you want to remove <span class="font-semibold" x-text="selectedMember.email"></span> from the team?
             They will lose access to this vendor.
         </p>
     </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showRemoveModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="removeMember()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >Remove</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}