Add sorting by name functionality and implement AdminProductList component for product management

frontend/app/admin/products/page.tsx

@@ -1,7 +1,7 @@
 import { fetchJson } from '../../../lib/api';
 import type { Product } from '../../../features/inventory/types';
-import CanonicalNameForm from './CanonicalNameForm';
 import MergePreviewForm from './MergePreviewForm';
+import AdminProductList from './AdminProductList';
 
 export default async function AdminProductsPage() {
   const products = await fetchJson<Product[]>('/api/products');
@@ -13,38 +13,7 @@ export default async function AdminProductsPage() {
 
       <MergePreviewForm products={products} />
 
-      <div style={{ display: 'grid', gap: '1rem' }}>
-        {products.map((product) => (
-          <article
-            key={product.id}
-            style={{
-              border: '1px solid #ddd',
-              borderRadius: '8px',
-              padding: '1rem',
-              display: 'grid',
-              gap: '0.5rem',
-            }}
-          >
-            <div>
-              <strong>ID:</strong> {product.id}
-            </div>
-            <div>
-              <strong>Namn:</strong> {product.name}
-            </div>
-            <div>
-              <strong>Canonical name:</strong> {product.canonicalName || 'Saknas'}
-            </div>
-            <div>
-              <strong>Normalized:</strong> {product.normalizedName}
-            </div>
-
-            <CanonicalNameForm
-              id={product.id}
-              currentCanonicalName={product.canonicalName}
-            />
-          </article>
-        ))}
-      </div>
+      <AdminProductList products={products} />
     </main>
   );
 }