sorting in tables

frontend/src/components/AddShoppingEventModal.tsx

@@ -305,10 +305,28 @@ const AddShoppingEventModal: React.FC<AddShoppingEventModalProps> = ({
                     className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   >
                     <option value={0}>Select a product</option>
-                    {products.map(product => (
-                      <option key={product.id} value={product.id}>
-                        {product.name}{product.organic ? '🌱' : ''} ({product.grocery.category.name}) {product.weight ? `${product.weight}${product.weight_unit}` : product.weight_unit}
-                      </option>
+                    {Object.entries(
+                      products.reduce((groups, product) => {
+                        const category = product.grocery.category.name;
+                        if (!groups[category]) {
+                          groups[category] = [];
+                        }
+                        groups[category].push(product);
+                        return groups;
+                      }, {} as Record<string, typeof products>)
+                    )
+                    .sort(([a], [b]) => a.localeCompare(b))
+                    .map(([category, categoryProducts]) => (
+                      <optgroup key={category} label={category}>
+                        {categoryProducts
+                          .sort((a, b) => a.name.localeCompare(b.name))
+                          .map(product => (
+                            <option key={product.id} value={product.id}>
+                              {product.name}{product.organic ? '🌱' : ''}{product.brand ? ` (${product.brand.name})` : ''} {product.weight ? `${product.weight}${product.weight_unit}` : product.weight_unit}
+                            </option>
+                          ))
+                        }
+                      </optgroup>
                     ))}
                   </select>
                 </div>