df-ae-forms-package 1.1.5 → 1.1.7

package/dist/index.js

@@ -334,7 +334,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
     'Maria Garcia',
     'John Smith',
     'Sarah Johnson'
-], workOrderNumber: initialWorkOrderNumber, assetNumber: initialAssetNumber, isStandalone, isEdit }) => {
+], workOrderNumber: initialWorkOrderNumber, assetNumber: initialAssetNumber, isStandalone, inEditMode = false, isEdit }) => {
     // Determine if workflow actions should be enabled
     // If explicitly provided, use that. Otherwise, default to isEdit (true if editing, false/undefined otherwise).
     // Fallback to false if neither is provided.
@@ -350,6 +350,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
     // State to hold both File objects and existing attachments
     const [localAttachments, setLocalAttachments] = React.useState(attachments || []);
     const [isDragging, setIsDragging] = React.useState(false);
+    const [isViewMode, setIsViewMode] = React.useState(!!issue && !inEditMode);
     const fileInputRef = React.useRef(null);
     const isEditMode = isEdit !== undefined ? isEdit : !!issue;
     React.useEffect(() => {
@@ -371,6 +372,11 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
             }
         }
     }, [isOpen, attachments, issue, isEditMode]);
+    React.useEffect(() => {
+        if (issue) {
+            setIsViewMode(!inEditMode);
+        }
+    }, [issue, inEditMode]);
     const handleFileChange = (event) => {
         if (event.target.files && event.target.files.length > 0) {
             const newFiles = Array.from(event.target.files);
@@ -587,6 +593,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
                     await onUpdateIssue(issue._id, updateData);
                 }
                 toastService.showSuccess('Issue updated successfully');
+                setIsViewMode(true);
                 if (onSuccess) {
                     onSuccess();
                 }
@@ -668,7 +675,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
     if (!isOpen) {
         return null;
     }
-    const modalContent = (jsxRuntime.jsx("div", { className: "raise-issue-modal-overlay", onClick: onClose, children: jsxRuntime.jsxs("div", { className: "raise-issue-modal", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header", children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header-left", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "raise-issue-modal-icon", size: 20 }), jsxRuntime.jsx("div", { className: "raise-issue-modal-header-text", children: jsxRuntime.jsx("div", { className: "raise-issue-modal-title-main", children: isEditMode ? 'Issue Details' : 'Create Issue' }) })] }), jsxRuntime.jsx("button", { className: "raise-issue-modal-close", onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { size: 18 }) })] }), jsxRuntime.jsx("div", { className: "raise-issue-modal-content", children: jsxRuntime.jsxs("div", { className: "raise-issue-fields-grid", children: [isEditMode && issue?.issueNumber && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Issue ID" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: issue.issueNumber, readOnly: true })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.label || '') : (component?.basic?.label || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task Value" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.value || '') : (component?.basic?.value || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Title ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Enter issue title", readOnly: isEditMode })] }), !isStandalone && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Work Order ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: workOrderNumber, onChange: (e) => setWorkOrderNumber(e.target.value), placeholder: "N/A", readOnly: isEditMode })] })), !isStandalone && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Asset Number ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: assetNumber, onChange: (e) => setAssetNumber(e.target.value), placeholder: "Enter asset number", readOnly: isEditMode })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Raised By ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.User, { size: 16 }), jsxRuntime.jsx("span", { children: user ? `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'User' : 'User' })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Created On" }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.Calendar, { size: 16 }), jsxRuntime.jsx("span", { children: isEditMode && issue?.createdAt
+    const modalContent = (jsxRuntime.jsx("div", { className: "raise-issue-modal-overlay", onClick: onClose, children: jsxRuntime.jsxs("div", { className: "raise-issue-modal", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header", children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header-left", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "raise-issue-modal-icon", size: 20 }), jsxRuntime.jsx("div", { className: "raise-issue-modal-header-text", children: jsxRuntime.jsx("div", { className: "raise-issue-modal-title-main", children: isEditMode ? 'Issue Details' : 'Create Issue' }) })] }), jsxRuntime.jsx("button", { className: "raise-issue-modal-close", onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { size: 18 }) })] }), jsxRuntime.jsx("div", { className: "raise-issue-modal-content", children: jsxRuntime.jsxs("div", { className: "raise-issue-fields-grid", children: [isEditMode && issue?.issueNumber && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Issue ID" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: issue.issueNumber, readOnly: true })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.label || '') : (component?.basic?.label || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task Value" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.value || '') : (component?.basic?.value || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Title ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Enter issue title", readOnly: isEditMode && isViewMode })] }), !isStandalone && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Work Order ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: workOrderNumber, onChange: (e) => setWorkOrderNumber(e.target.value), placeholder: "N/A", readOnly: isEditMode && isViewMode })] })), !isStandalone && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Asset Number ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: assetNumber, onChange: (e) => setAssetNumber(e.target.value), placeholder: "Enter asset number", readOnly: isEditMode && isViewMode })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Raised By ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.User, { size: 16 }), jsxRuntime.jsx("span", { children: user ? `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'User' : 'User' })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Created On" }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.Calendar, { size: 16 }), jsxRuntime.jsx("span", { children: isEditMode && issue?.createdAt
                                                     ? (safeDate(issue.createdAt) || new Date()).toLocaleString('en-US', {
                                                         year: 'numeric',
                                                         month: 'short',
@@ -684,7 +691,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
                                                         hour: '2-digit',
                                                         minute: '2-digit',
                                                         hour12: true
-                                                    }) })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Description ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("textarea", { className: `raise-issue-field-textarea ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Enter issue description", rows: 4, readOnly: isEditMode })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Status ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("select", { className: `raise-issue-field-select ${!isEditMode ? 'raise-issue-field-readonly' : ''}`, value: status, onChange: (e) => setStatus(e.target.value), disabled: !isEditMode, children: [jsxRuntime.jsx("option", { value: EIssueStatus.OPEN, children: EIssueStatus.OPEN }), jsxRuntime.jsx("option", { value: EIssueStatus.IN_PROGRESS, children: EIssueStatus.IN_PROGRESS }), jsxRuntime.jsx("option", { value: EIssueStatus.REJECTED, children: EIssueStatus.REJECTED }), jsxRuntime.jsx("option", { value: EIssueStatus.RESOLVE, children: EIssueStatus.RESOLVE })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Assign to ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("select", { className: "raise-issue-field-select", value: assignee, onChange: (e) => setAssignee(e.target.value), children: [jsxRuntime.jsx("option", { value: "", children: "Unassigned" }), availableUsers.map(userName => (jsxRuntime.jsx("option", { value: userName, children: userName }, userName)))] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Priority ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("div", { className: "raise-issue-priority-buttons", children: [jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-low ${priority === 'Low' ? 'active' : ''}`, onClick: () => setPriority('Low'), children: "Low" }), jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-medium ${priority === 'Medium' ? 'active' : ''}`, onClick: () => setPriority('Medium'), children: "Medium" }), jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-high ${priority === 'High' ? 'active' : ''}`, onClick: () => setPriority('High'), children: "High" })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label-with-icon", children: [jsxRuntime.jsx(lucideReact.MessageSquare, { size: 16 }), jsxRuntime.jsx("span", { children: "Comments" })] }), !comments && (jsxRuntime.jsx("div", { className: "raise-issue-no-comments", children: "No comments yet" })), jsxRuntime.jsx("textarea", { className: `raise-issue-field-textarea raise-issue-comments-textarea ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: comments, onChange: (e) => setComments(e.target.value), placeholder: "Add a comment...", rows: 4, readOnly: isEditMode })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", style: { marginTop: '1rem' }, children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Attachments" }), jsxRuntime.jsxs("div", { className: "raise-issue-attachments-container", children: [!isEditMode && (jsxRuntime.jsxs("div", { className: `raise-issue-dropzone ${isDragging ? 'dragging' : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => fileInputRef.current?.click(), children: [jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, onChange: handleFileChange, multiple: true }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-icon", children: jsxRuntime.jsx(lucideReact.UploadCloud, { size: 24 }) }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-text", children: "Click to upload or drag and drop" }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-hint", children: "PNG, JPG up to 10MB" })] })), localAttachments.length > 0 && (jsxRuntime.jsx("div", { className: "raise-issue-attachments-list", children: localAttachments.map((file, index) => (jsxRuntime.jsxs("div", { className: "raise-issue-attachment-item", children: [jsxRuntime.jsx("div", { className: "raise-issue-attachment-thumbnail", children: getAttachmentPreview(file) ? (jsxRuntime.jsx("img", { src: getAttachmentPreview(file), alt: "Thumbnail" })) : (jsxRuntime.jsx(lucideReact.Paperclip, { size: 20, color: "#9ca3af" })) }), jsxRuntime.jsxs("div", { className: "raise-issue-attachment-info", children: [jsxRuntime.jsx("span", { className: "attachment-name", title: getAttachmentName(file), children: getAttachmentName(file) }), file instanceof File && (jsxRuntime.jsxs("span", { className: "attachment-size", children: [(file.size / 1024).toFixed(1), " KB"] }))] }), !isEditMode && (jsxRuntime.jsx("button", { type: "button", className: "attachment-remove-btn", onClick: () => handleRemoveAttachment(index), title: "Remove", children: jsxRuntime.jsx(lucideReact.X, { size: 12 }) }))] }, index))) }))] })] })] }) }), jsxRuntime.jsx("div", { className: "raise-issue-modal-actions", children: jsxRuntime.jsxs("div", { className: "raise-issue-modal-actions-buttons", children: [isEditMode && issue && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === EIssueStatus.OPEN && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-accept", onClick: handleAccept, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Accept' })), status === EIssueStatus.IN_PROGRESS && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-resolve", onClick: handleResolve, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Resolve' })), (status === EIssueStatus.OPEN || status === EIssueStatus.IN_PROGRESS) && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-reject", onClick: handleReject, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Reject' }))] })), !isEditMode && (jsxRuntime.jsx("button", { className: `raise-issue-modal-button raise-issue-modal-button-save ${!isFormValid ? 'disabled' : ''}`, onClick: handleSubmit, disabled: isSubmitting || !isFormValid, children: isSubmitting ? 'Creating...' : 'Create Issue' }))] }) })] }) }));
+                                                    }) })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Description ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("textarea", { className: `raise-issue-field-textarea ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Enter issue description", rows: 4, readOnly: isEditMode && isViewMode })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Status ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: status, readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Assign to ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("select", { className: "raise-issue-field-select", value: assignee, onChange: (e) => setAssignee(e.target.value), disabled: isEditMode && isViewMode, children: [jsxRuntime.jsx("option", { value: "", children: "Unassigned" }), availableUsers.map(userName => (jsxRuntime.jsx("option", { value: userName, children: userName }, userName)))] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Priority ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("div", { className: "raise-issue-priority-buttons", children: [jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-low ${priority === 'Low' ? 'active' : ''}`, onClick: () => setPriority('Low'), disabled: isEditMode && isViewMode, children: "Low" }), jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-medium ${priority === 'Medium' ? 'active' : ''}`, onClick: () => setPriority('Medium'), disabled: isEditMode && isViewMode, children: "Medium" }), jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-high ${priority === 'High' ? 'active' : ''}`, onClick: () => setPriority('High'), disabled: isEditMode && isViewMode, children: "High" })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label-with-icon", children: [jsxRuntime.jsx(lucideReact.MessageSquare, { size: 16 }), jsxRuntime.jsx("span", { children: "Comments" })] }), !comments && (jsxRuntime.jsx("div", { className: "raise-issue-no-comments", children: "No comments yet" })), jsxRuntime.jsx("textarea", { className: `raise-issue-field-textarea raise-issue-comments-textarea ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: comments, onChange: (e) => setComments(e.target.value), placeholder: "Add a comment...", rows: 4, readOnly: isEditMode })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", style: { marginTop: '1rem' }, children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Attachments" }), jsxRuntime.jsxs("div", { className: "raise-issue-attachments-container", children: [!isEditMode && (jsxRuntime.jsxs("div", { className: `raise-issue-dropzone ${isDragging ? 'dragging' : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => fileInputRef.current?.click(), children: [jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, onChange: handleFileChange, multiple: true }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-icon", children: jsxRuntime.jsx(lucideReact.UploadCloud, { size: 24 }) }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-text", children: "Click to upload or drag and drop" }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-hint", children: "PNG, JPG up to 10MB" })] })), localAttachments.length > 0 && (jsxRuntime.jsx("div", { className: "raise-issue-attachments-list", children: localAttachments.map((file, index) => (jsxRuntime.jsxs("div", { className: "raise-issue-attachment-item", children: [jsxRuntime.jsx("div", { className: "raise-issue-attachment-thumbnail", children: getAttachmentPreview(file) ? (jsxRuntime.jsx("img", { src: getAttachmentPreview(file), alt: "Thumbnail" })) : (jsxRuntime.jsx(lucideReact.Paperclip, { size: 20, color: "#9ca3af" })) }), jsxRuntime.jsxs("div", { className: "raise-issue-attachment-info", children: [jsxRuntime.jsx("span", { className: "attachment-name", title: getAttachmentName(file), children: getAttachmentName(file) }), file instanceof File && (jsxRuntime.jsxs("span", { className: "attachment-size", children: [(file.size / 1024).toFixed(1), " KB"] }))] }), !isEditMode && (jsxRuntime.jsx("button", { type: "button", className: "attachment-remove-btn", onClick: () => handleRemoveAttachment(index), title: "Remove", children: jsxRuntime.jsx(lucideReact.X, { size: 12 }) }))] }, index))) }))] })] })] }) }), jsxRuntime.jsx("div", { className: "raise-issue-modal-actions", children: jsxRuntime.jsxs("div", { className: "raise-issue-modal-actions-buttons", children: [isEditMode && issue && !isViewMode && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === EIssueStatus.OPEN && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-accept", onClick: handleAccept, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Accept' })), status === EIssueStatus.IN_PROGRESS && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-resolve", onClick: handleResolve, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Resolve' })), (status === EIssueStatus.OPEN) && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-reject", onClick: handleReject, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Reject' }))] })), !isEditMode && (jsxRuntime.jsx("button", { className: `raise-issue-modal-button raise-issue-modal-button-save ${!isFormValid ? 'disabled' : ''}`, onClick: handleSubmit, disabled: isSubmitting || !isFormValid, children: isSubmitting ? 'Creating...' : 'Create Issue' }))] }) })] }) }));
     // Render modal using portal to document body for full-page overlay
     return require$$0.createPortal(modalContent, document.body);
 };
