sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add bulk operations to vendor pages

Browse Source 
Add selection and bulk actions to products, orders, and inventory:
- Products: bulk activate/deactivate, feature/unfeature, delete
- Orders: bulk status update, CSV export
- Inventory: bulk stock adjustment, CSV export

All pages include select-all checkbox, row selection highlighting,
and action bars with operation buttons.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-01-01 16:58:27 +01:00
parent 646d789af7
commit abeacbe25a
7 changed files with 760 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/templates/vendor/inventory.html vendored
View File

@@ -120,12 +120,54 @@
</div>
</div>
<!-- Bulk Actions Bar -->
<div x-show="!loading && selectedItems.length > 0"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
class="mb-4 p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-purple-700 dark:text-purple-300">
<span x-text="selectedItems.length"></span> item(s) selected
</span>
<button @click="clearSelection()" class="text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400">
Clear
</button>
</div>
<div class="flex items-center gap-2">
<button
@click="openBulkAdjustModal()"
:disabled="saving"
class="px-3 py-1.5 text-sm font-medium text-blue-700 bg-blue-100 rounded-lg hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 disabled:opacity-50"
>
<span x-html="$icon('plus-minus', 'w-4 h-4 inline mr-1')"></span>
Bulk Adjust
</button>
<button
@click="exportSelectedItems()"
class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
>
<span x-html="$icon('arrow-down-tray', 'w-4 h-4 inline mr-1')"></span>
Export CSV
</button>
</div>
</div>
<!-- Inventory Table -->
<div x-show="!loading && !error" class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3 w-10">
<input
type="checkbox"
:checked="allSelected"
:indeterminate="someSelected"
@click="toggleSelectAll()"
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
/>
</th>
<th class="px-4 py-3">Product</th>
<th class="px-4 py-3">SKU</th>
<th class="px-4 py-3">Location</th>
@@ -136,7 +178,16 @@
</thead>
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-for="item in inventory" :key="item.id">
<tr class="text-gray-700 dark:text-gray-400">
<tr class="text-gray-700 dark:text-gray-400" :class="{'bg-purple-50 dark:bg-purple-900/10': isSelected(item.id)}">
<!-- Checkbox -->
<td class="px-4 py-3">
<input
type="checkbox"
:checked="isSelected(item.id)"
@click="toggleSelect(item.id)"
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
/>
</td>
<!-- Product -->
<td class="px-4 py-3">
<div class="text-sm">
@@ -185,7 +236,7 @@
</template>
<!-- Empty State -->
<tr x-show="inventory.length === 0">
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<div class="flex flex-col items-center">
<span x-html="$icon('archive', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
<p class="text-lg font-medium">No inventory found</p>
@@ -278,6 +329,43 @@
</div>
</div>
</template>
<!-- Bulk Adjust Modal -->
{{ modal_simple(
show_var='showBulkAdjustModal',
title='Bulk Adjust Stock',
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>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
<input
type="number"
x-model.number="bulkAdjustForm.quantity"
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
placeholder="e.g., 10 or -5"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
<input
type="text"
x-model="bulkAdjustForm.reason"
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
placeholder="e.g., Restock, Damaged goods"
/>
</div>
</div>
</template>
{% endblock %}
{% block extra_scripts %}

84
app/templates/vendor/orders.html vendored
View File

@@ -126,12 +126,54 @@
</div>
</div>
<!-- Bulk Actions Bar -->
<div x-show="!loading && selectedOrders.length > 0"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
class="mb-4 p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-purple-700 dark:text-purple-300">
<span x-text="selectedOrders.length"></span> order(s) selected
</span>
<button @click="clearSelection()" class="text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400">
Clear
</button>
</div>
<div class="flex items-center gap-2">
<button
@click="openBulkStatusModal()"
:disabled="saving"
class="px-3 py-1.5 text-sm font-medium text-blue-700 bg-blue-100 rounded-lg hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 disabled:opacity-50"
>
<span x-html="$icon('pencil-square', 'w-4 h-4 inline mr-1')"></span>
Update Status
</button>
<button
@click="exportSelectedOrders()"
class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
>
<span x-html="$icon('arrow-down-tray', 'w-4 h-4 inline mr-1')"></span>
Export CSV
</button>
</div>
</div>
<!-- Orders Table -->
<div x-show="!loading && !error" class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3 w-10">
<input
type="checkbox"
:checked="allSelected"
:indeterminate="someSelected"
@click="toggleSelectAll()"
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
/>
</th>
<th class="px-4 py-3">Order #</th>
<th class="px-4 py-3">Customer</th>
<th class="px-4 py-3">Date</th>
@@ -142,7 +184,16 @@
</thead>
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-for="order in orders" :key="order.id">
<tr class="text-gray-700 dark:text-gray-400">
<tr class="text-gray-700 dark:text-gray-400" :class="{'bg-purple-50 dark:bg-purple-900/10': isSelected(order.id)}">
<!-- Checkbox -->
<td class="px-4 py-3">
<input
type="checkbox"
:checked="isSelected(order.id)"
@click="toggleSelect(order.id)"
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
/>
</td>
<!-- Order Number -->
<td class="px-4 py-3">
<span class="font-mono font-semibold" x-text="order.order_number || `#${order.id}`"></span>
@@ -196,7 +247,7 @@
</template>
<!-- Empty State -->
<tr x-show="orders.length === 0">
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<div class="flex flex-col items-center">
<span x-html="$icon('document-text', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
<p class="text-lg font-medium">No orders found</p>
@@ -251,6 +302,35 @@
</select>
</div>
</template>
<!-- Bulk Status Update Modal -->
{{ modal_simple(
show_var='showBulkStatusModal',
title='Bulk Update Status',
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>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
<select
x-model="bulkStatus"
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
>
<option value="">Select a status...</option>
<template x-for="status in statuses" :key="status.value">
<option :value="status.value" x-text="status.label"></option>
</template>
</select>
</div>
</template>
{% endblock %}
{% block extra_scripts %}

97
app/templates/vendor/products.html vendored
View File

@@ -128,12 +128,78 @@
</div>
</div>
<!-- Bulk Actions Bar -->
<div x-show="!loading && selectedProducts.length > 0"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
class="mb-4 p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-purple-700 dark:text-purple-300">
<span x-text="selectedProducts.length"></span> product(s) selected
</span>
<button @click="clearSelection()" class="text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400">
Clear
</button>
</div>
<div class="flex items-center gap-2">
<button
@click="bulkActivate()"
:disabled="saving"
class="px-3 py-1.5 text-sm font-medium text-green-700 bg-green-100 rounded-lg hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800 disabled:opacity-50"
>
<span x-html="$icon('check-circle', 'w-4 h-4 inline mr-1')"></span>
Activate
</button>
<button
@click="bulkDeactivate()"
:disabled="saving"
class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50"
>
<span x-html="$icon('x-circle', 'w-4 h-4 inline mr-1')"></span>
Deactivate
</button>
<button
@click="bulkSetFeatured()"
:disabled="saving"
class="px-3 py-1.5 text-sm font-medium text-yellow-700 bg-yellow-100 rounded-lg hover:bg-yellow-200 dark:bg-yellow-900 dark:text-yellow-300 dark:hover:bg-yellow-800 disabled:opacity-50"
>
<span x-html="$icon('star', 'w-4 h-4 inline mr-1')"></span>
Feature
</button>
<button
@click="bulkRemoveFeatured()"
:disabled="saving"
class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50"
>
Unfeature
</button>
<button
@click="confirmBulkDelete()"
:disabled="saving"
class="px-3 py-1.5 text-sm font-medium text-red-700 bg-red-100 rounded-lg hover:bg-red-200 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800 disabled:opacity-50"
>
<span x-html="$icon('trash', 'w-4 h-4 inline mr-1')"></span>
Delete
</button>
</div>
</div>
<!-- Products Table -->
<div x-show="!loading && !error" class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3 w-10">
<input
type="checkbox"
:checked="allSelected"
:indeterminate="someSelected"
@click="toggleSelectAll()"
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
/>
</th>
<th class="px-4 py-3">Product</th>
<th class="px-4 py-3">SKU</th>
<th class="px-4 py-3">Price</th>
@@ -144,7 +210,16 @@
</thead>
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-for="product in products" :key="product.id">
<tr class="text-gray-700 dark:text-gray-400">
<tr class="text-gray-700 dark:text-gray-400" :class="{'bg-purple-50 dark:bg-purple-900/10': isSelected(product.id)}">
<!-- Checkbox -->
<td class="px-4 py-3">
<input
type="checkbox"
:checked="isSelected(product.id)"
@click="toggleSelect(product.id)"
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
/>
</td>
<!-- Product Info -->
<td class="px-4 py-3">
<div class="flex items-center text-sm">
@@ -221,7 +296,7 @@
</template>
<!-- Empty State -->
<tr x-show="products.length === 0">
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<div class="flex flex-col items-center">
<span x-html="$icon('cube', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
<p class="text-lg font-medium">No products found</p>
@@ -272,6 +347,24 @@
This action cannot be undone.
</p>
</template>
<!-- Bulk Delete Confirmation Modal -->
{{ modal_simple(
show_var='showBulkDeleteModal',
title='Delete Selected Products',
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>
{% endblock %}
{% block extra_scripts %}