Nils-Johan Gynther
285 lines
10 KiB
TypeScript
285 lines
10 KiB
TypeScript
'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);
|
|
if (file.type === 'application/pdf') {
|
|
setPreview('pdf');
|
|
} else {
|
|
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/*,application/pdf"
|
|
capture="environment"
|
|
onChange={handleFileChange}
|
|
style={{ display: 'none' }}
|
|
/>
|
|
{preview === 'pdf' ? (
|
|
<div style={{ padding: '1rem', color: '#333' }}>
|
|
<div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📄</div>
|
|
<div style={{ fontWeight: 600 }}>{selectedFile?.name}</div>
|
|
<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
|
|
<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) eller PDF
|
|
</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',
|
|
};
|
|
}
|