@@ -820,7 +827,6 @@ const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', in
     // Update ref if ID changes (shouldn't happen, but safety check)
     React.useEffect(() => {
         if (id !== componentIdRef.current) {
-            console.warn(`[DfFormInput] Component ID changed from ${componentIdRef.current} to ${id}`);
             componentIdRef.current = id;
         }
     }, [id]);
@@ -2998,8 +3004,6 @@ const DfFormLocation = ({ id, properties, validationErrors = {}, formValue = nul
                 }
             }
             catch (error) {
-                // Capacitor not properly initialized, fall through to web geolocation
-                console.warn('Capacitor Geolocation not available, falling back to web geolocation');
             }
         }
         // Fallback to standard web geolocation API (for browsers)
@@ -3713,7 +3717,6 @@ const AttachmentThumbnails = ({ attachments, onRemove }) => {
                     newUrls.set(index, url);
                 }
                 catch (e) {
-                    console.warn('Failed to create object URL for attachment:', e);
                 }
             }
             else if (file && file.url && file.type && file.type.startsWith('image/')) {
@@ -4624,7 +4627,6 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         zIndex: 5
                     }, children: jsxRuntime.jsxs("button", { onClick: (e) => {
                             e.stopPropagation();
-                            console.log('[TableView] Add Entry button clicked (grid view)', 'entries:', dataEntries.length, 'max:', maxEntries);
                             onAddEntry();
                         }, disabled: dataEntries.length >= maxEntries, style: {
                             padding: '8px 16px',
@@ -4750,7 +4752,6 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                     justifyContent: 'center'
                 }, children: jsxRuntime.jsxs("button", { onClick: (e) => {
                         e.stopPropagation();
-                        console.log('[TableView] Add Entry button clicked (list view)', 'entries:', dataEntries.length, 'max:', maxEntries);
                         onAddEntry();
                     }, disabled: dataEntries.length >= maxEntries, style: {
                         padding: '8px 16px',
@@ -5003,12 +5004,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
         // In edit/preview modes, don't handle value changes as components are read-only
     }, [mode, onValueChange]);
     const handleAddEntry = React.useCallback(() => {
-        console.log('[DfFormDataGrid] handleAddEntry called - Component ID:', id);
         // Safety check: ensure we have entries array
         const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
-        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length);
-        console.log('[DfFormDataGrid] current entries count:', currentEntries.length);
-        console.log('[DfFormDataGrid] onValueChange exists:', !!onValueChange);
         // Use timestamp and random string to ensure uniqueness even if entries are deleted
         const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
         const newEntryId = `entry-${uniqueSuffix}`;
@@ -5030,11 +5027,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             }),
             styles: {}
         };
-        console.log('[DfFormDataGrid] newEntry created:', newEntry.id, 'with', newEntry.components.length, 'components');
         const updatedEntries = [...currentEntries, newEntry];
-        console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
-            console.log('[DfFormDataGrid] calling onValueChange with updated datagrid structure - Entries:', updatedEntries.length);
             onValueChange({
                 id: gridId, // Use sanitized gridId
                 value: {
@@ -5044,13 +5038,9 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             });
             // Notify parent if callback provided
             if (onEntryAdd) {
-                console.log('[DfFormDataGrid] calling onEntryAdd callback');
                 onEntryAdd();
             }
         }
-        else {
-            console.warn('[DfFormDataGrid] Cannot add entry: onValueChange is missing');
-        }
     }, [onValueChange, properties, gridId, gridComponents, onEntryAdd]);
     const handleRemoveEntry = React.useCallback((entryIndex) => {
         // Safety check: ensure we have entries array
@@ -5059,7 +5049,6 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             .filter((_, index) => index !== entryIndex)
             .map((entry, index) => ({ ...entry, index })); // Only update index, preserve unique ID
         if (onValueChange) {
-            console.log('[DfFormDataGrid] Removing entry at index:', entryIndex, 'New count:', updatedEntries.length);
             onValueChange({
                 id: gridId, // Use sanitized gridId
                 value: { ...properties, entries: updatedEntries }
@@ -5447,8 +5436,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     const [validationErrors, setValidationErrors] = React.useState({});
     const [formSubmitted, setFormSubmitted] = React.useState(false);
     const [touchedFields, setTouchedFields] = React.useState({});
-    // Conditional logic disabled temporarily
-    // const [componentVisibility, setComponentVisibility] = useState<Record<string, boolean>>({})
+    // Component visibility state - driven by conditional logic evaluation
+    const [componentVisibility, setComponentVisibility] = React.useState({});
     // Track raised issues for threshold conditions (Set of condition IDs)
     const [raisedThresholdIssues, setRaisedThresholdIssues] = React.useState(new Set());
     // Track threshold action completions: Map<conditionId, { notesCompleted, attachmentsCompleted, emailSent }>
@@ -5546,6 +5535,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             if (component.children && Array.isArray(component.children)) {
                 initializeComponentValues(component.children, values);
             }
+            // CRITICAL for conditional logic: Also store value under the label key
+            // so condition lookups by label (e.g. "Temperature") work during init
+            if (component.basic?.label && componentId && values[componentId] !== undefined) {
+                values[component.basic.label] = values[componentId];
+            }
         });
     };
     const initializeFormState = React.useCallback(() => {
@@ -5617,15 +5611,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         const labelPart = safeLabel ? `-${safeLabel}` : '';
                         validatedComponent.id = `${name}${labelPart}-${index}`;
                     }
-                    console.warn(`[DfFormPreview] Fixed missing/invalid ID: ${validatedComponent.id}`);
                 }
                 else {
                     // ID is a valid string, check for duplicates
                     if (seenIds.has(validatedComponent.id)) {
-                        console.error(`[DfFormPreview] Duplicate component ID detected: ${validatedComponent.id}`);
                         // Generate a unique ID for duplicate - using index to keep it somewhat stable
                         validatedComponent.id = `${validatedComponent.id}-dup-${index}`;
-                        console.warn(`[DfFormPreview] Generated new unique ID: ${validatedComponent.id}`);
                     }
                 }
                 seenIds.add(validatedComponent.id);
@@ -5680,7 +5671,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             validatedFormComponents = getValidatedComponents(localFormComponents);
             // Synchronize local state if components were mutated (IDs added/fixed)
             if (JSON.stringify(validatedFormComponents) !== JSON.stringify(localFormComponents)) {
-                console.log('[DfFormPreview] Synchronizing local components after ID validation');
                 setLocalFormComponents(validatedFormComponents);
                 onFormDataChange?.(validatedFormComponents);
             }
@@ -5733,13 +5723,229 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Initialize notes and attachments state
         setComponentNotes(prev => ({ ...initialNotes, ...prev }));
         setComponentAttachments(prev => ({ ...initialAttachments, ...prev }));
-        // Conditional logic evaluation disabled temporarily to fix table issues
-        // evaluateConditionalLogic()
+        // Evaluate conditional logic on initialization
+        evaluateConditionalLogic(initialValues);
     }, [initialFormData, localFormComponents]);
