@visns-studio/visns-components 5.11.5 → 5.11.6

package/README.md

@@ -2350,6 +2350,359 @@ We welcome contributions! Please follow these steps:
 
 [MIT License](LICENSE)
 
+### Quote Management Components
+
+#### GenericQuote (Enhanced with Proposal System v5.12.0+)
+
+The GenericQuote component provides comprehensive quote management with integrated proposal generation capabilities. It supports both traditional quote display and full proposal creation with cover pages, table of contents, and customizable sections.
+
+```jsx
+<GenericQuote
+    config={{
+        // Basic quote configuration
+        data: quoteData,
+        currency: "AUD",
+        companyLogo: "/path/to/logo.png",
+        
+        // Standard features
+        showLineItems: true,
+        allowEditing: true,
+        showNotes: true,
+        
+        // Enhanced proposal features (v5.12.0+)
+        proposalMode: {
+            enabled: true,
+            templateId: 1,
+            brandingProfileId: 2,
+            customSections: [
+                {
+                    type: 'overview',
+                    title: 'Project Overview',
+                    content: '<h1>Executive Summary</h1><p>This proposal outlines...</p>'
+                },
+                {
+                    type: 'terms_conditions',
+                    title: 'Terms & Conditions',
+                    content: '<h3>Payment Terms</h3><p>Net 30 days...</p>'
+                }
+            ]
+        }
+    }}
+    userProfile={userProfile}
+    onQuoteSave={(quoteData) => handleQuoteSave(quoteData)}
+    onProposalGenerate={(proposalData) => handleProposalGeneration(proposalData)}
+/>
+```
+
+**New Proposal Features:**
+
+1. **Proposal Mode Toggle**:
+   - Seamlessly switch between quote view and proposal generation mode
+   - Maintains full backward compatibility with existing quote functionality
+   - Context-aware interface that adapts based on proposal configuration
+
+2. **Template Management Integration**:
+   - Select from pre-configured proposal templates
+   - Template preview with variable substitution
+   - Custom section creation and ordering
+   - Dynamic content population from quote data
+
+3. **Branding Profile Support**:
+   - Company logo and branding integration
+   - Custom color schemes and styling
+   - Professional cover page generation
+   - Consistent brand presentation
+
+4. **Advanced Section Management**:
+   - **Cover Page**: Company branding with proposal title and customer details
+   - **Table of Contents**: Auto-generated from all proposal sections
+   - **Overview**: Executive summary with custom headers (H1, H2, H3) and content
+   - **Quote Items**: Pricing table following original quote structure
+   - **Terms & Conditions**: Static legal terms (rarely changes)
+   - **Payment Terms**: Dynamic payment schedules and due dates
+   - **Review Log**: Version history and change tracking
+   - **Agreement & Signatures**: Static signature section for approvals
+
+5. **Dynamic Content System**:
+   - Variable replacement throughout all sections
+   - Real-time preview of populated content
+   - Support for both static and dynamic sections
+   - Custom variable definitions per template
+
+**Configuration Options:**
+
+```jsx
+const proposalConfig = {
+    // Enable proposal features
+    enabled: true,
+    
+    // Template selection
+    templateId: 1,                          // Selected proposal template
+    allowTemplateChange: true,              // Allow template switching
+    
+    // Branding configuration
+    brandingProfileId: 2,                   // Selected branding profile
+    allowBrandingChange: true,              // Allow branding changes
+    
+    // Section customization
+    customSections: [
+        {
+            type: 'overview',
+            title: 'Project Overview',
+            content: '<h1>Executive Summary</h1><p>Custom content...</p>',
+            variables: {
+                'project_scope': 'Website development and maintenance',
+                'timeline': '8-12 weeks'
+            }
+        }
+    ],
+    
+    // Generation settings
+    autoGenerateTOC: true,                  // Auto-generate table of contents
+    includePageNumbers: true,               // Add page numbers to PDF
+    watermark: false,                       // Add watermark to pages
+    
+    // PDF export options
+    paperSize: 'A4',                        // Paper size for PDF generation
+    orientation: 'portrait',                // Page orientation
+    margins: '40px',                        // Page margins
+    
+    // UI customization
+    showPreview: true,                      // Show live preview panel
+    previewMode: 'split',                   // 'split', 'modal', 'tabs'
+    enableSectionReorder: true,             // Allow section drag-and-drop
+    showVariableHelper: true,               // Show available variables
+};
+```
+
+**Available Variables for Dynamic Content:**
+
+The proposal system supports these built-in variables that are automatically populated from quote and customer data:
+
+```javascript
+// Customer Information
+{{customer_name}}           // Customer company name
+{{customer_address}}        // Customer full address
+{{customer_contact}}        // Primary contact name
+{{customer_email}}          // Primary contact email
+{{customer_phone}}          // Primary contact phone
+
+// Quote Information
+{{quote_number}}            // Quote/proposal number
+{{quote_date}}              // Quote creation date
+{{quote_valid_until}}       // Quote expiration date
+{{total_amount}}            // Total quote amount (formatted)
+{{total_ex_gst}}           // Total excluding GST
+{{total_gst}}              // GST amount
+{{currency}}               // Currency symbol/code
+
+// Company Information
+{{company_name}}            // Your company name
+{{company_address}}         // Your company address
+{{company_phone}}           // Your company phone
+{{company_email}}           // Your company email
+{{company_website}}         // Your company website
+{{company_abn}}            // Australian Business Number
+
+// Project Information
+{{project_manager}}         // Assigned project manager
+{{project_timeline}}        // Estimated timeline
+{{project_scope}}          // Project scope description
+
+// Date Variables
+{{current_date}}           // Current date
+{{due_date}}              // Payment due date
+{{start_date}}            // Project start date
+
+// Item-Specific Variables
+{{items_onceoff}}         // One-time purchase items table
+{{items_monthly}}         // Monthly subscription items table
+{{items_yearly}}          // Yearly subscription items table
+{{line_items_total}}      // Total number of line items
+```
+
+**Integration with visns-packages Backend:**
+
+The GenericQuote component seamlessly integrates with the visns-packages proposal system:
+
+```jsx
+// Backend integration endpoints
+const proposalEndpoints = {
+    // Template management
+    templates: '/ajax/proposal-templates',
+    templatePreview: '/ajax/proposal-templates/{id}/preview',
+    
+    // Branding profiles
+    brandingProfiles: '/ajax/branding-profiles',
+    brandingCSS: '/ajax/branding-profiles/{id}/css',
+    
+    // PDF generation
+    generatePDF: '/ajax/pdf/generate-proposal',
+    previewHTML: '/ajax/pdf/preview-proposal',
+    
+    // Variable helpers
+    availableVariables: '/ajax/proposal-templates/variables/available'
+};
+```
+
+**Event Handling:**
+
+```jsx
+<GenericQuote
+    config={quoteConfig}
+    // Quote events (existing)
+    onQuoteSave={(data) => console.log('Quote saved:', data)}
+    onLineItemChange={(items) => console.log('Line items updated:', items)}
+    
+    // New proposal events
+    onProposalGenerate={(proposalData) => {
+        console.log('Proposal generated:', proposalData);
+        // Handle PDF generation or preview
+    }}
+    onTemplateChange={(templateId) => {
+        console.log('Template changed to:', templateId);
+        // Update template-specific settings
+    }}
+    onBrandingChange={(brandingId) => {
+        console.log('Branding changed to:', brandingId);
+        // Update branding-specific styling
+    }}
+    onSectionUpdate={(sections) => {
+        console.log('Sections updated:', sections);
+        // Handle custom section changes
+    }}
+    onVariableChange={(variables) => {
+        console.log('Variables updated:', variables);
+        // Handle variable substitution updates
+    }}
+/>
+```
+
+**Backward Compatibility:**
+
+All existing GenericQuote functionality remains unchanged:
+- Standard quote display and editing
+- Line item management
+- Notes and attachments
+- Export capabilities
+- Custom actions and workflows
+
+Proposal features are **opt-in** and activated only when `proposalConfig.enabled: true` is set.
+
+**Advanced Usage Example:**
+
+```jsx
+import React, { useState } from 'react';
+import { GenericQuote } from '@visns-studio/visns-components';
+
+const QuoteProposalManager = () => {
+    const [quoteData, setQuoteData] = useState({
+        id: 1,
+        number: 'Q-2024-001',
+        customer: {
+            name: 'Acme Corporation',
+            address: '123 Business St, Sydney NSW 2000',
+            contact: 'John Smith',
+            email: 'john@acme.com'
+        },
+        items: [
+            {
+                description: 'Website Development',
+                quantity: 1,
+                rate: 5000,
+                total: 5000,
+                type: 'onceoff'
+            },
+            {
+                description: 'Monthly Hosting',
+                quantity: 1,
+                rate: 99,
+                total: 99,
+                type: 'monthly'
+            }
+        ],
+        total: 5099
+    });
+
+    const [proposalMode, setProposalMode] = useState(false);
+
+    const proposalConfig = {
+        enabled: true,
+        templateId: 1,
+        brandingProfileId: 1,
+        customSections: [
+            {
+                type: 'overview',
+                title: 'Project Overview',
+                content: `
+                    <h1>Executive Summary</h1>
+                    <p>This proposal outlines our recommended solution for {{customer_name}}.</p>
+                    
+                    <h2>Project Scope</h2>
+                    <p>We will develop a modern, responsive website that meets your business requirements.</p>
+                    
+                    <h3>Key Deliverables</h3>
+                    <ul>
+                        <li>Custom website design and development</li>
+                        <li>Content management system</li>
+                        <li>Mobile-responsive design</li>
+                        <li>SEO optimization</li>
+                    </ul>
+                `
+            }
+        ],
+        autoGenerateTOC: true,
+        showPreview: true,
+        previewMode: 'split'
+    };
+
+    return (
+        <div className="quote-proposal-manager">
+            <div className="mode-toggle">
+                <button 
+                    onClick={() => setProposalMode(false)}
+                    className={!proposalMode ? 'active' : ''}
+                >
+                    Quote View
+                </button>
+                <button 
+                    onClick={() => setProposalMode(true)}
+                    className={proposalMode ? 'active' : ''}
+                >
+                    Proposal Builder
+                </button>
+            </div>
+
+            <GenericQuote
+                config={{
+                    data: quoteData,
+                    currency: "AUD",
+                    showLineItems: true,
+                    allowEditing: !proposalMode,
+                    
+                    // Enable proposal features based on mode
+                    proposalMode: proposalMode ? proposalConfig : { enabled: false }
+                }}
+                userProfile={userProfile}
+                onQuoteSave={(data) => {
+                    setQuoteData(data);
+                    console.log('Quote updated:', data);
+                }}
+                onProposalGenerate={(proposalData) => {
+                    // Generate PDF or handle proposal data
+                    console.log('Generating proposal PDF:', proposalData);
+                    
+                    // Example: Download PDF
+                    window.open(`/ajax/pdf/generate-proposal?quote_id=${quoteData.id}`, '_blank');
+                }}
+            />
+        </div>
+    );
+};
+
+export default QuoteProposalManager;
+```
+
 ## Modal Actions in Components
 
 ### Using Modal Actions in GenericQuote Component

