df-ae-forms-package 1.1.13 → 1.1.15

package/dist/index.js

@@ -329,6 +329,22 @@ var EIssueStatus;
     EIssueStatus["REJECTED"] = "Rejected";
     EIssueStatus["RESOLVE"] = "Resolve";
 })(EIssueStatus || (EIssueStatus = {}));
+const normalizeIssueStatus = (issueStatus) => {
+    const normalizedValue = String(issueStatus || '').trim().toLowerCase().replace(/[\s_-]+/g, '');
+    if (normalizedValue === 'open') {
+        return EIssueStatus.OPEN;
+    }
+    if (normalizedValue === 'inprogress') {
+        return EIssueStatus.IN_PROGRESS;
+    }
+    if (normalizedValue === 'reject' || normalizedValue === 'rejected') {
+        return EIssueStatus.REJECTED;
+    }
+    if (normalizedValue === 'resolve' || normalizedValue === 'resolved') {
+        return EIssueStatus.RESOLVE;
+    }
+    return EIssueStatus.OPEN;
+};
 const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId, notes = '', attachments = null, issue = null, onCreateIssue, onUpdateIssue, user, availableUsers = [
     'Priya Das',
     'Maria Garcia',
@@ -351,6 +367,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
     const [localAttachments, setLocalAttachments] = React.useState(attachments || []);
     const [isDragging, setIsDragging] = React.useState(false);
     const [isViewMode, setIsViewMode] = React.useState(!!issue && !inEditMode);
+    const [previewImage, setPreviewImage] = React.useState(null);
     const fileInputRef = React.useRef(null);
     const isEditMode = isEdit !== undefined ? isEdit : !!issue;
     React.useEffect(() => {
@@ -422,8 +439,9 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
     const getAttachmentPreview = (file) => {
         if (!file)
             return null;
-        const isImage = (name) => /\.(jpg|jpeg|png|gif|webp)$/i.test(name);
-        const isDataUrlImage = (data) => data.startsWith('data:image');
+        const name = file.fileName || file.name || file.filename || '';
+        const isImage = (n) => /\.(jpg|jpeg|png|gif|webp)$/i.test(n || '');
+        const isDataUrlImage = (data) => typeof data === 'string' && data.startsWith('data:image');
         if (file instanceof File) {
             if (file.type.startsWith('image/')) {
                 return URL.createObjectURL(file);
@@ -434,12 +452,28 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
             if (isDataUrlImage(file) || isImage(file)) {
                 return file;
             }
+            if (/^[a-zA-Z0-9+/]+={0,2}$/.test(file) && (file.length > 100)) {
+                return `data:image/jpeg;base64,${file}`;
+            }
             return null;
         }
-        if (file.data && isDataUrlImage(file.data))
-            return file.data;
-        if (file.fileName && isImage(file.fileName) && file.data)
+        let mimeType = 'image/jpeg';
+        if (name.toLowerCase().endsWith('.png'))
+            mimeType = 'image/png';
+        if (file.data) {
+            if (isDataUrlImage(file.data))
+                return file.data;
+            if (!file.data.startsWith('data:')) {
+                return `data:${mimeType};base64,${file.data}`;
+            }
             return file.data;
+        }
+        if (file.base64) {
+            return `data:${mimeType};base64,${file.base64}`;
+        }
+        if (file.uri) {
+            return file.uri;
+        }
         return null;
     };
     React.useEffect(() => {
@@ -451,13 +485,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
                 setWorkOrderNumber(issue?.workOrderNumber || initialWorkOrderNumber || '');
                 setAssetNumber(issue?.assetNumber || initialAssetNumber || '');
                 setPriority(issue?.priority || 'Medium');
-                // Use enum value or default to OPEN
-                const issueStatus = issue?.status || EIssueStatus.OPEN;
-                // Normalize to enum values if needed (handle legacy values)
-                const normalizedStatus = issueStatus === EIssueStatus.OPEN || issueStatus === EIssueStatus.IN_PROGRESS || issueStatus === EIssueStatus.REJECTED || issueStatus === EIssueStatus.RESOLVE
-                    ? issueStatus
-                    : EIssueStatus.OPEN;
-                setStatus(normalizedStatus);
+                setStatus(normalizeIssueStatus(issue?.status || EIssueStatus.OPEN));
                 // Correctly map assignTo or fallback to assignee
                 setAssignee(issue?.assignTo || '');
                 setComments(issue?.comments || '');
@@ -675,6 +703,9 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
     if (!isOpen) {
         return null;
     }
+    const normalizedWorkflowStatus = normalizeIssueStatus(status);
+    const showAcceptRejectActions = isEditMode && !!issue && normalizedWorkflowStatus === EIssueStatus.OPEN;
+    const showResolveAction = isEditMode && !!issue && normalizedWorkflowStatus === EIssueStatus.IN_PROGRESS;
     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',
@@ -691,9 +722,14 @@ 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 && 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' }))] }) })] }) }));
+                                                    }) })] })] }), 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", onClick: () => {
+                                                                const preview = getAttachmentPreview(file);
+                                                                if (preview)
+                                                                    setPreviewImage(preview);
+                                                            }, style: { cursor: getAttachmentPreview(file) ? 'pointer' : 'default' }, 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: [(showAcceptRejectActions || showResolveAction) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showAcceptRejectActions && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-accept", onClick: handleAccept, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Accept' })), showResolveAction && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-resolve", onClick: handleResolve, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Resolve' })), showAcceptRejectActions && (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' }))] }) })] }) }));
+    const previewModal = previewImage ? (jsxRuntime.jsx("div", { className: "raise-issue-modal-overlay", style: { zIndex: 10000 }, onClick: () => setPreviewImage(null), children: jsxRuntime.jsxs("div", { className: "raise-issue-preview-container", onClick: (e) => e.stopPropagation(), style: { position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }, children: [jsxRuntime.jsx("button", { className: "raise-issue-preview-close", onClick: () => setPreviewImage(null), style: { position: 'absolute', top: '-40px', right: '0', background: 'none', border: 'none', cursor: 'pointer' }, children: jsxRuntime.jsx(lucideReact.X, { size: 32, color: "#fff" }) }), jsxRuntime.jsx("img", { src: previewImage, alt: "Attachment Preview", style: { maxWidth: '100%', maxHeight: '90vh', objectFit: 'contain', borderRadius: '4px' } })] }) })) : null;
     // Render modal using portal to document body for full-page overlay
-    return require$$0.createPortal(modalContent, document.body);
+    return require$$0.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [modalContent, previewModal] }), document.body);
 };
 
 const ThresholdAlert = ({ component, condition, currentValue, thresholdValue, formTemplateId, workOrderNumber, assetNumber, user, onIssueRaised, isIssueRaised = false, compact = false }) => {