feat: Add expandable section for creating products with integrated product form

frontend/app/admin/products/ExpandableCreateProductSection.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import ProductForm from '../../inventory/ProductForm';
+
+export default function ExpandableCreateProductSection() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <section
+      style={{
+        border: '2px solid #0070f3',
+        borderRadius: '8px',
+        marginBottom: '1.5rem',
+        overflow: 'hidden',
+      }}
+    >
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          width: '100%',
+          padding: '1rem',
+          background: '#0070f3',
+          color: 'white',
+          border: 'none',
+          fontSize: '1.1rem',
+          fontWeight: 600,
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          transition: 'background 0.2s',
+        }}
+        onMouseEnter={(e) => {
+          (e.target as HTMLElement).style.background = '#0059cc';
+        }}
+        onMouseLeave={(e) => {
+          (e.target as HTMLElement).style.background = '#0070f3';
+        }}
+      >
+        <span>➕ Skapa produkt</span>
+        <span style={{ fontSize: '1.5rem', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}>
+          ▼
+        </span>
+      </button>
+
+      {isExpanded && (
+        <div style={{ padding: '1rem', background: '#f9f9f9' }}>
+          <ProductForm />
+        </div>
+      )}
+    </section>
+  );
+}

frontend/app/admin/products/MergePreviewForm.tsx

@@ -16,6 +16,7 @@ export default function MergePreviewForm({ products }: Props) {
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
   const [isConfirming, setIsConfirming] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const fetchPreview = () => {
     setError(null);
@@ -89,15 +90,44 @@ export default function MergePreviewForm({ products }: Props) {
   return (
     <section
       style={{
-        border: '1px solid #ddd',
+        border: '2px solid #10b981',
         borderRadius: '8px',
-        padding: '1rem',
         marginBottom: '1.5rem',
-        display: 'grid',
-        gap: '1rem',
+        overflow: 'hidden',
       }}
     >
-      <h2 style={{ margin: 0 }}>Förhandsgranska merge</h2>
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          width: '100%',
+          padding: '1rem',
+          background: '#10b981',
+          color: 'white',
+          border: 'none',
+          fontSize: '1.1rem',
+          fontWeight: 600,
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          transition: 'background 0.2s',
+        }}
+        onMouseEnter={(e) => {
+          (e.target as HTMLElement).style.background = '#059669';
+        }}
+        onMouseLeave={(e) => {
+          (e.target as HTMLElement).style.background = '#10b981';
+        }}
+      >
+        <span>🔄 Förhandsgranska merge</span>
+        <span style={{ fontSize: '1.5rem', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}>
+          ▼
+        </span>
+      </button>
+
+      {isExpanded && (
+        <div style={{ padding: '1rem', background: '#f9fafb', display: 'grid', gap: '1rem' }}
 
       <div style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
         <label style={{ display: 'grid', gap: '0.3rem' }}>
@@ -310,7 +340,7 @@ export default function MergePreviewForm({ products }: Props) {
             </article>
           ) : null}
         </div>
-      ) : null}
+      )}
     </section>
   );
 }

frontend/app/admin/products/page.tsx

@@ -3,6 +3,7 @@ import type { Product } from '../../../features/inventory/types';
 import MergePreviewForm from './MergePreviewForm';
 import AdminProductList from './AdminProductList';
 import Navigation from '../../Navigation';
+import ExpandableCreateProductSection from './ExpandableCreateProductSection';
 
 export default async function AdminProductsPage() {
   const products = await fetchJson<Product[]>('/api/products');
@@ -13,6 +14,8 @@ export default async function AdminProductsPage() {
       <h1 style={{ marginBottom: '1.5rem' }}>Admin: Produkter</h1>
       <p>Här kan du granska och standardisera produktnamn.</p>
 
+      <ExpandableCreateProductSection />
+
       <MergePreviewForm products={products} />
 
       <AdminProductList products={products} />