@visns-studio/visns-components 5.11.6 → 5.11.8

package/src/components/crm/generic/GenericQuote.jsx

@@ -9,7 +9,8 @@ import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
 import { showConfirmDialog } from './ConfirmationDialog';
-import { FileText, DollarSign, Clock, Eye, X } from 'lucide-react';
+import { FileText, DollarSign, Clock, Eye, X, Edit3, FileEdit, Save, Settings } from 'lucide-react';
+import { Editor } from '@tinymce/tinymce-react';
 
 import CustomFetch from '../../crm/Fetch';
 import ActionButtons from './ActionButtons';
@@ -28,14 +29,16 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
     const [data, setData] = useState({});
     const [actions, setActions] = useState(actionItems || []);
     
-    // Proposal system state (backward compatible)
-    const [proposalMode, setProposalMode] = useState(false);
+    // Proposal system state (always active)
     const [proposalTemplates, setProposalTemplates] = useState([]);
-    const [brandingProfiles, setBrandingProfiles] = useState([]);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
-    const [selectedBranding, setSelectedBranding] = useState(null);
     const [proposalPreview, setProposalPreview] = useState(null);
     const [isGeneratingProposal, setIsGeneratingProposal] = useState(false);
+    
+    // Content editor state
+    const [showContentEditor, setShowContentEditor] = useState(false);
+    const [proposalContent, setProposalContent] = useState('');
+    const [contentSectionType, setContentSectionType] = useState('content');
 
     // Modal state variables
     const [modalShow, setModalShow] = useState(false);
