@visns-studio/visns-components 5.13.13 → 5.13.15

package/package.json

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

package/src/components/generic/GenericEditableTable.jsx

@@ -1249,85 +1249,77 @@ const GenericEditableTable = ({
         if (!hasMarginRow) return null;
 
         const totalProjectCost = calculateTotalProjectCost(localData);
+        const gst = totalProjectCost * 0.1;
+        const totalWithGst = totalProjectCost + gst;
         const marginAmount = calculateMarginAmount(
             totalProjectCost,
             marginPercentage
         );
-        const totalWithMargin = totalProjectCost + marginAmount;
+        const totalLkdProjectCost = totalProjectCost + marginAmount;
+        const totalLkdGst = totalLkdProjectCost * 0.1;
+        const totalLkdWithGst = totalLkdProjectCost + totalLkdGst;
 
         return (
             <>
-                {/* Margin row category header */}
-                <tr className={styles.categoryRow}>
+                {/* Total Project Cost */}
+                <tr style={{ backgroundColor: '#e9ecef', fontWeight: 'bold' }}>
+                    <td colSpan={6} style={{ padding: '8px' }}>
+                        Total Project Cost
+                    </td>
                     <td
-                        colSpan={columns.length + 2}
-                        style={{
-                            backgroundColor: '#e9ecef',
-                            fontWeight: 'bold',
-                            padding: '8px 12px',
-                        }}
+                        colSpan={4}
+                        style={{ padding: '8px', textAlign: 'right' }}
                     >
-                        {rows.marginRow}
+                        {totalProjectCost.toLocaleString('en-AU', {
+                            style: 'currency',
+                            currency: 'AUD',
+                        })}
                     </td>
+                    <td></td>
                 </tr>
 
-                {/* Margin row column headers - only show Description, Margin %, and Total */}
-                <tr>
-                    {/* Description column - larger width */}
-                    <th
-                        style={{
-                            color: 'white',
-                            fontWeight: 'bold',
-                            padding: '8px',
-                            textAlign: 'left',
-                            width: '60%',
-                        }}
-                        colSpan={6}
-                    >
-                        Description
-                    </th>
-                    {/* Margin % column - smaller width */}
-                    <th
-                        style={{
-                            color: 'white',
-                            fontWeight: 'bold',
-                            padding: '8px',
-                            textAlign: 'left',
-                            width: '20%',
-                        }}
-                        colSpan={2}
-                    >
-                        Margin %
-                    </th>
-                    {/* Total column */}
-                    <th
-                        style={{
-                            color: 'white',
-                            fontWeight: 'bold',
-                            padding: '8px',
-                            textAlign: 'right',
-                            width: '20%',
-                        }}
-                        colSpan={2}
+                {/* GST */}
+                <tr style={{ backgroundColor: '#e9ecef' }}>
+                    <td colSpan={6} style={{ padding: '8px' }}>
+                        GST
+                    </td>
+                    <td
+                        colSpan={4}
+                        style={{ padding: '8px', textAlign: 'right' }}
                     >
-                        Total
-                    </th>
-                    <th></th>
+                        {gst.toLocaleString('en-AU', {
+                            style: 'currency',
+                            currency: 'AUD',
+                        })}
+                    </td>
+                    <td></td>
                 </tr>
 
-                {/* Margin row content */}
-                <tr style={{ backgroundColor: '#f8f9fa' }}>
-                    {/* Description */}
+                {/* Total Project Cost (Including GST) */}
+                <tr style={{ backgroundColor: '#e9ecef', fontWeight: 'bold' }}>
+                    <td colSpan={6} style={{ padding: '8px' }}>
+                        Total Project Cost (Including GST)
+                    </td>
                     <td
-                        style={{ fontWeight: 'bold', padding: '8px' }}
-                        colSpan={6}
+                        colSpan={4}
+                        style={{ padding: '8px', textAlign: 'right' }}
                     >
-                        {rows.marginRow}
+                        {totalWithGst.toLocaleString('en-AU', {
+                            style: 'currency',
+                            currency: 'AUD',
+                        })}
+                    </td>
+                    <td></td>
+                </tr>
+
+                {/* LKD Margin */}
+                <tr style={{ backgroundColor: '#f8f9fa' }}>
+                    <td colSpan={6} style={{ padding: '8px' }}>
+                        LKD Margin (in %)
                     </td>
-                    {/* Margin % input */}
                     <td
-                        style={{ textAlign: 'center', padding: '8px' }}
                         colSpan={2}
+                        style={{ padding: '8px', textAlign: 'center' }}
                     >
                         <input
                             type="number"
@@ -1337,25 +1329,72 @@ const GenericEditableTable = ({
                                     parseFloat(e.target.value) || 0
                                 )
                             }
-                            placeholder="% margin"
+                            placeholder="0"
                             style={{
-                                width: '80px',
-                                padding: '6px',
+                                padding: '4px',
                                 border: '1px solid #ccc',
                                 borderRadius: '3px',
+                                textAlign: 'center',
+                                marginRight: '4px',
                             }}
                         />
                     </td>
-                    {/* Total (subtotal of all categories + margin) */}
                     <td
-                        style={{
-                            textAlign: 'right',
-                            fontWeight: 'bold',
-                            padding: '8px',
-                        }}
                         colSpan={2}
+                        style={{ padding: '8px', textAlign: 'right' }}
+                    >
+                        {marginAmount.toLocaleString('en-AU', {
+                            style: 'currency',
+                            currency: 'AUD',
+                        })}
+                    </td>
+                    <td></td>
+                </tr>
+
+                {/* Total LKD Project Cost */}
+                <tr style={{ backgroundColor: '#e9ecef', fontWeight: 'bold' }}>
+                    <td colSpan={6} style={{ padding: '8px' }}>
+                        Total LKD Project Cost
+                    </td>
+                    <td
+                        colSpan={4}
+                        style={{ padding: '8px', textAlign: 'right' }}
+                    >
+                        {totalLkdProjectCost.toLocaleString('en-AU', {
+                            style: 'currency',
+                            currency: 'AUD',
+                        })}
+                    </td>
+                    <td></td>
+                </tr>
+
+                {/* Total GST */}
+                <tr style={{ backgroundColor: '#e9ecef' }}>
+                    <td colSpan={6} style={{ padding: '8px' }}>
+                        Total GST
+                    </td>
+                    <td
+                        colSpan={4}
+                        style={{ padding: '8px', textAlign: 'right' }}
+                    >
+                        {totalLkdGst.toLocaleString('en-AU', {
+                            style: 'currency',
+                            currency: 'AUD',
+                        })}
+                    </td>
+                    <td></td>
+                </tr>
+
+                {/* Total LKD Project Cost (Including GST) */}
+                <tr style={{ backgroundColor: '#e9ecef', fontWeight: 'bold' }}>
+                    <td colSpan={6} style={{ padding: '8px' }}>
+                        Total LKD Project Cost (Including GST)
+                    </td>
+                    <td
+                        colSpan={4}
+                        style={{ padding: '8px', textAlign: 'right' }}
                     >
-                        {totalWithMargin.toLocaleString('en-AU', {
+                        {totalLkdWithGst.toLocaleString('en-AU', {
                             style: 'currency',
                             currency: 'AUD',
                         })}

package/src/components/proposal/AgreementSignatureEditor.css

@@ -291,7 +291,6 @@
 }
 
 .signature-editor-preview-content {
-    border: 1px solid var(--paragraph-color, #e2e8f0);
     border-radius: 6px;
     overflow: hidden;
 }
@@ -328,8 +327,12 @@
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 /* Field Editor Modal */
@@ -448,7 +451,7 @@
     cursor: pointer;
 }
 
-.signature-field-editor-checkbox input[type="checkbox"] {
+.signature-field-editor-checkbox input[type='checkbox'] {
     accent-color: var(--primary-color, #3cbf7d);
 }
 
@@ -465,34 +468,34 @@
     .signature-editor-container {
         padding: 1rem;
     }
-    
+
     .signature-editor-fields-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 1rem;
     }
-    
+
     .signature-field-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 0.5rem;
     }
-    
+
     .signature-field-actions {
         width: 100%;
         justify-content: flex-end;
     }
-    
+
     .signature-editor-actions {
         flex-direction: column;
     }
-    
+
     .signature-field-editor-grid {
         grid-template-columns: 1fr;
     }
-    
+
     .signature-editor-modal {
         width: 95%;
         margin: 1rem;
     }
-}
+}

package/src/components/proposal/AgreementSignatureEditor.jsx

@@ -1,6 +1,10 @@
 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 {
+    SortableContainer,
+    SortableElement,
+    SortableHandle,
+} from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 import { toast } from 'react-toastify';
 import { buildUrl, defaultProposalApiEndpoints } from '../../utils/urlBuilder';
@@ -66,7 +70,7 @@ const FieldEditor = ({ field, onSave, onCancel }) => {
         type: field?.type || 'text',
         placeholder: field?.placeholder || '',
         required: field?.required || false,
-        width: field?.width || 'full'
+        width: field?.width || 'full',
     });
 
     const fieldTypes = [
@@ -74,13 +78,13 @@ const FieldEditor = ({ field, onSave, onCancel }) => {
         { value: 'signature', label: 'Signature Block' },
         { value: 'date', label: 'Date Field' },
         { value: 'select', label: 'Dropdown' },
-        { value: 'textarea', label: 'Text Area' }
+        { value: 'textarea', label: 'Text Area' },
     ];
 
     const fieldWidths = [
         { value: 'full', label: 'Full Width' },
         { value: 'half', label: 'Half Width' },
-        { value: 'third', label: 'Third Width' }
+        { value: 'third', label: 'Third Width' },
     ];
 
     const handleSubmit = (e) => {
@@ -96,55 +100,81 @@ const FieldEditor = ({ field, onSave, onCancel }) => {
         <div className="signature-field-editor">
             <div className="signature-field-editor-header">
                 <h4>{field ? 'Edit Field' : 'Add New Field'}</h4>
-                <button onClick={onCancel} className="signature-field-editor-close">
+                <button
+                    onClick={onCancel}
+                    className="signature-field-editor-close"
+                >
                     <X size={16} />
                 </button>
             </div>
-            
-            <form onSubmit={handleSubmit} className="signature-field-editor-form">
+
+            <form
+                onSubmit={handleSubmit}
+                className="signature-field-editor-form"
+            >
                 <div className="signature-field-editor-grid">
                     <div className="signature-field-editor-group">
                         <label>Field Label *</label>
                         <input
                             type="text"
                             value={formData.label}
-                            onChange={(e) => setFormData({...formData, label: e.target.value})}
+                            onChange={(e) =>
+                                setFormData({
+                                    ...formData,
+                                    label: e.target.value,
+                                })
+                            }
                             placeholder="e.g., Name, Company Name, ABN"
                             required
                         />
                     </div>
-                    
+
                     <div className="signature-field-editor-group">
                         <label>Field Type</label>
                         <select
                             value={formData.type}
-                            onChange={(e) => setFormData({...formData, type: e.target.value})}
+                            onChange={(e) =>
+                                setFormData({
+                                    ...formData,
+                                    type: e.target.value,
+                                })
+                            }
                         >
-                            {fieldTypes.map(type => (
+                            {fieldTypes.map((type) => (
                                 <option key={type.value} value={type.value}>
                                     {type.label}
                                 </option>
                             ))}
                         </select>
                     </div>
-                    
+
                     <div className="signature-field-editor-group">
                         <label>Placeholder Text</label>
                         <input
                             type="text"
                             value={formData.placeholder}
-                            onChange={(e) => setFormData({...formData, placeholder: e.target.value})}
+                            onChange={(e) =>
+                                setFormData({
+                                    ...formData,
+                                    placeholder: e.target.value,
+                                })
+                            }
                             placeholder="Optional placeholder text"
                         />
                     </div>
-                    
+
                     <div className="signature-field-editor-group">
                         <label>Field Width</label>
                         <select
                             value={formData.width}
-                            onChange={(e) => setFormData({...formData, width: e.target.value})}
+                            onChange={(e) =>
+                                setFormData({
+                                    ...formData,
+                                    width: e.target.value,
+                                })
+                            }
                         >
-                            {fieldWidths.map(width => (
+                            {fieldWidths.map((width) => (
                                 <option key={width.value} value={width.value}>
                                     {width.label}
                                 </option>
@@ -152,20 +182,29 @@ const FieldEditor = ({ field, onSave, onCancel }) => {
                         </select>
                     </div>
                 </div>
-                
+
                 <div className="signature-field-editor-checkbox">
                     <label>
                         <input
                             type="checkbox"
                             checked={formData.required}
-                            onChange={(e) => setFormData({...formData, required: e.target.checked})}
+                            onChange={(e) =>
+                                setFormData({
+                                    ...formData,
+                                    required: e.target.checked,
+                                })
+                            }
                         />
                         Required field
                     </label>
                 </div>
-                
+
                 <div className="signature-field-editor-actions">
-                    <button type="button" onClick={onCancel} className="signature-btn secondary">
+                    <button
+                        type="button"
+                        onClick={onCancel}
+                        className="signature-btn secondary"
+                    >
                         Cancel
                     </button>
                     <button type="submit" className="signature-btn primary">
@@ -178,21 +217,25 @@ const FieldEditor = ({ field, onSave, onCancel }) => {
     );
 };
 
-const AgreementSignatureEditor = ({ 
-    section, 
+const AgreementSignatureEditor = ({
+    section,
     templateId,
-    onSave, 
+    onSave,
     onCancel,
     apiEndpoints = defaultProposalApiEndpoints,
     hideFooter = false,
-    onTemplateChange = null
+    onTemplateChange = null,
 }) => {
     const [template, setTemplate] = useState({
-        headerText: section?.template ? section.template.headerText || '' : 'APPROVAL TO PROCEED',
-        bodyText: section?.template?.bodyText || 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
-        fields: section?.template?.fields || []
+        headerText: section?.template
+            ? section.template.headerText || ''
+            : 'APPROVAL TO PROCEED',
+        bodyText:
+            section?.template?.bodyText ||
+            'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+        fields: section?.template?.fields || [],
     });
-    
+
     const [editingField, setEditingField] = useState(null);
     const [showFieldEditor, setShowFieldEditor] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
@@ -208,28 +251,72 @@ const AgreementSignatureEditor = ({
         // Parse HTML content to extract template data
         const parser = new DOMParser();
         const doc = parser.parseFromString(content, 'text/html');
-        
+
         // Extract header text from h3 tag
         const headerElement = doc.querySelector('h3');
-        const headerText = headerElement ? headerElement.textContent.trim() : '';
-        
+        const headerText = headerElement
+            ? headerElement.textContent.trim()
+            : '';
+
         // Extract body text from p tag
         const bodyElement = doc.querySelector('p');
-        const bodyText = bodyElement ? bodyElement.textContent.trim() : 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.';
-        
+        const bodyText = bodyElement
+            ? bodyElement.textContent.trim()
+            : 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.';
+
         // Extract fields from the content (basic parsing)
         const defaultFields = [
-            { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
-            { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
-            { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
-            { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
-            { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
+            {
+                id: 1,
+                label: 'Name',
+                type: 'text',
+                placeholder: '',
+                required: true,
+                width: 'full',
+                order: 1,
+            },
+            {
+                id: 2,
+                label: 'Company Name',
+                type: 'text',
+                placeholder: '',
+                required: true,
+                width: 'full',
+                order: 2,
+            },
+            {
+                id: 3,
+                label: 'ABN',
+                type: 'text',
+                placeholder: '',
+                required: false,
+                width: 'full',
+                order: 3,
+            },
+            {
+                id: 4,
+                label: 'Signature',
+                type: 'signature',
+                placeholder: '',
+                required: true,
+                width: 'full',
+                order: 4,
+            },
+            {
+                id: 5,
+                label: 'Date',
+                type: 'date',
+                placeholder: '',
+                required: true,
+                width: 'full',
+                order: 5,
+            },
         ];
-        
+
         return {
             headerText: headerText,
             bodyText: bodyText,
-            fields: defaultFields
+            fields: defaultFields,
         };
     };
 
@@ -251,7 +338,7 @@ const AgreementSignatureEditor = ({
             const updatedSection = {
                 ...section,
                 template: template,
-                content: generatePreviewContent(template)
+                content: generatePreviewContent(template),
             };
             onTemplateChange(updatedSection);
         }
@@ -262,76 +349,250 @@ const AgreementSignatureEditor = ({
             // Load default template when no templateId is provided
             setTemplate({
                 headerText: 'APPROVAL TO PROCEED',
-                bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                bodyText:
+                    'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
                 fields: [
-                    { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
-                    { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
-                    { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
-                    { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
-                    { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
-                ]
+                    {
+                        id: 1,
+                        label: 'Name',
+                        type: 'text',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 1,
+                    },
+                    {
+                        id: 2,
+                        label: 'Company Name',
+                        type: 'text',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 2,
+                    },
+                    {
+                        id: 3,
+                        label: 'ABN',
+                        type: 'text',
+                        placeholder: '',
+                        required: false,
+                        width: 'full',
+                        order: 3,
+                    },
+                    {
+                        id: 4,
+                        label: 'Signature',
+                        type: 'signature',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 4,
+                    },
+                    {
+                        id: 5,
+                        label: 'Date',
+                        type: 'date',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 5,
+                    },
+                ],
             });
             return;
         }
-        
+
         try {
             setIsLoading(true);
-            const response = await fetch(buildUrlWithTemplate(apiEndpoints.agreementSignatureTemplate || '/ajax/agreement-signature-template/{templateId}'));
-            
+            const response = await fetch(
+                buildUrlWithTemplate(
+                    apiEndpoints.agreementSignatureTemplate ||
+                        '/ajax/agreement-signature-template/{templateId}'
+                )
+            );
+
             // Check if the response is ok and contains JSON
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            
+
             const contentType = response.headers.get('content-type');
             if (!contentType || !contentType.includes('application/json')) {
                 // If the API doesn't exist or returns HTML, use default template
-                console.warn('Agreement signature template API not available, using default template');
+                console.warn(
+                    'Agreement signature template API not available, using default template'
+                );
                 setTemplate({
                     headerText: 'APPROVAL TO PROCEED',
-                    bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                    bodyText:
+                        'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
                     fields: [
-                        { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
-                        { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
-                        { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
-                        { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
-                        { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
-                    ]
+                        {
+                            id: 1,
+                            label: 'Name',
+                            type: 'text',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 1,
+                        },
+                        {
+                            id: 2,
+                            label: 'Company Name',
+                            type: 'text',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 2,
+                        },
+                        {
+                            id: 3,
+                            label: 'ABN',
+                            type: 'text',
+                            placeholder: '',
+                            required: false,
+                            width: 'full',
+                            order: 3,
+                        },
+                        {
+                            id: 4,
+                            label: 'Signature',
+                            type: 'signature',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 4,
+                        },
+                        {
+                            id: 5,
+                            label: 'Date',
+                            type: 'date',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 5,
+                        },
+                    ],
                 });
                 return;
             }
-            
+
             const data = await response.json();
-            
+
             if (data.success) {
                 setTemplate(data.template);
             } else {
                 // Use default template if none exists
                 setTemplate({
                     headerText: 'APPROVAL TO PROCEED',
-                    bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                    bodyText:
+                        'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
                     fields: [
-                        { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
-                        { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
-                        { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
-                        { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
-                        { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
-                    ]
+                        {
+                            id: 1,
+                            label: 'Name',
+                            type: 'text',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 1,
+                        },
+                        {
+                            id: 2,
+                            label: 'Company Name',
+                            type: 'text',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 2,
+                        },
+                        {
+                            id: 3,
+                            label: 'ABN',
+                            type: 'text',
+                            placeholder: '',
+                            required: false,
+                            width: 'full',
+                            order: 3,
+                        },
+                        {
+                            id: 4,
+                            label: 'Signature',
+                            type: 'signature',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 4,
+                        },
+                        {
+                            id: 5,
+                            label: 'Date',
+                            type: 'date',
+                            placeholder: '',
+                            required: true,
+                            width: 'full',
+                            order: 5,
+                        },
+                    ],
                 });
             }
         } catch (error) {
-            console.warn('Error loading agreement signature template, using default:', error.message);
+            console.warn(
+                'Error loading agreement signature template, using default:',
+                error.message
+            );
             // Use default template instead of showing error
             setTemplate({
                 headerText: 'APPROVAL TO PROCEED',
-                bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                bodyText:
+                    'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
                 fields: [
-                    { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
-                    { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
-                    { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
-                    { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
-                    { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
-                ]
+                    {
+                        id: 1,
+                        label: 'Name',
+                        type: 'text',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 1,
+                    },
+                    {
+                        id: 2,
+                        label: 'Company Name',
+                        type: 'text',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 2,
+                    },
+                    {
+                        id: 3,
+                        label: 'ABN',
+                        type: 'text',
+                        placeholder: '',
+                        required: false,
+                        width: 'full',
+                        order: 3,
+                    },
+                    {
+                        id: 4,
+                        label: 'Signature',
+                        type: 'signature',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 4,
+                    },
+                    {
+                        id: 5,
+                        label: 'Date',
+                        type: 'date',
+                        placeholder: '',
+                        required: true,
+                        width: 'full',
+                        order: 5,
+                    },
+                ],
             });
         } finally {
             setIsLoading(false);
@@ -341,15 +602,19 @@ const AgreementSignatureEditor = ({
     const handleFieldsReorder = ({ oldIndex, newIndex }) => {
         if (oldIndex === newIndex) return;
 
-        const newFields = arrayMoveImmutable(template.fields, oldIndex, newIndex);
+        const newFields = arrayMoveImmutable(
+            template.fields,
+            oldIndex,
+            newIndex
+        );
         const reorderedFields = newFields.map((field, index) => ({
             ...field,
-            order: index + 1
+            order: index + 1,
         }));
 
         setTemplate({
             ...template,
-            fields: reorderedFields
+            fields: reorderedFields,
         });
     };
 
@@ -366,23 +631,25 @@ const AgreementSignatureEditor = ({
     const handleSaveField = (fieldData) => {
         if (editingField) {
             // Update existing field
-            const updatedFields = template.fields.map(field =>
-                field.id === editingField.id ? { ...fieldData, id: editingField.id } : field
+            const updatedFields = template.fields.map((field) =>
+                field.id === editingField.id
+                    ? { ...fieldData, id: editingField.id }
+                    : field
             );
             setTemplate({
                 ...template,
-                fields: updatedFields
+                fields: updatedFields,
             });
         } else {
             // Add new field
             const newField = {
                 ...fieldData,
                 id: Date.now(), // Temporary ID - backend will assign real ID
-                order: template.fields.length + 1
+                order: template.fields.length + 1,
             };
             setTemplate({
                 ...template,
-                fields: [...template.fields, newField]
+                fields: [...template.fields, newField],
             });
         }
         setShowFieldEditor(false);
@@ -391,14 +658,14 @@ const AgreementSignatureEditor = ({
 
     const handleDeleteField = (fieldId) => {
         if (!confirm('Are you sure you want to delete this field?')) return;
-        
+
         const updatedFields = template.fields
-            .filter(field => field.id !== fieldId)
+            .filter((field) => field.id !== fieldId)
             .map((field, index) => ({ ...field, order: index + 1 }));
-        
+
         setTemplate({
             ...template,
-            fields: updatedFields
+            fields: updatedFields,
         });
     };
 
@@ -412,68 +679,81 @@ const AgreementSignatureEditor = ({
         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
+            bodyText: newText,
         });
 
         // Reset cursor position after the inserted variable
         setTimeout(() => {
             textarea.focus();
-            textarea.setSelectionRange(start + variableText.length, start + variableText.length);
+            textarea.setSelectionRange(
+                start + variableText.length,
+                start + variableText.length
+            );
         }, 0);
-        
+
         setShowVariableInserter(false);
     };
 
     const handleSaveTemplate = async () => {
         try {
             setIsLoading(true);
-            
+
             // For now, if no templateId or API is not available, just save locally
             if (!templateId) {
                 // Update section with template reference
                 const updatedSection = {
                     ...section,
                     template: template,
-                    content: generatePreviewContent(template)
+                    content: generatePreviewContent(template),
                 };
-                
+
                 onSave(updatedSection);
                 toast.success('Agreement signature template saved locally');
                 return;
             }
-            
+
             // Save template to backend
-            const response = await fetch(buildUrlWithTemplate(apiEndpoints.agreementSignatureTemplateSave || '/ajax/agreement-signature-template/{templateId}'), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
-                },
-                body: JSON.stringify({
-                    template: template
-                })
-            });
+            const response = await fetch(
+                buildUrlWithTemplate(
+                    apiEndpoints.agreementSignatureTemplateSave ||
+                        '/ajax/agreement-signature-template/{templateId}'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document
+                            .querySelector('meta[name="csrf-token"]')
+                            ?.getAttribute('content'),
+                    },
+                    body: JSON.stringify({
+                        template: template,
+                    }),
+                }
+            );
 
             // Check if the response is ok and contains JSON
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            
+
             const contentType = response.headers.get('content-type');
             if (!contentType || !contentType.includes('application/json')) {
                 // If the API doesn't exist, save locally instead
-                console.warn('Agreement signature template save API not available, saving locally');
+                console.warn(
+                    'Agreement signature template save API not available, saving locally'
+                );
                 const updatedSection = {
                     ...section,
                     template: template,
-                    content: generatePreviewContent(template)
+                    content: generatePreviewContent(template),
                 };
-                
+
                 onSave(updatedSection);
                 toast.success('Agreement signature template saved locally');
                 return;
@@ -485,24 +765,27 @@ const AgreementSignatureEditor = ({
                 const updatedSection = {
                     ...section,
                     template: data.template,
-                    content: generatePreviewContent(data.template)
+                    content: generatePreviewContent(data.template),
                 };
-                
+
                 onSave(updatedSection);
                 toast.success('Agreement signature template saved');
             } else {
                 throw new Error(data.message || 'Failed to save template');
             }
         } catch (error) {
-            console.warn('Error saving template to backend, saving locally:', error.message);
-            
+            console.warn(
+                'Error saving template to backend, saving locally:',
+                error.message
+            );
+
             // Fallback to local save
             const updatedSection = {
                 ...section,
                 template: template,
-                content: generatePreviewContent(template)
+                content: generatePreviewContent(template),
             };
-            
+
             onSave(updatedSection);
             toast.success('Agreement signature template saved locally');
         } finally {
@@ -513,10 +796,15 @@ const AgreementSignatureEditor = ({
     const generatePreviewContent = (templateData) => {
         const fieldsHtml = templateData.fields
             .sort((a, b) => a.order - b.order)
-            .map(field => {
+            .map((field) => {
                 const required = field.required ? ' *' : '';
-                const width = field.width === 'full' ? '100%' : field.width === 'half' ? '48%' : '30%';
-                
+                const width =
+                    field.width === 'full'
+                        ? '100%'
+                        : field.width === 'half'
+                        ? '48%'
+                        : '30%';
+
                 switch (field.type) {
                     case 'signature':
                         return `<div style="margin-bottom: 2rem; width: ${width}; display: inline-block; margin-right: 2%;">
@@ -538,11 +826,16 @@ const AgreementSignatureEditor = ({
             .join('');
 
         return `
-            <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>
+                ${
+                    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>
-            </div>
+            
         `;
     };
 
@@ -559,16 +852,26 @@ const AgreementSignatureEditor = ({
         <div className="signature-editor-container">
             <div className="signature-editor-header">
                 <h3>Agreement Signature Template</h3>
-                <p>Customize the text and fields for your agreement signature section</p>
+                <p>
+                    Customize the text and fields for your agreement signature
+                    section
+                </p>
             </div>
 
             <div className="signature-editor-content">
                 <div className="signature-editor-section">
-                    <label className="signature-editor-label">Header Text (Optional)</label>
+                    <label className="signature-editor-label">
+                        Header Text (Optional)
+                    </label>
                     <input
                         type="text"
                         value={template.headerText}
-                        onChange={(e) => setTemplate({...template, headerText: e.target.value})}
+                        onChange={(e) =>
+                            setTemplate({
+                                ...template,
+                                headerText: e.target.value,
+                            })
+                        }
                         placeholder="e.g., APPROVAL TO PROCEED (leave empty for no header)"
                         className="signature-editor-input"
                     />
@@ -579,7 +882,9 @@ const AgreementSignatureEditor = ({
 
                 <div className="signature-editor-section">
                     <div className="signature-editor-label-with-button">
-                        <label className="signature-editor-label">Body Text</label>
+                        <label className="signature-editor-label">
+                            Body Text
+                        </label>
                         <button
                             type="button"
                             onClick={() => setShowVariableInserter(true)}
@@ -593,19 +898,28 @@ const AgreementSignatureEditor = ({
                     <textarea
                         ref={bodyTextRef}
                         value={template.bodyText}
-                        onChange={(e) => setTemplate({...template, bodyText: e.target.value})}
+                        onChange={(e) =>
+                            setTemplate({
+                                ...template,
+                                bodyText: e.target.value,
+                            })
+                        }
                         placeholder="Enter the agreement text. Use {{variable_name}} for dynamic content."
                         className="signature-editor-textarea"
                         rows="3"
                     />
                     <small className="signature-editor-help">
-                        Use variables like {'{{company_name}}'} for dynamic content. Click "Insert Variable" to browse available variables.
+                        Use variables like {'{{company_name}}'} for dynamic
+                        content. Click "Insert Variable" to browse available
+                        variables.
                     </small>
                 </div>
 
                 <div className="signature-editor-section">
                     <div className="signature-editor-fields-header">
-                        <label className="signature-editor-label">Signature Fields</label>
+                        <label className="signature-editor-label">
+                            Signature Fields
+                        </label>
                         <button
                             onClick={handleAddField}
                             className="signature-btn primary small"
@@ -619,7 +933,10 @@ const AgreementSignatureEditor = ({
                         <div className="signature-editor-empty">
                             <Type size={48} />
                             <p>No fields added yet</p>
-                            <button onClick={handleAddField} className="signature-btn primary">
+                            <button
+                                onClick={handleAddField}
+                                className="signature-btn primary"
+                            >
                                 Add Your First Field
                             </button>
                         </div>
@@ -638,9 +955,11 @@ const AgreementSignatureEditor = ({
 
                 <div className="signature-editor-preview">
                     <h4>Preview</h4>
-                    <div 
+                    <div
                         className="signature-editor-preview-content"
-                        dangerouslySetInnerHTML={{ __html: generatePreviewContent(template) }}
+                        dangerouslySetInnerHTML={{
+                            __html: generatePreviewContent(template),
+                        }}
                     />
                 </div>
             </div>
@@ -691,4 +1010,4 @@ const AgreementSignatureEditor = ({
     );
 };
 
-export default AgreementSignatureEditor;
+export default AgreementSignatureEditor;