@visns-studio/visns-components 5.11.5 → 5.11.7

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

@@ -74,6 +74,10 @@ import QrCode from '../QrCode';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
+// Proposal components
+import ProposalTemplateSectionManager from '../../proposal/ProposalTemplateSectionManager';
+import ProposalTemplatePreview from '../../proposal/ProposalTemplatePreview';
+
 import styles from './styles/GenericDetail.module.scss';
 
 const localizer = momentLocalizer(moment);
@@ -2514,7 +2518,43 @@ function GenericDetail({
                                     />
                                 );
                             }
+                            if (activeTabConfig.component === 'ProposalTemplateSectionManager') {
+                                return (
+                                    <ProposalTemplateSectionManager
+                                        {...activeTabConfig.props}
+                                        templateId={routeParams[urlParam]}
+                                        onUpdate={handleReload}
+                                    />
+                                );
+                            }
+                            if (activeTabConfig.component === 'ProposalTemplatePreview') {
+                                return (
+                                    <ProposalTemplatePreview
+                                        {...activeTabConfig.props}
+                                        templateId={routeParams[urlParam]}
+                                        onUpdate={handleReload}
+                                    />
+                                );
+                            }
                             return null;
+                        case 'proposalSectionManager':
+                            return (
+                                <ProposalTemplateSectionManager
+                                    {...activeTabConfig.props}
+                                    templateId={routeParams[urlParam]}
+                                    templateData={data}
+                                    onUpdate={handleReload}
+                                />
+                            );
+                        case 'proposalPreview':
+                            return (
+                                <ProposalTemplatePreview
+                                    {...activeTabConfig.props}
+                                    templateId={routeParams[urlParam]}
+                                    templateData={data}
+                                    onUpdate={handleReload}
+                                />
+                            );
                         default:
                             return null;
                     }

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

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import debounce from 'lodash.debounce';
 import { toast } from 'react-toastify';
 import { Trash2, ArrowUp, ArrowDown, Copy, Droplets } from 'lucide-react';
-import { CompactPicker } from 'react-color';
+import { Compact } from '@uiw/react-color';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
@@ -85,10 +85,10 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
                                 onClick={() => setColorPickerShow(false)}
                             />
                             <div className={styles.pickerContainer}>
-                                <CompactPicker
+                                <Compact
                                     color={value || ''}
                                     colors={pastelColors}