@@ -504,55 +507,149 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
         if (!proposalConfig) return;
 
         try {
-            // Load proposal templates
-            if (proposalConfig.templateEndpoint) {
-                const templatesRes = await CustomFetch(
-                    `${proposalConfig.templateEndpoint}/dropdown`,
-                    'POST',
-                    {}
-                );
-                if (templatesRes.success) {
-                    setProposalTemplates(templatesRes.data);
-                    
-                    // Set default template if available
-                    const defaultTemplate = templatesRes.data.find(
-                        t => t.name?.includes('Standard') || t.name?.includes('Default')
+            console.log('Loading proposal templates...');
+            // Load proposal templates using dropdown endpoint
+            const templatesRes = await CustomFetch(
+                '/ajax/proposalTemplates/dropdown',
+                'POST',
+                {}
+            );
+            
+            console.log('Templates response:', templatesRes);
+            
+            // Handle different response formats
+            let templates = [];
+            if (templatesRes.data && templatesRes.data.data && Array.isArray(templatesRes.data.data)) {
+                templates = templatesRes.data.data;
+            } else if (templatesRes.data && Array.isArray(templatesRes.data)) {
+                templates = templatesRes.data;
+            } else if (Array.isArray(templatesRes)) {
+                templates = templatesRes;
+            } else if (templatesRes.success && templatesRes.data) {
+                templates = templatesRes.data;
+            }
+            
+            console.log('Extracted templates:', templates);
+            
+            if (templates && templates.length > 0) {
+                setProposalTemplates(templates);
+                
+                // Check if quote already has a saved proposal template
+                if (data.proposal_template_id) {
+                    const savedTemplate = templates.find(t => t.id == data.proposal_template_id);
+                    if (savedTemplate) {
+                        console.log('Setting previously saved template:', savedTemplate);
+                        setSelectedTemplate(data.proposal_template_id);
+                    } else {
+                        console.log('Saved template ID not found in available templates:', data.proposal_template_id);
+                    }
+                } else {
+                    // Set default template if no saved template and available
+                    const defaultTemplate = templates.find(
+                        t => t.label?.includes('Standard') || t.label?.includes('Default')
                     );
                     if (defaultTemplate) {
+                        console.log('Setting default template:', defaultTemplate);
                         setSelectedTemplate(defaultTemplate.id);
                     }
                 }
+                
+                console.log('Templates successfully loaded:', templates.length, 'templates');
+            } else {
+                console.log('No templates found in response:', templatesRes);
             }
 
-            // Load branding profiles
-            if (proposalConfig.brandingEndpoint) {
-                const brandingRes = await CustomFetch(
-                    `${proposalConfig.brandingEndpoint}/dropdown`,
-                    'POST',
-                    {}
-                );
-                if (brandingRes.success) {
-                    setBrandingProfiles(brandingRes.data);
-                    
-                    // Load default branding
-                    const defaultBrandingRes = await CustomFetch(
-                        `${proposalConfig.brandingEndpoint}/default`,
-                        'GET',
-                        {}
-                    );
-                    if (defaultBrandingRes.success) {
-                        setSelectedBranding(defaultBrandingRes.data.id);
+            // Branding is handled at template creation time, no need to load separately
+        } catch (error) {
+            console.error('Error loading proposal data:', error);
+            toast.error('Failed to load proposal templates');
+        }
+    };
+
+    const calculateGrandTotal = () => {
+        if (!tables || tables.length === 0) return 0;
+        
+        return tables.reduce((grandTotal, table) => {
+            if (!data[table.id] || data[table.id].length === 0) return grandTotal;
+            
+            const tableTotal = table.total
+                ? parseFloat(table.total)
+                : data[table.id].reduce((sum, row) => {
+                    let total;
+                    if (typeof row.total === 'number') {
+                        total = row.total;
+                    } else if (row.total) {
+                        total = parseFloat(
+                            String(row.total).replace(/[^0-9.-]+/g, '')
+                        );
+                    } else if (row.rate && row.qty) {
+                        const rate = parseFloat(
+                            String(row.rate).replace(/[^0-9.-]+/g, '')
+                        );
+                        const qty = parseFloat(
+                            String(row.qty).replace(/[^0-9.-]+/g, '')
+                        );
+                        total = rate * qty;
+                    } else {
+                        total = 0;
                     }
-                }
+                    return sum + (isNaN(total) ? 0 : total);
+                }, 0);
+            
+            return grandTotal + (isNaN(tableTotal) ? 0 : tableTotal);
+        }, 0);
+    };
+
+    const handleTemplateSelection = async (templateId) => {
+        setSelectedTemplate(templateId);
+        
+        if (!templateId) return;
+        
+        // Save the selected template to the quote
+        try {
+            const toastId = toast.loading('Saving template selection...');
+            
+            const updateData = {
+                proposal_template_id: templateId
+            };
+            
+            const response = await CustomFetch(
+                `${page.fetchUrl}/${routeParams[urlParam]}`,
+                'PUT',
+                updateData
+            );
+            
+            if (response.success || response.data) {
+                // Update local data to reflect the change
+                setData(prevData => ({
+                    ...prevData,
+                    proposal_template_id: templateId
+                }));
+                
+                toast.update(toastId, {
+                    render: 'Template selection saved',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 2000,
+                    closeButton: true,
+                });
+            } else {
+                throw new Error(response.message || 'Failed to save template selection');
             }
         } catch (error) {
-            console.error('Error loading proposal data:', error);
-            toast.error('Failed to load proposal templates and branding');
+            console.error('Error saving template selection:', error);
+            toast.error('Failed to save template selection: ' + error.message);
+            
+            // Revert the selection on error
+            setSelectedTemplate(data.proposal_template_id || null);
         }
     };
 
     const generateProposalPreview = async () => {
-        if (!selectedTemplate || !proposalConfig?.previewEndpoint) return;
+        if (!selectedTemplate) {
+            toast.error('Please select a template first');
+            return;
+        }
 
         setIsGeneratingProposal(true);
         const toastId = toast.loading('Generating proposal preview...');
@@ -562,30 +659,106 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                 proposal_data: {
                     customer_name: data.customer?.name || 'Customer Name',
                     customer_address: data.customer?.sites?.[0] ? 
-                        `${data.customer.sites[0].address1 || ''} ${data.customer.sites[0].address2 || ''}, ${data.customer.sites[0].suburb || ''} ${data.customer.sites[0].state || ''} ${data.customer.sites[0].postcode || ''}`.trim() : 
+                        `${data.customer.sites[0].address1 || ''} ${data.customer.sites[0].address2 || ''}, ${data.customer.sites[0].suburb || ''} ${data.customer.sites[0].state?.initial || data.customer.sites[0].state?.name || ''} ${data.customer.sites[0].postcode || ''}`.trim() : 
                         'Customer Address',
-                    quote_number: data.id || 'Q-001',
-                    quote_date: data.created_at || new Date().toISOString().split('T')[0],
+                    quote_number: String(data.id || 'Q-001'),
+                    quote_date: data.created_at ? new Date(data.created_at).toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
                     current_date: new Date().toISOString().split('T')[0],
                     total_amount: formatCurrency(calculateGrandTotal()),
                     company_name: 'VISNS Studio',
+                    company_address: '660C Newcastle Street, Leederville, WA, 6007',
+                    company_phone: '08 6383 6600',
+                    company_email: 'team@omniaglobal.com.au',
+                    document_title: `Proposal for ${data.customer?.name || 'Customer'}`,
+                    project_manager: 'VISNS Studio',
                     terms_and_conditions: data.terms_and_condition || 'Standard terms and conditions apply.',
-                    items_onceoff: data.items_onceoff || [],
-                    items_monthly_subscription: data.items_monthly_subscription || [],
-                    items_yearly_subscription: data.items_yearly_subscription || [],
+                    // Provide clean item data - just essential fields as simple arrays
+                    items_onceoff: (data.items_onceoff || []).map(item => ({
+                        description: String(item.description || ''),
+                        rate: parseFloat(item.rate || 0),
+                        qty: parseFloat(item.qty || 1),
+                        total: parseFloat((parseFloat(item.rate || 0) * parseFloat(item.qty || 1)).toFixed(2))
+                    })),
+                    items_monthly_subscription: (data.items_monthly_subscription || []).map(item => ({
+                        description: String(item.description || ''),
+                        rate: parseFloat(item.rate || 0),
+                        qty: parseFloat(item.qty || 1),
+                        total: parseFloat((parseFloat(item.rate || 0) * parseFloat(item.qty || 1)).toFixed(2))
+                    })),
+                    items_yearly_subscription: (data.items_yearly_subscription || []).map(item => ({
+                        description: String(item.description || ''),
+                        rate: parseFloat(item.rate || 0),
+                        qty: parseFloat(item.qty || 1),
+                        total: parseFloat((parseFloat(item.rate || 0) * parseFloat(item.qty || 1)).toFixed(2))
+                    })),
+                    // Include saved proposal content
+                    proposal_content: data.proposal_content || null,
+                    proposal_section_type: data.proposal_section_type || 'content',
                 },
-                template_id: selectedTemplate,
-                branding_id: selectedBranding,
+                template_id: parseInt(selectedTemplate),
+                download: false, // For preview
+                paper: 'a4',
+                orientation: 'portrait'
             };
 
+            console.log('Sending proposal data for preview:', JSON.stringify(proposalData, null, 2));
+
             const response = await CustomFetch(
-                proposalConfig.previewEndpoint,
+                '/ajax/pdf/preview-proposal',
                 'POST',
                 proposalData
             );
 
-            if (response.success) {
-                setProposalPreview(response.html);
+            console.log('Preview response:', response);
+            
+            if (response.data && response.data.success) {
+                // Add DomPDF-compatible styling to the preview HTML to match PDF output
+                let htmlContent = response.data.html;
+                
+                // Inject CSS constants for consistent styling
+                const cssInjection = `
+                <style>
+                    .omnia-cover-page {
+                        background-color: #059669 !important;
+                        color: white !important;
+                    }
+                    table {
+                        border: 2px solid #333333 !important;
+                        border-collapse: collapse !important;
+                    }
+                    table th {
+                        background-color: #4fbfa5 !important;
+                        color: white !important;
+                        border: 1px solid #333333 !important;
+                    }
+                    table td {
+                        border: 1px solid #333333 !important;
+                        font-weight: 500 !important;
+                    }
+                    table tr:nth-child(even) td {
+                        background-color: #f9f9f9 !important;
+                    }
+                    table tfoot tr {
+                        background-color: #f3f4f6 !important;
+                    }
+                    table tfoot tr:last-child {
+                        background-color: #333333 !important;
+                    }
+                    table tfoot tr:last-child td {
+                        color: white !important;
+                        font-weight: bold !important;
+                    }
+                </style>
+                `;
+                
+                // Insert CSS after the <head> tag or before closing </head>
+                if (htmlContent.includes('</head>')) {
+                    htmlContent = htmlContent.replace('</head>', cssInjection + '</head>');
+                } else {
+                    htmlContent = cssInjection + htmlContent;
+                }
+                
+                setProposalPreview(htmlContent);
                 toast.update(toastId, {
                     render: 'Proposal preview generated successfully',
                     type: 'success',
@@ -594,7 +767,8 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                     closeButton: true,
                 });
             } else {
-                throw new Error(response.message || 'Failed to generate preview');
+                console.error('Preview failed with response:', response);
+                throw new Error(response.data?.message || response.data?.error || 'Failed to generate preview');
             }
         } catch (error) {
             console.error('Error generating proposal preview:', error);
@@ -611,7 +785,10 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
     };
 
     const generateProposalPDF = async () => {
-        if (!selectedTemplate || !proposalConfig?.pdfEndpoint) return;
+        if (!selectedTemplate) {
+            toast.error('Please select a template first');
+            return;
+        }
 
         setIsGeneratingProposal(true);
         const toastId = toast.loading('Generating proposal PDF...');
@@ -621,28 +798,53 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                 proposal_data: {
                     customer_name: data.customer?.name || 'Customer Name',
                     customer_address: data.customer?.sites?.[0] ? 
-                        `${data.customer.sites[0].address1 || ''} ${data.customer.sites[0].address2 || ''}, ${data.customer.sites[0].suburb || ''} ${data.customer.sites[0].state || ''} ${data.customer.sites[0].postcode || ''}`.trim() : 
+                        `${data.customer.sites[0].address1 || ''} ${data.customer.sites[0].address2 || ''}, ${data.customer.sites[0].suburb || ''} ${data.customer.sites[0].state?.initial || data.customer.sites[0].state?.name || ''} ${data.customer.sites[0].postcode || ''}`.trim() : 
                         'Customer Address',
-                    quote_number: data.id || 'Q-001',
-                    quote_date: data.created_at || new Date().toISOString().split('T')[0],
+                    quote_number: String(data.id || 'Q-001'),
+                    quote_date: data.created_at ? new Date(data.created_at).toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
                     current_date: new Date().toISOString().split('T')[0],
                     total_amount: formatCurrency(calculateGrandTotal()),
                     company_name: 'VISNS Studio',
+                    company_address: '660C Newcastle Street, Leederville, WA, 6007',
+                    company_phone: '08 6383 6600',
+                    company_email: 'team@omniaglobal.com.au',
+                    document_title: `Proposal for ${data.customer?.name || 'Customer'}`,
+                    project_manager: 'VISNS Studio',
                     terms_and_conditions: data.terms_and_condition || 'Standard terms and conditions apply.',
-                    items_onceoff: data.items_onceoff || [],
-                    items_monthly_subscription: data.items_monthly_subscription || [],
-                    items_yearly_subscription: data.items_yearly_subscription || [],
+                    // Provide clean item data - just essential fields as simple arrays
+                    items_onceoff: (data.items_onceoff || []).map(item => ({
+                        description: String(item.description || ''),
+                        rate: parseFloat(item.rate || 0),
+                        qty: parseFloat(item.qty || 1),
+                        total: parseFloat((parseFloat(item.rate || 0) * parseFloat(item.qty || 1)).toFixed(2))
+                    })),
+                    items_monthly_subscription: (data.items_monthly_subscription || []).map(item => ({
+                        description: String(item.description || ''),
+                        rate: parseFloat(item.rate || 0),
+                        qty: parseFloat(item.qty || 1),
+                        total: parseFloat((parseFloat(item.rate || 0) * parseFloat(item.qty || 1)).toFixed(2))
+                    })),
+                    items_yearly_subscription: (data.items_yearly_subscription || []).map(item => ({
+                        description: String(item.description || ''),
+                        rate: parseFloat(item.rate || 0),
+                        qty: parseFloat(item.qty || 1),
+                        total: parseFloat((parseFloat(item.rate || 0) * parseFloat(item.qty || 1)).toFixed(2))
+                    })),
+                    // Include saved proposal content
+                    proposal_content: data.proposal_content || null,
+                    proposal_section_type: data.proposal_section_type || 'content',
                 },
-                template_id: selectedTemplate,
-                branding_id: selectedBranding,
+                template_id: parseInt(selectedTemplate),
                 filename: `proposal-${data.id || 'draft'}-${new Date().toISOString().split('T')[0]}.pdf`,
                 download: true,
+                paper: 'a4',
+                orientation: 'portrait'
             };
 
             // Create a form for file download
             const form = document.createElement('form');
             form.method = 'POST';
-            form.action = proposalConfig.pdfEndpoint;
+            form.action = '/ajax/pdf/generate-proposal';
             form.style.display = 'none';
 
             // Add CSRF token
@@ -668,12 +870,6 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
             templateInput.value = selectedTemplate;
             form.appendChild(templateInput);
 
-            const brandingInput = document.createElement('input');
-            brandingInput.type = 'hidden';
-            brandingInput.name = 'branding_id';
-            brandingInput.value = selectedBranding;
-            form.appendChild(brandingInput);
-
             const filenameInput = document.createElement('input');
             filenameInput.type = 'hidden';
             filenameInput.name = 'filename';
@@ -706,15 +902,64 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
         }
     };
 
-    const toggleProposalMode = () => {
-        const newMode = !proposalMode;
-        setProposalMode(newMode);
-        
-        if (newMode && proposalTemplates.length === 0) {
-            loadProposalData();
+
+    const openContentEditor = () => {
+        // Load existing content if available
+        if (data.proposal_content) {
+            setProposalContent(data.proposal_content);
+        } else {
+            // Set default content template
+            setProposalContent(`
+                <h2>Project Overview</h2>
+                <p>Describe the project background and objectives here...</p>
+                
+                <h2>Proposed Solution</h2>
+                <p>Detail your proposed solution and approach...</p>
+                
+                <h2>Benefits</h2>
+                <ul>
+                    <li>Key benefit 1</li>
+                    <li>Key benefit 2</li>
+                    <li>Key benefit 3</li>
+                </ul>
+                
+                <h2>Implementation Timeline</h2>
+                <p>Outline the implementation phases and timeline...</p>
+            `.trim());
         }
-        
-        toast.info(newMode ? 'Switched to Proposal Mode' : 'Switched to Quote Mode');
+        setShowContentEditor(true);
+    };
+
+    const saveProposalContent = async () => {
+        try {
+            const response = await CustomFetch(
+                `/ajax/quotes/${data.id}/proposal-content`,
+                'POST',
+                {
+                    content: proposalContent,
+                    section_type: contentSectionType
+                }
+            );
+
+            if (response.data && response.data.success) {
+                toast.success('Proposal content saved successfully');
+                setShowContentEditor(false);
+                // Update the data object with the new content
+                setData(prev => ({
+                    ...prev,
+                    proposal_content: proposalContent
+                }));
+            } else {
+                throw new Error(response.data?.message || 'Failed to save content');
+            }
+        } catch (error) {
+            console.error('Error saving proposal content:', error);
+            toast.error('Failed to save proposal content: ' + error.message);
+        }
+    };
+
+    const handleContentChange = (content) => {
+        setProposalContent(content);
     };
 
     const handleAddItem = (tableId) => {
@@ -763,9 +1008,21 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
 
     useEffect(() => {
         if (actionItems && actionItems.length > 0) {
-            setActions(actionItems);
+            // Filter out proposal-related actions when proposal controls are active
+            const filteredActions = proposalConfig 
+                ? actionItems.filter(action => {
+                    // Remove actions that are now handled in the proposal controls section
+                    const proposalActionIds = ['generateProposalPDF', 'previewProposal'];
+                    const proposalActionLabels = ['Generate Proposal PDF', 'Preview Proposal'];
+                    
+                    return !proposalActionIds.includes(action.id) && 
+                           !proposalActionLabels.includes(action.label);
+                })
+                : actionItems;
+            
+            setActions(filteredActions);
         }
-    }, [actionItems]);
+    }, [actionItems, proposalConfig]);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -777,6 +1034,11 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                         {}
                     );
                     setData(res.data); // Assuming res is the data to set
+                    
+                    // If quote has a saved proposal template, set it as selected
+                    if (res.data && res.data.proposal_template_id) {
+                        setSelectedTemplate(res.data.proposal_template_id);
+                    }
                 } catch (error) {
                     console.error('Error fetching data:', error);
                 }
@@ -786,6 +1048,24 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
         fetchData();
     }, [routeParams['*']]);
 
