diff --git a/PROJECT_SOP.md b/PROJECT_SOP.md index a267ce5..66d8090 100644 --- a/PROJECT_SOP.md +++ b/PROJECT_SOP.md @@ -269,8 +269,9 @@ All CRUD list pages MUST use consistent button styling in the toolbar: | Button Type | Classes | Use Case | |-------------|---------|----------| | **Delete (Destructive)** | `border rounded-md px-3 py-2 text-sm bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 inline-flex items-center gap-2` | Bulk delete action | -| **Refresh** | `border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2` | Refresh data | -| **Export/Secondary** | `border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2` | Secondary actions | +| **Refresh (Required)** | `border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2` | Refresh data (MUST exist in all CRUD lists) | +| **Reset Filters** | `text-sm text-muted-foreground hover:text-foreground underline` | Clear all active filters | +| **Export/Secondary** | `border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2` | Other secondary actions | **Button Structure:** ```tsx @@ -286,30 +287,49 @@ All CRUD list pages MUST use consistent button styling in the toolbar: **Rules:** 1. ✅ **Delete button** - Always use `bg-red-600` (NOT `bg-black`) -2. ✅ **Icon placement** - Use `inline-flex items-center gap-2` (NOT `inline mr-2`) -3. ✅ **Destructive actions** - Only show when items selected (conditional render) -4. ✅ **Non-destructive actions** - Can be always visible (use `disabled` state) -5. ✅ **Consistent spacing** - Use `gap-2` between icon and text -6. ✅ **Hover states** - Destructive: `hover:bg-red-700`, Secondary: `hover:bg-accent` -7. ❌ **Never use `bg-black`** for delete buttons -8. ❌ **Never use `inline mr-2`** - use `inline-flex gap-2` instead +2. ✅ **Refresh button** - MUST exist in all CRUD list pages (mandatory) +3. ✅ **Reset filters** - Use text link style (NOT button with background) +4. ✅ **Icon placement** - Use `inline-flex items-center gap-2` (NOT `inline mr-2`) +5. ✅ **Destructive actions** - Only show when items selected (conditional render) +6. ✅ **Non-destructive actions** - Can be always visible (use `disabled` state) +7. ✅ **Consistent spacing** - Use `gap-2` between icon and text +8. ✅ **Hover states** - Destructive: `hover:bg-red-700`, Secondary: `hover:bg-accent` +9. ❌ **Never use `bg-black`** for delete buttons +10. ❌ **Never use `inline mr-2`** - use `inline-flex gap-2` instead +11. ❌ **Never use button style** for reset filters - use text link **Toolbar Layout:** ```tsx -
- {/* Bulk Actions - Show only when items selected */} - {selectedIds.length > 0 && ( - + )} + + {/* Refresh - Always visible (REQUIRED) */} + - )} +
- {/* Always-visible actions */} - + {/* Right: Filters */} +
+ + + + {/* Reset Filters - Text link style */} + {activeFiltersCount > 0 && ( + + )} +
``` diff --git a/admin-spa/src/routes/Orders/index.tsx b/admin-spa/src/routes/Orders/index.tsx index cc9569d..316ac7a 100644 --- a/admin-spa/src/routes/Orders/index.tsx +++ b/admin-spa/src/routes/Orders/index.tsx @@ -255,6 +255,15 @@ export default function Orders() { {__('Delete')} ({selectedIds.length}) )} + +
@@ -299,13 +308,12 @@ export default function Orders() { {activeFiltersCount > 0 && ( )} - {q.isFetching && {__('Loading…')}}