diff --git a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx index 9ba8da9..790c8cb 100644 --- a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx +++ b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx @@ -97,16 +97,39 @@ const SearchableSelect = ({ }, [options, searchTerm]); // Get selected option label + const [internalDisplayValue, setInternalDisplayValue] = React.useState(displayValue || ''); const selectedOption = options.find(opt => opt.value === value); - const displayValueToShow = displayValue !== undefined - ? displayValue - : (selectedOption ? selectedOption.label : ''); + + // Update internal display value when value, displayValue prop or options change + React.useEffect(() => { + if (displayValue !== undefined && displayValue !== '') { + setInternalDisplayValue(displayValue); + } else if (selectedOption) { + setInternalDisplayValue(selectedOption.label); + } else if (value) { + // If we have a value but no matching option, try to find it in the options + const matchedOption = options.find(opt => opt.value === value); + setInternalDisplayValue(matchedOption?.label || ''); + } else { + setInternalDisplayValue(''); + } + }, [value, displayValue, selectedOption, options]); + + const displayValueToShow = internalDisplayValue; // Handle option selection const handleSelect = (option) => { if (onChange) { - const event = { target: { value: option.value } }; + const event = { + target: { + value: option.value, + name: name, + selectedDisplay: option.label, + option: option + } + }; onChange(event); + setInternalDisplayValue(option.label); } setSearchTerm(''); setIsOpen(false); @@ -1235,140 +1258,135 @@ const location = useLocation();
-
- { - const selectedValue = e.target.value; - // Clear error when user selects a product - if (formErrors[`product_${idx}`]) { - const newErrors = { ...formErrors }; - delete newErrors[`product_${idx}`]; - setFormErrors(newErrors); - } + { + const selectedValue = e.target.value; + // Clear error when user selects a product + if (formErrors[`product_${idx}`]) { + const newErrors = { ...formErrors }; + delete newErrors[`product_${idx}`]; + setFormErrors(newErrors); + } + + // Find the selected product from options + const selectedProduct = productOptions.find(opt => opt.value === selectedValue || opt.productId?.toString() === selectedValue); + + // Get unit information from the selected product + const unitId = selectedProduct?.originalData?.['product.unit.id'] || + selectedProduct?.unitId || + selectedProduct?.originalData?.unit_id; + + const unitName = selectedProduct?.originalData?.['product.unit.uom'] || + selectedProduct?.originalData?.unit?.uom || + selectedProduct?.unitName || + selectedProduct?.unit || ''; + + // Get the display name for the product - check multiple possible locations + let displayName = ''; + if (selectedProduct) { + // Get HS code from various possible locations + const hsCode = selectedProduct.hsCode || + selectedProduct.originalData?.['product.hs_code'] || + selectedProduct.originalData?.hs_code || + ''; - // Find the selected product from options - const selectedProduct = productOptions.find(opt => opt.value === selectedValue || opt.productId?.toString() === selectedValue); + // Get product name from various possible locations + const productName = selectedProduct.name || + selectedProduct.originalData?.['product.name'] || + selectedProduct.originalData?.product_name || + selectedProduct.originalData?.name || + ''; - // Get unit information from the selected product - const unitId = selectedProduct?.originalData?.['product.unit.id'] || - selectedProduct?.unitId || - selectedProduct?.originalData?.unit_id; - - const unitName = selectedProduct?.originalData?.['product.unit.uom'] || - selectedProduct?.originalData?.unit?.uom || - selectedProduct?.unitName || - selectedProduct?.unit || ''; - - // Get the display name for the product - check multiple possible locations - let displayName = ''; - if (selectedProduct) { - // Get HS code from various possible locations - const hsCode = selectedProduct.hsCode || - selectedProduct.originalData?.['product.hs_code'] || - selectedProduct.originalData?.hs_code || - ''; - - // Get product name from various possible locations - const productName = selectedProduct.name || - selectedProduct.originalData?.['product.name'] || - selectedProduct.originalData?.product_name || - selectedProduct.originalData?.name || - ''; - - // Combine HS Code and Product Name for display - displayName = hsCode && productName ? - `${hsCode} - ${productName}` : - productName || selectedProduct.label || - (selectedProduct.originalData ? - (selectedProduct.originalData['product.product_name'] || - selectedProduct.originalData.product_name || - selectedProduct.originalData.name) : - (selectedProduct.name || '') - ); - } + // Combine HS Code and Product Name for display + displayName = hsCode && productName ? + `${hsCode} - ${productName}` : + productName || selectedProduct.label || + (selectedProduct.originalData ? + (selectedProduct.originalData['product.product_name'] || + selectedProduct.originalData.product_name || + selectedProduct.originalData.name) : + (selectedProduct.name || '') + ); + } - // Create updated product with all necessary fields - const updatedProduct = { - ...p, - product: selectedValue, // Store the ID as string - productId: selectedValue, // Also store as productId for consistency - product_id: selectedValue, // For backward compatibility - hs_code: selectedProduct?.hsCode || - (selectedProduct?.originalData ? - (selectedProduct.originalData['product.hs_code'] || - selectedProduct.originalData.hs_code) : - '') || p.hs_code, - name: displayName || p.name, // Use the formatted display name - originalData: selectedProduct?.originalData || p.originalData, - // Set unit information - unit: unitId ? unitId.toString() : '', - unitName: unitName, - unit_id: unitId ? unitId.toString() : '', - // Clear any previous unit-related errors - ...(formErrors[`unit_${idx}`] && { unitError: undefined }) - }; - - // Update the products array with the updated product - const updatedProducts = products.map((prod, i) => - i === idx ? updatedProduct : prod - ); - // Update the parent component's state - onProductsChange(updatedProducts); + // Create updated product with all necessary fields + const updatedProduct = { + ...p, + product: selectedValue, // Store the ID as string + productId: selectedValue, // Also store as productId for consistency + product_id: selectedValue, // For backward compatibility + hs_code: selectedProduct?.hsCode || + (selectedProduct?.originalData ? + (selectedProduct.originalData['product.hs_code'] || + selectedProduct.originalData.hs_code) : + '') || p.hs_code, + name: displayName || p.name, // Use the formatted display name + originalData: selectedProduct?.originalData || p.originalData, + // Set unit information + unit: unitId ? unitId.toString() : '', + unitName: unitName, + unit_id: unitId ? unitId.toString() : '', + // Clear any previous unit-related errors + ...(formErrors[`unit_${idx}`] && { unitError: undefined }) + }; + + // Update the products array with the updated product + const updatedProducts = products.map((prod, i) => + i === idx ? updatedProduct : prod + ); + // Update the parent component's state + onProductsChange(updatedProducts); - // After updating the product, fetch forecast data if we have a valid product and establishment ID - if (selectedProduct?.value) { - try { - // Get establishment ID from sessionStorage or localStorage - const establishmentId = sessionStorage.getItem('establishment_id') || - localStorage.getItem('establishmentId') || - localStorage.getItem('establishment_id'); + // After updating the product, fetch forecast data if we have a valid product and establishment ID + if (selectedProduct?.value) { + try { + // Get establishment ID from sessionStorage or localStorage + const establishmentId = sessionStorage.getItem('establishment_id') || + localStorage.getItem('establishmentId') || + localStorage.getItem('establishment_id'); + + if (establishmentId && quarter && year) { + const selectedProductId = selectedProduct.originalData?.id || selectedProduct.value; + const forecastData = await fetchPreviousForecastData(selectedProductId, establishmentId, p.id); - if (establishmentId && quarter && year) { - const selectedProductId = selectedProduct.originalData?.id || selectedProduct.value; - const forecastData = await fetchPreviousForecastData(selectedProductId, establishmentId, p.id); + if (forecastData) { + const data = forecastData.data || forecastData; + const updatedWithForecast = { + ...updatedProduct, + octQuantity: data.previous_quantity_period_one || '', + novQuantity: data.previous_quantity_period_two || '', + decQuantity: data.previous_quantity_period_three || '', + octCost: data.previous_cost_period_one || '', + novCost: data.previous_cost_period_two || '', + decCost: data.previous_cost_period_three || '', + capacity: data.annual_installed_capacity || '' + }; - if (forecastData) { - const data = forecastData.data || forecastData; - const updatedWithForecast = { - ...updatedProduct, - octQuantity: data.previous_quantity_period_one || '', - novQuantity: data.previous_quantity_period_two || '', - decQuantity: data.previous_quantity_period_three || '', - octCost: data.previous_cost_period_one || '', - novCost: data.previous_cost_period_two || '', - decCost: data.previous_cost_period_three || '', - capacity: data.annual_installed_capacity || '' - }; - - const finalUpdatedProducts = updatedProducts.map((prod, i) => - i === idx ? updatedWithForecast : prod - ); - - onProductsChange(finalUpdatedProducts); - } + const finalUpdatedProducts = updatedProducts.map((prod, i) => + i === idx ? updatedWithForecast : prod + ); + + onProductsChange(finalUpdatedProducts); } - } catch (error) { - console.error('Error fetching forecast data:', error); } + } catch (error) { + console.error('Error fetching forecast data:', error); } - }} - loading={isLoadingProducts} - disabled={isLoadingProducts} - error={!!formErrors[`product_${idx}`]} - /> -
- {formErrors[`product_${idx}`] && ( -

{formErrors[`product_${idx}`]}

- )} -
+ } + }} + loading={isLoadingProducts} + disabled={isLoadingProducts} + error={!!formErrors[`product_${idx}`]} + /> +
+ {formErrors[`product_${idx}`] && ( +

{formErrors[`product_${idx}`]}

+ )}
- {productsError && productOptions.length === 0 && ( -

{productsError}

- )}
@@ -1379,17 +1397,24 @@ const location = useLocation(); displayValue={p.unitName || ''} onChange={(e) => { const unitId = e.target.value; - const selectedUnit = unitOptions.find(u => u.value === unitId); - const originalUnit = selectedUnit?.originalData || {}; - const displayName = originalUnit.uom_short_name && originalUnit.uom - ? `${originalUnit.uom_short_name.toUpperCase()} - ${originalUnit.uom}` - : selectedUnit?.label || ''; - updateProductField(idx, 'unit', unitId); - updateProductField(idx, 'unitName', displayName); + const displayName = e.target.selectedDisplay || + unitOptions.find(u => u.value === unitId)?.label || + ''; + + // Update both unit and unitName in a single update + const updatedProduct = { + ...p, + unit: unitId, + unitName: displayName + }; + + const updatedProducts = [...products]; + updatedProducts[idx] = updatedProduct; + onProductsChange(updatedProducts); }} loading={isLoadingUnits} error={!!formErrors[`unit_${idx}`]} - // disabled={!!p.unitName} // Disable if unit is auto-filled from product + name={`unit_${idx}`} />
{formErrors[`unit_${idx}`] && ( diff --git a/ipi-survey-platform/src/pages/Admin/configuration/IsicHsCodes.jsx b/ipi-survey-platform/src/pages/Admin/configuration/IsicHsCodes.jsx index b663158..94d6a27 100644 --- a/ipi-survey-platform/src/pages/Admin/configuration/IsicHsCodes.jsx +++ b/ipi-survey-platform/src/pages/Admin/configuration/IsicHsCodes.jsx @@ -28,7 +28,7 @@ const createEmptyCodeForm = () => ({ }); // Toast notification component -const Toast = ({ message, type = 'success', onClose }) => { +const Toast = ({ message, type = 'success', onClose, position = 'page' }) => { React.useEffect(() => { const timer = setTimeout(() => { onClose(); @@ -49,6 +49,18 @@ const Toast = ({ message, type = 'success', onClose }) => { } }; + // For modal toasts, we'll use relative positioning + if (position === 'modal') { + return ( +
+
+ {message} +
+
+ ); + } + + // Default page-level toast return (
@@ -354,7 +366,12 @@ const IsicHsCodes = () => { const [modalMode, setModalMode] = React.useState(null); const [form, setForm] = React.useState(createEmptyCodeForm()); const [unitOptions, setUnitOptions] = React.useState([]); - const [toast, setToast] = React.useState({ show: false, message: '', type: 'success' }); + const [toast, setToast] = React.useState({ + show: false, + message: '', + type: 'success', + position: 'page' // 'page' or 'modal' + }); const [showImportModal, setShowImportModal] = React.useState(false); const [isRefreshing, setIsRefreshing] = React.useState(false); @@ -767,8 +784,8 @@ const IsicHsCodes = () => { setForm(createEmptyCodeForm()); }; - const showToast = (message, type = 'success') => { - setToast({ show: true, message, type }); + const showToast = (message, type = 'success', position = 'page') => { + setToast({ show: true, message, type, position }); setTimeout(() => { setToast(prev => ({ ...prev, show: false })); }, 3000); @@ -833,7 +850,7 @@ const IsicHsCodes = () => { if (!form.code || !form.product) { const errorMsg = 'Please fill in all required fields'; console.error(errorMsg); - setError(errorMsg); + showToast(errorMsg, 'error'); return; } @@ -875,8 +892,9 @@ const IsicHsCodes = () => { const productId = form.id || (editingRow !== null ? rowsData[editingRow]?.id : null); if (!productId) { - console.error('Product ID not found for editing'); - setError('Cannot update product: Product ID not found'); + const errorMsg = 'Cannot update product: Product ID not found'; + console.error(errorMsg); + showToast(errorMsg, 'error'); return; } @@ -934,7 +952,7 @@ const IsicHsCodes = () => { if (error.response?.data?.message) { errorMessage = error.response.data.message; } - setError(errorMessage); + showToast(errorMessage, 'error'); } } @@ -972,7 +990,7 @@ const IsicHsCodes = () => { if (createError.response?.data?.message) { errorMessage = createError.response.data.message; } - setError(errorMessage); + showToast(errorMessage, 'error'); } } catch (error) { console.error('Error in handleSaveForm:', error); @@ -1075,10 +1093,12 @@ const IsicHsCodes = () => { return (
- {toast.show && ( + {/* Page-level toasts */} + {toast.show && toast.position === 'page' && ( setToast(prev => ({ ...prev, show: false }))} /> )} @@ -1373,6 +1393,15 @@ const IsicHsCodes = () => { {/* Form */}
+ {/* Modal-level toast */} + {toast.show && toast.position === 'modal' && ( + setToast(prev => ({ ...prev, show: false }))} + /> + )}