678 lines
24 KiB
TypeScript
678 lines
24 KiB
TypeScript
|
// ================================================================
|
|||
|
|
// frontend/src/components/dashboard/StockReceiptModal.tsx
|
|||
|
|
// ================================================================
|
|||
|
|
/**
|
|||
|
|
* Stock Receipt Modal - Lot-Level Tracking
|
|||
|
|
*
|
|||
|
|
* Complete workflow for receiving deliveries with lot-level expiration tracking.
|
|||
|
|
* Critical for food safety compliance.
|
|||
|
|
*
|
|||
|
|
* Features:
|
|||
|
|
* - Multi-line item support (one per ingredient)
|
|||
|
|
* - Lot splitting (e.g., 50kg → 2×25kg lots with different expiration dates)
|
|||
|
|
* - Mandatory expiration dates
|
|||
|
|
* - Quantity validation (lot quantities must sum to actual quantity)
|
|||
|
|
* - Discrepancy tracking (expected vs actual)
|
|||
|
|
* - Draft save functionality
|
|||
|
|
* - Warehouse location tracking
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import {
|
|||
|
|
X,
|
|||
|
|
Plus,
|
|||
|
|
Trash2,
|
|||
|
|
Save,
|
|||
|
|
CheckCircle,
|
|||
|
|
AlertTriangle,
|
|||
|
|
Package,
|
|||
|
|
Calendar,
|
|||
|
|
MapPin,
|
|||
|
|
FileText,
|
|||
|
|
Truck,
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import { Button } from '../ui/Button';
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// Types
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
export interface StockLot {
|
|||
|
|
id?: string;
|
|||
|
|
lot_number?: string;
|
|||
|
|
supplier_lot_number?: string;
|
|||
|
|
quantity: number;
|
|||
|
|
unit_of_measure: string;
|
|||
|
|
expiration_date: string; // ISO date string (YYYY-MM-DD)
|
|||
|
|
best_before_date?: string;
|
|||
|
|
warehouse_location?: string;
|
|||
|
|
storage_zone?: string;
|
|||
|
|
quality_notes?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface StockReceiptLineItem {
|
|||
|
|
id?: string;
|
|||
|
|
ingredient_id: string;
|
|||
|
|
ingredient_name: string;
|
|||
|
|
po_line_id?: string;
|
|||
|
|
expected_quantity: number;
|
|||
|
|
actual_quantity: number;
|
|||
|
|
unit_of_measure: string;
|
|||
|
|
has_discrepancy: boolean;
|
|||
|
|
discrepancy_reason?: string;
|
|||
|
|
unit_cost?: number;
|
|||
|
|
total_cost?: number;
|
|||
|
|
lots: StockLot[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface StockReceipt {
|
|||
|
|
id?: string;
|
|||
|
|
tenant_id: string;
|
|||
|
|
po_id: string;
|
|||
|
|
po_number?: string;
|
|||
|
|
received_at?: string;
|
|||
|
|
received_by_user_id: string;
|
|||
|
|
status?: 'draft' | 'confirmed' | 'cancelled';
|
|||
|
|
supplier_id?: string;
|
|||
|
|
supplier_name?: string;
|
|||
|
|
notes?: string;
|
|||
|
|
has_discrepancies?: boolean;
|
|||
|
|
line_items: StockReceiptLineItem[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface StockReceiptModalProps {
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
receipt: Partial<StockReceipt>;
|
|||
|
|
mode?: 'create' | 'edit';
|
|||
|
|
onSaveDraft?: (receipt: StockReceipt) => Promise<void>;
|
|||
|
|
onConfirm?: (receipt: StockReceipt) => Promise<void>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// Helper Functions
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
function calculateLotQuantitySum(lots: StockLot[]): number {
|
|||
|
|
return lots.reduce((sum, lot) => sum + (lot.quantity || 0), 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hasDiscrepancy(expected: number, actual: number): boolean {
|
|||
|
|
return Math.abs(expected - actual) > 0.01;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// Sub-Components
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
interface LotInputProps {
|
|||
|
|
lot: StockLot;
|
|||
|
|
lineItemUoM: string;
|
|||
|
|
onChange: (updatedLot: StockLot) => void;
|
|||
|
|
onRemove: () => void;
|
|||
|
|
canRemove: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function LotInput({ lot, lineItemUoM, onChange, onRemove, canRemove }: LotInputProps) {
|
|||
|
|
const { t } = useTranslation('inventory');
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="p-4 rounded-lg border-2"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-secondary)',
|
|||
|
|
borderColor: 'var(--border-secondary)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* Lot Header */}
|
|||
|
|
<div className="flex items-center justify-between mb-3">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Package className="w-4 h-4" style={{ color: 'var(--color-info)' }} />
|
|||
|
|
<span className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
{t('lot_details')}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
{canRemove && (
|
|||
|
|
<button
|
|||
|
|
onClick={onRemove}
|
|||
|
|
className="p-1 rounded hover:bg-red-100 transition-colors"
|
|||
|
|
style={{ color: 'var(--color-error)' }}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|||
|
|
{/* Quantity (Required) */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('quantity')} ({lineItemUoM}) *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
step="0.01"
|
|||
|
|
min="0"
|
|||
|
|
value={lot.quantity || ''}
|
|||
|
|
onChange={(e) => onChange({ ...lot, quantity: parseFloat(e.target.value) || 0 })}
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Expiration Date (Required) */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
<Calendar className="w-3 h-3 inline mr-1" />
|
|||
|
|
{t('expiration_date')} *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={lot.expiration_date || ''}
|
|||
|
|
onChange={(e) => onChange({ ...lot, expiration_date: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Lot Number (Optional) */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('lot_number')}
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={lot.lot_number || ''}
|
|||
|
|
onChange={(e) => onChange({ ...lot, lot_number: e.target.value })}
|
|||
|
|
placeholder="LOT-2024-001"
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Supplier Lot Number (Optional) */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('supplier_lot_number')}
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={lot.supplier_lot_number || ''}
|
|||
|
|
onChange={(e) => onChange({ ...lot, supplier_lot_number: e.target.value })}
|
|||
|
|
placeholder="SUPP-LOT-123"
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Warehouse Location (Optional) */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
<MapPin className="w-3 h-3 inline mr-1" />
|
|||
|
|
{t('warehouse_location')}
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={lot.warehouse_location || ''}
|
|||
|
|
onChange={(e) => onChange({ ...lot, warehouse_location: e.target.value })}
|
|||
|
|
placeholder="A-01-03"
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Storage Zone (Optional) */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('storage_zone')}
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={lot.storage_zone || ''}
|
|||
|
|
onChange={(e) => onChange({ ...lot, storage_zone: e.target.value })}
|
|||
|
|
placeholder="Cold Storage"
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Quality Notes (Optional, full width) */}
|
|||
|
|
<div className="mt-3">
|
|||
|
|
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
<FileText className="w-3 h-3 inline mr-1" />
|
|||
|
|
{t('quality_notes')}
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={lot.quality_notes || ''}
|
|||
|
|
onChange={(e) => onChange({ ...lot, quality_notes: e.target.value })}
|
|||
|
|
placeholder={t('quality_notes_placeholder')}
|
|||
|
|
rows={2}
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border resize-none"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// Main Component
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
export function StockReceiptModal({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
receipt: initialReceipt,
|
|||
|
|
mode = 'create',
|
|||
|
|
onSaveDraft,
|
|||
|
|
onConfirm,
|
|||
|
|
}: StockReceiptModalProps) {
|
|||
|
|
const { t } = useTranslation(['inventory', 'common']);
|
|||
|
|
const [receipt, setReceipt] = useState<Partial<StockReceipt>>(initialReceipt);
|
|||
|
|
const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
|
|||
|
|
const [isSaving, setIsSaving] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setReceipt(initialReceipt);
|
|||
|
|
}, [initialReceipt]);
|
|||
|
|
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// Handlers
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
const updateLineItem = (index: number, updates: Partial<StockReceiptLineItem>) => {
|
|||
|
|
const newLineItems = [...(receipt.line_items || [])];
|
|||
|
|
newLineItems[index] = { ...newLineItems[index], ...updates };
|
|||
|
|
|
|||
|
|
// Auto-detect discrepancy
|
|||
|
|
if (updates.actual_quantity !== undefined || updates.expected_quantity !== undefined) {
|
|||
|
|
const item = newLineItems[index];
|
|||
|
|
item.has_discrepancy = hasDiscrepancy(item.expected_quantity, item.actual_quantity);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setReceipt({ ...receipt, line_items: newLineItems });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const updateLot = (lineItemIndex: number, lotIndex: number, updatedLot: StockLot) => {
|
|||
|
|
const newLineItems = [...(receipt.line_items || [])];
|
|||
|
|
newLineItems[lineItemIndex].lots[lotIndex] = updatedLot;
|
|||
|
|
setReceipt({ ...receipt, line_items: newLineItems });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const addLot = (lineItemIndex: number) => {
|
|||
|
|
const lineItem = receipt.line_items?.[lineItemIndex];
|
|||
|
|
if (!lineItem) return;
|
|||
|
|
|
|||
|
|
const newLot: StockLot = {
|
|||
|
|
quantity: 0,
|
|||
|
|
unit_of_measure: lineItem.unit_of_measure,
|
|||
|
|
expiration_date: '',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const newLineItems = [...(receipt.line_items || [])];
|
|||
|
|
newLineItems[lineItemIndex].lots.push(newLot);
|
|||
|
|
setReceipt({ ...receipt, line_items: newLineItems });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeLot = (lineItemIndex: number, lotIndex: number) => {
|
|||
|
|
const newLineItems = [...(receipt.line_items || [])];
|
|||
|
|
newLineItems[lineItemIndex].lots.splice(lotIndex, 1);
|
|||
|
|
setReceipt({ ...receipt, line_items: newLineItems });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const validate = (): boolean => {
|
|||
|
|
const errors: Record<string, string> = {};
|
|||
|
|
|
|||
|
|
if (!receipt.line_items || receipt.line_items.length === 0) {
|
|||
|
|
errors.general = t('inventory:validation.no_line_items');
|
|||
|
|
setValidationErrors(errors);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
receipt.line_items.forEach((item, idx) => {
|
|||
|
|
// Check lots exist
|
|||
|
|
if (!item.lots || item.lots.length === 0) {
|
|||
|
|
errors[`line_${idx}_lots`] = t('inventory:validation.at_least_one_lot');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check lot quantities sum to actual quantity
|
|||
|
|
const lotSum = calculateLotQuantitySum(item.lots);
|
|||
|
|
if (Math.abs(lotSum - item.actual_quantity) > 0.01) {
|
|||
|
|
errors[`line_${idx}_quantity`] = t('inventory:validation.lot_quantity_mismatch', {
|
|||
|
|
expected: item.actual_quantity,
|
|||
|
|
actual: lotSum,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check expiration dates
|
|||
|
|
item.lots.forEach((lot, lotIdx) => {
|
|||
|
|
if (!lot.expiration_date) {
|
|||
|
|
errors[`line_${idx}_lot_${lotIdx}_exp`] = t('inventory:validation.expiration_required');
|
|||
|
|
}
|
|||
|
|
if (!lot.quantity || lot.quantity <= 0) {
|
|||
|
|
errors[`line_${idx}_lot_${lotIdx}_qty`] = t('inventory:validation.quantity_required');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setValidationErrors(errors);
|
|||
|
|
return Object.keys(errors).length === 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveDraft = async () => {
|
|||
|
|
if (!onSaveDraft) return;
|
|||
|
|
|
|||
|
|
setIsSaving(true);
|
|||
|
|
try {
|
|||
|
|
await onSaveDraft(receipt as StockReceipt);
|
|||
|
|
onClose();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to save draft:', error);
|
|||
|
|
setValidationErrors({ general: t('inventory:errors.save_failed') });
|
|||
|
|
} finally {
|
|||
|
|
setIsSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleConfirm = async () => {
|
|||
|
|
if (!validate()) return;
|
|||
|
|
if (!onConfirm) return;
|
|||
|
|
|
|||
|
|
setIsSaving(true);
|
|||
|
|
try {
|
|||
|
|
await onConfirm(receipt as StockReceipt);
|
|||
|
|
onClose();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to confirm receipt:', error);
|
|||
|
|
setValidationErrors({ general: t('inventory:errors.confirm_failed') });
|
|||
|
|
} finally {
|
|||
|
|
setIsSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// Render
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
|
|||
|
|
<div
|
|||
|
|
className="w-full max-w-5xl max-h-[90vh] overflow-hidden rounded-xl shadow-2xl flex flex-col"
|
|||
|
|
style={{ backgroundColor: 'var(--bg-primary)' }}
|
|||
|
|
>
|
|||
|
|
{/* Header */}
|
|||
|
|
<div
|
|||
|
|
className="flex items-center justify-between p-6 border-b"
|
|||
|
|
style={{ borderColor: 'var(--border-primary)' }}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Truck className="w-6 h-6" style={{ color: 'var(--color-primary)' }} />
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
{t('inventory:stock_receipt_title')}
|
|||
|
|
</h2>
|
|||
|
|
{receipt.po_number && (
|
|||
|
|
<p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('inventory:purchase_order')}: {receipt.po_number}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
|||
|
|
style={{ color: 'var(--text-secondary)' }}
|
|||
|
|
>
|
|||
|
|
<X className="w-6 h-6" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Content */}
|
|||
|
|
<div className="flex-1 overflow-y-auto p-6">
|
|||
|
|
{/* Supplier Info */}
|
|||
|
|
{receipt.supplier_name && (
|
|||
|
|
<div
|
|||
|
|
className="mb-6 p-4 rounded-lg border"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-secondary)',
|
|||
|
|
borderColor: 'var(--border-secondary)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<h3 className="font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
{t('inventory:supplier_info')}
|
|||
|
|
</h3>
|
|||
|
|
<p style={{ color: 'var(--text-secondary)' }}>{receipt.supplier_name}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Validation Errors */}
|
|||
|
|
{validationErrors.general && (
|
|||
|
|
<div
|
|||
|
|
className="mb-6 p-4 rounded-lg border-2 flex items-start gap-3"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--color-error-50)',
|
|||
|
|
borderColor: 'var(--color-error-300)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<AlertTriangle className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-error-700)' }} />
|
|||
|
|
<div>
|
|||
|
|
<p className="font-semibold" style={{ color: 'var(--color-error-900)' }}>
|
|||
|
|
{validationErrors.general}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Line Items */}
|
|||
|
|
{receipt.line_items?.map((item, idx) => (
|
|||
|
|
<div
|
|||
|
|
key={idx}
|
|||
|
|
className="mb-6 p-6 rounded-xl border-2"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: item.has_discrepancy ? 'var(--color-warning-300)' : 'var(--border-primary)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* Line Item Header */}
|
|||
|
|
<div className="flex items-start justify-between mb-4">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-lg font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
{item.ingredient_name}
|
|||
|
|
</h3>
|
|||
|
|
<div className="flex items-center gap-4 text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
<span>
|
|||
|
|
{t('inventory:expected')}: {item.expected_quantity} {item.unit_of_measure}
|
|||
|
|
</span>
|
|||
|
|
<span>→</span>
|
|||
|
|
<span className={item.has_discrepancy ? 'font-semibold' : ''}>
|
|||
|
|
{t('inventory:actual')}: {item.actual_quantity} {item.unit_of_measure}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
{item.has_discrepancy && (
|
|||
|
|
<div className="mt-2 flex items-center gap-2">
|
|||
|
|
<AlertTriangle className="w-4 h-4" style={{ color: 'var(--color-warning-700)' }} />
|
|||
|
|
<span className="text-sm font-semibold" style={{ color: 'var(--color-warning-900)' }}>
|
|||
|
|
{t('inventory:discrepancy_detected')}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Lot Quantity Summary */}
|
|||
|
|
<div className="text-right">
|
|||
|
|
<div className="text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('inventory:lot_total')}
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="text-2xl font-bold"
|
|||
|
|
style={{
|
|||
|
|
color:
|
|||
|
|
Math.abs(calculateLotQuantitySum(item.lots) - item.actual_quantity) < 0.01
|
|||
|
|
? 'var(--color-success)'
|
|||
|
|
: 'var(--color-error)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{calculateLotQuantitySum(item.lots).toFixed(2)} {item.unit_of_measure}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Discrepancy Reason */}
|
|||
|
|
{item.has_discrepancy && (
|
|||
|
|
<div className="mb-4">
|
|||
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('inventory:discrepancy_reason')}
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={item.discrepancy_reason || ''}
|
|||
|
|
onChange={(e) => updateLineItem(idx, { discrepancy_reason: e.target.value })}
|
|||
|
|
placeholder={t('inventory:discrepancy_reason_placeholder')}
|
|||
|
|
rows={2}
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border resize-none"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Lots */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<h4 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
{t('inventory:lots')} ({item.lots.length})
|
|||
|
|
</h4>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{item.lots.map((lot, lotIdx) => (
|
|||
|
|
<LotInput
|
|||
|
|
key={lotIdx}
|
|||
|
|
lot={lot}
|
|||
|
|
lineItemUoM={item.unit_of_measure}
|
|||
|
|
onChange={(updatedLot) => updateLot(idx, lotIdx, updatedLot)}
|
|||
|
|
onRemove={() => removeLot(idx, lotIdx)}
|
|||
|
|
canRemove={item.lots.length > 1}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
{/* Add Lot Button */}
|
|||
|
|
<button
|
|||
|
|
onClick={() => addLot(idx)}
|
|||
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 border-dashed transition-colors hover:border-solid"
|
|||
|
|
style={{
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--color-primary)',
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" />
|
|||
|
|
<span className="font-semibold">{t('inventory:add_lot')}</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Validation Error for this line */}
|
|||
|
|
{(validationErrors[`line_${idx}_lots`] ||
|
|||
|
|
validationErrors[`line_${idx}_quantity`]) && (
|
|||
|
|
<div
|
|||
|
|
className="mt-4 p-3 rounded-lg border flex items-start gap-2"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--color-error-50)',
|
|||
|
|
borderColor: 'var(--color-error-300)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-error-700)' }} />
|
|||
|
|
<p className="text-sm" style={{ color: 'var(--color-error-900)' }}>
|
|||
|
|
{validationErrors[`line_${idx}_lots`] ||
|
|||
|
|
validationErrors[`line_${idx}_quantity`]}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
{/* General Notes */}
|
|||
|
|
<div className="mt-6">
|
|||
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
{t('inventory:receipt_notes')}
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={receipt.notes || ''}
|
|||
|
|
onChange={(e) => setReceipt({ ...receipt, notes: e.target.value })}
|
|||
|
|
placeholder={t('inventory:receipt_notes_placeholder')}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full px-3 py-2 rounded-lg border resize-none"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: 'var(--bg-primary)',
|
|||
|
|
borderColor: 'var(--border-primary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Footer */}
|
|||
|
|
<div
|
|||
|
|
className="flex items-center justify-between p-6 border-t"
|
|||
|
|
style={{ borderColor: 'var(--border-primary)' }}
|
|||
|
|
>
|
|||
|
|
<Button variant="ghost" onClick={onClose} disabled={isSaving}>
|
|||
|
|
{t('common:actions.cancel')}
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
{onSaveDraft && (
|
|||
|
|
<Button variant="secondary" onClick={handleSaveDraft} disabled={isSaving}>
|
|||
|
|
<Save className="w-4 h-4 mr-2" />
|
|||
|
|
{t('common:actions.save_draft')}
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{onConfirm && (
|
|||
|
|
<Button variant="default" onClick={handleConfirm} disabled={isSaving}>
|
|||
|
|
<CheckCircle className="w-4 h-4 mr-2" />
|
|||
|
|
{t('common:actions.confirm_receipt')}
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|