@visns-studio/visns-components 5.11.7 → 5.11.8

package/src/components/crm/styles/Field.module.scss

@@ -816,3 +816,304 @@ input[type='file']:hover {
     width: 1.2em;
     height: 1.2em;
 }
+
+/* Enhanced File Upload Styling */
+.single-file-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    width: 100%;
+    padding: 0.5em;
+    border: 2px dashed var(--border-color, #ddd);
+    border-radius: var(--br, 8px);
+    background: var(--tertiary-color, #fafafa);
+    transition: all 0.3s ease;
+}
+
+.single-file-container:hover {
+    border-color: var(--primary-color, #007bff);
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.02);
+}
+
+.single-file-image {
+    border-color: var(--success-color, #28a745);
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.05);
+}
+
+.single-file-image:hover {
+    border-color: var(--success-color, #28a745);
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.1);
+}
+
+.file-upload-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 1em 1.5em;
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: var(--br, 6px);
+    background: var(--tertiary-color, #f8f9fa);
+    color: var(--paragraph-color, #333);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9em;
+    font-weight: 500;
+    text-decoration: none;
+    outline: none;
+}
+
+.file-upload-button:hover {
+    background: var(--primary-color, #007bff);
+    color: var(--secondary-color, #fff);
+    border-color: var(--primary-color, #007bff);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 0, 123, 255), 0.3);
+}
+
+.file-upload-button-image {
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.1);
+    border-color: var(--success-color, #28a745);
+    color: var(--success-color, #28a745);
+}
+
+.file-upload-button-image:hover {
+    background: var(--success-color, #28a745);
+    color: var(--secondary-color, #fff);
+    border-color: var(--success-color, #28a745);
+    box-shadow: 0 2px 8px rgba(var(--success-color-rgb, 40, 167, 69), 0.3);
+}
+
+.file-button-icon {
+    font-size: 1.2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    height: 1.5em;
+}
+
+.file-button-text {
+    font-weight: 500;
+    letter-spacing: 0.01em;
+}
+
+.file-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1em;
+    padding: 0.75em 1em;
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 0.8);
+    border: 1px solid var(--border-color, #e9ecef);
+    border-radius: var(--br, 6px);
+    font-size: 0.85em;
+}
+
+.file-name-display {
+    flex: 1;
+    color: var(--paragraph-color, #495057);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.download-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5em;
+    background: transparent;
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: var(--br, 4px);
+    color: var(--primary-color, #007bff);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    outline: none;
+}
+
+.download-button:hover {
+    background: var(--primary-color, #007bff);
+    color: var(--secondary-color, #fff);
+    border-color: var(--primary-color, #007bff);
+    transform: scale(1.05);
+}
+
+/* Enhanced Multiple File List Styling */
+.file-list-item,
+.file-list-item-image {
+    display: flex;
+    align-items: center;
+    gap: 0.75em;
+    padding: 0.75em 1em;
+    border-bottom: 1px solid var(--border-color, #e9ecef);
+    font-size: 0.9rem;
+    background: var(--item-color, #fff);
+    border-radius: var(--br, 6px);
+    transition: all 0.3s ease;
+    margin-bottom: 0.5em;
+    border: 1px solid transparent;
+}
+
+.file-list-item-image {
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.05);
+    border-color: rgba(var(--success-color-rgb, 40, 167, 69), 0.2);
+}
+
+.file-list-item:hover,
+.file-list-item-image:hover {
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.05);
+    border-color: var(--primary-color, #007bff);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.file-list-item-image:hover {
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.1);
+    border-color: var(--success-color, #28a745);
+}
+
+.file-icon {
+    font-size: 1.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2em;
+    height: 2em;
+    flex-shrink: 0;
+}
+
+.file-name {
+    flex: 1;
+    color: var(--paragraph-color, #495057);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Image Preview Styling */
+.image-preview-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1em;
+    padding: 0.5em;
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 0.9);
+    border: 1px solid var(--border-color, #e9ecef);
+    border-radius: var(--br, 6px);
+    overflow: hidden;
+}
+
+.image-preview {
+    max-width: 200px;
+    max-height: 150px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: var(--br, 4px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.image-preview:hover {
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.file-details {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1em;
+}
+
+/* Multiple File Image Preview */
+.file-image-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3em;
+    height: 3em;
+    flex-shrink: 0;
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 0.9);
+    border: 1px solid var(--border-color, #e9ecef);
+    border-radius: var(--br, 4px);
+    overflow: hidden;
+}
+
+.file-thumbnail {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--br, 4px);
+    transition: transform 0.3s ease;
+}
+
+.file-thumbnail:hover {
+    transform: scale(1.1);
+}
+
+/* Enhanced Multiple File List Layout */
+.file-list-item,
+.file-list-item-image {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 1em;
+    padding: 0.75em 1em;
+    border-bottom: 1px solid var(--border-color, #e9ecef);
+    font-size: 0.9rem;
+    background: var(--item-color, #fff);
+    border-radius: var(--br, 6px);
+    transition: all 0.3s ease;
+    margin-bottom: 0.5em;
+    border: 1px solid transparent;
+}
+
+.file-list-item-image {
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.05);
+    border-color: rgba(var(--success-color-rgb, 40, 167, 69), 0.2);
+    grid-template-columns: auto 1fr auto; /* Consistent grid for images */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .image-preview {
+        max-width: 150px;
+        max-height: 100px;
+    }
+    
+    .file-image-preview {
+        width: 2.5em;
+        height: 2.5em;
+    }
+    
+    .file-info {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75em;
+    }
+    
+    .file-details {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5em;
+    }
+}
+
+@media (max-width: 480px) {
+    .image-preview {
+        max-width: 120px;
+        max-height: 80px;
+    }
+    
+    .single-file-container {
+        padding: 0.25em;
+    }
+    
+    .file-upload-button {
+        padding: 0.75em 1em;
+        font-size: 0.85em;
+    }
+}

package/src/components/proposal/ProposalTemplatePreview.css

@@ -243,16 +243,25 @@
 .proposal-preview-prose ol {
     font-size: 0.875rem !important;
     line-height: 1.4 !important;
-    margin: 0 0 0.5rem 1rem !important;
-    padding: 0;
+    margin: 0.5rem 0 0.5rem 1rem !important;
+    padding-left: 0 !important;
     color: #374151 !important;
+    list-style-type: disc !important;
+    list-style-position: outside !important;
+}
+
+.proposal-preview-prose ol {
+    list-style-type: decimal !important;
 }
 
 .proposal-preview-prose li {
-    margin: 0 !important;
-    padding: 0 !important;
+    margin: 0.25rem 0 !important;
+    padding-left: 1.2rem !important;
+    margin-left: 0 !important;
     font-size: 0.875rem !important;
     line-height: 1.4 !important;
+    display: list-item !important;
+    text-indent: 0 !important;
 }
 
 .proposal-preview-section {
@@ -304,16 +313,25 @@
 .proposal-preview-section-content ol {
     font-size: 0.875rem !important;
     line-height: 1.4 !important;
-    margin: 0 0 0.5rem 1rem !important;
-    padding: 0;
+    margin: 0.5rem 0 0.5rem 1rem !important;
+    padding-left: 0 !important;
     color: #4b5563 !important;
+    list-style-type: disc !important;
+    list-style-position: outside !important;
+}
+
+.proposal-preview-section-content ol {
+    list-style-type: decimal !important;
 }
 
 .proposal-preview-section-content li {
-    margin: 0 !important;
-    padding: 0 !important;
+    margin: 0.25rem 0 !important;
+    padding-left: 1.2rem !important;
+    margin-left: 0 !important;
     font-size: 0.875rem !important;
     line-height: 1.4 !important;
+    display: list-item !important;
+    text-indent: 0 !important;
 }
 
 .proposal-preview-empty {

package/src/components/proposal/ProposalTemplateSectionManager.css

@@ -15,10 +15,42 @@
     overflow: hidden;
 }
 
-.section-item:hover {
+.section-item:hover:not(.sortable-helper) {
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
     border-color: #cbd5e1;
-    transform: translateY(-1px);
+    /* Remove transform to prevent conflicts with sortable transforms */
+}
+
+/* Sortable Helper Styles - Applied during drag */
+.sortable-helper {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+    border-color: #3b82f6 !important;
+    transform: rotate(2deg) !important;
+    z-index: 9999 !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+    backdrop-filter: blur(4px);
+}
+
+.sortable-helper .section-header {
+    background: rgba(59, 130, 246, 0.1) !important;
+}
+
+/* Prevent hover effects during drag */
+.sortable-helper:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+    border-color: #3b82f6 !important;
+}
+
+/* Smooth transitions for non-dragged items */
+.section-item:not(.sortable-helper) {
+    transition: all 0.2s ease-in-out;
+}
+
+/* Ghost/placeholder styling */
+.sortable-ghost {
+    opacity: 0.4;
+    background: #f8fafc !important;
+    border: 2px dashed #cbd5e1 !important;
 }
 
 .section-header {
@@ -38,14 +70,24 @@
 }
 
 .drag-handle {
-    cursor: move;
+    cursor: grab;
     padding: 0.5rem;
     color: #9ca3af;
-    transition: color 0.2s;
+    transition: all 0.2s ease;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .drag-handle:hover {
-    color: #6b7280;
+    color: #3b82f6;
+    background: rgba(59, 130, 246, 0.05);
+}
+
+.drag-handle:active {
+    cursor: grabbing;
+    background: rgba(59, 130, 246, 0.1);
 }
 
 .section-title {

package/src/components/proposal/ProposalTemplateSectionManager.jsx

@@ -90,7 +90,7 @@ const SortableSectionList = SortableContainer(({ sections, onEdit, onDelete, onT
     <div>
         {sections.map((section, index) => (
             <SortableSection
-                key={`section-${section.id || index}`}
+                key={section.id}
                 index={index}
                 section={section}
                 onEdit={onEdit}
@@ -164,11 +164,12 @@ const ProposalTemplateSectionManager = ({
             sort_order: index + 1
         }));
 
+        // Immediately update UI for smooth experience
         setSections(updatedSections);
 
         try {
             // Update sort orders on the backend
-            await fetch(buildUrlWithTemplate(apiEndpoints.sectionsReorder), {
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.sectionsReorder), {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -178,19 +179,33 @@ const ProposalTemplateSectionManager = ({
                     sections: updatedSections.map(s => ({ id: s.id, sort_order: s.sort_order }))
                 })
             });
-            
-            await loadSections(); // Refetch fresh data from server
-            toast.success('Section order updated');
+
+            if (response.ok) {
+                // Don't refetch data immediately to prevent UI jumping
+                // The local state is already updated and accurate
+                toast.success('Section order updated');
+            } else {
+                throw new Error('Failed to update section order');
+            }
         } catch (error) {
             console.error('Error updating section order:', error);
             toast.error('Failed to update section order');
-            // Revert on error
-            loadSections();
+            // Revert to original order on error
+            setSections(sections);
         }
     };
 
     const handleAddSection = async (sectionType) => {
         try {
+            // Check if a section with this type already exists
+            const existingSection = sections.find(section => section.section_type === sectionType);
+            
+            if (existingSection) {
+                const sectionTypeName = sectionType.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
+                toast.error(`A ${sectionTypeName} section already exists in this template. Each template can only have one section of each type.`);
+                return;
+            }
+
             const response = await fetch(buildUrlWithTemplate(apiEndpoints.sectionsCreate), {
                 method: 'POST',
                 headers: {
@@ -447,6 +462,16 @@ const ProposalTemplateSectionManager = ({
                     onDelete={handleDeleteSection}
                     onToggleVisibility={handleToggleVisibility}
                     useDragHandle
+                    lockAxis="y"
+                    helperClass="sortable-helper"
+                    transitionDuration={200}
+                    shouldCancelStart={(e) => {
+                        // Prevent drag from starting on interactive elements
+                        if (e.target.closest('button, input, textarea, select, a')) {
+                            return true;
+                        }
+                        return false;
+                    }}
                 />
             )}
 
@@ -454,6 +479,7 @@ const ProposalTemplateSectionManager = ({
                 <SectionTypeSelector
                     onSelect={handleAddSection}
                     onCancel={() => setShowSectionTypeSelector(false)}
+                    existingSections={sections}
                 />
             )}
 

package/src/components/proposal/SectionEditor.jsx

@@ -37,12 +37,38 @@ const SectionEditor = ({ section, availableVariables = [], onSave, onCancel }) =
         }
     }, [section]);
 
+    // Function to extract variables from content
+    const extractVariablesFromContent = (content) => {
+        if (!content || typeof content !== 'string') return [];
+        
+        const variableMatches = content.match(/{{(\w+)}}/g);
+        if (!variableMatches) return [];
+        
+        const variables = variableMatches.map(match => 
+            match.replace(/[{}]/g, '')
+        );
+        
+        // Return unique variables
+        return [...new Set(variables)];
+    };
+
     const handleInputChange = (field, value) => {
         console.log(`Field change: ${field} =`, value);
-        setFormData(prev => ({
-            ...prev,
-            [field]: value
-        }));
+        
+        // If content is being changed, update variables automatically
+        if (field === 'content') {
+            const extractedVariables = extractVariablesFromContent(value);
+            setFormData(prev => ({
+                ...prev,
+                [field]: value,
+                variables: extractedVariables
+            }));
+        } else {
+            setFormData(prev => ({
+                ...prev,
+                [field]: value
+            }));
+        }
     };
 
     const handleStylingChange = (property, value) => {
@@ -61,17 +87,21 @@ const SectionEditor = ({ section, availableVariables = [], onSave, onCancel }) =
         // Try to insert at cursor position in TinyMCE editor
         if (window.tinymce && window.tinymce.activeEditor) {
             window.tinymce.activeEditor.insertContent(variableTag);
+            
+            // Get the updated content and extract variables
+            setTimeout(() => {
+                const updatedContent = window.tinymce.activeEditor.getContent();
+                const extractedVariables = extractVariablesFromContent(updatedContent);
+                setFormData(prev => ({
+                    ...prev,
+                    content: updatedContent,
+                    variables: extractedVariables
+                }));
+            }, 100);
         } else {
             // Fallback: append to content
-            handleInputChange('content', formData.content + variableTag);
-        }
-        
-        // Add to variables array if not already present
-        if (!formData.variables.includes(variable)) {
-            setFormData(prev => ({
-                ...prev,
-                variables: [...prev.variables, variable]
-            }));
+            const updatedContent = formData.content + variableTag;
+            handleInputChange('content', updatedContent);
         }
         
         setShowVariableInserter(false);
@@ -105,9 +135,13 @@ const SectionEditor = ({ section, availableVariables = [], onSave, onCancel }) =
             }
         }
 
+        // Extract variables from final content before saving
+        const extractedVariables = extractVariablesFromContent(currentContent);
+        
         const finalFormData = {
             ...formData,
-            content: currentContent
+            content: currentContent,
+            variables: extractedVariables
         };
 
         console.log('Final form data being saved:', finalFormData);

package/src/components/proposal/SectionTypeSelector.css

@@ -274,4 +274,58 @@
     .section-type-modal-body {
         padding: 1rem;
     }
+}
+
+/* Disabled Section State */
+.section-type-card.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: #f8f9fa !important;
+    border-color: #e9ecef !important;
+    transform: none !important;
+}
+
+.section-type-card.disabled:hover {
+    transform: none !important;
+    box-shadow: none !important;
+    border-color: #e9ecef !important;
+}
+
+.section-type-card.disabled .section-type-icon {
+    opacity: 0.6;
+}
+
+.section-type-card.disabled .section-type-name,
+.section-type-card.disabled .section-type-description {
+    color: #6c757d !important;
+}
+
+/* Already Used Badge */
+.used-badge {
+    display: inline-block;
+    background: #dc3545;
+    color: white;
+    font-size: 0.65rem;
+    font-weight: 500;
+    padding: 0.15rem 0.4rem;
+    border-radius: 0.25rem;
+    margin-left: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    vertical-align: middle;
+}
+
+/* Dynamic Badge - Enhanced */
+.dynamic-badge {
+    display: inline-block;
+    background: #28a745;
+    color: white;
+    font-size: 0.65rem;
+    font-weight: 500;
+    padding: 0.15rem 0.4rem;
+    border-radius: 0.25rem;
+    margin-left: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    vertical-align: middle;
 }