feat(ReceiptImportClient): add modal for enlarged receipt preview and improve file selection interaction

frontend/app/kvitto/ReceiptImportClient.tsx

@@ -67,6 +67,7 @@ export default function ReceiptImportClient({ isAdmin }: { isAdmin: boolean }) {
   const [error, setError] = useState<string | null>(null);
   const [savedCount, setSavedCount] = useState<number | null>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [showReceiptModal, setShowReceiptModal] = useState(false);
   const [creatingProduct, setCreatingProduct] = useState<number | null>(null);
 
   useEffect(() => {
@@ -373,9 +374,27 @@ export default function ReceiptImportClient({ isAdmin }: { isAdmin: boolean }) {
 
   return (
     <div>
+      {showReceiptModal && preview && preview !== 'pdf' && (
         <div
-        style={{ border: '2px dashed #ced4da', borderRadius: '10px', padding: '1.5rem', textAlign: 'center', background: '#fafafa', marginBottom: '1rem', cursor: 'pointer' }}
+          onClick={() => setShowReceiptModal(false)}
-        onClick={() => fileRef.current?.click()}
+          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem' }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={preview}
+            alt="Kvitto"
+            onClick={(e) => e.stopPropagation()}
+            style={{ maxWidth: '100%', maxHeight: '90vh', borderRadius: '8px', boxShadow: '0 4px 32px rgba(0,0,0,0.5)', objectFit: 'contain' }}
+          />
+          <button
+            onClick={() => setShowReceiptModal(false)}
+            style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'rgba(255,255,255,0.9)', border: 'none', borderRadius: '50%', width: '2.5rem', height: '2.5rem', fontSize: '1.25rem', cursor: 'pointer', lineHeight: 1 }}
+          >✕</button>
+        </div>
+      )}
+      <div
+        style={{ border: '2px dashed #ced4da', borderRadius: '10px', padding: '1.5rem', textAlign: 'center', background: '#fafafa', marginBottom: '1rem', cursor: preview ? 'default' : 'pointer' }}
+        onClick={() => { if (!preview) fileRef.current?.click(); }}
       >
         <input ref={fileRef} type="file" accept="image/*,application/pdf" capture="environment" onChange={handleFileChange} style={{ display: 'none' }} />
         {preview === 'pdf' ? (
@@ -387,9 +406,14 @@ export default function ReceiptImportClient({ isAdmin }: { isAdmin: boolean }) {
         ) : preview ? (
           <div style={{ padding: '1rem' }}>
             {/* 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' }} />
+            <img
+              src={preview}
+              alt="Kvittoförhandsgranskning"
+              onClick={(e) => { e.stopPropagation(); setShowReceiptModal(true); }}
+              style={{ maxHeight: '200px', maxWidth: '100%', borderRadius: '6px', marginBottom: '0.75rem', cursor: 'zoom-in', boxShadow: '0 1px 4px rgba(0,0,0,0.15)' }}
+            />
             <div style={{ fontWeight: 600, fontSize: '0.95rem' }}>{selectedFile?.name}</div>
-            <div style={{ fontSize: '0.85rem', color: '#888', marginTop: '0.25rem' }}>Bildkvitto valt</div>
+            <div style={{ fontSize: '0.85rem', color: '#888', marginTop: '0.25rem' }}>Klicka på bilden för att förstora • <span style={{ color: '#2563eb', cursor: 'pointer', textDecoration: 'underline' }} onClick={(e) => { e.stopPropagation(); fileRef.current?.click(); }}>Byt fil</span></div>
           </div>
         ) : (
           <div style={{ color: '#888' }}>