-                                    onChangeComplete={(color) => {
+                                    onChange={(color) => {
                                         onChange(
                                             color.hex,
                                             columnId,

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

@@ -9,6 +9,7 @@ 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 CustomFetch from '../../crm/Fetch';
 import ActionButtons from './ActionButtons';
@@ -18,7 +19,7 @@ import SortableTableBody from './SortableQuoteItems';
 
 import styles from './styles/GenericQuote.module.scss';
 
-function GenericQuote({ logo, setting, urlParam }) {
+function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
     const routeParams = useParams();
     const navigate = useNavigate();
 
@@ -26,6 +27,15 @@ function GenericQuote({ logo, setting, urlParam }) {
 
     const [data, setData] = useState({});
     const [actions, setActions] = useState(actionItems || []);
+    
+    // Proposal system state (backward compatible)
+    const [proposalMode, setProposalMode] = useState(false);
+    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);
 
     // Modal state variables
     const [modalShow, setModalShow] = useState(false);
@@ -489,6 +499,224 @@ function GenericQuote({ logo, setting, urlParam }) {
         });
     };
 
+    // Proposal system functions (backward compatible)
+    const loadProposalData = async () => {
+        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')
+                    );
+                    if (defaultTemplate) {
+                        setSelectedTemplate(defaultTemplate.id);
+                    }
+                }
+            }
+
+            // 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);
+                    }
+                }
+            }
+        } catch (error) {
+            console.error('Error loading proposal data:', error);
+            toast.error('Failed to load proposal templates and branding');
+        }
+    };
+
+    const generateProposalPreview = async () => {
+        if (!selectedTemplate || !proposalConfig?.previewEndpoint) return;
+
+        setIsGeneratingProposal(true);
+        const toastId = toast.loading('Generating proposal preview...');
+
+        try {
+            const proposalData = {
+                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() : 
+                        'Customer Address',
+                    quote_number: data.id || 'Q-001',
+                    quote_date: data.created_at || new Date().toISOString().split('T')[0],
+                    current_date: new Date().toISOString().split('T')[0],
+                    total_amount: formatCurrency(calculateGrandTotal()),
+                    company_name: '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 || [],
+                },
+                template_id: selectedTemplate,
+                branding_id: selectedBranding,
+            };
+
+            const response = await CustomFetch(
+                proposalConfig.previewEndpoint,
+                'POST',
+                proposalData
+            );
+
+            if (response.success) {
+                setProposalPreview(response.html);
+                toast.update(toastId, {
+                    render: 'Proposal preview generated successfully',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 3000,
+                    closeButton: true,
+                });
+            } else {
+                throw new Error(response.message || 'Failed to generate preview');
+            }
+        } catch (error) {
+            console.error('Error generating proposal preview:', error);
+            toast.update(toastId, {
+                render: 'Failed to generate proposal preview: ' + error.message,
+                type: 'error',
+                isLoading: false,
+                autoClose: 5000,
+                closeButton: true,
+            });
+        } finally {
+            setIsGeneratingProposal(false);
+        }
+    };
+
+    const generateProposalPDF = async () => {
+        if (!selectedTemplate || !proposalConfig?.pdfEndpoint) return;
+
+        setIsGeneratingProposal(true);
+        const toastId = toast.loading('Generating proposal PDF...');
+
+        try {
+            const proposalData = {
+                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() : 
+                        'Customer Address',
+                    quote_number: data.id || 'Q-001',
+                    quote_date: data.created_at || new Date().toISOString().split('T')[0],
+                    current_date: new Date().toISOString().split('T')[0],
+                    total_amount: formatCurrency(calculateGrandTotal()),
+                    company_name: '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 || [],
+                },
+                template_id: selectedTemplate,
+                branding_id: selectedBranding,
+                filename: `proposal-${data.id || 'draft'}-${new Date().toISOString().split('T')[0]}.pdf`,
+                download: true,
+            };
+
+            // Create a form for file download
+            const form = document.createElement('form');
+            form.method = 'POST';
+            form.action = proposalConfig.pdfEndpoint;
+            form.style.display = 'none';
+
+            // Add CSRF token
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            if (csrfToken) {
+                const csrfInput = document.createElement('input');
+                csrfInput.type = 'hidden';
+                csrfInput.name = '_token';
+                csrfInput.value = csrfToken;
+                form.appendChild(csrfInput);
+            }
+
+            // Add proposal data as hidden input
+            const dataInput = document.createElement('input');
+            dataInput.type = 'hidden';
+            dataInput.name = 'proposal_data';
+            dataInput.value = JSON.stringify(proposalData.proposal_data);
+            form.appendChild(dataInput);
+
+            const templateInput = document.createElement('input');
+            templateInput.type = 'hidden';
+            templateInput.name = 'template_id';
+            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';
+            filenameInput.value = proposalData.filename;
+            form.appendChild(filenameInput);
+
+            // Submit form to trigger download
+            document.body.appendChild(form);
+            form.submit();
+            document.body.removeChild(form);
+
+            toast.update(toastId, {
+                render: 'Proposal PDF download started',
+                type: 'success',
+                isLoading: false,
+                autoClose: 3000,
+                closeButton: true,
+            });
+        } catch (error) {
+            console.error('Error generating proposal PDF:', error);
+            toast.update(toastId, {
+                render: 'Failed to generate proposal PDF: ' + error.message,
+                type: 'error',
+                isLoading: false,
+                autoClose: 5000,
+                closeButton: true,
+            });
+        } finally {
+            setIsGeneratingProposal(false);
+        }
+    };
+
+    const toggleProposalMode = () => {
+        const newMode = !proposalMode;
+        setProposalMode(newMode);
+        
+        if (newMode && proposalTemplates.length === 0) {
+            loadProposalData();
+        }
+        
+        toast.info(newMode ? 'Switched to Proposal Mode' : 'Switched to Quote Mode');
+    };
+
     const handleAddItem = (tableId) => {
         console.log('Add item to table:', tableId);
 
@@ -860,6 +1088,130 @@ function GenericQuote({ logo, setting, urlParam }) {
                 </div>
             </div>
 
+            {/* Proposal Mode Controls (backward compatible) */}
+            {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}>
+                                    <label htmlFor="templateSelect">Template:</label>
+                                    <select
+                                        id="templateSelect"
+                                        value={selectedTemplate || ''}
+                                        onChange={(e) => setSelectedTemplate(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}
+                                            </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}
+                                        disabled={isGeneratingProposal}
+                                    >
+                                        <option value="">Select Branding</option>
+                                        {brandingProfiles.map((profile) => (
+                                            <option key={profile.id} value={profile.id}>
+                                                {profile.name}
+                                            </option>
+                                        ))}
+                                    </select>
+                                </div>
+
+                                <div className={styles.proposalActions}>
+                                    <button
+                                        className={styles.previewButton}
+                                        onClick={generateProposalPreview}
+                                        disabled={!selectedTemplate || isGeneratingProposal}
+                                    >
+                                        {isGeneratingProposal ? (
+                                            <>
+                                                <Clock size={16} aria-hidden="true" />
+                                                <span>Generating...</span>
+                                            </>
+                                        ) : (
+                                            <>
+                                                <Eye size={16} aria-hidden="true" />
+                                                <span>Preview</span>
+                                            </>
+                                        )}
+                                    </button>
+                                    <button
+                                        className={styles.pdfButton}
+                                        onClick={generateProposalPDF}
+                                        disabled={!selectedTemplate || isGeneratingProposal}
+                                    >
+                                        {isGeneratingProposal ? (
+                                            <>
+                                                <Clock size={16} aria-hidden="true" />
+                                                <span>Generating...</span>
+                                            </>
+                                        ) : (
+                                            <>
+                                                <FileText size={16} aria-hidden="true" />
+                                                <span>Generate PDF</span>
+                                            </>
+                                        )}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Proposal Preview (if available) */}
+            {proposalMode && proposalPreview && (
+                <div className={styles.proposalPreviewContainer}>
+                    <div className={styles.proposalPreviewHeader}>
+                        <h3>Proposal Preview</h3>
+                        <button
+                            className={styles.closePreview}
+                            onClick={() => setProposalPreview(null)}
+                            aria-label="Close preview"
+                        >
+                            <X size={16} aria-hidden="true" />
+                        </button>
+                    </div>
+                    <div 
+                        className={styles.proposalPreview}
+                        dangerouslySetInnerHTML={{ __html: proposalPreview }}
+                    />
+                </div>
+            )}
+
             {/* Quote content */}
             <div className={styles.quoteContent}>
                 {/* Quote header with logo and date */}

package/src/components/crm/generic/styles/GenericEditableTable.module.scss

@@ -245,36 +245,116 @@
     }
 }
 
