feat(phase-b): ship analytics dashboard, alerts, scanner PWA, dedup, audit view
Phase B (Insights & Alerts) PR4-11 in one drop. Builds on the schema +
service skeletons committed in PRs 1-3.
PR4 Analytics dashboard — 4 chart types (funnel/timeline/breakdown/source),
date-range picker (today/7d/30d/90d), CSV+PNG export per card.
PR5 Alert rail UI + /alerts page — topbar bell w/ live count, dashboard
right-rail, three-tab page (active/dismissed/resolved), socket-driven
invalidation. Bell lazy-loads list on popover open to keep cold pages
fast in non-dashboard routes.
PR6 EOI queue tab on documents hub — filters to in-flight EOIs, count
surfaces in tab label.
PR7 Interests-by-berth tab on berth detail — replaces the stub.
PR8 Expense duplicate detection — BullMQ job runs scan on create, yellow
banner on detail w/ Merge / Not-a-duplicate, transactional merge
consolidates receipts and archives the source.
PR9 Receipt scanner PWA + multi-provider AI — port-scoped /scan route in
its own (scanner) group with no dashboard chrome, dynamic per-port
manifest, OpenAI + Claude provider abstraction, admin OCR settings
page (port-level + super-admin global default w/ opt-in fallback),
test-connection endpoint, manual-entry fallback when no key is
configured. Verify form always shown before save — no ghost rows.
PR10 Audit log read view — swap to tsvector full-text search on the
existing GIN index, cursor pagination, filters for entity/action/user
/date range, batched actor-email resolution.
PR11 Real-API tests — opt-in receipt-ocr.spec (admin save+test, optional
real-receipt parse via REALAPI_RECEIPT_FIXTURE) and alert-engine
socket-fanout spec gated behind RUN_ALERT_ENGINE_REALAPI. Both skip
cleanly without their gate envs so CI stays green.
Test totals: vitest 690 -> 713, smoke 130 -> 138, realapi +2 opt-in.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
506
src/components/scan/scan-shell.tsx
Normal file
506
src/components/scan/scan-shell.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Camera, Loader2, RotateCcw, AlertTriangle, CheckCircle2, Save } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useUIStore } from '@/stores/ui-store';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { EXPENSE_CATEGORIES, PAYMENT_METHODS } from '@/lib/constants';
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface ParsedReceipt {
|
||||
establishment: string | null;
|
||||
date: string | null;
|
||||
amount: number | null;
|
||||
currency: string | null;
|
||||
lineItems: Array<{ description: string; amount: number }>;
|
||||
confidence: number;
|
||||
}
|
||||
|
||||
type ScanState =
|
||||
| { kind: 'idle' }
|
||||
| { kind: 'processing' }
|
||||
| {
|
||||
kind: 'verify';
|
||||
parsed: ParsedReceipt;
|
||||
source: 'ai' | 'manual';
|
||||
reason?: string;
|
||||
providerError?: string;
|
||||
}
|
||||
| { kind: 'saving' }
|
||||
| { kind: 'saved'; expenseId: string }
|
||||
| { kind: 'error'; message: string };
|
||||
|
||||
interface ScanResp {
|
||||
data: {
|
||||
parsed: ParsedReceipt;
|
||||
source: 'ai' | 'manual';
|
||||
reason?: string;
|
||||
provider?: string;
|
||||
model?: string;
|
||||
providerError?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Form ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface VerifyFormProps {
|
||||
parsed: ParsedReceipt;
|
||||
imagePreview: string;
|
||||
imageFile: File;
|
||||
source: 'ai' | 'manual';
|
||||
reason?: string;
|
||||
providerError?: string;
|
||||
onSubmit: (input: {
|
||||
establishmentName: string;
|
||||
amount: string;
|
||||
currency: string;
|
||||
expenseDate: string;
|
||||
category: string;
|
||||
paymentMethod: string;
|
||||
description: string;
|
||||
file: File;
|
||||
}) => void;
|
||||
onRetake: () => void;
|
||||
saving: boolean;
|
||||
}
|
||||
|
||||
const TODAY = () => new Date().toISOString().slice(0, 10);
|
||||
|
||||
function VerifyForm({
|
||||
parsed,
|
||||
imagePreview,
|
||||
imageFile,
|
||||
source,
|
||||
reason,
|
||||
providerError,
|
||||
onSubmit,
|
||||
onRetake,
|
||||
saving,
|
||||
}: VerifyFormProps) {
|
||||
const [establishmentName, setEstablishment] = useState(parsed.establishment ?? '');
|
||||
const [amount, setAmount] = useState(parsed.amount != null ? String(parsed.amount) : '');
|
||||
const [currency, setCurrency] = useState((parsed.currency ?? 'USD').toUpperCase());
|
||||
const [expenseDate, setExpenseDate] = useState(parsed.date ?? TODAY());
|
||||
const [category, setCategory] = useState<string>('other');
|
||||
const [paymentMethod, setPaymentMethod] = useState<string>('credit_card');
|
||||
const [description, setDescription] = useState('');
|
||||
|
||||
const lowConfidence = source === 'ai' && parsed.confidence < 0.6;
|
||||
const noOcr = source === 'manual';
|
||||
|
||||
const banner = noOcr ? (
|
||||
<div className="flex items-start gap-2 rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<div>
|
||||
{reason === 'no-ocr-configured' ? (
|
||||
<>
|
||||
<p className="font-medium">Manual entry mode</p>
|
||||
<p className="text-xs mt-0.5">
|
||||
No AI provider is configured for this port. Fill in the details below to save the
|
||||
expense with the photo attached.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="font-medium">We couldn't read the receipt automatically</p>
|
||||
<p className="text-xs mt-0.5">
|
||||
{providerError ? `Reason: ${providerError}.` : ''} Fill in the details below to save
|
||||
the expense with the photo attached.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : lowConfidence ? (
|
||||
<div className="flex items-start gap-2 rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">Low-confidence read — please double-check the fields</p>
|
||||
<p className="text-xs mt-0.5">
|
||||
The AI returned a confidence of {Math.round(parsed.confidence * 100)}%.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-start gap-2 rounded-lg border border-emerald-300 bg-emerald-50 px-3 py-2 text-sm text-emerald-900">
|
||||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">Receipt parsed — confirm the fields and save</p>
|
||||
<p className="text-xs mt-0.5">Confidence {Math.round(parsed.confidence * 100)}%.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="flex flex-col gap-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
onSubmit({
|
||||
establishmentName,
|
||||
amount,
|
||||
currency,
|
||||
expenseDate,
|
||||
category,
|
||||
paymentMethod,
|
||||
description,
|
||||
file: imageFile,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{banner}
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-border">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Receipt preview"
|
||||
className="block w-full max-h-[40vh] object-contain bg-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="establishmentName">Vendor / establishment</Label>
|
||||
<Input
|
||||
id="establishmentName"
|
||||
value={establishmentName}
|
||||
onChange={(e) => setEstablishment(e.target.value)}
|
||||
placeholder="e.g. Marina Fuel Station"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="amount">Amount</Label>
|
||||
<Input
|
||||
id="amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
inputMode="decimal"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="currency">Currency</Label>
|
||||
<Input
|
||||
id="currency"
|
||||
value={currency}
|
||||
onChange={(e) => setCurrency(e.target.value.toUpperCase())}
|
||||
maxLength={3}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="expenseDate">Date</Label>
|
||||
<Input
|
||||
id="expenseDate"
|
||||
type="date"
|
||||
value={expenseDate}
|
||||
onChange={(e) => setExpenseDate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="category">Category</Label>
|
||||
<Select value={category} onValueChange={setCategory}>
|
||||
<SelectTrigger id="category">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{EXPENSE_CATEGORIES.map((c) => (
|
||||
<SelectItem key={c} value={c} className="capitalize">
|
||||
{c.replace(/_/g, ' ')}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="paymentMethod">Payment method</Label>
|
||||
<Select value={paymentMethod} onValueChange={setPaymentMethod}>
|
||||
<SelectTrigger id="paymentMethod">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAYMENT_METHODS.map((p) => (
|
||||
<SelectItem key={p} value={p} className="capitalize">
|
||||
{p.replace(/_/g, ' ')}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:col-span-2">
|
||||
<Label htmlFor="description">Notes (optional)</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving || !amount}
|
||||
className="h-12 text-base sm:flex-1"
|
||||
data-testid="scan-save"
|
||||
>
|
||||
{saving ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save expense
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onRetake}
|
||||
disabled={saving}
|
||||
className="h-12 text-base"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
Retake
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Shell ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function ScanShell() {
|
||||
const router = useRouter();
|
||||
const portSlug = useUIStore((s) => s.currentPortSlug);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [state, setState] = useState<ScanState>({ kind: 'idle' });
|
||||
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
||||
|
||||
// Revoke blob URL on unmount.
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (imagePreview) URL.revokeObjectURL(imagePreview);
|
||||
};
|
||||
}, [imagePreview]);
|
||||
|
||||
async function handleFile(file: File) {
|
||||
if (imagePreview) URL.revokeObjectURL(imagePreview);
|
||||
setImagePreview(URL.createObjectURL(file));
|
||||
setState({ kind: 'processing' });
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const portId = useUIStore.getState().currentPortId;
|
||||
const headers = new Headers();
|
||||
if (portId) headers.set('X-Port-Id', portId);
|
||||
const res = await fetch('/api/v1/expenses/scan-receipt', {
|
||||
method: 'POST',
|
||||
body: fd,
|
||||
credentials: 'include',
|
||||
headers,
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error(`Server returned ${res.status}`);
|
||||
}
|
||||
const body = (await res.json()) as ScanResp;
|
||||
setState({
|
||||
kind: 'verify',
|
||||
parsed: body.data.parsed,
|
||||
source: body.data.source,
|
||||
reason: body.data.reason,
|
||||
providerError: body.data.providerError,
|
||||
});
|
||||
} catch (err) {
|
||||
setState({
|
||||
kind: 'error',
|
||||
message: err instanceof Error ? err.message : 'Upload failed',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(input: {
|
||||
establishmentName: string;
|
||||
amount: string;
|
||||
currency: string;
|
||||
expenseDate: string;
|
||||
category: string;
|
||||
paymentMethod: string;
|
||||
description: string;
|
||||
file: File;
|
||||
}) {
|
||||
setState({ kind: 'saving' });
|
||||
try {
|
||||
// Upload the image (multipart — apiFetch wraps JSON, so use raw fetch).
|
||||
const fd = new FormData();
|
||||
fd.append('file', input.file);
|
||||
fd.append('category', 'receipt');
|
||||
const portId = useUIStore.getState().currentPortId;
|
||||
const headers = new Headers();
|
||||
if (portId) headers.set('X-Port-Id', portId);
|
||||
const upRes = await fetch('/api/v1/files/upload', {
|
||||
method: 'POST',
|
||||
body: fd,
|
||||
credentials: 'include',
|
||||
headers,
|
||||
});
|
||||
if (!upRes.ok) throw new Error(`Upload failed: ${upRes.status}`);
|
||||
const upJson = (await upRes.json()) as { data: { id: string } };
|
||||
|
||||
const expense = await apiFetch<{ data: { id: string } }>(`/api/v1/expenses`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
establishmentName: input.establishmentName || undefined,
|
||||
amount: input.amount,
|
||||
currency: input.currency,
|
||||
expenseDate: input.expenseDate,
|
||||
category: input.category,
|
||||
paymentMethod: input.paymentMethod,
|
||||
description: input.description || undefined,
|
||||
receiptFileIds: [upJson.data.id],
|
||||
paymentStatus: 'unpaid',
|
||||
},
|
||||
});
|
||||
|
||||
setState({ kind: 'saved', expenseId: expense.data.id });
|
||||
} catch (err) {
|
||||
setState({
|
||||
kind: 'error',
|
||||
message: err instanceof Error ? err.message : 'Save failed',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (imagePreview) {
|
||||
URL.revokeObjectURL(imagePreview);
|
||||
setImagePreview(null);
|
||||
}
|
||||
setState({ kind: 'idle' });
|
||||
if (fileRef.current) fileRef.current.value = '';
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto flex min-h-[100dvh] w-full max-w-xl flex-col gap-4 px-4 py-6 sm:py-10">
|
||||
<header className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">Scan a receipt</h1>
|
||||
{state.kind !== 'idle' ? (
|
||||
<Button variant="ghost" size="sm" onClick={reset}>
|
||||
Start over
|
||||
</Button>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
{state.kind === 'idle' ? (
|
||||
<section className="flex flex-1 flex-col items-center justify-center gap-4 rounded-2xl border-2 border-dashed border-border bg-muted/20 p-8 text-center">
|
||||
<Camera className="h-12 w-12 text-muted-foreground/60" aria-hidden />
|
||||
<div>
|
||||
<p className="text-base font-medium">Tap to capture a receipt</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Use your camera or pick an image from your library. We'll read it and pre-fill
|
||||
the form for you to confirm.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
className="h-12 px-6 text-base"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
data-testid="scan-capture"
|
||||
>
|
||||
<Camera className="mr-2 h-5 w-5" />
|
||||
Capture receipt
|
||||
</Button>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) void handleFile(f);
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{state.kind === 'processing' ? (
|
||||
<section className="flex flex-1 flex-col items-center justify-center gap-3 py-12">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-brand" />
|
||||
<p className="text-sm text-muted-foreground">Reading receipt…</p>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{state.kind === 'verify' && imagePreview ? (
|
||||
<VerifyForm
|
||||
parsed={state.parsed}
|
||||
imagePreview={imagePreview}
|
||||
imageFile={fileRef.current?.files?.[0] as File}
|
||||
source={state.source}
|
||||
reason={state.reason}
|
||||
providerError={state.providerError}
|
||||
onSubmit={handleSubmit}
|
||||
onRetake={reset}
|
||||
saving={false}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{state.kind === 'saving' ? (
|
||||
<section className="flex flex-1 flex-col items-center justify-center gap-3 py-12">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-brand" />
|
||||
<p className="text-sm text-muted-foreground">Saving expense…</p>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{state.kind === 'saved' ? (
|
||||
<section className="flex flex-1 flex-col items-center justify-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-50 p-8 text-center">
|
||||
<CheckCircle2 className="h-12 w-12 text-emerald-600" />
|
||||
<p className="text-base font-semibold text-emerald-900">Expense saved</p>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={reset} variant="outline" data-testid="scan-another">
|
||||
Scan another
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => router.push(`/${portSlug}/expenses/${state.expenseId}` as never)}
|
||||
>
|
||||
View expense
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{state.kind === 'error' ? (
|
||||
<section
|
||||
className={cn(
|
||||
'flex flex-col items-center gap-3 rounded-2xl border border-destructive/30 bg-destructive/5 p-6 text-center',
|
||||
)}
|
||||
>
|
||||
<AlertTriangle className="h-10 w-10 text-destructive" />
|
||||
<p className="text-base font-medium text-destructive">{state.message}</p>
|
||||
<Button onClick={reset} variant="outline">
|
||||
Try again
|
||||
</Button>
|
||||
</section>
|
||||
) : null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user