package/package.json

@@ -13,6 +13,7 @@
         "@nivo/pie": "^0.99.0",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.2.1",
+        "@uiw/react-color": "^2.6.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
         "@vitejs/plugin-react": "^4.5.2",
@@ -27,15 +28,14 @@
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.516.0",
+        "lucide-react": "^0.518.0",
         "moment": "^2.30.1",
         "motion": "^12.18.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.19.3",
-        "react-color": "^2.19.3",
+        "react-big-calendar": "^1.19.4",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^8.4.0",
         "react-dropzone": "^14.3.8",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.5",
+    "version": "5.11.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -108,5 +108,5 @@
         "url": "https://github.com/visnsstudio/visns-components/issues"
     },
     "homepage": "https://github.com/visnsstudio/visns-components#readme",
-    "packageManager": "yarn@4.9.1"
+    "packageManager": "yarn@4.9.2"
 }

package/src/components/crm/Field.jsx

@@ -7,7 +7,7 @@ import Toggle from 'react-toggle';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
-import { BlockPicker } from 'react-color';
+import { Sketch } from '@uiw/react-color';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import { Editor } from '@tinymce/tinymce-react';
@@ -110,12 +110,13 @@ function Field({
         right: '0px',
         bottom: '0px',
         left: '0px',
+        zIndex: '999998',
     };
     const popover = {
         position: 'absolute',
-        zIndex: '2',
-        left: '20px',
-        marginTop: '6px',
+        zIndex: '999999',
+        left: '0',
+        marginTop: '8px',
     };
 
     useEffect(() => {
@@ -456,6 +457,12 @@ function Field({
         }
     };
 
+    // Utility function to detect if a string is a valid hex color
+    const isHexColor = (str) => {
+        if (!str || typeof str !== 'string') return false;
+        return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(str);
+    };
+
     const renderRelationText = (value) => {
         let text = '';
 
@@ -473,23 +480,56 @@ function Field({
             text = processKeys(value);
         }
 
+        // If the text is a hex color, render it with a color preview
+        if (isHexColor(text)) {
+            return (
+                <div className="relation-color-container">
+                    <div 
+                        className="relation-color-preview"
+                        style={{ backgroundColor: text }}
+                        title={`Color: ${text}`}
+                    ></div>
+                    <span className="relation-color-text">{text}</span>
+                </div>
+            );
+        }
+
         return text;
     };
 
     const renderRelationArrayText = (value) => {
-        let text = '';
-
         if (value && settings.nameFrom) {
-            value.forEach((a, b) => {
-                if (b > 0) {
-                    text += ', ';
-                }
-
-                text += a[settings.nameFrom];
-            });
+            return (
+                <div className="relation-array-container">
+                    {value.map((item, index) => {
+                        const itemValue = item[settings.nameFrom];
+                        
+                        if (isHexColor(itemValue)) {
+                            return (
+                                <div key={index} className="relation-color-container inline">
+                                    <div 
+                                        className="relation-color-preview"
+                                        style={{ backgroundColor: itemValue }}
+                                        title={`Color: ${itemValue}`}
+                                    ></div>
+                                    <span className="relation-color-text">{itemValue}</span>
+                                    {index < value.length - 1 && <span className="separator">, </span>}
+                                </div>
+                            );
+                        }
+                        
+                        return (
+                            <span key={index}>
+                                {itemValue}
+                                {index < value.length - 1 && ', '}
+                            </span>
+                        );
+                    })}
+                </div>
+            );
         }
 
-        return text;
+        return '';
     };
 
     const renderInput = () => {
@@ -624,52 +664,41 @@ function Field({
                 );
             case 'colour':
                 return (
-                    <div className="cpicker">
-                        <div
-                            className="cpicker__box"
-                            style={
-                                inputValue && inputValue !== 'null'
-                                    ? { background: inputValue }
-                                    : {}
-                            }
-                        ></div>
-                        <div className="cpicker__btn">
-                            <button
-                                onClick={(e) => {
-                                    e.preventDefault();
-
-                                    setColorPickerShow(
-                                        colorPickerShow === true ? false : true
+                    <div className="cpicker-inline">
+                        <div className="cpicker-preview-container">
+                            <div
+                                className="cpicker__box"
+                                data-color={inputValue && inputValue !== 'null' ? inputValue : 'No colour selected'}
+                                style={
+                                    inputValue && inputValue !== 'null'
+                                        ? { backgroundColor: inputValue }
+                                        : {}
+                                }
+                                title={inputValue && inputValue !== 'null' ? `Current colour: ${inputValue}` : 'No colour selected'}
+                            ></div>
+                            <span className="cpicker-value">
+                                {inputValue && inputValue !== 'null' ? inputValue : 'No colour selected'}
+                            </span>
+                        </div>
+                        <div className="cpicker-container">
+                            <Sketch
+                                color={
+                                    inputValue && inputValue !== 'null'
+                                        ? inputValue
+                                        : '#000000'
+                                }
+                                onChange={(color) => {
+                                    onChangeColour(
+                                        { target: { value: color.hex } },
+                                        { hex: color.hex },
+                                        settings.id
                                     );
                                 }}
-                            >
-                                Pick Color
-                            </button>
-                            {colorPickerShow === true ? (
-                                <div style={popover}>
-                                    <div
-                                        style={cover}
-                                        onClick={() => {
-                                            setColorPickerShow(false);
-                                        }}
-                                    />
-
-                                    <BlockPicker
-                                        color={
-                                            inputValue && inputValue !== 'null'
-                                                ? inputValue
-                                                : ''
-                                        }
-                                        onChangeComplete={(color, event) => {
-                                            onChangeColour(
-                                                event,
-                                                color,
-                                                settings.id
-                                            );
-                                        }}
-                                    />
-                                </div>
-                            ) : null}
+                                style={{
+                                    boxShadow: 'none',
+                                    border: 'none'
+                                }}
+                            />
                         </div>
                     </div>
                 );
@@ -1981,13 +2010,12 @@ function Field({
                                 'media',
                                 'table',
                                 'code',
-                                'hr',
                             ],
                             toolbar:
                                 'insertTextDropdown | undo redo | blocks | ' +
                                 'bold italic forecolor | alignleft aligncenter ' +
                                 'alignright alignjustify | bullist numlist outdent indent | ' +
-                                'hr | removeformat | table | code',
+                                'removeformat | table | code',
                             content_style:
                                 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                             setup: (editor) => {

package/src/components/crm/columns/ColumnRenderers.jsx

@@ -767,6 +767,25 @@ export const renderRelationColumn = ({
                         typeof value === 'string' ||
                         typeof value === 'number'
                     ) {
+                        // Check if the value is a hex color and render with color preview
+                        const isHexColor = (str) => {
+                            if (!str || typeof str !== 'string') return false;
+                            return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(str);
+                        };
+
+                        if (isHexColor(value)) {
+                            return (
+                                <div className="relation-color-container">
+                                    <div 
+                                        className="relation-color-preview"
+                                        style={{ backgroundColor: value }}
+                                        title={`Color: ${value}`}
+                                    ></div>
+                                    <span className="relation-color-text">{value}</span>
+                                </div>
+                            );
+                        }
+
                         return (
                             <CellWithTooltip
                                 value={value}