From b02fb0aa204dab06c84fb99ecb7d6228c47c02f0 Mon Sep 17 00:00:00 2001
From: Kelden Dradul Dorji <keldendraduldorji@gmail.com>
Date: Mon, 21 Apr 2025 16:48:33 +0600
Subject: [PATCH] keep to here

---
 public/index.html |   34 +-
 public/index.js   | 1410 +++++++++++++++++-----
 public/style.css  | 2821 +++++++++++++++++++++++++++++++++++++++++----
 server.js         |  229 +++-
 4 files changed, 3960 insertions(+), 534 deletions(-)

diff --git a/public/index.html b/public/index.html
index d81e8a0..dfb5379 100644
--- a/public/index.html
+++ b/public/index.html
@@ -62,10 +62,10 @@ <h2>Welcome to Tshong AI</h2>
             </div>
         </div>
         <div class="action-buttons">
-            <button id="addPhotoBtn" class="action-button photo-button">
+            <button id="addPhotoBtn" class="action-button photo-button" onclick="window.showPhotoOptions()">
                 <span class="icon">📸</span> Add ReceiptPhoto
             </button>
-            <button id="addCashBtn" class="action-button cash-button">
+            <button id="addCashBtn" class="action-button cash-button" onclick="window.showManualEntryModal()">
                 <span class="icon">💰</span> Add Cash Receipt
             </button>
         </div>
@@ -74,7 +74,14 @@ <h2>Welcome to Tshong AI</h2>
 
     <!-- Add this before </body> -->
     <div id="confirmationModal" class="modal">
+        <div class="modal-content" id="confirmationModalContent">
+            <div class="modal-header">
+                <div class="drag-handle" id="dragHandle">
+                    <span class="drag-icon">☰</span>
+                </div>
+            </div>
         <div class="modal-content">
+            <button class="close-btn" onclick="closeConfirmationModal()">&times;</button>
             <!-- <div class="question-icon">❓</div>
             <h2>Is this the correct details?</h2> -->
             <form id="confirmationForm">
@@ -110,6 +117,25 @@ <h2>Is this the correct details?</h2> -->
                         Receipt Date is not today. Are you sure you want to add this?
                     </div>
                 </div>
+
+                <div id="confirmRemarksField" class="form-group" style="display: none;">
+                    <label for="confirmRemarks">Remarks</label>
+                    <input type="text" 
+                           id="confirmRemarks" 
+                           name="confirmRemarks" 
+                           placeholder="Enter Remarks"
+                           style="box-sizing: border-box;">
+                </div>
+                
+                <div id="confirmDiningField" class="form-group" style="display: none;">
+                    <div class="dining-field">
+                        <input type="checkbox" 
+                               id="confirmDiningCheck" 
+                               name="confirmDining">
+                        <label for="confirmDiningCheck">Dining</label>
+                    </div>
+                </div>
+                
                 <div class="button-group">
                     <button type="button" class="primary-button" onclick="handleConfirmDetails()">Confirm Details</button>
                 </div>
@@ -142,6 +168,7 @@ <h2>Is this the correct details?</h2> -->
     <!-- Manual Receipt Entry Modal -->
     <div id="manualEntryModal" class="photo-options-modal" style="display: none;">
         <div class="modal-content">
+            <button class="close-btn" onclick="closeManualEntryModal()">&times;</button>
             <h3>Add Cash Receipt</h3>
             <form id="manualReceiptForm">
                 <div class="form-group">
@@ -168,7 +195,6 @@ <h3>Add Cash Receipt</h3>
                     <span class="icon" style="color: white !important;">💾</span>
                     Submit
                 </button>
-                <button type="button" class="cancel-btn" onclick="closeManualEntryModal()">Cancel</button>
             </form>
         </div>
     </div>
@@ -225,4 +251,4 @@ <h3>Multiple Payments</h3>
     </template>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
index 251141e..6ebf6d1 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', function() {
-    const validCustomerIDs = ['a8358', '0e702', '571b6', 'be566', '72d72'];
+    const validCustomerIDs = ['a8358', '0e702', '571b6', 'be566', '72d72', 'HFpuU', 'eqmB4', 't0Ctf', 'ChQsf', 'FVQbb'];
     let isLoggedIn = false;
     let children = [];
     let currentConfirmationData = null;
