New alert system and panel de control page
This commit is contained in:
Urtzi Alfaro
677
frontend/src/components/dashboard/StockReceiptModal.tsx
Normal file
677
frontend/src/components/dashboard/StockReceiptModal.tsx
Normal file
@@ -0,0 +1,677 @@
|
||||
// ================================================================
|
||||
// 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user