@visns-studio/visns-components 5.11.5 → 5.11.6

package/src/components/proposal/VariableInserter.jsx

@@ -0,0 +1,260 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { X, Search, Tag, User, Building, Calendar, DollarSign, FileText } from 'lucide-react';
+import { defaultProposalApiEndpoints } from '../../utils/urlBuilder';
+import './VariableInserter.css';
+
+const defaultVariables = [
+    {
+        category: 'Customer Information',
+        icon: User,
+        variables: [
+            { name: 'customer_name', description: 'Customer company name' },
+            { name: 'customer_contact_name', description: 'Primary contact name' },
+            { name: 'customer_contact_email', description: 'Primary contact email' },
+            { name: 'customer_contact_phone', description: 'Primary contact phone' },
+            { name: 'customer_address', description: 'Customer address' },
+            { name: 'customer_abn', description: 'Customer ABN' }
+        ]
+    },
+    {
+        category: 'Company Information',
+        icon: Building,
+        variables: [
+            { name: 'company_name', description: 'Your company name' },
+            { name: 'company_address', description: 'Your company address' },
+            { name: 'company_phone', description: 'Your company phone' },
+            { name: 'company_email', description: 'Your company email' },
+            { name: 'company_abn', description: 'Your company ABN' },
+            { name: 'company_website', description: 'Your company website' }
+        ]
+    },
+    {
+        category: 'Quote Details',
+        icon: FileText,
+        variables: [
+            { name: 'quote_number', description: 'Quote reference number' },
+            { name: 'quote_date', description: 'Quote creation date' },
+            { name: 'quote_valid_until', description: 'Quote expiry date' },
+            { name: 'quote_total', description: 'Total quote amount' },
+            { name: 'quote_subtotal', description: 'Quote subtotal' },
+            { name: 'quote_tax', description: 'Quote tax amount' },
+            { name: 'quote_items_table', description: 'Complete quote items table' }
+        ]
+    },
+    {
+        category: 'Project Information',
+        icon: Calendar,
+        variables: [
+            { name: 'project_name', description: 'Project title' },
+            { name: 'project_description', description: 'Project description' },
+            { name: 'project_start_date', description: 'Proposed start date' },
+            { name: 'project_end_date', description: 'Proposed end date' },
+            { name: 'project_duration', description: 'Project duration' }
+        ]
+    },
+    {
+        category: 'Sales Information',
+        icon: DollarSign,
+        variables: [
+            { name: 'salesperson_name', description: 'Sales representative name' },
+            { name: 'salesperson_email', description: 'Sales representative email' },
+            { name: 'salesperson_phone', description: 'Sales representative phone' },
+            { name: 'proposal_date', description: 'Proposal generation date' }
+        ]
+    }
+];
+
+const VariableInserter = ({ 
+    availableVariables = [], 
+    onInsert, 
+    onCancel,
+    apiEndpoints = defaultProposalApiEndpoints
+}) => {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedCategory, setSelectedCategory] = useState('all');
+    const [intelligentVariables, setIntelligentVariables] = useState([]);
+    const [isLoadingIntelligent, setIsLoadingIntelligent] = useState(false);
+    const [useIntelligentVariables, setUseIntelligentVariables] = useState(true);
+
+    // Load intelligent variables from API
+    useEffect(() => {
+        const loadIntelligentVariables = async () => {
+            if (!useIntelligentVariables) return;
+            
+            try {
+                setIsLoadingIntelligent(true);
+                const response = await fetch(apiEndpoints.intelligentVariables);
+                const data = await response.json();
+                
+                if (data.success && data.variables) {
+                    setIntelligentVariables(data.variables);
+                } else {
+                    console.warn('No intelligent variables available, falling back to defaults');
+                    setUseIntelligentVariables(false);
+                }
+            } catch (error) {
+                console.error('Failed to load intelligent variables:', error);
+                setUseIntelligentVariables(false);
+            } finally {
+                setIsLoadingIntelligent(false);
+            }
+        };
+
+        loadIntelligentVariables();
+    }, [useIntelligentVariables]);
+
+    // Merge available variables with intelligent variables or defaults
+    const allVariables = useMemo(() => {
+        if (availableVariables.length > 0) {
+            return availableVariables;
+        }
+        
+        if (useIntelligentVariables && intelligentVariables.length > 0) {
+            return intelligentVariables;
+        }
+        
+        return defaultVariables;
+    }, [availableVariables, intelligentVariables, useIntelligentVariables]);
+
+    const filteredVariables = allVariables.map(category => ({
+        ...category,
+        variables: category.variables.filter(variable =>
+            variable.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            variable.description.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+    })).filter(category => 
+        selectedCategory === 'all' || 
+        category.category.toLowerCase().includes(selectedCategory.toLowerCase())
+    ).filter(category => category.variables.length > 0);
+
+    const categories = ['all', ...allVariables.map(cat => cat.category)];
+
+    return (
+        <div className="variable-inserter-overlay">
+            <div className="variable-inserter-modal">
+                <div className="variable-inserter-header">
+                    <div>
+                        <h2 className="variable-inserter-title">Insert Variable</h2>
+                        <p className="variable-inserter-subtitle">
+                            Click on a variable to insert it at the cursor position
+                            {useIntelligentVariables && intelligentVariables.length > 0 && (
+                                <span className="variable-inserter-intelligent-indicator">
+                                    • Using intelligent model-based variables
+                                </span>
+                            )}
+                        </p>
+                        {isLoadingIntelligent && (
+                            <p className="variable-inserter-loading">
+                                Loading intelligent variables...
+                            </p>
+                        )}
+                    </div>
+                    <div className="variable-inserter-header-actions">
+                        {intelligentVariables.length > 0 && (
+                            <button
+                                onClick={() => setUseIntelligentVariables(!useIntelligentVariables)}
+                                className="variable-inserter-toggle-btn"
+                                title={useIntelligentVariables ? "Switch to default variables" : "Switch to intelligent variables"}
+                            >
+                                {useIntelligentVariables ? "Default" : "Smart"}
+                            </button>
+                        )}
+                        <button
+                            onClick={onCancel}
+                            className="variable-inserter-close-btn"
+                        >
+                            <X size={20} />
+                        </button>
+                    </div>
+                </div>
+
+                <div className="variable-inserter-search-section">
+                    <div className="variable-inserter-search-container">
+                        {/* Search */}
+                        <div className="variable-inserter-search-input-wrapper">
+                            <Search size={20} className="variable-inserter-search-icon" />
+                            <input
+                                type="text"
+                                placeholder="Search variables..."
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                className="variable-inserter-search-input"
+                            />
+                        </div>
+
+                        {/* Category Filter */}
+                        <select
+                            value={selectedCategory}
+                            onChange={(e) => setSelectedCategory(e.target.value)}
+                            className="variable-inserter-category-select"
+                        >
+                            {categories.map(category => (
+                                <option key={category} value={category}>
+                                    {category === 'all' ? 'All Categories' : category}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+
+                <div className="variable-inserter-content">
+                    {filteredVariables.length === 0 ? (
+                        <div className="variable-inserter-empty">
+                            <Tag size={48} className="variable-inserter-empty-icon" />
+                            <h3 className="variable-inserter-empty-title">No variables found</h3>
+                            <p className="variable-inserter-empty-text">Try adjusting your search or category filter</p>
+                        </div>
+                    ) : (
+                        <div className="variable-inserter-categories">
+                            {filteredVariables.map((category) => {
+                                const IconComponent = category.icon;
+                                return (
+                                    <div key={category.category} className="variable-inserter-category">
+                                        <div className="variable-inserter-category-header">
+                                            <IconComponent size={20} className="variable-inserter-category-icon" />
+                                            <h3 className="variable-inserter-category-title">
+                                                {category.category}
+                                            </h3>
+                                        </div>
+                                        <div className="variable-inserter-variables-grid">
+                                            {category.variables.map((variable) => (
+                                                <button
+                                                    key={variable.name}
+                                                    onClick={() => onInsert(variable.name)}
+                                                    className="variable-inserter-variable-button"
+                                                >
+                                                    <div className="variable-inserter-variable-content">
+                                                        <div className="variable-inserter-variable-info">
+                                                            <div className="variable-inserter-variable-name">
+                                                                {`{{${variable.name}}}`}
+                                                            </div>
+                                                            <div className="variable-inserter-variable-description">
+                                                                {variable.description}
+                                                            </div>
+                                                        </div>
+                                                        <Tag size={16} className="variable-inserter-variable-icon" />
+                                                    </div>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+
+                <div className="variable-inserter-footer">
+                    <button
+                        onClick={onCancel}
+                        className="variable-inserter-cancel-btn"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default VariableInserter;

package/src/components/proposal/index.js

@@ -0,0 +1,5 @@
+export { default as ProposalTemplateSectionManager } from './ProposalTemplateSectionManager';
+export { default as SectionEditor } from './SectionEditor';
+export { default as SectionTypeSelector } from './SectionTypeSelector';
+export { default as VariableInserter } from './VariableInserter';
+export { default as ProposalTemplatePreview } from './ProposalTemplatePreview';

package/src/components/styles/global.css

@@ -194,7 +194,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .inovua-react-toolkit-combo-box__input
     ):not(.inovua-react-toolkit-date-input__input):not(
         .inovua-react-toolkit-text-input__input
-    ):not(.inovua-react-toolkit-numeric-input__input) {
+    ):not(.inovua-react-toolkit-numeric-input__input):not(
+        .variable-inserter-search-input
+    ) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
@@ -438,6 +440,182 @@ form div:has(.react-toggle) input[type='checkbox'] {
     height: 0 !important;
 }
 
+/* Relation Color Preview Styles */
+.relation-color-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.relation-color-container.inline {
+    display: inline-flex;
+    margin-right: 4px;
+}
+
+.relation-color-preview {
+    width: 20px;
+    height: 20px;
+    border: 2px solid #dee2e6;
+    border-radius: 4px;
+    background-color: #ffffff;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+
+    /* Checkerboard pattern for transparency */
+    background-image: 
+        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
+        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+    background-size: 4px 4px;
+    background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
+}
+
+.relation-color-preview:hover {
+    border-color: #adb5bd;
+    transform: scale(1.1);
+    box-shadow: 
+        inset 0 1px 2px rgba(0, 0, 0, 0.1),
+        0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.relation-color-text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #495057;
+    font-family: 'Courier New', monospace;
+    user-select: all;
+}
+
+.relation-array-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+}
+
+.separator {
+    color: #6c757d;
+    margin: 0 2px;
+}
+
+/* Compact Inline Color Picker Styles for Forms */
+.cpicker-inline {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cpicker-preview-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    min-height: 40px;
+}
+
+.cpicker__box {
+    width: 28px;
+    height: 28px;
+    border: 2px solid #dee2e6;
+    border-radius: 6px;
+    background-color: #ffffff;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+
+    /* Checkerboard pattern for transparency */
+    background-image: 
+        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
+        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+    background-size: 6px 6px;
+    background-position: 0 0, 0 3px, 3px -3px, -3px 0px;
+}
+
+/* When no color is selected */
+.cpicker__box[style=""] {
+    background: 
+        linear-gradient(45deg, 
+            transparent 40%, 
+            #dc3545 42%, 
+            #dc3545 58%, 
+            transparent 60%
+        ),
+        linear-gradient(-45deg, 
+            transparent 40%, 
+            #dc3545 42%, 
+            #dc3545 58%, 
+            transparent 60%
+        ),
+        #ffffff;
+}
+
+.cpicker-value {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: #495057;
+    font-family: 'Courier New', monospace;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 3px 6px;
+    border-radius: 3px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    flex-grow: 1;
+}
+
+.cpicker-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 8px;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+/* Ensure Sketch picker fits well and is more compact */
+.cpicker-container .w-color-sketch {
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 6px !important;
+    max-width: 100% !important;
+    transform: scale(0.85) !important;
+    transform-origin: center top !important;
+}
+
+/* Further responsive scaling for color picker */
+@media (max-width: 768px) {
+    .cpicker-container {
+        padding: 6px;
+    }
+    
+    .cpicker-container .w-color-sketch {
+        transform: scale(0.75) !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .cpicker-container {
+        padding: 4px;
+    }
+    
+    .cpicker-container .w-color-sketch {
+        transform: scale(0.65) !important;
+    }
+}
+
 /* Safari-specific fixes for form elements */
 @supports (-webkit-touch-callout: none) {
     /* Safari-specific styles */

package/src/index.js

@@ -65,6 +65,14 @@ import GenericReport from './components/crm/generic/GenericReport';
 import GenericSort from './components/crm/generic/GenericSort';
 import NotificationList from './components/crm/generic/NotificationList';
 
+/** Proposal Components */
+import ProposalTemplateSectionManager from './components/proposal/ProposalTemplateSectionManager';
+import SectionEditor from './components/proposal/SectionEditor';
+import SectionTypeSelector from './components/proposal/SectionTypeSelector';
+import VariableInserter from './components/proposal/VariableInserter';
+import ProposalTemplatePreview from './components/proposal/ProposalTemplatePreview';
+
+
 export {
     AsyncSelect,
     AssociationManager,
@@ -115,11 +123,16 @@ export {
     Notification,
     NotificationList,
     Profile,
+    ProposalTemplateSectionManager,
+    ProposalTemplatePreview,
     Reset,
+    SectionEditor,
+    SectionTypeSelector,
     SelectList,
     Select,
     SortableList,
     Table,
     TableFilter,
+    VariableInserter,
     Verify,
 };

package/src/utils/urlBuilder.js

@@ -0,0 +1,40 @@
+/**
+ * Build URL by replacing template variables with actual values
+ * @param {string} urlTemplate - URL template with placeholders like /ajax/{templateId}/sections/{sectionId}
+ * @param {object} params - Object containing parameter values
+ * @returns {string} URL with placeholders replaced
+ */
+export const buildUrl = (urlTemplate, params = {}) => {
+    let url = urlTemplate;
+    
+    Object.entries(params).forEach(([key, value]) => {
+        url = url.replace(`{${key}}`, value);
+    });
+    
+    return url;
+};
+
+/**
+ * Default API endpoints configuration for proposal system
+ */
+export const defaultProposalApiEndpoints = {
+    // Variable management
+    intelligentVariables: '/ajax/proposalTemplates/variables/intelligent',
+    availableVariables: '/ajax/proposalTemplates/variables/available',
+    
+    // Template management
+    templateData: '/ajax/proposalTemplates/{templateId}',
+    templatePreview: '/ajax/proposalTemplates/{templateId}/preview',
+    templatePdf: '/ajax/proposalTemplates/{templateId}/pdf',
+    templateFullPreview: '/ajax/proposalTemplates/{templateId}/preview',
+    
+    // Section management
+    sectionsCreate: '/ajax/proposalTemplates/{templateId}/sections',
+    sectionsUpdate: '/ajax/proposalTemplates/{templateId}/sections/{sectionId}',
+    sectionsDelete: '/ajax/proposalTemplates/{templateId}/sections/{sectionId}',
+    sectionsReorder: '/ajax/proposalTemplates/{templateId}/sections/reorder',
+    sectionsToggle: '/ajax/proposalTemplates/{templateId}/sections/{sectionId}',
+    
+    // Branding profiles
+    brandingProfiles: '/ajax/brandingProfiles/dropdown'
+};