@visns-studio/visns-components 5.11.6 → 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

@@ -218,6 +218,52 @@
     color: #374151;
 }
 
+/* Compact HTML content styling for proposal previews */
+.proposal-preview-prose h1,
+.proposal-preview-prose h2,
+.proposal-preview-prose h3,
+.proposal-preview-prose h4,
+.proposal-preview-prose h5,
+.proposal-preview-prose h6 {
+    font-size: 0.95rem !important;
+    line-height: 1.2 !important;
+    margin: 0 0 0.5rem 0 !important;
+    font-weight: 600;
+    color: #374151 !important;
+}
+
+.proposal-preview-prose p {
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    margin: 0 0 0.5rem 0 !important;
+    color: #374151 !important;
+}
+
+.proposal-preview-prose ul,
+.proposal-preview-prose ol {
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    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.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 {
     border-bottom: 1px solid #f3f4f6;
     padding-bottom: 1.5rem;
@@ -242,6 +288,52 @@
     line-height: 1.6;
 }
 
+/* Compact HTML content styling for individual section content */
+.proposal-preview-section-content h1,
+.proposal-preview-section-content h2,
+.proposal-preview-section-content h3,
+.proposal-preview-section-content h4,
+.proposal-preview-section-content h5,
+.proposal-preview-section-content h6 {
+    font-size: 0.95rem !important;
+    line-height: 1.2 !important;
+    margin: 0 0 0.5rem 0 !important;
+    font-weight: 600;
+    color: #4b5563 !important;
+}
+
+.proposal-preview-section-content p {
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    margin: 0 0 0.5rem 0 !important;
+    color: #4b5563 !important;
+}
+
+.proposal-preview-section-content ul,
+.proposal-preview-section-content ol {
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    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.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 {
     text-align: center;
     padding: 3rem 1rem;

package/src/components/proposal/ProposalTemplatePreview.jsx

@@ -100,7 +100,13 @@ const ProposalTemplatePreview = ({
             
             const data = await response.json();
             if (data.success) {
-                setPreviewData(data.data);
+                // Ensure variables_used exists, fallback to client-side extraction
+                const responseData = {
+                    ...data.data,
+                    variables_used: data.data.variables_used || extractVariablesFromSections(data.data.sections || [])
+                };
+                
+                setPreviewData(responseData);
             } else {
                 throw new Error(data.message || 'Failed to load preview');
             }

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 {
@@ -145,20 +187,37 @@
 .section-content-preview h1,
 .section-content-preview h2,
 .section-content-preview h3,
-.section-content-preview h4 {
-    margin: 0 0 0.25rem 0;
-    font-size: 0.875rem;
+.section-content-preview h4,
+.section-content-preview h5,
+.section-content-preview h6 {
+    font-size: 0.8rem !important;
+    line-height: 1.1 !important;
+    margin: 0 0 0.125rem 0 !important;
     font-weight: 600;
+    color: #475569 !important;
 }
 
 .section-content-preview p {
-    margin: 0 0 0.25rem 0;
+    font-size: 0.75rem !important;
+    line-height: 1.2 !important;
+    margin: 0 0 0.125rem 0 !important;
+    color: #475569 !important;
 }
 
 .section-content-preview ul,
 .section-content-preview ol {
-    margin: 0 0 0.25rem 1rem;
+    font-size: 0.75rem !important;
+    line-height: 1.2 !important;
+    margin: 0 0 0.125rem 1rem !important;
     padding: 0;
+    color: #475569 !important;
+}
+
+.section-content-preview li {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 0.75rem !important;
+    line-height: 1.2 !important;
 }
 
 .section-no-content {

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.css

@@ -247,23 +247,78 @@
     color: #374151;
 }
 
+/* Compact HTML content styling for section editor preview */
 .section-editor-preview .prose h1,
 .section-editor-preview .prose h2,
 .section-editor-preview .prose h3,
-.section-editor-preview .prose h4 {
-    color: #1f2937;
-    margin-top: 0;
-    margin-bottom: 0.5rem;
+.section-editor-preview .prose h4,
+.section-editor-preview .prose h5,
+.section-editor-preview .prose h6 {
+    font-size: 0.95rem !important;
+    line-height: 1.2 !important;
+    margin: 0 0 0.5rem 0 !important;
+    font-weight: 600;
+    color: #1f2937 !important;
 }
 
 .section-editor-preview .prose p {
-    margin-bottom: 0.75rem;
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    margin: 0 0 0.5rem 0 !important;
+    color: #374151 !important;
 }
 
 .section-editor-preview .prose ul,
 .section-editor-preview .prose ol {
-    margin-bottom: 0.75rem;
-    padding-left: 1.5rem;
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    margin: 0 0 0.5rem 1rem !important;
+    padding: 0;
+    color: #374151 !important;
+}
+
+.section-editor-preview .prose li {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+}
+
+/* Also apply to direct preview content without prose class */
+.section-editor-preview h1,
+.section-editor-preview h2,
+.section-editor-preview h3,
+.section-editor-preview h4,
+.section-editor-preview h5,
+.section-editor-preview h6 {
+    font-size: 0.95rem !important;
+    line-height: 1.2 !important;
+    margin: 0 0 0.5rem 0 !important;
+    font-weight: 600;
+    color: #1f2937 !important;
+}
+
+.section-editor-preview p {
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    margin: 0 0 0.5rem 0 !important;
+    color: #374151 !important;
+}
+
+.section-editor-preview ul,
+.section-editor-preview ol {
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
+    margin: 0 0 0.5rem 1rem !important;
+    padding: 0;
+    color: #374151 !important;
+}
+
+.section-editor-preview li {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 0.875rem !important;
+    line-height: 1.4 !important;
 }
 
 .section-editor-styling-panel {