feat(receipt-import): integrate server actions for product creation and category updates

frontend/app/kvitto/ReceiptImportClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useRef, useState, useEffect } from 'react';
+import { createProductAction, updateProductCategoryAction } from './actions';
 
 type CategorySuggestion = {
   categoryId: number;
@@ -195,8 +196,6 @@ export default function ReceiptImportClient({ isAdmin }: { isAdmin: boolean }) {
     // eslint-disable-next-line no-console
     console.log('handleCreateProduct: isAdmin =', isAdmin, 'endpoint = /api/products');
     try {
-      const { createProductAction, updateProductCategoryAction } = await import('./actions');
-      
       // Admin skapar aktiv produkt direkt via Server Action
       const product = await createProductAction(row.rawName);
 
@@ -362,8 +361,12 @@ export default function ReceiptImportClient({ isAdmin }: { isAdmin: boolean }) {
             <div style={{ fontSize: '0.85rem', color: '#888', marginTop: '0.25rem' }}>PDF-kvitto valt</div>
           </div>
         ) : preview ? (
-          // eslint-disable-next-line @next/next/no-img-element
+          <div style={{ padding: '1rem' }}>
-          <img src={preview} alt="Kvittoförhandsgranskning" style={{ maxHeight: '300px', maxWidth: '100%', borderRadius: '6px' }} />
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={preview} alt="Kvittoförhandsgranskning" style={{ maxHeight: '200px', maxWidth: '100%', borderRadius: '6px', marginBottom: '0.75rem' }} />
+            <div style={{ fontWeight: 600, fontSize: '0.95rem' }}>{selectedFile?.name}</div>
+            <div style={{ fontSize: '0.85rem', color: '#888', marginTop: '0.25rem' }}>Bildkvitto valt</div>
+          </div>
         ) : (
           <div style={{ color: '#888' }}>
             <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📷</div>