@@ -7,21 +7,92 @@ document.addEventListener('DOMContentLoaded', function() {
     // Add a flag to control prediction loop
     let isPredicting = false;
 
+    // Add this flag at the top level with other variables
+    let isCapturing = false;
+
+    function setupEventListeners() {
+        console.log('Setting up event listeners');
+        const addPhotoBtn = document.getElementById('addPhotoBtn');
+        const addCashBtn = document.getElementById('addCashBtn');
+
+        if (addPhotoBtn) {
+            console.log('Found addPhotoBtn, adding click listener');
+            addPhotoBtn.addEventListener('click', function(e) {
+                e.preventDefault();
+                console.log('Photo button clicked');
+                showPhotoOptions();
+            });
+        } else {
+            console.log('addPhotoBtn not found');
+        }
+
+        if (addCashBtn) {
+            console.log('Found addCashBtn, adding click listener');
+            addCashBtn.addEventListener('click', function(e) {
+                e.preventDefault();
+                console.log('Cash button clicked');
+                showManualEntryModal();
+            });
+        } else {
+            console.log('addCashBtn not found');
+        }
+    }
+
     // Update the window load event listener to show dashboard button if logged in
     window.addEventListener('load', () => {
+        console.log('Window load event fired');
         const loginOverlay = document.getElementById('loginOverlay');
         const mainContent = document.getElementById('mainContent');
         
         if (sessionStorage.getItem('isLoggedIn') === 'true') {
+            console.log('User is logged in');
             isLoggedIn = true;
             loginOverlay.style.display = 'none';
-            // userNav.style.display = 'block';
             mainContent.style.display = 'block';
-            
-            // // Hide initial content
+            setupEventListeners();
         }
     });
 
+    // Update validateLogin to setup event listeners after login
+    function validateLogin() {
+        const loginButton = document.getElementById('login-button');
+        const spinner = document.getElementById('loginSpinner');
+        const loginMessage = document.getElementById('loginMessage');
+        const mainContent = document.getElementById('mainContent');
+
+        loginButton.disabled = true;
+        spinner.style.display = 'inline-block';
+        loginMessage.textContent = '';
+
+        setTimeout(() => {
+            const customerID = document.getElementById('customerID').value.trim();
+            
+            if (validCustomerIDs.includes(customerID)) {
+                isLoggedIn = true;
+                sessionStorage.setItem('isLoggedIn', 'true');
+                sessionStorage.setItem('customerID', customerID);
+                
+                // Fade out login overlay and show main content
+                const loginOverlay = document.getElementById('loginOverlay');
+                loginOverlay.style.opacity = '0';
+                loginOverlay.style.transition = 'opacity 0.3s ease';
+                setTimeout(() => {
+                    loginOverlay.style.display = 'none';
+                    mainContent.style.display = 'block';
+                    document.getElementById('userNav').style.display = 'block';
+                    setupEventListeners();
+                }, 300);
+            } else {
+                loginMessage.textContent = 'Invalid Customer ID. Please try again.';
+                loginButton.disabled = false;
+                spinner.style.display = 'none';
+            }
+        }, 1000);
+    }
+
+    // Make validateLogin available globally
+    window.validateLogin = validateLogin;
+
     async function handleManualSubmit() {
         // Get and disable the submit button
         const submitButton = document.querySelector('.photo-option-btn[onclick="handleManualSubmit()"]');
@@ -91,79 +162,86 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     // Add event listener for the Add Photo button
-    document.getElementById('addPhotoBtn').addEventListener('click', showPhotoOptions);
+    const addPhotoBtn = document.getElementById('addPhotoBtn');
+    console.log('addPhotoBtn element:', addPhotoBtn);
+    if (addPhotoBtn) {
+        console.log('Adding click listener to addPhotoBtn');
+        addPhotoBtn.addEventListener('click', showPhotoOptions);
+    }
     
-    document.getElementById('addCashBtn').addEventListener('click', showManualEntryModal);
+    const addCashBtn = document.getElementById('addCashBtn');
+    console.log('addCashBtn element:', addCashBtn);
+    if (addCashBtn) {
+        console.log('Adding click listener to addCashBtn');
+        addCashBtn.addEventListener('click', showManualEntryModal);
+    }
 
+    // Define modal functions at the top level
     function showPhotoOptions() {
+        console.log('showPhotoOptions called');
         const modal = document.getElementById('photoOptionsModal');
-        modal.style.display = 'flex';
-    }
+        if (modal) {
+            modal.style.display = 'flex';
+            console.log('Showing photo options modal');
+        } else {
+            console.error('photoOptionsModal not found');
+        }
+    };
+
+    function showManualEntryModal() {
+        console.log('showManualEntryModal called');
+        const modal = document.getElementById('manualEntryModal');
+        if (modal) {
+            modal.style.display = 'flex';
+            console.log('Showing manual entry modal');
+            
+            // Reset form
+            const amountInput = document.getElementById('amount');
+            const particularsInput = document.getElementById('particulars');
+            
+            if (amountInput) amountInput.value = '';
+            if (particularsInput) particularsInput.value = '';
+        } else {
+            console.error('manualEntryModal not found');
+        }
+    };
 
     function closePhotoOptions() {
         const modal = document.getElementById('photoOptionsModal');
-        modal.style.display = 'none';
+        if (modal) {
+            modal.classList.remove('show');
+            // Wait for animation to complete before hiding
+            setTimeout(() => {
+                modal.style.display = 'none';
+            }, 300);
+        }
     }
 
-    function showManualEntryModal() {
-        // Clear any existing values
-        document.getElementById('confirmAmount').value = '';
-        document.getElementById('confirmReference').value = '';
-        
-        // Set default date to today and validate
-        const today = new Date();
-        const dateValue = today.toISOString().split('T')[0];
-        const dateInput = document.getElementById('confirmDate');
-        dateInput.value = dateValue;
-        
-        // Remove any existing listener before adding a new one
-        dateInput.removeEventListener('change', validateDate);
-        dateInput.addEventListener('change', () => validateDate(dateInput.value));
-        validateDate(dateInput.value);
-        
-        // Show the modal
+    function closeManualEntryModal() {
         const modal = document.getElementById('manualEntryModal');
-        modal.style.display = 'flex';  // Make sure we're targeting the correct modal
+        if (modal) {
+            modal.classList.remove('show');
+            // Wait for animation to complete before hiding
+            setTimeout(() => {
+                modal.style.display = 'none';
+                document.getElementById('manualReceiptForm').reset();
+            }, 300);
+        }
     }
 
-    function validateLogin() {
-        const loginButton = document.getElementById('login-button');
-        const spinner = document.getElementById('loginSpinner');
-        const loginMessage = document.getElementById('loginMessage');
-        const mainContent = document.getElementById('mainContent');
+    function closeCameraModal() {
+        isPredicting = false;  // Stop prediction loop
+        isCapturing = false;  // Reset capturing flag        
 
-        loginButton.disabled = true;
-        spinner.style.display = 'inline-block';
-        loginMessage.textContent = '';
+        // Re-enable capture button if it exists and is disabled
 
-        setTimeout(() => {
-            const customerID = document.getElementById('customerID').value.trim();
-            
-            if (validCustomerIDs.includes(customerID)) {
-                isLoggedIn = true;
-                sessionStorage.setItem('isLoggedIn', 'true');
-                sessionStorage.setItem('customerID', customerID);
-                
-                // Fade out login overlay and show main content
-                const loginOverlay = document.getElementById('loginOverlay');
-                loginOverlay.style.opacity = '0';
-                loginOverlay.style.transition = 'opacity 0.3s ease';
-                setTimeout(() => {
-                    loginOverlay.style.display = 'none';
-                    mainContent.style.display = 'block';
-                    document.getElementById('userNav').style.display = 'block';
-                }, 300);
-            } else {
-                loginMessage.textContent = 'Invalid Customer ID. Please try again.';
-                loginButton.disabled = false;
-                spinner.style.display = 'none';
-            }
-        }, 1000);
-    }
+        const captureButton = document.getElementById('capture-button');
+        if (captureButton && captureButton.disabled) {
+            captureButton.disabled = false;
+            captureButton.style.opacity = '1';
+            captureButton.style.cursor = 'pointer';
+        }
 
-    function closeCameraModal() {
-        isPredicting = false;  // Stop prediction loop
-        
         // Clear all highlighters first
         const liveView = document.getElementById('liveView');
         if (liveView) {
@@ -182,25 +260,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
 
-    function closeManualEntryModal() {
-        const modal = document.getElementById('manualEntryModal');
-        if (modal) {
-            // Re-enable the submit button
-            const submitButton = modal.querySelector('.photo-option-btn[onclick="handleManualSubmit()"]');
-            if (submitButton) {
-                submitButton.disabled = false;
-                submitButton.style.opacity = '1';
-                submitButton.style.cursor = 'pointer';
-            }
-            modal.classList.add('fade-out');
-            setTimeout(() => {
-                modal.style.display = 'none';
-                modal.classList.remove('fade-out');
-                document.getElementById('manualReceiptForm').reset();
-            }, 300);
-        }
-    }
-
      // Add toast functionality
      function showToast(message, type = 'info') {
         // Remove existing toast if any
@@ -416,57 +475,241 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
 
-    function showRecentFiles() {
-        try {
-            const recentFiles = JSON.parse(localStorage.getItem('recentFiles') || '[]');
-            if (recentFiles.length === 0) {
-                showToast('No recent files', 'info');
+    async function showRecentFiles() {
+        // Create date picker modal first
+        const modal = document.createElement('div');
+        modal.className = 'photo-options-modal';
+        modal.style.display = 'flex';
+        const modalContent = document.createElement('div');
+        modalContent.className = 'modal-content';
+        
+        // Add header
+        const header = document.createElement('h3');
+        header.textContent = 'Select Date';
+
+        modalContent.appendChild(header);
+
+        // Add date picker
+        const datePickerContainer = document.createElement('div');
+        datePickerContainer.className = 'form-group';
+
+        // Set max date to today
+        const today = new Date();
+        const maxDate = today.toISOString().split('T')[0];
+
+        // Set min date to 3 months ago
+        const threeMonthsAgo = new Date();
+        threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
+        const minDate = threeMonthsAgo.toISOString().split('T')[0];
+
+        datePickerContainer.innerHTML = `
+            <label for="datePicker">Choose a date to view receipts:</label>
+            <input type="date" 
+                   id="datePicker" 
+                   class="date-input"
+                   max="${maxDate}"
+                   min="${minDate}"
+                   value="${maxDate}">
+        `;
+
+        modalContent.appendChild(datePickerContainer);        
+
+        // Add buttons
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'button-group';
+        buttonContainer.innerHTML = `
+            <button class="photo-option-btn" id="viewReceiptsBtn">
+                <span class="icon">📄</span> View Receipts
+            </button>
+            <button class="cancel-btn">
+                Cancel
+            </button>
+        `;
+
+        modalContent.appendChild(buttonContainer);
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+
+        // Add event listeners
+        const cancelBtn = modal.querySelector('.cancel-btn');
+        cancelBtn.onclick = () => modal.remove();
+
+        const viewReceiptsBtn = modal.querySelector('#viewReceiptsBtn');
+        viewReceiptsBtn.onclick = async () => {
+            const selectedDate = document.getElementById('datePicker').value;
+            if (!selectedDate) {
+                showToast('Please select a date', 'error');
                 return;
             }
 
-            const modal = document.createElement('div');
-            modal.className = 'image-preview-modal';
-            modal.innerHTML = `
-                <div class="preview-content">
-                    <h2 style="color: white; text-align: center;">Recent Files</h2>
-                    <div class="recent-files-grid">
-                        ${recentFiles.map(file => `
-                            <div class="recent-file-item">
-                                <img src="data:image/jpeg;base64,${file.imageData}" alt="Recent receipt">
-                                <div class="recent-file-timestamp">
-                                    ${new Date(file.timestamp).toLocaleDateString()}
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                    <div class="preview-controls">
-                        <button class="preview-button close-btn">Close</button>
-                    </div>
+            // Show loading indicator
+            const loadingIndicator = document.createElement('div');
+            loadingIndicator.className = 'floating-loader';
+            loadingIndicator.innerHTML = `
+                <div class="loader-content">
+                    <div class="loader-spinner"></div>
+                    <span>Loading receipts...</span>
                 </div>
             `;
+            document.body.appendChild(loadingIndicator);
+            try {
+                const customerID = sessionStorage.getItem('customerID');
+                const response = await fetch(`/get-daily-images?customerID=${customerID}&date=${selectedDate}`);
+                const data = await response.json();   
 
-            document.body.appendChild(modal);
-            setTimeout(() => modal.classList.add('show'), 0);
+                // Remove all existing photo-options-modal elements
+                const existingModals = document.querySelectorAll('.photo-options-modal');
+                existingModals.forEach(modal => modal.remove());
 
-            modal.querySelector('.close-btn').onclick = () => {
-                modal.classList.remove('show');
-                setTimeout(() => modal.remove(), 300);
-            };
+                // Create and show gallery modal
+                showGalleryModal(data);
+            } catch (error) {
+                console.error('Error loading images:', error);
+                showToast('Error loading images', 'error');
+            } finally {
+                // Remove loading indicator
+                loadingIndicator.classList.add('fade-out');
+                setTimeout(() => loadingIndicator.remove(), 300);
+            }
+        };
+    }
 
-            // Add click handlers for recent files
-            modal.querySelectorAll('.recent-file-item').forEach((item, index) => {
-                item.onclick = () => {
-                    const file = recentFiles[index];
-                    saveImageToBucket(file.imageData, file.filename);
-                    modal.remove();
-                };
+    function showGalleryModal(data) {
+        const modal = document.createElement('div');
+        modal.className = 'gallery-modal';
+        modal.style.display = 'flex';
+
+        const modalContent = document.createElement('div');
+        modalContent.className = 'modal-content';
+
+        // Use the server-formatted date directly
+
+        const header = document.createElement('h3');
+        header.textContent = `Receipts for ${data.date}`;
+        modalContent.appendChild(header);        
+
+        // Add gallery
+        const gallery = document.createElement('div');
+        gallery.className = 'image-gallery';
+
+        if (data.images.length === 0) {
+            const noImages = document.createElement('p');
+            noImages.style.textAlign = 'center';
+            noImages.style.padding = '20px';
+            noImages.textContent = 'No receipts found for this date';
+            gallery.appendChild(noImages);
+        } else {
+            data.images.forEach((image, index) => {
+                const thumb = createThumbnail(image, index, data.images.length);
+                gallery.appendChild(thumb);
             });
-        } catch (error) {
-            console.error('Error showing recent files:', error);
-            showToast('Failed to load recent files', 'error');
         }
+
+        modalContent.appendChild(gallery);
+        // Add close button
+        const closeButton = document.createElement('button');
+        closeButton.className = 'cancel-btn';
+        closeButton.textContent = 'Close';
+        closeButton.onclick = () => modal.remove();
+        modalContent.appendChild(closeButton);
+
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
     }
 
+    function createThumbnail(image, index, total) {
+        const thumb = document.createElement('div');
+        thumb.className = 'thumbnail loading';
+
+        thumb.innerHTML = `
+            <img src="${image.viewUrl}" 
+                 loading="lazy"
+                 alt="Receipt ${index + 1}"
+                 data-index="${index}">
+            <div class="image-info">
+                <span class="time">${image.timestamp}</span>
+                <span class="size">${image.size}</span>
+            </div>
+        `;
+
+        // Handle image load
+        const img = thumb.querySelector('img');
+        img.onload = () => {
+            thumb.classList.remove('loading');
+        };
+
+        // Add click handler for full view
+        thumb.onclick = () => showFullImage(image, index, total);
+        return thumb;
+    }
+
+    function showFullImage(image, index, total) {
+        const viewer = document.createElement('div');
+        viewer.className = 'image-viewer';
+    
+        viewer.innerHTML = `
+            <div class="viewer-content">
+                <span class="close-btn">×</span>
+                <img src="${image.thumbnailUrl}" alt="Receipt ${index + 1}" class="preview-image">
+                <div class="controls">
+                    ${index > 0 ? '<button class="prev">Previous</button>' : ''}
+                    ${index < total - 1 ? '<button class="next">Next</button>' : ''}
+                    <button class="download">Download (${image.size})</button>
+                </div>
+                <div class="info">
+                    <span>${image.timestamp}</span>
+                    <span>${image.filename}</span>
+                </div>
+            </div>
+        `;
+    
+        document.body.appendChild(viewer);
+    
+        // Close button
+        viewer.querySelector('.close-btn').onclick = () => viewer.remove();
+    
+        // Download handler
+        viewer.querySelector('.download').onclick = () => {
+            const progress = document.createElement('div');
+            progress.className = 'download-progress';
+            progress.textContent = 'Starting download...';
+            viewer.appendChild(progress);
+    
+            fetch(image.downloadUrl)
+                .then(response => response.blob())
+                .then(blob => {
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = image.filename;
+                    document.body.appendChild(a);
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                    progress.remove();
+                })
+                .catch(() => {
+                    progress.textContent = 'Download failed.';
+                    setTimeout(() => progress.remove(), 3000);
+                });
+        };
+    
+        // Navigation handlers
+        if (index > 0) {
+            viewer.querySelector('.prev').onclick = () => {
+                viewer.remove();
+                showFullImage(images[index - 1], index - 1, total);
+            };
+        }
+    
+        if (index < total - 1) {
+            viewer.querySelector('.next').onclick = () => {
+                viewer.remove();
+                showFullImage(images[index + 1], index + 1, total);
+            };
+        }
+    }
+    
+
     // Add the showFailureModal function
     function showFailureModal(title, message, details = '') {
         const modal = document.getElementById('failureModal');
@@ -603,6 +846,74 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
 
+    // Add this function to make the modal draggable
+    function makeModalDraggable() {
+        const modal = document.getElementById('confirmationModalContent');
+        const dragHandle = document.getElementById('dragHandle');
+
+
+        if (!modal || !dragHandle) return;
+        let isDragging = false;
+        let currentX;
+        let currentY;
+        let initialX;
+        let initialY;
+        let xOffset = 0;
+        let yOffset = 0;
+        // Touch events for mobile
+        dragHandle.addEventListener('touchstart', dragStart, false);
+        document.addEventListener('touchend', dragEnd, false);
+        document.addEventListener('touchmove', drag, false);
+        // Mouse events for desktop
+        dragHandle.addEventListener('mousedown', dragStart, false);
+        document.addEventListener('mouseup', dragEnd, false);
+        document.addEventListener('mousemove', drag, false);
+
+        function dragStart(e) {
+            if (e.type === 'touchstart') {
+                initialX = e.touches[0].clientX - xOffset;
+                initialY = e.touches[0].clientY - yOffset;
+            } else {
+                initialX = e.clientX - xOffset;
+                initialY = e.clientY - yOffset;
+            }
+
+            if (e.target === dragHandle || e.target.parentNode === dragHandle) {
+                isDragging = true;
+            }
+        }  
+
+        function dragEnd(e) {
+            initialX = currentX;
+            initialY = currentY;
+            isDragging = false;
+        }
+
+        function drag(e) {
+            if (isDragging) {
+                e.preventDefault();
+
+                if (e.type === 'touchmove') {
+                    currentX = e.touches[0].clientX - initialX;
+                    currentY = e.touches[0].clientY - initialY;
+                } else {
+                    currentX = e.clientX - initialX;
+                    currentY = e.clientY - initialY;
+                }
+
+                xOffset = currentX;
+                yOffset = currentY;
+                setTranslate(currentX, currentY, modal);
+            }
+        }
+
+        function setTranslate(xPos, yPos, el) {
+            el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
+        }
+    }
+
+    // Update the showConfirmationModal function to initialize draggable behavior
+
     function showConfirmationModal(data) {
         const modal = document.getElementById('confirmationModal');
         const amountInput = document.getElementById('confirmAmount');
@@ -637,6 +948,13 @@ document.addEventListener('DOMContentLoaded', function() {
         // Show the modal first
         if (modal) {
             modal.style.display = 'flex';
+            // Reset any previous transform
+            const modalContent = document.getElementById('confirmationModalContent');
+            if (modalContent) {
+                modalContent.style.transform = 'translate3d(0px, 0px, 0)';
+            }
+            // Initialize draggable behavior
+            makeModalDraggable();
         } else {
             console.error('Confirmation modal not found in DOM');
         }
@@ -741,6 +1059,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 confirmButton.style.opacity = '1';
                 confirmButton.style.cursor = 'pointer';
             }
+            // Reset the modal position before closing
+            const modalContent = document.getElementById('confirmationModalContent');
+            if (modalContent) {
+                modalContent.style.transform = 'translate3d(0px, 0px, 0)';
+            }
+
             modal.style.display = 'none';
         }
     }
@@ -966,11 +1290,21 @@ document.addEventListener('DOMContentLoaded', function() {
                         if (qualityMetrics.isStable && 
                             qualityMetrics.isSharp && 
                             qualityMetrics.isGoodRatio && 
-                            qualityMetrics.confidence > 0.8) {
-                            
+                            qualityMetrics.confidence > 0.8 && !isCapturing) {
+                            // Set capturing flag
+                            isCapturing = true;
                             // Pause predictions during capture
                             isPredicting = false;
 
+                            // Disable capture button when phone is detected
+                            const captureButton = document.getElementById('capture-button');
+
+                            if (captureButton) {
+                                captureButton.disabled = true;
+                                captureButton.style.opacity = '0.5';
+                                captureButton.style.cursor = 'not-allowed';
+                            }
+
                             try {
                                 // Take the photo without countdown
                                 await handlePhotoCapture(video, video.srcObject);
@@ -978,6 +1312,7 @@ document.addEventListener('DOMContentLoaded', function() {
                             } catch (error) {
                                 console.error('Error during capture:', error);
                                 isPredicting = true; // Resume predictions if there's an error
+                                isCapturing = false; // Reset capturing flag on error
                             }
                         }
 
@@ -1126,6 +1461,7 @@ document.addEventListener('DOMContentLoaded', function() {
         cameraModal.className = 'camera-modal';
         cameraModal.innerHTML = `
             <div class="camera-content">
+                <button class="close-btn" onclick="closeCameraModal()">&times;</button>
                 <div id="liveView" class="videoView">
                     <video id="camera-preview" autoplay playsinline></video>
                 </div>
@@ -1148,7 +1484,8 @@ document.addEventListener('DOMContentLoaded', function() {
             if (captureButton) {
                 captureButton.addEventListener('click', () => {
                     const video = document.getElementById('camera-preview');
-                    if (video && video.srcObject) {
+                    if (video && video.srcObject && !isCapturing) {  // Add check for isCapturing
+                        isCapturing = true;  // Set capturing flag
                         handlePhotoCapture(video, video.srcObject);
                     }
                 });
@@ -1238,15 +1575,16 @@ document.addEventListener('DOMContentLoaded', function() {
     
 
     function validateDate(dateInput) {
-        const validationMessage = document.getElementById('dateValidationMessage');
+         // Remove any existing alert
+         const existingAlert = document.querySelector('.scam-alert');
+         if (existingAlert) {
+             existingAlert.remove();
+         }
         const dateInputElement = document.getElementById('confirmDate');
-        
-        // Remove existing classes first
+
         dateInputElement.classList.remove('date-warning');
         
         if (!dateInput || dateInput === '') {
-            validationMessage.style.display = 'none';
-            validationMessage.classList.remove('show');
             return;
         }
 
@@ -1254,21 +1592,23 @@ document.addEventListener('DOMContentLoaded', function() {
             // Add warning class to input
             dateInputElement.classList.add('date-warning');
             
-            // Update validation message with icon
-            validationMessage.innerHTML = `
-                <span class="warning-icon">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M12 9v4M12 17h.01M12 3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
-                    </svg>
-                </span>
-                Receipt Date is not today. Are you sure you want to add this?
+            // Create and show the scam alert
+            const alertDiv = document.createElement('div');
+            alertDiv.className = 'scam-alert';
+            alertDiv.innerHTML = `
+                <div class="alert-content">
+                    <span class="alert-icon">⚠️</span>
+                    <span class="alert-text">Scam Alert</span>
+                    <span class="alert-subtext">Date not today!</span>
+                </div>
             `;
-            validationMessage.style.display = 'flex';
-            validationMessage.classList.add('show');
-        } else {
-            dateInputElement.classList.remove('date-warning');
-            validationMessage.style.display = 'none';
-            validationMessage.classList.remove('show');
+
+            document.body.appendChild(alertDiv);
+            // Remove the alert after animation
+            setTimeout(() => {
+                alertDiv.classList.add('fade-out');
+                setTimeout(() => alertDiv.remove(), 500);
+            }, 2000);
         }
     }
 
@@ -1293,13 +1633,81 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     async function processMultipleImages(filesArray) {
-        showToast('Processing multiple images...', 'info');
+        // Create and show loading modal with the comprehensive UI
+        const loadingModal = document.createElement('div');
+        loadingModal.className = 'loading-modal';
+        loadingModal.innerHTML = `
+            <div class="loading-content">
+                <div class="loading-spinner"></div>
+                <h3 class="loading-message">Preparing files...</h3>
+                <div class="progress-container">
+                    <div class="progress-bar">
+                        <div class="progress-fill"></div>
+                    </div>
+                    <div class="progress-text">0/${filesArray.length} files analyzed</div>
+                    <div class="time-estimate">Estimating time remaining...</div>
+                    <div class="loading-stage">
+                        <div class="stage-item active" data-stage="prepare">
+                            <span class="stage-icon"></span>
+                            <span>Preparing files</span>
+                        </div>
+                        <div class="stage-item" data-stage="analyze">
+                            <span class="stage-icon"></span>
+                            <span>Analyzing receipts</span>
+                        </div>
+                        <div class="stage-item" data-stage="process">
+                            <span class="stage-icon"></span>
+                            <span>Processing results</span>
+                        </div>
+                    </div>
+                    <div class="network-speed"></div>
+                    <div class="loading-note">It could take up to 20 seconds depending on your internet speed.</div>
+                    <button class="loading-cancel-btn">Don't want to wait?</button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(loadingModal);
 
+        // Add event listener for the cancel button
+        const cancelBtn = loadingModal.querySelector('.loading-cancel-btn');
+        cancelBtn.addEventListener('click', () => {
+            // Hide the loading modal but continue the processing in background
+            loadingModal.classList.add('fade-out');
+            setTimeout(() => {
+                loadingModal.style.display = 'none';
+                // Show a floating action button to return to the upload when it's done
+                const floatingBtn = document.createElement('div');
+                floatingBtn.className = 'floating-action-btn hidden';
+                floatingBtn.id = 'uploadStatusBtn';
+                floatingBtn.innerHTML = `
+                    <div class="fab-icon">
+                        <div class="fab-spinner"></div>
+                    </div>
+                    <div class="fab-label">Processing...</div>
+                `;
+                document.body.appendChild(floatingBtn);
+                // Show the button with animation
+                setTimeout(() => floatingBtn.classList.remove('hidden'), 100);
+            }, 300);
+        });
+
+        // References to loading elements
+        const loadingMessage = loadingModal.querySelector('.loading-message');
+        const progressFill = loadingModal.querySelector('.progress-fill');
+        const progressText = loadingModal.querySelector('.progress-text');
+        const timeEstimate = loadingModal.querySelector('.time-estimate');
         try {
+             // Automatically trigger the "Don't want to wait" button after 3 seconds
+             setTimeout(() => {
+                // Only auto-dismiss if the modal is still visible (user hasn't manually dismissed)
+                if (loadingModal.style.display !== 'none') {
+                    cancelBtn.click();
+                }
+            }, 3000);
             // Convert all files to processable format
             const processedFiles = await Promise.all(filesArray.map(async (file, index) => {
                 // Create a promise for each file processing
-                return new Promise((resolve) => {
+                const result = await new Promise((resolve) => {
                     const reader = new FileReader();
                     reader.onload = function(event) {
                         const img = new Image();
@@ -1340,28 +1748,80 @@ document.addEventListener('DOMContentLoaded', function() {
                     };
                     reader.readAsDataURL(file);
                 });
+                // Update progress after each file is processed
+
+                const progressPercentage = (((index + 1) / filesArray.length) * 33); // First stage is 33% of total
+                progressFill.style.width = `${progressPercentage}%`;
+                progressText.textContent = `${index + 1}/${filesArray.length} images processed`;
+                return result;
             }));
 
+            // Update message and stage for OCR processing
+
+            const prepareStage = loadingModal.querySelector('.stage-item[data-stage="prepare"]');
+
+            const analyzeStage = loadingModal.querySelector('.stage-item[data-stage="analyze"]');
+
+            prepareStage.classList.remove('active');
+            prepareStage.classList.add('completed');
+            analyzeStage.classList.add('active');
+
+            loadingMessage.textContent = 'Analyzing receipts...';
+            timeEstimate.textContent = 'This may take a few moments...';
+            progressFill.style.width = '33%';
             // Send processed images to server and get OCR results
             const ocrResults = await uploadMultipleToServer(processedFiles);
             
-            // Combine OCR results with file data
+            // Update to final processing stage
+            const processStage = loadingModal.querySelector('.stage-item[data-stage="process"]');
+            analyzeStage.classList.remove('active');
+            analyzeStage.classList.add('completed');
+            processStage.classList.add('active');
+
+            loadingMessage.textContent = 'Processing results...';
+            timeEstimate.textContent = 'Almost done...';
+            progressFill.style.width = '66%';
+
+
+            // Simulate final processing
+            setTimeout(() => {
+                progressFill.style.width = '100%'
+                progressText.textContent = `${filesArray.length}/${filesArray.length} images processed`;
+                
+                // Clean up loading modal
+                setTimeout(() => {
+                    loadingModal.classList.add('fade-out');
+                    setTimeout(() => loadingModal.remove(), 300);      
+
+                    // Update floating button if it exists
+                    const floatingBtn = document.getElementById('uploadStatusBtn');
+                    if (floatingBtn) {
+                        floatingBtn.innerHTML = `
+                            <div class="fab-icon completed">
+                                <svg viewBox="0 0 24 24" width="24" height="24">
+                                    <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                                </svg>
+                            </div>
+                            <div class="fab-label">Processing Complete</div>
+                        `;
+
+                        // Automatically fade out and remove the button after 3 seconds
+                        setTimeout(() => {
+                            floatingBtn.classList.add('hidden');
+                            setTimeout(() => floatingBtn.remove(), 300);
+                        }, 3000);
+                    }
+                }, 500);
+            }, 500);
+
             if (ocrResults && ocrResults.allResults) {
                 // Map each file with its corresponding OCR data
-                const filesWithOcr = processedFiles.map(processedFile => {
-                    // Find matching OCR result by index
-                    const ocrData = ocrResults.allResults.find(
+                const filesWithOcr = processedFiles.map(processedFile => ({
+                    ...processedFile,
+                    ocrData: ocrResults.allResults.find(
                         result => result.index === processedFile.index
-                    );
-                    
-                    // Return the file with OCR data attached
-                    return {
-                        ...processedFile,
-                        ocrData: ocrData || { error: 'No OCR data found' }
-                    };
-                });
-                
-                // Return the files with OCR data
+                        ) || { error: 'No OCR data found' }
+                    }));
                 return filesWithOcr;
             }
             
@@ -1371,7 +1831,24 @@ document.addEventListener('DOMContentLoaded', function() {
         } catch (error) {
             console.error('Error processing multiple images:', error);
             showToast('Failed to process images', 'error');
-            // Return original files with error indication
+             
+            // Clean up loading modal on error
+            loadingModal.classList.add('fade-out');
+            setTimeout(() => loadingModal.remove(), 300);
+
+            // Update floating button if it exists
+            const floatingBtn = document.getElementById('uploadStatusBtn');
+            if (floatingBtn) {
+                floatingBtn.innerHTML = `
+                    <div class="fab-icon error">
+                        <svg viewBox="0 0 24 24" width="24" height="24">
+                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                        </svg>
+                    </div>
+                    <div class="fab-label">Processing Failed</div>
+                `;
+            }
+
             return filesArray.map((file, index) => ({
                 index,
                 file,
@@ -1380,8 +1857,10 @@ document.addEventListener('DOMContentLoaded', function() {
             }));
         }
     }
-
+    // Update the uploadMultipleToServer function to use the more comprehensive loading modal
     async function uploadMultipleToServer(processedFiles) {
+        // Create a new loading modal or pass it as a parameter
+        const loadingModal = document.querySelector('.loading-modal'); // Get the existing modal
         try {
             // Store the first image data globally (for potential use)
             if (processedFiles.length > 0) {
@@ -1400,6 +1879,33 @@ document.addEventListener('DOMContentLoaded', function() {
                 closeCameraModal();
             }
 
+            // Update the existing loading modal if it exists
+
+            if (loadingModal) {
+                const loadingMessage = loadingModal.querySelector('.loading-message');
+                const progressFill = loadingModal.querySelector('.progress-fill');
+                const progressText = loadingModal.querySelector('.progress-text');
+                const timeEstimate = loadingModal.querySelector('.time-estimate');
+
+                // Update loading message and stage for analysis phase
+                const analyzeStage = loadingModal.querySelector('.stage-item[data-stage="analyze"]');
+                if (analyzeStage) {
+                    analyzeStage.classList.add('active');
+                }
+
+                if (loadingMessage) {
+                    loadingMessage.textContent = 'Analyzing receipts...';
+                }
+
+                if (timeEstimate) {
+                    timeEstimate.textContent = 'This may take a few moments...';
+                }
+
+                if (progressFill) {
+                    progressFill.style.width = '50%';
+                }
+            }
+
             // Make API call
             const customerID = sessionStorage.getItem('customerID');
             const response = await fetch('/multiple-vision-api', {
@@ -1421,6 +1927,14 @@ document.addEventListener('DOMContentLoaded', function() {
                 })
             });
 
+            // Update progress if loading modal exists
+            if (loadingModal) {
+                const progressFill = loadingModal.querySelector('.progress-fill');
+                if (progressFill) {
+                    progressFill.style.width = '75%';
+                }
+            }
+
             const data = await response.json();
 
             // Log relevant response details
@@ -1441,6 +1955,26 @@ document.addEventListener('DOMContentLoaded', function() {
         } catch (error) {
             console.error('Error uploading multiple images:', error);
             showFailureModal('Processing Error', 'An error occurred while processing your images. Please try again.');
+            // Update floating button if it exists
+
+            const floatingBtn = document.getElementById('uploadStatusBtn');
+
+            if (floatingBtn) {
+                floatingBtn.innerHTML = `
+                    <div class="fab-icon error">
+                        <svg viewBox="0 0 24 24" width="24" height="24">
+                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                        </svg>
+                    </div>
+                    <div class="fab-label">Analysis Failed</div>
+                `;
+
+                // Automatically fade out and remove the button after 3 seconds
+                setTimeout(() => {
+                    floatingBtn.classList.add('hidden');
+                    setTimeout(() => floatingBtn.remove(), 300);
+                }, 3000);
+            }
             return null;
         }
     }
@@ -1501,8 +2035,18 @@ document.addEventListener('DOMContentLoaded', function() {
         
         return true;
     }
-
+    // Update the handleSubmitAll function to start the upload immediately
+    // and show the loading indicator without blocking the user
     async function handleSubmitAll() {
+        // Get all image entries
+        const imageEntries = window.imageEntries || [];
+        if (imageEntries.length === 0) {
+            showToast('No images to upload', 'error');
+            return;
+        }
+
+        // Validate all entries first
+        // const validationResult = validateAllEntries();
         if (!validateAllEntries()) {
             return;
         }
@@ -1511,118 +2055,233 @@ document.addEventListener('DOMContentLoaded', function() {
         const submitButton = document.getElementById('submitAllUploads');
         if (submitButton) {
             submitButton.disabled = true;
-            submitButton.style.opacity = '0.5';
+            submitButton.style.opacity = '0.7';
             submitButton.style.cursor = 'not-allowed';
-            submitButton.innerHTML = '<span class="spinner" style="display: inline-block;"></span> Processing...';
+            submitButton.innerHTML = 'Uploading...';
         }
         
+       // Create loading modal
+
+       const loadingModal = document.createElement('div');
+       loadingModal.className = 'loading-modal';
+       loadingModal.innerHTML = `
+           <div class="loading-content">
+               <div class="loading-spinner"></div>
+               <h3 class="loading-message">Preparing files...</h3>
+               <div class="progress-container">
+                   <div class="progress-bar">
+                       <div class="progress-fill"></div>
+                   </div>
+                   <div class="progress-text">0/${imageEntries.length} files uploaded</div>
+                   <div class="time-estimate">Estimating time remaining...</div>
+                   <div class="loading-stage">
+                       <div class="stage-item active" data-stage="prepare">
+                           <span class="stage-icon"></span>
+                           <span>Preparing files</span>
+                       </div>
+                       <div class="stage-item" data-stage="upload">
+                           <span class="stage-icon"></span>
+                           <span>Uploading to server</span>
+                       </div>
+                       <div class="stage-item" data-stage="process">
+                           <span class="stage-icon"></span>
+                           <span>Processing receipts</span>
+                       </div>
+                   </div>
+                   <div class="network-speed"></div>
+                   <div class="loading-note">It could take up to 20 seconds depending on your internet speed.</div>
+                   <button class="loading-cancel-btn">Close & Continue in Background</button>
+               </div>
+           </div>
+       `;
+
+       document.body.appendChild(loadingModal);
+
+       // Add event listener for the cancel button
+       const cancelBtn = loadingModal.querySelector('.loading-cancel-btn');
+       cancelBtn.addEventListener('click', () => {
+           // Hide the loading modal but continue the upload in background
+           loadingModal.classList.add('fade-out');
+           setTimeout(() => {
+               loadingModal.style.display = 'none';
+               // Show a floating action button to return to the upload when it's done
+               const floatingBtn = document.createElement('div');
+               floatingBtn.className = 'floating-action-btn hidden';
+               floatingBtn.id = 'uploadStatusBtn';
+               floatingBtn.innerHTML = `
+                   <div class="fab-icon">
+                       <div class="fab-spinner"></div>
+                   </div>
+                   <div class="fab-label">Uploading...</div>
+               `;
+               document.body.appendChild(floatingBtn);
+                // Show the button with animation
+                setTimeout(() => floatingBtn.classList.remove('hidden'), 100);
+                
+                // Allow user to continue using the app
+                const modal = document.getElementById('multipleUploadsModal');
+                modal.classList.remove('show');
+                setTimeout(() => {
+                    modal.style.display = 'none';
+                }, 300);
+            }, 300);
+        });
+
+            // References to loading elements
+        const loadingMessage = loadingModal.querySelector('.loading-message');
+        const progressFill = loadingModal.querySelector('.progress-fill');
+        const progressText = loadingModal.querySelector('.progress-text');
+        const timeEstimate = loadingModal.querySelector('.time-estimate');
+        const networkSpeed = loadingModal.querySelector('.network-speed');
+
+
         try {
-            // Reset validation states first
-            imageEntries.forEach(entry => {
-                const inputs = entry.element.querySelectorAll('input');
-                inputs.forEach(input => {
-                    input.classList.remove('invalid-input');
-                    const errorMsg = input.parentElement.querySelector('.validation-error');
-                    if (errorMsg) errorMsg.remove();
-                });
-            });
-            
-            // Perform comprehensive validation
-            let hasErrors = false;
-            const validationResults = imageEntries.map(entry => entry.validate());
+            // Prepare FormData
+            const formData = new FormData();
+            const metadata = [];
+            const customerID = sessionStorage.getItem('customerID');
             
-            // Check if any entries have validation errors
-            if (validationResults.some(result => !result.valid)) {
-                hasErrors = true;
-                // Display errors for each entry
-                validationResults.forEach((result, index) => {
-                    if (!result.valid) {
-                        const entry = imageEntries[index];
-                        
-                        // Mark invalid fields and show error messages
-                        Object.entries(result.errors).forEach(([field, message]) => {
-                            const input = entry.element.querySelector(`.${field}-input`);
-                            if (input) {
-                                input.classList.add('invalid-input');
-                                
-                                // Add error message below the input
-                                const errorMsg = document.createElement('div');
-                                errorMsg.className = 'validation-error';
-                                errorMsg.textContent = message;
-                                input.parentElement.appendChild(errorMsg);
-                                
-                                // Scroll to the first error
-                                if (field === Object.keys(result.errors)[0] && index === validationResults.findIndex(r => !r.valid)) {
-                                    setTimeout(() => {
-                                        input.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                                    }, 100);
-                                }
-                            }
-                        });
-                    }
-                });
-                
-                showToast('Please correct the highlighted fields', 'error');
-                
-                // Re-enable the button if validation fails
-                if (submitButton) {
-                    submitButton.disabled = false;
-                    submitButton.style.opacity = '1';
-                    submitButton.style.cursor = 'pointer';
-                    submitButton.innerHTML = 'Submit All';
-                }
-                
-                // Important: Return early to prevent API call
-                return;
-            }
 
-            // Only proceed if no validation errors
-            if (!hasErrors) {
-                // Show loading toast
-                showToast('Uploading files...', 'info');
-                
-                // Create FormData for bulk file upload
-                const formData = new FormData();
-                const customerID = sessionStorage.getItem('customerID');
+            if (!customerID) {
+                throw new Error('Customer ID not found. Please log in again.');
+            }
                 formData.append('customerID', customerID);
                 
-                // Add all files to FormData
-                const receiptMetadata = [];
+                // Add each file to FormData and collect metadata
+
+            for (let i = 0; i < imageEntries.length; i++) {
+                const entry = imageEntries[i];
+                const element = entry.element;
+
+                // Get values from form fields
+                const amount = element.querySelector('.amount-input').value;
+                const reference = element.querySelector('.reference-input').value;
+                const particulars = element.querySelector('.particulars-input').value;
+                const date = element.querySelector('.date-input').value;
                 
-                imageEntries.forEach((entry, index) => {
-                    // Add the file to FormData
+                // Add file to FormData
                     formData.append('files', entry.file);
                     
-                    // Collect metadata for each receipt
-                    receiptMetadata.push({
-                        index,
-                        amount: entry.element.querySelector('.amount-input').value,
-                        reference: entry.element.querySelector('.reference-input').value,
-                        particulars: entry.element.querySelector('.particulars-input').value,
-                        date: entry.element.querySelector('.date-input').value,
-                        ocrData: entry.originalOcrData || {}
-                    });
-                });
-                
-                // Add metadata as JSON
-                formData.append('metadata', JSON.stringify(receiptMetadata));
-                
-                // Store metadata in session storage for reference
-                sessionStorage.setItem('receiptMetadata', JSON.stringify(receiptMetadata));
-                
-                // Upload all files and process data in a single request
-                const response = await fetch('/upload-multiple-receipts-form', {
-                    method: 'POST',
-                    body: formData
-                });
+                     // Collect metadata
 
-                const data = await response.json();
-                
-                if (!data.success) {
-                    throw new Error(data.error || 'Upload failed');
+                metadata.push({
+                    index: i,
+                    amount: amount,
+                    reference: reference,
+                    particulars: particulars,
+                    date: date,
+                    ocrData: entry.originalOcrData || null
+                });
                 }
-                
-                // Check sheet processing results if available
+                // Add metadata as JSON string
+
+            formData.append('metadata', JSON.stringify(metadata));
+            // Update loading message and stage
+            loadingMessage.textContent = 'Uploading files...';
+            const prepareStage = loadingModal.querySelector('.stage-item[data-stage="prepare"]');
+            const uploadStage = loadingModal.querySelector('.stage-item[data-stage="upload"]');
+
+            prepareStage.classList.remove('active');
+            prepareStage.classList.add('completed');
+            uploadStage.classList.add('active');
+
+            // Create and configure XMLHttpRequest for upload with progress tracking
+            const xhr = new XMLHttpRequest();
+            const startTime = Date.now();
+            let lastLoaded = 0;
+            let lastTime = startTime;
+            let uploadSpeed = 0;
+
+            xhr.open('POST', '/upload-multiple-receipts-form');
+            // Track upload progress
+            xhr.upload.addEventListener('progress', (event) => {
+                if (event.lengthComputable) {
+                    // Calculate progress percentage
+                    const percent = Math.round((event.loaded / event.total) * 100);
+                    // Update progress bar
+                    progressFill.style.width = `${percent}%`;
+                    progressText.textContent = `${Math.round(event.loaded / 1024)} KB of ${Math.round(event.total / 1024)} KB uploaded`;
+
+                    // Calculate time elapsed and estimated time remaining
+                    const currentTime = Date.now();
+                    const elapsedTime = (currentTime - startTime) / 1000; // in seconds
+
+                    // Calculate upload speed (bytes per second)
+                    const timeDelta = (currentTime - lastTime) / 1000;
+                    if (timeDelta > 0.5) { // Update speed every 500ms
+                        const loadedDelta = event.loaded - lastLoaded;
+                        uploadSpeed = loadedDelta / timeDelta; // bytes per second
+                        // Update for next calculation
+                        lastLoaded = event.loaded;
+                        lastTime = currentTime;
+
+                        // Display network speed
+                        const speedKBps = Math.round(uploadSpeed / 1024);
+                        networkSpeed.textContent = `${speedKBps} KB/s`;
+                        networkSpeed.classList.add('fluctuating');
+                    }
+                    
+                    // Estimate remaining time
+                    if (uploadSpeed > 0) {
+                        const remainingBytes = event.total - event.loaded;
+                        const remainingSeconds = remainingBytes / uploadSpeed;
+
+                        // Format remaining time
+                        if (remainingSeconds < 1) {
+                            timeEstimate.textContent = 'Almost done...';
+                        } else if (remainingSeconds < 60) {
+                            timeEstimate.textContent = `About ${Math.round(remainingSeconds)} seconds remaining`;
+                        } else {
+                            const minutes = Math.floor(remainingSeconds / 60);
+                            const seconds = Math.round(remainingSeconds % 60);
+                            timeEstimate.textContent = `About ${minutes}:${seconds.toString().padStart(2, '0')} minutes remaining`;
+                        }
+                    }
+                }
+            });
+
+            
+
+            // Handle successful upload
+            xhr.addEventListener('load', async () => {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    try {
+                        const data = JSON.parse(xhr.responseText);
+                        // Update stages for processing phase
+                        const uploadStage = loadingModal.querySelector('.stage-item[data-stage="upload"]');
+                        const processStage = loadingModal.querySelector('.stage-item[data-stage="process"]');
+
+                        uploadStage.classList.remove('active');
+                        uploadStage.classList.add('completed');
+                        processStage.classList.add('active');
+
+                        // Update loading message for processing phase
+                        loadingMessage.textContent = 'Processing receipts...';
+                        timeEstimate.textContent = 'Almost done...';
+                        // Hide network speed during processing
+                        networkSpeed.style.display = 'none';
+                        // Check if the loading modal is still visible
+                        const isModalVisible = loadingModal.style.display !== 'none';
+                        // Update floating action button if it exists
+                        const floatingBtn = document.getElementById('uploadStatusBtn');
+                        if (floatingBtn) {
+                            floatingBtn.innerHTML = `
+                                <div class="fab-icon completed">
+                                    <svg viewBox="0 0 24 24" width="24" height="24">
+                                        <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                                    </svg>
+                                </div>
+                                <div class="fab-label">Processing Complete</div>
+                            `;
+
+                            // Automatically fade out and remove the button after 3 seconds
+                            setTimeout(() => {
+                                floatingBtn.classList.add('hidden');
+                                setTimeout(() => floatingBtn.remove(), 300);
+                            }, 3000);
+                        }
+
+                        // Check sheet processing results
                 if (data.sheetResults) {
                     if (data.sheetResults.failureCount > 0) {
                         showToast(`Processed ${data.sheetResults.successCount} of ${data.sheetResults.totalProcessed} receipts`, 'warning');
@@ -1642,22 +2301,168 @@ document.addEventListener('DOMContentLoaded', function() {
                     sessionStorage.setItem('allReceiptKeys', JSON.stringify(data.keys));
                 }
                 
-                // Show success animation
+                // Show success animation if modal is visible
+                if (isModalVisible) {
                 showConfetti();
+            }
+
+            // Close the loading modal if it's visible
+            if (isModalVisible) {
+                loadingModal.classList.add('fade-out');
+                setTimeout(() => loadingModal.remove(), 300);
+            }
+
+            // If the loading modal was hidden, show completion notification
+            if (!isModalVisible && !floatingBtn) {
+                showUploadCompletionModal(data);
+            }
+
+            // Clear the uploads container
+            window.imageEntries = [];
+
+        } catch (error) {
+            console.error('Error parsing response:', error);
+            showToast('Error processing server response', 'error');
+
+            // Update floating button to show error
+            const floatingBtn = document.getElementById('uploadStatusBtn');
+            if (floatingBtn) {
+                floatingBtn.innerHTML = `
+                    <div class="fab-icon error">
+                        <svg viewBox="0 0 24 24" width="24" height="24">
+                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                        </svg>
+                    </div>
+                    <div class="fab-label">Upload Failed</div>
+                `;
+            }
+
+            // Clean up loading modal if visible
+            if (loadingModal.style.display !== 'none') {
+                loadingModal.classList.add('fade-out');
+                setTimeout(() => loadingModal.remove(), 300);
+            }
+        }
+
+    } else {
+        console.error('Upload failed with status:', xhr.status);
+        showToast('Upload failed: ' + (xhr.statusText || 'Server error'), 'error');
+        
+
+        // Update floating button to show error
+        const floatingBtn = document.getElementById('uploadStatusBtn');
+        if (floatingBtn) {
+            floatingBtn.innerHTML = `
+                <div class="fab-icon error">
+                    <svg viewBox="0 0 24 24" width="24" height="24">
+                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                    </svg>
+                </div>
+                <div class="fab-label">Upload Failed</div>
+            `;
+        }
+
+        // Clean up loading modal if visible
+        if (loadingModal.style.display !== 'none') {
+            loadingModal.classList.add('fade-out');
+            setTimeout(() => loadingModal.remove(), 300);
+        }
+    }
                 
-                // Close the modal
-                const modal = document.getElementById('multipleUploadsModal');
-                modal.classList.remove('show');
+                // Re-enable submit button
+                if (submitButton) {
+                    submitButton.disabled = false;
+                    submitButton.style.opacity = '1';
+                    submitButton.style.cursor = 'pointer';
+                    submitButton.innerHTML = 'Submit All';
+                }
+            });
+
+            // Handle network errors
+            xhr.addEventListener('error', () => {
+                console.error('Network error during upload');
+                showToast('Network error during upload. Please check your connection.', 'error');
+
+                // Update floating button to show error
+                const floatingBtn = document.getElementById('uploadStatusBtn');
+                if (floatingBtn) {
+                    floatingBtn.innerHTML = `
+                        <div class="fab-icon error">
+                            <svg viewBox="0 0 24 24" width="24" height="24">
+                                <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                            </svg>
+                        </div>
+                        <div class="fab-label">Network Error</div>
+                    `;
+                }
+                
+                // Clean up loading modal if visible
+                if (loadingModal.style.display !== 'none') {
+                    loadingModal.classList.add('fade-out');
+                    setTimeout(() => loadingModal.remove(), 300);
+                }
+
+                // Re-enable submit button
+                if (submitButton) {
+                    submitButton.disabled = false;
+                    submitButton.style.opacity = '1';
+                    submitButton.style.cursor = 'pointer';
+                    submitButton.innerHTML = 'Submit All';
+                }
+            });
+
+            // Handle timeout
+            xhr.addEventListener('timeout', () => {
+                console.error('Upload timed out');
+                showToast('Upload timed out. Please try again.', 'error');
+
+                // Update floating button to show error
+                const floatingBtn = document.getElementById('uploadStatusBtn');
+                if (floatingBtn) {
+                    floatingBtn.innerHTML = `
+                        <div class="fab-icon error">
+                            <svg viewBox="0 0 24 24" width="24" height="24">
+                                <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                            </svg>
+                        </div>
+                        <div class="fab-label">Upload Timed Out</div>
+                    `;
+                }
+                // Clean up loading modal if visible
+                if (loadingModal.style.display !== 'none') {
+                    loadingModal.classList.add('fade-out');
+                    setTimeout(() => loadingModal.remove(), 300);
+                }
+                // Re-enable submit button
+                if (submitButton) {
+                    submitButton.disabled = false;
+                    submitButton.style.opacity = '1';
+                    submitButton.style.cursor = 'pointer';
+                    submitButton.innerHTML = 'Submit All';
+                }
+            });
+
+            // Set timeout to 2 minutes
+            xhr.timeout = 120000;
+            // Send the FormData
+            xhr.send(formData);
+            // Automatically trigger the "Don't want to wait" button after 3 seconds
+            // This allows the user to continue using the app while upload happens in background
                 setTimeout(() => {
-                    modal.style.display = 'none';
-                    document.getElementById('uploadsContainer').innerHTML = '';
-                }, 300);
-            }
+                // Only auto-dismiss if the modal is still visible (user hasn't manually dismissed)
+                if (loadingModal.style.display !== 'none') {
+                    cancelBtn.click();
+                }
+            }, 3000);
         } catch (error) {
-            console.error('Error processing uploads:', error);
-            showToast('Failed to process uploads: ' + error.message, 'error');
-        } finally {
-            // Always re-enable the button
+            console.error('Error preparing upload:', error);
+            showToast(error.message || 'Error preparing upload', 'error');
+
+            // Clean up loading modal
+            loadingModal.classList.add('fade-out');
+            setTimeout(() => loadingModal.remove(), 300);
+
+            // Re-enable submit button
             if (submitButton) {
                 submitButton.disabled = false;
                 submitButton.style.opacity = '1';
@@ -2023,6 +2828,67 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    // Add this new function to show completion modal
+
+    function showUploadCompletionModal(data) {
+        const completionModal = document.createElement('div');
+        completionModal.className = 'completion-modal';
+
+        const successCount = data.sheetResults?.successCount || data.count || 0;
+        const totalCount = data.sheetResults?.totalProcessed || data.count || 0;
+        const hasErrors = (data.sheetResults?.failureCount || 0) > 0;
+
+        completionModal.innerHTML = `
+            <div class="completion-content">
+                <div class="completion-icon ${hasErrors ? 'partial' : 'success'}">
+                    ${hasErrors ? 
+                        `<svg viewBox="0 0 24 24" width="48" height="48">
+                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v2h-2v-2zm0-8h2v6h-2V9z"/>
+                        </svg>` : 
+                        `<svg viewBox="0 0 24 24" width="48" height="48">
+                            <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                        </svg>`
+                    }
+                </div>
+                <h3>${hasErrors ? 'Upload Partially Complete' : 'Upload Complete'}</h3>
+                <p class="completion-message">
+                    ${successCount} of ${totalCount} receipts were successfully processed.
+                </p>
+                <div class="completion-actions">
+                    <button class="completion-btn primary">View Dashboard</button>
+                    <button class="completion-btn secondary">Close</button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(completionModal);
+        
+
+        // Add event listeners
+        const primaryBtn = completionModal.querySelector('.completion-btn.primary');
+        primaryBtn.addEventListener('click', () => {
+            completionModal.classList.add('fade-out');
+            setTimeout(() => completionModal.remove(), 300);
+            routeUser(); // Navigate to dashboard
+        });
+
+        const secondaryBtn = completionModal.querySelector('.completion-btn.secondary');
+        secondaryBtn.addEventListener('click', () => {
+            completionModal.classList.add('fade-out');
+            setTimeout(() => completionModal.remove(), 300);
+        });
+
+        // Show confetti for successful uploads
+        if (!hasErrors) {
+            showConfetti();
+        }
+
+
+        // Force reflow then add show class for animation
+        completionModal.offsetHeight;
+        completionModal.classList.add('show');
+    }
+
     // Make functions available globally
     window.handlePhotoOption = handlePhotoOption;
     window.showPhotoOptions = showPhotoOptions;
diff --git a/public/style.css b/public/style.css
index 45a2a98..e8aa89a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -283,10 +283,17 @@ header {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
-    display: flex;
+    display: none;  /* Hide by default */
     justify-content: center;
     align-items: center;
     z-index: 2000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.photo-options-modal.show {
+    display: flex;
+    opacity: 1;
 }
 
 .modal-content {
@@ -300,6 +307,39 @@ header {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    position: relative;
+
+}
+
+.modal-content .close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.6);
+    border: none;
+    font-size: 24px;
+    color: white;
+    cursor: pointer;
+    padding: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    z-index: 10;
+    transition: all 0.2s ease;
+}
+
+
+.modal-content .close-btn:hover {
+    background: rgba(0, 0, 0, 0.8);
+    transform: scale(1.1);
+}
+
+.modal-content .close-btn:active {
+    transform: scale(0.95);
 }
 
 .modal-content button {
@@ -616,6 +656,39 @@ header {
     width: 90%;
     max-width: 300px;
     gap: 10px;
+    position: relative;
+
+}
+
+.camera-content .close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.6);
+    border: none;
+    font-size: 24px;
+    color: white;
+    cursor: pointer;
+    padding: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    z-index: 10;
+    transition: all 0.2s ease;
+}
+
+.camera-content .close-btn:hover {
+    background: rgba(0, 0, 0, 0.8);
+    transform: scale(1.1);
+}
+
+
+.camera-content .close-btn:active {
+    transform: scale(0.95);
 }
 
 #camera-preview {
@@ -1516,284 +1589,2592 @@ close-btn:hover {
     /* or use font-weight: bold; for even bolder text */
 }
 
-/* Multiple Uploads Modal Styles */
-.multiple-uploads-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
+/* Draggable modal styles */
 
-.multiple-uploads-modal.show {
-    opacity: 1;
-}
+.modal-header {
 
-.multiple-uploads-modal .modal-content {
-    width: 90%;
-    max-width: 500px;
-    max-height: 90vh;
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    animation: slideUp 0.3s ease forwards;
-}
+    padding: 8px;
 
-.multiple-uploads-modal .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    border-bottom: 1px solid #eee;
-}
+    cursor: move;
 
-.multiple-uploads-modal .modal-header h3 {
-    margin: 0;
-    font-size: 18px;
-    color: #333;
-}
+    background-color: #f8f8f8;
 
-.multiple-uploads-modal .close-btn {
-    background: none;
-    border: none;
-    font-size: 24px;
-    color: #666;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-}
+    border-bottom: 1px solid #e0e0e0;
 
-.multiple-uploads-modal .uploads-container {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-    max-height: 60vh;
-}
+    border-radius: 10px 10px 0 0;
 
-.multiple-uploads-modal .modal-footer {
-    padding: 16px;
-    border-top: 1px solid #eee;
     display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
 
-.multiple-uploads-modal .add-more-btn {
-    display: flex;
-    align-items: center;
     justify-content: center;
-    gap: 8px;
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 12px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
 
-.multiple-uploads-modal .add-more-btn:hover {
-    background-color: #eee;
-}
+    align-items: center;
 
-.multiple-uploads-modal .plus-icon {
-    font-size: 18px;
-    font-weight: bold;
 }
 
-.multiple-uploads-modal .submit-all-btn {
-    background-color: #000;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    padding: 14px;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
 
-.multiple-uploads-modal .submit-all-btn:hover {
-    background-color: #333;
-}
 
-.validation-error {
-    color: red;
-    font-size: 12px;
-    margin-top: 4px;
-}
+.drag-handle {
 
-/* Image Entry Styles */
-.image-entry {
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    margin-bottom: 16px;
-    overflow: hidden;
-}
+    width: 30px;
 
-.image-entry .image-preview {
-    position: relative;
-    height: 180px;
-    background-color: #f5f5f5;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
+    height: 5px;
 
-.image-entry .image-preview img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
+    background-color: #ccc;
+
+    border-radius: 3px;
 
-.image-entry .delete-btn {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background-color: rgba(0, 0, 0, 0.6);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 32px;
-    height: 32px;
     display: flex;
+
     justify-content: center;
+
     align-items: center;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
 
-.image-entry .delete-btn:hover {
-    background-color: rgba(0, 0, 0, 0.8);
 }
 
-.image-entry .delete-btn svg {
-    width: 18px;
-    height: 18px;
-}
 
-.image-entry .entry-details {
-    padding: 16px;
-}
 
-.image-entry .form-group {
-    margin-bottom: 12px;
-}
+.drag-icon {
 
-.image-entry .form-group label {
-    display: block;
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 4px;
-}
+    color: #777;
 
-.image-entry .input-with-icon {
-    position: relative;
-}
+    font-weight: bold;
 
-.image-entry .currency-symbol {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #666;
 }
 
-.image-entry .amount-input {
-    padding-left: 24px;
-}
 
-.image-entry input {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 14px;
-    transition: border-color 0.2s;
-}
 
-.image-entry input:focus {
-    border-color: #000;
-    outline: none;
-}
+/* Make modal content scrollable */
 
-.image-entry .date-input-container {
-    position: relative;
-    display: flex;
-}
+#confirmationModal .modal-content {
+
+    max-height: 85vh;
+
+    overflow-y: auto;
+
+    padding-right: 15px; /* Add some padding for the scrollbar */
+
+    position: relative; /* Needed for dragging */
+
+    transition: none; /* Remove transitions for smoother dragging */
 
-.image-entry .date-input {
-    flex: 1;
-    padding-right: 40px;
 }
 
-.image-entry .calendar-btn {
-    position: absolute;
-    right: 0;
-    top: 0;
+
+
+/* Mobile specific styles */
+
+@media (max-width: 768px) {
+
+    #confirmationModal .modal-content {
+
+        max-height: 80vh;
+
+        width: 90%;
+
+        margin: 0 auto;
+
+    }
+
+    
+
+    /* Make it easier to scroll on mobile */
+
+    #confirmationModal .modal-content::-webkit-scrollbar {
+
+        width: 8px;
+
+    }
+
+    
+
+    #confirmationModal .modal-content::-webkit-scrollbar-thumb {
+
+        background-color: rgba(0, 0, 0, 0.2);
+
+        border-radius: 4px;
+
+    }
+
+    
+
+    /* Add some spacing between form elements on mobile */
+
+    #confirmationModal .form-group {
+
+        margin-bottom: 20px;
+
+    }
+
+}
+
+
+
+/* For touch devices, make sure scrolling works properly */
+
+@media (pointer: coarse) {
+
+    #confirmationModal .modal-content {
+
+        -webkit-overflow-scrolling: touch;
+
+    }
+
+}
+
+
+
+.image-gallery {
+
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 12px;
+
+    padding: 12px;
+
+    max-height: 70vh;
+
+    overflow-y: auto;
+
+}
+
+
+
+.thumbnail {
+
+    position: relative;
+
+    width: 100%;
+
+    height: auto;
+
+    aspect-ratio: 16/9;
+
+    background: #f5f5f5;
+
+    border-radius: 8px;
+
+    overflow: hidden;
+
+    cursor: pointer;
+
+    transition: transform 0.2s ease;
+
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+    margin: 0; /* Remove margin-bottom */
+
+}
+
+
+
+.thumbnail img {
+
+    width: 100%;
+
     height: 100%;
-    width: 40px;
-    background: none;
+
+    object-fit: cover;
+
+    position: absolute;
+
+    top: 0;
+
+    left: 0;
+
+}
+
+
+
+.image-info {
+
+    position: absolute;
+
+    bottom: 0;
+
+    left: 0;
+
+    right: 0;
+
+    padding: 8px 12px;
+
+    background: rgba(0,0,0,0.7);
+
+    color: white;
+
+    font-size: 14px;
+
+    display: flex;
+
+    justify-content: space-between;
+
+    align-items: center;
+
+}
+
+
+
+/* Update modal header */
+
+.gallery-modal h3 {
+
+    margin: 0;
+
+    padding: 16px;
+
+    text-align: center;
+
+    color: #333;
+
+    font-size: 1.1rem;
+
+    font-weight: 600;
+
+}
+
+
+
+/* Update close button */
+
+.gallery-modal .cancel-btn {
+
+    margin-top: 8px;
+
+    padding: 12px;
+
     border: none;
+
+    border-radius: 8px;
+
+    background: #f5f5f5;
+
+    color: #333;
+
+    font-weight: 500;
+
+    cursor: pointer;
+
+    transition: all 0.3s ease;
+
+}
+
+
+
+.floating-loader {
+
+    position: fixed;
+
+    bottom: 20px;
+
+    left: 50%;
+
+    transform: translateX(-50%);
+
+    background: rgba(0, 0, 0, 0.8);
+
+    color: white;
+
+    padding: 10px 20px;
+
+    border-radius: 20px;
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 10px;
+
+    z-index: 9999;
+
+    transition: opacity 0.3s ease;
+
+}
+
+
+
+.loader-content {
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 10px;
+
+}
+
+
+
+.loader-spinner {
+
+    width: 20px;
+
+    height: 20px;
+
+    border: 2px solid #fff;
+
+    border-top-color: transparent;
+
+    border-radius: 50%;
+
+    animation: spin 1s linear infinite;
+
+}
+
+
+
+.floating-loader.fade-out {
+
+    opacity: 0;
+
+}
+
+
+
+.thumbnail.loading {
+
+    background: #f0f0f0;
+
+}
+
+
+
+.thumbnail.loading img {
+
+    opacity: 0;
+
+    transition: opacity 0.3s ease;
+
+}
+
+
+
+.thumbnail:not(.loading) img {
+
+    opacity: 1;
+
+}
+
+
+
+@keyframes spin {
+
+    to { transform: rotate(360deg); }
+
+}
+
+
+
+.date-input {
+
+    width: 100%;
+
+    padding: 12px;
+
+    border: 2px solid #eee;
+
+    border-radius: 8px;
+
+    font-size: 1rem;
+
+    margin: 10px 0;
+
+    transition: all 0.3s ease;
+
+}
+
+
+
+.date-input:focus {
+
+    border-color: var(--primary-color);
+
+    outline: none;
+
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
+
+}
+
+
+
+.button-group {
+
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 8px;
+
+    margin-top: 20px;
+
+}
+
+
+
+#confirmDiningField {
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 12px;
+
+    padding: 12px;
+
+    background-color: #f8f9fa;
+
+    border-radius: 8px;
+
+    border: 1px solid #e9ecef;
+
+    transition: all 0.2s ease;
+
+}
+
+
+
+#confirmDiningField:hover {
+
+    background-color: #e9ecef;
+
+}
+
+
+
+#confirmDiningField input[type="checkbox"] {
+
+    appearance: none;
+
+    -webkit-appearance: none;
+
+    width: 20px;
+
+    height: 20px;
+
+    border: 2px solid #adb5bd;
+
+    border-radius: 4px;
+
+    cursor: pointer;
+
+    position: relative;
+
+    transition: all 0.2s ease;
+
+}
+
+
+
+#confirmDiningField input[type="checkbox"]:checked {
+
+    background-color: #000;
+
+    border-color: #000;
+
+}
+
+
+
+#confirmDiningField input[type="checkbox"]:checked::after {
+
+    content: '✓';
+
+    color: white;
+
+    position: absolute;
+
+    top: 50%;
+
+    left: 50%;
+
+    transform: translate(-50%, -50%);
+
+    font-size: 14px;
+
+}
+
+
+
+#confirmDiningField input[type="checkbox"]:hover {
+
+    border-color: #000;
+
+}
+
+
+
+#confirmDiningField label {
+
+    cursor: pointer;
+
+    font-size: 16px;
+
+    color: #495057;
+
+    font-weight: 500;
+
+    user-select: none;
+
+}
+
+
+
+#confirmDiningField:focus-within {
+
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+
+}
+
+
+
+.dining-field {
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 12px;
+
+    padding: 12px;
+
+    background-color: #f8f9fa;
+
+    border-radius: 8px;
+
+    border: 1px solid #e9ecef;
+
+    transition: all 0.2s ease;
+
+}
+
+
+
+.dining-field:hover {
+
+    background-color: #e9ecef;
+
+}
+
+
+
+.dining-field input[type="checkbox"] {
+
+    appearance: none;
+
+    -webkit-appearance: none;
+
+    width: 20px;
+
+    height: 20px;
+
+    border: 2px solid #adb5bd;
+
+    border-radius: 4px;
+
+    cursor: pointer;
+
+    position: relative;
+
+    transition: all 0.2s ease;
+
+}
+
+
+
+.dining-field input[type="checkbox"]:checked {
+
+    background-color: #000;
+
+    border-color: #000;
+
+}
+
+
+
+.dining-field input[type="checkbox"]:checked::after {
+
+    content: '✓';
+
+    color: white;
+
+    position: absolute;
+
+    top: 50%;
+
+    left: 50%;
+
+    transform: translate(-50%, -50%);
+
+    font-size: 14px;
+}
+
+
+.dining-field input[type="checkbox"]:hover {
+    border-color: #000;
+}
+
+
+.dining-field label {
+    cursor: pointer;
+    font-size: 16px;
+    color: #495057;
+    font-weight: 500;
+    user-select: none;
+}
+
+
+.dining-field:focus-within {
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Gallery Modal Styles */
+
+.gallery-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    z-index: 2000;
+    display: flex;
+    flex-direction: column;
+}
+
+
+.gallery-modal .modal-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #000;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.gallery-modal h3 {
+    margin: 0;
+    padding: 16px;
+    text-align: center;
+    color: white;
+    font-size: 1rem;
+    font-weight: 600;
+    background: rgba(0, 0, 0, 0.8);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+
+
+.image-gallery {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 60px 0 60px 0; /* Added padding for header and footer */
+    -webkit-overflow-scrolling: touch;
+}
+
+.thumbnail {
+    width: 100%;
+    height: auto;
+    min-height: 200px;
+    background: #000;
+    margin: 0;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+
+
+.thumbnail img {
+    max-width: 100%;
+    max-height: 80vh;
+    object-fit: contain;
+    border-radius: 8px;
+}
+
+.image-info {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 8px;
+    backdrop-filter: blur(4px);
+}
+
+.gallery-modal .cancel-btn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    border: none;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+
+
+/* Loading animation */
+.thumbnail.loading {
+    position: relative;
+    background: #1a1a1a;
+}
+
+
+.thumbnail.loading::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+        rgba(255,255,255,0) 0%,
+        rgba(255,255,255,0.1) 50%,
+        rgba(255,255,255,0) 100%);
+    animation: shimmer 1.5s infinite linear;
+}
+
+
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+
+}
+
+
+
+/* Zoom functionality */
+.thumbnail.zoomed img {
+    transform: scale(1.5);
+    transition: transform 0.3s ease;
+}
+
+/* Mobile-specific adjustments */
+
+@media (max-width: 480px) {
+    .image-gallery {
+        padding: 50px 0 50px 0;
+    }
+
+
+    .thumbnail {
+        min-height: 150px;
+        padding: 4px;
+    }
+
+    .image-info {
+        padding: 6px 10px;
+        font-size: 12px;
+    }
+
+    .gallery-modal .cancel-btn {
+        padding: 14px;
+    }
+
+    .gallery-modal h3 {
+        padding: 12px;
+        font-size: 0.9rem;
+    }
+}
+
+.scam-alert {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10000;
+    background-color: rgba(255, 59, 48, 0.95);
+    padding: 20px 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    animation: popIn 0.3s ease-out, shake 0.5s ease-in-out 0.3s;
+}
+
+
+.alert-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.alert-icon {
+    font-size: 32px;
+}
+
+
+.alert-text {
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+
+.alert-subtext {
+    color: white;
+    font-size: 18px;
+}
+
+
+
+.scam-alert.fade-out {
+    animation: fadeOut 0.5s ease-out forwards;
+}
+
+
+
+@keyframes popIn {
+
+    0% {
+        transform: translate(-50%, -50%) scale(0.5);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+}
+
+
+@keyframes shake {
+    0%, 100% { transform: translate(-50%, -50%); }
+    10%, 30%, 50%, 70%, 90% { transform: translate(-52%, -50%); }
+    20%, 40%, 60%, 80% { transform: translate(-48%, -50%); }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.8);
+    }
+}
+
+/* Multiple Uploads Modal Styles */
+.multiple-uploads-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.multiple-uploads-modal.show {
+    opacity: 1;
+}
+
+.multiple-uploads-modal .modal-content {
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: slideUp 0.3s ease forwards;
+}
+
+.multiple-uploads-modal .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+}
+
+.multiple-uploads-modal .modal-header h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #333;
+}
+
+.multiple-uploads-modal .close-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #666;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+
+.multiple-uploads-modal .uploads-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    max-height: 60vh;
+}
+
+.multiple-uploads-modal .modal-footer {
+    padding: 16px;
+    border-top: 1px solid #eee;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.multiple-uploads-modal .add-more-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background-color: #f5f5f5;
+    color: #333;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.multiple-uploads-modal .add-more-btn:hover {
+    background-color: #eee;
+}
+
+.multiple-uploads-modal .plus-icon {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.multiple-uploads-modal .submit-all-btn {
+    background-color: #000;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 14px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.multiple-uploads-modal .submit-all-btn:hover {
+    background-color: #333;
+}
+
+.validation-error {
+    color: red;
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+/* Image Entry Styles */
+.image-entry {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+    overflow: hidden;
+}
+
+.image-entry .image-preview {
+    position: relative;
+    height: 180px;
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.image-entry .image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.image-entry .delete-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.image-entry .delete-btn:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.image-entry .delete-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+.image-entry .entry-details {
+    padding: 16px;
+}
+
+.image-entry .form-group {
+    margin-bottom: 12px;
+}
+
+.image-entry .form-group label {
+    display: block;
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 4px;
+}
+
+.image-entry .input-with-icon {
+    position: relative;
+}
+
+.image-entry .currency-symbol {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+}
+
+.image-entry .amount-input {
+    padding-left: 24px;
+}
+
+.image-entry input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.2s;
+}
+
+.image-entry input:focus {
+    border-color: #000;
+    outline: none;
+}
+
+.image-entry .date-input-container {
+    position: relative;
+    display: flex;
+}
+
+.image-entry .date-input {
+    flex: 1;
+    padding-right: 40px;
+}
+
+.image-entry .calendar-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 40px;
+    background: none;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.image-entry .calendar-btn svg {
+    width: 20px;
+    height: 20px;
+    color: #666;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@media (max-width: 768px) {
+    .multiple-uploads-modal .modal-content {
+        width: 95%;
+        max-height: 95vh;
+    }
+
+    .image-entry .image-preview {
+        height: 150px;
+    }
+}
+
+@media (max-width: 480px) {
+    .multiple-uploads-modal .modal-header h3 {
+        font-size: 16px;
+    }
+
+    .image-entry .form-group label {
+        font-size: 13px;
+    }
+
+    .image-entry input {
+        padding: 8px 10px;
+        font-size: 13px;
+    }
+}
+
+/* Loading Modal Styles */
+
+.loading-modal {
+
+    position: fixed;
+
+    top: 0;
+
+    left: 0;
+
+    width: 100%;
+
+    height: 100%;
+
+    background: rgba(0, 0, 0, 0.85);
+
+    display: flex;
+
+    justify-content: center;
+
+    align-items: center;
+
+    z-index: 9999;
+
+    backdrop-filter: blur(5px);
+
+    -webkit-backdrop-filter: blur(5px);
+
+    transition: opacity 0.3s ease;
+
+}
+
+
+
+.loading-modal.fade-out {
+
+    opacity: 0;
+
+}
+
+
+
+.loading-content {
+
+    background: white;
+
+    padding: 2rem;
+
+    border-radius: 16px;
+
+    text-align: center;
+
+    width: 90%;
+
+    max-width: 350px;
+
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+
+    transform: translateY(0);
+
+    transition: transform 0.3s ease;
+
+    animation: modalAppear 0.3s ease-out;
+
+}
+
+
+
+@keyframes modalAppear {
+
+    from {
+
+        opacity: 0;
+
+        transform: translateY(20px);
+
+    }
+
+    to {
+
+        opacity: 1;
+
+        transform: translateY(0);
+
+    }
+
+}
+
+
+
+.loading-spinner {
+
+    width: 50px;
+
+    height: 50px;
+
+    border: 4px solid rgba(33, 150, 243, 0.2);
+
+    border-top: 4px solid #2196F3;
+
+    border-radius: 50%;
+
+    margin: 0 auto 1.5rem;
+
+    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+
+}
+
+
+
+.loading-message {
+
+    margin: 1rem 0;
+
+    color: #333;
+
+    font-size: 1.2rem;
+
+    font-weight: 500;
+
+    animation: pulse 2s infinite;
+
+}
+
+
+
+.progress-container {
+
+    margin-top: 1.5rem;
+
+}
+
+
+
+.progress-bar {
+
+    width: 100%;
+
+    height: 8px;
+
+    background: #f0f0f0;
+
+    border-radius: 4px;
+
+    overflow: hidden;
+
+    margin-bottom: 0.75rem;
+
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+
+}
+
+
+
+.progress-fill {
+
+    width: 0%;
+
+    height: 100%;
+
+    background: linear-gradient(90deg, #2196F3, #03A9F4);
+
+    border-radius: 4px;
+
+    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+    position: relative;
+
+    overflow: hidden;
+
+}
+
+
+
+.progress-fill::after {
+
+    content: '';
+
+    position: absolute;
+
+    top: 0;
+
+    left: 0;
+
+    right: 0;
+
+    bottom: 0;
+
+    background: linear-gradient(
+
+        90deg,
+
+        rgba(255, 255, 255, 0) 0%,
+
+        rgba(255, 255, 255, 0.3) 50%,
+
+        rgba(255, 255, 255, 0) 100%
+
+    );
+
+    animation: shimmer 1.5s infinite;
+
+    transform: translateX(-100%);
+
+}
+
+
+
+.progress-text {
+
+    font-size: 0.95rem;
+
+    color: #666;
+
+    font-weight: 500;
+
+    display: flex;
+
+    justify-content: space-between;
+
+    align-items: center;
+
+}
+
+
+
+.progress-text::before {
+
+    content: '';
+
+    display: inline-block;
+
+    width: 8px;
+
+    height: 8px;
+
+    background-color: #4CAF50;
+
+    border-radius: 50%;
+
+    margin-right: 8px;
+
+    animation: blink 1s infinite;
+
+}
+
+
+
+/* Animation Keyframes */
+
+@keyframes spin {
+
+    0% { transform: rotate(0deg); }
+
+    100% { transform: rotate(360deg); }
+
+}
+
+
+
+@keyframes pulse {
+
+    0%, 100% { opacity: 1; }
+
+    50% { opacity: 0.7; }
+
+}
+
+
+
+@keyframes shimmer {
+
+    100% { transform: translateX(100%); }
+
+}
+
+
+
+@keyframes blink {
+
+    0%, 100% { opacity: 1; }
+
+    50% { opacity: 0.5; }
+
+}
+
+
+
+/* Mobile Responsiveness */
+
+@media (max-width: 768px) {
+
+    .loading-content {
+
+        padding: 1.5rem;
+
+        max-width: 300px;
+
+    }
+
+    
+
+    .loading-spinner {
+
+        width: 40px;
+
+        height: 40px;
+
+        margin-bottom: 1rem;
+
+    }
+
+    
+
+    .loading-message {
+
+        font-size: 1.1rem;
+
+    }
+
+    
+
+    .progress-bar {
+
+        height: 6px;
+
+    }
+
+    
+
+    .progress-text {
+
+        font-size: 0.85rem;
+
+    }
+
+}
+
+
+
+/* Dark Mode Support */
+
+@media (prefers-color-scheme: dark) {
+
+    .loading-content {
+
+        background: #222;
+
+        color: #fff;
+
+    }
+
+    
+
+    .loading-message {
+
+        color: #fff;
+
+    }
+
+    
+
+    .progress-bar {
+
+        background: #333;
+
+    }
+
+    
+
+    .progress-text {
+
+        color: #aaa;
+
+    }
+
+}
+
+
+
+/* Interactive States */
+
+.loading-modal:active .loading-content {
+
+    transform: scale(0.98);
+
+}
+
+
+
+.loading-modal.interactive {
+
+    cursor: pointer;
+
+}
+
+
+
+.loading-modal.interactive .loading-content {
+
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+}
+
+
+
+.loading-modal.interactive .loading-content:hover {
+
+    transform: translateY(-2px);
+
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
+
+}
+
+
+
+/* Updated loading-cancel-btn styling */
+
+.loading-content .loading-cancel-btn,
+
+button.loading-cancel-btn {
+
+    background-color: #ff3b30 !important;
+
+    color: white !important;
+
+    border: none !important;
+
+    padding: 10px 20px !important;
+
+    border-radius: 20px !important;
+
+    font-weight: 500 !important;
+
+    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.2) !important;
+
+    display: flex !important;
+
+    align-items: center !important;
+
+    justify-content: center !important;
+
+    text-align: center !important;
+
+    margin: 16px auto 0 !important;
+
+    max-width: none !important;
+
+    width: auto !important;
+
+}
+
+
+
+.loading-content .loading-cancel-btn:hover,
+
+button.loading-cancel-btn:hover {
+
+    background-color: #ff4f45 !important;
+
+    transform: translateY(-2px) !important;
+
+    box-shadow: 0 4px 8px rgba(255, 59, 48, 0.3) !important;
+
+}
+
+
+
+/* Fix for iOS devices where button styling can be inconsistent */
+
+.loading-content .loading-cancel-btn:before,
+
+button.loading-cancel-btn:before {
+
+    content: "✖ ";
+
+    margin-right: 5px;
+
+}
+
+
+
+/* Accessibility */
+
+.loading-modal:focus-visible {
+
+    outline: 2px solid #2196F3;
+
+    outline-offset: 2px;
+
+}
+
+
+
+.loading-cancel-btn:focus-visible {
+
+    outline: 2px solid #2196F3;
+
+    outline-offset: 2px;
+
+}
+
+
+
+/* Loading States */
+
+.loading-state {
+
+    display: flex;
+
+    align-items: center;
+
+    margin-top: 1rem;
+
+}
+
+
+
+.loading-state-icon {
+
+    width: 20px;
+
+    height: 20px;
+
+    margin-right: 10px;
+
+}
+
+
+
+.loading-state-text {
+
+    font-size: 0.9rem;
+
+    color: #666;
+
+}
+
+
+
+.loading-state.completed .loading-state-icon {
+
+    color: #4CAF50;
+
+}
+
+
+
+.loading-state.pending .loading-state-icon {
+
+    color: #FFC107;
+
+}
+
+
+
+.loading-state.error .loading-state-icon {
+
+    color: #F44336;
+
+}
+
+
+
+/* Time Estimate Styles */
+
+.time-estimate {
+
+    font-size: 0.85rem;
+
+    color: #777;
+
+    margin-top: 8px;
+
+    font-style: italic;
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+}
+
+
+
+.time-estimate::before {
+
+    content: '⏱️';
+
+    margin-right: 6px;
+
+    font-style: normal;
+
+}
+
+
+
+/* Pulsing animation for "Almost done..." state */
+
+.time-estimate:has(text="Almost done...") {
+
+    animation: pulse 1.5s infinite;
+
+    color: #4CAF50;
+
+}
+
+
+
+/* Progress stages */
+
+.loading-stage {
+
+    display: flex;
+
+    flex-direction: column;
+
+    margin-top: 12px;
+
+    gap: 8px;
+
+}
+
+
+
+.stage-item {
+
+    display: flex;
+
+    align-items: center;
+
+    font-size: 0.85rem;
+
+    color: #777;
+
+    padding: 6px 10px;
+
+    border-radius: 4px;
+
+    background: #f8f8f8;
+
+}
+
+
+
+.stage-item.active {
+
+    background: rgba(33, 150, 243, 0.1);
+
+    color: #2196F3;
+
+    font-weight: 500;
+
+}
+
+
+
+.stage-item.completed {
+
+    background: rgba(76, 175, 80, 0.1);
+
+    color: #4CAF50;
+
+}
+
+
+
+.stage-icon {
+
+    margin-right: 8px;
+
+    width: 16px;
+
+    height: 16px;
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+}
+
+
+
+.stage-item.active .stage-icon::before {
+
+    content: '▶️';
+
+}
+
+
+
+.stage-item.completed .stage-icon::before {
+
+    content: '✅';
+
+}
+
+
+
+.stage-item:not(.active):not(.completed) .stage-icon::before {
+
+    content: '⏳';
+
+    opacity: 0.5;
+
+}
+
+
+
+/* Network speed indicator */
+
+.network-speed {
+
+    font-size: 0.75rem;
+
+    color: #888;
+
+    margin-top: 4px;
+
+    text-align: right;
+
+}
+
+
+
+/* Responsive adjustments */
+
+@media (max-width: 768px) {
+
+    .time-estimate {
+
+        font-size: 0.8rem;
+
+    }
+
+    
+
+    .stage-item {
+
+        font-size: 0.8rem;
+
+        padding: 4px 8px;
+
+    }
+
+    
+
+    .network-speed {
+
+        font-size: 0.7rem;
+
+    }
+
+}
+
+
+
+/* Dark mode support */
+
+@media (prefers-color-scheme: dark) {
+
+    .time-estimate {
+
+        color: #aaa;
+
+    }
+
+    
+
+    .stage-item {
+
+        background: #333;
+
+        color: #bbb;
+
+    }
+
+    
+
+    .stage-item.active {
+
+        background: rgba(33, 150, 243, 0.2);
+
+        color: #64b5f6;
+
+    }
+
+    
+
+    .stage-item.completed {
+
+        background: rgba(76, 175, 80, 0.2);
+
+        color: #81c784;
+
+    }
+
+    
+
+    .network-speed {
+
+        color: #999;
+
+    }
+
+}
+
+
+
+/* Animation for upload speed fluctuations */
+
+@keyframes speedFluctuation {
+
+    0% { opacity: 0.7; }
+
+    50% { opacity: 1; }
+
+    100% { opacity: 0.7; }
+
+}
+
+
+
+.network-speed.fluctuating {
+
+    animation: speedFluctuation 2s infinite;
+
+}
+
+
+
+/* Loading note styles */
+
+.loading-note {
+
+    font-size: 0.85rem;
+
+    color: #777;
+
+    margin-top: 12px;
+
+    text-align: center;
+
+    font-style: italic;
+
+}
+
+
+
+/* Cancel button styles */
+
+.loading-cancel-btn {
+
+    margin-top: 16px;
+
+    padding: 10px 20px;
+
+    background: transparent;
+
+    border: 1px solid #ddd;
+
+    border-radius: 20px;
+
+    color: #666;
+
+    font-size: 0.9rem;
+
+    cursor: pointer;
+
+    transition: all 0.2s ease;
+
+    display: block;
+
+    width: 100%;
+
+    max-width: 200px;
+
+    margin-left: auto;
+
+    margin-right: auto;
+
+}
+
+
+
+.loading-cancel-btn:hover {
+
+    background: #f5f5f5;
+
+    color: #333;
+
+    border-color: #ccc;
+
+}
+
+
+
+.loading-cancel-btn:active {
+
+    transform: scale(0.98);
+
+}
+
+
+
+/* Floating action button styles */
+
+.floating-action-btn {
+
+    position: fixed;
+
+    bottom: 20px;
+
+    right: 20px;
+
+    background: #2196F3;
+
+    color: white;
+
+    border-radius: 50px;
+
+    padding: 8px 16px;
+
+    display: flex;
+
+    align-items: center;
+
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+    cursor: pointer;
+
+    z-index: 9000;
+
+    transition: all 0.3s ease;
+
+    overflow: hidden;
+
+    max-width: 200px;
+
+}
+
+
+
+.floating-action-btn.hidden {
+
+    transform: translateY(100px);
+
+    opacity: 0;
+
+}
+
+
+
+.floating-action-btn:hover {
+
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+
+    transform: translateY(-2px);
+
+}
+
+
+
+.fab-icon {
+
+    width: 32px;
+
+    height: 32px;
+
+    border-radius: 50%;
+
+    background: rgba(255, 255, 255, 0.2);
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    margin-right: 8px;
+
+}
+
+
+
+.fab-spinner {
+
+    width: 20px;
+
+    height: 20px;
+
+    border: 2px solid rgba(255, 255, 255, 0.3);
+
+    border-top: 2px solid white;
+
+    border-radius: 50%;
+
+    animation: spin 1s linear infinite;
+
+}
+
+
+
+.fab-icon.completed {
+
+    background: #4CAF50;
+
+}
+
+
+
+.fab-icon.error {
+
+    background: #F44336;
+
+}
+
+
+
+.fab-label {
+
+    font-size: 14px;
+
+    font-weight: 500;
+
+    white-space: nowrap;
+
+}
+
+
+
+/* Completion modal styles */
+
+.completion-modal {
+
+    position: fixed;
+
+    top: 0;
+
+    left: 0;
+
+    width: 100%;
+
+    height: 100%;
+
+    background: rgba(0, 0, 0, 0.7);
+
+    display: flex;
+
+    justify-content: center;
+
+    align-items: center;
+
+    z-index: 9999;
+
+    opacity: 0;
+
+    transition: opacity 0.3s ease;
+
+}
+
+
+
+.completion-modal.show {
+
+    opacity: 1;
+
+}
+
+
+
+.completion-content {
+
+    background: white;
+
+    padding: 30px;
+
+    border-radius: 16px;
+
+    text-align: center;
+
+    width: 90%;
+
+    max-width: 400px;
+
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+
+    transform: translateY(20px);
+
+    transition: transform 0.3s ease;
+
+}
+
+
+
+.completion-modal.show .completion-content {
+
+    transform: translateY(0);
+
+}
+
+
+
+.completion-icon {
+
+    width: 80px;
+
+    height: 80px;
+
+    border-radius: 50%;
+
     display: flex;
-    justify-content: center;
+
     align-items: center;
-    cursor: pointer;
+
+    justify-content: center;
+
+    margin: 0 auto 20px;
+
+    color: white;
+
 }
 
-.image-entry .calendar-btn svg {
-    width: 20px;
-    height: 20px;
+
+
+.completion-icon.success {
+
+    background: #4CAF50;
+
+    animation: scaleIn 0.5s ease-out;
+
+}
+
+
+
+.completion-icon.partial {
+
+    background: #FF9800;
+
+    animation: scaleIn 0.5s ease-out;
+
+}
+
+
+
+.completion-icon.error {
+
+    background: #F44336;
+
+    animation: scaleIn 0.5s ease-out;
+
+}
+
+
+
+@keyframes scaleIn {
+
+    0% { transform: scale(0); opacity: 0; }
+
+    100% { transform: scale(1); opacity: 1; }
+
+}
+
+
+
+.completion-modal h3 {
+
+    margin: 0 0 10px 0;
+
+    color: #333;
+
+    font-size: 1.5rem;
+
+}
+
+
+
+.completion-message {
+
     color: #666;
+
+    margin-bottom: 20px;
+
+    font-size: 1rem;
+
 }
 
-@keyframes slideUp {
-    from {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
+
+
+.completion-actions {
+
+    display: flex;
+
+    gap: 10px;
+
+    justify-content: center;
+
+}
+
+
+
+.completion-btn {
+
+    padding: 12px 20px;
+
+    border-radius: 8px;
+
+    font-size: 14px;
+
+    font-weight: 500;
+
+    cursor: pointer;
+
+    transition: all 0.2s ease;
+
+    border: none;
+
+}
+
+
+
+.completion-btn.primary {
+
+    background: #2196F3;
+
+    color: white;
+
+}
+
+
+
+.completion-btn.primary:hover {
+
+    background: #1976D2;
+
+}
+
+
+
+.completion-btn.secondary {
+
+    background: #f5f5f5;
+
+    color: #333;
+
+    border: 1px solid #ddd;
+
+}
+
+
+
+.completion-btn.secondary:hover {
+
+    background: #e5e5e5;
+
 }
 
+
+
+/* Mobile responsiveness */
+
 @media (max-width: 768px) {
-    .multiple-uploads-modal .modal-content {
-        width: 95%;
-        max-height: 95vh;
-    }
 
-    .image-entry .image-preview {
-        height: 150px;
+    .floating-action-btn {
+
+        bottom: 16px;
+
+        right: 16px;
+
+        padding: 6px 12px;
+
     }
-}
 
-@media (max-width: 480px) {
-    .multiple-uploads-modal .modal-header h3 {
-        font-size: 16px;
+    
+
+    .fab-icon {
+
+        width: 28px;
+
+        height: 28px;
+
     }
 
-    .image-entry .form-group label {
+    
+
+    .fab-label {
+
         font-size: 13px;
+
     }
 
-    .image-entry input {
-        padding: 8px 10px;
+    
+
+    .completion-content {
+
+        padding: 24px;
+
+    }
+
+    
+
+    .completion-icon {
+
+        width: 70px;
+
+        height: 70px;
+
+    }
+
+    
+
+    .completion-modal h3 {
+
+        font-size: 1.3rem;
+
+    }
+
+    
+
+    .completion-message {
+
+        font-size: 0.9rem;
+
+    }
+
+    
+
+    .completion-btn {
+
+        padding: 10px 16px;
+
         font-size: 13px;
+
     }
+
 }
+
+
+
+/* Dark mode support */
+
+@media (prefers-color-scheme: dark) {
+
+    .loading-note {
+
+        color: #aaa;
+
+    }
+
+    
+
+    .loading-cancel-btn {
+
+        color: #bbb;
+
+        border-color: #444;
+
+    }
+
+    
+
+    .loading-cancel-btn:hover {
+
+        background: #333;
+
+        color: #eee;
+
+        border-color: #555;
+
+    }
+
+    
+
+    .completion-content {
+
+        background: #222;
+
+    }
+
+    
+
+    .completion-modal h3 {
+
+        color: #eee;
+
+    }
+
+    
+
+    .completion-message {
+
+        color: #bbb;
+
+    }
+
+    
+
+    .completion-btn.secondary {
+
+        background: #333;
+
+        color: #eee;
+
+        border-color: #555;
+
+    }
+
+    
+
+    .completion-btn.secondary:hover {
+
+        background: #444;
+
+    }
+
+}
\ No newline at end of file
diff --git a/server.js b/server.js
index 80956b2..8fec29f 100644
--- a/server.js
+++ b/server.js
@@ -67,9 +67,14 @@ app.get('/', (req, res) => {
 const customerSheets = {
     'a8358': 'Ambient',      // CUSTOMER_1
     '0e702': 'Dhapa',    // CUSTOMER_2
-    '571b6': 'Kaldens',    // CUSTOMER_3
+    '571b6': 'RoofTop',    // CUSTOMER_3
     'be566': 'MeatShop',    // CUSTOMER_4
-    '72d72': 'Customer5'     // CUSTOMER_5
+    '72d72': 'OmBakery',     // CUSTOMER_5
+    'HFpuU': 'SunRiseBakery',     // CUSTOMER_6
+    'eqmB4': 'JunctionMart',     // CUSTOMER_7
+    't0Ctf': 'Customer8',     // CUSTOMER_8
+    'ChQsf': 'Customer9',     // CUSTOMER_9
+    'FVQbb': 'Customer10',     // CUSTOMER_10
 };
 
 function pickCustomerSheet(customerID) {
@@ -79,11 +84,21 @@ function pickCustomerSheet(customerID) {
         case '0e702':
             return process.env.GOOGLE_SHEETS_SPREADSHEET_DHAPA_ID;
         case '571b6':
-            return process.env.GOOGLE_SHEETS_SPREADSHEET_KALDENS_ID;
+            return process.env.GOOGLE_SHEETS_SPREADSHEET_ROOFTOP_ID;
         case 'be566':
             return process.env.GOOGLE_SHEETS_SPREADSHEET_MEATSHOP_ID;
-        case '72d72':
-            return process.env.GOOGLE_SHEETS_SPREADSHEET_MEATSHOP_ID;
+            case '72d72':
+            return process.env.GOOGLE_SHEETS_SPREADSHEET_OMBAKERY_ID;
+        case 'HFpuU':
+            return process.env.GOOGLE_SHEETS_SPREADSHEET_SUNRISEBAKERY_ID;
+        case 'eqmB4':
+            return process.env.GOOGLE_SHEETS_SPREADSHEET_JUNCTIONMART_ID;
+        case 't0Ctf':
+            return process.env.GOOGLE_SHEETS_SPREADSHEET_CUSTOMER8_ID;
+        case 'ChQsf':
+            return process.env.GOOGLE_SHEETS_SPREADSHEET_CUSTOMER9_ID;
+        case 'FVQbb':
+            return process.env.GOOGLE_SHEETS_SPREADSHEET_CUSTOMER10_ID;
     }
 }
 
@@ -1302,31 +1317,111 @@ app.post('/upload-receipt', async (req, res) => {
     }
 });
 
-// Optional: Add endpoint to regenerate signed URL for existing images
-// app.get('/get-image-url', async (req, res) => {
-//     try {
-//         const { key } = req.query;
-        
-//         const command = new GetObjectCommand({
-//             Bucket: process.env.AWS_BUCKET_NAME,
-//             Key: key
-//         });
-        
-//         const signedUrl = await getSignedUrl(s3Client, command, { 
-//             expiresIn: 3600 
-//         });
-
-//         res.json({
-//             success: true,
-//             url: signedUrl
-//         });
-//     } catch (error) {
-//         console.error('Error generating signed URL:', error);
-//         res.status(500).json({
-//             success: false,
-//             error: 'Failed to generate URL'
-//         });
-//     });
+app.get('/get-daily-images', async (req, res) => {
+    const { customerID, date } = req.query;
+    try {
+        const tableName = checkCurrentUser(customerID);
+        let allContents = [];
+        let continuationToken = undefined;
+        // Loop until we get all objects
+
+        do {
+            const command = new ListObjectsV2Command({
+                Bucket: process.env.AWS_BUCKET_NAME,
+                Prefix: `receipts/${tableName}/`,
+                ContinuationToken: continuationToken
+            });
+
+            const data = await s3Client.send(command);
+            allContents = [...allContents, ...(data.Contents || [])];
+            continuationToken = data.NextContinuationToken;
+        } while (continuationToken);
+        // Create target date in Dhaka timezone once
+        const targetDateDhaka = new Date(date ? date : new Date().toLocaleString('en-US', { timeZone: 'Asia/Dhaka' }));
+        targetDateDhaka.setHours(0, 0, 0, 0);
+        const selectedDateImages = [];
+        let index = 0;
+        for (const object of allContents) {
+            // First conversion to Dhaka time
+            const bdFileDate = new Date(object.LastModified.toLocaleString('en-US', { timeZone: 'Asia/Dhaka' }));
+            // Compare dates using simple date comparison after timezone conversion
+            const isSameDate = bdFileDate.getFullYear() === targetDateDhaka.getFullYear() && bdFileDate.getMonth() === targetDateDhaka.getMonth() && bdFileDate.getDate() === targetDateDhaka.getDate();
+
+            if (isSameDate) {
+                const [viewUrl, downloadUrl] = await Promise.all([
+                    getSignedUrl(s3Client, new GetObjectCommand({
+                        Bucket: process.env.AWS_BUCKET_NAME,
+                        Key: object.Key,
+                        ResponseContentType: 'image/jpeg',
+                        ResponseContentDisposition: 'inline',
+                        ResponseCacheControl: 'public, max-age=3600'
+                    }), { expiresIn: 3600 }),
+                    getSignedUrl(s3Client, new GetObjectCommand({
+                        Bucket: process.env.AWS_BUCKET_NAME,
+                        Key: object.Key,
+                        ResponseContentDisposition: `attachment; filename="${object.Key.split('/').pop()}"`,
+                        ResponseCacheControl: 'private, no-cache'
+                    }), { expiresIn: 3600 })
+                ]);
+
+                const metadata = await s3Client.send(new HeadObjectCommand({
+                    Bucket: process.env.AWS_BUCKET_NAME,
+                    Key: object.Key
+                }));
+
+                // Don't specify timezone again in timestamp formatting since bdFileDate is already in Dhaka time
+                const timestamp = bdFileDate.toLocaleString('en-US', {
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: true
+                });
+
+                selectedDateImages.push({
+                    id: object.LastModified.getTime(),
+                    viewUrl,
+                    downloadUrl,
+                    timestamp,
+                    size: formatFileSize(metadata.ContentLength),
+                    filename: object.Key.split('/').pop(),
+                    lastModified: bdFileDate.toISOString(),
+                    index: index++
+                });
+            }
+        }
+
+        // Sort by LastModified timestamp (newest first)
+        selectedDateImages.sort((a, b) => b.id - a.id);
+        res.json({
+            success: true,
+            images: selectedDateImages,
+            count: selectedDateImages.length,
+            date: targetDateDhaka.toLocaleDateString('en-US', {
+                timeZone: 'Asia/Dhaka',
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            })
+        });
+
+    } catch (error) {
+        console.error('Error fetching daily images:', error);
+        res.status(500).json({
+            success: false,
+            error: 'Failed to fetch daily images'
+        });
+    }
+});
+
+
+
+// Helper function to format file sizes
+
+function formatFileSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+    else return (bytes / 1048576).toFixed(1) + ' MB';
+}
 
 app.post('/multiple-vision-api', async (req, res) => {
     const { images, customerID, deviceInfo, screenResolution, paymentMethod, startTime } = req.body;
@@ -1340,9 +1435,61 @@ app.post('/multiple-vision-api', async (req, res) => {
     }
 
     try {
+        // First upload all images to S3 and get the URLs
+        const imagesWithS3Urls = await Promise.all(images.map(async (img, index) => {
+            try {
+                // Convert base64 to buffer
+                const buffer = Buffer.from(img.image, 'base64');
+                // Generate unique filename
+                const timestamp = Date.now();
+                let tableName;
+
+                try {
+                    tableName = checkCurrentUser(customerID);
+                } catch (e) {
+                    // Fall back to 'unknown' if customer ID is invalid
+                    tableName = 'unknown';
+                }
+
+                const uniqueFilename = `receipts/${tableName}/${timestamp}_${index}_${img.filename || 'receipt.jpg'}`;
+                // Set up S3 upload parameters
+
+                const uploadParams = {
+                    Bucket: process.env.AWS_BUCKET_NAME,
+                    Key: uniqueFilename,
+                    Body: buffer,
+                    ContentType: 'image/jpeg'
+                };
+
+                // Upload to S3
+                const command = new PutObjectCommand(uploadParams);
+                await s3Client.send(command);
+
+                // Generate pre-signed URL
+                const getObjectCommand = new GetObjectCommand({
+                    Bucket: process.env.AWS_BUCKET_NAME,
+                    Key: uniqueFilename
+                });
+
+                const signedUrl = await getSignedUrl(s3Client, getObjectCommand, { 
+                    expiresIn: 86400 // URL valid for 24 hours
+                });
+
+                return {
+                    ...img,
+                    imageUrl: signedUrl,
+                    imageFileName: uniqueFilename
+                };
+
+            } catch (error) {
+                console.error(`Error uploading image ${index} to S3:`, error);
+                // Return the original image without S3 details
+                return img;
+            }
+        }));
         // Prepare the API request for Google Vision API
         // This is a batch request with multiple images in one call
-        const requests = images.map(img => ({
+        const requests = imagesWithS3Urls.map(img => ({
             image: {
                 content: img.image
             },
@@ -1391,10 +1538,12 @@ app.post('/multiple-vision-api', async (req, res) => {
                     const isReceipt = receiptData.Amount || receiptData.ReferenceNo || receiptData.Bank !== 'Unknown';
                     
                     if (isReceipt) {
-                        // Add the corresponding image filename and index
+                        // Add the corresponding image filename, index, and S3 URL
                         resultsArray.push({
-                            index: images[i].index,
-                            filename: images[i].filename,
+                            index: imagesWithS3Urls[i].index,
+                            filename: imagesWithS3Urls[i].filename,
+                            imageUrl: imagesWithS3Urls[i].imageUrl,
+                            imageFileName: imagesWithS3Urls[i].imageFileName,
                             amount: receiptData.Amount,
                             referenceNo: receiptData.ReferenceNo,
                             Date: receiptData.Date,
@@ -1406,8 +1555,10 @@ app.post('/multiple-vision-api', async (req, res) => {
                     } else {
                         // Add a failed result
                         resultsArray.push({
-                            index: images[i].index,
-                            filename: images[i].filename,
+                            index: imagesWithS3Urls[i].index,
+                            filename: imagesWithS3Urls[i].filename,
+                            imageUrl: imagesWithS3Urls[i].imageUrl,
+                            imageFileName: imagesWithS3Urls[i].imageFileName,
                             error: 'No receipt data detected',
                             recognizedText
                         });
@@ -1415,8 +1566,10 @@ app.post('/multiple-vision-api', async (req, res) => {
                 } else {
                     // Add a failed result due to low confidence
                     resultsArray.push({
-                        index: images[i].index,
-                        filename: images[i].filename,
+                        index: imagesWithS3Urls[i].index,
+                        filename: imagesWithS3Urls[i].filename,
+                        imageUrl: imagesWithS3Urls[i].imageUrl,
+                        imageFileName: imagesWithS3Urls[i].imageFileName,
                         error: 'Text confidence score is below threshold',
                         confidence: confidence,
                         threshold: 0.7