From a26bcc779e76e16237251716f68bd17c97dace17 Mon Sep 17 00:00:00 2001 From: Urtzi Alfaro Date: Tue, 18 Nov 2025 12:04:06 +0100 Subject: [PATCH] Fix purchase order items display in edit mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problem: - When editing a PO in the dashboard, the products section showed "[object Object]" instead of the actual product list - The EditViewModal's 'list' type expects simple text arrays, not complex objects Solution: - Created EditablePurchaseOrderItems custom component to properly render and edit PO items - Added form state management with useState and useEffect to track edited values - Implemented handleFieldChange to update form data when users modify fields - Changed field type from 'list' to 'component' with the custom editor - Added editable input fields for quantity, unit of measure, and unit price - Displays real-time item totals and grand total Technical Details: - Custom component receives value and onChange props from EditViewModal - Form data is initialized when entering edit mode with all PO item details - Each item shows: product name, SKU, quantity with unit selector, and price - Unit options include kg, g, l, ml, units, boxes, bags - Proper decimal handling for prices (parseFloat for display, string for API) - Save handler validates items and updates only priority, delivery date, and notes (item modifications are validated but not persisted in this iteration) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../dashboard/PurchaseOrderDetailsModal.tsx | 171 +++++++++++++++++- 1 file changed, 162 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/dashboard/PurchaseOrderDetailsModal.tsx b/frontend/src/components/dashboard/PurchaseOrderDetailsModal.tsx index 92e2a251..508f3c88 100644 --- a/frontend/src/components/dashboard/PurchaseOrderDetailsModal.tsx +++ b/frontend/src/components/dashboard/PurchaseOrderDetailsModal.tsx @@ -7,7 +7,7 @@ * Now using EditViewModal with proper API response structure */ -import React, { useState, useMemo } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { Package, Building2, @@ -45,6 +45,49 @@ export const PurchaseOrderDetailsModal: React.FC const [mode, setMode] = useState<'view' | 'edit'>(initialMode); const updatePurchaseOrderMutation = useUpdatePurchaseOrder(); + // Form state for edit mode + const [formData, setFormData] = useState>({}); + + // Initialize form data when entering edit mode + useEffect(() => { + if (mode === 'edit' && po) { + setFormData({ + priority: po.priority, + required_delivery_date: po.required_delivery_date || '', + notes: po.notes || '', + items: (po.items || []).map((item: PurchaseOrderItem) => ({ + id: item.id, + inventory_product_id: item.inventory_product_id, + product_code: item.product_code || '', + product_name: item.product_name || '', + ordered_quantity: item.ordered_quantity, + unit_of_measure: item.unit_of_measure, + unit_price: parseFloat(item.unit_price), + })), + }); + } + }, [mode, po]); + + // Field change handler for edit mode + const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: any) => { + // Map section/field indices to form field names + // Section 0 = supplier_info (not editable) + // Section 1 = order_details: [priority, required_delivery_date, notes] + // Section 2 = products: [items] + + if (sectionIndex === 1) { + // Order details section + const fieldNames = ['priority', 'required_delivery_date', 'notes']; + const fieldName = fieldNames[fieldIndex]; + if (fieldName) { + setFormData(prev => ({ ...prev, [fieldName]: value })); + } + } else if (sectionIndex === 2 && fieldIndex === 0) { + // Products section - items field + setFormData(prev => ({ ...prev, items: value })); + } + }; + // Component to display user name with data fetching const UserName: React.FC<{ userId: string | undefined | null }> = ({ userId }) => { if (!userId) return <>{t('common:not_available')}; @@ -292,6 +335,113 @@ export const PurchaseOrderDetailsModal: React.FC return sections; }; + // Component to edit PO items + const EditablePurchaseOrderItems: React.FC<{ value: any; onChange?: (value: any) => void }> = ({ value: items, onChange }) => { + const handleItemChange = (index: number, field: string, value: any) => { + if (!items || !onChange) return; + const updatedItems = [...items]; + updatedItems[index] = { + ...updatedItems[index], + [field]: value + }; + onChange(updatedItems); + }; + + if (!items || items.length === 0) { + return ( +
+ +

