resolved most in browser errors and got maps stable. Next need to do some work on the save configuration stuff.

map/app/public/admin.html

@@ -6,6 +6,10 @@
     <meta name="description" content="Admin Panel - NocoDB Map Viewer">
     <title>Admin Panel - NocoDB Map Viewer</title>
     
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="shortcut icon" href="/favicon.ico">
+    
     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
@@ -186,8 +190,58 @@
             integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
             crossorigin=""></script>
     
-    <!-- QR Code Library -->
-    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+    <!-- Custom QR Code Implementation -->
+    <script>
+        // Simple QR Code implementation using our server
+        window.QRCode = {
+            toCanvas: function(canvas, text, options, callback) {
+                if (typeof options === 'function') {
+                    callback = options;
+                    options = {};
+                }
+                
+                const size = options.width || 200;
+                const qrUrl = `/api/qr?text=${encodeURIComponent(text)}&size=${size}`;
+                
+                const img = new Image();
+                img.crossOrigin = 'anonymous';
+                
+                img.onload = function() {
+                    canvas.width = size;
+                    canvas.height = size;
+                    
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0, size, size);
+                    
+                    if (callback) callback(null);
+                };
+                
+                img.onerror = function() {
+                    console.error('Failed to load QR code from server');
+                    
+                    // Fallback: draw a simple placeholder
+                    canvas.width = size;
+                    canvas.height = size;
+                    
+                    const ctx = canvas.getContext('2d');
+                    ctx.fillStyle = '#ffffff';
+                    ctx.fillRect(0, 0, size, size);
+                    
+                    ctx.fillStyle = '#000000';
+                    ctx.font = '12px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('QR Code', size/2, size/2 - 10);
+                    ctx.fillText('(Failed)', size/2, size/2 + 10);
+                    
+                    if (callback) callback(new Error('Failed to load QR code'));
+                };
+                
+                img.src = qrUrl;
+            }
+        };
+        
+        console.log('Local QR Code implementation loaded');
+    </script>
     
     <!-- Admin JavaScript -->
     <script src="js/admin.js"></script>

map/app/public/css/admin.css

@@ -307,10 +307,10 @@
     aspect-ratio: 8.5 / 11;
     background: white;
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    padding: 20px;
+    padding: 40px; /* Match print padding */
     margin: 0 auto;
     overflow: auto;
-    font-size: 10px;
+    font-size: 12px; /* Match print font size */
     line-height: 1.4;
     position: relative;
 }
@@ -326,17 +326,38 @@
     }
     
     .walk-sheet-page {
-        position: absolute;
+        position: fixed;
         left: 0;
         top: 0;
         width: 8.5in;
         height: 11in;
         max-width: none;
-        padding: 0.5in;
+        padding: 0.5in; /* 0.5 inch margins */
         margin: 0;
         box-shadow: none;
         font-size: 12pt;
+        page-break-after: always;
     }
+    
+    /* Ensure QR codes print properly */
+    .ws-qr-code img {
+        width: 100px !important;
+        height: 100px !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+}
+
+/* Adjust preview scaling */
+.walk-sheet-preview .walk-sheet-page {
+    transform: scale(0.5);
+    transform-origin: top left;
+    margin-bottom: -50%; /* Compensate for scale */
+}
+
+.walk-sheet-preview {
+    overflow: hidden;
+    height: 550px; /* Fixed height for preview container */
 }
 
 /* Walk Sheet Content Styles */
@@ -539,3 +560,24 @@
     --transition: all 0.2s ease;
     --header-height: 60px;
 }
+
+/* Crosshair styling */
+.crosshair {
+    pointer-events: none;
+    z-index: 1000;
+}
+
+.crosshair div {
+    border-radius: 1px;
+    opacity: 0.8;
+}
+
+/* Admin map styling */
+.admin-map {
+    position: relative;
+    cursor: crosshair;
+}
+
+.admin-map .leaflet-container {
+    cursor: crosshair;
+}

map/app/public/favicon.ico