+    // Load proposal data on component mount
+    useEffect(() => {
+        if (proposalConfig && proposalTemplates.length === 0) {
+            loadProposalData();
+        }
+    }, [proposalConfig]);
+
+    // Update selected template when data changes and templates are available
+    useEffect(() => {
+        if (data.proposal_template_id && proposalTemplates.length > 0 && !selectedTemplate) {
+            const savedTemplate = proposalTemplates.find(t => t.id == data.proposal_template_id);
+            if (savedTemplate) {
+                console.log('Setting saved template from data update:', savedTemplate);
+                setSelectedTemplate(data.proposal_template_id);
+            }
+        }
+    }, [data.proposal_template_id, proposalTemplates, selectedTemplate]);
+
     const handleActionClick = (action) => {
         // Handle different actions based on action properties
         console.log(`Action ${action.id} clicked:`, action);
@@ -1088,30 +1368,9 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                 </div>
             </div>
 
-            {/* Proposal Mode Controls (backward compatible) */}
+            {/* Proposal Controls (always active) */}
             {proposalConfig && (
                 <div className={styles.proposalControls}>
-                    <div className={styles.proposalToggle}>
-                        <button
-                            className={`${styles.modeToggle} ${proposalMode ? styles.proposalMode : styles.quoteMode}`}
-                            onClick={toggleProposalMode}
-                            disabled={isGeneratingProposal}
-                        >
-                            {proposalMode ? (
-                                <>
-                                    <FileText size={16} aria-hidden="true" />
-                                    <span>Proposal Mode</span>
-                                </>
-                            ) : (
-                                <>
-                                    <DollarSign size={16} aria-hidden="true" />
-                                    <span>Quote Mode</span>
-                                </>
-                            )}
-                        </button>
-                    </div>
-
-                    {proposalMode && (
                         <div className={styles.proposalSettings}>
                             <div className={styles.proposalSelectors}>
                                 <div className={styles.selectorGroup}>
@@ -1119,38 +1378,29 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                                     <select
                                         id="templateSelect"
                                         value={selectedTemplate || ''}
-                                        onChange={(e) => setSelectedTemplate(e.target.value)}
+                                        onChange={(e) => handleTemplateSelection(e.target.value)}
                                         className={styles.proposalSelect}
                                         disabled={isGeneratingProposal}
                                     >
                                         <option value="">Select Template</option>
                                         {proposalTemplates.map((template) => (
                                             <option key={template.id} value={template.id}>
-                                                {template.name}
+                                                {template.label}
                                             </option>
                                         ))}
                                     </select>
                                 </div>
 
-                                <div className={styles.selectorGroup}>
-                                    <label htmlFor="brandingSelect">Branding:</label>
-                                    <select
-                                        id="brandingSelect"
-                                        value={selectedBranding || ''}
-                                        onChange={(e) => setSelectedBranding(e.target.value)}
-                                        className={styles.proposalSelect}
+                                <div className={styles.proposalActions}>
+                                    <button
+                                        className={styles.editButton}
+                                        onClick={openContentEditor}
                                         disabled={isGeneratingProposal}
+                                        title="Edit proposal content"
                                     >
-                                        <option value="">Select Branding</option>
-                                        {brandingProfiles.map((profile) => (
-                                            <option key={profile.id} value={profile.id}>
-                                                {profile.name}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </div>
-
-                                <div className={styles.proposalActions}>
+                                        <Edit3 size={16} aria-hidden="true" />
+                                        <span>Edit Content</span>
+                                    </button>
                                     <button
                                         className={styles.previewButton}
                                         onClick={generateProposalPreview}
@@ -1188,12 +1438,11 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                                 </div>
                             </div>
                         </div>
-                    )}
                 </div>
             )}
 
             {/* Proposal Preview (if available) */}
-            {proposalMode && proposalPreview && (
+            {proposalPreview && (
                 <div className={styles.proposalPreviewContainer}>
                     <div className={styles.proposalPreviewHeader}>
                         <h3>Proposal Preview</h3>
@@ -1212,6 +1461,90 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                 </div>
             )}
 
+            {/* Content Editor Modal */}
+            {showContentEditor && (
+                <div className={styles.contentEditorOverlay}>
+                    <div className={styles.contentEditorModal}>
+                        <div className={styles.contentEditorHeader}>
+                            <h3>
+                                <FileEdit size={20} />
+                                Edit Proposal Content
+                            </h3>
+                            <button
+                                className={styles.closeEditor}
+                                onClick={() => setShowContentEditor(false)}
+                                aria-label="Close editor"
+                            >
+                                <X size={18} aria-hidden="true" />
+                            </button>
+                        </div>
+                        <div className={styles.contentEditorBody}>
+                            <div className={styles.editorSection}>
+                                <label className={styles.editorLabel}>
+                                    <Settings size={16} />
+                                    Section Type:
+                                    <select 
+                                        value={contentSectionType} 
+                                        onChange={(e) => setContentSectionType(e.target.value)}
+                                        className={styles.sectionTypeSelect}
+                                    >
+                                        <option value="content">Content Section</option>
+                                        <option value="overview">Overview Section</option>
+                                        <option value="solution">Solution Section</option>
+                                        <option value="benefits">Benefits Section</option>
+                                    </select>
+                                </label>
+                            </div>
+                            <div className={styles.editorContainer}>
+                                <Editor
+                                    apiKey="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"
+                                    value={proposalContent}
+                                    onEditorChange={handleContentChange}
+                                    init={{
+                                        height: '100%',
+                                        min_height: 400,
+                                        resize: false,
+                                        menubar: true,
+                                        plugins: [
+                                            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+                                            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+                                            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
+                                        ],
+                                        toolbar: 'undo redo | blocks | ' +
+                                            'bold italic forecolor | alignleft aligncenter ' +
+                                            'alignright alignjustify | bullist numlist outdent indent | ' +
+                                            'removeformat | help',
+                                        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                                        branding: false
+                                    }}
+                                />
+                            </div>
+                        </div>
+                        <div className={styles.contentEditorFooter}>
+                            <div className={styles.footerInfo}>
+                                Use rich text formatting to create professional proposal content
+                            </div>
+                            <div className={styles.footerButtons}>
+                                <button
+                                    className={styles.cancelButton}
+                                    onClick={() => setShowContentEditor(false)}
+                                >
+                                    <X size={16} />
+                                    Cancel
+                                </button>
+                                <button
+                                    className={styles.saveButton}
+                                    onClick={saveProposalContent}
+                                >
+                                    <Save size={16} />
+                                    Save Content
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
             {/* Quote content */}
             <div className={styles.quoteContent}>
                 {/* Quote header with logo and date */}