@visns-studio/visns-components 5.11.5 → 5.11.6

package/src/components/proposal/ProposalTemplatePreview.jsx

@@ -0,0 +1,331 @@
+import React, { useState, useEffect } from 'react';
+import { Eye, Download, RefreshCw, ExternalLink } from 'lucide-react';
+import { buildUrl, defaultProposalApiEndpoints } from '../../utils/urlBuilder';
+import './ProposalTemplatePreview.css';
+
+// Helper function to extract variables from sections
+const extractVariablesFromSections = (sections) => {
+    const variables = new Set();
+    sections.forEach(section => {
+        if (section.variables && Array.isArray(section.variables)) {
+            section.variables.forEach(variable => variables.add(variable));
+        }
+        // Also extract from content using regex
+        if (section.content) {
+            const matches = section.content.match(/{{(\w+)}}/g);
+            if (matches) {
+                matches.forEach(match => {
+                    const variable = match.replace(/[{}]/g, '');
+                    variables.add(variable);
+                });
+            }
+        }
+    });
+    return Array.from(variables);
+};
+
+const ProposalTemplatePreview = ({ 
+    templateId, 
+    templateData,
+    apiEndpoints = defaultProposalApiEndpoints
+}) => {
+    const [previewData, setPreviewData] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [selectedBrandingProfile, setSelectedBrandingProfile] = useState('');
+    const [brandingProfiles, setBrandingProfiles] = useState([]);
+
+    // Helper function to replace template variables in URLs with templateId included
+    const buildUrlWithTemplate = (urlTemplate, params = {}) => {
+        return buildUrl(urlTemplate, { templateId, ...params });
+    };
+
+    useEffect(() => {
+        if (templateId) {
+            loadBrandingProfiles();
+            if (templateData) {
+                // Use template data if available
+                setPreviewData({
+                    template: templateData,
+                    sections: templateData.sections || [],
+                    variables_used: extractVariablesFromSections(templateData.sections || [])
+                });
+            } else {
+                loadPreview();
+            }
+        }
+    }, [templateId, templateData]);
+
+    const loadBrandingProfiles = async () => {
+        try {
+            const response = await fetch(apiEndpoints.brandingProfiles, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                }
+            });
+            const data = await response.json();
+            
+            // Handle different response formats
+            let profiles = [];
+            if (data && data.success && Array.isArray(data.data)) {
+                profiles = data.data;
+            } else if (Array.isArray(data)) {
+                profiles = data;
+            }
+            
+            setBrandingProfiles(profiles);
+            if (profiles.length > 0) {
+                setSelectedBrandingProfile(profiles[0].id);
+            }
+        } catch (error) {
+            console.error('Error loading branding profiles:', error);
+            setBrandingProfiles([]);
+        }
+    };
+
+    const loadPreview = async () => {
+        if (!templateId) return;
+
+        try {
+            setIsLoading(true);
+            setError(null);
+            
+            const response = await fetch(`${buildUrlWithTemplate(apiEndpoints.templatePreview)}?branding_profile_id=${selectedBrandingProfile}`);
+            
+            if (!response.ok) {
+                throw new Error('Failed to load preview');
+            }
+            
+            const data = await response.json();
+            if (data.success) {
+                setPreviewData(data.data);
+            } else {
+                throw new Error(data.message || 'Failed to load preview');
+            }
+        } catch (error) {
+            console.error('Error loading preview:', error);
+            setError(error.message);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleBrandingChange = (profileId) => {
+        setSelectedBrandingProfile(profileId);
+    };
+
+    const handleRefreshPreview = () => {
+        loadPreview();
+    };
+
+    const handleDownloadPDF = async () => {
+        try {
+            const response = await fetch(`${buildUrlWithTemplate(apiEndpoints.templatePdf)}?branding_profile_id=${selectedBrandingProfile}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                }
+            });
+
+            if (response.ok) {
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `proposal-template-${templateId}.pdf`;
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } else {
+                throw new Error('Failed to generate PDF');
+            }
+        } catch (error) {
+            console.error('Error downloading PDF:', error);
+            alert('Failed to download PDF. Please try again.');
+        }
+    };
+
+    const handleOpenFullPreview = () => {
+        const url = `${buildUrlWithTemplate(apiEndpoints.templateFullPreview)}?branding_profile_id=${selectedBrandingProfile}&full=1`;
+        window.open(url, '_blank');
+    };
+
+    if (!templateId) {
+        return (
+            <div className="proposal-preview-no-template">
+                <Eye size={48} className="proposal-preview-no-template-icon" />
+                <h3 className="proposal-preview-no-template-title">No Template Selected</h3>
+                <p className="proposal-preview-no-template-text">Save the template first to see the preview</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="proposal-preview-container">
+            {/* Preview Controls */}
+            <div className="proposal-preview-controls">
+                <div className="proposal-preview-branding-section">
+                    <div>
+                        <label className="proposal-preview-branding-label">
+                            Branding Profile
+                        </label>
+                        <select
+                            value={selectedBrandingProfile}
+                            onChange={(e) => handleBrandingChange(e.target.value)}
+                            className="proposal-preview-branding-select"
+                        >
+                            <option value="">Default Branding</option>
+                            {Array.isArray(brandingProfiles) && brandingProfiles.map(profile => (
+                                <option key={profile.id} value={profile.id}>
+                                    {profile.name}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+
+                <div className="proposal-preview-actions">
+                    <button
+                        onClick={handleRefreshPreview}
+                        disabled={isLoading}
+                        className="proposal-preview-btn secondary"
+                    >
+                        <RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
+                        Refresh
+                    </button>
+                    
+                    <button
+                        onClick={handleOpenFullPreview}
+                        className="proposal-preview-btn outline"
+                    >
+                        <ExternalLink size={16} />
+                        Full Preview
+                    </button>
+                    
+                    <button
+                        onClick={handleDownloadPDF}
+                        className="proposal-preview-btn primary"
+                    >
+                        <Download size={16} />
+                        Download PDF
+                    </button>
+                </div>
+            </div>
+
+            {/* Preview Content */}
+            <div className="proposal-preview-content">
+                {isLoading ? (
+                    <div className="proposal-preview-loading">
+                        <div className="proposal-preview-loading-content">
+                            <RefreshCw size={32} className="proposal-preview-loading-icon" />
+                            <p className="proposal-preview-loading-text">Loading preview...</p>
+                        </div>
+                    </div>
+                ) : error ? (
+                    <div className="proposal-preview-error">
+                        <div className="proposal-preview-error-content">
+                            <div className="proposal-preview-error-icon">⚠️</div>
+                            <h3 className="proposal-preview-error-title">Preview Error</h3>
+                            <p className="proposal-preview-error-message">{error}</p>
+                            <button
+                                onClick={handleRefreshPreview}
+                                className="proposal-preview-btn primary"
+                            >
+                                Try Again
+                            </button>
+                        </div>
+                    </div>
+                ) : previewData ? (
+                    <div>
+                        {/* Preview Header */}
+                        <div className="proposal-preview-header">
+                            <div className="proposal-preview-header-content">
+                                <div className="proposal-preview-header-info">
+                                    <h3>Template Preview</h3>
+                                    <p className="proposal-preview-header-meta">
+                                        {previewData.sections?.length || 0} sections • 
+                                        Variables: {previewData.variables_used?.length || 0}
+                                    </p>
+                                </div>
+                                <div className="proposal-preview-header-timestamp">
+                                    Last updated: {new Date().toLocaleString()}
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Preview Body */}
+                        <div className="proposal-preview-body">
+                            <div className="proposal-preview-prose">
+                                {previewData.html ? (
+                                    <div dangerouslySetInnerHTML={{ __html: previewData.html }} />
+                                ) : previewData.sections && previewData.sections.length > 0 ? (
+                                    <div>
+                                        {previewData.sections.map((section, index) => (
+                                            <div key={section.id || index} className="proposal-preview-section">
+                                                <h3 className="proposal-preview-section-title">
+                                                    {section.title}
+                                                </h3>
+                                                <div 
+                                                    className="proposal-preview-section-content"
+                                                    dangerouslySetInnerHTML={{ 
+                                                        __html: section.content || '<em>No content</em>' 
+                                                    }} 
+                                                />
+                                            </div>
+                                        ))}
+                                    </div>
+                                ) : (
+                                    <div className="proposal-preview-empty">
+                                        No content to preview
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Preview Footer */}
+                        {previewData.sections && previewData.sections.length > 0 && (
+                            <div className="proposal-preview-footer">
+                                <div className="proposal-preview-footer-tags">
+                                    {previewData.sections.map((section, index) => (
+                                        <span
+                                            key={index}
+                                            className="proposal-preview-section-tag"
+                                        >
+                                            {section.title}
+                                        </span>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div className="proposal-preview-no-template">
+                        <Eye size={48} className="proposal-preview-no-template-icon" />
+                        <h3 className="proposal-preview-no-template-title">No Preview Available</h3>
+                        <p className="proposal-preview-no-template-text">Add some sections to see the preview</p>
+                    </div>
+                )}
+            </div>
+
+            {/* Variables Summary */}
+            {previewData?.variables_used && previewData.variables_used.length > 0 && (
+                <div className="proposal-preview-variables">
+                    <h4 className="proposal-preview-variables-title">Variables Used in This Template</h4>
+                    <div className="proposal-preview-variables-list">
+                        {previewData.variables_used.map((variable, index) => (
+                            <span key={index} className="proposal-preview-variable-tag">
+                                {`{{${variable}}}`}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ProposalTemplatePreview;

package/src/components/proposal/ProposalTemplateSectionManager.css

@@ -0,0 +1,321 @@
+/* Proposal Template Section Manager Styles */
+.proposal-section-manager {
+    padding: 1rem;
+    background: #f8fafc;
+    min-height: 400px;
+}
+
+.section-item {
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease-in-out;
+    overflow: hidden;
+}
+
+.section-item:hover {
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+    border-color: #cbd5e1;
+    transform: translateY(-1px);
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #f1f5f9;
+    background: #fcfcfd;
+}
+
+.section-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex: 1;
+}
+
+.drag-handle {
+    cursor: move;
+    padding: 0.5rem;
+    color: #9ca3af;
+    transition: color 0.2s;
+}
+
+.drag-handle:hover {
+    color: #6b7280;
+}
+
+.section-title {
+    font-weight: 600;
+    color: #1e293b;
+    margin: 0;
+    font-size: 0.95rem;
+}
+
+.section-type-badge {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    background-color: #e0f2fe;
+    color: #0c4a6e;
+    border-radius: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+}
+
+.section-dynamic-badge {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    background-color: #d1fae5;
+    color: #065f46;
+    border-radius: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+}
+
+.section-meta {
+    font-size: 0.8rem;
+    color: #64748b;
+    margin-top: 0.25rem;
+    font-weight: 500;
+}
+
+.section-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.section-action-btn {
+    padding: 0.5rem;
+    color: #9ca3af;
+    background: none;
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.section-action-btn:hover {
+    color: #6b7280;
+    background-color: #f3f4f6;
+}
+
+.section-action-btn.edit {
+    padding: 0.25rem 0.75rem;
+    color: #2563eb;
+    font-size: 0.875rem;
+}
+
+.section-action-btn.edit:hover {
+    color: #1d4ed8;
+    background-color: #eff6ff;
+}
+
+.section-action-btn.delete {
+    color: #dc2626;
+}
+
+.section-action-btn.delete:hover {
+    color: #b91c1c;
+    background-color: #fef2f2;
+}
+
+.section-content {
+    padding: 0.75rem 1rem;
+    max-height: 120px;
+    overflow: hidden;
+    background: #fafbfc;
+    border-top: 1px solid #f1f5f9;
+}
+
+.section-content-preview {
+    font-size: 0.75rem;
+    line-height: 1.3;
+    color: #475569;
+    position: relative;
+}
+
+/* Removed gradient overlay that was causing blurred text */
+
+.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;
+    font-weight: 600;
+}
+
+.section-content-preview p {
+    margin: 0 0 0.25rem 0;
+}
+
+.section-content-preview ul,
+.section-content-preview ol {
+    margin: 0 0 0.25rem 1rem;
+    padding: 0;
+}
+
+.section-no-content {
+    color: #9ca3af;
+    font-style: italic;
+    margin: 0;
+    padding: 0.5rem 0;
+}
+
+.add-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
+    padding: 1rem;
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+}
+
+.add-section-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #1e293b;
+    margin: 0;
+}
+
+.add-section-description {
+    font-size: 0.85rem;
+    color: #64748b;
+    margin-top: 0.25rem;
+    font-weight: 500;
+}
+
+.add-section-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: white;
+    background: #3cbf7d;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(60, 191, 125, 0.25);
+}
+
+.add-section-btn:hover {
+    background: #1b3933;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(27, 57, 51, 0.35);
+}
+
+.empty-state {
+    text-align: center;
+    padding: 3rem;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 2px dashed #cbd5e1;
+    border-radius: 12px;
+    margin: 1rem 0;
+}
+
+.empty-state-icon {
+    margin: 0 auto 1rem;
+    color: #94a3b8;
+    opacity: 0.7;
+}
+
+.empty-state-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #334155;
+    margin: 0 0 0.5rem 0;
+}
+
+.empty-state-description {
+    color: #64748b;
+    margin: 0 0 1.5rem 0;
+    font-size: 0.95rem;
+}
+
+.empty-state-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: white;
+    background: #3cbf7d;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(60, 191, 125, 0.25);
+}
+
+.empty-state-btn:hover {
+    background: #1b3933;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(27, 57, 51, 0.35);
+}
+
+
+/* Loading state */
+.loading-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+}
+
+.spinner {
+    animation: spin 1s linear infinite;
+    border: 2px solid #f3f4f6;
+    border-top: 2px solid #2563eb;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Sortable styling */
+.sortable-helper {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    transform: rotate(5deg);
+    z-index: 9999;
+}
+
+.sortable-ghost {
+    opacity: 0.4;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+    
+    .section-actions {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .add-section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+}