@@ -0,0 +1 @@
+<!-- Simple favicon placeholder -->

map/app/public/js/admin.js

@@ -48,6 +48,24 @@ function initializeAdminMap() {
         minZoom: 2
     }).addTo(adminMap);
     
+    // Add crosshair to center of map
+    const crosshairIcon = L.divIcon({
+        className: 'crosshair',
+        iconSize: [20, 20],
+        html: '<div style="width: 20px; height: 20px; position: relative;"><div style="position: absolute; top: 9px; left: 0; width: 20px; height: 2px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div><div style="position: absolute; top: 0; left: 9px; width: 2px; height: 20px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div></div>'
+    });
+    
+    const crosshair = L.marker(adminMap.getCenter(), {
+        icon: crosshairIcon,
+        interactive: false,
+        zIndexOffset: 1000
+    }).addTo(adminMap);
+    
+    // Update crosshair position when map moves
+    adminMap.on('move', function() {
+        crosshair.setLatLng(adminMap.getCenter());
+    });
+    
     // Add click handler to set location
     adminMap.on('click', handleMapClick);
     
@@ -128,31 +146,46 @@ function updateCoordinatesFromMap() {
 // Setup event listeners
 function setupEventListeners() {
     // Use current view button
-    document.getElementById('use-current-view').addEventListener('click', () => {
-        const center = adminMap.getCenter();
-        const zoom = adminMap.getZoom();
-        
-        document.getElementById('start-lat').value = center.lat.toFixed(6);
-        document.getElementById('start-lng').value = center.lng.toFixed(6);
-        document.getElementById('start-zoom').value = zoom;
-        
-        updateStartMarker(center.lat, center.lng);
-        showStatus('Captured current map view', 'success');
-    });
+    const useCurrentViewBtn = document.getElementById('use-current-view');
+    if (useCurrentViewBtn) {
+        useCurrentViewBtn.addEventListener('click', () => {
+            const center = adminMap.getCenter();
+            const zoom = adminMap.getZoom();
+            
+            document.getElementById('start-lat').value = center.lat.toFixed(6);
+            document.getElementById('start-lng').value = center.lng.toFixed(6);
+            document.getElementById('start-zoom').value = zoom;
+            
+            updateStartMarker(center.lat, center.lng);
+            showStatus('Captured current map view', 'success');
+        });
+    }
     
     // Save button
-    document.getElementById('save-start-location').addEventListener('click', saveStartLocation);
+    const saveLocationBtn = document.getElementById('save-start-location');
+    if (saveLocationBtn) {
+        saveLocationBtn.addEventListener('click', saveStartLocation);
+    }
     
     // Coordinate input changes
-    document.getElementById('start-lat').addEventListener('change', updateMapFromInputs);
-    document.getElementById('start-lng').addEventListener('change', updateMapFromInputs);
-    document.getElementById('start-zoom').addEventListener('change', updateMapFromInputs);
+    const startLatInput = document.getElementById('start-lat');
+    const startLngInput = document.getElementById('start-lng');
+    const startZoomInput = document.getElementById('start-zoom');
+    
+    if (startLatInput) startLatInput.addEventListener('change', updateMapFromInputs);
+    if (startLngInput) startLngInput.addEventListener('change', updateMapFromInputs);
+    if (startZoomInput) startZoomInput.addEventListener('change', updateMapFromInputs);
     
     // Walk Sheet buttons
-    document.getElementById('save-walk-sheet').addEventListener('click', saveWalkSheetConfig);
-    document.getElementById('preview-walk-sheet').addEventListener('click', generateWalkSheetPreview);
-    document.getElementById('print-walk-sheet').addEventListener('click', printWalkSheet);
-    document.getElementById('refresh-preview').addEventListener('click', generateWalkSheetPreview);
+    const saveWalkSheetBtn = document.getElementById('save-walk-sheet');
+    const previewWalkSheetBtn = document.getElementById('preview-walk-sheet');
+    const printWalkSheetBtn = document.getElementById('print-walk-sheet');
+    const refreshPreviewBtn = document.getElementById('refresh-preview');
+    
+    if (saveWalkSheetBtn) saveWalkSheetBtn.addEventListener('click', saveWalkSheetConfig);
+    if (previewWalkSheetBtn) previewWalkSheetBtn.addEventListener('click', generateWalkSheetPreview);
+    if (printWalkSheetBtn) printWalkSheetBtn.addEventListener('click', printWalkSheet);
+    if (refreshPreviewBtn) refreshPreviewBtn.addEventListener('click', generateWalkSheetPreview);
     
     // Auto-update preview on input change
     const walkSheetInputs = document.querySelectorAll(
@@ -161,24 +194,65 @@ function setupEventListeners() {
     );
     
     walkSheetInputs.forEach(input => {
-        input.addEventListener('input', debounce(() => {
-            generateWalkSheetPreview();
-        }, 500));
+        if (input) {
+            input.addEventListener('input', debounce(() => {
+                generateWalkSheetPreview();
+            }, 500));
+        }
     });
     
     // Add URL change listeners to detect when QR codes need regeneration
     for (let i = 1; i <= 3; i++) {
         const urlInput = document.getElementById(`qr-code-${i}-url`);
-        let previousUrl = urlInput.value;
-        
-        urlInput.addEventListener('change', () => {
-            if (urlInput.value !== previousUrl) {
-                // URL changed, clear stored QR code
-                delete storedQRCodes[i];
-                previousUrl = urlInput.value;
+        if (urlInput) {
+            let previousUrl = urlInput.value;
+            
+            urlInput.addEventListener('change', () => {
+                if (urlInput.value !== previousUrl) {
+                    // URL changed, clear stored QR code
+                    delete storedQRCodes[i];
+                    previousUrl = urlInput.value;
+                }
+            });
+        }
+    }
+}
+
+// Setup navigation between admin sections
+function setupNavigation() {
+    const navLinks = document.querySelectorAll('.admin-nav a');
+    const sections = document.querySelectorAll('.admin-section');
+    
+    navLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            
+            // Get target section ID
+            const targetId = link.getAttribute('href').substring(1);
+            
+            // Hide all sections
+            sections.forEach(section => {
+                section.style.display = 'none';
+            });
+            
+            // Show target section
+            const targetSection = document.getElementById(targetId);
+            if (targetSection) {
+                targetSection.style.display = 'block';
+            }
+            
+            // Update active nav link
+            navLinks.forEach(navLink => {
+                navLink.classList.remove('active');
+            });
+            link.classList.add('active');
+            
+            // If switching to walk sheet, generate preview
+            if (targetId === 'walk-sheet') {
+                generateWalkSheetPreview();
             }
         });
-    }
+    });
 }
 
 // Update map from input fields
