a4 stable

force-app/main/default/cspTrustedSites/Font_Awesome_CDN.cspTrustedSite-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <context>Communities</context>
+    <description>Font Awesome CDN Trusted Site</description>
+    <endpointUrl>https://cdnjs.cloudflare.com</endpointUrl>
+    <isActive>true</isActive>
+</CspTrustedSite>

force-app/main/default/lwc/developmentPage/developmentPage.css

@@ -48,6 +48,43 @@
     letter-spacing: 1px;
 }
 
+.dev-exit-section {
+    margin-top: 20px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dev-input {
+    width: 100%;
+    max-width: 200px;
+    padding: 8px 12px;
+    margin: 0 auto;
+    display: block;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    font-size: 0.9rem;
+    font-weight: 400;
+    text-align: center;
+    letter-spacing: 1px;
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.dev-input:focus {
+    border-color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
+}
+
+.dev-input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+    font-style: normal;
+}
+
 
 .dev-content {
     padding: 30px;

force-app/main/default/lwc/developmentPage/developmentPage.html

@@ -3,6 +3,15 @@
         <div class="dev-header">
             <h1>🚧 Development Area 🚧</h1>
             <p class="dev-warning">UNDER DEVELOPMENT - DO NOT TEST</p>
+            <div class="dev-exit-section">
+                <input 
+                    type="text" 
+                    class="dev-input" 
+                    value={tbizzInput}
+                    onchange={handleTbizzInputChange}
+                    onkeydown={handleKeyPress}
+                />
+            </div>
         </div>
         
         <div class="dev-content">

force-app/main/default/lwc/developmentPage/developmentPage.js

@@ -1,17 +1,18 @@
 import { LightningElement, track } from 'lwc';
 
 export default class DevelopmentPage extends LightningElement {
-    @track showDevPage = true; // Always visible by default
+    @track showDevPage = true; // Visible by default, hidden when tbizz is entered
     @track currentStep = 1;
     @track selectedTemplateId = '';
     @track selectedPropertyId = '';
     @track selectedPageSize = 'A4';
     @track currentTimestamp = '';
     @track debugMode = false;
+    @track tbizzInput = ''; // Input field value for tbizz
     
-    // K-key click counter for closing development mode
+    // tbizz sequence detection for opening development mode
-    kKeyCount = 0;
+    tbizzSequence = '';
-    kKeyTimeout = null;
+    tbizzTimeout = null;
     
     connectedCallback() {
         this.updateTimestamp();
@@ -20,8 +21,8 @@ export default class DevelopmentPage extends LightningElement {
     
     disconnectedCallback() {
         this.removeKeyListener();
-        if (this.kKeyTimeout) {
+        if (this.tbizzTimeout) {
-            clearTimeout(this.kKeyTimeout);
+            clearTimeout(this.tbizzTimeout);
         }
     }
     
@@ -34,28 +35,20 @@ export default class DevelopmentPage extends LightningElement {
     }
     
     handleKeyPress(event) {
-        // Only listen for 'K' key (case insensitive) - completely silent
+        // Listen for Enter key to check bweixx input
-        if (event.key.toLowerCase() === 'k') {
+        if (event.key === 'Enter') {
-            this.kKeyCount++;
+            if (this.tbizzInput.toLowerCase() === 'bweixx') {
-            
-            // Clear any existing timeout
-            if (this.kKeyTimeout) {
-                clearTimeout(this.kKeyTimeout);
-            }
-            
-            // Reset counter after 3 seconds of inactivity
-            this.kKeyTimeout = setTimeout(() => {
-                this.kKeyCount = 0;
-            }, 3000);
-            
-            // Close dev page after 5 K key presses (silent)
-            if (this.kKeyCount >= 5) {
                 this.showDevPage = false;
-                this.kKeyCount = 0; // Reset counter
+                this.tbizzInput = ''; // Clear input
             }
         }
     }
     
+    // Handle input field changes
+    handleTbizzInputChange(event) {
+        this.tbizzInput = event.target.value;
+    }
+    
     updateTimestamp() {
         this.currentTimestamp = new Date().toLocaleString();
     }

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css

@@ -9265,12 +9265,28 @@ late particularay
     padding: 20px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     border: 1px solid #f0f0f0;
+}
+
+/* Header Controls Line - All buttons in a single row */
+.header-controls-line {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
     gap: 20px;
-    flex-shrink: 0;
+    width: 100%;
+}
+
+/* Responsive design for header controls */
+@media (max-width: 768px) {
+    .header-controls-line {
+        flex-direction: column;
+        gap: 15px;
+        align-items: stretch;
+    }
+    
+    .page-size-group {
+        justify-content: center;
+    }
 }
 
 
@@ -9292,12 +9308,12 @@ late particularay
     box-shadow: 0 4px 20px rgba(40, 167, 69, 0.1);
 }
 
-/* Page Size Section */
+/* Page Size Group - Updated for single line layout */
-.page-size-section {
+.page-size-group {
     display: flex;
     align-items: center;
-    gap: 15px;
+    gap: 10px;
-    flex-wrap: wrap;
+    flex-shrink: 0;
 }
 
 .page-size-label {
@@ -14200,6 +14216,103 @@ img[draggable="true"] {
         break-inside: avoid !important;
         page-break-inside: avoid !important;
     }
+}
+
+/* --- DRAG AND DROP STYLES --- */
+.draggable-gallery-item {
+    position: relative;
+    cursor: move;
+    transition: all 0.3s ease;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    background: white;
+}
+
+.draggable-gallery-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+}
+
+.draggable-gallery-item.dragging {
+    opacity: 0.5;
+    transform: rotate(5deg);
+    z-index: 1000;
+}
+
+.draggable-gallery-item.drag-over {
+    border: 2px dashed #007bff;
+    background-color: rgba(0, 123, 255, 0.1);
+    transform: scale(1.05);
+}
+
+.draggable-gallery-item img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    display: block;
+}
+
+.drag-handle {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    cursor: move;
+}
+
+.draggable-gallery-item:hover .drag-handle {
+    opacity: 1;
+}
+
+.no-images {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 40px;
+    color: #666;
+    font-style: italic;
+}
+
+/* Drag and drop for gallery grids */
+.gallery-grid .draggable-gallery-item {
+    height: 100%;
+    min-height: 120px;
+}
+
+.gallery-grid .draggable-gallery-item img {
+    height: 100%;
+    min-height: 120px;
+}
+
+/* Draggable Gallery Section */
+.draggable-gallery-section {
+    margin-top: 30px;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 12px;
+    border: 2px dashed #dee2e6;
+}
+
+.draggable-gallery-section .gallery-title {
+    color: #007bff;
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+.draggable-gallery-section .gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-top: 15px;
+}
     
     .gallery-item img {
         width: 100% !important;
@@ -14207,6 +14320,38 @@ img[draggable="true"] {
         object-fit: cover !important;
         display: block !important;
     }
+
+/* Viewport Scrollbars - Only for viewport, not PDF */
+@media screen {
+    .brochure-page {
+        overflow-y: auto;
+        max-height: 100vh;
+    }
+    
+    .brochure-page::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    .brochure-page::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 4px;
+    }
+    
+    .brochure-page::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 4px;
+    }
+    
+    .brochure-page::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+    
+    /* Hide scrollbars in print/PDF */
+    @media print {
+        .brochure-page {
+            overflow: hidden !important;
+        }
+    }
 }
 
 /* ===== END OF STYLES ===== */

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html

@@ -144,6 +144,30 @@
                                 </div>
                             </section>
 
+                            <!-- Draggable Gallery Section -->
+                            <template if:true={realPropertyImages}>
+                                <section class="draggable-gallery-section">
+                                    <h2 class="gallery-title">Drag to Reorder Images</h2>
+                                    <div class="gallery-grid">
+                                        <template for:each={realPropertyImages} for:item="img" for:index="index">
+                                            <div key={img.Id} class="draggable-gallery-item" 
+                                                 draggable="true" 
+                                                 data-index={index}
+                                                 ondragstart={handleDragStart}
+                                                 ondragend={handleDragEnd}
+                                                 ondragover={handleDragOver}
+                                                 ondragleave={handleDragLeave}
+                                                 ondrop={handleDrop}>
+                                                <img src={img.url} alt={img.title} />
+                                                <div class="drag-handle">
+                                                    <i class="fa-solid fa-grip-vertical"></i>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </section>
+                            </template>
+                            
                             <div class="agent-footer">
                                 <div class="agent-info">
                                     <h3 style="font-size: 0.95rem;">Sarah Johnson</h3>
@@ -1236,15 +1260,15 @@
                 <div class="editor-right">
                     <!-- Page Size and PDF Generation Header -->
                     <div class="template-header-area">
-                        <!-- New Back Button -->
+                        <!-- All buttons in a single line -->
-                        <div class="header-left-actions">
+                        <div class="header-controls-line">
+                            <!-- Back Button -->
                             <button class="btn btn-secondary" onclick={previousStep} title="Back">
                                 ← Back
                             </button>
-                        </div>
+                            
-                        <!-- Page Size Options and Generate PDF Button -->
+                            <!-- Page Size Options -->
-                        <div class="page-size-section" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+                            <div class="page-size-group">
-                            <div style="display: flex; align-items: center;">
                                 <label class="page-size-label">Page Size:</label>
                                 <div class="page-size-options">
                                     <label class="page-size-option">
@@ -1261,7 +1285,7 @@
                             
                             <!-- Generate PDF Button -->
                             <template if:true={showGeneratePdfButton}>
-                                <button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf} style="margin-left: 20px;">
+                                <button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf}>
                                     <template if:false={isGeneratingPdf}>
                                         <span class="btn-icon">📄</span>
                                         Generate PDF
@@ -1273,7 +1297,6 @@
                                 </button>
                             </template>
                         </div>
-
                     </div>
 
                     <!-- Viewport Toolbar - Removed for cleaner interface -->