feat: add receipt import functionality with UI and backend integration
This commit is contained in:
Nils-Johan Gynther
@@ -7,6 +7,7 @@ import { RecipesModule } from './recipes/recipes.module';
|
||||
import { QuickImportModule } from './quick-import/quick-import.module';
|
||||
import { PantryModule } from './pantry/pantry.module';
|
||||
import { MealPlanModule } from './meal-plan/meal-plan.module';
|
||||
import { ReceiptImportModule } from './receipt-import/receipt-import.module';
|
||||
|
||||
|
||||
@Module({
|
||||
@@ -19,6 +20,7 @@ import { MealPlanModule } from './meal-plan/meal-plan.module';
|
||||
QuickImportModule,
|
||||
PantryModule,
|
||||
MealPlanModule,
|
||||
ReceiptImportModule,
|
||||
],
|
||||
})
|
||||
export class AppModule {}
|
||||
@@ -0,0 +1,8 @@
|
||||
export interface ParsedReceiptItem {
|
||||
rawName: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
price?: number | null;
|
||||
matchedProductId?: number;
|
||||
matchedProductName?: string;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import {
|
||||
Controller,
|
||||
Post,
|
||||
UploadedFile,
|
||||
UseInterceptors,
|
||||
BadRequestException,
|
||||
} from '@nestjs/common';
|
||||
import { FileInterceptor } from '@nestjs/platform-express';
|
||||
import { memoryStorage } from 'multer';
|
||||
import { ReceiptImportService } from './receipt-import.service';
|
||||
import { ParsedReceiptItem } from './dto/parsed-receipt-item.dto';
|
||||
|
||||
const ALLOWED_MIMES = [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/webp',
|
||||
'image/heic',
|
||||
'image/heif',
|
||||
];
|
||||
|
||||
@Controller('receipt-import')
|
||||
export class ReceiptImportController {
|
||||
constructor(private readonly receiptImportService: ReceiptImportService) {}
|
||||
|
||||
@Post()
|
||||
@UseInterceptors(
|
||||
FileInterceptor('file', {
|
||||
storage: memoryStorage(),
|
||||
limits: { fileSize: 15 * 1024 * 1024 }, // 15 MB
|
||||
}),
|
||||
)
|
||||
async parseReceipt(
|
||||
@UploadedFile() file?: Express.Multer.File,
|
||||
): Promise<ParsedReceiptItem[]> {
|
||||
if (!file?.buffer) {
|
||||
throw new BadRequestException('Ingen fil skickades med.');
|
||||
}
|
||||
if (!ALLOWED_MIMES.includes(file.mimetype)) {
|
||||
throw new BadRequestException(
|
||||
'Otillåten filtyp. Använd JPEG, PNG eller WebP.',
|
||||
);
|
||||
}
|
||||
return this.receiptImportService.parseReceipt(file);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { ReceiptImportController } from './receipt-import.controller';
|
||||
import { ReceiptImportService } from './receipt-import.service';
|
||||
import { PrismaModule } from '../prisma/prisma.module';
|
||||
|
||||
@Module({
|
||||
imports: [PrismaModule],
|
||||
controllers: [ReceiptImportController],
|
||||
providers: [ReceiptImportService],
|
||||
})
|
||||
export class ReceiptImportModule {}
|
||||
@@ -0,0 +1,122 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
Injectable,
|
||||
Logger,
|
||||
ServiceUnavailableException,
|
||||
} from '@nestjs/common';
|
||||
import { PrismaService } from '../prisma/prisma.service';
|
||||
import { ParsedReceiptItem } from './dto/parsed-receipt-item.dto';
|
||||
|
||||
const MISTRAL_API_URL = 'https://api.mistral.ai/v1/chat/completions';
|
||||
const PROMPT = `Du är en kvittoläsare. Analysera detta kvitto och returnera ENDAST en JSON-array med alla köpta varor.
|
||||
Varje vara ska ha följande fält:
|
||||
- "rawName": varans namn som det står på kvittot (sträng)
|
||||
- "quantity": antal eller mängd som ett tal (t.ex. 1, 2, 0.5)
|
||||
- "unit": enhet — välj ett av: "st", "kg", "g", "l", "dl", "cl", "ml", "förp", "pak", "burk", "flaska"
|
||||
- "price": pris i SEK som ett tal, eller null
|
||||
|
||||
Returnera BARA JSON-arrayen utan markdown-formatering.`;
|
||||
|
||||
@Injectable()
|
||||
export class ReceiptImportService {
|
||||
private readonly logger = new Logger(ReceiptImportService.name);
|
||||
|
||||
constructor(private readonly prisma: PrismaService) {}
|
||||
|
||||
async parseReceipt(file: Express.Multer.File): Promise<ParsedReceiptItem[]> {
|
||||
const apiKey = process.env.MISTRAL_API_KEY;
|
||||
if (!apiKey) {
|
||||
throw new ServiceUnavailableException(
|
||||
'MISTRAL_API_KEY är inte konfigurerad i miljövariabler',
|
||||
);
|
||||
}
|
||||
|
||||
const base64 = file.buffer.toString('base64');
|
||||
const mimeType = file.mimetype || 'image/jpeg';
|
||||
|
||||
const response = await fetch(MISTRAL_API_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${apiKey}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: 'pixtral-12b-2409',
|
||||
messages: [
|
||||
{
|
||||
role: 'user',
|
||||
content: [
|
||||
{
|
||||
type: 'image_url',
|
||||
image_url: { url: `data:${mimeType};base64,${base64}` },
|
||||
},
|
||||
{ type: 'text', text: PROMPT },
|
||||
],
|
||||
},
|
||||
],
|
||||
max_tokens: 2000,
|
||||
temperature: 0.1,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const err = await response.text();
|
||||
this.logger.error(`Mistral API svarade ${response.status}: ${err}`);
|
||||
throw new ServiceUnavailableException('Mistral API returnerade ett fel — kontrollera API-nyckeln');
|
||||
}
|
||||
|
||||
const data = (await response.json()) as {
|
||||
choices: { message: { content: string } }[];
|
||||
};
|
||||
const content = data.choices?.[0]?.message?.content ?? '[]';
|
||||
|
||||
let rawItems: ParsedReceiptItem[];
|
||||
try {
|
||||
const clean = content.replace(/```(?:json)?/gi, '').trim();
|
||||
rawItems = JSON.parse(clean);
|
||||
if (!Array.isArray(rawItems)) throw new Error('Inte en array');
|
||||
} catch {
|
||||
this.logger.error('Kunde inte parsa Mistral-svar:', content);
|
||||
throw new BadRequestException(
|
||||
'Kvittot kunde inte tolkas. Försök med en tydligare bild.',
|
||||
);
|
||||
}
|
||||
|
||||
return this.matchProducts(rawItems);
|
||||
}
|
||||
|
||||
private async matchProducts(
|
||||
items: ParsedReceiptItem[],
|
||||
): Promise<ParsedReceiptItem[]> {
|
||||
const products = await this.prisma.product.findMany({
|
||||
select: { id: true, name: true, canonicalName: true },
|
||||
});
|
||||
|
||||
return items.map((item) => {
|
||||
const raw = (item.rawName ?? '').toLowerCase().trim();
|
||||
if (!raw) return item;
|
||||
|
||||
// Exakt matchning först
|
||||
let match = products.find((p) => {
|
||||
const n = (p.canonicalName ?? p.name).toLowerCase();
|
||||
return n === raw || p.name.toLowerCase() === raw;
|
||||
});
|
||||
|
||||
// Delvis matchning
|
||||
if (!match) {
|
||||
match = products.find((p) => {
|
||||
const n = (p.canonicalName ?? p.name).toLowerCase();
|
||||
return n.includes(raw) || raw.includes(n);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
matchedProductId: match?.id,
|
||||
matchedProductName: match
|
||||
? (match.canonicalName ?? match.name)
|
||||
: undefined,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -38,6 +38,7 @@ services:
|
||||
environment:
|
||||
NODE_ENV: "production"
|
||||
DATABASE_URL: "mysql://root:${MARIADB_ROOT_PASSWORD}@recipe-db:3306/${MARIADB_DATABASE}"
|
||||
MISTRAL_API_KEY: "${MISTRAL_API_KEY}"
|
||||
volumes:
|
||||
- recipe_images:/app/recipe-images
|
||||
depends_on:
|
||||
|
||||
@@ -119,6 +119,21 @@ export default function Navigation() {
|
||||
>
|
||||
📅 Matplan
|
||||
</Link>
|
||||
<Link
|
||||
href="/kvitto"
|
||||
style={{
|
||||
padding: '0.5rem 0.75rem',
|
||||
background: '#fff',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
textDecoration: 'none',
|
||||
color: '#0070f3',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
🧾 Importera kvitto
|
||||
</Link>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE =
|
||||
process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const formData = await request.formData();
|
||||
|
||||
const res = await fetch(`${API_BASE}/api/receipt-import`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const text = await res.text();
|
||||
return new NextResponse(text, {
|
||||
status: res.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
@@ -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