jtricerolph
0d6ca9b979
Bare <a href="/invoice/..."> tags bypass React Router basename, causing hard navigations to absolute paths with no NPM route. Added /kitchen/ prefix to all internal href values across 12 components. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5944 lines
272 KiB
TypeScript
5944 lines
272 KiB
TypeScript
import React, { useState, useEffect, useRef, useMemo } from 'react'
|
||
import { useParams, useNavigate } from 'react-router-dom'
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import { useAuth } from '../App'
|
||
import * as pdfjsLib from 'pdfjs-dist'
|
||
import { AnnotationMode } from 'pdfjs-dist'
|
||
import LineItemHistoryModal from './LineItemHistoryModal'
|
||
import CreateDisputeModal from './CreateDisputeModal'
|
||
import DisputeDetailModal from './DisputeDetailModal'
|
||
import LinkDisputeModal from './LinkDisputeModal'
|
||
import PurchaseOrderModal from './PurchaseOrderModal'
|
||
import IngredientModal from './IngredientModal'
|
||
import { IngredientModalResult, LineItemResult } from '../utils/ingredientHelpers'
|
||
|
||
// Use local worker file from public directory
|
||
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'
|
||
|
||
// Simple Scale icon SVG component
|
||
const ScaleIcon = ({ style }: { style?: React.CSSProperties }) => (
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="currentColor"
|
||
style={{ width: '18px', height: '18px', ...style }}
|
||
>
|
||
<path d="M12 3c-1.27 0-2.4.8-2.82 2H3v2h1.95L2 14c-.47 2 1 4 4 4s4.5-2 4-4L7.05 7H9.18c.35.99 1.17 1.74 2.18 1.94V19H7v2h10v-2h-4.18V8.94c1.01-.2 1.83-.95 2.18-1.94h2.13L14 14c-.47 2 1 4 4 4s4.5-2 4-4l-2.95-7H21V5h-6.18C14.4 3.8 13.27 3 12 3zm0 2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 10.45L7.5 14h-3L6 10.45zm12 0L19.5 14h-3L18 10.45z" />
|
||
</svg>
|
||
)
|
||
|
||
// Source badge component - shows where invoice came from
|
||
const sourceConfig: Record<string, { label: string; color: string; icon: string }> = {
|
||
upload: { label: 'Upload', color: '#6c757d', icon: '📤' },
|
||
email: { label: 'Email', color: '#3498db', icon: '📧' },
|
||
api: { label: 'API', color: '#9b59b6', icon: '🔌' },
|
||
}
|
||
|
||
const SourceBadge = ({ source, sourceReference }: { source: string; sourceReference?: string | null }) => {
|
||
const { label, color, icon } = sourceConfig[source] || sourceConfig.upload
|
||
return (
|
||
<span
|
||
style={{
|
||
background: color,
|
||
color: 'white',
|
||
padding: '0.4rem 0.6rem',
|
||
borderRadius: '4px',
|
||
fontSize: '0.8rem',
|
||
fontWeight: '600',
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: '0.25rem',
|
||
}}
|
||
title={sourceReference || undefined}
|
||
>
|
||
{icon} {label}
|
||
</span>
|
||
)
|
||
}
|
||
|
||
interface Invoice {
|
||
id: number
|
||
invoice_number: string | null
|
||
invoice_date: string | null
|
||
total: number | null
|
||
net_total: number | null
|
||
stock_total: number | null
|
||
supplier_id: number | null
|
||
supplier_name: string | null
|
||
supplier_match_type: string | null // "exact", "fuzzy", or null
|
||
supplier_skip_dext: boolean // Whether supplier has skip_dext enabled
|
||
vendor_name: string | null // OCR-extracted vendor name
|
||
status: string
|
||
category: string | null
|
||
ocr_confidence: number | null
|
||
ocr_raw_text: string | null // OCR text or error message
|
||
image_path: string
|
||
document_type: string | null
|
||
order_number: string | null
|
||
duplicate_status: string | null
|
||
duplicate_of_id: number | null
|
||
// Dext integration
|
||
notes: string | null
|
||
dext_sent_at: string | null
|
||
dext_sent_by_username: string | null
|
||
// Dispute tracking
|
||
dispute_count: number
|
||
has_open_disputes: boolean
|
||
disputes: Array<{
|
||
id: number
|
||
dispute_type: string
|
||
status: string
|
||
title: string
|
||
disputed_amount: number
|
||
opened_at: string
|
||
}>
|
||
disputed_line_item_ids: number[]
|
||
// Source tracking
|
||
source: string
|
||
source_reference: string | null
|
||
// Linked dispute (for credit notes)
|
||
linked_dispute_id: number | null
|
||
// Total pages from OCR (for multi-page invoices)
|
||
total_pages: number | null
|
||
}
|
||
|
||
interface Supplier {
|
||
id: number
|
||
name: string
|
||
aliases?: string[]
|
||
}
|
||
|
||
interface LineItem {
|
||
id: number
|
||
product_code: string | null
|
||
description: string | null
|
||
description_alt: string | null // Alternative description (Azure content vs value mismatch)
|
||
unit: string | null
|
||
quantity: number | null
|
||
order_quantity: number | null
|
||
unit_price: number | null
|
||
tax_rate: string | null
|
||
tax_amount: number | null
|
||
amount: number | null
|
||
line_number: number
|
||
is_non_stock: boolean
|
||
// Pack size fields
|
||
raw_content: string | null
|
||
pack_quantity: number | null
|
||
unit_size: number | null
|
||
unit_size_type: string | null
|
||
portions_per_unit: number | null // null = not defined yet
|
||
cost_per_item: number | null
|
||
cost_per_portion: number | null
|
||
// OCR warnings for values that needed correction
|
||
ocr_warnings: string | null
|
||
// Price change tracking
|
||
price_change_status: string | null // "consistent", "amber", "red", "no_history", "acknowledged"
|
||
price_change_percent: number | null
|
||
previous_price: number | null
|
||
// Future price (for old invoices)
|
||
future_price: number | null
|
||
future_change_percent: number | null
|
||
// Page number from OCR (for multi-page invoices)
|
||
page_number: number | null
|
||
// Ingredient mapping
|
||
ingredient_id?: number | null
|
||
ingredient_name?: string | null
|
||
ingredient_unit?: string | null
|
||
}
|
||
|
||
// Ingredient types for mapping modal
|
||
interface IngredientSuggestion {
|
||
id: number
|
||
name: string
|
||
category_name: string | null
|
||
standard_unit: string
|
||
yield_percent: number
|
||
similarity?: number
|
||
}
|
||
|
||
|
||
// Scale icon color based on data completeness
|
||
const getScaleIconColor = (item: LineItem): string => {
|
||
if (item.ingredient_id) return '#28a745' // Green - mapped to ingredient
|
||
if (!item.pack_quantity) return '#dc3545' // Red - no pack data
|
||
if (item.portions_per_unit === null) return '#ffc107' // Amber - portions not defined
|
||
if (item.cost_per_portion !== null) return '#28a745' // Green - fully complete
|
||
return '#ffc107' // Amber - fallback
|
||
}
|
||
|
||
interface DuplicateCompare {
|
||
current_invoice: Invoice
|
||
firm_duplicate: Invoice | null
|
||
possible_duplicates: Invoice[]
|
||
related_documents: Invoice[]
|
||
}
|
||
|
||
interface ProductDefinition {
|
||
id: number
|
||
kitchen_id: number
|
||
supplier_id: number | null
|
||
product_code: string | null
|
||
description_pattern: string | null
|
||
pack_quantity: number | null
|
||
unit_size: number | null
|
||
unit_size_type: string | null
|
||
portions_per_unit: number | null
|
||
portion_description: string | null
|
||
saved_by_user_id: number | null
|
||
saved_by_username: string | null
|
||
source_invoice_id: number | null
|
||
source_invoice_number: string | null
|
||
updated_at: string | null
|
||
}
|
||
|
||
interface Settings {
|
||
high_quantity_threshold: number
|
||
dext_manual_send_enabled: boolean
|
||
pdf_preview_show_annotations: boolean
|
||
// LLM FEATURE — see LLM-MANIFEST.md for removal instructions
|
||
llm_enabled?: boolean
|
||
anthropic_api_key_set?: boolean
|
||
}
|
||
|
||
// LLM FEATURE — see LLM-MANIFEST.md for removal instructions
|
||
interface AiAssistSuggestions {
|
||
supplier_match?: { id: number; name: string; confidence: number; reason: string } | null
|
||
corrected_date?: string | null
|
||
line_item_corrections?: Array<{ idx: number; field: string; current: number | string | null; suggested: number | string; reason: string }>
|
||
description_recommendations?: Array<{ idx: number; recommendation: string; reason: string }>
|
||
subtotal_flags?: number[]
|
||
total_mismatch_analysis?: string | null
|
||
vat_treatment?: string | null
|
||
pack_size_suggestions?: Array<{ idx: number; pack_quantity: number; unit_size: number; unit_size_type: string }>
|
||
}
|
||
|
||
interface AiReconciliationMatch {
|
||
idx: number
|
||
ingredient_id: number
|
||
ingredient_name: string
|
||
confidence: number
|
||
reason: string
|
||
}
|
||
|
||
interface SearchResultItem {
|
||
description: string
|
||
unit_price: number | null
|
||
unit: string | null
|
||
pack_info: string | null
|
||
last_invoice_date: string | null
|
||
invoice_id: number
|
||
similarity: number
|
||
}
|
||
|
||
interface SupplierSearchGroup {
|
||
supplier_id: number | null
|
||
supplier_name: string
|
||
items: SearchResultItem[]
|
||
}
|
||
|
||
interface SearchResponse {
|
||
query: string
|
||
extracted_keywords: string
|
||
results: SupplierSearchGroup[]
|
||
total_matches: number
|
||
}
|
||
|
||
const TOLERANCE = 0.02; // 2p tolerance for rounding
|
||
|
||
// Helper to get first line of description (before newline)
|
||
const getFirstLineOfDescription = (description: string | null): string => {
|
||
if (!description) return '';
|
||
return description.split('\n')[0].trim();
|
||
};
|
||
|
||
// Date warning levels for unconfirmed invoices
|
||
type DateWarning = 'none' | 'amber' | 'red' | 'future';
|
||
function getDateWarning(dateStr: string | null, status: string): DateWarning {
|
||
// No date = always red (regardless of status)
|
||
if (!dateStr) return 'red';
|
||
|
||
// Only warn for unconfirmed invoices (confirmed invoices can have any date)
|
||
if (status === 'CONFIRMED') return 'none';
|
||
|
||
const invoiceDate = new Date(dateStr);
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
invoiceDate.setHours(0, 0, 0, 0);
|
||
|
||
// Future date = almost certainly a day/month swap error — highest priority
|
||
if (invoiceDate > today) return 'future';
|
||
|
||
const diffMs = today.getTime() - invoiceDate.getTime();
|
||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||
|
||
// More than 7 days old: escalate based on how far back and whether it crosses month/year
|
||
if (diffDays > 7) {
|
||
const sameMonth = invoiceDate.getMonth() === today.getMonth();
|
||
const sameYear = invoiceDate.getFullYear() === today.getFullYear();
|
||
if (!sameMonth || !sameYear) {
|
||
// Dec-Jan (and general month crossover) grace period — amber up to 45 days
|
||
// so a late-December invoice reviewed in early January isn't immediately red
|
||
if (diffDays <= 45) return 'amber';
|
||
return 'red';
|
||
}
|
||
return 'amber'; // Same month/year, just a bit old = amber
|
||
}
|
||
|
||
return 'none';
|
||
}
|
||
|
||
const dateWarningStyles: Record<DateWarning, React.CSSProperties> = {
|
||
none: {},
|
||
amber: { backgroundColor: '#fff3cd', borderColor: '#ffc107' },
|
||
red: { backgroundColor: '#f8d7da', borderColor: '#dc3545' },
|
||
future: { backgroundColor: '#ffe0cc', borderColor: '#e85d04', outline: '2px solid #e85d04' },
|
||
};
|
||
|
||
// Returns the day/month swapped version of a yyyy-mm-dd string, or null if invalid
|
||
function getSwappedDate(dateStr: string): string | null {
|
||
const parts = dateStr.split('-')
|
||
if (parts.length !== 3) return null
|
||
const [year, month, day] = parts
|
||
const newMonth = parseInt(day, 10)
|
||
const newDay = parseInt(month, 10)
|
||
if (newMonth < 1 || newMonth > 12 || newDay < 1 || newDay > 31) return null
|
||
const swapped = `${year}-${String(newMonth).padStart(2, '0')}-${String(newDay).padStart(2, '0')}`
|
||
const d = new Date(swapped)
|
||
if (isNaN(d.getTime())) return null
|
||
return swapped
|
||
}
|
||
|
||
// Returns the most plausible year-corrected version of a future date (same month/day, current or previous year).
|
||
// Only triggers when the date is >60 days in the future — invoices dated within ~2 months ahead could
|
||
// legitimately be a Dec-Jan crossover, so we don't want to aggressively suggest a year correction there.
|
||
function getYearCorrectedDate(dateStr: string): { date: string; year: number } | null {
|
||
const parts = dateStr.split('-')
|
||
if (parts.length !== 3) return null
|
||
const [yearStr, month, day] = parts
|
||
const today = new Date(); today.setHours(0, 0, 0, 0)
|
||
const currentYear = today.getFullYear()
|
||
if (parseInt(yearStr, 10) <= currentYear) return null // year is not wrong
|
||
// Only suggest a year correction when clearly beyond the Dec-Jan overlap window
|
||
const daysAhead = Math.floor((new Date(dateStr).getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
|
||
if (daysAhead <= 60) return null
|
||
// Try current year first, then previous year — take the first that's a valid past/today date
|
||
for (const y of [currentYear, currentYear - 1]) {
|
||
const candidate = `${y}-${month}-${day}`
|
||
const d = new Date(candidate)
|
||
if (!isNaN(d.getTime()) && d <= today) return { date: candidate, year: y }
|
||
}
|
||
return null
|
||
}
|
||
|
||
function LineItemsValidation({ lineItems, invoiceTotal, netTotal }: { lineItems: LineItem[]; invoiceTotal: number; netTotal: number | null }) {
|
||
// Handle case when there are no line items
|
||
if (lineItems.length === 0) {
|
||
return (
|
||
<div style={{
|
||
marginTop: '1rem',
|
||
padding: '1rem',
|
||
background: '#fef2f2',
|
||
borderRadius: '6px',
|
||
border: '1px solid #fca5a5'
|
||
}}>
|
||
<div style={{ color: '#dc2626', fontWeight: '600', marginBottom: '0.5rem' }}>
|
||
⚠️ No Line Items
|
||
</div>
|
||
<div style={{ color: '#991b1b', fontSize: '0.9rem' }}>
|
||
This invoice has no line items. It will NOT be included in GP calculations.
|
||
Use the "Edit Line Items" button above to manually add line items.
|
||
</div>
|
||
<div style={{ marginTop: '0.5rem', color: '#991b1b', fontSize: '0.9rem' }}>
|
||
<strong>Invoice Total:</strong> £{invoiceTotal.toFixed(2)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const lineItemsTotal = lineItems.reduce((sum, item) => sum + (item.amount || 0), 0);
|
||
const stockItemsTotal = lineItems
|
||
.filter(item => !item.is_non_stock)
|
||
.reduce((sum, item) => sum + (item.amount || 0), 0);
|
||
const nonStockItemsTotal = lineItems
|
||
.filter(item => item.is_non_stock)
|
||
.reduce((sum, item) => sum + (item.amount || 0), 0);
|
||
|
||
// Line item amounts are net values, so compare against netTotal (if available)
|
||
const compareTotal = netTotal ?? invoiceTotal;
|
||
const difference = Math.abs(compareTotal - lineItemsTotal);
|
||
const exactMatch = difference <= TOLERANCE;
|
||
const isValid = exactMatch;
|
||
const hasNonStock = nonStockItemsTotal > 0;
|
||
|
||
return (
|
||
<div style={{
|
||
marginTop: '1rem',
|
||
padding: '0.75rem',
|
||
background: isValid ? '#d4edda' : '#fff3cd',
|
||
borderRadius: '6px',
|
||
border: `1px solid ${isValid ? '#c3e6cb' : '#ffeeba'}`,
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<span style={{ fontWeight: '500' }}>
|
||
Line Items Total: <strong>£{lineItemsTotal.toFixed(2)}</strong>
|
||
</span>
|
||
<span style={{ fontWeight: '500' }}>
|
||
Invoice Net: <strong>£{(netTotal ?? invoiceTotal).toFixed(2)}</strong>
|
||
{netTotal && <span style={{ fontSize: '0.85rem', color: '#666' }}> (Gross: £{invoiceTotal.toFixed(2)})</span>}
|
||
</span>
|
||
</div>
|
||
{hasNonStock && (
|
||
<div style={{ marginTop: '0.5rem', padding: '0.5rem', background: 'rgba(255,255,255,0.5)', borderRadius: '4px' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem' }}>
|
||
<span><strong>Stock Items:</strong> £{stockItemsTotal.toFixed(2)}</span>
|
||
<span style={{ color: '#856404' }}><strong>Non-Stock:</strong> £{nonStockItemsTotal.toFixed(2)}</span>
|
||
</div>
|
||
<div style={{ marginTop: '0.25rem', fontSize: '0.8rem', color: '#155724' }}>
|
||
GP will be calculated using stock items only
|
||
</div>
|
||
</div>
|
||
)}
|
||
{exactMatch ? (
|
||
<div style={{ marginTop: '0.5rem', fontSize: '0.85rem', color: '#155724' }}>
|
||
✓ Totals match
|
||
</div>
|
||
) : (
|
||
<div style={{ marginTop: '0.5rem', fontSize: '0.85rem', color: isValid ? '#155724' : '#856404' }}>
|
||
{isValid ? '✓ ' : '⚠ '}Difference: £{difference.toFixed(2)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function Review() {
|
||
const { id } = useParams()
|
||
const { token, user } = useAuth()
|
||
const navigate = useNavigate()
|
||
const queryClient = useQueryClient()
|
||
|
||
const [invoiceNumber, setInvoiceNumber] = useState('')
|
||
const [invoiceDate, setInvoiceDate] = useState('')
|
||
const [total, setTotal] = useState('')
|
||
const [netTotal, setNetTotal] = useState('')
|
||
const [category, setCategory] = useState('food')
|
||
const [orderNumber, setOrderNumber] = useState('')
|
||
const [documentType, setDocumentType] = useState('invoice')
|
||
const [supplierId, setSupplierId] = useState<string>('')
|
||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||
const [showDuplicateModal, setShowDuplicateModal] = useState(false)
|
||
const [showCreateSupplierModal, setShowCreateSupplierModal] = useState(false)
|
||
const [showDisputeModal, setShowDisputeModal] = useState(false)
|
||
const [viewingDisputeId, setViewingDisputeId] = useState<number | null>(null)
|
||
const [adminOperationInProgress, setAdminOperationInProgress] = useState(false)
|
||
const [adminOperationResult, setAdminOperationResult] = useState<{type: 'success' | 'error', message: string} | null>(null)
|
||
const [showRawOcrModal, setShowRawOcrModal] = useState(false)
|
||
const [showSearchModal, setShowSearchModal] = useState(false)
|
||
const [showBulkStockModal, setShowBulkStockModal] = useState(false)
|
||
const [searchingLineItem, setSearchingLineItem] = useState<LineItem | null>(null)
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [searchResults, setSearchResults] = useState<SearchResponse | null>(null)
|
||
const [searchLoading, setSearchLoading] = useState(false)
|
||
const [newSupplierName, setNewSupplierName] = useState('')
|
||
const [editingLineItem, setEditingLineItem] = useState<number | null>(null)
|
||
const [lineItemEdits, setLineItemEdits] = useState<Partial<LineItem>>({})
|
||
const [bulkEditMode, setBulkEditMode] = useState(false)
|
||
const [highlightedField, setHighlightedField] = useState<string | null>(null)
|
||
const [expandedLineItem, setExpandedLineItem] = useState<number | null>(null)
|
||
const [costBreakdownEdits, setCostBreakdownEdits] = useState<Partial<LineItem>>({})
|
||
const [descSwapItem, setDescSwapItem] = useState<LineItem | null>(null) // For description swap modal
|
||
const [portionDescription, setPortionDescription] = useState<string>('')
|
||
const [saveAsDefault, setSaveAsDefault] = useState(false)
|
||
const [currentDefinition, setCurrentDefinition] = useState<ProductDefinition | null>(null)
|
||
const [definitionLoading, setDefinitionLoading] = useState(false)
|
||
const [pdfPages, setPdfPages] = useState<{ width: number; height: number; displayWidth: number; displayHeight: number; canvas: HTMLCanvasElement }[]>([])
|
||
const [zoomLevel, setZoomLevel] = useState<number>(1)
|
||
const [zoomPageNum, setZoomPageNum] = useState<number>(0) // Which page the zoom applies to
|
||
const [imageZoom, setImageZoom] = useState<number>(1) // Zoom level for non-PDF images
|
||
const pdfContainerRef = useRef<HTMLDivElement>(null)
|
||
const containerRef = useRef<HTMLDivElement>(null)
|
||
const imageContainerRef = useRef<HTMLDivElement>(null)
|
||
const highlightRef = useRef<HTMLDivElement>(null)
|
||
// Dext integration state
|
||
const [invoiceNotes, setInvoiceNotes] = useState('')
|
||
const [showDextSendConfirm, setShowDextSendConfirm] = useState(false)
|
||
const [showLinkDisputeModal, setShowLinkDisputeModal] = useState(false)
|
||
// Date picker modal state
|
||
const [showDatePickerModal, setShowDatePickerModal] = useState(false)
|
||
const [parsedDates, setParsedDates] = useState<Array<{ date: string; original: string; context: string; bbox?: { x: number; y: number; width: number; height: number; pageNumber: number } }>>([])
|
||
const [parsedDatesLoading, setParsedDatesLoading] = useState(false)
|
||
// Non-stock confirmation modal state
|
||
const [showNonStockConfirmModal, setShowNonStockConfirmModal] = useState(false)
|
||
const [nonStockConflictItems, setNonStockConflictItems] = useState<Array<{ description: string | null; amount: number | null }>>([])
|
||
// Invoice number search modal state
|
||
const [showInvoiceNumberModal, setShowInvoiceNumberModal] = useState(false)
|
||
const [invoiceNumberCandidates, setInvoiceNumberCandidates] = useState<Array<{ value: string; context: string; source: string; bbox?: { x: number; y: number; width: number; height: number; pageNumber: number } }>>([])
|
||
const [invoiceNumberExamples, setInvoiceNumberExamples] = useState<string[]>([])
|
||
const [invoiceNumberLoading, setInvoiceNumberLoading] = useState(false)
|
||
// Line items sorting and filtering
|
||
const [lineItemSortColumn, setLineItemSortColumn] = useState<string>('')
|
||
const [lineItemSortDirection, setLineItemSortDirection] = useState<'asc' | 'desc'>('asc')
|
||
const [lineItemPriceFilter, setLineItemPriceFilter] = useState<string>('')
|
||
const [lineItemSearchText, setLineItemSearchText] = useState<string>('')
|
||
const [lineItemPortionsFilter, setLineItemPortionsFilter] = useState<string>('')
|
||
const [lineItemMissingDataFilter, setLineItemMissingDataFilter] = useState<string>('')
|
||
// Current visible page for sticky indicator (multi-page invoices)
|
||
const [currentVisiblePage, setCurrentVisiblePage] = useState<number>(1)
|
||
const lineItemsTableRef = useRef<HTMLDivElement>(null)
|
||
|
||
// Ingredient mapping modal state
|
||
const [ingredientModalItem, setIngredientModalItem] = useState<LineItem | null>(null)
|
||
const [ingredientSearch, setIngredientSearch] = useState('')
|
||
const [ingredientSuggestions, setIngredientSuggestions] = useState<IngredientSuggestion[]>([])
|
||
const [ingredientSearchLoading, setIngredientSearchLoading] = useState(false)
|
||
const [selectedIngredientId, setSelectedIngredientId] = useState<number | null>(null)
|
||
const [selectedIngredientName, setSelectedIngredientName] = useState('')
|
||
const [selectedIngredientUnit, setSelectedIngredientUnit] = useState('')
|
||
const [showCreateIngredient, setShowCreateIngredient] = useState(false)
|
||
const [showLegacyPortioning, setShowLegacyPortioning] = useState(false)
|
||
const [ingredientConversionDisplay, setIngredientConversionDisplay] = useState('')
|
||
|
||
// Description alias suggestion state
|
||
const [aliasSuggestions, setAliasSuggestions] = useState<Record<string, {
|
||
description: string
|
||
source_id: number
|
||
ingredient_id: number
|
||
ingredient_name: string | null
|
||
canonical_description: string
|
||
product_code: string | null
|
||
similarity: number
|
||
price_difference: number | null
|
||
}>>({})
|
||
const [addingAliasFor, setAddingAliasFor] = useState<string | null>(null)
|
||
|
||
// LLM FEATURE — AI Assist state — see LLM-MANIFEST.md for removal instructions
|
||
const [aiMatchLoading, setAiMatchLoading] = useState(false)
|
||
const [aiMatchResults, setAiMatchResults] = useState<Array<{ id: number; name: string; confidence: number; reason: string }>>([])
|
||
const [aiAssistLoading, setAiAssistLoading] = useState(false)
|
||
const [aiAssistSuggestions, setAiAssistSuggestions] = useState<AiAssistSuggestions | null>(null)
|
||
const [aiReconciliationMatches, setAiReconciliationMatches] = useState<AiReconciliationMatch[]>([])
|
||
const [aiAssistError, setAiAssistError] = useState<string | null>(null)
|
||
const [aiDismissedCorrections, setAiDismissedCorrections] = useState<Set<string>>(new Set())
|
||
const [aiPackSizeLoading, setAiPackSizeLoading] = useState(false)
|
||
const [aiPackSizeSource, setAiPackSizeSource] = useState<string | null>(null)
|
||
|
||
// Price history modal state
|
||
const [historyModal, setHistoryModal] = useState<{
|
||
isOpen: boolean
|
||
productCode: string | null
|
||
description: string | null
|
||
unit: string | null
|
||
supplierId: number
|
||
supplierName: string
|
||
currentPrice?: number
|
||
sourceInvoiceId?: number
|
||
sourceLineItemId?: number
|
||
} | null>(null)
|
||
|
||
// Purchase Order matching state
|
||
const [viewingPoId, setViewingPoId] = useState<number | null>(null)
|
||
|
||
const { data: invoice, isLoading, refetch: refetchInvoice } = useQuery<Invoice>({
|
||
queryKey: ['invoice', id],
|
||
queryFn: async () => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to fetch invoice')
|
||
return res.json()
|
||
},
|
||
staleTime: 30000,
|
||
refetchOnWindowFocus: false,
|
||
})
|
||
|
||
// Direct URL with token - simpler approach
|
||
const imageUrl = invoice
|
||
? `/kitchen/api/invoices/${id}/file?token=${encodeURIComponent(token || '')}#toolbar=0&navpanes=0&view=FitH`
|
||
: null
|
||
|
||
const { data: lineItems, refetch: refetchLineItems } = useQuery<LineItem[]>({
|
||
queryKey: ['invoice-line-items', id],
|
||
queryFn: async () => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/line-items`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to fetch line items')
|
||
return res.json()
|
||
},
|
||
})
|
||
|
||
const { data: stockHistory } = useQuery<Record<string, {
|
||
has_history: boolean
|
||
previously_non_stock: boolean
|
||
total_occurrences: number
|
||
non_stock_occurrences: number
|
||
most_recent_status: boolean | null
|
||
}>>({
|
||
queryKey: ['invoice-stock-history', id],
|
||
queryFn: async () => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/stock-history`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to fetch stock history')
|
||
return res.json()
|
||
},
|
||
enabled: !!id,
|
||
})
|
||
|
||
const { data: duplicateInfo } = useQuery<DuplicateCompare>({
|
||
queryKey: ['invoice-duplicates', id],
|
||
queryFn: async () => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/duplicates`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to fetch duplicates')
|
||
return res.json()
|
||
},
|
||
enabled: !!invoice?.duplicate_status,
|
||
})
|
||
|
||
const { data: rawOcrData } = useQuery<{ raw_json: any; raw_text: string }>({
|
||
queryKey: ['invoice-ocr-data', id],
|
||
queryFn: async () => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/ocr-data`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to fetch OCR data')
|
||
return res.json()
|
||
},
|
||
})
|
||
|
||
// Fetch settings for high quantity threshold
|
||
const { data: settings } = useQuery<Settings>({
|
||
queryKey: ['settings'],
|
||
queryFn: async () => {
|
||
const res = await fetch('/kitchen/api/settings/', {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to fetch settings')
|
||
return res.json()
|
||
},
|
||
staleTime: 60000, // Cache for 1 minute
|
||
})
|
||
|
||
// Fetch description alias suggestions for unmapped line items without product codes
|
||
useEffect(() => {
|
||
if (!lineItems || !supplierId || !token) return
|
||
const unmappedItems = lineItems.filter(li => !li.ingredient_id && !li.product_code && li.description)
|
||
if (unmappedItems.length === 0) {
|
||
setAliasSuggestions({})
|
||
return
|
||
}
|
||
const items = unmappedItems.map(li => ({
|
||
description: li.description!.split('\n')[0].trim(),
|
||
price: li.unit_price ?? undefined,
|
||
}))
|
||
// Deduplicate by description
|
||
const uniqueItems = Array.from(new Map(items.map(i => [i.description.toLowerCase(), i])).values())
|
||
if (uniqueItems.length === 0) return
|
||
|
||
fetch('/kitchen/api/ingredients/sources/alias-suggestions', {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ supplier_id: parseInt(supplierId), items: uniqueItems }),
|
||
})
|
||
.then(res => res.ok ? res.json() : [])
|
||
.then((suggestions: any[]) => {
|
||
const map: typeof aliasSuggestions = {}
|
||
for (const s of suggestions) {
|
||
map[s.description.toLowerCase()] = s
|
||
}
|
||
setAliasSuggestions(map)
|
||
})
|
||
.catch(() => setAliasSuggestions({}))
|
||
}, [lineItems, supplierId, token])
|
||
|
||
// Helper to get bounding box for a field from raw OCR data
|
||
const getFieldBoundingBox = (fieldName: string): { x: number; y: number; width: number; height: number; pageNumber: number } | null => {
|
||
if (!rawOcrData?.raw_json?.documents?.[0]?.fields?.[fieldName]?.bounding_regions?.[0]) {
|
||
return null
|
||
}
|
||
const region = rawOcrData.raw_json.documents[0].fields[fieldName].bounding_regions[0]
|
||
const polygon = region.polygon
|
||
const pageNumber = region.page_number || 1 // Azure uses 1-based page numbers
|
||
if (!polygon || polygon.length < 4) return null
|
||
|
||
// Get page dimensions for the correct page (Azure uses inches by default)
|
||
const pageInfo = rawOcrData.raw_json.pages?.[pageNumber - 1] // Convert to 0-based
|
||
const pageWidth = pageInfo?.width || 8.5
|
||
const pageHeight = pageInfo?.height || 11
|
||
|
||
// Convert polygon to bounding box (polygon is array of [x, y] pairs)
|
||
const xs = polygon.map((p: number[]) => p[0])
|
||
const ys = polygon.map((p: number[]) => p[1])
|
||
const minX = Math.min(...xs)
|
||
const maxX = Math.max(...xs)
|
||
const minY = Math.min(...ys)
|
||
const maxY = Math.max(...ys)
|
||
|
||
// Return as percentages of page dimensions for easy scaling
|
||
return {
|
||
x: (minX / pageWidth) * 100,
|
||
y: (minY / pageHeight) * 100,
|
||
width: ((maxX - minX) / pageWidth) * 100,
|
||
height: ((maxY - minY) / pageHeight) * 100,
|
||
pageNumber,
|
||
}
|
||
}
|
||
|
||
// Helper to get bounding box for a line item by index
|
||
const getLineItemBoundingBox = (lineIndex: number): { x: number; y: number; width: number; height: number; pageNumber: number } | null => {
|
||
if (!rawOcrData?.raw_json?.documents?.[0]?.fields?.Items?.value?.[lineIndex]?.bounding_regions?.[0]) {
|
||
return null
|
||
}
|
||
const region = rawOcrData.raw_json.documents[0].fields.Items.value[lineIndex].bounding_regions[0]
|
||
const polygon = region.polygon
|
||
const pageNumber = region.page_number || 1
|
||
if (!polygon || polygon.length < 4) return null
|
||
|
||
const pageInfo = rawOcrData.raw_json.pages?.[pageNumber - 1]
|
||
const pageWidth = pageInfo?.width || 8.5
|
||
const pageHeight = pageInfo?.height || 11
|
||
|
||
const xs = polygon.map((p: number[]) => p[0])
|
||
const ys = polygon.map((p: number[]) => p[1])
|
||
const minX = Math.min(...xs)
|
||
const maxX = Math.max(...xs)
|
||
const minY = Math.min(...ys)
|
||
const maxY = Math.max(...ys)
|
||
|
||
return {
|
||
x: (minX / pageWidth) * 100,
|
||
y: (minY / pageHeight) * 100,
|
||
width: ((maxX - minX) / pageWidth) * 100,
|
||
height: ((maxY - minY) / pageHeight) * 100,
|
||
pageNumber,
|
||
}
|
||
}
|
||
|
||
// Crop a bounding-box region from the high-res PDF canvas and return a data URL.
|
||
// Returns null for non-PDF documents or if the page hasn't rendered yet.
|
||
const cropBboxToDataUrl = (
|
||
bbox: { x: number; y: number; width: number; height: number; pageNumber: number },
|
||
options?: { padX?: number; padY?: number; strokeColor?: string }
|
||
): string | null => {
|
||
if (!invoice?.image_path?.toLowerCase().endsWith('.pdf') || pdfPages.length === 0) return null
|
||
const pageData = pdfPages[bbox.pageNumber - 1]
|
||
if (!pageData) return null
|
||
const { padX = 60, padY = 20, strokeColor = '#007bff' } = options || {}
|
||
const bboxX = (bbox.x / 100) * pageData.width
|
||
const bboxY = (bbox.y / 100) * pageData.height
|
||
const bboxW = (bbox.width / 100) * pageData.width
|
||
const bboxH = (bbox.height / 100) * pageData.height
|
||
const startX = Math.max(0, bboxX - padX)
|
||
const startY = Math.max(0, bboxY - padY)
|
||
const endX = Math.min(pageData.width, bboxX + bboxW + padX)
|
||
const endY = Math.min(pageData.height, bboxY + bboxH + padY)
|
||
const cropW = endX - startX
|
||
const cropH = endY - startY
|
||
const croppedCanvas = document.createElement('canvas')
|
||
croppedCanvas.width = cropW
|
||
croppedCanvas.height = cropH
|
||
const ctx = croppedCanvas.getContext('2d')
|
||
if (!ctx) return null
|
||
ctx.drawImage(pageData.canvas, startX, startY, cropW, cropH, 0, 0, cropW, cropH)
|
||
ctx.strokeStyle = strokeColor
|
||
ctx.lineWidth = 3
|
||
ctx.strokeRect(bboxX - startX - 4, bboxY - startY - 4, bboxW + 8, bboxH + 8)
|
||
return croppedCanvas.toDataURL()
|
||
}
|
||
|
||
// Calculate zoom level to make bounding box fill ~80% of container
|
||
const calculateZoomForBbox = (bbox: { x: number; y: number; width: number; height: number; pageNumber: number } | null): number => {
|
||
if (!bbox || !pdfContainerRef.current || pdfPages.length === 0) return 2
|
||
|
||
const pageData = pdfPages[bbox.pageNumber - 1]
|
||
if (!pageData) return 2
|
||
|
||
// Get container dimensions
|
||
const containerWidth = pdfContainerRef.current.clientWidth - 32 // padding
|
||
const containerHeight = pdfContainerRef.current.clientHeight - 32
|
||
|
||
// Calculate bbox size in display pixels
|
||
const bboxDisplayWidth = (bbox.width / 100) * pageData.displayWidth
|
||
const bboxDisplayHeight = (bbox.height / 100) * pageData.displayHeight
|
||
|
||
// Calculate zoom to make bbox fill 80% of container (use the more constraining dimension)
|
||
const targetFill = 0.8
|
||
const zoomForWidth = (containerWidth * targetFill) / bboxDisplayWidth
|
||
const zoomForHeight = (containerHeight * targetFill) / bboxDisplayHeight
|
||
|
||
// Use the smaller zoom so it fits both dimensions, with min/max limits
|
||
const zoom = Math.min(zoomForWidth, zoomForHeight)
|
||
return Math.max(2, Math.min(zoom, 8)) // Clamp between 2x and 8x
|
||
}
|
||
|
||
// Scroll to page containing the bounding box and set zoom with centering
|
||
const scrollToHighlight = (bbox: { x: number; y: number; width: number; height: number; pageNumber: number } | null, zoom: number) => {
|
||
if (!bbox || !pdfContainerRef.current || pdfPages.length === 0) return
|
||
|
||
const pageData = pdfPages[bbox.pageNumber - 1]
|
||
if (!pageData) return
|
||
|
||
// Set zoom level for target page directly
|
||
setZoomLevel(zoom)
|
||
setZoomPageNum(bbox.pageNumber)
|
||
|
||
// Wait for DOM update, then scroll to centered position
|
||
setTimeout(() => {
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
if (!pdfContainerRef.current) return
|
||
|
||
const container = pdfContainerRef.current
|
||
|
||
// Force layout recalculation
|
||
void container.offsetHeight
|
||
|
||
// Find the actual page element to get its real position
|
||
const pageElements = container.querySelectorAll('[data-page-container]')
|
||
const targetPageElement = pageElements[bbox.pageNumber - 1] as HTMLElement
|
||
|
||
if (!targetPageElement) {
|
||
console.warn('Could not find page element for scrolling', {
|
||
totalPages: pdfPages.length,
|
||
targetPage: bbox.pageNumber,
|
||
foundElements: pageElements.length
|
||
})
|
||
return
|
||
}
|
||
|
||
// Use getBoundingClientRect for accurate positioning
|
||
const containerRect = container.getBoundingClientRect()
|
||
const pageRect = targetPageElement.getBoundingClientRect()
|
||
|
||
// Get the actual dimensions of the zoomed page
|
||
const pageActualWidth = pageRect.width
|
||
const pageActualHeight = pageRect.height
|
||
|
||
// Calculate bbox center position in pixels (bbox coords are percentages of the page)
|
||
const bboxCenterX = ((bbox.x + bbox.width / 2) / 100) * pageActualWidth
|
||
const bboxCenterY = ((bbox.y + bbox.height / 2) / 100) * pageActualHeight
|
||
|
||
// Calculate bbox center position relative to the container
|
||
// pageRect.left/top are relative to viewport, containerRect.left/top are container position
|
||
// Add current scroll position to get absolute position within scrollable content
|
||
const pageLeftInContainer = pageRect.left - containerRect.left + container.scrollLeft
|
||
const pageTopInContainer = pageRect.top - containerRect.top + container.scrollTop
|
||
|
||
const bboxAbsoluteX = pageLeftInContainer + bboxCenterX
|
||
const bboxAbsoluteY = pageTopInContainer + bboxCenterY
|
||
|
||
// Container viewport dimensions (clientWidth/Height excludes scrollbars but includes padding)
|
||
const containerWidth = container.clientWidth
|
||
const containerHeight = container.clientHeight
|
||
|
||
// Calculate scroll position to center the bbox in the viewport
|
||
const scrollLeft = Math.max(0, bboxAbsoluteX - containerWidth / 2)
|
||
const scrollTop = Math.max(0, bboxAbsoluteY - containerHeight / 2)
|
||
|
||
// Scroll instantly to show the highlighted area centered
|
||
container.scrollTo({
|
||
left: scrollLeft,
|
||
top: scrollTop,
|
||
behavior: 'auto' // Instant scroll instead of smooth
|
||
})
|
||
})
|
||
})
|
||
}, 100) // Wait for zoom to apply and DOM to update
|
||
}
|
||
|
||
// Reset zoom
|
||
const resetZoom = () => {
|
||
setZoomLevel(1)
|
||
setZoomPageNum(0)
|
||
if (pdfContainerRef.current) {
|
||
pdfContainerRef.current.scrollTo({ left: 0, top: 0, behavior: 'smooth' })
|
||
}
|
||
}
|
||
|
||
// Handler to toggle highlight and scroll to it
|
||
const handleHighlightField = (fieldName: string) => {
|
||
if (highlightedField === fieldName) {
|
||
setHighlightedField(null)
|
||
resetZoom()
|
||
} else {
|
||
setHighlightedField(fieldName)
|
||
setExpandedLineItem(null) // Clear any line item highlight
|
||
const bbox = getFieldBoundingBox(fieldName)
|
||
const dynamicZoom = calculateZoomForBbox(bbox)
|
||
scrollToHighlight(bbox, dynamicZoom)
|
||
}
|
||
}
|
||
|
||
// Handler to toggle line item inline preview (no zoom/scroll for line items)
|
||
const handleHighlightLineItem = (itemId: number, _lineIndex: number) => {
|
||
if (expandedLineItem === itemId) {
|
||
setExpandedLineItem(null)
|
||
} else {
|
||
setExpandedLineItem(itemId)
|
||
setHighlightedField(null) // Clear any field highlight
|
||
resetZoom() // Reset zoom when showing inline preview
|
||
}
|
||
}
|
||
|
||
const { data: suppliers } = useQuery<Supplier[]>({
|
||
queryKey: ['suppliers'],
|
||
queryFn: async () => {
|
||
const res = await fetch('/kitchen/api/suppliers/', {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) return []
|
||
return res.json()
|
||
},
|
||
})
|
||
|
||
// PO matching query — find linked or matching POs for this invoice
|
||
const { data: poMatchData, refetch: refetchPoMatch } = useQuery<{
|
||
matches: Array<{
|
||
po_id: number
|
||
order_date: string | null
|
||
total_amount: number | null
|
||
order_reference: string | null
|
||
status: string
|
||
order_type: string
|
||
confidence: number
|
||
}>
|
||
linked_po: {
|
||
po_id: number
|
||
order_date: string | null
|
||
total_amount: number | null
|
||
order_reference: string | null
|
||
status: string
|
||
order_type: string
|
||
} | null
|
||
}>({
|
||
queryKey: ['po-match', id],
|
||
queryFn: async () => {
|
||
const res = await fetch(`/kitchen/api/purchase-orders/matching/for-invoice?invoice_id=${id}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) return { matches: [], linked_po: null }
|
||
return res.json()
|
||
},
|
||
enabled: !!invoice?.supplier_id,
|
||
})
|
||
|
||
useEffect(() => {
|
||
if (invoice) {
|
||
setInvoiceNumber(invoice.invoice_number || '')
|
||
setInvoiceDate(invoice.invoice_date || '')
|
||
setTotal(invoice.total?.toString() || '')
|
||
setNetTotal(invoice.net_total?.toString() || '')
|
||
setCategory(invoice.category || 'food')
|
||
setOrderNumber(invoice.order_number || '')
|
||
setDocumentType(invoice.document_type || 'invoice')
|
||
setSupplierId(invoice.supplier_id?.toString() || '')
|
||
setInvoiceNotes(invoice.notes || '')
|
||
}
|
||
}, [invoice])
|
||
|
||
// Auto-reload when a PENDING invoice finishes processing
|
||
useEffect(() => {
|
||
if (!invoice || invoice.status !== 'PENDING') return
|
||
|
||
const pollInterval = setInterval(async () => {
|
||
try {
|
||
const checkRes = await fetch(`/kitchen/api/invoices/${id}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (checkRes.ok) {
|
||
const inv = await checkRes.json()
|
||
if (inv.status !== 'PENDING') {
|
||
clearInterval(pollInterval)
|
||
window.location.reload()
|
||
}
|
||
}
|
||
} catch {
|
||
// Ignore polling errors
|
||
}
|
||
}, 2000)
|
||
|
||
return () => clearInterval(pollInterval)
|
||
}, [invoice?.status, id, token])
|
||
|
||
// Render all PDF pages to canvases for highlighting support
|
||
useEffect(() => {
|
||
const renderPdf = async () => {
|
||
if (!invoice || !token) return
|
||
const isPdf = invoice.image_path?.toLowerCase().endsWith('.pdf')
|
||
if (!isPdf || !containerRef.current) return
|
||
|
||
try {
|
||
// Fetch the PDF
|
||
const pdfUrl = `/kitchen/api/invoices/${id}/file?token=${encodeURIComponent(token)}`
|
||
const response = await fetch(pdfUrl)
|
||
const arrayBuffer = await response.arrayBuffer()
|
||
|
||
// Load the PDF document
|
||
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
|
||
const numPages = pdf.numPages
|
||
|
||
// Get container width for display scaling
|
||
// Account for: imageSection padding (48px) + pdfScrollContainer padding (32px) + extra margin (32px) = 112px total
|
||
const containerWidth = containerRef.current.clientWidth - 112
|
||
|
||
// Render at high fixed resolution for quality (matches upload max of 2000px)
|
||
const targetRenderWidth = 1500 // High quality render width
|
||
|
||
// Render all pages
|
||
const pages: { width: number; height: number; displayWidth: number; displayHeight: number; canvas: HTMLCanvasElement }[] = []
|
||
|
||
for (let pageNum = 1; pageNum <= numPages; pageNum++) {
|
||
const page = await pdf.getPage(pageNum)
|
||
const viewport = page.getViewport({ scale: 1 })
|
||
|
||
// Calculate display size for container fit
|
||
const displayScale = containerWidth / viewport.width
|
||
const displayWidth = viewport.width * displayScale
|
||
const displayHeight = viewport.height * displayScale
|
||
|
||
// Render at high resolution (independent of display size)
|
||
const renderScale = targetRenderWidth / viewport.width
|
||
const renderViewport = page.getViewport({ scale: renderScale })
|
||
|
||
// Create canvas for this page at high resolution
|
||
const canvas = document.createElement('canvas')
|
||
canvas.width = renderViewport.width
|
||
canvas.height = renderViewport.height
|
||
|
||
const context = canvas.getContext('2d')
|
||
if (context) {
|
||
// If pdf_preview_show_annotations is false, hide PDF annotations
|
||
const annotationMode = settings?.pdf_preview_show_annotations === false
|
||
? AnnotationMode.DISABLE
|
||
: AnnotationMode.ENABLE
|
||
await page.render({
|
||
canvasContext: context,
|
||
viewport: renderViewport,
|
||
canvas: canvas,
|
||
annotationMode: annotationMode,
|
||
}).promise
|
||
}
|
||
|
||
pages.push({
|
||
width: renderViewport.width, // High-res canvas dimensions
|
||
height: renderViewport.height,
|
||
displayWidth, // Display dimensions (half of canvas for 2x)
|
||
displayHeight,
|
||
canvas,
|
||
})
|
||
}
|
||
|
||
setPdfPages(pages)
|
||
} catch (err) {
|
||
console.error('Error rendering PDF:', err)
|
||
}
|
||
}
|
||
|
||
renderPdf()
|
||
}, [invoice, token, id, settings?.pdf_preview_show_annotations])
|
||
|
||
const updateMutation = useMutation({
|
||
mutationFn: async (data: Partial<Invoice>) => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(data),
|
||
})
|
||
if (!res.ok) {
|
||
const errorData = await res.json().catch(() => ({}))
|
||
const errorMessage = errorData.detail?.message || errorData.detail || 'Failed to update'
|
||
const error = new Error(errorMessage) as Error & { code?: string }
|
||
error.code = errorData.detail?.error
|
||
throw error
|
||
}
|
||
return res.json()
|
||
},
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
queryClient.invalidateQueries({ queryKey: ['invoices'] })
|
||
queryClient.invalidateQueries({ queryKey: ['invoice-line-items', id] })
|
||
},
|
||
})
|
||
|
||
const deleteMutation = useMutation({
|
||
mutationFn: async () => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}`, {
|
||
method: 'DELETE',
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to delete')
|
||
return res.json()
|
||
},
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['invoices'] })
|
||
navigate('/invoices')
|
||
},
|
||
})
|
||
|
||
const updateLineItemMutation = useMutation({
|
||
mutationFn: async ({ itemId, data }: { itemId: number; data: Partial<LineItem> }) => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/line-items/${itemId}`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(data),
|
||
})
|
||
if (!res.ok) throw new Error('Failed to update')
|
||
return res.json()
|
||
},
|
||
onSuccess: () => {
|
||
refetchLineItems()
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] }) // Refresh stock_total
|
||
setEditingLineItem(null)
|
||
setLineItemEdits({})
|
||
setExpandedLineItem(null) // Close line item preview
|
||
},
|
||
})
|
||
|
||
const createLineItemMutation = useMutation({
|
||
mutationFn: async (data: Partial<LineItem>) => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/line-items`, {
|
||
method: 'POST',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(data),
|
||
})
|
||
if (!res.ok) throw new Error('Failed to create line item')
|
||
return res.json()
|
||
},
|
||
onSuccess: () => {
|
||
refetchLineItems()
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
setEditingLineItem(null)
|
||
setLineItemEdits({})
|
||
},
|
||
})
|
||
|
||
const deleteLineItemMutation = useMutation({
|
||
mutationFn: async (itemId: number) => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/line-items/${itemId}`, {
|
||
method: 'DELETE',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
})
|
||
if (!res.ok) throw new Error('Failed to delete line item')
|
||
return res.json()
|
||
},
|
||
onSuccess: () => {
|
||
refetchLineItems()
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
setEditingLineItem(null)
|
||
},
|
||
})
|
||
|
||
const saveDefinitionMutation = useMutation({
|
||
mutationFn: async ({ itemId, portionDesc }: { itemId: number; portionDesc?: string }) => {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/line-items/${itemId}/save-definition`, {
|
||
method: 'POST',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ portion_description: portionDesc || null }),
|
||
})
|
||
if (!res.ok) {
|
||
const err = await res.json()
|
||
throw new Error(err.detail || 'Failed to save definition')
|
||
}
|
||
return res.json()
|
||
},
|
||
})
|
||
|
||
const createSupplierMutation = useMutation({
|
||
mutationFn: async (name: string) => {
|
||
const res = await fetch('/kitchen/api/suppliers/', {
|
||
method: 'POST',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ name }),
|
||
})
|
||
if (!res.ok) throw new Error('Failed to create supplier')
|
||
return res.json()
|
||
},
|
||
onSuccess: (newSupplier: { id: number; name: string }) => {
|
||
queryClient.invalidateQueries({ queryKey: ['suppliers'] })
|
||
setSupplierId(newSupplier.id.toString())
|
||
setShowCreateSupplierModal(false)
|
||
setNewSupplierName('')
|
||
},
|
||
})
|
||
|
||
const addAliasMutation = useMutation({
|
||
mutationFn: async ({ supplierId, alias, invoiceId }: { supplierId: number; alias: string; invoiceId?: number }) => {
|
||
const res = await fetch(`/kitchen/api/suppliers/${supplierId}/aliases`, {
|
||
method: 'POST',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ alias, invoice_id: invoiceId }),
|
||
})
|
||
if (!res.ok) throw new Error('Failed to add alias')
|
||
return res.json()
|
||
},
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['suppliers'] })
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
},
|
||
})
|
||
|
||
const addDescriptionAliasMutation = useMutation({
|
||
mutationFn: async ({ sourceId, alias }: { sourceId: number; alias: string }) => {
|
||
const res = await fetch(`/kitchen/api/ingredients/sources/${sourceId}/aliases`, {
|
||
method: 'POST',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ alias }),
|
||
})
|
||
if (!res.ok) throw new Error('Failed to add alias')
|
||
return res.json()
|
||
},
|
||
onSuccess: (_data, variables) => {
|
||
// Remove this suggestion from the map
|
||
setAliasSuggestions(prev => {
|
||
const next = { ...prev }
|
||
delete next[variables.alias.toLowerCase()]
|
||
return next
|
||
})
|
||
setAddingAliasFor(null)
|
||
// Refresh line items (descriptions will have been renamed)
|
||
queryClient.invalidateQueries({ queryKey: ['invoice-line-items', id] })
|
||
},
|
||
})
|
||
|
||
// PO link/unlink handlers
|
||
const handleLinkPo = async (poId: number) => {
|
||
try {
|
||
const res = await fetch(`/kitchen/api/purchase-orders/${poId}/link`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ invoice_id: parseInt(id!) }),
|
||
})
|
||
if (!res.ok) throw new Error('Failed to link PO')
|
||
refetchPoMatch()
|
||
} catch {
|
||
// silently fail, user can retry
|
||
}
|
||
}
|
||
|
||
const handleUnlinkPo = async (poId: number) => {
|
||
try {
|
||
const res = await fetch(`/kitchen/api/purchase-orders/${poId}/unlink`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to unlink PO')
|
||
refetchPoMatch()
|
||
} catch {
|
||
// silently fail
|
||
}
|
||
}
|
||
|
||
const handleCreateSupplier = () => {
|
||
if (newSupplierName.trim()) {
|
||
createSupplierMutation.mutate(newSupplierName.trim())
|
||
}
|
||
}
|
||
|
||
const openCreateSupplierModal = () => {
|
||
setNewSupplierName(invoice?.vendor_name || '')
|
||
setShowCreateSupplierModal(true)
|
||
}
|
||
|
||
const handleSave = async (status: string = 'REVIEWED') => {
|
||
await updateMutation.mutateAsync({
|
||
invoice_number: invoiceNumber || null,
|
||
invoice_date: invoiceDate || null,
|
||
total: total ? parseFloat(total) : null,
|
||
net_total: netTotal ? parseFloat(netTotal) : null,
|
||
supplier_id: supplierId ? parseInt(supplierId) : null,
|
||
category,
|
||
order_number: orderNumber || null,
|
||
document_type: documentType,
|
||
status,
|
||
})
|
||
}
|
||
|
||
// Auto-save when invoice details change (debounced)
|
||
useEffect(() => {
|
||
if (!invoice) return
|
||
|
||
const timeoutId = setTimeout(() => {
|
||
// Only auto-save if values have actually changed from the invoice
|
||
const hasChanges =
|
||
invoiceNumber !== (invoice.invoice_number || '') ||
|
||
invoiceDate !== (invoice.invoice_date || '') ||
|
||
total !== (invoice.total?.toString() || '') ||
|
||
netTotal !== (invoice.net_total?.toString() || '') ||
|
||
supplierId !== (invoice.supplier_id?.toString() || '') ||
|
||
category !== (invoice.category || 'food') ||
|
||
orderNumber !== (invoice.order_number || '') ||
|
||
documentType !== (invoice.document_type || 'invoice')
|
||
|
||
if (hasChanges) {
|
||
updateMutation.mutate({
|
||
invoice_number: invoiceNumber || null,
|
||
invoice_date: invoiceDate || null,
|
||
total: total ? parseFloat(total) : null,
|
||
net_total: netTotal ? parseFloat(netTotal) : null,
|
||
supplier_id: supplierId ? parseInt(supplierId) : null,
|
||
category,
|
||
order_number: orderNumber || null,
|
||
document_type: documentType,
|
||
})
|
||
}
|
||
}, 1000) // 1 second debounce
|
||
|
||
return () => clearTimeout(timeoutId)
|
||
}, [invoiceNumber, invoiceDate, total, netTotal, supplierId, category, orderNumber, documentType])
|
||
|
||
const handleConfirm = async () => {
|
||
// Warn (but allow) if there are open disputes
|
||
if (invoice?.has_open_disputes) {
|
||
if (!window.confirm(
|
||
`This invoice has ${invoice.dispute_count} open dispute(s).\n\n` +
|
||
`You can still confirm — the invoice will appear in reports while the dispute is tracked separately.\n\n` +
|
||
`Continue?`
|
||
)) {
|
||
return
|
||
}
|
||
}
|
||
|
||
// Warn if invoice date is in the future — likely a day/month swap
|
||
if (invoiceDate && getDateWarning(invoiceDate, 'PENDING') === 'future') {
|
||
const futureDate = new Date(invoiceDate).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
|
||
if (!window.confirm(
|
||
`⚠ Invoice date is in the future: ${futureDate}\n\n` +
|
||
`This is almost certainly a day/month format error (e.g. 6 April entered as 4 June).\n\n` +
|
||
`Please double-check the date on the document before confirming.\n\n` +
|
||
`Confirm anyway?`
|
||
)) {
|
||
return
|
||
}
|
||
}
|
||
|
||
// Warn if any items were previously marked non-stock but aren't on this invoice
|
||
const nonStockConflicts = (lineItems || []).filter(item => {
|
||
const history = stockHistory?.[item.id.toString()]
|
||
return history?.has_history && history.previously_non_stock && !item.is_non_stock
|
||
})
|
||
if (nonStockConflicts.length > 0) {
|
||
setNonStockConflictItems(nonStockConflicts.map(item => ({
|
||
description: item.description,
|
||
amount: item.amount,
|
||
})))
|
||
setShowNonStockConfirmModal(true)
|
||
return
|
||
}
|
||
|
||
// Check for invoice date before confirming
|
||
if (!invoiceDate) {
|
||
alert(
|
||
`Cannot confirm invoice without a date.\n\n` +
|
||
`Please set the invoice date before confirming.\n\n` +
|
||
`Invoices without dates cannot be found in date-filtered views.`
|
||
)
|
||
return
|
||
}
|
||
|
||
await doConfirm()
|
||
}
|
||
|
||
const doConfirm = async () => {
|
||
try {
|
||
await handleSave('CONFIRMED')
|
||
navigate('/invoices')
|
||
} catch (error) {
|
||
const message = error instanceof Error ? error.message : 'Failed to confirm invoice'
|
||
alert(message)
|
||
}
|
||
}
|
||
|
||
const handleDelete = () => {
|
||
deleteMutation.mutate()
|
||
}
|
||
|
||
const handleMarkDextSent = async () => {
|
||
if (!window.confirm('Mark this invoice as sent to Dext without actually sending?\n\nThis will also trigger Nextcloud archival if configured.')) {
|
||
return
|
||
}
|
||
|
||
setAdminOperationInProgress(true)
|
||
setAdminOperationResult(null)
|
||
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/mark-dext-sent`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const error = await res.json()
|
||
throw new Error(error.detail || 'Failed to mark as sent')
|
||
}
|
||
|
||
const result = await res.json()
|
||
setAdminOperationResult({
|
||
type: 'success',
|
||
message: result.message + (result.archival_status ? `\n\n${result.archival_status}` : '')
|
||
})
|
||
|
||
// Refresh invoice data
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
} catch (error) {
|
||
setAdminOperationResult({
|
||
type: 'error',
|
||
message: error instanceof Error ? error.message : 'Operation failed'
|
||
})
|
||
} finally {
|
||
setAdminOperationInProgress(false)
|
||
}
|
||
}
|
||
|
||
const handleReprocessOCR = async () => {
|
||
if (!window.confirm('Reprocess existing OCR data?\n\nThis will:\n- Re-identify supplier\n- Re-detect document type\n- Re-create line items with product definitions\n- Re-run duplicate detection\n\nExisting line items will be replaced.')) {
|
||
return
|
||
}
|
||
|
||
setAdminOperationInProgress(true)
|
||
setAdminOperationResult(null)
|
||
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/reprocess`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const error = await res.json()
|
||
throw new Error(error.detail || 'Failed to reprocess')
|
||
}
|
||
|
||
const result = await res.json()
|
||
setAdminOperationResult({
|
||
type: 'success',
|
||
message: `${result.message}\n\nSupplier ID: ${result.supplier_id || 'None'}\nDocument Type: ${result.document_type}\nLine Items: ${result.line_items_count}\nDuplicate Status: ${result.duplicate_status || 'None'}`
|
||
})
|
||
|
||
// Full page reload to ensure all data is fresh
|
||
window.location.reload()
|
||
} catch (error) {
|
||
setAdminOperationResult({
|
||
type: 'error',
|
||
message: error instanceof Error ? error.message : 'Operation failed'
|
||
})
|
||
} finally {
|
||
setAdminOperationInProgress(false)
|
||
}
|
||
}
|
||
|
||
const handleFetchParsedDates = async () => {
|
||
setParsedDatesLoading(true)
|
||
setParsedDates([])
|
||
setShowDatePickerModal(true)
|
||
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/parse-dates`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
|
||
if (!res.ok) {
|
||
throw new Error('Failed to parse dates')
|
||
}
|
||
|
||
const data = await res.json()
|
||
setParsedDates(data.found_dates || [])
|
||
} catch (error) {
|
||
console.error('Failed to fetch parsed dates:', error)
|
||
} finally {
|
||
setParsedDatesLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleSelectParsedDate = (dateStr: string) => {
|
||
setInvoiceDate(dateStr)
|
||
setShowDatePickerModal(false)
|
||
}
|
||
|
||
const handleFetchInvoiceNumberCandidates = async () => {
|
||
setInvoiceNumberLoading(true)
|
||
setInvoiceNumberCandidates([])
|
||
setInvoiceNumberExamples([])
|
||
setShowInvoiceNumberModal(true)
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/parse-invoice-number`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) throw new Error('Failed to search for invoice number')
|
||
const data = await res.json()
|
||
setInvoiceNumberCandidates(data.candidates || [])
|
||
setInvoiceNumberExamples(data.supplier_examples || [])
|
||
} catch (error) {
|
||
console.error('Failed to fetch invoice number candidates:', error)
|
||
} finally {
|
||
setInvoiceNumberLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleSelectInvoiceNumber = (value: string) => {
|
||
setInvoiceNumber(value)
|
||
setShowInvoiceNumberModal(false)
|
||
}
|
||
|
||
const handleResendToAzure = async () => {
|
||
if (!window.confirm('Re-send invoice to Azure for OCR extraction?\n\nThis will:\n- Fully re-extract data from Azure\n- Update all invoice fields\n- Re-create line items with product definitions\n- Re-run duplicate detection\n\nExisting data will be replaced.')) {
|
||
return
|
||
}
|
||
|
||
setAdminOperationInProgress(true)
|
||
setAdminOperationResult(null)
|
||
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/resend-to-azure`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const error = await res.json()
|
||
throw new Error(error.detail || 'Failed to resend to Azure')
|
||
}
|
||
|
||
const result = await res.json()
|
||
setAdminOperationResult({
|
||
type: 'success',
|
||
message: `${result.message}\n\nThe page will reload automatically when processing completes.`
|
||
})
|
||
|
||
// Poll for completion
|
||
const pollInterval = setInterval(async () => {
|
||
try {
|
||
const checkRes = await fetch(`/kitchen/api/invoices/${id}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (checkRes.ok) {
|
||
const inv = await checkRes.json()
|
||
if (inv.status !== 'PENDING') {
|
||
clearInterval(pollInterval)
|
||
// Full page reload to ensure all data is fresh
|
||
window.location.reload()
|
||
}
|
||
}
|
||
} catch (e) {
|
||
// Ignore polling errors
|
||
}
|
||
}, 2000)
|
||
|
||
// Stop polling after 2 minutes
|
||
setTimeout(() => clearInterval(pollInterval), 120000)
|
||
} catch (error) {
|
||
setAdminOperationResult({
|
||
type: 'error',
|
||
message: error instanceof Error ? error.message : 'Operation failed'
|
||
})
|
||
} finally {
|
||
setAdminOperationInProgress(false)
|
||
}
|
||
}
|
||
|
||
const handleRegenerateHighlights = async () => {
|
||
setAdminOperationInProgress(true)
|
||
setAdminOperationResult(null)
|
||
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/regenerate-highlights`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const error = await res.json()
|
||
throw new Error(error.detail || 'Failed to regenerate highlights')
|
||
}
|
||
|
||
const result = await res.json()
|
||
const nonStockCount = result.non_stock_count || 0
|
||
const hasNotes = result.has_notes
|
||
let message = ''
|
||
if (nonStockCount > 0) {
|
||
message = `PDF highlights regenerated successfully.\n\nHighlighted ${nonStockCount} non-stock item(s).`
|
||
} else {
|
||
message = 'PDF highlights cleared (no non-stock items marked).'
|
||
}
|
||
if (hasNotes) {
|
||
message += '\nNotes overlay added.'
|
||
}
|
||
setAdminOperationResult({
|
||
type: 'success',
|
||
message
|
||
})
|
||
|
||
// Refresh invoice to update PDF preview
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
} catch (error) {
|
||
setAdminOperationResult({
|
||
type: 'error',
|
||
message: error instanceof Error ? error.message : 'Operation failed'
|
||
})
|
||
} finally {
|
||
setAdminOperationInProgress(false)
|
||
}
|
||
}
|
||
|
||
const startEditLineItem = (item: LineItem) => {
|
||
setEditingLineItem(item.id)
|
||
setLineItemEdits({
|
||
product_code: item.product_code,
|
||
description: item.description,
|
||
unit: item.unit,
|
||
quantity: item.quantity,
|
||
unit_price: item.unit_price,
|
||
tax_rate: item.tax_rate,
|
||
amount: item.amount,
|
||
is_non_stock: item.is_non_stock,
|
||
})
|
||
// Open line item preview
|
||
setExpandedLineItem(item.id)
|
||
setHighlightedField(null)
|
||
resetZoom()
|
||
}
|
||
|
||
const saveLineItemEdit = (itemId: number) => {
|
||
if (itemId === -1) {
|
||
// This is a new line item - use POST
|
||
createLineItemMutation.mutate(lineItemEdits)
|
||
} else {
|
||
// Existing line item - use PATCH
|
||
updateLineItemMutation.mutate({ itemId, data: lineItemEdits })
|
||
}
|
||
// Clear edit state immediately after save
|
||
setEditingLineItem(null)
|
||
setLineItemEdits({})
|
||
setExpandedLineItem(null)
|
||
}
|
||
|
||
const cancelEditLineItem = () => {
|
||
setEditingLineItem(null)
|
||
setLineItemEdits({})
|
||
setExpandedLineItem(null)
|
||
}
|
||
|
||
const handleAddLineItem = () => {
|
||
// Create a temporary new line item with placeholder ID
|
||
const newItemId = -1 // Negative ID indicates unsaved
|
||
|
||
// Set editing state to new item
|
||
setEditingLineItem(newItemId)
|
||
setLineItemEdits({
|
||
product_code: '',
|
||
description: '',
|
||
unit: '',
|
||
quantity: null,
|
||
unit_price: null,
|
||
tax_rate: '',
|
||
amount: null,
|
||
is_non_stock: false,
|
||
line_number: (filteredAndSortedLineItems.length || 0) + 1
|
||
})
|
||
}
|
||
|
||
const handleDeleteLineItem = (itemId: number) => {
|
||
if (window.confirm('Are you sure you want to delete this line item? This action cannot be undone.')) {
|
||
deleteLineItemMutation.mutate(itemId)
|
||
}
|
||
}
|
||
|
||
// Helper to ensure item is being edited when user interacts with fields in bulk mode
|
||
const ensureEditing = (item: LineItem) => {
|
||
if (editingLineItem !== item.id) {
|
||
startEditLineItem(item)
|
||
}
|
||
}
|
||
|
||
// Build dynamic list of supplier words from loaded suppliers
|
||
const getSupplierWords = (): string[] => {
|
||
if (!suppliers) return []
|
||
const words: string[] = []
|
||
for (const supplier of suppliers) {
|
||
// Add each word from supplier name
|
||
if (supplier.name) {
|
||
words.push(...supplier.name.toLowerCase().split(/\s+/))
|
||
}
|
||
// Add each alias and its words
|
||
if (supplier.aliases) {
|
||
for (const alias of supplier.aliases) {
|
||
if (alias) {
|
||
words.push(...alias.toLowerCase().split(/\s+/))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// Remove duplicates and filter short words
|
||
return [...new Set(words)].filter(w => w.length > 1)
|
||
}
|
||
|
||
// Extract meaningful keywords from description for search
|
||
const extractKeywords = (description: string): string => {
|
||
if (!description) return ''
|
||
let text = description
|
||
// Remove pack sizes (12x1L, 120x15g)
|
||
text = text.replace(/\b\d+\s*x\s*\d+(\.\d+)?\s*(g|kg|ml|ltr|l|oz|cl)?\b/gi, '')
|
||
// Remove quantity patterns
|
||
text = text.replace(/\b(qty|quantity)\s*:?\s*\d+\b/gi, '')
|
||
text = text.replace(/\bcase\s*(of\s*)?\d+\b/gi, '')
|
||
// Remove product codes like (L-AG)
|
||
text = text.replace(/\([A-Z]{1,3}-?[A-Z0-9]{1,5}\)/gi, '')
|
||
text = text.replace(/\[[A-Z0-9-]+\]/gi, '')
|
||
// Remove generic packaging terms
|
||
text = text.replace(/\b(case|qty|un|pack|box|each|per|unit|pkt|bag|bottle|tin|can|carton|tray|portion|portions)\b/gi, '')
|
||
// Remove standalone numbers and weights
|
||
text = text.replace(/\b\d+(\.\d+)?\s*(g|kg|ml|ltr|l|oz|cl|lb)?\b/gi, '')
|
||
// Clean up special characters
|
||
text = text.replace(/[^\w\s]/g, ' ')
|
||
// Remove common English stop words
|
||
text = text.replace(/\b(the|a|an|in|on|at|by|for|with|to|of|and|or|is|it|as|be|are|was|been|being|have|has|had|do|does|did|will|would|could|should|may|might|this|that|these|those|from|into|through|during|before|after|above|below|between|under|over)\b/gi, '')
|
||
// Remove supplier names dynamically from loaded suppliers
|
||
const supplierWords = getSupplierWords()
|
||
if (supplierWords.length > 0) {
|
||
const supplierPattern = new RegExp(`\\b(${supplierWords.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})\\b`, 'gi')
|
||
text = text.replace(supplierPattern, '')
|
||
}
|
||
return text.split(/\s+/).filter(w => w.length > 1).join(' ').trim()
|
||
}
|
||
|
||
const openSearchModal = (item: LineItem) => {
|
||
setSearchingLineItem(item)
|
||
const keywords = extractKeywords(item.description || '')
|
||
setSearchQuery(keywords)
|
||
setSearchResults(null)
|
||
setShowSearchModal(true)
|
||
// Auto-search if we have keywords
|
||
if (keywords) {
|
||
performSearch(keywords)
|
||
}
|
||
}
|
||
|
||
const openPriceHistoryModal = (item: LineItem) => {
|
||
if (!invoice?.supplier_id) return
|
||
setHistoryModal({
|
||
isOpen: true,
|
||
productCode: item.product_code,
|
||
description: item.description,
|
||
unit: item.unit,
|
||
supplierId: invoice.supplier_id,
|
||
supplierName: invoice.supplier_name || 'Unknown',
|
||
currentPrice: item.unit_price || undefined,
|
||
sourceInvoiceId: invoice.id,
|
||
sourceLineItemId: item.id,
|
||
})
|
||
}
|
||
|
||
const performSearch = async (query: string) => {
|
||
if (!query || query.length < 2) return
|
||
setSearchLoading(true)
|
||
try {
|
||
const res = await fetch('/kitchen/api/invoices/line-items/search', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
body: JSON.stringify({
|
||
query,
|
||
exclude_invoice_id: id ? parseInt(id) : null
|
||
})
|
||
})
|
||
if (res.ok) {
|
||
setSearchResults(await res.json())
|
||
}
|
||
} finally {
|
||
setSearchLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleBulkStockUpdate = async (markAsStock: boolean) => {
|
||
if (!lineItems) return
|
||
|
||
try {
|
||
// Update all line items
|
||
const promises = lineItems.map(item =>
|
||
fetch(`/kitchen/api/invoices/${id}/line-items/${item.id}`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ is_non_stock: !markAsStock }),
|
||
})
|
||
)
|
||
|
||
await Promise.all(promises)
|
||
await refetchLineItems()
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
setShowBulkStockModal(false)
|
||
} catch (error) {
|
||
console.error('Failed to bulk update stock status:', error)
|
||
}
|
||
}
|
||
|
||
// LLM FEATURE — AI Match handler for ingredient matching — see LLM-MANIFEST.md for removal instructions
|
||
const handleAiMatch = async (description: string) => {
|
||
setAiMatchLoading(true)
|
||
setAiMatchResults([])
|
||
try {
|
||
const res = await fetch(`/kitchen/api/ingredients/ai-match?description=${encodeURIComponent(description)}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
if (data.ranked?.length > 0) {
|
||
setAiMatchResults(data.ranked)
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
setAiMatchLoading(false)
|
||
}
|
||
|
||
// LLM FEATURE — AI Assist handler — see LLM-MANIFEST.md for removal instructions
|
||
const handleAiAssist = async () => {
|
||
setAiAssistLoading(true)
|
||
setAiAssistError(null)
|
||
setAiAssistSuggestions(null)
|
||
setAiReconciliationMatches([])
|
||
setAiDismissedCorrections(new Set())
|
||
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/ai-assist`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (!res.ok) {
|
||
let detail = 'AI analysis failed'
|
||
try { const err = await res.json(); detail = err.detail || detail } catch { /* non-JSON response */ }
|
||
throw new Error(detail)
|
||
}
|
||
const data = await res.json()
|
||
if (data.suggestions) setAiAssistSuggestions(data.suggestions)
|
||
if (data.reconciliation_matches) setAiReconciliationMatches(data.reconciliation_matches)
|
||
if (data.error) setAiAssistError(data.error)
|
||
} catch (error) {
|
||
setAiAssistError(error instanceof Error ? error.message : 'AI analysis failed')
|
||
} finally {
|
||
setAiAssistLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleApplyAiCorrection = async (idx: number, field: string, value: number | string) => {
|
||
if (!lineItems) return
|
||
const item = lineItems[idx]
|
||
if (!item) return
|
||
try {
|
||
await updateLineItemMutation.mutateAsync({ itemId: item.id, data: { [field]: value } as Partial<LineItem> })
|
||
setAiDismissedCorrections(prev => new Set([...prev, `${idx}-${field}`]))
|
||
} catch (error) {
|
||
console.error('Failed to apply AI correction:', error)
|
||
}
|
||
}
|
||
|
||
const handleApplyAiSupplier = async (supplierId: number) => {
|
||
try {
|
||
await updateMutation.mutateAsync({ supplier_id: supplierId } as Partial<Invoice>)
|
||
} catch (error) {
|
||
console.error('Failed to apply AI supplier match:', error)
|
||
}
|
||
}
|
||
// END LLM FEATURE
|
||
|
||
const toggleCostBreakdown = async (item: LineItem) => {
|
||
// Open ingredient mapping modal
|
||
setIngredientModalItem(item)
|
||
setAiPackSizeLoading(false)
|
||
setAiPackSizeSource(null)
|
||
|
||
setCostBreakdownEdits({
|
||
pack_quantity: item.pack_quantity,
|
||
unit_size: item.unit_size,
|
||
unit_size_type: item.unit_size_type,
|
||
portions_per_unit: item.portions_per_unit,
|
||
unit_price: item.unit_price,
|
||
})
|
||
setPortionDescription('')
|
||
setSaveAsDefault(false)
|
||
setCurrentDefinition(null)
|
||
setShowLegacyPortioning(false)
|
||
setShowCreateIngredient(false)
|
||
setIngredientSearch('')
|
||
setIngredientSuggestions([])
|
||
setSelectedIngredientId(item.ingredient_id || null)
|
||
setSelectedIngredientName(item.ingredient_name || '')
|
||
setSelectedIngredientUnit(item.ingredient_unit || '')
|
||
|
||
// Show conversion display immediately if pack data exists
|
||
// Works with or without ingredient — falls back to unit_size_type as target unit
|
||
if (item.unit_size && item.unit_size_type) {
|
||
updateConversionDisplay(item.ingredient_unit || undefined, {
|
||
pack_quantity: item.pack_quantity,
|
||
unit_size: item.unit_size,
|
||
unit_size_type: item.unit_size_type,
|
||
unit_price: item.unit_price,
|
||
})
|
||
}
|
||
|
||
// Fetch saved definition
|
||
setDefinitionLoading(true)
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/line-items/${item.id}/definition`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (res.ok) {
|
||
const def = await res.json()
|
||
setCurrentDefinition(def)
|
||
setPortionDescription(def?.portion_description || '')
|
||
}
|
||
} catch { /* ignore */ }
|
||
setDefinitionLoading(false)
|
||
|
||
// Auto-suggest ingredient match from description
|
||
if (item.description && !item.ingredient_id) {
|
||
searchIngredients(item.description)
|
||
}
|
||
|
||
// LLM FEATURE — see LLM-MANIFEST.md for removal instructions
|
||
// Auto-deduce pack size if not already set (regex → unit field → AI, all server-side)
|
||
if (!item.pack_quantity && !item.unit_size) {
|
||
setAiPackSizeLoading(true)
|
||
try {
|
||
const packRes = await fetch(`/kitchen/api/invoices/${id}/line-items/${item.id}/ai-pack-size`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (packRes.ok) {
|
||
const packData = await packRes.json()
|
||
if (packData.pack_quantity && packData.unit_size) {
|
||
setAiPackSizeSource(packData.source)
|
||
setCostBreakdownEdits(prev => ({
|
||
...prev,
|
||
pack_quantity: packData.pack_quantity,
|
||
unit_size: packData.unit_size,
|
||
unit_size_type: packData.unit_size_type,
|
||
}))
|
||
updateConversionDisplay(item.ingredient_unit || undefined, {
|
||
pack_quantity: packData.pack_quantity,
|
||
unit_size: packData.unit_size,
|
||
unit_size_type: packData.unit_size_type,
|
||
unit_price: item.unit_price,
|
||
})
|
||
}
|
||
}
|
||
} catch { /* non-blocking */ }
|
||
setAiPackSizeLoading(false)
|
||
}
|
||
// END LLM FEATURE
|
||
}
|
||
|
||
const searchIngredients = async (query: string) => {
|
||
if (!query || query.length < 2) {
|
||
setIngredientSuggestions([])
|
||
return
|
||
}
|
||
setIngredientSearchLoading(true)
|
||
try {
|
||
const res = await fetch(`/kitchen/api/ingredients/suggest?description=${encodeURIComponent(query)}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
setIngredientSuggestions(data)
|
||
}
|
||
} catch { /* ignore */ }
|
||
setIngredientSearchLoading(false)
|
||
}
|
||
|
||
const selectIngredient = (ing: IngredientSuggestion) => {
|
||
setSelectedIngredientId(ing.id)
|
||
setSelectedIngredientName(ing.name)
|
||
setSelectedIngredientUnit(ing.standard_unit)
|
||
setIngredientSearch('')
|
||
setIngredientSuggestions([])
|
||
// Default the unit type to ingredient's standard unit if not already set
|
||
if (!costBreakdownEdits.unit_size_type) {
|
||
setCostBreakdownEdits(prev => ({ ...prev, unit_size_type: ing.standard_unit }))
|
||
}
|
||
updateConversionDisplay(ing.standard_unit)
|
||
}
|
||
|
||
const updateConversionDisplay = (stdUnit?: string, overrides?: Partial<LineItem>) => {
|
||
const edits = overrides ? { ...costBreakdownEdits, ...overrides } : costBreakdownEdits
|
||
const unit = stdUnit || selectedIngredientUnit || edits.unit_size_type
|
||
const pq = edits.pack_quantity || 1
|
||
const us = edits.unit_size
|
||
const ust = edits.unit_size_type
|
||
const up = edits.unit_price
|
||
if (!us || !ust || !unit) {
|
||
setIngredientConversionDisplay('')
|
||
return
|
||
}
|
||
// Unit conversion factors: source unit → ingredient standard unit
|
||
const conversions: Record<string, Record<string, number>> = {
|
||
g: { g: 1, kg: 0.001 }, kg: { g: 1000, kg: 1 }, oz: { g: 28.3495, kg: 0.0283495 },
|
||
ml: { ml: 1, ltr: 0.001 }, cl: { ml: 10, ltr: 0.01 }, ltr: { ml: 1000, ltr: 1 },
|
||
each: { each: 1 },
|
||
}
|
||
const conv = conversions[ust]?.[unit]
|
||
if (!conv) {
|
||
setIngredientConversionDisplay(ust !== unit ? `Cannot convert ${ust} → ${unit}` : `${us}${ust}`)
|
||
return
|
||
}
|
||
const totalStd = pq * us * conv
|
||
const pricePerStd = up ? (up / totalStd) : null
|
||
const packNote = pq > 1 ? `${pq} × ${us}${ust} = ` : ''
|
||
// Build display string
|
||
let display = `${packNote}${totalStd.toFixed(totalStd % 1 ? 2 : 0)} ${unit}`
|
||
if (pricePerStd) {
|
||
display += ` → £${pricePerStd.toFixed(4)} per ${unit}`
|
||
// For g/ml also show per kg/ltr
|
||
if (unit === 'g' && pricePerStd) {
|
||
display += ` (£${(pricePerStd * 1000).toFixed(2)}/kg)`
|
||
} else if (unit === 'ml' && pricePerStd) {
|
||
display += ` (£${(pricePerStd * 1000).toFixed(2)}/ltr)`
|
||
}
|
||
}
|
||
setIngredientConversionDisplay(display)
|
||
}
|
||
|
||
const handleIngredientCreated = (_result: IngredientModalResult) => {
|
||
// IngredientModal already created the source mapping, so close everything
|
||
refetchLineItems()
|
||
closeIngredientModal()
|
||
}
|
||
|
||
const closeIngredientModal = () => {
|
||
setIngredientModalItem(null)
|
||
setCostBreakdownEdits({})
|
||
setPortionDescription('')
|
||
setSaveAsDefault(false)
|
||
setCurrentDefinition(null)
|
||
setSelectedIngredientId(null)
|
||
setSelectedIngredientName('')
|
||
setSelectedIngredientUnit('')
|
||
setShowCreateIngredient(false)
|
||
setIngredientSearch('')
|
||
setIngredientSuggestions([])
|
||
setIngredientConversionDisplay('')
|
||
}
|
||
|
||
const saveCostBreakdown = async (itemId: number) => {
|
||
// Update the line item pack fields
|
||
await updateLineItemMutation.mutateAsync({ itemId, data: costBreakdownEdits })
|
||
|
||
// If an ingredient is selected, set ingredient_id and create/update ingredient_source
|
||
if (selectedIngredientId) {
|
||
try {
|
||
// Set ingredient_id on line item
|
||
await fetch(`/kitchen/api/invoices/${id}/line-items/${itemId}`, {
|
||
method: 'PATCH',
|
||
headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ ingredient_id: selectedIngredientId }),
|
||
})
|
||
|
||
// Create ingredient source mapping (links supplier product → ingredient)
|
||
if (invoice?.supplier_id) {
|
||
const sourceData: Record<string, unknown> = {
|
||
supplier_id: invoice.supplier_id,
|
||
pack_quantity: costBreakdownEdits.pack_quantity || 1,
|
||
unit_size: costBreakdownEdits.unit_size || null,
|
||
unit_size_type: costBreakdownEdits.unit_size_type || selectedIngredientUnit || null,
|
||
}
|
||
// Use product_code if available, otherwise description pattern
|
||
const li = ingredientModalItem
|
||
if (li?.product_code) {
|
||
sourceData.product_code = li.product_code
|
||
} else if (li?.description) {
|
||
sourceData.description_pattern = li.description.substring(0, 100).toLowerCase().trim()
|
||
}
|
||
// Include price and invoice ref for price tracking
|
||
if (costBreakdownEdits.unit_price) {
|
||
sourceData.latest_unit_price = costBreakdownEdits.unit_price
|
||
}
|
||
if (id) {
|
||
sourceData.invoice_id = parseInt(id as string)
|
||
}
|
||
const srcRes = await fetch(`/kitchen/api/ingredients/${selectedIngredientId}/sources`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(sourceData),
|
||
})
|
||
if (!srcRes.ok) {
|
||
const errBody = await srcRes.json().catch(() => ({}))
|
||
console.warn('Source creation failed:', srcRes.status, errBody)
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to set ingredient mapping:', err)
|
||
}
|
||
}
|
||
|
||
// Save as default definition if checked
|
||
if (saveAsDefault) {
|
||
try {
|
||
await saveDefinitionMutation.mutateAsync({ itemId, portionDesc: portionDescription })
|
||
} catch (err) {
|
||
console.error('Failed to save definition:', err)
|
||
}
|
||
}
|
||
|
||
closeIngredientModal()
|
||
refetchLineItems()
|
||
}
|
||
|
||
// Sort and filter line items - must be before early returns (Rules of Hooks)
|
||
const filteredAndSortedLineItems = useMemo(() => {
|
||
if (!lineItems) return []
|
||
|
||
// Use line_number (original OCR index) so bounding boxes stay correct after deletions
|
||
let filtered = lineItems.map((item) => ({ ...item, _originalIndex: item.line_number }))
|
||
|
||
// Filter by search text (product code or description)
|
||
if (lineItemSearchText) {
|
||
const searchLower = lineItemSearchText.toLowerCase()
|
||
filtered = filtered.filter(item => {
|
||
const code = (item.product_code || '').toLowerCase()
|
||
const desc = (item.description || '').toLowerCase()
|
||
return code.includes(searchLower) || desc.includes(searchLower)
|
||
})
|
||
}
|
||
|
||
// Filter by price change status
|
||
if (lineItemPriceFilter) {
|
||
filtered = filtered.filter(item => {
|
||
if (lineItemPriceFilter === 'consistent') return item.price_change_status === 'consistent'
|
||
if (lineItemPriceFilter === 'amber') return item.price_change_status === 'amber'
|
||
if (lineItemPriceFilter === 'red') return item.price_change_status === 'red'
|
||
if (lineItemPriceFilter === 'no_history') return item.price_change_status === 'no_history'
|
||
return true
|
||
})
|
||
}
|
||
|
||
// Filter by portions definition
|
||
if (lineItemPortionsFilter) {
|
||
filtered = filtered.filter(item => {
|
||
const hasPortions = item.portions_per_unit != null && item.portions_per_unit > 0
|
||
if (lineItemPortionsFilter === 'yes') return hasPortions
|
||
if (lineItemPortionsFilter === 'no') return !hasPortions
|
||
return true
|
||
})
|
||
}
|
||
|
||
// Filter by missing key data
|
||
if (lineItemMissingDataFilter === 'missing') {
|
||
filtered = filtered.filter(item => {
|
||
const missingQty = item.quantity == null || item.quantity === 0
|
||
const missingPrice = item.unit_price == null || item.unit_price === 0
|
||
const missingAmount = item.amount == null || item.amount === 0
|
||
return missingQty || missingPrice || missingAmount
|
||
})
|
||
}
|
||
|
||
// Sort
|
||
if (lineItemSortColumn) {
|
||
filtered.sort((a, b) => {
|
||
let aVal: any = null
|
||
let bVal: any = null
|
||
|
||
switch (lineItemSortColumn) {
|
||
case 'code':
|
||
aVal = a.product_code || ''
|
||
bVal = b.product_code || ''
|
||
break
|
||
case 'description':
|
||
aVal = a.description || ''
|
||
bVal = b.description || ''
|
||
break
|
||
case 'unit':
|
||
aVal = a.unit || ''
|
||
bVal = b.unit || ''
|
||
break
|
||
case 'quantity':
|
||
aVal = a.quantity || 0
|
||
bVal = b.quantity || 0
|
||
break
|
||
case 'unit_price':
|
||
aVal = a.unit_price || 0
|
||
bVal = b.unit_price || 0
|
||
break
|
||
case 'price_change':
|
||
aVal = a.price_change_percent || 0
|
||
bVal = b.price_change_percent || 0
|
||
break
|
||
case 'amount':
|
||
aVal = a.amount || 0
|
||
bVal = b.amount || 0
|
||
break
|
||
}
|
||
|
||
if (typeof aVal === 'string') {
|
||
return lineItemSortDirection === 'asc'
|
||
? aVal.localeCompare(bVal)
|
||
: bVal.localeCompare(aVal)
|
||
} else {
|
||
return lineItemSortDirection === 'asc' ? aVal - bVal : bVal - aVal
|
||
}
|
||
})
|
||
}
|
||
|
||
return filtered
|
||
}, [lineItems, lineItemSortColumn, lineItemSortDirection, lineItemPriceFilter, lineItemSearchText, lineItemPortionsFilter, lineItemMissingDataFilter])
|
||
|
||
// Track visible page in line items table for sticky indicator
|
||
useEffect(() => {
|
||
const container = lineItemsTableRef.current
|
||
if (!container) return
|
||
|
||
const handleScroll = () => {
|
||
// Find all rows with data-page attribute
|
||
const rows = container.querySelectorAll('tr[data-page]')
|
||
if (rows.length === 0) return
|
||
|
||
const containerTop = container.getBoundingClientRect().top + 50 // Account for sticky header
|
||
|
||
// Find the first visible row (closest to top of container)
|
||
for (const row of rows) {
|
||
const rect = row.getBoundingClientRect()
|
||
if (rect.top >= containerTop - 10) {
|
||
const pageNum = parseInt(row.getAttribute('data-page') || '1', 10)
|
||
setCurrentVisiblePage(pageNum)
|
||
return
|
||
}
|
||
}
|
||
|
||
// If no row found above container top, use the last row's page
|
||
const lastRow = rows[rows.length - 1]
|
||
const pageNum = parseInt(lastRow.getAttribute('data-page') || '1', 10)
|
||
setCurrentVisiblePage(pageNum)
|
||
}
|
||
|
||
container.addEventListener('scroll', handleScroll)
|
||
// Initial check
|
||
handleScroll()
|
||
|
||
return () => container.removeEventListener('scroll', handleScroll)
|
||
}, [filteredAndSortedLineItems])
|
||
|
||
// Calculate line item statistics for checks section
|
||
const lineItemStats = useMemo(() => {
|
||
if (!lineItems) return {
|
||
total: 0,
|
||
withPortions: 0,
|
||
withoutPortions: 0,
|
||
missingData: 0,
|
||
nonStock: 0,
|
||
priceCalcErrors: 0,
|
||
totalsMatch: true,
|
||
totalDifference: 0,
|
||
lineItemsTotal: 0,
|
||
stockItemsTotal: 0,
|
||
nonStockItemsTotal: 0,
|
||
stockItemsGross: 0
|
||
}
|
||
|
||
const withPortions = lineItems.filter(item =>
|
||
item.portions_per_unit != null && item.portions_per_unit > 0
|
||
).length
|
||
|
||
const missingData = lineItems.filter(item => {
|
||
const missingQty = item.quantity == null || item.quantity === 0
|
||
const missingPrice = item.unit_price == null || item.unit_price === 0
|
||
const missingAmount = item.amount == null || item.amount === 0
|
||
return missingQty || missingPrice || missingAmount
|
||
}).length
|
||
|
||
const nonStock = lineItems.filter(item => item.is_non_stock).length
|
||
|
||
// Count items with price calculation errors
|
||
// Valid cases: qty only (free item), or all three values with correct calculation
|
||
const priceCalcErrors = lineItems.filter(item => {
|
||
const hasQty = item.quantity != null && item.quantity !== 0
|
||
const hasPrice = item.unit_price != null && item.unit_price !== 0
|
||
const hasTotal = item.amount != null && item.amount !== 0
|
||
|
||
// qty * price should equal amount (works for both positive and negative/credit lines)
|
||
const expectedTotal = (item.quantity || 0) * (item.unit_price || 0)
|
||
const actualTotal = item.amount || 0
|
||
const calculationMismatch = Math.abs(expectedTotal - actualTotal) > 0.02
|
||
|
||
return (
|
||
(hasPrice && (!hasQty || !hasTotal)) || // price requires both qty and total
|
||
(hasTotal && (!hasQty || !hasPrice)) || // total requires both qty and price
|
||
(hasQty && hasPrice && hasTotal && calculationMismatch) // calculation mismatch
|
||
)
|
||
}).length
|
||
|
||
// Calculate totals (line items are NET values)
|
||
const lineItemsTotal = lineItems.reduce((sum, item) => sum + (item.amount || 0), 0)
|
||
const stockItemsTotal = lineItems
|
||
.filter(item => !item.is_non_stock)
|
||
.reduce((sum, item) => sum + (item.amount || 0), 0)
|
||
const nonStockItemsTotal = lineItems
|
||
.filter(item => item.is_non_stock)
|
||
.reduce((sum, item) => sum + (item.amount || 0), 0)
|
||
|
||
// Calculate VAT ratio from invoice totals
|
||
const invoiceGross = parseFloat(total) || 0
|
||
const invoiceNet = parseFloat(netTotal) || invoiceGross
|
||
const vatRatio = invoiceNet > 0 ? invoiceGross / invoiceNet : 1
|
||
|
||
// Line item amounts are NET values
|
||
// Calculate GROSS for stock items by multiplying by VAT ratio
|
||
const stockItemsNet = stockItemsTotal
|
||
const stockItemsGross = stockItemsTotal * vatRatio
|
||
|
||
// Check if line items total matches invoice total
|
||
// Line items are NET, so compare against invoice NET (or gross if no net available)
|
||
const compareTotal = invoiceNet
|
||
const difference = Math.abs(compareTotal - lineItemsTotal)
|
||
const totalsMatch = difference <= TOLERANCE
|
||
|
||
return {
|
||
total: lineItems.length,
|
||
withPortions,
|
||
withoutPortions: lineItems.length - withPortions,
|
||
missingData,
|
||
nonStock,
|
||
priceCalcErrors,
|
||
totalsMatch,
|
||
totalDifference: difference,
|
||
lineItemsTotal,
|
||
stockItemsTotal,
|
||
stockItemsNet,
|
||
nonStockItemsTotal,
|
||
stockItemsGross
|
||
}
|
||
}, [lineItems, total, netTotal])
|
||
|
||
// Check if line items have validation errors (for disabling Confirm/Dext buttons)
|
||
const hasLineItemErrors = useMemo(() => {
|
||
// No line items = error
|
||
if (!lineItems || lineItems.length === 0) return true
|
||
|
||
// Totals don't match = error
|
||
if (!lineItemStats.totalsMatch) return true
|
||
|
||
// Price calculation errors = error
|
||
if (lineItemStats.priceCalcErrors > 0) return true
|
||
|
||
return false
|
||
}, [lineItems, lineItemStats.totalsMatch, lineItemStats.priceCalcErrors])
|
||
|
||
// Calculate filter option counts for disabling
|
||
const filterOptionCounts = useMemo(() => {
|
||
if (!lineItems) return {
|
||
consistent: 0,
|
||
amber: 0,
|
||
red: 0,
|
||
no_history: 0,
|
||
withPortions: 0,
|
||
withoutPortions: 0,
|
||
missingData: 0
|
||
}
|
||
|
||
return {
|
||
consistent: lineItems.filter(item => item.price_change_status === 'consistent').length,
|
||
amber: lineItems.filter(item => item.price_change_status === 'amber').length,
|
||
red: lineItems.filter(item => item.price_change_status === 'red').length,
|
||
no_history: lineItems.filter(item => item.price_change_status === 'no_history').length,
|
||
withPortions: lineItems.filter(item => item.portions_per_unit != null && item.portions_per_unit > 0).length,
|
||
withoutPortions: lineItems.filter(item => !(item.portions_per_unit != null && item.portions_per_unit > 0)).length,
|
||
missingData: lineItems.filter(item => {
|
||
const missingQty = item.quantity == null || item.quantity === 0
|
||
const missingPrice = item.unit_price == null || item.unit_price === 0
|
||
const missingAmount = item.amount == null || item.amount === 0
|
||
return missingQty || missingPrice || missingAmount
|
||
}).length
|
||
}
|
||
}, [lineItems])
|
||
|
||
const handleLineItemSort = (column: string) => {
|
||
if (lineItemSortColumn === column) {
|
||
setLineItemSortDirection(lineItemSortDirection === 'asc' ? 'desc' : 'asc')
|
||
} else {
|
||
setLineItemSortColumn(column)
|
||
setLineItemSortDirection('asc')
|
||
}
|
||
}
|
||
|
||
if (isLoading) {
|
||
return <div style={styles.loading}>Loading invoice...</div>
|
||
}
|
||
|
||
if (!invoice) {
|
||
return <div style={styles.error}>Invoice not found</div>
|
||
}
|
||
|
||
const confidence = invoice.ocr_confidence
|
||
? (Number(invoice.ocr_confidence) * 100).toFixed(0)
|
||
: null
|
||
|
||
// Check if the file is a PDF
|
||
const isPDF = invoice?.image_path?.toLowerCase().endsWith('.pdf')
|
||
|
||
return (
|
||
<div style={styles.pageContainer}>
|
||
{/* Error banner for Azure OCR failures */}
|
||
{invoice?.ocr_raw_text && invoice.ocr_raw_text.startsWith('Error:') && (
|
||
<div style={styles.errorBanner}>
|
||
<div style={styles.errorBannerIcon}>⚠️</div>
|
||
<div style={styles.errorBannerContent}>
|
||
<strong>OCR Processing Error</strong>
|
||
<p>{invoice.ocr_raw_text.replace('Error: ', '')}</p>
|
||
{invoice.ocr_raw_text.includes('quota exceeded') && (
|
||
<p style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
|
||
<strong>Next steps:</strong> Check your Azure subscription budget limits in the Azure portal.
|
||
Once resolved, use the "Reprocess" button below to retry OCR extraction.
|
||
</p>
|
||
)}
|
||
{invoice.ocr_raw_text.includes('authentication failed') && (
|
||
<p style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
|
||
<strong>Next steps:</strong> Verify your Azure API credentials in Settings → Azure Configuration.
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Processing banner for PENDING invoices */}
|
||
{invoice.status === 'PENDING' && (
|
||
<div style={{
|
||
display: 'flex',
|
||
gap: '1rem',
|
||
padding: '1rem 1.5rem',
|
||
marginBottom: '1.5rem',
|
||
background: '#d4edda',
|
||
border: '2px solid #28a745',
|
||
borderRadius: '8px',
|
||
color: '#155724',
|
||
alignItems: 'center',
|
||
}}>
|
||
<div style={{ fontSize: '1.5rem', flexShrink: 0 }}>⚙</div>
|
||
<div>
|
||
<strong>Processing Invoice</strong>
|
||
<p style={{ margin: '0.25rem 0 0' }}>Azure OCR extraction is in progress. The page will reload automatically when complete.</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Top row: Image and Form side by side */}
|
||
<div style={styles.topRow}>
|
||
<div style={styles.imageSection} ref={containerRef}>
|
||
<h3>Invoice {isPDF ? 'Document' : 'Image'}</h3>
|
||
{imageUrl ? (
|
||
isPDF ? (
|
||
<div style={styles.pdfScrollContainer} ref={pdfContainerRef}>
|
||
{pdfPages.length > 0 ? (
|
||
pdfPages.map((page, pageIndex) => {
|
||
const pageNum = pageIndex + 1
|
||
const fieldBbox = highlightedField ? getFieldBoundingBox(highlightedField) : null
|
||
const lineItemBbox = expandedLineItem !== null && lineItems
|
||
? (() => {
|
||
const item = lineItems.find(item => item.id === expandedLineItem)
|
||
return item ? getLineItemBoundingBox(item.line_number) : null
|
||
})()
|
||
: null
|
||
|
||
return (
|
||
<div key={pageIndex} style={styles.pdfPageWrapper}>
|
||
{/* Wrapper for image + highlights with actual size scaling for scrollable zoom */}
|
||
<div
|
||
data-page-container
|
||
style={{
|
||
...styles.pdfPageContainer,
|
||
position: 'relative',
|
||
width: page.displayWidth * (zoomPageNum === pageNum ? zoomLevel : 1),
|
||
height: page.displayHeight * (zoomPageNum === pageNum ? zoomLevel : 1),
|
||
margin: '0 auto',
|
||
}}>
|
||
<img
|
||
src={page.canvas.toDataURL()}
|
||
alt={`Page ${pageNum}`}
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
display: 'block',
|
||
}}
|
||
/>
|
||
{/* Highlight for header fields on this page */}
|
||
{fieldBbox && fieldBbox.pageNumber === pageNum && (() => {
|
||
// Add padding (0.5% ≈ 5px at typical sizes) and scale border inversely to zoom
|
||
const padding = 0.5
|
||
const borderWidth = Math.max(1, 2 / zoomLevel)
|
||
return (
|
||
<div
|
||
ref={highlightRef}
|
||
style={{
|
||
...styles.highlightOverlay,
|
||
left: `${fieldBbox.x - padding}%`,
|
||
top: `${fieldBbox.y - padding}%`,
|
||
width: `${fieldBbox.width + padding * 2}%`,
|
||
height: `${fieldBbox.height + padding * 2}%`,
|
||
border: `${borderWidth}px solid #ffc107`,
|
||
}}
|
||
onClick={() => { setHighlightedField(null); resetZoom(); }}
|
||
/>
|
||
)
|
||
})()}
|
||
{/* Highlight for line items on this page */}
|
||
{lineItemBbox && lineItemBbox.pageNumber === pageNum && (() => {
|
||
const padding = 0.5
|
||
const borderWidth = Math.max(1, 2 / zoomLevel)
|
||
return (
|
||
<div
|
||
style={{
|
||
...styles.highlightOverlay,
|
||
left: `${lineItemBbox.x - padding}%`,
|
||
top: `${lineItemBbox.y - padding}%`,
|
||
width: `${lineItemBbox.width + padding * 2}%`,
|
||
height: `${lineItemBbox.height + padding * 2}%`,
|
||
border: `${borderWidth}px solid #ffc107`,
|
||
}}
|
||
onClick={() => { setExpandedLineItem(null); resetZoom(); }}
|
||
/>
|
||
)
|
||
})()}
|
||
</div>
|
||
{pdfPages.length > 1 && (
|
||
<div style={styles.pageLabel}>Page {pageNum} of {pdfPages.length}</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})
|
||
) : (
|
||
<div style={styles.imagePlaceholder}>Rendering PDF...</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div style={styles.imageZoomControls}>
|
||
<button onClick={() => setImageZoom(Math.min(imageZoom + 0.5, 5))} style={styles.zoomBtn} title="Zoom In">
|
||
+
|
||
</button>
|
||
<span style={styles.zoomLabel}>{Math.round(imageZoom * 100)}%</span>
|
||
<button onClick={() => setImageZoom(Math.max(imageZoom - 0.5, 1))} style={styles.zoomBtn} title="Zoom Out">
|
||
−
|
||
</button>
|
||
{imageZoom > 1 && (
|
||
<button onClick={() => setImageZoom(1)} style={styles.zoomResetBtnSmall} title="Reset Zoom">
|
||
Reset
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div
|
||
style={{
|
||
...styles.imageScrollContainer,
|
||
cursor: imageZoom > 1 ? 'grab' : 'default'
|
||
}}
|
||
ref={imageContainerRef}
|
||
onWheel={(e) => {
|
||
if (e.ctrlKey || e.metaKey) {
|
||
e.preventDefault()
|
||
const delta = e.deltaY > 0 ? -0.1 : 0.1
|
||
setImageZoom(Math.max(1, Math.min(5, imageZoom + delta)))
|
||
}
|
||
}}
|
||
>
|
||
<div style={{
|
||
...styles.imageContainer,
|
||
width: `${imageZoom * 100}%`,
|
||
height: 'auto'
|
||
}}>
|
||
<img
|
||
src={imageUrl}
|
||
alt="Invoice"
|
||
style={{
|
||
...styles.image,
|
||
width: '100%',
|
||
height: 'auto'
|
||
}}
|
||
/>
|
||
{highlightedField && getFieldBoundingBox(highlightedField) && (() => {
|
||
const bbox = getFieldBoundingBox(highlightedField)!
|
||
const padding = 0.5
|
||
return (
|
||
<div
|
||
style={{
|
||
...styles.highlightOverlay,
|
||
left: `${bbox.x - padding}%`,
|
||
top: `${bbox.y - padding}%`,
|
||
width: `${bbox.width + padding * 2}%`,
|
||
height: `${bbox.height + padding * 2}%`,
|
||
border: '2px solid #ffc107',
|
||
}}
|
||
onClick={() => setHighlightedField(null)}
|
||
/>
|
||
)
|
||
})()}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
) : (
|
||
<div style={styles.imagePlaceholder}>Loading {isPDF ? 'document' : 'image'}...</div>
|
||
)}
|
||
{isPDF && zoomLevel > 1 && (
|
||
<button
|
||
onClick={resetZoom}
|
||
style={styles.zoomResetBtn}
|
||
>
|
||
Reset Zoom ({zoomLevel}x)
|
||
</button>
|
||
)}
|
||
{isPDF && imageUrl && (
|
||
<a
|
||
href={`/kitchen/api/invoices/${id}/file?token=${encodeURIComponent(token || '')}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={styles.openPdfLink}
|
||
>
|
||
Open PDF in new tab
|
||
</a>
|
||
)}
|
||
{confidence && (
|
||
<div style={styles.confidenceBadge}>
|
||
OCR Confidence: {confidence}%
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={styles.formSection}>
|
||
{/* Duplicate Warning Banner */}
|
||
{invoice.duplicate_status && (
|
||
<div
|
||
style={{
|
||
...styles.duplicateWarning,
|
||
background: invoice.duplicate_status === 'firm_duplicate' ? '#f8d7da' : '#fff3cd',
|
||
borderColor: invoice.duplicate_status === 'firm_duplicate' ? '#f5c6cb' : '#ffeeba',
|
||
color: invoice.duplicate_status === 'firm_duplicate' ? '#721c24' : '#856404',
|
||
}}
|
||
onClick={() => setShowDuplicateModal(true)}
|
||
>
|
||
{invoice.duplicate_status === 'firm_duplicate'
|
||
? '⚠️ DUPLICATE: This invoice matches an existing record. Click to compare.'
|
||
: '⚠️ Possible duplicate detected. Click to compare.'}
|
||
</div>
|
||
)}
|
||
|
||
{/* PO Linked Indicator */}
|
||
{poMatchData?.linked_po && (
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
padding: '0.75rem 1rem',
|
||
marginBottom: '1rem',
|
||
background: '#d4edda',
|
||
border: '1px solid #c3e6cb',
|
||
borderRadius: '8px',
|
||
color: '#155724',
|
||
fontSize: '0.9rem',
|
||
}}>
|
||
<div>
|
||
<strong>Linked to PO-{poMatchData.linked_po.po_id}</strong>
|
||
{' '}({poMatchData.linked_po.total_amount != null ? `£${poMatchData.linked_po.total_amount.toFixed(2)}` : 'N/A'}, {poMatchData.linked_po.order_date ? new Date(poMatchData.linked_po.order_date + 'T00:00:00').toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }) : ''})
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||
<button
|
||
onClick={() => setViewingPoId(poMatchData.linked_po!.po_id)}
|
||
style={{ padding: '0.3rem 0.6rem', border: '1px solid #155724', borderRadius: '4px', background: 'white', color: '#155724', cursor: 'pointer', fontSize: '0.8rem', fontWeight: 600 }}
|
||
>
|
||
View PO
|
||
</button>
|
||
<button
|
||
onClick={() => handleUnlinkPo(poMatchData.linked_po!.po_id)}
|
||
style={{ padding: '0.3rem 0.6rem', border: '1px solid #856404', borderRadius: '4px', background: '#fff3cd', color: '#856404', cursor: 'pointer', fontSize: '0.8rem', fontWeight: 600 }}
|
||
>
|
||
Unlink
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* PO Matching Suggestions */}
|
||
{!poMatchData?.linked_po && poMatchData?.matches && poMatchData.matches.length > 0 && (
|
||
<div style={{
|
||
padding: '0.75rem 1rem',
|
||
marginBottom: '1rem',
|
||
background: '#e3f2fd',
|
||
border: '1px solid #bbdefb',
|
||
borderRadius: '8px',
|
||
fontSize: '0.9rem',
|
||
color: '#1565c0',
|
||
}}>
|
||
<div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>
|
||
This supplier has {poMatchData.matches.length} pending Purchase Order{poMatchData.matches.length > 1 ? 's' : ''}
|
||
</div>
|
||
{poMatchData.matches.map((m, idx) => {
|
||
const isSuggested = idx === 0 && m.confidence >= 0.8
|
||
const isPotential = !isSuggested && m.confidence >= 0.8
|
||
return (
|
||
<div key={m.po_id} style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
padding: '0.4rem 0.5rem',
|
||
marginBottom: '0.25rem',
|
||
background: 'rgba(255,255,255,0.6)',
|
||
borderRadius: '4px',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||
<span style={{ fontWeight: 500 }}>PO-{m.po_id}:</span>
|
||
<span>{m.total_amount != null ? `£${m.total_amount.toFixed(2)}` : 'N/A'}</span>
|
||
<span style={{ color: '#666' }}>
|
||
({m.order_date ? new Date(m.order_date + 'T00:00:00').toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }) : 'No date'})
|
||
</span>
|
||
{isSuggested && (
|
||
<span style={{
|
||
background: '#4caf50',
|
||
color: 'white',
|
||
padding: '0.1rem 0.4rem',
|
||
borderRadius: '3px',
|
||
fontSize: '0.75rem',
|
||
fontWeight: 600,
|
||
}}>
|
||
Suggested match
|
||
</span>
|
||
)}
|
||
{isPotential && (
|
||
<span style={{
|
||
background: '#ff9800',
|
||
color: 'white',
|
||
padding: '0.1rem 0.4rem',
|
||
borderRadius: '3px',
|
||
fontSize: '0.75rem',
|
||
fontWeight: 600,
|
||
}}>
|
||
Potential match
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '0.4rem' }}>
|
||
<button
|
||
onClick={() => setViewingPoId(m.po_id)}
|
||
style={{ padding: '0.2rem 0.5rem', border: '1px solid #1565c0', borderRadius: '4px', background: 'white', color: '#1565c0', cursor: 'pointer', fontSize: '0.8rem' }}
|
||
>
|
||
View
|
||
</button>
|
||
<button
|
||
onClick={() => handleLinkPo(m.po_id)}
|
||
style={{ padding: '0.2rem 0.5rem', border: 'none', borderRadius: '4px', background: '#1565c0', color: 'white', cursor: 'pointer', fontSize: '0.8rem', fontWeight: 600 }}
|
||
>
|
||
Link
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Header: Title | Source Badge | Status Badge */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||
<h3 style={{ margin: 0 }}>Invoice Details</h3>
|
||
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
|
||
{invoice.source && invoice.source !== 'upload' && (
|
||
<SourceBadge source={invoice.source} sourceReference={invoice.source_reference} />
|
||
)}
|
||
<span style={{
|
||
padding: '0.4rem 0.8rem',
|
||
borderRadius: '4px',
|
||
fontSize: '0.85rem',
|
||
fontWeight: '600',
|
||
background: invoice.status === 'CONFIRMED' ? '#22c55e' : invoice.status === 'REVIEWED' ? '#8b5cf6' : invoice.status === 'PROCESSED' ? '#3b82f6' : '#f59e0b',
|
||
color: 'white'
|
||
}}>
|
||
{invoice.status.toUpperCase()}
|
||
{invoice.document_type === 'delivery_note' && ' (DN)'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={styles.form}>
|
||
{/* Supplier (full width) */}
|
||
<div style={styles.label}>
|
||
<span>Supplier</span>
|
||
<div style={styles.supplierRow}>
|
||
<select
|
||
value={supplierId}
|
||
onChange={(e) => setSupplierId(e.target.value)}
|
||
style={{
|
||
...styles.input,
|
||
flex: 1,
|
||
...(invoice?.supplier_match_type === 'fuzzy' && supplierId ? {
|
||
border: '2px solid #f0ad4e',
|
||
background: '#fff8e6'
|
||
} : {})
|
||
}}
|
||
>
|
||
<option value="">-- Select Supplier --</option>
|
||
{suppliers?.map((s) => (
|
||
<option key={s.id} value={s.id}>{s.name}</option>
|
||
))}
|
||
</select>
|
||
{getFieldBoundingBox('VendorName') && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleHighlightField('VendorName')}
|
||
style={{
|
||
...styles.eyeBtn,
|
||
...(highlightedField === 'VendorName' ? styles.eyeBtnActive : {})
|
||
}}
|
||
title="Show on document"
|
||
>
|
||
👁
|
||
</button>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={openCreateSupplierModal}
|
||
style={styles.createSupplierBtn}
|
||
title="Create new supplier"
|
||
>
|
||
+ New
|
||
</button>
|
||
</div>
|
||
{invoice?.supplier_match_type === 'fuzzy' && supplierId && invoice.vendor_name && (
|
||
<div style={styles.fuzzyMatchWarning}>
|
||
<span>Fuzzy match from "{invoice.vendor_name}" - please verify</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => addAliasMutation.mutate({
|
||
supplierId: parseInt(supplierId),
|
||
alias: invoice.vendor_name!,
|
||
invoiceId: invoice.id
|
||
})}
|
||
style={styles.addAliasBtn}
|
||
disabled={addAliasMutation.isPending}
|
||
title="Add this name as an alias so future invoices match exactly"
|
||
>
|
||
{addAliasMutation.isPending ? 'Adding...' : '+ Add as alias'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
{invoice?.vendor_name && !supplierId && (
|
||
<div style={styles.extractedHintRow}>
|
||
<span style={styles.extractedHint}>Extracted: {invoice.vendor_name}</span>
|
||
<button
|
||
type="button"
|
||
onClick={openCreateSupplierModal}
|
||
style={styles.createFromExtractedBtn}
|
||
>
|
||
Create "{invoice.vendor_name}"
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Date | Type */}
|
||
<div style={styles.row}>
|
||
<label style={{ ...styles.label, flex: 1 }}>
|
||
Invoice Date
|
||
{(() => {
|
||
const dateWarning = getDateWarning(invoiceDate || null, invoice?.status || '');
|
||
return (
|
||
<>
|
||
<div style={styles.inputWithEye}>
|
||
<input
|
||
type="date"
|
||
value={invoiceDate}
|
||
onChange={(e) => setInvoiceDate(e.target.value)}
|
||
style={{ ...styles.input, ...dateWarningStyles[dateWarning] }}
|
||
/>
|
||
{getFieldBoundingBox('InvoiceDate') && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleHighlightField('InvoiceDate')}
|
||
style={{
|
||
...styles.eyeBtn,
|
||
...(highlightedField === 'InvoiceDate' ? styles.eyeBtnActive : {})
|
||
}}
|
||
title="Show on document"
|
||
>
|
||
👁
|
||
</button>
|
||
)}
|
||
{invoice?.status !== 'CONFIRMED' && (
|
||
<button
|
||
type="button"
|
||
onClick={handleFetchParsedDates}
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
padding: '2px 4px',
|
||
fontSize: '1rem',
|
||
color: (!invoiceDate || dateWarning !== 'none') ? '#007bff' : '#ccc',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
}}
|
||
title="Find dates in document"
|
||
>
|
||
🔍
|
||
</button>
|
||
)}
|
||
</div>
|
||
{dateWarning !== 'none' && (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||
{dateWarning === 'future' ? (
|
||
<button
|
||
type="button"
|
||
onClick={handleFetchParsedDates}
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
padding: 0,
|
||
cursor: 'pointer',
|
||
fontSize: '0.8rem',
|
||
color: '#e85d04',
|
||
fontWeight: 600,
|
||
textDecoration: 'underline',
|
||
textDecorationStyle: 'dotted',
|
||
}}
|
||
title="Click to fix date"
|
||
>
|
||
⚠ Date is in the future — likely a day/month swap — click to fix
|
||
</button>
|
||
) : (
|
||
<span style={{ fontSize: '0.8rem', color: dateWarning === 'red' ? '#dc3545' : '#856404' }}>
|
||
{!invoiceDate ? 'No date set' : 'Date differs from today by more than 7 days'}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
})()}
|
||
</label>
|
||
|
||
<label style={{ ...styles.label, flex: 1 }}>
|
||
Document Type
|
||
<select
|
||
value={documentType}
|
||
onChange={(e) => setDocumentType(e.target.value)}
|
||
style={styles.input}
|
||
>
|
||
<option value="invoice">Invoice</option>
|
||
<option value="credit_note">Credit Note</option>
|
||
<option value="delivery_note">Delivery Note</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Number | PO */}
|
||
<div style={styles.row}>
|
||
<label style={{ ...styles.label, flex: 1 }}>
|
||
Invoice Number
|
||
<div style={styles.inputWithEye}>
|
||
<input
|
||
type="text"
|
||
value={invoiceNumber}
|
||
onChange={(e) => setInvoiceNumber(e.target.value)}
|
||
style={styles.input}
|
||
placeholder="e.g., INV-12345"
|
||
/>
|
||
{getFieldBoundingBox('InvoiceId') && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleHighlightField('InvoiceId')}
|
||
style={{
|
||
...styles.eyeBtn,
|
||
...(highlightedField === 'InvoiceId' ? styles.eyeBtnActive : {})
|
||
}}
|
||
title="Show on document"
|
||
>
|
||
👁
|
||
</button>
|
||
)}
|
||
{invoice?.status !== 'CONFIRMED' && (
|
||
<button
|
||
type="button"
|
||
onClick={handleFetchInvoiceNumberCandidates}
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
padding: '2px 4px',
|
||
fontSize: '1rem',
|
||
color: invoiceNumber ? '#ccc' : '#007bff',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
}}
|
||
title="Search OCR for invoice number"
|
||
>
|
||
🔍
|
||
</button>
|
||
)}
|
||
</div>
|
||
</label>
|
||
|
||
<label style={{ ...styles.label, flex: 1 }}>
|
||
Order/PO Number
|
||
<div style={styles.inputWithEye}>
|
||
<input
|
||
type="text"
|
||
value={orderNumber}
|
||
onChange={(e) => setOrderNumber(e.target.value)}
|
||
style={styles.input}
|
||
placeholder="e.g., PO-12345"
|
||
/>
|
||
{getFieldBoundingBox('PurchaseOrder') && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleHighlightField('PurchaseOrder')}
|
||
style={{
|
||
...styles.eyeBtn,
|
||
...(highlightedField === 'PurchaseOrder' ? styles.eyeBtnActive : {})
|
||
}}
|
||
title="Show on document"
|
||
>
|
||
👁
|
||
</button>
|
||
)}
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Net | Gross */}
|
||
<div style={styles.row}>
|
||
<label style={{ ...styles.label, flex: 1 }}>
|
||
Net Total (£)
|
||
<div style={styles.inputWithEye}>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={netTotal}
|
||
onChange={(e) => setNetTotal(e.target.value)}
|
||
style={styles.input}
|
||
placeholder="Exc. VAT"
|
||
/>
|
||
{getFieldBoundingBox('SubTotal') && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleHighlightField('SubTotal')}
|
||
style={{
|
||
...styles.eyeBtn,
|
||
...(highlightedField === 'SubTotal' ? styles.eyeBtnActive : {})
|
||
}}
|
||
title="Show on document"
|
||
>
|
||
👁
|
||
</button>
|
||
)}
|
||
</div>
|
||
</label>
|
||
|
||
<label style={{ ...styles.label, flex: 1 }}>
|
||
Gross Total (£)
|
||
<div style={styles.inputWithEye}>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={total}
|
||
onChange={(e) => setTotal(e.target.value)}
|
||
style={styles.input}
|
||
placeholder="Inc. VAT"
|
||
/>
|
||
{getFieldBoundingBox('InvoiceTotal') && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleHighlightField('InvoiceTotal')}
|
||
style={{
|
||
...styles.eyeBtn,
|
||
...(highlightedField === 'InvoiceTotal' ? styles.eyeBtnActive : {})
|
||
}}
|
||
title="Show on document"
|
||
>
|
||
👁
|
||
</button>
|
||
)}
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Notes */}
|
||
<label style={styles.label}>
|
||
<span>
|
||
Invoice Notes{' '}
|
||
<small style={{ color: '#666', fontSize: '0.85em' }}>
|
||
(Optional, included in Dext etc.)
|
||
</small>
|
||
</span>
|
||
<textarea
|
||
value={invoiceNotes}
|
||
onChange={(e) => setInvoiceNotes(e.target.value)}
|
||
onBlur={async () => {
|
||
try {
|
||
await fetch(`/kitchen/api/invoices/${id}`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify({ notes: invoiceNotes })
|
||
})
|
||
} catch (error) {
|
||
console.error('Failed to save notes:', error)
|
||
}
|
||
}}
|
||
placeholder="Add notes about this invoice..."
|
||
rows={3}
|
||
style={{
|
||
...styles.input,
|
||
resize: 'vertical',
|
||
fontFamily: 'inherit'
|
||
}}
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Confirm & Dext (full width, auto-saves on change) */}
|
||
<div style={{ marginTop: '20px', display: 'flex', gap: '10px' }}>
|
||
{/* Link/Resolved Dispute button - only for credit notes with a supplier */}
|
||
{invoice?.document_type === 'credit_note' && invoice?.supplier_id && (
|
||
invoice?.linked_dispute_id ? (
|
||
<button
|
||
onClick={() => setViewingDisputeId(invoice.linked_dispute_id)}
|
||
style={{
|
||
padding: '0.75rem 1rem',
|
||
background: '#6c757d',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '8px',
|
||
cursor: 'pointer',
|
||
fontWeight: 'bold',
|
||
fontSize: '0.9rem',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
title="View the dispute resolved by this credit note"
|
||
>
|
||
✓ Resolved Dispute
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={() => setShowLinkDisputeModal(true)}
|
||
style={{
|
||
padding: '0.75rem 1rem',
|
||
background: '#28a745',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '8px',
|
||
cursor: 'pointer',
|
||
fontWeight: 'bold',
|
||
fontSize: '0.9rem',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
title="Link this credit note to an open dispute"
|
||
>
|
||
Link Dispute
|
||
</button>
|
||
)
|
||
)}
|
||
<button
|
||
onClick={handleConfirm}
|
||
style={{
|
||
...styles.confirmBtn,
|
||
flex: 1,
|
||
opacity: (hasLineItemErrors || updateMutation.isPending) ? 0.5 : 1,
|
||
cursor: (hasLineItemErrors || updateMutation.isPending) ? 'not-allowed' : 'pointer'
|
||
}}
|
||
disabled={hasLineItemErrors || updateMutation.isPending}
|
||
title={hasLineItemErrors ? 'Fix line item validation errors before confirming' : ''}
|
||
>
|
||
{invoice?.dext_sent_at || invoice?.supplier_skip_dext ? 'CONFIRM' : 'CONFIRM & DEXT'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Checks Section */}
|
||
{lineItems && lineItems.length > 0 && (
|
||
<div style={{ margin: '20px 0', display: 'flex', gap: '8px' }}>
|
||
{/* Items Total Check - RED if doesn't match (blocks confirm) */}
|
||
<div style={{
|
||
flex: 1,
|
||
padding: '8px',
|
||
borderRadius: '4px',
|
||
border: `2px solid ${lineItemStats.totalsMatch ? '#c3e6cb' : '#dc2626'}`,
|
||
background: lineItemStats.totalsMatch ? '#d4edda' : '#fef2f2',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
textAlign: 'center',
|
||
fontSize: '0.8rem'
|
||
}}>
|
||
<div style={{ fontSize: '1.3rem', marginBottom: '2px' }}>
|
||
{lineItemStats.totalsMatch ? '✓' : '⛔'}
|
||
</div>
|
||
<div style={{ fontWeight: '600', color: lineItemStats.totalsMatch ? '#155724' : '#dc2626', marginBottom: '2px' }}>
|
||
Items Total
|
||
</div>
|
||
<div style={{ fontSize: '0.7rem', color: lineItemStats.totalsMatch ? '#155724' : '#dc2626' }}>
|
||
{lineItemStats.totalsMatch ? 'Matches' : "Doesn't match"}
|
||
</div>
|
||
</div>
|
||
|
||
{/* QTY/Price Check - RED if errors (blocks confirm) */}
|
||
<div style={{
|
||
flex: 1,
|
||
padding: '8px',
|
||
borderRadius: '4px',
|
||
border: `2px solid ${lineItemStats.priceCalcErrors === 0 ? '#c3e6cb' : '#dc2626'}`,
|
||
background: lineItemStats.priceCalcErrors === 0 ? '#d4edda' : '#fef2f2',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
textAlign: 'center',
|
||
fontSize: '0.8rem'
|
||
}}>
|
||
<div style={{ fontSize: '1.3rem', marginBottom: '2px' }}>
|
||
{lineItemStats.priceCalcErrors === 0 ? '✓' : '⛔'}
|
||
</div>
|
||
<div style={{ fontWeight: '600', color: lineItemStats.priceCalcErrors === 0 ? '#155724' : '#dc2626', marginBottom: '2px' }}>
|
||
QTY/Price
|
||
</div>
|
||
<div style={{ fontSize: '0.7rem', color: lineItemStats.priceCalcErrors === 0 ? '#155724' : '#dc2626' }}>
|
||
{lineItemStats.priceCalcErrors === 0 ? 'All OK' : `${lineItemStats.priceCalcErrors} error${lineItemStats.priceCalcErrors !== 1 ? 's' : ''}`}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Portions Check - AMBER warning (doesn't block) */}
|
||
<div style={{
|
||
flex: 1,
|
||
padding: '8px',
|
||
borderRadius: '4px',
|
||
border: `1px solid ${lineItemStats.withoutPortions === 0 ? '#c3e6cb' : '#ffc107'}`,
|
||
background: lineItemStats.withoutPortions === 0 ? '#d4edda' : '#fff3cd',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
textAlign: 'center',
|
||
fontSize: '0.8rem'
|
||
}}>
|
||
<div style={{ fontSize: '1.3rem', marginBottom: '2px' }}>📦</div>
|
||
<div style={{ fontWeight: '600', color: lineItemStats.withoutPortions === 0 ? '#155724' : '#856404', marginBottom: '2px' }}>
|
||
Portions
|
||
</div>
|
||
<div style={{ fontSize: '0.7rem', color: lineItemStats.withoutPortions === 0 ? '#155724' : '#856404' }}>
|
||
{lineItemStats.withPortions} / {lineItemStats.total}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Missing Data Check - AMBER warning (doesn't block confirm) */}
|
||
<div style={{
|
||
flex: 1,
|
||
padding: '8px',
|
||
borderRadius: '4px',
|
||
border: `1px solid ${lineItemStats.missingData === 0 ? '#c3e6cb' : '#ffc107'}`,
|
||
background: lineItemStats.missingData === 0 ? '#d4edda' : '#fff3cd',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
textAlign: 'center',
|
||
fontSize: '0.8rem'
|
||
}}>
|
||
<div style={{ fontSize: '1.3rem', marginBottom: '2px' }}>
|
||
{lineItemStats.missingData === 0 ? '✓' : '⚠'}
|
||
</div>
|
||
<div style={{ fontWeight: '600', color: lineItemStats.missingData === 0 ? '#155724' : '#856404', marginBottom: '2px' }}>
|
||
Missing Data
|
||
</div>
|
||
<div style={{ fontSize: '0.7rem', color: lineItemStats.missingData === 0 ? '#155724' : '#856404' }}>
|
||
{lineItemStats.missingData} item{lineItemStats.missingData !== 1 ? 's' : ''}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Non-Stock Check */}
|
||
<div style={{
|
||
flex: 1,
|
||
padding: '8px',
|
||
borderRadius: '4px',
|
||
border: `1px solid ${lineItemStats.nonStock === 0 ? '#c3e6cb' : '#ffc107'}`,
|
||
background: lineItemStats.nonStock === 0 ? '#d4edda' : '#fff3cd',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
textAlign: 'center',
|
||
fontSize: '0.8rem'
|
||
}}>
|
||
<div style={{ fontSize: '1.3rem', marginBottom: '2px' }}>🚫</div>
|
||
<div style={{ fontWeight: '600', color: lineItemStats.nonStock === 0 ? '#155724' : '#856404', marginBottom: '2px' }}>
|
||
Non-Stock
|
||
</div>
|
||
<div style={{ fontSize: '0.7rem', color: lineItemStats.nonStock === 0 ? '#155724' : '#856404' }}>
|
||
{lineItemStats.nonStock} item{lineItemStats.nonStock !== 1 ? 's' : ''}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Dext Status Check - Always visible */}
|
||
<div style={{
|
||
flex: 1,
|
||
padding: '8px',
|
||
borderRadius: '4px',
|
||
border: `1px solid ${invoice.supplier_skip_dext ? '#c3e6cb' : (invoice.dext_sent_at ? '#c3e6cb' : '#ffc107')}`,
|
||
background: invoice.supplier_skip_dext ? '#d4edda' : (invoice.dext_sent_at ? '#d4edda' : '#fff3cd'),
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
textAlign: 'center',
|
||
fontSize: '0.8rem'
|
||
}}>
|
||
<div style={{ fontSize: '1.3rem', marginBottom: '2px' }}>
|
||
{invoice.supplier_skip_dext ? '−' : (invoice.dext_sent_at ? '✓' : '⚠')}
|
||
</div>
|
||
<div style={{ fontWeight: '600', color: invoice.supplier_skip_dext ? '#155724' : (invoice.dext_sent_at ? '#155724' : '#856404'), marginBottom: '2px' }}>
|
||
Dext Status
|
||
</div>
|
||
<div style={{ fontSize: '0.7rem', color: invoice.supplier_skip_dext ? '#155724' : (invoice.dext_sent_at ? '#155724' : '#856404') }}>
|
||
{invoice.supplier_skip_dext ? 'N/A (Skipped)' : (invoice.dext_sent_at ? new Date(invoice.dext_sent_at).toLocaleDateString() : 'Not sent')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Dispute Indicator Blocks - clickable to open detail modal */}
|
||
{invoice.disputes && invoice.disputes.length > 0 && (
|
||
<div style={{ marginTop: '15px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||
{invoice.disputes.map((dispute) => {
|
||
const isOpen = ['NEW', 'CONTACTED', 'AWAITING_CREDIT', 'AWAITING_REPLACEMENT'].includes(dispute.status)
|
||
|
||
return (
|
||
<div
|
||
key={dispute.id}
|
||
onClick={() => setViewingDisputeId(dispute.id)}
|
||
style={{
|
||
padding: '12px',
|
||
background: isOpen ? '#fff3cd' : '#d1ecf1',
|
||
border: `2px solid ${isOpen ? '#ffc107' : '#17a2b8'}`,
|
||
borderRadius: '8px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
<div>
|
||
<div style={{ fontWeight: 'bold', color: '#1a1a2e', marginBottom: '4px' }}>
|
||
{isOpen ? '⚠️' : 'ℹ️'} {dispute.status.replace(/_/g, ' ')}
|
||
</div>
|
||
<div style={{ fontSize: '0.8rem', color: '#666' }}>
|
||
#{dispute.id} - {dispute.dispute_type.replace(/_/g, ' ').toUpperCase()} - {dispute.title}
|
||
</div>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '6px 12px',
|
||
background: '#e94560',
|
||
color: 'white',
|
||
borderRadius: '4px',
|
||
fontSize: '0.85rem',
|
||
fontWeight: 'bold',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
View
|
||
</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Button Rows - Centered */}
|
||
<div style={{ marginTop: '15px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
|
||
{/* Row 1: Resend to Dext | Delete | View OCR */}
|
||
<div style={{ display: 'flex', gap: '10px' }}>
|
||
{(invoice.status === 'CONFIRMED' || invoice.status === 'REVIEWED') && settings?.dext_manual_send_enabled && !invoice.supplier_skip_dext && (
|
||
<button
|
||
onClick={() => setShowDextSendConfirm(true)}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: '#17a2b8',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: hasLineItemErrors ? 'not-allowed' : 'pointer',
|
||
minWidth: '130px',
|
||
whiteSpace: 'nowrap',
|
||
opacity: hasLineItemErrors ? 0.5 : 1
|
||
}}
|
||
disabled={hasLineItemErrors}
|
||
title={hasLineItemErrors ? 'Fix line item validation errors before sending to Dext' : ''}
|
||
>
|
||
{invoice.dext_sent_at ? 'Resend to Dext' : 'Send to Dext'}
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => setShowDeleteModal(true)}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: '#dc3545',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
minWidth: '110px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
Delete Invoice
|
||
</button>
|
||
<button
|
||
onClick={() => setShowDisputeModal(true)}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: '#f0ad4e',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
minWidth: '110px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
Log Dispute
|
||
</button>
|
||
{/* LLM FEATURE — AI Assist button — see LLM-MANIFEST.md for removal instructions */}
|
||
{settings?.llm_enabled && settings?.anthropic_api_key_set && (
|
||
<button
|
||
onClick={handleAiAssist}
|
||
disabled={aiAssistLoading}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: aiAssistSuggestions ? '#6f42c1' : '#7952b3',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: aiAssistLoading ? 'wait' : 'pointer',
|
||
minWidth: '120px',
|
||
whiteSpace: 'nowrap',
|
||
opacity: aiAssistLoading ? 0.7 : 1,
|
||
}}
|
||
>
|
||
{aiAssistLoading ? 'Analysing...' : aiAssistSuggestions ? '\u2728 AI Results' : '\u2728 AI Assist'}
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => setShowRawOcrModal(true)}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: '#6c757d',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
minWidth: '120px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
View OCR Data
|
||
</button>
|
||
</div>
|
||
|
||
{/* Row 2: Admin Only Manual Control Buttons */}
|
||
{user?.is_admin && (
|
||
<div style={{ display: 'flex', gap: '10px' }}>
|
||
{!invoice.supplier_skip_dext && (
|
||
<button
|
||
onClick={handleMarkDextSent}
|
||
disabled={adminOperationInProgress}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: adminOperationInProgress ? '#ccc' : '#17a2b8',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: adminOperationInProgress ? 'not-allowed' : 'pointer',
|
||
minWidth: '140px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{adminOperationInProgress ? 'Processing...' : 'Mark Dext Sent'}
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={handleReprocessOCR}
|
||
disabled={adminOperationInProgress}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: adminOperationInProgress ? '#ccc' : '#ffc107',
|
||
color: '#000',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: adminOperationInProgress ? 'not-allowed' : 'pointer',
|
||
minWidth: '130px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{adminOperationInProgress ? 'Processing...' : 'Reprocess OCR'}
|
||
</button>
|
||
<button
|
||
onClick={handleResendToAzure}
|
||
disabled={adminOperationInProgress}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: adminOperationInProgress ? '#ccc' : '#fd7e14',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: adminOperationInProgress ? 'not-allowed' : 'pointer',
|
||
minWidth: '150px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{adminOperationInProgress ? 'Processing...' : 'Resend to Azure'}
|
||
</button>
|
||
<button
|
||
onClick={handleRegenerateHighlights}
|
||
disabled={adminOperationInProgress}
|
||
style={{
|
||
padding: '0.4rem 1.2rem',
|
||
fontSize: '0.8rem',
|
||
background: adminOperationInProgress ? '#ccc' : '#6f42c1',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: adminOperationInProgress ? 'not-allowed' : 'pointer',
|
||
minWidth: '160px',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
title="Regenerate PDF highlight annotations for non-stock items"
|
||
>
|
||
{adminOperationInProgress ? 'Processing...' : 'Regen Highlights'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Admin Operation Result Alert */}
|
||
{adminOperationResult && (
|
||
<div style={{
|
||
marginTop: '10px',
|
||
padding: '12px',
|
||
borderRadius: '4px',
|
||
background: adminOperationResult.type === 'success' ? '#d4edda' : '#f8d7da',
|
||
color: adminOperationResult.type === 'success' ? '#155724' : '#721c24',
|
||
border: `1px solid ${adminOperationResult.type === 'success' ? '#c3e6cb' : '#f5c6cb'}`,
|
||
fontSize: '0.85rem',
|
||
whiteSpace: 'pre-wrap',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'flex-start'
|
||
}}>
|
||
<span>{adminOperationResult.message}</span>
|
||
<button
|
||
onClick={() => setAdminOperationResult(null)}
|
||
style={{
|
||
background: 'transparent',
|
||
border: 'none',
|
||
fontSize: '1.2rem',
|
||
cursor: 'pointer',
|
||
marginLeft: '10px',
|
||
color: 'inherit'
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* LLM FEATURE — AI Assist suggestions panel — see LLM-MANIFEST.md for removal instructions */}
|
||
{(aiAssistSuggestions || aiAssistError || aiReconciliationMatches.length > 0) && (
|
||
<div style={{
|
||
background: '#f8f5ff',
|
||
border: '1px solid #d4c5f9',
|
||
borderRadius: '8px',
|
||
padding: '1rem',
|
||
marginBottom: '1rem',
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
|
||
<h3 style={{ margin: 0, color: '#5a32a3', fontSize: '1rem' }}>{'\u2728'} AI Analysis</h3>
|
||
<button
|
||
onClick={() => { setAiAssistSuggestions(null); setAiReconciliationMatches([]); setAiAssistError(null) }}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.1rem', color: '#999' }}
|
||
>{'\u2715'}</button>
|
||
</div>
|
||
|
||
{aiAssistError && (
|
||
<div style={{ background: '#f8d7da', color: '#721c24', padding: '0.5rem 0.75rem', borderRadius: '4px', fontSize: '0.85rem', marginBottom: '0.5rem' }}>
|
||
{aiAssistError}
|
||
</div>
|
||
)}
|
||
|
||
{/* Supplier match */}
|
||
{aiAssistSuggestions?.supplier_match && !invoice.supplier_id && (
|
||
<div style={{ background: '#d1ecf1', padding: '0.5rem 0.75rem', borderRadius: '4px', marginBottom: '0.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<span style={{ fontSize: '0.85rem', color: '#0c5460' }}>
|
||
Supplier: <strong>{aiAssistSuggestions.supplier_match.name}</strong> ({(aiAssistSuggestions.supplier_match.confidence * 100).toFixed(0)}% confident) — {aiAssistSuggestions.supplier_match.reason}
|
||
</span>
|
||
<button
|
||
onClick={() => handleApplyAiSupplier(aiAssistSuggestions.supplier_match!.id)}
|
||
style={{ padding: '0.25rem 0.75rem', background: '#17a2b8', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '0.8rem' }}
|
||
>Accept</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Total mismatch analysis */}
|
||
{aiAssistSuggestions?.total_mismatch_analysis && (
|
||
<div style={{ background: '#fff3cd', padding: '0.5rem 0.75rem', borderRadius: '4px', marginBottom: '0.5rem', fontSize: '0.85rem', color: '#856404' }}>
|
||
<strong>Total mismatch:</strong> {aiAssistSuggestions.total_mismatch_analysis}
|
||
</div>
|
||
)}
|
||
|
||
{/* VAT treatment */}
|
||
{aiAssistSuggestions?.vat_treatment && (
|
||
<div style={{ background: '#e2e3e5', padding: '0.4rem 0.75rem', borderRadius: '4px', marginBottom: '0.5rem', fontSize: '0.85rem', color: '#383d41' }}>
|
||
VAT treatment: <strong>{aiAssistSuggestions.vat_treatment}</strong>
|
||
</div>
|
||
)}
|
||
|
||
{/* Line item corrections */}
|
||
{aiAssistSuggestions?.line_item_corrections && aiAssistSuggestions.line_item_corrections.length > 0 && (
|
||
<div style={{ marginBottom: '0.5rem' }}>
|
||
<div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#5a32a3', marginBottom: '0.35rem' }}>Line Item Corrections</div>
|
||
{aiAssistSuggestions.line_item_corrections
|
||
.filter(c => !aiDismissedCorrections.has(`${c.idx}-${c.field}`))
|
||
.map((c, i) => (
|
||
<div key={i} style={{ background: '#ffe6e6', padding: '0.4rem 0.75rem', borderRadius: '4px', marginBottom: '0.25rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.85rem' }}>
|
||
<span style={{ color: '#721c24' }}>
|
||
Line {c.idx + 1}: <strong>{c.field}</strong> {c.current} {'\u2192'} {c.suggested} — {c.reason}
|
||
</span>
|
||
<div style={{ display: 'flex', gap: '0.35rem' }}>
|
||
<button
|
||
onClick={() => handleApplyAiCorrection(c.idx, c.field, c.suggested)}
|
||
style={{ padding: '0.2rem 0.5rem', background: '#28a745', color: 'white', border: 'none', borderRadius: '3px', cursor: 'pointer', fontSize: '0.75rem' }}
|
||
>Apply</button>
|
||
<button
|
||
onClick={() => setAiDismissedCorrections(prev => new Set([...prev, `${c.idx}-${c.field}`]))}
|
||
style={{ padding: '0.2rem 0.5rem', background: '#6c757d', color: 'white', border: 'none', borderRadius: '3px', cursor: 'pointer', fontSize: '0.75rem' }}
|
||
>Dismiss</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Subtotal flags */}
|
||
{aiAssistSuggestions?.subtotal_flags && aiAssistSuggestions.subtotal_flags.length > 0 && lineItems && (
|
||
<div style={{ marginBottom: '0.5rem' }}>
|
||
<div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#5a32a3', marginBottom: '0.35rem' }}>Subtotal / Fee Rows</div>
|
||
{aiAssistSuggestions.subtotal_flags.map((idx) => {
|
||
const item = lineItems[idx]
|
||
if (!item) return null
|
||
return (
|
||
<div key={idx} style={{ background: '#fff3cd', padding: '0.4rem 0.75rem', borderRadius: '4px', marginBottom: '0.25rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.85rem' }}>
|
||
<span style={{ color: '#856404' }}>
|
||
Line {idx + 1}: "{item.description?.substring(0, 50)}" — appears to be a subtotal or fee, not a product
|
||
</span>
|
||
{!item.is_non_stock && (
|
||
<button
|
||
onClick={() => updateLineItemMutation.mutate({ itemId: item.id, data: { is_non_stock: true } as Partial<LineItem> })}
|
||
style={{ padding: '0.2rem 0.5rem', background: '#f0ad4e', color: 'white', border: 'none', borderRadius: '3px', cursor: 'pointer', fontSize: '0.75rem' }}
|
||
>Mark Non-Stock</button>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Description recommendations */}
|
||
{aiAssistSuggestions?.description_recommendations && aiAssistSuggestions.description_recommendations.length > 0 && lineItems && (
|
||
<div style={{ marginBottom: '0.5rem' }}>
|
||
<div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#5a32a3', marginBottom: '0.35rem' }}>Description Recommendations</div>
|
||
{aiAssistSuggestions.description_recommendations
|
||
.filter(r => r.recommendation !== 'keep')
|
||
.map((r, i) => {
|
||
const item = lineItems[r.idx]
|
||
if (!item || !item.description_alt) return null
|
||
return (
|
||
<div key={i} style={{ background: '#d1ecf1', padding: '0.4rem 0.75rem', borderRadius: '4px', marginBottom: '0.25rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.85rem' }}>
|
||
<span style={{ color: '#0c5460' }}>
|
||
Line {r.idx + 1}: Swap description recommended — {r.reason}
|
||
</span>
|
||
<button
|
||
onClick={() => updateLineItemMutation.mutate({
|
||
itemId: item.id,
|
||
data: { description: item.description_alt, description_alt: item.description } as Partial<LineItem>
|
||
})}
|
||
style={{ padding: '0.2rem 0.5rem', background: '#17a2b8', color: 'white', border: 'none', borderRadius: '3px', cursor: 'pointer', fontSize: '0.75rem' }}
|
||
>Swap</button>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* LLM FEATURE — Pack size suggestions */}
|
||
{aiAssistSuggestions?.pack_size_suggestions && aiAssistSuggestions.pack_size_suggestions.length > 0 && lineItems && (
|
||
<div style={{ marginBottom: '0.5rem' }}>
|
||
<div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#5a32a3', marginBottom: '0.35rem' }}>Pack Size (from description)</div>
|
||
{aiAssistSuggestions.pack_size_suggestions.map((p, i) => {
|
||
const item = lineItems[p.idx]
|
||
if (!item) return null
|
||
const packLabel = p.pack_quantity > 1
|
||
? `${p.pack_quantity} × ${p.unit_size}${p.unit_size_type}`
|
||
: `${p.unit_size}${p.unit_size_type}`
|
||
const alreadySet = item.pack_quantity && item.unit_size
|
||
return (
|
||
<div key={i} style={{ background: alreadySet ? '#e8e8e8' : '#e8daef', padding: '0.4rem 0.75rem', borderRadius: '4px', marginBottom: '0.25rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.85rem' }}>
|
||
<span style={{ color: alreadySet ? '#666' : '#4a235a' }}>
|
||
Line {p.idx + 1}: "{item.description?.substring(0, 40)}" → <strong>{packLabel}</strong>
|
||
{alreadySet && ' (already set)'}
|
||
</span>
|
||
{!alreadySet && (
|
||
<button
|
||
onClick={() => updateLineItemMutation.mutate({
|
||
itemId: item.id,
|
||
data: { pack_quantity: p.pack_quantity, unit_size: p.unit_size, unit_size_type: p.unit_size_type } as Partial<LineItem>
|
||
})}
|
||
style={{ padding: '0.2rem 0.5rem', background: '#7d3c98', color: 'white', border: 'none', borderRadius: '3px', cursor: 'pointer', fontSize: '0.75rem' }}
|
||
>Apply</button>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
{/* END LLM FEATURE */}
|
||
|
||
{/* Reconciliation matches */}
|
||
{aiReconciliationMatches.length > 0 && lineItems && (
|
||
<div>
|
||
<div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#5a32a3', marginBottom: '0.35rem' }}>Ingredient Matches (from supplier history)</div>
|
||
{aiReconciliationMatches.map((m, i) => {
|
||
const item = lineItems[m.idx]
|
||
if (!item) return null
|
||
return (
|
||
<div key={i} style={{ background: '#d4edda', padding: '0.4rem 0.75rem', borderRadius: '4px', marginBottom: '0.25rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.85rem' }}>
|
||
<span style={{ color: '#155724' }}>
|
||
Line {m.idx + 1} "{item.description?.substring(0, 40)}" {'\u2192'} <strong>{m.ingredient_name}</strong> ({(m.confidence * 100).toFixed(0)}%) — {m.reason}
|
||
</span>
|
||
<button
|
||
onClick={() => updateLineItemMutation.mutate({ itemId: item.id, data: { ingredient_id: m.ingredient_id } as Partial<LineItem> })}
|
||
style={{ padding: '0.2rem 0.5rem', background: '#28a745', color: 'white', border: 'none', borderRadius: '3px', cursor: 'pointer', fontSize: '0.75rem' }}
|
||
>Map</button>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Full-width Line Items Section */}
|
||
<div style={styles.lineItemsSection}>
|
||
<div style={{ marginBottom: '10px' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
|
||
<h3 style={{ margin: '0' }}>Line Items</h3>
|
||
<button
|
||
onClick={() => {
|
||
if (bulkEditMode) {
|
||
// Check if there are unsaved changes
|
||
if (editingLineItem !== null) {
|
||
if (!window.confirm('You have unsaved changes. Are you sure you want to exit edit mode?')) {
|
||
return
|
||
}
|
||
}
|
||
// Exiting bulk edit mode - cancel any unsaved edits
|
||
setEditingLineItem(null)
|
||
setLineItemEdits({})
|
||
setBulkEditMode(false)
|
||
} else {
|
||
// Entering bulk edit mode
|
||
setBulkEditMode(true)
|
||
// If there are no line items, automatically add one
|
||
if (!lineItems || lineItems.length === 0) {
|
||
handleAddLineItem()
|
||
}
|
||
}
|
||
}}
|
||
style={{
|
||
...styles.editBtn,
|
||
background: bulkEditMode ? '#dc3545' : '#f0f0f0',
|
||
color: bulkEditMode ? 'white' : '#333',
|
||
border: bulkEditMode ? 'none' : '1px solid #ddd',
|
||
padding: '0.5rem 1rem',
|
||
fontSize: '0.85rem'
|
||
}}
|
||
>
|
||
{bulkEditMode ? '✕ Exit Edit Mode' : '✏️ Edit Line Items'}
|
||
</button>
|
||
</div>
|
||
{lineItems && lineItems.length > 0 && (
|
||
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
|
||
<input
|
||
type="text"
|
||
placeholder="Search by code or description..."
|
||
value={lineItemSearchText}
|
||
onChange={(e) => setLineItemSearchText(e.target.value)}
|
||
style={{
|
||
flex: 1,
|
||
padding: '4px 8px',
|
||
borderRadius: '4px',
|
||
border: '1px solid #d1d5db',
|
||
fontSize: '0.9rem'
|
||
}}
|
||
/>
|
||
<label style={{ fontSize: '0.9rem', color: '#6b7280' }}>
|
||
Price:
|
||
<select
|
||
value={lineItemPriceFilter}
|
||
onChange={(e) => setLineItemPriceFilter(e.target.value)}
|
||
style={{ marginLeft: '5px', padding: '4px 8px', borderRadius: '4px', border: '1px solid #d1d5db' }}
|
||
>
|
||
<option value="">All</option>
|
||
<option value="consistent" disabled={filterOptionCounts.consistent === 0}>✓ Consistent</option>
|
||
<option value="amber" disabled={filterOptionCounts.amber === 0}>? Changed</option>
|
||
<option value="red" disabled={filterOptionCounts.red === 0}>! Large change</option>
|
||
<option value="no_history" disabled={filterOptionCounts.no_history === 0}>No history</option>
|
||
</select>
|
||
</label>
|
||
<label style={{ fontSize: '0.9rem', color: '#6b7280' }}>
|
||
Portions:
|
||
<select
|
||
value={lineItemPortionsFilter}
|
||
onChange={(e) => setLineItemPortionsFilter(e.target.value)}
|
||
style={{ marginLeft: '5px', padding: '4px 8px', borderRadius: '4px', border: '1px solid #d1d5db' }}
|
||
>
|
||
<option value="">All</option>
|
||
<option value="yes" disabled={filterOptionCounts.withPortions === 0}>📦 Yes</option>
|
||
<option value="no" disabled={filterOptionCounts.withoutPortions === 0}>○ No</option>
|
||
</select>
|
||
</label>
|
||
<label style={{ fontSize: '0.9rem', color: '#6b7280' }}>
|
||
Data:
|
||
<select
|
||
value={lineItemMissingDataFilter}
|
||
onChange={(e) => setLineItemMissingDataFilter(e.target.value)}
|
||
style={{ marginLeft: '5px', padding: '4px 8px', borderRadius: '4px', border: '1px solid #d1d5db' }}
|
||
>
|
||
<option value="">All</option>
|
||
<option value="missing" disabled={filterOptionCounts.missingData === 0}>⚠ Missing key data</option>
|
||
</select>
|
||
</label>
|
||
{(lineItemSortColumn || lineItemPriceFilter || lineItemSearchText || lineItemPortionsFilter || lineItemMissingDataFilter) && (
|
||
<button
|
||
onClick={() => {
|
||
setLineItemSortColumn('')
|
||
setLineItemPriceFilter('')
|
||
setLineItemSearchText('')
|
||
setLineItemPortionsFilter('')
|
||
setLineItemMissingDataFilter('')
|
||
}}
|
||
style={{
|
||
padding: '4px 10px',
|
||
fontSize: '0.85rem',
|
||
color: '#6b7280',
|
||
background: '#f3f4f6',
|
||
border: '1px solid #d1d5db',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
Clear
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{(lineItems && lineItems.length > 0) || bulkEditMode ? (
|
||
<div style={styles.lineItemsTableContainer} ref={lineItemsTableRef}>
|
||
<table style={styles.lineItemsTable}>
|
||
<thead style={styles.stickyThead}>
|
||
<tr>
|
||
<th style={{ ...styles.th, width: '30px' }}></th>
|
||
<th
|
||
style={{ ...styles.th, width: '80px', cursor: 'pointer', userSelect: 'none' }}
|
||
onClick={() => handleLineItemSort('code')}
|
||
>
|
||
Code {lineItemSortColumn === 'code' && (lineItemSortDirection === 'asc' ? '↑' : '↓')}
|
||
</th>
|
||
<th
|
||
style={{ ...styles.th, minWidth: '240px', cursor: 'pointer', userSelect: 'none' }}
|
||
onClick={() => handleLineItemSort('description')}
|
||
>
|
||
Description {lineItemSortColumn === 'description' && (lineItemSortDirection === 'asc' ? '↑' : '↓')}
|
||
</th>
|
||
<th
|
||
style={{ ...styles.th, width: '50px', cursor: 'pointer', userSelect: 'none' }}
|
||
onClick={() => handleLineItemSort('unit')}
|
||
>
|
||
Unit {lineItemSortColumn === 'unit' && (lineItemSortDirection === 'asc' ? '↑' : '↓')}
|
||
</th>
|
||
<th
|
||
style={{ ...styles.th, width: '50px', cursor: 'pointer', userSelect: 'none' }}
|
||
onClick={() => handleLineItemSort('quantity')}
|
||
>
|
||
Qty {lineItemSortColumn === 'quantity' && (lineItemSortDirection === 'asc' ? '↑' : '↓')}
|
||
</th>
|
||
<th
|
||
style={{ ...styles.th, width: '110px', cursor: 'pointer', userSelect: 'none' }}
|
||
onClick={() => handleLineItemSort('unit_price')}
|
||
>
|
||
Price {lineItemSortColumn === 'unit_price' && (lineItemSortDirection === 'asc' ? '↑' : '↓')}
|
||
</th>
|
||
<th style={{ ...styles.th, width: '50px' }}>Tax</th>
|
||
<th
|
||
style={{ ...styles.th, width: '70px', cursor: 'pointer', userSelect: 'none' }}
|
||
onClick={() => handleLineItemSort('amount')}
|
||
>
|
||
Total {lineItemSortColumn === 'amount' && (lineItemSortDirection === 'asc' ? '↑' : '↓')}
|
||
</th>
|
||
<th
|
||
style={{ ...styles.th, textAlign: 'center', width: '60px', cursor: 'pointer', userSelect: 'none' }}
|
||
onClick={() => setShowBulkStockModal(true)}
|
||
title="Click to mark all items as stock or non-stock"
|
||
>
|
||
Stock
|
||
</th>
|
||
<th style={{ ...styles.th, textAlign: 'center', width: '40px' }} title="Cost Breakdown"></th>
|
||
<th style={{ ...styles.th, width: '70px' }}></th>
|
||
</tr>
|
||
{/* Sticky page indicator row for multi-page invoices */}
|
||
{invoice && invoice.total_pages && invoice.total_pages > 1 && !lineItemSortColumn && !lineItemSearchText && !lineItemPriceFilter && !lineItemPortionsFilter && !lineItemMissingDataFilter && (
|
||
<tr>
|
||
<th colSpan={11} style={styles.stickyPageIndicatorCell}>
|
||
Page {currentVisiblePage} of {invoice.total_pages}
|
||
</th>
|
||
</tr>
|
||
)}
|
||
</thead>
|
||
<tbody>
|
||
{[...filteredAndSortedLineItems, ...(editingLineItem === -1 ? [{
|
||
id: -1,
|
||
product_code: lineItemEdits.product_code || '',
|
||
description: lineItemEdits.description || '',
|
||
description_alt: null,
|
||
unit: lineItemEdits.unit || '',
|
||
quantity: lineItemEdits.quantity ?? null,
|
||
order_quantity: null,
|
||
unit_price: lineItemEdits.unit_price ?? null,
|
||
tax_rate: lineItemEdits.tax_rate || '',
|
||
tax_amount: null,
|
||
amount: lineItemEdits.amount ?? null,
|
||
line_number: lineItemEdits.line_number || 0,
|
||
is_non_stock: lineItemEdits.is_non_stock || false,
|
||
raw_content: null,
|
||
pack_quantity: null,
|
||
unit_size: null,
|
||
unit_size_type: null,
|
||
portions_per_unit: null,
|
||
cost_per_item: null,
|
||
cost_per_portion: null,
|
||
ocr_warnings: null,
|
||
price_change_status: null,
|
||
price_change_percent: null,
|
||
previous_price: null,
|
||
future_price: null,
|
||
future_change_percent: null,
|
||
page_number: null,
|
||
_originalIndex: -1
|
||
}] : [])].map((item, index, allItems) => {
|
||
const bbox = getLineItemBoundingBox(item._originalIndex)
|
||
const highQtyThreshold = settings?.high_quantity_threshold ?? 100
|
||
const isHighQuantity = item.quantity !== null && item.quantity > highQtyThreshold
|
||
|
||
// Check for stock status conflict
|
||
const itemStockHistory = stockHistory?.[item.id.toString()]
|
||
const hasStockConflict = itemStockHistory?.has_history &&
|
||
itemStockHistory.previously_non_stock &&
|
||
!item.is_non_stock // Current item is marked as stock, but was previously non-stock
|
||
|
||
// Check for price calculation errors
|
||
// Valid cases: qty only (free item), or all three values with correct calculation
|
||
// For credit notes, totals are negative but qty/price are positive
|
||
const hasQty = item.quantity != null && item.quantity !== 0
|
||
const hasPrice = item.unit_price != null && item.unit_price !== 0
|
||
const hasTotal = item.amount != null && item.amount !== 0
|
||
|
||
// qty * price should equal amount (works for both positive and negative/credit lines)
|
||
const expectedTotal = (item.quantity || 0) * (item.unit_price || 0)
|
||
const actualTotal = item.amount || 0
|
||
const calculationMismatch = Math.abs(expectedTotal - actualTotal) > 0.02
|
||
|
||
const hasPriceCalcError =
|
||
(hasPrice && (!hasQty || !hasTotal)) || // price requires both qty and total
|
||
(hasTotal && (!hasQty || !hasPrice)) || // total requires both qty and price
|
||
(hasQty && hasPrice && hasTotal && calculationMismatch) // calculation mismatch (2p tolerance)
|
||
|
||
// Check if this line item is disputed
|
||
const isDisputed = invoice.disputed_line_item_ids?.includes(item.id)
|
||
|
||
// Check if this is the last item on its page (for page break indicator)
|
||
const isLastOnPage = invoice && invoice.total_pages && invoice.total_pages > 1 &&
|
||
!lineItemSortColumn && !lineItemSearchText && !lineItemPriceFilter && !lineItemPortionsFilter && !lineItemMissingDataFilter &&
|
||
item.page_number && index < allItems.length - 1 &&
|
||
allItems[index + 1]?.page_number !== item.page_number
|
||
|
||
// High quantity is lighter amber, disputed is pale pink (OCR warning now shown on product code cell only)
|
||
const rowBackground = isHighQuantity ? '#fff8e1' : isDisputed ? '#fff0f3' : undefined
|
||
const rowStyle: React.CSSProperties | undefined = rowBackground ? { backgroundColor: rowBackground } : undefined
|
||
// Add amber border for stock conflicts, or dashed border for page breaks
|
||
let rowStyleWithBorder: React.CSSProperties | undefined = hasStockConflict
|
||
? { ...rowStyle, border: '2px solid #ffc107' }
|
||
: rowStyle
|
||
if (isLastOnPage && !hasStockConflict) {
|
||
rowStyleWithBorder = { ...rowStyleWithBorder, borderBottom: '2px dashed #adb5bd' }
|
||
}
|
||
|
||
// Style for cells with price calculation errors - create a single box spanning qty to total
|
||
const errorCellStyleLeft = hasPriceCalcError
|
||
? { borderLeft: '2px solid #dc3545', borderTop: '2px solid #dc3545', borderBottom: '2px solid #dc3545', backgroundColor: '#ffe6e6' }
|
||
: {}
|
||
const errorCellStyleMiddle = hasPriceCalcError
|
||
? { borderTop: '2px solid #dc3545', borderBottom: '2px solid #dc3545', backgroundColor: '#ffe6e6' }
|
||
: {}
|
||
const errorCellStyleRight = hasPriceCalcError
|
||
? { borderRight: '2px solid #dc3545', borderTop: '2px solid #dc3545', borderBottom: '2px solid #dc3545', backgroundColor: '#ffe6e6' }
|
||
: {}
|
||
|
||
return (
|
||
<React.Fragment key={item.id}>
|
||
<tr style={rowStyleWithBorder} data-page={item.page_number || 1}>
|
||
<td style={styles.td}>
|
||
{bbox && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleHighlightLineItem(item.id, item._originalIndex)}
|
||
style={{
|
||
...styles.eyeBtn,
|
||
padding: '0.25rem 0.4rem',
|
||
fontSize: '0.8rem',
|
||
...(expandedLineItem === item.id ? styles.eyeBtnActive : {})
|
||
}}
|
||
title="Show on document"
|
||
>
|
||
👁
|
||
</button>
|
||
)}
|
||
</td>
|
||
{editingLineItem === item.id ? (
|
||
<>
|
||
<td style={styles.td}>
|
||
<input
|
||
type="text"
|
||
value={editingLineItem === item.id ? (lineItemEdits.product_code || '') : (item.product_code || '')}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, product_code: e.target.value }); }}
|
||
style={{ ...styles.tableInput, width: '70px' }}
|
||
/>
|
||
</td>
|
||
<td style={styles.td}>
|
||
<input
|
||
type="text"
|
||
value={editingLineItem === item.id ? (lineItemEdits.description || '') : (item.description || '')}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, description: e.target.value }); }}
|
||
style={styles.tableInput}
|
||
/>
|
||
</td>
|
||
<td style={styles.td}>
|
||
<input
|
||
type="text"
|
||
value={editingLineItem === item.id ? (lineItemEdits.unit || '') : (item.unit || '')}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, unit: e.target.value }); }}
|
||
style={{ ...styles.tableInput, width: '50px' }}
|
||
/>
|
||
</td>
|
||
<td style={styles.td}>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={editingLineItem === item.id ? (lineItemEdits.quantity ?? '') : (item.quantity ?? '')}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, quantity: parseFloat(e.target.value) }); }}
|
||
style={{ ...styles.tableInput, width: '50px' }}
|
||
/>
|
||
</td>
|
||
<td style={styles.td}>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={editingLineItem === item.id ? (lineItemEdits.unit_price ?? '') : (item.unit_price ?? '')}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, unit_price: parseFloat(e.target.value) }); }}
|
||
style={{ ...styles.tableInput, width: '70px' }}
|
||
/>
|
||
</td>
|
||
<td style={styles.td}>
|
||
<input
|
||
type="text"
|
||
value={editingLineItem === item.id ? (lineItemEdits.tax_rate || '') : (item.tax_rate || '')}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, tax_rate: e.target.value }); }}
|
||
style={{ ...styles.tableInput, width: '50px' }}
|
||
/>
|
||
</td>
|
||
<td style={styles.td}>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={editingLineItem === item.id ? (lineItemEdits.amount ?? '') : (item.amount ?? '')}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, amount: parseFloat(e.target.value) }); }}
|
||
style={{ ...styles.tableInput, width: '60px' }}
|
||
/>
|
||
</td>
|
||
<td style={{ ...styles.td, textAlign: 'center' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={editingLineItem === item.id ? !lineItemEdits.is_non_stock : !item.is_non_stock}
|
||
onChange={(e) => { ensureEditing(item); setLineItemEdits({ ...lineItemEdits, is_non_stock: !e.target.checked }); }}
|
||
style={{ width: '18px', height: '18px', cursor: 'pointer' }}
|
||
/>
|
||
</td>
|
||
<td style={{ ...styles.td, textAlign: 'center' }}>
|
||
{/* Scale icon disabled during edit */}
|
||
</td>
|
||
<td style={styles.td}>
|
||
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
|
||
<button
|
||
onClick={() => saveLineItemEdit(item.id)}
|
||
style={{
|
||
padding: '0.35rem 0.5rem',
|
||
background: '#f0f0f0',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontSize: '1rem',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
minWidth: '32px',
|
||
height: '32px'
|
||
}}
|
||
title="Save changes"
|
||
>
|
||
✅
|
||
</button>
|
||
<button
|
||
onClick={cancelEditLineItem}
|
||
style={{
|
||
padding: '0.35rem 0.5rem',
|
||
background: '#f0f0f0',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontSize: '1rem',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
minWidth: '32px',
|
||
height: '32px'
|
||
}}
|
||
title="Cancel editing"
|
||
>
|
||
❌
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</>
|
||
) : (
|
||
<>
|
||
<td style={{ ...styles.td, fontSize: '0.85rem', color: '#666' }}>
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
|
||
<span
|
||
style={item.ocr_warnings ? {
|
||
background: '#fff3cd',
|
||
padding: '2px 6px',
|
||
borderRadius: '3px',
|
||
border: '1px solid #ffc107'
|
||
} : undefined}
|
||
>
|
||
{item.product_code || '—'}
|
||
</span>
|
||
{item.ocr_warnings && (
|
||
<span
|
||
title={item.ocr_warnings}
|
||
style={{
|
||
cursor: 'help',
|
||
fontSize: '1rem'
|
||
}}
|
||
>
|
||
⚠️
|
||
</span>
|
||
)}
|
||
</span>
|
||
</td>
|
||
<td style={{ ...styles.td, ...(item.is_non_stock ? { color: '#856404', fontStyle: 'italic' } : {}) }}>
|
||
<div>
|
||
{getFirstLineOfDescription(item.description) || '—'}
|
||
{item.description_alt && item.description !== item.description_alt && (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); setDescSwapItem(item); }}
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
padding: '2px 6px',
|
||
fontSize: '0.9rem',
|
||
color: '#e94560',
|
||
marginLeft: '6px'
|
||
}}
|
||
title="OCR detected alternative description - click to compare"
|
||
>
|
||
🔄
|
||
</button>
|
||
)}
|
||
{invoice.disputed_line_item_ids?.includes(item.id) && (
|
||
<span style={{
|
||
marginLeft: '8px',
|
||
color: '#e94560',
|
||
fontSize: '0.7rem',
|
||
fontWeight: 'bold',
|
||
padding: '2px 6px',
|
||
background: '#ffe0e6',
|
||
borderRadius: '3px'
|
||
}}>
|
||
[DISPUTED]
|
||
</span>
|
||
)}
|
||
</div>
|
||
{hasStockConflict && (
|
||
<div style={{
|
||
fontSize: '0.75rem',
|
||
color: '#856404',
|
||
fontStyle: 'italic',
|
||
marginTop: '4px',
|
||
lineHeight: '1.2'
|
||
}}>
|
||
⚠️ This item has previously been marked as not a stock item
|
||
</div>
|
||
)}
|
||
{hasPriceCalcError && (
|
||
<div style={{
|
||
fontSize: '0.75rem',
|
||
color: '#dc3545',
|
||
fontWeight: 'bold',
|
||
marginTop: '4px',
|
||
lineHeight: '1.3'
|
||
}}>
|
||
! QTY x Price = Total Check Failed<br />
|
||
{item.quantity?.toFixed(2)} × £{item.unit_price?.toFixed(2)} ≠ £{item.amount?.toFixed(2)}
|
||
</div>
|
||
)}
|
||
{/* Description alias suggestion banner */}
|
||
{!item.ingredient_id && !item.product_code && item.description && (() => {
|
||
const firstLine = item.description.split('\n')[0].trim().toLowerCase()
|
||
const suggestion = aliasSuggestions[firstLine]
|
||
if (!suggestion) return null
|
||
const isAdding = addingAliasFor === firstLine
|
||
return (
|
||
<div style={{
|
||
fontSize: '0.75rem',
|
||
color: '#0c5460',
|
||
background: '#d1ecf1',
|
||
padding: '0.25rem 0.5rem',
|
||
borderRadius: '4px',
|
||
marginTop: '4px',
|
||
border: '1px solid #bee5eb',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
gap: '0.5rem',
|
||
flexWrap: 'wrap',
|
||
}}>
|
||
<span>
|
||
Similar to "{suggestion.canonical_description}"
|
||
{suggestion.ingredient_name && <> → {suggestion.ingredient_name}</>}
|
||
{' '}({Math.round(suggestion.similarity * 100)}% match)
|
||
{suggestion.price_difference != null && suggestion.price_difference > 5 && (
|
||
<span style={{ color: '#856404', marginLeft: '6px' }}>
|
||
Price differs {suggestion.price_difference.toFixed(0)}%
|
||
</span>
|
||
)}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setAddingAliasFor(firstLine)
|
||
addDescriptionAliasMutation.mutate({
|
||
sourceId: suggestion.source_id,
|
||
alias: item.description!.split('\n')[0].trim(),
|
||
})
|
||
}}
|
||
disabled={isAdding}
|
||
style={{
|
||
padding: '0.2rem 0.5rem',
|
||
background: '#17a2b8',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: isAdding ? 'default' : 'pointer',
|
||
fontSize: '0.7rem',
|
||
fontWeight: '500',
|
||
whiteSpace: 'nowrap' as const,
|
||
opacity: isAdding ? 0.6 : 1,
|
||
}}
|
||
>
|
||
{isAdding ? 'Adding...' : '+ Add as alias'}
|
||
</button>
|
||
</div>
|
||
)
|
||
})()}
|
||
</td>
|
||
<td style={{ ...styles.td, fontSize: '0.85rem' }}>{item.unit || '—'}</td>
|
||
<td style={{ ...styles.td, ...errorCellStyleLeft }}>{item.quantity?.toFixed(2) || '—'}</td>
|
||
<td style={{ ...styles.td, ...errorCellStyleMiddle, position: 'relative' }}>
|
||
{/* Price value - inline-block to align with other cells */}
|
||
<div style={{ display: 'inline-block', verticalAlign: 'middle', whiteSpace: 'nowrap' }}>
|
||
{item.unit_price != null ? `£${item.unit_price.toFixed(2)}` : '—'}
|
||
{/* Show green tick inline for consistent prices */}
|
||
{item.price_change_status === 'consistent' && (
|
||
<span style={{ marginLeft: '6px', color: '#22c55e', fontWeight: 'bold' }}>
|
||
✓
|
||
</span>
|
||
)}
|
||
{/* Show green document icon inline for new items (no history) */}
|
||
{item.price_change_status === 'no_history' && (
|
||
<span style={{ marginLeft: '6px', color: '#22c55e' }}>
|
||
📄⁺
|
||
</span>
|
||
)}
|
||
{/* Show amber coin icon inline for items with price changes */}
|
||
{item.price_change_status && item.price_change_status !== 'no_history' && item.price_change_status !== 'consistent' && (
|
||
<span style={{ marginLeft: '6px', color: '#f59e0b' }}>
|
||
🪙
|
||
</span>
|
||
)}
|
||
</div>
|
||
{/* Show arrow and percentage below for price changes - absolutely positioned */}
|
||
{item.price_change_status && item.price_change_status !== 'no_history' && item.price_change_status !== 'consistent' && item.price_change_percent !== null && item.price_change_percent !== 0 && (() => {
|
||
const isIncrease = item.price_change_percent > 0
|
||
const arrow = isIncrease ? '▲' : '▼'
|
||
const color = isIncrease ? '#ef4444' : '#22c55e'
|
||
return (
|
||
<div
|
||
onClick={() => openPriceHistoryModal(item)}
|
||
style={{
|
||
position: 'absolute',
|
||
bottom: '0.2rem',
|
||
left: '0.5rem',
|
||
fontSize: '0.65rem',
|
||
lineHeight: '1',
|
||
color,
|
||
cursor: 'pointer'
|
||
}}
|
||
title="View price history"
|
||
>
|
||
<span style={{ fontWeight: 'bold' }}>{arrow}</span>{' '}
|
||
{Math.abs(item.price_change_percent).toFixed(1)}%
|
||
</div>
|
||
)
|
||
})()}
|
||
{/* Show future price change in brackets and grey for old invoices */}
|
||
{item.future_change_percent !== null && item.future_change_percent !== 0 && (() => {
|
||
const isIncrease = item.future_change_percent > 0
|
||
const arrow = isIncrease ? '▲' : '▼'
|
||
return (
|
||
<div
|
||
onClick={() => openPriceHistoryModal(item)}
|
||
style={{
|
||
position: 'absolute',
|
||
bottom: '0.2rem',
|
||
left: '0.5rem',
|
||
fontSize: '0.75rem',
|
||
color: '#9ca3af',
|
||
cursor: 'pointer'
|
||
}}
|
||
title="Price changed after this invoice"
|
||
>
|
||
(<span style={{ fontWeight: 'bold' }}>{arrow}</span>{' '}
|
||
{Math.abs(item.future_change_percent).toFixed(1)}%)
|
||
</div>
|
||
)
|
||
})()}
|
||
</td>
|
||
<td style={{ ...styles.td, fontSize: '0.85rem', ...errorCellStyleMiddle }}>{item.tax_rate || '—'}</td>
|
||
<td style={{ ...styles.td, ...errorCellStyleRight }}>{item.amount ? `£${item.amount.toFixed(2)}` : '—'}</td>
|
||
<td style={{ ...styles.td, textAlign: 'center' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={!item.is_non_stock}
|
||
onChange={(e) => {
|
||
updateLineItemMutation.mutate({
|
||
itemId: item.id,
|
||
data: { is_non_stock: !e.target.checked }
|
||
})
|
||
}}
|
||
style={{ width: '18px', height: '18px', cursor: 'pointer' }}
|
||
title={!item.is_non_stock ? 'Mark as non-stock item' : 'Mark as stock item'}
|
||
/>
|
||
</td>
|
||
<td style={{ ...styles.td, textAlign: 'center' }}>
|
||
<button
|
||
type="button"
|
||
onClick={() => toggleCostBreakdown(item)}
|
||
style={{
|
||
...styles.scaleBtn,
|
||
...(ingredientModalItem?.id === item.id ? styles.scaleBtnActive : {}),
|
||
color: getScaleIconColor(item)
|
||
}}
|
||
title={
|
||
item.ingredient_id
|
||
? `Mapped → ${item.ingredient_name || 'Ingredient'}`
|
||
: !item.pack_quantity
|
||
? 'No pack data - click to map ingredient'
|
||
: item.portions_per_unit === null
|
||
? 'Pack data extracted - click to map ingredient'
|
||
: 'Pack data complete - click to map ingredient'
|
||
}
|
||
>
|
||
<ScaleIcon />
|
||
</button>
|
||
</td>
|
||
<td style={{ ...styles.td, minWidth: '135px', whiteSpace: 'nowrap', verticalAlign: 'middle' }}>
|
||
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
|
||
{bulkEditMode ? (
|
||
<>
|
||
<button onClick={() => startEditLineItem(item)} style={styles.iconBtn} title="Edit line item">
|
||
✏️
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteLineItem(item.id)}
|
||
style={{
|
||
...styles.iconBtn,
|
||
color: '#dc3545'
|
||
}}
|
||
title="Delete line item"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button onClick={() => openSearchModal(item)} style={styles.iconBtn} title="Search similar items">
|
||
🔍
|
||
</button>
|
||
<button
|
||
onClick={() => item.price_change_status && item.price_change_status !== 'no_history' && item.price_change_percent !== null && openPriceHistoryModal(item)}
|
||
style={{
|
||
...styles.iconBtn,
|
||
opacity: (item.price_change_status && item.price_change_status !== 'no_history' && item.price_change_percent !== null) ? 1 : 0.5,
|
||
cursor: (item.price_change_status && item.price_change_status !== 'no_history' && item.price_change_percent !== null) ? 'pointer' : 'not-allowed'
|
||
}}
|
||
title={
|
||
(item.price_change_status && item.price_change_status !== 'no_history' && item.price_change_percent !== null)
|
||
? "View price history"
|
||
: "No price history available"
|
||
}
|
||
disabled={!(item.price_change_status && item.price_change_status !== 'no_history' && item.price_change_percent !== null)}
|
||
>
|
||
📊
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</>
|
||
)}
|
||
</tr>
|
||
{expandedLineItem === item.id && bbox && (
|
||
<tr>
|
||
<td colSpan={11} style={styles.lineItemPreviewCell}>
|
||
{isPDF && pdfPages.length > 0 ? (
|
||
(() => {
|
||
// Get the correct page canvas (high-res)
|
||
const pageIndex = bbox.pageNumber - 1
|
||
const pageData = pdfPages[pageIndex]
|
||
if (!pageData) return null
|
||
|
||
// Calculate bounding box coordinates in high-res canvas pixels
|
||
const bboxX = (bbox.x / 100) * pageData.width
|
||
const bboxY = (bbox.y / 100) * pageData.height
|
||
const bboxW = (bbox.width / 100) * pageData.width
|
||
const bboxH = (bbox.height / 100) * pageData.height
|
||
|
||
// Small padding around OCR text so box doesn't cover the text
|
||
const boxPadding = 15 // 15px breathing room around detected text
|
||
const expandedBboxX = Math.max(0, bboxX - boxPadding)
|
||
const expandedBboxY = Math.max(0, bboxY - boxPadding)
|
||
const expandedBboxW = bboxW + (boxPadding * 2)
|
||
const expandedBboxH = bboxH + (boxPadding * 2)
|
||
|
||
// Crop tightly to the expanded box - minimal extra space
|
||
const cropPadding = 5 // Very tight crop so box fills container
|
||
const startX = Math.max(0, expandedBboxX - cropPadding)
|
||
const startY = Math.max(0, expandedBboxY - cropPadding)
|
||
const endX = Math.min(pageData.width, expandedBboxX + expandedBboxW + cropPadding)
|
||
const endY = Math.min(pageData.height, expandedBboxY + expandedBboxH + cropPadding)
|
||
const cropW = endX - startX
|
||
const cropH = endY - startY
|
||
|
||
// Calculate expanded bounding box position relative to cropped area
|
||
const relBboxX = expandedBboxX - startX
|
||
const relBboxY = expandedBboxY - startY
|
||
|
||
// Create a cropped canvas
|
||
const croppedCanvas = document.createElement('canvas')
|
||
croppedCanvas.width = cropW
|
||
croppedCanvas.height = cropH
|
||
const ctx = croppedCanvas.getContext('2d')
|
||
if (ctx) {
|
||
ctx.drawImage(
|
||
pageData.canvas,
|
||
startX, startY, cropW, cropH,
|
||
0, 0, cropW, cropH
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div style={styles.lineItemPreviewContainer}>
|
||
<div style={{
|
||
position: 'relative',
|
||
display: 'block',
|
||
width: '100%',
|
||
}}>
|
||
<img
|
||
src={croppedCanvas.toDataURL()}
|
||
alt="Line item from invoice"
|
||
style={{
|
||
width: '100%',
|
||
height: 'auto',
|
||
display: 'block',
|
||
}}
|
||
/>
|
||
{/* Bounding box overlay */}
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
left: `${(relBboxX / cropW) * 100}%`,
|
||
top: `${(relBboxY / cropH) * 100}%`,
|
||
width: `${(expandedBboxW / cropW) * 100}%`,
|
||
height: `${(expandedBboxH / cropH) * 100}%`,
|
||
border: '2px solid #ffc107',
|
||
borderRadius: '2px',
|
||
pointerEvents: 'none',
|
||
boxShadow: '0 0 8px rgba(255, 193, 7, 0.5)',
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()
|
||
) : imageUrl ? (
|
||
(() => {
|
||
// Expand bounding box for better visibility (percentage-based)
|
||
const expansionPercent = 2 // Expand by 2% in each direction
|
||
const expandedX = Math.max(0, bbox.x - expansionPercent)
|
||
const expandedY = Math.max(0, bbox.y - expansionPercent)
|
||
const expandedWidth = Math.min(100 - expandedX, bbox.width + (expansionPercent * 2))
|
||
const expandedHeight = Math.min(100 - expandedY, bbox.height + (expansionPercent * 2))
|
||
|
||
return (
|
||
<div style={styles.lineItemPreviewContainer}>
|
||
<div style={{
|
||
position: 'relative',
|
||
display: 'block',
|
||
width: '100%',
|
||
}}>
|
||
<img
|
||
src={`${imageUrl.split('?')[0]}?token=${encodeURIComponent(token || '')}`}
|
||
alt="Line item location"
|
||
style={{
|
||
width: '100%',
|
||
height: 'auto',
|
||
display: 'block',
|
||
}}
|
||
/>
|
||
{/* Bounding box overlay */}
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
left: `${expandedX}%`,
|
||
top: `${expandedY}%`,
|
||
width: `${expandedWidth}%`,
|
||
height: `${expandedHeight}%`,
|
||
border: '2px solid #ffc107',
|
||
borderRadius: '2px',
|
||
pointerEvents: 'none',
|
||
boxShadow: '0 0 8px rgba(255, 193, 7, 0.5)',
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()
|
||
) : null}
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</React.Fragment>
|
||
)
|
||
})}
|
||
{bulkEditMode && (
|
||
<tr>
|
||
<td colSpan={11} style={{ textAlign: 'center', padding: '1.5rem', background: '#f9fafb' }}>
|
||
<button
|
||
onClick={handleAddLineItem}
|
||
style={{
|
||
...styles.confirmBtn,
|
||
padding: '0.75rem 2rem',
|
||
fontSize: '0.95rem'
|
||
}}
|
||
>
|
||
+ Add Line Item
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
) : (
|
||
<p style={styles.noItems}>No line items extracted</p>
|
||
)}
|
||
|
||
{/* Line Items Total Validation */}
|
||
<LineItemsValidation
|
||
lineItems={lineItems || []}
|
||
invoiceTotal={parseFloat(total) || 0}
|
||
netTotal={netTotal ? parseFloat(netTotal) : null}
|
||
/>
|
||
</div>
|
||
|
||
{/* Delete Confirmation Modal */}
|
||
{showDeleteModal && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowDeleteModal(false)}>
|
||
<div style={styles.modal} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Delete Invoice?</h3>
|
||
<div style={styles.modalInfo}>
|
||
<p><strong>Invoice #:</strong> {invoice.invoice_number || 'N/A'}</p>
|
||
<p><strong>Date:</strong> {invoice.invoice_date || 'N/A'}</p>
|
||
<p><strong>Total:</strong> {invoice.total ? `£${Number(invoice.total).toFixed(2)}` : 'N/A'}</p>
|
||
</div>
|
||
{invoice.duplicate_status && (
|
||
<div style={styles.modalDuplicateInfo}>
|
||
This invoice is marked as a {invoice.duplicate_status === 'firm_duplicate' ? 'duplicate' : 'possible duplicate'}.
|
||
Deleting it will resolve the duplicate warning.
|
||
</div>
|
||
)}
|
||
<div style={styles.modalActions}>
|
||
<button onClick={() => setShowDeleteModal(false)} style={styles.cancelBtn}>Cancel</button>
|
||
<button onClick={handleDelete} style={styles.confirmDeleteBtn}>Delete</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Dext Send Confirmation Modal */}
|
||
{showDextSendConfirm && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowDextSendConfirm(false)}>
|
||
<div style={styles.modal} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Send Invoice to Dext?</h3>
|
||
<p style={{ marginBottom: '1rem' }}>
|
||
This will email the invoice PDF to your configured Dext address.
|
||
</p>
|
||
{invoiceNotes && (
|
||
<p style={{ fontSize: '0.9rem', color: '#666' }}>
|
||
<strong>Note:</strong> Invoice notes will be included in the email.
|
||
</p>
|
||
)}
|
||
{lineItems && lineItems.some(item => item.is_non_stock) && (
|
||
<p style={{ fontSize: '0.9rem', color: '#666' }}>
|
||
<strong>Note:</strong> Non-stock items table will be included in the email.
|
||
</p>
|
||
)}
|
||
<div style={styles.modalActions}>
|
||
<button onClick={() => setShowDextSendConfirm(false)} style={styles.cancelBtn}>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
onClick={async () => {
|
||
try {
|
||
const res = await fetch(`/kitchen/api/invoices/${id}/send-to-dext`, {
|
||
method: 'POST',
|
||
headers: { Authorization: `Bearer ${token}` }
|
||
})
|
||
if (res.ok) {
|
||
const result = await res.json()
|
||
alert(`Invoice sent to Dext successfully at ${new Date(result.sent_at).toLocaleString()}`)
|
||
setShowDextSendConfirm(false)
|
||
queryClient.invalidateQueries({ queryKey: ['invoice', id] })
|
||
} else {
|
||
const error = await res.json()
|
||
alert(`Failed to send: ${error.detail}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to send to Dext:', error)
|
||
alert('Failed to send invoice to Dext')
|
||
}
|
||
}}
|
||
style={styles.confirmBtn}
|
||
>
|
||
Send to Dext
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Duplicate Comparison Modal */}
|
||
{showDuplicateModal && duplicateInfo && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowDuplicateModal(false)}>
|
||
<div style={styles.wideModal} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Duplicate Comparison</h3>
|
||
<div style={styles.compareGrid}>
|
||
<div style={styles.compareCard}>
|
||
<h4>Current Invoice</h4>
|
||
<p><strong>Invoice #:</strong> {duplicateInfo.current_invoice.invoice_number || '—'}</p>
|
||
<p><strong>Date:</strong> {duplicateInfo.current_invoice.invoice_date || '—'}</p>
|
||
<p><strong>Total:</strong> {duplicateInfo.current_invoice.total ? `£${Number(duplicateInfo.current_invoice.total).toFixed(2)}` : '—'}</p>
|
||
<p><strong>Order #:</strong> {duplicateInfo.current_invoice.order_number || '—'}</p>
|
||
<p><strong>Type:</strong> {duplicateInfo.current_invoice.document_type || 'invoice'}</p>
|
||
</div>
|
||
|
||
{duplicateInfo.firm_duplicate && (
|
||
<div style={{ ...styles.compareCard, borderColor: '#dc3545' }}>
|
||
<h4 style={{ color: '#dc3545' }}>Exact Duplicate</h4>
|
||
<p><strong>Invoice #:</strong> {duplicateInfo.firm_duplicate.invoice_number || '—'}</p>
|
||
<p><strong>Date:</strong> {duplicateInfo.firm_duplicate.invoice_date || '—'}</p>
|
||
<p><strong>Total:</strong> {duplicateInfo.firm_duplicate.total ? `£${Number(duplicateInfo.firm_duplicate.total).toFixed(2)}` : '—'}</p>
|
||
<p><strong>Order #:</strong> {duplicateInfo.firm_duplicate.order_number || '—'}</p>
|
||
<p><strong>Type:</strong> {duplicateInfo.firm_duplicate.document_type || 'invoice'}</p>
|
||
<button
|
||
onClick={() => navigate(`/invoice/${duplicateInfo.firm_duplicate!.id}`)}
|
||
style={styles.viewBtn}
|
||
>
|
||
View This Invoice
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{duplicateInfo.possible_duplicates.map((dup) => (
|
||
<div key={dup.id} style={{ ...styles.compareCard, borderColor: '#ffc107' }}>
|
||
<h4 style={{ color: '#856404' }}>Possible Duplicate</h4>
|
||
<p><strong>Invoice #:</strong> {dup.invoice_number || '—'}</p>
|
||
<p><strong>Date:</strong> {dup.invoice_date || '—'}</p>
|
||
<p><strong>Total:</strong> {dup.total ? `£${Number(dup.total).toFixed(2)}` : '—'}</p>
|
||
<p><strong>Order #:</strong> {dup.order_number || '—'}</p>
|
||
<button
|
||
onClick={() => navigate(`/invoice/${dup.id}`)}
|
||
style={styles.viewBtn}
|
||
>
|
||
View This Invoice
|
||
</button>
|
||
</div>
|
||
))}
|
||
|
||
{duplicateInfo.related_documents.map((doc) => (
|
||
<div key={doc.id} style={{ ...styles.compareCard, borderColor: '#17a2b8' }}>
|
||
<h4 style={{ color: '#17a2b8' }}>Related {doc.document_type === 'delivery_note' ? 'Delivery Note' : 'Invoice'}</h4>
|
||
<p><strong>Invoice #:</strong> {doc.invoice_number || '—'}</p>
|
||
<p><strong>Date:</strong> {doc.invoice_date || '—'}</p>
|
||
<p><strong>Total:</strong> {doc.total ? `£${Number(doc.total).toFixed(2)}` : '—'}</p>
|
||
<p><strong>Order #:</strong> {doc.order_number || '—'}</p>
|
||
<button
|
||
onClick={() => navigate(`/invoice/${doc.id}`)}
|
||
style={styles.viewBtn}
|
||
>
|
||
View This Invoice
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button onClick={() => setShowDuplicateModal(false)} style={styles.closeBtn}>Close</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Create Supplier Modal */}
|
||
{showCreateSupplierModal && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowCreateSupplierModal(false)}>
|
||
<div style={styles.modal} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Create New Supplier</h3>
|
||
<label style={styles.modalLabel}>
|
||
Supplier Name
|
||
<input
|
||
type="text"
|
||
value={newSupplierName}
|
||
onChange={(e) => setNewSupplierName(e.target.value)}
|
||
style={styles.input}
|
||
placeholder="e.g., Sysco, US Foods"
|
||
autoFocus
|
||
/>
|
||
</label>
|
||
<div style={styles.modalActions}>
|
||
<button onClick={() => setShowCreateSupplierModal(false)} style={styles.cancelBtn}>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
onClick={handleCreateSupplier}
|
||
style={styles.saveBtn}
|
||
disabled={!newSupplierName.trim() || createSupplierMutation.isPending}
|
||
>
|
||
{createSupplierMutation.isPending ? 'Creating...' : 'Create & Select'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Raw OCR Data Modal */}
|
||
{showRawOcrModal && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowRawOcrModal(false)}>
|
||
<div style={styles.rawOcrModal} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Raw Azure OCR Data</h3>
|
||
<p style={styles.rawOcrHint}>
|
||
This shows the raw data extracted by Azure. Use this to debug field extraction issues
|
||
or identify custom field names that need mapping.
|
||
</p>
|
||
{rawOcrData?.raw_json ? (
|
||
<div style={styles.rawOcrContent}>
|
||
<h4>Extracted Fields</h4>
|
||
{rawOcrData.raw_json.documents?.map((doc: any, docIdx: number) => (
|
||
<div key={docIdx} style={styles.rawOcrDoc}>
|
||
<h5>Document {docIdx + 1} (Confidence: {(doc.confidence * 100).toFixed(1)}%)</h5>
|
||
<table style={styles.rawOcrTable}>
|
||
<thead>
|
||
<tr>
|
||
<th style={styles.rawOcrTh}>Field</th>
|
||
<th style={styles.rawOcrTh}>Value</th>
|
||
<th style={styles.rawOcrTh}>Content</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{Object.entries(doc.fields || {}).map(([fieldName, field]: [string, any]) => (
|
||
<tr key={fieldName}>
|
||
<td style={styles.rawOcrTd}><strong>{fieldName}</strong></td>
|
||
<td style={styles.rawOcrTd}>
|
||
{typeof field?.value === 'object'
|
||
? JSON.stringify(field?.value, null, 2)
|
||
: String(field?.value ?? '—')}
|
||
</td>
|
||
<td style={styles.rawOcrTd}>{field?.content || '—'}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p style={{ color: '#999' }}>No raw OCR data available for this invoice.</p>
|
||
)}
|
||
<button onClick={() => setShowRawOcrModal(false)} style={styles.closeBtn}>Close</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Non-stock confirmation modal */}
|
||
{showNonStockConfirmModal && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowNonStockConfirmModal(false)}>
|
||
<div style={{ ...styles.rawOcrModal, maxWidth: '480px' }} onClick={(e) => e.stopPropagation()}>
|
||
<h3 style={{ marginTop: 0, marginBottom: '0.75rem' }}>Previously Non-Stock Items</h3>
|
||
<p style={{ fontSize: '0.9rem', color: '#555', marginBottom: '1rem', lineHeight: 1.5 }}>
|
||
The following item{nonStockConflictItems.length !== 1 ? 's have' : ' has'} been marked as <strong>non-stock</strong> on previous invoices from this supplier but {nonStockConflictItems.length !== 1 ? 'are' : 'is'} currently included in the stock cost for this invoice. Please confirm they have been checked.
|
||
</p>
|
||
<div style={{ marginBottom: '1.25rem', borderRadius: '6px', border: '1px solid #f0c36d', background: '#fffbf0', overflow: 'hidden' }}>
|
||
{nonStockConflictItems.map((item, idx) => (
|
||
<div
|
||
key={idx}
|
||
style={{
|
||
padding: '0.6rem 0.85rem',
|
||
borderBottom: idx < nonStockConflictItems.length - 1 ? '1px solid #f0c36d' : 'none',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
gap: '1rem',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: '0.85rem', color: '#333' }}>
|
||
{item.description?.split('\n')[0] || '(no description)'}
|
||
</span>
|
||
{item.amount != null && (
|
||
<span style={{ fontSize: '0.85rem', color: '#856404', fontWeight: 600, whiteSpace: 'nowrap' }}>
|
||
£{item.amount.toFixed(2)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p style={{ fontSize: '0.8rem', color: '#888', marginBottom: '1.25rem' }}>
|
||
Confirming will include {nonStockConflictItems.length !== 1 ? 'these items' : 'this item'} in the stock cost. Mark {nonStockConflictItems.length !== 1 ? 'them' : 'it'} as non-stock first if that was not intended.
|
||
</p>
|
||
<div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'flex-end' }}>
|
||
<button
|
||
onClick={() => setShowNonStockConfirmModal(false)}
|
||
style={{ ...styles.closeBtn, margin: 0 }}
|
||
>
|
||
Go back
|
||
</button>
|
||
<button
|
||
onClick={async () => {
|
||
setShowNonStockConfirmModal(false)
|
||
await doConfirm()
|
||
}}
|
||
style={{
|
||
padding: '0.5rem 1.25rem',
|
||
background: '#e85d04',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontWeight: 600,
|
||
fontSize: '0.9rem',
|
||
}}
|
||
>
|
||
Confirm anyway
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Date Picker Modal - select date from parsed dates */}
|
||
{showDatePickerModal && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowDatePickerModal(false)}>
|
||
<div style={{ ...styles.rawOcrModal, maxWidth: '520px' }} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Select Invoice Date</h3>
|
||
|
||
{/* OCR image snippet for the InvoiceDate field */}
|
||
{(() => {
|
||
const bbox = getFieldBoundingBox('InvoiceDate')
|
||
if (!bbox) return null
|
||
const isPdf = invoice?.image_path?.toLowerCase().endsWith('.pdf')
|
||
if (isPdf && pdfPages.length > 0) {
|
||
const pageData = pdfPages[bbox.pageNumber - 1]
|
||
if (!pageData) return null
|
||
const bboxX = (bbox.x / 100) * pageData.width
|
||
const bboxY = (bbox.y / 100) * pageData.height
|
||
const bboxW = (bbox.width / 100) * pageData.width
|
||
const bboxH = (bbox.height / 100) * pageData.height
|
||
const pad = 20
|
||
const startX = Math.max(0, bboxX - pad * 3)
|
||
const startY = Math.max(0, bboxY - pad)
|
||
const endX = Math.min(pageData.width, bboxX + bboxW + pad * 3)
|
||
const endY = Math.min(pageData.height, bboxY + bboxH + pad)
|
||
const cropW = endX - startX
|
||
const cropH = endY - startY
|
||
const croppedCanvas = document.createElement('canvas')
|
||
croppedCanvas.width = cropW
|
||
croppedCanvas.height = cropH
|
||
const ctx = croppedCanvas.getContext('2d')
|
||
if (ctx) {
|
||
ctx.drawImage(pageData.canvas, startX, startY, cropW, cropH, 0, 0, cropW, cropH)
|
||
// Draw highlight box
|
||
ctx.strokeStyle = '#e85d04'
|
||
ctx.lineWidth = 3
|
||
ctx.strokeRect(bboxX - startX - 4, bboxY - startY - 4, bboxW + 8, bboxH + 8)
|
||
}
|
||
return (
|
||
<div style={{ marginBottom: '1rem', border: '1px solid #ddd', borderRadius: '6px', overflow: 'hidden' }}>
|
||
<div style={{ fontSize: '0.75rem', color: '#666', padding: '4px 8px', background: '#f8f9fa', borderBottom: '1px solid #ddd' }}>
|
||
Date field from document
|
||
</div>
|
||
<img src={croppedCanvas.toDataURL()} alt="Date field from invoice" style={{ width: '100%', height: 'auto', display: 'block' }} />
|
||
</div>
|
||
)
|
||
}
|
||
return null
|
||
})()}
|
||
|
||
{/* Suggested fixes when current date is in the future */}
|
||
{invoiceDate && getDateWarning(invoiceDate, 'PENDING') === 'future' && (() => {
|
||
const today = new Date(); today.setHours(0, 0, 0, 0)
|
||
const swapped = getSwappedDate(invoiceDate)
|
||
const swappedIsValid = swapped && new Date(swapped) <= today
|
||
const yearFix = getYearCorrectedDate(invoiceDate)
|
||
if (!swappedIsValid && !yearFix) return null
|
||
|
||
const suggestions: { date: string; label: string; sublabel: string }[] = []
|
||
if (yearFix) {
|
||
suggestions.push({
|
||
date: yearFix.date,
|
||
label: new Date(yearFix.date).toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }),
|
||
sublabel: `Year corrected from ${invoiceDate.split('-')[0]} → ${yearFix.year}`,
|
||
})
|
||
}
|
||
if (swappedIsValid && swapped) {
|
||
suggestions.push({
|
||
date: swapped,
|
||
label: new Date(swapped).toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }),
|
||
sublabel: `Day and month swapped from ${new Date(invoiceDate).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}`,
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<div style={{ fontSize: '0.8rem', fontWeight: 600, color: '#e85d04', marginBottom: '0.5rem' }}>
|
||
⚠ Suggested fix{suggestions.length > 1 ? 'es' : ''} — date is in the future:
|
||
</div>
|
||
{suggestions.map((s, i) => (
|
||
<div
|
||
key={i}
|
||
onClick={() => handleSelectParsedDate(s.date)}
|
||
style={{
|
||
padding: '0.75rem 1rem',
|
||
border: '2px solid #e85d04',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
background: '#fff8f5',
|
||
transition: 'all 0.2s',
|
||
marginBottom: i < suggestions.length - 1 ? '0.5rem' : 0,
|
||
}}
|
||
onMouseEnter={(e) => { e.currentTarget.style.background = '#fff0e8' }}
|
||
onMouseLeave={(e) => { e.currentTarget.style.background = '#fff8f5' }}
|
||
>
|
||
<div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>{s.label}</div>
|
||
<div style={{ fontSize: '0.8rem', color: '#888' }}>{s.sublabel}</div>
|
||
</div>
|
||
))}
|
||
{parsedDates.length > 0 && (
|
||
<div style={{ borderTop: '1px solid #eee', marginTop: '1rem', paddingTop: '0.75rem', fontSize: '0.8rem', color: '#666', marginBottom: '0.5rem' }}>
|
||
Or choose a date found in the document:
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})()}
|
||
|
||
{!invoiceDate && (
|
||
<p style={{ color: '#666', marginBottom: '1rem', fontSize: '0.9rem' }}>
|
||
Dates found in the document. Click to select.
|
||
</p>
|
||
)}
|
||
{invoiceDate && getDateWarning(invoiceDate, 'PENDING') !== 'future' && (
|
||
<p style={{ color: '#666', marginBottom: '1rem', fontSize: '0.9rem' }}>
|
||
Dates found in the document. Click to select.
|
||
</p>
|
||
)}
|
||
|
||
{parsedDatesLoading ? (
|
||
<p style={{ color: '#999', textAlign: 'center', padding: '2rem' }}>Searching for dates...</p>
|
||
) : parsedDates.length === 0 ? (
|
||
invoiceDate && getDateWarning(invoiceDate, 'PENDING') === 'future' ? null : (
|
||
<p style={{ color: '#999', textAlign: 'center', padding: '2rem' }}>No dates found in document text.</p>
|
||
)
|
||
) : (
|
||
<div style={{ maxHeight: '400px', overflowY: 'auto' }}>
|
||
{parsedDates.filter(dateInfo => {
|
||
// Suppress dates already shown as swap/year-fix suggestions
|
||
if (!invoiceDate || getDateWarning(invoiceDate, 'PENDING') !== 'future') return true
|
||
const today = new Date(); today.setHours(0, 0, 0, 0)
|
||
const swapped = getSwappedDate(invoiceDate)
|
||
if (swapped && new Date(swapped) <= today && dateInfo.date === swapped) return false
|
||
const yearFix = getYearCorrectedDate(invoiceDate)
|
||
if (yearFix && dateInfo.date === yearFix.date) return false
|
||
return true
|
||
}).map((dateInfo, idx) => {
|
||
const snippetUrl = dateInfo.bbox ? cropBboxToDataUrl(dateInfo.bbox, { padX: 80, padY: 25, strokeColor: '#e85d04' }) : null
|
||
return (
|
||
<div
|
||
key={idx}
|
||
onClick={() => handleSelectParsedDate(dateInfo.date)}
|
||
style={{
|
||
marginBottom: '0.5rem',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.2s',
|
||
background: '#fff',
|
||
overflow: 'hidden',
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.background = '#f0f7ff'
|
||
e.currentTarget.style.borderColor = '#007bff'
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.background = '#fff'
|
||
e.currentTarget.style.borderColor = '#ddd'
|
||
}}
|
||
>
|
||
{snippetUrl && (
|
||
<img
|
||
src={snippetUrl}
|
||
alt="Date location in document"
|
||
style={{ width: '100%', height: 'auto', display: 'block', borderBottom: '1px solid #eee' }}
|
||
/>
|
||
)}
|
||
<div style={{ padding: '0.75rem 1rem' }}>
|
||
<div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
|
||
{new Date(dateInfo.date).toLocaleDateString('en-GB', {
|
||
weekday: 'short',
|
||
day: 'numeric',
|
||
month: 'short',
|
||
year: 'numeric'
|
||
})}
|
||
</div>
|
||
<div style={{ fontSize: '0.8rem', color: '#666' }}>
|
||
Original: {dateInfo.original}
|
||
</div>
|
||
<div style={{ fontSize: '0.75rem', color: '#999', marginTop: '0.25rem', fontStyle: 'italic' }}>
|
||
...{dateInfo.context}...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
<button onClick={() => setShowDatePickerModal(false)} style={styles.closeBtn}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Invoice Number Search Modal */}
|
||
{showInvoiceNumberModal && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowInvoiceNumberModal(false)}>
|
||
<div style={{ ...styles.rawOcrModal, maxWidth: '520px' }} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Find Invoice Number</h3>
|
||
|
||
{/* OCR image snippet for InvoiceId field if available */}
|
||
{(() => {
|
||
const bbox = getFieldBoundingBox('InvoiceId')
|
||
if (!bbox) return null
|
||
const isPdf = invoice?.image_path?.toLowerCase().endsWith('.pdf')
|
||
if (isPdf && pdfPages.length > 0) {
|
||
const pageData = pdfPages[bbox.pageNumber - 1]
|
||
if (!pageData) return null
|
||
const bboxX = (bbox.x / 100) * pageData.width
|
||
const bboxY = (bbox.y / 100) * pageData.height
|
||
const bboxW = (bbox.width / 100) * pageData.width
|
||
const bboxH = (bbox.height / 100) * pageData.height
|
||
const pad = 20
|
||
const startX = Math.max(0, bboxX - pad * 3)
|
||
const startY = Math.max(0, bboxY - pad)
|
||
const endX = Math.min(pageData.width, bboxX + bboxW + pad * 3)
|
||
const endY = Math.min(pageData.height, bboxY + bboxH + pad)
|
||
const cropW = endX - startX
|
||
const cropH = endY - startY
|
||
const croppedCanvas = document.createElement('canvas')
|
||
croppedCanvas.width = cropW
|
||
croppedCanvas.height = cropH
|
||
const ctx = croppedCanvas.getContext('2d')
|
||
if (ctx) {
|
||
ctx.drawImage(pageData.canvas, startX, startY, cropW, cropH, 0, 0, cropW, cropH)
|
||
ctx.strokeStyle = '#007bff'
|
||
ctx.lineWidth = 3
|
||
ctx.strokeRect(bboxX - startX - 4, bboxY - startY - 4, bboxW + 8, bboxH + 8)
|
||
}
|
||
return (
|
||
<div style={{ marginBottom: '1rem', border: '1px solid #ddd', borderRadius: '6px', overflow: 'hidden' }}>
|
||
<div style={{ fontSize: '0.75rem', color: '#666', padding: '4px 8px', background: '#f8f9fa', borderBottom: '1px solid #ddd' }}>
|
||
Invoice number field from document
|
||
</div>
|
||
<img src={croppedCanvas.toDataURL()} alt="Invoice number field" style={{ width: '100%', height: 'auto', display: 'block' }} />
|
||
</div>
|
||
)
|
||
}
|
||
return null
|
||
})()}
|
||
|
||
{/* Supplier format examples */}
|
||
{invoiceNumberExamples.length > 0 && (
|
||
<div style={{ marginBottom: '1rem', padding: '0.5rem 0.75rem', background: '#f8f9fa', borderRadius: '4px', fontSize: '0.8rem', color: '#555' }}>
|
||
<strong>Format from this supplier:</strong>{' '}
|
||
{invoiceNumberExamples.slice(0, 4).join(', ')}
|
||
</div>
|
||
)}
|
||
|
||
<p style={{ color: '#666', marginBottom: '1rem', fontSize: '0.9rem' }}>
|
||
{invoiceNumberLoading
|
||
? 'Searching document...'
|
||
: invoiceNumberCandidates.length === 0
|
||
? 'No candidates found in document text.'
|
||
: 'Candidates found in the document. Click to use.'}
|
||
</p>
|
||
|
||
{invoiceNumberLoading ? (
|
||
<p style={{ color: '#999', textAlign: 'center', padding: '2rem' }}>Searching for invoice number...</p>
|
||
) : invoiceNumberCandidates.length === 0 ? null : (
|
||
<div style={{ maxHeight: '400px', overflowY: 'auto' }}>
|
||
{invoiceNumberCandidates.map((c, idx) => {
|
||
const snippetUrl = c.bbox ? cropBboxToDataUrl(c.bbox, { padX: 80, padY: 25, strokeColor: '#007bff' }) : null
|
||
return (
|
||
<div
|
||
key={idx}
|
||
onClick={() => handleSelectInvoiceNumber(c.value)}
|
||
style={{
|
||
marginBottom: '0.5rem',
|
||
border: '1px solid #ddd',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
background: '#fff',
|
||
transition: 'all 0.2s',
|
||
overflow: 'hidden',
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.background = '#f0f7ff'
|
||
e.currentTarget.style.borderColor = '#007bff'
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.background = '#fff'
|
||
e.currentTarget.style.borderColor = '#ddd'
|
||
}}
|
||
>
|
||
{snippetUrl && (
|
||
<img
|
||
src={snippetUrl}
|
||
alt="Candidate location in document"
|
||
style={{ width: '100%', height: 'auto', display: 'block', borderBottom: '1px solid #eee' }}
|
||
/>
|
||
)}
|
||
<div style={{ padding: '0.75rem 1rem' }}>
|
||
<div style={{ fontWeight: '600', fontSize: '1.05rem', marginBottom: '0.25rem', fontFamily: 'monospace' }}>
|
||
{c.value}
|
||
</div>
|
||
<div style={{ fontSize: '0.75rem', color: '#999', marginBottom: '0.2rem' }}>
|
||
{c.source === 'ocr_field' ? '📋 Azure OCR field'
|
||
: c.source === 'supplier_pattern' ? '🔗 Matches supplier format'
|
||
: '🔤 Found near reference keyword'}
|
||
</div>
|
||
<div style={{ fontSize: '0.75rem', color: '#888', fontStyle: 'italic' }}>
|
||
...{c.context}...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
<button onClick={() => setShowInvoiceNumberModal(false)} style={styles.closeBtn}>Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Line Item Search Modal */}
|
||
{showSearchModal && searchingLineItem && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowSearchModal(false)}>
|
||
<div style={styles.searchModal} onClick={(e) => e.stopPropagation()}>
|
||
<h3>Compare Similar Items</h3>
|
||
|
||
{/* Current Item - shown at top for comparison */}
|
||
<div style={styles.currentItemSection}>
|
||
<h4 style={styles.currentItemHeader}>Current Item ({suppliers?.find(s => s.id === invoice?.supplier_id)?.name || 'Unknown Supplier'})</h4>
|
||
<table style={styles.searchResultsTable}>
|
||
<thead>
|
||
<tr>
|
||
<th style={styles.searchTh}>Description</th>
|
||
<th style={styles.searchThRight}>Unit Price</th>
|
||
<th style={styles.searchTh}>Unit</th>
|
||
<th style={styles.searchTh}>Pack Info</th>
|
||
<th style={styles.searchTh}>Invoice Date</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style={styles.currentItemRow}>
|
||
<td style={styles.searchTd}>{searchingLineItem.description}</td>
|
||
<td style={styles.searchTdRight}>
|
||
{searchingLineItem.unit_price ? `£${searchingLineItem.unit_price.toFixed(2)}` : '—'}
|
||
</td>
|
||
<td style={styles.searchTd}>{searchingLineItem.unit || '—'}</td>
|
||
<td style={styles.searchTd}>
|
||
{searchingLineItem.pack_quantity && searchingLineItem.unit_size && searchingLineItem.unit_size_type
|
||
? `${searchingLineItem.pack_quantity}x${searchingLineItem.unit_size}${searchingLineItem.unit_size_type}`
|
||
: searchingLineItem.pack_quantity
|
||
? `${searchingLineItem.pack_quantity} pack`
|
||
: '—'}
|
||
</td>
|
||
<td style={styles.searchTd}>{invoice?.invoice_date || '—'}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div style={styles.searchInputRow}>
|
||
<input
|
||
type="text"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
onKeyDown={(e) => e.key === 'Enter' && performSearch(searchQuery)}
|
||
style={styles.searchInput}
|
||
placeholder="Enter search keywords..."
|
||
autoFocus
|
||
/>
|
||
<button
|
||
onClick={() => performSearch(searchQuery)}
|
||
style={styles.searchButton}
|
||
disabled={searchLoading}
|
||
>
|
||
{searchLoading ? 'Searching...' : 'Search'}
|
||
</button>
|
||
</div>
|
||
|
||
{searchResults && (
|
||
<div style={styles.searchResultsContainer}>
|
||
<p style={styles.resultsInfo}>
|
||
Found {searchResults.total_matches} matches
|
||
{searchResults.extracted_keywords && (
|
||
<span style={{ color: '#666' }}> (searched: "{searchResults.extracted_keywords}")</span>
|
||
)}
|
||
</p>
|
||
|
||
{searchResults.results.length === 0 ? (
|
||
<p style={{ color: '#999', fontStyle: 'italic' }}>No matching items found.</p>
|
||
) : (
|
||
searchResults.results.map((group) => (
|
||
<div key={group.supplier_id || 'unknown'} style={styles.supplierGroup}>
|
||
<h4 style={styles.supplierHeader}>{group.supplier_name}</h4>
|
||
<table style={styles.searchResultsTable}>
|
||
<thead>
|
||
<tr>
|
||
<th style={styles.searchTh}>Description</th>
|
||
<th style={styles.searchThRight}>Unit Price</th>
|
||
<th style={styles.searchTh}>Unit</th>
|
||
<th style={styles.searchTh}>Pack Info</th>
|
||
<th style={styles.searchTh}>Last Invoice</th>
|
||
<th style={styles.searchTh}></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{group.items.map((item, idx) => (
|
||
<tr key={idx}>
|
||
<td style={styles.searchTd}>{item.description}</td>
|
||
<td style={styles.searchTdRight}>
|
||
{item.unit_price != null ? `£${item.unit_price.toFixed(2)}` : '—'}
|
||
</td>
|
||
<td style={styles.searchTd}>{item.unit || '—'}</td>
|
||
<td style={styles.searchTd}>{item.pack_info || '—'}</td>
|
||
<td style={styles.searchTd}>{item.last_invoice_date || '—'}</td>
|
||
<td style={styles.searchTd}>
|
||
<a
|
||
href={`/kitchen/invoice/${item.invoice_id}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={styles.invoiceLink}
|
||
title="Open invoice in new tab"
|
||
>
|
||
View
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<button onClick={() => setShowSearchModal(false)} style={styles.closeBtn}>Close</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Bulk Stock Modal */}
|
||
{showBulkStockModal && (
|
||
<div style={styles.modalOverlay} onClick={() => setShowBulkStockModal(false)}>
|
||
<div style={{ ...styles.modal, maxWidth: '400px', textAlign: 'center' }} onClick={(e) => e.stopPropagation()}>
|
||
<h3 style={{ marginBottom: '1rem' }}>Bulk Stock Update</h3>
|
||
<p style={{ marginBottom: '1.5rem', color: '#666' }}>
|
||
Mark all line items on this invoice as:
|
||
</p>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||
<button
|
||
onClick={() => handleBulkStockUpdate(true)}
|
||
style={{
|
||
...styles.saveBtn,
|
||
padding: '1rem',
|
||
background: '#28a745',
|
||
fontSize: '0.95rem'
|
||
}}
|
||
>
|
||
Mark All as Stock
|
||
</button>
|
||
<button
|
||
onClick={() => handleBulkStockUpdate(false)}
|
||
style={{
|
||
...styles.saveBtn,
|
||
padding: '1rem',
|
||
background: '#dc3545',
|
||
fontSize: '0.95rem'
|
||
}}
|
||
>
|
||
Mark All as Non-Stock
|
||
</button>
|
||
<button
|
||
onClick={() => setShowBulkStockModal(false)}
|
||
style={{
|
||
...styles.backBtn,
|
||
padding: '0.75rem',
|
||
marginTop: '0.5rem'
|
||
}}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Price History Modal */}
|
||
{historyModal && (
|
||
<LineItemHistoryModal
|
||
isOpen={historyModal.isOpen}
|
||
onClose={() => setHistoryModal(null)}
|
||
productCode={historyModal.productCode}
|
||
description={historyModal.description}
|
||
unit={historyModal.unit}
|
||
supplierId={historyModal.supplierId}
|
||
supplierName={historyModal.supplierName}
|
||
currentPrice={historyModal.currentPrice}
|
||
sourceInvoiceId={historyModal.sourceInvoiceId}
|
||
sourceLineItemId={historyModal.sourceLineItemId}
|
||
onAcknowledge={() => {
|
||
refetchLineItems()
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Create Dispute Modal */}
|
||
{showDisputeModal && invoice && (
|
||
<CreateDisputeModal
|
||
invoiceId={invoice.id}
|
||
invoiceNumber={invoice.invoice_number}
|
||
supplierId={invoice.supplier_id || null}
|
||
supplierName={invoice.supplier_name || null}
|
||
lineItems={lineItems || []}
|
||
onClose={() => setShowDisputeModal(false)}
|
||
onSuccess={() => {
|
||
refetchInvoice() // Refresh invoice to update dispute count
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Link Credit Note to Dispute Modal */}
|
||
{showLinkDisputeModal && invoice && invoice.supplier_id && (
|
||
<LinkDisputeModal
|
||
supplierId={invoice.supplier_id}
|
||
supplierName={invoice.supplier_name || null}
|
||
creditNoteInvoiceId={invoice.id}
|
||
creditNoteNumber={invoice.invoice_number}
|
||
creditNoteAmount={invoice.total}
|
||
onClose={() => setShowLinkDisputeModal(false)}
|
||
onSuccess={() => {
|
||
setShowLinkDisputeModal(false)
|
||
refetchInvoice() // Refresh to show "Resolved Dispute" button
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* View Dispute Detail Modal */}
|
||
{viewingDisputeId && (
|
||
<DisputeDetailModal
|
||
disputeId={viewingDisputeId}
|
||
onClose={() => setViewingDisputeId(null)}
|
||
onUpdate={() => {
|
||
refetchInvoice() // Refresh invoice to update dispute data
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Description Swap Modal */}
|
||
{descSwapItem && (
|
||
<div style={styles.modalOverlay} onClick={() => setDescSwapItem(null)}>
|
||
<div style={styles.descSwapModal} onClick={(e) => e.stopPropagation()}>
|
||
<h3 style={{ marginBottom: '0.5rem' }}>Choose Description</h3>
|
||
<p style={styles.modalHint}>
|
||
OCR extracted two different descriptions. Select the correct one:
|
||
</p>
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
|
||
{/* Current Description */}
|
||
<div
|
||
style={styles.descriptionOption}
|
||
onClick={() => {
|
||
// Keep current - just close
|
||
setDescSwapItem(null)
|
||
}}
|
||
>
|
||
<div style={{ fontWeight: 'bold', marginBottom: '0.5rem', color: '#666' }}>
|
||
Current (Value)
|
||
</div>
|
||
<div style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||
{descSwapItem.description || '(empty)'}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Alternative Description */}
|
||
<div
|
||
style={{ ...styles.descriptionOption, borderColor: '#e94560' }}
|
||
onClick={async () => {
|
||
// Update to alternative
|
||
await updateLineItemMutation.mutateAsync({
|
||
itemId: descSwapItem.id,
|
||
data: {
|
||
description: descSwapItem.description_alt,
|
||
description_alt: null // Clear alt after swap
|
||
}
|
||
})
|
||
setDescSwapItem(null)
|
||
}}
|
||
>
|
||
<div style={{ fontWeight: 'bold', marginBottom: '0.5rem', color: '#e94560' }}>
|
||
Alternative (Content) ✓ Select
|
||
</div>
|
||
<div style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||
{descSwapItem.description_alt || '(empty)'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setDescSwapItem(null)}
|
||
style={{ ...styles.backBtn, marginTop: '1rem', padding: '0.75rem' }}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* PO View/Edit Modal */}
|
||
<PurchaseOrderModal
|
||
isOpen={viewingPoId !== null}
|
||
onClose={() => setViewingPoId(null)}
|
||
onSaved={() => refetchPoMatch()}
|
||
poId={viewingPoId}
|
||
/>
|
||
|
||
{/* Ingredient Mapping Modal */}
|
||
{ingredientModalItem && (
|
||
<div style={styles.modalOverlay} onClick={closeIngredientModal}>
|
||
<div style={{ ...styles.wideModal, maxWidth: '650px' }} onClick={(e) => e.stopPropagation()}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
|
||
<h3 style={{ margin: 0 }}>Ingredient Mapping</h3>
|
||
<button onClick={closeIngredientModal} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer', color: '#666' }}>×</button>
|
||
</div>
|
||
|
||
{/* Line item context */}
|
||
<div style={{ padding: '0.75rem', background: '#f8f9fa', borderRadius: '6px', marginBottom: '1rem', fontSize: '0.9rem' }}>
|
||
<strong>{ingredientModalItem.description || ingredientModalItem.product_code || 'Unknown item'}</strong>
|
||
{ingredientModalItem.unit_price && <span style={{ marginLeft: '1rem', color: '#666' }}>£{ingredientModalItem.unit_price.toFixed(2)}</span>}
|
||
{ingredientModalItem.raw_content && (
|
||
<div style={{ fontSize: '0.8rem', color: '#999', marginTop: '0.25rem' }}>Raw: {ingredientModalItem.raw_content.substring(0, 80)}</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Ingredient mapping section */}
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<label style={{ fontWeight: '600', fontSize: '0.9rem', display: 'block', marginBottom: '0.5rem' }}>
|
||
Ingredient {selectedIngredientId && <span style={{ color: '#28a745', fontWeight: 'normal' }}>({selectedIngredientName})</span>}
|
||
</label>
|
||
|
||
{selectedIngredientId ? (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem', background: '#d4edda', borderRadius: '6px', border: '1px solid #c3e6cb' }}>
|
||
<span style={{ flex: 1 }}>{selectedIngredientName} <span style={{ color: '#666', fontSize: '0.85rem' }}>({selectedIngredientUnit})</span></span>
|
||
<button
|
||
onClick={() => { setSelectedIngredientId(null); setSelectedIngredientName(''); setSelectedIngredientUnit(''); setIngredientConversionDisplay(''); }}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#666', fontSize: '1.1rem' }}
|
||
>×</button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div style={{ position: 'relative' }}>
|
||
<input
|
||
type="text"
|
||
value={ingredientSearch}
|
||
onChange={(e) => {
|
||
setIngredientSearch(e.target.value)
|
||
searchIngredients(e.target.value)
|
||
}}
|
||
placeholder="Search ingredients..."
|
||
style={{ ...styles.input, width: '100%', boxSizing: 'border-box' }}
|
||
/>
|
||
{ingredientSearchLoading && <span style={{ position: 'absolute', right: '10px', top: '10px', color: '#999' }}>...</span>}
|
||
</div>
|
||
|
||
{/* Suggestions dropdown */}
|
||
{ingredientSuggestions.length > 0 && (
|
||
<div style={{ border: '1px solid #ddd', borderRadius: '0 0 6px 6px', maxHeight: '200px', overflowY: 'auto', background: '#fff' }}>
|
||
{ingredientSuggestions.map((s) => (
|
||
<div
|
||
key={s.id}
|
||
onClick={() => selectIngredient(s)}
|
||
style={{ padding: '0.5rem 0.75rem', cursor: 'pointer', borderBottom: '1px solid #f0f0f0', fontSize: '0.9rem', display: 'flex', justifyContent: 'space-between' }}
|
||
onMouseOver={(e) => (e.currentTarget.style.background = '#f0f7ff')}
|
||
onMouseOut={(e) => (e.currentTarget.style.background = '#fff')}
|
||
>
|
||
<span>{s.name} <span style={{ color: '#999', fontSize: '0.8rem' }}>({s.standard_unit})</span></span>
|
||
<span style={{ color: '#999', fontSize: '0.8rem' }}>{s.category_name || ''} {s.similarity ? `${(s.similarity * 100).toFixed(0)}%` : ''}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* LLM FEATURE — AI Match button + results — see LLM-MANIFEST.md for removal instructions */}
|
||
{settings?.llm_enabled && settings?.anthropic_api_key_set && ingredientModalItem?.description && !selectedIngredientId && (
|
||
<div style={{ marginTop: '0.5rem' }}>
|
||
<button
|
||
onClick={() => handleAiMatch(ingredientModalItem!.description!)}
|
||
disabled={aiMatchLoading}
|
||
style={{ padding: '0.4rem 0.75rem', background: '#7952b3', color: 'white', border: 'none', borderRadius: '4px', cursor: aiMatchLoading ? 'wait' : 'pointer', fontSize: '0.85rem', opacity: aiMatchLoading ? 0.7 : 1 }}
|
||
>
|
||
{aiMatchLoading ? 'Matching...' : '\u2728 AI Match'}
|
||
</button>
|
||
{aiMatchResults.length > 0 && (
|
||
<div style={{ border: '1px solid #d4c5f9', borderRadius: '6px', marginTop: '0.35rem', maxHeight: '160px', overflowY: 'auto', background: '#f8f5ff' }}>
|
||
{aiMatchResults.map((m) => (
|
||
<div
|
||
key={m.id}
|
||
onClick={() => {
|
||
const found = ingredientSuggestions.find(s => s.id === m.id)
|
||
if (found) selectIngredient(found)
|
||
else { setSelectedIngredientId(m.id); setSelectedIngredientName(m.name); setSelectedIngredientUnit(''); }
|
||
setAiMatchResults([])
|
||
}}
|
||
style={{ padding: '0.4rem 0.75rem', cursor: 'pointer', borderBottom: '1px solid #e8e0f7', fontSize: '0.85rem', display: 'flex', justifyContent: 'space-between' }}
|
||
onMouseOver={(e) => (e.currentTarget.style.background = '#ede5ff')}
|
||
onMouseOut={(e) => (e.currentTarget.style.background = '#f8f5ff')}
|
||
>
|
||
<span>{'\u2728'} {m.name}</span>
|
||
<span style={{ color: '#7952b3', fontSize: '0.8rem' }}>{(m.confidence * 100).toFixed(0)}%</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Create new ingredient */}
|
||
<button
|
||
onClick={() => setShowCreateIngredient(true)}
|
||
style={{ marginTop: '0.5rem', padding: '0.4rem 0.75rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '0.85rem' }}
|
||
>
|
||
+ Create new ingredient
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Invoice → Ingredient conversion */}
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<label style={{ fontWeight: '600', fontSize: '0.9rem', display: 'block', marginBottom: '0.25rem' }}>
|
||
{selectedIngredientId ? `How much ${selectedIngredientName} is in this line item?` : 'Unit size & pricing'}
|
||
</label>
|
||
<div style={{ fontSize: '0.8rem', color: '#888', marginBottom: '0.5rem' }}>
|
||
{ingredientModalItem?.description}{ingredientModalItem?.unit_price ? ` @ £${ingredientModalItem.unit_price.toFixed(2)}` : ''}
|
||
{ingredientModalItem?.quantity && ingredientModalItem.quantity > 1 ? ` × ${ingredientModalItem.quantity}` : ''}
|
||
</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'flex-end' }}>
|
||
<div style={styles.costBreakdownField}>
|
||
<label style={{ fontSize: '0.8rem', color: '#666' }}>
|
||
Contains
|
||
{/* LLM FEATURE */}
|
||
{aiPackSizeLoading && <span style={{ marginLeft: '4px', fontSize: '0.7rem', color: '#7952b3' }}>analysing...</span>}
|
||
{aiPackSizeSource === 'ai' && <span style={{ marginLeft: '4px', fontSize: '0.7rem', color: '#7952b3' }} title="Deduced by AI from product knowledge">{'\u2728'}</span>}
|
||
{aiPackSizeSource === 'regex' && <span style={{ marginLeft: '4px', fontSize: '0.7rem', color: '#28a745' }} title="Parsed from description">auto</span>}
|
||
{aiPackSizeSource === 'unit_field' && <span style={{ marginLeft: '4px', fontSize: '0.7rem', color: '#28a745' }} title="Inferred from invoice unit field">auto</span>}
|
||
</label>
|
||
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
|
||
<input
|
||
type="number" step="0.1"
|
||
value={costBreakdownEdits.unit_size || ''}
|
||
onChange={(e) => { const v = { ...costBreakdownEdits, unit_size: parseFloat(e.target.value) || null }; setCostBreakdownEdits(v); updateConversionDisplay(undefined, v) }}
|
||
onFocus={(e) => e.target.select()}
|
||
style={{ ...styles.costBreakdownInput, width: '70px' }}
|
||
placeholder="e.g., 2"
|
||
/>
|
||
<select
|
||
value={costBreakdownEdits.unit_size_type || selectedIngredientUnit || ''}
|
||
onChange={(e) => { const v = { ...costBreakdownEdits, unit_size_type: e.target.value || null }; setCostBreakdownEdits(v); updateConversionDisplay(undefined, v) }}
|
||
style={{ ...styles.costBreakdownInput, width: '60px' }}
|
||
>
|
||
<option value="">--</option>
|
||
<option value="each">each</option>
|
||
<option value="g">g</option>
|
||
<option value="kg">kg</option>
|
||
<option value="ml">ml</option>
|
||
<option value="ltr">ltr</option>
|
||
<option value="oz">oz</option>
|
||
<option value="cl">cl</option>
|
||
</select>
|
||
{selectedIngredientUnit && costBreakdownEdits.unit_size_type && costBreakdownEdits.unit_size_type !== selectedIngredientUnit && (
|
||
<span style={{ fontSize: '0.75rem', color: '#999' }}>→ {selectedIngredientUnit}</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div style={styles.costBreakdownField}>
|
||
<label style={{ fontSize: '0.8rem', color: '#666' }}>Pack of</label>
|
||
<input
|
||
type="number"
|
||
value={costBreakdownEdits.pack_quantity || ''}
|
||
onChange={(e) => { const v = { ...costBreakdownEdits, pack_quantity: parseInt(e.target.value) || null }; setCostBreakdownEdits(v); updateConversionDisplay(undefined, v) }}
|
||
onFocus={(e) => e.target.select()}
|
||
style={{ ...styles.costBreakdownInput, width: '50px' }}
|
||
placeholder="1"
|
||
/>
|
||
</div>
|
||
<div style={styles.costBreakdownField}>
|
||
<label style={{ fontSize: '0.8rem', color: '#666' }}>Line Price</label>
|
||
<span style={{ ...styles.costBreakdownValue, fontSize: '0.9rem' }}>
|
||
{costBreakdownEdits.unit_price ? `£${costBreakdownEdits.unit_price.toFixed(2)}` : '--'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{ingredientConversionDisplay && (
|
||
<div style={{ marginTop: '0.5rem', padding: '0.5rem 0.75rem', background: '#e8f5e9', borderRadius: '6px', fontSize: '0.9rem', color: '#2e7d32', fontWeight: '500' }}>
|
||
{ingredientConversionDisplay}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Legacy portioning (collapsible) */}
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<button
|
||
onClick={() => setShowLegacyPortioning(!showLegacyPortioning)}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '0.85rem', color: '#666', padding: 0 }}
|
||
>
|
||
{showLegacyPortioning ? '▾' : '▸'} Legacy Portioning
|
||
</button>
|
||
{showLegacyPortioning && (
|
||
<div style={{ marginTop: '0.5rem', padding: '0.75rem', background: '#f8f9fa', borderRadius: '6px', border: '1px solid #e0e0e0' }}>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
|
||
<div style={styles.costBreakdownField}>
|
||
<label style={{ fontSize: '0.8rem', color: '#666' }}>Portions/Unit</label>
|
||
<input
|
||
type="number"
|
||
value={costBreakdownEdits.portions_per_unit ?? ''}
|
||
onChange={(e) => setCostBreakdownEdits({ ...costBreakdownEdits, portions_per_unit: e.target.value ? parseInt(e.target.value) : null })}
|
||
style={styles.costBreakdownInput} min="1" placeholder="--"
|
||
/>
|
||
</div>
|
||
<div style={{ ...styles.costBreakdownField, minWidth: '150px' }}>
|
||
<label style={{ fontSize: '0.8rem', color: '#666' }}>Portion Desc</label>
|
||
<input
|
||
type="text" value={portionDescription}
|
||
onChange={(e) => setPortionDescription(e.target.value)}
|
||
style={{ ...styles.costBreakdownInput, width: '100%' }}
|
||
placeholder="e.g., 250ml glass"
|
||
/>
|
||
</div>
|
||
<div style={styles.costBreakdownField}>
|
||
<label style={{ fontSize: '0.8rem', color: '#666' }}>Cost/Portion</label>
|
||
<span style={{ ...styles.costBreakdownValue, color: '#28a745', fontWeight: '600', fontSize: '0.9rem' }}>
|
||
{costBreakdownEdits.pack_quantity && costBreakdownEdits.unit_price && costBreakdownEdits.portions_per_unit
|
||
? `£${(costBreakdownEdits.unit_price / (costBreakdownEdits.pack_quantity * costBreakdownEdits.portions_per_unit)).toFixed(4)}`
|
||
: '--'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Save as default */}
|
||
{(ingredientModalItem.product_code || ingredientModalItem.description) && (
|
||
<>
|
||
{definitionLoading ? (
|
||
<div style={{ fontSize: '0.85rem', color: '#666', marginBottom: '0.5rem' }}>Loading saved default...</div>
|
||
) : currentDefinition ? (
|
||
<div style={{ ...styles.savedByInfo, marginBottom: '0.5rem' }}>
|
||
<span style={{ fontSize: '0.85rem' }}>
|
||
Definition by <strong>{currentDefinition.saved_by_username || 'Unknown'}</strong>
|
||
{currentDefinition.updated_at && <> on {new Date(currentDefinition.updated_at).toLocaleDateString()}</>}
|
||
</span>
|
||
</div>
|
||
) : null}
|
||
{!selectedIngredientId && (
|
||
<div style={{ ...styles.saveAsDefaultRow, marginBottom: '1rem' }}>
|
||
<label style={styles.saveAsDefaultLabel}>
|
||
<input type="checkbox" checked={saveAsDefault} onChange={(e) => setSaveAsDefault(e.target.checked)} style={{ marginRight: '0.5rem' }} />
|
||
{currentDefinition ? 'Update saved default' : `Save as default for "${ingredientModalItem.product_code || ingredientModalItem.description?.substring(0, 30)}"`}
|
||
</label>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Actions */}
|
||
<div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'flex-end' }}>
|
||
<button onClick={closeIngredientModal} style={{ ...styles.smallBtnCancel, padding: '0.5rem 1.25rem' }}>Cancel</button>
|
||
<button onClick={() => saveCostBreakdown(ingredientModalItem.id)} style={{ ...styles.smallBtn, padding: '0.5rem 1.25rem' }}>
|
||
{selectedIngredientId ? 'Save & Map Ingredient' : (saveAsDefault ? 'Save & Update Default' : 'Save')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<IngredientModal
|
||
open={showCreateIngredient}
|
||
onClose={() => setShowCreateIngredient(false)}
|
||
onSaved={handleIngredientCreated}
|
||
prePopulateName={ingredientSearch || ingredientModalItem?.description?.split('\n')[0] || ''}
|
||
preSelectLineItem={ingredientModalItem ? {
|
||
product_code: ingredientModalItem.product_code,
|
||
description: ingredientModalItem.description?.split('\n')[0] || '',
|
||
supplier_id: invoice?.supplier_id || null,
|
||
supplier_name: invoice?.supplier_name || null,
|
||
unit: ingredientModalItem.unit,
|
||
most_recent_price: ingredientModalItem.unit_price,
|
||
total_quantity: ingredientModalItem.quantity,
|
||
occurrence_count: 1,
|
||
most_recent_invoice_id: Number(id),
|
||
most_recent_line_number: ingredientModalItem.line_number,
|
||
most_recent_pack_quantity: ingredientModalItem.pack_quantity,
|
||
most_recent_unit_size: ingredientModalItem.unit_size,
|
||
most_recent_unit_size_type: ingredientModalItem.unit_size_type,
|
||
ingredient_id: ingredientModalItem.ingredient_id || null,
|
||
ingredient_name: ingredientModalItem.ingredient_name || null,
|
||
} as LineItemResult : null}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const styles: Record<string, React.CSSProperties> = {
|
||
loading: { padding: '2rem', textAlign: 'center', color: '#666' },
|
||
error: { padding: '2rem', textAlign: 'center', color: '#c00' },
|
||
pageContainer: { display: 'flex', flexDirection: 'column', gap: '1.5rem' },
|
||
topRow: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' },
|
||
imageSection: { background: 'white', padding: '1.5rem', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.08)', overflow: 'hidden', minWidth: 0 },
|
||
imageZoomControls: { display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '1rem', justifyContent: 'center' },
|
||
zoomBtn: { padding: '0.5rem 0.75rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '6px', cursor: 'pointer', fontSize: '1rem', fontWeight: 'bold', minWidth: '36px' },
|
||
zoomLabel: { fontSize: '0.9rem', color: '#666', minWidth: '50px', textAlign: 'center' },
|
||
zoomResetBtnSmall: { padding: '0.4rem 0.75rem', background: '#fff3cd', border: '1px solid #ffc107', borderRadius: '6px', cursor: 'pointer', fontSize: '0.85rem', fontWeight: '500' },
|
||
imageScrollContainer: { marginTop: '0.5rem', maxHeight: '70vh', maxWidth: '100%', overflow: 'auto', background: '#f5f5f5', borderRadius: '8px', padding: '8px' },
|
||
imageContainer: { position: 'relative' },
|
||
image: { width: '100%', borderRadius: '8px', display: 'block' },
|
||
pdfScrollContainer: { marginTop: '1rem', maxHeight: '70vh', overflow: 'auto', background: '#e5e5e5', borderRadius: '8px', padding: '16px' },
|
||
pdfPageWrapper: { marginBottom: '16px' },
|
||
pdfPageContainer: { position: 'relative', margin: '0 auto', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' },
|
||
pdfPageImage: { width: '100%', height: '100%', display: 'block' },
|
||
pageLabel: { textAlign: 'center', fontSize: '0.8rem', color: '#666', marginTop: '4px' },
|
||
pdfCanvas: { width: '100%', borderRadius: '8px', display: 'block' },
|
||
highlightOverlay: { position: 'absolute', background: 'rgba(255, 200, 0, 0.3)', borderRadius: '2px', cursor: 'pointer', boxShadow: '0 0 8px rgba(255, 200, 0, 0.6)', animation: 'pulse 1.5s infinite' },
|
||
imagePlaceholder: { width: '100%', height: '300px', background: '#f5f5f5', borderRadius: '8px', marginTop: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' },
|
||
pdfViewer: { width: '100%', height: '500px', borderRadius: '8px', border: 'none' },
|
||
openPdfLink: { display: 'block', marginTop: '0.5rem', textAlign: 'center', color: '#0066cc', fontSize: '0.85rem' },
|
||
zoomResetBtn: { display: 'block', margin: '0.5rem auto', padding: '0.4rem 1rem', background: '#fff3cd', border: '1px solid #ffc107', borderRadius: '6px', cursor: 'pointer', fontSize: '0.85rem', fontWeight: '500' },
|
||
confidenceBadge: { marginTop: '1rem', padding: '0.5rem 1rem', background: '#f0f0f0', borderRadius: '20px', textAlign: 'center', fontSize: '0.9rem', color: '#666' },
|
||
formSection: { background: 'white', padding: '1.5rem', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.08)' },
|
||
duplicateWarning: { padding: '1rem', borderRadius: '8px', marginBottom: '1rem', cursor: 'pointer', borderWidth: '1px', borderStyle: 'solid', fontWeight: '500' },
|
||
form: { display: 'flex', flexDirection: 'column', gap: '0.75rem' },
|
||
row: { display: 'flex', gap: '1rem' },
|
||
label: { display: 'flex', flexDirection: 'column', gap: '0.25rem', color: '#333', fontWeight: '500', fontSize: '0.9rem' },
|
||
input: { padding: '0.5rem', borderRadius: '6px', border: '1px solid #ddd', fontSize: '0.95rem', flex: 1 },
|
||
inputWithEye: { display: 'flex', gap: '0.5rem', alignItems: 'center' },
|
||
eyeBtn: { padding: '0.4rem 0.5rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '6px', cursor: 'pointer', fontSize: '0.9rem', lineHeight: 1, flexShrink: 0 },
|
||
eyeBtnActive: { background: '#fff3cd', border: '1px solid #ffc107' },
|
||
extractedHint: { fontSize: '0.8rem', color: '#666', fontWeight: 'normal', fontStyle: 'italic' },
|
||
extractedHintRow: { display: 'flex', alignItems: 'center', gap: '0.75rem', marginTop: '0.25rem', flexWrap: 'wrap' },
|
||
fuzzyMatchWarning: { fontSize: '0.8rem', color: '#856404', background: '#fff3cd', padding: '0.35rem 0.5rem', borderRadius: '4px', marginTop: '0.25rem', border: '1px solid #ffc107', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem', flexWrap: 'wrap' },
|
||
addAliasBtn: { padding: '0.2rem 0.5rem', background: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '0.75rem', fontWeight: '500', whiteSpace: 'nowrap' },
|
||
supplierRow: { display: 'flex', gap: '0.5rem', alignItems: 'center' },
|
||
createSupplierBtn: { padding: '0.5rem 0.75rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '6px', cursor: 'pointer', fontSize: '0.85rem', whiteSpace: 'nowrap' },
|
||
createFromExtractedBtn: { padding: '0.25rem 0.5rem', background: '#e94560', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '0.75rem', fontWeight: 'normal' },
|
||
modalLabel: { display: 'flex', flexDirection: 'column', gap: '0.5rem', color: '#333', fontWeight: '500', marginTop: '1rem' },
|
||
lineItemsSection: { background: 'white', padding: '1.5rem', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.08)' },
|
||
lineItemsTableContainer: { maxHeight: '60vh', overflowY: 'auto', overflowX: 'auto', border: '1px solid #eee', borderRadius: '8px', position: 'relative' } as React.CSSProperties,
|
||
stickyThead: { position: 'sticky', top: 0, zIndex: 2, borderBottom: '2px solid #ddd' } as React.CSSProperties,
|
||
stickyPageIndicatorCell: { background: '#e9ecef', padding: '0.3rem 1rem', textAlign: 'center', fontSize: '0.85rem', fontWeight: '500', color: '#495057' } as React.CSSProperties,
|
||
lineItemsTable: { width: '100%', borderCollapse: 'collapse', fontSize: '0.95rem' },
|
||
th: { textAlign: 'left', padding: '0.75rem 0.5rem', fontWeight: '600', background: '#f8f9fa' } as React.CSSProperties,
|
||
pageBreakRow: { background: '#f8f9fa' },
|
||
pageBreakCell: { textAlign: 'center', padding: '0.5rem', color: '#6c757d', fontSize: '0.85rem', fontStyle: 'italic', borderBottom: '1px dashed #dee2e6', borderTop: '1px dashed #dee2e6' } as React.CSSProperties,
|
||
td: { padding: '0.75rem 0.5rem', borderBottom: '1px solid #eee', verticalAlign: 'middle' },
|
||
tableInput: { padding: '0.35rem', borderRadius: '4px', border: '1px solid #ddd', fontSize: '0.9rem', width: '100%' },
|
||
smallBtn: { padding: '0.35rem 0.75rem', background: '#5cb85c', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', marginRight: '0.25rem', fontSize: '0.8rem' },
|
||
smallBtnCancel: { padding: '0.35rem 0.75rem', background: '#999', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '0.8rem' },
|
||
editBtn: { padding: '0.35rem 0.75rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '0.8rem' },
|
||
iconBtn: { padding: '0.35rem 0.5rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: '32px', height: '32px' },
|
||
noItems: { color: '#999', fontStyle: 'italic', marginTop: '0.5rem' },
|
||
status: { marginTop: '1rem', padding: '0.75rem', background: '#f5f5f5', borderRadius: '6px', color: '#666', fontSize: '0.9rem' },
|
||
docTypeBadge: { marginLeft: '1rem', padding: '0.25rem 0.5rem', background: '#17a2b8', color: 'white', borderRadius: '4px', fontSize: '0.75rem' },
|
||
actions: { display: 'flex', gap: '0.75rem', marginTop: '1rem' },
|
||
saveBtn: { flex: 1, padding: '1.25rem', background: '#1a1a2e', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 'bold', fontSize: '1rem' },
|
||
confirmBtn: { flex: 1, padding: '1.25rem', background: '#5cb85c', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 'bold', fontSize: '1rem' },
|
||
secondaryActions: { display: 'flex', gap: '0.75rem', marginTop: '0.75rem' },
|
||
deleteBtn: { flex: 1, padding: '0.5rem', background: '#dc3545', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontSize: '0.85rem' },
|
||
rawOcrBtn: { flex: 1, padding: '0.5rem', background: '#6c757d', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontSize: '0.85rem' },
|
||
backBtn: { marginTop: '0.5rem', padding: '0.5rem', background: 'transparent', border: 'none', color: '#666', cursor: 'pointer', width: '100%', fontSize: '0.9rem' },
|
||
modalOverlay: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 },
|
||
modal: { background: 'white', padding: '2rem', borderRadius: '12px', maxWidth: '400px', width: '90%' },
|
||
wideModal: { background: 'white', padding: '2rem', borderRadius: '12px', maxWidth: '800px', width: '90%', maxHeight: '80vh', overflowY: 'auto' },
|
||
modalInfo: { margin: '1rem 0', padding: '1rem', background: '#f5f5f5', borderRadius: '8px' },
|
||
modalDuplicateInfo: { padding: '0.75rem', background: '#d4edda', borderRadius: '6px', marginBottom: '1rem', color: '#155724', fontSize: '0.9rem' },
|
||
modalActions: { display: 'flex', gap: '1rem', marginTop: '1.5rem' },
|
||
cancelBtn: { flex: 1, padding: '0.75rem', background: '#f0f0f0', border: 'none', borderRadius: '6px', cursor: 'pointer' },
|
||
confirmDeleteBtn: { flex: 1, padding: '0.75rem', background: '#dc3545', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 'bold' },
|
||
compareGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem', marginTop: '1rem' },
|
||
compareCard: { padding: '1rem', border: '2px solid #ddd', borderRadius: '8px' },
|
||
viewBtn: { marginTop: '0.5rem', padding: '0.5rem', background: '#1a1a2e', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', width: '100%', fontSize: '0.85rem' },
|
||
closeBtn: { marginTop: '1.5rem', padding: '0.75rem 2rem', background: '#1a1a2e', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer' },
|
||
rawOcrModal: { background: 'white', padding: '2rem', borderRadius: '12px', maxWidth: '900px', width: '95%', maxHeight: '85vh', overflowY: 'auto' },
|
||
rawOcrHint: { color: '#666', fontSize: '0.9rem', marginBottom: '1rem' },
|
||
rawOcrContent: { marginTop: '1rem' },
|
||
rawOcrDoc: { marginBottom: '1.5rem', padding: '1rem', background: '#f8f9fa', borderRadius: '8px' },
|
||
rawOcrTable: { width: '100%', borderCollapse: 'collapse', marginTop: '0.5rem', fontSize: '0.85rem' },
|
||
rawOcrTh: { textAlign: 'left', padding: '0.5rem', borderBottom: '2px solid #ddd', fontWeight: '600', background: '#e9ecef' },
|
||
rawOcrTd: { padding: '0.5rem', borderBottom: '1px solid #eee', verticalAlign: 'top', wordBreak: 'break-word', maxWidth: '300px' },
|
||
lineItemPreviewCell: { padding: '0.5rem', background: '#f8f9fa', borderBottom: '1px solid #eee', textAlign: 'center' },
|
||
lineItemPreviewContainer: { width: '100%', overflow: 'hidden', display: 'inline-block' },
|
||
lineItemPreviewCrop: { width: '100%', backgroundRepeat: 'no-repeat' },
|
||
scaleBtn: { padding: '0.25rem', background: 'transparent', borderWidth: '1px', borderStyle: 'solid', borderColor: '#ddd', borderRadius: '4px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666' },
|
||
scaleBtnActive: { background: '#e8f5e9', borderColor: '#28a745' },
|
||
costBreakdownCell: { padding: '0', background: '#f8f9fa', borderBottom: '1px solid #ddd' },
|
||
costBreakdownContainer: { padding: '1rem', margin: '0.5rem', background: '#fff', borderRadius: '8px', border: '1px solid #e0e0e0', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' },
|
||
costBreakdownHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', paddingBottom: '0.5rem', borderBottom: '1px solid #eee' },
|
||
rawContentHint: { fontSize: '0.75rem', color: '#999', fontStyle: 'italic', maxWidth: '400px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
|
||
costBreakdownGrid: { display: 'flex', flexWrap: 'wrap', gap: '1rem', marginBottom: '1rem' },
|
||
costBreakdownField: { display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: '70px' },
|
||
costBreakdownInput: { padding: '0.4rem', borderRadius: '4px', border: '1px solid #ddd', fontSize: '0.9rem', width: '70px', MozAppearance: 'textfield', appearance: 'textfield' } as React.CSSProperties,
|
||
costBreakdownValue: { fontSize: '0.95rem', padding: '0.4rem 0' },
|
||
costBreakdownActions: { display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', paddingTop: '0.5rem', borderTop: '1px solid #eee' },
|
||
saveAsDefaultRow: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.75rem', marginBottom: '0.5rem', background: '#f8f9fa', borderRadius: '6px', border: '1px solid #e0e0e0' },
|
||
saveAsDefaultLabel: { display: 'flex', alignItems: 'center', fontSize: '0.9rem', cursor: 'pointer', fontWeight: '500' },
|
||
saveAsDefaultHint: { fontSize: '0.75rem', color: '#666', fontStyle: 'italic' },
|
||
savedByInfo: { display: 'flex', alignItems: 'center', padding: '0.6rem 0.75rem', marginBottom: '0.5rem', background: '#e8f4fd', borderRadius: '6px', border: '1px solid #b8daff', fontSize: '0.85rem', color: '#004085' },
|
||
// Search modal styles
|
||
searchBtn: { padding: '0.25rem 0.5rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '0.85rem', marginRight: '0.25rem' },
|
||
searchModal: { background: 'white', padding: '2rem', borderRadius: '12px', maxWidth: '900px', width: '95%', maxHeight: '85vh', overflowY: 'auto' },
|
||
searchContext: { color: '#666', marginBottom: '1rem', fontSize: '0.9rem' },
|
||
searchInputRow: { display: 'flex', gap: '0.5rem', marginBottom: '1rem' },
|
||
searchInput: { flex: 1, padding: '0.75rem', borderRadius: '6px', border: '1px solid #ddd', fontSize: '1rem' },
|
||
searchButton: { padding: '0.75rem 1.5rem', background: '#1a1a2e', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: '500' },
|
||
searchResultsContainer: { marginTop: '1rem', maxHeight: '50vh', overflowY: 'auto' },
|
||
resultsInfo: { color: '#333', fontSize: '0.9rem', marginBottom: '1rem' },
|
||
supplierGroup: { marginBottom: '1.5rem', padding: '1rem', background: '#f8f9fa', borderRadius: '8px' },
|
||
supplierHeader: { margin: '0 0 0.75rem', color: '#1a1a2e', fontSize: '1rem' },
|
||
searchResultsTable: { width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' },
|
||
searchTh: { textAlign: 'left', padding: '0.5rem', borderBottom: '2px solid #ddd', fontWeight: '600', background: '#e9ecef' },
|
||
searchThRight: { textAlign: 'right', padding: '0.5rem', borderBottom: '2px solid #ddd', fontWeight: '600', background: '#e9ecef' },
|
||
searchTd: { padding: '0.5rem', borderBottom: '1px solid #eee' },
|
||
searchTdRight: { padding: '0.5rem', borderBottom: '1px solid #eee', textAlign: 'right' },
|
||
currentItemSection: { marginBottom: '1.5rem', padding: '1rem', background: '#e8f4f8', borderRadius: '8px', border: '2px solid #2196f3' },
|
||
currentItemHeader: { margin: '0 0 0.75rem', color: '#1565c0', fontSize: '1rem', fontWeight: '600' },
|
||
currentItemRow: { background: '#fff' },
|
||
invoiceLink: { color: '#1976d2', textDecoration: 'none', fontSize: '0.8rem', padding: '0.2rem 0.5rem', background: '#e3f2fd', borderRadius: '4px' },
|
||
// Error banner styles
|
||
errorBanner: { display: 'flex', gap: '1rem', padding: '1rem 1.5rem', marginBottom: '1.5rem', background: '#fff3cd', border: '2px solid #ffc107', borderRadius: '8px', color: '#856404' },
|
||
errorBannerIcon: { fontSize: '2rem', flexShrink: 0 },
|
||
errorBannerContent: { flex: 1 },
|
||
// Description swap modal styles
|
||
descSwapModal: { background: 'white', padding: '2rem', borderRadius: '12px', maxWidth: '600px', width: '90%', maxHeight: '80vh', overflowY: 'auto' },
|
||
descriptionOption: { padding: '1rem', borderRadius: '8px', background: '#f9f9f9', border: '2px solid #ccc', cursor: 'pointer', transition: 'background 0.2s' },
|
||
modalHint: { color: '#666', fontSize: '0.9rem', margin: 0 },
|
||
}
|