-    // Conditional logic disabled temporarily - all components are always visible
-    const shouldShowComponent = React.useCallback((_componentId) => {
-        return true;
+    // ======================== CONDITIONAL LOGIC ENGINE ========================
+    // This is a pure visibility layer. It NEVER modifies component data.
+    // It computes a { [componentId]: boolean } map based on each component's
+    // `logic` property and the current form values.
+    // Helper: Flatten all components (including nested) into a flat list
+    const flattenAllComponents = React.useCallback((components) => {
+        const flat = [];
+        const traverse = (items) => {
+            if (!items || !Array.isArray(items))
+                return;
+            for (const item of items) {
+                flat.push(item);
+                if (item.children && Array.isArray(item.children))
+                    traverse(item.children);
+                if (item.cells && Array.isArray(item.cells)) {
+                    for (const row of item.cells) {
+                        const normalizedRow = normalizeTableRow(row);
+                        for (const cell of normalizedRow) {
+                            if (cell.components)
+                                traverse(cell.components);
+                        }
+                    }
+                }
+                if (item.entries && Array.isArray(item.entries)) {
+                    for (const entry of item.entries) {
+                        if (entry.components)
+                            traverse(entry.components);
+                    }
+                }
+                if (item.templateComponents && Array.isArray(item.templateComponents)) {
+                    traverse(item.templateComponents);
+                }
+            }
+        };
+        traverse(components);
+        return flat;
+    }, []);
+    // Helper: Get the value of a component referenced by a condition's `when` field.
+    // The `when` field is typically a component LABEL (e.g. "Temperature"), not an ID.
+    const getConditionComponentValue = React.useCallback((conditionWhen, allComponents, currentFormValues) => {
+        // Try to find the component by label, id, or _id
+        const comp = allComponents.find(c => c.basic?.label === conditionWhen ||
+            ensureStringId$1(c.id) === conditionWhen ||
+            ensureStringId$1(c._id) === conditionWhen);
+        if (!comp)
+            return undefined;
+        const compId = ensureStringId$1(comp.id || comp._id);
+        // Check formValues by ID first
+        if (compId && currentFormValues[compId] !== undefined) {
+            return currentFormValues[compId];
+        }
+        // Also check by label (main website stores values by label too)
+        if (comp.basic?.label && currentFormValues[comp.basic.label] !== undefined) {
+            return currentFormValues[comp.basic.label];
+        }
+        // Fall back to component's basic.value or defaultValue
+        if (comp.basic?.value !== undefined && comp.basic?.value !== null && comp.basic?.value !== '') {
+            return comp.basic.value;
+        }
+        if (comp.basic?.defaultValue !== undefined && comp.basic?.defaultValue !== null && comp.basic?.defaultValue !== '') {
+            return comp.basic.defaultValue;
+        }
+        return undefined;
+    }, []);
+    // Helper: Evaluate a single condition
+    const evaluateSingleCondition = React.useCallback((condition, componentValue) => {
+        const { operator, value } = condition;
+        // isEmpty / isNotEmpty
+        if (operator === 'isEmpty') {
+            if (componentValue == null)
+                return true;
+            if (typeof componentValue === 'string')
+                return componentValue.trim() === '';
+            if (Array.isArray(componentValue))
+                return componentValue.length === 0;
+            return false;
+        }
+        if (operator === 'isNotEmpty') {
+            if (componentValue == null)
+                return false;
+            if (typeof componentValue === 'string')
+                return componentValue.trim() !== '';
+            if (Array.isArray(componentValue))
+                return componentValue.length > 0;
+            return true;
+        }
+        // checked / notChecked (for checkboxes)
+        if (operator === 'checked' || operator === 'notChecked') {
+            let isChecked = false;
+            if (typeof componentValue === 'boolean')
+                isChecked = componentValue;
+            else if (typeof componentValue === 'string')
+                isChecked = componentValue.toLowerCase() === 'true' || componentValue === '1' || componentValue.length > 0;
+            else if (Array.isArray(componentValue))
+                isChecked = componentValue.length > 0;
+            else if (typeof componentValue === 'number')
+                isChecked = componentValue > 0;
+            return operator === 'checked' ? isChecked : !isChecked;
+        }
+        // equals / notEquals
+        if (operator === 'equals' || operator === 'notEquals') {
+            let isEqual = false;
+            // Loose comparison
+            if (componentValue == value)
+                isEqual = true;
+            // String comparison (case-insensitive, trimmed)
+            if (!isEqual && componentValue != null && value != null) {
+                const strA = String(componentValue).trim();
+                const strB = String(value).trim();
+                // Numeric comparison within strings
+                if (strA !== '' && strB !== '' && !isNaN(Number(strA)) && !isNaN(Number(strB))) {
+                    isEqual = Number(strA) === Number(strB);
+                }
+                if (!isEqual) {
+                    isEqual = strA.toLowerCase() === strB.toLowerCase();
+                }
+            }
+            // Array contains check (for multi-select)
+            if (!isEqual && Array.isArray(componentValue)) {
+                isEqual = componentValue.some(v => String(v).trim().toLowerCase() === String(value).trim().toLowerCase());
+            }
+            return operator === 'equals' ? isEqual : !isEqual;
+        }
+        // contains / notContains
+        if (operator === 'contains' || operator === 'notContains') {
+            let doesContain = false;
+            if (typeof componentValue === 'string' && value != null) {
+                doesContain = componentValue.trim().toLowerCase().includes(String(value).trim().toLowerCase());
+            }
+            else if (Array.isArray(componentValue) && value != null) {
+                doesContain = componentValue.some(v => String(v).trim().toLowerCase() === String(value).trim().toLowerCase());
+            }
+            return operator === 'contains' ? doesContain : !doesContain;
+        }
+        // Numeric comparisons
+        if (['greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual'].includes(operator)) {
+            const numA = typeof componentValue === 'number' ? componentValue : parseFloat(String(componentValue));
+            const numB = typeof value === 'number' ? value : parseFloat(String(value));
+            if (isNaN(numA) || isNaN(numB))
+                return false;
+            switch (operator) {
+                case 'greaterThan': return numA > numB;
+                case 'lessThan': return numA < numB;
+                case 'greaterThanOrEqual': return numA >= numB;
+                case 'lessThanOrEqual': return numA <= numB;
+                default: return false;
+            }
+        }
+        return false;
     }, []);
+    // Main conditional logic evaluation function
+    const evaluateConditionalLogic = React.useCallback((explicitValues) => {
+        const currentComponents = localFormComponents;
+        const currentValues = explicitValues || formValues;
+        if (!currentComponents || currentComponents.length === 0)
+            return;
+        const allComponents = flattenAllComponents(currentComponents);
+        const visibility = {};
+        allComponents.forEach(component => {
+            const compId = ensureStringId$1(component.id || component._id);
+            if (!compId)
+                return;
+            // Container components are ALWAYS visible — their children handle their own logic
+            if (['table', 'datagrid', 'section', 'heading', 'instructions'].includes(component.name)) {
+                visibility[compId] = true;
+                return;
+            }
+            // Get the logic property (API sends it as `logic`, builder uses `conditional`)
+            const logic = component.logic || component.conditional;
+            // No logic or action is 'always' → always show
+            if (!logic || logic.action === 'always' || !logic.conditions || logic.conditions.length === 0) {
+                visibility[compId] = true;
+                return;
+            }
+            // Evaluate each condition
+            const conditionResults = logic.conditions.map((condition) => {
+                const componentValue = getConditionComponentValue(condition.when, allComponents, currentValues);
+                return evaluateSingleCondition(condition, componentValue);
+            });
+            // Determine if conditions are met based on 'when' (all/any)
+            let conditionsMet;
+            if (logic.when === 'any') {
+                conditionsMet = conditionResults.some((r) => r);
+            }
+            else {
+                // Default to 'all'
+                conditionsMet = conditionResults.every((r) => r);
+            }
+            // Apply action
+            if (logic.action === 'show') {
+                visibility[compId] = conditionsMet;
+            }
+            else if (logic.action === 'hide') {
+                visibility[compId] = !conditionsMet;
+            }
+            else {
+                visibility[compId] = true;
+            }
+        });
+        // Only update state if visibility actually changed (prevent re-render loops)
+        setComponentVisibility(prev => {
+            const prevStr = JSON.stringify(prev);
+            const newStr = JSON.stringify(visibility);
+            if (prevStr === newStr)
+                return prev;
+            return visibility;
+        });
+    }, [localFormComponents, formValues, flattenAllComponents, getConditionComponentValue, evaluateSingleCondition]);
+    // Re-evaluate conditional logic whenever form values change
+    React.useEffect(() => {
+        evaluateConditionalLogic();
+    }, [formValues, evaluateConditionalLogic]);
+    // Check if a component should be visible
+    const shouldShowComponent = React.useCallback((componentId) => {
+        // In preview mode (read-only submission view), always show everything
+        if (isPreviewMode)
+            return true;
+        // Default to visible if not explicitly set to false
+        return componentVisibility[componentId] !== false;
+    }, [componentVisibility, isPreviewMode]);
     // Handle form value changes and re-evaluate conditional logic
     const onFormValueChange = React.useCallback((change) => {
         // CRITICAL: Validate that change.id is valid and unique
@@ -5791,6 +5997,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Only update formValues for actual value changes, not structure updates
         if (!isStructureUpdate) {
             newFormValues[change.id] = change.value;
+            // CRITICAL for conditional logic: Also store value under the component's label.
+            // Conditions reference components by label (e.g. "Temperature"), not by ID.
+            const allComponents = flattenAllComponents(localFormComponents);
+            const targetComp = allComponents.find(c => ensureStringId$1(c.id || c._id) === change.id);
+            if (targetComp?.basic?.label) {
+                newFormValues[targetComp.basic.label] = change.value;
+            }
             setFormValues(newFormValues);
         }
         // Clear raised issues for this component when value changes
@@ -6531,7 +6744,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 componentCounterRef.current += 1;
                 cachedId = `generated-${name}-${componentCounterRef.current}-${Math.random().toString(36).substr(2, 9)}`;
                 componentIdCacheRef.current.set(cacheKey, cachedId);
-                console.warn('[DfFormPreview] Generated and cached ID for component:', cachedId, 'key:', cacheKey);
             }
             finalComponentId = cachedId;
             // Create a new component object with the cached ID (don't mutate original)
@@ -6547,9 +6759,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         if (formValue !== undefined) {
             // Check if this value is being used by multiple components
             const componentsWithSameValue = localFormComponents.filter(comp => comp.id !== componentId && formValues[comp.id] === formValue);
-            if (componentsWithSameValue.length > 0) {
-                console.warn(`[DfFormPreview] Component ${componentId} shares form value with other components:`, componentsWithSameValue.map(c => c.id));
-            }
+            if (componentsWithSameValue.length > 0) ;
         }
         const commonProps = {
             id: componentId, // Use the validated component ID
@@ -6762,10 +6972,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onValueChange: (change) => {
                         const changeId = ensureStringId$1(change.id);
                         const componentId = ensureStringId$1(component.id);
-                        console.log(`[DfFormPreview] datagrid onValueChange - Target: ${changeId}, Component: ${componentId}`);
                         // Handle datagrid value changes (entries updates)
                         if (changeId === componentId && change.value && typeof change.value === 'object' && 'entries' in change.value) {
-                            console.log('[DfFormPreview] datagrid entries update - entries count:', change.value.entries?.length);
                             // Update localFormComponents with new entries structure
                             const updatedComponents = localFormComponents.map(comp => {
                                 const currentCompId = ensureStringId$1(comp.id);
@@ -6808,7 +7016,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                     }
                                 });
                                 if (valuesChanged) {
-                                    console.log('[DfFormPreview] Initializing form values for new datagrid entries');
                                     setFormValues(newValues);
                                 }
                             }