@visns-studio/visns-components 5.13.11 → 5.13.13

package/README.md

@@ -2937,7 +2937,8 @@ const proposalEndpoints = {
     brandingCSS: '/ajax/branding-profiles/{id}/css',
     
     // PDF generation
-    generatePDF: '/ajax/pdf/generate-proposal',
+    generatePDF: '/ajax/pdf/generate-proposal',          // Legacy DomPDF
+    generatePDFSpatie: '/ajax/pdf/generate-proposal-spatie', // Recommended: Spatie PDF
     previewHTML: '/ajax/pdf/preview-proposal',
     
     // Variable helpers
@@ -3092,8 +3093,8 @@ const QuoteProposalManager = () => {
                     // 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');
+                    // Example: Download PDF (using Spatie - recommended)
+                    window.open(`/ajax/pdf/generate-proposal-spatie?quote_id=${quoteData.id}`, '_blank');
                 }}
             />
         </div>

package/package.json

@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.13.11",
+    "version": "5.13.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/proposal/AgreementSignatureEditor.css

@@ -87,6 +87,13 @@
     margin-bottom: 1rem;
 }
 
+.signature-editor-label-with-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
 .signature-btn {
     display: inline-flex;
     align-items: center;

package/src/components/proposal/AgreementSignatureEditor.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import { Plus, Trash2, Move, Type, Edit3, Save, X } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { Plus, Trash2, Move, Type, Edit3, Save, X, Tag } from 'lucide-react';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 import { toast } from 'react-toastify';
 import { buildUrl, defaultProposalApiEndpoints } from '../../utils/urlBuilder';
+import VariableInserter from './VariableInserter';
 import './AgreementSignatureEditor.css';
 
 const DragHandle = SortableHandle(() => (
@@ -195,6 +196,8 @@ const AgreementSignatureEditor = ({
     const [editingField, setEditingField] = useState(null);
     const [showFieldEditor, setShowFieldEditor] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
+    const [showVariableInserter, setShowVariableInserter] = useState(false);
+    const bodyTextRef = useRef(null);
 
     // Helper function to replace template variables in URLs
     const buildUrlWithTemplate = (urlTemplate, params = {}) => {
@@ -399,6 +402,33 @@ const AgreementSignatureEditor = ({
         });
     };
 
+    const handleVariableInsert = (variableName) => {
+        const textarea = bodyTextRef.current;
+        if (!textarea) return;
+
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const text = textarea.value;
+        const before = text.substring(0, start);
+        const after = text.substring(end, text.length);
+        const variableText = `{{${variableName}}}`;
+        
+        const newText = before + variableText + after;
+        
+        setTemplate({
+            ...template,
+            bodyText: newText
+        });
+
+        // Reset cursor position after the inserted variable
+        setTimeout(() => {
+            textarea.focus();
+            textarea.setSelectionRange(start + variableText.length, start + variableText.length);
+        }, 0);
+        
+        setShowVariableInserter(false);
+    };
+
     const handleSaveTemplate = async () => {
         try {
             setIsLoading(true);
@@ -508,7 +538,7 @@ const AgreementSignatureEditor = ({
             .join('');
 
         return `
-            <div style="padding: 2rem; border: 1px solid #ddd; border-radius: 8px; background: #fff;">
+            <div style="padding: 2rem;">
                 ${templateData.headerText ? `<h3 style="margin-bottom: 1rem; color: #333;">${templateData.headerText}</h3>` : ''}
                 <p style="margin-bottom: 2rem; line-height: 1.6;">${templateData.bodyText}</p>
                 <div style="clear: both;">${fieldsHtml}</div>
@@ -548,8 +578,20 @@ const AgreementSignatureEditor = ({
                 </div>
 
                 <div className="signature-editor-section">
-                    <label className="signature-editor-label">Body Text</label>
+                    <div className="signature-editor-label-with-button">
+                        <label className="signature-editor-label">Body Text</label>
+                        <button
+                            type="button"
+                            onClick={() => setShowVariableInserter(true)}
+                            className="signature-btn secondary small"
+                            title="Insert Variable"
+                        >
+                            <Tag size={16} />
+                            Insert Variable
+                        </button>
+                    </div>
                     <textarea
+                        ref={bodyTextRef}
                         value={template.bodyText}
                         onChange={(e) => setTemplate({...template, bodyText: e.target.value})}
                         placeholder="Enter the agreement text. Use {{variable_name}} for dynamic content."
@@ -557,7 +599,7 @@ const AgreementSignatureEditor = ({
                         rows="3"
                     />
                     <small className="signature-editor-help">
-                        Use variables like {'{{company_name}}'} for dynamic content
+                        Use variables like {'{{company_name}}'} for dynamic content. Click "Insert Variable" to browse available variables.
                     </small>
                 </div>
 
@@ -637,6 +679,14 @@ const AgreementSignatureEditor = ({
                     </div>
                 </div>
             )}
+
+            {showVariableInserter && (
+                <VariableInserter
+                    onInsert={handleVariableInsert}
+                    onCancel={() => setShowVariableInserter(false)}
+                    apiEndpoints={apiEndpoints}
+                />
+            )}
         </div>
     );
 };

package/src/components/proposal/BrandingProfileCompanyInfo.jsx

@@ -14,6 +14,7 @@ const BrandingProfileCompanyInfo = ({
         address: '',
         website: '',
         phone: '',
+        email: '',
         abn: '',
         ...brandingProfile?.company_info || {}
     });
@@ -95,12 +96,17 @@ const BrandingProfileCompanyInfo = ({
                             <strong>Phone:</strong> {companyInfo.phone}
                         </div>
                     )}
+                    {companyInfo.email && (
+                        <div className="branding-company-info-item">
+                            <strong>Email:</strong> {companyInfo.email}
+                        </div>
+                    )}
                     {companyInfo.abn && (
                         <div className="branding-company-info-item">
                             <strong>ABN:</strong> {companyInfo.abn}
                         </div>
                     )}
-                    {!companyInfo.address && !companyInfo.website && !companyInfo.phone && !companyInfo.abn && (
+                    {!companyInfo.address && !companyInfo.website && !companyInfo.phone && !companyInfo.email && !companyInfo.abn && (
                         <div className="branding-company-info-empty">
                             <Info size={16} />
                             <p>No company information added yet. Click Edit to add details.</p>
@@ -157,6 +163,17 @@ const BrandingProfileCompanyInfo = ({
                     />
                 </div>
 
+                <div className="branding-company-info-field">
+                    <label htmlFor="company-email">Email Address</label>
+                    <input
+                        type="email"
+                        id="company-email"
+                        value={companyInfo.email}
+                        onChange={(e) => handleInputChange('email', e.target.value)}
+                        placeholder="info@yourcompany.com"
+                    />
+                </div>
+
                 <div className="branding-company-info-field">
                     <label htmlFor="company-abn">ABN</label>
                     <input

package/src/components/proposal/ProposalTemplatePreview.jsx

@@ -128,12 +128,33 @@ const ProposalTemplatePreview = ({
 
     const handleDownloadPDF = async () => {
         try {
-            const response = await fetch(`${buildUrlWithTemplate(apiEndpoints.templatePdf)}?branding_profile_id=${selectedBrandingProfile}`, {
+            // Use Spatie PDF endpoint with proper payload structure
+            const payload = {
+                proposal_data: previewData?.template || {},
+                template_id: parseInt(templateId),
+                branding_id: selectedBrandingProfile ? parseInt(selectedBrandingProfile) : null,
+                sections: previewData?.sections || [],
+                header_config: {
+                    enabled: true,
+                    show_phone: true,
+                    show_email: true,
+                    show_website: true,
+                    show_address: true,
+                    show_abn: false
+                },
+                filename: `proposal-template-${templateId}.pdf`,
+                download: true
+            };
+
+            console.log('ProposalTemplatePreview: Generating PDF with payload', payload);
+
+            const response = await fetch(apiEndpoints.templatePdfSpatie, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
-                }
+                },
+                body: JSON.stringify(payload)
             });
 
             if (response.ok) {
@@ -146,8 +167,15 @@ const ProposalTemplatePreview = ({
                 a.click();
                 window.URL.revokeObjectURL(url);
                 document.body.removeChild(a);
+                console.log('ProposalTemplatePreview: PDF generated successfully');
             } else {
-                throw new Error('Failed to generate PDF');
+                const errorText = await response.text();
+                console.error('ProposalTemplatePreview: PDF generation failed', {
+                    status: response.status,
+                    statusText: response.statusText,
+                    error: errorText
+                });
+                throw new Error(`Failed to generate PDF: ${response.status} - ${response.statusText}`);
             }
         } catch (error) {
             console.error('Error downloading PDF:', error);

package/src/components/proposal/VariableInserter.css

@@ -109,6 +109,19 @@
     color: white;
 }
 
+.variable-inserter-mode-buttons {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.variable-inserter-toggle-btn.active {
+    background: rgba(60, 191, 125, 0.4);
+    border-color: rgba(60, 191, 125, 0.6);
+    color: white;
+    box-shadow: 0 0 0 2px rgba(60, 191, 125, 0.2);
+}
+
 .variable-inserter-intelligent-indicator {
     color: #3cbf7d;
     font-weight: 600;
@@ -240,8 +253,32 @@
 .variable-inserter-category-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 0.5rem;
     margin-bottom: 1rem;
+    padding: 0.75rem;
+    border-radius: 8px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    transition: all 0.2s;
+}
+
+.variable-inserter-category-header.clickable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.variable-inserter-category-header.clickable:hover {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.variable-inserter-category-header-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex: 1;
 }
 
 .variable-inserter-category-icon {
@@ -254,6 +291,30 @@
     font-weight: 600;
     color: #1f2937;
     margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.variable-inserter-field-count {
+    font-size: 0.75rem;
+    color: #64748b;
+    font-weight: 500;
+    background: #e2e8f0;
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+}
+
+.variable-inserter-expand-icon {
+    color: #64748b;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+}
+
+.variable-inserter-category-header.clickable:hover .variable-inserter-expand-icon {
+    color: #475569;
 }
 
 .variable-inserter-variables-grid {
@@ -304,6 +365,22 @@
     color: #1b3933;
     margin: 0 0 0.25rem 0;
     word-break: break-all;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.variable-inserter-calc-badge {
+    background: #f59e0b;
+    color: white;
+    font-size: 0.625rem;
+    font-weight: 700;
+    padding: 0.125rem 0.25rem;
+    border-radius: 3px;
+    letter-spacing: 0.025em;
+    font-family: 'Arial', sans-serif;
+    flex-shrink: 0;
 }
 
 .variable-inserter-variable-button:hover .variable-inserter-variable-name {

package/src/components/proposal/VariableInserter.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { X, Search, Tag, User, Building, Calendar, DollarSign, FileText } from 'lucide-react';
+import { X, Search, Tag, User, Building, Calendar, DollarSign, FileText, ChevronDown, ChevronRight } from 'lucide-react';
 import { defaultProposalApiEndpoints } from '../../utils/urlBuilder';
 import './VariableInserter.css';
 
@@ -73,8 +73,12 @@ const VariableInserter = ({
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedCategory, setSelectedCategory] = useState('all');
     const [intelligentVariables, setIntelligentVariables] = useState([]);
+    const [allDatabaseFields, setAllDatabaseFields] = useState([]);
     const [isLoadingIntelligent, setIsLoadingIntelligent] = useState(false);
-    const [useIntelligentVariables, setUseIntelligentVariables] = useState(true);
+    const [isLoadingDatabase, setIsLoadingDatabase] = useState(false);
+    const [useIntelligentVariables, setUseIntelligentVariables] = useState(false);
+    const [useAllDatabaseFields, setUseAllDatabaseFields] = useState(true);
+    const [expandedTables, setExpandedTables] = useState(new Set());
 
     // Load intelligent variables from API
     useEffect(() => {
@@ -103,29 +107,83 @@ const VariableInserter = ({
         loadIntelligentVariables();
     }, [useIntelligentVariables]);
 
-    // Merge available variables with intelligent variables or defaults
+    // Load all database fields from API
+    useEffect(() => {
+        const loadAllDatabaseFields = async () => {
+            if (!useAllDatabaseFields) return;
+            
+            try {
+                setIsLoadingDatabase(true);
+                const response = await fetch(apiEndpoints.allDatabaseFields);
+                const data = await response.json();
+                
+                if (data.success && data.tables) {
+                    setAllDatabaseFields(data.tables);
+                } else {
+                    console.warn('No database fields available, falling back to intelligent variables');
+                    setUseAllDatabaseFields(false);
+                }
+            } catch (error) {
+                console.error('Failed to load database fields:', error);
+                setUseAllDatabaseFields(false);
+            } finally {
+                setIsLoadingDatabase(false);
+            }
+        };
+
+        loadAllDatabaseFields();
+    }, [useAllDatabaseFields, apiEndpoints.allDatabaseFields]);
+
+    // Toggle table expansion
+    const toggleTable = (tableName) => {
+        const newExpanded = new Set(expandedTables);
+        if (newExpanded.has(tableName)) {
+            newExpanded.delete(tableName);
+        } else {
+            newExpanded.add(tableName);
+        }
+        setExpandedTables(newExpanded);
+    };
+
+    // Merge available variables with intelligent variables, database fields, or defaults
     const allVariables = useMemo(() => {
         if (availableVariables.length > 0) {
             return availableVariables;
         }
         
+        if (useAllDatabaseFields && allDatabaseFields.length > 0) {
+            return allDatabaseFields;
+        }
+        
         if (useIntelligentVariables && intelligentVariables.length > 0) {
             return intelligentVariables;
         }
         
         return defaultVariables;
-    }, [availableVariables, intelligentVariables, useIntelligentVariables]);
+    }, [availableVariables, allDatabaseFields, intelligentVariables, useIntelligentVariables, useAllDatabaseFields]);
 
-    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 => 
+    const filteredVariables = allVariables.map(category => {
+        // For database fields mode, we need to handle table name searching
+        const matchesSearch = searchTerm === '' || 
+            category.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            (category.table_name && category.table_name.toLowerCase().includes(searchTerm.toLowerCase()));
+        
+        // Filter variables within category if there's a search term
+        const filteredCategoryVariables = searchTerm === '' ? category.variables :
+            category.variables.filter(variable =>
+                variable.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                variable.description.toLowerCase().includes(searchTerm.toLowerCase())
+            );
+
+        return {
+            ...category,
+            variables: filteredCategoryVariables,
+            matchesSearch: matchesSearch || filteredCategoryVariables.length > 0
+        };
+    }).filter(category => 
         selectedCategory === 'all' || 
         category.category.toLowerCase().includes(selectedCategory.toLowerCase())
-    ).filter(category => category.variables.length > 0);
+    ).filter(category => category.matchesSearch);
 
     const categories = ['all', ...allVariables.map(cat => cat.category)];
 
@@ -137,7 +195,12 @@ const VariableInserter = ({
                         <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 && (
+                            {useAllDatabaseFields && allDatabaseFields.length > 0 && (
+                                <span className="variable-inserter-intelligent-indicator">
+                                    • Using all database fields ({allDatabaseFields.reduce((sum, table) => sum + table.field_count, 0)} variables from {allDatabaseFields.length} tables)
+                                </span>
+                            )}
+                            {useIntelligentVariables && intelligentVariables.length > 0 && !useAllDatabaseFields && (
                                 <span className="variable-inserter-intelligent-indicator">
                                     • Using intelligent model-based variables
                                 </span>
@@ -148,16 +211,46 @@ const VariableInserter = ({
                                 Loading intelligent variables...
                             </p>
                         )}
+                        {isLoadingDatabase && (
+                            <p className="variable-inserter-loading">
+                                Loading database fields...
+                            </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>
+                        {(intelligentVariables.length > 0 || allDatabaseFields.length > 0) && (
+                            <div className="variable-inserter-mode-buttons">
+                                <button
+                                    onClick={() => {
+                                        setUseAllDatabaseFields(true);
+                                        setUseIntelligentVariables(false);
+                                    }}
+                                    className={`variable-inserter-toggle-btn ${useAllDatabaseFields ? 'active' : ''}`}
+                                    title="Show all database fields from all tables"
+                                >
+                                    All Fields
+                                </button>
+                                <button
+                                    onClick={() => {
+                                        setUseIntelligentVariables(true);
+                                        setUseAllDatabaseFields(false);
+                                    }}
+                                    className={`variable-inserter-toggle-btn ${useIntelligentVariables && !useAllDatabaseFields ? 'active' : ''}`}
+                                    title="Show intelligent model-based variables"
+                                >
+                                    Smart
+                                </button>
+                                <button
+                                    onClick={() => {
+                                        setUseIntelligentVariables(false);
+                                        setUseAllDatabaseFields(false);
+                                    }}
+                                    className={`variable-inserter-toggle-btn ${!useIntelligentVariables && !useAllDatabaseFields ? 'active' : ''}`}
+                                    title="Show default variables"
+                                >
+                                    Default
+                                </button>
+                            </div>
                         )}
                         <button
                             onClick={onCancel}
@@ -208,35 +301,62 @@ const VariableInserter = ({
                         <div className="variable-inserter-categories">
                             {filteredVariables.map((category) => {
                                 const IconComponent = category.icon;
+                                const isExpanded = expandedTables.has(category.table_name || category.category);
+                                const isTableMode = useAllDatabaseFields && category.table_name;
+                                
                                 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 
+                                            className={`variable-inserter-category-header ${isTableMode ? 'clickable' : ''}`}
+                                            onClick={isTableMode ? () => toggleTable(category.table_name) : undefined}
+                                        >
+                                            <div className="variable-inserter-category-header-content">
+                                                <IconComponent size={20} className="variable-inserter-category-icon" />
+                                                <h3 className="variable-inserter-category-title">
+                                                    {category.category}
+                                                    {isTableMode && (
+                                                        <span className="variable-inserter-field-count">
+                                                            {category.field_count || category.variables.length} fields
+                                                        </span>
+                                                    )}
+                                                </h3>
+                                            </div>
+                                            {isTableMode && (
+                                                <div className="variable-inserter-expand-icon">
+                                                    {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                                                </div>
+                                            )}
                                         </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}
+                                        
+                                        {/* Show variables only if expanded (for table mode) or always (for other modes) */}
+                                        {(!isTableMode || isExpanded) && (
+                                            <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}}}`}
+                                                                    {variable.is_calculation_version && (
+                                                                        <span className="variable-inserter-calc-badge">
+                                                                            CALC
+                                                                        </span>
+                                                                    )}
+                                                                </div>
+                                                                <div className="variable-inserter-variable-description">
+                                                                    {variable.description}
+                                                                </div>
                                                             </div>
+                                                            <Tag size={16} className="variable-inserter-variable-icon" />
                                                         </div>
-                                                        <Tag size={16} className="variable-inserter-variable-icon" />
-                                                    </div>
-                                                </button>
-                                            ))}
-                                        </div>
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        )}
                                     </div>
                                 );
                             })}

package/src/utils/urlBuilder.js

@@ -21,11 +21,13 @@ export const defaultProposalApiEndpoints = {
     // Variable management
     intelligentVariables: '/ajax/proposalTemplates/variables/intelligent',
     availableVariables: '/ajax/proposalTemplates/variables/available',
+    allDatabaseFields: '/ajax/proposalTemplates/variables/all-database-fields',
     
     // Template management
     templateData: '/ajax/proposalTemplates/{templateId}',
     templatePreview: '/ajax/proposalTemplates/{templateId}/preview',
     templatePdf: '/ajax/proposalTemplates/{templateId}/pdf',
+    templatePdfSpatie: '/ajax/pdf/generate-proposal-spatie',
     templateFullPreview: '/ajax/proposalTemplates/{templateId}/preview',
     
     // Section management