{t('no_items')}

+
+ ); + } + + const totalAmount = items.reduce((sum, item) => { + const price = parseFloat(item.unit_price) || 0; + const quantity = item.ordered_quantity || 0; + return sum + (price * quantity); + }, 0); + + return ( +
+ {items.map((item: any, index: number) => { + const unitPrice = parseFloat(item.unit_price) || 0; + const quantity = item.ordered_quantity || 0; + const itemTotal = unitPrice * quantity; + const productName = item.product_name || `${t('product')} ${index + 1}`; + + return ( +
+
+
+

{productName}

+ {item.product_code && ( +

+ {t('sku')}: {item.product_code} +

+ )} +
+
+

+ €{itemTotal.toFixed(2)} +

+
+
+ + {/* Editable fields */} +
+
+ +
+ handleItemChange(index, 'ordered_quantity', parseFloat(e.target.value) || 0)} + min="0" + step="0.01" + className="flex-1 px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)]" + /> + +
+
+
+ + handleItemChange(index, 'unit_price', e.target.value)} + min="0" + step="0.01" + className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)]" + /> +
+
+
+ ); + })} +
+ {t('total')} + €{totalAmount.toFixed(2)} +
+
+ ); + }; + // Build sections for edit mode const buildEditSections = (): EditViewModalSection[] => { if (!po) return []; @@ -316,7 +466,7 @@ export const PurchaseOrderDetailsModal: React.FC fields: [ { label: t('priority'), - value: po.priority, + value: formData.priority || po.priority, type: 'select' as const, editable: true, options: priorityOptions, @@ -324,14 +474,14 @@ export const PurchaseOrderDetailsModal: React.FC }, { label: t('required_delivery_date'), - value: po.required_delivery_date || '', + value: formData.required_delivery_date || po.required_delivery_date || '', type: 'date' as const, editable: true, helpText: t('delivery_deadline') }, { label: t('notes'), - value: po.notes || '', + value: formData.notes !== undefined ? formData.notes : (po.notes || ''), type: 'textarea' as const, editable: true, placeholder: t('special_instructions'), @@ -346,7 +496,7 @@ export const PurchaseOrderDetailsModal: React.FC fields: [ { label: t('products'), - value: (po.items || []).map((item: PurchaseOrderItem) => ({ + value: formData.items || (po.items || []).map((item: PurchaseOrderItem) => ({ id: item.id, inventory_product_id: item.inventory_product_id, product_code: item.product_code || '', @@ -355,8 +505,8 @@ export const PurchaseOrderDetailsModal: React.FC unit_of_measure: item.unit_of_measure, unit_price: parseFloat(item.unit_price), })), - type: 'list' as const, - editable: true, + type: 'component' as const, + component: EditablePurchaseOrderItems, span: 2, helpText: t('modify_quantities') } @@ -366,7 +516,7 @@ export const PurchaseOrderDetailsModal: React.FC }; // Save handler for edit mode - const handleSave = async (formData: Record) => { + const handleSave = async () => { try { const items = formData.items || []; @@ -435,7 +585,9 @@ export const PurchaseOrderDetailsModal: React.FC return undefined; }; - const sections = mode === 'view' ? buildViewSections() : buildEditSections(); + const sections = useMemo(() => { + return mode === 'view' ? buildViewSections() : buildEditSections(); + }, [mode, po, formData, i18n.language]); return ( onEdit={po?.status === 'pending_approval' ? () => setMode('edit') : undefined} onSave={mode === 'edit' ? handleSave : undefined} onCancel={mode === 'edit' ? () => setMode('view') : undefined} + onFieldChange={handleFieldChange} saveLabel={t('actions.save')} cancelLabel={t('actions.cancel')} />