@@ -245,19 +319,24 @@ async function saveStartLocation() {
 // Save walk sheet configuration
 async function saveWalkSheetConfig() {
     const config = {
-        walk_sheet_title: document.getElementById('walk-sheet-title').value,
-        walk_sheet_subtitle: document.getElementById('walk-sheet-subtitle').value,
-        walk_sheet_footer: document.getElementById('walk-sheet-footer').value,
-        qr_code_1_url: document.getElementById('qr-code-1-url').value,
-        qr_code_1_label: document.getElementById('qr-code-1-label').value,
-        qr_code_2_url: document.getElementById('qr-code-2-url').value,
-        qr_code_2_label: document.getElementById('qr-code-2-label').value,
-        qr_code_3_url: document.getElementById('qr-code-3-url').value,
-        qr_code_3_label: document.getElementById('qr-code-3-label').value
+        walk_sheet_title: document.getElementById('walk-sheet-title')?.value || '',
+        walk_sheet_subtitle: document.getElementById('walk-sheet-subtitle')?.value || '',
+        walk_sheet_footer: document.getElementById('walk-sheet-footer')?.value || '',
+        qr_code_1_url: document.getElementById('qr-code-1-url')?.value || '',
+        qr_code_1_label: document.getElementById('qr-code-1-label')?.value || '',
+        qr_code_2_url: document.getElementById('qr-code-2-url')?.value || '',
+        qr_code_2_label: document.getElementById('qr-code-2-label')?.value || '',
+        qr_code_3_url: document.getElementById('qr-code-3-url')?.value || '',
+        qr_code_3_label: document.getElementById('qr-code-3-label')?.value || ''
     };
     
     // Show loading state
     const saveButton = document.getElementById('save-walk-sheet');
+    if (!saveButton) {
+        showStatus('Save button not found', 'error');
+        return;
+    }
+    
     const originalText = saveButton.textContent;
     saveButton.textContent = 'Saving...';
     saveButton.disabled = true;
@@ -280,7 +359,7 @@ async function saveWalkSheetConfig() {
             if (data.qrCodes) {
                 for (let i = 1; i <= 3; i++) {
                     if (data.qrCodes[`qr_code_${i}_image`]) {
-                        storedQRCodes[i] = data.qrCodes[`qr_code_${i}_image`];
+                        storedQRCodes[`qr_code_${i}_image`] = data.qrCodes[`qr_code_${i}_image`];
                     }
                 }
             }
@@ -302,9 +381,9 @@ async function saveWalkSheetConfig() {
 
 // Generate walk sheet preview
 function generateWalkSheetPreview() {
-    const title = document.getElementById('walk-sheet-title').value || 'Campaign Walk Sheet';
-    const subtitle = document.getElementById('walk-sheet-subtitle').value || 'Door-to-Door Canvassing Form';
-    const footer = document.getElementById('walk-sheet-footer').value || 'Thank you for your support!';
+    const title = document.getElementById('walk-sheet-title')?.value || 'Campaign Walk Sheet';
+    const subtitle = document.getElementById('walk-sheet-subtitle')?.value || 'Door-to-Door Canvassing Form';
+    const footer = document.getElementById('walk-sheet-footer')?.value || 'Thank you for your support!';
     
     let previewHTML = `
         <div class="ws-header">
@@ -316,30 +395,21 @@ function generateWalkSheetPreview() {
     // Add QR codes section
     const qrCodesHTML = [];
     for (let i = 1; i <= 3; i++) {
-        const url = document.getElementById(`qr-code-${i}-url`).value;
-        const label = document.getElementById(`qr-code-${i}-label`).value;
+        const urlInput = document.getElementById(`qr-code-${i}-url`);
+        const labelInput = document.getElementById(`qr-code-${i}-label`);
+        
+        const url = urlInput?.value || '';
+        const label = labelInput?.value || '';
         
         if (url) {
-            // Check if we have a stored QR code image
-            if (storedQRCodes[i] && storedQRCodes[i].url) {
-                // Use stored QR code image
-                qrCodesHTML.push(`
-                    <div class="ws-qr-item">
-                        <div class="ws-qr-code">
-                            <img src="${storedQRCodes[i].url}" alt="QR Code ${i}" style="width: 80px; height: 80px;">
-                        </div>
-                        <div class="ws-qr-label">${escapeHtml(label) || `QR Code ${i}`}</div>
+            qrCodesHTML.push(`
+                <div class="ws-qr-item">
+                    <div class="ws-qr-code" id="preview-qr-${i}">
+                        <!-- QR code will be inserted here -->
                     </div>
-                `);
-            } else {
-                // Generate QR code client-side as fallback
-                qrCodesHTML.push(`
-                    <div class="ws-qr-item">
-                        <div class="ws-qr-code" id="preview-qr-${i}"></div>
-                        <div class="ws-qr-label">${escapeHtml(label) || `QR Code ${i}`}</div>
-                    </div>
-                `);
-            }
+                    <div class="ws-qr-label">${escapeHtml(label || `QR Code ${i}`)}</div>
+                </div>
+            `);
         }
     }
     
@@ -393,14 +463,17 @@ function generateWalkSheetPreview() {
                     <div class="ws-form-field"></div>
                 </div>
                 <div class="ws-form-group">
-                    <label class="ws-form-label">Sign Request ☐ Yes ☐ No</label>
-                    <div class="ws-form-field"></div>
+                    <label class="ws-form-label">Sign Request</label>
+                    <div class="ws-form-field" style="display: flex; gap: 20px;">
+                        <span>☐ Yes</span>
+                        <span>☐ No</span>
+                    </div>
                 </div>
             </div>
             
             <div class="ws-form-row">
                 <div class="ws-form-group">
-                    <label class="ws-form-label">Category</label>
+                    <label class="ws-form-label">Sign Size</label>
                     <div class="ws-form-field"></div>
                 </div>
                 <div class="ws-form-group">
@@ -416,97 +489,149 @@ function generateWalkSheetPreview() {
         </div>
     `;
     
-    // Update preview
-    const previewContent = document.getElementById('walk-sheet-preview-content');
-    previewContent.innerHTML = previewHTML;
-    
-    // Add footer (positioned absolutely in CSS)
+    // Add footer
     if (footer) {
-        const footerDiv = document.createElement('div');
-        footerDiv.className = 'ws-footer';
-        footerDiv.innerHTML = escapeHtml(footer);
-        previewContent.appendChild(footerDiv);
+        previewHTML += `
+            <div class="ws-footer">
+                ${escapeHtml(footer)}
+            </div>
+        `;
     }
     
-    // Generate client-side QR codes for items without stored images
-    setTimeout(() => {
-        for (let i = 1; i <= 3; i++) {
-            const url = document.getElementById(`qr-code-${i}-url`).value;
-            if (url && !storedQRCodes[i]) {
-                const qrContainer = document.getElementById(`preview-qr-${i}`);
-                if (qrContainer && typeof QRCode !== 'undefined') {
-                    qrContainer.innerHTML = '';
-                    new QRCode(qrContainer, {
-                        text: url,
-                        width: 80,
-                        height: 80,
-                        correctLevel: QRCode.CorrectLevel.M
-                    });
-                }
+    // Update preview
+    const previewContent = document.getElementById('walk-sheet-preview-content');
+    if (previewContent) {
+        previewContent.innerHTML = previewHTML;
+        
+        // Generate QR codes after DOM is updated
+        setTimeout(() => {
+            generatePreviewQRCodes();
+        }, 100);
+    } else {
+        console.warn('Walk sheet preview content container not found');
+    }
+}
+
+// Generate QR codes for preview
+async function generatePreviewQRCodes() {
+    for (let i = 1; i <= 3; i++) {
+        const urlInput = document.getElementById(`qr-code-${i}-url`);
+        const url = urlInput?.value || '';
+        const qrContainer = document.getElementById(`preview-qr-${i}`);
+        
+        if (url && qrContainer) {
+            try {
+                // Use our local QR code generation endpoint
+                const qrImageUrl = `/api/qr?text=${encodeURIComponent(url)}&size=100`;
+                qrContainer.innerHTML = `<img src="${qrImageUrl}" alt="QR Code ${i}" style="width: 100px; height: 100px;">`;
+            } catch (error) {
+                console.error(`Failed to display QR code ${i}:`, error);
+                qrContainer.innerHTML = '<div style="width: 100px; height: 100px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #999;">QR Error</div>';
             }
+        } else if (qrContainer) {
+            // Clear empty QR containers
+            qrContainer.innerHTML = '';
         }
-    }, 100);
+    }
 }
 
 // Print walk sheet
 function printWalkSheet() {
-    // First generate fresh preview
+    // First generate fresh preview to ensure QR codes are generated
     generateWalkSheetPreview();
     
-    // Wait for QR codes to generate
+    // Wait for QR codes to generate, then print
     setTimeout(() => {
-        window.print();
+        // Create a print-specific window
+        const printContent = document.getElementById('walk-sheet-preview-content').innerHTML;
+        const printWindow = window.open('', '_blank');
+        
+        printWindow.document.write(`
+            <!DOCTYPE html>
+            <html>
+            <head>
+                <title>Walk Sheet - Print</title>
+                <link rel="stylesheet" href="/css/style.css">
+                <link rel="stylesheet" href="/css/admin.css">
+                <style>
+                    @media print {
+                        @page {
+                            size: letter;
+                            margin: 0;
+                        }
+                        body {
+                            margin: 0;
+                            padding: 0;
+                        }
+                        .walk-sheet-page {
+                            width: 8.5in !important;
+                            height: 11in !important;
+                            padding: 0.5in !important;
+                            margin: 0 !important;
+                            box-shadow: none !important;
+                            page-break-after: avoid !important;
+                        }
+                    }
+                </style>
+            </head>
+            <body>
+                <div class="walk-sheet-page">
+                    ${printContent}
+                </div>
+            </body>
+            </html>
+        `);
+        
+        printWindow.document.close();
+        
+        // Wait for images to load
+        printWindow.onload = function() {
+            setTimeout(() => {
+                printWindow.print();
+                printWindow.close();
+            }, 250);
+        };
     }, 500);
 }
 
-// Setup navigation between sections
-function setupNavigation() {
-    const navLinks = document.querySelectorAll('.admin-nav a');
-    const sections = document.querySelectorAll('.admin-section');
-    
-    navLinks.forEach(link => {
-        link.addEventListener('click', (e) => {
-            e.preventDefault();
-            const targetId = link.getAttribute('href').substring(1);
-            
-            // Update active states
-            navLinks.forEach(l => l.classList.remove('active'));
-            link.classList.add('active');
-            
-            // Show/hide sections
-            sections.forEach(section => {
-                section.style.display = section.id === targetId ? 'block' : 'none';
-            });
-        });
-    });
-}
-
 // Load walk sheet configuration
 async function loadWalkSheetConfig() {
     try {
         const response = await fetch('/api/admin/walk-sheet-config');
         const data = await response.json();
         
-        if (data.success && data.config) {
+        if (data.success && data.data) {
             // Populate form fields
-            document.getElementById('walk-sheet-title').value = data.config.walk_sheet_title || '';
-            document.getElementById('walk-sheet-subtitle').value = data.config.walk_sheet_subtitle || '';
-            document.getElementById('walk-sheet-footer').value = data.config.walk_sheet_footer || '';
+            const titleInput = document.getElementById('walk-sheet-title');
+            const subtitleInput = document.getElementById('walk-sheet-subtitle');
+            const footerInput = document.getElementById('walk-sheet-footer');
             
-            // QR codes
+            if (titleInput) titleInput.value = data.data.walk_sheet_title || '';
+            if (subtitleInput) subtitleInput.value = data.data.walk_sheet_subtitle || '';
+            if (footerInput) footerInput.value = data.data.walk_sheet_footer || '';
+            
+            // Store QR code images if they exist
             for (let i = 1; i <= 3; i++) {
-                document.getElementById(`qr-code-${i}-url`).value = data.config[`qr_code_${i}_url`] || '';
-                document.getElementById(`qr-code-${i}-label`).value = data.config[`qr_code_${i}_label`] || '';
+                const urlField = document.getElementById(`qr-code-${i}-url`);
+                const labelField = document.getElementById(`qr-code-${i}-label`);
                 
-                // Store QR code image data if available
-                if (data.config[`qr_code_${i}_image`]) {
-                    storedQRCodes[i] = data.config[`qr_code_${i}_image`];
+                if (urlField && data.data[`qr_code_${i}_url`]) {
+                    urlField.value = data.data[`qr_code_${i}_url`];
+                }
+                if (labelField && data.data[`qr_code_${i}_label`]) {
+                    labelField.value = data.data[`qr_code_${i}_label`];
+                }
+                
+                // Store the QR code image URL if it exists
+                if (data.data[`qr_code_${i}_image`]) {
+                    storedQRCodes[`qr_code_${i}_image`] = data.data[`qr_code_${i}_image`];
                 }
             }
             
             // Generate preview
             generateWalkSheetPreview();
         }
+        
     } catch (error) {
         console.error('Failed to load walk sheet config:', error);
     }