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 %}