-.cpicker {
-    position: relative;
+/* Compact Inline Color Picker Styles */
+.cpicker-inline {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cpicker-preview-container {
     display: flex;
     align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    min-height: 40px;
+}
 
-    &__btn {
-        button {
-            width: 28px;
-            height: 28px;
-            background-color: #f0f0f0;
-            border: 1px solid #ccc;
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: background 0.2s;
-
-            &:hover {
-                background-color: #e0e0e0;
-            }
+.cpicker__box {
+    width: 28px;
+    height: 28px;
+    border: 2px solid #dee2e6;
+    border-radius: 6px;
+    background-color: #ffffff;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+
+    /* Checkerboard pattern for transparency */
+    background-image: 
+        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
+        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+    background-size: 6px 6px;
+    background-position: 0 0, 0 3px, 3px -3px, -3px 0px;
+
+    /* When no color is selected */
+    &[style=""] {
+        background: 
+            linear-gradient(45deg, 
+                transparent 40%, 
+                #dc3545 42%, 
+                #dc3545 58%, 
+                transparent 60%
+            ),
+            linear-gradient(-45deg, 
+                transparent 40%, 
+                #dc3545 42%, 
+                #dc3545 58%, 
+                transparent 60%
+            ),
+            #ffffff;
+    }
+}
 
-            &:focus {
-                outline: none;
-                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-            }
+.cpicker-value {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: #495057;
+    font-family: 'Courier New', monospace;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 3px 6px;
+    border-radius: 3px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    flex-grow: 1;
+}
+
+.cpicker-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 8px;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+
+    /* Ensure Sketch picker fits well and is more compact */
+    .w-color-sketch {
+        box-shadow: none !important;
+        border: none !important;
+        border-radius: 6px !important;
+        max-width: 100% !important;
+        transform: scale(0.85) !important;
+        transform-origin: center top !important;
+    }
+
+    /* Further responsive scaling */
+    @media (max-width: 768px) {
+        padding: 6px;
+        
+        .w-color-sketch {
+            transform: scale(0.75) !important;
+        }
+    }
+
+    @media (max-width: 480px) {
+        padding: 4px;
+        
+        .w-color-sketch {
+            transform: scale(0.65) !important;
         }
     }
 }
 
+
 .colour_popover {
     position: absolute;
     background: white;