feat: Standardize toolbar buttons across Orders and Products

**Issue:**
- Products: Delete button was black (bg-black), always visible
- Products: Used inline mr-2 for icon spacing
- Orders: Delete button was red (bg-red-600), conditional
- Orders: Used inline-flex gap-2 for icon spacing
- Inconsistent UX between modules

**Solution:**
1. Added "Toolbar Button Standards" to PROJECT_SOP.md
2. Updated Products to match Orders standard

**Changes to PROJECT_SOP.md:**
- Added button type definitions (Delete, Refresh, Secondary)
- Specified Delete button: bg-red-600 (NOT bg-black)
- Specified icon spacing: inline-flex items-center gap-2
- Specified conditional rendering for destructive actions
- Added 8 mandatory rules for toolbar buttons

**Changes to Products/index.tsx:**
- Delete button: bg-black → bg-red-600 text-white hover:bg-red-700
- Delete button: Always visible → Conditional (only when items selected)
- Icon spacing: inline mr-2 → inline-flex items-center gap-2
- Delete disabled: selectedIds.length === 0 → deleteMutation.isPending
- Refresh icon: inline mr-2 → inline-flex items-center gap-2

**Result:**
✅ Consistent red delete button (destructive color)
✅ Delete only shows when items selected (better UX)
✅ Consistent icon spacing (gap-2)
✅ Consistent hover effects
✅ Both modules now identical

**Visual Improvements:**
- Red delete button clearly indicates destructive action
- Cleaner toolbar when no items selected
- Better visual hierarchy

admin-spa/src/routes/Products/index.tsx

@@ -226,21 +226,23 @@ export default function Products() {
       <div className="hidden md:block rounded-lg border border-border p-4 bg-card">
         <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-3">
           <div className="flex gap-3">
-            <button 
-              className="border rounded-md px-3 py-2 text-sm bg-black text-white disabled:opacity-50" 
-              onClick={handleDeleteClick}
-              disabled={selectedIds.length === 0}
-            >
-              <Trash2 className="w-4 h-4 inline mr-2" />
-              {selectedIds.length > 0 ? __(`Delete (${selectedIds.length})`) : __('Delete')}
-            </button>
+            {selectedIds.length > 0 && (
+              <button 
+                className="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"
+                onClick={handleDeleteClick}
+                disabled={deleteMutation.isPending}
+              >
+                <Trash2 className="w-4 h-4" />
+                {__('Delete')} ({selectedIds.length})
+              </button>
+            )}
             
             <button 
-              className="border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50"
+              className="border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2"
               onClick={handleRefresh}
               disabled={q.isLoading || isRefreshing}
             >
-              <RefreshCw className={`w-4 h-4 inline mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
+              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
               {__('Refresh')}
             </button>
           </div>