feat: add receipt import functionality with UI and backend integration
This commit is contained in:
Nils-Johan Gynther
@@ -0,0 +1,274 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
|
||||
type ParsedItem = {
|
||||
rawName: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
price?: number | null;
|
||||
matchedProductId?: number;
|
||||
matchedProductName?: string;
|
||||
};
|
||||
|
||||
type RowState = ParsedItem & { checked: boolean; editQty: string; editUnit: string };
|
||||
|
||||
const UNITS = ['st', 'kg', 'g', 'l', 'dl', 'cl', 'ml', 'förp', 'pak', 'burk', 'flaska'];
|
||||
|
||||
export default function ReceiptImportClient() {
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [preview, setPreview] = useState<string | null>(null);
|
||||
const [parsing, setParsing] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [rows, setRows] = useState<RowState[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [savedCount, setSavedCount] = useState<number | null>(null);
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setSelectedFile(file);
|
||||
setPreview(URL.createObjectURL(file));
|
||||
setRows([]);
|
||||
setError(null);
|
||||
setSavedCount(null);
|
||||
};
|
||||
|
||||
const handleParse = async () => {
|
||||
if (!selectedFile) return;
|
||||
setParsing(true);
|
||||
setError(null);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('file', selectedFile);
|
||||
const res = await fetch('/api/receipt-import-proxy', { method: 'POST', body: fd });
|
||||
if (!res.ok) {
|
||||
const e = await res.json().catch(() => ({ message: 'Okänt fel' }));
|
||||
throw new Error(e.message ?? 'Servern svarade med fel');
|
||||
}
|
||||
const items: ParsedItem[] = await res.json();
|
||||
setRows(
|
||||
items.map((item) => ({
|
||||
...item,
|
||||
checked: !!item.matchedProductId,
|
||||
editQty: String(item.quantity),
|
||||
editUnit: item.unit,
|
||||
})),
|
||||
);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Kunde inte tolka kvittot');
|
||||
} finally {
|
||||
setParsing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateRow = (i: number, patch: Partial<RowState>) => {
|
||||
setRows((prev) => prev.map((r, idx) => (idx === i ? { ...r, ...patch } : r)));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const toSave = rows.filter((r) => r.checked && r.matchedProductId);
|
||||
if (toSave.length === 0) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
await Promise.all(
|
||||
toSave.map((r) =>
|
||||
fetch('/api/inventory', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
productId: r.matchedProductId,
|
||||
quantity: parseFloat(r.editQty) || r.quantity,
|
||||
unit: r.editUnit,
|
||||
}),
|
||||
}),
|
||||
),
|
||||
);
|
||||
setSavedCount(toSave.length);
|
||||
setRows([]);
|
||||
setPreview(null);
|
||||
setSelectedFile(null);
|
||||
if (fileRef.current) fileRef.current.value = '';
|
||||
} catch {
|
||||
setError('Något gick fel vid sparning. Försök igen.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const checkedCount = rows.filter((r) => r.checked && r.matchedProductId).length;
|
||||
const unmatchedCount = rows.filter((r) => !r.matchedProductId).length;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Fil-input */}
|
||||
<div
|
||||
style={{
|
||||
border: '2px dashed #ced4da',
|
||||
borderRadius: '10px',
|
||||
padding: '1.5rem',
|
||||
textAlign: 'center',
|
||||
background: '#fafafa',
|
||||
marginBottom: '1rem',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => fileRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
onChange={handleFileChange}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
{preview ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={preview}
|
||||
alt="Kvittoförhandsgranskning"
|
||||
style={{ maxHeight: '300px', maxWidth: '100%', borderRadius: '6px' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ color: '#888' }}>
|
||||
<div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📷</div>
|
||||
<div style={{ fontWeight: 600 }}>Fotografera eller välj kvitto</div>
|
||||
<div style={{ fontSize: '0.85rem', marginTop: '0.25rem' }}>
|
||||
Klicka för att välja bild (JPEG, PNG, WebP)
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{preview && rows.length === 0 && (
|
||||
<button
|
||||
onClick={handleParse}
|
||||
disabled={parsing}
|
||||
style={primaryBtn(parsing)}
|
||||
>
|
||||
{parsing ? '⏳ Tolkar kvitto via AI...' : '🔍 Tolka kvitto'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p style={{ color: '#c0392b', background: '#fdf0ef', padding: '0.75rem 1rem', borderRadius: '6px', marginTop: '0.75rem' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{savedCount !== null && (
|
||||
<p style={{ color: '#27ae60', background: '#edfdf4', padding: '0.75rem 1rem', borderRadius: '6px', marginTop: '0.75rem', fontWeight: 600 }}>
|
||||
✓ {savedCount} {savedCount === 1 ? 'vara lades till' : 'varor lades till'} i inventariet.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Parsade rader */}
|
||||
{rows.length > 0 && (
|
||||
<div style={{ marginTop: '1.25rem' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.5rem' }}>
|
||||
<h2 style={{ margin: 0, fontSize: '1.05rem' }}>
|
||||
Identifierade varor ({rows.length})
|
||||
</h2>
|
||||
{unmatchedCount > 0 && (
|
||||
<span style={{ fontSize: '0.8rem', color: '#e67e22' }}>
|
||||
{unmatchedCount} {unmatchedCount === 1 ? 'vara' : 'varor'} saknas i produktdatabasen
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gap: '0.5rem', marginBottom: '1rem' }}>
|
||||
{rows.map((row, i) => {
|
||||
const matched = !!row.matchedProductId;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '36px 1fr 80px 90px',
|
||||
gap: '0.5rem',
|
||||
alignItems: 'center',
|
||||
padding: '0.6rem 0.75rem',
|
||||
border: `1px solid ${matched ? '#dee2e6' : '#f5cba7'}`,
|
||||
borderRadius: '6px',
|
||||
background: matched ? '#fff' : '#fef9f5',
|
||||
opacity: row.checked || !matched ? 1 : 0.7,
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={row.checked}
|
||||
disabled={!matched}
|
||||
onChange={(e) => updateRow(i, { checked: e.target.checked })}
|
||||
style={{ width: '18px', height: '18px', cursor: matched ? 'pointer' : 'not-allowed' }}
|
||||
title={!matched ? 'Produkten finns inte i databasen — lägg till den i admin först' : ''}
|
||||
/>
|
||||
<div>
|
||||
<div style={{ fontWeight: 500, fontSize: '0.9rem' }}>
|
||||
{row.matchedProductName ?? row.rawName}
|
||||
</div>
|
||||
{row.matchedProductName && row.matchedProductName.toLowerCase() !== row.rawName.toLowerCase() && (
|
||||
<div style={{ fontSize: '0.75rem', color: '#888' }}>
|
||||
Kvitto: {row.rawName}
|
||||
</div>
|
||||
)}
|
||||
{!matched && (
|
||||
<div style={{ fontSize: '0.75rem', color: '#e67e22' }}>
|
||||
Ingen matchning — {row.rawName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={row.editQty}
|
||||
onChange={(e) => updateRow(i, { editQty: e.target.value })}
|
||||
style={{ padding: '0.3rem 0.5rem', border: '1px solid #ced4da', borderRadius: '4px', width: '100%', fontSize: '0.9rem' }}
|
||||
/>
|
||||
<select
|
||||
value={row.editUnit}
|
||||
onChange={(e) => updateRow(i, { editUnit: e.target.value })}
|
||||
style={{ padding: '0.3rem 0.5rem', border: '1px solid #ced4da', borderRadius: '4px', fontSize: '0.9rem' }}
|
||||
>
|
||||
{UNITS.map((u) => <option key={u} value={u}>{u}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || checkedCount === 0}
|
||||
style={primaryBtn(saving || checkedCount === 0)}
|
||||
>
|
||||
{saving ? 'Sparar...' : `Lägg till ${checkedCount} ${checkedCount === 1 ? 'vara' : 'varor'} i inventariet`}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setRows([]); setPreview(null); setSelectedFile(null); if (fileRef.current) fileRef.current.value = ''; }}
|
||||
style={{ padding: '0.5rem 1rem', background: '#f0f0f0', border: '1px solid #ccc', borderRadius: '6px', cursor: 'pointer', fontSize: '0.9rem' }}
|
||||
>
|
||||
Börja om
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function primaryBtn(disabled: boolean): React.CSSProperties {
|
||||
return {
|
||||
padding: '0.6rem 1.25rem',
|
||||
background: disabled ? '#aaa' : '#0070f3',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.95rem',
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import Navigation from '../Navigation';
|
||||
import ReceiptImportClient from './ReceiptImportClient';
|
||||
|
||||
export default function KvittoPage() {
|
||||
return (
|
||||
<main style={{ padding: '1rem', maxWidth: '700px', margin: '0 auto' }}>
|
||||
<Navigation />
|
||||
<h1 style={{ marginBottom: '0.25rem' }}>Importera kvitto</h1>
|
||||
<p style={{ color: '#666', marginBottom: '1.5rem' }}>
|
||||
Fotografera eller ladda upp ett kvitto — varorna läggs till i ditt
|
||||
inventarie.
|
||||
</p>
|
||||
<ReceiptImportClient />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user